/* STARWEAVER · glassmorphic pill UI */
:root {
  --bg0: #07051a; --bg1: #120a30; --bg2: #1f1448;
  --ink: #f1eeff; --ink2: #bfb6e4; --mute: #8a80b8;
  --brass: #f2c879; --brass2: #ffe4ad; --live: #7af5d2; --danger: #ff8a8a; --ok: #8df5b4;
  --line: rgba(255,255,255,0.14); --line2: rgba(255,255,255,0.26);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hud: 'Chakra Petch', 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 999px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg0); color: var(--ink); font-family: var(--font); }
body { position: fixed; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::placeholder { color: var(--mute); }
#bg { position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 50% 110%, #2c1260 0%, rgba(44,18,96,0) 55%),
  radial-gradient(90% 60% at 50% -10%, #1c1858 0%, rgba(28,24,88,0) 60%),
  linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #0b0620); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 70% at 50% 50%, rgba(0,0,0,0) 55%, rgba(6,2,16,0.65) 100%); }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { font-family: var(--hud); position: absolute; transform: translate(-50%, -140%); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,228,173,0.85); text-shadow: 0 0 10px rgba(0,0,0,0.9), 0 1px 2px #000; white-space: nowrap; transition: opacity .25s; will-change: transform; }
.lbl.comm { color: rgba(190,210,255,0.78); font-size: 9.5px; }
.lbl.comm::after { content: ''; display: block; width: 1px; height: 10px; margin: 2px auto 0; background: linear-gradient(rgba(190,210,255,0.6), transparent); }
.lbl.sel { color: var(--brass2); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; }
.lbl.body { color: #dfe6ff; letter-spacing: 0.08em; text-transform: none; font-size: 11px; transform: translate(-50%, 90%); }

/* ---------- glass primitives ---------- */
.glass {
  background: linear-gradient(180deg, rgba(52,34,92,0.86), rgba(24,14,52,0.92));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.17);
  box-shadow: 0 12px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.35);
  color: var(--ink);
}
.pill { font-family: var(--hud); border-radius: var(--r); padding: 0 16px; height: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; transition: background .2s, border-color .2s, box-shadow .2s, transform .12s, color .2s; }
.pill:active { transform: scale(0.97); }
.pill.active { background: linear-gradient(180deg, rgba(242,200,121,0.3), rgba(242,200,121,0.1)), linear-gradient(180deg, rgba(52,34,92,0.95), rgba(24,14,52,0.97)); border-color: rgba(242,200,121,0.65); color: var(--brass2);
  box-shadow: 0 0 0 1px rgba(242,200,121,0.14), 0 0 24px rgba(242,200,121,0.22), inset 0 1px 0 rgba(255,255,255,0.25); }
.pill.live { color: var(--mute); }
.pill.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); box-shadow: none; }
.pill.live.on { color: var(--live); border-color: rgba(122,245,210,0.5); }
.pill.live.on .dot { background: var(--live); box-shadow: 0 0 10px var(--live); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.55; } }
.round { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; transition: transform .12s, box-shadow .2s; }
.round:active { transform: scale(0.94); }
.round.accent { color: var(--bg0); background: linear-gradient(180deg, var(--brass2), var(--brass)); border-color: rgba(255,255,255,0.4); box-shadow: 0 8px 24px rgba(242,200,121,0.35), inset 0 1px 0 rgba(255,255,255,0.6); font-weight: 700; }
.ico { opacity: 0.9; font-size: 15px; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }

