:root{font-family:Pretendard,Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#e2e8f0}*{box-sizing:border-box}body{margin:0;background:#030712}#app{width:100vw;height:100vh}.layout{display:grid;grid-template-columns:280px 1fr;height:100%}.panel{border-right:1px solid #2b3c59;background:linear-gradient(180deg,#0c1428,#081022);padding:12px;overflow:auto}h1{margin:0;font-size:1rem;color:#eaf2ff;letter-spacing:.2px}.sub{margin:5px 0 10px;color:#b5c7e4;font-size:.78rem;line-height:1.4}.stats{border:1px solid #314764;border-radius:10px;padding:8px;background:#0f1b31;margin-bottom:8px}.stats h2{margin:0 0 6px;font-size:.88rem;color:#dbeafe}.row,.drow{display:flex;justify-content:space-between;font-size:.78rem;margin:4px 0;color:#d3e2f8}.row b,.drow b{color:#fff;font-size:.75rem}.detail{border:1px solid #314764;border-radius:10px;padding:8px;background:#0f1b31}.detail h2{margin:0 0 5px;font-size:.9rem;color:#bfdbfe}.hint{margin:6px 0 0;font-size:.72rem;color:#b8ccec;line-height:1.4}.svc{border:1px solid #334b6a;border-radius:8px;padding:6px 7px;margin-top:6px}.svc-title{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.6px;margin-bottom:3px}.svc.algora .svc-title{color:#86efac}.svc.ao .svc-title{color:#fcd34d}.svc.bridge .svc-title{color:#93c5fd}.stage-wrap{position:relative;display:flex;justify-content:center;align-items:center;padding:8px;overflow:hidden;min-height:0}#stage{position:relative;border:1px solid #334155;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px #00000073;max-width:100%;max-height:100%}.conn-status{display:flex;align-items:center;gap:6px;font-size:.72rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#94a3b8;padding:5px 7px;border:1px solid #1e3a5f;border-radius:6px;background:#0a1628;margin-bottom:8px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%}.dot.live{background:#22c55e;box-shadow:0 0 5px #22c55e88;animation:pulse-dot 2s infinite}.dot.offline{background:#ef4444}.dot.connecting{background:#f59e0b;animation:pulse-dot 1s infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.live-badge{font-size:8px;color:#22c55e;border:1px solid #22c55e55;border-radius:3px;padding:0 3px;margin-left:3px}.detail-desc{font-size:.72rem;color:#94a3b8;line-height:1.4;margin:5px 0;padding:5px;background:#0a1628;border-radius:5px;border:1px solid #1e3a5f}.zone-tabs{display:none}.panel-toggle{display:none;position:fixed;top:8px;left:8px;z-index:1010;background:#0c1428ee;color:#e2e8f0;border:1px solid #334155;border-radius:8px;font-size:20px;width:38px;height:38px;cursor:pointer;line-height:1}.panel-backdrop,.rotate-hint{display:none}@media(max-width:1100px){.layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.panel{border-right:0;border-bottom:1px solid #223047;max-height:35vh}.stage-wrap{padding:4px}}@media(max-width:768px){.layout{display:block;position:relative}.panel-toggle{display:flex;align-items:center;justify-content:center}.panel{position:fixed;top:0;left:0;width:280px;height:100vh;z-index:1000;transform:translate(-100%);transition:transform .25s ease;border-right:1px solid #2b3c59;border-bottom:0;max-height:none;padding:48px 12px 12px;overflow-y:auto}.panel.open{transform:translate(0)}.panel-backdrop{display:block;position:fixed;inset:0;z-index:999;background:#00000080;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}.panel-backdrop.open{opacity:1;visibility:visible}.stage-wrap{display:block;width:100vw;height:100vh;padding:0}#stage{width:100%;height:100%;border:none;border-radius:0;box-shadow:none;max-width:none;max-height:none}.zone-tabs{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:900;background:#0c1428ee;border-top:1px solid #334155;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.zone-tab{flex:1;background:none;border:none;color:#64748b;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:600;padding:14px 0 calc(14px + env(safe-area-inset-bottom));cursor:pointer;border-top:2px solid transparent;transition:color .2s,border-color .2s}.zone-tab:active{background:#1e293b}.zone-tab.active[data-zone=algora]{color:#34d399;border-top-color:#34d399}.zone-tab.active[data-zone=ao]{color:#fcd34d;border-top-color:#fcd34d}.zone-tab.active[data-zone=bridge]{color:#60a5fa;border-top-color:#60a5fa}}