/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --navy:         #050a14;
  --navy2:        #0a1628;
  --card:         rgba(255,255,255,0.045);
  --card-h:       rgba(255,255,255,0.075);
  --border:       rgba(255,255,255,0.08);
  --border-h:     rgba(255,255,255,0.18);
  --text:         #e8f4fd;
  --dim:          rgba(232,244,253,0.55);
  --faint:        rgba(232,244,253,0.28);
  --cyan:         #00d4ff;
  --cyan-g:       rgba(0,212,255,0.18);
  --purple:       #7b68ff;
  --purple-g:     rgba(123,104,255,0.18);
  --green:        #00e87a;
  --green-g:      rgba(0,232,122,0.18);
  --gold:         #ffd700;
  --gold-g:       rgba(255,215,0,0.18);
  --orange:       #ff8c42;
  --red:          #ff4757;
  --pink:         #ff6b9d;
  --yellow:       #ffff00;
  --magenta:      #ff00ff;
  --lime:         #00ff00;
  --deepskyblue:  #00bfff;
  --deeppink:     #ff1493;
  --radius-card:  22px;
  --radius-sm:    12px;
  --shadow:       0 20px 60px rgba(0,0,0,0.5);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:var(--navy);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   BACKGROUND LAYERS
   ============================================================ */
#bg-layer {
  position:fixed; inset:0; z-index:0;
  transition:background 5s ease;
  background:linear-gradient(160deg,#010408 0%,#050a14 50%,#080d1a 100%);
}
#aurora-layer {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity 4s ease;
}
#aurora-layer canvas { width:100%; height:100%; }

#star-layer {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity 3s ease;
}
.star {
  position:absolute; border-radius:50%; background:#fff;
  animation:twinkle var(--dur,3s) ease-in-out infinite;
  animation-delay:var(--del,0s);
}
@keyframes twinkle {
  0%,100%{opacity:var(--min,.1);transform:scale(1);}
  50%{opacity:var(--max,.7);transform:scale(1.3);}
}

#rain-layer {
  position:fixed; inset:0; z-index:3; pointer-events:none;
  display:none; overflow:hidden;
}
.rdrop {
  position:absolute; top:-30px; border-radius:2px;
  background:linear-gradient(transparent,rgba(150,200,255,0.55));
  animation:rfall linear infinite;
}
@keyframes rfall { to{transform:translateY(115vh) skewX(-8deg);} }

#flash-layer {
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:rgba(255,255,230,0); transition:background .06s;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app {
  position:relative; z-index:10;
  max-width:1440px; margin:0 auto;
  padding:0 28px 60px;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  padding:28px 0 24px;
  border-bottom:1px solid var(--border);
  margin-bottom:32px;
}
.brand { display:flex; align-items:center; gap:18px; }
.brand-icon {
  width:54px; height:54px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff;
  box-shadow:0 0 28px var(--cyan-g), 0 0 56px rgba(0,212,255,0.08);
}
.brand-name {
  font-family:'Outfit',sans-serif; font-size:28px; font-weight:900;
  letter-spacing:-0.5px; line-height:1.1;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--purple) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.brand-sub {
  font-size:13px; color:var(--dim); margin-top:3px;
  display:flex; align-items:center; gap:6px;
}
.brand-sub i { color:var(--pink); font-size:11px; }

.hdr-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.status-pill {
  display:flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:50px;
  background:var(--card); border:1px solid var(--border);
  font-size:13px; font-weight:500; user-select:none;
}
.sdot {
  width:8px; height:8px; border-radius:50%; background:#444;
  transition:background .3s, box-shadow .3s;
}
.sdot.live  { background:var(--green); box-shadow:0 0 8px var(--green); animation:pdot 2s infinite; }
.sdot.load  { background:var(--gold);  animation:pdot 0.8s infinite; }
.sdot.err   { background:var(--red); }
@keyframes pdot{ 0%,100%{opacity:1;}50%{opacity:.35;} }

.upd-time { font-size:12px; color:var(--faint); }
.refresh-btn {
  width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  color:var(--text); cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s;
}
.refresh-btn:hover { background:var(--card-h); border-color:var(--cyan); color:var(--cyan); }
.refresh-btn.spin i { animation:spin 0.9s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* ============================================================
   ERROR BANNER
   ============================================================ */
.err-banner {
  display:none; align-items:center; gap:10px;
  padding:12px 18px; border-radius:var(--radius-sm);
  background:rgba(255,71,87,.1); border:1px solid rgba(255,71,87,.3);
  color:#ff9099; font-size:13px; margin-bottom:18px;
}
.err-banner.show { display:flex; }

.hero {
  display:grid; grid-template-columns:1fr auto;
  gap:24px; align-items:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:34px 38px;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  position:relative; overflow:hidden;
  margin-bottom:24px;
  animation:fadeUp .6s ease both;
}
.hero::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:300px; height:300px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(0,212,255,.12) 0%,transparent 70%);
}
.hero::after {
  content:''; position:absolute; bottom:-60px; left:-60px;
  width:200px; height:200px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(123,104,255,.09) 0%,transparent 70%);
}

