/* ===========================================================
   EMBEDDED CSS — fine-grained control beyond Tailwind utilities
   =========================================================== */

/* ===== CROSS-BROWSER COMPATIBILITY (Firefox + Chrome) ===== */
/* Universal box-sizing — ensures consistent box model across engines */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Prevent Firefox from shrinking/overlapping small text and numbers */
.countdown, [data-t], [data-s], .text-2xl, .text-lg {
  flex-shrink: 0;
  white-space: nowrap;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}
/* Webster equation box — breathing room for math symbols */
#websterInfo, #websterY {
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
}
/* Signal widget inner text — prevent label/number overlap */
.signal-widget, #signalWidgets > div {
  min-width: 0;
  overflow: visible;
}
#signalWidgets > div > div:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}
/* HCM/Webster calculation grid — prevent number crowding */
#designCalc > div {
  overflow: visible;
  min-width: 0;
}
#designCalc > div > span,
#designCalc > div > div {
  flex-shrink: 0;
  white-space: nowrap;
}
/* KPI cards — prevent value overflow */
[id^="kpi"] .text-lg, [id^="kpi"] .text-2xl, [id^="kpi"] .font-bold {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Quick stats bar — prevent overlap in header row */
#quickStats > span, #quickStats > div {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Phase diagram / ring-barrier numbers */
#designPhaseRings, #controllerRingBarrier {
  overflow: visible;
}
/* Header row small labels — prevent collapse */
.header-row .text-\[9px\], .header-row .text-\[10px\], .header-row .text-\[11px\] {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Screen-reader only (accessible hiding) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.sr-only.focus\:not-sr-only:focus{position:fixed;width:auto;height:auto;padding:0.5rem 1rem;margin:0;clip:auto;white-space:normal;z-index:99999;}

/* Global focus ring for all interactive elements */
:focus-visible{outline:2px solid #22d3ee;outline-offset:2px;border-radius:4px;}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #22d3ee;outline-offset:2px;box-shadow:0 0 0 4px rgba(34,211,238,0.2);}

/* Reduced motion preference */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}}

