:root {
  --bg: #040814;
  --panel: rgba(8, 15, 28, 0.82);
  --panel-border: rgba(110, 180, 255, 0.2);
  --text: #e7f0ff;
  --muted: #9fb3d9;
  --cyan: #6fe6ff;
  --amber: #ffc670;
  --red: #ff8f80;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: Inter, Arial, sans-serif; background: radial-gradient(circle at 20% 20%, #0c1730 0, #040814 55%, #02040b 100%); color: var(--text); }
#app, #globeCanvas { width: 100%; height: 100%; display: block; }
#globeCanvas { position: fixed; inset: 0; }
.panel { position: fixed; backdrop-filter: blur(12px); background: var(--panel); border: 1px solid var(--panel-border); box-shadow: 0 14px 32px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02); border-radius: 18px; }
.topbar { top: 18px; left: 18px; right: 18px; height: 78px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--cyan); opacity: .9; }
.title { margin-top: 6px; font-size: 26px; font-weight: 800; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.pill, .icon-btn, .preset-btn { border: 1px solid rgba(115,194,255,.26); background: rgba(15,26,48,.82); color: var(--text); border-radius: 999px; }
.pill { padding: 10px 14px; font-size: 13px; }
.pill.subtle { color: var(--muted); }
.icon-btn { padding: 10px 14px; cursor: pointer; }
.icon-btn:hover, .preset-btn:hover { border-color: rgba(115,194,255,.55); box-shadow: 0 0 0 1px rgba(115,194,255,.18) inset; }
.leftbar, .rightbar { top: 112px; bottom: 22px; width: 292px; padding: 16px; overflow: auto; }
.leftbar { left: 18px; }
.rightbar { right: 18px; }
.section-title { font-size: 12px; font-weight: 800; color: var(--cyan); text-transform: uppercase; letter-spacing: .16em; margin: 2px 0 10px; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.button-grid.compact { grid-template-columns: 1fr 1fr; }
.preset-btn { padding: 11px 12px; text-align: left; cursor: pointer; font-size: 13px; }
.preset-btn small { display: block; color: var(--muted); margin-top: 4px; }
.preset-btn.active { border-color: rgba(111,230,255,.7); box-shadow: 0 0 0 1px rgba(111,230,255,.22) inset, 0 0 18px rgba(111,230,255,.1); }
.ranking-list, .scene-list { display: grid; gap: 8px; margin-bottom: 18px; }
.rank-item, .scene-item { padding: 11px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.scene-item button { margin-top: 8px; width: 100%; }
.hud { left: 50%; transform: translateX(-50%); bottom: 20px; padding: 12px 18px; display: flex; gap: 18px; }
.hud-item { min-width: 120px; }
.hud-item span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.hud-item strong { display: block; margin-top: 6px; font-size: 22px; }
.legend { left: 330px; bottom: 20px; padding: 12px 14px; display: grid; gap: 8px; }
.legend-row { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.swatch { width: 12px; height: 12px; border-radius: 999px; display: inline-block; box-shadow: 0 0 10px currentColor; }
.swatch.us { color: #69e4ff; background: #69e4ff; }
.swatch.ru { color: #ff8c7a; background: #ff8c7a; }
.swatch.cn { color: #ffc46b; background: #ffc46b; }
.swatch.other { color: #d9e5ff; background: #d9e5ff; }
.detail { right: 330px; bottom: 20px; width: 360px; padding: 18px; }
.hidden { display: none !important; }
.close-btn { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: var(--text); font-size: 28px; cursor: pointer; }
.detail-title { font-size: 24px; font-weight: 800; margin: 6px 0 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.detail-grid span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.detail-actions { display: flex; gap: 8px; }
.loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px 22px; background: rgba(8, 15, 28, 0.92); border: 1px solid rgba(115,194,255,.34); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.38); }
.error-banner { position: fixed; left: 50%; transform: translateX(-50%); top: 108px; padding: 12px 16px; border-radius: 14px; background: rgba(76, 0, 0, .84); border: 1px solid rgba(255, 120, 120, .55); color: #ffe3e3; min-width: 280px; text-align: centre; }
@media (max-width: 1280px) {
  .leftbar, .rightbar { width: 250px; }
  .legend { left: 284px; }
  .detail { right: 284px; }
}