.hero-left { display:flex; align-items:center; gap:30px; flex-wrap:wrap; }

.wx-icon {
  font-size:88px; line-height:1; user-select:none;
  filter:drop-shadow(0 0 24px rgba(255,200,50,.4));
  animation:float 4s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0px);}50%{transform:translateY(-10px);} }

.temp-main {
  font-family:'Outfit',sans-serif;
  font-size:clamp(60px,8vw,100px); font-weight:900;
  letter-spacing:-4px; line-height:1;
  background:linear-gradient(135deg,#fff 20%,var(--cyan) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.temp-deg { font-size:clamp(28px,4vw,40px); font-weight:400; vertical-align:super; letter-spacing:0; }
.cond-text { font-size:21px; font-weight:700; margin-top:6px; }
.cond-sub {
  font-size:14px; color:var(--dim); margin-top:6px;
  display:flex; flex-wrap:wrap; gap:18px;
}
.cond-sub span { display:flex; align-items:center; gap:5px; }
.cond-sub i { color:var(--cyan); font-size:12px; }

/* Quick stats sidebar */
.hero-qstats {
  display: flex; 
  align-items: stretch; 
  gap: 0;
  background: transparent;   /* Fully transparent */
  border: 1px solid var(--border); /* Keeps the subtle outer ring */
  border-radius: 24px; 
  padding: 24px; 
  backdrop-filter: none; 
  width: 100%; 
  max-width: 600px; 
  margin-top: 5px;
  margin-left: 5px;
  box-sizing: border-box;
}

/* Added 7-12-2026 */
/* ── Tab Navigation for Astronomy/Twilight ── */
.tab-nav {
  display: flex;
  gap: 6px;
  margin-top: 50px;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.tab-btn {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}
.tab-btn.active {
  color: #050a14;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
}
.tab-content {
  position: relative;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.astro-pane.active {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.q-section { 
  flex: 1; 
  gap: 14px; 
}
.q-divider { 
  width: 1px; 
  background: var(--border); 
  margin: 0 24px; 
}

.qst { display: flex; align-items: center; gap: 12px; }
.qst-ico { 
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.qst-lbl-left { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--faint); line-height: 1; padding-top: 7px; }
.qst-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--faint); line-height: 1; }
.qst-val-left { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--text); padding-bottom: 7px; }
.qst-val { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--text); }
.qst-unit { font-size: 8px; color: var(--dim); font-weight: 400; margin-left: 2px; }

/* Sub-grid for dense data like Sun/Moon Alt/Dist */
.qst-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 10px; }

@media(max-width: 960px) {
  .hero-qstats { 
    flex-direction: column; 
    gap: 24px; 
    padding: 20px;
  }
  .q-divider { 
    width: 100%; 
    height: 1px; 
    margin: 12px 0; 
  }
}

/* Clock */
.hero-clock { text-align:right; min-width:180px; }
.clock-time {
  font-family:'Outfit',sans-serif; font-size:46px; font-weight:700;
  letter-spacing:-2px; line-height:1;
}
.clock-date { font-size:14px; color:var(--dim); margin-top:5px; }
.clock-tz { font-size:11px; color:var(--faint); margin-top:3px; letter-spacing:1.5px; text-transform:uppercase; }

/* ============================================================
   CARDS GRID
   ============================================================ */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:20px; margin-bottom:24px;
}
.grid-wide { grid-column:span 2; }
@media(max-width:700px){ .grid-wide{ grid-column:span 1; } }

.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:24px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:transform .3s, background .3s, border-color .3s, box-shadow .3s;
  position:relative; overflow:hidden;
  animation:fadeUp .6s ease both;
}
.card:hover {
  background:var(--card-h); border-color:var(--border-h);
  transform:translateY(-3px); box-shadow:var(--shadow);
}
@keyframes fadeUp{ from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} }
.card:nth-child(1){animation-delay:.08s;} .card:nth-child(2){animation-delay:.13s;}
.card:nth-child(3){animation-delay:.18s;} .card:nth-child(4){animation-delay:.23s;}
.card:nth-child(5){animation-delay:.28s;} .card:nth-child(6){animation-delay:.33s;}
.card:nth-child(7){animation-delay:.38s;} .card:nth-child(8){animation-delay:.43s;}

