:root{
  --bg:#0f1218; --panel:#151a22; --text:#e6ebf2; --muted:#a8b3c2; --accent:#22d3ee; --line:#223042; --danger:#ef4444;
  --gap:12px; --side:320px; --radius:12px;
  --focus:#22d3ee; --focus-shadow:rgba(34,211,238,.35);
}

/* Reset & base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:linear-gradient(180deg,#0b0f15,#0e1420 40%,#0b0f15);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection{ background:rgba(34,211,238,.25); color:#eaf4ff; }

/* Header/Footer */
.app-header,.app-footer{ padding:12px 16px; border-bottom:1px solid var(--line); }
.app-footer{ border-top:1px solid var(--line); border-bottom:none; color:var(--muted); }

.brand-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
#status{ color:var(--muted); font-size:14px; min-height:18px; }

/* Main grid */
.app-main{
  display:grid;
  grid-template-columns: var(--side) 1fr var(--side);
  gap: var(--gap);
  padding: 8px 12px;
}

/* Panels */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
}
.panel h2{ margin:0 0 10px 0; font-size:16px; font-weight:600; }

.row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }

/* Controls */
button, .file span, .btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:0 12px; border-radius:10px;
  border:1px solid #2a3a4f;
  background:rgba(255,255,255,.07);
  color:var(--text); cursor:pointer;
}
button:hover, .btn:hover, .file span:hover{ background:rgba(255,255,255,.10); }
button.ghost{ background:transparent; border-color:var(--line); }
button:disabled{ opacity:.55; cursor:not-allowed; }

/* Accessible focus */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label:focus-within{
  outline:2px solid var(--focus);
  outline-offset:2px;
  box-shadow: 0 0 0 2px var(--focus-shadow);
}
/* Keyboard-only hint for file input proxy */
.file input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.file span{ border-style:solid; border-width:1px; }

/* Stage */
.panel.stage{ padding:10px; }
.stage-wrap{
  position:relative; width:100%; aspect-ratio:4/3;
  border:1px dashed var(--line); border-radius:8px; overflow:hidden; background:#0b0f15;
}
video,canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
}

/* Info metrics */
.findings{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 6px 10px;
  font-size:14px;
}
.kv{ display:contents; }
.kv > div:first-child{ color:var(--muted); }
.kv > div:last-child{ text-align:right; }

/* Interpretation */
.card{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px; padding:10px; color:var(--muted); }
.card h3{ color:#eaf4ff; font-weight:600; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Responsive */
@media (max-width: 1200px){
  :root{ --side:300px; --gap:10px; }
}
@media (max-width: 980px){
  .app-main{ grid-template-columns:1fr; padding:10px; }
  .panel{ padding:12px; margin:0 2px; }
  .panel.stage .stage-wrap{ max-height:68vh; min-height:320px; }
  .findings{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  #status{ font-size:13px; }
  .findings{ grid-template-columns: 1fr; }
  .panel{ padding:10px; }
}

/* Forced-colors (Windows High Contrast) */
@media (forced-colors: active){
  :root{ forced-color-adjust: auto; }
  button, .btn{ border-color: ButtonText; background: Canvas; color: ButtonText; }
  a:focus-visible, button:focus-visible{ outline-color: ButtonText; }
}