/* ============================================================
   MobDial — Dark Sovereign Design System
   Colors & Type Tokens
   
   Primary aesthetic: Dark, enterprise-grade, "operations-center" feel.
   Cyan accent (#00A8E0) on near-black surfaces (#05060A).
   Monospace accents create a terminal/telemetry vibe.
   
   Source: apps/web/src/styles/dark-sovereign.css
           apps/site/tailwind.config.ts
   ============================================================ */

/* ─── BRAND DISPLAY FONT · Domino Jack (4 variants) ─── */
@font-face{font-family:'Domino Jack';src:url('fonts/DominoJackChrome-l0dq.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Domino Jack';src:url('fonts/DominoJackBevel-yRjZ.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Domino Jack';src:url('fonts/DominoJackEngraved-BwGn.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Domino Jack';src:url('fonts/DominoJackPunch-PEZE.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Domino Jack Chrome';src:url('fonts/DominoJackChrome-l0dq.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Domino Jack Bevel';src:url('fonts/DominoJackBevel-yRjZ.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Domino Jack Engraved';src:url('fonts/DominoJackEngraved-BwGn.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Domino Jack Punch';src:url('fonts/DominoJackPunch-PEZE.ttf') format('truetype');font-display:swap}

/* Google Fonts — body + mono fallbacks */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ─── SURFACES (dark-first; this is the primary experience) ─────── */
  --md-void:            #05060A;   /* page background — deepest */
  --md-obsidian:        #0A0C12;   /* section bands, footer */
  --md-surface:         #10131A;   /* cards, elevated panels */
  --md-surface-1:       #0C0E15;   /* web app — cards/sidebar */
  --md-surface-2:       #14171F;   /* web app — popover, modal */
  --md-elevated:        #181C26;   /* hover + raised surfaces */

  /* ─── BORDERS ───────────────────────────────────────────────────── */
  --md-border-subtle:   #1E2230;   /* dividers */
  --md-border-default:  #2A2F3B;   /* inputs, cards */

  /* ─── BRAND / SEMANTIC (CRT-Phosphor system) ─────────────────────── */
  /* Canonical palette — same green as the answer button, used everywhere */
  --md-brand:           #12FFA0;   /* primary CTA, links, focus — answer-button green */
  --md-brand-hover:     #4DFFB8;   /* hover state */
  --md-brand-50:        #DDFFEE;
  --md-brand-100:       #B0FFD6;
  --md-brand-200:       #82FFC1;
  --md-brand-300:       #4DFFB8;
  --md-brand-400:       #2EFFA8;
  --md-brand-500:       #12FFA0;   /* canonical neon phosphor green */
  --md-brand-600:       #0FD884;
  --md-brand-700:       #0BA365;
  --md-brand-contrast:  #05060A;   /* text ON brand — always void */
  /* Support hues */
  --md-brand-red:       #FF3B5C;   /* neon red — alerts, danger, kill */
  --md-brand-red-glow:  #FF6B82;
  --md-brand-violet:    #6B2BC4;   /* deep violet — premium, AI tags */
  --md-brand-blue:      #00E5FF;   /* neon cyan — info chips, accent cap */

  /* ─── TEXT ──────────────────────────────────────────────────────── */
  --md-fg:              #FFFFFF;   /* headings + body on dark */
  --md-fg-secondary:    #A8B0C0;   /* secondary labels */
  --md-fg-tertiary:     #6B7280;   /* disabled only — fails AA */
  --md-fg-muted:        #8A94A6;   /* site.ds-muted */

  /* ─── SEMANTIC (canonical — used across the whole design) ──────── */
  --md-success:         #12FFA0;   /* online · confirmed · live · paid */
  --md-warning:         #FFD60A;   /* caution · review · pending · hi-vis saffron */
  --md-danger:          #FF3B5C;   /* error · blocked · destructive · crimson */
  --md-info:            #00E5FF;   /* brand · focus · link · neon cyan */
  --md-warning-amber:   #FFD60A;   /* alias for legacy refs */
  --md-danger-elevated: #FF6B82;   /* errors on surface-2 (modals) */
  --md-crimson:         #FF3B5C;

  /* ─── CALL-STATE · pure neon (6 status tokens) ─────────────────── */
  --color-status-waiting:    #00FFFF;   /* pure cyan · awaiting carrier */
  --color-status-connected:  #0BFF01;   /* pure green · in-call */
  --color-status-ringing:    #FDFE02;   /* pure yellow · ringing */
  --color-status-queued:     #4A64FF;   /* lifted blue · queued (WCAG fix) */
  --color-status-voicemail:  #FE00F6;   /* hot magenta · voicemail */
  --color-status-ended:      #FE0000;   /* pure red · hangup / dropped */
  /* Legacy aliases — keep older components working */
  --md-call-active:     var(--color-status-connected);
  --md-call-ringing:    var(--color-status-ringing);
  --md-call-ended:      var(--color-status-ended);
  --md-call-hold:       var(--color-status-waiting);
  --md-call-queued:     var(--color-status-queued);
  --md-call-voicemail:  var(--color-status-voicemail);
  --md-call-muted:      #6B7280;

  /* ─── GLOWS (CRT-phosphor signature) ───────────────────────────── */
  --md-glow-accent-sm:  0 0 20px rgba(18, 255, 160, 0.35);
  --md-glow-accent-md:  0 0 40px rgba(18, 255, 160, 0.45);
  --md-glow-accent-lg:  0 0 60px rgba(18, 255, 160, 0.55);
  --md-glow-red:        0 0 24px rgba(255, 59, 92, 0.45);
  --md-glow-violet:     0 0 24px rgba(107, 43, 196, 0.50);
  --md-glow-blue:       0 0 24px rgba(0, 229, 255, 0.40);
  --md-glow-success:    0 0 20px rgba(18, 255, 160, 0.40);
  --md-glow-success-lg: 0 0 40px rgba(18, 255, 160, 0.25);
  --md-glow-warning:    0 0 20px rgba(255, 214, 10, 0.40);
  --md-glow-info:       0 0 20px rgba(0, 229, 255, 0.40);
  --md-glow-danger:     0 0 20px rgba(255, 59, 92, 0.40);
  --md-shadow-card:     0 4px 24px rgba(0, 0, 0, 0.30);
  --md-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.50);
  --md-shadow-modal:    0 16px 64px rgba(0, 0, 0, 0.60);

  /* ─── GRADIENTS ─────────────────────────────────────────────────── */
  --md-gradient-brand:    linear-gradient(135deg, #12FFA0 0%, #00E5FF 100%);
  --md-gradient-hero:     radial-gradient(ellipse at top, rgba(18,255,160,0.18) 0%, transparent 60%);
  --md-gradient-surface:  linear-gradient(180deg, #10131A 0%, #05060A 100%);
  --md-gradient-text:     linear-gradient(135deg, #FFFFFF 0%, #12FFA0 100%);
  --md-gradient-fire:     linear-gradient(135deg, #FF3B5C 0%, #6B2BC4 100%);
  --md-grid-pattern:
    linear-gradient(rgba(30,34,48,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,34,48,0.5) 1px, transparent 1px);

  /* ─── SPACING (8-pt grid) ───────────────────────────────────────── */
  --md-space-1:  0.25rem;   /*  4px */
  --md-space-2:  0.5rem;    /*  8px */
  --md-space-3:  0.75rem;   /* 12px */
  --md-space-4:  1rem;      /* 16px */
  --md-space-5:  1.25rem;   /* 20px */
  --md-space-6:  1.5rem;    /* 24px */
  --md-space-8:  2rem;      /* 32px */
  --md-space-10: 2.5rem;    /* 40px */
  --md-space-12: 3rem;      /* 48px */
  --md-space-16: 4rem;      /* 64px */
  --md-space-20: 5rem;      /* 80px */
  --md-space-24: 6rem;      /* 96px */

  /* ─── RADII ─────────────────────────────────────────────────────── */
  --md-radius-sm:   0.25rem;  /*  4px — tight, terminal */
  --md-radius-md:   0.5rem;   /*  8px — standard */
  --md-radius-lg:   0.75rem;  /* 12px — cards */
  --md-radius-xl:   1rem;     /* 16px — feature cards */
  --md-radius-2xl:  1.5rem;   /* 24px — hero modals */
  --md-radius-full: 9999px;   /* pills, avatars */

  /* ─── TYPOGRAPHY FAMILIES ───────────────────────────────────────── */
  /* Display: Domino Jack (brand) — 4 variants: Chrome 400, Bevel 600, Engraved 700, Punch 800 */
  --md-font-display: 'Domino Jack', 'Sora', system-ui, -apple-system, sans-serif;
  --md-font-display-chrome:   'Domino Jack Chrome', 'Domino Jack', 'Sora', sans-serif;
  --md-font-display-bevel:    'Domino Jack Bevel', 'Domino Jack', 'Sora', sans-serif;
  --md-font-display-engraved: 'Domino Jack Engraved', 'Domino Jack', 'Sora', sans-serif;
  --md-font-display-punch:    'Domino Jack Punch', 'Domino Jack', 'Sora', sans-serif;
  /* Body/UI: DM Sans + Inter as fallback (Geist in production) */
  --md-font-sans:    'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  /* Mono: the "telemetry voice" — JetBrains Mono */
  --md-font-mono:    'JetBrains Mono', 'Geist Mono', ui-monospace, 'Menlo', monospace;

  /* ─── TYPE SCALE ────────────────────────────────────────────────── */
  --md-text-display-2xl: 3.5rem;    /* 56px — hero */
  --md-text-display-xl:  3rem;      /* 48px */
  --md-text-display-lg:  2.25rem;   /* 36px — section h2 */
  --md-text-display-md:  1.875rem;  /* 30px */
  --md-text-display-sm:  1.5rem;    /* 24px */
  --md-text-body-lg:     1.125rem;  /* 18px */
  --md-text-body-md:     1rem;      /* 16px */
  --md-text-body-sm:     0.875rem;  /* 14px */
  --md-text-label-md:    0.8125rem; /* 13px */
  --md-text-label-sm:    0.75rem;   /* 12px */

  /* ─── MOTION ────────────────────────────────────────────────────── */
  --md-duration-fast:    120ms;
  --md-duration-std:     200ms;
  --md-duration-slow:    400ms;
  --md-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --md-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   SEMANTIC HTML ELEMENT STYLES
   Opt-in: apply `.md-typography` to a container to activate.
   ============================================================ */

.md-typography {
  font-family: var(--md-font-sans);
  color: var(--md-fg);
  background: var(--md-void);
  line-height: 1.6;
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
}

.md-typography h1,
.md-typography .md-h1 {
  font-family: var(--md-font-display);
  font-size: var(--md-text-display-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--md-fg);
  text-transform: uppercase;          /* signature MobDial move */
}

.md-typography h2,
.md-typography .md-h2 {
  font-family: var(--md-font-display);
  font-size: var(--md-text-display-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--md-fg);
  text-transform: uppercase;
}

.md-typography h3,
.md-typography .md-h3 {
  font-family: var(--md-font-display);
  font-size: var(--md-text-display-md);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--md-fg);
}

.md-typography h4,
.md-typography .md-h4 {
  font-family: var(--md-font-display);
  font-size: var(--md-text-display-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--md-fg);
}

.md-typography p,
.md-typography .md-body {
  font-size: var(--md-text-body-md);
  line-height: 1.6;
  color: var(--md-fg-muted);
}

.md-typography .md-lead {
  font-size: var(--md-text-body-lg);
  line-height: 1.6;
  color: var(--md-fg-muted);
}

.md-typography small,
.md-typography .md-small {
  font-size: var(--md-text-body-sm);
  color: var(--md-fg-muted);
}

.md-typography .md-label,
.md-typography label {
  font-family: var(--md-font-mono);
  font-size: var(--md-text-label-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-fg-muted);
}

.md-typography code,
.md-typography .md-code {
  font-family: var(--md-font-mono);
  font-size: 0.9em;
  background: var(--md-surface);
  border: 1px solid var(--md-border-subtle);
  padding: 0.1em 0.4em;
  border-radius: var(--md-radius-sm);
  color: var(--md-brand);
}

.md-typography .md-gradient-text {
  background: var(--md-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.md-typography a {
  color: var(--md-brand);
  text-decoration: none;
  transition: color var(--md-duration-fast) var(--md-ease-standard);
}

.md-typography a:hover {
  color: var(--md-brand-hover);
}

/* ─── Live dot — the MobDial signature "platform is alive" marker ─── */
.md-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-success);
  position: relative;
  box-shadow: var(--md-glow-success);
}
.md-live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--md-success);
  animation: md-live-pulse 2s ease-in-out infinite;
}

@keyframes md-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ============================================================
   GLASS SURFACES — frosted, refractive, layered
   ============================================================ */
.md-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 32px rgba(0,0,0,0.3);
}
.md-glass-strong {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 48px rgba(0,0,0,0.4);
}
.md-glass-brand {
  background: linear-gradient(135deg, rgba(182,255,31,0.12) 0%, rgba(107,43,196,0.06) 100%);
  border: 1px solid rgba(182,255,31,0.18);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(182,255,31,0.15),
    0 0 40px rgba(182,255,31,0.08),
    0 12px 48px rgba(0,0,0,0.4);
}
.md-glass-noise {
  position: relative;
  isolation: isolate;
}
.md-glass-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   ANIMATION PRIMITIVES — reveal, glow-pulse, shimmer, scan
   ============================================================ */
@keyframes md-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes md-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes md-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(182,255,31,0.30); }
  50%      { box-shadow: 0 0 36px rgba(182,255,31,0.55); }
}
@keyframes md-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes md-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes md-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes md-tick {
  0%, 90%, 100% { opacity: 1; }
  95%           { opacity: 0.4; }
}
@keyframes md-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes md-bar-grow {
  from { transform: scaleY(0.2); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
@keyframes md-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.md-anim-fade-up   { animation: md-fade-up 0.6s var(--md-ease-standard) both; }
.md-anim-glow      { animation: md-glow-pulse 2.4s ease-in-out infinite; }
.md-anim-float     { animation: md-float 3.2s ease-in-out infinite; }
.md-anim-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: md-shimmer 2.4s linear infinite;
}

/* ============================================================
   PERFORMANCE LAYER — GPU hints, containment, motion guard
   Keeps the system buttery: animate transform/opacity only,
   contain paint to cards, kill motion on prefers-reduced-motion.
   ============================================================ */
.md-gpu        { transform: translateZ(0); backface-visibility: hidden; }
.md-contain    { contain: layout style paint; }
.md-isolate    { isolation: isolate; }

/* Animation primitives: scope will-change so it doesn't stay forever */
.md-anim-fade-up, .md-anim-float, .md-anim-glow, .md-anim-shimmer {
  will-change: transform, opacity;
}

/* Ambient layers (full-viewport blurred gradients) should never composite
   with backdrop-filter underneath them — they sit below opaque content. */
body::before, body::after, .md-ambient, .md-ambient-grid {
  pointer-events: none;
  contain: strict;
  will-change: opacity;
}

/* Cap excessive blends — flatten where they don't add value */
.md-no-blend { mix-blend-mode: normal !important; }

/* Reduced motion — system-wide guard */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   FUTURISTIC GLOBAL LAYER — auto-applied glass + live motion
   Every page that links this stylesheet gets it for free.
   GPU-only animations (transform + opacity), capped blur.
   ============================================================ */

/* Subtle entrance: panels & cards fade-up on first paint */
@keyframes md-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes md-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(18,255,160,0); }
  50%      { box-shadow: 0 0 0 1px rgba(18,255,160,.14), 0 0 24px rgba(18,255,160,.10); }
}
@keyframes md-sheen {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  60%  { transform: translateX(120%) skewX(-18deg); }
  100% { transform: translateX(120%) skewX(-18deg); }
}
@keyframes md-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}
@keyframes md-aurora {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .7; }
  50%      { transform: translate3d(2%, -2%, 0) scale(1.05); opacity: 1; }
}
@keyframes md-cursor-blink { 50% { opacity: 0; } }
@keyframes md-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.85); }
}

