/*
|--------------------------------------------------------------------------
| Ivrea Observatory — Senza Distanza v4
|--------------------------------------------------------------------------
| Refinement layer for Home, Tonight, SkyCam, Journal and sensor panels.
*/

:root {
  --io-v4-bg: #030b17;
  --io-v4-panel: rgba(8, 20, 38, .72);
  --io-v4-panel-strong: rgba(11, 28, 52, .84);
  --io-v4-border: rgba(148, 193, 232, .18);
  --io-v4-border-strong: rgba(186, 230, 253, .25);
  --io-v4-text: #f8fafc;
  --io-v4-muted: #b8c7d8;
  --io-v4-soft: #8192a7;
  --io-v4-gold: #f8c85b;
  --io-v4-gold-2: #fff1a8;
  --io-v4-blue: #7dd3fc;
  --io-v4-shadow: 0 28px 80px rgba(0, 0, 0, .34);
  --io-v4-radius-xl: 34px;
  --io-v4-radius-lg: 26px;
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(125, 211, 252, .18), transparent 34%),
    radial-gradient(circle at 92% 4%, rgba(248, 200, 91, .10), transparent 28%),
    linear-gradient(180deg, #03101f 0%, #071827 42%, #06111f 100%) !important;
}

.screen {
  position: relative;
}

.screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.42) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 12%, rgba(255,255,255,.32) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 38%, rgba(255,255,255,.24) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 74%, rgba(255,255,255,.20) 0 1px, transparent 1.8px);
  opacity: .34;
  z-index: -1;
}

/* HOME / DASHBOARD ------------------------------------------------------ */
.io-home-hero,
.io-tonight-home-card,
.skycam-card.io-skycam-card,
.situation-card,
.notice-card,
.data-card,
.sun-moon-card,
.observing-card,
.footer-card,
.panel,
.hero-card,
.journal-card,
.article-card,
.note-card {
  border-color: var(--io-v4-border) !important;
  box-shadow: var(--io-v4-shadow), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.io-home-hero {
  min-height: clamp(360px, 42vw, 520px) !important;
  padding: clamp(28px, 4vw, 52px) !important;
  border-radius: var(--io-v4-radius-xl) !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(3, 10, 24, .20) 0%, rgba(3, 10, 24, .22) 44%, rgba(3, 10, 24, .72) 100%),
    linear-gradient(180deg, rgba(3, 10, 24, .02) 0%, rgba(3, 10, 24, .18) 62%, rgba(3, 10, 24, .88) 100%),
    url('/assets/astronomy/premium/backgrounds/deep-night.jpg') center/cover no-repeat,
    linear-gradient(135deg, #071827, #06111f) !important;
}

.io-home-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background:
    radial-gradient(ellipse at 18% 96%, rgba(248, 200, 91, .18), transparent 32%),
    linear-gradient(180deg, transparent, rgba(2, 8, 20, .70));
  pointer-events: none;
}

.io-home-hero::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -1px;
  height: 120px;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(15,23,42,.82) 43% 46%, transparent 47% 100%),
    linear-gradient(45deg, transparent 0 46%, rgba(15,23,42,.72) 47% 52%, transparent 53% 100%);
  background-size: 220px 120px, 260px 120px;
  opacity: .46;
  pointer-events: none;
}

.io-hero-visual,
.io-home-status,
.io-temp-panel,
.io-tonight-copy,
.io-tonight-object,
.skycam-header,
.skycam-image-link,
.skycam-actions {
  position: relative;
  z-index: 1;
}

.io-hero-moon {
  width: clamp(150px, 20vw, 250px) !important;
  filter: drop-shadow(0 30px 56px rgba(0,0,0,.48)) drop-shadow(0 0 38px rgba(226,232,240,.18)) !important;
}

.io-hero-moon img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.io-home-status {
  align-self: center !important;
  max-width: 420px !important;
  padding: 24px 26px !important;
  border-left: 1px solid rgba(248, 200, 91, .26) !important;
  background: linear-gradient(90deg, rgba(6, 17, 31, .40), transparent) !important;
  backdrop-filter: blur(6px);
}

.io-eyebrow {
  color: var(--io-v4-gold-2) !important;
  letter-spacing: .11em !important;
}

.io-home-status h1,
.io-tonight-title,
.page-title h1,
.hero-card h1,
.section-title {
  color: var(--io-v4-text) !important;
  text-shadow: 0 16px 42px rgba(0,0,0,.34);
}

