/* Dashboard v2 - Apple Weather Inspired */
*{box-sizing:border-box}
html,body{height:100%; width:100%; margin:0; padding:0; background:#000; color:#fff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; overflow:hidden; -webkit-font-smoothing:antialiased }

body{
  background:
   radial-gradient(1200px 700px at 20% 15%, rgba(64,146,255,0.18), transparent 60%),
   radial-gradient(900px 600px at 85% 25%, rgba(142,84,255,0.18), transparent 55%),
   radial-gradient(900px 600px at 60% 90%, rgba(46,204,113,0.10), transparent 55%),
   linear-gradient(180deg, #05070b, #04060a 55%, #03050a);
 }

.screen{
  position:fixed;
  inset:0;
  padding:18px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns: 0.85fr 2.15fr;
  gap:16px;
 }

.left-col{ display:grid; grid-template-rows: 200px 1fr; gap:16px; min-height:0 }
.right-col{ display:grid; grid-template-rows: 200px 200px 1fr; gap:16px; min-height:0 }
.weather-top{ display:grid; grid-template-columns: 1.2fr 1.25fr; gap:16px; min-height:0 }
.weather-mid{ display:grid; grid-template-columns: 1.2fr 1.25fr; gap:16px; min-height:0 }
.panel{
  border-radius:28px;
  padding:18px 20px;
  box-sizing:border-box;
  background: rgba(18, 22, 30, 0.22);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 24px rgba(0,0,0,0.25),
    0 24px 48px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  overflow:hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.panel.panel-radar{ padding:0 }

.panel-title{
  color: rgba(255,255,255,0.70);
  font-weight:800;
  font-size:16px;
  letter-spacing: .14em;
  text-transform:uppercase;
  margin:0 0 14px 0;
 }

.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px }

/* Time/Date with Status Pills - Horizontal Layout */
.panel-clock{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:24px; padding:16px 20px }
.clock-main{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; flex-shrink:0 }
.dt-time{ font-size:88px; font-weight:600; line-height:1; font-variant-numeric: tabular-nums; letter-spacing:-1px; color:#fff }
.dt-date{ color:rgba(255,255,255,0.75); font-size:16px; line-height:1.3; font-weight:500; margin-top:2px }
.dt-date .tz{ margin-left:.4rem; color:rgba(255,255,255,0.55); font-weight:700; font-size:14px }
.clock-status{ display:flex; flex-direction:column; gap:8px; align-items:flex-start }

/* Current Conditions Hero - Apple Weather Quality Background System */
.panel-now{ display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border:none; border-radius:32px }
.wx-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none }
.now-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; transition: background 1.5s ease-in-out }

/* Animated Cloud Layers - Oversized to allow movement within clipped container */
.panel-now::before,
.panel-now::after {
  content: "";
  position: absolute;
  top: -30%; left: -30%; right: -30%; bottom: -30%;
  z-index: 2;
  pointer-events: none;
}
/* DEFAULT: Dark cloud masses that continuously drift */
.panel-now::before {
  background: 
    radial-gradient(ellipse 35% 30% at 30% 35%, rgba(35,50,75,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 70% 30%, rgba(30,45,70,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 25%, rgba(40,55,80,0.8) 0%, transparent 65%);
  animation: cloud-drift-1 12s ease-in-out infinite;
}
.panel-now::after {
  background: 
    radial-gradient(ellipse 45% 40% at 35% 70%, rgba(45,60,90,0.85) 0%, transparent 65%),
    radial-gradient(ellipse 35% 30% at 65% 65%, rgba(40,55,85,0.8) 0%, transparent 65%);
  animation: cloud-drift-2 15s ease-in-out infinite;
}

/* Soften the animated layers to avoid harsh blobs */
.panel-now::before, .panel-now::after{ filter: blur(18px); opacity:0.35; mix-blend-mode: soft-light }
.panel-now.wx-rain::before, .panel-now.wx-rain::after{ opacity:0.5; filter: blur(22px) }
.panel-now.wx-cloudy::before, .panel-now.wx-cloudy::after{ opacity:0.35; filter: blur(20px) }
.panel-now.wx-snow::before, .panel-now.wx-snow::after{ opacity:0.28; filter: blur(22px) }
.panel-now.wx-fog::before, .panel-now.wx-fog::after{ opacity:0.55; filter: blur(30px); mix-blend-mode: screen }

/* RAIN - Stormy animated clouds with visible dark masses */
.panel-now.wx-rain::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(40,50,70,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(35,45,65,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 60%, rgba(45,55,75,0.8) 0%, transparent 60%);
  animation: cloud-drift-1 15s ease-in-out infinite;
}
.panel-now.wx-rain::after {
  background:
    radial-gradient(ellipse 80% 70% at 30% 70%, rgba(50,65,90,0.85) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 70% 80%, rgba(45,60,85,0.8) 0%, transparent 60%);
  animation: cloud-drift-2 20s ease-in-out infinite;
}
.panel-now.wx-rain.tod-night::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(20,28,45,0.95) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(18,25,40,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 60%, rgba(25,32,50,0.85) 0%, transparent 60%);
}
.panel-now.wx-rain.tod-night::after {
  background:
    radial-gradient(ellipse 80% 70% at 30% 70%, rgba(28,38,60,0.9) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 70% 80%, rgba(25,35,55,0.85) 0%, transparent 60%);
}

/* CLOUDY - Visible drifting cloud masses - BRIGHT for testing */
.panel-now.wx-cloudy::before {
  background:
    radial-gradient(ellipse 50% 40% at 15% 25%, rgba(100,120,150,0.95) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 85% 30%, rgba(90,110,140,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 50% 15%, rgba(110,130,160,0.85) 0%, transparent 65%);
  animation: cloud-drift-1 12s ease-in-out infinite;
}
.panel-now.wx-cloudy::after {
  background:
    radial-gradient(ellipse 120% 70% at 35% 70%, rgba(200,215,235,0.7) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 75% 60%, rgba(190,205,225,0.65) 0%, transparent 50%);
  filter: blur(15px);
  animation: cloud-drift-2 40s ease-in-out infinite;
}
.panel-now.wx-cloudy.tod-night::before {
  background:
    radial-gradient(ellipse 100% 60% at 20% 25%, rgba(70,85,110,0.8) 0%, transparent 50%),
    radial-gradient(ellipse 90% 55% at 80% 35%, rgba(60,75,100,0.75) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 15%, rgba(80,95,120,0.7) 0%, transparent 45%);
}
.panel-now.wx-cloudy.tod-night::after {
  background:
    radial-gradient(ellipse 120% 70% at 35% 70%, rgba(90,105,130,0.6) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 75% 60%, rgba(80,95,120,0.55) 0%, transparent 50%);
}

/* SNOW - Bright overcast with subtle movement */
.panel-now.wx-snow::before {
  opacity: 0.6;
  background:
    radial-gradient(ellipse 100% 70% at 25% 20%, rgba(210,225,245,0.9) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 75% 30%, rgba(200,220,240,0.85) 0%, transparent 50%);
  animation: cloud-drift-1 40s ease-in-out infinite;
}
.panel-now.wx-snow::after {
  opacity: 0.4;
  background:
    radial-gradient(ellipse 120% 80% at 40% 70%, rgba(220,235,250,0.75) 0%, transparent 55%);
  filter: blur(20px);
  animation: cloud-drift-2 45s ease-in-out infinite;
}

/* FOG - Heavy misty layers */
.panel-now.wx-fog::before {
  opacity: 0.85;
  background:
    radial-gradient(ellipse 150% 100% at 30% 40%, rgba(190,205,225,0.9) 0%, transparent 60%),
    radial-gradient(ellipse 140% 90% at 70% 50%, rgba(180,195,215,0.85) 0%, transparent 55%);
  filter: blur(25px);
  animation: fog-drift-1 20s ease-in-out infinite;
}
.panel-now.wx-fog::after {
  opacity: 0.7;
  background:
    radial-gradient(ellipse 180% 120% at 50% 60%, rgba(200,215,235,0.8) 0%, transparent 65%);
  filter: blur(35px);
  animation: fog-drift-2 25s ease-in-out infinite;
}

/* CLEAR - Subtle atmospheric glow */
.panel-now.wx-clear.tod-day::before {
  opacity: 0.4;
  background:
    radial-gradient(circle 200px at 85% 15%, rgba(255,250,230,0.95) 0%, rgba(255,235,180,0.4) 40%, transparent 65%);
  animation: sun-glow 8s ease-in-out infinite;
}
.panel-now.wx-clear.tod-night::before {
  opacity: 0.3;
  background:
    radial-gradient(circle 60px at 80% 20%, rgba(240,245,255,0.6) 0%, transparent 60%);
  animation: moon-glow 10s ease-in-out infinite;
}
.panel-now.wx-clear.tod-night::after {
  opacity: 0.8;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 45% 15%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 85% 40%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 55% 45%, rgba(255,255,255,0.5), transparent);
  background-size: 150px 150px, 200px 180px, 180px 200px, 160px 170px, 190px 160px, 170px 190px;
  animation: twinkle 6s ease-in-out infinite;
}
.panel-now.wx-clear.tod-golden::before {
  opacity: 0.6;
  background:
    radial-gradient(circle 180px at 88% 25%, rgba(255,180,100,0.9) 0%, rgba(255,140,60,0.4) 45%, transparent 70%);
  animation: sun-glow 6s ease-in-out infinite;
}
.panel-now.wx-clear.tod-dawn::before {
  opacity: 0.5;
  background:
    radial-gradient(circle 150px at 15% 75%, rgba(255,160,120,0.8) 0%, rgba(255,120,80,0.3) 50%, transparent 70%);
  animation: sun-glow 8s ease-in-out infinite;
}

/* Cloud animation keyframes - smooth drifting movement */
@keyframes cloud-drift-1 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(15%) translateY(5%); }
}
@keyframes cloud-drift-2 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-12%) translateY(-4%); }
}
@keyframes fog-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate(4%, 0) scale(1.05); opacity: 0.75; }
}
@keyframes fog-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(-3%, 1%) scale(1.08); opacity: 0.6; }
}
@keyframes sun-glow {
  0%, 100% { transform: scale(1); opacity: inherit; }
  50% { transform: scale(1.1); opacity: 0.9; }
}
@keyframes moon-glow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.05); opacity: 0.4; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.8; }
  25% { opacity: 0.6; }
  50% { opacity: 0.9; }
  75% { opacity: 0.5; }
}
/* Weather Hero - Large readable layout */
.now-hero{ position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; gap:24px; width:100%; height:100%; padding:20px; border-radius:inherit }
.now-hero, .now-hero *{ color:#fff }
.now-hero{ text-shadow: 0 2px 14px rgba(0,0,0,0.65) }
.now-hero .icon{ width:100px; height:100px; display:block; filter: drop-shadow(0 10px 28px rgba(0,0,0,0.6)); flex-shrink:0 }
.temp-block{ display:flex; flex-direction:column; align-items:flex-start; gap:4px }
.now-hero .temp{ font-size:88px; font-weight:300; line-height:1; letter-spacing:-4px; text-shadow: 0 6px 34px rgba(0,0,0,0.55) }
.now-hero .temp .tval{ display:inline-block }
.now-hero .cond{ color:#fff; font-size:28px; font-weight:500; line-height:1.1; text-shadow: 0 4px 20px rgba(0,0,0,0.5) }
.now-hero .feels{ color:rgba(255,255,255,0.85); font-size:24px; font-weight:400; line-height:1; text-shadow: 0 3px 16px rgba(0,0,0,0.45) }
.hilo-block{ display:flex; flex-direction:column; gap:8px; padding-left:20px; border-left:2px solid rgba(255,255,255,0.2) }
.hilo-block .hi{ color:#fff; font-size:32px; font-weight:600; line-height:1; text-shadow: 0 4px 18px rgba(0,0,0,0.45) }
.hilo-block .lo{ color:rgba(255,255,255,0.75); font-size:32px; font-weight:500; line-height:1; text-shadow: 0 4px 18px rgba(0,0,0,0.45) }

/* Status indicator - fixed top right corner of screen */
body > .status-pill{ position:fixed; top:8px; right:8px; z-index:9999 }
.status-pill .dot{ width:14px; height:14px; border-radius:999px; background:#ff4d4f; box-shadow:0 0 0 3px rgba(255,77,79,0.25), 0 0 16px rgba(255,77,79,0.5); animation: pulse-err 2s ease-in-out infinite }
.status-pill.ok .dot{ background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,0.25), 0 0 10px rgba(52,211,153,0.4); animation: none }
.status-pill.warn .dot{ background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,0.25), 0 0 12px rgba(251,191,36,0.45); animation: pulse-warn 2s ease-in-out infinite }
.status-pill.err .dot{ background:#f87171; box-shadow:0 0 0 3px rgba(248,113,113,0.25), 0 0 16px rgba(248,113,113,0.5); animation: pulse-err 2s ease-in-out infinite }
@keyframes pulse-err { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes pulse-warn { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.panel-alerts{ position:relative; padding:14px 16px; display:flex; flex-direction:column; justify-content:center }

.alerts-body{ color:rgba(255,255,255,0.82); font-size:14px; line-height:1.2; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; padding-right:0 }
.panel-alerts .alerts-body::-webkit-scrollbar{ display:none }
.alert-item{ padding:10px 12px; border-radius:14px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06) }
.alert-item + .alert-item{ margin-top:8px }
.alert-head{ font-weight:600; color:#fff; font-size:15px; line-height:1.2; word-break: break-word }
.alert-meta{ margin-top:4px; color:rgba(255,255,255,0.55); font-size:12px; word-break: break-word; line-height:1.35 }
.alert-sev{ display:inline-block; padding:3px 8px; border-radius:6px; background: rgba(248,113,113,0.15); border:1px solid rgba(248,113,113,0.25); color:rgba(248,113,113,0.95); font-weight:600; font-size:11px; margin-right:8px; text-transform:uppercase; letter-spacing:0.5px }

/* Calendar - Large fonts for distance readability */
.panel-calendar{ display:flex; flex-direction:column; min-height:0 }
.calendar-map{ display:flex; flex-direction:column; min-height:0 }
.cal-body{ color:rgba(255,255,255,0.82); font-size:18px; line-height:1.25; overflow:hidden }
.calendar-map .cal-body{ flex:1 1 auto; overflow:auto; display:flex; flex-direction:column; gap:8px; scrollbar-width:none; -ms-overflow-style:none }
.calendar-map .cal-body::-webkit-scrollbar{ display:none }
.cal-item{ padding:12px 12px; border-radius:14px; background: rgba(7,9,12,0.35); border:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:3px }
.cal-item + .cal-item{ margin-top:6px }
.calendar-map .cal-item + .cal-item{ margin-top:0 }
.cal-when{ color:rgba(255,255,255,0.72); font-size:13px; font-weight:800; text-transform:uppercase }
.cal-title{ color:#fff; font-size:18px; font-weight:700; line-height:1.15; text-transform:uppercase }
.cal-loc{ color:rgba(255,255,255,0.55); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cal-item.holiday{ border-color: rgba(255, 210, 97, 0.26); background: rgba(25, 18, 6, 0.28) }
.cal-badge{ display:inline-flex; align-self:flex-start; margin-top:6px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255, 210, 97, 0.28); color: rgba(255, 210, 97, 0.92); font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase }

/* Hourly precip strip */
.wx-hourly{ display:flex; gap:10px; overflow:hidden; margin-bottom:12px }
.wx-h{ flex:1 1 0; min-width:0; padding:10px 8px; border-radius:16px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.05); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; transition: background 0.2s ease }
.wx-h:hover{ background: rgba(255,255,255,0.08) }
.wx-h .t{ color:rgba(255,255,255,0.7); font-weight:600; font-size:14px }
.wx-h .wx-ht{ color:#fff; font-weight:600; font-size:18px; line-height:1 }
.wx-h .pop{ color:rgba(100,180,255,0.9); font-weight:600; font-size:14px }
.wx-h .bar{ width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden }
.wx-h .bar > span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, rgba(80,160,255,1), rgba(120,200,255,0.8)); border-radius:999px }
.wx-h.rain .t{ color:#9ecfff }

.wx-details{ display:flex; flex-direction:column; gap:10px; flex:1 }
.wx-metrics{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; flex:1 }
.wx-metrics .m{ padding:12px 14px; border-radius:14px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.05); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center }
.wx-details .k{ color:rgba(255,255,255,0.55); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase }
.wx-details .v{ margin-top:4px; color:#fff; font-weight:700; font-size:30px; letter-spacing:-.3px }
.wx-next{ padding:12px 14px; border-radius:14px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.05); box-sizing:border-box }
.wx-next .v{ font-size:30px; font-weight:600 }

/* Radar */
.radar{ display:flex; flex-direction:column; min-height:0 }
.radar-wrap{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; border-radius:inherit; overflow:hidden; background:rgba(0,0,0,0.35); border:none; position:relative }
.radar-img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0.95 }
.radar-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#9aa4b2; font-weight:750 }
.radar-fallback[hidden]{ display:none !important }

/* MTA/ASP Status Pills - larger for readability */
.mta-pill, .asp-pill{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.9); font-weight:600; font-size:16px; letter-spacing:0; transition: all 0.2s ease }
.mta-pill.ok{ background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.35); color: #34d399 }
.mta-pill.warn{ background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fbbf24 }
.mta-pill.err{ background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.35); color: #f87171 }
.mta-pill.unknown, .asp-pill.unknown{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6) }
.asp-pill.in-effect{ background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.35); color: #f87171 }
.asp-pill.suspended{ background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.35); color: #34d399 }

/* Night mode: dim and invert the radar so bright whites aren't distracting */
body.night .radar-wrap{ background:#000 }
body.night .radar-img{ opacity:0.90; filter: invert(1) hue-rotate(180deg) brightness(0.62) contrast(1.18) saturate(0.95) }
body.night .radar-wrap::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0.22); pointer-events:none }

