:root{
 --page:#eef4f6;
 --card:#ffffff;
 --ink:#0d2c43;
 --ink-soft:#36596d;
 --muted:#758996;
 --line:#dbe6ea;
 --line-soft:#edf2f4;
 --blue:#0d6f9f;
 --blue-2:#4aa8cf;
 --salmon:#ee7b68;
 --salmon-soft:#fff0ec;
 --mint:#56ad9b;
 --gold:#d99d2b;
 --gold-soft:#fff7df;
 --night:#17384e;
 --shadow:0 16px 42px rgba(33,71,93,.08);
 --shadow-soft:0 8px 24px rgba(33,71,93,.055);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
 background:#dfe9f7;
 color:var(--ink);
 font-family:Inter,"Segoe UI",Arial,sans-serif;
 -webkit-font-smoothing:antialiased;
}
.page{width:min(1320px,calc(100% - 34px));margin:24px auto 50px}
.hero,.daily-wrap,.panel{
 background:rgba(255,255,255,.97);
 border:1px solid rgba(157,181,193,.26);
 box-shadow:var(--shadow);
}
.hero{border-radius:26px;padding:27px 31px 23px;position:relative;overflow:hidden}
.hero:before{
 content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;
 background:linear-gradient(90deg,var(--blue),var(--blue-2),transparent 76%);
}
.brand-row{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.brand{color:var(--blue);font-size:22px;font-weight:850;letter-spacing:-.6px}
.product-badge{
 font-size:9px;font-weight:850;letter-spacing:1.55px;color:#67808f;
 border:1px solid #d6e3e8;border-radius:30px;padding:6px 10px;background:#fbfdfe
}
.hero-main{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.hero-copy{min-width:0}
h1{margin:0;font-size:clamp(32px,4vw,50px);letter-spacing:-1.9px;font-weight:800;line-height:1.02}
.subtitle{margin:9px 0 0;color:var(--muted);font-size:14px}
.subtitle span{margin-left:9px;color:#92a2aa}
.model-switch{
 display:flex;gap:7px;background:#edf3f5;padding:5px;border:1px solid #e5ecef;border-radius:16px
}
.model-btn{
 border:0;background:transparent;color:#6f828e;padding:10px 15px 9px;min-width:125px;cursor:pointer;
 border-radius:11px;transition:.18s ease;text-align:center
}
.model-btn strong,.model-btn span,.model-btn small{display:block}
.model-btn strong{font-size:13px;letter-spacing:-.1px}
.model-btn .model-run{font-size:10px;margin-top:4px;font-weight:750;color:#7e919c}
.model-btn small{font-size:9px;margin-top:2px;color:#9aa8af}
.model-btn:hover{background:rgba(255,255,255,.62)}
.model-btn.active{
 background:#fff;color:var(--blue);box-shadow:0 5px 17px rgba(23,65,90,.12);
 outline:1px solid rgba(13,111,159,.11)
}
.model-btn.active .model-run{color:var(--salmon)}
.status-row{
 display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid #e6edef
}
.status-chip{
 display:flex;align-items:center;gap:7px;color:#8797a0;font-size:10px;background:#f5f8f9;
 padding:8px 11px;border-radius:9px;border:1px solid #eef2f4
}
.status-chip span{font-weight:800;letter-spacing:.55px}
.status-chip strong{color:#35566a;font-size:11px}
.status-chip.cycle-chip{background:var(--salmon-soft);border-color:#f9ddd7}
.status-chip.cycle-chip strong{color:#c95c4a}

.daily-wrap,.panel{margin-top:18px;border-radius:22px;padding:22px 24px}
.section-title,.panel-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:17px}
.eyebrow{color:var(--blue);font-weight:850;font-size:9px;letter-spacing:1.6px}
h2{margin:5px 0 0;font-size:20px;letter-spacing:-.45px;line-height:1.15}
.section-note,.legend-note{font-size:10px;color:#93a1a8}
.daily-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.day-card{
 min-width:0;border:1px solid #e1e9ec;border-radius:17px;padding:14px 14px 13px;
 background:linear-gradient(160deg,#fff 0%,#fbfdfd 100%);box-shadow:var(--shadow-soft);
 position:relative;overflow:hidden
}
.day-card.wx-sun{background:linear-gradient(160deg,#fffdf6 0%,#fff 55%,#fbfdfd 100%)}
.day-card.wx-cloud{background:linear-gradient(160deg,#fbfdfe 0%,#fff 55%,#f7fafb 100%)}
.day-card.wx-rain{background:linear-gradient(160deg,#f4fbff 0%,#fff 55%,#f6fbfd 100%)}
.day-card.wx-storm{background:linear-gradient(160deg,#fff9f1 0%,#fff 50%,#f7fbfd 100%)}
.day-card.wx-fog{background:linear-gradient(160deg,#f6f8f9 0%,#fff 55%,#f7fafb 100%)}

.day-card:after{
 content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
 background:linear-gradient(90deg,transparent,#dce9ee,transparent)
}
.day-card.today{border-color:rgba(13,111,159,.48);box-shadow:0 10px 26px rgba(13,111,159,.09)}
.day-card.today:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.day-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.day-name{font-size:13px;font-weight:800;text-transform:capitalize}
.date-pill{
 display:inline-flex;margin-top:6px;background:var(--salmon-soft);color:#ca5d4c;border:1px solid #f8ddd7;
 padding:4px 7px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:.2px
}
.weather-icon{width:44px;height:44px;flex:0 0 44px}
.weather-icon svg{width:100%;height:100%;display:block}
.weather-text{margin-top:11px;color:#647985;font-size:11px;min-height:28px}
.temps{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.tmax{font-size:28px;font-weight:800;color:var(--salmon);letter-spacing:-1px}
.tmin{font-size:16px;font-weight:750;color:var(--blue)}
.temp-label{font-size:9px;color:#9aa6ad;margin-left:1px}
.day-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.day-meta div{background:#f5f8f9;border:1px solid #eef2f4;border-radius:9px;padding:7px 8px}
.day-meta span{display:block;color:#8e9ca4;font-size:8px;font-weight:800;letter-spacing:.4px}
.day-meta strong{display:block;color:#3f6174;font-size:11px;margin-top:3px}

.chart{width:100%}.chart-lg{height:380px}.chart-md{height:300px}.chart-sm{height:165px}.chart-mini{height:250px}
.sub-divider{
 display:flex;align-items:center;gap:12px;color:#708591;font-size:10px;font-weight:800;letter-spacing:.25px;
 margin:3px 8px 0
}
.sub-divider:before,.sub-divider:after{content:"";height:1px;background:#edf2f4;flex:1}
.advanced-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini-panel{
 border:1px solid #e0e9ed;border-radius:17px;padding:13px 13px 5px;background:#fbfdfd;
 box-shadow:0 5px 18px rgba(42,74,93,.035)
}
.mini-head{display:flex;justify-content:space-between;align-items:flex-start;padding:2px 6px 0}
.mini-kicker{font-size:8px;font-weight:850;letter-spacing:1.1px;color:#93a2aa}
.mini-panel h3{margin:3px 0 0;font-size:13px;color:#3e6074}
.unit-pill{font-size:9px;font-weight:800;color:#7c909c;background:#f0f5f7;border-radius:20px;padding:5px 8px}
.cape-panel{background:linear-gradient(180deg,#fffdf8 0%,#fbfdfd 35%)}
.freezing-panel{background:linear-gradient(180deg,#f8fcff 0%,#fbfdfd 35%)}
.sun-panel{background:linear-gradient(180deg,#fffdf5 0%,#fbfdfd 35%)}

.wind-strip-wrap{margin:0 45px 7px 56px;overflow-x:auto}
.wind-directions{
 min-width:900px;display:grid;grid-template-columns:repeat(20,1fr);
 border-top:1px solid #e8edef;padding-top:10px
}
.wind-dir-cell{text-align:center;font-size:10px;color:#71828c}
.wind-arrow{display:block;width:18px;height:18px;margin:0 auto 5px;font-size:16px;color:#335d74;line-height:18px}
.wind-dir-cell small{font-size:9px;font-weight:750;color:#647d8b}

footer{
 margin:19px 5px 0;padding:0 5px;color:#8a989f;font-size:10px;display:flex;
 justify-content:space-between;gap:30px
}
footer strong{color:#4f7184}
.loading{
 position:fixed;inset:auto 20px 20px auto;background:#173b51;color:#fff;padding:11px 15px;
 border-radius:11px;font-size:11px;box-shadow:var(--shadow);transition:.2s;z-index:10
}
.loading span{
 display:inline-block;width:7px;height:7px;border-radius:50%;background:#79c3df;margin-right:5px;
 animation:pulse 1s infinite alternate
}
@keyframes pulse{to{opacity:.28}}
.loading.hidden{opacity:0;pointer-events:none}

@media(max-width:950px){
 .hero-main{display:block}.model-switch{margin-top:20px}.daily-cards{grid-template-columns:repeat(2,1fr)}
 .advanced-grid{grid-template-columns:1fr}.section-note,.legend-note{display:none}
 footer{display:block}footer span{display:block;margin-top:7px}
}
@media(max-width:600px){
 .page{width:calc(100% - 18px);margin-top:9px}.hero,.panel,.daily-wrap{border-radius:18px;padding:18px 14px}
 .model-switch{width:100%}.model-btn{min-width:0;padding:9px 6px;flex:1}.model-btn small{display:none}
 .daily-cards{grid-template-columns:1fr}.subtitle span{display:block;margin:5px 0 0}
 .chart-lg{height:335px}.chart-md{height:275px}.chart-mini{height:235px}
 .wind-strip-wrap{margin-left:30px;margin-right:10px}.status-chip{flex:1 1 auto}
}

.cloud-chart{height:235px}
.chart-empty{
 height:100%;min-height:210px;display:flex;align-items:center;justify-content:center;
 color:#8698a2;font-size:11px;text-align:center;padding:20px
}
.chart-empty strong{display:block;color:#4e6f81;font-size:12px;margin-bottom:5px}
@media(max-width:600px){.cloud-chart{height:220px}}

.day-card.wx-sun:after{background:linear-gradient(90deg,transparent,#efbd4a,transparent)}
.day-card.wx-cloud:after{background:linear-gradient(90deg,transparent,#a9bec8,transparent)}
.day-card.wx-rain:after{background:linear-gradient(90deg,transparent,#48a9d2,transparent)}
.day-card.wx-storm:after{background:linear-gradient(90deg,transparent,#e7a53b,transparent)}
.day-card.wx-fog:after{background:linear-gradient(90deg,transparent,#aebdc4,transparent)}

.weather-icon{
 width:58px;height:58px;flex:0 0 58px;
 display:flex;align-items:center;justify-content:center;
 border-radius:16px;
 background:rgba(255,255,255,.72);
 box-shadow:inset 0 0 0 1px rgba(170,190,199,.18),0 6px 16px rgba(47,79,96,.05)
}
.weather-icon svg{width:50px;height:50px;display:block;overflow:visible}

.cloud-chart{height:282px}
.cloud-layer-note{
 color:#7d909b;font-size:9px;font-weight:700;letter-spacing:.2px
}

.panel:nth-of-type(3){background:linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%)}
.panel:nth-of-type(4){background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)}
.panel:nth-of-type(5){background:linear-gradient(180deg,#ffffff 0%,#fffdf9 100%)}
.panel:nth-of-type(6){background:linear-gradient(180deg,#fffefb 0%,#ffffff 100%)}

.daily-wrap{
 background:linear-gradient(180deg,#fbfdff 0%,#ffffff 100%);
}
.thermal-panel{
 background:linear-gradient(180deg,#f7fbff 0%,#ffffff 100%) !important;
}
.precip-panel{
 background:linear-gradient(180deg,#f6fafc 0%,#ffffff 100%) !important;
}
.wind-panel{
 background:linear-gradient(180deg,#fbfaf5 0%,#ffffff 100%) !important;
}
.advanced-shell{
 background:linear-gradient(180deg,#fffef9 0%,#ffffff 100%) !important;
}

.day-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.day-meta .meta-box{
 border-radius:11px;padding:8px 9px;border:1px solid transparent;
}
.day-meta .meta-box span{display:block;font-size:8px;font-weight:800;letter-spacing:.42px;margin-bottom:3px}
.day-meta .meta-box strong{display:block;font-size:11px;font-weight:800}
.day-meta .meta-box small{display:block;font-size:9px;color:#6d818e;margin-top:1px}
.day-meta .metric-precip{background:#edf7fd;border-color:#cfe7f4}
.day-meta .metric-precip span,.day-meta .metric-precip strong{color:#1f79a6}
.day-meta .metric-prob{background:#eef4fb;border-color:#d9e4f5}
.day-meta .metric-prob span,.day-meta .metric-prob strong{color:#446b91}
.day-meta .metric-gust{background:#fff1ea;border-color:#f3d4c5}
.day-meta .metric-gust span,.day-meta .metric-gust strong{color:#bf6547}
.day-meta .metric-sun{background:#fff8e7;border-color:#f0e0a6}
.day-meta .metric-sun span,.day-meta .metric-sun strong{color:#aa7a12}

.day-meta .level-low{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.day-meta .level-mid{box-shadow:inset 0 -18px 0 rgba(255,255,255,.08)}
.day-meta .level-high{box-shadow:inset 0 -18px 0 rgba(0,0,0,.03)}
.day-meta .metric-precip.level-high{background:#d8eefb}
.day-meta .metric-prob.level-high{background:#dfeafa}
.day-meta .metric-gust.level-high{background:#ffe1d5}
.day-meta .metric-sun.level-high{background:#ffefba}
.day-meta .metric-precip.level-mid{background:#e7f4fc}
.day-meta .metric-prob.level-mid{background:#e8f0fb}
.day-meta .metric-gust.level-mid{background:#ffebdf}
.day-meta .metric-sun.level-mid{background:#fff4cf}

.cloud-row-label{
 display:inline-flex;align-items:center;gap:8px;
}
.cloud-row-dot{
 width:9px;height:9px;border-radius:50%;
}

/* V0.6 panel tint refinement */
.thermal-panel{
 background:
  linear-gradient(180deg,rgba(249,241,229,.96) 0%,rgba(255,252,247,.98) 100%) !important;
 border-color:rgba(217,190,151,.34) !important;
}
.precip-panel{
 background:
  linear-gradient(180deg,rgba(235,246,252,.97) 0%,rgba(248,252,255,.99) 100%) !important;
 border-color:rgba(146,197,220,.38) !important;
}


/* V0.7 unified panel tone refinement */
:root{
  --panel-unified-bg-start: rgba(252,249,243,.97);
  --panel-unified-bg-end: rgba(255,254,250,.99);
  --panel-unified-border: rgba(214,202,181,.34);
}

/* Make all main content boxes share the same soft tone */
.daily-wrap,
.thermal-panel,
.precip-panel,
.wind-panel,
.advanced-shell{
  background:
    linear-gradient(180deg,var(--panel-unified-bg-start) 0%,var(--panel-unified-bg-end) 100%) !important;
  border-color: var(--panel-unified-border) !important;
}

/* Slightly softer header/body harmony */
.hero{
  background:
    radial-gradient(circle at 84% 10%,rgba(222,180,83,.10),transparent 26%),
    linear-gradient(135deg,#f5eee2 0%,#f8f2e9 48%,#f4ecde 100%) !important;
}

/* Keep cards crisp over the warmer section tone */
.day-card{
  background: linear-gradient(160deg,#ffffff 0%,#fdfefe 100%) !important;
}


/* V0.8 daily metric cleanup: remove dark intensity shading */
.day-meta .level-low,
.day-meta .level-mid,
.day-meta .level-high{
  box-shadow:none !important;
}

/* Intensity now shown only by pastel fill + border strength */
.day-meta .metric-precip.level-low{background:#edf7fd;border-color:#cfe7f4}
.day-meta .metric-precip.level-mid{background:#e3f3fc;border-color:#b9ddf0}
.day-meta .metric-precip.level-high{background:#d7eefb;border-color:#9fcfe7}

.day-meta .metric-prob.level-low{background:#eef4fb;border-color:#d9e4f5}
.day-meta .metric-prob.level-mid{background:#e6eef9;border-color:#c8d8f0}
.day-meta .metric-prob.level-high{background:#dce9f8;border-color:#aac4e8}

.day-meta .metric-gust.level-low{background:#fff1ea;border-color:#f3d4c5}
.day-meta .metric-gust.level-mid{background:#ffe8de;border-color:#efc3b1}
.day-meta .metric-gust.level-high{background:#ffdfd1;border-color:#eaa88f}

.day-meta .metric-sun.level-low{background:#fff8e7;border-color:#f0e0a6}
.day-meta .metric-sun.level-mid{background:#fff3d3;border-color:#ecd486}
.day-meta .metric-sun.level-high{background:#ffedbf;border-color:#e3c760}