.io-home-status p,
.page-lead,
.section-desc,
.hero-text,
.article-card p,
.journal-card p,
.note-card p {
  color: #c9d8e8 !important;
}

.io-temp-panel {
  padding: 24px 28px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(226, 232, 240, .13) !important;
  background: rgba(3, 10, 24, .34) !important;
  backdrop-filter: blur(18px) saturate(1.12);
}

.io-tonight-home-card {
  position: relative !important;
  min-height: 440px !important;
  padding: clamp(28px, 4vw, 52px) !important;
  border-radius: var(--io-v4-radius-xl) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 74% 44%, rgba(248, 200, 91, .18), transparent 28%),
    radial-gradient(circle at 14% 12%, rgba(125, 211, 252, .12), transparent 34%),
    linear-gradient(135deg, rgba(5, 14, 28, .94), rgba(5, 18, 35, .82)) !important;
}

.io-tonight-home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 14%, rgba(255,255,255,.34) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.34) 0 1px, transparent 1.8px),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 46%);
  opacity: .60;
  pointer-events: none;
}

.io-tonight-copy {
  max-width: 620px !important;
}

.io-tonight-title {
  font-size: clamp(38px, 5vw, 72px) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
}

.io-tonight-home-card p {
  max-width: 560px !important;
  color: #dbeafe !important;
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.45 !important;
}

.io-tonight-metrics {
  gap: 14px !important;
}

.io-tonight-metric {
  min-height: 98px !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(226, 232, 240, .12) !important;
  background: rgba(15, 23, 42, .42) !important;
  backdrop-filter: blur(10px);
}

.io-tonight-metric small {
  color: #a7c5dd !important;
}

.io-tonight-actions {
  align-items: center !important;
  gap: 12px !important;
}

.io-seen-button,
.sd-seen.hero,
.sd-event-card .sd-seen.mini {
  border: 0 !important;
  color: #06111f !important;
  background: linear-gradient(135deg, #fff4b8 0%, #f8c85b 58%, #f59e0b 100%) !important;
  box-shadow: 0 20px 48px rgba(248, 200, 91, .28), inset 0 1px 0 rgba(255,255,255,.52) !important;
}

.io-open-tonight {
  color: #e5f4ff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(226,232,240,.15) !important;
}

.io-tonight-object img {
  max-width: min(370px, 38vw) !important;
  filter: drop-shadow(0 36px 62px rgba(0,0,0,.50)) drop-shadow(0 0 35px rgba(248,200,91,.18)) !important;
}

.skycam-card.io-skycam-card {
  padding: clamp(22px, 3vw, 32px) !important;
  border-radius: var(--io-v4-radius-xl) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(125, 211, 252, .12), transparent 26%),
    radial-gradient(circle at 88% 0%, rgba(248, 200, 91, .07), transparent 28%),
    rgba(8, 20, 38, .72) !important;
}

.io-camera-glyph {
  width: 58px !important;
  height: 58px !important;
  flex-basis: 58px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.25), transparent 24%),
    linear-gradient(180deg, rgba(147,197,253,.18), rgba(15,23,42,.18)) !important;
}

.io-camera-glyph::before {
  background: linear-gradient(180deg, #eef2ff, #c4b5fd 60%, #8b5cf6 100%) !important;
}

.io-live-pill,
.live-badge {
  color: #bbf7d0 !important;
  border-color: rgba(74,222,128,.24) !important;
  background: rgba(22, 163, 74, .12) !important;
}

.skycam-image,
.live-frame img,
.replay-video,
.archive-item img {
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 24px 58px rgba(0,0,0,.30) !important;
}

.skycam-image-link {
  display: block !important;
  margin-top: 18px !important;
}

.data-grid {
  gap: 16px !important;
}

.data-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 85% 12%, rgba(125,211,252,.10), transparent 28%),
    rgba(255,255,255,.066) !important;
}

.data-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248,200,91,.32), transparent);
}

.situation-card,
.notice-card,
.sun-moon-card,
.observing-card,
.footer-card {
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(125,211,252,.09), transparent 30%),
    rgba(255,255,255,.060) !important;
}

/* Sensor panel ---------------------------------------------------------- */
.sensor-panel-head {
  align-items: center !important;
}

.sensor-section-title::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--io-v4-gold);
  box-shadow: 0 0 16px rgba(248,200,91,.38);
  vertical-align: 1px;
}

.sensor-list {
  gap: 12px !important;
}

.sensor-row {
  min-height: 56px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.038)) !important;
}

.sensor-status {
  opacity: .82;
}

