:root { --bg:#0B0E11; --chrome:#0E1216; --panel:#12161B; --line:#1F252D; --line2:#181D23; --chip:#161B21; --border:#2A313B;
  --text:#E6E8EB; --muted:#A9B2BF; --dim:#8A94A3; --acc:#8FA8FF; --acc-bg:#172038; --up:#3DD68C; --up-bg:#12241B; --dn:#FF7A66; --dn-bg:#2A1512; --amb:#F5B841; --amb-bg:#2A2212; }
* { box-sizing:border-box } html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:13px Inter, system-ui, sans-serif }
a { color:var(--acc); text-decoration:none } button { font:inherit; cursor:pointer }
.num { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums }
.dim { color:var(--dim) } .up { color:var(--up) } .dn { color:var(--dn) } .amb { color:var(--amb) } .grow { flex:1 }
.app { display:flex; flex-direction:column; height:100vh }
.top { display:flex; align-items:center; gap:18px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--chrome) }
.brand b { letter-spacing:.12em } .stats { display:flex; gap:16px; flex-wrap:wrap; color:var(--muted) } .stats .v { color:var(--text); font-weight:600 }
.search { margin-left:auto; height:32px; width:340px; padding:0 12px; border-radius:8px; border:1px solid var(--border); background:var(--chip); color:var(--text); font:inherit }
.grid { flex:1; min-height:0; display:grid; grid-template-columns: minmax(560px, 1.25fr) minmax(480px, 1.5fr) minmax(320px, .85fr); gap:10px; padding:10px }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column; min-height:0; overflow:hidden }
.card-head { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line) } h2 { margin:0; font-size:13px; font-weight:600 }
.scroll { overflow:auto; min-height:0; flex:1 } .short { flex:1 1 0 }
.tabs { display:flex; gap:3px; background:var(--chip); border-radius:7px; padding:2px } .tabs button { border:0; background:transparent; color:var(--dim); padding:3px 9px; border-radius:5px; font-size:12px }
.tabs .on { background:#1F2633; color:var(--text) }
table { width:100%; border-collapse:collapse } th { position:sticky; top:0; background:var(--panel); color:var(--dim); font-size:10.5px; letter-spacing:.05em; text-align:left; font-weight:600; padding:6px 7px }
td { padding:5px 7px; border-top:1px solid var(--line2); white-space:nowrap } .r { text-align:right }
.closed-head { border-top:1px solid var(--line) } .closed-list { flex:0 0 30% } tr.inactive td { opacity:.42 } tr.row { cursor:pointer } tr.row:hover td { background:#171C22 } tr.sel td { background:#1A2232 } tr.hl td { background:#1d2638 !important }
.chip { display:inline-block; padding:1px 6px; border-radius:4px; font-size:11px; font-weight:600 }
.c-smart { background:var(--amb-bg); color:var(--amb) } .c-migration { background:var(--acc-bg); color:var(--acc) } .c-manual { background:var(--chip); color:var(--muted) }
.c-err { background:var(--dn-bg); color:var(--dn) } .c-dev { background:var(--dn-bg); color:var(--dn) } .c-ours { background:var(--acc-bg); color:var(--acc) }
.bar { display:inline-block; vertical-align:middle; height:5px; background:var(--chip); border-radius:3px; position:relative; width:72px; margin-right:6px } .bar i { position:absolute; top:-2px; width:3px; height:9px; background:var(--text); border-radius:2px }
.bar .fill { position:absolute; left:0; top:0; height:5px; background:var(--up); border-radius:3px; opacity:.6 }
.coin-stats { display:flex; flex-wrap:wrap; gap:14px; padding:8px 12px; border-bottom:1px solid var(--line) } .coin-stats .k { color:var(--dim); font-size:10.5px } .coin-stats .v { font-weight:600 }
.map { width:100%; height:44vh; min-height:300px; flex:none; display:block; border-bottom:1px solid var(--line); cursor:crosshair }
.split { flex:1; min-height:0; display:grid; grid-template-columns: 1.15fr 1fr } .split > div { border-right:1px solid var(--line) }
.tip { position:fixed; display:none; pointer-events:none; background:#0E1216; border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-size:12px; z-index:10 }
.empty { padding:14px; color:var(--dim) }
.copy { border:0; background:transparent; color:var(--dim); font-size:11px; padding:0 3px } .copy:hover { color:var(--text) }

td.state { max-width:150px; overflow:hidden; text-overflow:ellipsis }
tr.botrow td { opacity:.45 }
th.sortable { cursor:pointer; user-select:none } th.sortable:hover { color:var(--text) } th.sortable.on { color:var(--acc) }
.ctx { position:fixed; z-index:20; min-width:230px; background:#151A21; border:1px solid var(--border); border-radius:9px; padding:5px; box-shadow:0 10px 30px rgba(0,0,0,.5) }
.ctx-title { padding:6px 10px 7px; color:var(--dim); font-size:11.5px; border-bottom:1px solid var(--line); margin-bottom:4px }
.ctx button { display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--text); padding:7px 10px; border-radius:6px; font-size:12.5px }
.ctx button:hover { background:#1F2633 } .ctx button.danger { color:var(--dn) } .ctx-sep { height:1px; background:var(--line); margin:4px 2px }
.toast { position:fixed; right:18px; bottom:18px; z-index:30; background:#163324; color:var(--up); border:1px solid #1f4a33; padding:10px 14px; border-radius:8px; font-size:13px }
.toast.bad { background:var(--dn-bg); color:var(--dn); border-color:#4a2420 }
.room { height:100vh; display:flex; flex-direction:column; overflow:hidden; background:radial-gradient(1100px 620px at 42% 34%, #161C26 0%, #0B0E11 72%) }
.room-top { display:flex; align-items:baseline; gap:12px; padding:12px 22px } .room-top b { letter-spacing:.14em }

.room-main { position:relative; flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(560px, 42vw); gap:24px; padding:0 26px 52px }
.desk { position:absolute; left:0; right:0; bottom:0; height:44px; background:linear-gradient(#232A33, #171C22); border-top:2px solid #3A4452 }

.workstation { min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; z-index:1 }
.monitor { position:relative; flex:none; width:100%; max-height:calc(100% - 42px); aspect-ratio:16 / 11; display:flex; flex-direction:column; padding:16px 16px 0; background:linear-gradient(#262C35, #1A1F26); border:1px solid #3A4452; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 110px rgba(143,168,255,.08), inset 0 1px 0 rgba(255,255,255,.07) }
.browser { flex:none; background:#232A33; border-radius:8px 8px 0 0 }
.tabs-row { display:flex; align-items:flex-end; gap:12px; height:32px; padding:0 12px } .tabs-row .dots { align-self:center }
.tab { padding:7px 34px 7px 14px; border-radius:8px 8px 0 0; background:#303844; color:var(--text); font-size:12px }
.browser-bar { display:flex; align-items:center; gap:10px; height:46px; padding:0 12px; background:#303844 }
.nav { width:18px; text-align:center; color:var(--muted); font-size:16px }
.dots { display:flex; gap:5px } .dots i { width:9px; height:9px; border-radius:50%; background:#4A5566 }
.address { flex:1; height:32px; line-height:32px; padding:0 16px; border-radius:16px; background:#0B0E11; color:var(--text); font-size:15px; overflow:hidden; white-space:nowrap } .address:hover { color:var(--acc) } .lock { color:var(--up); font-size:9px; vertical-align:2px; margin-right:6px }
.screen { position:relative; flex:1; min-height:0; width:100%; overflow:hidden; background:#0B0E11 }
.screen iframe { position:absolute; left:0; top:0; border:0; transform-origin:0 0 }
.chin { flex:none; display:flex; align-items:center; justify-content:center; position:relative; height:32px; color:#6B7686; font-size:11px; letter-spacing:.3em }
.power { position:absolute; right:10px; width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 7px var(--up) }
.stand { flex:none; width:120px; height:26px; background:linear-gradient(#2A313B, #1A1F26) } .stand-foot { flex:none; width:280px; height:9px; border-radius:6px 6px 0 0; background:#3A4452 }

.cursor { position:absolute; left:0; top:0; z-index:3; pointer-events:none; transition:transform .85s cubic-bezier(.45,.05,.2,1); filter:drop-shadow(0 3px 5px rgba(0,0,0,.7)) }
.cursor span { position:absolute; left:28px; top:30px; padding:1px 7px; border-radius:7px; background:#8FA8FF; color:#0B0E11; font-size:11px; font-weight:700 }
.ripple { position:absolute; z-index:2; width:14px; height:14px; margin:-7px; border-radius:50%; pointer-events:none; opacity:0; border:2px solid #8FA8FF }
.ripple.go { animation:ripple .6s ease-out }
@keyframes ripple { from { opacity:1; transform:scale(.6) } to { opacity:0; transform:scale(4.5) } }

.seat { position:relative; min-height:0; display:flex; flex-direction:column; z-index:1 }
.history { flex:1 1 0; min-height:96px; min-height:0; display:flex; flex-direction:column; background:rgba(18,22,27,.82); border:1px solid var(--line); border-radius:12px; overflow:hidden }
.history h2 { padding:10px 12px; border-bottom:1px solid var(--line) } .history-list { flex:1; overflow:auto; min-height:0 } .empty { padding:14px 12px }
.entry { display:flex; flex-direction:column; gap:3px; width:100%; padding:9px 12px; border:0; border-bottom:1px solid var(--line2); border-left:3px solid transparent; background:none; color:var(--text); text-align:left }
.entry:hover { background:#181D23 } .entry.trade { border-left-color:var(--acc) } .entry.position { border-left-color:var(--up) } .entry.range { border-left-color:var(--dn) } .entry.coin { border-left-color:var(--amb) } .entry.migrated { border-left-color:#C792EA }
.entry-top { display:flex; justify-content:space-between; gap:8px } .entry-thought { color:var(--muted); line-height:1.4 }

.bubble { position:relative; flex:none; margin:12px 0 10px; padding:12px 16px; background:#E6E8EB; color:#0B0E11; border-radius:14px; line-height:1.4; font-size:14px; min-height:84px }
.bubble::after { content:""; position:absolute; right:92px; bottom:-10px; width:18px; height:18px; background:#E6E8EB; transform:rotate(45deg) }
.bubble-head { font-size:12px; color:#3A4452; margin-bottom:3px } .thought.idle { color:#3A4452 }
.figure { position:relative; flex:none; width:min(100%, 620px); aspect-ratio:648 / 504; align-self:center; margin-bottom:-42px; z-index:2; mix-blend-mode:screen; -webkit-mask-image:radial-gradient(ellipse at center, #000 62%, transparent 76%); mask-image:radial-gradient(ellipse at center, #000 62%, transparent 76%) }
.figure canvas, .figure img { position:absolute; inset:0; width:100%; height:100%; display:block }
.figure img { opacity:0 } .figure.acting img { opacity:1 } .figure.acting canvas { opacity:0 }

@media (max-width:1000px) { .room { height:auto; min-height:100vh; overflow:auto } .room-main { grid-template-columns:1fr } .workstation { height:62vh } .history { max-height:40vh } }
@media (prefers-reduced-motion: reduce) { .cursor { transition:none } .ripple.go { animation:none !important } }