/* ---------- layout ---------- */
#top { position: absolute; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); top: calc(10px + var(--sat)); display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 5; }
.brand { height: 42px; padding: 0 16px 0 12px; gap: 10px; }
.brand .logo { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--brass); position: relative; box-shadow: 0 0 14px rgba(242,200,121,0.45); }
.brand .logo::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--brass2); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.brand b { letter-spacing: 0.3em; font-weight: 700; font-size: 12px; }
.brand .sub { color: var(--mute); letter-spacing: 0.18em; font-size: 10px; padding-left: 10px; border-left: 1px solid var(--line); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
#toolbar { position: absolute; left: 0; right: 0; top: calc(60px + var(--sat)); padding: 2px calc(12px + var(--sal)) 8px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; z-index: 5; touch-action: pan-x; }
#toolbar::-webkit-scrollbar { display: none; }
.slider { padding: 0 14px; gap: 10px; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 86px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(242,200,121,0.8)); outline: none; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brass2); border: 2px solid rgba(0,0,0,0.3); box-shadow: 0 0 12px rgba(242,200,121,0.6); }
#searchWrap { position: absolute; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); top: calc(112px + var(--sat)); z-index: 21; } /* above sheets, so results stay reachable while a card is open */
.search { background: linear-gradient(180deg, rgba(46,30,86,0.9), rgba(24,14,52,0.94)); width: 100%; height: 46px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 15px; padding: 0 10px 0 16px; }
.search input { flex: 1; background: none; border: 0; outline: none; min-width: 0; font-size: 15px; }
.search button { color: var(--mute); font-size: 20px; padding: 6px; }
#results { background: linear-gradient(180deg, rgba(40,26,76,0.97), rgba(20,12,44,0.98)); margin-top: 8px; border-radius: 22px; max-height: min(48vh, 420px); overflow: auto; padding: 6px; }
.res { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; cursor: pointer; }
.res:hover, .res:active { background: rgba(255,255,255,0.07); }
.res .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; background: currentColor; }
.res .t { flex: 1; min-width: 0; }
.res .t b { display: block; font-weight: 600; font-size: 14px; }
.res .t span { display: block; color: var(--mute); font-size: 11.5px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res .code { font-family: var(--mono); font-size: 10.5px; color: var(--brass); letter-spacing: 0.08em; }
.res.none { color: var(--mute); justify-content: center; font-size: 13px; }
#legend { font-family: var(--hud); position: absolute; left: calc(12px + var(--sal)); top: calc(166px + var(--sat)); max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; height: 30px; padding: 0 10px; gap: 10px; font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink2); z-index: 4; }
#legend i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }
#legend i[data-k] { cursor: pointer; padding: 3px 6px; border-radius: 999px; transition: opacity .15s, background .15s; }
#legend i.off { opacity: 0.38; }
#legend i.lit { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
#legend i::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
#scalebar { position: absolute; right: calc(16px + var(--sar)); top: calc(208px + var(--sat)); text-align: center; z-index: 4; pointer-events: none; }
#scalebar .bar { height: 7px; border: 1px solid rgba(255,255,255,0.45); border-top: 0; width: 80px; margin-bottom: 3px; }
#scalebar .txt { font-size: 10px; letter-spacing: 0.2em; color: var(--ink2); font-family: var(--mono); }
#hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(150px + var(--sab)); color: var(--ink2); letter-spacing: 0.12em; font-weight: 500; z-index: 4; pointer-events: none; transition: opacity .6s; }
#sideBtns { position: absolute; left: calc(14px + var(--sal)); bottom: calc(152px + var(--sab)); display: flex; flex-direction: column; gap: 10px; z-index: 5; }
#back { position: absolute; left: calc(14px + var(--sal)); bottom: calc(152px + var(--sab)); z-index: 6; height: 44px; color: var(--brass2); }
#liveCount { position: absolute; right: calc(14px + var(--sar)); bottom: calc(152px + var(--sab)); z-index: 5; height: 34px; padding: 0 12px; font-size: 10px; color: var(--live); border-color: rgba(122,245,210,0.35); }
#stats { background: linear-gradient(180deg, rgba(46,30,86,0.92), rgba(20,12,44,0.96)); position: absolute; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); bottom: calc(14px + var(--sab)); border-radius: 26px; padding: 14px 18px 16px; text-align: center; z-index: 5; }
#stats .title { font-family: var(--hud); color: var(--brass); letter-spacing: 0.34em; font-weight: 700; font-size: 13px; }
#stats .line { margin-top: 6px; color: var(--mute); letter-spacing: 0.22em; font-size: 11px; }
#stats .line b { color: var(--ink); font-weight: 600; letter-spacing: 0.1em; }
#stats .rule { height: 1px; margin: 10px 0 8px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
#stats .charted b { color: var(--brass2); }
.tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(242,200,121,0.5); color: var(--brass); font-size: 9px; letter-spacing: 0.2em; vertical-align: middle; }
.tag.live { border-color: rgba(122,245,210,0.5); color: var(--live); }
.tag.local { border-color: rgba(255,255,255,0.3); color: var(--ink2); }