/* Radar Popup */
.radar-popup{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}

.radar-popup:not([hidden]){
  opacity:1;
  visibility:visible;
}

.radar-popup-content{
  background: rgba(18, 22, 30, 0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius:24px;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.4),
    0 16px 64px rgba(0,0,0,0.3);
  max-width:90vw;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  transform:scale(0.9);
  transition:transform 0.3s ease;
}

.radar-popup:not([hidden]) .radar-popup-content{
  transform:scale(1);
}

.radar-popup-controls{
  display:flex;
  gap:8px;
  padding:16px 20px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.radar-zoom-btn{
  padding:6px 12px;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  border-radius:10px;
  font-weight:600;
  font-size:12px;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap;
}

.radar-zoom-btn:hover{
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
}

.radar-zoom-btn.active{
  background: rgba(64,146,255,0.2);
  border-color: rgba(64,146,255,0.4);
  color: #4092ff;
}

.radar-popup-image-container{
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:400px;
}

.radar-popup-img{
  max-width:100%;
  max-height:70vh;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}

/* Make radar image clickable */
.radar-img{
  cursor:pointer;
  transition:transform 0.2s ease, opacity 0.2s ease;
}

.radar-img:hover{
  transform:scale(1.02);
  opacity:1;
}

body.night .radar-popup-img{
  filter: invert(1) hue-rotate(180deg) brightness(0.62) contrast(1.18) saturate(0.95);
}

/* 7-day */
.panel-days{ padding:12px 12px; min-height:0 }
.wx-days{ display:grid; grid-template-columns: repeat(7, 1fr); gap:12px; height:100% }
/* 7-day forecast - LARGE readable fonts for distance viewing */
.tb-day{ background: rgba(255,255,255,0.04); padding:12px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:0; border:1px solid rgba(255,255,255,0.05); border-radius:20px; box-sizing:border-box; transition: background 0.2s ease }
.tb-day.today{ background: rgba(100,150,255,0.15); border-color: rgba(100,150,255,0.3) }
.tb-day .name{ color:rgba(255,255,255,0.85); font-size:20px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; max-width:100% }
.tb-day .date{ color:rgba(255,255,255,0.6); font-size:14px; font-weight:600; line-height:1; margin-top:-4px }
.tb-day.today .name{ color:#fff; font-weight:700 }
.tb-day .ico{ width:56px; height:56px; display:block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)) }
.tb-day .range{ display:flex; flex-direction:row; align-items:baseline; gap:14px; font-size:24px; line-height:1 }
.tb-day .hi{ font-weight:700; color:#fff }
.tb-day .lo{ color:rgba(255,255,255,0.55); font-weight:500 }

 /* Hourly popup overlay */
 .wx-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display:flex; align-items:center; justify-content:center; z-index:9999; animation: fade-in 0.2s ease }
 @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
 .wx-modal{ width:min(1400px, 96vw); max-height:min(80vh, 720px); background: rgba(18,22,30,0.95); border:1px solid rgba(255,255,255,0.08); border-radius:24px; overflow:hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 24px 64px rgba(0,0,0,0.5); animation: modal-in 0.25s ease }
 @keyframes modal-in { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
 .wx-modal-head{ padding:16px 20px; font-weight:600; font-size:15px; border-bottom:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.7) }
 .wx-modal-body{ padding:16px 0; overflow-x:auto; overflow-y:auto }
 .wx-hour-col .h-ico{ width:30px; height:30px; display:block }
 .wx-hour-col .h-temp{ font-weight:800; font-size:16px; display:flex; align-items:baseline; gap:4px; margin-top:6px; margin-bottom:12px }
 .wx-hour-col .h-temp .thermo-ico{ width:12px; height:12px; display:inline-block; background-repeat:no-repeat; background-size:12px 12px; background-position:center; filter: none; opacity:.95; transform: translateY(1px) }
 .wx-hour-col .h-temp .thermo-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cfd3d9'%3E%3Cpath d='M15 17a3 3 0 11-6 0c0-1.3.84-2.4 2-2.82V6a2 2 0 114 0v8.18A3.001 3.001 0 0115 17zm-3-13a1 1 0 00-1 1v9.09a4 4 0 101 0V5a1 1 0 00-1-1z'/%3E%3C/svg%3E"); }
 .wx-hour-col .h-pop::before, .wx-hour-col .h-uv::before, .wx-hour-col .h-rh::before{ content:""; display:inline-block; width:12px; height:12px; margin-right:6px; background-repeat:no-repeat; background-size:12px 12px; background-position:center; opacity:.95 }
 .wx-hour-col .h-pop::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cfd3d9'%3E%3Cpath d='M12 2C7.58 2 4 5.58 4 10h16c0-4.42-3.58-8-8-8zm1 10v6a3 3 0 01-6 0h2a1 1 0 002 0v-6h2z'/%3E%3C/svg%3E"); }
 .wx-hour-col .h-uv::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cfd3d9'%3E%3Cpath d='M6.76 4.84l-1.8-1.79L3.5 4.5l1.79 1.79 1.47-1.45zM1 13h3v-2H1v2zm10-9h2V1h-2v3zm7.5.5l-1.79-1.79-1.47 1.45 1.79 1.79L18.5 4.5zM17 13h3v-2h-3v2zM6.76 19.16L5 20.95 3.5 19.5l1.79-1.79 1.47 1.45zM11 23h2v-3h-2v3zm7.5-3.5l-1.47-1.45 1.79-1.79 1.45 1.47-1.77 1.77zM12 8a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E"); }
 .wx-hour-col .h-rh::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cfd3d9'%3E%3Cpath d='M12 2s7 7.58 7 12a7 7 0 11-14 0c0-4.42 7-12 7-12zm0 18a5 5 0 100-10 5 5 0 000 10z'/%3E%3C/svg%3E"); }
 .wx-hour-col .wind{ display:flex; flex-direction:column; align-items:center; gap:0; color:#cfd3d9; font-size:12px; text-align:center; padding:0; margin-top:28px }
 .wx-hour-col .wind-ico{ width:12px; height:12px; display:inline-block; background-repeat:no-repeat; background-size:12px 12px; background-position:center; opacity:.95 }
 .wx-hour-col .wind-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2l5 8h-3v12h-4V10H7z'/%3E%3C/svg%3E"); }
 .wx-hour-col .wind-spd{ font-weight:700; display:block; margin:0; line-height:1; text-align:center }
 .wx-hour-col .wind-dir{ color:#9aa4b2; font-size:12px; display:block; margin:2px 0 0 0; line-height:1; text-align:center }

 /* Horizontal hourly grid */
 .wx-grid-hours{ display:flex; gap:12px; overflow-x:auto; padding:10px 16px; scrollbar-width:none; -ms-overflow-style:none }
 .wx-grid-hours::-webkit-scrollbar{ display:none }
 .wx-hour-col{ flex:0 0 auto; width:120px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; color:#cfd3d9 }
 .wx-hour-col .h-time{ color:#cfd3d9; font-weight:700; font-size:14px }
 .wx-hour-col .h-time{ margin-bottom:4px }

/* V1 / V2 mode switch */
.version-toggle{
  position:fixed;
  top:10px;
  left:10px;
  z-index:10000;
  display:flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(5,8,14,.62);
  color:rgba(255,255,255,.78);
  font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
}
.vt-knob{ width:24px; height:24px; border-radius:999px; background:linear-gradient(135deg,#64d2ff,#7c5cff); box-shadow:0 0 18px rgba(100,210,255,.55); transform:translateX(-29px); order:-1; transition:transform .25s ease, background .25s ease }
body.dashboard-v2 .vt-knob{ transform:translateX(29px); background:linear-gradient(135deg,#b8ff5c,#4ee6a8) }
body.dashboard-v2 .v1-screen{ display:none }
.v2-screen{ display:none }
body.dashboard-v2 .v2-screen{ display:grid }

/* Dashboard V2: 10-foot Surface Book layout */
.v2-screen{
  position:fixed;
  inset:0;
  padding:56px 24px 22px;
  grid-template-columns: 1.04fr 1.5fr 1.08fr;
  grid-template-rows: 1.05fr .72fr .95fr;
  grid-template-areas:
    "clock weather agenda"
    "days days agenda"
    "hourly metrics radar";
  gap:18px;
  overflow:hidden;
  background:
    radial-gradient(1200px 850px at 18% 14%, rgba(47,135,255,.28), transparent 58%),
    radial-gradient(980px 720px at 80% 10%, rgba(150,72,255,.24), transparent 56%),
    radial-gradient(920px 640px at 56% 92%, rgba(61,224,132,.18), transparent 58%),
    linear-gradient(145deg,#050912 0%,#07101b 48%,#03050b 100%);
}
.v2-bg-orb{ position:absolute; border-radius:50%; filter:blur(24px); opacity:.42; pointer-events:none; animation:v2-float 12s ease-in-out infinite }
.v2-bg-orb-a{ width:260px; height:260px; right:17%; top:8%; background:#64d2ff }
.v2-bg-orb-b{ width:220px; height:220px; left:8%; bottom:8%; background:#7cff9a; animation-delay:-4s }
@keyframes v2-float{ 0%,100%{ transform:translate3d(0,0,0) scale(1)} 50%{ transform:translate3d(18px,-14px,0) scale(1.08)} }
.v2-main-card{
  position:relative;
  min-width:0; min-height:0;
  border-radius:34px;
  padding:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.108),rgba(255,255,255,.048));
  border:1px solid rgba(255,255,255,.105);
  box-shadow:0 24px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(28px) saturate(1.25);
  -webkit-backdrop-filter:blur(28px) saturate(1.25);
  overflow:hidden;
}
.v2-section-title{ color:rgba(255,255,255,.58); font-size:17px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; margin:0 0 16px }
.v2-clock-card{ grid-area:clock; display:flex; flex-direction:column; justify-content:center; padding-left:30px }
.v2-kicker{ color:#8ee6ff; font-weight:900; font-size:19px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px }
.v2-time{ font-size:136px; line-height:.86; font-weight:800; letter-spacing:-8px; font-variant-numeric:tabular-nums; text-shadow:0 14px 44px rgba(0,0,0,.42) }
.v2-date{ margin-top:18px; font-size:29px; color:rgba(255,255,255,.80); font-weight:700; line-height:1.12 }
.v2-status-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px }
.v2-chip{ padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.11); font-size:20px; font-weight:900; color:#fff }
.v2-chip.ok,.v2-chip.suspended{ color:#52ffa7; border-color:rgba(82,255,167,.35); background:rgba(82,255,167,.12) }
.v2-chip.warn{ color:#ffd76a; border-color:rgba(255,215,106,.34); background:rgba(255,215,106,.12) }
.v2-chip.err,.v2-chip.in-effect{ color:#ff8a8a; border-color:rgba(255,138,138,.34); background:rgba(255,138,138,.12) }

.v2-weather-card{ grid-area:weather; padding:0; border:0; background:rgba(25,30,42,.28) }
.v2-wx-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none }
.v2-weather-card::before{ content:""; position:absolute; inset:-28%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.20),transparent 36%), radial-gradient(circle at 80% 18%,rgba(120,200,255,.30),transparent 42%); animation:v2-weather-drift 16s ease-in-out infinite; z-index:1 }
@keyframes v2-weather-drift{ 0%,100%{ transform:translate(0,0) scale(1)} 50%{ transform:translate(-4%,3%) scale(1.08)} }
.v2-weather-glass{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:34px; text-shadow:0 10px 34px rgba(0,0,0,.55) }
.v2-weather-left{ display:flex; align-items:center; gap:24px; min-width:0 }
.v2-icon{ width:134px; height:134px; filter:drop-shadow(0 16px 34px rgba(0,0,0,.62)); flex:0 0 auto }
.v2-temp{ font-size:150px; font-weight:300; line-height:.78; letter-spacing:-10px }
.v2-cond{ margin-top:14px; font-size:38px; font-weight:800; line-height:1.02; max-width:520px }
.v2-feels{ margin-top:8px; font-size:29px; color:rgba(255,255,255,.82); font-weight:700 }
.v2-weather-right{ align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; min-width:240px; text-align:right }
.v2-hi-lo{ display:flex; gap:16px; font-size:36px; font-weight:900 }
.v2-lo{ color:rgba(255,255,255,.65) }
.v2-next-rain{ max-width:320px; padding:16px 18px; border-radius:20px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10); font-size:27px; font-weight:900; line-height:1.05 }

.v2-days-card{ grid-area:days; padding:20px 24px }
.v2-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; height:calc(100% - 38px) }
.v2-day{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-radius:24px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.07); min-width:0 }
.v2-day.today{ background:rgba(100,210,255,.16); border-color:rgba(100,210,255,.38) }
.v2-day-name{ font-size:24px; font-weight:900; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis }
.v2-day-date{ font-size:16px; font-weight:800; color:rgba(255,255,255,.56); margin-top:-4px }
.v2-day img{ width:58px; height:58px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5)) }
.v2-day-range{ display:flex; gap:12px; font-size:27px; font-weight:900 }.v2-day-range span:last-child{ color:rgba(255,255,255,.54) }

.v2-agenda-card{ grid-area:agenda; display:flex; flex-direction:column }
.v2-agenda{ display:flex; flex-direction:column; gap:12px; overflow:hidden }
.v2-event{ padding:15px 16px; border-radius:20px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.075) }
.v2-event-time{ color:#8ee6ff; font-size:16px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px }
.v2-event-title{ color:#fff; font-size:24px; font-weight:900; line-height:1.06; text-transform:uppercase }
.v2-event.holiday{ border-color:rgba(255,214,100,.30); background:rgba(255,214,100,.09) }.v2-event.holiday .v2-event-time{ color:#ffd66d }

.v2-hourly-card{ grid-area:hourly }.v2-hourly{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; height:calc(100% - 38px) }
.v2-hour{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border-radius:22px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.07) }
.v2-hour-time{ font-size:18px; font-weight:900; color:rgba(255,255,255,.65) }.v2-hour img{ width:48px; height:48px }.v2-hour-temp{ font-size:34px; font-weight:900 }.v2-hour-pop{ color:#8bd0ff; font-size:18px; font-weight:900 }

.v2-metrics-card{ grid-area:metrics }.v2-metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; height:calc(100% - 38px) }.v2-metrics div{ border-radius:22px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.07); padding:17px; display:flex; flex-direction:column; justify-content:center }.v2-metrics span{ color:rgba(255,255,255,.52); font-size:16px; font-weight:900; letter-spacing:.10em; text-transform:uppercase }.v2-metrics strong{ color:#fff; font-size:32px; line-height:1.04; margin-top:8px }
.v2-alert-card{ display:none; grid-area:alert }.v2-alerts{ font-size:24px; font-weight:800; line-height:1.2 }
.v2-radar-card{ grid-area:radar; padding:0 }.v2-radar-card .v2-section-title{ position:absolute; left:22px; top:18px; z-index:2; text-shadow:0 4px 16px rgba(0,0,0,.8) }.v2-radar-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#000 }.v2-radar-img{ width:100%; height:100%; object-fit:cover; opacity:.9; cursor:pointer }
body.night .v2-radar-img{ filter:invert(1) hue-rotate(180deg) brightness(.62) contrast(1.18) saturate(.95) }

@media (max-width:1500px){
  .v2-time{ font-size:116px }.v2-temp{ font-size:128px }.v2-icon{ width:112px; height:112px }.v2-cond{ font-size:32px }.v2-date{ font-size:25px }.v2-chip{ font-size:17px }.v2-event-title{ font-size:21px }.v2-day-name{ font-size:21px }.v2-day-range{ font-size:23px }.v2-metrics strong{ font-size:28px }
}

/* V2 toggle polish override */
.version-toggle{ width:98px; justify-content:space-between; padding:4px 11px; isolation:isolate }
.version-toggle .vt-label{ position:relative; z-index:2 }
.version-toggle .vt-knob{ position:absolute; z-index:1; left:5px; top:5px; width:42px; height:24px; order:0; transform:none; opacity:.92 }
body.dashboard-v2 .version-toggle .vt-knob{ transform:translateX(46px) }

/* V2 fit pass for Surface Book 2 effective viewport around 1500x1000 */
@media (max-width:1700px) and (max-height:1150px){
  .v2-screen{
    padding:46px 18px 18px;
    gap:14px;
    grid-template-columns: .98fr 1.42fr 1.02fr;
    grid-template-rows: 1fr .66fr .86fr;
  }
  .v2-main-card{ border-radius:28px; padding:20px }
  .v2-section-title{ font-size:15px; margin-bottom:12px }
  .v2-kicker{ font-size:17px; margin-bottom:10px }
  .v2-time{ font-size:96px; letter-spacing:-6px }
  .v2-date{ font-size:22px; margin-top:12px }
  .v2-status-row{ margin-top:16px; gap:10px }
  .v2-chip{ font-size:15px; padding:10px 13px; border-radius:14px }
  .v2-weather-glass{ padding:26px 26px 22px; align-items:center }
  .v2-weather-left{ gap:18px }
  .v2-icon{ width:96px; height:96px }
  .v2-temp{ font-size:112px; letter-spacing:-7px }
  .v2-cond{ font-size:28px; margin-top:8px }
  .v2-feels{ font-size:22px; margin-top:4px }
  .v2-weather-right{ min-width:190px }
  .v2-hi-lo{ font-size:28px; gap:12px }
  .v2-next-rain{ font-size:20px; max-width:210px; padding:12px 14px; border-radius:16px; line-height:1.04 }
  .v2-days-card{ padding:17px 20px }
  .v2-days{ gap:10px; height:calc(100% - 32px) }
  .v2-day{ border-radius:18px; gap:5px }
  .v2-day-name{ font-size:20px }
  .v2-day-date{ font-size:14px }
  .v2-day img{ width:45px; height:45px }
  .v2-day-range{ font-size:22px; gap:9px }
  .v2-agenda-card{ padding:18px 20px }
  .v2-agenda{ gap:10px }
  .v2-event{ padding:12px 14px; border-radius:17px }
  .v2-event-time{ font-size:14px; margin-bottom:5px }
  .v2-event-title{ font-size:18px; line-height:1.04 }
  .v2-hourly{ gap:8px; height:calc(100% - 32px) }
  .v2-hour{ border-radius:17px; gap:5px }
  .v2-hour-time{ font-size:15px }
  .v2-hour img{ width:36px; height:36px }
  .v2-hour-temp{ font-size:28px }
  .v2-hour-pop{ font-size:15px }
  .v2-metrics{ gap:10px; height:calc(100% - 32px) }
  .v2-metrics div{ padding:13px; border-radius:17px }
  .v2-metrics span{ font-size:13px }
  .v2-metrics strong{ font-size:24px }
  .v2-radar-card .v2-section-title{ font-size:14px; left:18px; top:15px }
}

/* V2 native Surface Book pixel viewport pass: fill the 3000x2000 / 3240x2160 canvas instead of looking miniaturized */
@media (min-width:2200px) and (min-height:1400px){
  .version-toggle{ transform:scale(1.35); transform-origin:top left; top:16px; left:16px }
  .v2-screen{
    padding:72px 32px 32px;
    gap:26px;
    grid-template-columns: .98fr 1.44fr 1.04fr;
    grid-template-rows: 1fr .68fr .9fr;
  }
  .v2-main-card{ border-radius:44px; padding:34px }
  .v2-section-title{ font-size:28px; margin-bottom:24px }
  .v2-kicker{ font-size:30px; margin-bottom:22px }
  .v2-time{ font-size:230px; letter-spacing:-14px }
  .v2-date{ font-size:48px; margin-top:28px }
  .v2-status-row{ margin-top:34px; gap:20px }
  .v2-chip{ font-size:31px; padding:20px 26px; border-radius:24px }
  .v2-weather-glass{ padding:50px; align-items:center }
  .v2-weather-left{ gap:38px }
  .v2-icon{ width:200px; height:200px }
  .v2-temp{ font-size:245px; letter-spacing:-15px }
  .v2-cond{ font-size:60px; margin-top:20px }
  .v2-feels{ font-size:44px; margin-top:12px }
  .v2-weather-right{ min-width:420px }
  .v2-hi-lo{ font-size:52px; gap:26px }
  .v2-next-rain{ font-size:40px; max-width:430px; padding:24px 28px; border-radius:28px }
  .v2-days-card{ padding:30px 34px }
  .v2-days{ gap:18px; height:calc(100% - 56px) }
  .v2-day{ border-radius:34px; gap:12px }
  .v2-day-name{ font-size:40px }
  .v2-day-date{ font-size:25px }
  .v2-day img{ width:92px; height:92px }
  .v2-day-range{ font-size:46px; gap:20px }
  .v2-agenda-card{ padding:30px 34px }
  .v2-agenda{ gap:18px }
  .v2-event{ padding:24px 26px; border-radius:28px }
  .v2-event-time{ font-size:24px; margin-bottom:10px }
  .v2-event-title{ font-size:35px }
  .v2-hourly{ gap:16px; height:calc(100% - 56px) }
  .v2-hour{ border-radius:30px; gap:10px }
  .v2-hour-time{ font-size:28px }
  .v2-hour img{ width:80px; height:80px }
  .v2-hour-temp{ font-size:60px }
  .v2-hour-pop{ font-size:28px }
  .v2-metrics{ gap:18px; height:calc(100% - 56px) }
  .v2-metrics div{ padding:26px; border-radius:30px }
  .v2-metrics span{ font-size:24px }
  .v2-metrics strong{ font-size:48px }
  .v2-radar-card .v2-section-title{ font-size:26px; left:32px; top:28px }
}
@media (max-width:1700px) and (max-height:1150px){ .v2-sun{ white-space:nowrap; font-size:21px!important } }

/* V2 calendar restore: keep V1's fuller upcoming-date density without clipping */
.v2-agenda-card{ overflow:hidden }
.v2-agenda{ min-height:0 }
@media (max-width:1700px) and (max-height:1150px){
  .v2-agenda-card{ padding:15px 18px }
  .v2-agenda{ gap:7px }
  .v2-event{ padding:9px 12px; border-radius:14px }
  .v2-event-time{ font-size:12px; margin-bottom:3px; letter-spacing:.07em }
  .v2-event-title{ font-size:16px; line-height:1.02 }
}
@media (min-width:2200px) and (min-height:1400px){
  .v2-agenda{ gap:14px }
  .v2-event{ padding:18px 22px; border-radius:24px }
  .v2-event-time{ font-size:21px; margin-bottom:7px }
  .v2-event-title{ font-size:30px; line-height:1.02 }
}

/* V2 Apple Weather inspired icon system */
.v2-wicon{
  --s:80px;
  position:relative;
  display:inline-block;
  width:var(--s);
  height:var(--s);
  flex:0 0 var(--s);
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.34));
  transform:translateZ(0);
}
.v2-hero-icon{ --s:150px }
.v2-day-icon{ --s:64px }
.v2-hour-icon{ --s:48px }
.v2-wicon i{ position:absolute; display:block; box-sizing:border-box }
.v2-wicon .sun{
  width:48%; height:48%; left:26%; top:25%; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff7bd 0 17%, #ffd45c 42%, #ff9f1c 72%, #ff7a00 100%);
  box-shadow:0 0 calc(var(--s)*.18) rgba(255,206,83,.82),0 0 calc(var(--s)*.42) rgba(255,159,28,.35);
}
.v2-wicon .sun::before{
  content:""; position:absolute; inset:-34%; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,211,89,.95) 0 9deg, transparent 9deg 24deg);
  -webkit-mask:radial-gradient(circle, transparent 0 51%, #000 52% 100%);
  mask:radial-gradient(circle, transparent 0 51%, #000 52% 100%);
  animation:v2-sun-spin 24s linear infinite;
}
@keyframes v2-sun-spin{ to{ transform:rotate(1turn)} }
.v2-wicon .moon{
  width:52%; height:52%; left:25%; top:22%; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #fff 0 16%, #dbe9ff 48%, #9fbaff 100%);
  box-shadow:0 0 calc(var(--s)*.24) rgba(183,210,255,.75), inset calc(var(--s)*-.12) calc(var(--s)*.02) calc(var(--s)*.04) rgba(76,99,160,.30);
}
.v2-wicon .moon::after{ content:""; position:absolute; width:76%; height:76%; right:-10%; top:-6%; border-radius:50%; background:rgba(12,18,32,.68); filter:blur(.5px) }
.v2-wicon .cloud{
  width:72%; height:40%; left:15%; top:39%; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(205,223,246,.94) 58%, rgba(150,176,210,.94));
  box-shadow:inset 0 calc(var(--s)*.035) calc(var(--s)*.05) rgba(255,255,255,.9), inset 0 calc(var(--s)*-.06) calc(var(--s)*.12) rgba(80,102,140,.22), 0 calc(var(--s)*.09) calc(var(--s)*.18) rgba(0,0,0,.24);
}
.v2-wicon .cloud::before,
.v2-wicon .cloud::after{ content:""; position:absolute; border-radius:50%; background:inherit; box-shadow:inherit }
.v2-wicon .cloud::before{ width:44%; height:92%; left:11%; bottom:28% }
.v2-wicon .cloud::after{ width:52%; height:116%; right:11%; bottom:17% }
.v2-wicon.is-partly-day .sun,.v2-wicon.is-partly-night .moon{ left:6%; top:5%; width:47%; height:47%; transform:scale(.88) }
.v2-wicon.is-partly-day .cloud,.v2-wicon.is-partly-night .cloud{ left:24%; top:43% }
.v2-wicon.is-cloud .cloud{ top:31%; left:10%; width:80%; height:44% }
.v2-wicon .rain{
  width:7%; height:30%; top:70%; border-radius:999px;
  background:linear-gradient(180deg,#dff7ff,#45b9ff 72%,#0c74ff);
  transform:rotate(14deg);
  box-shadow:0 0 calc(var(--s)*.08) rgba(69,185,255,.65);
  animation:v2-rain-fall 1.15s ease-in-out infinite;
}
.v2-wicon .r1{ left:32%; animation-delay:0s }.v2-wicon .r2{ left:49%; animation-delay:.15s }.v2-wicon .r3{ left:66%; animation-delay:.3s }
@keyframes v2-rain-fall{ 0%,100%{ transform:translateY(0) rotate(14deg); opacity:.75 } 50%{ transform:translateY(10%) rotate(14deg); opacity:1 } }
.v2-wicon .flake{ color:#e9fbff; font-style:normal; font-size:calc(var(--s)*.20); line-height:1; text-shadow:0 0 calc(var(--s)*.08) rgba(205,244,255,.9); animation:v2-snow 2.4s ease-in-out infinite }
.v2-wicon .f1{ left:30%; top:70% }.v2-wicon .f2{ left:50%; top:78%; animation-delay:.35s }.v2-wicon .f3{ left:68%; top:70%; animation-delay:.7s }
@keyframes v2-snow{ 50%{ transform:translateY(12%) rotate(18deg); opacity:.72 } }
.v2-wicon .bolt{
  left:45%; top:59%; width:22%; height:35%;
  background:linear-gradient(180deg,#fff69b,#ffd000 48%,#ff8d00);
  clip-path:polygon(38% 0,100% 0,61% 43%,88% 43%,25% 100%,43% 54%,9% 54%);
  filter:drop-shadow(0 0 calc(var(--s)*.12) rgba(255,209,0,.85));
  z-index:4;
}
.v2-wicon .fog-line{ height:7%; left:14%; right:14%; border-radius:999px; background:linear-gradient(90deg,transparent,rgba(235,245,255,.92),transparent); filter:blur(.2px) }
.v2-wicon .l1{ top:68% }.v2-wicon .l2{ top:80%; left:22%; right:8% }.v2-wicon .l3{ top:92%; left:8%; right:24% }
.v2-wicon.is-fog .fog-cloud{ opacity:.78; filter:blur(.8px) }
.v2-wicon.is-rain .cloud,.v2-wicon.is-storm .cloud{ background:linear-gradient(180deg, rgba(238,246,255,.97), rgba(143,164,197,.96) 62%, rgba(86,105,142,.96)) }
.v2-wicon.is-snow .cloud{ background:linear-gradient(180deg,#fff,#dcecff 62%,#abc4e4) }

/* More Apple-like V2 glass and weather atmosphere */
body.dashboard-v2 .v2-main-card{
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.055) 46%,rgba(255,255,255,.035));
  border-color:rgba(255,255,255,.15);
  box-shadow:0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
}
body.dashboard-v2 .v2-weather-card{
  background:linear-gradient(180deg,rgba(83,136,202,.38),rgba(29,55,91,.34) 48%,rgba(10,18,35,.30));
}
body.dashboard-v2 .v2-weather-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 34%,rgba(0,0,0,.14));
  mix-blend-mode:screen;
}
body.dashboard-v2 .v2-day,
body.dashboard-v2 .v2-hour,
body.dashboard-v2 .v2-event,
body.dashboard-v2 .v2-metrics div{
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.13);
}
body.dashboard-v2 .v2-event.holiday{
  background:linear-gradient(135deg,rgba(255,214,100,.16),rgba(255,255,255,.045));
}
body.dashboard-v2 .v2-radar-img{ opacity:.96; filter:saturate(1.05) contrast(1.02) }
body.dashboard-v2.night .v2-radar-img{ filter:invert(1) hue-rotate(180deg) brightness(.62) contrast(1.18) saturate(.95) }

@media (max-width:1700px) and (max-height:1150px){
  .v2-hero-icon{ --s:110px }
  .v2-day-icon{ --s:48px }
  .v2-hour-icon{ --s:38px }
}
@media (min-width:2200px) and (min-height:1400px){
  .v2-hero-icon{ --s:230px }
  .v2-day-icon{ --s:106px }
  .v2-hour-icon{ --s:84px }
}

/* V2 Apple Weather composition pass */
body.dashboard-v2{ background:#7f96a6 }
body.dashboard-v2 .status-pill{ opacity:.32 }
body.dashboard-v2 .v2-screen{
  padding:42px 24px 24px;
  grid-template-columns: 1.02fr 1.34fr 1.02fr;
  grid-template-rows: 220px 1.05fr .78fr;
  grid-template-areas:
    "clock weather weather"
    "agenda days radar"
    "hourly metrics radar";
  gap:16px;
  background:
    linear-gradient(180deg,rgba(225,234,238,.82),rgba(130,151,166,.88) 24%,rgba(84,111,132,.92) 58%,rgba(39,58,75,.98)),
    radial-gradient(900px 520px at 55% 4%,rgba(255,255,255,.54),transparent 58%);
}
body.dashboard-v2 .v2-screen::before{
  content:""; position:absolute; inset:-8%; pointer-events:none; opacity:.72;
  background:
    radial-gradient(ellipse 760px 230px at 25% 11%,rgba(255,255,255,.50),transparent 68%),
    radial-gradient(ellipse 880px 260px at 72% 13%,rgba(255,255,255,.42),transparent 70%),
    radial-gradient(ellipse 700px 220px at 55% 24%,rgba(190,205,213,.45),transparent 72%),
    linear-gradient(120deg,transparent 0 18%,rgba(255,255,255,.10) 26%,transparent 38% 100%);
  filter:blur(18px) saturate(.95);
  animation:v2-cloud-slow 26s ease-in-out infinite alternate;
}
@keyframes v2-cloud-slow{ from{ transform:translate3d(-1.5%,0,0) scale(1.02)} to{ transform:translate3d(1.5%,-1%,0) scale(1.05)} }
body.dashboard-v2 .v2-screen.v2-wx-clear{
  background:linear-gradient(180deg,#8ebde8 0%,#6ea0cd 34%,#497b9e 64%,#23394f 100%);
}
body.dashboard-v2 .v2-screen.v2-wx-rain,
body.dashboard-v2 .v2-screen.v2-wx-cloudy,
body.dashboard-v2 .v2-screen.v2-wx-fog{
  background:linear-gradient(180deg,#c4cdd0 0%,#9badb8 22%,#71899a 52%,#354d61 100%);
}
body.dashboard-v2 .v2-screen.v2-wx-night{
  background:linear-gradient(180deg,#142033 0%,#192b45 34%,#102035 68%,#07111f 100%);
}
body.dashboard-v2 .v2-bg-orb{ display:none }
body.dashboard-v2 .v2-main-card{
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg,rgba(91,115,132,.52),rgba(52,76,94,.38));
  border:1px solid rgba(255,255,255,.19);
  box-shadow:0 14px 36px rgba(15,31,48,.25), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(28px) saturate(1.25);
  -webkit-backdrop-filter:blur(28px) saturate(1.25);
}
body.dashboard-v2 .v2-section-title{
  font-size:13px; line-height:1; margin:0 0 11px; color:rgba(255,255,255,.64); letter-spacing:.075em; font-weight:800;
}
body.dashboard-v2 .v2-section-title::before{ content:"⊙ "; opacity:.65 }
body.dashboard-v2 .v2-clock-card{
  justify-content:flex-end; align-items:flex-start; padding:18px 20px;
  background:linear-gradient(180deg,rgba(50,70,88,.44),rgba(31,47,65,.34));
}
body.dashboard-v2 .v2-kicker{ font-size:16px; letter-spacing:.08em; text-transform:none; color:rgba(255,255,255,.82); margin-bottom:6px }
body.dashboard-v2 .v2-time{ font-size:74px; line-height:.9; letter-spacing:-4px; font-weight:300 }
body.dashboard-v2 .v2-date{ font-size:18px; margin-top:8px; color:rgba(255,255,255,.76); font-weight:600 }
body.dashboard-v2 .v2-status-row{ margin-top:12px; gap:8px }
body.dashboard-v2 .v2-chip{ font-size:14px; padding:8px 11px; border-radius:12px; background:rgba(255,255,255,.13); color:#fff }
body.dashboard-v2 .v2-weather-card{
  overflow:visible; background:transparent!important; border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.dashboard-v2 .v2-weather-card::before,
body.dashboard-v2 .v2-weather-card::after{ display:none }
body.dashboard-v2 .v2-weather-glass{
  position:absolute; inset:0; padding:0 20px 12px; display:grid; grid-template-columns:1fr auto 1fr; align-items:end;
}
body.dashboard-v2 .v2-weather-left{ grid-column:2; flex-direction:row; justify-content:center; align-items:center; gap:18px; text-align:center }
body.dashboard-v2 .v2-hero-icon{ --s:92px; filter:drop-shadow(0 12px 18px rgba(0,0,0,.22)) }
body.dashboard-v2 .v2-temp{ font-size:112px; font-weight:200; line-height:.82; letter-spacing:-8px }
body.dashboard-v2 .v2-cond{ font-size:29px; margin-top:7px; font-weight:600; letter-spacing:-.03em }
body.dashboard-v2 .v2-feels{ font-size:18px; margin-top:3px; color:rgba(255,255,255,.86); font-weight:600 }
body.dashboard-v2 .v2-weather-right{ grid-column:3; justify-self:end; align-self:end; min-width:260px; gap:12px; justify-content:flex-end }
body.dashboard-v2 .v2-hi-lo{ justify-content:flex-end; font-size:24px; font-weight:700; color:rgba(255,255,255,.82) }
body.dashboard-v2 .v2-next-rain{ font-size:18px; line-height:1.05; padding:12px 14px; max-width:245px; border-radius:16px; background:rgba(38,55,72,.42) }
body.dashboard-v2 .v2-agenda-card{ padding:14px; background:linear-gradient(180deg,rgba(79,100,118,.50),rgba(43,63,82,.38)) }
body.dashboard-v2 .v2-agenda{ gap:7px }
body.dashboard-v2 .v2-event{ padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.105); border-color:rgba(255,255,255,.12) }
body.dashboard-v2 .v2-event-time{ font-size:11px; color:rgba(212,242,255,.82); letter-spacing:.07em; margin-bottom:3px }
body.dashboard-v2 .v2-event-title{ font-size:15px; line-height:1.02; font-weight:760; text-transform:none; letter-spacing:-.01em }
body.dashboard-v2 .v2-days-card{ padding:14px; }
body.dashboard-v2 .v2-days{ display:flex; flex-direction:column; gap:0; height:calc(100% - 25px) }
body.dashboard-v2 .v2-day{
  display:grid; grid-template-columns:74px 42px 42px 48px 1fr 50px; align-items:center; gap:8px;
  min-height:0; flex:1 1 0; padding:0 4px; border-radius:0;
  background:transparent!important; border:0; border-top:1px solid rgba(255,255,255,.14);
}
body.dashboard-v2 .v2-day:first-child{ border-top:0 }
body.dashboard-v2 .v2-day-left{ min-width:0 }
body.dashboard-v2 .v2-day-name{ font-size:18px; font-weight:700; color:#fff }
body.dashboard-v2 .v2-day-date{ font-size:11px; color:rgba(255,255,255,.54) }
body.dashboard-v2 .v2-day-icon{ --s:30px; justify-self:center; filter:drop-shadow(0 6px 8px rgba(0,0,0,.18)) }
body.dashboard-v2 .v2-day-pop{ min-width:32px; color:#9fe7ff; font-size:12px; font-weight:800; text-align:left }
body.dashboard-v2 .v2-day-low, body.dashboard-v2 .v2-day-high{ font-size:18px; font-weight:760; color:rgba(255,255,255,.68); text-align:right }
body.dashboard-v2 .v2-day-high{ color:#fff; text-align:left }
body.dashboard-v2 .v2-tempbar{ position:relative; height:5px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden }
body.dashboard-v2 .v2-tempbar i{ position:absolute; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#7be1ff,#b7e86b,#ffd25f); box-shadow:0 0 8px rgba(255,224,100,.38) }
body.dashboard-v2 .v2-hourly-card{ padding:14px }
body.dashboard-v2 .v2-hourly{ display:flex; gap:0; height:calc(100% - 25px); overflow:hidden }
body.dashboard-v2 .v2-hour{ flex:1 1 0; border:0; border-left:1px solid rgba(255,255,255,.12); border-radius:0; background:transparent!important; gap:4px }
body.dashboard-v2 .v2-hour:first-child{ border-left:0 }
body.dashboard-v2 .v2-hour-time{ font-size:13px; color:rgba(255,255,255,.74) }
body.dashboard-v2 .v2-hour-icon{ --s:32px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.16)) }
body.dashboard-v2 .v2-hour-temp{ font-size:25px; font-weight:760 }
body.dashboard-v2 .v2-hour-pop{ font-size:12px; color:#93e8ff }
body.dashboard-v2 .v2-metrics-card{ padding:14px }
body.dashboard-v2 .v2-metrics{ height:calc(100% - 25px); gap:10px }
body.dashboard-v2 .v2-metrics div{ border-radius:14px; padding:12px; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.10) }
body.dashboard-v2 .v2-metrics span{ font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.58) }
body.dashboard-v2 .v2-metrics strong{ font-size:22px; font-weight:650; margin-top:6px }
body.dashboard-v2 .v2-radar-card{ border-radius:18px; overflow:hidden; padding:0 }
body.dashboard-v2 .v2-radar-card .v2-section-title{ left:14px; top:13px; font-size:12px; z-index:5; color:rgba(255,255,255,.78) }
body.dashboard-v2 .v2-radar-img{ opacity:.88; filter:saturate(.92) contrast(.92) brightness(.92) }

@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-screen{ padding:40px 18px 18px; gap:14px; grid-template-rows:200px 1.05fr .78fr }
  body.dashboard-v2 .v2-temp{ font-size:102px }
  body.dashboard-v2 .v2-time{ font-size:66px }
  body.dashboard-v2 .v2-hero-icon{ --s:82px }
  body.dashboard-v2 .v2-day{ grid-template-columns:68px 36px 34px 43px 1fr 44px; gap:6px }
  body.dashboard-v2 .v2-day-name{ font-size:16px }
  body.dashboard-v2 .v2-day-low, body.dashboard-v2 .v2-day-high{ font-size:16px }
  body.dashboard-v2 .v2-event-title{ font-size:14px }
  body.dashboard-v2 .v2-event-time{ font-size:10px }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-screen{ padding:78px 38px 38px; gap:26px; grid-template-rows:360px 1.05fr .78fr }
  body.dashboard-v2 .v2-main-card{ border-radius:28px; padding:28px }
  body.dashboard-v2 .v2-section-title{ font-size:22px; margin-bottom:18px }
  body.dashboard-v2 .v2-time{ font-size:132px }
  body.dashboard-v2 .v2-date{ font-size:33px }
  body.dashboard-v2 .v2-kicker{ font-size:27px }
  body.dashboard-v2 .v2-chip{ font-size:24px; padding:14px 18px; border-radius:18px }
  body.dashboard-v2 .v2-temp{ font-size:205px }
  body.dashboard-v2 .v2-cond{ font-size:52px }
  body.dashboard-v2 .v2-feels{ font-size:31px }
  body.dashboard-v2 .v2-hero-icon{ --s:165px }
  body.dashboard-v2 .v2-hi-lo{ font-size:42px }
  body.dashboard-v2 .v2-next-rain{ font-size:32px; max-width:420px; padding:20px 24px; border-radius:24px }
  body.dashboard-v2 .v2-agenda{ gap:12px }
  body.dashboard-v2 .v2-event{ padding:15px 18px; border-radius:20px }
  body.dashboard-v2 .v2-event-time{ font-size:18px }
  body.dashboard-v2 .v2-event-title{ font-size:26px }
  body.dashboard-v2 .v2-day{ grid-template-columns:128px 66px 64px 72px 1fr 78px; gap:14px }
  body.dashboard-v2 .v2-day-name{ font-size:31px }
  body.dashboard-v2 .v2-day-date{ font-size:19px }
  body.dashboard-v2 .v2-day-icon{ --s:54px }
  body.dashboard-v2 .v2-day-pop{ font-size:20px }
  body.dashboard-v2 .v2-day-low, body.dashboard-v2 .v2-day-high{ font-size:31px }
  body.dashboard-v2 .v2-tempbar{ height:9px }
  body.dashboard-v2 .v2-hour-time{ font-size:22px }
  body.dashboard-v2 .v2-hour-icon{ --s:58px }
  body.dashboard-v2 .v2-hour-temp{ font-size:46px }
  body.dashboard-v2 .v2-hour-pop{ font-size:21px }
  body.dashboard-v2 .v2-metrics span{ font-size:19px }
  body.dashboard-v2 .v2-metrics strong{ font-size:39px }
}

/* V2 Apple Weather composition pass 2: restore agenda height, make radar a medium card */
body.dashboard-v2 .v2-screen{
  grid-template-columns:.96fr 1.30fr .96fr;
  grid-template-rows:200px 1.06fr .82fr;
  grid-template-areas:
    "clock weather weather"
    "agenda days radar"
    "agenda hourly metrics";
}
body.dashboard-v2 .v2-agenda-card{ grid-area:agenda; }
body.dashboard-v2 .v2-days-card{ grid-area:days; }
body.dashboard-v2 .v2-radar-card{ grid-area:radar; }
body.dashboard-v2 .v2-hourly-card{ grid-area:hourly; }
body.dashboard-v2 .v2-metrics-card{ grid-area:metrics; }
body.dashboard-v2 .v2-agenda{ height:calc(100% - 25px); overflow:hidden; justify-content:space-between }
body.dashboard-v2 .v2-event{ flex:0 0 auto; }
body.dashboard-v2 .v2-radar-img{ object-fit:cover; object-position:center center }
body.dashboard-v2 .v2-radar-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 22%,rgba(0,0,0,.08));
  z-index:2;
}
body.dashboard-v2 .v2-radar-card .v2-section-title{ z-index:3; text-shadow:0 2px 9px rgba(0,0,0,.65) }
body.dashboard-v2 .v2-weather-glass{ padding-bottom:2px }

@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-screen{ grid-template-rows:190px 1.08fr .82fr }
  body.dashboard-v2 .v2-agenda{ gap:5px; justify-content:space-between }
  body.dashboard-v2 .v2-event{ padding:7px 9px }
  body.dashboard-v2 .v2-event-title{ font-size:13px }
  body.dashboard-v2 .v2-event-time{ font-size:9.5px }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-screen{ grid-template-rows:350px 1.06fr .82fr }
}

/* V2 readability and top-hero cleanup pass */
body.dashboard-v2 .v2-weather-left{
  position:fixed;
  left:50%;
  top:62px;
  transform:translateX(-50%);
  z-index:4;
  gap:14px;
}
body.dashboard-v2 .v2-weather-right{
  position:fixed;
  right:38px;
  top:86px;
  z-index:4;
  min-width:0;
  align-items:flex-end;
}
body.dashboard-v2 .v2-hi-lo{ font-size:26px; gap:12px; margin-bottom:8px; opacity:.92 }
body.dashboard-v2 .v2-next-rain{
  white-space:nowrap;
  max-width:none;
  font-size:18px;
  padding:10px 14px;
  border-radius:16px;
}
body.dashboard-v2 .v2-cond{ font-size:31px }
body.dashboard-v2 .v2-feels{ font-size:20px }
body.dashboard-v2 .v2-clock-card{ padding:20px 22px }
body.dashboard-v2 .v2-time{ font-size:78px }
body.dashboard-v2 .v2-date{ font-size:20px }
body.dashboard-v2 .v2-chip{ font-size:15px }

body.dashboard-v2 .v2-agenda-card{ padding:16px }
body.dashboard-v2 .v2-section-title{ font-size:14px; margin-bottom:12px }
body.dashboard-v2 .v2-agenda{ gap:6px }
body.dashboard-v2 .v2-event{ padding:10px 12px; border-radius:13px }
body.dashboard-v2 .v2-event-time{ font-size:12.5px; margin-bottom:4px }
body.dashboard-v2 .v2-event-title{ font-size:17px; line-height:1.05; font-weight:800 }
body.dashboard-v2 .v2-days-card{ padding:16px }
body.dashboard-v2 .v2-day{ grid-template-columns:82px 44px 42px 52px 1fr 54px; gap:10px }
body.dashboard-v2 .v2-day-name{ font-size:19px }
body.dashboard-v2 .v2-day-date{ font-size:12px }
body.dashboard-v2 .v2-day-low, body.dashboard-v2 .v2-day-high{ font-size:19px }
body.dashboard-v2 .v2-day-pop{ font-size:13px }
body.dashboard-v2 .v2-hour-time{ font-size:14px }
body.dashboard-v2 .v2-hour-temp{ font-size:27px }
body.dashboard-v2 .v2-hour-pop{ font-size:13px }

body.dashboard-v2 .v2-metrics{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); gap:8px; height:calc(100% - 26px) }
body.dashboard-v2 .v2-metrics div{ position:relative; overflow:hidden; padding:10px 12px }
body.dashboard-v2 .v2-metrics div.ok{ background:linear-gradient(180deg,rgba(75,210,141,.20),rgba(255,255,255,.07)); border-color:rgba(101,255,178,.20) }
body.dashboard-v2 .v2-metrics div.warn{ background:linear-gradient(180deg,rgba(255,204,80,.22),rgba(255,255,255,.07)); border-color:rgba(255,220,100,.24) }
body.dashboard-v2 .v2-metrics div.err{ background:linear-gradient(180deg,rgba(255,111,88,.24),rgba(255,255,255,.07)); border-color:rgba(255,133,111,.25) }
body.dashboard-v2 .v2-metrics strong{ font-size:24px; line-height:1; margin-top:5px }
body.dashboard-v2 .v2-metrics em{ display:block; margin-top:5px; color:rgba(255,255,255,.62); font-style:normal; font-size:11.5px; font-weight:700; line-height:1.05 }

@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-weather-left{ top:58px }
  body.dashboard-v2 .v2-weather-right{ right:30px; top:82px }
  body.dashboard-v2 .v2-temp{ font-size:106px }
  body.dashboard-v2 .v2-hero-icon{ --s:78px }
  body.dashboard-v2 .v2-next-rain{ font-size:16px }
  body.dashboard-v2 .v2-hi-lo{ font-size:23px }
  body.dashboard-v2 .v2-event-title{ font-size:15.8px }
  body.dashboard-v2 .v2-event-time{ font-size:11.3px }
  body.dashboard-v2 .v2-day{ grid-template-columns:74px 38px 36px 48px 1fr 48px; gap:8px }
  body.dashboard-v2 .v2-metrics strong{ font-size:21px }
  body.dashboard-v2 .v2-metrics em{ font-size:10.5px }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-weather-left{ top:108px }
  body.dashboard-v2 .v2-weather-right{ right:70px; top:140px }
  body.dashboard-v2 .v2-temp{ font-size:216px }
  body.dashboard-v2 .v2-hero-icon{ --s:160px }
  body.dashboard-v2 .v2-cond{ font-size:56px }
  body.dashboard-v2 .v2-feels{ font-size:34px }
  body.dashboard-v2 .v2-hi-lo{ font-size:44px }
  body.dashboard-v2 .v2-next-rain{ font-size:30px; padding:18px 24px; border-radius:24px }
  body.dashboard-v2 .v2-event-title{ font-size:28px }
  body.dashboard-v2 .v2-event-time{ font-size:20px }
  body.dashboard-v2 .v2-metrics strong{ font-size:42px }
  body.dashboard-v2 .v2-metrics em{ font-size:19px }
}

/* V2 10-foot readability pass: larger calendar/agenda */
body.dashboard-v2 .v2-screen{ grid-template-columns:1.18fr 1.18fr .88fr; }
body.dashboard-v2 .v2-agenda-card{ padding:18px 20px; }
body.dashboard-v2 .v2-agenda{ gap:9px; height:calc(100% - 31px); }
body.dashboard-v2 .v2-section-title{ font-size:16px; margin-bottom:14px; }
body.dashboard-v2 .v2-event{ padding:12px 14px; border-radius:16px; }
body.dashboard-v2 .v2-event-time{ font-size:14px; margin-bottom:5px; letter-spacing:.075em; }
body.dashboard-v2 .v2-event-title{ font-size:22.5px; line-height:1.03; font-weight:850; }
@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-screen{ grid-template-columns:1.18fr 1.18fr .88fr; }
  body.dashboard-v2 .v2-agenda-card{ padding:16px 18px; }
  body.dashboard-v2 .v2-agenda{ gap:8px; }
  body.dashboard-v2 .v2-event{ padding:11px 13px; }
  body.dashboard-v2 .v2-event-time{ font-size:14px; margin-bottom:4px; }
  body.dashboard-v2 .v2-event-title{ font-size:22px; line-height:1.03; }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-agenda-card{ padding:32px 36px; }
  body.dashboard-v2 .v2-agenda{ gap:16px; height:calc(100% - 52px); }
  body.dashboard-v2 .v2-event{ padding:23px 27px; border-radius:28px; }
  body.dashboard-v2 .v2-event-time{ font-size:25px; margin-bottom:9px; }
  body.dashboard-v2 .v2-event-title{ font-size:39px; line-height:1.02; }
}

