/* Sky+ v7.9: the premium layer. Loads after ui.css on every page.
   Only looks and motion live here: no text, so every language gets it. Motion is switched off for anyone who asks their phone for less motion. */

/* ---------- atmosphere: a slow, quiet starfield behind the page content */
.sp-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sp-sky i { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; background-repeat: repeat; }
.sp-sky .a { height: 1800px; background-size: 360px 600px; opacity: .6; animation: sp-tw 7s ease-in-out infinite alternate, sp-dr 110s linear infinite;
  background-image: radial-gradient(1.3px 1.3px at 8% 6%, #dbe4ff, transparent), radial-gradient(1px 1px at 22% 17%, #fff, transparent), radial-gradient(1.5px 1.5px at 41% 9%, #ffd9a8, transparent), radial-gradient(1px 1px at 63% 21%, #cfd9ff, transparent), radial-gradient(1.2px 1.2px at 84% 12%, #fff, transparent),
  radial-gradient(1px 1px at 12% 38%, #cfd9ff, transparent), radial-gradient(1.4px 1.4px at 33% 46%, #fff, transparent), radial-gradient(1px 1px at 57% 41%, #ffd9a8, transparent), radial-gradient(1.2px 1.2px at 76% 48%, #dbe4ff, transparent), radial-gradient(1px 1px at 93% 36%, #fff, transparent),
  radial-gradient(1.3px 1.3px at 6% 71%, #fff, transparent), radial-gradient(1px 1px at 27% 79%, #cfd9ff, transparent), radial-gradient(1.5px 1.5px at 49% 68%, #fff, transparent), radial-gradient(1px 1px at 68% 83%, #ffd9a8, transparent), radial-gradient(1.2px 1.2px at 88% 74%, #dbe4ff, transparent), radial-gradient(1px 1px at 39% 94%, #fff, transparent); }
.sp-sky .b { height: 2280px; background-size: 520px 760px; opacity: .45; animation: sp-tw2 11s ease-in-out infinite alternate, sp-dr2 170s linear infinite;
  background-image: radial-gradient(1.6px 1.6px at 15% 9%, #fff, transparent), radial-gradient(1px 1px at 38% 24%, #ffd9a8, transparent), radial-gradient(1.4px 1.4px at 71% 14%, #cfd9ff, transparent), radial-gradient(1px 1px at 91% 31%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 5% 52%, #cfd9ff, transparent), radial-gradient(1.7px 1.7px at 47% 58%, #fff, transparent), radial-gradient(1px 1px at 82% 63%, #ffd9a8, transparent), radial-gradient(1.3px 1.3px at 24% 86%, #fff, transparent), radial-gradient(1px 1px at 63% 92%, #cfd9ff, transparent); }
@keyframes sp-tw { from { opacity: .3; } to { opacity: .7; } }
@keyframes sp-tw2 { from { opacity: .55; } to { opacity: .25; } }
@keyframes sp-dr { to { transform: translateY(-600px); } }
@keyframes sp-dr2 { to { transform: translateY(-760px); } }

/* ---------- type and cards */
.sp-h1 { font: 700 2.15rem/1.04 var(--display); letter-spacing: -.035em; margin: 0 0 18px; }
.sp-kicker { letter-spacing: .2em; }
.sp-card, .card { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.022)); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.sp-card h2, .card h2 { font: 700 .7rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.sp-card strong { color: var(--fg); }
.sp-btn-main, .btn-main { box-shadow: 0 10px 30px rgba(255,154,46,.28); }
.sp-btn, .sp-hub, .b3 .show, .tabbar a, .top-place, .top-lang, .top-red { transition: transform .18s ease, background .2s, box-shadow .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.sp-btn:active { transform: scale(.97); }
.sp-back { background: rgba(10,14,26,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topbar { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(4,6,12,.94), rgba(4,6,12,.72)); }
.top-place, .top-lang, .top-red { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---------- Explore: photo tiles in place of the plain list */
body[data-page="explore"] .sp-hubs, body[data-page="planets"] .sp-hubs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; background: none; border-radius: 0; overflow: visible; margin-bottom: 18px; }
body[data-page="explore"] .sp-hub, body[data-page="planets"] .sp-hub { position: relative; display: flex; align-items: flex-end; min-height: 158px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; overflow: hidden; background: #0a0f1c; box-shadow: 0 14px 34px rgba(0,0,0,.35); isolation: isolate; }
body[data-page="explore"] .sp-hub::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img, none) center / cover no-repeat; transform: scale(1.06) translateY(var(--py, 0px)); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
body[data-page="explore"] .sp-hub::after, body[data-page="planets"] .sp-hub::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,6,12,.94) 8%, rgba(4,6,12,.35) 52%, rgba(4,6,12,.05)); }
body[data-page="explore"] .sp-hub:active::before { transform: scale(1.12) translateY(var(--py, 0px)); }
body[data-page="explore"] .sp-hub i, body[data-page="explore"] .sp-hub em, body[data-page="planets"] .sp-hub em { display: none; }
body[data-page="explore"] .sp-hub span, body[data-page="planets"] .sp-hub > span { display: block; flex: 1; font: 400 .72rem/1.35 var(--body); color: #c3cadf; }
body[data-page="explore"] .sp-hub strong, body[data-page="planets"] .sp-hub strong { font: 700 .98rem/1.18 var(--display); letter-spacing: -.01em; margin-bottom: 3px; }
body[data-page="explore"] .sp-hub:active, body[data-page="planets"] .sp-hub:active { transform: scale(.97); background: #0a0f1c; }
body[data-page="explore"] .sp-hub:first-child { grid-column: 1 / -1; min-height: 240px; }
body[data-page="explore"] .sp-hub:first-child strong { font-size: 1.45rem; letter-spacing: -.02em; }
body[data-page="explore"] .sp-hub:first-child span { font-size: .84rem; max-width: 30ch; }
body[data-page="explore"] .sp-hub:last-child { grid-column: 1 / -1; min-height: 120px; }
body[data-page="explore"] .sp-hub:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
.sp-hub .sp-new, .sp-new { background: var(--accent); color: #1b0f00; font: 700 .58rem/1 var(--body); padding: 3px 7px; border-radius: 99px; letter-spacing: .05em; vertical-align: 2px; margin-left: 4px; }
.sp-hub[href$="universe.html"] { --img: url(../img/photo/m31.jpg); }
.sp-hub[href$="birthsky.html"] { --img: url(../img/photo/m42.jpg); }
.sp-hub[href$="passport.html"] { --img: url(../img/photo/m45.jpg); }
.sp-hub[href$="photo.html"] { --img: url(../img/photo/m16.jpg); }
.sp-hub[href$="moon.html"] { --img: url(../img/obj/moon.jpg); }
.sp-hub[href$="calendar.html"] { --img: url(../img/photo/m13.jpg); }
.sp-hub[href$="planets.html"] { --img: url(../img/jupiter.jpg); }
.sp-hub[href$="showers.html"] { --img: url(../img/photo/ngc7129.jpg); }
.sp-hub[href$="birthday.html"] { --img: url(../img/saturn.jpg); }
.sp-hub[href$="news.html"] { --img: url(../img/photo/sun.jpg); }
.sp-hub[href$="videos.html"] { --img: url(../img/earth-night.jpg); }
.sp-hub[href$="install.html"] { --img: url(../img/realsky-preview.jpg); }
body[data-page="explore"] .sp-hub[href$="planets.html"]::before { background-position: 50% 38%; }
body[data-page="explore"] .sp-hub[href$="birthday.html"]::before { background-position: 50% 45%; }

/* planets list: each planet is a photo tile */
body[data-page="planets"] .sp-hub { min-height: 176px; }
body[data-page="planets"] .sp-pimg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateY(var(--py, 0px)); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
body[data-page="planets"] .sp-hub:active .sp-pimg { transform: scale(1.2) translateY(var(--py, 0px)); }
body[data-page="planets"] .sp-hub .sp-tag { display: inline-block; margin: 0 0 0 4px; padding: 3px 7px; border-radius: 99px; background: rgba(87,211,154,.16); color: #5fd9a0; font: 700 .58rem/1 var(--body); letter-spacing: .04em; vertical-align: 2px; border: 1px solid rgba(87,211,154,.35); }

/* ---------- one planet: a big, glowing, gently floating hero */
body[data-page="planet"] .sp-planet { position: relative; width: 82%; max-width: 340px; margin: 10px auto 22px; }
body[data-page="planet"] .sp-planet::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,170,80,.26), rgba(255,154,46,.07) 42%, transparent 66%); animation: sp-glow 5s ease-in-out infinite alternate; }
body[data-page="planet"] .sp-planet img { position: relative; filter: drop-shadow(0 0 46px rgba(255,170,100,.28)); animation: sp-float 7s ease-in-out infinite; }
@keyframes sp-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(1.2deg); } }
@keyframes sp-glow { from { opacity: .7; transform: translate(-50%, -50%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
body[data-page="planet"] .sp-lead { text-align: center; font-size: 1.02rem; text-wrap: balance; }
body[data-page="planet"] [data-facts] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body[data-page="planet"] [data-facts] li { display: block; margin: 0; padding: 13px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.04); }
body[data-page="planet"] [data-facts] li:first-child { padding-top: 13px; }
body[data-page="planet"] [data-facts] li:nth-child(1), body[data-page="planet"] [data-facts] li:nth-child(4), body[data-page="planet"] [data-facts] li:nth-child(5) { grid-column: 1 / -1; }
body[data-page="planet"] [data-facts] strong { font: 700 .66rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
body[data-page="planet"] [data-facts] span { font: 600 1.02rem/1.3 var(--display); color: var(--fg); letter-spacing: -.01em; }
body[data-page="planet"] [data-dist] strong { color: var(--accent-2); font-weight: 700; }

/* ---------- Tonight and the Moon */
.sp-score { background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.sp-score-ring { width: 108px; height: 108px; }
.sp-score-ring circle { stroke-width: 8; }
.sp-score-ring .v { stroke: url(#sp-sg); filter: drop-shadow(0 0 6px var(--sc, #5fd9a0)); transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); }
@property --sp-n { syntax: "<integer>"; inherits: true; initial-value: 0; }
.sp-score-ring b { font-size: 0; }
.sp-score-ring b::after { content: counter(spn); counter-reset: spn var(--sp-n); font: 700 2.15rem/1 var(--display); letter-spacing: -.03em; animation: sp-cnt 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sp-cnt { from { --sp-n: 0; } }
.sp-still .sp-score-ring b::after { animation: none; } .sp-still .sp-score-ring .v { transition: none; }
.sp-facts div { background: rgba(255,255,255,.045); border-radius: 18px; }
.sp-facts b { font: 700 1.1rem/1.2 var(--display); }
.b3 { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.022)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.b3::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: -1; background: var(--img, none) center / cover no-repeat; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.b3[data-obj="iss"] { --img: url(../img/photo/iss.jpg); } .b3[data-obj="venus"] { --img: url(../img/venus.jpg); } .b3[data-obj="mars"] { --img: url(../img/mars.jpg); } .b3[data-obj="jupiter"] { --img: url(../img/jupiter.jpg); }
.b3[data-obj="saturn"] { --img: url(../img/saturn.jpg); } .b3[data-obj="mercury"] { --img: url(../img/mercury.jpg); } .b3[data-obj="uranus"] { --img: url(../img/uranus.jpg); } .b3[data-obj="neptune"] { --img: url(../img/neptune.jpg); }
.b3[data-obj="moon"] { --img: url(../img/obj/moon.jpg); } .b3[data-obj="shower"] { --img: url(../img/photo/ngc7129.jpg); }
.b3 .num { background: var(--accent); color: #1b0f00; box-shadow: 0 0 18px rgba(255,154,46,.5); }
.b3 .show { box-shadow: 0 8px 20px rgba(255,154,46,.25); }
.b3 .show:active { transform: scale(.95); }

/* ---------- bottom menu: the highlight glides to the new tab */
.tabbar { position: relative; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: rgba(10,15,28,.8); }
.tabbar a { position: relative; z-index: 1; }
.tabbar a.on { background: none; }
.sp-pill { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08); z-index: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1); }
.tabbar a:active { transform: scale(.94); }

/* ---------- things appear as you reach them */
.sp-rv { opacity: 0; transform: translateY(24px) scale(.985); transition: opacity .65s ease, transform .75s cubic-bezier(.2,.8,.2,1); transition-delay: var(--rd, 0s); }
.sp-rv.sp-in { opacity: 1; transform: none; }

/* ---------- red night mode keeps the stars red too */
html.red-all .sp-sky { filter: sepia(1) saturate(6) hue-rotate(-35deg); }
html.red-all .sp-score-ring .v { filter: none; }

/* ---------- less motion, when the phone asks for it */
@media (prefers-reduced-motion: reduce) {
  .sp-sky i, body[data-page="planet"] .sp-planet::before, body[data-page="planet"] .sp-planet img, .sp-score-ring b::after { animation: none !important; }
  .sp-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sp-pill, .sp-score-ring .v, body[data-page="explore"] .sp-hub::before, body[data-page="planets"] .sp-pimg { transition: none !important; }
}
body[data-page="planet"] .sp-planet img { mix-blend-mode: normal; }

/* =====================================================================
   v7.9b: premium buttons, one system for the whole app
   glass buttons with a light edge, gold primary buttons, springy press, a menu that glows
   ===================================================================== */
:root {
  --pr-edge: linear-gradient(160deg, rgba(255,255,255,.36), rgba(255,255,255,.07) 40%, rgba(255,154,46,.26));
  --pr-glass: linear-gradient(180deg, rgba(40,49,76,.97), rgba(18,23,40,.97));
  --pr-gold: linear-gradient(180deg, #ffc47c 0%, #ff9f33 46%, #f27d10 100%);
  --pr-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- glass buttons: secondary, header, round icons, close */
.sp-btn-ghost, .btn.ghost, .sp-pill-ghost, .sp-back, .sky-tbtn, .sky-x, .sheet-x, .sky-pill:not(.sky-pill-accent), .sky-chip, .ghost-btn,
.top-place, .top-lang, .top-red, .topbar:has(.top-place) .top-red {
  border: 1px solid transparent !important;
  background: var(--pr-glass) padding-box, var(--pr-edge) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 8px 22px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .35s var(--pr-spring), box-shadow .25s, filter .25s;
}
.sp-btn-ghost:active, .btn.ghost:active, .sp-pill-ghost:active, .sp-back:active, .sky-tbtn:active, .sky-x:active, .sheet-x:active, .sky-pill:active, .sky-chip:active,
.top-place:active, .top-lang:active, .top-red:active { transform: scale(.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.3); filter: brightness(1.12); }
.top-red.on, .top-red[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255,70,70,.3), rgba(255,70,70,.1)) padding-box, var(--pr-edge) border-box !important; box-shadow: 0 0 20px rgba(255,70,70,.35), inset 0 1px 0 rgba(255,255,255,.15); }

/* ---- primary buttons: polished gold */
.sp-btn-main, .btn:not(.ghost), .sp-pill-cta:not(.sp-pill-ghost), .b3 .show, .sky-pill-accent, .plan-pill, .sky-btn-point {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--pr-gold) !important; color: #1b0f00 !important; border: 1px solid rgba(255,222,176,.65) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.3); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(150,62,0,.3), 0 10px 26px rgba(255,140,30,.34), 0 2px 0 rgba(0,0,0,.25) !important;
  transition: transform .35s var(--pr-spring), box-shadow .25s, filter .25s;
}
.sp-btn-main:active, .btn:not(.ghost):active, .sp-pill-cta:not(.sp-pill-ghost):active, .b3 .show:active, .sky-pill-accent:active, .plan-pill:active, .sky-btn-point:active {
  transform: scale(.96); filter: brightness(.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(150,62,0,.3), 0 4px 12px rgba(255,140,30,.3) !important;
}
.sp-btn-main::after, .btn:not(.ghost)::after, .sp-pill-cta:not(.sp-pill-ghost)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: pr-sheen 6s ease-in-out infinite;
}
@keyframes pr-sheen { 0%, 70% { left: -70%; } 100% { left: 140%; } }
.plan-pill { color: #1b0f00 !important; }

/* ---- the bottom menu */
.tabbar {
  border: 1px solid transparent !important; border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(26,33,54,.94), rgba(9,13,24,.95)) padding-box, var(--pr-edge) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 -6px 30px rgba(255,154,46,.05), 0 18px 44px rgba(0,0,0,.6);
}
.tabbar a { gap: 5px; font: 600 .64rem/1 var(--body); letter-spacing: .015em; color: #7e8bab; transition: color .25s, transform .4s var(--pr-spring); }
.tabbar a svg { width: 22px; height: 22px; stroke-width: 1.8; transition: transform .45s var(--pr-spring), filter .3s, fill .3s; }
.tabbar a.on { color: #fff; }
.tabbar a.on svg { fill: rgba(255,154,46,.2); filter: drop-shadow(0 0 7px rgba(255,154,46,.75)); transform: translateY(-1px) scale(1.1); }
.tabbar a:active { transform: scale(.9); }
.tabbar a:active svg { transform: scale(.88); }
.sp-pill {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px rgba(0,0,0,.4), 0 0 26px rgba(255,154,46,.16);
}
.sp-pill::after { content: ""; position: absolute; left: 50%; top: -1px; width: 24px; height: 3px; margin-left: -12px; border-radius: 0 0 4px 4px; background: var(--accent); box-shadow: 0 0 12px var(--accent), 0 0 3px #fff; }

/* ---- the map's side buttons and time controls */
.sky-tools { background: linear-gradient(180deg, rgba(26,33,54,.95), rgba(10,14,26,.95)) padding-box, var(--pr-edge) border-box !important; border: 1px solid transparent !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 34px rgba(0,0,0,.5); }
.sky-btn { transition: transform .35s var(--pr-spring), background .25s, box-shadow .25s; }
.sky-btn:not(.sky-btn-point):active { transform: scale(.9); }
.sky-btn[aria-expanded="true"]:not(.sky-btn-point), .sky-btn[aria-pressed="true"]:not(.sky-btn-point) { background: linear-gradient(180deg, rgba(255,154,46,.3), rgba(255,154,46,.1)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px rgba(255,154,46,.28); }
.sky-btn-point svg { fill: #1b0f00; }
.sky-play { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 20px rgba(255,154,46,.25), 0 8px 22px rgba(0,0,0,.3); }

/* ---- tab chips and switches between two choices */
.sp-seg, .seg { background: linear-gradient(180deg, #121830, #0b0f1e) padding-box, var(--pr-edge) border-box !important; border: 1px solid transparent !important; box-shadow: inset 0 2px 8px rgba(0,0,0,.35); }
.sp-seg button, .seg button { transition: transform .3s var(--pr-spring), background .25s, color .25s; }
.sp-seg button[aria-pressed="true"], .seg button.on, .seg button[aria-pressed="true"] { background: var(--pr-gold) !important; color: #1b0f00 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(255,140,30,.35); text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.sp-seg button:active { transform: scale(.95); }
.sp-chip { border: 1px solid transparent; background: var(--pr-glass) padding-box, var(--pr-edge) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.3); transition: transform .35s var(--pr-spring), box-shadow .25s; }
.sp-chip[aria-pressed="true"] { background: linear-gradient(180deg, #ffffff, #d9e1f5) padding-box, var(--pr-edge) border-box; color: #0a0f1c; box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(190,205,255,.25); }
.sp-chip:active { transform: scale(.94); }

/* ---- on/off switches */
.sw i, .switch i, .toggle span { box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
.sw input:checked + i, .switch input:checked + i, .toggle input:checked + span { background: var(--pr-gold) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 16px rgba(255,140,30,.4); }
.sw i::after, .switch i::after { box-shadow: 0 2px 6px rgba(0,0,0,.45); }

/* ---- a clear ring for keyboard and screen-reader users */
a:focus-visible, button:focus-visible, .sp-hub:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sp-btn-main::after, .btn:not(.ghost)::after, .sp-pill-cta::after { animation: none !important; display: none; }
  .tabbar a, .tabbar a svg, .sp-btn, .sky-btn, .sp-chip, .sp-seg button { transition: none !important; }
}

/* ---------- 3D Universe: deep space behind the scene, glowing labels */
#uni-stage { background: radial-gradient(760px 520px at 12% 8%, rgba(96,70,190,.34), transparent 62%), radial-gradient(640px 460px at 92% 62%, rgba(255,120,60,.16), transparent 64%), radial-gradient(700px 520px at 40% 112%, rgba(40,100,220,.26), transparent 62%), #02030a; }
#uni-stage > canvas { z-index: 1; }
.sp-labels span { padding: 3px 8px; border-radius: 99px; background: rgba(6,9,20,.5); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 600; text-shadow: none; }
.sp-labels span.dim { background: rgba(6,9,20,.35); border-color: rgba(255,255,255,.06); font-weight: 500; }

/* =====================================================================
   v7.10: every remaining page, one by one
   ===================================================================== */

/* ---- forms: glass fields with a warm glow when you type */
.sp-input, input[type="date"], input[type="time"], input[type="text"], input[type="search"], input[type="number"], select {
  border: 1px solid transparent !important; border-radius: 16px !important; color: var(--fg); min-height: 48px;
  background: linear-gradient(180deg, #121830, #0b0f1e) padding-box, var(--pr-edge) border-box !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.35); transition: box-shadow .25s;
}
.sp-input:focus, input:focus-visible, select:focus-visible { outline: none; box-shadow: inset 0 2px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(255,154,46,.3), 0 0 26px rgba(255,154,46,.18); }
.sp-label { font: 700 .68rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sp-empty { border-radius: 22px; border: 1px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.03); }

/* ---- reusable: cards in a list become separate glass tiles */
[data-showers-list] li, [data-asteroids] li, .sp-launches .sp-launch {
  gap: 12px; margin: 0 0 10px; padding: 14px 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; list-style: none;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.022)); box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
[data-showers-list] li:first-child, [data-asteroids] li:first-child { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.sp-card:has(> [data-showers-list]), .sp-card:has(> [data-asteroids]), .sp-card:has(> .sp-launches) { background: none; border: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-showers-list] strong, [data-asteroids] strong, .sp-launch strong { font: 700 1.02rem/1.25 var(--display); letter-spacing: -.01em; color: var(--fg); }
[data-showers-list] .sp-dot { box-shadow: 0 0 14px currentColor; }
.sp-tag { border-radius: 99px; }
.sp-tag-ok { background: rgba(87,211,154,.14) !important; color: #5fd9a0 !important; border: 1px solid rgba(87,211,154,.35); }
.sp-launch .sp-count { display: block; margin: 6px 0 4px; font: 700 1.25rem/1.1 var(--display); letter-spacing: -.02em; color: var(--accent-2); text-shadow: 0 0 22px rgba(255,154,46,.35); font-variant-numeric: tabular-nums; }

/* ---- a soft glow at the top of some pages */
body[data-page="aurora"] .sp-main, body[data-page="launches"] .sp-main, body[data-page="sun"] .sp-main, body[data-page="install"] .sp-main { position: relative; isolation: isolate; }
body[data-page="aurora"] .sp-main::before { content: ""; position: absolute; z-index: -1; left: -30px; right: -30px; top: -20px; height: 360px; pointer-events: none; filter: blur(26px); opacity: .55;
  background: radial-gradient(180px 120px at 22% 40%, rgba(60,255,170,.55), transparent 70%), radial-gradient(220px 140px at 58% 28%, rgba(60,200,255,.4), transparent 72%), radial-gradient(200px 130px at 88% 48%, rgba(170,90,255,.45), transparent 70%);
  animation: sp-aur 14s ease-in-out infinite alternate; }
@keyframes sp-aur { from { transform: translateX(-4%) skewX(-4deg); opacity: .4; } to { transform: translateX(5%) skewX(4deg); opacity: .68; } }
body[data-page="launches"] .sp-main::before { content: ""; position: absolute; z-index: -1; left: -30px; right: -30px; top: -20px; height: 300px; pointer-events: none; opacity: .6;
  background: radial-gradient(360px 160px at 50% 118%, rgba(255,140,40,.5), transparent 70%), radial-gradient(240px 120px at 80% 10%, rgba(90,110,255,.22), transparent 70%); }
body[data-page="install"] .sp-main::before { content: ""; position: absolute; z-index: -1; left: -30px; right: -30px; top: -20px; height: 280px; pointer-events: none; opacity: .5; background: radial-gradient(320px 180px at 80% 0, rgba(255,154,46,.35), transparent 70%); }

/* ---- aurora: glowing chart bars and verdict */
.sp-bar { border-radius: 8px 8px 3px 3px; box-shadow: 0 0 14px -2px currentColor; }
.sp-hero-card { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.sp-verdict { background: linear-gradient(90deg, #fff, #cfe6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- the Moon: a big glowing Moon */
.moon-hero { position: relative; overflow: hidden; flex-direction: column !important; align-items: center; text-align: center; gap: 14px; padding: 24px 16px 18px !important; }
.moon-hero::before { content: ""; position: absolute; left: 50%; top: -20px; width: 380px; height: 380px; margin-left: -190px; pointer-events: none; background: radial-gradient(circle, rgba(255,232,190,.22), rgba(255,154,46,.05) 46%, transparent 68%); animation: sp-glow 6s ease-in-out infinite alternate; }
.moon-photo { position: relative; flex: none !important; max-width: none !important; filter: drop-shadow(0 0 38px rgba(255,235,200,.28)); animation: sp-float 9s ease-in-out infinite; }
.moon-facts { position: relative; width: 100%; grid-template-columns: 1fr 1fr; text-align: left; }
.moon-facts div { padding: 12px 13px; border-radius: 16px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.moon-facts b { font: 700 1.1rem/1.2 var(--display); letter-spacing: -.01em; }
.moon-grid div { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.sp-cal-d.sp-today { background: var(--pr-gold); color: #1b0f00; box-shadow: 0 0 16px rgba(255,154,46,.4); border-radius: 50%; }
.supermoon { color: var(--accent-2); }

/* ---- the Sun: a glowing hero, and the four pictures as tiles */
.sp-sunhero { position: relative; width: 74%; max-width: 300px; margin: 6px auto 20px; }
.sp-sunhero::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,190,80,.4), rgba(255,120,30,.1) 44%, transparent 68%); animation: sp-glow 4.5s ease-in-out infinite alternate; }
.sp-sunhero img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 50px rgba(255,160,50,.45)); animation: sp-float 8s ease-in-out infinite; }
.sp-grid2 { gap: 12px; }
.sp-fig { margin: 0; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: #05070c; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.sp-fig img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; display: block; background: radial-gradient(circle, #301505, #05070c 70%); }
.sp-fig figcaption { padding: 11px 12px 13px; font: 400 .72rem/1.4 var(--body); color: #b9c1d8; }
.sp-fig strong { display: block; color: var(--fg); font: 700 .86rem/1.25 var(--display); margin-bottom: 3px; }

/* ---- the Space Station page */
.vid-wrap { border: 1px solid transparent; background: #05070c padding-box, var(--pr-edge) border-box; box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 60px rgba(255,154,46,.1); }
.stats div { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 12px 8px; }
.stats b { font: 700 1.05rem/1.2 var(--display); letter-spacing: -.01em; }
.passes li { border-bottom-color: rgba(255,255,255,.07); }
.tag.go, .tag.ok { background: rgba(87,211,154,.14); color: #5fd9a0; border: 1px solid rgba(87,211,154,.35); border-radius: 99px; }
.card-head h2 { font: 700 .72rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---- Alerts: Kp now */
.kp-big { font: 700 2.6rem/1 var(--display); letter-spacing: -.04em; text-shadow: 0 0 28px currentColor; }
.kp-bars i { border-radius: 6px 6px 2px 2px; box-shadow: 0 0 12px -2px currentColor; }

/* ---- Calendar: each event is a tile with a coloured edge */
.cal li { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 20px !important; padding: 14px 14px 14px 18px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.022)); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.cal li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.cal li.cal-shower::before { background: #63d3ff; box-shadow: 0 0 12px #63d3ff; } .cal li.cal-moon::before { background: #ede6d3; box-shadow: 0 0 12px #ede6d3; } .cal li.cal-planet::before { background: #ff8a5c; box-shadow: 0 0 12px #ff8a5c; } .cal li.cal-eclipse::before { background: #ff5d7a; box-shadow: 0 0 12px #ff5d7a; }
.cal-date { width: 52px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.cal-date b { font-size: 1.45rem; }
.cal-body h3 { font: 700 .98rem/1.25 var(--display); letter-spacing: -.01em; }

/* ---- Passport: medals */
.sp-stamp { border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-radius: 20px; transition: transform .35s var(--pr-spring); }
.sp-stamp:active { transform: scale(.94); }
.sp-stamp i { background-size: cover; background-position: center; }
.sp-stamp.got { border-color: rgba(255,154,46,.5); background: linear-gradient(160deg, rgba(255,154,46,.16), rgba(255,154,46,.04)); box-shadow: 0 0 26px -6px rgba(255,154,46,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.sp-stamp.got i { border: 2px solid var(--accent); box-shadow: 0 0 24px -2px var(--accent); }
.sp-progress { height: 10px; box-shadow: inset 0 2px 5px rgba(0,0,0,.4); }
.sp-progress i { background: var(--pr-gold); box-shadow: 0 0 14px rgba(255,154,46,.5); }

/* ---- Install: gold steps */
.sp-steps li::before { background: var(--pr-gold); color: #1b0f00; font-weight: 700; border: 1px solid rgba(255,222,176,.6); box-shadow: 0 0 16px rgba(255,154,46,.35); }
.sp-done { background: linear-gradient(160deg, rgba(87,211,154,.14), rgba(255,255,255,.03)); border-color: rgba(87,211,154,.3); }

/* ---- News and the photo of the day: image cards */
.sp-newslist { display: grid; gap: 14px; }
.sp-news { display: block; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.022)); box-shadow: 0 16px 40px rgba(0,0,0,.35); transition: transform .35s var(--pr-spring); }
.sp-news:active { transform: scale(.98); }
.sp-news img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sp-news span { display: block; padding: 14px 16px 16px; }
.sp-news em { display: block; font: 700 .66rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-style: normal; margin-bottom: 6px; }
.sp-news strong { display: block; font: 700 1.08rem/1.25 var(--display); letter-spacing: -.01em; color: var(--fg); margin-bottom: 5px; }
#apod img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 60px rgba(120,140,255,.12); }
#apod h2 { font: 700 1.35rem/1.2 var(--display); letter-spacing: -.02em; }

/* ---- Voyager */
.voyager-model-card { overflow: hidden; background: radial-gradient(420px 260px at 20% 0, rgba(90,70,190,.35), transparent 62%), radial-gradient(360px 240px at 90% 100%, rgba(255,120,60,.18), transparent 64%), #04060d; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.sp-big.sp-mono { text-shadow: 0 0 26px rgba(255,154,46,.3); }

/* ---- Videos and the Earth page: photo tiles, like Explore */
body[data-page="videos"] .sp-hubs, body[data-page="live"] .sp-hubs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; background: none; border-radius: 0; overflow: visible; margin-bottom: 18px; }
body[data-page="videos"] .sp-hub, body[data-page="live"] .sp-hub { position: relative; display: flex; align-items: flex-end; min-height: 150px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; overflow: hidden; background: #0a0f1c; box-shadow: 0 14px 34px rgba(0,0,0,.35); isolation: isolate; }
body[data-page="videos"] .sp-hub::before, body[data-page="live"] .sp-hub::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img, none) center / cover no-repeat; transform: scale(1.06); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
body[data-page="videos"] .sp-hub::after, body[data-page="live"] .sp-hub::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,6,12,.94) 8%, rgba(4,6,12,.35) 52%, rgba(4,6,12,.05)); }
body[data-page="videos"] .sp-hub i, body[data-page="videos"] .sp-hub em, body[data-page="live"] .sp-hub i, body[data-page="live"] .sp-hub em { display: none; }
body[data-page="videos"] .sp-hub span, body[data-page="live"] .sp-hub span { display: block; flex: 1; font: 400 .72rem/1.35 var(--body); color: #c3cadf; }
body[data-page="videos"] .sp-hub strong, body[data-page="live"] .sp-hub strong { font: 700 .98rem/1.18 var(--display); letter-spacing: -.01em; margin-bottom: 3px; }
body[data-page="videos"] .sp-hub:active, body[data-page="live"] .sp-hub:active { transform: scale(.97); background: #0a0f1c; }
body[data-page="videos"] .sp-hubs { grid-template-columns: 1fr; } body[data-page="videos"] .sp-hub { min-height: 190px; }
body[data-page="videos"] .sp-hub[href*="facebook.com"] { --img: linear-gradient(140deg, rgba(24,119,242,.5), rgba(90,45,168,.45)), url(../img/photo/m42.jpg); }
body[data-page="videos"] .sp-hub[href*="youtube.com"] { --img: linear-gradient(140deg, rgba(196,18,31,.5), rgba(27,10,51,.4)), url(../img/photo/m16.jpg); }
body[data-page="live"] .sp-hub[href$="iss.html"] { --img: url(../img/photo/iss.jpg); } body[data-page="live"] .sp-hub[href$="aurora.html"] { --img: radial-gradient(260px 120px at 30% 40%, rgba(60,255,170,.75), transparent 70%), radial-gradient(260px 120px at 80% 30%, rgba(170,90,255,.7), transparent 70%), #061826; }
body[data-page="live"] .sp-hub[href$="launches.html"] { --img: radial-gradient(300px 140px at 50% 110%, rgba(255,150,50,.85), transparent 70%), linear-gradient(#0a1230, #1b0f28); } body[data-page="live"] .sp-hub[href$="asteroids.html"] { --img: url(../img/mercury.jpg); }
body[data-page="live"] .sp-hub[href$="sun.html"] { --img: url(../img/photo/sun.jpg); } body[data-page="live"] .sp-hub[href$="earth.html"] { --img: url(../img/earth-day.jpg); } body[data-page="live"] .sp-hub[href$="live.html"] { --img: url(../img/earth-night.jpg); }
body[data-page="live"] .sp-hub:first-child { grid-column: 1 / -1; min-height: 190px; }
.sp-stage-card { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: linear-gradient(160deg, rgba(26,33,54,.88), rgba(9,13,24,.9)) padding-box, var(--pr-edge) border-box; border: 1px solid transparent; box-shadow: 0 20px 50px rgba(0,0,0,.5); }

/* ---- the sky map: the Station line and the time bar */
.iss-strip { background: linear-gradient(160deg, rgba(26,33,54,.88), rgba(9,13,24,.9)) padding-box, var(--pr-edge) border-box !important; border: 1px solid transparent !important; border-radius: 16px !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.iss-ico { background: var(--pr-gold) !important; color: #1b0f00 !important; box-shadow: 0 0 14px rgba(255,154,46,.5); }
.sky-time-label strong { font-size: 1.35rem; letter-spacing: -.02em; }
.sky-live.on { box-shadow: 0 0 14px rgba(87,211,154,.3); }
#sky-slider { accent-color: #ff9a2e; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="aurora"] .sp-main::before, .moon-hero::before, .moon-photo, .sp-sunhero::before, .sp-sunhero img { animation: none !important; }
  .sp-news, .sp-stamp { transition: none !important; }
}

[data-showers-list] li, [data-asteroids] li { display: flex; }
.sp-launches .sp-launch { display: block; }