/* ═══════════════════════════════════════════════════════════════
   TEVOS MECHANICAL — Design System v4.0
   "Structured Signal"
   ─────────────────────────────────────────────────────────────
   Light: Softened Bone body · Deep Navy (#042142) header
          Neon Pink CTA beacon · Azure trust
   Dark:  Deep Charcoal void · Neon Pink CTA · Cyber Cyan live
          Structural Blue zone borders · Deep Purple tech DNA
   Rule:  Pink = decision point. Cyan = verified/live. One each.
═══════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL TOKENS ────────────────────────────────────────── */
:root {
  /* Engineering grid */
  --grid-size:    16px;
  --grid-color:   rgba(16,185,129,0.025);

  /* Geometry — macOS rounded. Consistent layering. */
  --r-xs:   3px;    /* tags, chips */
  --r-sm:   6px;    /* buttons, inputs */
  --r-md:  10px;    /* cards, dropdowns */
  --r-lg:  12px;    /* modals, panels */
  --r-xl:  16px;    /* large surfaces */
  --r-pill: 999px;  /* pill badges */

  /* Semantic — unchanged across themes */
  --risk:         #EF4444;
  --risk-pale:    rgba(239,68,68,0.12);
  --risk-glass:   rgba(239,68,68,0.07);
  --risk-border:  rgba(239,68,68,0.22);

  --rose:         #F472B6;
  --rose-pale:    rgba(244,114,182,0.12);
  --rose-glass:   rgba(244,114,182,0.07);
  --rose-border:  rgba(244,114,182,0.20);

  /* Typography — macOS system stack with Inter as web fallback */
  --ff-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --ff-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'DM Sans', system-ui, sans-serif;
  --ff-data:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Instrument Cluster height */
  --ic-height: 48px;

  /* Tactile trigger zone depth shadow */
  --trigger-inset:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    inset 1px 0  0 rgba(255,255,255,0.03),
    inset -1px 0 0 rgba(255,255,255,0.03);
  --trigger-press:
    inset 0 2px 5px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(0,0,0,0.6);

  /* Resonance Ring keyframe colors (used by JS) */
  --rr-low:  #EF4444;
  --rr-mid:  var(--warn, #FF9F0A);   /* Mid-signal — semantic warn (was magenta, retired 2026-04-25) */
  --rr-high: var(--accent, #10B981);   /* Resonance high-match — was cyan, now emerald */
}

/* ── 2. DARK THEME — Deep Charcoal ───────────────────────────
   Charcoal void, not pure black. Structural Blue zones.
   Neon Pink = CTA / apply decision point.
   Cyber Cyan = match score / verified / live.
   Deep Purple = Tech DNA / skills charts.
────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Magenta legacy retired 2026-04-25; --brand now mirrors --accent emerald */
  --brand:        var(--accent);
  --brand-deep:   var(--accent-deep, #0EA67D);
  --brand-pale:   color-mix(in srgb, var(--accent) 14%, transparent);
  --brand-glass:  color-mix(in srgb, var(--accent) 8%, transparent);
  --brand-border: color-mix(in srgb, var(--accent) 28%, transparent);
  --brand-glow:   var(--accent-glow, 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent));

  /* Cyan retired 2026-04-26 — --trust now mirrors --accent emerald.
     The token name stays so legacy uses (badge-trust, .sig-mth, .pjs-matches, etc.) keep working. */
  --trust:        var(--accent);
  --trust-deep:   var(--accent-deep, #0EA67D);
  --trust-pale:   color-mix(in srgb, var(--accent) 12%, transparent);
  --trust-glass:  color-mix(in srgb, var(--accent) 7%,  transparent);
  --trust-border: color-mix(in srgb, var(--accent) 22%, transparent);
  --trust-glow:   0 0 12px color-mix(in srgb, var(--accent) 24%, transparent);

  /* Apple System Blue #0A84FF — save / confirm / accent */
  --sys-blue:        #0A84FF;
  --sys-blue-deep:   #0060DF;
  --sys-blue-pale:   rgba(10,132,255,0.14);
  --sys-blue-glass:  rgba(10,132,255,0.08);
  --sys-blue-border: rgba(10,132,255,0.28);
  --sys-blue-glow:   0 0 14px rgba(10,132,255,0.32);

  /* Electric Violet #BF5AF2 — special / premium / AI */
  --violet:        #BF5AF2;
  --violet-deep:   #9333EA;
  --violet-pale:   rgba(191,90,242,0.12);
  --violet-glass:  rgba(191,90,242,0.08);
  --violet-border: rgba(191,90,242,0.28);
  --violet-glow:   0 0 12px rgba(191,90,242,0.28);

  /* Warning Amber — standby / pending / medium risk */
  --amber:        #FF9F0A;
  --amber-pale:   rgba(255,159,10,0.12);
  --amber-glass:  rgba(255,159,10,0.07);
  --amber-border: rgba(255,159,10,0.22);

  /* Structural Blue — Kanban zone borders / nav rail */
  --structural:        #153C6A;
  --structural-glass:  rgba(21,60,106,0.30);
  --structural-border: rgba(61,120,200,0.45);
  --structural-glow:   0 0 10px rgba(61,120,200,0.20);

  /* Deep Purple — Tech DNA / skills radar */
  --deep-purple:        #7C3AED;
  --deep-purple-glass:  rgba(124,58,237,0.12);
  --deep-purple-border: rgba(124,58,237,0.32);

  /* Phosphor void surfaces — cyan-tinted, not neutral macOS grey.
     tokens.css (loaded after) is the source of truth; these are dark fallbacks. */
  --bg-base:     #0C1014;
  --bg-surface:  #141A22;
  --bg-raised:   #1A2230;
  --bg-card:     #1A2230;
  --bg-hover:    rgba(16,185,129,0.06);   /* cyan tint hover */
  --bg-selected: rgba(16,185,129,0.14);
  --bg-input:    #0C1014;
  --bg-sidebar:  rgba(12,16,20,0.72);
  --bg-toolbar:  rgba(12,16,20,0.78);
  --bg-modal:    rgba(20,26,34,0.88);
  --bg-popover:  rgba(26,34,48,0.94);

  /* IC header — frosted dark */
  --ic-bg: rgba(12,16,20,0.92);

  /* Glass bar variable for frosted navbar */
  --bg-glass-bar: rgba(12,16,20,0.88);

  /* Phosphor hairlines — every border carries a ghost of cyan */
  --line:        rgba(120,200,255,0.10);
  --line-mid:    rgba(120,200,255,0.20);
  --line-strong: rgba(120,200,255,0.36);

  /* Cool text hierarchy — bumped for AA contrast on small text (Apex-Syndicate spec) */
  --t-primary:   rgba(235,245,255,0.96);
  --t-secondary: rgba(190,210,230,0.78);
  --t-muted:     rgba(170,200,225,0.78);   /* [FIXED P0] was 0.62 — ~3.2:1 fails AA; 0.78 → ~5:1 */
  --t-quaternary:rgba(170,200,225,0.58);   /* [FIXED P0] was 0.42 — ~2.1:1; 0.58 → ~3.5:1 for large text */
  --t-inverse:   #0C1014;
  --t-accent:    var(--trust);

  /* Instrument shadows — ambient cyan alongside hard drop */
  --shadow-hair:    0 0 0 0.5px rgba(120,200,255,0.10);
  --shadow-card:    0 0 0 0.5px rgba(120,200,255,0.08), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lift:    0 0 0 0.5px rgba(120,200,255,0.10),
                    0 8px 24px rgba(0,0,0,0.55),
                    0 0 32px rgba(16,185,129,0.04);
  --shadow-modal:   0 0 0 0.5px rgba(120,200,255,0.14),
                    0 24px 56px rgba(0,0,0,0.72),
                    0 0 48px rgba(16,185,129,0.06);
  --shadow-popover: 0 0 0 0.5px rgba(120,200,255,0.10), 0 12px 32px rgba(0,0,0,0.6);
  --shadow-brand:   0 0 20px rgba(255,45,135,0.28);
  --shadow-trust:   0 0 14px rgba(16,185,129,0.20);
  --shadow-violet:  0 0 16px rgba(191,90,242,0.24);
  --shadow-sys-blue:0 0 16px rgba(10,132,255,0.28);

  /* Cyan engineering grid */
  --grid-color: rgba(16,185,129,0.05);

  /* Code / terminal */
  --code-bg:          #0A0B10;
  --code-text:        #C0C0CC;
  --code-keyword:     #FF2D87;  /* Magenta retained — scoped to code-block syntax highlighting only, not brand */
  --code-fn:          #10B981;
  --code-comment:     #252830;
  --code-string:      #86EFAC;
  --code-placeholder: #2E3040;

  /* Waveform — cyan pulse */
  --waveform-color: #10B981;

  /* Resonance Ring glow */
  --glow-spread: 0 0 0 1px rgba(16,185,129,0.35), 0 0 0 3px rgba(16,185,129,0.08);
}

/* ── 3. LIGHT THEME — Softened Bone ─────────────────────────
   Warm bone body. Deep Navy (#042142) header IC rail.
   Neon Pink: reserved ONLY for the primary CTA / Apply button.
   Azure: trust / match scores / verified states.
   Structural Navy: zone borders, kanban columns.
────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Magenta legacy retired 2026-04-25; --brand now mirrors --accent emerald.
     Light-mode emerald is darkened (hsl 158 80% 32%) for AA contrast on bone. */
  --brand:        var(--accent);
  --brand-deep:   var(--accent-deep, hsl(158 85% 24%));
  --brand-pale:   color-mix(in srgb, var(--accent) 10%, transparent);
  --brand-glass:  color-mix(in srgb, var(--accent) 6%, transparent);
  --brand-border: color-mix(in srgb, var(--accent) 24%, transparent);
  --brand-glow:   var(--accent-glow, 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent));

  /* Apple System Blue #0A84FF → light variant */
  --sys-blue:        #0A84FF;
  --sys-blue-deep:   #0060DF;
  --sys-blue-pale:   rgba(10,132,255,0.10);
  --sys-blue-glass:  rgba(10,132,255,0.06);
  --sys-blue-border: rgba(10,132,255,0.24);
  --sys-blue-glow:   0 0 12px rgba(10,132,255,0.18);

  /* Electric Violet — light variant */
  --violet:        #9333EA;
  --violet-deep:   #7E22CE;
  --violet-pale:   rgba(147,51,234,0.10);
  --violet-glass:  rgba(147,51,234,0.07);
  --violet-border: rgba(147,51,234,0.24);
  --violet-glow:   0 0 10px rgba(147,51,234,0.16);

  /* Azure — trust / match / verified */
  --trust:        #0284C7;
  --trust-deep:   #0369A1;
  --trust-pale:   rgba(2,132,199,0.10);
  --trust-glass:  rgba(2,132,199,0.07);
  --trust-border: rgba(2,132,199,0.24);
  --trust-glow:   0 0 10px rgba(2,132,199,0.16);

  /* Warning Amber — standby / pending */
  --amber:        #C2690A;
  --amber-pale:   rgba(194,105,10,0.10);
  --amber-glass:  rgba(194,105,10,0.07);
  --amber-border: rgba(194,105,10,0.20);

  /* Structural Navy — zone definition / Kanban borders */
  --structural:        #042142;
  --structural-glass:  rgba(4,33,66,0.07);
  --structural-border: rgba(4,33,66,0.22);
  --structural-glow:   0 0 10px rgba(4,33,66,0.12);

  /* Deep Purple — Tech DNA / skills */
  --deep-purple:        #6D28D9;
  --deep-purple-glass:  rgba(109,40,217,0.09);
  --deep-purple-border: rgba(109,40,217,0.25);

  /* HIG greys with cool phosphor cast */
  --bg-base:     #EEF2F6;
  --bg-surface:  #FAFBFD;
  --bg-raised:   #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-hover:    rgba(10,132,255,0.05);
  --bg-selected: rgba(10,132,255,0.12);
  --bg-input:    #FFFFFF;
  --bg-sidebar:  rgba(238,242,246,0.72);
  --bg-toolbar:  rgba(244,247,250,0.78);
  --bg-modal:    rgba(255,255,255,0.88);
  --bg-popover:  rgba(255,255,255,0.94);

  /* IC header — frosted white navbar */
  --ic-bg: rgba(255,255,255,0.85);

  /* Glass bar variable for frosted navbar */
  --bg-glass-bar: rgba(255,255,255,0.88);

  /* Hairlines with phosphor hint */
  --line:        rgba(30,90,140,0.12);
  --line-mid:    rgba(30,90,140,0.22);
  --line-strong: rgba(30,90,140,0.36);

  --t-primary:    rgba(10,20,30,0.92);
  --t-secondary:  rgba(30,60,90,0.78);
  --t-muted:      rgba(30,60,90,0.62);    /* was 0.32 — Apex-Syndicate AA bump */
  --t-quaternary: rgba(30,60,90,0.40);    /* was 0.18 */
  --t-inverse:    #FFFFFF;
  --t-accent:     var(--trust);

  --shadow-hair:    0 0 0 0.5px rgba(30,90,140,0.10);
  --shadow-card:    0 0 0 0.5px rgba(30,90,140,0.08), 0 1px 2px rgba(0,40,80,0.05);
  --shadow-lift:    0 0 0 0.5px rgba(30,90,140,0.08),
                    0 6px 20px rgba(0,40,80,0.10),
                    0 0 24px rgba(16,185,129,0.05);
  --shadow-modal:   0 0 0 0.5px rgba(30,90,140,0.14),
                    0 20px 48px rgba(0,40,80,0.20),
                    0 0 40px rgba(16,185,129,0.06);
  --shadow-popover: 0 0 0 0.5px rgba(30,90,140,0.10), 0 8px 24px rgba(0,40,80,0.14);
  --shadow-brand:    0 0 12px rgba(214,0,90,0.16);
  --shadow-trust:    0 0 10px rgba(2,132,199,0.15);
  --shadow-violet:   0 0 10px rgba(147,51,234,0.14);
  --shadow-sys-blue: 0 0 12px rgba(10,132,255,0.18);

  --grid-color: rgba(30,90,140,0.05);

  --code-bg:          #E8E5DE;
  --code-text:        #1A1A2E;
  --code-keyword:     #D6005A;  /* Magenta retained — scoped to code-block syntax highlighting only, not brand */
  --code-fn:          #0A84FF;
  --code-comment:     #BBBBCC;
  --code-string:      #166534;
  --code-placeholder: #9DA4B4;

  --waveform-color: #0284C7;
  --glow-spread: 0 0 0 1px rgba(2,132,199,0.40), 0 0 0 3px rgba(2,132,199,0.08);
}