/* ---------- sheets ---------- */
.sheet { background: linear-gradient(180deg, rgba(42,28,80,0.97), rgba(18,11,42,0.985)); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); box-shadow: 0 -16px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14); position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; border-radius: 28px 28px 0 0; padding: 14px 18px calc(18px + var(--sab)); max-height: 78vh; overflow: auto; transform: translateY(105%); transition: transform .38s cubic-bezier(.2,.8,.2,1); -webkit-user-select: text; user-select: text; touch-action: pan-y; }
.sheet.open { transform: translateY(0); }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); margin: 0 auto 12px; }
.sheet .close { z-index: 3; }
.sheet h2 { font-family: var(--hud); margin: 0; padding-right: 44px; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.sheet h3 { font-family: var(--hud); margin: 18px 0 8px; font-size: 10.5px; letter-spacing: 0.28em; color: var(--brass); text-transform: uppercase; font-weight: 700; }
.sheet .close { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; font-size: 18px; }
.sub { color: var(--mute); font-size: 12.5px; letter-spacing: 0.05em; margin-top: 4px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.kv div { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; background: rgba(255,255,255,0.05); }
.kv small { display: block; color: var(--mute); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; }
.kv b { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; }
.kv .wide { grid-column: 1 / -1; }
.codepill { display: inline-flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; }
.codepill span { font-family: var(--mono); font-size: 13px; width: 24px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(242,200,121,0.1); border: 1px solid rgba(242,200,121,0.3); color: var(--brass2); }
.codepill span:nth-child(1) { margin-right: 6px; } .codepill span:nth-child(4), .codepill span:nth-child(6), .codepill span:nth-child(9) { margin-right: 6px; }
.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.btn { font-family: var(--hud); border-radius: var(--r); height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; flex: 1; }
.btn.primary { color: var(--bg0); background: linear-gradient(180deg, var(--brass2), var(--brass)); border-color: rgba(255,255,255,0.4); box-shadow: 0 8px 24px rgba(242,200,121,0.3), inset 0 1px 0 rgba(255,255,255,0.6); }
.btn.danger { color: var(--danger); border-color: rgba(255,138,138,0.4); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); vertical-align: middle; margin-right: 6px; }
.planets { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: none; }
.planets::-webkit-scrollbar { display: none; }
.pchip { flex: none; border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; background: rgba(255,255,255,0.03); min-width: 128px; cursor: pointer; }
.pchip:active { background: rgba(255,255,255,0.08); }
.pchip .orb { width: 26px; height: 26px; border-radius: 50%; margin-bottom: 8px; background: radial-gradient(circle at 35% 35%, #fff8 0, var(--c) 45%, #0008 100%); box-shadow: 0 0 14px var(--c); }
.pchip b { display: block; font-size: 13px; }
.pchip span { color: var(--mute); font-size: 11px; }
.note { color: var(--mute); font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.note.warn { color: var(--brass); }
.note.err { color: var(--danger); }
.note.ok { color: var(--ok); }

/* ---------- form ---------- */
.field { margin-top: 12px; }
.field label { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.field input[type=text], .field input[type=number], .field textarea, .field select { width: 100%; height: 46px; border-radius: 16px; border: 1px solid var(--line2); background: rgba(9,5,24,0.6); padding: 0 14px; outline: none; color: var(--ink); -webkit-appearance: none; appearance: none; }
.field textarea { height: 76px; padding: 12px 14px; resize: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(242,200,121,0.7); box-shadow: 0 0 0 3px rgba(242,200,121,0.15); }
.field .mono { font-family: var(--mono); letter-spacing: 0.22em; font-size: 16px; text-transform: uppercase; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: var(--hud); height: 34px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,0.04); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); }
.chip.active { color: var(--bg0); background: var(--c, var(--brass2)); border-color: transparent; box-shadow: 0 0 16px var(--c, var(--brass)); }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.key { height: 50px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.key:active { background: rgba(242,200,121,0.2); }
.key b { font-family: var(--mono); font-size: 15px; color: var(--brass2); }
.key small { font-size: 8.5px; letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase; }
.key.util { grid-column: span 2; color: var(--ink2); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.decoded { margin-top: 10px; padding: 10px 12px; border-radius: 16px; border: 1px dashed var(--line2); font-size: 12px; color: var(--ink2); line-height: 1.6; }
.decoded b { color: var(--brass2); font-family: var(--mono); font-weight: 500; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.switch { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.switch:last-child { border-bottom: 0; }
.switch span small { display: block; color: var(--mute); font-size: 11px; margin-top: 2px; }
.tog { width: 48px; height: 28px; border-radius: 14px; background: rgba(255,255,255,0.12); border: 1px solid var(--line); position: relative; flex: none; transition: background .2s; }
.tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tog.on { background: rgba(242,200,121,0.6); } .tog.on::after { transform: translateX(20px); background: #fff8dc; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.statgrid div { border: 1px solid var(--line); border-radius: 16px; padding: 10px; text-align: center; }
.statgrid b { display: block; font-size: 18px; color: var(--brass2); }
.statgrid small { color: var(--mute); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.list li span { color: var(--mute); font-size: 11.5px; }
.list li:last-child { border-bottom: 0; }

/* ---------- toasts & fade ---------- */
#toasts { position: absolute; left: 50%; transform: translateX(-50%); top: calc(176px + var(--sat)); display: flex; flex-direction: column; gap: 8px; z-index: 30; pointer-events: none; align-items: center; }
.toast { background: linear-gradient(180deg, rgba(46,30,86,0.96), rgba(20,12,44,0.98)); padding: 0 16px; height: 40px; font-size: 12px; letter-spacing: 0.06em; text-transform: none; font-weight: 500; animation: toastIn .35s cubic-bezier(.2,.8,.2,1); max-width: 92vw; }
.toast.live { color: var(--live); border-color: rgba(122,245,210,0.45); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
#fade { position: absolute; inset: 0; background: #03050f; opacity: 0; pointer-events: none; transition: opacity .45s ease; z-index: 15; }
#fade.on { opacity: 1; }
#loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; z-index: 40; background: var(--bg0); transition: opacity .6s; }
#loader .ring { width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(242,200,121,0.25); border-top-color: var(--brass2); animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loader p { margin: 0; color: var(--mute); letter-spacing: 0.3em; font-size: 11px; text-transform: uppercase; }
#loader.off { opacity: 0; pointer-events: none; }

/* ---------- desktop ---------- */
.lbl.comm.civ { color: rgba(236,232,255,0.92); font-size: 10.5px; letter-spacing: 0.26em; }
.lbl.comm.civ::after { background: linear-gradient(rgba(242,200,121,0.7), transparent); }
.kv .civ { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--brass2); letter-spacing: 0.04em; }
.kv .setcls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kv .setcls .chip { height: 30px; font-size: 10px; }
.kv a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
@media (max-width: 879px) { #hint { left: auto; right: calc(12px + var(--sar)); transform: none; max-width: calc(100% - 96px); white-space: normal; height: auto; min-height: 40px; padding: 8px 14px; text-align: center; } } /* clear of the side buttons on phones */
@media (min-width: 880px) {
  #toolbar { left: calc(var(--brandW, 218px) + 22px + var(--sal)); right: 440px; top: calc(10px + var(--sat)); padding: 0; }
  #searchWrap { left: auto; right: calc(72px + var(--sar)); width: 340px; top: calc(10px + var(--sat)); }
  #top { right: auto; }
  #btnMenu { position: fixed; right: calc(12px + var(--sar)); top: calc(10px + var(--sat)); }
  #legend { top: calc(62px + var(--sat)); }
  #scalebar { top: calc(70px + var(--sat)); right: calc(16px + var(--sar)); }
  #stats { left: 50%; right: auto; transform: translateX(-50%); min-width: 460px; }
  #sideBtns, #back { bottom: calc(24px + var(--sab)); left: calc(20px + var(--sal)); }
  #hint { bottom: calc(118px + var(--sab)); }
  #liveCount { right: calc(20px + var(--sar)); bottom: calc(24px + var(--sab)); }
  .sheet { left: auto; right: 16px; bottom: 16px; width: 420px; border-radius: 28px; max-height: calc(100vh - 110px); transform: translateX(120%); }
  .sheet.open { transform: none; }
  #toasts { top: calc(70px + var(--sat)); }
}

/* ---------- discoveries & import ---------- */
.disclist { display: flex; flex-direction: column; gap: 8px; }
.disc { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 18px; padding: 10px; background: rgba(255,255,255,0.05); cursor: pointer; }
.disc:active { background: rgba(255,255,255,0.09); }
.disc img, .disc .ph { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; background: rgba(0,0,0,0.3); }
.disc .ph { display: grid; place-items: center; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 26%, transparent) 0%, rgba(14,8,34,0.9) 72%); }
.disc .ph svg { width: 54%; height: 54%; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); }
.disc.compact img, .disc.compact .ph { width: 52px; height: 52px; }
.disc .t { min-width: 0; flex: 1; }
.disc .t b { display: block; font-size: 14px; margin-top: 4px; }
.disc .t span { color: var(--mute); font-size: 11.5px; }
.disc .t p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink2); line-height: 1.4; }
.chip.mini { height: 22px; padding: 0 8px; font-size: 9px; color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px 0 12px; padding-bottom: 4px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.sheet h3 .count { color: var(--ink2); font-size: 11px; margin-left: 6px; }
.preview { width: 100%; max-height: 220px; object-fit: cover; border-radius: 16px; margin-top: 10px; border: 1px solid var(--line); }
.field input[type=file] { width: 100%; color: var(--ink2); font-size: 13px; }
.field input[type=file]::file-selector-button { font: inherit; font-family: var(--hud); color: var(--ink); background: rgba(255,255,255,0.08); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 14px; margin-right: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }
.drop { border: 1px dashed var(--line2); border-radius: 20px; padding: 26px 16px; text-align: center; margin-top: 14px; cursor: pointer; background: rgba(255,255,255,0.03); transition: background .2s, border-color .2s; }
.drop.over { background: rgba(242,200,121,0.12); border-color: var(--brass); }
.drop b { display: block; font-family: var(--hud); letter-spacing: 0.08em; font-size: 15px; }
.drop span { display: block; color: var(--mute); font-size: 12px; margin-top: 4px; }
.drop .chip { margin-top: 12px; }
.bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); margin-top: 14px; overflow: hidden; }
.bar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--brass), var(--brass2)); transition: width .2s; }
#importList { max-height: 220px; overflow: auto; margin-top: 10px; }

/* ---------- v0.7: Haven-style card, editor, control room ---------- */
.mute { color: var(--mute); font-weight: 500; }
.pct { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; margin-left: 10px; padding: 2px 8px; border-radius: 999px; vertical-align: middle; border: 1px solid; }
.pct.hi { color: var(--ok); border-color: rgba(141,245,180,0.5); background: rgba(141,245,180,0.1); }
.pct.mid { color: var(--brass2); border-color: rgba(242,200,121,0.5); background: rgba(242,200,121,0.1); }
.pct.lo { color: var(--ink2); border-color: var(--line2); background: rgba(255,255,255,0.05); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tagp { font-family: var(--hud); display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); white-space: nowrap; }
.tagp.dim { color: var(--mute); border-style: dashed; border-color: var(--line2); background: transparent; }
.tagp.sm { height: 20px; padding: 0 8px; font-size: 9px; }
.addr { margin-top: 10px; color: var(--mute); font-size: 12px; line-height: 1.5; }
.addr .mono { color: var(--brass2); font-size: 12px; letter-spacing: 0.06em; }
.addr b { color: var(--ink); font-weight: 600; }
.pgrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pcard { border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px 12px; background: rgba(255,255,255,0.04); cursor: pointer; border-top: 2px solid var(--c, var(--line2)); }
.pcard:active { background: rgba(255,255,255,0.08); }
.pcard.nr { border-top-style: dashed; }
.pcard .ph { display: flex; align-items: center; gap: 8px; }
.pcard .ph b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .orb { width: 16px; height: 16px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, #fff8 0, var(--c, #556) 45%, #0008 100%); box-shadow: 0 0 10px var(--c, transparent); }
.pcard.nr .orb { background: radial-gradient(circle at 35% 35%, #fff3 0, #3a4670 45%, #0008 100%); box-shadow: none; }
.pcard .lv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.pcard .lv b { display: block; font-size: 13px; font-weight: 600; }
.pcard .lv small { display: block; color: var(--mute); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 1px; }
.pcard .sub { margin-top: 6px; }
.pcard .rs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pcard.station { background: rgba(127,208,255,0.06); }
.btn.accent { color: var(--brass2); border-color: rgba(242,200,121,0.55); }
.chip.sm { height: 28px; padding: 0 10px; font-size: 10px; text-transform: none; letter-spacing: 0.02em; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.row3 .field select { padding: 0 8px; font-size: 13px; }
.pedit { border: 1px solid var(--line); border-radius: 18px; padding: 2px 12px 12px; margin-top: 12px; background: rgba(255,255,255,0.03); }
.pedit h3 { margin-top: 12px; }
.rsd { margin-top: 10px; }
.rsd summary { cursor: pointer; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); list-style: none; }
.rsd summary::before { content: '▸ '; } .rsd[open] summary::before { content: '▾ '; }
.rsd .chips { margin-top: 8px; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.tile { border: 1px solid var(--line); border-radius: 16px; padding: 10px 4px 8px; text-align: center; background: rgba(255,255,255,0.04); min-width: 0; }
.tile b { display: block; font-family: var(--hud); font-size: 17px; color: var(--live); letter-spacing: 0.02em; }
.tile small { display: block; color: var(--mute); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile em { display: block; font-style: normal; font-size: 9.5px; color: var(--mute); margin-top: 4px; letter-spacing: 0.04em; }
.tile em.up { color: var(--ok); } .tile em span { color: var(--mute); margin-left: 3px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.list.rank li, .list.gaps li, .list.actlog li { align-items: center; cursor: default; }
.list.rank li[data-kind] { cursor: pointer; }
.list .rk { color: var(--brass); font-family: var(--mono); font-size: 11px; width: 18px; flex: none; }
.list .nm { flex: 1; min-width: 0; color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .n { color: var(--mute); font-size: 11px; white-space: nowrap; }
.list.gaps .chip { flex: none; }
.list.actlog li { padding: 7px 0; font-size: 12.5px; }
.list.actlog li.chart .nm { color: var(--live); }
.list.actlog li.find .nm { color: var(--ok); }
.list.actlog li.edit .nm { color: var(--brass2); }
.sheet h3 .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); margin-left: 8px; vertical-align: middle; }
.sheet h3 .dot.on { background: var(--live); box-shadow: 0 0 8px var(--live); animation: pulse 1.8s infinite; }
.mislist { display: flex; flex-direction: column; gap: 8px; }
.mis { border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; background: rgba(255,255,255,0.04); }
.mis.pinned { border-color: rgba(242,200,121,0.6); background: linear-gradient(180deg, rgba(242,200,121,0.1), rgba(255,255,255,0.03)); }
.mis .hd { display: flex; align-items: center; gap: 8px; }
.mis .hd b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mis .hd .star { color: var(--brass2); }
.mis .meta { color: var(--mute); font-size: 11.5px; margin-top: 3px; }
.mis .addr2 { font-family: var(--mono); color: var(--brass2); letter-spacing: 0.08em; font-size: 12.5px; margin-top: 6px; }
.mis .tags { margin-top: 6px; }
.mis .row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mis .row .chip { height: 30px; }
#btnMissions { position: relative; }
#btnMissions .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brass); color: var(--bg0); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--hud); }
@media (max-width: 879px) { .cols { grid-template-columns: 1fr; } .tiles { grid-template-columns: repeat(3, 1fr); } .row3 { grid-template-columns: 1fr; } }
@media (min-width: 880px) { .sheet.wide { width: 600px; } #card { width: 480px; } #editSheet { width: 480px; } .pgrid { grid-template-columns: 1fr 1fr; } }
.list.actlog li.mission .nm { color: var(--brass2); }

/* ---------- v0.8.1: phone layout ---------- */
.chip, .tagp { white-space: nowrap; }
.howto { margin-top: 8px; }
.howto summary { cursor: pointer; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); list-style: none; }
.howto summary::before { content: '▸ '; } .howto[open] summary::before { content: '▾ '; }
@media (max-width: 879px) {
  /* bottom: a slim stats bar with one row of controls above it, so the galaxy gets the middle of the screen */
  #stats { bottom: calc(10px + var(--sab)); padding: 8px 14px 9px; border-radius: 20px; }
  #stats .title { font-size: 11px; letter-spacing: 0.26em; }
  #stats .line { margin-top: 3px; font-size: 10px; letter-spacing: 0.16em; }
  #stats .rule, #stats .charted { display: none; }
  #sideBtns { flex-direction: row; justify-content: space-between; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); bottom: calc(66px + var(--sab)); gap: 8px; }
  #sideBtns .round { width: 44px; height: 44px; font-size: 18px; }
  #back { bottom: calc(66px + var(--sab)); }
  #hint { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(120px + var(--sab)); max-width: calc(100% - 24px); }
  #liveCount { bottom: calc(120px + var(--sab)); }
  #legend { height: 28px; gap: 8px; font-size: 9px; }
  /* sheets: cover the top controls instead of stopping under them */
  .sheet { z-index: 22; max-height: calc(100% - 60px - var(--sat)); padding: 12px 14px calc(16px + var(--sab)); border-radius: 24px 24px 0 0; }
  .sheet h2 { font-size: 18px; }
  .sheet h3 { margin: 14px 0 6px; }
  .pct { font-size: 10px; margin-left: 6px; padding: 1px 6px; }
  .tags { gap: 5px; margin-top: 8px; }
  .tagp { height: 22px; padding: 0 8px; font-size: 9px; letter-spacing: 0.08em; }
  .codepill { gap: 2px; }
  .codepill span { width: 21px; height: 25px; font-size: 12px; border-radius: 6px; }
  .codepill span:nth-child(1), .codepill span:nth-child(4), .codepill span:nth-child(6), .codepill span:nth-child(9) { margin-right: 4px; }
  .addr { font-size: 11.5px; margin-top: 8px; }
  .kv { gap: 6px; margin-top: 10px; }
  .kv div { padding: 8px 10px; border-radius: 14px; }
  .kv b { font-size: 13px; }
  .kv .setcls .chip { height: 28px; padding: 0 10px; }
  .pcard { padding: 9px 10px 10px; }
  .actions { gap: 8px; margin-top: 12px; }
  .actions .btn { flex: 1 1 calc(50% - 4px); min-width: 0; height: 42px; padding: 0 10px; font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chips.scroll { margin: 8px 0; }
  #msType .chip, #msGal .chip { height: 30px; padding: 0 11px; font-size: 10px; }
  .mis { padding: 9px 10px; }
  .mis .meta { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mis .row { gap: 5px; }
  .mis .row .chip { height: 28px; padding: 0 10px; font-size: 9.5px; }
  .tiles { gap: 5px; }
  .tile b { font-size: 15px; }
}
@media (max-width: 879px) { .toast { white-space: normal; height: auto; min-height: 40px; padding: 9px 16px; line-height: 1.35; text-align: center; max-width: calc(100vw - 24px); } }
.guide { margin: 8px 0 0; padding-left: 18px; color: var(--ink2); font-size: 12.5px; line-height: 1.5; }
.guide li { margin-bottom: 6px; } .guide b { color: var(--ink); font-weight: 600; }
.shots { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.shot { flex: none; width: 112px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.04); }
.shot img { width: 112px; height: 63px; object-fit: cover; display: block; }
.shot span { display: block; font-size: 10px; color: var(--mute); padding: 4px 6px; line-height: 1.3; }
.shot span.ok { color: var(--ok); } .shot span.err { color: var(--danger); }
#qRead .field, #qManual .field { margin-top: 10px; }
#qRead .field label::after { content: ' · read'; color: var(--ok); letter-spacing: 0.1em; }
.row2 > div > label { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.row2 > div > select, .field .row2 select, .field .row2 input { width: 100%; height: 46px; border-radius: 16px; border: 1px solid var(--line2); background: rgba(9,5,24,0.6); padding: 0 14px; color: var(--ink); -webkit-appearance: none; appearance: none; outline: none; }
/* closed sheets are out of the way for touches too, not only out of sight */
.sheet:not(.open) { visibility: hidden; pointer-events: none; transition: transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .38s; }
.sheet.open { visibility: visible; }

/* ---------- v0.9.2: white frost over the purple void ---------- */
:root { --ink: #ffffff; --ink2: #ddd7f3; --mute: #a69ecb; --line: rgba(255,255,255,0.2); --line2: rgba(255,255,255,0.34); }
.glass { background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 46%), linear-gradient(180deg, rgba(52,34,92,0.86), rgba(24,14,52,0.92)); border-color: rgba(255,255,255,0.28); box-shadow: 0 12px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(0,0,0,0.3); }
.sheet { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 120px), linear-gradient(180deg, rgba(42,28,80,0.97), rgba(18,11,42,0.985)); box-shadow: 0 -16px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.32); }
.sheet .grab { background: rgba(255,255,255,0.55); }
.kv div, .pcard, .mis, .tile, .statgrid div, .pedit, .disc { background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.18); }
.chip { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.07); color: #ece8fb; }
.pill.active { color: #ffffff; }
.tile b { color: #ffffff; text-shadow: 0 0 14px rgba(255,255,255,0.35); }
#stats .title { color: #ffffff; text-shadow: 0 0 16px rgba(255,255,255,0.25); }
#stats .line b, .statgrid b { color: #ffffff; }
.sheet h2 { text-shadow: 0 0 18px rgba(255,255,255,0.18); }
.field input[type=text], .field input[type=number], .field textarea, .field select, .row2 > div > select, .field .row2 select, .field .row2 input { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); }
.lbl.comm.civ { color: #ffffff; }

/* ---------- phones: two slim rows up top (brand + search, brightness, menu buttons; then the colour modes), legend down by the controls ---------- */
.mobOnly { display: none; }
@media (max-width: 879px) {
  .mobOnly { display: inline-flex; }
  #top { gap: 8px; }
  #top .brand { height: 40px; padding: 0 12px 0 10px; gap: 8px; min-width: 0; flex: 0 1 auto; }
  #top .brand b { font-size: 11px; letter-spacing: 0.24em; }
  #top .brand .sub { max-width: 92px; padding-left: 8px; font-size: 9px; }
  #top .round { width: 40px; height: 40px; font-size: 17px; flex: none; }
  #btnSearch { margin-left: auto; }
  #btnBright.on, #btnSearch.on { border-color: var(--brass); color: var(--brass2); }
  #toolbar { top: calc(58px + var(--sat)); padding: 2px calc(12px + var(--sal)) 6px; gap: 6px; overflow: visible; }
  #toolbar .pill { height: 34px; padding: 0 10px; font-size: 10px; letter-spacing: 0.12em; }
  #toolbar .toggle { flex: 1 1 0; justify-content: center; min-width: 0; }
  #toolbar .live { flex: none; padding: 0 11px; font-size: 0; gap: 0; }
  #toolbar .live .dot { margin: 0; }
  #toolbar .slider { display: none; }
  body.brightOpen #toolbar .slider { display: inline-flex; flex: 1 1 auto; }
  body.brightOpen #toolbar .slider input[type=range] { width: 100%; }
  body.brightOpen #toolbar .toggle, body.brightOpen #toolbar .live { display: none; }
  #searchWrap { display: none; top: calc(10px + var(--sat)); z-index: 23; }
  body.searchOpen #searchWrap { display: block; }
  body.searchOpen #searchClear.hidden { display: inline-flex !important; }
  #searchWrap .search { height: 44px; }
  #legend { top: auto; bottom: calc(118px + var(--sab)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); z-index: 5; gap: 4px; padding: 0 6px; letter-spacing: 0.08em; }
  #legend i[data-k] { padding: 3px 5px; gap: 4px; }
  /* the hint sits above the legend on one line; the live count moves up beside the scale bar so the two never collide */
  #hint { bottom: calc(158px + var(--sab)); white-space: nowrap; height: 32px; min-height: 0; padding: 0 14px; font-size: 9.5px; letter-spacing: 0.1em; max-width: calc(100% - 24px); }
  #liveCount { top: calc(104px + var(--sat)); bottom: auto; left: calc(12px + var(--sal)); right: auto; height: 28px; padding: 0 10px; font-size: 9px; }
  #scalebar { top: calc(104px + var(--sat)); }
}

/* ---------- landing page ---------- */
#landing { position: fixed; inset: 0; z-index: 41; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--brass) 10%, transparent), transparent 70%), var(--bg0); transition: opacity .5s ease, visibility 0s linear .5s; -webkit-user-select: none; user-select: none; }
#landing.off { opacity: 0; visibility: hidden; pointer-events: none; }
.lp-inner { flex: 1; width: 100%; max-width: 860px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(24px + var(--sat)) 20px 12px; gap: 16px; }
.lp-hero { position: relative; height: min(62vh, 640px); aspect-ratio: 784 / 1168; max-width: 100%; }
.lp-hero video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 90%, transparent); mask-composite: intersect; }
.lp-sound { position: absolute; right: 6px; bottom: 6px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(0,0,0,0.45); font-size: 15px; opacity: 0.75; }
.lp-sound:hover { opacity: 1; }
.lp-by { margin: 0; font-family: var(--hud); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink2); text-align: center; }
.lp-by b { color: var(--brass2); font-weight: 700; }
.lp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 6px; }
.lp-card { position: relative; text-align: left; padding: 16px 16px 18px; border-radius: 14px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  display: flex; flex-direction: column; gap: 4px; min-height: 118px; transition: transform .18s, border-color .18s, box-shadow .18s; }
.lp-card::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: 0.7; }
.lp-card:hover { transform: translateY(-2px); border-color: var(--brass); box-shadow: 0 12px 30px -14px var(--brass); }
.lp-card:active { transform: translateY(0); }
.lp-ico { width: 24px; height: 24px; color: var(--brass2); margin-bottom: 8px; } .lp-ico svg { width: 100%; height: 100%; }
.lp-card b { font-family: var(--hud); font-size: 17px; letter-spacing: 0.06em; color: var(--ink); }
.lp-card small { color: var(--mute); font-size: 12px; line-height: 1.35; padding-right: 18px; }
.lp-arrow { position: absolute; right: 14px; bottom: 12px; color: var(--brass); font-size: 14px; }
.lp-skip { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); margin-top: 4px; cursor: pointer; }
.lp-skip input { accent-color: var(--brass); width: 16px; height: 16px; }
.lp-foot { width: 100%; text-align: center; padding: 18px 16px calc(16px + var(--sab)); font-family: var(--hud); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); border-top: 1px solid var(--line); }
#top .brand { cursor: pointer; }
@media (max-width: 879px) {
  .lp-inner { padding-top: calc(14px + var(--sat)); gap: 12px; justify-content: flex-start; }
  .lp-hero { height: min(48vh, 560px); }
  .lp-by { font-size: 10px; letter-spacing: 0.18em; line-height: 1.6; }
  .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lp-card { min-height: 104px; padding: 13px 13px 15px; }
  .lp-card b { font-size: 15px; } .lp-card small { font-size: 11px; }
}

/* ---------- galaxy switcher ---------- */
#stats { cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .12s; }
#stats:hover { border-color: var(--brass); box-shadow: 0 12px 30px -16px var(--brass); }
#stats:active { transform: translateX(-50%) scale(0.985); }
#stats #viewTitle::after { content: ' ⇅'; color: var(--brass); letter-spacing: 0; font-size: 0.9em; opacity: 0.85; }
.galist li { cursor: pointer; align-items: center; padding: 10px 6px; border-radius: 10px; }
.galist li:hover { background: rgba(255,255,255,0.05); }
.galist li.cur { background: color-mix(in srgb, var(--brass) 12%, transparent); }
.galist li.cur .nm { color: var(--brass2); font-weight: 600; }
.galist .rk { width: 28px; }
.galist .tag { font-size: 9px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--brass); color: var(--brass2); letter-spacing: 0.1em; text-transform: uppercase; flex: none; }
@media (max-width: 879px) { #stats:active { transform: scale(0.985); } }

.hint-short { display: none; }
@media (max-width: 879px) { .hint-long { display: none; } .hint-short { display: inline; } }

/* ---------- theme: Purple Void (true black, exotic violet). Tokens from the Everion site's purple-void.css. Generated from the rules above, then tuned by hand. ---------- */
html.theme-void { --bg0: #030204; --bg1: #08060c; --bg2: #131019; --ink: #f6f4f9; --ink2: #cfcbd9; --mute: #a7a1b5; --brass: #ce9dff; --brass2: #eac3ff;
  --live: #80ecf1; --ok: #6de18b; --danger: #ff6a65; --line: #282431; --line2: #4a4456; color-scheme: dark; }
html.theme-void { --bg0: #040305; --bg1: #08070b; --bg2: #0d0b11; --brass: #ce9dff; --brass2: #eac3ff; }
html.theme-void #bg { background:
  radial-gradient(120% 80% at 50% 110%, #110e16 0%, rgba(17, 14, 22,0) 55%),
  radial-gradient(90% 60% at 50% -10%, #0f0d14 0%, rgba(15, 13, 20,0) 60%),
  linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #050407); }
html.theme-void #vignette { background: radial-gradient(80% 70% at 50% 50%, rgba(0,0,0,0) 55%, rgba(3, 2, 3,0.65) 100%); }
html.theme-void .glass { background: linear-gradient(180deg, rgba(19, 16, 25,0.86), rgba(10, 8, 13,0.92)); }
html.theme-void .pill.active { background: linear-gradient(180deg, rgba(206, 157, 255,0.3), rgba(206, 157, 255,0.1)), linear-gradient(180deg, rgba(19, 16, 25,0.95), rgba(10, 8, 13,0.97)); border-color: rgba(206, 157, 255,0.65); box-shadow: 0 0 0 1px rgba(206, 157, 255,0.14), 0 0 24px rgba(206, 157, 255,0.22), inset 0 1px 0 rgba(255,255,255,0.25); }
html.theme-void .round.accent { box-shadow: 0 8px 24px rgba(206, 157, 255,0.35), inset 0 1px 0 rgba(255,255,255,0.6); }
html.theme-void .brand .logo { box-shadow: 0 0 14px rgba(206, 157, 255,0.45); }
html.theme-void .slider input[type=range] { background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(206, 157, 255,0.8)); }
html.theme-void .slider input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 12px rgba(206, 157, 255,0.6); }
html.theme-void .search { background: linear-gradient(180deg, rgba(17, 15, 23,0.9), rgba(10, 8, 13,0.94)); }
html.theme-void #results { background: linear-gradient(180deg, rgba(15, 13, 20,0.97), rgba(8, 7, 11,0.98)); }
html.theme-void #stats { background: linear-gradient(180deg, rgba(17, 15, 23,0.92), rgba(8, 7, 11,0.96)); }
html.theme-void .tag { border: 1px solid rgba(206, 157, 255,0.5); }
html.theme-void .sheet { background: linear-gradient(180deg, rgba(16, 14, 21,0.97), rgba(8, 6, 10,0.985)); }
html.theme-void .codepill span { background: rgba(206, 157, 255,0.1); border: 1px solid rgba(206, 157, 255,0.3); }
html.theme-void .btn.primary { box-shadow: 0 8px 24px rgba(206, 157, 255,0.3), inset 0 1px 0 rgba(255,255,255,0.6); }
html.theme-void .field input[type=text], html.theme-void .field input[type=number], html.theme-void .field textarea, html.theme-void .field select { background: rgba(4, 3, 5,0.6); }
html.theme-void .field input:focus, html.theme-void .field textarea:focus, html.theme-void .field select:focus { border-color: rgba(206, 157, 255,0.7); box-shadow: 0 0 0 3px rgba(206, 157, 255,0.15); }
html.theme-void .key:active { background: rgba(206, 157, 255,0.2); }
html.theme-void .tog.on { background: rgba(206, 157, 255,0.6); }
html.theme-void .tog.on::after { background: #f6f4f9; }
html.theme-void .toast { background: linear-gradient(180deg, rgba(17, 15, 23,0.96), rgba(8, 7, 11,0.98)); }
html.theme-void #fade { background: #020203; }
html.theme-void #loader .ring { border: 2px solid rgba(206, 157, 255,0.25); }
html.theme-void .lbl.comm.civ::after { background: linear-gradient(rgba(206, 157, 255,0.7), transparent); }
html.theme-void .disc .ph { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 26%, transparent) 0%, rgba(6, 5, 8,0.9) 72%); }
html.theme-void .drop.over { background: rgba(206, 157, 255,0.12); }
html.theme-void .pct.mid { border-color: rgba(206, 157, 255,0.5); background: rgba(206, 157, 255,0.1); }
html.theme-void .btn.accent { border-color: rgba(206, 157, 255,0.55); }
html.theme-void .mis.pinned { border-color: rgba(206, 157, 255,0.6); background: linear-gradient(180deg, rgba(206, 157, 255,0.1), rgba(255,255,255,0.03)); }
html.theme-void .row2 > div > select, html.theme-void .field .row2 select, html.theme-void .field .row2 input { background: rgba(4, 3, 5,0.6); }
html.theme-void .glass { background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 46%), linear-gradient(180deg, rgba(19, 16, 25,0.86), rgba(10, 8, 13,0.92)); }
html.theme-void .sheet { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 120px), linear-gradient(180deg, rgba(16, 14, 21,0.97), rgba(8, 6, 10,0.985)); }
html.theme-void #bg { background: radial-gradient(60% 50% at 10% 5%, rgba(76,30,115,0.3), transparent 66%), radial-gradient(50% 48% at 92% 18%, rgba(38,36,94,0.26), transparent 66%), radial-gradient(40% 38% at 72% 96%, rgba(176,91,170,0.08), transparent 66%), #030204; }
html.theme-void #vignette { background: radial-gradient(80% 70% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.7) 100%); }
html.theme-void .glass { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 50%), rgba(19,16,25,0.9); border-color: #4a4456; box-shadow: 0 12px 34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(246,244,249,0.08); }
html.theme-void .sheet { background: rgba(8,6,12,0.97); border: 1px solid #282431; box-shadow: 0 -16px 50px rgba(0,0,0,0.7), inset 0 1px 0 rgba(246,244,249,0.08); }
html.theme-void #stats { background: rgba(8,6,12,0.92); border-color: #4a4456; }
html.theme-void .round.accent, html.theme-void .btn.primary { color: #0f0618; background: #ce9dff; border-color: #ce9dff; box-shadow: 0 10px 26px -10px #ce9dff; }
html.theme-void .pill.active { color: #f6f4f9; background: #1f1a27; border-color: #ce9dff; box-shadow: 0 0 0 1px rgba(206,157,255,0.35), 0 8px 22px -12px #ce9dff; }
html.theme-void .chip.active { color: #0f0618; }
html.theme-void .tog.on { background: #ce9dff; } html.theme-void .tog.on::after { background: #f6f4f9; }
html.theme-void .kv div, html.theme-void .pcard, html.theme-void .mis, html.theme-void .tile, html.theme-void .statgrid div, html.theme-void .pedit, html.theme-void .disc { background: #131019; border-color: #282431; }
html.theme-void .chip { background: #131019; border-color: #4a4456; color: #cfcbd9; }
html.theme-void .field input[type=text], html.theme-void .field input[type=number], html.theme-void .field textarea, html.theme-void .field select, html.theme-void .row2 > div > select, html.theme-void .field .row2 select, html.theme-void .field .row2 input { background: #010101; border-color: #4a4456; }
html.theme-void .sheet h3 { color: #80ecf1; }

  radial-gradient(120% 80% at 50% 110%, #120f17 0%, rgba(18, 15, 23,0) 55%),
  radial-gradient(90% 60% at 50% -10%, #0f0d15 0%, rgba(15, 13, 21,0) 60%),
  linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #050507); }
.themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.themes button { border: 1px solid var(--line2); border-radius: 14px; padding: 8px; text-align: left; font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.04); }
.themes button i { display: block; height: 26px; border-radius: 8px; margin-bottom: 6px; }
.themes button.on { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), 0 0 18px color-mix(in srgb, var(--brass) 30%, transparent); }