.card-topbar {
  position:absolute; top:0; left:24px; right:24px;
  height:2px; border-radius:0 0 2px 2px;
}
.ctitle {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--faint);
  display:flex; align-items:center; gap:8px; margin-bottom:18px;
}
.ctitle i { font-size:12px; }

/* ============================================================
   COMPASS CARD
   ============================================================ */
.compass-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; }
.compass-svg-wrap { position:relative; width:210px; height:210px; }
.compass-svg-wrap svg { display:block; }
.compass-ctr {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
.compass-spd {
  font-family:'Outfit',sans-serif; font-size:36px; font-weight:800; line-height:1;
}
.compass-unit-lbl { font-size:12px; color:var(--dim); margin-top:30px; }
.compass-dir-lbl { font-size:15px; font-weight:700; color:var(--cyan); margin-top:2px; }

.wind-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
.wind-cell {
  text-align:center; padding:12px 8px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.wcl { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--faint); }
.wval { font-size:22px; font-weight:700; font-family:'Outfit',sans-serif; margin-top:2px; }
.wunit { font-size:11px; color:var(--dim); }

.bf-badge {
  width:100%; text-align:center; padding:6px 12px;
  border-radius:50px; font-size:12px; font-weight:700;
  letter-spacing:.4px; margin-top:4px;
}
.bf-calm     {background:rgba(0,232,122,.13);color:var(--green);}
.bf-breeze   {background:rgba(0,212,255,.13);color:var(--cyan);}
.bf-moderate {background:rgba(255,215,0,.13);color:var(--gold);}
.bf-strong   {background:rgba(255,140,66,.13);color:var(--orange);}
.bf-storm    {background:rgba(255,71,87,.13);color:var(--red);}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.pbar-wrap { margin:10px 0; }
.pbar-row {
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--dim); margin-bottom:5px;
}
.pbar-track {
  height:5px; background:rgba(255,255,255,0.07);
  border-radius:3px; overflow:hidden;
}
.pbar-fill {
  height:100%; border-radius:3px; transition:width 1.2s cubic-bezier(.34,1.2,.64,1);
}

/* ============================================================
   STAT GRID (2-col or 3-col)
   ============================================================ */
.stat-grid { display:grid; gap:10px; margin-bottom:10px; }
.stat-grid-2 { grid-template-columns:1fr 1fr; }
.stat-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.stat-cell {
  text-align:center; padding:12px 6px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.sc-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); margin-bottom:4px; }
.sc-val { font-size:19px; font-weight:700; font-family:'Outfit',sans-serif; }
.sc-unit { font-size:11px; color:var(--dim); }

/* ============================================================
   BIG VALUE
   ============================================================ */
.big-val {
  font-family:'Outfit',sans-serif; font-size:52px; font-weight:800;
  letter-spacing:-2px; line-height:1;
}
.big-unit { font-size:18px; font-weight:400; color:var(--dim); margin-left:3px; }
.big-lbl { font-size:12px; color:var(--dim); margin-top:4px; }

/* ============================================================
   RAINFALL BARS
   ============================================================ */
.rain-bars {
  display:flex; align-items:flex-end; gap:8px;
  height:80px; margin:16px 0 10px;
}
.rb-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; }
.rb-track {
  flex:1; width:100%; background:rgba(255,255,255,0.05);
  border-radius:5px; overflow:hidden;
  display:flex; flex-direction:column-reverse;
}
.rb-fill {
  border-radius:5px;
  background:linear-gradient(to top,var(--cyan),var(--purple));
  transition:height 1.5s cubic-bezier(.34,1.4,.64,1);
}
.rb-lbl { font-size:10px; text-transform:uppercase; color:var(--faint); }
.rb-val { font-size:11px; font-weight:700; color:var(--dim); }
.rb-val2 { font-size:11px; font-weight:500; text-align:justify; padding:2px; padding-top:2px; color:var(--dim); }

/* ============================================================
   LIGHTNING CARD
   ============================================================ */
.bolt-icon {
  font-size:52px; text-align:center; display:block;
  color:var(--gold); margin:4px 0 12px;
  filter:drop-shadow(0 0 14px var(--gold));
  animation:bpulse 2.5s ease-in-out infinite;
}
.bolt-icon.inactive { opacity:.2; filter:none; animation:none; color:var(--dim); }
@keyframes bpulse{ 0%,100%{filter:drop-shadow(0 0 8px var(--gold));opacity:.8;} 50%{filter:drop-shadow(0 0 28px var(--gold));opacity:1;} }

