*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--navy:#0f172a;--navy-med:#1e293b;--blue:#3b82f6;--blue-dk:#1d4ed8;--sky:#e0f2fe;--white:#fff;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-400:#94a3b8;--gray-500:#64748b;--gray-700:#334155;--gray-900:#0f172a;--green:#22c55e;--red:#ef4444;--orange:#f97316;--yellow:#eab308;--radius:12px;--shadow:0 1px 3px #00000014, 0 1px 2px #0000000f;--shadow-md:0 4px 6px #00000012, 0 2px 4px #0000000f}body{background:var(--gray-100);color:var(--gray-900);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}.page{flex-direction:column;min-height:100vh;display:flex}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}.content{flex-direction:column;gap:1.25rem;width:100%;max-width:1200px;margin:0 auto;padding:1.5rem 1rem;display:flex}.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}.card-title{text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);margin-bottom:1rem;font-size:.7rem;font-weight:600}.header{background:var(--navy);color:var(--white);padding:1rem}.header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;max-width:1200px;margin:0 auto;display:flex}.header-title{letter-spacing:-.01em;font-size:1.25rem;font-weight:700}.header-subtitle{color:#94a3b8;margin-top:.1rem;font-size:.8rem}.header-right{align-items:center;gap:1rem;display:flex}.status-dot{color:#94a3b8;align-items:center;gap:.4rem;font-size:.8rem;display:flex}.status-dot:before{content:"";background:var(--green);border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse}.status-dot.offline:before{background:var(--red);animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.last-updated{color:#64748b;font-size:.75rem}.alert-banner{flex-direction:column;gap:.5rem;display:flex}.alert-item{border-left:4px solid;border-radius:8px;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;display:flex}.alert-item.EXTREME,.alert-item.SEVERE,.alert-item.INTENSE{border-color:var(--red);color:#991b1b;background:#fef2f2}.alert-item.DANGER,.alert-item.VERY\ HIGH,.alert-item.ALERT{border-color:var(--orange);color:#9a3412;background:#fff7ed}.alert-item.CAUTION,.alert-item.MODERATE,.alert-item.HIGH{border-color:var(--yellow);color:#854d0e;background:#fefce8}.alert-type{white-space:nowrap;font-weight:700}.alert-msg{flex:1}.alert-value{white-space:nowrap;font-size:.8rem;font-weight:600}.conditions-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;display:grid}.metric-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;flex-direction:column;gap:.25rem;padding:1rem;display:flex}.metric-label{text-transform:uppercase;letter-spacing:.07em;color:var(--gray-500);font-size:.7rem;font-weight:600}.metric-value{color:var(--gray-900);font-size:1.6rem;font-weight:700;line-height:1.1}.metric-unit{color:var(--gray-500);margin-left:.15rem;font-size:.75rem;font-weight:400}.metric-sub{color:var(--gray-500);margin-top:.1rem;font-size:.75rem}.metric-card.highlight{background:var(--sky);border-color:#bae6fd}.metric-card.highlight .metric-value{color:var(--blue-dk)}.forecast-strip{grid-template-columns:repeat(4,1fr);gap:.75rem;display:grid}.forecast-item{background:var(--gray-50);border:1px solid var(--gray-200);text-align:center;border-radius:10px;flex-direction:column;gap:.3rem;padding:.875rem;display:flex}.forecast-time{text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);font-size:.7rem;font-weight:600}.forecast-icon{font-size:1.5rem}.forecast-temp{color:var(--gray-900);font-size:1.2rem;font-weight:700}.forecast-rain{color:var(--blue);font-size:.75rem;font-weight:500}.forecast-cloud{color:var(--gray-500);font-size:.7rem}.chart-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.time-range-btns{gap:.4rem;display:flex}.time-btn{border:1px solid var(--gray-200);background:var(--white);color:var(--gray-700);cursor:pointer;border-radius:6px;padding:.3rem .75rem;font-size:.8rem;font-weight:500;transition:all .15s}.time-btn:hover{background:var(--gray-100)}.time-btn.active{background:var(--blue);border-color:var(--blue);color:var(--white)}.param-btns{flex-wrap:wrap;gap:.4rem;display:flex}.param-btn{border:1px solid var(--gray-200);background:var(--white);color:var(--gray-700);cursor:pointer;border-radius:6px;padding:.3rem .75rem;font-size:.8rem;font-weight:500;transition:all .15s}.param-btn:hover{background:var(--gray-100)}.param-btn.active{color:var(--white);border-color:currentColor}.param-btn.temp.active{background:#ef4444;border-color:#ef4444}.param-btn.hum.active{background:#3b82f6;border-color:#3b82f6}.param-btn.press.active{background:#8b5cf6;border-color:#8b5cf6}.param-btn.wind.active{background:#10b981;border-color:#10b981}.param-btn.rain.active{background:#06b6d4;border-color:#06b6d4}.chart-wrap{width:100%;overflow:hidden}.loading{color:var(--gray-400);justify-content:center;align-items:center;padding:3rem;font-size:.9rem;display:flex}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%) 0 0/200% 100%;border-radius:6px;height:1.2rem;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.footer{background:var(--navy);color:#64748b;text-align:center;margin-top:auto;padding:1rem;font-size:.75rem}@media (width<=640px){.forecast-strip,.conditions-grid{grid-template-columns:repeat(2,1fr)}.chart-controls{flex-direction:column;align-items:flex-start}.header-title{font-size:1rem}}