html,body{margin:0;height:100%;overflow:hidden;background:#060a12;font-family:'Segoe UI',system-ui,sans-serif;color:#dfe8f5}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#scene.dragging{cursor:grabbing}
.star,.sys,.planet,.fleet{transition:opacity .25s}
.lbl{font-size:calc(12px*var(--inv,1));fill:#aebdd6;font-weight:600;paint-order:stroke;stroke:#060a12;stroke-width:calc(3px*var(--inv,1));pointer-events:none}
.sect-lbl{font-size:calc(34px*var(--inv,1));fill:rgba(160,190,230,.25);letter-spacing:6px;font-weight:700;text-anchor:middle;pointer-events:none}
.sect-rect{fill:rgba(0,0,0,0);stroke:rgba(120,160,220,.14);stroke-dasharray:calc(6px*var(--inv,1))}
.orbit{fill:none;stroke:rgba(130,170,230,.22);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.plbl{font-size:calc(10px*var(--inv,1));fill:#c6d4e8;text-anchor:middle;pointer-events:none}
.flbl{font-size:calc(11px*var(--inv,1));font-weight:600;paint-order:stroke;stroke:#060a12;stroke-width:calc(3px*var(--inv,1));pointer-events:none;text-anchor:middle}
.hit{fill:transparent;cursor:pointer}
.star{cursor:pointer}
.star .halo{opacity:.85}
.star:hover .halo{opacity:1}
.planet,.fleet{cursor:pointer}
.planet:hover circle:first-of-type,.fleet:hover path{stroke:#fff;stroke-width:1.4}
/* уровни детализации */
.mode-galaxy .sys,.mode-galaxy .star .lbl,.mode-galaxy .fleet .flbl{display:none}
.mode-sector .sys,.mode-sector .sect-lbl{display:none}
.mode-system .sect-lbl{display:none}
.mode-system .plbl{display:none}
/* открытая система: чужие звёзды гаснут */
.sys-open .star{opacity:.28}
.sys-open .star.focus{opacity:1}
#title{position:fixed;top:14px;left:18px;z-index:10;user-select:none}
#title h1{margin:0;font-size:20px;letter-spacing:3px;color:#e8f1ff}
#title .badge{font-size:11px;color:#7fd0ff;letter-spacing:2px;margin-top:3px}
#crumbs{position:fixed;top:66px;left:18px;z-index:10;font-size:12px;color:#8fa4c2;user-select:none}
#crumbs span{cursor:pointer}
#crumbs span:hover{color:#7fd0ff}
#crumbs .sep{margin:0 6px;color:#44506a}
#hud-scale{position:fixed;top:48px;right:16px;z-index:10;font-size:12px;color:#8fa4c2;
  background:rgba(10,16,28,.7);border:1px solid #233450;border-radius:6px;padding:4px 10px;user-select:none}
#hint{position:fixed;left:18px;bottom:14px;z-index:10;font-size:11px;color:#6d7f9d;opacity:.75;user-select:none}
#mini{position:fixed;right:16px;bottom:16px;z-index:10;background:rgba(8,13,24,.9);border:1px solid #233450;border-radius:8px;cursor:pointer}
#panel{position:fixed;top:70px;right:16px;width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;z-index:10;
  background:rgba(10,16,28,.92);border:1px solid #233450;border-radius:10px;padding:14px 16px;display:none;backdrop-filter:blur(4px)}
#panel.show{display:block}
#panelClose{position:absolute;top:8px;right:10px;background:none;border:none;color:#7d90b0;font-size:18px;cursor:pointer}
#panel h2{margin:0 0 2px;font-size:17px;color:#eaf2ff}
#panel .sub{font-size:12px;color:#7fd0ff;margin-bottom:10px;letter-spacing:1px}
#panel .row{font-size:13px;margin:7px 0;color:#c6d4e8}
#panel .row b{color:#8fa4c2;font-weight:600;margin-right:6px}
#panel .lore{font-size:13px;line-height:1.55;color:#b9c8de}
#panel .link{font-size:13px;padding:5px 0;cursor:pointer;color:#7fd0ff}
#panel .link:hover{text-decoration:underline}
#tip{position:fixed;z-index:20;display:none;background:rgba(12,20,34,.94);border:1px solid #2c3f60;border-radius:6px;
  padding:4px 9px;font-size:12px;color:#dfe8f5;pointer-events:none;white-space:nowrap}
#userbar{position:fixed;top:14px;right:16px;z-index:10;font-size:12px;color:#dfe8f5;background:rgba(10,16,28,.7);border:1px solid #233450;border-radius:6px;padding:6px 12px;user-select:none}
#userbar a{color:#7fd0ff;text-decoration:none;margin-left:8px}