:root{--bg: #0e1116;--panel: #161b22;--panel-2: #1c232c;--border: #2a323d;--text: #d7dde5;--muted: #8a97a6;--accent: #4fc3f7}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font:13px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}#app{display:flex;flex-direction:column}#topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{font-weight:700;letter-spacing:.5px}.city-name{color:var(--muted)}.panels-toggle{display:none;margin-left:8px;padding:4px 12px;font-size:15px;line-height:1;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:6px;cursor:pointer}.status{margin-left:auto;padding:2px 10px;border-radius:999px;font-size:12px;background:var(--panel-2);border:1px solid var(--border)}.status--live{color:#00e676;border-color:#1e5631}.status--connecting,.status--reconnecting{color:#ffca28}.status--error{color:#ef476f}.status--done{color:var(--muted)}#layout{flex:1;display:grid;grid-template-columns:1fr 340px;min-height:0}#canvas-wrap{position:relative;min-width:0;background:var(--bg)}#canvas-wrap canvas{display:block}#panels{border-left:1px solid var(--border);background:var(--panel);overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}.panel{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;overflow:hidden}.panel h2{margin:0;padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);border-bottom:1px solid var(--border)}.panel-body{padding:8px 10px}#panel-feed .panel-body{max-height:220px;overflow-y:auto}.kv{display:flex;justify-content:space-between;padding:2px 0}.kv-k{color:var(--muted)}.kv-v{font-variant-numeric:tabular-nums}.item{padding:6px 8px;border:1px solid var(--border);border-radius:6px;margin-bottom:6px;background:#ffffff05}.item:last-child{margin-bottom:0}.item-head{display:flex;align-items:center;gap:6px}.item-id{font-weight:600}.item-meta{color:var(--muted);margin-top:3px;font-size:12px}.badge{font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:4px;background:#283341;color:var(--accent)}.state{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:4px;background:#283341;color:var(--muted)}.state--moving,.state--scanning,.state--hauling{color:#ffca28}.state--mining,.state--building{color:#00e676}.state--blocked{color:#ef476f}.state--constructing{color:#ffca28}.state--active{color:#00e676}.bar{margin-top:5px;height:5px;border-radius:3px;background:#283341;overflow:hidden}.bar-fill{height:100%;background:#00e676}.feed-line{display:flex;gap:8px;align-items:baseline;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.04)}.feed-kind{color:var(--accent);font-size:12px}.feed-meta{color:var(--muted);font-size:12px}.empty{color:var(--muted);font-style:italic}@media (max-width: 760px){#topbar{position:relative;z-index:30}#layout{grid-template-columns:1fr}.panels-toggle{display:inline-flex}#panels{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);padding-top:52px;transform:translate(100%);transition:transform .2s ease;z-index:20;box-shadow:-10px 0 30px #00000080}#app.panels-open #panels{transform:translate(0)}}