/* astro.fcc.cc — styles (v2 visual redesign) */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/shared/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lilex';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/shared/fonts/lilex-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF;
}

/* ─── Deep Space Palette ─── */
:root {
  --bg: #080b16;
  --bg-grad: radial-gradient(ellipse 120% 80% at 50% 20%, #0f1535 0%, #080b16 70%);
  --panel: rgba(14,18,40,.65);
  --panel-solid: #0e1228;
  --panel-2: #161a30;
  --text: #e8edf5;
  --text-dim: #7b85a0;
  --accent: #a5b4fc;
  --accent-2: #c7d2fe;
  --border: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.04);
  --green: #34d399;
  --yellow: #fbbf24;
  --orange: #fb923c;
  --red: #f87171;
  --blue: #60a5fa;
  --purple: #a78bfa;
  --cyan: #22d3ee;
  --gold: #fdb813;
  --mono: 'Lilex', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
html { scrollbar-gutter: stable both-edges; overflow-y: scroll; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}

/* Skip link */
.skip-link {
  position: absolute; top: -999px; left: 0;
  padding: .5rem 1rem; background: var(--accent); color: #000; z-index: 99999;
}
.skip-link:focus { top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ─── Header ─── */
.site-header {
  display: flex; flex-direction: column; gap: .65rem;
  padding-top: calc(3.2rem + env(safe-area-inset-top, 0px));
}
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10001; padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(180deg, rgba(8,11,22,.97), rgba(8,11,22,.88));
  backdrop-filter: saturate(120%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-content {
  max-width: 1100px; margin: 0 auto; padding: .65rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  font-family: var(--mono); font-size: 1rem; font-weight: 600;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--accent); }

/* ─── Container ─── */
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1.5rem; }

/* ─── Search / Location ─── */
.utility-row { margin-bottom: 1.25rem; }
.search-row {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; position: relative;
}
.search-input-wrap { position: relative; flex: 1; min-width: 180px; }
.search-input-wrap input {
  width: 100%; padding: .6rem .85rem;
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: .6rem;
  font-size: .95rem; font-family: inherit; outline: none;
  transition: border-color .2s, background .2s;
}
.search-input-wrap input:focus {
  border-color: rgba(165,180,252,.4);
  background: rgba(255,255,255,.06);
}
.clear-input-btn {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-dim); font-size: 1.2rem; cursor: pointer; padding: .2rem;
}
.typeahead {
  position: absolute; top: 100%; left: 0; right: 0;
  list-style: none; margin: .25rem 0 0; padding: 0;
  background: var(--panel-solid); border: 1px solid rgba(255,255,255,.1);
  border-radius: .6rem; max-height: 200px; overflow-y: auto; z-index: 100; display: none;
  backdrop-filter: blur(16px);
}
.typeahead.open { display: block; }
.typeahead li { padding: .55rem .85rem; cursor: pointer; font-size: .9rem; transition: background .15s; }
.typeahead li:hover,
.typeahead li[aria-selected="true"] { background: rgba(255,255,255,.06); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .58rem 1rem; min-height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color: var(--text); border: 1px solid rgba(255,255,255,.1);
  border-radius: .6rem; font-family: inherit; font-size: .9rem;
  cursor: pointer; white-space: nowrap;
  transition: background .18s, border-color .18s, transform .15s;
}
.btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.18); transform: translateY(-1px);
}
.btn-inline { background: transparent; border-color: var(--border); }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; min-height: 0; }
.btn-large {
  padding: .85rem 2.5rem; font-size: 1.05rem; font-weight: 600;
  background: linear-gradient(135deg, rgba(165,180,252,.12), rgba(165,180,252,.04));
  border: 1px solid rgba(165,180,252,.3); color: var(--accent);
  border-radius: .8rem;
}
.btn-large:hover {
  background: linear-gradient(135deg, rgba(165,180,252,.18), rgba(165,180,252,.08));
  border-color: rgba(165,180,252,.5);
  box-shadow: 0 0 24px rgba(165,180,252,.12);
}

/* ─── Cards (Glassmorphism) ─── */
.card {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.35rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  /* Staggered reveal animation */
  opacity: 0;
  transform: translateY(12px);
  animation: cardReveal .5s ease forwards;
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12);
}

/* Card accent top lines */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-accent, rgba(165,180,252,.3)), transparent);
  opacity: .7;
}