/* ── 4. RESET — Precision baseline ──────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* [FIXED P2] skip link — hidden until focused (keyboard/screen-reader users) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--brand);
  color: #000;
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip-link:focus { left: 8px; }

html {
  height: 100%;
  font-size: 14px;
  /* [FIXED P1] prevent font inflation on orientation change (iOS/Android) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--ff-body);
  background: var(--bg-base);
  color: var(--t-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* [FIXED P1] remove tap highlight flash on mobile */
  -webkit-tap-highlight-color: transparent;
  /* [FIXED P1] remove 300ms click delay on mobile */
  touch-action: manipulation;
}

/* Engineering grid overlay — amber precision lines */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(ellipse 90% 50% at 50% 0%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 50% at 50% 0%, black 0%, transparent 100%);
}

/* All structural content above the grid layer */
.top-bar, .screen, .admin-layout, #app { position: relative; z-index: 1; }

/* Cyan focus system — precision crosshair */
:focus-visible {
  outline: none;
  box-shadow: var(--glow-spread);
  border-radius: var(--r-xs);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: var(--glow-spread);
}

/* Smooth macOS-style theme transitions */
*, *::before, *::after {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.15s ease,
    box-shadow 0.2s ease;
}
button, .btn, a { transition: background-color 0.08s, color 0.08s, box-shadow 0.08s, border-color 0.08s; }