/* TONIGHT --------------------------------------------------------------- */
.sd-tonight {
  border-color: rgba(186, 230, 253, .28) !important;
  box-shadow: 0 36px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.sd-hero {
  min-height: 620px !important;
}

.sd-feature h2 {
  color: #fff5cc !important;
}

.sd-condition-card,
.sd-event-card,
.sd-visual-guide,
.sd-tips {
  backdrop-filter: blur(12px);
}

.sd-event-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(248, 200, 91, .08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026)) !important;
}

.sd-details summary {
  color: #bdeaff !important;
}

/* SKYCAM PAGE ----------------------------------------------------------- */
.page-title {
  position: relative;
  margin: 10px 0 24px !important;
  padding: clamp(28px, 5vw, 52px) !important;
  border-radius: var(--io-v4-radius-xl);
  overflow: hidden;
  border: 1px solid var(--io-v4-border);
  background:
    linear-gradient(90deg, rgba(3,10,24,.66), rgba(3,10,24,.28)),
    url('/assets/astronomy/premium/backgrounds/deep-night.jpg') center/cover no-repeat;
  box-shadow: var(--io-v4-shadow), inset 0 1px 0 rgba(255,255,255,.055);
}

.page-title h1 {
  max-width: 760px;
  margin-top: 8px !important;
  font-size: clamp(44px, 7vw, 90px) !important;
  line-height: .92 !important;
  letter-spacing: -.07em !important;
}

.live-card,
.status-card,
.replay-card,
.archive-card,
.info-card {
  border-radius: var(--io-v4-radius-lg) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(125,211,252,.10), transparent 32%),
    rgba(8, 20, 38, .72) !important;
}

.status-main {
  color: var(--io-v4-text) !important;
  text-shadow: 0 18px 44px rgba(0,0,0,.32);
}

/* JOURNAL / ARTICLES ---------------------------------------------------- */
.hero-card {
  background:
    linear-gradient(90deg, rgba(3,10,24,.74), rgba(3,10,24,.30)),
    radial-gradient(circle at 88% 10%, rgba(248, 200, 91, .14), transparent 28%),
    url('/assets/astronomy/premium/backgrounds/deep-night.jpg') center/cover no-repeat !important;
}

.journal-list {
  gap: 16px !important;
}

.journal-card,
.article-card,
.note-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(125,211,252,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045)) !important;
}

.journal-card:hover {
  transform: translateY(-2px);
  border-color: rgba(248, 200, 91, .24) !important;
}

.card-kicker,
.eyebrow {
  color: var(--io-v4-gold-2) !important;
}

.pill,
.meta-pills .pill {
  border-color: rgba(226,232,240,.13) !important;
  background: rgba(255,255,255,.07) !important;
}

/* Generic buttons ------------------------------------------------------- */
.button.primary,
.action-button.primary,
.mini-button:hover {
  color: #06111f !important;
  background: linear-gradient(135deg, #fff4b8, #f8c85b 70%, #f59e0b) !important;
}

.button.secondary,
.action-button,
.button:not(.primary) {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.13) !important;
}

@media (max-width: 820px) {
  .io-home-hero,
  .io-tonight-home-card,
  .skycam-card.io-skycam-card,
  .page-title,
  .hero-card {
    border-radius: 28px !important;
  }

  .io-home-status {
    padding: 18px 20px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(248,200,91,.22) !important;
  }

  .io-tonight-object img {
    max-width: min(260px, 72vw) !important;
  }

  .io-tonight-actions {
    align-items: stretch !important;
  }

  .io-seen-button,
  .io-open-tonight {
    width: 100% !important;
    justify-content: center !important;
  }

  .sensor-list {
    grid-template-columns: 1fr !important;
  }

  .sensor-row {
    grid-template-columns: 10px 1fr auto !important;
  }

  .sd-hero {
    min-height: auto !important;
  }
}

@media (max-width: 520px) {
  .io-home-hero,
  .io-tonight-home-card,
  .skycam-card.io-skycam-card,
  .page-title,
  .hero-card {
    padding: 22px !important;
  }

  .sensor-row {
    grid-template-columns: 10px 1fr !important;
  }

  .sensor-status {
    grid-column: 2;
  }
}


/* V4.2 — final polish --------------------------------------------------- */
.desktop-nav {
  gap: 6px !important;
}
.desktop-nav-link {
  padding-inline: 14px !important;
}