/* V1/V2 switcher: keep it out of the dashboard flow and away from top-left clock */
.version-toggle{
  position:fixed !important;
  top:auto !important;
  left:auto !important;
  right:14px !important;
  bottom:14px !important;
  transform:none !important;
  transform-origin:bottom right !important;
  z-index:10000;
  opacity:.72;
}
.version-toggle:hover{ opacity:1; }
@media (min-width:2200px) and (min-height:1400px){
  .version-toggle{
    right:22px !important;
    bottom:22px !important;
    transform:scale(1.35) !important;
    transform-origin:bottom right !important;
  }
}

/* V2 10-foot pass: reclaim old switcher space and enlarge Air & Allergies */
body.dashboard-v2 .v2-screen{ padding-top:24px; }
body.dashboard-v2 .v2-metrics-card{ padding:18px; }
body.dashboard-v2 .v2-metrics{ height:calc(100% - 32px); gap:10px; }
body.dashboard-v2 .v2-metrics div{ padding:14px 15px; border-radius:18px; }
body.dashboard-v2 .v2-metrics span{ font-size:13.5px; letter-spacing:.07em; }
body.dashboard-v2 .v2-metrics strong{ font-size:29px; line-height:1.02; margin-top:6px; }
body.dashboard-v2 .v2-metrics em{ font-size:12.5px; line-height:1.05; margin-top:6px; }
@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-screen{ padding-top:24px; }
  body.dashboard-v2 .v2-metrics-card{ padding:18px; }
  body.dashboard-v2 .v2-metrics{ height:calc(100% - 32px); gap:10px; }
  body.dashboard-v2 .v2-metrics div{ padding:14px 15px; }
  body.dashboard-v2 .v2-metrics span{ font-size:13.5px; }
  body.dashboard-v2 .v2-metrics strong{ font-size:29px; }
  body.dashboard-v2 .v2-metrics em{ font-size:12.5px; }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-screen{ padding-top:54px; }
  body.dashboard-v2 .v2-metrics-card{ padding:32px; }
  body.dashboard-v2 .v2-metrics span{ font-size:24px; }
  body.dashboard-v2 .v2-metrics strong{ font-size:54px; }
  body.dashboard-v2 .v2-metrics em{ font-size:22px; }
}

