.asteroid-belt-screen { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; color:#e9f3ff; background:#071222; }
.asteroid-belt-screen * { box-sizing:border-box; }
.asteroid-belt-screen [hidden] { display:none!important; }
.asteroid-belt-screen button { font:inherit; cursor:pointer; }
.asteroid-belt-screen button:disabled { cursor:default; }
.asteroid-belt-screen button:focus-visible { outline:2px solid #e5f8ff; outline-offset:4px; }
.asteroid-header { display:flex; min-height:78px; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #263b50; background:#09172a; }
.asteroid-header>div { display:grid; gap:7px; }
.asteroid-header strong { font-size:23px; font-weight:500; letter-spacing:3px; }
.asteroid-header small { color:#9eb4d0; font-size:10px; letter-spacing:2px; }
.asteroid-header button { border:1px solid #3d546c; border-radius:10px; padding:11px 16px; color:#b7cade; background:#112239; font-size:13px; }
.asteroid-hero { display:flex; min-height:95px; align-items:center; justify-content:space-between; gap:20px; padding:16px 28px; background:#102039; border-bottom:1px solid #263a52; }
.asteroid-hero h1 { margin:0; color:#e9dfc7; font-size:18px; font-weight:500; }
.asteroid-hero p { margin:9px 0 0; color:#a7b9ce; font-size:13px; }
.asteroid-continue { min-height:46px; border:1px solid #c7b17b; border-radius:11px; padding:12px 19px; color:#302916; background:#ecd49e; font-size:14px!important; }
.asteroid-continue span { margin-left:15px; }
.asteroid-continue:disabled { opacity:.45; }
.asteroid-main { display:grid; flex:1; min-height:0; grid-template-columns:minmax(0,1fr) 280px; }
.asteroid-map-column { display:flex; flex-direction:column; min-width:0; background:radial-gradient(ellipse at 60% 45%,#173149 0,#0b1b2e 48%,#060f1e 100%); }
.asteroid-toolbar { display:flex; min-height:68px; align-items:center; justify-content:space-between; gap:14px; padding:12px 24px; }
.asteroid-toolbar>span { color:#aebfd3; font-size:12px; }
.asteroid-views { display:flex; gap:4px; padding:3px; border:1px solid #344861; border-radius:11px; background:#11253d; }
.asteroid-views button { min-height:36px; border:0; border-radius:7px; padding:8px 15px; color:#a7bfd4; background:transparent; font-size:12px; }
.asteroid-views button[aria-pressed=true] { background:#d3e8f4; color:#15293d; }
.asteroid-space { position:relative; isolation:isolate; flex:1; min-height:0; margin:0 18px; }
.asteroid-chart-background,.asteroid-route { position:absolute; inset:0; width:100%; height:100%; }
.asteroid-chart-background { pointer-events:none; }
.asteroid-route { margin:0; padding:0; list-style:none; }
.asteroid-node { position:absolute; width:52px; height:52px; transform:translate(-50%,-50%); }
.asteroid-node>button { position:relative; width:52px; height:52px; display:block; padding:0; border:1px solid transparent; border-radius:50%; background:transparent; color:#dfedf7; }
.asteroid-rock { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(2px 4px 4px #030e1a99); }
.asteroid-number { position:absolute; right:-1px; bottom:0; min-width:21px; border-radius:5px; padding:2px 3px; color:#d6e7f3; background:#0a192ee8; font-size:13px; line-height:1.15; font-variant-numeric:tabular-nums; }
.asteroid-group-dots { position:absolute; left:5px; bottom:4px; display:flex; gap:4px; }
.asteroid-group-dots i { width:4px; height:4px; border-radius:50%; background:#53677b; }
.asteroid-group-dots i.done { background:#9cddc6; }
.asteroid-node.locked .asteroid-rock { opacity:.58; }
.asteroid-node.locked .asteroid-number { color:#94a7bd; }
.asteroid-node.current>button { border-color:#d6bb7d; box-shadow:0 0 18px #efcf882b; }
.asteroid-node.current .asteroid-number { color:#f4dba1; }
.asteroid-node button[aria-pressed=true] { border:2px solid #e6f8ff; box-shadow:0 0 0 4px #afdcea20; background:#b8eaff17; }
.asteroid-node>button:hover { background:#b8eaff25; }
.asteroid-route-end { position:absolute; right:58px; top:18px; white-space:nowrap; color:#8da8c0; font-size:10px; }
.asteroid-node:last-child .asteroid-route-end { right:2px; top:59px; }
.asteroid-belt-label { position:absolute; left:12px; top:7px; color:#a8c9e1; font-size:12px; letter-spacing:1px; pointer-events:none; }
.asteroid-belt-label small { display:block; margin-top:8px; color:#829cb5; font-size:10px; letter-spacing:.5px; }
.asteroid-sun-direction { position:absolute; left:14px; bottom:18px; color:#c0b088; font-size:13px; pointer-events:none; }
.asteroid-sun-direction small { display:block; color:#7d96ad; font-size:10px; margin-top:9px; }
.asteroid-neptune { position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
.asteroid-neptune i { display:block; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 24% 75%,#bdd9e9,#578abd 45%,#152c49 82%); box-shadow:0 0 18px #508dcc29; }
.asteroid-neptune span { position:absolute; top:34px; left:50%; transform:translateX(-50%); color:#a8c3dc; font-size:12px; white-space:nowrap; text-align:center; }
.asteroid-neptune small { display:block; color:#7895af; font-size:10px; margin-top:7px; }
.asteroid-legend { display:flex; min-height:48px; align-items:center; justify-content:center; gap:24px; color:#9eb5c9; font-size:11px; }
.asteroid-legend i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#586a80; }
.asteroid-legend i.complete { background:#92d9bf; }
.asteroid-legend i.current { background:#f3d692; }
.asteroid-detail { display:flex; flex-direction:column; min-width:0; padding:30px 25px; border-left:1px solid #263a51; background:#0c1a2c; }
.asteroid-selected-state { margin:0 0 22px; color:#839ab3; font-size:12px; }
.asteroid-selected-state.complete { color:#92d9bf; }
.asteroid-selected-state.current { color:#f3d692; }
.asteroid-detail-rock { position:relative; width:94px; height:90px; margin-bottom:22px; }
.asteroid-detail-rock>span { position:absolute; right:0; bottom:0; padding:3px 7px; border-radius:6px; color:#d7e7f5; background:#14263b; font-size:15px; }
.asteroid-detail h2 { margin:0; font-size:21px; font-weight:500; letter-spacing:.3px; }
.asteroid-unit { margin:10px 0 25px; color:#a5c1d8; font-size:13px; }
.asteroid-groups { display:grid; gap:12px; }
.asteroid-group { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:69px; padding:15px; text-align:left; border:1px solid #487381; border-radius:12px; background:#163740; color:#dcf5ea; }
.asteroid-group strong { font-size:15px; font-weight:500; }
.asteroid-group small { display:block; font-size:11px; margin-top:7px; color:#9bc6bc; }
.asteroid-group b { font-size:19px; font-weight:400; }
.asteroid-group.current { border-color:#d5bd87; background:#e7cf9b; color:#302819; }
.asteroid-group.current small { color:#67563c; }
.asteroid-group:disabled { border-color:#2f4055; background:#152337; color:#8698ad; }
.asteroid-group:disabled small { color:#8394a9; }
.asteroid-review-note { color:#a5bcd0; font-size:12px; line-height:1.9; margin:23px 0; }
.asteroid-detail-foot { margin-top:auto; padding-top:20px; border-top:1px solid #22364c; color:#8da7be; font-size:11px; line-height:2; }
.asteroid-detail-foot small { font-size:10px; color:#6f89a2; }
.asteroid-index { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(0,1fr)); gap:11px; flex:1; min-height:0; padding:7px 24px 10px; }
.asteroid-index button { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; padding:10px 10px 10px 42px; border:1px solid #365767; border-radius:11px; background:#102a3b; color:#d3eee9; }
.asteroid-index button>span { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#799faa; font-size:13px; font-variant-numeric:tabular-nums; }
.asteroid-index strong { font-size:13px; font-weight:500; }
.asteroid-index small { margin-top:7px; font-size:10px; color:#9dbab7; }
.asteroid-index button.current { background:#302b20; border-color:#cdb87d; color:#f2dba7; }
.asteroid-index button.locked { background:#101c2e; border-color:#293d51; color:#91a4bb; }
.asteroid-index button.locked small { color:#73899f; }
.asteroid-index button[aria-pressed=true] { border-color:#ebfaff; box-shadow:0 0 0 1px #d7efff; }
.asteroid-error,.asteroid-locked-message { display:flex; align-items:center; justify-content:center; gap:16px; padding:10px; color:#fff3d6; background:#763b25; font-size:13px; }
.asteroid-error button { border:1px solid #edce98; padding:6px 12px; border-radius:8px; color:#fff0d9; background:#492d25; }