/* ── 5. INSTRUMENT CLUSTER — Top rail ───────────────────────
   48px. Data surface. Reads system state.
────────────────────────────────────────────────────────────── */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ic-height);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* [FIXED P1] safe-area-inset for notched devices */
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg-glass-bar);
  border-bottom: 1px solid var(--border, var(--line));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  -webkit-text-size-adjust: 100%; /* [FIXED P1] prevent font inflation on orientation change */
}

/* Light mode IC rail: frosted white — text uses dark Apple label colors */
[data-theme="light"] .top-bar .wordmark,
[data-theme="light"] .top-bar .user-name-sm,
[data-theme="light"] .top-bar .user-role-sm,
[data-theme="light"] .top-bar svg { color: var(--t-secondary) !important; }
[data-theme="light"] .top-bar .wordmark em { color: var(--brand) !important; }
[data-theme="light"] .top-bar .user-pill {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .top-bar .theme-toggle {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.05);
}
[data-theme="light"] .top-bar #notif-bell { color: var(--t-secondary); }
[data-theme="light"] .top-bar #notif-badge { background: var(--brand); }

/* Wordmark */
.wordmark {
  font-family: var(--ff-data);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.wordmark em {
  color: var(--brand);
  font-style: normal;
}
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* gap fallback — Samsung Internet < 14 */
@supports not (gap: 0px) {
  .top-bar-right > * + *  { margin-left: 14px; }
  .user-pill > * + *       { margin-left: 8px; }
  .modal-actions > * + *   { margin-left: 8px; }
  .udd-section > * + *     { margin-top: 0; }
  .ph-actions > * + *      { margin-left: 6px; }
}

/* User pill */
.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-xs);
  background: var(--bg-raised);
}
.user-ava {
  width: 28px; height: 28px;
  border-radius: 4px;
  font-family: var(--ff-data);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: var(--t-inverse);
}
.user-name-sm { font-size: 12px; font-weight: 500; color: var(--t-secondary); font-family: var(--ff-data); }
.user-role-sm {
  font-family: var(--ff-data);
  font-size: 9px;
  color: var(--t-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Theme toggle — compact square, icon driven by data-theme ── */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.07);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
[data-theme="light"] .theme-toggle {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.05) !important;
}
/* Icons — absolutely centred, animate on theme switch */
.theme-toggle-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .18s, transform .18s;
  pointer-events: none;
  color: var(--t-secondary);
}
/* DEFAULT (dark) — moon visible, sun hidden. Works even without data-theme attribute. */
.theme-toggle #icon-dark  { opacity: 1; transform: scale(1) rotate(0deg); }
.theme-toggle #icon-light { opacity: 0; transform: scale(0.6) rotate(-20deg); }
/* LIGHT MODE override — swap them */
[data-theme="light"] .theme-toggle #icon-dark  { opacity: 0; transform: scale(0.6) rotate(20deg); }
[data-theme="light"] .theme-toggle #icon-light { opacity: 1; transform: scale(1) rotate(0deg); color: #555; }

/* Ghost / Engine / Command-bar styles removed — replaced by floating dock (includes/navigation.php) */