/* V2 final wrap-up: night safety, weather details, alerts, and sanity-check pollen counts */
body.dashboard-v2 .v2-kicker{ display:none !important; }
body.dashboard-v2 .v2-weather-right{ display:none !important; }
body.dashboard-v2 .v2-weather-left .v2-hi-lo{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:6px;
  margin-bottom:0;
  font-size:20px;
  line-height:1;
  color:rgba(255,255,255,.84);
  opacity:.92;
}
body.dashboard-v2 .v2-alert-card{
  display:block;
  grid-area:radar;
  align-self:end;
  height:150px;
  padding:14px 16px;
  z-index:4;
}
body.dashboard-v2 .v2-radar-card{
  align-self:start;
  height:calc(100% - 166px);
  min-height:285px;
}
body.dashboard-v2 .v2-alert-card .v2-section-title{ margin-bottom:8px; }
body.dashboard-v2 .v2-alert-card .v2-next-rain{
  display:block;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0 0 8px;
  padding:9px 11px;
  white-space:normal;
  border-radius:14px;
  background:rgba(38,55,72,.45);
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  font-size:17px;
  font-weight:850;
  line-height:1.05;
}
body.dashboard-v2 .v2-alerts{
  font-size:14px;
  font-weight:800;
  line-height:1.08;
  color:rgba(255,255,255,.82);
}
body.dashboard-v2 .v2-alert-item{ margin-top:5px; }
body.dashboard-v2 .v2-alert-item strong{ display:block; color:#fff; font-size:15px; line-height:1.05; }
body.dashboard-v2 .v2-alert-item em,
body.dashboard-v2 .v2-alert-none{ display:block; color:rgba(255,255,255,.66); font-style:normal; font-size:13px; margin-top:3px; }
body.dashboard-v2 .v2-metrics em{ white-space:normal; }
body.dashboard-v2 .v2-screen.v2-wx-night{
  background:linear-gradient(180deg,#07111f 0%,#0b1829 34%,#071423 68%,#030914 100%) !important;
}
body.dashboard-v2 .v2-screen.v2-wx-night::before{ opacity:.24; }
body.dashboard-v2 .v2-screen.v2-wx-night .v2-main-card{ background:linear-gradient(180deg,rgba(36,52,72,.58),rgba(15,28,44,.48)); }
@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-weather-left .v2-hi-lo{ font-size:20px; gap:13px; }
  body.dashboard-v2 .v2-alert-card{ height:150px; padding:14px 16px; }
  body.dashboard-v2 .v2-radar-card{ height:calc(100% - 166px); min-height:285px; }
  body.dashboard-v2 .v2-alert-card .v2-next-rain{ font-size:17px; padding:9px 11px; }
  body.dashboard-v2 .v2-alerts{ font-size:14px; }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-weather-left .v2-hi-lo{ font-size:38px; gap:24px; margin-top:12px; }
  body.dashboard-v2 .v2-alert-card{ height:260px; padding:28px 32px; }
  body.dashboard-v2 .v2-radar-card{ height:calc(100% - 286px); min-height:520px; }
  body.dashboard-v2 .v2-alert-card .v2-next-rain{ font-size:30px; padding:17px 21px; border-radius:24px; }
  body.dashboard-v2 .v2-alerts{ font-size:25px; }
  body.dashboard-v2 .v2-alert-item strong{ font-size:27px; }
  body.dashboard-v2 .v2-alert-item em,
  body.dashboard-v2 .v2-alert-none{ font-size:23px; }
}

/* V2 final correction: measurements in Air headers, alerts back top-right, H/L spacing */
body.dashboard-v2 .v2-weather-left{ top:44px; }
body.dashboard-v2 .v2-weather-left .v2-hi-lo{
  margin-top:5px;
  padding-bottom:12px;
  font-size:19px;
}
body.dashboard-v2 .v2-alert-card{
  position:fixed;
  right:38px;
  top:84px;
  width:300px;
  height:auto;
  min-height:0;
  display:block;
  padding:12px 14px;
  z-index:6;
  align-self:auto;
}
body.dashboard-v2 .v2-alert-card .v2-section-title{ font-size:12px; margin-bottom:7px; }
body.dashboard-v2 .v2-alert-card .v2-next-rain{ font-size:15px; padding:8px 10px; margin-bottom:7px; }
body.dashboard-v2 .v2-alerts{ font-size:12.5px; }
body.dashboard-v2 .v2-alert-item strong{ font-size:13.5px; }
body.dashboard-v2 .v2-alert-item em,
body.dashboard-v2 .v2-alert-none{ font-size:12px; }
body.dashboard-v2 .v2-radar-card{
  align-self:stretch;
  height:auto;
  min-height:0;
}
body.dashboard-v2 .v2-metrics span{ line-height:1.05; }
@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-weather-left{ top:42px; }
  body.dashboard-v2 .v2-weather-left .v2-hi-lo{ font-size:19px; padding-bottom:12px; }
  body.dashboard-v2 .v2-alert-card{ right:30px; top:82px; width:292px; padding:12px 14px; height:auto; }
  body.dashboard-v2 .v2-alert-card .v2-next-rain{ font-size:15px; }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-weather-left{ top:82px; }
  body.dashboard-v2 .v2-weather-left .v2-hi-lo{ font-size:34px; padding-bottom:24px; }
  body.dashboard-v2 .v2-alert-card{ right:70px; top:140px; width:540px; padding:24px 28px; }
  body.dashboard-v2 .v2-alert-card .v2-section-title{ font-size:22px; margin-bottom:13px; }
  body.dashboard-v2 .v2-alert-card .v2-next-rain{ font-size:27px; padding:15px 18px; margin-bottom:13px; }
  body.dashboard-v2 .v2-alerts{ font-size:22px; }
  body.dashboard-v2 .v2-alert-item strong{ font-size:24px; }
  body.dashboard-v2 .v2-alert-item em,
  body.dashboard-v2 .v2-alert-none{ font-size:21px; }
}

