:root {
  color-scheme: dark;
  --bg: #07090c;
  --panel: #0e1319;
  --panel-2: #141b23;
  --panel-3: #1a242e;
  --line: #27323d;
  --line-hot: #4b6479;
  --text: #eef4f8;
  --muted: #8493a1;
  --red: #ff4655;
  --cyan: #35d1c4;
  --blue: #5fa8ff;
  --green: #57d68d;
  --yellow: #f1c75b;
  --purple: #b693ff;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-width: 920px; height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font: 13px/1.4 Inter, "Segoe UI", system-ui, sans-serif; }
button, input, select, textarea, .button { font: inherit; }
button, input, select, textarea { color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; }
button, .button { min-height: 32px; padding: 7px 11px; cursor: pointer; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; text-decoration: none; font: 700 10px var(--mono); letter-spacing: .04em; }
button:hover, .button:hover, button:focus-visible, .button:focus-visible { outline: none; border-color: var(--cyan); background: #16302f; }
button:disabled { opacity: .35; cursor: default; }
button.primary, .button.primary { border-color: #ff7580; background: var(--red); color: white; }
.button.ghost { display: inline-flex; align-items: center; }
input, select, textarea { padding: 8px 9px; }
kbd { min-width: 21px; display: inline-grid; place-items: center; padding: 2px 5px; color: #dce7ee; background: #080b0f; border: 1px solid #344453; border-bottom-width: 2px; border-radius: 3px; font: 9px var(--mono); }

.inspector-app { height: 100%; display: grid; grid-template-rows: 64px minmax(0, 1fr); }
.inspector-header { z-index: 10; display: flex; align-items: center; gap: 18px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: #0b1015; box-shadow: 0 6px 22px #0007; }
.brand { min-width: 226px; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; background: var(--red); color: white; clip-path: polygon(13% 0,100% 0,87% 100%,0 100%); font: 900 12px var(--mono); letter-spacing: .08em; }
.brand b, .brand small { display: block; }
.brand b { font: 800 13px var(--mono); letter-spacing: .08em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.character-picker { min-width: 220px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; }
.character-picker span { color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; }
.character-picker select { width: 100%; min-width: 0; font-weight: 700; }
.build-badge { margin-right: auto; padding: 5px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; font: 9px var(--mono); white-space: nowrap; }
.header-actions { display: flex; gap: 6px; }

.inspector-workspace { min-height: 0; display: grid; grid-template-columns: 290px minmax(0,1fr); overflow: hidden; }
.move-browser { min-height: 0; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); }
.browser-intro { padding: 15px 14px 10px; }
.eyebrow { color: var(--cyan); font: 800 9px var(--mono); letter-spacing: .13em; }
.browser-intro h1 { margin: 3px 0; font-size: 20px; line-height: 1.1; }
.browser-intro p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.move-search { padding: 0 12px 10px; }
.move-search span { display: block; margin-bottom: 5px; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }
.move-search input { width: 100%; }
.category-filters { display: flex; gap: 4px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: thin; }
.category-filters button { min-height: 26px; padding: 4px 8px; color: var(--muted); white-space: nowrap; }
.category-filters button.active { color: white; border-color: var(--cyan); background: #17302f; }
.move-list { min-height: 0; flex: 1; overflow-y: auto; padding: 4px 7px 10px; scrollbar-color: #394959 transparent; }
.move-group { position: sticky; top: 0; z-index: 1; padding: 10px 8px 5px; background: linear-gradient(var(--panel) 80%,transparent); color: var(--muted); font: 800 9px var(--mono); letter-spacing: .12em; }
.move-entry { width: 100%; min-height: 58px; display: grid; grid-template-columns: 4px minmax(0,1fr) auto; gap: 8px; align-items: center; margin-bottom: 3px; padding: 7px 8px 7px 0; text-align: left; background: transparent; border-color: transparent; }
.move-entry .phase-mark { align-self: stretch; border-radius: 1px; background: #33404c; }
.move-entry.has-hit .phase-mark { background: var(--red); box-shadow: 0 0 9px #ff465577; }
.move-entry strong, .move-entry code, .move-entry small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-entry strong { font-size: 11px; }
.move-entry code { margin-top: 3px; color: var(--muted); font: 9px var(--mono); }
.move-entry small { color: #9fafbb; font: 8px var(--mono); text-align: right; }
.move-entry.selected { background: #152c2c; border-color: #326a67; }
.move-entry:hover { background: #141d25; }
.shortcut-card { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin: 0 10px 10px; padding: 8px; color: var(--muted); border: 1px solid var(--line); background: #0a0e13; font: 8px var(--mono); }
.shortcut-card b { grid-row: span 2; align-self: center; color: var(--cyan); }
.shortcut-card span { white-space: nowrap; }

.review-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: 62px minmax(0,1fr) 190px; overflow: hidden; }
.move-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,#111922,#0c1117); }
.move-identity { min-width: 0; }
.move-identity h2 { margin: 1px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px var(--mono); }
.move-meta { color: var(--muted); font: 9px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.move-nav { display: flex; gap: 5px; }
.review-grid { min-height: 0; display: grid; grid-template-columns: minmax(460px,1.65fr) minmax(320px,.85fr); gap: 1px; background: var(--line); overflow: hidden; }

.viewer-card { min-height: 0; display: grid; grid-template-rows: 43px minmax(0,1fr) auto; background: var(--panel); overflow: hidden; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.transport { display: flex; gap: 4px; }
.transport button { min-width: 36px; padding: 5px 8px; }
.transport .play { min-width: 82px; color: var(--cyan); }
.transport .play.playing { color: white; border-color: var(--red); background: #5c2027; }
.speed-control { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 9px var(--mono); }
.speed-control select { padding: 5px 7px; }
.canvas-wrap { min-height: 0; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 70%,#18232d,#080c10 70%); }
#frameViewport { width: 100%; height: 100%; display: block; }
.frame-badge { position: absolute; top: 10px; left: 10px; min-width: 180px; padding: 7px 9px; border: 1px solid #425362; background: #070a0ee8; box-shadow: 0 4px 16px #0008; font-family: var(--mono); }
.frame-badge b, .frame-badge span { display: block; }
.frame-badge b { color: white; font-size: 12px; }
.frame-badge span { margin-top: 3px; color: var(--cyan); font-size: 9px; }
.phase-badge { position: absolute; top: 10px; right: 10px; padding: 6px 9px; border: 1px solid var(--line-hot); background: #070a0ee8; color: var(--yellow); font: 900 10px var(--mono); letter-spacing: .1em; }
.phase-badge[data-phase="active"] { color: #fff; border-color: var(--red); background: #621e26e8; }
.phase-badge[data-phase="startup"] { color: var(--purple); }
.phase-badge[data-phase="recovery"] { color: var(--green); }
.viewport-legend { position: absolute; right: 8px; bottom: 7px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 80%; padding: 4px 6px; background: #070a0edd; font: 8px var(--mono); }
.viewport-legend span::before { content: ""; width: 7px; height: 7px; display: inline-block; margin-right: 3px; background: currentColor; }
.hurt { color: var(--blue) !important; }.hit { color: var(--red) !important; }.push { color: var(--green) !important; }.throw-hurt { color: var(--cyan) !important; }.throw { color: var(--yellow) !important; }.proximity { color: var(--purple) !important; }
.overlay-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 7px 9px; border-top: 1px solid var(--line); color: var(--muted); background: #0b1016; font: 8px var(--mono); }
.overlay-controls > span { color: white; font-weight: 800; }
.overlay-controls label { white-space: nowrap; cursor: pointer; }
.overlay-controls input { width: 11px; height: 11px; margin: 0 2px 0 0; vertical-align: -2px; accent-color: currentColor; }

.debug-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--panel); }
.debug-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.debug-head h3, .filmstrip-panel h3 { margin: 2px 0 0; font: 800 11px var(--mono); letter-spacing: .07em; }
.debug-head button { min-height: 27px; padding: 4px 9px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.metric-card { min-width: 0; padding: 7px; background: #0b1015; }
.metric-card b, .metric-card span { display: block; }
.metric-card b { color: var(--cyan); font: 800 14px var(--mono); }
.metric-card span { margin-top: 2px; color: var(--muted); font: 7px var(--mono); letter-spacing: .07em; }
.debug-content { min-height: 0; flex: 1; overflow: auto; padding: 9px; scrollbar-color: #394959 transparent; }
.debug-section { margin-bottom: 11px; }
.debug-section h4 { margin: 0 0 5px; color: var(--cyan); font: 800 8px var(--mono); letter-spacing: .12em; }
.detail-grid { display: grid; grid-template-columns: minmax(82px,.6fr) minmax(0,1.4fr); gap: 3px 7px; margin: 0; font: 9px/1.45 var(--mono); }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; color: #d7e1e8; }
.collision-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.collision-pill { padding: 3px 5px; border: 1px solid var(--line); background: #090d12; font: 8px var(--mono); }
.collision-pill b { margin-left: 4px; color: white; }
.json-preview { margin: 0; max-height: 120px; overflow: auto; padding: 6px; color: #b6c5cf; background: #080c10; border: 1px solid #1d2832; font: 8px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-state { min-height: 100px; display: grid; place-items: center; color: #63727f; text-align: center; }
.report-box { padding: 9px; border-top: 1px solid var(--line); background: #0a0f14; }
.report-box label { display: block; margin-bottom: 5px; color: var(--yellow); font: 800 8px var(--mono); letter-spacing: .1em; }
.report-box textarea { width: 100%; min-height: 52px; max-height: 100px; resize: vertical; font-size: 10px; }
.report-box .wide { width: 100%; margin-top: 6px; }
.report-box small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }

.filmstrip-panel { min-height: 0; display: grid; grid-template-rows: 42px minmax(0,1fr); border-top: 1px solid var(--line); background: var(--panel); }
.filmstrip-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.filmstrip-summary { color: var(--muted); font: 9px var(--mono); }
.filmstrip { min-height: 0; display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; padding: 7px; scrollbar-color: #3c4d5d #0a0e12; }
.film-frame { position: relative; min-width: 100px; width: 100px; height: 126px; display: grid; grid-template-rows: 86px 18px 16px; padding: 0; overflow: hidden; text-align: left; background: #0a0e13; border-color: #26323d; border-top: 3px solid #3e4b57; }
.film-frame[data-phase="startup"] { border-top-color: var(--purple); }
.film-frame[data-phase="active"] { border-top-color: var(--red); }
.film-frame[data-phase="recovery"] { border-top-color: var(--green); }
.film-frame canvas { width: 100%; height: 86px; background: radial-gradient(circle at 50% 72%,#1b2731,#090d11 70%); image-rendering: pixelated; }
.film-frame b, .film-frame small { padding: 1px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.film-frame b { color: white; font-size: 8px; }
.film-frame small { color: var(--muted); font-size: 7px; }
.film-frame.has-hit::after { content: "HIT"; position: absolute; top: 5px; right: 4px; padding: 2px 4px; color: white; background: var(--red); font: 800 7px var(--mono); }
.film-frame.selected { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 14px #35d1c455; background: #17302f; }

.toast { pointer-events: none; position: fixed; z-index: 100; right: 16px; bottom: 16px; transform: translateY(12px); opacity: 0; padding: 10px 13px; color: #06100f; background: var(--cyan); box-shadow: 0 10px 35px #000c; font: 800 10px var(--mono); transition: .18s ease; }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error { color: white; background: var(--red); }
.loading-overlay { position: fixed; z-index: 200; inset: 64px 0 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: #07090cf7; }
.loading-overlay .loading-mark { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 6px; background: var(--red); clip-path: polygon(13% 0,100% 0,87% 100%,0 100%); font: 900 15px var(--mono); }
.loading-overlay b { font: 800 12px var(--mono); letter-spacing: .12em; }
.loading-overlay span { color: var(--muted); font-size: 10px; }
.inspector-app[data-ready="true"] .loading-overlay { display: none; }

@media (max-width: 1220px) {
  .inspector-workspace { grid-template-columns: 250px minmax(0,1fr); }
  .review-grid { grid-template-columns: minmax(410px,1.4fr) minmax(300px,.85fr); }
  .header-actions .ghost:first-child { display: none; }
  .build-badge { display: none; }
}