/* ── 7. SCREEN SYSTEM ────────────────────────────────────────── */
.screen {
  display: none;
  padding-top: calc(var(--ic-height) + 10px);
  padding-bottom: 80px;
  min-height: 100vh;
}
.screen.active {
  display: block;
  animation: screenIn 0.20s ease;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 8. PAGE HEADER ─────────────────────────────────────────── */
.page-head {
  padding: 20px 28px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 14px;
}
.ph-eyebrow {
  font-family: var(--ff-data);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ph-title {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800;
  color: var(--t-primary);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.ph-title em { color: var(--brand); font-style: normal; }
.ph-title .em-trust { color: var(--trust); font-style: normal; }
.ph-title .em-rose  { color: var(--rose);  font-style: normal; }
.ph-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── 9. TACTILE TRIGGER ZONES — Not buttons ──────────────────
   Every interactive zone is a physical switch with inset
   depth. Latched state = lit. Pressed = recessed.
   Never rounded like a bubble. Always compressed.
────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-family: var(--ff-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--t-secondary);
  box-shadow: var(--trigger-inset);
  transition: all 0.08s;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 11px; height: 11px; }

.btn:hover {
  color: var(--t-primary);
  border-color: rgba(16,185,129,0.25);
  box-shadow:
    var(--trigger-inset),
    0 0 0 1px rgba(16,185,129,0.12),
    0 0 6px rgba(16,185,129,0.06);
}

.btn:active {
  box-shadow: var(--trigger-press);
  transform: none;
}

/* Primary — Neon Pink CTA beacon. One per page. Reserved. */
.btn-primary {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    var(--brand-glow);
  font-weight: 700;
}
.btn-primary:hover {
  filter: brightness(1.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    var(--brand-glow);
  border-color: var(--brand-border);
}

/* Ghost — engraved outline */
.btn-ghost {
  background: rgba(255,255,255,0.03);
  color: var(--t-secondary);
  border: 1px solid var(--line-mid);
}
.btn-ghost:hover {
  color: var(--t-primary);
  border-color: var(--line-strong);
  background: rgba(255,255,255,0.05);
}

/* Trust — Cyan latched */
.btn-trust {
  background: var(--trust);
  color: #020202;
  border-color: var(--trust-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 0 10px rgba(16,185,129,0.20);
  font-weight: 700;
}
.btn-trust:hover {
  background: #34D399;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    0 0 16px rgba(16,185,129,0.28);
}

.btn-sm { padding: 4px 10px; font-size: 9px; }

/* Accent — Apple System Blue. Save / confirm actions. */
.btn-accent {
  background: var(--sys-blue);
  color: #ffffff;
  border-color: var(--sys-blue-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    var(--sys-blue-glow);
  font-weight: 600;
}
.btn-accent:hover {
  filter: brightness(1.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 0 20px rgba(10,132,255,0.45);
  border-color: var(--sys-blue-border);
}
.btn-accent:active { filter: brightness(0.94); box-shadow: var(--trigger-press); }

/* Dismiss — neutral surface. Secondary destructive. */
.btn-dismiss {
  background: var(--bg-raised);
  color: var(--t-secondary);
  border-color: var(--line-mid);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-dismiss:hover {
  background: var(--bg-hover);
  color: var(--t-primary);
  border-color: var(--line-strong);
}

/* Violet — Electric Violet. Premium / AI special. */
.btn-violet {
  background: var(--violet);
  color: #ffffff;
  border-color: var(--violet-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    var(--violet-glow);
  font-weight: 600;
}
.btn-violet:hover {
  filter: brightness(1.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 0 22px rgba(191,90,242,0.50);
  border-color: var(--violet-border);
}
.btn-violet:active { filter: brightness(0.94); box-shadow: var(--trigger-press); }

/* ── 10. LAYOUT ENGINE ─────────────────────────────────────── */
.content { padding: 0 28px 28px; }

.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.grid-main { display: grid; grid-template-columns: 1.8fr 1fr; gap: 12px; }
.grid-pipeline { display: grid; grid-template-columns: 240px 1fr; gap: 1px; }
.flex-col { display: flex; flex-direction: column; gap: 1px; }
.mb    { margin-bottom: 12px; }
.mb-sm { margin-bottom: 6px; }

/* ── 11. ZONED SURFACES — Not cards ─────────────────────────
   Content is delineated by line weight and spatial zoning,
   not by shadow-boxes. The data IS the container.
────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  position: relative;
  transition: border-color .12s;
}
.card:hover { border-color: var(--line-mid); }

/* Left accent bar — signal type */
.card-brand { border-left: 2px solid var(--brand); }
.card-trust { border-left: 2px solid var(--trust); }
.card-risk  { border-left: 2px solid var(--risk); border-color: var(--risk-border); background: var(--risk-glass); }

.card-head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title {
  font-family: var(--ff-data);
  font-size: 9px;
  font-weight: 700;
  color: var(--t-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-title svg { width: 10px; height: 10px; }
.card-action {
  font-family: var(--ff-data);
  font-size: 9px;
  color: var(--brand);
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-action:hover { text-decoration: underline; }
.card-body { padding: 16px; }

/* ── 12. METRIC ZONES ───────────────────────────────────────── */
.metric-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.metric-card:hover { border-color: var(--line-mid); }
.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
}
.mc-brand::before  { background: var(--brand); box-shadow: 0 0 6px var(--brand); }
.mc-trust::before  { background: var(--trust); box-shadow: 0 0 6px var(--trust); }
.mc-risk::before   { background: var(--risk);  box-shadow: 0 0 6px var(--risk); }
.mc-amber::before  { background: var(--amber); }

.metric-label {
  font-family: var(--ff-data);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted);
  margin-bottom: 8px;
}
.metric-val {
  font-family: var(--ff-data);
  font-size: 2rem;
  font-weight: 300;   /* Weight 300 for large numerals — open feel */
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--t-primary);
}
.mv-brand { color: var(--brand); }
.mv-trust { color: var(--trust); }
.mv-risk  { color: var(--risk); }
.mv-amber { color: var(--amber); }

.metric-delta {
  font-family: var(--ff-data);
  font-size: 9px;
  margin-top: 5px;
  color: var(--trust);
  letter-spacing: 0.04em;
}
.metric-delta.neg { color: var(--risk); }

/* ── 13. SCORE RING — Precision gauge ──────────────────────── */
.aurora-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 12px;
  gap: 5px;
}
.aurora-ring {
  position: relative;
  width: 110px; height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aurora-svg {
  position: absolute;
  top: 0; left: 0;
  transform: rotate(-90deg);
}
.ring-track { fill: none; stroke: var(--line-mid); stroke-width: 6; }
.ring-fill  {
  fill: none;
  stroke-width: 6;
  stroke-linecap: square;  /* Sharp cap — not rounded */
  transition: stroke-dashoffset 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}
.ring-fill-brand { stroke: var(--brand); filter: drop-shadow(0 0 4px rgba(255,159,10,0.4)); }
.ring-fill-trust { stroke: var(--trust); filter: drop-shadow(0 0 4px rgba(16,185,129,0.4)); }

/* Sweeping radar shimmer — conic rotation */
.ring-shimmer {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255,159,10,0.10) 20%,
    rgba(16,185,129,0.06) 50%,
    transparent 70%,
    transparent 100%
  );
  animation: ringShimmer 6s linear infinite;
  pointer-events: none;
}
@keyframes ringShimmer {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ring-glow {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glass) 0%, transparent 70%);
  animation: ringGlow 3s ease-in-out infinite;
}
.ring-glow-trust { background: radial-gradient(circle, var(--trust-glass) 0%, transparent 70%); }
@keyframes ringGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.9; transform: scale(1.08); }
}
.ring-num {
  font-family: var(--ff-data);
  font-size: 1.7rem;
  font-weight: 200;  /* Ultra-light for large instrument numerals */
  color: var(--t-primary);
  letter-spacing: -0.04em;
  line-height: 1;
}
.ring-label { font-family: var(--ff-data); font-size: 8px; color: var(--t-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.ring-sub   { font-size: 10px; color: var(--t-secondary); text-align: center; }

.verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--trust-glass);
  border: 1px solid var(--trust-border);
  border-radius: var(--r-xs);
  padding: 3px 8px;
  font-family: var(--ff-data);
  font-size: 8px;
  color: var(--trust);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--trigger-inset);
}
.verified-pill svg { width: 9px; height: 9px; }
.verified-pill .vp-static { transition: opacity 0.15s; }
.verified-pill .vp-haptic {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  opacity: 0; pointer-events: none; font-size: 8px;
}
.verified-pill.playing .vp-static { opacity: 0; }
.verified-pill.playing .vp-haptic { animation: hapticReveal 1.2s ease forwards; }
.vp-haptic span { opacity: 0; animation: none; }
.verified-pill.playing .vp-haptic span:nth-child(1) { animation: hapticKey 1.2s ease 0.05s forwards; }
.verified-pill.playing .vp-haptic span:nth-child(2) { animation: hapticKey 1.2s ease 0.28s forwards; }
.verified-pill.playing .vp-haptic span:nth-child(3) { animation: hapticKey 1.2s ease 0.52s forwards; }
.verified-pill.playing .vp-haptic span:nth-child(4) { animation: hapticKey 1.2s ease 0.72s forwards; }
@keyframes hapticReveal { 0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0} }
@keyframes hapticKey { 0%{opacity:0;transform:scale(0.8)}20%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0} }

/* ── 14. TAG SYSTEM ─────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--ff-data);
  font-size: 8.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag-meta     { background: var(--bg-surface); color: var(--t-muted);        border-color: var(--line); }
.tag-type     { background: var(--brand-glass); color: var(--brand);         border-color: var(--brand-border); }
.tag-salary   { background: var(--trust-glass); color: var(--trust);         border-color: var(--trust-border); }
.tag-ref      { background: var(--violet-glass); color: var(--violet);       border-color: var(--violet-border); }
.tag-verified { background: var(--trust-glass); color: var(--trust);         border-color: var(--trust-border); }
.tag-delta    { background: var(--amber-glass); color: var(--amber);         border-color: var(--amber-border); }
.tag-risk     { background: var(--risk-glass);  color: var(--risk);          border-color: var(--risk-border); }
.tag-violet   { background: var(--violet-glass); color: var(--violet);       border-color: var(--violet-border); }
.tag-blue     { background: var(--sys-blue-glass); color: var(--sys-blue);   border-color: var(--sys-blue-border); }
.tag-green    { background: rgba(48,209,88,0.08); color: #30D158;            border-color: rgba(48,209,88,0.25); }

/* ── SIGNAL BADGE SYSTEM — "Tevos dialect" 3-letter codes ─────
   6 signal types. Each has a ghost state (bordered) and an
   active/solid state (filled). Compound form: SIG · LABEL.
────────────────────────────────────────────────────────────── */
.sig {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ff-data);
  font-size: 8.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all .10s;
}
.sig .sig-sub {
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.06em;
}
.sig .sig-sep { opacity: 0.45; margin: 0 1px; }