/* ============================================================
   UV INDEX
   ============================================================ */
.uv-low      {color:var(--green);}
.uv-mod      {color:var(--gold);}
.uv-high     {color:var(--orange);}
.uv-vhigh    {color:var(--red);}
.uv-extreme  {color:var(--pink);}

/* ============================================================
   INDOOR DUAL
   ============================================================ */
.dual-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.dual-cell {
  padding:16px 10px; text-align:center;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.dual-ico { font-size:22px; margin-bottom:6px; }
.dual-val { font-size:26px; font-weight:700; font-family:'Outfit',sans-serif; }
.dual-lbl { font-size:11px; color:var(--dim); margin-top:2px; }

/* ============================================================
   FORECAST STACK – 2‑Column Grid Layout
   ============================================================ */
.fc-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  width: 100%;
}

.fc-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.fc-cell {
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.flex-1 {
  flex: 1;
  width: 100%;
}

.full-width {
  width: 100%;
}

/* 📱 Mobile: stack rows vertically on small screens */
@media (max-width: 600px) {
  .fc-row {
    flex-direction: column;
  }
}
.fc-cell2 {
  margin-top:15px;
  text-align: center;
  padding:14px; background:rgba(14,19,26,0.03);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.fc-cell3 {
  margin-top:3px;
  text-align: center;
  padding:5px; background:rgba(14,19,26,0.03);
  border:0px solid var(--border); border-radius:var(--radius-sm);
}
.hr-event {
  border: 0;
  border-top: 1px dotted #8c8c8c;
  border-bottom: 1px dotted #fff;
}
.wh40h {
  float: right;
  vertical-align: top;
  text-align: center;
  margin-top: 0px;
  padding:5px; background:rgba(14,19,26,0.03);
  border:0px solid var(--border); border-radius:var(--radius-sm);
}
.gw3000c {
  text-align: center;
  margin-top: 0px;
  padding:5px; background:rgba(14,19,26,0.03);
  border:0px solid var(--border); border-radius:var(--radius-sm);
}
.wh57 {
  text-align: center;
  margin-top: 25px;
  padding-top: 5px;
  padding:5px; background:rgba(14,19,26,0.03);
  border:0px solid var(--border); border-radius:var(--radius-sm);
}
.logo {
  margin-top:5px;
  text-align: center;
  min-width:400;
  padding:14px; background:rgba(14,19,26,0.03);
  border:0px solid var(--border); border-radius:var(--radius-sm);
}
.fc-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--faint); margin-bottom:6px; }
.fc-txt { font-size:12.5px; color:var(--text); line-height:1.55; }

/* ── Weather Icon inside forecast card ── */
.wx-icon-sm {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
}

.conf-bar { height:4px; border-radius:2px; background:rgba(255,255,255,.07); margin-top:8px; }
.conf-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--green));
  transition:width 1.2s ease;
}

/* ============================================================
   CHARTS
   ============================================================ */
.charts-hdr {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--dim);
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.charts-hdr { content:''; flex:1; height:1px; background:var(--border); }
.charts-hdr i { color:var(--cyan); }

.chart-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:20px; margin-bottom:28px;
}
.chart-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:22px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.chart-ttl {
  font-size:13px; font-weight:600; color:var(--dim);
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.chart-ttl i { color:var(--cyan); }
.chart-wrap { position:relative; height:165px; }

/* ============================================================
   DB STATS BAR
   Order: Top-Left | Top-Right | Bottom-Right | Bottom-Left
   ============================================================ */
/* ── 5‑Section Extremes Row ── */
.stats-row-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

/* ── Stats Header & Layout ── */
.stats-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--faint);
  padding-right: 2px;
  margin-bottom: 2px;
}

.stats-header-min {
  color: var(--dim);  /* match min color <--  #8cff8c; */
  font-size: 10px;
}
.stats-header-max {
  color: var(--dim);  /* match max color <-- #ffd700; */
  font-size: 10px;
}

.stats-divider {
  border-top: 1px solid var(--border);
  margin: 4px 0 6px 0;
  width: 100%;
  opacity: 0.5;
}

.stats-label {
  flex: 1;
  font-size: 11px;
  color: var(--dim);
  font-weight: 500;
}

/* Adjust existing .stats-line to accommodate the label */
.stats-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}

.stats-sep {
  color: var(--dim);
  font-size: 12px;
  font-weight: 300;
  padding: 0 3px;
}

.stats-box {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 9px;
  padding: 0;
  min-width: 28px;
  text-align: right;
  background: transparent;
}
.stats-box.min {            /* color: #8cff8c; */
    color: var(--text);
    font-size: 11px;
}
.stats-box.max {            /* color: #ffd700; */
    color: var(--text);
    font-size: 11px;
}

