:root {
    --sh-bg: #07101f;
    --sh-panel: #0d1829;
    --sh-panel-2: #12213a;
    --sh-line: rgba(151, 177, 214, .18);
    --sh-text: #e8f0fb;
    --sh-muted: #9eb0c9;
    --sh-accent: #72b8ff;
    --sh-gold: #f2bb5d;
    --sh-green: #6bd7a6;
}

.star-hopper-page { background: #07101f; color: var(--sh-text); min-height: calc(100vh - 64px); }
.star-hopper-page h1,.star-hopper-page h2,.star-hopper-page h3,.star-hopper-page h4 { color: var(--sh-text); }
.sh-shell { max-width: 1580px; margin: 0 auto; padding: 1.25rem; }
.sh-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(290px,.6fr); gap:1rem; margin-bottom:1rem; }
.sh-hero-main,.sh-tonight,.sh-panel,.sh-canvas-wrap,.sh-levels { background:linear-gradient(180deg,rgba(18,33,58,.96),rgba(10,20,36,.96)); border:1px solid var(--sh-line); border-radius:18px; box-shadow:0 14px 35px rgba(0,0,0,.18); }
.sh-hero-main { padding:1.5rem 1.75rem; position:relative; overflow:hidden; }
.sh-hero-main:after { content:""; position:absolute; width:280px; height:280px; right:-90px; top:-120px; border:1px solid rgba(114,184,255,.18); border-radius:50%; box-shadow:0 0 0 38px rgba(114,184,255,.04),0 0 0 78px rgba(114,184,255,.025); }
.sh-eyebrow { display:inline-flex; gap:.5rem; align-items:center; color:#9ecfff; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; }
.sh-hero h1 { margin:.35rem 0 .45rem; font-size:clamp(2rem,4vw,3.2rem); font-family:'Space Grotesk',sans-serif; }
.sh-hero-main p { max-width:820px; color:var(--sh-muted); margin-bottom:.75rem; }
.sh-hero-meta { display:flex; flex-wrap:wrap; gap:.55rem; }
.sh-hero-meta span { border:1px solid var(--sh-line); color:#bfd0e6; border-radius:999px; padding:.35rem .65rem; font-size:.8rem; }
.sh-tonight { padding:1.25rem; display:flex; flex-direction:column; justify-content:center; }
.sh-tonight-label { color:var(--sh-gold); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.sh-tonight h2 { font-size:1.15rem; margin:.25rem 0 .35rem; }
.sh-tonight p { color:var(--sh-muted); font-size:.86rem; margin-bottom:.8rem; }
.sh-btn { border:0; border-radius:10px; padding:.7rem .9rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; cursor:pointer; transition:.18s ease; }
.sh-btn-primary { background:#2563eb; color:#fff; }
.sh-btn-primary:hover { background:#1d4ed8; transform:translateY(-1px); }
.sh-btn-secondary { background:rgba(255,255,255,.08); color:#dce8f8; border:1px solid var(--sh-line); }
.sh-btn-secondary:hover { background:rgba(255,255,255,.12); }
.sh-btn-gold { background:#d99a2b; color:#07101f; }
.sh-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.sh-levels { padding:.7rem; margin-bottom:1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; }
.sh-level-tab { text-align:left; border:1px solid transparent; background:transparent; color:#dce8f8; border-radius:12px; padding:.75rem .85rem; cursor:pointer; min-width:0; }
.sh-level-tab span,.sh-level-tab small { display:block; color:var(--sh-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.sh-level-tab strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:.08rem 0; }
.sh-level-tab.active { background:rgba(75,133,224,.16); border-color:rgba(114,184,255,.35); }
.sh-workspace { display:grid; grid-template-columns:310px minmax(520px,1fr) 330px; gap:1rem; align-items:stretch; }
.sh-panel { min-height:720px; overflow:hidden; }
.sh-panel-head { padding:1rem; border-bottom:1px solid var(--sh-line); }
.sh-panel-head h2 { font-size:1rem; margin:0; }
.sh-panel-head p { margin:.15rem 0 0; color:var(--sh-muted); font-size:.78rem; }
.sh-mission-list { padding:.65rem; max-height:650px; overflow:auto; }
.sh-mission-card { width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) 20px; gap:.7rem; align-items:center; text-align:left; border:1px solid transparent; background:transparent; color:var(--sh-text); border-radius:12px; padding:.65rem; margin-bottom:.35rem; cursor:pointer; }
.sh-mission-card:hover { background:rgba(255,255,255,.045); }
.sh-mission-card.active { background:rgba(37,99,235,.15); border-color:rgba(114,184,255,.28); }
.sh-mission-thumb { width:48px; height:48px; display:grid; place-items:center; border-radius:10px; background:radial-gradient(circle at 45% 40%,#1d3965,#0a1324 72%); color:#bcdcff; border:1px solid rgba(140,180,230,.18); }
.sh-thumb-stargate,.sh-thumb-coathanger,.sh-thumb-quadrilateral,.sh-thumb-teapot { color:var(--sh-gold); }
.sh-mission-copy { min-width:0; }
.sh-mission-copy strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.9rem; }
.sh-mission-copy small { display:block; color:var(--sh-muted); font-size:.7rem; margin-top:.12rem; }
.sh-mission-state { color:var(--sh-green); }
.sh-planned { padding:2rem 1rem; text-align:center; color:var(--sh-muted); }
.sh-planned i { font-size:2rem; color:#6f8fb8; margin-bottom:.75rem; }
.sh-planned strong { display:block; color:#dce8f8; }
.sh-planned span { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.sh-canvas-wrap { min-height:720px; display:flex; flex-direction:column; overflow:hidden; }
.sh-canvas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--sh-line); }
.sh-canvas-toolbar strong { font-size:.95rem; }
.sh-canvas-toolbar span { color:var(--sh-muted); font-size:.78rem; }
.sh-canvas-stage { position:relative; flex:1; min-height:600px; background:#020611; }
#starHopperCanvas { width:100%; height:100%; display:block; min-height:600px; cursor:grab; touch-action:none; }
#starHopperCanvas:active { cursor:grabbing; }
.sh-canvas-help { position:absolute; left:12px; bottom:12px; padding:.5rem .65rem; border-radius:9px; background:rgba(3,8,18,.78); border:1px solid rgba(160,190,230,.16); color:#9fb4cd; font-size:.7rem; backdrop-filter:blur(7px); }
.sh-canvas-status { position:absolute; right:12px; bottom:12px; color:#9fb4cd; font-size:.7rem; background:rgba(3,8,18,.78); padding:.5rem .65rem; border-radius:9px; }
.sh-training { padding:1rem; overflow:auto; }
.sh-training h2 { font-size:1.25rem; margin:.25rem 0; }
.sh-meta { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.65rem; }
.sh-meta span { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#9fc3ec; background:rgba(84,141,216,.12); border:1px solid rgba(114,184,255,.16); border-radius:999px; padding:.3rem .48rem; }
.sh-training-copy { color:var(--sh-muted); font-size:.86rem; }
.sh-learning { border-left:3px solid var(--sh-accent); background:rgba(114,184,255,.06); padding:.7rem .75rem; color:#c6d8ed; font-size:.8rem; border-radius:0 9px 9px 0; margin:.8rem 0; }
.sh-section-label { color:#8ea7c6; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; margin:.95rem 0 .4rem; }
.sh-mode { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.sh-mode button { background:#101d31; border:1px solid var(--sh-line); color:#b9c9dd; border-radius:9px; padding:.6rem; font-weight:700; cursor:pointer; }
.sh-mode button.active { border-color:#64a7fa; color:#e9f4ff; background:rgba(37,99,235,.22); }
.sh-field { display:grid; gap:.3rem; margin-bottom:.55rem; }
.sh-field label { color:#9badc4; font-size:.72rem; }
.sh-field select,.sh-field input[type=range] { width:100%; }
.sh-field select { background:#081324; color:#dce8f8; border:1px solid var(--sh-line); border-radius:9px; padding:.58rem .65rem; }
.sh-fov-row { display:flex; align-items:center; gap:.65rem; }
.sh-fov-row output { min-width:45px; color:#a9d4ff; font-weight:700; }
.sh-hint-box { min-height:82px; padding:.7rem; background:#081324; border:1px solid var(--sh-line); border-radius:10px; color:#b6c7dd; font-size:.8rem; margin-bottom:.55rem; }
.sh-actions { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.sh-actions .sh-btn:first-child { grid-column:1/-1; }
.sh-progress-line { border-top:1px solid var(--sh-line); margin-top:1rem; padding-top:.8rem; color:#8fa4bf; font-size:.72rem; }
.sh-catalog { color:#718aa9; font-size:.68rem; margin-top:.2rem; }
.sh-result { position:fixed; inset:0; z-index:2000; background:rgba(1,5,12,.78); display:grid; place-items:center; padding:1rem; backdrop-filter:blur(6px); }
.sh-result[hidden] { display:none; }
.sh-result-card { width:min(650px,100%); background:#0d1829; border:1px solid rgba(134,170,220,.25); border-radius:18px; box-shadow:0 25px 70px rgba(0,0,0,.45); overflow:hidden; }
.sh-result-top { display:grid; grid-template-columns:160px 1fr; gap:1rem; padding:1.25rem; align-items:center; }
.sh-result-top canvas { width:160px; height:140px; border-radius:12px; border:1px solid var(--sh-line); }
.sh-result-top h2 { margin:0 0 .5rem; }
.sh-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.8rem; }
.sh-result-grid div { background:#091423; border:1px solid var(--sh-line); border-radius:9px; padding:.55rem; }
.sh-result-grid span { display:block; color:#8198b6; font-size:.66rem; text-transform:uppercase; }
.sh-result-grid strong { color:#e9f3ff; font-size:.9rem; }
.sh-result-top p { color:#adc0d8; font-size:.8rem; margin-bottom:.35rem; }
.sh-result-top small { color:#7187a4; }
.sh-result-footer { padding:0 1.25rem 1.25rem; display:flex; justify-content:flex-end; }
.sh-method-note { margin-top:1rem; padding:.9rem 1rem; color:#8097b4; font-size:.72rem; text-align:center; }
.sh-method-note a { color:#9bc8ff; }
@media (max-width:1200px) {
    .sh-workspace { grid-template-columns:270px minmax(450px,1fr); }
    .sh-training-panel { grid-column:1/-1; min-height:0; }
    .sh-training { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:1rem; }
    .sh-training > * { min-width:0; }
    .sh-training-panel .sh-panel { min-height:0; }
}
@media (max-width:900px) {
    .sh-hero { grid-template-columns:1fr; }
    .sh-levels { grid-template-columns:1fr 1fr; }
    .sh-workspace { grid-template-columns:1fr; }
    .sh-panel,.sh-canvas-wrap { min-height:0; }
    .sh-mission-list { max-height:360px; }
    .sh-training { display:block; }
    .sh-canvas-stage,#starHopperCanvas { min-height:540px; }
}
@media (max-width:600px) {
    .sh-shell { padding:.7rem; }
    .sh-levels { grid-template-columns:1fr; }
    .sh-level-tab { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:.5rem; }
    .sh-level-tab span,.sh-level-tab small { display:inline; }
    .sh-canvas-stage,#starHopperCanvas { min-height:460px; }
    .sh-canvas-help { display:none; }
    .sh-result-top { grid-template-columns:1fr; }
    .sh-result-top canvas { width:100%; height:150px; }
}