/* Ghost variants — border + tinted bg */
.sig-mth { color: var(--trust);    background: var(--trust-glass);     border-color: var(--trust-border);    }
.sig-ref { color: var(--violet);   background: var(--violet-glass);    border-color: var(--violet-border);   }
.sig-aud { color: var(--brand);    background: var(--brand-glass);     border-color: var(--brand-border);    }
.sig-inf { color: var(--sys-blue); background: var(--sys-blue-glass);  border-color: var(--sys-blue-border); }
.sig-ack { color: #30D158;         background: rgba(48,209,88,0.08);   border-color: rgba(48,209,88,0.25);   }
.sig-wrn { color: var(--amber);    background: var(--amber-glass);     border-color: var(--amber-border);    }

/* Active/solid variants — pinned, fast-reply, in-process, etc. */
.sig-mth.sig-on { background: var(--trust);    color: #001a1f; border-color: var(--trust);    box-shadow: 0 0 8px rgba(16,185,129,0.35);  }
.sig-ref.sig-on { background: var(--violet);   color: #fff;    border-color: var(--violet);   box-shadow: 0 0 8px rgba(191,90,242,0.35);  }
.sig-aud.sig-on { background: var(--brand);    color: #fff;    border-color: var(--brand);    box-shadow: 0 0 8px rgba(255,45,135,0.35);  }
.sig-inf.sig-on { background: var(--sys-blue); color: #fff;    border-color: var(--sys-blue); box-shadow: 0 0 8px rgba(10,132,255,0.35);  }
.sig-ack.sig-on { background: #30D158;         color: #001a0d; border-color: #30D158;         box-shadow: 0 0 8px rgba(48,209,88,0.35);   }
.sig-wrn.sig-on { background: var(--amber);    color: #1a0f00; border-color: var(--amber);    box-shadow: 0 0 8px rgba(255,159,10,0.30);  }

/* LIVE badge — cyan pulse dot + label */
.sig-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-data);
  font-size: 8.5px; font-weight: 700;
  color: var(--trust); letter-spacing: 0.12em; text-transform: uppercase;
}
.sig-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--trust); box-shadow: 0 0 7px rgba(16,185,129,0.85);
  animation: livePulse 2.2s ease-in-out infinite; flex-shrink: 0;
}

/* ── DOMAIN TAG — colored filled chip: [DOMAIN] [Sub-domain] ───
   Left part: domain color. Right sub-label in lighter opacity.
────────────────────────────────────────────────────────────── */
.dom-tag {
  display: inline-flex; align-items: stretch;
  border-radius: 4px; overflow: hidden;
  font-family: var(--ff-data);
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  border: 1px solid var(--dom-border, var(--line-mid));
  white-space: nowrap; flex-shrink: 0;
}
.dom-tag-name {
  padding: 2px 7px;
  background: var(--dom-bg, var(--bg-raised));
  color: var(--dom-color, var(--t-secondary));
}
.dom-tag-sub {
  padding: 2px 7px;
  background: transparent;
  color: var(--dom-color, var(--t-muted));
  opacity: 0.72;
  border-left: 1px solid var(--dom-border, var(--line));
  font-weight: 500;
}
/* Domain color definitions */
.dom-engineering { --dom-color: var(--trust);    --dom-bg: rgba(16,185,129,0.10);  --dom-border: rgba(16,185,129,0.25);  }
.dom-product     { --dom-color: var(--violet);   --dom-bg: rgba(191,90,242,0.10); --dom-border: rgba(191,90,242,0.25); }
.dom-consulting  { --dom-color: var(--sys-blue); --dom-bg: rgba(10,132,255,0.10); --dom-border: rgba(10,132,255,0.25); }
.dom-finance     { --dom-color: #30D158;         --dom-bg: rgba(48,209,88,0.10);  --dom-border: rgba(48,209,88,0.25);  }
.dom-marketing   { --dom-color: var(--brand);    --dom-bg: rgba(255,45,135,0.10); --dom-border: rgba(255,45,135,0.25); }
.dom-operations  { --dom-color: var(--amber);    --dom-bg: rgba(255,159,10,0.10); --dom-border: rgba(255,159,10,0.25); }
.dom-data        { --dom-color: var(--violet);   --dom-bg: rgba(191,90,242,0.10); --dom-border: rgba(191,90,242,0.25); }
.dom-research    { --dom-color: var(--sys-blue); --dom-bg: rgba(10,132,255,0.10); --dom-border: rgba(10,132,255,0.25); }
.dom-design      { --dom-color: var(--brand);    --dom-bg: rgba(255,45,135,0.10); --dom-border: rgba(255,45,135,0.25); }

/* Filter chips — toggle switches, not pills */
.fchip {
  font-family: var(--ff-data);
  font-size: 9px;
  padding: 4px 11px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-mid);
  color: var(--t-muted);
  cursor: pointer;
  background: var(--bg-raised);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--trigger-inset);
  transition: all 0.08s;
}
.fchip.on {
  border-color: var(--brand-border);
  color: var(--brand);
  background: var(--brand-glass);
  box-shadow: var(--trigger-inset), var(--brand-glow);
  font-weight: 700;
}
.fchip:hover:not(.on) { border-color: var(--line-strong); color: var(--t-secondary); }

/* ── 15. SKELETON SYSTEM ────────────────────────────────────── */
@keyframes skeletonShimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton, .skel-text, .skel-circle, .skel-rect {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 25%,
    var(--bg-hover)   50%,
    var(--bg-surface) 75%
  );
  background-size: 1200px 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
  border-radius: var(--r-xs);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skel-text   { height: 10px; border-radius: 1px; display: block; }
.skel-circle { border-radius: 50%; }
.skel-rect   { border-radius: var(--r-sm); }
.skel-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}

/* ── 16. LIVE SIGNAL DOT ────────────────────────────────────── */
.live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--trust);
  box-shadow: 0 0 5px var(--trust);
  animation: livePulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 4px var(--trust); }
  50%       { opacity: 0.35; box-shadow: 0 0 9px var(--trust); }
}