/* Per-card accent colors */
#planetsCard  { --card-accent: rgba(165,180,252,.5); }
#solarCard    { --card-accent: rgba(251,184,19,.5); }
#auroraCard   { --card-accent: rgba(52,211,153,.5); }
#neoCard      { --card-accent: rgba(251,146,60,.5); }
#issCard      { --card-accent: rgba(34,211,238,.5); }
#apodCard     { --card-accent: rgba(167,139,250,.5); }
#sunCard      { --card-accent: rgba(251,184,19,.5); }
#eventsCard   { --card-accent: rgba(165,180,252,.4); }
#meteorCard   { --card-accent: rgba(96,165,250,.5); }
#coronaCard   { --card-accent: rgba(251,184,19,.4); }
#epicCard     { --card-accent: rgba(96,165,250,.5); }
#webcamCard   { --card-accent: rgba(167,139,250,.4); }
#vtCard       { --card-accent: rgba(52,211,153,.4); }
#stlCard      { --card-accent: rgba(199,210,254,.4); }
#allskyCard   { --card-accent: rgba(34,211,238,.4); }


/* Staggered animation delays */
.dashboard-grid .card:nth-child(1)  { animation-delay: 0s; }
.dashboard-grid .card:nth-child(2)  { animation-delay: .06s; }
.dashboard-grid .card:nth-child(3)  { animation-delay: .12s; }
.dashboard-grid .card:nth-child(4)  { animation-delay: .18s; }
.dashboard-grid .card:nth-child(5)  { animation-delay: .24s; }
.dashboard-grid .card:nth-child(6)  { animation-delay: .30s; }
.dashboard-grid .card:nth-child(7)  { animation-delay: .36s; }
.dashboard-grid .card:nth-child(8)  { animation-delay: .42s; }
.dashboard-grid .card:nth-child(9)  { animation-delay: .48s; }
.dashboard-grid .card:nth-child(10) { animation-delay: .54s; }
.dashboard-grid .card:nth-child(11) { animation-delay: .60s; }
.dashboard-grid .card:nth-child(12) { animation-delay: .66s; }
.dashboard-grid .card:nth-child(13) { animation-delay: .72s; }
.dashboard-grid .card:nth-child(14) { animation-delay: .78s; }
.dashboard-grid .card:nth-child(15) { animation-delay: .84s; }
.dashboard-grid .card:nth-child(16) { animation-delay: .90s; }

@keyframes cardReveal {
  to { opacity: 1; transform: translateY(0); }
}

.card-title {
  font-size: .9rem; font-weight: 600;
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .5rem;
  text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255,255,255,.7);
}
.card-subtitle {
  font-size: .8rem; font-weight: 600;
  margin: 1rem 0 .5rem; color: var(--text-dim);
}

/* ─── Dashboard grid ─── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.1rem;
  margin-top: 1.1rem;
}
.card--wide { grid-column: 1 / -1; }

/* ─── Community uploads card ─── */
.card-title-link {
  float: right;
  font-size: .8rem;
  font-weight: 500;
  color: var(--accent, #c7d2fe);
  text-decoration: none;
  letter-spacing: .02em;
}
.card-title-link:hover { color: #fff; text-decoration: underline; }
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .8rem;
  margin-top: .8rem;
}
.community-tile {
  display: block;
  position: relative;
  border-radius: .55rem;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: inherit;
  transition: transform .15s, border-color .15s;
}
.community-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(245,215,122,0.4);
}
.community-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.community-tile-caption {
  padding: .55rem .65rem .65rem;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.85));
  position: absolute;
  inset: auto 0 0 0;
  pointer-events: none;
}
.community-tile-name {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
.community-tile-meta {
  display: block;
  font-size: .68rem;
  color: rgba(255,255,255,0.7);
  margin-top: .15rem;
  letter-spacing: .02em;
}

/* ─── Placeholder / loading ─── */
.placeholder { color: var(--text-dim); font-size: .9rem; margin: 0; }

/* ─── Age badge (live pulse) ─── */
.age-badge {
  font-family: var(--mono); font-size: .65rem;
  padding: .15rem .45rem; border-radius: 999px;
  background: rgba(52,211,153,.12);
  color: var(--green); font-weight: 500;
  animation: livePulse 2.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: .7; box-shadow: 0 0 0 0 rgba(52,211,153,0); }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(52,211,153,.2); }
}

/* ═══════════════════════════════════════════
   HERO SECTION — Ambient Star Field + Glass
   ═══════════════════════════════════════════ */
.hero-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: .5rem;
}