/* V2 final correction 2: add clear breathing room below H/L */
body.dashboard-v2 .v2-weather-left{ top:24px; }
@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-weather-left{ top:24px; }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-weather-left{ top:58px; }
}

/* V2 correction: plain pollen counts, Weather Alerts spans the top-right section */
body.dashboard-v2 .v2-alert-card{
  position:fixed;
  top:24px;
  right:18px;
  width:calc(27.15vw - 18px);
  height:190px;
  box-sizing:border-box;
  padding:18px 20px;
}
body.dashboard-v2 .v2-alert-card .v2-section-title{ font-size:14px; margin-bottom:12px; }
body.dashboard-v2 .v2-alert-card .v2-next-rain{
  font-size:18px;
  padding:10px 13px;
  margin-bottom:10px;
  border-radius:16px;
}
body.dashboard-v2 .v2-alerts{ font-size:14px; line-height:1.12; }
body.dashboard-v2 .v2-alert-item strong{ font-size:15px; }
body.dashboard-v2 .v2-alert-item em,
body.dashboard-v2 .v2-alert-none{ font-size:13px; }
@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-alert-card{
    top:24px;
    right:18px;
    width:calc(27.15vw - 18px);
    height:190px;
    padding:18px 20px;
  }
  body.dashboard-v2 .v2-alert-card .v2-next-rain{ font-size:18px; }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-alert-card{
    top:54px;
    right:38px;
    width:calc(27.15vw - 34px);
    height:350px;
    padding:32px 36px;
  }
  body.dashboard-v2 .v2-alert-card .v2-section-title{ font-size:22px; margin-bottom:18px; }
  body.dashboard-v2 .v2-alert-card .v2-next-rain{ font-size:30px; padding:18px 22px; margin-bottom:18px; border-radius:24px; }
  body.dashboard-v2 .v2-alerts{ font-size:23px; }
  body.dashboard-v2 .v2-alert-item strong{ font-size:26px; }
  body.dashboard-v2 .v2-alert-item em,
  body.dashboard-v2 .v2-alert-none{ font-size:21px; }
}