/* ── 17. RESONANCE RING — The Non-Conformist Feature ─────────
   When a job row is hovered, a conic sweep radiates from
   the row. Color interpolates cyan→amber based on CV match.
   Locks at the score position like a radar return.
────────────────────────────────────────────────────────────── */
@keyframes resonanceSweep {
  0%   { opacity: 0; clip-path: inset(50% 50% 50% 50%); }
  15%  { opacity: 0.7; }
  60%  { opacity: 0.5; }
  100% { opacity: 0; clip-path: inset(0% 0% 0% 0%); }
}
.resonance-ring {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--trust);
  box-shadow:
    0 0 0 2px rgba(16,185,129,0.08),
    inset 0 0 12px rgba(16,185,129,0.04);
  animation: resonanceSweep 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── 18. DATA ROWS — Instrument-grade list items ────────────── */
.data-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--line);
}
.data-row:hover { background: var(--bg-hover); }
.dr-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.dr-dot.live    { background: var(--trust); animation: livePulse 2s ease-in-out infinite; }
.dr-dot.pending { background: var(--amber); }
.dr-dot.off     { background: var(--t-muted); }
.dr-name   { font-family: var(--ff-display); font-size: 12px; font-weight: 600; color: var(--t-primary); }
.dr-detail { font-family: var(--ff-data);    font-size: 9px;  color: var(--t-muted); letter-spacing: 0.04em; }
.dr-right  { font-family: var(--ff-data);    font-size: 9px;  margin-left: auto; color: var(--t-secondary); }

/* ── 19. VOICE ROW ─────────────────────────────────────────── */
.voice-row {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,159,10,0.04);
  border: 1px solid rgba(255,159,10,0.14);
  border-radius: var(--r-xs);
  padding: 5px 9px;
  font-family: var(--ff-data);
  font-size: 9px;
  color: var(--brand);
  margin-top: 6px;
}
.voice-row svg { width: 9px; height: 9px; }
.waveform { display: flex; align-items: center; gap: 2px; margin-left: 3px; }
.wb { width: 1px; border-radius: 0; background: var(--brand); opacity: 0.6; }
.wb:nth-child(1) { height: 8px;  animation: wv 1.1s ease-in-out infinite; }
.wb:nth-child(2) { height: 14px; animation: wv 1.1s ease-in-out infinite 0.14s; }
.wb:nth-child(3) { height: 5px;  animation: wv 1.1s ease-in-out infinite 0.28s; }
.wb:nth-child(4) { height: 16px; animation: wv 1.1s ease-in-out infinite 0.07s; }
.wb:nth-child(5) { height: 9px;  animation: wv 1.1s ease-in-out infinite 0.21s; }
@keyframes wv { 0%,100%{transform:scaleY(1)}50%{transform:scaleY(0.25)} }

/* ── 20. GHOST ALERT ─────────────────────────────────────────── */
.ghost-alert {
  display: flex; align-items: flex-start; gap: 6px;
  background: var(--risk-glass);
  border: 1px solid var(--risk-border);
  border-left: 2px solid var(--risk);
  border-radius: var(--r-xs);
  padding: 6px 10px;
  font-family: var(--ff-data);
  font-size: 9px;
  color: var(--risk);
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.ghost-alert svg { width: 10px; height: 10px; flex-shrink: 0; margin-top: 1px; }

/* ── 21. SPARKLINE ──────────────────────────────────────────── */
.sparkline-wrap { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.sparkline-legend {
  display: flex; justify-content: space-between;
  font-family: var(--ff-data);
  font-size: 8px; color: var(--t-muted);
  text-transform: uppercase; letter-spacing: 0.10em;
}
.sparkline-svg { width: 100%; height: 28px; }

/* ── 22. GHOST ROW ──────────────────────────────────────────── */
.ghost-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-surface); }
.ghost-row.hi { border-left: 2px solid var(--risk); background: var(--risk-glass); }
.ghost-row.md { border-left: 2px solid var(--amber); background: var(--amber-glass); }
.ghost-risk { font-family: var(--ff-data); font-size: 8px; padding: 2px 7px; border-radius: var(--r-xs); margin-left: auto; letter-spacing: 0.08em; text-transform: uppercase; }
.gr-hi { background: var(--risk-glass);  color: var(--risk);  border: 1px solid var(--risk-border); }
.gr-md { background: var(--amber-glass); color: var(--amber); border: 1px solid var(--amber-border); }
.gr-lo { background: var(--trust-glass); color: var(--trust); border: 1px solid var(--trust-border); }

/* ── 23. SAL ROW ────────────────────────────────────────────── */
.sal-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.sal-row:last-child { border-bottom: none; }
.sal-label { font-size: 11px; color: var(--t-secondary); }
.sal-val   { font-family: var(--ff-data); font-size: 11px; color: var(--t-primary); letter-spacing: 0.02em; }
.sal-val.em { color: var(--trust); font-size: 13px; }
.sal-val.am { color: var(--amber); }
.sal-val.br { color: var(--brand); font-size: 13px; }
.sal-source { font-family: var(--ff-data); font-size: 8.5px; color: var(--t-muted); margin-top: 8px; line-height: 1.5; letter-spacing: 0.04em; }

/* ── 25. ENGINE / PRO-ONLY removed (Pro/Simple mode deprecated) ── */

/* ── 26. CMD+K COMMAND PALETTE ──────────────────────────── */
.cmdpal-item {
  transition: background 0.06s, color 0.06s;
}
.cmdpal-item:hover {
  background: var(--bg-hover);
  color: var(--t-primary);
}

/* ── 24. PIPELINE — Command HUD layout ──────────────────────── */
.pipeline-jobs {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 60px);
}
.pipeline-jobs-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--ff-data);
  font-size: 8px;
  font-weight: 700;
  color: var(--t-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pj-count {
  font-family: var(--ff-data);
  font-size: 9px;
  background: var(--bg-surface);
  color: var(--t-muted);
  padding: 1px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
}
.pipeline-jobs-list {
  overflow-y: auto;
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Job row — terminal style */
.pj-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: transparent;
  transition: background 0.06s;
}
.pj-row:hover { background: var(--bg-hover); }
.pj-row.selected {
  background: var(--brand-glass);
  border-left: 2px solid var(--brand);
  padding-left: 10px;
}
.pj-title { font-family: var(--ff-display); font-size: 11px; font-weight: 700; color: var(--t-primary); margin-bottom: 2px; }
.pj-sub   { font-family: var(--ff-data);    font-size: 8.5px; color: var(--t-muted); margin-bottom: 6px; letter-spacing: 0.03em; }

.pj-stats { display: flex; gap: 4px; flex-wrap: wrap; }
.pj-stat {
  display: flex; align-items: center; gap: 3px;
  font-family: var(--ff-data); font-size: 8px;
  padding: 1px 7px; border-radius: var(--r-xs); border: 1px solid;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pjs-matches { background: var(--trust-glass); color: var(--trust); border-color: var(--trust-border); }
.pjs-voice   { background: var(--brand-glass); color: var(--brand); border-color: var(--brand-border); }
.pjs-open    { background: rgba(255,255,255,0.03); color: var(--t-muted); border-color: var(--line); }

/* Pipeline columns */
.pipeline-cols-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pipeline-cols-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pch-title { font-family: var(--ff-display); font-size: 12px; font-weight: 700; color: var(--t-primary); }
.pch-sub   { font-family: var(--ff-data);    font-size: 8.5px; color: var(--t-muted); margin-top: 1px; letter-spacing: 0.04em; }
.pch-actions { display: flex; gap: 4px; }
.pipeline-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 10px;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
}
.pipe-col { display: flex; flex-direction: column; gap: 1px; }
.pipe-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 4px;
}
.pch-name  { font-family: var(--ff-data); font-size: 8px; font-weight: 700; color: var(--t-muted); letter-spacing: 0.14em; text-transform: uppercase; }
.pch-badge {
  font-family: var(--ff-data); font-size: 9px;
  background: var(--bg-hover); color: var(--t-muted);
  padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid var(--line);
}