/* Star field canvas behind hero */
#starField {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* Gradient sky overlay */
.hero-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(30,40,80,.3), transparent 70%),
    linear-gradient(180deg, rgba(8,11,22,0) 0%, rgba(8,11,22,.6) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-card {
  position: relative;
  z-index: 2;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(14,18,40,.55), rgba(14,18,40,.35));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  /* Hero always visible (no stagger delay) */
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.hero-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2.5rem;
  align-items: center;
}

/* ─── SVG Moon Phase ─── */
.hero-moon {
  text-align: center;
  min-width: 140px;
}
.moon-svg-wrap {
  width: 110px; height: 110px;
  margin: 0 auto .75rem;
  filter: drop-shadow(0 0 12px rgba(200,210,240,.2));
}
.moon-svg-wrap svg {
  width: 100%; height: 100%;
}
/* Hide old emoji glyph */
.moon-glyph { display: none; }
.moon-name {
  font-size: 1.05rem; font-weight: 600;
  color: var(--text);
}
.moon-illum {
  font-family: var(--mono);
  font-size: .85rem; color: var(--text-dim); margin-top: .25rem;
}

/* ─── Sun & Twilight ─── */
.section-label {
  font-size: .75rem; font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 .75rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.times-grid {
  display: grid; grid-template-columns: auto auto;
  gap: .35rem .85rem; font-size: .9rem;
}
.time-label { color: var(--text-dim); }
.time-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ─── Darkness Window ─── */
.hero-darkness {
  text-align: center; min-width: 140px;
}
.darkness-label {
  font-size: .75rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .3rem;
}
.darkness-value {
  font-family: var(--mono);
  font-size: 2.2rem; font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(165,180,252,.15);
}
.darkness-range {
  font-family: var(--mono);
  font-size: .8rem; color: var(--text-dim);
  margin-top: .3rem;
}

/* ═══════════════════════
   PLANETS — Altitude Bars
   ═══════════════════════ */
.planets-list {
  display: flex; flex-direction: column; gap: .35rem;
}
.planet-row {
  display: grid;
  grid-template-columns: 2rem 6rem 1fr 3.5rem;
  gap: .5rem;
  align-items: center;
  padding: .5rem .4rem;
  border-radius: .5rem;
  transition: background .15s;
}
.planet-row:hover { background: rgba(255,255,255,.03); }
.planet-symbol { font-size: 1.1rem; text-align: center; }
.planet-info { display: flex; flex-direction: column; }
.planet-name { font-weight: 600; font-size: .9rem; }
.planet-detail { font-size: .75rem; color: var(--text-dim); }

/* Altitude bar */
.planet-alt-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.planet-alt-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 3px;
  transition: width .6s ease;
}
.planet-alt-label {
  font-family: var(--mono);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.planet-up .planet-alt-label { color: var(--accent); }
.planet-below { opacity: .4; }
.planet-below .planet-alt-label { color: var(--text-dim); }

/* ═══════════════════════════
   SOLAR ACTIVITY — Enhanced
   ═══════════════════════════ */
.solar-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem;
}
.solar-item {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .6rem;
  background: rgba(255,255,255,.02);
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.03);
}
.solar-label {
  font-size: .65rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .05em;
}
.solar-value {
  font-family: var(--mono);
  font-size: .95rem; font-variant-numeric: tabular-nums;
  transition: opacity .2s;
}
.solar-value--large {
  font-size: 1.5rem; font-weight: 700;
  text-shadow: 0 0 12px currentColor;
}
.sparkline {
  width: 100%; height: 56px;
  margin-top: .85rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.03);
}

/* Solar class colors with glow */
.xray-a, .xray-b { color: var(--green); }
.xray-c { color: var(--yellow); }
.xray-m { color: var(--orange); }
.xray-x { color: var(--red); }

/* Kp colors */
.kp-low  { color: var(--green); }
.kp-mod  { color: var(--yellow); }
.kp-high { color: var(--orange); }
.kp-storm { color: var(--red); }

/* Kp segmented bar */
.kp-bar {
  display: flex; gap: 2px;
  margin-top: .4rem; height: 4px;
}
.kp-bar-seg {
  flex: 1;
  border-radius: 2px;
  background: rgba(255,255,255,.06);
  transition: background .3s;
}

/* ═══════════════
   AURORA
   ═══════════════ */
