@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#0f172a;--color-surface:#1e293b;--color-surface-2:#334155;--color-text:#f1f5f9;--color-text-muted:#94a3b8;--color-accent-blue:#3b82f6;--color-accent-orange:#f59e0b;--color-accent-red:#ef4444;--color-accent-green:#22c55e;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--radius:.75rem;--font:"Inter", system-ui, -apple-system, sans-serif}body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);min-height:100dvh}#app{max-width:640px;padding:var(--space-md);margin:0 auto}.header-inner{align-items:center;gap:var(--space-sm);padding:var(--space-md) 0;flex-wrap:wrap;display:flex}.city-name{flex:1;font-size:1.25rem;font-weight:600}.search-wrapper{position:relative}#city-search{background:var(--color-surface);border:1px solid var(--color-surface-2);border-radius:var(--radius);color:var(--color-text);padding:var(--space-sm) var(--space-md);outline:none;width:200px;font-size:.9rem}#city-search:focus{border-color:var(--color-accent-blue)}.search-results{background:var(--color-surface);border:1px solid var(--color-surface-2);border-radius:var(--radius);z-index:10;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden}.search-results li{padding:var(--space-sm) var(--space-md);cursor:pointer;font-size:.875rem}.search-results li:hover{background:var(--color-surface-2)}#btn-geolocate{background:var(--color-surface);border:1px solid var(--color-surface-2);border-radius:var(--radius);color:var(--color-text);padding:var(--space-sm) var(--space-md);cursor:pointer;font-size:1rem}#btn-geolocate:hover{background:var(--color-surface-2)}.last-updated{color:var(--color-text-muted);white-space:nowrap;font-size:.75rem}#btn-refresh{background:var(--color-surface);border:1px solid var(--color-surface-2);border-radius:var(--radius);color:var(--color-text);padding:var(--space-sm) var(--space-md);cursor:pointer;font-size:1rem}#btn-refresh:hover{background:var(--color-surface-2)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.spinner{border:3px solid var(--color-surface-2);border-top-color:var(--color-accent-blue);width:40px;height:40px;margin:var(--space-xl) auto;border-radius:50%;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.stale-banner{background:var(--color-accent-orange);color:#0f172a;text-align:center;padding:var(--space-sm) var(--space-md);border-radius:var(--radius);margin-bottom:var(--space-md);font-size:.85rem;font-weight:600}.refreshing-banner{background:var(--color-card);color:var(--color-text-muted);font-weight:400}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--color-surface-2) 25%, #3d4f6a 50%, var(--color-surface-2) 75%);background-size:200% 100%;border-radius:4px;animation:1.5s ease-in-out infinite shimmer}.skeleton-icon{border-radius:50%;flex-shrink:0;width:72px;height:72px}.skeleton-icon-sm{border-radius:50%;width:24px;height:24px}.skeleton-line{height:1rem;margin-bottom:var(--space-xs)}.skeleton-lg{width:60%;height:2.5rem}.skeleton-md{width:50%}.skeleton-sm{width:40%;height:.8rem}.skeleton-xs{width:32px;height:.7rem}.skeleton-label{width:140px;height:.7rem;margin-bottom:var(--space-sm)}.skeleton-card{pointer-events:none}.skeleton-day{padding:var(--space-md)}.error-box{text-align:center;padding:var(--space-xl);color:var(--color-text-muted)}.error-box button{margin-top:var(--space-md);background:var(--color-accent-blue);color:#fff;border-radius:var(--radius);padding:var(--space-sm) var(--space-lg);cursor:pointer;border:none;font-size:.9rem}.section-label{text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin-bottom:var(--space-sm);padding-left:var(--space-xs);font-size:.7rem;font-weight:600}.current-card{align-items:center;gap:var(--space-lg);background:var(--color-surface);border-radius:var(--radius);padding:var(--space-lg);margin-bottom:var(--space-md);display:flex;box-shadow:0 4px 24px #0006}.current-icon svg{width:72px;height:72px}.current-temp{font-size:4rem;font-weight:700;line-height:1}.current-feels{color:var(--color-text-muted);margin-top:var(--space-xs);font-size:.9rem}.current-desc{margin-top:var(--space-xs);font-size:1.1rem}.current-time{color:var(--color-text-muted);margin-top:var(--space-sm);font-size:.8rem}.metrics-grid{gap:var(--space-sm);margin-bottom:var(--space-md);grid-template-columns:1fr 1fr;display:grid}.metric-card{background:var(--color-surface);border-radius:var(--radius);padding:var(--space-md);border-top:3px solid #0000}.metric-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs);font-size:.75rem}.metric-value{font-size:1.1rem;font-weight:600}.metric-wind{border-top-color:var(--color-accent-blue)}.metric-precip{border-top-color:#38bdf8}.metric-storm{border-top-color:var(--color-surface-2)}.metric-storm.storm-alert{border-top-color:var(--color-accent-orange)}.metric-humidity{border-top-color:#22d3ee}.metric-sunrise{border-top-color:var(--color-accent-orange)}.metric-sunset{border-top-color:#f97316}.uv-low{border-top-color:var(--color-accent-green)}.uv-moderate{border-top-color:#facc15}.uv-high{border-top-color:var(--color-accent-orange)}.uv-very-high{border-top-color:var(--color-accent-red)}.uv-extreme{border-top-color:#c026d3}#hourly{margin-bottom:var(--space-md)}.hourly-scroll{gap:var(--space-sm);padding-bottom:var(--space-sm);scrollbar-width:thin;scrollbar-color:var(--color-surface-2) transparent;display:flex;overflow-x:auto}.hour-item{background:var(--color-surface);border-radius:var(--radius);padding:var(--space-sm);text-align:center;align-items:center;gap:var(--space-xs);flex-direction:column;flex:0 0 64px;display:flex}.hour-time{color:var(--color-text-muted);font-size:.75rem}.hour-icon svg{width:24px;height:24px}.hour-temp{font-size:.9rem;font-weight:600}.hour-precip{color:var(--color-accent-blue);font-size:.7rem}.daily-list{gap:var(--space-xs);flex-direction:column;display:flex}.day-item{align-items:center;gap:var(--space-md);background:var(--color-surface);border-radius:var(--radius);padding:var(--space-sm) var(--space-md);display:flex}.day-name{white-space:nowrap;min-width:40px;font-weight:600}.day-icon svg{width:28px;height:28px}.day-temps{flex:1;font-size:.9rem}.day-precip{color:var(--color-accent-blue);text-align:right;min-width:48px;font-size:.8rem}.sun-times{color:var(--color-text-muted);white-space:nowrap;font-size:.75rem}.day-uv{color:var(--color-text-muted);text-align:right;min-width:36px;font-size:.8rem}details.day-item{display:block}details.day-item>summary{cursor:pointer;align-items:center;gap:var(--space-md);list-style:none;display:flex}details.day-item>summary::-webkit-details-marker{display:none}details.day-item>summary .day-name:after{content:" ▾"}details.day-item[open]>summary .day-name:after{content:" ▴"}details.day-item:hover>summary{border-radius:var(--radius);background:#ffffff08}.day-hourly-scroll{gap:var(--space-sm);padding:var(--space-sm) 0;scrollbar-width:thin;scrollbar-color:var(--color-surface-2) transparent;display:flex;overflow-x:auto}.day-hour-item{background:var(--color-surface-2);border-radius:var(--radius);padding:var(--space-xs) var(--space-sm);text-align:center;flex-direction:column;flex:0 0 56px;align-items:center;gap:2px;display:flex}.day-hour-time{color:var(--color-text-muted);font-size:.7rem}.day-hour-icon svg{width:20px;height:20px}.day-hour-temp{font-size:.85rem;font-weight:600}.day-hour-precip{color:var(--color-accent-blue);font-size:.65rem}.day-accordion-body{grid-template-rows:0fr;transition:grid-template-rows .3s;display:grid}.day-accordion-body.is-open{grid-template-rows:1fr}.day-accordion-body>.day-hourly-scroll{min-height:0;overflow-y:hidden}.aqi-card{background:var(--color-surface);border-radius:var(--radius);padding:var(--space-md);margin-bottom:var(--space-md)}.aqi-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.aqi-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem}.aqi-score{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius);font-size:1rem;font-weight:600}.aqi-good{color:#bbf7d0;background:#166534}.aqi-fair{color:#d9f99d;background:#365314}.aqi-moderate{color:#fef08a;background:#713f12}.aqi-poor{color:#fed7aa;background:#7c2d12}.aqi-very-poor{color:#fecaca;background:#7f1d1d}.aqi-hazardous{color:#e9d5ff;background:#581c87}.aqi-pollutants{gap:var(--space-sm);grid-template-columns:repeat(4,1fr);display:grid}.pollutant-card{background:var(--color-surface-2);border-radius:var(--radius);padding:var(--space-sm);text-align:center}.pollutant-name{color:var(--color-text-muted);margin-bottom:var(--space-xs);font-size:.75rem}.pollutant-value{font-size:1.1rem;font-weight:600}.pollutant-unit{color:var(--color-text-muted);margin-top:2px;font-size:.65rem}.aqi-unavailable{color:var(--color-text-muted);text-align:center;padding:var(--space-md);font-size:.875rem}.toast{bottom:var(--space-lg);transform:translateX(-50%) translateY(calc(100% + var(--space-lg)));background:var(--color-accent-orange);color:#0f172a;padding:var(--space-sm) var(--space-md);border-radius:var(--radius);white-space:nowrap;opacity:0;z-index:100;font-size:.875rem;transition:transform .3s,opacity .3s;position:fixed;left:50%}.toast.toast-visible{opacity:1;transform:translate(-50%)translateY(0)}@media (width<=600px){.current-card{text-align:center;flex-direction:column}.current-icon svg{width:56px;height:56px}.current-temp{font-size:3rem}#city-search{width:150px}.aqi-pollutants{grid-template-columns:repeat(2,1fr)}}