:root{--bg:#1f1f1f;--bg-elevated:#272727;--bg-muted:#303030;--border:#3a3a3a;--text:#ececec;--text-muted:#9e9e9e;--accent:#3ecf8e;--accent-strong:#2bb673;--positive:#4ade80;--negative:#f87171;--warning:#fbbf24;--unsure:#a3a3a3;--font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45}a{color:var(--accent);text-decoration:none}h1,h2,h3{margin:0;font-weight:600}.app{grid-template-rows:auto 1fr;height:100%;display:grid}.topbar{border-bottom:1px solid var(--border);background:var(--bg-elevated);align-items:center;gap:24px;padding:10px 20px;display:flex}.brand{color:var(--text);letter-spacing:.2px;align-items:center;gap:10px;font-weight:700;display:flex}.brand img{width:24px;height:24px}.topbar nav{gap:4px;display:flex}.topbar nav a{color:var(--text-muted);padding:6px 12px}.topbar nav a.active,.topbar nav a:hover{background:var(--bg-muted);color:var(--text)}.topbar .spacer{flex:1}.main{min-height:0;overflow:auto}.page{max-width:1400px;margin:0 auto;padding:24px}.muted{color:var(--text-muted)}.mono{font-family:var(--mono);font-size:12px}.card{background:var(--bg-elevated);border:1px solid var(--border);padding:16px}.card h3{text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:10px;font-size:13px}.grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;display:grid}.video-card{flex-direction:column;gap:12px;display:flex}.video-card .thumb{aspect-ratio:16/9;background:var(--bg-muted) center / cover no-repeat;border:1px solid var(--border)}.video-card .title{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.video-card .actions{gap:8px;display:flex}.progress{grid-template-columns:120px 1fr 64px;align-items:center;gap:10px;font-size:12px;display:grid}.bar{background:var(--bg-muted);height:6px;overflow:hidden}.bar>div{background:var(--accent);height:100%}.button{border:1px solid var(--border);background:var(--bg-muted);color:var(--text);font:inherit;cursor:pointer;align-items:center;gap:6px;padding:7px 14px;display:inline-flex}.button:hover{border-color:var(--accent)}.button.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#0b2617;font-weight:600}.button.active{border-color:var(--accent);color:var(--accent)}.button.positive.active{background:color-mix(in srgb, var(--positive) 20%, transparent);border-color:var(--positive);color:var(--positive)}.button.negative.active{background:color-mix(in srgb, var(--negative) 20%, transparent);border-color:var(--negative);color:var(--negative)}.button.warning.active{background:color-mix(in srgb, var(--warning) 20%, transparent);border-color:var(--warning);color:var(--warning)}kbd{font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-muted);padding:1px 5px;font-size:11px}select,input[type=number]{background:var(--bg-muted);color:var(--text);border:1px solid var(--border);font:inherit;width:100%;padding:6px 8px}input[type=range]{width:100%;accent-color:var(--accent)}label.field{color:var(--text-muted);gap:4px;font-size:12px;display:grid}.field-row{justify-content:space-between;display:flex}.stack{gap:12px;display:grid}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.checkbox{cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.viewer{grid-template-rows:1fr auto;grid-template-columns:300px 1fr 360px;gap:12px;height:100%;padding:12px;display:grid}.viewer .sidebar{overflow:auto}.viewer .scene{border:1px solid var(--border);min-height:300px;position:relative;overflow:hidden}.viewer .scene .legend{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#1f1f1fcc;gap:4px;padding:8px 10px;font-size:12px;display:grid;position:absolute;bottom:12px;left:12px}.legend .swatch{width:10px;height:10px;margin-right:6px;display:inline-block}.viewer .right{grid-template-rows:auto 1fr;gap:12px;display:grid;overflow:auto}.viewer .bottom{grid-column:1/-1}.stats{grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;display:grid}.stats dt{color:var(--text-muted)}.stats dd{font-family:var(--mono);text-align:right;margin:0;font-size:12px}.pill{padding:2px 8px;font-size:12px;font-weight:600;display:inline-block}.pill.positive{background:color-mix(in srgb, var(--positive) 18%, transparent);color:var(--positive)}.pill.negative{background:color-mix(in srgb, var(--negative) 18%, transparent);color:var(--negative)}.pill.neutral{background:var(--bg-muted);color:var(--text-muted)}.frame-image{background:#000;width:100%;position:relative;overflow:hidden}.frame-image img{object-fit:contain;width:100%;height:100%;display:block}.frame-image svg{width:100%;height:100%;position:absolute;inset:0}.timeline{gap:6px;display:grid}.timeline canvas{cursor:pointer;background:var(--bg-muted);width:100%;height:72px}.timeline .controls{align-items:center;gap:10px;font-size:12px;display:flex}.timeline .controls input[type=range]{flex:1}.labeler{grid-template-rows:1fr auto;grid-template-columns:1fr 340px;gap:12px;height:100%;padding:12px;display:grid}.labeler .image-area{background:#000;justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}.labeler .image-area .frame-image{width:auto;max-width:100%;height:100%}.labeler .panel{overflow:auto}.labeler .bottom{grid-column:1/-1}.viewer .sidebar,.viewer .right,.labeler .panel{background:var(--bg-elevated);border:1px solid var(--border);align-content:start;gap:0}.viewer .sidebar>.card,.viewer .right>.card,.labeler .panel>.card{border:none;border-bottom:1px solid var(--border);background:0 0}.viewer .sidebar>.card:last-child,.viewer .right>.card:last-child,.labeler .panel>.card:last-child{border-bottom:none}.shortcut-list{color:var(--text-muted);grid-template-columns:auto 1fr;gap:6px 10px;font-size:12px;display:grid}.empty{text-align:center;color:var(--text-muted);place-items:center;gap:12px;padding:80px 20px;display:grid}.empty code{font-family:var(--mono);background:var(--bg-muted);color:var(--text);padding:2px 6px}@media (width<=1200px){.viewer{grid-template-columns:260px 1fr}.viewer .right{grid-column:1/-1;grid-template-rows:auto;grid-template-columns:1fr 1fr}}@media (width<=900px){.labeler{grid-template-rows:minmax(280px,55vh) auto auto;grid-template-columns:1fr;height:auto}.viewer{grid-template-columns:1fr;height:auto}.viewer .scene{min-height:420px}.viewer .right{grid-template-columns:1fr}}