.skycam-card.io-skycam-card {
  background:
    radial-gradient(circle at 10% 8%, rgba(125, 211, 252, .16), transparent 28%),
    radial-gradient(circle at 88% 2%, rgba(248, 200, 91, .10), transparent 26%),
    linear-gradient(180deg, rgba(8, 20, 38, .82), rgba(5, 15, 29, .76)) !important;
}

.io-camera-glyph {
  border-radius: 21px !important;
  background:
    radial-gradient(circle at 50% 52%, rgba(125,211,252,.24), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(226,232,240,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 34px rgba(0,0,0,.24) !important;
}

.io-camera-glyph::before {
  left: 12px !important;
  top: 20px !important;
  width: 34px !important;
  height: 22px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #f8fafc, #bae6fd 62%, #7dd3fc) !important;
  box-shadow:
    inset 0 0 0 2px rgba(15,23,42,.18),
    0 -8px 0 -4px #f8c85b,
    0 10px 24px rgba(125,211,252,.18) !important;
}

.io-camera-glyph::after {
  left: 21px !important;
  top: 23px !important;
  width: 14px !important;
  height: 14px !important;
  background:
    radial-gradient(circle at 34% 32%, #f8fafc 0 10%, #93c5fd 18%, #2563eb 54%, #020617 100%) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.58), 0 0 24px rgba(125,211,252,.36) !important;
}

.io-live-pill::before,
.live-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 16px rgba(74,222,128,.58);
}

.io-instruments-panel {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(18px, 2.4vw, 26px) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(125,211,252,.11), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(248,200,91,.10), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.068), rgba(255,255,255,.042)) !important;
}

.io-instruments-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248,200,91,.34), transparent);
}

.sensor-section-copy {
  margin: 7px 0 0;
  max-width: 520px;
  color: #b8c7d8;
  font-size: 13px;
  line-height: 1.42;
  font-weight: 760;
}

