:root{--bg:#05070d;--panel:rgba(16,20,32,.86);--line:rgba(120,150,220,.22);--txt:#dfe6f5;--muted:#8b97b5;--accent:#6da8ff}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Segoe UI,Roboto,sans-serif}#app{position:fixed;top:0;right:0;bottom:0;left:0}#canvasWrap{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}canvas{display:block}#labelLayer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.body-label{color:#cfe0ff;font-size:12px;padding:1px 6px;border-radius:6px;background:#080c168c;border:1px solid var(--line);white-space:nowrap;text-shadow:0 1px 2px #000;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}#loader{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#0a1020,#05070d 70%);z-index:50;gap:14px}#loader .bar{width:240px;height:6px;border-radius:4px;background:#ffffff14;overflow:hidden}#loader .fill{height:100%;width:0%;background:linear-gradient(90deg,#6da8ff,#9b7bff);transition:width .25s}#loader .msg{color:var(--muted);font-size:13px}#loader .dot-spinner{position:relative;width:56px;height:56px}#loader .dot-spinner span{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#0ea5e9;opacity:.15;transform-origin:50% 50%;animation:dotPulse 1.2s linear infinite}#loader .dot-spinner span{transform:rotate(var(--r,0deg)) translateY(-22px) scale(.6)}#loader .dot-spinner span:nth-child(1){--r:0deg;animation-delay:0s}#loader .dot-spinner span:nth-child(2){--r:30deg;animation-delay:-.1s}#loader .dot-spinner span:nth-child(3){--r:60deg;animation-delay:-.2s}#loader .dot-spinner span:nth-child(4){--r:90deg;animation-delay:-.3s}#loader .dot-spinner span:nth-child(5){--r:120deg;animation-delay:-.4s}#loader .dot-spinner span:nth-child(6){--r:150deg;animation-delay:-.5s}#loader .dot-spinner span:nth-child(7){--r:180deg;animation-delay:-.6s}#loader .dot-spinner span:nth-child(8){--r:210deg;animation-delay:-.7s}#loader .dot-spinner span:nth-child(9){--r:240deg;animation-delay:-.8s}#loader .dot-spinner span:nth-child(10){--r:270deg;animation-delay:-.9s}#loader .dot-spinner span:nth-child(11){--r:300deg;animation-delay:-1s}#loader .dot-spinner span:nth-child(12){--r:330deg;animation-delay:-1.1s}@keyframes dotPulse{0%,to{opacity:.15;transform:rotate(var(--r,0deg)) translateY(-22px) scale(.55)}50%{opacity:1;transform:rotate(var(--r,0deg)) translateY(-22px) scale(1.05);box-shadow:0 0 6px #0ea5e98c}}#badge{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:30;background:#785a14eb;color:#ffe9b0;border:1px solid #caa24a;padding:5px 12px;border-radius:20px;font-size:12px;display:none;box-shadow:0 2px 10px #0006}#simDate{position:absolute;top:40px;left:50%;transform:translate(-50%);z-index:30;display:flex;align-items:center;gap:8px;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:20px;padding:5px 14px;font-size:12px;box-shadow:0 2px 10px #00000059;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#simDate .rel{font-size:11px;color:var(--accent);white-space:nowrap}#simDate .rel.now{color:#7fe0a0}#simDate .rel.future{color:#a8c6ff}#simDate .rel.past{color:#ffbe8f}#sidebar{position:absolute;top:0;left:0;bottom:0;width:210px;z-index:20;background:var(--panel);border-right:1px solid var(--line);padding:12px 10px;overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#sidebar h1{font-size:13px;margin:2px 4px 10px;color:#aebfe0;font-weight:600;letter-spacing:.5px}.body-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;background:transparent;border:1px solid transparent;color:var(--txt);padding:2px 6px;border-radius:6px;font-size:12px;margin-bottom:0;min-height:26px}.body-btn:hover{background:#6e8cdc1f}.body-btn.sel{background:#6e8cdc38;border-color:var(--accent)}.body-btn .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}.grp{font-size:10px;color:var(--muted);margin:4px 2px 2px;letter-spacing:1px;text-transform:uppercase}#fade{position:fixed;top:0;right:0;bottom:0;left:0;background:#02030a;opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:60}#fade.on{opacity:1}#btnGalaxy.on{background:#6e8cdc38;border-color:var(--accent)}#btnRec.on{background:#dc5a5a52;border-color:#e06}#btnNBody.on{background:#5a8cdc52;border-color:#6af}#btnObserver.on{background:#6e8cdc38;border-color:var(--accent)}#btnNightOnly.on{background:#ffbe6e38;border-color:#ffb86b}.planet-item{position:relative;width:100%}.planet-head{padding-right:22px}.chev{position:absolute;right:4px;top:0;width:20px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:0;line-height:1}.chev:hover{color:var(--txt)}.sat-sub{display:none;padding:1px 0 1px 12px}.planet-item.open .sat-sub{display:block}.sat-btn{font-size:11px;opacity:.9;padding:2px 6px;min-height:24px}#sidebarToggle{position:absolute;top:10px;left:218px;z-index:25;width:22px;height:40px;background:var(--panel);border:1px solid var(--line);border-radius:0 8px 8px 0;color:var(--txt);cursor:pointer;font-size:14px;line-height:1;transition:left .3s ease}#sidebar{transition:transform .3s ease}body.sidebar-collapsed #sidebar{transform:translate(-100%)}body.sidebar-collapsed #sidebarToggle{left:0;border-radius:8px 0 0 8px}#controls.collapsed{padding:6px 10px}#controls.collapsed>*:not(#btnCtlToggle){display:none!important}#controls{position:absolute;left:50%;bottom:10px;transform:translate(-50%);z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 10px;display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center;max-width:96vw;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#controls button,#controls select{background:#283452cc;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:11px;cursor:pointer;min-height:26px;line-height:1.2}#controls input[type=date],#controls input[type=range]{min-height:26px}#controls button:hover{background:#3c5082e6}#controls label{font-size:10px;color:var(--muted);display:flex;flex-direction:column;gap:2px}#controls input[type=date]{background:#283452cc;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:2px 5px;font-size:11px}#controls input[type=range]{width:90px}.sep{width:1px;height:18px;background:var(--line)}#rateLbl{font-size:10px;color:var(--accent);min-width:58px;text-align:center}#info{position:absolute;right:12px;top:54px;z-index:20;width:248px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12px;display:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-height:72vh;overflow:auto}#info h2{margin:0 0 6px;font-size:15px}#info .row{display:flex;justify-content:space-between;margin:3px 0;color:var(--muted)}#info .row b{color:var(--txt);font-weight:500}#info .facts{margin-top:8px;color:#bcc8e6;line-height:1.55}#hint{position:absolute;left:12px;bottom:12px;top:auto;transform:none;z-index:25;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11px;color:var(--muted);max-width:236px;line-height:1.5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:padding .25s ease,opacity .25s ease}#hint.collapsed{padding:10px 4px;max-width:none;opacity:.85}#hint .hint-content{transition:opacity .2s ease}#hint.collapsed .hint-content{display:none}#hint .hint-title{display:none;font-size:11px;letter-spacing:2px;padding:4px 0}#hint.collapsed .hint-title{display:block;writing-mode:vertical-rl;text-orientation:upright}#hintToggle{position:absolute;right:-16px;top:8px;width:16px;height:30px;background:var(--panel);border:1px solid var(--line);border-left:none;border-radius:0 6px 6px 0;color:var(--txt);cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}#hintToggle:hover{background:#3c5082e6}kbd{background:#ffffff1a;border-radius:4px;padding:0 4px;font-size:10px}.toast{position:absolute;left:50%;bottom:84px;transform:translate(-50%);z-index:40;background:#141a2af2;border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}.toast.show{opacity:1}#events{position:absolute;right:12px;bottom:12px;z-index:20;width:256px;max-height:42vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#events h3{margin:0 0 6px;font-size:12px;color:#aebfe0;font-weight:600;letter-spacing:.5px}#observer{position:absolute;left:222px;bottom:12px;z-index:20;width:288px;max-height:74vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;color:var(--txt)}body.sidebar-collapsed #observer{left:12px}#observer h3{margin:0 0 8px;font-size:13px;color:#aebfe0;font-weight:600;letter-spacing:.5px}.obs-city{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);margin-bottom:8px}.obs-city select{background:#283452cc;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px}.obs-moon{display:flex;align-items:center;gap:12px;padding:6px 0 8px;border-bottom:1px solid var(--line);margin-bottom:8px}#moonCanvas{background:transparent;flex:0 0 auto}.obs-moon-info{display:flex;flex-direction:column;gap:2px}.obs-moon-info #moonPhaseName{font-size:14px;font-weight:600;color:#e9e6cf}.obs-moon-info #moonIllum,.obs-moon-info #moonAge{font-size:11px;color:#9fb0d6}.obs-sub{font-size:11px;color:var(--accent);margin:6px 0 4px;letter-spacing:.5px}.obs-row{display:flex;justify-content:space-between;align-items:center;padding:3px 4px;border-radius:5px}.obs-row:hover{background:#7896dc1f}.obs-row .obs-name{display:flex;align-items:center;gap:6px}.obs-row .obs-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}.obs-row .obs-val{color:#cdd8f2;font-variant-numeric:tabular-nums;font-size:11px}.obs-row .obs-up{color:#7fe0a0}.obs-row .obs-down{color:#6f86c8}.obs-empty{font-size:11px;color:var(--muted);padding:2px 4px}#observer table{width:100%;border-collapse:collapse}#observer td{padding:2px 4px;font-size:11px;color:#cdd8f2;font-variant-numeric:tabular-nums}#observer td.r{text-align:right;color:#9fb0d6}.evt-item{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:12px;color:#cdd8f2}.evt-item:hover{background:#7896dc29}.evt-item .evt-tag{font-size:10px;padding:1px 5px;border-radius:4px;background:#7896dc38;color:#dfe7fb;white-space:nowrap}.evt-item .evt-date{color:#9fb0d6;font-variant-numeric:tabular-nums}.evt-empty{font-size:11px;color:var(--muted);padding:4px}.mini2d-label{position:absolute;right:14px;bottom:calc(18px + 42vh);z-index:21;font-size:10px;color:#8fa3cc;pointer-events:none;display:none}#evtModal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:none;align-items:center;justify-content:center;background:#0000008c}#evtModal.on{display:flex}#evtModal .box{width:min(420px,90vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 14px 40px #00000080}#evtModal h3{margin:0 0 8px;font-size:16px;color:#dfe7fb}#evtModal .meta{font-size:12px;color:#9fb0d6;margin-bottom:10px}#evtModal .desc{font-size:13px;line-height:1.7;color:#cdd8f2;margin-bottom:14px}#evtModal .close{background:#6e8cdc2e;border:1px solid var(--line);color:#dfe7fb;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:12px}#evtModal .close:hover{background:#6e8cdc52}@media (max-width:640px){#sidebar{width:178px;font-size:13px}#sidebar .body-btn{min-height:46px;font-size:14px}body:not(.sidebar-collapsed) #sidebarToggle{left:186px}#info{display:none!important}#hint{display:none}#events{display:none!important}#controls{bottom:8px;padding:8px 10px;gap:6px 8px}#controls button,#controls select{min-height:42px;padding:8px 12px;font-size:13px}}#loader.hidden{display:none!important}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}#loader .spinner{animation:none;border-top-color:#ffffff40}}