:root {
  --ink: #18222d;
  --muted: #72808b;
  --line: #dce4e7;
  --paper: #f7faf9;
  --surface: #ffffff;
  --teal: #087f7b;
  --teal-soft: #dff3f0;
  --orange: #d77b3d;
  --orange-soft: #fff0e4;
  --red: #b94a49;
  --shadow: 0 18px 42px rgba(28, 49, 59, 0.09);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; max-width: 1440px; margin: 0 auto; padding: 0 42px 26px; }
.topbar { min-height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand-block, .topbar-meta, .model-status, .upload-trigger, .ghost-button, .tool-button, .tool-group, .panel-heading, .model-name, .class-chips, .rule-row, .privacy-note, .footer { display: flex; align-items: center; }
.brand-block { gap: 13px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; background: var(--ink); color: #e8fbf6; font: 500 12px/1 "DM Mono", monospace; letter-spacing: 0; }
.eyebrow, .kicker, .panel-index, .build-label, .stage-badge, .metric-label, .progress-meta, .footer { font-family: "DM Mono", monospace; letter-spacing: 0; }
.eyebrow { color: var(--teal); font-size: 10px; }
h1 { margin: 3px 0 0; font-size: 20px; line-height: 1; letter-spacing: 0; }
.topbar-meta { gap: 24px; color: var(--muted); font-size: 12px; }
.runtime-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); }
.runtime-dot span { width: 7px; height: 7px; border-radius: 50%; background: #49b88a; box-shadow: 0 0 0 4px #e4f4ed; }
.build-label { font-size: 11px; color: #8a969e; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; padding-top: 34px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }
.kicker { margin: 0 0 8px; color: var(--orange); font-size: 11px; }
h2 { margin: 0; font-size: 34px; line-height: 1.12; letter-spacing: 0; font-weight: 700; }
.model-status { gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.status-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.status-pip.loading { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.status-pip.error { background: var(--red); box-shadow: 0 0 0 4px #f9e2e0; }
.upload-bar { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.upload-trigger, .ghost-button { gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; font-weight: 600; }
.upload-trigger { background: var(--ink); color: white; border-color: var(--ink); }
.upload-trigger svg, .ghost-button svg { width: 15px; height: 15px; }
.ghost-button { background: transparent; color: var(--ink); }
.ghost-button:hover { border-color: var(--teal); color: var(--teal); }
.upload-note { margin-left: auto; color: var(--muted); font-size: 11px; }
.stage-wrap { background: #19242c; box-shadow: var(--shadow); }
.stage { position: relative; width: 100%; min-height: 450px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, #2b3b44, #18242b 70%); }
#mediaCanvas { display: block; width: 100%; height: auto; max-height: 64vh; object-fit: contain; }
.empty-stage { position: absolute; display: grid; place-items: center; gap: 9px; color: #c9d6d8; text-align: center; pointer-events: none; }
.empty-stage strong { font-size: 14px; font-weight: 600; }
.empty-stage span { color: #91a1a6; font-size: 11px; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #5d737b; color: #75c8bc; }
.empty-icon svg { width: 23px; height: 23px; }
.stage-badge { position: absolute; top: 15px; left: 15px; padding: 5px 8px; color: #d0dddf; background: rgba(20, 31, 37, .78); font-size: 10px; }
.tool-row { min-height: 64px; gap: 14px; padding: 11px 2px 0; flex-wrap: wrap; }
.tool-group { gap: 5px; }
.tool-button { gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 11px; }
.tool-button:hover, .tool-button.active { color: var(--teal); background: var(--teal-soft); border-color: #bfdfda; }
.tool-button svg { width: 14px; height: 14px; }
.tool-divider { width: 1px; height: 20px; background: var(--line); }
.threshold-control { display: grid; grid-template-columns: auto 34px; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.threshold-control output { color: var(--ink); font: 500 11px "DM Mono", monospace; text-align: right; }
.threshold-control input { width: 100px; accent-color: var(--teal); grid-column: 1 / -1; }
.play-button { margin-left: auto; }
.metrics-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 8px; }
.metric { padding: 14px 15px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-label { display: block; color: var(--muted); font-size: 10px; margin-bottom: 7px; }
.metric strong { font-size: 19px; font-weight: 700; }
.warning-metric strong { color: var(--orange); }
.insight-column { display: flex; flex-direction: column; gap: 14px; }
.panel { padding: 18px; background: var(--surface); border: 1px solid var(--line); }
.panel-heading { justify-content: space-between; margin-bottom: 16px; }
.panel-heading > div { display: flex; align-items: center; gap: 9px; }
.panel-index { color: var(--orange); font-size: 10px; }
h3 { margin: 0; font-size: 14px; letter-spacing: 0; }
.ready-tag, .alert-count { padding: 4px 7px; background: var(--teal-soft); color: var(--teal); font: 500 10px "DM Mono", monospace; }
.model-name { gap: 11px; margin-bottom: 17px; }
.model-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--teal); background: var(--teal-soft); }
.model-icon svg { width: 17px; height: 17px; }
.model-name strong, .model-name span { display: block; }
.model-name strong { font-size: 13px; }
.model-name span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.progress-track { height: 5px; background: #edf2f1; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--teal); transition: width .25s ease; }
.progress-meta { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 10px; }
.class-chips { gap: 8px; margin-top: 17px; flex-wrap: wrap; }
.class-chips span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.class-chips b { width: 7px; height: 7px; border-radius: 50%; }
.person-dot { background: #57c1b3; }.car-dot { background: #ed9a57; }
.icon-button { display: grid; place-items: center; width: 27px; height: 27px; border: 0; color: var(--muted); background: transparent; }
.icon-button:hover { color: var(--teal); background: var(--teal-soft); }
.icon-button svg { width: 15px; height: 15px; }
.panel-copy { margin: -4px 0 17px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.rule-row { gap: 8px; min-height: 29px; border-top: 1px solid #edf1f1; color: var(--muted); font-size: 11px; }
.rule-row strong { margin-left: auto; color: var(--teal); font: 500 10px "DM Mono", monospace; }
.rule-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }.rule-swatch.outline { background: transparent; border: 1px solid var(--teal); }
.alert-list { min-height: 86px; max-height: 210px; overflow: auto; }
.alert-empty { display: grid; place-items: center; gap: 7px; min-height: 80px; color: #a6b0b3; font-size: 11px; }
.alert-empty svg { width: 20px; height: 20px; }
.alert-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; min-height: 54px; border-top: 1px solid #edf1f1; }
.alert-icon { display: grid; place-items: center; width: 27px; height: 27px; background: var(--orange-soft); color: var(--orange); }
.alert-icon svg { width: 14px; height: 14px; }
.alert-item strong, .alert-item span { display: block; }.alert-item strong { font-size: 11px; }.alert-item span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.alert-time { color: var(--muted); font: 500 10px "DM Mono", monospace; }
.privacy-note { gap: 9px; padding: 13px 14px; color: var(--teal); background: #eaf6f3; font-size: 11px; line-height: 1.55; }.privacy-note svg { width: 17px; height: 17px; }.privacy-note b { font-weight: 600; }
.footer { justify-content: space-between; margin-top: 28px; color: #9aa6a9; font-size: 10px; }
@media (max-width: 1100px) { h2 { font-size: 28px; }.section-heading { align-items: start; flex-direction: column; gap: 12px; } }
@media (max-width: 980px) { .app-shell { padding: 0 22px 22px; }.content-grid { grid-template-columns: 1fr; }.insight-column { display: grid; grid-template-columns: repeat(2, 1fr); }.panel-alerts, .privacy-note { grid-column: span 2; } }
@media (max-width: 640px) { .app-shell { padding: 0 15px 18px; }.topbar { min-height: 74px; }.topbar-meta { gap: 8px; }.build-label { display: none; }.content-grid { padding-top: 24px; gap: 22px; }h2 { font-size: 22px; }.upload-bar { flex-wrap: wrap; }.upload-note { width: 100%; margin-left: 0; }.stage { min-height: 300px; }.tool-row { gap: 8px; }.tool-divider { display: none; }.threshold-control input { width: 88px; }.play-button { margin-left: 0; }.metrics-strip { grid-template-columns: repeat(2, 1fr); }.metric:nth-child(2) { border-right: 0; }.metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.insight-column { display: flex; }.panel-alerts, .privacy-note { grid-column: auto; }.footer { gap: 12px; flex-direction: column; align-items: start; } }