.sensor-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.sensor-highlight {
  min-height: 118px;
  padding: 15px;
  border-radius: 22px;
  background: rgba(2, 8, 20, .30);
  border: 1px solid rgba(226,232,240,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.sensor-highlight-orb {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-bottom: 14px;
  background: #7dd3fc;
  box-shadow: 0 0 22px rgba(125,211,252,.28);
}
.sensor-highlight-orb.is-weather { background: linear-gradient(135deg, #7dd3fc, #38bdf8); }
.sensor-highlight-orb.is-sky { background: linear-gradient(135deg, #f8c85b, #f97316); box-shadow: 0 0 22px rgba(248,200,91,.30); }
.sensor-highlight-orb.is-events { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); box-shadow: 0 0 22px rgba(196,181,253,.28); }
.sensor-highlight-orb.is-camera { background: linear-gradient(135deg, #e0f2fe, #93c5fd); }

.sensor-highlight strong {
  display: block;
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.12;
  font-weight: 980;
}

.sensor-highlight small {
  display: block;
  margin-top: 6px;
  color: #9fb0c4;
  font-size: 12px;
  line-height: 1.30;
  font-weight: 760;
}

.sensor-technical-drawer {
  margin-top: 14px;
  border-top: 1px solid rgba(226,232,240,.09);
  padding-top: 12px;
}

.sensor-technical-drawer summary {
  cursor: pointer;
  color: #bae6fd;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sensor-technical-drawer .sensor-list {
  margin-top: 12px;
}

@media (max-width: 980px) {
  .sensor-highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .desktop-nav-link { padding-inline: 12px !important; }
  .sensor-highlight-grid { grid-template-columns: 1fr; }
}


/* V4.9 — final visual polish ------------------------------------------- */
.site-header {
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.16));
}

.desktop-nav {
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 34px rgba(0,0,0,.16) !important;
}

.desktop-nav-link.is-active {
  background: linear-gradient(135deg, rgba(186,230,253,.22), rgba(248,200,91,.12)) !important;
}

.io-home-hero,
.io-tonight-home-card,
.skycam-card.io-skycam-card {
  position: relative;
}

.io-home-hero::before,
.io-tonight-home-card::before,
.skycam-card.io-skycam-card::before {
  filter: saturate(1.06) contrast(1.03);
}

.io-temp-panel {
  border-radius: 28px !important;
  background: rgba(3, 10, 24, .38) !important;
  border: 1px solid rgba(226,232,240,.12) !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px rgba(0,0,0,.20) !important;
}

.io-home-status h1,
.io-tonight-title,
.skycam-label {
  text-shadow: 0 18px 45px rgba(0,0,0,.32);
}

.io-tonight-metric,
.data-card,
.sensor-highlight {
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.io-tonight-metric:hover,
.data-card:hover,
.sensor-highlight:hover {
  transform: translateY(-2px);
  border-color: rgba(186,230,253,.22) !important;
}

.skycam-image {
  filter: saturate(1.04) contrast(1.03);
}

.journal-card,
.article-card,
.note-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.journal-card:hover,
.article-card:hover,
.note-card:hover {
  transform: translateY(-3px);
  border-color: rgba(186,230,253,.24) !important;
  box-shadow: 0 30px 78px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

@media (max-width: 1280px) {
  .io-temp-panel {
    text-align: left !important;
  }
}

@media (max-width: 720px) {
  .io-temp-panel {
    padding: 18px !important;
  }
}


/* V5.0 — time-aware home hero: day = weather + Sun, twilight = Tonight, night = Moon */
.io-home-hero.io-home-hero-day {
  background:
    linear-gradient(90deg, rgba(2, 30, 58, .30) 0%, rgba(3, 69, 104, .12) 46%, rgba(2, 12, 27, .52) 100%),
    radial-gradient(circle at 23% 34%, rgba(255, 235, 150, .42), transparent 24%),
    radial-gradient(circle at 64% 18%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(180deg, #38bdf8 0%, #7dd3fc 45%, #1e6091 76%, #071827 100%) !important;
}

.io-home-hero.io-home-hero-day::before {
  background:
    radial-gradient(ellipse at 20% 92%, rgba(255,255,255,.34), transparent 31%),
    radial-gradient(ellipse at 72% 84%, rgba(255,255,255,.18), transparent 26%),
    linear-gradient(180deg, transparent 44%, rgba(7,24,39,.24) 100%) !important;
  opacity: .92 !important;
}

.io-home-hero.io-home-hero-day::after {
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(5, 37, 61, .40) 43% 46%, transparent 47% 100%),
    linear-gradient(45deg, transparent 0 46%, rgba(5, 37, 61, .32) 47% 52%, transparent 53% 100%) !important;
  background-size: 220px 120px, 260px 120px !important;
  opacity: .26 !important;
}

.io-home-hero.io-home-hero-day .io-home-status {
  background: linear-gradient(90deg, rgba(3, 33, 60, .40), rgba(3, 33, 60, .12)) !important;
  border-left-color: rgba(255, 236, 160, .46) !important;
}

.io-home-hero.io-home-hero-day .io-eyebrow {
  color: #fff3b0 !important;
}

.io-home-hero.io-home-hero-day .io-home-status h1,
.io-home-hero.io-home-hero-day .io-home-status p {
  color: #f8fafc !important;
  text-shadow: 0 18px 45px rgba(3, 15, 31, .36) !important;
}

.io-hero-moon.is-sun {
  width: clamp(170px, 22vw, 282px) !important;
  filter:
    drop-shadow(0 34px 72px rgba(251, 191, 36, .35))
    drop-shadow(0 0 42px rgba(255, 238, 168, .42)) !important;
  animation: ioSunBreathe 6.5s ease-in-out infinite;
}

.io-hero-moon.is-sun img {
  transform: scale(1.05);
}

.io-home-hero.io-home-hero-twilight {
  background:
    linear-gradient(90deg, rgba(4, 12, 28, .34), rgba(4, 12, 28, .16) 48%, rgba(4, 12, 28, .70)),
    radial-gradient(circle at 22% 82%, rgba(251, 146, 60, .46), transparent 30%),
    radial-gradient(circle at 62% 24%, rgba(125, 211, 252, .15), transparent 28%),
    linear-gradient(180deg, #0f2440 0%, #173a5d 48%, #f59e0b 140%) !important;
}

.io-home-hero.io-home-hero-twilight .io-hero-moon.is-twilight-object {
  width: clamp(160px, 20vw, 258px) !important;
  filter: drop-shadow(0 30px 68px rgba(251,191,36,.28)) drop-shadow(0 0 32px rgba(251,191,36,.25)) !important;
}

.io-home-hero.io-home-hero-night .io-hero-moon.is-moon {
  opacity: 1;
}

@keyframes ioSunBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.025); }
}

@media (max-width: 720px) {
  .io-hero-moon.is-sun { width: min(230px, 68vw) !important; }
}

/* V6.3.2 — dashboard SkyCam: preserve the complete 4:3 live frame */
.skycam-card.io-skycam-card .skycam-image-link {
  overflow: hidden !important;
  background: rgba(3, 10, 24, .52) !important;
}

.skycam-card.io-skycam-card .skycam-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}