:root{--bg: hsl(224, 32%, 6%);--surface: hsla(222, 26%, 15%, .55);--surface-hover: hsla(222, 24%, 20%, .72);--surface-inset: hsla(0, 0%, 100%, .035);--surface-inset-hover: hsla(0, 0%, 100%, .07);--text: hsl(210, 22%, 96%);--text-secondary: hsl(214, 14%, 67%);--text-muted: hsl(214, 12%, 50%);--accent: hsl(189, 92%, 56%);--accent-2: hsl(212, 92%, 63%);--accent-grad: linear-gradient(135deg, hsl(189, 92%, 58%), hsl(212, 92%, 63%));--accent-glow: hsla(195, 90%, 55%, .35);--accent-soft: hsla(195, 90%, 55%, .12);--danger: hsl(2, 82%, 64%);--success: hsl(150, 62%, 50%);--warning: hsl(38, 94%, 58%);--border: hsla(210, 40%, 100%, .09);--border-strong: hsla(210, 40%, 100%, .16);--inner-ring: inset 0 1px 0 hsla(0, 0%, 100%, .07);--shadow: 0 10px 30px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .65);--font: "Outfit", ui-sans-serif, -apple-system, system-ui, sans-serif;--radius: 20px;--radius-sm: 13px;--maxw: 1320px;--hue: 220;--bg-color: var(--bg);--card-bg: var(--surface);--card-bg-hover: var(--surface-hover);--text-primary: var(--text);--accent-color: var(--accent);--danger-color: var(--danger);--success-color: var(--success);--warning-color: var(--warning);--font-main: var(--font);--glass-border: 1px solid var(--border);--glass-shadow: var(--shadow)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font);background:var(--bg);background-image:radial-gradient(900px 500px at 12% -5%,hsla(205,70%,24%,.35),transparent 60%),radial-gradient(900px 600px at 95% 0%,hsla(255,55%,26%,.22),transparent 55%),radial-gradient(1000px 700px at 50% 115%,hsla(190,60%,18%,.28),transparent 60%);background-attachment:fixed;color:var(--text);min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding:0;overflow-x:clip}::selection{background:var(--accent-soft);color:var(--text)}a{color:var(--accent)}.app-wrapper{max-width:var(--maxw);margin:0 auto;padding:clamp(.75rem,2.5vw,1.5rem);padding-bottom:max(2rem,env(safe-area-inset-bottom))}.main-nav{position:sticky;top:clamp(.4rem,1.5vw,.75rem);z-index:100;display:flex;align-items:center;gap:.4rem;background:#111622b8;-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--border);border-radius:var(--radius);padding:.4rem;margin-bottom:1.5rem;box-shadow:var(--shadow),var(--inner-ring)}.nav-link{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.55rem .9rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-secondary);font-size:.85rem;font-weight:500;letter-spacing:.2px;transition:background .2s ease,color .2s ease,transform .2s ease}.nav-link:hover{background:var(--surface-inset);color:var(--text)}.nav-link.active{background:var(--accent-grad);color:#06243a;font-weight:700;box-shadow:0 6px 18px -6px var(--accent-glow)}.nav-icon{display:inline-flex;align-items:center;line-height:0}.nav-icon svg{width:19px;height:19px;display:block}.nav-temp-toggle{margin-left:auto;padding-right:.25rem;display:flex;align-items:center}.toggle-btn{display:flex;align-items:center;background:#00000047;border:1px solid var(--border);border-radius:999px;padding:2px;cursor:pointer;font-family:var(--font);box-shadow:inset 0 2px 5px #00000059;transition:border-color .2s ease}.toggle-btn:hover{border-color:var(--border-strong)}.toggle-btn .t-opt{padding:.35rem .65rem;font-size:.75rem;font-weight:700;color:var(--text-secondary);border-radius:999px;transition:all .25s ease}.toggle-btn .t-opt.active{background:var(--accent-grad);color:#06243a;box-shadow:0 2px 10px -2px var(--accent-glow)}.page-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}.page-header h1{margin:0;font-size:clamp(1.5rem,1rem + 2.4vw,2.1rem);font-weight:700;letter-spacing:-.5px;line-height:1.1}.page-header .subtitle{font-size:.85rem;color:var(--text-secondary);margin-top:4px}.station-badge{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-secondary);background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:.45rem .9rem;border-radius:999px;border:1px solid var(--border);box-shadow:var(--inner-ring);white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 #30cf8080;animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #30cf8073}50%{box-shadow:0 0 0 6px #30cf8000}}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(.8rem,2vw,1.4rem)}.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(.8rem,2vw,1.4rem)}.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}.grid-5{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(.7rem,1.6vw,1rem)}.section{margin-bottom:clamp(1.1rem,3vw,1.6rem)}.section-title{font-size:clamp(1rem,.85rem + .8vw,1.2rem);font-weight:650;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;letter-spacing:-.2px}.widget,.chart-container,.forecast-card,.day-detail,.summary-card,.record-card{background:var(--surface);-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow),var(--inner-ring);position:relative}.widget{padding:clamp(1.1rem,3vw,1.6rem);overflow:hidden;transition:transform .22s ease,background .22s ease,border-color .22s ease}.widget:hover{transform:translateY(-3px);background:var(--surface-hover);border-color:var(--border-strong)}.widget-title{font-size:.74rem;text-transform:uppercase;letter-spacing:1.6px;color:var(--text-secondary);margin-bottom:1.1rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}.widget-title .unit{font-size:.7rem;opacity:.65;letter-spacing:0;text-transform:none}.temp-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0 1rem}.temp-huge{font-size:clamp(3.75rem,2rem + 9vw,6.25rem);font-weight:700;line-height:.95;letter-spacing:-3px;text-shadow:0 6px 30px rgba(0,0,0,.35)}.temp-details{text-align:right;display:flex;flex-direction:column;gap:.55rem;flex-shrink:0}.temp-detail-row{background:var(--surface-inset);padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;min-width:92px}.temp-detail-row .label{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:2px;font-weight:500}.precip-hero{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.5rem}.precip-hero .precip-value{font-size:clamp(2.75rem,1.5rem + 5vw,3.6rem);font-weight:700;line-height:1;letter-spacing:-1.5px}.precip-hero .precip-unit{font-size:1rem;color:var(--text-secondary)}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.metric-item{background:var(--surface-inset);padding:clamp(.8rem,2.5vw,1.05rem);border-radius:var(--radius-sm);text-align:center;transition:background .2s}.metric-item:hover{background:var(--surface-inset-hover)}.metric-val{font-size:clamp(1.3rem,1rem + 1.6vw,1.65rem);font-weight:650;display:block;margin-bottom:.2rem;line-height:1.15;letter-spacing:-.5px}.metric-label{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.day-glance{display:flex;flex-direction:column;gap:.25rem}.glance-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.85rem}.glance-row:last-child{border-bottom:none}.glance-day{width:44px;color:var(--accent);font-weight:600}.glance-precip{flex:1;text-align:center;opacity:.6;font-size:.75rem}.glance-temps{width:86px;text-align:right}.glance-temps .g-low{opacity:.55;margin-left:.35rem}.wind-layout{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,1.75rem);align-items:center}.compass-container{width:clamp(118px,34vw,140px);aspect-ratio:1;border:2px solid var(--border-strong);border-radius:50%;margin:0 auto;position:relative;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at 50% 50%,var(--surface-inset),transparent 70%)}.compass-container:before{content:"N";position:absolute;top:-18px;font-size:.65rem;color:var(--text-secondary);font-weight:700}.compass-arrow{width:3px;height:76%;background:linear-gradient(to top,transparent 48%,var(--accent) 48%);position:absolute;transform-origin:center;transition:transform 1s cubic-bezier(.4,0,.2,1);border-radius:2px;filter:drop-shadow(0 0 6px var(--accent-glow))}.compass-arrow:after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--accent)}.direction-text{font-weight:700;font-size:1.3rem;color:var(--accent)}.wind-stats{display:flex;flex-direction:column;gap:.7rem}.wind-stat-row{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.wind-stat-row .wind-val{font-size:1.35rem;font-weight:700;letter-spacing:-.5px}.chart-container{padding:clamp(1.1rem,3vw,1.6rem)}.chart-wrap{height:clamp(230px,38vw,300px);position:relative}.chart-container .widget-title{margin-bottom:1rem}.sparkline-wrap{height:80px;margin-top:1rem;position:relative}.forecast-card{padding:clamp(1.1rem,3vw,1.5rem);transition:transform .2s ease,border-color .2s ease;text-align:center}.forecast-card:hover{transform:translateY(-4px);border-color:var(--border-strong)}.forecast-card .day-name{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:.7rem;color:var(--accent)}.forecast-card .weather-emoji{font-size:clamp(2.2rem,7vw,2.6rem);margin-bottom:.5rem;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}.forecast-card .temps{display:flex;justify-content:center;gap:1rem;margin-bottom:.7rem}.forecast-card .temp-high{font-size:1.5rem;font-weight:700}.forecast-card .temp-low{font-size:1.5rem;font-weight:300;opacity:.55}.forecast-card .precip-chance{font-size:.8rem;color:var(--accent);font-weight:500}.forecast-card .narrative{font-size:.78rem;color:var(--text-secondary);line-height:1.45;margin-top:.8rem}.day-detail{padding:clamp(1.2rem,3.5vw,1.75rem);margin-top:1.5rem}.daypart-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,1.75rem);margin-top:1rem}.daypart-section h3{margin:0 0 1rem;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:var(--accent);display:flex;align-items:center;gap:.5rem}.detail-row{display:flex;justify-content:space-between;gap:.75rem;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.85rem}.detail-row .detail-label{color:var(--text-secondary);white-space:nowrap}.detail-row .detail-value{font-weight:600;text-align:right}.sun-bar{background:linear-gradient(90deg,#1e293b,#f59e0b 20%,#fbbf24,#f59e0b 80%,#1e293b);height:6px;border-radius:3px;margin:.5rem 0;position:relative}.sun-times{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-secondary)}.summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:clamp(.6rem,1.6vw,1rem);margin-bottom:1.5rem}.summary-card{padding:clamp(.8rem,2.5vw,1rem);border-radius:var(--radius-sm);text-align:center;transition:transform .2s,border-color .2s;cursor:default}.summary-card:hover{transform:translateY(-2px);border-color:var(--border-strong)}.summary-card .summary-icon{font-size:1.3rem;margin-bottom:4px}.summary-card .summary-temp{font-size:1.4rem;font-weight:700;letter-spacing:-.5px}.summary-card .summary-low{font-size:.75rem;color:var(--text-secondary)}.summary-card .summary-date{font-size:.75rem;color:var(--accent);margin-top:4px;font-weight:600}.records-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:clamp(.7rem,1.8vw,1rem)}.record-card{padding:clamp(1rem,3vw,1.3rem) 1rem;border-radius:var(--radius-sm);text-align:center;transition:transform .2s ease,border-color .2s ease}.record-card:hover{transform:translateY(-3px);border-color:var(--border-strong)}.record-icon{font-size:1.65rem;display:block;margin-bottom:.45rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.record-value{font-size:clamp(1.45rem,1rem + 2vw,1.85rem);font-weight:700;line-height:1.1;letter-spacing:-1px}.record-unit{font-size:.82rem;font-weight:500;opacity:.6;margin-left:2px;letter-spacing:0}.record-label{margin-top:.4rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary)}.record-detail{margin-top:.25rem;font-size:.72rem;color:var(--accent);font-weight:600}.station-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:.7rem}.station-item{background:var(--surface-inset);padding:.9rem 1rem;border-radius:var(--radius-sm);transition:background .2s}.station-item:hover{background:var(--surface-inset-hover)}.station-item .s-val{font-size:1.05rem;font-weight:650;display:block;line-height:1.3;word-break:break-word}.station-item .s-val a{color:var(--accent);text-decoration:none}.station-item .s-val a:hover{text-decoration:underline}.station-item .s-label{display:block;margin-top:3px;font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.qc-badge{display:inline-flex;align-items:center;gap:.3rem}.date-picker-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.date-picker-wrap label{font-size:.85rem;color:var(--text-secondary)}.date-picker-wrap input[type=date]{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.6rem 1rem;border-radius:var(--radius-sm);font-family:var(--font);font-size:.9rem;min-height:44px;cursor:pointer;color-scheme:dark}.date-picker-wrap button{background:var(--accent-grad);color:#06243a;border:none;padding:.6rem 1.4rem;border-radius:var(--radius-sm);font-family:var(--font);font-weight:700;font-size:.9rem;min-height:44px;cursor:pointer;transition:filter .2s,transform .1s;box-shadow:0 6px 18px -8px var(--accent-glow)}.date-picker-wrap button:hover{filter:brightness(1.08)}.date-picker-wrap button:active{transform:translateY(1px)}.loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--text-secondary);min-height:300px}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.error-state .error-icon{font-size:2.5rem;margin-bottom:1rem}.error-state h2{color:var(--danger);margin:0 0 .5rem}.app-footer{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.25rem;margin-top:2.5rem;padding:1.25rem;border-top:1px solid var(--border);color:var(--text-secondary);font-size:.85rem}.app-footer a{color:var(--text-secondary);text-decoration:none;transition:color .2s ease}.app-footer a:hover{color:var(--accent)}.app-version{margin-left:.75rem;padding-left:.75rem;border-left:1px solid var(--border-strong);font-size:.75rem;opacity:.6;font-variant-numeric:tabular-nums}@media(max-width:900px){.grid-2{grid-template-columns:1fr}}@media(max-width:640px){.main-nav{gap:.2rem;padding:.3rem}.nav-link{padding:.5rem .35rem;font-size:.72rem;gap:0}.nav-label{display:none}.nav-icon svg{width:22px;height:22px}.grid-3,.wind-layout,.daypart-grid{grid-template-columns:1fr}.grid-4,.grid-5,.records-grid,.station-grid{grid-template-columns:1fr 1fr}.page-header{flex-direction:column;gap:.6rem;align-items:flex-start}.temp-hero{flex-direction:column;text-align:center;gap:1rem;padding-top:0}.temp-details{text-align:center;flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%}.temp-detail-row{flex:1;min-width:0}.wind-layout{justify-items:center}.wind-stats{width:100%;max-width:320px}}@media(max-width:400px){.grid-4,.grid-5,.station-grid{grid-template-columns:1fr}.summary-row{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}.metrics-grid{gap:.5rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