/* ── 25. TRANSCRIPT BUBBLES ─────────────────────────────────── */
.tx-bubble { border-radius: var(--r-xs); padding: 8px 12px; margin-bottom: 5px; }
.tx-ai     { background: var(--bg-surface); border: 1px solid var(--line); }
.tx-cand   { background: var(--trust-glass); border: 1px solid var(--trust-border); }
.tx-label  { font-family: var(--ff-data); font-size: 8px; color: var(--t-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.10em; }
.tx-label.em { color: var(--trust); }
.tx-text   { font-size: 11px; color: var(--t-secondary); line-height: 1.55; }

/* ── 26. CANDIDATE CARD (command HUD) ───────────────────────── */
.cand-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: var(--r-xs);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.08s, background 0.08s;
}
.cand-card:hover { border-color: var(--line-mid); border-left-color: var(--brand); background: var(--bg-hover); }
.cand-card.flagged { border-left-color: var(--risk); background: var(--risk-glass); }

.cc-top  { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cc-ava  {
  width: 26px; height: 26px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-data); font-size: 9px; font-weight: 700;
  color: #020202; flex-shrink: 0;
}
.cc-name { font-family: var(--ff-display); font-size: 12px; font-weight: 700; color: var(--t-primary); }
.cc-role { font-family: var(--ff-data); font-size: 8.5px; color: var(--t-muted); letter-spacing: 0.04em; }
.cc-score { margin-left: auto; text-align: right; }
.cc-pct  { font-family: var(--ff-data); font-size: 1.1rem; font-weight: 200; line-height: 1; letter-spacing: -0.04em; }
.cc-pct.v { color: var(--trust); }
.cc-pct.a { color: var(--amber); }
.cc-ver  { font-family: var(--ff-data); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--trust); }
.cc-ver.risk { color: var(--risk); }
.cc-tags { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 6px; }

/* ── 27. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4        { grid-template-columns: repeat(2, 1fr); }
  .grid-main     { grid-template-columns: 1fr; }
  .grid-pipeline { grid-template-columns: 200px 1fr; }
  .content       { padding: 0 18px 24px; }
  .page-head     { padding: 16px 18px 0; }
}

@media (max-width: 768px) {
  html { font-size: 12.5px; }
  /* [FIXED P0] Prevent iOS Safari auto-zoom on input focus (requires >= 16px) */
  input, select, textarea { font-size: 16px !important; }
  .top-bar { padding: 0 12px; }
  .content    { padding: 0 12px 20px; }
  .page-head  { padding: 14px 12px 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .ph-actions { width: 100%; }
  .grid-4, .grid-3, .grid-2, .grid-main { grid-template-columns: 1fr; }
  .grid-pipeline { grid-template-columns: 1fr; }
  .pipeline-jobs { max-height: 200px; }
  .card-body { padding: 10px 12px; }
  .card-head { padding: 8px 12px; }
  .metric-val { font-size: 1.6rem; }
  .aurora-ring { width: 90px; height: 90px; }
  .aurora-wrap { padding: 14px 12px 10px; }
  .screen { padding-top: calc(var(--ic-height) + 8px); padding-bottom: 74px; }
}

