*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07070f;--panel:rgba(12,12,28,0.88);--border:rgba(255,255,255,0.10);
  --sun:#ffcc44;--accent:#5b8fff;--text:#d8d8f0;--muted:#6060a0;
  --green:#44ffaa;--orange:#ff8844;--red:#ff4466;
  --font:'Space Grotesk',sans-serif;--mono:'Space Mono',monospace;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font)}
#main-canvas{display:block;position:fixed;inset:0;width:100%;height:100%}

/* -- loading -- */
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);z-index:200;transition:opacity .6s}
#loading.fade{opacity:0;pointer-events:none}
.spinner{width:44px;height:44px;border:2px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
#load-msg{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.06em}
#load-bar{width:220px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#load-fill{height:100%;width:0;background:var(--accent);transition:width .3s;border-radius:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* -- top bar -- */
#topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px;pointer-events:none;z-index:10}
#title h1{font-size:1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
#title .sub{font-size:.65rem;color:var(--muted);letter-spacing:.05em;font-family:var(--mono);margin-top:2px}
#datetime{text-align:right;font-family:var(--mono);font-size:.68rem;color:var(--muted);line-height:1.7;pointer-events:none}
#datetime .t{font-size:.82rem;color:var(--text)}

/* -- controls bar -- */
#ctrlbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10;flex-wrap:wrap;justify-content:center}
.btn{background:var(--panel);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:.7rem;padding:5px 13px;border-radius:20px;cursor:pointer;letter-spacing:.04em;transition:all .18s;white-space:nowrap;backdrop-filter:blur(8px)}
.btn:hover{background:rgba(91,143,255,.18);border-color:var(--accent);color:#fff}
.btn.active{background:rgba(91,143,255,.22);border-color:var(--accent);color:#fff}
.btn.warn{border-color:var(--orange);color:var(--orange)}

/* -- hover label -- */
#hover-label{position:fixed;pointer-events:none;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:.75rem;transform:translate(14px,-50%);display:none;white-space:nowrap;backdrop-filter:blur(8px);z-index:20}
#hover-label strong{color:#fff;display:block;margin-bottom:2px}
#hover-label span{color:var(--muted);font-family:var(--mono);font-size:.66rem}

/* -- sun panel -- */
#sunpanel{position:fixed;bottom:18px;left:18px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;width:248px;z-index:10;backdrop-filter:blur(8px)}
#sunpanel h2{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.loc-row{margin-bottom:9px}
.loc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.loc-name{font-size:.76rem;font-weight:500}
.loc-angle{font-family:var(--mono);font-size:.72rem}
.bar-wrap{height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.bar{height:100%;border-radius:2px;transition:width .7s ease}
.divider{height:1px;background:var(--border);margin:9px 0}
.note{font-size:.6rem;color:var(--muted);line-height:1.55}
#sub-info{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-bottom:8px}
#sub-info span{color:var(--sun)}

/* country selector */
#country-select-wrap{margin-bottom:8px}
#country-select-wrap label{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
#country-selector{display:flex;flex-wrap:wrap;gap:4px}
.ctry-btn{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:.62rem;padding:3px 8px;border-radius:10px;cursor:pointer;transition:all .15s}
.ctry-btn:hover{border-color:var(--accent)}
.ctry-btn.sel{border-color:var(--green);background:rgba(68,255,170,.12);color:var(--green)}
.ctry-btn[data-sel="2"]{border-color:var(--orange);background:rgba(255,136,68,.12);color:var(--orange)}
.ctry-btn[data-sel="3"]{border-color:#c088ff;background:rgba(192,136,255,.12);color:#c088ff}
.compare-rows{margin-top:6px}
.compare-row{margin-bottom:8px}

/* -- compare panel -- */
#comparepanel{position:fixed;inset:0;background:rgba(7,7,15,.95);z-index:50;display:none;flex-direction:column;align-items:stretch;backdrop-filter:blur(4px)}
#comparepanel.open{display:flex}
#cmp-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border)}
#cmp-header h2{font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
#cmp-close{background:none;border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:.72rem;padding:5px 14px;border-radius:20px;cursor:pointer}
#cmp-close:hover{border-color:var(--red);color:var(--red)}
#cmp-body{display:flex;flex:1;gap:0;overflow:hidden}
.cmp-side{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;border-right:1px solid var(--border);overflow-y:auto}
.cmp-side:last-child{border-right:none}
.cmp-canvas-wrap{width:min(280px,38vw);height:min(280px,38vw);position:relative;flex-shrink:0}
.cmp-canvas-wrap canvas{display:block;position:static;inset:auto;width:100%!important;height:100%!important}
.cmp-name{font-size:1.1rem;font-weight:700;margin:14px 0 4px;color:#fff;letter-spacing:.05em}
.cmp-sub{font-size:.68rem;color:var(--muted);font-family:var(--mono);margin-bottom:12px}
.cmp-stat{display:flex;justify-content:space-between;width:100%;max-width:280px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.72rem}
.cmp-stat .label{color:var(--muted)}
.cmp-stat .val{font-family:var(--mono);color:var(--text)}
#cmp-selector{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px 20px;border-bottom:1px solid var(--border)}
#cmp-selector select{background:var(--panel);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:.75rem;padding:6px 12px;border-radius:20px;cursor:pointer;outline:none}

/* -- planet list -- */
#infopanel{position:fixed;bottom:18px;right:18px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 15px;width:200px;max-height:58vh;overflow-y:auto;z-index:10;backdrop-filter:blur(8px)}
#infopanel::-webkit-scrollbar{width:3px}
#infopanel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
#infopanel h2{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.planet-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;cursor:pointer;padding:3px 4px;border-radius:5px;transition:background .15s}
.planet-row:hover{background:rgba(255,255,255,.05)}
.planet-row .pname{font-size:.75rem;font-weight:500}
.planet-row .pdist{font-family:var(--mono);font-size:.63rem;color:var(--muted)}
.planet-row .cmp-add{font-size:.58rem;background:rgba(91,143,255,.15);border:1px solid rgba(91,143,255,.3);color:var(--accent);padding:1px 6px;border-radius:8px;opacity:0;transition:opacity .15s}
.planet-row:hover .cmp-add{opacity:1}

@media(max-width:640px){#sunpanel{width:calc(100vw - 36px);bottom:10px;left:10px}#infopanel{display:none}#ctrlbar{top:auto;bottom:calc(18px + var(--sun-h,200px));left:50%;transform:translateX(-50%)}}