:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 1rem; }
.site-header { margin-bottom: 1rem; }
.site-header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
.status-line { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; margin: 0; }
.fallback-label { color: #b45309; font-weight: 600; }
.location-coords { color: #555; }
.last-updated { color: #555; }
.widget-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.widget { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; min-width: 200px; }
.widget-title { margin: 0 0 0.5rem; font-size: 1rem; }
.widget-error { color: #b91c1c; }
[hidden] { display: none !important; }
.uv-current { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; margin-bottom: 0.5rem; }
.uv-reading { display: flex; flex-direction: column; }
.uv-reading-label { font-size: 0.75rem; color: #555; }
.uv-reading-value { font-size: 1.25rem; font-weight: 600; }
.uv-source { width: 100%; font-size: 0.75rem; color: #555; }
.uv-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.uv-hour { display: flex; flex-direction: column; align-items: center; min-width: 3.5rem; padding: 0.25rem; border-radius: 6px; font-size: 0.75rem; }
.uv-hour-time { color: #555; }
.uv-hour-value { font-weight: 600; }
.uv-hour-mark { font-size: 0.65rem; }
.uv-hour-safe { background: #dcfce7; }
.uv-hour-safe .uv-hour-mark { color: #166534; }
.uv-hour-unsafe { background: #fee2e2; }
.uv-hour-unsafe .uv-hour-mark { color: #991b1b; }
.uv-hour-none { background: #f1f5f9; color: #94a3b8; }
.weather-current { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; margin-bottom: 0.5rem; }
.weather-current-temp { font-size: 1.5rem; font-weight: 600; }
.weather-current-condition { color: #555; }
.weather-section-title { margin: 0.5rem 0 0.25rem; font-size: 0.8rem; color: #555; font-weight: 600; }
.weather-hourly, .weather-daily { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.weather-hour, .weather-day { display: flex; flex-direction: column; align-items: center; min-width: 4rem; padding: 0.25rem; border-radius: 6px; background: #f1f5f9; font-size: 0.75rem; }
.weather-hour-time, .weather-day-label { color: #555; }
.weather-hour-temp, .weather-day-high { font-weight: 600; }
.weather-day-low { color: #555; }
.weather-hour-condition, .weather-day-condition { font-size: 0.7rem; text-align: center; }
.weather-hour-precip, .weather-day-precip { font-size: 0.7rem; color: #2563eb; }