/* One glass material across the app, inspired by iOS. */
:root{--glass-surface:rgba(255,255,255,.64);--glass-control:rgba(255,255,255,.58);--glass-border:rgba(214,199,182,.6);--glass-highlight:rgba(255,255,255,.94);--glass-shadow:0 12px 36px #7550330b,0 2px 6px #75503305,inset 0 1px 0 var(--glass-highlight);--glass-blur:24px;--glass-footer:rgba(255,252,248,.78)}
:root[data-theme=dark]{--glass-surface:rgba(30,32,27,.72);--glass-control:rgba(43,45,37,.62);--glass-border:rgba(213,216,196,.15);--glass-highlight:rgba(255,255,255,.12);--glass-shadow:0 14px 38px #0003,0 2px 8px #0002,inset 0 1px 0 var(--glass-highlight);--glass-footer:rgba(30,32,27,.85)}
body{background:radial-gradient(ellipse at 0% 0%,#f6c4ba42,transparent 48%),radial-gradient(ellipse at 100% 70%,#d6e6b947,transparent 52%),var(--bg);background-attachment:fixed}
:root[data-theme=dark] body{background:radial-gradient(ellipse at 0% 0%,#7c3a182b,transparent 48%),radial-gradient(ellipse at 100% 70%,#53672c24,transparent 52%),var(--bg);background-attachment:fixed}
:root[data-theme] :is(.card,.auth-panel,.quiz-card,.modal,.modal.wide,.privacy-card){background:var(--glass-surface);border-color:var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:blur(var(--glass-blur)) saturate(1.35);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.35)}
:root[data-theme] :is(.sidebar,.topbar,.mobile-nav){background:var(--glass-footer);border-color:var(--glass-border);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5)}
:root[data-theme] .mobile-nav{box-shadow:0 12px 32px #0003,inset 0 1px 0 var(--glass-highlight)}
:root[data-theme] :is(#toast,#pwa-update){background:var(--glass-footer);border-color:var(--glass-border);box-shadow:0 8px 28px #00000012,inset 0 1px 0 var(--glass-highlight);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4)}
:root[data-theme] :is(.secondary,.privacy-button,.quiz-back,.sheet-close,.theme-selector,.phone-field,.wheel-trigger){background:var(--glass-control);border-color:var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
:root[data-theme] :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){background:var(--glass-control);border-color:var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight)}
:root[data-theme] .phone-field input{background:transparent!important;box-shadow:none!important}
:root[data-theme] .auth-story .auth-plaques>span:first-child{background:var(--glass-surface);border-color:var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
:root[data-theme] .primary{background:linear-gradient(160deg,#e9735bf5,#d84a2ef5);border:1px solid #ffffff24;box-shadow:inset 0 1px 0 #ffffff54,0 5px 14px #cc482d20}
:root[data-theme=dark] .primary{background:linear-gradient(160deg,#d15a42fa,#a83821f5);box-shadow:inset 0 1px 0 #ffffff38,0 5px 14px #0002}
:root[data-theme] .secondary:hover{background:var(--glass-footer)}
:root[data-theme] .quiz-option{background:var(--glass-control);border-color:var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight)}
:root[data-theme] .quiz-option:has(input:checked){background:var(--peach);border-color:var(--accent)}
:root[data-theme] .modal-backdrop{--sheet-dim:#24211736;background:var(--sheet-dim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
:root[data-theme=dark] .modal-backdrop{--sheet-dim:#0007}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-theme] :is(.card,.auth-panel,.quiz-card,.modal,.sidebar,.topbar,.mobile-nav,.sheet-footer){background:var(--panel)}}
@media(prefers-reduced-transparency:reduce){:root{--glass-surface:var(--panel);--glass-control:var(--panel);--glass-footer:var(--panel);--glass-blur:0px}}
/* Pointer hover never moves or resizes the hit target. */
:root[data-theme] button,:root[data-theme] .primary,:root[data-theme] .secondary{transition-property:color,border-color;backface-visibility:hidden}
:root[data-theme] button:hover,:root[data-theme] .primary:hover{transform:none}
@media(hover:hover){:root[data-theme] .primary:hover{box-shadow:inset 0 1px 0 #ffffff6b,0 5px 14px #cc482d29}:root[data-theme] .secondary:hover{border-color:var(--accent-dark)}}
:root[data-theme] .mood-choice:hover .mood-face{transform:none}
/* Blur the stationary backdrop once; moving sheets do not resample it twice. */
:root[data-theme] .modal,:root[data-theme] .modal.wide{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-footer);will-change:transform;backface-visibility:hidden}
:root[data-theme] .modal .sheet-footer{backdrop-filter:none;-webkit-backdrop-filter:none}
/* The welcome plaques and peach tile use the same translucent material. */
:root[data-theme] .auth-story .auth-plaques>span:first-child{background:linear-gradient(145deg,#ffffff24,transparent 60%),var(--glass-surface);border-color:var(--glass-border);box-shadow:inset 0 1px 1px var(--glass-highlight),inset 0 -1px 0 #ffffff12,0 12px 32px #0000000a;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
:root[data-theme] .auth-story .auth-plaques>span:nth-child(2),:root[data-theme] .auth-story .auth-illustration>img{background:linear-gradient(145deg,#ffffff40,transparent 55%),linear-gradient(160deg,#e9755ed9,#da4b2ecc);border:1px solid #ffffff50;box-shadow:inset 0 1px 1px #ffffff80,inset 0 -1px 0 #87301f30,0 12px 32px #cc482d26;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
:root[data-theme=dark] .auth-story .auth-plaques>span:nth-child(2),:root[data-theme=dark] .auth-story .auth-illustration>img{background:linear-gradient(145deg,#ffffff24,transparent 55%),linear-gradient(160deg,#e25e43d9,#c1452db8);border-color:#f5c0b655;box-shadow:inset 0 1px 1px #ffffff55,inset 0 -1px 0 #732d1930,0 14px 36px #0003}
/* A translucent tab bar samples the content below; only its highlight moves. */
@media(max-width:900px){
 :root[data-theme] .mobile-nav{background:rgba(255,252,248,.48);border-color:rgba(255,255,255,.72);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7);box-shadow:0 8px 30px #61432a20,inset 0 1px 1px #ffffffd9,inset 0 -1px 1px #ffffff5c}
 :root[data-theme=dark] .mobile-nav{background:rgba(28,30,26,.42);border-color:rgba(234,241,226,.23);box-shadow:0 10px 32px #0005,inset 0 1px 1px #ffffff30,inset 0 -1px 1px #ffffff0d}
 .mobile-nav:before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,#ffffff24,transparent 35%,transparent 72%,#ffffff08)}
 :root[data-theme] .mobile-nav-indicator{background:linear-gradient(160deg,#ffffff75,#ffffff20);border-color:#ffffffb3;box-shadow:inset 0 1px 1px #ffffffe6,inset 0 -1px 1px #89776330,0 3px 12px #5d412619}
 :root[data-theme=dark] .mobile-nav-indicator{background:linear-gradient(160deg,#ffffff24,#ffffff09);border-color:#ffffff40;box-shadow:inset 0 1px 1px #ffffff4d,inset 0 -1px 1px #ffffff0d,0 3px 12px #0002}
}
@media(prefers-reduced-transparency:reduce){:root[data-theme] .mobile-nav{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-theme] .mobile-nav{background:var(--panel)}}
/* Neutral canvas in both themes; the glass surfaces keep their own material. */
:root[data-theme=light]{--bg:#fff}
:root[data-theme=dark]{--bg:#000}
:root[data-theme] body{background:var(--bg);background-attachment:initial}

/* One rose-peach accent for glass actions, navigation and welcome tiles. */
:root{--accent-start:#f5a18c;--accent-end:#ed927f;--accent-ink:#3b211d;--accent-glow:#db7e6d}
:root[data-theme=dark]{--accent-start:#f0a08b;--accent-end:#dd8c7c}
:root[data-theme] .primary{background:linear-gradient(160deg,var(--accent-start),var(--accent-end));color:var(--accent-ink);box-shadow:inset 0 1px 0 #ffffff54,0 5px 14px #db7e6d20}
:root[data-theme] .auth-story .auth-plaques>span:nth-child(2),:root[data-theme] .auth-story .auth-illustration>img{background:linear-gradient(145deg,#ffffff26,transparent 55%),linear-gradient(160deg,var(--accent-start),var(--accent-end));color:var(--accent-ink);border-color:#ffd6ca70;box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 0 #8b494026,0 12px 32px #db7e6d26}
:root[data-theme] :is(.mobile-nav>button.active,.theme-selector button[aria-pressed=true],.sheet-origin){color:var(--accent-dark)}
:root[data-theme] .primary:hover{background:linear-gradient(160deg,var(--accent-start),var(--accent-end));color:var(--accent-ink)}
:root[data-theme=dark] .auth-story .auth-plaques>span:nth-child(2),:root[data-theme=dark] .auth-story .auth-illustration>img{background:linear-gradient(145deg,#ffffff20,transparent 55%),linear-gradient(160deg,var(--accent-start),var(--accent-end));color:var(--accent-ink)}

:root[data-theme] .nav-item.active{background:var(--peach)}