:root { color-scheme: dark; --bg:#111418; --panel:#1a1f26; --line:#2b323c; --fg:#e6e9ee; --dim:#8b94a3; --accent:#5ab0ff; --warn:#ffb454; --bad:#ff6b6b; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:14px system-ui, sans-serif; }
.mono { font-family: ui-monospace, monospace; font-size:12px; color:var(--dim); }
header { display:flex; gap:12px; align-items:center; padding:6px 12px; border-bottom:1px solid var(--line); }
header .spacer { flex:1; }
button { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:4px; padding:3px 10px; cursor:pointer; }
button.on { border-color:var(--accent); color:var(--accent); }
main { display:flex; height:calc(100% - 72px); }
#stage { flex:1; min-width:0; display:flex; flex-direction:column; padding:8px; gap:6px; }
#vwrap { position:relative; flex:1; min-height:0; background:#000; }
#v { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
#c { position:absolute; top:0; left:0; cursor:crosshair; }
#tl { width:100%; height:64px; background:var(--panel); border:1px solid var(--line); cursor:pointer; }
#side { width:260px; border-left:1px solid var(--line); overflow:auto; }
.row { display:flex; gap:8px; align-items:center; padding:5px 10px; border-bottom:1px solid var(--line); cursor:pointer; }
.row.sel { background:#24303d; }
.row .pl { width:20px; color:var(--dim); text-align:right; }
.row .sw { width:12px; height:12px; border-radius:3px; flex:none; }
.row .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .tg { color:var(--warn); font-size:11px; }
#flags .h, #list .h { padding:4px 10px; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.06em; background:#151a20; }
.fl { padding:5px 10px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; gap:8px; }
.fl:hover { background:#24303d; }
.fl .k { flex:none; width:8px; border-radius:2px; }
.fl .t { color:var(--dim); font-size:11px; }
.chips { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0; }
.chips span { background:#0c0f13; border:1px solid var(--line); border-radius:10px; padding:1px 8px; cursor:pointer; font-size:12px; }
.chips span:hover { border-color:var(--accent); }
#pop-ev { color:var(--dim); font-size:11px; margin-top:4px; }
#pop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:6px 0; }
#pop-grid button { padding:6px 0; font-size:16px; font-weight:700; border-radius:5px; border:2px solid transparent; color:#fff; text-shadow:0 1px 2px #000; }
#pop-grid button:hover { border-color:#fff; }
#pop-grid small { display:block; font-size:9px; font-weight:400; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ovinfo { color:#111; background:#ffb454; border-radius:4px; padding:0 8px; font-weight:700; }
#ovinfo:empty { display:none; }
footer { padding:4px 12px; border-top:1px solid var(--line); }
#banner { position:absolute; top:10px; left:50%; transform:translateX(-50%); background:rgba(20,24,30,.94); border:2px solid #ffb454; color:#fff; padding:8px 16px; border-radius:8px; pointer-events:none; text-align:center; max-width:80%; z-index:4; }
#banner .q { font-size:17px; font-weight:700; }
#banner .ev { font-size:12px; color:#aab3c0; margin-top:2px; }
#banner .yn { margin-top:6px; font-size:15px; }
#banner kbd { background:#ffb454; color:#111; border-radius:4px; padding:1px 8px; font-weight:800; font-family:inherit; }
#banner .pend { margin-top:6px; color:#d9b3ff; font-size:14px; }
#pop { position:absolute; background:var(--panel); border:1px solid var(--accent); border-radius:6px; padding:8px; width:264px; box-shadow:0 6px 24px rgba(0,0,0,.6); z-index:5; }
#pop input { width:100%; font-size:22px; padding:4px 8px; background:#0c0f13; color:var(--fg); border:1px solid var(--line); border-radius:4px; }
#pop-title { color:var(--dim); margin-bottom:4px; }
#pop-name { min-height:18px; margin:4px 0; }
#pop-name.bad { color:var(--bad); }
#pop-scope div { padding:2px 6px; border-radius:3px; color:var(--dim); }
#pop-scope div.on { background:#24303d; color:var(--fg); }
.hint { color:var(--dim); font-size:11px; margin-top:6px; }