:root{--bg:#0f0f14;--card:#1a1a22;--text:#e8e8ec;--muted:#8a8a96;--accent:#ffb347;--uv-low:#6dd66d;--uv-moderate:#f5d547;--uv-high:#f59b47;--uv-veryhigh:#f55b55;--uv-extreme:#c47af5;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{max-width:480px;padding:16px 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:14px;margin:0 auto;display:flex}.app-header{padding-top:env(safe-area-inset-top);justify-content:space-between;align-items:baseline;display:flex}.app-header h1{color:var(--accent);margin:0;font-size:1.4rem}.location-badge{color:var(--muted);font-size:.75rem}.card{background:var(--card);border-radius:16px;padding:16px}.card.error{color:var(--uv-high);font-size:.9rem}.compass-card{flex-direction:column;align-items:center;gap:8px;display:flex}.compass-svg{width:min(260px,70vw);height:auto}.compass-ring{fill:none;stroke:#33333f;stroke-width:2px}.compass-label{fill:var(--muted);text-anchor:middle;dominant-baseline:middle;font-size:14px}.device-pointer{fill:var(--accent)}.sun-marker{fill:var(--accent);filter:drop-shadow(0 0 8px #ffb347b3)}.sun-marker.below{fill:#55555f;filter:none}.compass-elevation{fill:var(--text);text-anchor:middle;font-size:26px;font-weight:600}.compass-elevation-label{fill:var(--muted);text-anchor:middle;font-size:11px}.compass-caption{text-align:center;margin:0;font-size:.9rem}.muted{color:var(--muted)}.primary-btn{background:var(--accent);color:#1a1206;cursor:pointer;border:none;border-radius:10px;padding:10px 18px;font-size:.95rem;font-weight:600}.uv-now{align-items:center;gap:16px;display:flex}.uv-value{text-align:center;min-width:72px;font-size:2.8rem;font-weight:700}.uv-category{margin-bottom:4px;font-weight:600}.uv-advice{color:var(--muted);margin:0;font-size:.85rem}.uv-hourly{justify-content:space-between;align-items:flex-end;gap:4px;margin-top:14px;display:flex}.uv-hour{flex-direction:column;flex:1;align-items:center;gap:3px;display:flex}.uv-hour-value{font-size:.75rem;font-weight:600}.uv-hour-bar{border-radius:3px 3px 0 0;width:100%;max-width:28px;min-height:2px}.uv-hour-time{color:var(--muted);font-size:.65rem}.times-card{justify-content:space-between;gap:8px;display:flex}.time-item{text-align:center;flex:1}.time-label{color:var(--muted);margin-bottom:4px;font-size:.65rem}.time-value{font-size:.85rem;font-weight:600}