/* Auto-rise: panels & cards lift in. Stagger via :nth-child for rhythm. */
.panel, [class*="card"]:not([class*="cards"]) {
  animation: md-rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.panel:nth-child(2),[class*="card"]:nth-child(2){animation-delay:.04s}
.panel:nth-child(3),[class*="card"]:nth-child(3){animation-delay:.08s}
.panel:nth-child(4),[class*="card"]:nth-child(4){animation-delay:.12s}
.panel:nth-child(5),[class*="card"]:nth-child(5){animation-delay:.16s}
.panel:nth-child(6),[class*="card"]:nth-child(6){animation-delay:.20s}
.panel:nth-child(7),[class*="card"]:nth-child(7){animation-delay:.24s}
.panel:nth-child(8),[class*="card"]:nth-child(8){animation-delay:.28s}
.panel:nth-child(9),[class*="card"]:nth-child(9){animation-delay:.32s}

/* Glass auto-lift on hover for any card with a border */
.panel, .card, [class*="card"]:not([class*="cards"]) {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.panel:hover, .card:hover {
  transform: translate3d(0, -2px, 0);
}

/* Live status dots — anything with a `.dot` or `.live-dot` pulses softly */
.dot, .live-dot, [class*="-dot"] {
  animation: md-dot-pulse 1.9s ease-in-out infinite;
}

/* Auto sheen on hero gradient buttons + .v-cta */
.v-cta, .b-primary, [class*="cta"][class*="btn"], .btn-primary {
  position: relative; overflow: hidden;
}
.v-cta::after, .b-primary::after, .btn-primary::after {
  content: ''; position: absolute; top: 0; left: 0; width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.v-cta:hover::after, .b-primary:hover::after, .btn-primary:hover::after {
  animation: md-sheen 1.1s ease-out;
}

/* Selection color for that futuristic feel */
::selection { background: rgba(18,255,160,.32); color: #fff; }

/* Smooth focus ring everywhere */
:focus-visible {
  outline: 2px solid #12FFA0;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Crisp text by default */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* ============================================================
   PRODUCTION POLISH — scrollbar, print, a11y, link defaults
   ============================================================ */

/* Themed scrollbars (WebKit + Firefox) */
*::-webkit-scrollbar        { width: 10px; height: 10px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.10); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(18,255,160,.35); border: 2px solid transparent; background-clip: padding-box; }
* { scrollbar-color: rgba(255,255,255,.10) transparent; scrollbar-width: thin; }

/* Smooth scroll with safe fallback */
html { scroll-behavior: smooth; }

/* Better default link reset */
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #12FFA0; outline-offset: 3px; border-radius: 4px; }

/* Hide content visually but keep accessible to screen readers */
.md-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip-to-content target */
.md-skip {
  position: absolute; top: -100px; left: 0; z-index: 9999;
  padding: 10px 16px; background: #12FFA0; color: #05060A;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; border-radius: 0 0 8px 0;
  transition: top .2s ease;
}
.md-skip:focus { top: 0; }

/* Print: collapse to clean, ink-friendly output */
@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .panel, .card, [class*="card"] { border: 1px solid #ccc !important; page-break-inside: avoid; }
  a { text-decoration: underline; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 9px; color: #555; }
  .md-skip, [data-no-print], button { display: none !important; }
}

/* Image defaults — never let an empty src/onerror leak placeholders */
img { max-width: 100%; height: auto; display: block; }

/* Form reset baseline */
button, input, select, textarea {
  font: inherit; color: inherit;
}
button { cursor: pointer; border: none; background: transparent; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .5; }

/* Safer table defaults */
table { border-collapse: collapse; }