@media (max-width: 480px) {
  html { font-size: 12px; }
  .top-bar   { padding: 0 8px; }
  .content   { padding: 0 8px 16px; }
  .page-head { padding: 12px 8px 0; }
  .btn       { font-size: 9px; padding: 5px 11px; }
  /* Kanban: scroll horizontally rather than crushing columns */
  .pipeline-cols {
    grid-template-columns: repeat(4, minmax(148px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  /* Pipeline sidebar collapses fully on small phones */
  .grid-pipeline { grid-template-columns: 1fr; }
  /* Nav wordmark & user-pill */
  .top-bar-wordmark { font-size: .95rem; }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .screen  { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* ── Global mobile utilities (applied everywhere) ────────────── */

/* 1. Prevent ANY element from forcing horizontal scroll */
body { overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }

/* 2. All tables get a scroll wrapper automatically */
.a-table, table:not(.no-scroll) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* ...but revert for tables that are deliberately non-data (e.g. layout) */
table.layout-table { display: table; overflow-x: visible; }

/* 3. Safe minimum touch target for all interactive elements — unconditional */
button, [role="button"], a.btn, .btn, input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
}
/* Desktop can have denser targets */
@media (min-width: 1024px) {
  button, [role="button"], a.btn, .btn, input[type="submit"] {
    min-height: 36px;
    min-width: auto;
  }
}

/* 4. Top-bar: hide low-priority items on small screens */
@media (max-width: 480px) {
  .tb-hide-xs { display: none !important; }
}

/* 5. Page-head action buttons stack on mobile */
@media (max-width: 480px) {
  .ph-actions { flex-direction: column; width: 100%; }
  .ph-actions .btn { width: 100%; text-align: center; justify-content: center; }
}

/* 6. Cards with fixed min-widths inside grids */
@media (max-width: 480px) {
  .card { min-width: 0 !important; }
}

/* ── MATERIAL CLASSES — macOS-native frosted surfaces ────────
   Use these on top-bar, sidebars, popovers, modals.
   backdrop-filter applies the frosted glass effect.
────────────────────────────────────────────────────────────── */
.mat-toolbar {
  background: var(--bg-toolbar);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  backdrop-filter: blur(32px) saturate(180%);
  border-bottom: 0.5px solid var(--line);
}
.mat-sidebar {
  background: var(--bg-sidebar);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  backdrop-filter: blur(32px) saturate(180%);
  border-right: 0.5px solid var(--line);
}
.mat-popover {
  background: var(--bg-popover);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  backdrop-filter: blur(32px) saturate(180%);
  box-shadow: var(--shadow-popover);
  border-radius: var(--r-md);
}
.mat-modal {
  background: var(--bg-modal);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  backdrop-filter: blur(40px) saturate(200%);
  box-shadow: var(--shadow-modal);
  border-radius: var(--r-xl);
}

/* ── GRID OVERLAY — explicit utility class ───────────────────
   Apply to hero sections, full-bleed surfaces for texture.
────────────────────────────────────────────────────────────── */
.grid-overlay {
  position: relative;
}
.grid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 20%, transparent 80%);
}
.grid-overlay > * { position: relative; z-index: 1; }

/* ── BEACON BUTTON — neon pink, ONE per screen ───────────────── */
.btn-beacon {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  box-shadow: var(--trigger-inset), var(--brand-glow);
  font-family: var(--ff-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 7px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: filter 0.08s, box-shadow 0.08s;
}
.btn-beacon:hover  { filter: brightness(1.12); box-shadow: var(--trigger-inset), var(--shadow-brand); }
.btn-beacon:active { filter: brightness(0.94); box-shadow: var(--trigger-press); }

/* ── TYPE SCALE — Tevos type specimen ───────────────────────────
   HERO    48 / 700    — page-level headline, Inter display
   TITLE1  28 / 700    — section heading
   TITLE2  22 / 590    — sub-section / card heading
   BODY    13 / 400    — paragraph text
   LABEL   10 / mono   — JetBrains Mono, uppercase, tracked
   METRIC  34 / 200    — large cyan KPI numeral
────────────────────────────────────────────────────────────── */
.t-hero {
  font-family: var(--ff-display);
  font-size: 48px; font-weight: 700;
  line-height: 1.06; letter-spacing: -0.035em;
  color: var(--t-primary);
}
.t-title1 {
  font-family: var(--ff-display);
  font-size: 28px; font-weight: 700;
  line-height: 1.10; letter-spacing: -0.025em;
  color: var(--t-primary);
}
.t-title2 {
  font-family: var(--ff-display);
  font-size: 22px; font-weight: 590;
  line-height: 1.15; letter-spacing: -0.018em;
  color: var(--t-primary);
}
.t-body {
  font-family: var(--ff-body);
  font-size: 13px; font-weight: 400;
  line-height: 1.65; letter-spacing: 0;
  color: var(--t-secondary);
}
.t-label {
  font-family: var(--ff-data);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t-muted);
}
.t-metric {
  font-family: var(--ff-data);
  font-size: 34px; font-weight: 200;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--trust);
  text-shadow: 0 0 16px rgba(16,185,129,0.30);
}
/* Modifier utilities */
.t-cyan    { color: var(--trust);    }
.t-pink    { color: var(--brand);    }
.t-violet  { color: var(--violet);   }
.t-blue    { color: var(--sys-blue); }
.t-amber   { color: var(--amber);    }
.t-green   { color: #30D158;         }
.t-muted-c { color: var(--t-muted);  }

/* ── LIVE DOT — cyan pulse ───────────────────────────────────── */
.dot-live {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--trust);
  box-shadow: 0 0 6px rgba(16,185,129,0.60);
  animation: livePulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── MATCH RING — circular score gauge ───────────────────────
   Usage: <div class="ring-match" style="--score:87">
            <span class="ring-score">87</span>
            <span class="ring-label">MATCH</span>
          </div>
   The ring stroke is the gap between outer and inner radii.
   Conic gradient draws the arc; ::after punches the center hole.
────────────────────────────────────────────────────────────── */
.ring-match {
  --score:   87;
  --size:    62px;
  --stroke:  4.5px;
  --color:   var(--trust);
  --color-rgb: 61,224,252;
  position: relative;
  width:  var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(
    var(--color) calc(var(--score) * 1%),
    var(--line-mid) 0
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(var(--color-rgb), 0.22);
  flex-shrink: 0;
}
/* Center hole */
.ring-match::after {
  content: "";
  position: absolute;
  width:  calc(var(--size) - var(--stroke) * 2);
  height: calc(var(--size) - var(--stroke) * 2);
  border-radius: 50%;
  background: var(--bg-card, var(--bg-base));
}
/* Score number */
.ring-score {
  position: relative; z-index: 1;
  font-family: var(--ff-data);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color);
}
/* Sub-label */
.ring-label {
  position: relative; z-index: 1;
  font-family: var(--ff-data);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted);
  margin-top: 1px;
}
/* Size variants */
.ring-match-sm { --size: 44px; --stroke: 3.5px; }
.ring-match-sm .ring-score { font-size: 0.85rem; }
.ring-match-lg { --size: 80px; --stroke: 5.5px; }
.ring-match-lg .ring-score { font-size: 1.6rem; }
/* Score-driven color: high=cyan, mid=amber, low=risk */
.ring-match[data-level="hi"] { --color: var(--trust);    --color-rgb: 61,224,252;  }
.ring-match[data-level="md"] { --color: var(--amber);    --color-rgb: 255,159,10; }
.ring-match[data-level="lo"] { --color: var(--risk);     --color-rgb: 239,68,68;  }
.ring-match[data-level="md"] .ring-score { color: var(--amber);  }
.ring-match[data-level="lo"] .ring-score { color: var(--risk);   }

/* ── color-mix() fallback — Samsung Internet < 14, old WebKit ── */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  [data-theme="dark"] {
    --brand-pale:   rgba(16,185,129,0.14);
    --brand-glass:  rgba(16,185,129,0.08);
    --brand-border: rgba(16,185,129,0.28);
    --brand-glow:   0 0 14px rgba(16,185,129,0.35);
    --trust-pale:   rgba(16,185,129,0.12);
    --trust-glass:  rgba(16,185,129,0.07);
    --trust-border: rgba(16,185,129,0.22);
    --trust-glow:   0 0 12px rgba(16,185,129,0.24);
  }
  [data-theme="light"] {
    --brand-pale:   rgba(5,150,105,0.10);
    --brand-glass:  rgba(5,150,105,0.06);
    --brand-border: rgba(5,150,105,0.24);
    --brand-glow:   0 0 12px rgba(5,150,105,0.18);
    --trust-pale:   rgba(2,132,199,0.10);
    --trust-glass:  rgba(2,132,199,0.07);
    --trust-border: rgba(2,132,199,0.24);
    --trust-glow:   0 0 10px rgba(2,132,199,0.16);
  }
}

/* ── User dropdown — SVG-icon navigation menu ─────────────────── */
.user-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  min-width: 220px;
  background: var(--bg-popover);
  border: 1px solid var(--border-1, var(--line-mid));
  border-radius: var(--r-md);
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(120,200,255,0.08);
  z-index: 9998;
  overflow: hidden;
}
.udd-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-1, var(--line));
  background: var(--bg-raised);
}
.udd-ava {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--accent-soft, rgba(16,185,129,0.10));
  border: 1px solid var(--accent-border, rgba(16,185,129,0.28));
  display: flex; align-items: center; justify-content: center;
  color: var(--accent, #10B981);
  font-family: var(--ff-data);
  font-weight: 700;
  font-size: 15px;
}
.udd-info { flex: 1; min-width: 0; }
.udd-name {
  font-family: var(--ff-data);
  font-size: 11px; font-weight: 700;
  color: var(--t-primary);
  letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.udd-email {
  font-family: var(--ff-data);
  font-size: 9px; color: var(--t-muted);
  letter-spacing: 0.02em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.udd-role {
  font-family: var(--ff-data);
  font-size: 8px; color: var(--t-muted);
  letter-spacing: 0.10em; text-transform: uppercase; margin-top: 2px;
}
.udd-section { padding: 4px 0; }
.udd-section + .udd-section { border-top: 1px solid var(--border-1, var(--line)); }
.udd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  font-family: var(--ff-data);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--t-secondary);
  text-decoration: none;
  transition: background 0.08s, color 0.08s;
  cursor: pointer;
}
.udd-item:hover { background: var(--bg-hover, rgba(16,185,129,0.06)); color: var(--t-primary); }
.udd-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--t-muted);
  transition: color 0.08s;
}
.udd-item:hover .udd-icon { color: var(--accent, #10B981); }
.udd-item--danger { color: var(--risk, #EF4444); }
.udd-item--danger .udd-icon { color: var(--risk, #EF4444); opacity: 0.7; }
.udd-item--danger:hover { background: var(--risk-glass, rgba(239,68,68,0.07)); color: var(--risk); }
.udd-item--danger:hover .udd-icon { color: var(--risk); opacity: 1; }