/* Skeleton loading screens */
.skeleton{background:linear-gradient(90deg,#1a2332 25%,#1e2a3a 50%,#1a2332 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;border-radius:0.375rem;}
@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:0.75rem;margin:0.25rem 0;}
.skeleton-heading{height:1.25rem;width:60%;margin:0.5rem 0;}
.skeleton-btn{height:2rem;width:5rem;border-radius:0.375rem;}
.skeleton-card{padding:1rem;border:1px solid #1e2a3a;border-radius:0.5rem;background:#0f1720;}

  html, body { background:#0a0e14; color:#e2e8f0; text-rendering:optimizeLegibility; }
  ::-webkit-scrollbar { width:8px; height:8px; }
  ::-webkit-scrollbar-track { background:#0a0e14; }
  ::-webkit-scrollbar-thumb { background:#1e2a3a; border-radius:4px; }

  /* CCTV cell: relative container so canvas overlays sit on top of video */
  .cctv-cell { position:relative; overflow:hidden; background:#000; border-radius:0.5rem; }
  .cctv-cell video, .cctv-cell canvas { position:absolute; inset:0; width:100%; height:100%; }
  .cctv-cell video { object-fit:cover; }
  .cctv-cell canvas { pointer-events:none; }
  /* 062/067: disabled camera dim overlay */
  .cctv-cell.cam-off { opacity:0.32; filter:grayscale(1); }
   /* 063: multi-view layouts + solo focus */
   #cctvGrid.layout-1x  { grid-template-columns:1fr; }
   #cctvGrid.layout-2x2 { grid-template-columns:repeat(2,1fr); }
   #cctvGrid.layout-3x3 { grid-template-columns:repeat(3,1fr); }
   #cctvGrid.layout-4x4 { grid-template-columns:repeat(4,1fr); }
   #cctvGrid.layout-5x5 { grid-template-columns:repeat(5,1fr); }
   #cctvGrid.layout-6x6 { grid-template-columns:repeat(6,1fr); }
   #cctvGrid.layout-auto { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  #cctvGrid.has-solo .cctv-cell { display:none; }
  #cctvGrid.has-solo .cctv-cell.cam-solo { display:block; grid-column:1 / -1; }
  /* 066: vision-mode frame tint */
  #cctvGrid.vm-night .cctv-cell video, #cctvGrid.vm-night .cctv-cell canvas { filter:brightness(0.65) contrast(1.25) hue-rotate(200deg); }
  #cctvGrid.vm-fog   .cctv-cell video, #cctvGrid.vm-fog   .cctv-cell canvas { filter:contrast(0.8) brightness(1.15) blur(0.4px); }
  /* 063/066 active button styling */
  .cam-layout-btn.active, .vision-btn.active { background:rgba(34,211,238,0.25); color:#22d3ee; border-color:#22d3ee; }

  /* Scanline / vignette effect for authentic CCTV aesthetic */
  .cctv-cell::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 2px, transparent 3px),
      radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
    mix-blend-mode:multiply;
  }

  /* Tab panel transitions */
  .tab-panel { transition: opacity .2s ease-out, max-height .25s ease-out; overflow:hidden; }
  .tab-panel.hidden { opacity:0; max-height:0; pointer-events:none; }
  .tab-panel:not(.hidden) { opacity:1; max-height:5000px; display:block; animation:tabFadeIn .25s ease-out; }
  @keyframes tabFadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }

  /* Button click feedback */
  .tab-btn { transition: all .15s ease; }
  .tab-btn:active { transform:scale(0.96); }
  .btn-action { transition: all .15s ease; }
  .btn-action:active { transform:scale(0.95); }

  /* Card hover glow */
  .cctv-cell { transition: box-shadow .2s ease, transform .2s ease; }
  .cctv-cell:hover { box-shadow:0 0 12px rgba(34,211,238,0.2); }

  /* Signal head PiP overlay — circular inset in top-right corner */
  .pip-signal {
    position:absolute; top:8px; right:40px; z-index:15;
    width:72px; height:72px; border-radius:50%; overflow:hidden;
    border:2px solid #10b981; box-shadow:0 0 10px rgba(16,185,129,0.4);
    transition: opacity .3s ease, transform .3s ease;
  }
  .pip-signal video { width:100%; height:100%; object-fit:cover; }
  .pip-signal.pip-hidden { opacity:0; transform:scale(0.5); pointer-events:none; }

  /* Violations dropdown hover highlight */
  #violationsDropdown button:hover,
  #hikvisionSubmenu button:hover,
  #jenoptikSubmenu button:hover { background: rgba(56,189,248,0.08); }

  /* Login overlay entrance */
  #authOverlay .bg-tmc-panel { animation:loginSlideIn .4s cubic-bezier(0.16,1,0.3,1); }
  @keyframes loginSlideIn { from{opacity:0;transform:translateY(20px) scale(0.97);} to{opacity:1;transform:none;} }

  /* Loading bar shimmer */
  #loadingBar { background:linear-gradient(90deg, #22d3ee 0%, #06b6d4 50%, #22d3ee 100%); background-size:200% 100%; animation:shimmer 1.5s ease-in-out infinite; }
  @keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

  /* KPI card pulse on update */
  .kpi-updated { animation:kpiPulse .5s ease-out; }
  @keyframes kpiPulse { 0%{box-shadow:0 0 0 0 rgba(34,211,238,0.4);} 100%{box-shadow:0 0 0 8px rgba(34,211,238,0);} }

  /* Signal lamp glow */
  .lamp { width:18px; height:18px; border-radius:9999px; opacity:0.25; transition:opacity .15s, box-shadow .15s; }
  .lamp.on-red    { opacity:1; background:#ef4444; box-shadow:0 0 14px 3px rgba(239,68,68,.8); }
  .lamp.on-yellow { opacity:1; background:#f59e0b; box-shadow:0 0 14px 3px rgba(245,158,11,.8); }
  .lamp.on-green  { opacity:1; background:#10b981; box-shadow:0 0 14px 3px rgba(16,185,129,.8); }
  /* Flashing fail-safe state (conflict matrix triggered) */
  .lamp.on-flash  { opacity:1; background:#f59e0b; box-shadow:0 0 16px 4px rgba(245,158,11,.9); animation:flash 0.5s steps(1) infinite; }
  @keyframes flash { 0%{background:#ef4444;box-shadow:0 0 16px 4px rgba(239,68,68,.9);} 50%{background:#f59e0b;box-shadow:0 0 16px 4px rgba(245,158,11,.9);} }

  /* Digital countdown timer */
  .countdown { font-variant-numeric:tabular-nums; letter-spacing:0.05em; }

  /* Loading overlay */
  #loadingOverlay { -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

  /* Focus visible for accessibility */
  *:focus-visible {
    outline: 2px solid #22d3ee;
    outline-offset: 2px;
  }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #22d3ee;
    outline-offset: 2px;
  }

  /* Dark theme for native select dropdowns — fix ugly gray backgrounds */
  select {
    color-scheme: dark;
  }
  select option, select optgroup {
    background-color: #111722;
    color: #cbd5e1;
    padding: 4px 8px;
  }
  select option:hover, select option:focus, select option:active, select option:checked {
    background-color: #1e2a3a;
    color: #22d3ee;
  }
  body.light-theme select option, body.light-theme select optgroup {
    background-color: #f8fafc;
    color: #1e293b;
  }
  body.light-theme select option:hover, body.light-theme select option:checked {
    background-color: #e2e8f0;
    color: #0f172a;
  }
  .tab-btn:focus-visible, .cam-layout-btn:focus-visible, .vision-btn:focus-visible {
    outline: 2px solid #22d3ee;
    outline-offset: 2px;
  }

  /* Modal animation */
  .modal-enter { animation:modalIn .25s ease-out; }
  @keyframes modalIn { from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;} }

  .tab-active { border-color:#22d3ee !important; color:#22d3ee; }
  .pulse-rec { animation:pulse 1.4s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

  /* S1: pedestrian-clearance badge — danger state when WALK < MUTCD 7s */
  #pedClearanceBadge.ped-warn {
    border-color:#ef4444 !important; color:#ef4444 !important;
    background:rgba(239,68,68,.12) !important;
  }

  /* LOS gauge ring */
  #losGauge { transition: filter .4s; }
  .los-glow-A, .los-glow-B { filter: drop-shadow(0 0 10px #10b981); }
  .los-glow-C, .los-glow-D { filter: drop-shadow(0 0 10px #f59e0b); }
  .los-glow-E, .los-glow-F { filter: drop-shadow(0 0 12px #ef4444); animation:losFlash 0.8s steps(1) infinite; }
  @keyframes losFlash { 0%,100%{filter:drop-shadow(0 0 12px #ef4444);} 50%{filter:drop-shadow(0 0 4px #ef4444);} }

  /* Intersection schematic */
  .schem-arrow { transition: fill .2s, opacity .2s; }

  /* ===== NEXT-GEN TMC AESTHETIC ===== */
  /* Holographic panels */
  .holo {
    position:relative;
    background:linear-gradient(160deg, rgba(17,23,34,0.95), rgba(10,14,20,0.95));
    box-shadow:0 0 0 1px rgba(34,211,238,0.18), 0 0 22px rgba(34,211,238,0.07) inset, 0 0 18px rgba(34,211,238,0.05);
  }
  .holo::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:linear-gradient(115deg, transparent 40%, rgba(34,211,238,0.06) 50%, transparent 60%);
    background-size:250% 250%; animation:holoSweep 6s linear infinite;
  }
  @keyframes holoSweep { 0%{background-position:120% 0;} 100%{background-position:-20% 0;} }

  /* Neon ambient shadowing utility */
  .neon-cyan { box-shadow:0 0 12px rgba(34,211,238,0.35), 0 0 4px rgba(34,211,238,0.5) inset; }
  .neon-mag  { box-shadow:0 0 12px rgba(167,139,250,0.4), 0 0 4px rgba(167,139,250,0.5) inset; }

  /* Dynamic grid scanlines over video feed */
  .scanlines::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
    background:repeating-linear-gradient(0deg, rgba(34,211,238,0.05) 0px, rgba(34,211,238,0.05) 1px, transparent 2px, transparent 4px);
    mix-blend-mode:screen; animation:scan 8s linear infinite;
  }
  @keyframes scan { from{background-position-y:0;} to{background-position-y:240px;} }

  /* V2X OBU/RSU telemetry pulse */
  .v2x-pulse { animation:v2xPulse 1.6s ease-in-out infinite; }
  @keyframes v2xPulse { 0%,100%{opacity:.35;} 50%{opacity:1;} }

  /* Analyst ticker */
  #analystTicker {
    white-space:nowrap; overflow:hidden;
  }
  #analystTicker span { display:inline-block; padding-left:100%; animation:ticker 28s linear infinite; }
  @keyframes ticker { from{transform:translateX(0);} to{transform:translateX(-100%);} }
  html[dir="rtl"] #analystTicker span { padding-left:0; padding-right:100%; animation-name:tickerRtl; }
  @keyframes tickerRtl { from{transform:translateX(0);} to{transform:translateX(100%);} }

  /* Green-wave platoon motion */
  .platoon { animation:platoonMove 6s linear infinite; }
  @keyframes platoonMove { from{transform:translateX(-30px);} to{transform:translateX(450px);} }
  /* Task 047: light theme for daylight field use */
  body.light-theme { background:#e2e8f0; color:#0f172a; }
  body.light-theme .bg-tmc-panel { background:#f1f5f9; }
  body.light-theme .text-slate-400 { color:#475569; }
  body.light-theme .border-tmc-line { border-color:#cbd5e1; }
  body.light-theme .bg-tmc-bg { background:#f8fafc; }
  /* Task 086: RTL support for Arabic — mirror flow, keep LTR for numeric/telemetry */
  /* Comprehensive RTL support for Arabic — mirror all directional properties */
  html[dir="rtl"] body { direction:rtl; text-align:right; }
  html[dir="rtl"] .font-mono, html[dir="rtl"] svg, html[dir="rtl"] canvas,
  html[dir="rtl"] table, html[dir="rtl"] #eventLog, html[dir="rtl"] #analystStream { direction:ltr; text-align:left; }
  html[dir="rtl"] .ml-auto { margin-left:0; margin-right:auto; }
  html[dir="rtl"] .ml-1 { margin-left:0; margin-right:0.25rem; }
  html[dir="rtl"] .ml-2 { margin-left:0; margin-right:0.5rem; }
  html[dir="rtl"] .ml-3 { margin-left:0; margin-right:0.75rem; }
  html[dir="rtl"] .ml-4 { margin-left:0; margin-right:1rem; }
  html[dir="rtl"] .ml-6 { margin-left:0; margin-right:1.5rem; }
  html[dir="rtl"] .mr-2 { margin-right:0; margin-left:0.5rem; }
  html[dir="rtl"] .pl-3 { padding-left:0; padding-right:0.75rem; }
  html[dir="rtl"] .pl-4 { padding-left:0; padding-right:1rem; }
  html[dir="rtl"] .pr-4 { padding-right:0; padding-left:1rem; }
  html[dir="rtl"] .text-left { text-align:right; }
  html[dir="rtl"] .text-right { text-align:left; }
  html[dir="rtl"] .border-l-2 { border-left-width:0; border-right-width:2px; }
  html[dir="rtl"] .border-l { border-left-width:0; border-right-width:1px; }
  html[dir="rtl"] .border-r { border-right-width:0; border-left-width:1px; }
  html[dir="rtl"] .pl-2 { padding-left:0; padding-right:0.5rem; }
  html[dir="rtl"] .toast-container { right:auto; left:24px; }
  html[dir="rtl"] .toast { animation-name:toastInRtl; }
  html[dir="rtl"] .toast.toast-exit { animation-name:toastOutRtl; }
  @keyframes toastInRtl { from{opacity:0;transform:translateX(-100px);} to{opacity:1;transform:translateX(0);} }
  @keyframes toastOutRtl { from{opacity:1;transform:translateX(0);} to{opacity:0;transform:translateX(-100px);} }
  html[dir="rtl"] .platoon { animation-name:platoonMoveRtl; }
  @keyframes platoonMoveRtl { from{transform:translateX(30px);} to{transform:translateX(-450px);} }
  html[dir="rtl"] .rounded-l-lg { border-top-left-radius:0; border-bottom-left-radius:0; border-top-right-radius:0.5rem; border-bottom-right-radius:0.5rem; }
  html[dir="rtl"] .rounded-r-lg { border-top-right-radius:0; border-bottom-right-radius:0; border-top-left-radius:0.5rem; border-bottom-left-radius:0.5rem; }
  html[dir="rtl"] .left-2 { left:auto; right:0.5rem; }
  html[dir="rtl"] .right-2 { right:auto; left:0.5rem; }
  html[dir="rtl"] .left-5 { left:auto; right:1.25rem; }
  html[dir="rtl"] .right-5 { right:auto; left:1.25rem; }
  html[dir="rtl"] .translate-x { transform:translateX(0); }
  html[dir="rtl"] .origin-left { transform-origin:right center; }
  html[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-right:0.25rem; margin-left:0; }
  html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-right:0.5rem; margin-left:0; }
  html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-right:0.75rem; margin-left:0; }
  html[dir="rtl"] .gap-1 { gap:0.25rem; }
  html[dir="rtl"] .gap-2 { gap:0.5rem; }
  html[dir="rtl"] .gap-3 { gap:0.75rem; }
  html[dir="rtl"] .gap-4 { gap:1rem; }
  html[dir="rtl"] .gap-x-6 { column-gap:1.5rem; }
  /* Fix flex direction for RTL */
  html[dir="rtl"] .flex-row-reverse { flex-direction:row; }
  /* Ensure counters and numbers stay LTR */
  html[dir="rtl"] .countdown, html[dir="rtl"] [id^="kpi"], html[dir="rtl"] [id^="v2x"] { direction:ltr; text-align:center; }
  /* Keep signal head and phase timers LTR */
  html[dir="rtl"] #phaseTimer, html[dir="rtl"] #phaseName, html[dir="rtl"] #websterY { direction:ltr; text-align:center; }
  /* Task 080: print stylesheet — isolate the reports dashboard */
  @media print {
    body.printing-report * { visibility:hidden !important; }
    body.printing-report #tab-reports, body.printing-report #tab-reports * { visibility:visible !important; }
    body.printing-report #tab-reports { position:absolute; left:0; top:0; width:100%; }
    body.printing-report #reportRoot { background:#fff !important; color:#0f172a !important; border:none !important; box-shadow:none !important; }
    body.printing-report #reportContent, body.printing-report #reportContent * { color:#0f172a !important; }
    body.printing-report .no-print { display:none !important; }
    @page { margin:14mm; }

    /* Roadmap Item 9: reference-compliant deliverable report print isolation */
    body.printing-deliverable * { visibility:hidden !important; }
    body.printing-deliverable #deliverableReport,
    body.printing-deliverable #deliverableReport * { visibility:visible !important; }
    body.printing-deliverable #deliverableReport {
      position:absolute; left:0; top:0; width:100%;
      background:#fff !important; color:#0f172a !important; padding:10mm;
      font-family: Arial, Helvetica, sans-serif;
    }
    body.printing-deliverable .del-report .del-title { font-size:18pt; font-weight:bold; margin-bottom:4mm; }
    body.printing-deliverable .del-report .del-sub { font-size:10pt; color:#333 !important; margin-bottom:6mm; }
    body.printing-deliverable .del-tbl { width:100%; border-collapse:collapse; margin-bottom:5mm; font-size:9pt; }
    body.printing-deliverable .del-cell { border:1px solid #999; padding:2mm 3mm; text-align:left; color:#0f172a !important; }
    body.printing-deliverable .del-num { text-align:right; font-variant-numeric:tabular-nums; }
    body.printing-deliverable .del-foot { font-size:9pt; margin-top:3mm; }
    body.printing-deliverable .del-std { font-size:8pt; color:#444 !important; margin-top:1mm; font-style:italic; }
  }

  /* Toast notifications */
  .toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }
  .toast, .toast-enter, .toast-show, .toast-exit {
    pointer-events: auto;
    min-width: 280px;
    max-width: 420px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .toast-enter { opacity:0; transform:translateX(100px); }
  .toast-show  { opacity:1; transform:translateX(0); }
  .toast-exit  { opacity:0; transform:translateX(100px); }
  .toast.success, .toast-enter.success, .toast-show.success {
    background: linear-gradient(135deg, #064e3b, #047857);
    color: #a7f3d0;
    border-color: #10b981;
  }
  .toast.error, .toast-enter.error, .toast-show.error {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    color: #fca5a5;
    border-color: #ef4444;
  }
  .toast.warning, .toast-enter.warning, .toast-show.warning {
    background: linear-gradient(135deg, #78350f, #92400e);
    color: #fde68a;
    border-color: #f59e0b;
  }
  .toast.info, .toast-enter.info, .toast-show.info {
    background: linear-gradient(135deg, #0c4a6e, #075985);
    color: #bae6fd;
    border-color: #22d3ee;
  }
  @keyframes toastIn {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100px); }
  }

  /* Keyboard shortcuts overlay */
  .shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalIn 0.25s ease-out;
  }
  .shortcuts-overlay .shortcuts-panel {
    background: linear-gradient(160deg, rgba(17,23,34,0.98), rgba(10,14,20,0.98));
    border: 1px solid rgba(34,211,238,0.3);
    border-radius: 16px;
    padding: 32px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 0 1px rgba(34,211,238,0.18), 0 0 40px rgba(34,211,238,0.1);
  }
  .shortcuts-panel h2 {
    color: #22d3ee;
    font-size: 1.5rem;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .shortcuts-panel .shortcut-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(34,211,238,0.1);
  }
  .shortcuts-panel .shortcut-row:last-child { border-bottom: none; }
  .shortcuts-panel .key {
    font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', monospace;
    background: rgba(34,211,238,0.15);
    color: #22d3ee;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid rgba(34,211,238,0.3);
  }
  .shortcuts-panel .desc { color: #94a3b8; }
  .shortcuts-panel .close-btn {
    margin-top: 24px;
    width: 100%;
    padding: 12px;
    background: rgba(34,211,238,0.2);
    color: #22d3ee;
    border: 1px solid rgba(34,211,238,0.4);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  .shortcuts-panel .close-btn:hover {
    background: rgba(34,211,238,0.35);
    box-shadow: 0 0 20px rgba(34,211,238,0.2);
  }

  /* Tooltip enhancement for title attributes */
  [title] { position: relative; }
  [title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: rgba(10,14,20,0.95);
    color: #e2e8f0;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid rgba(34,211,238,0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none;
    animation: tooltipIn 0.15s ease-out;
  }
  @keyframes tooltipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* Evaluator responsive grids */
  @media (max-width: 639px) {
    #evalScoreCard .grid-cols-3 { grid-template-columns: 1fr; }
    .signal-head-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 380px) {
    .signal-head-grid { grid-template-columns: 1fr; }
  }

  /* Quick stats bar value change animation */
  #quickStats .font-semibold, #quickStats .font-bold, #quickStats .font-mono, #quickStats .font-bold {
    transition: color 0.3s ease, opacity 0.3s ease;
  }

  /* ============ DESIGN MODE ============ */
  #tab-design .bg-tmc-panel {
    transition: border-color 0.2s ease;
  }
  #tab-design .bg-tmc-panel:hover {
    border-color: #22d3ee40;
  }
  #designSliders input[type="range"] {
    height: 6px;
    cursor: pointer;
  }
  #designSliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #0b0f17;
    cursor: pointer;
    box-shadow: 0 0 6px #10b98160;
  }
  #designSchematic {
    border-radius: 8px;
    border: 1px solid #1e2a3a;
  }
  @media (max-width: 639px) {
    #tab-design .xl\\:col-span-2 { grid-column: span 1; }
    #designSchematic { width: 100%; height: auto; }
  }
  /* RTL support for header-row and KPI grid */
  [dir="rtl"] .header-row { direction: rtl; text-align: right; }
  [dir="rtl"] .header-row .flex { direction: rtl; }
  [dir="rtl"] #kpiGrid { direction: rtl; }

  /* WCAG 2.3.3: Respect user motion preferences */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .v2x-pulse { animation: none !important; }
    .pulse-rec { animation: none !important; }
    .holo::before { animation: none !important; }
    .countdown { animation: none !important; }
    .loading-bar { animation: none !important; }
  }

  /* Loading skeleton states */
  .skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
  }
  .dark .skeleton {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
  }
  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .skeleton-text { height: 0.75rem; margin-bottom: 0.5rem; }
  .skeleton-chart { height: 200px; }
  .skeleton-row { display: flex; gap: 0.75rem; }
  .skeleton-row .skeleton { flex: 1; }

  /* ============================================================
     MOBILE RESPONSIVE TUNING
     Header rows already use flex-wrap; these rules tighten spacing
     and shrink chrome on small screens so the app fills the viewport
     with no side margins / horizontal scroll.
     ============================================================ */
  @media (max-width: 640px) {
    header > div {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
      gap: 0.35rem !important;
    }
    nav[role="tablist"] {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
      gap: 0.25rem !important;
    }
    .tab-btn {
      padding: 0.4rem 0.6rem !important;
      font-size: 10px !important;
      letter-spacing: 0.02em !important;
    }
    .tab-panel { padding-left: 0.5rem; padding-right: 0.5rem; }
    /* keep long toolbars scrollable instead of widening the page */
    .flex.flex-wrap { row-gap: 0.35rem; }
    /* Collapsible header: settings rows hidden by default on mobile,
       revealed by the ⚙ Settings toggle so the header stays compact. */
    .header-collapsible { display: none; }
    header.header-expanded .header-collapsible { display: flex; }
  }
  @media (max-width: 768px) {
    #kpiGrid { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ===== FIREFOX CROSS-BROWSER FIXES ===== */
  /* Firefox flexbox sub-pixel rounding — prevent text overlap in signal widgets */
  @-moz-document url-prefix() {
    .countdown { min-width: 2.4em; text-align: center; }
    [data-t] { min-width: 2.4em; text-align: center; }
    #websterInfo { letter-spacing: 0.04em; word-spacing: 0.15em; }
    #designCalc > div { min-width: 0; max-width: 100%; }
    #signalWidgets > div { min-width: 160px; }
    #signalWidgets > div > div:last-child { min-width: 80px; }
    /* Firefox font metrics differ — add padding to prevent number clipping */
    .text-2xl { line-height: 1.3; }
    .text-lg { line-height: 1.3; }
    #quickStats > span { padding: 0 2px; }
    /* Fix Firefox scrollbar width affecting layout */
    ::-moz-scrollbar { width: 8px; height: 8px; }
    ::-moz-scrollbar-track { background: #0a0e14; }
    ::-moz-scrollbar-thumb { background: #1e2a3a; border-radius: 4px; }
  }

  /* ===== PHASE TIMER & COUNTDOWN ROBUSTNESS ===== */
  .countdown, [data-t] {
    min-width: 2.4em;
    text-align: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ===== WEBSTER / HCM EQUATION BOX — prevent crowding ===== */
  #websterInfo {
    white-space: nowrap;
    letter-spacing: 0.03em;
    word-spacing: 0.1em;
  }
  #designCalc > div {
    overflow: visible;
    min-width: 0;
  }
  #designCalc > div > .text-lg,
  #designCalc > div > .text-\[9px\] {
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* KPI values — prevent Firefox from wrapping numbers */
  #kpiGrid > div {
    overflow: visible;
  }
  #kpiGrid > div > div:last-child {
    white-space: nowrap;
    flex-shrink: 0;
  }