/* NO GROUND Sky+ v7 design layer. Loaded last on every page: one look, one header, one bottom menu.
   Dark glass over the night sky; the orange is kept for the one thing to tap. */
@font-face { font-family: "Sora"; font-weight: 600; font-display: swap; src: url(../fonts/sora-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700 800; font-display: swap; src: url(../fonts/sora-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700 800; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg: #04060C; --bg-2: #0A0F1C; --panel: #0C1222;
  --glass: rgba(16, 23, 42, .62); --glass-2: rgba(255, 255, 255, .05);
  --line: rgba(160, 185, 255, .12); --line-2: rgba(160, 185, 255, .2);
  --fg: #F3F5FB; --text: #B9C2DA; --muted: #8E9ABB; --dim: #6B789B;
  --accent: #FF9A2E; --accent-2: #FFB25C; --air: #6FD6FF; --ok: #5FD9A0; --bad: #FF6B7A;
  --radius: 22px; --shadow: none;
  --display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --top-h: 54px; --tab-h: 62px;
  --safe-b: min(env(safe-area-inset-bottom, 0px), 40px);
  --sky-ui: rgba(12, 18, 34, .6); --sky-line: rgba(160, 185, 255, .16);
}
html, body { background: var(--bg); }
body { font-size: 15px; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* pages cross-fade; the header and the bottom menu stay still */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.topbar { view-transition-name: sp-top; }
.tabbar { view-transition-name: sp-tabs; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- the shell: the SAME rules on every page, so the header and the bottom menu can never sit differently from one page to the next.
   iPhone home-screen apps give a page a screen that is 59px too short unless the page itself is at least one full screen tall.
   body below is at least a full screen on every page (before, only some pages were, and those were the ones where the menu sat right). */
body, body.sp, body.ng-app { min-height: 100vh; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.app { position: fixed; inset: 0; height: auto; border: 0; background: var(--bg); }
.topbar { height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0; border-bottom: 0; background: var(--bg); gap: 10px; }
.brand { gap: 9px; flex: none; }
.brand img { width: 28px; height: 28px; }
.brand strong { font: 700 1.02rem/1 var(--display); letter-spacing: -.01em; }
.proto-tag { display: none !important; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex: 1; }
.top-place, .plan-pill { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-2); color: var(--fg); font: 600 .78rem/1 var(--body); max-width: 46vw; }
.top-place svg { fill: none; stroke: var(--accent); stroke-width: 2; width: 14px; height: 14px; }
.plan-pill { border-color: rgba(255,154,46,.5); color: var(--accent-2); flex: none; }
.top-red, .topbar:has(.top-place) .top-red { flex: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-2); cursor: pointer; }
.top-red span { display: none !important; }
.top-red svg { width: 16px; height: 16px; fill: var(--muted); }
.top-red.on, .top-red[aria-pressed="true"] { border-color: #ff5a4a; background: rgba(255, 70, 50, .18); }
.top-red.on svg, .top-red[aria-pressed="true"] svg { fill: #ff6a55; }

.tabbar { height: var(--tab-h); margin: 6px 12px calc(8px + var(--safe-b)); padding: 6px !important; gap: 2px; border: 1px solid var(--line); border-radius: 26px; background: rgba(10, 15, 28, .92); }
.tabbar a { border-radius: 20px; gap: 4px; font: 500 .66rem/1 var(--body); color: var(--dim); transition: background .2s, color .2s; }
.tabbar a svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.on { color: var(--fg); background: rgba(255, 255, 255, .08); }
.tabbar a.on svg { color: var(--accent); }
.tabbar a:active { background: rgba(255, 255, 255, .12); }

.scroll { padding: 6px 16px 28px; }
.scroll > .sp-main, .scroll .sp-main { padding: 0 0 8px; }

/* ---------- type */
.sp-kicker, .section-kicker, .sky-below .section-kicker { font: 600 .68rem/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 8px 0 6px; }
.sp-h1 { font: 700 1.75rem/1.1 var(--display); letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
.sp-h2 { font: 600 1.15rem/1.25 var(--display); letter-spacing: -.015em; margin: 26px 0 12px; }
.sp-lead { font-size: .98rem; line-height: 1.55; margin: -6px 0 18px; }
.sp-back { display: inline-flex; align-items: center; height: 30px; padding: 0 12px 0 9px; margin: 2px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-2); color: var(--fg) !important; font: 500 .76rem/1 var(--body); }
.card h2, .sp-card h2, .sp-support h2 { font: 600 1.02rem/1.3 var(--display); letter-spacing: -.01em; }
.sp-muted, .fine { line-height: 1.5; }

/* ---------- surfaces: one card style */
.card, .sp-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 12px; box-shadow: none; }
.sp-hubs { gap: 0; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.sp-hub { border: 0; border-radius: 0; background: none; padding: 15px 16px; gap: 14px; border-top: 1px solid var(--line); }
.sp-hub:first-child { border-top: 0; }
.sp-hub:active { background: var(--glass-2); }
.sp-hub i { width: 10px; height: 10px; box-shadow: 0 0 14px currentColor; }
.sp-hub span { font-size: .84rem; line-height: 1.4; color: var(--muted); }
.sp-hub strong { font: 600 .98rem/1.35 var(--display); letter-spacing: -.01em; }
.sp-hub em { color: var(--dim); font-size: 20px; }
.sp-new { background: rgba(111, 214, 255, .14); color: var(--air); font-weight: 600; }
.sp-sun { border-radius: 16px; background: var(--bg-2); padding: 12px 8px; }
.sp-sun span { font-size: .62rem; letter-spacing: .12em; color: var(--dim); }
.sp-sun strong { font: 600 1rem/1.3 var(--display); font-variant-numeric: tabular-nums; }
.sp-btn { min-height: 48px; border-radius: 999px; font: 600 .95rem/1.2 var(--body); }
.sp-btn-main { background: var(--accent); color: #1B0F00 !important; }
.sp-btn-ghost { border-color: var(--line-2); background: var(--glass-2); }
.sp-support { border: 1px solid var(--line); background: radial-gradient(120% 140% at 100% 0%, rgba(255, 154, 46, .12), transparent 60%), var(--bg-2); border-radius: var(--radius); margin-top: 22px; }
.sp-support p { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.sp-input, .sp-sheet input { border-radius: 14px; background: var(--bg); border-color: var(--line-2); }
.sp-seg { border-radius: 999px; background: var(--bg-2); }
.sp-seg button { border-radius: 999px; font-weight: 600; }
.sp-fig { border-radius: 18px; }
.sp-news { border-radius: 18px; background: var(--bg-2); }
.sp-news strong { font: 600 .95rem/1.3 var(--display); }
.sp-big { font: 700 2.1rem/1.1 var(--display); letter-spacing: -.02em; }
.sp-foot, .app-version { display: none; }

/* sheets */
.sp-sheet, .sp-welcome { background: rgba(2, 4, 9, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sp-sheet-box { border-radius: 26px; background: var(--bg-2); border-color: var(--line-2); padding: 18px; }
.sp-welcome-box { border-radius: 30px 30px 0 0; background: radial-gradient(420px 240px at 85% -10%, rgba(255, 154, 46, .16), transparent 70%), var(--bg-2); padding: 28px 20px calc(22px + var(--safe-b)); }
.sp-welcome h2 { font: 700 1.6rem/1.15 var(--display); letter-spacing: -.02em; }
.sheet-card { border-radius: 28px 28px 0 0; background: var(--bg-2); }

/* loading shapes instead of dashes and empty boxes */
.sp-skel { position: relative; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.05); color: transparent !important; min-height: 1em; }
.sp-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%); animation: sp-shim 1.4s linear infinite; }
@keyframes sp-shim { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sp-skel::after { animation: none; } }
.sp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--muted); font-size: .88rem; border: 1px dashed var(--line-2); border-radius: 18px; }
.sp-empty strong { color: var(--fg); font: 600 1rem/1.3 var(--display); }

/* ---------- Sky map: the photo is the screen */
.sky-stage { background: #02030A; border-bottom: 0; }
#view-sky .sky-stage { border-radius: 26px 26px 0 0; }
.sky-where { display: none; }
.sky-top { justify-content: flex-end; padding: 12px 12px 0; }
.sky-tools { gap: 2px; padding: 4px; border-radius: 22px; background: var(--sky-ui); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sky-btn { width: 40px; height: 40px; border: 0; background: none; border-radius: 18px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sky-btn svg { width: 19px; height: 19px; }
.sky-btn:hover { background: none; }
.sky-btn[aria-expanded="true"], .sky-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .12); }
.sky-btn-point, .sky-btn-point:hover { background: var(--accent); }
.sky-btn-point svg { fill: #1B0F00; }
.sky-btn-iss { font: 700 .62rem/1 var(--body); }
.sky-btn-photo { font: 600 .66rem/1 var(--body); }
#sky-night-btn, #sky-full-btn { display: none; }            /* red mode lives in the header; one switch for the whole app */
.sky-hint { top: auto; bottom: 176px; transform: translateX(-50%); }
.sky-hint span { display: none; padding: 8px 14px; background: var(--sky-ui); border-color: var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 500 .78rem/1 var(--body); }
.sky-hint span:last-child { display: block; }
.sky-banner { left: 12px; top: 12px; max-width: calc(100% - 84px); padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--sky-ui); border-color: var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .74rem; text-align: left; flex-wrap: nowrap; }
.sky-banner button { flex: none; font: 600 .72rem/1 var(--body); padding: 7px 11px; white-space: nowrap; }
.sky-toast { border-radius: 999px; background: var(--sky-ui); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .78rem; bottom: 176px; }
.sky-panel { border-radius: 22px; background: rgba(10, 15, 28, .94); border-color: var(--sky-line); top: 12px; }
.iss-strip { left: 12px; right: 12px; bottom: 98px; padding: 10px 12px; border-radius: 18px; background: var(--sky-ui); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .76rem; line-height: 1.4; }
.iss-ico { border-radius: 8px; padding: 4px 6px; font-weight: 700; }
.sky-time { background: linear-gradient(rgba(4,6,12,0), rgba(4,6,12,.92) 45%); padding: 26px 14px 10px !important; }
.sky-time-label strong { font: 600 1.15rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sky-time-label { min-width: 0; flex-wrap: nowrap; white-space: nowrap; }
.sky-time-label > span { white-space: nowrap; }
#sky-time-day { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sky-live { flex: none; }
.sky-tbtn { border-radius: 50%; background: var(--glass-2); border-color: var(--sky-line); }
.sky-now { border-radius: 999px; }
.sky-peek { height: 46px; border-top: 0; background: var(--bg); color: var(--dim); font: 500 .74rem/1.2 var(--body); }
#view-sky .sky-stage { height: calc(100% - 46px); }
.sky-peek-bar { background: rgba(255,255,255,.18); }
.sky-below .sky-hl-head h2 { font: 700 1.5rem/1.15 var(--display); letter-spacing: -.02em; }
.sky-how article { border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.sky-card { border-radius: 22px; background: rgba(10, 15, 28, .92); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* ---------- Tonight score */
.sp-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; margin: 0 0 12px; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(140% 120% at 0% 0%, rgba(111, 214, 255, .1), transparent 55%), var(--bg-2); }
.sp-score-ring { position: relative; width: 96px; height: 96px; }
.sp-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sp-score-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.sp-score-ring .t { stroke: rgba(255,255,255,.07); }
.sp-score-ring .v { stroke: var(--sc, var(--ok)); transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.sp-score-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.9rem/1 var(--display); color: var(--fg); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sp-score h2 { margin: 0 0 4px; font: 600 1.1rem/1.25 var(--display); color: var(--fg); letter-spacing: -.01em; }
.sp-score p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.sp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.sp-facts div { padding: 12px 10px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.sp-facts b { display: block; font: 600 .98rem/1.2 var(--display); color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-facts span { display: block; margin-top: 3px; font-size: .68rem; color: var(--dim); letter-spacing: .04em; }
.sp-counts { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; margin: 0 0 12px; }
.sp-count-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.sp-count-row:first-child { border-top: 0; }
.sp-count-row span { flex: 1; min-width: 0; font-size: .82rem; color: var(--muted); }
.sp-count-row span strong { display: block; color: var(--fg); font: 600 .93rem/1.3 var(--display); }
.sp-count-row b { flex: none; font: 600 .9rem/1 var(--display); color: var(--accent-2); font-variant-numeric: tabular-nums; }

/* ---------- 3D stages (Earth, Universe) */
.sp-stage { position: relative; margin: 0 -16px; height: min(72vh, 620px); min-height: 420px; overflow: hidden; background: #02030A; touch-action: none; user-select: none; -webkit-user-select: none; }
.sp-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.sp-stage-top { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 2; }
.sp-stage-top > * { pointer-events: auto; }
.sp-stage-top h1 { margin: 0; font: 700 1.5rem/1.1 var(--display); letter-spacing: -.025em; color: var(--fg); text-shadow: 0 2px 18px #000; pointer-events: none; }
.sp-stage-top p { margin: 0; font-size: .82rem; color: #C9D1E6; text-shadow: 0 1px 10px #000; pointer-events: none; }
.sp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--sky-line); background: var(--sky-ui); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--fg); font: 500 .78rem/1 var(--body); cursor: pointer; white-space: nowrap; }
.sp-chip[aria-pressed="true"] { background: var(--fg); color: #0A0F1C; border-color: transparent; font-weight: 600; }
.sp-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sp-stage-card { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; padding: 14px; border-radius: 22px; background: rgba(10, 15, 28, .72); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 12px; }
.sp-stage-card .k { font: 500 .62rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sp-stage-card .big { font: 600 1.05rem/1.25 var(--display); color: var(--fg); letter-spacing: -.01em; }
.sp-stage-card .row { display: flex; align-items: center; gap: 12px; }
.sp-stage-card .row > div { flex: 1; min-width: 0; }
.sp-stage-card p { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--text); }
.sp-pill-cta { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px; border: 0; background: var(--accent); color: #1B0F00 !important; font: 600 .8rem/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.sp-pill-ghost { background: var(--glass-2); color: var(--fg) !important; border: 1px solid var(--line-2); }
.sp-stage-card .sp-facts { margin: 0; gap: 6px; }
.sp-stage-card .sp-facts div { padding: 0; border: 0; background: none; }
.sp-stage-card .sp-facts b { font-size: .92rem; }
.sp-zoom { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 20px; background: var(--sky-ui); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sp-zoom button { width: 36px; height: 36px; border: 0; border-radius: 16px; background: none; color: var(--fg); font: 500 1.2rem/1 var(--body); cursor: pointer; }
.sp-zoom button:active { background: rgba(255,255,255,.12); }
.sp-scale { display: flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); overflow-x: auto; scrollbar-width: none; }
.sp-scale::-webkit-scrollbar { display: none; }
.sp-scale button { flex: 1 1 auto; height: 30px; padding: 0 5px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 .66rem/1 var(--body); cursor: pointer; white-space: nowrap; }
.sp-scale button[aria-pressed="true"] { background: var(--fg); color: #0A0F1C; font-weight: 600; }
.sp-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.sp-labels span { position: absolute; left: 0; top: 0; padding: 2px 0; font: 500 .7rem/1 var(--body); color: #E8ECF8; text-shadow: 0 1px 6px #000, 0 0 2px #000; white-space: nowrap; will-change: transform; }
.sp-labels span.dim { color: var(--muted); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.sp-nogl { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); font-size: .9rem; }

/* ---------- passport, share, photo of the day */
.sp-stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.sp-stamp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; border: 1px dashed var(--line-2); background: none; color: var(--dim); font: 500 .74rem/1.25 var(--body); text-align: center; cursor: pointer; }
.sp-stamp i { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--line-2); font: 600 1.1rem/1 var(--display); font-style: normal; color: var(--dim); background-size: cover; background-position: center; }
.sp-stamp.got { border-style: solid; border-color: rgba(255,154,46,.45); background: rgba(255,154,46,.07); color: var(--fg); }
.sp-stamp.got i { border: 2px solid var(--accent); color: var(--accent); box-shadow: 0 0 22px -4px var(--accent); }
.sp-stamp small { color: var(--dim); font-size: .64rem; }
.sp-progress { height: 8px; border-radius: 8px; background: rgba(255,255,255,.07); overflow: hidden; margin: 10px 0 4px; }
.sp-progress i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--accent), #FFD08A); transition: width .6s; }
.sp-sharecard { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); background: #02030A; }
.sp-row { display: flex; gap: 10px; }
.sp-row > * { flex: 1; margin-top: 0 !important; }
.sp-toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 120; padding: 11px 16px; border-radius: 999px; background: rgba(16, 23, 42, .94); border: 1px solid var(--line-2); color: var(--fg); font: 500 .82rem/1.2 var(--body); max-width: calc(100% - 32px); text-align: center; animation: sp-up .3s ease-out; }
.sp-apod { margin: 0 0 12px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.sp-apod img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; background: #02030A; }
.sp-apod figcaption { padding: 14px 16px 16px; font-size: .88rem; line-height: 1.55; color: var(--text); }
.sp-apod figcaption strong { display: block; margin-bottom: 6px; color: var(--fg); font: 600 1.05rem/1.3 var(--display); }
.sp-apod figcaption small { display: block; margin-top: 8px; color: var(--dim); }

/* switches (Alerts) */
.switch input:checked + i, .toggle input:checked + span { background: var(--accent); }

/* 3D Universe: the map fills the screen, "About this map" is below it */
#view-universe.active { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.sp-stage.uni3 { margin: 0; height: calc(100% - 46px); min-height: 480px; border-radius: 26px 26px 0 0; }
.uni-below { background: var(--bg); padding: 0 16px 28px; }
.uni-peek { height: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; color: var(--dim); font: 500 .74rem/1.2 var(--body); }
.uni-peek span { width: 38px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
.uni-timebar { display: flex; align-items: center; gap: 10px; }
.uni-timebar[hidden] { display: none; }
.uni-timebar input { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; }
.uni-timebar .sp-pill-cta { height: 34px; padding: 0 14px; }
.sp-stage-hint { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); z-index: 2; pointer-events: none; padding: 9px 14px; border-radius: 999px; background: var(--sky-ui); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--fg); font: 500 .76rem/1 var(--body); white-space: nowrap; }
.topbar:has(#install-btn:not([hidden])) .top-place span { display: none; }
.topbar:has(#install-btn:not([hidden])) .top-place { padding: 0 10px; }
.card-head .src { max-width: 46%; }
.sw i, .sw input:checked + i { transition: background .2s; }
#view-alerts .sp-row { margin-top: 0; }
#view-alerts .sp-row:has(> [hidden]) { display: none; }

/* ---------- older components brought into the same look */
.hero-t { margin: 0 0 14px; }
.kicker { font: 600 .68rem/1.3 var(--body); letter-spacing: .16em; color: var(--accent); margin: 8px 0 6px; }
.hero-t h1 { font: 700 1.75rem/1.1 var(--display); letter-spacing: -.025em; margin: 0 0 8px; }
.b3 { background: var(--bg-2); border-radius: var(--radius); padding: 16px; }
.b3 .num { width: 30px; height: 30px; font: 600 .9rem/1 var(--display); background: rgba(255,154,46,.16); color: var(--accent); }
.b3 h3 { font: 600 .98rem/1.3 var(--display); letter-spacing: -.01em; }
.b3 p { font-size: .84rem; line-height: 1.5; color: var(--muted); }
.b3 .sky-pill, .b3 .show { margin-top: 10px; border: 0; background: var(--accent); color: #1B0F00; font: 600 .76rem/1 var(--body); padding: 9px 14px; cursor: pointer; }
.btn { border-radius: 999px; font: 600 .9rem/1.2 var(--body); padding: 14px; }
.btn.ghost { border-color: var(--line-2); background: var(--glass-2); color: var(--fg); }
.sw { padding: 13px 0; }
.sw:last-of-type { border-bottom: 0; }
.sw b { font: 600 .93rem/1.3 var(--display); letter-spacing: -.01em; }
.sw small { font-size: .78rem; line-height: 1.4; }
.sw i { background: rgba(255,255,255,.12); }
.credit, .sky-credits { color: var(--dim); font-size: .72rem; line-height: 1.5; }
.sp-list strong { font: 600 .95rem/1.35 var(--display); letter-spacing: -.01em; }
.sp-list span { color: var(--muted); font-size: .86rem; }
.sp-dot { width: 10px; height: 10px; margin-top: 6px; }
.toast2 { border-radius: 999px; }

/* never an empty box: things that have nothing to show yet take no space */
.sp-fig:has(> img:not([src])), .sp-fig figcaption:empty, .sp-strip:empty { display: none; }
.sp-card:has(> .sp-list:empty:only-child), .sp-card:has(> ul:empty:only-child) { display: none; }
img.sp-img-fail { display: none !important; }
.sp-fig:has(> img.sp-img-fail)::before { content: "This picture didn’t load. Check your connection."; display: grid; place-items: center; aspect-ratio: 1; padding: 16px; text-align: center; color: var(--dim); font-size: .8rem; }
[data-status]:not(:empty) { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }

/* ---------- point your phone at the sky: nothing but the sky, the name of what you aim at, and Done */
.is-pointing .iss-strip, .is-pointing .sky-time, .is-pointing .sky-card, .is-pointing .sky-arrow { display: none !important; }
.is-pointing .sky-tools > :not(#sky-point-btn) { display: none; }
.sky-point-ui { bottom: 18px; gap: 12px; z-index: 6; }
.sky-aim { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 10px; width: max-content; max-width: 92vw; min-height: 0; padding: 10px 18px; border-radius: 18px; background: var(--sky-ui); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 600 1.15rem/1.2 var(--display); letter-spacing: -.01em; text-shadow: none; text-align: center; }
.sky-aim:empty { display: none; }
.sky-aim small { display: block; margin-top: 3px; font: 500 .74rem/1.2 var(--body); color: var(--muted); letter-spacing: 0; }
.sky-point-ui p { padding: 9px 14px; border-radius: 999px; background: var(--sky-ui); border: 1px solid var(--sky-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .76rem; color: var(--text); }
#sky-point-exit { min-height: 44px; padding: 0 28px; border: 0; background: var(--accent); color: #1B0F00; font: 600 .9rem/1 var(--body); }

/* ---------- settings: language, units, clock */
.top-lang { flex: none; position: relative; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-2); color: var(--fg); cursor: pointer; }
.top-lang svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.top-lang span { position: absolute; right: -4px; bottom: -3px; padding: 2px 4px; border-radius: 6px; background: var(--accent); color: #1B0F00; font: 700 .5rem/1 var(--body); letter-spacing: .03em; box-shadow: 0 0 0 2px var(--bg); }
html[lang="en"] .top-lang span { display: none; }
.topbar { gap: 8px; }
.top-place { padding: 0 11px 0 10px; gap: 6px; }
.sp-set { align-items: flex-end; padding: 0; }
.sp-set .sp-sheet-box { border-radius: 28px 28px 0 0; max-width: 560px; padding: 18px 18px calc(22px + var(--safe-b)); animation: sp-up .28s cubic-bezier(.2,.8,.2,1); }
.sp-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sp-set-head .sp-sheet-title { margin: 0; font: 700 1.2rem/1.2 var(--display); }
.sp-set-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-2); color: var(--fg); font-size: 1.2rem; cursor: pointer; }
.sp-set-k { margin: 18px 0 8px; font: 600 .66rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sp-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-langs button { height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass-2); color: var(--text); font: 500 .92rem/1 var(--body); cursor: pointer; text-align: left; padding: 0 14px; }
.sp-langs button[aria-pressed="true"] { border-color: rgba(255,154,46,.7); background: rgba(255,154,46,.12); color: var(--fg); font-weight: 600; }
.sp-seg-set { margin: 0; }
.sp-offer { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: 95; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(16, 23, 42, .96); border: 1px solid var(--line-2); color: var(--fg); font: 500 .84rem/1.3 var(--body); box-shadow: 0 18px 40px -18px #000; animation: sp-up .3s ease-out; max-width: 520px; margin: 0 auto; }
.sp-offer span { flex: 1; min-width: 0; }
.sp-offer [data-go] { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent); color: #1B0F00; font: 600 .8rem/1 var(--body); cursor: pointer; }
.sp-offer [data-x] { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }

/* ---------- aurora: the verdict and its meter */
.sp-verdict { margin: 2px 0 0; font: 700 1.55rem/1.15 var(--display); letter-spacing: -.015em; color: var(--fg); }
.sp-meter { display: flex; gap: 5px; margin: 12px 0 14px; max-width: 220px; }
.sp-meter i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.09); transition: background .4s; }
.sp-meter-0 i:first-child { background: #7C88AA; }
.sp-meter-1 i:nth-child(-n+2) { background: var(--accent-2); }
.sp-meter-2 i:nth-child(-n+3) { background: #F2BA55; }
.sp-meter-3 i { background: #57D39A; }
html.red-all .sp-meter i { background: rgba(255,60,60,.15); } html.red-all .sp-meter[class*="sp-meter-"] i:first-child { background: #b33; }

/* ---------- ISS: the photo shown when the live camera is dark */
.vid-wrap:has(.fallback:not([hidden])) .nasa-credit { top: 10px; left: 10px; right: auto; bottom: auto; }
.fb-over { padding: 44px 14px 12px; background: linear-gradient(180deg, transparent, rgba(3,6,14,.55) 30%, rgba(3,6,14,.92)); }
.fb-over .pill { font-size: .6rem; }
.fb-over h3 { margin: 7px 0 3px; font: 700 1.02rem/1.2 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.fb-over p { font-size: .7rem; line-height: 1.35; color: rgba(236,240,255,.78); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#st-over { display: block; } #st-over::first-letter { text-transform: uppercase; }

/* ---------- Hindi and Bengali: letter-spacing breaks joined letters, and capitals don't exist */
html:lang(hi) *, html:lang(bn) * { letter-spacing: normal !important; text-transform: none !important; }
html:lang(hi) .tabbar, html:lang(bn) .tabbar { font-size: 105%; }