/* =========================================================================
* RainOrRinse — styles.css
* =========================================================================
* Design system, layout, components, themes (light/dark), splash, mobile.
*
* Section index:
* - Design tokens : :root vars
* - Mobile tightening : @media (max-width: 380px)
* - Touch tap targets : @media (hover: none) and (pointer: coarse)
* - Splash loader : .splash + @keyframes
* - Subtle radial background : body::before
* - Topbar : .topbar, .brand, .loc, .iconbtn
* - Screens : .screen + animations
* - Hero card : .hero
* - Chips : .chip
* - Score ring : .ring + svg
* - Impact window card : .impact
* - Section titles + cards : .section-title, .card, .kv
* - Buttons : .btn (primary, ghost, danger)
* - Forecast timeline : .timeline, .day, .hours, .forecast-legend
* - Wash log entries : .log-entry
* - Forms : .field, .opts, .opt, .tiles, .tile, .swatches, .swatch
* - Bottom nav : .nav
* - Onboarding : .onboard
* - Modals : .modal
* - Banners : .banner, .alert, .update-banner, .consent
* - Sponsored mentions : .sponsored, .sponsored-tag, .ad
* - Version tag : .version-tag
* ========================================================================= */
/* ===== Defensive fallbacks — guarantee something renders even if vars fail ===== */
html,body{background:#FBF7F2;color:#1A2638}
html[data-theme="dark"],html[data-theme="dark"] body{background:#0B1220;color:#F5F7FA}
.app{background:transparent;min-height:100vh}
.hero{background:#FFFFFF;color:#1A2638}
.card{background:#FFFFFF;color:#1A2638}
html[data-theme="dark"] .hero{background:#1B243C;color:#F5F7FA}
html[data-theme="dark"] .card{background:#141C2F;color:#F5F7FA}
.hero-status, .hero-reason, .hero-label, .impact-title, .impact-sub, .kv .k, .kv .v{color:inherit}
/* ============================================================================== */
/* ========== Design tokens ========== */
:root{
/* === Dark theme (premium but readable — cards now visibly stand off the bg) === */
--bg:#0B1220;
--bg-2:#121A2E;
--surface:rgba(255,255,255,0.07);
--surface-2:rgba(255,255,255,0.11);
--surface-strong:#1B243C;
--line:rgba(255,255,255,0.10);
--line-2:rgba(255,255,255,0.18);
--text:#F5F7FA;
--text-2:#9BA4B8;
--text-3:#5F687E;
--rain:#5AA9FF;
--rain-2:#1F6CD2;
--rain-soft:rgba(90,169,255,0.14);
--good:#3DDC97;
--good-2:#1FA876;
--warn:#F4B740;
--bad:#FF6E6E;
--accent:#9FD0FF;
--radius:16px;
--radius-lg:22px;
--radius-xl:28px;
--shadow-sm:0 1px 2px rgba(0,0,0,0.30);
--shadow:0 18px 40px -16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.30);
--shadow-lg:0 30px 60px -20px rgba(0,0,0,0.70);
--glow:0 0 0 1px rgba(255,255,255,0.04) inset;
--font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
--safe-top:env(safe-area-inset-top,0px);
--safe-bot:env(safe-area-inset-bottom,0px);
}
/* === Light theme (soft, sleek — inspired by the reference mockup) === */
html[data-theme="light"]{
--bg:#FBF7F2; /* warm cream */
--bg-2:#FFFFFF;
--surface:#FFFFFF;
--surface-2:#F4EFE7; /* peach-cream card hover */
--surface-strong:#FFFFFF;
--line:rgba(15,30,60,0.06);
--line-2:rgba(15,30,60,0.12);
--text:#1A2638;
--text-2:#5B6678;
--text-3:#8B95A8;
--rain:#2BAFAF; /* soft teal — primary accent */
--rain-2:#1E8E8E;
--rain-soft:rgba(43,175,175,0.10);
--good:#5BC9A7;
--good-2:#3FAA89;
--warn:#E8A340;
--bad:#E26B6B;
--accent:#2BAFAF;
--shadow-sm:0 1px 2px rgba(20,40,80,0.04);
--shadow:0 12px 32px -14px rgba(40,80,120,0.16), 0 2px 6px rgba(40,80,120,0.04);
--shadow-lg:0 26px 56px -20px rgba(40,80,120,0.22);
--glow:0 0 0 1px rgba(0,0,0,0.02) inset;
}
html[data-theme="auto"]{--bg:#F4F6FB; --bg-2:#FFFFFF;
--surface:rgba(255,255,255,0.85); --surface-2:rgba(255,255,255,0.95); --surface-strong:#FFFFFF;
--line:rgba(15,30,60,0.07); --line-2:rgba(15,30,60,0.14);
--text:#0B1220; --text-2:#4B5566; --text-3:#8089A0;
--shadow-sm:0 1px 2px rgba(15,30,60,0.05);
--shadow:0 16px 40px -16px rgba(15,30,60,0.18), 0 2px 6px rgba(15,30,60,0.04);
--shadow-lg:0 30px 60px -20px rgba(15,30,60,0.28);
--glow:0 0 0 1px rgba(0,0,0,0.02) inset;
--rain-soft:rgba(90,169,255,0.10);}
/* ===== Mobile-specific tightening (small phones, narrow widths) ===== */
@media (max-width: 380px){
.topbar{padding:14px 16px 8px}
.brand{font-size:14px}
.loc{max-width:160px;font-size:11px}
.iconbtn{width:30px;height:30px}
.screen{padding:8px 14px 20px}
.hero{padding:20px 18px 18px;border-radius:18px}
.hero-status{font-size:30px}
.impact-title{font-size:20px}
.opts{gap:6px}
.opt{padding:10px 12px}
.tiles{grid-template-columns:repeat(3,1fr);gap:6px}
.swatches{grid-template-columns:repeat(4,1fr);gap:6px}
.swatch .dot{width:24px;height:24px}
.btn{padding:12px 14px;font-size:14.5px}
}
/* Touch-friendly tap targets (iOS minimum 44pt) */
@media (hover: none) and (pointer: coarse){
.btn{min-height:44px}
.iconbtn{min-width:36px;min-height:36px}
.opt,.tile,.swatch{min-height:44px}
.nav button{min-height:54px}
}
/* ===== Seasonal / monsoon notice ===== */
.seasonal-card{margin:14px 0 0;background:linear-gradient(180deg,rgba(90,169,255,0.10),rgba(90,169,255,0.02));
border:1px solid rgba(90,169,255,0.30);border-radius:14px;padding:12px 14px;
display:flex;gap:12px;align-items:flex-start}
html[data-theme="light"] .seasonal-card{background:linear-gradient(180deg,rgba(43,175,175,0.10),rgba(43,175,175,0.02));border-color:rgba(43,175,175,0.30)}
.seasonal-icon{font-size:24px;line-height:1;flex-shrink:0}
.seasonal-body{flex:1}
.seasonal-title{font-weight:600;font-size:14px;color:var(--text);margin-bottom:4px;letter-spacing:-0.005em}
.seasonal-desc{font-size:12.5px;color:var(--text-2);line-height:1.5}
.seasonal-desc strong{color:var(--text)}
/* ===== Splash loader (shown until App boots) ===== */
/* Splash loader — two-stage fade.
* Stage 1: full splash with brand mark over a solid bg + falling rain
* Stage 2 (".ready"): bg fades to transparent, brand fades out, rain keeps
* falling at lower opacity over the now-visible app. The whole
* splash is click-through, so users can already tap buttons.
* Stage 3 (".gone"): everything fades out completely.
* pointer-events:none on the splash itself means the UI is interactive at
* every stage — the rain is purely decorative. */
.splash{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:24px;pointer-events:none;
transition:background-color .7s ease,opacity .7s ease,visibility .7s}
/* Bare splash mode — atmospheric weather animation only, no brand block.
* Transparent background so the actual app is visible behind the rain/sun
* from the moment of paint. The animation just fades out gracefully at .gone. */
.splash.splash-bare{background:transparent}
/* Install bottom sheet — appears on 2nd visit to nudge add-to-home-screen.
* Backdrop dims the page; card slides up from the bottom on mobile. */
.install-sheet{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:center}
.install-sheet.show{display:flex}
.install-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px)}
.install-card{position:relative;background:var(--surface);color:var(--text);
border-radius:18px 18px 0 0;padding:22px 22px 28px;width:100%;max-width:520px;
border-top:1px solid var(--line);box-shadow:0 -10px 40px -10px rgba(0,0,0,0.45);
animation:slideUpIn .35s ease}
@media (min-width: 600px){
.install-sheet{align-items:center}
.install-card{border-radius:18px;max-width:440px;padding:24px}
}
@keyframes slideUpIn{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.splash.ready{background:transparent}
.splash.ready .mark,
.splash.ready .wordmark,
.splash.ready .tagline,
.splash.ready .pulse{opacity:0;transition:opacity .55s ease}
.splash.ready .drop{opacity:0.32} /* dim rain so it never obstructs */
.splash.gone{opacity:0;visibility:hidden}
.splash .mark{width:96px;height:96px;border-radius:24px;
background:linear-gradient(135deg,var(--rain),var(--rain-2));
display:flex;align-items:center;justify-content:center;color:#fff;
box-shadow:0 16px 40px -10px rgba(43,123,216,0.45);
transition:opacity .55s ease}
.splash .mark svg{width:48px;height:48px}
.splash .wordmark{font-size:18px;font-weight:600;letter-spacing:-0.01em;color:var(--text);transition:opacity .55s ease}
.splash .tagline{font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.18em;margin-top:-14px;transition:opacity .55s ease}
.splash .rain-svg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.splash .drop{position:absolute;width:3px;border-radius:999px;
background:linear-gradient(180deg,transparent,var(--rain) 40%,var(--rain-2));
animation:dropFall 1.6s linear infinite;opacity:0.7;
transition:opacity .55s ease}
@keyframes dropFall{
0% {transform:translateY(-40px) scaleY(0.6);opacity:0}
10% {opacity:0.8}
100% {transform:translateY(105vh) scaleY(1);opacity:0}
}
.splash .pulse{position:absolute;width:140px;height:140px;border-radius:50%;
border:2px solid var(--rain);opacity:0;animation:pulseRing 1.8s ease-out infinite;
transition:opacity .55s ease}
@keyframes pulseRing{
0% {transform:scale(0.6);opacity:0.6}
100% {transform:scale(1.4);opacity:0}
}
/* Sun-glare backdrop — shown when next-24h forecast is dry. The sun sits above
* the brand mark, with 12 rays radiating outward and a slow rotation. A soft
* flare in the centre adds warmth. Hidden by default; shown only on
* .splash.mood-sun. Rain is hidden in sun mode and vice-versa. */
.splash .sun-svg{position:absolute;inset:0;pointer-events:none;overflow:hidden;
display:none;align-items:center;justify-content:center}
.splash.mood-sun .sun-svg{display:flex}
.splash.mood-sun .rain-svg{display:none}
.splash.mood-rain .sun-svg{display:none}
.sun-core{position:absolute;width:90px;height:90px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#FFE89A 0%,#FFC857 45%,#FFA438 80%);
box-shadow:0 0 60px rgba(255,200,87,0.55),0 0 120px rgba(255,164,56,0.35);
animation:sunPulse 2.4s ease-in-out infinite}
@keyframes sunPulse{
0%,100%{transform:scale(1);box-shadow:0 0 60px rgba(255,200,87,0.55),0 0 120px rgba(255,164,56,0.35)}
50% {transform:scale(1.08);box-shadow:0 0 90px rgba(255,200,87,0.7),0 0 160px rgba(255,164,56,0.45)}
}
.sun-rays{position:absolute;width:260px;height:260px;animation:sunRot 14s linear infinite}
.sun-rays span{position:absolute;top:50%;left:50%;width:4px;height:60px;
background:linear-gradient(180deg,rgba(255,200,87,0.85),rgba(255,200,87,0));
border-radius:999px;transform-origin:50% 0%}
.sun-rays span:nth-child(1) {transform:translate(-50%,0) rotate(0deg) translateY(55px)}
.sun-rays span:nth-child(2) {transform:translate(-50%,0) rotate(30deg) translateY(55px)}
.sun-rays span:nth-child(3) {transform:translate(-50%,0) rotate(60deg) translateY(55px)}
.sun-rays span:nth-child(4) {transform:translate(-50%,0) rotate(90deg) translateY(55px)}
.sun-rays span:nth-child(5) {transform:translate(-50%,0) rotate(120deg) translateY(55px)}
.sun-rays span:nth-child(6) {transform:translate(-50%,0) rotate(150deg) translateY(55px)}
.sun-rays span:nth-child(7) {transform:translate(-50%,0) rotate(180deg) translateY(55px)}
.sun-rays span:nth-child(8) {transform:translate(-50%,0) rotate(210deg) translateY(55px)}
.sun-rays span:nth-child(9) {transform:translate(-50%,0) rotate(240deg) translateY(55px)}
.sun-rays span:nth-child(10) {transform:translate(-50%,0) rotate(270deg) translateY(55px)}
.sun-rays span:nth-child(11) {transform:translate(-50%,0) rotate(300deg) translateY(55px)}
.sun-rays span:nth-child(12) {transform:translate(-50%,0) rotate(330deg) translateY(55px)}
@keyframes sunRot{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.sun-flare{position:absolute;width:600px;height:600px;border-radius:50%;
background:radial-gradient(circle,rgba(255,228,160,0.18) 0%,rgba(255,228,160,0) 70%);
animation:sunFlare 4s ease-in-out infinite;pointer-events:none}
@keyframes sunFlare{
0%,100% {opacity:0.5;transform:scale(1)}
50% {opacity:0.85;transform:scale(1.12)}
}
/* When sun mood is active, brand mark uses warm tone */
.splash.mood-sun .mark{background:linear-gradient(135deg,#FFC857,#FFA438);
box-shadow:0 16px 40px -10px rgba(255,164,56,0.55)}
/* Fade-out: sun fades like rain does, gracefully */
.splash.ready .sun-core,
.splash.ready .sun-rays,
.splash.ready .sun-flare{opacity:0.4;transition:opacity .55s ease}
.splash.gone .sun-svg{opacity:0;transition:opacity .7s ease}
/* ---------- MOON mood — shown when next-24h is dry AND it's nighttime ---------- */
/* Cool silvery palette, 8 soft beams, twinkling stars scattered around. */
.splash .moon-svg{position:absolute;inset:0;pointer-events:none;overflow:hidden;
display:none;align-items:center;justify-content:center}
.splash.mood-moon .moon-svg{display:flex}
.splash.mood-moon .rain-svg,
.splash.mood-moon .sun-svg{display:none}
.splash.mood-rain .moon-svg,
.splash.mood-sun .moon-svg{display:none}
.moon-core{position:absolute;width:84px;height:84px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#FCFCEB 0%,#E5E7F0 55%,#B6BCD0 100%);
box-shadow:0 0 50px rgba(220,225,245,0.45),0 0 100px rgba(170,180,210,0.30),
inset -10px -8px 18px rgba(120,130,160,0.30);
animation:moonPulse 3s ease-in-out infinite}
@keyframes moonPulse{
0%,100% {transform:scale(1);box-shadow:0 0 50px rgba(220,225,245,0.45),0 0 100px rgba(170,180,210,0.30),inset -10px -8px 18px rgba(120,130,160,0.30)}
50% {transform:scale(1.04);box-shadow:0 0 75px rgba(220,225,245,0.6), 0 0 130px rgba(170,180,210,0.4), inset -10px -8px 18px rgba(120,130,160,0.30)}
}
.moon-rays{position:absolute;width:240px;height:240px;animation:moonRot 22s linear infinite}
.moon-rays span{position:absolute;top:50%;left:50%;width:3px;height:48px;
background:linear-gradient(180deg,rgba(220,225,245,0.55),rgba(220,225,245,0));
border-radius:999px;transform-origin:50% 0%}
.moon-rays span:nth-child(1) {transform:translate(-50%,0) rotate(0deg) translateY(50px)}
.moon-rays span:nth-child(2) {transform:translate(-50%,0) rotate(45deg) translateY(50px)}
.moon-rays span:nth-child(3) {transform:translate(-50%,0) rotate(90deg) translateY(50px)}
.moon-rays span:nth-child(4) {transform:translate(-50%,0) rotate(135deg) translateY(50px)}
.moon-rays span:nth-child(5) {transform:translate(-50%,0) rotate(180deg) translateY(50px)}
.moon-rays span:nth-child(6) {transform:translate(-50%,0) rotate(225deg) translateY(50px)}
.moon-rays span:nth-child(7) {transform:translate(-50%,0) rotate(270deg) translateY(50px)}
.moon-rays span:nth-child(8) {transform:translate(-50%,0) rotate(315deg) translateY(50px)}
@keyframes moonRot{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.moon-glow{position:absolute;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(200,210,240,0.14) 0%,rgba(200,210,240,0) 70%);
animation:moonFlare 5s ease-in-out infinite;pointer-events:none}
@keyframes moonFlare{
0%,100% {opacity:0.5;transform:scale(1)}
50% {opacity:0.8; transform:scale(1.08)}
}
/* Twinkling stars scattered around the moon */
.stars{position:absolute;inset:0;width:100%;height:100%}
.star{position:absolute;width:3px;height:3px;border-radius:50%;
background:#FFFFFF;
box-shadow:0 0 6px rgba(255,255,255,0.9),0 0 12px rgba(220,225,245,0.6);
opacity:0;animation:starTwinkle 2.6s ease-in-out infinite}
@keyframes starTwinkle{
0%,100% {opacity:0;transform:scale(0.8)}
50% {opacity:1;transform:scale(1.2)}
}
/* Slight cool tint over the whole page when moon mood is active.
* Keeps the bare/transparent feel but adds a hint of nighttime. */
.splash.mood-moon{background:rgba(10,15,35,0.10)}
.splash.mood-moon.splash-bare{background:rgba(10,15,35,0.06)}
/* Fade behaviour parallels sun */
.splash.ready .moon-core,
.splash.ready .moon-rays,
.splash.ready .moon-glow,
.splash.ready .stars{opacity:0.4;transition:opacity .55s ease}
.splash.gone .moon-svg{opacity:0;transition:opacity .7s ease}
/* Subtle radial background */
body::before{
content:"";position:fixed;inset:-20%;pointer-events:none;z-index:-1;
background:
radial-gradient(40% 30% at 20% 0%,rgba(90,169,255,0.10),transparent 70%),
radial-gradient(40% 30% at 85% 10%,rgba(124,196,255,0.06),transparent 70%);
}
html[data-theme="light"] body::before {
background:
radial-gradient(50% 40% at 15% 0%,rgba(43,175,175,0.14),transparent 70%),
radial-gradient(50% 40% at 85% 10%,rgba(232,163,64,0.10),transparent 70%);
}
html[data-theme="auto"] body::before{background:
radial-gradient(40% 30% at 20% 0%,rgba(90,169,255,0.18),transparent 70%),
radial-gradient(40% 30% at 85% 10%,rgba(244,183,64,0.07),transparent 70%);}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);
font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{min-height:100vh;min-height:100dvh}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;font-size:inherit}
input,select,textarea{font-family:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
.app{min-height:100dvh;display:flex;flex-direction:column;padding-top:var(--safe-top);
padding-bottom:calc(76px + var(--safe-bot));max-width:540px;margin:0 auto;position:relative}
/* ========== Top bar ========== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-0.005em;font-size:15px}
.brand svg{width:26px;height:26px}
.topbar-right{display:flex;align-items:center;gap:8px}
.loc{font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:6px;background:var(--surface);
border:1px solid var(--line);border-radius:999px;padding:5px 10px;max-width:240px;font-variant-numeric:tabular-nums;font-weight:500}
.loc-dot{width:5px;height:5px;border-radius:50%;background:var(--good);flex-shrink:0}
.loc.stale .loc-dot{background:var(--warn)}
.loc.off .loc-dot{background:var(--bad)}
.loc-name{font-weight:600;color:var(--text)}
.loc-coords{color:var(--text-3);font-size:11px;margin-left:4px}
.iconbtn{background:var(--surface);border:1px solid var(--line);width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-2);transition:all .15s}
.iconbtn:hover{color:var(--text);border-color:var(--line-2)}
.iconbtn:active{transform:scale(0.94)}
.iconbtn svg{width:16px;height:16px}
.iconbtn .ic-sun{display:none}
.iconbtn .ic-moon{display:block}
html[data-theme="light"] .iconbtn .ic-sun{display:block}
html[data-theme="light"] .iconbtn .ic-moon{display:none}
/* ========== Screens ========== */
.screen{padding:10px 20px 24px;display:none;animation:fade .3s cubic-bezier(.2,.7,.2,1)}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ========== Hero card (Wash now?) ========== */
.hero{background:linear-gradient(165deg,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.04) 100%);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--line-2);border-radius:var(--radius-xl);padding:26px 24px 22px;
box-shadow:var(--shadow),var(--glow);position:relative;overflow:hidden}
html[data-theme="light"] .hero{background:linear-gradient(165deg,#FFFFFF 0%,#F5F8FE 100%);border-color:rgba(15,30,60,0.06)}
.hero::before{content:"";position:absolute;inset:-50% -30% auto auto;width:80%;height:80%;
background:radial-gradient(closest-side,rgba(90,169,255,0.18),transparent 70%);pointer-events:none;
filter:blur(20px)}
.hero::after{content:"";position:absolute;left:-30%;top:60%;width:60%;height:60%;
background:radial-gradient(closest-side,rgba(124,196,255,0.10),transparent 70%);pointer-events:none;filter:blur(28px)}
.hero-label{font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:0.14em;font-weight:700}
.hero-status{font-size:38px;line-height:1.05;font-weight:700;letter-spacing:-0.025em;margin:10px 0 6px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-status .emoji{font-size:36px}
.hero-reason{color:var(--text-2);font-size:15.5px;line-height:1.55;margin-top:8px}
.hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
background:rgba(255,255,255,0.06);border:1px solid var(--line);font-size:12.5px;color:var(--text-2);font-weight:600;
transition:background .15s,border-color .15s}
html[data-theme="light"] .chip{background:rgba(0,0,0,0.04)}
.chip.good{color:var(--good);border-color:rgba(61,220,151,0.30);background:rgba(61,220,151,0.10)}
.chip.warn{color:var(--warn);border-color:rgba(244,183,64,0.30);background:rgba(244,183,64,0.10)}
.chip.bad{color:var(--bad);border-color:rgba(255,110,110,0.30);background:rgba(255,110,110,0.10)}
.chip.rain{color:var(--rain);border-color:rgba(90,169,255,0.30);background:rgba(90,169,255,0.10)}
/* Wash score ring */
.score-row{display:flex;align-items:center;gap:18px;margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}
.ring{position:relative;width:84px;height:84px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,0.08)}
html[data-theme="light"] .ring .bg{stroke:rgba(0,0,0,0.07)}
.ring .fg{stroke:var(--good);transition:stroke-dasharray .8s cubic-bezier(.2,.7,.2,1),stroke .3s}
.ring-num{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:22px;letter-spacing:-0.02em}
.score-text .t1{font-size:14px;color:var(--text-2)}
.score-text .t2{font-weight:600;font-size:16px;margin-top:2px}
/* ========== Impact window card (the hero of the app) ========== */
.impact{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:18px 18px 16px;position:relative;overflow:hidden}
.impact::before{content:"";position:absolute;inset:auto -10% -50% auto;width:55%;height:80%;
background:radial-gradient(closest-side,rgba(124,196,255,0.16),transparent 70%);pointer-events:none}
.impact-label{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:0.10em;text-transform:uppercase}
.impact-title{font-size:24px;font-weight:700;letter-spacing:-0.018em;line-height:1.22;margin-top:6px}
.impact-sub{color:var(--text-2);font-size:14px;margin-top:6px;line-height:1.5}
.impact-bar{margin-top:14px;height:8px;background:rgba(255,255,255,0.06);border-radius:999px;overflow:hidden;position:relative}
html[data-theme="light"] .impact-bar{background:rgba(0,0,0,0.05)}
.impact-fill{height:100%;background:linear-gradient(90deg,var(--good),var(--rain));border-radius:999px;
transition:width .8s cubic-bezier(.2,.7,.2,1)}
.impact-legend{display:flex;justify-content:space-between;color:var(--text-3);font-size:12px;margin-top:6px}
/* Grime score meter — fills as dirt + acid accumulates. Green → amber → red.
* Shown in the "Your car" card. Tap the i for the breakdown. */
.grime-bar{height:8px;background:rgba(255,255,255,0.06);border-radius:999px;overflow:hidden;position:relative}
html[data-theme="light"] .grime-bar{background:rgba(0,0,0,0.05)}
.grime-fill{height:100%;border-radius:999px;width:0%;
transition:width 1s cubic-bezier(.2,.7,.2,1), background .5s}
.grime-fill.lvl-clean { background:linear-gradient(90deg,#3DDC97,#5AA9FF) }
.grime-fill.lvl-building { background:linear-gradient(90deg,#5AA9FF,#FFC857) }
.grime-fill.lvl-pressure { background:linear-gradient(90deg,#FFC857,#FF8845) }
.grime-fill.lvl-urgent { background:linear-gradient(90deg,#FF8845,#FF5252) }
/* ========== Sections ========== */
.section-title{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);
font-weight:700;margin:24px 6px 10px;display:flex;align-items:center;gap:8px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}
.card{background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid var(--line);border-radius:var(--radius);padding:8px 18px;box-shadow:var(--shadow-sm),var(--glow)}
html[data-theme="light"] .card{background:var(--surface-strong)}
.kv{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.kv:first-child{border-top:0}
.kv .k{color:var(--text-2);font-size:14px}
.kv .v{font-weight:600;font-size:14.5px}
/* Primary CTA */
.cta{display:flex;gap:10px;margin-top:14px}
.btn{flex:1;padding:14px 16px;border-radius:14px;font-weight:600;font-size:15px;letter-spacing:-0.005em;
background:var(--surface-2);color:var(--text);border:1px solid var(--line);
transition:transform .12s cubic-bezier(.2,.7,.2,1),box-shadow .15s,background .15s;
display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:var(--surface-strong)}
.btn:active{transform:scale(0.97)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb, var(--rain) 90%, white 10%) 0%,var(--rain) 40%,var(--rain-2) 100%);
color:#fff;border-color:transparent;
box-shadow:0 10px 24px -8px color-mix(in srgb, var(--rain) 60%, transparent), 0 1px 0 rgba(255,255,255,0.20) inset;
text-shadow:0 1px 1px rgba(0,0,0,0.10)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(43,123,216,0.62), 0 1px 0 rgba(255,255,255,0.22) inset}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--bad);border-color:rgba(255,110,110,0.30);background:rgba(255,110,110,0.05)}
.btn .ico{margin-right:2px}
/* ========== Forecast timeline ========== */
.forecast-legend{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 4px 14px;padding:10px 12px;
background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:11.5px;color:var(--text-2)}
.lg-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lg-sw{width:14px;height:10px;border-radius:3px;display:inline-block}
.lg-dry{background:rgba(255,255,255,0.06);border:1px solid var(--line)}
html[data-theme="light"] .lg-dry{background:rgba(0,0,0,0.05)}
.lg-r{background:linear-gradient(180deg,rgba(90,169,255,0.25),rgba(90,169,255,0.7))}
.lg-r2{background:linear-gradient(180deg,rgba(90,169,255,0.45),rgba(43,123,216,0.85))}
.lg-r3{background:linear-gradient(180deg,rgba(43,123,216,0.7),rgba(43,123,216,1))}
.lg-win{background:rgba(255,255,255,0.06);outline:1.5px solid var(--good);outline-offset:-1px}
html[data-theme="light"] .lg-win{background:rgba(0,0,0,0.05)}
.timeline{display:flex;flex-direction:column;gap:10px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.day-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.day-name{font-weight:700}
.day-sub{color:var(--text-2);font-size:13px;margin-top:2px}
.day-tag{font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px}
.day-tag.good{background:rgba(61,220,151,0.12);color:var(--good)}
.day-tag.warn{background:rgba(244,183,64,0.14);color:var(--warn)}
.day-tag.bad{background:rgba(255,110,110,0.12);color:var(--bad)}
.day-tag.ok{background:rgba(124,196,255,0.14);color:var(--accent)}
.hours{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-top:12px;height:30px}
.hr{background:rgba(255,255,255,0.06);border-radius:3px;position:relative}
html[data-theme="light"] .hr{background:rgba(0,0,0,0.05)}
.hr.r{background:linear-gradient(180deg,rgba(90,169,255,0.25),rgba(90,169,255,0.7))}
.hr.r2{background:linear-gradient(180deg,rgba(90,169,255,0.45),rgba(43,123,216,0.85))}
.hr.r3{background:linear-gradient(180deg,rgba(43,123,216,0.7),rgba(43,123,216,1))}
.hr.win{outline:1.5px solid var(--good);outline-offset:-1px}
.hours-legend{display:flex;justify-content:space-between;color:var(--text-3);font-size:11px;margin-top:4px}
/* ========== Wash log ========== */
.log-entry{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.log-entry .t1{font-weight:600}
.log-entry .t2{color:var(--text-2);font-size:13px;margin-top:2px}
.empty{color:var(--text-3);text-align:center;padding:30px 10px}
/* ========== Forms ========== */
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:13px;color:var(--text-2);font-weight:600}
.field input,.field select{background:var(--surface);border:1px solid var(--line);color:var(--text);
padding:12px 14px;border-radius:12px;font-size:15px;outline:none}
.field input:focus,.field select:focus{border-color:var(--rain)}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.opt{padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
text-align:left;font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:2px;
transition:transform .12s,border-color .15s,background .15s;color:var(--text);
position:relative;overflow:hidden}
.opt:hover{border-color:var(--line-2);background:var(--surface-2)}
.opt:active{transform:scale(0.98)}
.opt .sub{font-weight:500;color:var(--text-2);font-size:12px;line-height:1.4}
.opt.sel{border-color:var(--rain);background:linear-gradient(180deg,rgba(90,169,255,0.10),rgba(90,169,255,0.04));
box-shadow:0 0 0 3px rgba(90,169,255,0.10), 0 4px 14px -6px rgba(90,169,255,0.30)}
.opt.sel::before{content:"";position:absolute;top:8px;right:10px;width:14px;height:14px;border-radius:50%;
background:var(--rain);background-image:url("data:image/svg+xml;utf8,");
background-size:14px;background-position:center}
/* Care-level scale — emoji on the left, label + sub stacked on the right.
* Used in onboarding (#obCareLevel) and Car screen Quick Set (#pfCareLevel). */
.care-scale .opt{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
.care-scale .opt .emoji{font-size:28px;line-height:1;flex-shrink:0;width:36px;text-align:center}
.care-scale .opt .label{display:block;font-weight:600;font-size:14.5px;color:var(--text);margin-bottom:2px}
.care-scale .opt .sub{display:block;font-weight:500;color:var(--text-2);font-size:12.5px;line-height:1.4}
.care-scale .opt > span:nth-child(2),
.care-scale .opt > span:nth-child(3){flex:1;min-width:0}
/* Make label + sub flow as a single stacked column to the right of the emoji */
.care-scale .opt{display:grid;grid-template-columns:36px 1fr;grid-template-areas:"emoji text" "emoji sub";align-items:center}
.care-scale .opt .emoji{grid-area:emoji}
.care-scale .opt .label{grid-area:text}
.care-scale .opt .sub{grid-area:sub}
/* Color swatch picker — replaces colour emojis */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.swatch{aspect-ratio:1/1;border-radius:14px;background:var(--surface);border:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;
transition:transform .12s,border-color .15s,background .15s;position:relative;color:var(--text);font-size:11.5px;font-weight:600}
.swatch:hover{border-color:var(--line-2)}
.swatch:active{transform:scale(0.95)}
.swatch .dot{width:28px;height:28px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.10) inset}
.swatch.sel{border-color:var(--rain);background:linear-gradient(180deg,rgba(90,169,255,0.10),rgba(90,169,255,0.04));
box-shadow:0 0 0 3px rgba(90,169,255,0.10)}
.swatch.sel::after{content:"";position:absolute;top:6px;right:6px;width:14px;height:14px;border-radius:50%;
background:var(--rain);background-image:url("data:image/svg+xml;utf8,");
background-size:14px;background-position:center}
/* Car type tiles with SVG icons */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.tile{aspect-ratio:1.5/1;border-radius:14px;background:var(--surface);border:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
transition:transform .12s,border-color .15s,background .15s;position:relative;color:var(--text);font-size:12.5px;font-weight:600;padding:4px}
.tile:hover{border-color:var(--line-2)}
.tile:active{transform:scale(0.97)}
.tile svg{width:36px;height:24px;color:var(--text-2);transition:color .15s}
.tile.sel{border-color:var(--rain);background:linear-gradient(180deg,rgba(90,169,255,0.10),rgba(90,169,255,0.04));
box-shadow:0 0 0 3px rgba(90,169,255,0.10)}
.tile.sel svg{color:var(--rain)}
.tile.sel::after{content:"";position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;
background:var(--rain);background-image:url("data:image/svg+xml;utf8,");
background-size:12px;background-position:center}
/* ========== Bottom nav ========== */
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;
padding-bottom:var(--safe-bot);background:linear-gradient(180deg,rgba(11,18,32,0) 0%, var(--bg) 40%);
pointer-events:none;z-index:5}
html[data-theme="light"] .nav{background:linear-gradient(180deg,rgba(246,248,252,0) 0%, var(--bg) 40%)}
.nav-inner{pointer-events:auto;display:grid;grid-template-columns:repeat(5,1fr);
background:var(--surface-strong);border:1px solid var(--line);border-radius:22px;
margin:0 12px 12px;width:100%;max-width:516px;box-shadow:var(--shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nav button{padding:10px 0 12px;display:flex;flex-direction:column;align-items:center;gap:3px;
color:var(--text-3);font-size:11px;font-weight:600}
.nav button.active{color:var(--text)}
.nav svg{width:22px;height:22px}
/* ========== Onboarding ========== */
.onboard{position:fixed;inset:0;background:var(--bg);z-index:10;display:none;overflow-y:auto;
padding:max(24px,var(--safe-top)) 22px max(24px,var(--safe-bot))}
.onboard.show{display:block}
.onboard h1{font-size:30px;letter-spacing:-0.02em;margin:18px 0 6px;font-weight:700;line-height:1.15}
.onboard .lead{color:var(--text-2);font-size:15.5px;line-height:1.5}
.onboard .step{display:none;animation:fade .25s ease}
.onboard .step.active{display:block}
.dots{display:flex;gap:6px;justify-content:center;margin-top:18px}
.dots span{width:6px;height:6px;background:var(--line-2);border-radius:999px;transition:.2s}
.dots span.on{background:var(--rain);width:18px}
.onboard footer{position:sticky;bottom:0;padding:14px 0 calc(8px + var(--safe-bot));
background:linear-gradient(180deg,rgba(11,18,32,0),var(--bg) 30%);display:flex;gap:10px;margin-top:18px}
.onboard footer{background:linear-gradient(180deg,rgba(246,248,252,0),var(--bg) 30%)}
html[data-theme="light"] .onboard footer{background:linear-gradient(180deg,rgba(246,248,252,0),var(--bg) 30%)}
/* ========== Banners ========== */
.banner{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:rgba(244,183,64,0.10);
border:1px solid rgba(244,183,64,0.30);color:var(--warn);font-size:13.5px;display:flex;align-items:center;gap:10px}
.banner.info{background:rgba(90,169,255,0.10);border-color:rgba(90,169,255,0.30);color:var(--rain)}
.banner.bad{background:rgba(255,110,110,0.10);border-color:rgba(255,110,110,0.30);color:var(--bad)}
.banner button{margin-left:auto;color:inherit;font-weight:700;font-size:13px}
/* ========== Modal ========== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.50);z-index:20;display:none;
align-items:flex-end;justify-content:center;padding:0 0 var(--safe-bot)}
.modal.show{display:flex}
.modal-card{background:var(--bg-2);border-top-left-radius:24px;border-top-right-radius:24px;
padding:18px 22px 24px;width:100%;max-width:540px;border-top:1px solid var(--line);animation:slideup .25s ease}
@keyframes slideup{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.modal h2{margin:6px 0 4px;font-size:20px}
.handle{width:38px;height:4px;background:var(--line-2);border-radius:999px;margin:0 auto 10px}
.skel{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);
background-size:200% 100%;animation:sh 1.2s linear infinite;border-radius:8px}
@keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}}
.muted{color:var(--text-2)}
.small{font-size:13px}
.center{text-align:center}
.spaced{margin-top:14px}
.row{display:flex;align-items:center;gap:10px}
.spread{justify-content:space-between}
.grow{flex:1}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.mday{aspect-ratio:1/1;border-radius:10px;background:var(--surface);border:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;position:relative;padding:6px 2px}
.mday .d{font-weight:700;font-size:13px}
.mday .p{font-size:10px;color:var(--text-2);margin-top:2px}
.mday.good{border-color:rgba(61,220,151,0.45);background:rgba(61,220,151,0.10)}
.mday.warn{border-color:rgba(244,183,64,0.40);background:rgba(244,183,64,0.10)}
.mday.bad{border-color:rgba(255,110,110,0.35);background:rgba(255,110,110,0.10)}
.mday.muted{opacity:0.4}
.mday .dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--rain)}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0}
/* Contamination banner */
.alert{margin:14px 0 0;background:linear-gradient(180deg,rgba(255,110,110,0.10),rgba(255,110,110,0.04));
border:1px solid rgba(255,110,110,0.35);border-radius:var(--radius);padding:14px 16px}
.alert.med{background:linear-gradient(180deg,rgba(244,183,64,0.10),rgba(244,183,64,0.04));border-color:rgba(244,183,64,0.35)}
.alert .top{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--bad)}
.alert.med .top{color:var(--warn)}
.alert .desc{color:var(--text-2);font-size:13.5px;margin-top:6px;line-height:1.45}
.alert .row{display:flex;gap:8px;margin-top:10px}
.alert .row .btn{padding:8px 12px;font-size:13px}
/* Quick log chips */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.quick button{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 8px;
font-size:13px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text)}
.quick button .e{font-size:22px}
.quick button:active{transform:scale(0.96)}
.tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);
border-radius:12px;padding:3px;margin-top:10px}
.tabs button{flex:1;padding:8px;border-radius:9px;color:var(--text-2);font-weight:600;font-size:13px}
.tabs button.on{background:var(--surface-2);color:var(--text)}
/* Ad / Donate card */
.ad{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:14px 16px;display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%}
.ad-thumb{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#7CC4FF,#2B7BD8);
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:0 0 auto;font-size:18px}
.ad-thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.ad-body{flex:1;min-width:0}
.ad-sp{color:var(--text-3);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.10em}
.ad-ti{font-weight:600;font-size:14.5px;margin-top:2px}
.ad-bd{color:var(--text-2);font-size:13px;margin-top:2px;line-height:1.4}
.ad-cta{color:var(--rain);font-size:12.5px;font-weight:700;margin-top:6px}
.ad-x{background:none;border:0;color:var(--text-3);font-size:18px;padding:0 4px;cursor:pointer}
/* ===== Info-tooltip system (mobile-friendly tap-to-explain) ===== */
.info-i{display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;border-radius:50%;background:transparent;
border:1px solid var(--line-2);color:var(--text-3);
font-size:10.5px;font-weight:700;cursor:pointer;
margin-left:6px;vertical-align:middle;line-height:1;
font-family:Georgia,serif;font-style:italic;
transition:all .15s;flex-shrink:0;
-webkit-user-select:none;user-select:none}
.info-i:hover,.info-i:focus{border-color:var(--rain);color:var(--rain);outline:none}
.info-i:active{transform:scale(0.92)}
.info-pop{position:fixed;z-index:50;max-width:280px;
background:var(--surface-strong);color:var(--text);
border:1px solid var(--line-2);border-radius:12px;
padding:12px 14px;font-size:13px;line-height:1.45;font-weight:400;
box-shadow:var(--shadow);display:none;letter-spacing:normal;text-transform:none}
.info-pop.show{display:block;animation:fade .15s ease}
.info-pop::before{content:"";position:absolute;width:10px;height:10px;
background:inherit;border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);
transform:rotate(45deg);top:-6px;left:var(--arrow-x,16px)}
.info-pop .x{position:absolute;top:6px;right:8px;background:none;border:0;
color:var(--text-3);font-size:16px;cursor:pointer;padding:2px 4px;line-height:1}
.info-pop .x:hover{color:var(--text)}
.info-pop strong{display:block;font-weight:600;margin-bottom:4px;color:var(--text)}
/* Subtle version tag at page bottom, above bottom nav */
.version-tag{position:fixed;left:0;right:0;bottom:calc(82px + var(--safe-bot));
text-align:center;font-size:10.5px;color:var(--text-3);letter-spacing:0.10em;font-weight:600;
pointer-events:none;opacity:0.55;text-transform:uppercase;z-index:4;
text-shadow:0 0 0 transparent}
.version-tag .pulse{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--good);
vertical-align:middle;margin-right:6px;animation:vp 2.4s ease-in-out infinite}
@keyframes vp{0%,100%{opacity:1}50%{opacity:0.3}}
/* Test mode badge — auto-shown by inline script on localhost / staging / ?test=1 */
.test-badge{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:6px;
background:linear-gradient(135deg,#FFC857,#FF8845);color:#1a0e00;
font-size:9.5px;font-weight:800;letter-spacing:0.10em;line-height:1.4;
opacity:0.95;vertical-align:middle;
box-shadow:0 2px 8px -2px rgba(255,164,56,0.45)}
.sponsored{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sponsored:hover{color:var(--rain)}
.sponsored-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
color:var(--text-3);background:var(--surface-2);padding:2px 6px;border-radius:6px;margin-left:4px;vertical-align:1px;border:1px solid var(--line)}
/* Cookie consent banner */
/* Update banner shown when SW has a new version waiting */
.update-banner{margin:0 0 12px;background:linear-gradient(180deg,rgba(90,169,255,0.10),rgba(90,169,255,0.04));
border:1px solid rgba(90,169,255,0.30);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px}
html[data-theme="light"] .update-banner{background:linear-gradient(180deg,rgba(43,175,175,0.10),rgba(43,175,175,0.04));border-color:rgba(43,175,175,0.35)}
.update-banner .ico{font-size:18px;line-height:1}
.update-banner .body{flex:1;font-size:13.5px;line-height:1.4}
.update-banner .body strong{display:block;font-size:14px;color:var(--text);margin-bottom:2px}
.update-banner .body span{color:var(--text-2)}
.update-banner button{padding:8px 14px;font-size:13px;font-weight:700;border-radius:10px;border:0;cursor:pointer;
background:linear-gradient(180deg,var(--rain),var(--rain-2));color:#fff;flex-shrink:0}
.update-banner button:active{transform:scale(0.97)}
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-bot));z-index:40;
background:var(--surface-strong);border:1px solid var(--line-2);border-radius:18px;
box-shadow:var(--shadow-lg);padding:18px 18px 16px;display:none;max-width:520px;margin:0 auto}
.consent.show{display:block;animation:slideup .25s cubic-bezier(.2,.7,.2,1)}
.consent h3{margin:0 0 6px;font-size:16px;letter-spacing:-0.01em}
.consent p{margin:0 0 10px;color:var(--text-2);font-size:13.5px;line-height:1.5}
.consent .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.consent .row .btn{flex:1 0 auto;font-size:13px;padding:10px 12px}
.consent details{margin-top:8px;font-size:13px}
.consent summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:13px;list-style:none;padding:4px 0}
.consent summary::-webkit-details-marker{display:none}
.consent .switch{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.consent .switch:first-of-type{border-top:0;margin-top:6px}
.consent .switch label{font-weight:600;font-size:13.5px}
.consent .switch .desc{display:block;color:var(--text-3);font-size:11.5px;font-weight:400;margin-top:2px}
.consent .switch input[type="checkbox"]{transform:scale(1.2);accent-color:var(--rain)}
.consent .switch input[disabled]{opacity:0.5}
.toast{position:fixed;bottom:calc(96px + var(--safe-bot));left:50%;transform:translateX(-50%);
background:var(--surface-2);border:1px solid var(--line-2);padding:10px 16px;border-radius:999px;
font-size:13.5px;font-weight:600;box-shadow:var(--shadow);z-index:30;display:none;animation:fade .2s ease}
.toast.show{display:block}
/* Branding flourish */
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;
background:linear-gradient(135deg,var(--rain),var(--rain-2));box-shadow:0 10px 22px -6px color-mix(in srgb, var(--rain) 50%, transparent)}
.logo-mark svg{width:28px;height:28px;color:#fff}
.hero-h{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.hero-h .meta{flex:1}
.hero-temp{font-weight:700;font-size:32px;letter-spacing:-0.02em}
.hero-temp small{font-size:14px;font-weight:600;color:var(--text-2);margin-left:2px}
.hidden{display:none !important}