/* V2 hourly forecast: 12 hours in two rows of six */
body.dashboard-v2 .v2-hourly-card{ padding:14px; }
body.dashboard-v2 .v2-hourly{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:0;
  height:calc(100% - 30px);
  overflow:hidden;
}
body.dashboard-v2 .v2-hour{
  min-width:0;
  border:0;
  border-left:1px solid rgba(255,255,255,.12);
  border-top:1px solid rgba(255,255,255,.12);
  border-radius:0;
  background:transparent!important;
  gap:2px;
  padding:3px 2px;
}
body.dashboard-v2 .v2-hour:nth-child(6n+1){ border-left:0; }
body.dashboard-v2 .v2-hour:nth-child(-n+6){ border-top:0; }
body.dashboard-v2 .v2-hour-time{ font-size:11.5px; line-height:1; }
body.dashboard-v2 .v2-hour-icon{ --s:24px; }
body.dashboard-v2 .v2-hour-temp{ font-size:20px; line-height:1; }
body.dashboard-v2 .v2-hour-pop{ font-size:10.5px; line-height:1; }
@media (max-width:1700px) and (max-height:1150px){
  body.dashboard-v2 .v2-hourly-card{ padding:14px; }
  body.dashboard-v2 .v2-hourly{ height:calc(100% - 30px); }
  body.dashboard-v2 .v2-hour{ gap:2px; padding:3px 2px; }
  body.dashboard-v2 .v2-hour-time{ font-size:11px; }
  body.dashboard-v2 .v2-hour-icon{ --s:23px; }
  body.dashboard-v2 .v2-hour-temp{ font-size:19px; }
  body.dashboard-v2 .v2-hour-pop{ font-size:10px; }
}
@media (min-width:2200px) and (min-height:1400px){
  body.dashboard-v2 .v2-hourly-card{ padding:28px; }
  body.dashboard-v2 .v2-hourly{ height:calc(100% - 54px); }
  body.dashboard-v2 .v2-hour{ gap:5px; padding:7px 4px; }
  body.dashboard-v2 .v2-hour-time{ font-size:20px; }
  body.dashboard-v2 .v2-hour-icon{ --s:44px; }
  body.dashboard-v2 .v2-hour-temp{ font-size:36px; }
  body.dashboard-v2 .v2-hour-pop{ font-size:18px; }
}