.aurora-forecast,
.aurora-forecast * { box-sizing: border-box; }

/* Ensure the HTML hidden attribute wins over component display rules. */
.aurora-forecast [hidden] { display: none !important; }

.aurora-forecast {
  --ta-bg: #05090f;
  --ta-panel: rgba(10, 18, 28, .72);
  --ta-line: rgba(255,255,255,.105);
  --ta-text: #f7fbff;
  --ta-muted: rgba(226, 236, 246, .64);
  --ta-soft: rgba(226, 236, 246, .42);
  --ta-green: #8fffc4;
  --ta-cyan: #7de8ff;
  --ta-violet: #b69cff;
  --ta-radius: 30px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ta-text);
  background:
    radial-gradient(circle at 80% 10%, rgba(83, 116, 184, .15), transparent 34%),
    radial-gradient(circle at 10% 95%, rgba(35, 168, 142, .12), transparent 35%),
    linear-gradient(145deg, #07101a 0%, #03070c 56%, #060b12 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ta-radius);
  box-shadow: 0 34px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  font-family: inherit;
  min-height: 520px;
}

.ta-aurora-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.ta-glow { position:absolute; filter: blur(60px); opacity:.35; transform: rotate(-10deg); border-radius:50%; mix-blend-mode:screen; }
.ta-glow-a { width:70%; height:23%; left:10%; top:2%; background:linear-gradient(90deg, transparent, rgba(95,255,176,.78), rgba(80,216,255,.52), transparent); animation: taDrift 15s ease-in-out infinite alternate; }
.ta-glow-b { width:54%; height:20%; right:-6%; top:16%; background:linear-gradient(90deg, transparent, rgba(124,255,207,.2), rgba(157,113,255,.62), transparent); animation: taDrift2 18s ease-in-out infinite alternate; }
.ta-stars { position:absolute; inset:0; opacity:.56; background-image:radial-gradient(circle, rgba(255,255,255,.82) 0 1px, transparent 1.2px),radial-gradient(circle, rgba(255,255,255,.5) 0 .7px, transparent .9px); background-size:71px 71px, 103px 103px; background-position:0 0, 37px 19px; mask-image:linear-gradient(to bottom, #000 0, rgba(0,0,0,.35) 42%, transparent 82%); }
@keyframes taDrift { to { transform:translate3d(10%, 25px,0) rotate(4deg) scale(1.08); opacity:.5; } }
@keyframes taDrift2 { to { transform:translate3d(-12%, -12px,0) rotate(-18deg) scale(1.12); opacity:.48; } }

.ta-shell { position:relative; padding:clamp(24px, 4vw, 54px); }
.ta-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding-bottom:30px; border-bottom:1px solid var(--ta-line); }
.ta-eyebrow { display:flex; align-items:center; gap:10px; color:rgba(218,255,236,.78); font-size:11px; font-weight:700; letter-spacing:.18em; }
.ta-live-dot { width:7px; height:7px; border-radius:50%; background:var(--ta-green); box-shadow:0 0 0 5px rgba(143,255,196,.08),0 0 20px rgba(143,255,196,.65); animation:taPulse 2s ease-in-out infinite; }
@keyframes taPulse { 50% { opacity:.5; box-shadow:0 0 0 8px rgba(143,255,196,.02),0 0 24px rgba(143,255,196,.42); } }
.ta-title { margin:10px 0 8px!important; color:#fff!important; font-size:clamp(28px,4vw,48px)!important; line-height:1.02!important; letter-spacing:-.04em; font-weight:520!important; max-width:780px; }
.ta-location { display:flex; align-items:center; gap:7px; color:var(--ta-muted); font-size:14px; }
.ta-location svg { width:16px; height:16px; fill:none; stroke:var(--ta-green); stroke-width:1.6; }
.ta-updated { color:var(--ta-soft); font-size:12px; text-align:right; line-height:1.4; padding-top:4px; }

.ta-loading { min-height:330px; display:flex; align-items:center; justify-content:center; gap:22px; color:var(--ta-muted); }
.ta-loading strong { display:block; color:#fff; font-size:18px; margin-bottom:4px; }
.ta-loading span { display:block; max-width:460px; }
.ta-loading-orb { width:58px; height:58px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:conic-gradient(from 180deg, rgba(143,255,196,0), rgba(143,255,196,.9), rgba(125,232,255,.3), rgba(143,255,196,0)); position:relative; animation:taSpin 1.8s linear infinite; box-shadow:0 0 34px rgba(91,255,190,.13); }
.ta-loading-orb:after { content:""; position:absolute; inset:5px; border-radius:50%; background:#071018; }
@keyframes taSpin { to{transform:rotate(360deg)} }

.ta-content { padding-top:34px; }
.ta-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px, .38fr); gap:42px; align-items:center; }
.ta-status-pill { width:max-content; max-width:100%; display:inline-flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid rgba(143,255,196,.19); border-radius:999px; background:rgba(143,255,196,.07); color:#caffdf; font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
.ta-status-pill span { width:7px; height:7px; border-radius:50%; background:var(--status-color,var(--ta-green)); box-shadow:0 0 17px var(--status-color,var(--ta-green)); }
.ta-verdict h3 { margin:15px 0 10px!important; color:#fff!important; font-size:clamp(34px,5.2vw,64px)!important; line-height:.98!important; letter-spacing:-.05em; font-weight:560!important; max-width:760px; }
.ta-summary { color:var(--ta-muted)!important; font-size:clamp(15px,1.7vw,18px)!important; line-height:1.55!important; max-width:720px; margin:0!important; }

.ta-best-window { margin-top:30px; width:max-content; max-width:100%; display:flex; gap:14px; align-items:center; padding:14px 18px 14px 14px; border:1px solid var(--ta-line); border-radius:18px; background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); backdrop-filter:blur(14px); }
.ta-best-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:rgba(143,255,196,.09); border:1px solid rgba(143,255,196,.11); }
.ta-best-icon svg { width:23px; height:23px; fill:none; stroke:var(--ta-green); stroke-width:1.5; }
.ta-best-window span { display:block; color:var(--ta-soft); font-size:9px; letter-spacing:.15em; font-weight:700; }
.ta-best-window strong { display:block; color:#fff; font-size:20px; line-height:1.15; margin:2px 0; }
.ta-best-window small { display:block; color:var(--ta-muted); font-size:11px; }

.ta-score-wrap { text-align:center; position:relative; }
.ta-score { --score:0; --score-color:#8fffc4; position:relative; width:min(226px, 100%); aspect-ratio:1; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--score-color) calc(var(--score) * 1%), rgba(255,255,255,.075) 0); filter:drop-shadow(0 0 24px rgba(103,255,186,.08)); }
.ta-score:before { content:""; position:absolute; inset:7px; border-radius:50%; background:radial-gradient(circle at 42% 35%, rgba(255,255,255,.055), rgba(6,13,20,.97) 59%); border:1px solid rgba(255,255,255,.06); }
.ta-score:after { content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.ta-score-inner { position:relative; z-index:1; display:flex; align-items:baseline; justify-content:center; gap:4px; }
.ta-score-inner span { font-size:clamp(54px,7vw,82px); letter-spacing:-.07em; font-weight:520; line-height:1; }
.ta-score-inner small { color:var(--ta-soft); font-size:12px; }
.ta-score-label { margin-top:12px; color:#fff; font-size:12px; letter-spacing:.04em; }
.ta-info-trigger { appearance:none; border:0; background:none; color:var(--ta-soft); padding:7px; font:inherit; font-size:11px; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(255,255,255,.18); text-underline-offset:3px; }
.ta-info-popover { position:absolute; z-index:5; width:min(300px, 90vw); right:50%; transform:translateX(50%); top:calc(100% + 4px); padding:13px 15px; border-radius:13px; background:#101922; border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 50px rgba(0,0,0,.35); color:var(--ta-muted); font-size:11px; line-height:1.5; text-align:left; }

.ta-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:42px; }
.ta-metric { min-width:0; min-height:98px; display:flex; gap:13px; align-items:center; padding:17px; border:1px solid var(--ta-line); border-radius:17px; background:rgba(255,255,255,.027); backdrop-filter:blur(12px); }
.ta-metric-icon { width:36px; height:36px; min-width:36px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.04); }
.ta-metric-icon svg { width:19px; height:19px; fill:none; stroke:var(--ta-cyan); stroke-width:1.5; }
.ta-icon-aurora { overflow:hidden; position:relative; }
.ta-icon-aurora span { width:24px; height:17px; border-radius:50%; border-top:2px solid var(--ta-green); border-right:1px solid transparent; transform:rotate(-13deg); filter:drop-shadow(0 0 5px rgba(143,255,196,.55)); }
.ta-metric span { display:block; color:var(--ta-soft); font-size:9px; font-weight:700; letter-spacing:.12em; white-space:nowrap; }
.ta-metric > div:last-child { min-width:0; }
.ta-metric .ta-ovation-sep,
.ta-metric .ta-ovation-range { display:inline; }
.ta-metric strong { display:block; color:#fff; font-size:20px; line-height:1.15; margin:2px 0 1px; white-space:nowrap; }
.ta-metric small { display:block; color:var(--ta-soft); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ta-timeline-block { margin-top:38px; padding-top:27px; border-top:1px solid var(--ta-line); }
.ta-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:19px; }
.ta-section-head>div>span { color:var(--ta-soft); font-size:9px; font-weight:700; letter-spacing:.16em; }
.ta-section-head h4 { color:#fff!important; font-size:20px!important; font-weight:500!important; letter-spacing:-.02em; margin:3px 0 0!important; }
.ta-legend { color:var(--ta-soft); font-size:10px; display:flex; align-items:center; gap:7px; }
.ta-legend span { width:16px; height:2px; background:linear-gradient(90deg,var(--ta-green),var(--ta-cyan)); box-shadow:0 0 10px rgba(143,255,196,.25); }
.ta-timeline { display:grid; grid-auto-flow:column; grid-auto-columns:46px; gap:5px; overflow-x:auto; padding-bottom:7px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.ta-hour { position:relative; min-height:136px; padding:11px 5px 10px; border-radius:12px; border:1px solid var(--ta-line); background:rgba(255,255,255,.025); display:flex; flex-direction:column; align-items:center; justify-content:space-between; overflow:hidden; }
.ta-hour.is-best { border-color:rgba(143,255,196,.28); background:linear-gradient(180deg,rgba(143,255,196,.08),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.ta-hour-time { color:#fff; font-size:11px; font-variant-numeric:tabular-nums; }
.ta-hour-bar-wrap { height:66px; display:flex; align-items:flex-end; width:14px; border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden; }
.ta-hour-bar { width:100%; min-height:2px; border-radius:999px; background:linear-gradient(to top,rgba(125,232,255,.42),var(--ta-green)); box-shadow:0 0 13px rgba(143,255,196,.24); transition:height .7s cubic-bezier(.2,.8,.2,1); }
.ta-hour-score { color:#fff; font-size:10px; font-weight:700; }
.ta-hour-cloud { color:var(--ta-soft); font-size:8px; }
.ta-hour-daylight .ta-hour-bar { background:rgba(255,255,255,.12); box-shadow:none; }
.ta-hour-daylight { opacity:.48; }


.ta-nights-block,
.ta-longrange-block { margin-top:38px; padding-top:27px; border-top:1px solid var(--ta-line); }
.ta-section-note { color:var(--ta-soft); font-size:10px; text-align:right; }

.ta-night-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ta-night-card { --night-color:var(--ta-green); position:relative; overflow:hidden; min-width:0; padding:20px; border:1px solid var(--ta-line); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); }
.ta-night-card:before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(to bottom,transparent,var(--night-color),transparent); opacity:.72; }
.ta-night-card:after { content:""; position:absolute; width:150px; height:90px; right:-55px; top:-45px; border-radius:50%; background:var(--night-color); filter:blur(55px); opacity:.06; pointer-events:none; }
.ta-night-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ta-night-kicker { display:block; color:var(--night-color); font-size:9px; line-height:1.2; letter-spacing:.14em; font-weight:800; }
.ta-night-date { display:block; color:#fff; font-size:15px; line-height:1.2; font-weight:520; margin-top:5px; text-transform:capitalize; }
.ta-night-status { flex:0 0 auto; max-width:48%; color:var(--ta-muted); font-size:8px; line-height:1.25; letter-spacing:.1em; text-align:right; }
.ta-night-score-row { display:grid; grid-template-columns:auto 1fr; align-items:end; gap:17px; margin:23px 0 18px; }
.ta-night-score { color:#fff; font-size:38px; line-height:.85; letter-spacing:-.055em; font-weight:520; }
.ta-night-score small { color:var(--ta-soft); font-size:10px; letter-spacing:0; margin-left:3px; }
.ta-night-meter { height:5px; margin-bottom:3px; border-radius:999px; background:rgba(255,255,255,.065); overflow:hidden; }
.ta-night-meter span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,rgba(125,232,255,.62),var(--night-color)); box-shadow:0 0 15px rgba(143,255,196,.18); }
.ta-night-facts { display:grid; grid-template-columns:1.45fr .6fr .75fr; gap:8px; padding-top:14px; border-top:1px solid rgba(255,255,255,.065); }
.ta-night-facts span { display:block; color:var(--ta-soft); font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.ta-night-facts strong { display:block; color:#fff; font-size:11px; line-height:1.25; margin-top:3px; font-weight:540; white-space:nowrap; }
.ta-night-darkhours { color:var(--ta-soft); font-size:9px; margin-top:13px; }

.ta-outlook-intro { margin:-5px 0 19px!important; max-width:820px; color:var(--ta-muted)!important; font-size:11px!important; line-height:1.55!important; }
.ta-outlook-grid { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:7px; }
.ta-outlook-day { min-width:0; min-height:135px; padding:11px 8px 10px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.018); display:flex; flex-direction:column; align-items:center; text-align:center; }
.ta-outlook-day.is-active { border-color:rgba(143,255,196,.18); background:linear-gradient(180deg,rgba(143,255,196,.045),rgba(255,255,255,.018)); }
.ta-outlook-date { min-height:28px; color:var(--ta-soft); font-size:8px; line-height:1.2; text-transform:capitalize; }
.ta-kp-track { position:relative; width:8px; height:48px; margin:7px 0; border-radius:999px; background:rgba(255,255,255,.055); overflow:hidden; display:flex; align-items:flex-end; }
.ta-kp-track span { display:block; width:100%; height:var(--kp-height,10%); min-height:3px; border-radius:999px; background:linear-gradient(to top,rgba(125,232,255,.48),var(--ta-green)); }
.ta-outlook-day strong { color:#fff; font-size:11px; line-height:1.15; }
.ta-outlook-day small { color:var(--ta-soft); font-size:7px; line-height:1.15; margin-top:4px; letter-spacing:.055em; }
.ta-outlook-legend { margin-top:10px; color:var(--ta-soft); font-size:9px; text-align:right; }

.ta-foot { display:flex; justify-content:space-between; gap:26px; align-items:flex-start; margin-top:24px; padding-top:20px; border-top:1px solid var(--ta-line); }
.ta-foot p { margin:0!important; max-width:700px; color:var(--ta-soft)!important; font-size:10px!important; line-height:1.5!important; }
.ta-sources { color:var(--ta-soft); font-size:9px; text-align:right; white-space:nowrap; }
.ta-sources a { color:rgba(218,255,236,.68)!important; text-decoration:none!important; border-bottom:1px solid rgba(143,255,196,.15); }
.ta-error { min-height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:var(--ta-muted); gap:5px; }
.ta-error strong { color:#fff; font-size:18px; }

@media (max-width: 980px) {
  .ta-hero-grid { grid-template-columns:1fr; }
  .ta-score-wrap { display:grid; grid-template-columns:150px 1fr; text-align:left; align-items:center; gap:22px; }
  .ta-score { width:150px; margin:0; grid-row:1 / span 3; }
  .ta-score-inner span { font-size:54px; }
  .ta-score-label { margin:0; }
  .ta-info-trigger { text-align:left; padding-left:0; }
  .ta-info-popover { right:auto; left:172px; transform:none; top:76%; }
  .ta-metrics { grid-template-columns:repeat(2,1fr); }
  .ta-night-grid { grid-template-columns:1fr; }
  .ta-outlook-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
}


@media (max-width: 620px) {
  .aurora-forecast { border-radius:22px; }
  .ta-shell { padding:22px 18px 24px; }
  .ta-header { display:block; padding-bottom:22px; }
  .ta-updated { text-align:left; margin-top:13px; }
  .ta-title { font-size:31px!important; }
  .ta-content { padding-top:26px; }
  .ta-hero-grid { gap:30px; }
  .ta-verdict h3 { font-size:42px!important; }
  .ta-score-wrap { grid-template-columns:126px 1fr; gap:16px; }
  .ta-score { width:126px; }
  .ta-score-inner span { font-size:44px; }
  .ta-info-popover { left:0; top:100%; width:100%; }
  .ta-metrics { grid-template-columns:1fr 1fr; gap:8px; margin-top:31px; }
  .ta-metric { min-height:88px; padding:12px 10px; gap:9px; }
  .ta-metric-icon { width:31px; height:31px; min-width:31px; }
  .ta-metric strong { font-size:17px; }
  .ta-metric small { display:none; }
  .ta-metric [data-ta="ovation-label"] { white-space:normal; line-height:1.28; }
  .ta-metric .ta-ovation-sep { display:none; }
  .ta-metric .ta-ovation-range { display:block; margin-top:2px; }
  .ta-section-head { align-items:flex-start; }
  .ta-legend { display:none; }
  .ta-foot { display:block; }
  .ta-sources { text-align:left; margin-top:12px; white-space:normal; }
  .ta-best-window { width:100%; }
  .ta-section-note { display:none; }
  .ta-timeline {
    grid-template-columns:repeat(7,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-columns:initial;
    gap:5px 4px;
    overflow-x:visible;
    padding-bottom:0;
  }
  .ta-hour { min-width:0; padding-left:3px; padding-right:3px; }
  .ta-hour-cloud { font-size:7px; white-space:nowrap; }
  .ta-night-card { padding:17px; }
  .ta-night-facts { grid-template-columns:1.35fr .65fr .75fr; }
  .ta-outlook-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-columns:initial;
    gap:7px 6px;
    overflow-x:visible;
    padding-bottom:0;
  }
  .ta-outlook-day { min-width:0; min-height:128px; }
  .ta-outlook-legend { text-align:left; }
}


@media (prefers-reduced-motion: reduce) {
  .ta-glow, .ta-live-dot, .ta-loading-orb { animation:none!important; }
  .ta-hour-bar { transition:none; }
}

/* Display modes */
.aurora-forecast--compact .ta-foot-compact {
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
}
.aurora-forecast--compact .ta-foot-compact .ta-sources {
  margin-left: auto;
}
@media (max-width: 767px) {
  .aurora-forecast--compact .ta-foot-compact {
    margin-top: 14px;
    padding-top: 12px;
  }
  .aurora-forecast--compact .ta-foot-compact .ta-sources {
    margin-left: 0;
  }
}