.aurora-center { text-align: center; padding: 1.25rem 0; }
.aurora-pct {
  font-family: var(--mono);
  font-size: 3rem; font-weight: 700; line-height: 1;
  text-shadow: 0 0 20px currentColor;
  transition: color .3s;
}
.aurora-label {
  font-size: .82rem; color: var(--text-dim); margin-top: .4rem;
}
.aurora-note {
  font-size: .78rem; color: var(--text-dim);
  text-align: center; margin-top: .5rem;
  font-family: var(--mono);
}

/* ═══════════════════
   NEO / Close Approaches
   ═══════════════════ */
.neo-list { display: flex; flex-direction: column; gap: .3rem; }
.neo-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: .5rem; align-items: baseline;
  padding: .4rem .3rem; border-radius: .4rem;
  font-size: .85rem;
  transition: background .15s;
}
.neo-row:hover { background: rgba(255,255,255,.03); }
.neo-name { font-weight: 600; }
.neo-date { color: var(--text-dim); font-size: .78rem; }
.neo-dist {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.neo-hazardous { color: var(--orange); }
.fireball-section { margin-top: .75rem; }

/* ═══════════
   ISS
   ═══════════ */
.iss-position-row { display: flex; justify-content: center; margin-bottom: .85rem; }
.iss-map {
  width: 100%; max-width: 320px; height: auto;
  border-radius: .6rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}
.iss-passes { display: flex; flex-direction: column; gap: .35rem; }
.iss-pass-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: .5rem; align-items: baseline;
  padding: .35rem 0; font-size: .85rem;
}
.iss-pass-time { font-weight: 600; }
.iss-pass-dir { color: var(--text-dim); }
.iss-pass-mag { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--accent); }

/* ═══════════
   APOD
   ═══════════ */
.apod-content {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; align-items: start;
}
.apod-image {
  width: 100%; border-radius: .6rem;
  aspect-ratio: 16/10; object-fit: cover;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}
.apod-text { display: flex; flex-direction: column; gap: .5rem; }
.apod-title { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.apod-explanation {
  font-size: .85rem; color: var(--text-dim); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.apod-link {
  font-size: .85rem; color: var(--accent); text-decoration: none;
  transition: color .15s;
}
.apod-link:hover { color: var(--accent-2); text-decoration: underline; }

/* ═══════════════
   SUN IMAGE
   ═══════════════ */
.sun-image-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
}
.sun-image {
  width: 100%; max-width: 260px;
  aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  background: rgba(255,255,255,.02);
  box-shadow: 0 0 30px rgba(251,184,19,.08);
  border: 1px solid rgba(251,184,19,.1);
}
.sun-wavelength-btns { display: flex; gap: .35rem; }
.sun-wl-btn.active {
  background: rgba(251,184,19,.1);
  border-color: rgba(251,184,19,.4);
  color: var(--gold);
}

/* ═══════════════
   SOLAR CORONA
   ═══════════════ */
.corona-image-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
}
.corona-image {
  width: 100%; max-width: 300px;
  aspect-ratio: 1; object-fit: contain;
  background: rgba(255,255,255,.02);
  border-radius: .6rem;
  border: 1px solid rgba(251,184,19,.08);
}
.corona-btns { display: flex; gap: .35rem; }
.corona-btn.active {
  background: rgba(251,184,19,.1);
  border-color: rgba(251,184,19,.4);
  color: var(--gold);
}
.corona-caption {
  font-size: .78rem; color: var(--text-dim);
  text-align: center; font-family: var(--mono);
}

/* ═══════════════
   EPIC EARTH
   ═══════════════ */