/* Keep Yearly Rain big as is */
.stats-current-big {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  line-height: 1.2;
}

.stats-sep {
  color: var(--dim);
  font-size: 14px;
  font-weight: 300;
  padding: 0 2px;
}

.stats-section-left {
  background: var(--card);
  border: 0px dashed;
  /* Order: Top-Left | Top-Right | Bottom-Right | Bottom-Left       <-- border-radius: var(--radius-card); */
  border-radius: 15px 0 0px 15px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.stats-section {
  background: var(--card);
  border: 0px dashed;
  /* Order: Top-Left | Top-Right | Bottom-Right | Bottom-Left       <-- border-radius: var(--radius-card); */
  border-radius: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.stats-section-right {
  background: var(--card);
  border: 0px dashed;
  /* Order: Top-Left | Top-Right | Bottom-Right | Bottom-Left       <-- border-radius: var(--radius-card); */
  border-radius: 0 15px 15px 0px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.stats-title {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-bottom: 6px;
}
.stats-title .stats-unit {
  color: var(--dim);
  font-weight: 400;
}

.stats-current-big {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 6px;
}

.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stats-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--dim);
  padding: 2px 0;
}
/* Optionally, force the label to stay on the left */
.stats-line span:first-child {
  flex: 1;
}

/* Responsive */
@media (max-width: 1200px) {
  .stats-row-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .stats-row-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .stats-row-5 {
    grid-template-columns: 1fr;
  }
}

/* ── End of 5‑Card-Single-Row Extremes ── */

.dbst-cell {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px 14px;
  text-align:center;
  animation:fadeUp .5s ease both;
}
.dbst-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--faint); margin-bottom:6px; }
.dbst-val { font-size:22px; font-weight:700; font-family:'Outfit',sans-serif; }
.dbst-unit { font-size:11px; color:var(--dim); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  text-align:center; font-size:12px; color:var(--faint);
  padding-top:24px; border-top:1px solid var(--border);
}
.footer span { color:var(--dim); }

/* ============================================================
   UPDATE FLASH
   ============================================================ */
@keyframes uflash {
  0%{box-shadow:0 0 0 2px rgba(0,212,255,.5);}
  100%{box-shadow:none;}
}
.uflash { animation:uflash .9s ease; }

/* Hero Right Side Layout */
.hero-right {
  border: 0px solid var(--border);
  display:flex; flex-direction:column; gap:28px;
  align-self:stretch; justify-content:space-between;
  align-items:flex-end; min-width:230px;
}
.hero-upcoming-phases { text-align:right; width:100%; }
.next-phases-cards { display:flex; gap:10px; justify-content:flex-end; }
.phase-card {
  flex:1; background:rgba(255,255,255,0.02); border:1px solid var(--border);
  border-radius:12px; padding:10px 8px; text-align:center; min-width:85px;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  transition:all 0.3s ease;
}
.phase-card:hover {
  background:rgba(255,255,255,0.05); border-color:var(--border-h);
  transform:translateY(-2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .hero { grid-template-columns:1fr; }
  .hero-clock { text-align:left; }
  .hero-right {
    align-items:flex-start; min-width:100%;
    margin-top:20px; border-top:1px solid var(--border); padding-top:20px;
  }
  .hero-upcoming-phases { text-align:right; }
  .next-phases-cards { justify-content:flex-start; }
}
@media(max-width:600px){
  .app { padding:0 14px 40px; }
  .hero { padding:22px; }
  .brand-name { font-size:22px; }
  .temp-main { font-size:52px; }
  .grid { grid-template-columns:1fr; }
  .chart-grid { grid-template-columns:1fr; }
  .charts-hdr { flex-direction: column; align-items: flex-start; gap: 8px; }                /* Added 6-11-2026*/
  .charts-hdr { display: none; }
  .range-selector { margin-left: 0; }
}

/************************* Added 6-11-2026 *********************************/
.range-selector {
  display: flex;
  gap: 6px;
  margin-left: 14px;
}
.range-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--dim);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.range-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.range-btn.active {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #050a14;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* ── Source toggle (DB / DEV) ── */
.source-toggle {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--dim);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;      /* ← pushes to far right */
  user-select: none;
  font-family: 'Inter', sans-serif;
}
.source-toggle:hover {
  background: rgba(255,255,255,0.1);
}
.source-toggle.active {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #050a14;
  border-color: transparent;
}

.source-toggle.dev-active {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #050a14;
  border-color: transparent;
}
.source-toggle.db-active {
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #050a14;
  border-color: transparent;
}