.epic-content {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.epic-image {
  width: 100%; max-width: 280px;
  aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  background: rgba(255,255,255,.02);
  box-shadow: 0 0 30px rgba(96,165,250,.08);
  border: 1px solid rgba(96,165,250,.1);
}
.epic-caption {
  font-size: .78rem; color: var(--text-dim);
  text-align: center; font-family: var(--mono);
}

/* ═══════════════════════
   OBSERVATORY WEBCAMS
   ═══════════════════════ */
.webcam-content {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
}
.webcam-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: .6rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}
.webcam-btns { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.webcam-btn.active {
  background: rgba(167,139,250,.1);
  border-color: rgba(167,139,250,.4);
  color: var(--purple);
}
.webcam-caption {
  font-size: .78rem; color: var(--text-dim);
  text-align: center; font-family: var(--mono);
}

/* ═══════════════════
   ALLSKY CAMERAS
   ═══════════════════ */
.allsky-content {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
}
.allsky-image {
  width: 100%; max-width: 300px;
  aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  background: rgba(255,255,255,.02);
  box-shadow: 0 0 30px rgba(34,211,238,.06);
  border: 1px solid rgba(34,211,238,.1);
}
.allsky-btns { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.allsky-btn.active {
  background: rgba(34,211,238,.1);
  border-color: rgba(34,211,238,.4);
  color: var(--cyan);
}
.allsky-caption {
  font-size: .78rem; color: var(--text-dim);
  text-align: center; font-family: var(--mono);
}

/* ═══════════════
   LINK CARDS
   ═══════════════ */
.link-card-content {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; text-align: center; padding: .75rem 0;
}
.link-card-desc {
  font-size: .88rem; color: var(--text-dim);
  line-height: 1.5; margin: 0; max-width: 32ch;
}

/* ═══════════
   EVENTS
   ═══════════ */
.events-list { display: flex; flex-direction: column; gap: .25rem; }
.event-row {
  display: grid; grid-template-columns: auto 1fr;
  gap: .6rem; align-items: baseline;
  padding: .4rem .3rem; border-radius: .4rem;
  font-size: .85rem;
  transition: background .15s;
}
.event-row:hover { background: rgba(255,255,255,.03); }
.event-date {
  font-family: var(--mono);
  color: var(--text-dim); font-variant-numeric: tabular-nums;
  white-space: nowrap; min-width: 5.5rem; font-size: .8rem;
}

/* ═══════════
   METEORS
   ═══════════ */
.meteor-list { display: flex; flex-direction: column; gap: .25rem; }
.meteor-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: .5rem; align-items: baseline;
  padding: .4rem .3rem; border-radius: .4rem;
  font-size: .85rem;
  transition: background .15s;
}
.meteor-row:hover { background: rgba(255,255,255,.03); }
.meteor-name { font-weight: 600; }
.meteor-peak { color: var(--text-dim); white-space: nowrap; font-size: .8rem; }
.meteor-zhr { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--accent); }
.meteor-active {
  background: rgba(52,211,153,.06);
  border: 1px solid rgba(52,211,153,.1);
  border-radius: .4rem;
  padding: .4rem .5rem;
}

/* ═══════════════════
   SKY MAP CTA
   ═══════════════════ */
.skymap-cta {
  padding: 2rem 0 1rem;
}
.skymap-card {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 2rem;
  background:
    radial-gradient(circle at 30% 40%, rgba(30,40,80,.4), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(60,40,100,.3), transparent 50%),
    linear-gradient(135deg, rgba(14,18,40,.6), rgba(14,18,40,.3));
  border: 1px solid rgba(165,180,252,.12);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.skymap-card:hover {
  border-color: rgba(165,180,252,.3);
  box-shadow: 0 0 40px rgba(165,180,252,.08);
  transform: translateY(-2px);
}
.skymap-card-content {
  text-align: center;
  position: relative;
  z-index: 1;
}
.skymap-card-title {
  font-size: 1.2rem; font-weight: 600;
  color: var(--accent); margin: 0 0 .4rem;
}
.skymap-card-sub {
  font-size: .85rem; color: var(--text-dim);
}
/* Tiny CSS stars in the CTA background */
.skymap-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,.3), transparent);
  pointer-events: none;
}

/* ═══════════════
   RESPONSIVE
   ═══════════════ */
@media (max-width: 720px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .hero-moon { order: -1; }
  .times-grid { justify-content: center; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .apod-content { grid-template-columns: 1fr; }
  .container { padding: 1rem; }
  .planet-row { grid-template-columns: 2rem 5rem 1fr 3rem; }
}

@media (max-width: 480px) {
  .moon-svg-wrap { width: 90px; height: 90px; }
  .darkness-value { font-size: 1.8rem; }
  .search-row { flex-direction: column; }
  .search-input-wrap { min-width: 100%; }
  .hero-card { padding: 1.25rem; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .planet-row { grid-template-columns: 1.5rem 1fr auto; gap: .35rem; }
  .planet-alt-bar { display: none; }
}

/* ─── Classic-mode banner (only present at /astro/classic/) ─── */
.classic-banner {
  padding: .55rem 1.5rem;
  margin: -1.25rem -1.5rem 1rem;
  text-align: center;
  font-size: .85rem;
  color: var(--text-dim);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
}
.classic-banner a {
  color: var(--accent);
  text-decoration: none;
  margin-left: .25rem;
}
.classic-banner a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .classic-banner { font-size: .8rem; padding: .5rem 1rem; }
}