/* ANIMA styles.css — GENERATED + MINIFIED from the CSS partials by build-css.py.
   Do not edit this file; edit the partials and rebuild. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
:root { --bg-0: #0B111C; --bg-1: #0e1826; --bg-2: #111A28; --grad-sheet: radial-gradient(120% 60% at 0% 0%, var(--sage-tint) 0%, transparent 60%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%); --card-1: #111A28; --card-2: #16223a; --icon-fill: #13202F; --chip-fill: rgba(148,180,220,0.09); --bg: var(--bg-0); --card: var(--card-1); --surface: var(--card-1); --surface-raised: var(--card-2); --on-sage: #0a1420; --cta-fill: linear-gradient(160deg, #bfeaf4, #8fd6e8); --cta-ink: #0a1420; --grad-ambient: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-2) 60%, var(--card-1) 100%); --surface-soft: rgba(255, 255, 255, 0.02); --surface-soft-hover: rgba(255, 255, 255, 0.03); --grad-lift: linear-gradient(135deg, var(--card-2) 0%, var(--bg-2) 100%); --grad-lift-v: linear-gradient(180deg, var(--card-2) 0%, var(--bg-2) 100%); --border: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.10); --border-warm: rgba(125,211,232,0.22); --sage: #7dd3e8; --sage-400: #5ebac6; --sage-soft: rgba(125,211,232,0.08); --sage-50: var(--sage-soft); --sage-100: rgba(125,211,232,0.16); --sage-200: rgba(125,211,232,0.34); --sage-glow: rgba(125,211,232,0.35); --sage-wash: rgba(125,211,232,0.02); --sage-tint: rgba(125,211,232,0.04); --sage-veil: rgba(125,211,232,0.06); --sage-90: rgba(125,211,232,0.10); --sage-110: rgba(125,211,232,0.12); --sage-130: rgba(125,211,232,0.14); --sage-170: rgba(125,211,232,0.18); --sage-210: rgba(125,211,232,0.22); --sage-270: rgba(125,211,232,0.28); --sage-290: rgba(125,211,232,0.30); --sage-glow-40: rgba(125,211,232,0.40); --sage-glow-42: rgba(125,211,232,0.42); --sage-glow-45: rgba(125,211,232,0.45); --sage-glow-peak: rgba(125,211,232,0.55); --sage-fill-3: rgba(125,211,232,0.62); --sage-phase-border: rgba(125,211,232,0.90); --sage-shimmer: rgba(125,211,232,0.95); --amber: #d4a574; --amber-50: rgba(212,165,116,0.08); --amber-100: rgba(212,165,116,0.22); --rose: #e08a8a; --rose-50: rgba(224,138,138,0.10); --rose-100: rgba(224,138,138,0.22); --lavender: #a89cd9; --lavender-50: rgba(168,156,217,0.10); --lavender-100: rgba(168,156,217,0.22); --moon: #7d8eb0; --focus: #7fb8d1; --white: #ffffff; --white-wash: rgba(255,255,255,0.02); --white-wash-2: rgba(255,255,255,0.025); --white-tint: rgba(255,255,255,0.03); --white-veil: rgba(255,255,255,0.04); --white-soft: rgba(255,255,255,0.05); --white-mist: rgba(255,255,255,0.06); --white-haze: rgba(255,255,255,0.07); --white-film: rgba(255,255,255,0.08); --white-line: rgba(255,255,255,0.10); --white-line-2: rgba(255,255,255,0.12); --white-edge: rgba(255,255,255,0.14); --white-rule: rgba(255,255,255,0.16); --white-rule-2: rgba(255,255,255,0.18); --white-grip: rgba(255,255,255,0.22); --white-grip-2: rgba(255,255,255,0.28); --white-bright: rgba(255,255,255,0.32); --white-strong: rgba(255,255,255,0.40); --white-strong-2: rgba(255,255,255,0.45); --white-vivid: rgba(255,255,255,0.60); --toggle-off-knob: #99a1af; --medal-gold: #d4b454; --medal-silver: #c0c0c0; --medal-bronze: #cd9265; --text: #f4f1ec; --text-2: #8395ad; --text-3: #7c8aae; --text-4: #2d3a52; --slate: #94A3B8; --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 14px; --r-lg2: 16px; --r-xl: 18px; --r-2xl: 22px; --r-pill: 999px; --r-frame: 44px; --r-circle: 50%; --r-sheet: 28px; --radius: 18px; --radius-sm: 14px; --radius-lg: 24px; --radius-xl: 26px; --nav-h: 72px; --s-1: 4px; --s-1h: 6px; --s-2: 8px; --s-2h: 10px; --s-3: 12px; --s-3h: 14px; --s-4: 16px; --s-4h: 18px; --s-5: 22px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --fs-numeral-xl: 72px; --lh-numeral-xl: 1.0; --fs-numeral-lg: 60px; --lh-numeral-lg: 1.0; --fs-display: 56px; --lh-display: 1.0; --ls-display: -1.5px; --fs-h1-lg: 44px; --lh-h1-lg: 1.05; --ls-h1-lg: -1px; --fs-h1: 32px; --lh-h1: 1.1; --ls-h1: -0.5px; --fs-h2-lg: 28px; --lh-h2-lg: 1.15; --ls-h2-lg: -0.3px; --fs-h2-md: 26px; --lh-h2-md: 1.15; --ls-h2-md: -0.3px; --fs-h2: 24px; --lh-h2: 1.15; --ls-h2: -0.3px; --fs-h3: 19px; --lh-h3: 1.3; --ls-h3: -0.3px; --fs-md: 16px; --lh-md: 1.4; --ls-md: 0; --fs-body: 14px; --lh-body: 1.5; --ls-body: 0; --fs-caption: 12px; --lh-caption: 1.45; --ls-caption: 0.2px; --fs-label: 11px; --lh-label: 1.0; --ls-label: 1.8px; --fs-mini: 10px; --lh-mini: 1.2; --ls-mini: 0.4px; --fs-micro: 9px; --lh-micro: 1.2; --ls-micro: 0.6px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 28px; --elev-1: 0 1px 3px rgba(0,0,0,.25); --elev-2: 0 8px 28px rgba(0,0,0,.40); --elev-3: 0 24px 60px rgba(0,0,0,.55); --elev-glow-sage: 0 0 22px var(--sage-glow); --state-hover: 0.08; --state-focus: 0.12; --state-press: 0.16; --state-drag: 0.20; --state-disabled-content: 0.38; --state-disabled-surface: 0.04; --state-ink: 125,211,232; --z-behind: -1; --z-base: 1; --z-raised: 10; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-top: 999; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --gutter: 22px; --gutter-sm: 18px; --row-pad-y: var(--s-4h); --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-linear: linear; --ease: var(--ease-ios); --dur-tap: 120ms; --dur-state: 220ms; --dur-card: 350ms; --dur-page: 420ms;}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0;}
html, body { height: 100%; background: var(--bg); font-family: var(--font-body); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1; font-weight: 400; letter-spacing: -0.005em; text-rendering: optimizeLegibility; overflow: hidden;}
.stat-val, .stat-val-num, .stat-val-unit, .home-status-time, [data-tabular] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "kern" 1;}
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;}
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text;}
#app { width: 100%; height: 100vh; height: 100dvh; background: radial-gradient(ellipse at 30% 20%, var(--sage-tint) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(125,142,176,0.03) 0%, transparent 50%), linear-gradient(135deg, var(--bg-0) 0%, var(--bg-2) 60%, var(--card-1) 100%);}
.phone { width: 100%; height: 100vh; height: 100dvh; background: var(--bg); border-radius: 0; overflow: hidden; position: relative; box-shadow: none;}
@media (min-width: 480px) { #app { display: flex; justify-content: center; align-items: center;}
.phone { width: 390px; height: 844px; max-height: calc(100dvh - 32px); border-radius: var(--r-frame); box-shadow: 0 60px 150px rgba(0,0,0,0.9), 0 0 0 1px var(--white-soft), inset 0 1px 0 var(--white-mist);}
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; animation: page-fade-in var(--dur-page) var(--ease-out-soft) both; will-change: opacity, transform;}
.screen::-webkit-scrollbar { display: none;}
.screen.no-page-anim { animation: none;}
@keyframes page-fade-in { from { opacity: 0; transform: translateY(10px) scale(.992);}
to { opacity: 1; transform: translateY(0) scale(1);}
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px) scale(.992);}
to { opacity: 1; transform: translateY(0) scale(1);}
}
#app { position: relative;}
#app.is-transitioning .phone-leaving { position: absolute; inset: 0; margin: auto;}
@media (min-width: 480px) { .phone-leaving { width: 390px; height: 844px; max-height: calc(100dvh - 32px); border-radius: var(--r-frame); overflow: hidden; background: var(--bg); box-shadow: 0 60px 150px rgba(0,0,0,0.9), 0 0 0 1px var(--white-soft), inset 0 1px 0 var(--white-mist);}
}
.phone-leaving { width: 100%; height: 100dvh; background: var(--bg); overflow: hidden;}
.screen.is-leaving { animation: page-fade-out var(--dur-state) var(--ease-ios) both; pointer-events: none; will-change: opacity, transform;}
@keyframes page-fade-out { from { opacity: 1; transform: translateY(0) scale(1);}
to { opacity: 0; transform: translateY(-6px) scale(.994);}
}
#app.is-transitioning .phone-leaving > .screen.is-leaving { z-index: 2;}
.bottom-nav { --nav-bg: rgba(11,17,28,0.98); position: absolute; bottom: 0; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-around; padding: var(--s-2h) max(0px, var(--safe-right)) calc(10px + max(var(--safe-bottom), var(--s-3))) max(0px, var(--safe-left)); z-index: var(--z-overlay); width: 100%;}
.bottom-nav::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--s-6); background: linear-gradient(to top, var(--bg-0), transparent); pointer-events: none;}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; gap: var(--s-1); cursor: pointer; padding: var(--s-1h) var(--s-4h) var(--s-1); min-width: 48px; min-height: 48px; border: none; background: none; color: var(--text-3); transition: color var(--dur-state) var(--ease-ios); position: relative;}
.nav-item.active { color: var(--sage);}
.nav-item svg { width: 24px; height: 24px; stroke-width: 1.6; fill: none;}
.nav-item svg.ic-fill { fill: currentColor;}
.nav-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;}
.top-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + var(--safe-top)) max(var(--gutter), var(--safe-right)) var(--s-4h) max(var(--gutter), var(--safe-left)); flex-shrink: 0; gap: var(--s-3);}
.top-bar-title { font-weight: 600; color: var(--text); letter-spacing: -.1px; flex: 1; text-align: center;}
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--white-mist), var(--white-tint)); border: 1px solid var(--white-line); box-shadow: var(--elev-1); color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), box-shadow var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.icon-btn { position: relative;}
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none;}
.icon-btn--sm::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px;}
@media (hover: hover) { .icon-btn:hover { background: var(--sage-90); border-color: var(--sage-270); box-shadow: 0 0 12px var(--sage-170); color: var(--sage);}
}
.icon-btn:active { transform: scale(.94);}
.icon-btn--sm { width: 32px; height: 32px;}
.icon-btn--sm svg { width: 16px; height: 16px;}
.topbar-spacer { width: 40px;}
.pill-label { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-label); font-weight: 600; color: var(--text); letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;}
.pill-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 8px var(--sage);}
.skip-link { position: fixed; top: var(--s-2); left: var(--s-2); clip-path: inset(100%); clip: rect(0 0 0 0); height: 1px; width: 1px; overflow: hidden; white-space: nowrap; z-index: var(--z-overlay); background: var(--bg-1); color: var(--sage); padding: var(--s-2) var(--s-3); border: 1px solid var(--sage); border-radius: var(--r-md); text-decoration: none; font-family: var(--font-body); font-weight: 600;}
.skip-link:focus, .skip-link:focus-visible { clip-path: none; clip: auto; height: auto; width: auto; overflow: visible;}
.tile-sage { background: var(--sage-soft); color: var(--sage);}
.see-all-link { display: inline-flex; align-items: center; background: none; border: none; padding: 0; font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; color: var(--sage); letter-spacing: .2px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity var(--dur-tap) ease;}
.see-all-link:hover { opacity: .8;}
.field-input { width: 100%; box-sizing: border-box; padding: var(--s-3) var(--s-3h); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-family: var(--font-body); font-size: var(--fs-md); outline: none; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-state) ease, background var(--dur-state) ease;}
.field-input:focus, .field-input:focus-visible { border-color: var(--sage); outline: none; box-shadow: 0 0 0 2px var(--sage);}
.field-input::placeholder { color: var(--text-3);}
.pv-input::placeholder { color: #94A3B8;}
.field-input:-webkit-autofill, .field-input:-webkit-autofill:hover, .field-input:-webkit-autofill:focus, .field-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 100px var(--surface-soft) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 5000s ease-in-out 0s;}
.tab-underline { position: relative; background: transparent; border: none; border-radius: 0; color: var(--text-3); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; cursor: pointer; transition: color var(--dur-state) var(--ease-ios);}
.tab-underline:hover:not(.active) { color: var(--text-2);}
.tab-underline.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sage); border-radius: 2px; box-shadow: 0 0 6px var(--sage-glow);}
.chip { background: var(--chip-fill); border: 1px solid var(--border); color: var(--text-2); font-family: var(--font-body); font-size: var(--fs-caption); cursor: pointer; -webkit-tap-highlight-color: transparent;}
.chip:active { transform: scale(.97);}
.btn-reset { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; width: 100%; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;}
.btn-primary { width: 100%; padding: var(--s-4); background: var(--cta-fill); color: var(--cta-ink); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1; border: none; border-radius: var(--r-pill); cursor: pointer; transition: transform var(--dur-state) var(--ease-ios); font-family: var(--font-body); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);}
.btn-primary svg { width: 14px; height: 14px; flex-shrink: 0;}
.btn-primary:hover { transform: translateY(-1px);}
.btn-primary:active { transform: translateY(0); transition: all var(--dur-tap) var(--ease-ios);}
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none;}
.btn-primary:disabled:hover, .btn-primary[aria-disabled="true"]:hover { transform: none;}
.btn-ghost { width: 100%; padding: var(--s-4); background: transparent; color: var(--sage); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--border-warm); border-radius: var(--r-pill); --state-radius: var(--r-pill); cursor: pointer; transition: border-color var(--dur-state) var(--ease-ios); font-family: var(--font-body); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);}
.btn-ghost:hover { border-color: var(--sage);}
.btn-ghost:active { transform: scale(.985); transition: transform var(--dur-tap) var(--ease-ios);}
.btn-ghost svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none;}
.session-finish-btn { background: transparent; border: 1px solid var(--border-warm); color: var(--sage); padding: var(--s-2) var(--s-4h); border-radius: var(--r-pill); cursor: pointer;}
.toggle { width: 40px; height: 24px; border-radius: 999px; border: none; cursor: pointer; background: var(--white-line); transition: background var(--dur-state) var(--ease-ios); position: relative; flex-shrink: 0; padding: 0; display: inline-block;}
.toggle.on { background: var(--sage);}
.toggle.off { background: var(--white-line); box-shadow: none;}
.toggle::after { content: ''; position: absolute; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: left var(--dur-state) var(--ease-ios), transform var(--dur-tap); box-shadow: var(--elev-1);}
.toggle.on::after { left: 19px;}
.toggle.off::after { left: 3px;}
.toggle:active::after { transform: scale(.92);}
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--card-2); --vol-track: var(--card-2); outline: none; cursor: pointer;}
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px var(--sage-130), 0 0 14px var(--sage-glow-45); cursor: pointer; transition: transform var(--dur-tap) var(--ease-ios);}
.slider::-webkit-slider-thumb:active { transform: scale(1.18);}
.slider::-moz-range-thumb { width: 24px; height: 24px; border: none; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px var(--sage-130), 0 0 14px var(--sage-glow-45); cursor: pointer; transition: transform var(--dur-tap) var(--ease-ios);}
.slider::-moz-range-thumb:active { transform: scale(1.18);}
.progress-bar-wrap { width: 100%; height: 5px; background: var(--card-2); border-radius: 999px; overflow: hidden;}
#page-progress, .page-progress-bar { position: absolute; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--sage-400), var(--sage), var(--white-vivid), var(--sage)); background-size: 200% auto; border-radius: 0 1px 1px 0; z-index: var(--z-top); width: 0%; opacity: 0; transition: width var(--dur-card) var(--ease-standard), opacity var(--dur-state); box-shadow: 0 0 8px var(--sage); animation: shimmer 1.2s linear infinite;}
#page-progress.active, .page-progress-bar.active { opacity: 1;}
#page-progress.done, .page-progress-bar.done { width: 100% !important; opacity: 0; transition: width var(--dur-state) ease, opacity var(--dur-page) ease .2s;}
.section-label { font-size: var(--fs-mini); font-weight: 600; letter-spacing: 1.5px; color: var(--text-3); text-transform: uppercase; margin-bottom: var(--s-3h);}
.section-label--lg { font-size: var(--fs-label); letter-spacing: 2px;}
.section-label--xs { font-size: var(--fs-micro);}
.section-head { display: flex; align-items: center; justify-content: space-between;}
.section-head--baseline { align-items: baseline;}
.page-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.4px; color: var(--text); line-height: 1; margin: 0;}
.page-title--bar { flex: 1; text-align: left;}
.body-text { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);}
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption);}
.hero-title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1);}
.hero-title--lg { font-size: var(--fs-h2-lg); line-height: var(--lh-h2-lg); letter-spacing: var(--ls-h2-lg);}
.hero-title--md { font-size: var(--fs-h2-md); line-height: var(--lh-h2-md); letter-spacing: var(--ls-h2-md);}
.hero-numeral, .hero-numeral--lg { font-variant-numeric: tabular-nums;}
.hero-numeral { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1);}
.hero-numeral--lg { font-size: var(--fs-h2-lg); line-height: var(--lh-h2-lg); letter-spacing: var(--ls-h2-lg);}
.metric-display { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.3px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;}
.metric-display--sage { color: var(--sage);}
.button-label--sm { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 1;}
.sub-text { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: .1px; color: var(--text-3); font-weight: 400;}
.row-title { font-size: var(--fs-md); line-height: 1.25; letter-spacing: -.1px; color: var(--text); font-weight: 500;}
.page-subtitle { font-size: var(--fs-caption); line-height: 1.5; letter-spacing: 0; color: var(--text-3); font-weight: 400;}
.lead-text { font-size: var(--fs-md); line-height: var(--lh-md); letter-spacing: var(--ls-md);}
.empty-state { text-align: center; color: var(--text-3);}
.empty-state-icon { width: 32px; height: 32px; margin: 0 auto var(--s-2h); color: var(--text-3); opacity: .7;}
.empty-state-action { margin-top: var(--s-3); background: none; border: none; color: var(--sage); font-size: var(--fs-caption); cursor: pointer; font-family: var(--font-body);}
.badge { display: inline-flex; align-items: center; padding: 3px var(--s-2h); border-radius: 999px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .8px;}
.badge-sage { background: var(--sage-110); color: var(--sage);}
:root { --orb-inhale-dur: 1.8s; --orb-exhale-dur: 1.5s; --orb-hold-dur: 4s; --orb-color: var(--sage); --orb-color-rgb: 125,211,232;}
@keyframes orb-inhale { from { transform: scale(0.80);}
to { transform: scale(1.12);}
}
@keyframes orb-exhale { from { transform: scale(1.12);}
to { transform: scale(0.80);}
}
.orb-inner.phase-INHALE { animation: orb-inhale var(--orb-inhale-dur, 4s) ease-in-out forwards;}
.orb-inner.phase-HOLD { animation: none; transform: scale(1.12);}
.orb-inner.phase-EXHALE { animation: orb-exhale var(--orb-exhale-dur, 8s) ease-in-out forwards;}
.state-target { position: relative; --state-radius: 0px;}
.state-target::after { content: ""; position: absolute; inset: 0; border-radius: var(--state-radius, 0px); background: rgb(var(--state-ink)); opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease-standard); z-index: var(--z-behind);}
@media (hover: hover) { .state-target:hover::after { opacity: var(--state-hover);}
}
.state-target:focus-visible::after { opacity: var(--state-focus);}
.state-target:active::after { opacity: var(--state-press);}
.state-target[data-dragging]::after { opacity: var(--state-drag);}
.state-target:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px;}
.state-target:disabled, .state-target.is-disabled { opacity: var(--state-disabled-content); cursor: not-allowed; pointer-events: none;}
.state-target:disabled::after, .state-target.is-disabled::after { opacity: 0;}
@media (prefers-reduced-motion: reduce) { .state-target::after { transition: none;}
}
.orb-stage { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center;}
@keyframes ring-inhale { from { transform: scale(.92); opacity: calc(var(--ring-opacity, .35) * .28);}
to { transform: scale(1.05); opacity: var(--ring-opacity, .35);}
}
@keyframes ring-exhale { from { transform: scale(1.05); opacity: var(--ring-opacity, .35);}
to { transform: scale(.92); opacity: calc(var(--ring-opacity, .35) * .28);}
}
.glow-ring { position: absolute; border-radius: 50%; border: 1px solid var(--orb-color); pointer-events: none; transition: border-color .5s ease; transform: scale(1); opacity: var(--ring-opacity, .35); will-change: transform, opacity;}
.glow-ring.r1 { width: 320px; height: 320px; --ring-opacity: .55;}
.glow-ring.r2 { width: 355px; height: 355px; --ring-opacity: .28;}
.glow-ring.r3 { width: 390px; height: 390px; --ring-opacity: .12;}
.orb-stage.phase-INHALE .glow-ring { animation: ring-inhale var(--orb-inhale-dur, 4s) ease-in-out forwards;}
.orb-stage.phase-EXHALE .glow-ring { animation: ring-exhale var(--orb-exhale-dur, 8s) ease-in-out forwards;}
.orb-stage.phase-HOLD .glow-ring { animation: none; transform: scale(1.05); opacity: var(--ring-opacity, .35);}
.orb-stage.phase-PUMP .glow-ring { animation: none; transform: scale(1); opacity: var(--ring-opacity, .35);}
.orb-inner.phase-INHALE.is-frozen, .orb-inner.phase-EXHALE.is-frozen, .orb-stage.phase-INHALE.is-frozen .glow-ring, .orb-stage.phase-EXHALE.is-frozen .glow-ring { animation-play-state: paused;}
.orb-inner { position: relative; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(14,24,36,.95) 60%, transparent 100%); box-shadow: 0 0 60px rgba(var(--orb-color-rgb), .18) inset, 0 0 40px rgba(var(--orb-color-rgb), .10); transition: box-shadow .5s ease;}
.orb-inner > #t-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; margin: 0; text-align: center; font-size: var(--fs-numeral-xl); font-weight: 400; line-height: var(--lh-numeral-xl); color: var(--white); letter-spacing: -2px;}
.orb-inner > #t-unit { position: absolute; top: calc(50% + 56px); left: 50%; transform: translateX(-50%); margin: 0; text-align: center; white-space: nowrap;}
.orb-inner > #t-hint { position: absolute; top: calc(50% + 84px); left: 50%; transform: translateX(-50%); margin: 0; text-align: center; white-space: nowrap;}
.orb-hint { font-size: var(--fs-micro); color: var(--orb-color); letter-spacing: 1.2px; min-height: 11px; transition: color var(--dur-page) ease;}
.timer-phase-label { margin: var(--s-5) 0 0; font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 600; letter-spacing: 6px; text-indent: 6px; text-transform: uppercase; line-height: 1; text-align: center; color: var(--orb-color); text-shadow: 0 0 18px rgba(var(--orb-color-rgb), .35); transition: color var(--dur-page) ease, text-shadow var(--dur-page) ease;}
.timer-progress .timer-phase-label { margin-top: 0;}
.timer-orb-area .timer-round { margin-top: var(--s-5);}
.timer-phase-label.is-protocol { font-size: var(--fs-md); letter-spacing: 2px; text-indent: 2px;}
.timer-screen .top-bar { position: relative;}
.timer-tech-caption { position: absolute; left: 50%; transform: translateX(-50%); max-width: 60%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); letter-spacing: 1.2px; text-transform: uppercase;}
.timer-progress { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s-1h) 0 0;}
.timer-round { font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 600;}
.round-pips { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);}
.round-pip { width: 16px; height: 5px; border-radius: var(--r-pill); background: var(--text-3); opacity: .3; transition: opacity var(--dur-state) var(--ease-out-soft), width var(--dur-state) var(--ease-out-soft), background-color var(--dur-state) var(--ease-out-soft);}
.round-pip--done { background: var(--amber); opacity: .55;}
.round-pip--active { background: var(--amber); opacity: 1; width: 26px;}
.round-pip--todo { background: var(--text-3); opacity: .3;}
.timer-orb-area { flex: 4;}
.timer-screen .orb-stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.timer-screen .timer-meta-row { position: absolute; bottom: calc(var(--safe-bottom, 0px) + var(--s-6) + 72px + var(--s-5)); left: 50%; top: auto; transform: translateX(-50%); margin: 0; display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 0;}
.timer-screen .timer-meta-row .timer-cycle-val, .timer-screen .timer-meta-row .timer-round { position: static; margin: 0; font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500; color: var(--text-2); letter-spacing: .2px;}
.timer-meta-row #t-breath:not(:empty) + #t-round::before { content: "·"; margin: 0 var(--s-2h); color: var(--text-3);}
.timer-meta-row #t-breath:empty { display: none;}
.timer-screen #t-playbtn { position: absolute; bottom: calc(var(--safe-bottom, 0px) + var(--s-6)); left: 50%; transform: translateX(-50%); will-change: transform;}
.timer-unit-label { font-size: var(--fs-micro); color: var(--text-3); letter-spacing: 1.5px; margin-top: var(--s-1h);}
.timer-cycle-lbl { font-size: var(--fs-micro); color: var(--text-3); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;}
.timer-cycle-val { font-weight: 500; color: var(--text); letter-spacing: .2px;}
.timer-play-btn { width: 72px; height: 72px; margin-top: var(--s-6); border-radius: 50%; background: var(--sage); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform var(--dur-tap) var(--ease-ios); -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;}
.timer-play-btn:active { transform: translateX(-50%) scale(.96);}
.wisdom-skip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--s-6) + 72px + var(--s-4)); padding: var(--s-2) var(--s-4); background: transparent; border: 0; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: color var(--dur-state) var(--ease-ios); -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.wisdom-skip:hover, .wisdom-skip:focus-visible { color: var(--text-2);}
.wisdom-skip:active { transform: translateX(-50%) scale(.96); opacity: .6;}
.wisdom-skip[hidden] { display: none;}
.timer-screen.is-wisdom #t-playbtn { bottom: calc(var(--safe-bottom, 0px) + var(--s-8));}
.timer-screen.is-wisdom .wisdom-skip { bottom: calc(var(--safe-bottom, 0px) + var(--s-5));}
.timer-play-btn svg { fill: var(--on-sage); pointer-events: none;}
.timer-play-btn .t-ico { display: flex; align-items: center; justify-content: center;}
.timer-play-btn .t-ico-play { display: none;}
.timer-play-btn.is-paused .t-ico-pause { display: none;}
.timer-play-btn.is-paused .t-ico-play { display: flex;}
.seg-ctrl { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r-pill);}
.seg-btn { flex: 1; padding: var(--s-1h) var(--s-3h); border-radius: var(--r-pill); border: 1px solid transparent; background: transparent; color: var(--text-3); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .5px; cursor: pointer; transition: color var(--dur-state) var(--ease-ios), background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios);}
.seg-btn:hover:not(.is-selected) { color: var(--text-2);}
.seg-btn:active:not(.is-selected) { transform: scale(.96); transition: transform var(--dur-tap) var(--ease-ios);}
.seg-btn.is-selected { background: rgba(125, 211, 232, 0.18); color: var(--sage); border-color: var(--sage); font-weight: 700;}
.theme-seg .seg-btn.is-selected { background: var(--sage); color: var(--on-sage);}
.section-tabs { display: flex; gap: var(--s-6); padding: 0 var(--s-1); margin-bottom: var(--s-4h); border-bottom: 1px solid var(--border); flex-shrink: 0;}
.section-tab { padding: var(--s-2h) 0 var(--s-3); letter-spacing: .1px;}
.section-tab.active { color: var(--text);}
.section-tab.active::after { bottom: -1px;}
.stat-row { display: flex; align-items: stretch; gap: 1px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: var(--s-4h) 0;}
.stat-col { flex: 1; background: var(--surface-soft); padding: var(--s-4) var(--s-2h); display: flex; flex-direction: column; align-items: center; gap: var(--s-1);}
.stat-val { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.5px; line-height: 1;}
.stat-val-time { display: inline-flex; align-items: baseline; justify-content: center; white-space: nowrap; line-height: 1; letter-spacing: -.5px;}
.stat-val-num { font-family: var(--font-display); font-weight: 500; letter-spacing: -.5px; line-height: 1; color: inherit;}
.stat-val-unit { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; margin-left: 2px; color: var(--text-2); line-height: 1;}
.stat-val-num-sec { margin-left: var(--s-1h);}
.stat-lbl { font-size: var(--fs-micro); color: var(--text-3); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;}
.tech-item { display: flex; align-items: center; gap: var(--s-4); padding: var(--row-pad-y) 0; background: transparent; border: 0; border-radius: 0; margin-bottom: 0; cursor: pointer; transition: all var(--dur-state) var(--ease-ios);}
.tech-icon-wrap { width: 48px; height: 48px; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; border: none; color: var(--tint, var(--sage));}
.tech-icon-wrap svg { width: 28px; height: 28px; stroke-width: 1.7; fill: none; color: var(--tint, var(--sage)); filter: drop-shadow(0 0 8px rgba(var(--tint-rgb, 125,211,232), .5));}
:root[data-theme="light"] .tech-icon-wrap { background: color-mix(in srgb, var(--tint, var(--sage)) 15%, transparent); border: 1.5px solid color-mix(in srgb, var(--tint, var(--sage)) 62%, transparent);}
:root[data-theme="light"] .tech-icon-wrap svg { filter: none;}
.tech-info { flex: 1; min-width: 0;}
.tech-name { margin-bottom: var(--s-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tech-sub { color: var(--text-2);}
.tech-list { display: flex; flex-direction: column; gap: var(--s-3); background: transparent; border: 0; border-radius: 0; padding: 0;}
.section-label-row--lib { margin-top: var(--s-3); margin-bottom: var(--s-4h);}
.tech-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3h) var(--s-4); border-radius: var(--r-lg2); background: linear-gradient(135deg, rgba(var(--tint-rgb, 125,211,232), .16), var(--card-1) 58%); border: 1px solid rgba(var(--tint-rgb, 125,211,232), .26); cursor: pointer; transition: background var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.tech-row:hover { background: linear-gradient(135deg, rgba(var(--tint-rgb, 125,211,232), .24), var(--card-1) 54%);}
.tech-row:active { transform: scale(.99);}
.tech-list .tech-row .tech-icon-wrap { position: relative; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tint, var(--sage)) 20%, transparent) 0%, transparent 72%); border: 1px solid color-mix(in srgb, var(--tint, var(--sage)) 40%, transparent);}
.tech-list .tech-row .tech-icon-wrap svg { width: 25px; height: 25px;}
:root[data-theme="light"] .tech-list .tech-row .tech-icon-wrap { background: color-mix(in srgb, var(--tint, var(--sage)) 15%, transparent); border: 1.5px solid color-mix(in srgb, var(--tint, var(--sage)) 62%, transparent);}
:root[data-theme="light"] .tech-list .tech-row .tech-icon-wrap svg { filter: none;}
.tech-play { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tint, var(--sage)); border: 1px solid rgba(var(--tint-rgb, 125,211,232), .34); background: rgba(var(--tint-rgb, 125,211,232), .08); pointer-events: none;}
.tech-play svg { width: 13px; height: 13px; fill: currentColor;}
.lib-recent-item.tech-item { padding: var(--s-3h) var(--s-4); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(var(--tint-rgb, 125,211,232), .16), var(--card-1) 58%); border: 1px solid rgba(var(--tint-rgb, 125,211,232), .26);}
.lib-recent-item .tech-icon-wrap { position: relative; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--tint-rgb, 125,211,232), .20) 0%, transparent 72%); border: 1px solid rgba(var(--tint-rgb, 125,211,232), .40);}
.lib-recent-item .tech-icon-wrap svg { width: 25px; height: 25px;}
.scroll-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 max(var(--gutter), var(--safe-right)) calc(var(--nav-h) + var(--s-5) + var(--safe-bottom)) max(var(--gutter), var(--safe-left)); scrollbar-width: none;}
.scroll-content::-webkit-scrollbar { display: none;}
.scroll-content--pad-sm { padding-top: var(--s-1);}
.scroll-content--pad-md { padding-top: var(--s-2);}
.scroll-content--pad-lg { padding-top: calc(var(--safe-top, 0px) + var(--s-5));}
.scroll-content--no-nav { padding-bottom: calc(var(--s-4) + var(--safe-bottom));}
.session-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-6); padding: 0 max(16px, var(--safe-right)) calc(38px + var(--safe-bottom)) max(16px, var(--safe-left)); flex-shrink: 0;}
.hold-time-display { font-family: var(--font-body) !important; font-size: var(--fs-numeral-xl); font-weight: 300; letter-spacing: -1.5px; color: var(--white); font-variant-numeric: tabular-nums; font-style: normal !important; line-height: 1;}
.countdown-numeral { font-family: var(--font-body) !important; font-style: normal !important; font-variant-numeric: tabular-nums !important; font-feature-settings: 'tnum' 1;}
.search-bar { position: relative; margin-bottom: var(--s-4h);}
.search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-3); cursor: pointer; padding: var(--s-2); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;}
.search-clear-icon { width: 14px; height: 14px; display: inline-flex;}
.lib-recent-item { margin-bottom: var(--s-4h);}
.lib-empty { padding: var(--s-6) 0;}
.tech-row.is-locked { opacity: .5;}
.tech-row.is-locked .tech-sub { color: var(--amber);}
.pill-outline { padding: var(--s-2) var(--s-3h); border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; background: transparent; border: 1px solid var(--border-warm); color: var(--text);}
.lib-bottom-spacer { height: 0;}
.post-card { padding: var(--s-3h) var(--s-4); margin-bottom: var(--s-2h); transition: background var(--dur-state), border-color var(--dur-state);}
.post-card:hover { background: var(--white-mist); border-color: var(--white-line);}
.post-header { display: flex; align-items: center; gap: var(--s-2h); margin-bottom: var(--s-2);}
.avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 700; color: var(--bg-0); background: linear-gradient(135deg, var(--sage), var(--sage-400)); letter-spacing: .3px;}
.post-meta { flex: 1; min-width: 0;}
.post-byline { display: flex; align-items: baseline; gap: var(--s-1h); line-height: 1.3;}
.post-username { font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;}
.post-time { font-size: var(--fs-label); color: var(--text-3); flex-shrink: 0; font-weight: 400;}
.post-time::before { content: '·'; margin-right: var(--s-1h); color: var(--text-3); opacity: .6;}
.post-body { color: var(--text-2); line-height: 1.55; margin-bottom: var(--s-2h);}
.post-actions { display: flex; gap: var(--s-4h);}
.post-action { display: flex; align-items: center; gap: var(--s-1h); font-size: var(--fs-caption); color: var(--text-3); cursor: pointer; transition: color var(--dur-state); border: none; background: none; padding: 0; font-family: var(--font-body);}
.post-action:hover, .post-action.liked { color: var(--sage);}
.comm-preview-note { display: flex; align-items: center; gap: var(--s-2h); margin-bottom: var(--s-4); padding: var(--s-2h) var(--s-3h); border-radius: var(--r-lg); background: var(--white-wash); border: 1px dashed var(--white-edge); color: var(--text-3); line-height: 1.4;}
.comm-preview-note svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-2);}
.comm-preview-note span { flex: 1; min-width: 0;}
.comm-preview-note b { color: var(--text-2); font-weight: 600;}
.comm-preview-dismiss { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-3); border-radius: var(--r-circle); cursor: pointer; transition: color var(--dur-state) var(--ease-ios);}
.comm-preview-dismiss:hover { color: var(--text-2);}
.comm-preview-dismiss svg { width: 14px; height: 14px; color: inherit; flex-shrink: 0;}
.live-rail-header { margin-bottom: var(--s-2h);}
.live-rail-title { display: inline-flex; align-items: center; gap: var(--s-1h); color: var(--text-2); margin: 0;}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); position: relative; flex-shrink: 0;}
.live-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: var(--sage); opacity: .35; animation: livePulse 1.8s ease-out infinite;}
@keyframes livePulse { 0% { transform: scale(.7); opacity: .45;}
70% { transform: scale(1.9); opacity: 0;}
100% { transform: scale(1.9); opacity: 0;}
}
.live-rail-count { font-size: var(--fs-mini); color: var(--text-3); font-weight: 500; letter-spacing: .3px;}
.live-rail { display: flex; gap: var(--s-4h); overflow-x: auto; padding: var(--s-1h) var(--s-5) var(--s-1h) var(--s-4h); scroll-padding: 0 var(--s-4h); margin: 0 calc(-1 * var(--gutter)) var(--s-4h); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--s-6)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--s-6)), transparent);}
.live-rail::-webkit-scrollbar { display: none;}
.live-rail { scrollbar-width: none;}
.live-chip { flex-shrink: 0; width: 56px; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); scroll-snap-align: start; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body);}
.live-avatar-wrap { position: relative; width: 48px; height: 48px;}
@keyframes liveHaloPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--sage-170), 0 0 6px var(--sage-130);}
50% { box-shadow: 0 0 0 1px var(--sage-glow), 0 0 10px var(--sage-170);}
}
.live-chip .avatar { width: 48px; height: 48px; font-size: var(--fs-body); font-weight: 700; color: var(--bg-0); background: var(--sage); box-shadow: 0 0 0 1px var(--white-mist);}
.live-chip.is-active .avatar { animation: liveHaloPulse 3s ease-in-out infinite;}
.live-chip-name { font-weight: 600; color: var(--text); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .1px;}
.live-chip-tech { font-size: var(--fs-mini); font-weight: 500; color: var(--text-3); letter-spacing: .2px; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@media (prefers-reduced-motion: reduce) { .live-chip.is-active .avatar { animation: none;}
.live-dot::after { animation: none; opacity: .3;}
}
.m-filter-rail { display: flex; gap: var(--s-2); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-left: var(--s-5); margin: 0 calc(-1 * var(--gutter)) var(--s-4h); padding: 0 var(--s-5) var(--s-1) var(--s-5); max-width: 100vw; min-width: 0; -webkit-mask-image: linear-gradient( to right, transparent 0, #000 var(--s-5), #000 calc(100% - var(--s-5)), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 var(--s-5), #000 calc(100% - var(--s-5)), transparent 100% );}
.m-filter-rail::-webkit-scrollbar { display: none;}
.m-filter-rail { scrollbar-width: none;}
.scroll-content:has(> .search-bar .search-input:focus) > .m-filter-rail, .scroll-content:has(> .search-bar .search-input:not(:placeholder-shown)) > .m-filter-rail { display: none;}
.m-amb-chip { flex-shrink: 0; scroll-snap-align: start; display: inline-flex; align-items: center; gap: var(--s-1h); padding: var(--s-2) var(--s-3h); border-radius: var(--r-md); font-weight: 500; letter-spacing: .2px; white-space: nowrap; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios), box-shadow var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.m-amb-chip:hover { border-color: var(--white-line-2); color: var(--text-2);}
.m-amb-chip svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.6; fill: none; flex-shrink: 0;}
.m-amb-chip.on { background: var(--sage-soft); border-color: var(--sage); color: var(--sage); font-weight: 600; box-shadow: 0 0 18px var(--sage-130);}
.m-amb-chip.on:hover { border-color: var(--sage); background: var(--sage-110); color: var(--sage);}
.community-filter-rail .m-amb-chip { border: 1px solid var(--border); color: var(--text-2); padding: var(--s-1h) var(--s-3);}
.community-filter-rail .m-amb-chip.on { border-color: var(--sage);}
.section-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3h);}
.section-label-row .section-label { margin-bottom: 0;}
.session-card { background: var(--sage-soft); border: 1px solid var(--border-warm); border-radius: var(--r-lg); padding: var(--s-3) var(--s-3h); margin-bottom: var(--s-2h);}
.session-card-head { display: flex; align-items: center; gap: var(--s-2h); margin-bottom: var(--s-2h);}
.comm-tabs-wrap { padding: var(--s-3h) var(--s-5) 0; flex-shrink: 0;}
.comm-compose-inline { display: flex; align-items: center; gap: var(--s-2h); width: 100%; padding: var(--s-2h) var(--s-3); margin-bottom: var(--s-4); background: var(--flat-card); border: 1px solid var(--border); border-radius: var(--r-lg); font-family: var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--dur-state) var(--ease-ios), background var(--dur-state) var(--ease-ios);}
.comm-compose-inline:hover { border-color: var(--white-line-2);}
.comm-compose-inline-prompt { flex: 1; color: var(--text-3); font-weight: 500; letter-spacing: .1px;}
.comm-compose-inline-icon { color: var(--text-3); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0;}
.session-card-titlecol { min-width: 0; flex: 1;}
.post-you-tag { font-size: var(--fs-mini); color: var(--sage); font-weight: 500;}
.post-action-ico { width: 15px; height: 15px;}
.session-card-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--sage-soft); display: flex; align-items: center; justify-content: center; color: var(--sage); flex-shrink: 0;}
.session-card-icon svg { width: 16px; height: 16px;}
.session-card-title { font-weight: 600; color: var(--white); line-height: 1.2;}
.session-card-sub { font-size: var(--fs-mini); color: var(--text-3); margin-top: 2px; letter-spacing: .3px;}
.session-card-stats { display: flex; align-items: baseline; gap: var(--s-4); padding-top: 2px;}
.session-stat-flat { display: inline-flex; align-items: baseline; gap: var(--s-1); font-family: var(--font-display); font-variant-numeric: tabular-nums; line-height: 1; min-width: 0;}
.session-stat-flat-val { font-weight: 600; color: var(--text); letter-spacing: -.2px;}
.session-stat-flat-lbl { font-size: var(--fs-mini); font-weight: 500; color: var(--text-3); letter-spacing: .3px; text-transform: lowercase;}
.session-stat-flat-hold { margin-left: auto; gap: var(--s-1h);}
.session-stat-flat-hold .session-stat-flat-lbl { font-size: var(--fs-micro); letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-3);}
.session-stat-flat-hold .session-stat-flat-val { color: var(--amber); font-size: var(--fs-md); font-weight: 600; letter-spacing: -.3px;}
.lb-rank { font-size: var(--fs-caption); font-weight: 600; color: var(--text-3); width: 24px; text-align: center;}
.lb-rank.gold { color: var(--medal-gold);}
.lb-rank.silver { color: var(--medal-silver);}
.lb-rank.bronze { color: var(--medal-bronze);}
.comm-invite-card { background: transparent; border: 0; border-radius: 0; padding: var(--s-4) 0; margin-bottom: var(--s-4h); display: flex; align-items: center; gap: var(--s-3h);}
.comm-invite-icon { width: 42px; height: 42px; border-radius: var(--r-circle); background: var(--sage-glow); display: flex; align-items: center; justify-content: center; color: var(--sage);}
.comm-invite-text, .comm-friend-id { flex: 1;}
.comm-invite-title { font-weight: 600; margin-bottom: 2px;}
.comm-invite-sub { color: var(--text-2);}
.comm-invite-btn { background: var(--sage); color: var(--on-sage); border: none; border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); font-size: var(--fs-label); font-weight: 700; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-body);}
.comm-conn-count { color: var(--text-3); font-weight: 400; font-size: var(--fs-mini); margin-left: var(--s-1);}
.comm-empty { padding: var(--s-6) 0;}
.comm-friend-row { border-radius: var(--radius); padding: var(--s-3h) var(--s-4); margin-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-3); transition: border-color var(--dur-state);}
.comm-suggested-row { border-radius: var(--radius); padding: var(--s-3h) var(--s-4); margin-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-3);}
.comm-avatar { width: 42px; height: 42px;}
.comm-friend-name { font-weight: 600;}
.comm-friend-meta { font-size: var(--fs-label); color: var(--text-3); display: flex; align-items: center; gap: var(--s-1h); margin-top: 2px;}
.comm-friend-streak { display: inline-flex; align-items: center; gap: 3px; color: var(--amber);}
.comm-flame-icon { width: 11px; height: 11px; display: flex;}
.comm-friend-xp { font-size: var(--fs-label); color: var(--sage); font-weight: 500; margin-top: 2px;}
.comm-suggested-meta { font-size: var(--fs-label); display: inline-flex; align-items: center; gap: var(--s-1); margin-top: 2px; color: var(--amber);}
.comm-subsection-label { margin-top: var(--s-3h);}
.comm-pill { border-radius: var(--r-pill); padding: var(--s-2) var(--s-3h); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .5px; cursor: pointer;}
.comm-pill--fill { background: var(--sage); color: var(--on-sage); border: none; font-weight: 700;}
.comm-streak-card { background: transparent; border: 0; border-radius: 0; padding: var(--s-4) 0; margin-bottom: var(--s-4h);}
.comm-streak-head { margin-bottom: var(--s-1h);}
.comm-streak-kicker { color: var(--sage);}
.comm-streak-days { color: var(--amber); display: inline-flex; align-items: center; gap: var(--s-1h);}
.comm-streak-headline { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; margin-bottom: var(--s-3);}
.comm-streak-caption { font-size: var(--fs-label); color: var(--text-3); margin-top: var(--s-2);}
.comm-stat-icon { width: 12px; height: 12px; display: flex;}
.comm-challenge-card { margin-bottom: var(--s-2h); padding: var(--s-4) var(--s-4h);}
.comm-challenge-head { display: flex; align-items: flex-start; gap: var(--s-3h); margin-bottom: var(--s-3);}
.comm-challenge-icon { width: 44px; height: 44px; border-radius: var(--r-circle); background: var(--sage-soft); display: flex; align-items: center; justify-content: center; color: var(--sage); flex-shrink: 0;}
.comm-challenge-body { flex: 1;}
.comm-challenge-titlerow { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2);}
.comm-challenge-title { font-weight: 600;}
.comm-challenge-desc { color: var(--text-2); margin-top: 3px; line-height: 1.5;}
.comm-challenge-foot { display: flex; justify-content: space-between; align-items: center;}
.comm-challenge-stat { font-size: var(--fs-label); color: var(--text-3); display: inline-flex; align-items: center; gap: var(--s-1h);}
.comm-stat-dot { margin: 0 var(--s-1);}
.comm-join-btn { padding: var(--s-2) var(--s-4);}
.comm-challenge-progress-label { font-size: var(--fs-label); color: var(--text-3); margin-top: var(--s-1h);}
.onboard-wrap { flex: 1; display: flex; flex-direction: column; padding: var(--safe-top) max(var(--s-6), var(--safe-right)) calc(var(--s-5) + var(--safe-bottom)) max(var(--s-6), var(--safe-left));}
.onboard-wrap--lead { justify-content: flex-start; padding-top: calc(var(--safe-top) + var(--s-5));}
.onboard-wrap--welcome { justify-content: center; align-items: center; text-align: center;}
.onboard-welcome-logo { margin-bottom: var(--s-4);}
.onboard-welcome-eyebrow { color: var(--sage); margin-bottom: var(--s-2h);}
.onboard-welcome-title { margin-bottom: var(--s-3);}
.onboard-welcome-sub { max-width: 340px; margin-left: auto; margin-right: auto;}
.onboard-body { margin-bottom: var(--s-5);}
.onboard-cta { width: 100%; margin-top: var(--s-3);}
.onboard-cta.is-disabled { opacity: .4; pointer-events: none;}
.onboard-skip-btn { width: 100%; margin-top: var(--s-2); padding: var(--s-3); background: none; border: none; color: var(--text-3); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500; letter-spacing: .2px; cursor: pointer;}
.onboard-skip-btn:hover { color: var(--text-2);}
.goal-card { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-4h) 0; margin: 0; cursor: pointer; transition: background var(--dur-state) var(--ease-ios);}
.goal-card + .goal-card { border-top: 1px solid var(--border);}
.goal-card:hover { background: var(--white-mist);}
.goal-card.selected .goal-title { color: var(--sage);}
.goal-info { flex: 1;}
.goal-title { line-height: 1.2; font-weight: 600; margin-bottom: 2px; letter-spacing: -.1px;}
.goal-check { width: 22px; height: 22px; border-radius: var(--r-xs); border: 1.5px solid var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-state) var(--ease-ios);}
.goal-check.checked { border-color: var(--sage); background: var(--sage);}
.goal-check.checked svg { width: 12px; height: 12px; stroke: var(--on-sage); stroke-width: 3; fill: none;}
@keyframes checkPop { from { transform: scale(.7); opacity: 0;}
to { transform: scale(1); opacity: 1;}
}
.check-circle { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, var(--sage-170), rgba(11,19,28,.85)); border: 1.5px solid var(--sage); display: flex; align-items: center; justify-content: center; margin: 0 auto; animation: checkPop var(--dur-page) var(--ease-out-soft) both; box-shadow: 0 0 40px var(--sage-290);}
.achieve-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.achieve-icon svg { width: 18px; height: 18px; stroke-width: 1.6; fill: none;}
.achieve-icon.earned { background: radial-gradient(circle at 50% 40%, var(--tier-glow, var(--sage-170)) 0%, rgba(20,32,46,.5) 70%); border: 1px solid var(--tier-c, var(--border-warm)); color: var(--tier-c, var(--sage));}
.achieve-icon.earned svg { stroke: currentColor;}
.achieve-icon.locked { background: rgba(20,32,46,.18); border: 1px dashed #5E6C84;}
.achieve-icon.locked svg { stroke: var(--text-2); opacity: .5;}
.achieve-name { text-align: center; line-height: 1.25; font-weight: 500; color: var(--text-2);}
.achieve-name.is-earned { color: var(--text-2);}
.achieve-name.is-locked { color: #94A3B8;}
.achieve-name.is-ghost { opacity: .8;}
.shelf { position: relative; margin-bottom: var(--s-5);}
.shelf-head { margin-bottom: var(--s-4);}
.shelf-title { font-weight: 400; letter-spacing: .1px; color: var(--text);}
.shelf-track-wrap { position: relative;}
.shelf-track { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0 var(--s-1);}
.shelf-track::-webkit-scrollbar { display: none;}
.shelf-cell { flex: 0 0 calc((100% - 36px) / 4); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); min-width: 0;}
.shelf-arrow { position: absolute; top: 24px; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--white-line); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); z-index: 2; transition: opacity var(--dur-state), transform var(--dur-state), border-color var(--dur-state), color var(--dur-state);}
.shelf-arrow:hover { border-color: var(--sage); color: var(--sage);}
.shelf-arrow:active { transform: translateY(-50%) scale(.92);}
.shelf-arrow.disabled { opacity: 0; pointer-events: none;}
.shelf-arrow svg { width: 16px; height: 16px; stroke-width: 2; fill: none;}
.shelf-arrow.left { left: -10px;}
.shelf-arrow.right { right: -10px;}
.shelf-arrow::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px;}
.ghost { opacity: .92; transition: opacity var(--dur-card) ease, transform var(--dur-state) ease;}
.ghost:hover { opacity: 1; transform: translateY(-2px);}
.ghost:hover .achieve-icon.locked svg { opacity: .3;}
.shelf-empty { font-size: var(--fs-label); color: var(--text-3); padding: var(--s-4) 0; text-align: center;}
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 4px;}
button:focus-visible, [role="button"]:focus-visible, a:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; box-shadow: 0 0 0 4px var(--sage-soft);}
.btn-primary:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; box-shadow: 0 0 0 5px var(--sage-soft), 0 0 30px var(--sage-210);}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; box-shadow: 0 0 0 3px var(--sage-soft);}
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.tech-item:active { transform: scale(.99); transition: transform var(--dur-tap) var(--ease-ios);}
.goal-card:active { transform: scale(.99); transition: transform var(--dur-tap) var(--ease-ios);}
.icon-btn:active { transform: scale(.92); transition: transform var(--dur-tap) var(--ease-ios);}
@keyframes skeleton-pulse { 0%, 100% { opacity: .35;}
50% { opacity: .75;}
}
@keyframes hapticRipple { 0% { transform: scale(1); opacity: .6;}
60% { transform: scale(1.2); opacity: .1;}
100% { transform: scale(1.3); opacity: 0;}
}
@keyframes phaseFlash { 0% { opacity: .7;}
100% { opacity: 0;}
}
.phase-flash { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--sage-210), transparent 70%); pointer-events: none; animation: phaseFlash .55s ease-out forwards;}
.shelf-cell { position: relative;}
.shelf-cell.ghost::after { content: attr(data-hint); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(8,14,22,.96); border: 1px solid var(--border-warm); border-radius: var(--r-sm); padding: var(--s-1h) var(--s-2h); font-size: var(--fs-mini); color: var(--text-2); white-space: normal; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity var(--dur-state); z-index: var(--z-raised); text-align: center; width: 110px;}
.shelf-cell.ghost:hover::after { opacity: 1;}
.search-input:focus { border-color: var(--border-warm); box-shadow: 0 0 0 3px var(--sage-soft); background: var(--sage-wash);}
.nav-item { position: relative; overflow: hidden;}
.nav-item::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--sage-170) 0%, transparent 70%); opacity: 0; border-radius: var(--r-md); transition: opacity var(--dur-tap);}
.nav-item:active::after { opacity: 1;}
.achieve-icon.earned { box-shadow: 0 0 0 1px var(--tier-c, var(--sage-glow-45)), 0 2px 10px -2px var(--tier-glow, var(--sage-210)); transition: box-shadow var(--dur-state) ease, transform var(--dur-state) ease;}
.achieve-icon.earned:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--tier-c, var(--sage-glow-peak)), 0 4px 16px -2px var(--tier-glow, var(--sage-glow-40));}
@keyframes revealUp { from { opacity: 0; transform: translateY(10px);}
to { opacity: 1; transform: translateY(0);}
}
.shelf { animation: revealUp var(--dur-card) var(--ease-standard) both;}
.shelf:nth-child(1) { animation-delay: 0ms;}
.shelf:nth-child(2) { animation-delay: 70ms;}
.shelf:nth-child(3) { animation-delay: 140ms;}
@keyframes orbGlowInhale { from { filter: drop-shadow(0 0 8px rgba(var(--orb-color-rgb), .2));}
to { filter: drop-shadow(0 0 24px rgba(var(--orb-color-rgb), .6));}
}
@keyframes orbGlowExhale { from { filter: drop-shadow(0 0 24px rgba(var(--orb-color-rgb), .6));}
to { filter: drop-shadow(0 0 8px rgba(var(--orb-color-rgb), .2));}
}
.orb-inner.phase-INHALE { animation: orb-inhale var(--orb-inhale-dur, 4s) ease-in-out forwards, orbGlowInhale var(--orb-inhale-dur, 4s) ease-in-out forwards;}
.orb-inner.phase-EXHALE { animation: orb-exhale var(--orb-exhale-dur, 8s) ease-in-out forwards, orbGlowExhale var(--orb-exhale-dur, 8s) ease-in-out forwards;}
.orb-inner.phase-PUMP { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(var(--orb-color-rgb), .42));}
@keyframes shimmer { from { background-position: -200% center;}
to { background-position: 200% center;}
}
.progress-bar-fill { background: linear-gradient(90deg, var(--sage-400) 0%, var(--sage) 38%, var(--white-strong-2) 50%, var(--sage) 62%, var(--sage-400) 100%); background-size: 200% auto; animation: shimmer 3.5s linear infinite; transition: width .6s var(--ease-standard);}
.u-spacer { flex: 1;}
.u-screen-flush { padding: 0;}
.u-mb-12 { margin-bottom: var(--s-3);}
.u-pe-none { pointer-events: none;}
.u-text-right { text-align: right;}
.u-clickable { cursor: pointer;}
.u-noshrink { flex-shrink: 0;}
.u-amber { color: var(--amber);}
.u-mb-22 { margin-bottom: var(--s-5);}
.u-ico-14 { width: 14px; height: 14px; display: inline-flex;}
.u-flex-center { display: flex; align-items: center; gap: var(--s-2);}
.u-vspace-10 { height: var(--s-2h);}
.u-vspace-14 { height: var(--s-3h);}
.u-vspace-18 { height: var(--s-4h);}
.u-vspace-24 { height: 24px;}
.search-input { width: 100%; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--s-4) + var(--s-3h)); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--text); outline: none; transition: var(--dur-state); font-size: var(--fs-md);}
.search-input:focus { border-color: var(--border-warm);}
.search-input::placeholder { color: var(--text-3);}
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--text-3); fill: none; stroke-width: 1.8;}
.h1-display { font-family: var(--font-body); font-weight: 700; font-style: normal;}
.h1-display .accent { font-style: normal; color: var(--sage);}
NEVER a button. Per the one-accent rule, warm peach (--amber) carries status meaning only — it must never be tappable. This rule hardens that contract: no pointer cursor, no hover lift, no user-select shimmer. If a future surface needs a tappable streak control { display: flex; align-items: center; gap: var(--s-2); background: rgba(212,165,116,.1); border: 1px solid rgba(212,165,116,.22); border-radius: 999px; padding: var(--s-2) var(--s-3h); width: fit-content; cursor: default; user-select: none;}
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--sage);}
50% { opacity: .55; box-shadow: 0 0 10px var(--sage);}
}
@keyframes heartPop { from { transform: scale(.88);}
to { transform: scale(1);}
}
.tech-modal-overlay { position: absolute; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; justify-content: flex-end; animation: overlayIn var(--dur-state) var(--ease-ios);}
@keyframes overlayIn { from { opacity: 0;}
to { opacity: 1;}
}
@keyframes sheetUp { from { transform: translateY(100%);}
to { transform: translateY(0);}
}
@keyframes sheetDown { from { transform: translateY(0);}
to { transform: translateY(100%);}
}
.sheet-title { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.3px; line-height: 1.15; color: var(--text); margin: 0;}
.sheet-title--center { flex: 1; text-align: center;}
.sheet-row { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-3h) var(--s-4); min-height: 56px;}
.sound-row-tail { display: flex; align-items: center; gap: var(--s-2h); flex-shrink: 0;}
.sound-row-chev { display: inline-flex; width: var(--icon-sm); height: var(--icon-sm); color: var(--text-3); flex-shrink: 0;}
.sound-row-chev svg { width: 100%; height: 100%;}
.sound-row-split { width: 1px; height: var(--s-5); background: var(--border); flex-shrink: 0;}
.row-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.row-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; fill: none;}
.sheet-scrim { background: rgba(6, 14, 26, 0.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);}
.tech-modal-sheet { background: var(--grad-sheet); border-top: 1px solid var(--white-veil); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 0 0 calc(28px + var(--safe-bottom)); animation: sheetUp var(--dur-card) var(--ease-ios); position: relative; overflow: hidden; will-change: transform; max-height: calc(100dvh - var(--safe-top) - 8px);}
.tech-modal-sheet::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sage-290), transparent);}
.modal-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--white-edge); margin: var(--s-3h) auto 0; position: relative;}
.modal-handle::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: -20px; width: 88px; height: 44px;}
.modal-header { display: flex; align-items: flex-start; gap: var(--s-3h); padding: var(--s-4h) var(--s-5) var(--s-4h);}
.modal-icon-wrap { width: 52px; height: 52px; border-radius: var(--r-lg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--tint, var(--sage));}
.modal-icon-wrap svg { width: 38px; height: 38px; stroke-width: 1.6; fill: none; filter: drop-shadow(0 0 9px rgba(var(--tint-rgb, 125,211,232), .5));}
.phase-steps { display: flex; flex-direction: column;}
.phase-step { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-2h) 0;}
.phase-step:first-child { padding-top: 0;}
.phase-step + .phase-step { border-top: 1px solid var(--border);}
.phase-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; font-family: var(--font-body);}
.phase-label { font-weight: 500; letter-spacing: .1px; margin-bottom: 1px;}
.phase-sub { font-size: var(--fs-label); color: var(--text-2);}
.phase-dur { margin-left: auto; flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.3px; line-height: 1;}
.phase-dur-unit { font-size: var(--fs-mini); color: var(--text-3); font-family: var(--font-body); font-weight: 500; letter-spacing: .5px;}
.phase-step .u-text-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; min-width: 3ch;}
.phase-steps-loop { color: var(--text-3); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border); text-align: center; letter-spacing: .2px;}
.benefit-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1h);}
.benefit-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; padding: var(--s-1) var(--s-2h); border-radius: 999px; background: var(--sage-soft); border: 1px solid var(--sage-130); font-size: var(--fs-mini); font-weight: 600; color: var(--text-2); letter-spacing: .5px;}
.benefit-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ps-tog { width: 40px; height: 24px; border-radius: 999px; background: var(--white-grip); border: none; position: relative; cursor: pointer; padding: 0; flex-shrink: 0; transition: background var(--dur-state);}
.ps-tog::before { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%);}
.ps-tog.on { background: var(--sage);}
.ps-tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--toggle-off-knob); transition: left var(--dur-state), transform var(--dur-tap), background var(--dur-state); box-shadow: var(--elev-1);}
.ps-tog.on::after { left: 19px; background: var(--white);}
.ps-tog:active::after { transform: scale(.92);}
.modal-row.is-disabled .modal-row-icon, .modal-row.is-disabled .modal-row-sub, .modal-row.is-disabled .ps-tog { opacity: .32;}
.modal-row.is-disabled .modal-row-title { color: var(--text-3);}
.modal-row.is-disabled .ps-tog { cursor: not-allowed;}
.settings-row { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-3h) var(--s-4); min-height: 56px; transition: background var(--dur-state) var(--ease-ios);}
.settings-row + .settings-row { border-top: 1px solid var(--white-mist);}
.settings-row.state-target { --state-ink: 255,255,255; --state-hover: 0.06; --state-radius: 0px; cursor: pointer;}
.settings-row-icon { width: 48px; height: 48px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--sage);}
.settings-row--danger .settings-row-icon, .settings-row--danger .settings-row-label { color: var(--rose);}
.settings-row-chev { display: inline-flex; align-items: center; color: var(--text-3);}
.settings-row-chev svg { width: 18px; height: 18px;}
.settings-row-icon svg { width: 24px; height: 24px; stroke-width: 1.7; fill: none;}
.settings-row-body { flex: 1; min-width: 0;}
.settings-row-sub { margin-top: 2px; color: var(--text-2);}
.settings-row-trail { display: flex; align-items: center; flex-shrink: 0; color: var(--text-3);}
.lang-list { border-top: 1px solid var(--border); max-height: 280px; overflow-y: auto; scrollbar-width: thin;}
.lang-list::-webkit-scrollbar { width: 4px;}
.lang-list::-webkit-scrollbar-thumb { background: var(--border-warm); border-radius: 4px;}
.lang-option { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-8); background: transparent; border: none; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--dur-state); font-family: var(--font-body); text-align: left;}
.lang-option:last-child { border-bottom: none;}
.lang-option:hover { background: var(--sage-tint);}
.lang-option.active .lang-option-label { color: var(--sage);}
.lang-option-label { font-weight: 500; color: var(--text);}
.lang-option-native { font-size: var(--fs-label); color: var(--text-2);}
.tune-voice-caret { display: inline-flex; width: var(--icon-sm); height: var(--icon-sm); margin-left: var(--s-2h); color: var(--text-3); flex-shrink: 0; transition: transform var(--dur-state) var(--ease-ios);}
.tune-voice-caret svg { width: 100%; height: 100%;}
#tune-voice-head[aria-expanded="true"] .tune-voice-caret { transform: rotate(180deg);}
.m-set-list { background: var(--surface-soft); border: 1px solid var(--white-mist); border-radius: var(--r-lg); overflow: hidden;}
.m-set-list > * + * { border-top: 1px solid var(--white-mist);}
.m-set-list .reminder-row { background: transparent; border-radius: 0;}
.m-set-list .reminder-row.state-target { --state-ink: 255,255,255; --state-hover: 0.06; --state-radius: 0px;}
.m-set-list .reminder-row-wrap { border-radius: 0;}
.reminders-active-list .reminder-row-wrap:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px;}
.reminders-active-list .reminder-row-wrap:first-child .reminder-row { border-top-left-radius: 14px; border-top-right-radius: 14px;}
.reminders-active-list .reminder-row-wrap:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;}
.reminders-active-list .reminder-row-wrap:last-child .reminder-row { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;}
.reminder-row-wrap { position: relative; overflow: hidden; background: transparent;}
.reminder-row-wrap + .reminder-row-wrap { border-top: 1px solid var(--white-mist);}
.reminder-row { cursor: pointer; transition: background var(--dur-state) ease, transform var(--dur-state) var(--ease-ios); position: relative; background: transparent; z-index: 1; touch-action: pan-y;}
.reminders-active-list:not(.reminders-active-list-soft) .reminder-row { background: var(--surface);}
.reminder-row:hover { background: var(--white-tint);}
.reminders-active-list:not(.reminders-active-list-soft) .reminder-row:hover { background: var(--white-tint);}
.swipe-wrap { position: relative; overflow: hidden;}
.swipe-del-pad { position: absolute; top: 0; right: 0; bottom: 0; width: 72px; display: flex; align-items: center; justify-content: center; background: var(--rose-50); color: var(--rose); border: none; cursor: pointer; padding: 0; opacity: 0; transition: opacity var(--dur-state) ease; -webkit-tap-highlight-color: transparent;}
.swipe-del-pad svg { width: 20px; height: 20px;}
.swipe-wrap.swiping .swipe-del-pad, .swipe-wrap:has(.swipe-row.swipe-open) .swipe-del-pad { opacity: 1;}
.swipe-row { position: relative; z-index: 1; transition: transform var(--dur-card) var(--ease-ios);}
.swipe-row.swipe-dragging { transition: none;}
.swipe-row.swipe-open { transform: translateX(-72px);}
.swipe-row.swipe-dragging, .swipe-row.swipe-open { background: var(--bg-1);}
.reminder-body { flex: 1; min-width: 0;}
.reminder-meta { color: var(--text-3); display: flex; align-items: center; gap: var(--s-1h); flex-wrap: wrap;}
.reminder-meta .dot-sep { opacity: .5;}
.reminder-meta .countdown { color: var(--sage); font-weight: 500;}
.rem-bell-master { position: relative;}
.rem-bell-master.is-on { color: var(--sage); background: var(--sage-90); border: 1.5px solid color-mix(in srgb, var(--sage) 48%, transparent);}
.rem-bell-master.is-off { color: var(--text-3);}
.rem-bell-master.is-off:hover { color: var(--text-2);}
#reminders-sheet:has(.rem-bell-master.is-off) .rem-history-eyebrow, #reminders-sheet:has(.rem-bell-master.is-off) .reminders-active-list-soft { opacity: 0.62; transition: opacity var(--dur-state) var(--ease-ios);}
.reminder-perm-warn { margin: 0 var(--s-5) var(--s-3); padding: var(--s-2h) var(--s-3h); display: flex; align-items: flex-start; gap: var(--s-2h); border-radius: var(--r-md); background: rgba(212,165,116,.08); border: 1px solid rgba(212,165,116,.22); color: var(--text-2); line-height: 1.45;}
.reminder-perm-warn svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--amber); fill: none; stroke: currentColor; stroke-width: 1.8;}
.reminder-perm-warn b { color: var(--amber); font-weight: 600;}
.reminder-perm-warn button { background: var(--sage); color: var(--on-sage); border: none; padding: var(--s-1) var(--s-2h); border-radius: 999px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .3px; cursor: pointer; margin-left: auto; flex-shrink: 0; font-family: var(--font-body);}
.reminder-time-wheel-wrap { display: flex; align-items: center; justify-content: center; gap: 0; background: transparent; border: 0; border-radius: 0; padding: 0 var(--s-4h); position: relative; overflow: hidden; height: 140px;}
.reminder-time-wheel-wrap::before { content: ''; position: absolute; left: var(--s-2); right: var(--s-2); top: 50%; transform: translateY(-50%); height: 48px; background: var(--white-mist); border: 0; border-radius: var(--r-md); pointer-events: none; z-index: 0;}
.reminder-wheel-col { flex: 1; height: 140px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; z-index: 3;}
.reminder-wheel-col::-webkit-scrollbar { display: none;}
.reminder-wheel-item { height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-family: var(--font-display); font-weight: 300; color: var(--text-3); cursor: pointer; transition: color var(--dur-tap); user-select: none; letter-spacing: .5px;}
.reminder-wheel-item.pad { height: 48px; pointer-events: none; visibility: hidden;}
.reminder-wheel-sep { font-family: var(--font-display); font-size: var(--fs-h2-lg); font-weight: 300; color: var(--text-3); padding: 0 var(--s-1); z-index: 3; position: relative; pointer-events: none; line-height: 1;}
.reminder-opt-icon { background: transparent; border: none;}
.reminder-opt-body { flex: 1; min-width: 0;}
.reminder-opt-label { color: var(--text);}
.reminder-opt-sub { color: var(--text-2); margin-top: 1px;}
.reminders-sheet-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: calc(var(--s-5) + var(--safe-bottom)); flex: 1;}
.reminders-active-list { margin: 0 var(--s-5);}
.reminders-active-list::-webkit-scrollbar { width: 4px;}
.reminders-active-list::-webkit-scrollbar-thumb { background: var(--white-film); border-radius: 2px;}
.reminders-sheet-scroll::-webkit-scrollbar { width: 4px;}
.reminders-sheet-scroll::-webkit-scrollbar-thumb { background: var(--white-film); border-radius: 2px;}
#reminders-overlay { justify-content: stretch; animation: none;}
.reminders-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); flex-shrink: 0; padding: calc(12px + var(--safe-top)) max(var(--gutter), var(--safe-right)) var(--s-2) max(var(--gutter), var(--safe-left));}
.reminders-topbar > :first-child { justify-self: start;}
.reminders-topbar > :last-child { justify-self: end;}
.reminders-topbar-title { justify-self: center; text-align: center; white-space: nowrap;}
#reminders-sheet { height: 100%; max-height: none; border-radius: 0; border-top: none; padding-bottom: 0; display: flex; flex-direction: column; will-change: opacity, transform; animation: page-fade-in var(--dur-page) var(--ease-out-soft) both; background: var(--bg-0);}
#reminders-sheet .rem-device-cell { background: transparent;}
#reminders-sheet .rem-device-cell-tap:hover { background: var(--white-mist);}
#reminders-sheet .reminders-sheet-scroll { flex: 1; max-height: none; overflow-y: auto; display: flex; flex-direction: column;}
#reminders-sheet .rem-composer { flex: 1;}
.tech-modal-sheet .modal-handle { cursor: grab; width: 44px; height: 5px; margin-top: var(--s-2h); transition: background var(--dur-tap) ease, transform var(--dur-tap) ease; position: relative;}
.tech-modal-sheet .modal-handle::before { content: ''; position: absolute; inset: -20px -40px; pointer-events: auto;}
.tech-modal-sheet .modal-handle:hover { background: var(--white-grip);}
.tech-modal-sheet .modal-handle:active { cursor: grabbing; background: var(--white-grip-2);}
.tech-modal-sheet.dragging { transition: none; animation: none !important;}
.tech-modal-sheet.dragging .modal-handle { background: var(--white-bright);}
.composer-grab { cursor: grab; user-select: none;}
.composer-grab:active { cursor: grabbing;}
#reminders-sheet .modal-handle { cursor: grab;}
#reminders-sheet.dragging { transition: none;}
#reminders-sheet .modal-handle:active { cursor: grabbing;}
@keyframes reminderFire { 0% { box-shadow: 0 0 0 0 var(--sage-glow-peak);}
60% { box-shadow: 0 0 0 12px transparent;}
100% { box-shadow: 0 0 0 0 transparent;}
}
.reminder-toast { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background: var(--grad-lift); border: 1px solid var(--sage); border-radius: 999px; padding: var(--s-2h) var(--s-4h) var(--s-2h) var(--s-3h); display: flex; align-items: center; gap: var(--s-2h); box-shadow: var(--elev-2), var(--elev-glow-sage); z-index: var(--z-toast); animation: toastIn var(--dur-card) var(--ease-out-soft), toastOut var(--dur-state) var(--ease-ios) 3.7s forwards; max-width: 86%;}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px);}
to { opacity: 1; transform: translate(-50%, 0);}
}
@keyframes toastOut { from { opacity: 1;}
to { opacity: 0; transform: translate(-50%, -10px);}
}
.reminder-toast-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--sage-170); color: var(--sage); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.reminder-toast-icon svg { width: 12px; height: 12px; stroke-width: 2; fill: none;}
.reminder-toast-text { color: var(--text); line-height: 1.3;}
.reminder-toast-text b { color: var(--sage); font-weight: 600;}
.ach-toast { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background: var(--grad-lift); border: 1px solid var(--tier, var(--sage)); border-radius: var(--r-pill); padding: var(--s-2h) var(--s-4h) var(--s-2h) var(--s-2h); display: flex; align-items: center; gap: var(--s-3); box-shadow: var(--elev-2), 0 0 24px var(--tier-glow, transparent); z-index: var(--z-toast); animation: toastIn var(--dur-card) var(--ease-out-soft), toastOut var(--dur-state) var(--ease-ios) 4.2s forwards; max-width: 86%; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;}
.ach-toast-badge { width: var(--icon-xl); height: var(--icon-xl); border-radius: var(--r-circle); background: radial-gradient(circle at 50% 36%, var(--tier-glow, var(--sage-170)), transparent 74%); border: 1.5px solid var(--tier, var(--sage)); box-shadow: 0 0 14px var(--tier-glow, transparent); color: var(--tier, var(--sage)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: achBadgePop .6s cubic-bezier(.2, 1.4, .35, 1) both;}
@keyframes achBadgePop { 0% { transform: scale(.4); opacity: 0;}
60% { transform: scale(1.12);}
100% { transform: scale(1); opacity: 1;}
}
.ach-toast-badge svg { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2; fill: none;}
.ach-toast-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0;}
.ach-toast-eyebrow { color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; white-space: nowrap;}
.ach-toast-label { color: var(--text); font-weight: 600; white-space: nowrap;}
.share-toast { position: absolute; bottom: calc(120px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); background: var(--grad-lift); border: 1px solid var(--border-warm); border-radius: 999px; padding: var(--s-2h) var(--s-4); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500; color: var(--text); letter-spacing: .1px; white-space: nowrap; box-shadow: var(--elev-2); z-index: var(--z-toast); animation: toastIn var(--dur-card) var(--ease-out-soft), toastOut var(--dur-state) var(--ease-ios) 1.8s forwards; pointer-events: none;}
.boot-splash { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 38%, rgba(125,211,232,0.10) 0%, transparent 55%), radial-gradient(ellipse at 50% 80%, rgba(125,142,176,0.06) 0%, transparent 60%), linear-gradient(180deg, #0B111C 0%, #0E1826 55%, #0B111C 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: var(--z-top); transition: opacity .5s ease, visibility .5s ease;}
.boot-splash-aura { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, var(--sage-170) 0%, var(--sage-wash) 55%, transparent 75%); filter: blur(8px); animation: splash-breathe 3.6s ease-in-out infinite; pointer-events: none;}
@keyframes splash-breathe { 0%, 100% { transform: scale(0.92); opacity: .55;}
50% { transform: scale(1.08); opacity: 1;}
}
.boot-splash-mark { position: relative; width: 92px; height: 92px; margin-bottom: var(--s-6); animation: splash-pop 900ms var(--ease-out-soft) both;}
.boot-splash-mark svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: center; filter: drop-shadow(0 0 14px var(--sage-100)); animation: splash-orb-breathe 3.6s ease-in-out infinite;}
@keyframes splash-orb-breathe { 0%, 100% { transform: scale(.84); opacity: .9;}
50% { transform: scale(1); opacity: 1;}
}
@keyframes splash-pop { from { opacity: 0; transform: scale(.85);}
to { opacity: 1; transform: scale(1);}
}
.boot-splash-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: 6px; text-transform: uppercase; color: #EAF2F8; opacity: 0; animation: splash-fade-up .8s ease .55s forwards;}
.boot-splash-tagline { margin-top: var(--s-2h); font-size: var(--fs-label); font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: #9FB3C6; opacity: 0; animation: splash-fade-up .8s ease .75s forwards;}
@keyframes splash-fade-up { from { opacity: 0; transform: translateY(8px);}
to { opacity: .9; transform: translateY(0);}
}
.boot-splash-bar { position: relative; margin-top: var(--s-6); width: 140px; height: 2px; border-radius: 999px; background: var(--sage-soft); overflow: hidden; opacity: 0; animation: splash-fade-up .8s ease .95s forwards;}
.boot-splash-bar::after { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent 0%, transparent 0%, var(--sage-shimmer) 50%, transparent 100%); border-radius: 999px; filter: blur(.2px); animation: splash-shimmer 1.6s cubic-bezier(.5,0,.5,1) 1.1s infinite; box-shadow: 0 0 12px var(--sage-glow-peak);}
@keyframes splash-shimmer { 0% { left: -40%;}
100% { left: 100%;}
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important;}
.orb-inner.phase-INHALE { animation-duration: var(--orb-inhale-dur, 4s), var(--orb-inhale-dur, 4s) !important; animation-iteration-count: 1, 1 !important;}
.orb-inner.phase-EXHALE { animation-duration: var(--orb-exhale-dur, 8s), var(--orb-exhale-dur, 8s) !important; animation-iteration-count: 1, 1 !important;}
.reminder-toast { animation-duration: 0.35s, 0.3s !important; animation-iteration-count: 1, 1 !important;}
.orb-inner.phase-INHALE { border-color: var(--sage-phase-border) !important;}
.orb-inner.phase-HOLD { border-color: rgba(212,165,116,0.9) !important;}
.orb-inner.phase-EXHALE { border-color: rgba(168,156,217,0.9) !important;}
.boot-splash-aura { animation: none !important; opacity: .8 !important;}
.boot-splash-mark { animation: none !important;}
.boot-splash-mark svg { animation: none !important; transform: scale(1) !important;}
.boot-splash-title, .boot-splash-tagline, .boot-splash-bar { animation: none !important; opacity: .9 !important;}
.boot-splash-bar::after { display: none !important;}
}
.home-screen { padding-top: 0;}
.safety-overlay { position: fixed; inset: 0; z-index: var(--z-top); display: flex; align-items: center; justify-content: center; padding: var(--s-5); animation: fadeIn var(--dur-state) ease;}
.so-card { background: var(--card); border: 1.5px solid var(--rose-100); border-radius: var(--r-2xl); max-width: 320px; width: 100%; max-height: 82vh; overflow-y: auto; padding: var(--s-5) var(--s-4h) var(--s-4h); box-shadow: 0 0 40px var(--rose-50); position: relative;}
.so-close { position: absolute; top: 27px; right: 14px; width: 32px; height: 32px; border-radius: var(--r-circle); background: var(--white-veil); border: 1px solid var(--white-line); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 1; transition: background var(--dur-state), color var(--dur-state), border-color var(--dur-state);}
.so-close:hover { background: var(--white-film); border-color: var(--white-rule-2); color: var(--text);}
.so-close:active { transform: scale(.94);}
.so-close svg { width: 15px; height: 15px;}
.so-close::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px;}
.so-header { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3h); padding-right: var(--s-6);}
.so-header-text { flex: 1; min-width: 0;}
.so-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-lg); background: var(--rose-100); border: 1px solid var(--rose-100); display: flex; align-items: center; justify-content: center; color: var(--rose);}
.so-icon-glyph { width: 22px; height: 22px; display: inline-flex;}
.so-title { font-family: var(--font-display); font-weight: 600; color: var(--rose); letter-spacing: .2px;}
.so-eyebrow { font-size: var(--fs-caption); color: var(--text-2); letter-spacing: .6px; text-transform: uppercase; margin-bottom: 3px;}
.so-intro { color: var(--text-2); margin: 0 0 var(--s-3h);}
.so-risk { font-weight: 700; color: var(--text);}
.so-warnings { border-left: 3px solid var(--rose); padding: var(--s-1) 0 var(--s-1) var(--s-4); margin-bottom: var(--s-4);}
.so-warn-item { display: flex; align-items: flex-start; gap: var(--s-2h); margin-bottom: var(--s-2);}
.so-warn-item:last-child { margin-bottom: 0;}
.so-warn-dot { flex-shrink: 0; width: 5px; height: 5px; margin-top: var(--s-1h); border-radius: 50%; background: var(--rose); opacity: .75;}
.so-warn-text { color: var(--text); line-height: 1.45;}
.so-cta { margin-bottom: 0; border: 1.5px solid transparent; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios);}
.so-ack { display: flex; align-items: flex-start; gap: var(--s-2h); width: 100%; background: none; border: none; padding: 0; margin: 0 0 var(--s-4); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;}
.so-ack-box { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--r-xs); border: 1.5px solid var(--white-grip); background: var(--white-veil); color: transparent; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios);}
.so-ack-box svg { width: 13px; height: 13px;}
.so-ack.is-checked .so-ack-box { background: var(--sage-soft); border-color: var(--sage); color: var(--sage);}
.so-ack-label { color: var(--text-2); line-height: 1.5;}
.so-cta:disabled { background: transparent; border-color: var(--white-line); color: var(--text-3); cursor: not-allowed;}
.so-link-wrap { text-align: center; margin-top: var(--s-3h);}
.so-link { background: none; border: none; font-size: var(--fs-caption); color: var(--text-3); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;}
.psd-backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: var(--s-5) var(--s-5) 26vh; animation: fadeIn var(--dur-state) ease;}
.psd-card { width: 100%; max-width: 340px; background: var(--grad-sheet); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: var(--s-5) var(--s-5) var(--s-4h); box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: revealUp var(--dur-state) var(--ease-out-soft);}
#reminder-discard-overlay { justify-content: flex-start; align-items: flex-start; padding: calc(env(safe-area-inset-top, 0px) + var(--s-6)) var(--s-4) 0;}
#reminder-discard-overlay .psd-card { max-width: 300px; animation: revealDown var(--dur-state) var(--ease-out-soft);}
@keyframes revealDown { from { opacity: 0; transform: translateY(-10px);}
to { opacity: 1; transform: translateY(0);}
}
.psd-head { display: flex; align-items: center; gap: var(--s-2h); margin-bottom: var(--s-3h);}
.psd-head-icon { width: 36px; height: 36px; border-radius: var(--r-circle); background: var(--sage-soft); color: var(--sage); display: flex; align-items: center; justify-content: center;}
.psd-head-icon-glyph { width: 18px; height: 18px;}
.psd-head-text { flex: 1;}
.psd-sub { font-size: var(--fs-label); color: var(--text-3); margin-top: 1px;}
.delacct-pw-label { display: block; margin: var(--s-4) 0 var(--s-1h);}
.delacct-pw-input { width: 100%;}
.delacct-social-note { margin-top: var(--s-3);}
.delacct-forgot-sent { color: var(--text-3); pointer-events: none;}
.dialog-actions { display: flex; gap: var(--s-2h); margin-top: var(--s-4);}
.dialog-btn { flex: 1; padding: var(--s-3h) 0; border-radius: var(--r-pill); cursor: pointer; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; -webkit-tap-highlight-color: transparent; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios), opacity var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.dialog-btn:active { transform: scale(.98);}
.dialog-btn-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-2);}
.dialog-btn-cancel:hover { border-color: var(--text-2); color: var(--text);}
:root[data-theme="dark"] .psd-sub, :root[data-theme="dark"] .dialog-btn-cancel { color: #94A3B8;}
:root[data-theme="dark"] .dialog-btn-cancel { border-color: rgba(148,163,184,0.34);}
.dialog-btn-save { background: var(--cta-fill); border: 1px solid transparent; color: var(--cta-ink);}
.dialog-btn-save:hover { opacity: .92;}
.dialog-btn-discard { background: transparent; border: 1px solid var(--rose-100); color: var(--rose);}
.dialog-btn-discard:hover { background: var(--rose-50);}
.home-status-bar { display: none; align-items: center; justify-content: space-between; padding: calc(10px + var(--safe-top, 0px)) max(var(--gutter), var(--safe-right)) var(--s-1h) max(var(--gutter), var(--safe-left)); pointer-events: none; user-select: none;}
@media (display-mode: standalone) { .home-status-bar { display: flex;}
}
.home-status-time { font-weight: 600; color: var(--text); letter-spacing: -.1px;}
.home-status-icons { display: flex; align-items: center; gap: var(--s-1); color: var(--text); opacity: .9;}
.status-network, .status-battery { display: inline-flex; align-items: center; gap: var(--s-1); transition: opacity var(--dur-state) var(--ease-ios, ease);}
.status-wifi-slash { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset var(--dur-state) var(--ease-ios, ease);}
.status-network.is-offline .status-wifi-slash { stroke-dashoffset: 0;}
.status-network.is-offline { opacity: .55;}
.status-battery-level { transition: width var(--dur-card) var(--ease-ios, ease), fill var(--dur-state) ease;}
.status-battery.is-low .status-battery-level { fill: var(--amber, #d4a574); opacity: 1;}
.status-battery.is-charging .status-battery-level { fill: var(--sage, #7dd3e8); animation: status-battery-pulse 2.4s ease-in-out infinite;}
@keyframes status-battery-pulse { 0%, 100% { opacity: .9;}
50% { opacity: .55;}
}
@media (prefers-reduced-motion: reduce) { .status-battery.is-charging .status-battery-level { animation: none;}
.status-wifi-slash, .status-battery-level { transition: none;}
}
.modal-sheet-v2 { padding: 0;}
.modal-header-v2 { display: flex; align-items: flex-start; gap: var(--s-3h); padding: var(--s-2) max(18px, var(--safe-right)) var(--s-3h) max(18px, var(--safe-left)); flex-shrink: 0;}
.modal-header-v2 .modal-icon-wrap { width: 48px; height: 48px; border-radius: var(--r-lg);}
.modal-header-text { flex: 1; min-width: 0; padding-top: 2px;}
.modal-header-text .sheet-title { margin-bottom: var(--s-1);}
.modal-header-v2--learn { align-items: center;}
.modal-header-v2--learn .modal-header-text { padding-top: 0;}
.modal-header-v2--learn .modal-header-text .sheet-title { margin-bottom: 0;}
.modal-howto { display: inline-flex; align-items: center; gap: 3px; background: none; border: none; padding: 0; color: var(--sage); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500; letter-spacing: .1px; cursor: pointer; transition: color var(--dur-state);}
.modal-howto:hover { color: var(--text);}
.modal-fav-btn.is-fav { background: var(--sage-soft); border-color: var(--sage); color: var(--sage);}
.modal-fav-btn.is-fav svg { fill: var(--sage);}
.modal-body-v2 { flex: 1; overflow-y: auto; padding: 0 max(18px, var(--safe-right)) var(--s-4) max(18px, var(--safe-left)); scrollbar-width: none;}
.modal-body-v2::-webkit-scrollbar { display: none;}
.modal-tab-pane { display: flex; flex-direction: column; gap: var(--s-3h); animation: page-fade-in var(--dur-state) var(--ease-out-soft) both;}
.modal-section { padding: var(--s-1h) 0 var(--s-1);}
.modal-dur-summary { margin: var(--s-2) 0 0; font-size: var(--fs-label); color: var(--text-3); letter-spacing: .2px; text-align: left;}
.modal-dur-pills { display: flex; gap: var(--s-2); margin-top: var(--s-3h); margin-bottom: var(--s-3h);}
.modal-dur-pill { flex: 1; padding: var(--s-2) 0; border-radius: var(--r-pill); font-weight: 600; letter-spacing: .2px; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.modal-dur-pill:hover { background: var(--white-mist); border-color: var(--white-rule-2); color: var(--text);}
.modal-dur-pill.is-selected { background: var(--sage-soft); border-color: var(--sage); color: var(--sage);}
.modal-row-group { background: transparent; border: 0; border-radius: 0; overflow: visible;}
.modal-row { background: none; border: none; width: 100%; color: inherit; text-align: left; font-family: var(--font-body);}
.modal-row + .modal-row { border-top: 1px solid var(--white-soft);}
.modal-targets-rows + .modal-row, .modal-row + .modal-targets-rows > .modal-row:first-child { border-top: 1px solid var(--white-soft);}
#modal-wisdom-row > .modal-row, #modal-wisdom-row + .modal-row { border-top: 1px solid var(--white-soft);}
.modal-group-eyebrow { margin: 0; padding: var(--s-3) var(--s-4) var(--s-1); border-top: 1px solid var(--white-soft); color: var(--text-3);}
.modal-row-clickable { cursor: pointer; transition: background var(--dur-state);}
.modal-row-clickable:hover { background: var(--white-mist);}
.modal-row-icon { background: transparent;}
.modal-row-content { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.modal-row-chev { display: inline-flex; align-items: center; color: var(--text-3); flex-shrink: 0;}
.modal-row-chev svg { width: var(--icon-sm); height: var(--icon-sm); stroke: currentColor; fill: none;}
.modal-row-title { font-weight: 600; color: var(--text); letter-spacing: .1px; line-height: 1.2;}
.modal-row-sub { font-size: var(--fs-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.modal-row-chevron { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;}
.modal-row-chevron svg { width: 16px; height: 16px;}
.modal-learn-tagline { color: var(--text-2); margin: 0;}
.modal-learn-eyebrow { margin: var(--s-2) 0 0;}
.modal-learn-body { line-height: 1.65; color: var(--text-2); margin: var(--s-3h) 0 0;}
.benefit-row--lead { margin-top: var(--s-3h);}
.modal-learn-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2);}
.modal-learn-list li { position: relative; padding-left: var(--s-4h); line-height: 1.55; color: var(--text-2);}
.modal-learn-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3);}
.modal-learn-list b { color: var(--text); font-weight: 600;}
.modal-learn-tip { display: flex; gap: var(--s-2h); padding: var(--s-2) 0; margin-top: var(--s-3); background: transparent; border: 0; border-radius: 0;}
.modal-learn-tip-ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--amber); display: inline-flex; align-items: center; justify-content: center;}
.modal-learn-tip-ico svg { width: 100%; height: 100%;}
.modal-learn-tip p { color: var(--text-2); line-height: 1.6; margin: 0;}
.modal-learn-bestfor { margin: var(--s-2) 0 0; font-size: var(--fs-label); color: var(--text-2); line-height: 1.5;}
.modal-learn-bestfor strong { color: var(--text); font-weight: 600;}
.modal-footer-v2 { padding: var(--s-3) max(18px, var(--safe-right)) calc(14px + var(--safe-bottom)) max(18px, var(--safe-left)); background: linear-gradient(0deg, rgba(11,19,28,1) 60%, rgba(11,19,28,.92) 85%, transparent 100%); flex-shrink: 0;}
.modal-cta-label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: inherit;}
@media (prefers-reduced-motion: reduce) { .modal-tab-pane { animation: none;}
.modal-cta { transition: none;}
}
@media (orientation: landscape) and (max-height: 560px) { #app { display: block; height: 100vh; height: 100dvh;}
.phone { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none;}
.phone-leaving { width: 100%; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none;}
.top-bar { padding: calc(10px + var(--safe-top)) max(var(--gutter), var(--safe-right)) var(--s-2) max(var(--gutter), var(--safe-left));}
.screen > div[style*="text-align:center"][style*="padding:var(--s-1h) 0 0"] { padding: 0 !important;}
.screen > div[style*="text-align:center"][style*="padding:var(--s-1h) 0 0"] > p:first-child { display: none;}
.screen > div[style*="text-align:center"][style*="padding:var(--s-1h) 0 0"] > p:nth-child(2) { font-size: var(--fs-body) !important; margin-top: 2px;}
.orb-inner, .orb-stage { width: 200px !important; height: 200px !important;}
.glow-ring.r1 { width: 230px !important; height: 230px !important;}
.glow-ring.r2 { width: 252px !important; height: 252px !important;}
.glow-ring.r3 { width: 274px !important; height: 274px !important;}
.countdown-numeral { font-size: var(--fs-display) !important; letter-spacing: -1px !important;}
.hold-time-display { font-size: var(--fs-display) !important;}
.timer-phase-label { margin-top: var(--s-3h) !important;}
.timer-play-btn { margin-top: var(--s-4) !important;}
.session-controls { padding: 0 max(16px, var(--safe-right)) calc(14px + var(--safe-bottom)) max(16px, var(--safe-left)); gap: var(--s-5);}
.timer-screen #t-playbtn { bottom: calc(14px + var(--safe-bottom));}
.bottom-nav { padding: var(--s-1h) max(0px, var(--safe-right)) calc(6px + var(--safe-bottom)) max(0px, var(--safe-left));}
.nav-item { flex-direction: row; gap: var(--s-2); padding: var(--s-1h) var(--s-3h);}
.nav-item svg { width: 18px; height: 18px;}
.nav-label { font-size: var(--fs-mini);}
.scroll-content { padding-bottom: calc(56px + var(--safe-bottom));}
.tech-modal-sheet, #reminders-sheet, #audio-sheet { max-height: calc(96dvh - var(--safe-top));}
}
@media (orientation: portrait) and (max-height: 660px) { .orb-inner, .orb-stage { width: 240px !important; height: 240px !important;}
.glow-ring.r1 { width: 278px !important; height: 278px !important;}
.glow-ring.r2 { width: 304px !important; height: 304px !important;}
.glow-ring.r3 { width: 334px !important; height: 334px !important;}
.countdown-numeral { font-size: var(--fs-numeral-xl) !important;}
.hold-time-display { font-size: var(--fs-numeral-lg) !important;}
}
@media (max-width: 340px) { :root { --gutter: 16px; --gutter-sm: 14px;}
.top-bar-title { font-size: var(--fs-body);}
.orb-inner, .orb-stage { width: 240px !important; height: 240px !important;}
.glow-ring.r1 { width: 280px !important; height: 280px !important;}
.glow-ring.r2 { width: 310px !important; height: 310px !important;}
.glow-ring.r3 { width: 340px !important; height: 340px !important;}
}
@media (min-width: 480px) and (min-height: 900px) { #app { background: radial-gradient(ellipse at 30% 15%, var(--sage-tint) 0%, transparent 45%), radial-gradient(ellipse at 70% 85%, rgba(125,142,176,0.035) 0%, transparent 45%), linear-gradient(135deg, var(--bg-0) 0%, var(--bg-2) 60%, var(--card-1) 100%);}
}
@media (display-mode: standalone) { .screen::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--safe-top); background: linear-gradient(180deg, rgba(5,10,20,.55), rgba(5,10,20,0)); pointer-events: none; z-index: var(--z-sticky);}
.boot-splash::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: linear-gradient(180deg, rgba(5,10,20,.55), rgba(5,10,20,0)); pointer-events: none;}
}
.sound-v2-sheet { padding: var(--s-2) max(20px, var(--safe-right)) max(22px, var(--safe-bottom, 22px)) max(20px, var(--safe-left)); max-height: 92vh; overflow-y: auto; scrollbar-width: none;}
.sound-v2-sheet::-webkit-scrollbar { display: none;}
.sound-v2-header { display: flex; align-items: center; justify-content: space-between; margin: var(--s-1h) 0 var(--s-4h);}
.sound-v2-title-wrap { display: flex; align-items: center; gap: var(--s-3);}
.sound-v2-title-icon { width: 22px; height: 22px; color: var(--sage); display: inline-flex; align-items: center; justify-content: center;}
.sound-v2-title-icon svg { width: 100%; height: 100%; stroke-width: 1.7;}
.sound-v2-eyebrow { margin: 0 0 var(--s-2h);}
.sound-v2-eyebrow-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2h);}
.sound-v2-eyebrow-row .sound-v2-eyebrow { margin: 0;}
.sound-v2-hint-icon { width: 13px; height: 13px; color: var(--text-2); display: inline-flex; vertical-align: -2px;}
.sound-v2-hint-icon svg { width: 100%; height: 100%;}
.sound-v2-toggle { width: 44px; height: 26px; border-radius: 999px; border: none; cursor: pointer; padding: 0; position: relative; flex-shrink: 0; background: var(--white-haze); transition: background var(--dur-state); display: inline-block;}
.sound-v2-toggle.is-on { background: var(--sage);}
.sound-v2-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: left var(--dur-state) var(--ease-standard), transform var(--dur-tap); box-shadow: 0 1px 4px rgba(0,0,0,0.30);}
.sound-v2-toggle.is-on .sound-v2-toggle-knob { left: 21px;}
.sound-v2-toggle.is-disabled { opacity: .45; cursor: not-allowed;}
.sound-v2-toggle:not(.is-disabled):active .sound-v2-toggle-knob { transform: scale(.92);}
.sound-v2-bin-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1h); padding: var(--s-1); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--s-3h);}
.sound-v2-bin-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--s-2h) var(--s-1); min-height: 54px; border-radius: var(--r-md); background: transparent; border: 1px solid transparent; color: var(--text-2); cursor: pointer; font-family: var(--font-body); transition: background var(--dur-state), border-color var(--dur-state), color var(--dur-state), box-shadow var(--dur-state);}
.sound-v2-bin-seg:hover:not(.is-on) { background: var(--surface-soft-hover);}
.sound-v2-bin-label { font-weight: 700; letter-spacing: .1px;}
.sound-v2-bin-goal, .sound-v2-bin-freq { font-size: var(--fs-mini); color: var(--text-3); letter-spacing: .2px; line-height: 1.25;}
.sound-v2-bin-goal { margin-top: 2px;}
.sound-v2-bin-seg.is-on { background: var(--sage-soft); border-color: var(--sage); color: var(--sage);}
.sound-v2-bin-seg.is-on .sound-v2-bin-label { color: var(--sage);}
.sound-v2-bin-seg.is-on .sound-v2-bin-goal, .sound-v2-bin-seg.is-on .sound-v2-bin-freq { color: var(--sage); opacity: .8;}
.sound-v2-bin-seg.is-dim:not(.is-on) { opacity: .55;}
.sound-v2-volume { margin: var(--s-3) 0 var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); transition: opacity var(--dur-tap) var(--ease-ios);}
.sound-v2-volume.is-dim { opacity: .55;}
.sound-v2-volume--footer { margin-top: var(--s-4);}
.sound-v2-volume-head { display: flex; align-items: baseline; justify-content: space-between;}
.sound-v2-volume-label { color: var(--text-2); letter-spacing: .2px;}
.sound-v2-volume-value { color: var(--sage); font-variant-numeric: tabular-nums; font-weight: 600;}
.sound-v2-volume-unit { color: var(--text-3); margin-left: -0.1em;}
.sound-v2-volume-slider { box-sizing: content-box; height: 4px; padding: var(--s-4) 0; margin: calc(var(--s-1h) - var(--s-3)) 0; background-clip: content-box;}
.sound-v2-safe-spacer { height: 6px;}
.modal-learn-safety { margin: var(--s-3) 0 0; padding: var(--s-3) 0 var(--s-2); background: transparent; border: 0; border-radius: 0;}
.modal-learn-safety-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3);}
.modal-learn-safety-icon { width: 32px; height: 32px; background: transparent; border: 0; color: var(--rose); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.modal-learn-safety-icon svg { width: 28px; height: 28px; stroke-width: 1.7;}
.modal-learn-safety-titles { display: flex; flex-direction: column; gap: 2px; padding-top: 2px;}
.modal-learn-safety-title { font-weight: 700; color: var(--rose); letter-spacing: -.1px;}
.modal-learn-safety-intro { color: var(--text-2); line-height: 1.55; margin: 0 0 var(--s-3);}
.modal-learn-safety-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-direction: column; gap: var(--s-2);}
.modal-learn-safety-list li { display: flex; align-items: flex-start; gap: var(--s-2h); line-height: 1.5; color: var(--text);}
.modal-learn-safety-bullet { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--rose); display: inline-flex; align-items: center; justify-content: center; opacity: .85;}
.modal-learn-safety-bullet svg { width: 100%; height: 100%; stroke-width: 2.5;}
.modal-learn-safety-note { display: flex; align-items: flex-start; gap: var(--s-2h); padding: 0; background: transparent; border: 0; border-radius: 0; font-size: var(--fs-label); color: var(--text-2); line-height: 1.5; margin: var(--s-2) 0 var(--s-3);}
.modal-learn-safety-note-icon { width: 14px; height: 14px; color: var(--moon); flex-shrink: 0; margin-top: 1px; display: inline-flex;}
.modal-learn-safety-note-icon svg { width: 100%; height: 100%;}
.modal-learn-safety-link { background: none; border: none; padding: 0; display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; color: var(--rose); cursor: pointer; transition: color var(--dur-state); letter-spacing: .1px;}
.modal-learn-safety-link:hover { color: var(--text);}
.modal-learn-safety-link svg { stroke: currentColor;}
.pc-screen .pc-body { flex: 1; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-3h) var(--s-5) calc(24px + var(--safe-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch;}
.pc-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-2) 0 var(--s-1); margin: 0;}
.pc-hero-icon { margin: 0 0 var(--s-4h); width: 84px; height: 84px; animation: checkPop 420ms var(--ease-out-soft) both, pcHaloPulse 3.2s ease-in-out 0.42s infinite;}
.pc-hero-icon .pc-check-svg { width: 28px; height: 28px;}
.pc-hero-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.4px; line-height: 1.15; color: var(--text); margin: 0 0 var(--s-2);}
.pc-hero-sub { color: var(--text-2); max-width: 32ch; margin: 0;}
@keyframes pcHaloPulse { 0%, 100% { box-shadow: 0 0 18px color-mix(in srgb, var(--pc-accent-hex, #7dd3e8) 18%, transparent);}
50% { box-shadow: 0 0 26px color-mix(in srgb, var(--pc-accent-hex, #7dd3e8) 26%, transparent);}
}
.hold-progress-head { text-align: center; padding: var(--s-1h) 0 0;}
.hold-progress-label { margin-bottom: var(--s-1);}
.hold-round { font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 600;}
.hold-round-total { color: var(--text-3);}
.hold-ring-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.hold-ring { position: relative; width: 280px; height: 280px;}
.hold-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg);}
.hold-ring-arc { filter: drop-shadow(0 0 8px var(--amber));}
.hold-ring-inner { position: absolute; inset: 18px; border-radius: var(--r-circle); background: radial-gradient(circle, rgba(14,24,36,.97) 60%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center;}
.hold-status { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);}
.hold-status-dot { width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: pulse 1.5s infinite;}
.hold-status-label { font-size: var(--fs-mini); color: var(--amber); font-weight: 600; letter-spacing: 2px;}
.hold-instruction { color: var(--text-2); margin-top: var(--s-6); text-align: center; padding: 0 var(--s-6); line-height: 1.7;}
.hold-side-btn { width: 50px; height: 50px;}
.hold-play-btn { width: 68px; height: 68px; border-radius: var(--r-circle); background: var(--sage); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.35);}
.hold-check-ico { color: var(--sage); width: 16px; height: 16px;}
.pc-card { width: 100%; padding: var(--s-4) var(--s-4h);}
.pc-actions { display: flex; flex-direction: column; gap: var(--s-2h); margin-top: auto; padding-top: var(--s-2);}
.pc-primary { width: 100%; margin: 0 !important;}
.pc-secondary { width: 100%; padding: var(--s-3) var(--s-4h); border-radius: 999px; border: 1px solid var(--border-warm); background: transparent; color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; letter-spacing: .15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); transition: background var(--dur-state) ease, border-color var(--dur-state) ease, transform var(--dur-tap) ease; -webkit-tap-highlight-color: transparent;}
.pc-secondary:hover { background: var(--sage-soft);}
.pc-secondary:active { transform: scale(.98);}
.pc-secondary-ico { display: inline-flex; width: 15px; height: 15px; color: var(--pc-accent, var(--sage));}
.pc-secondary-ico svg { width: 100%; height: 100%;}
@media (max-width: 380px) { .pc-screen .pc-body { padding: var(--s-3) var(--s-4h) var(--s-6); gap: var(--s-3h);}
.pc-hero-title { font-size: var(--fs-h2-md);}
.pc-card { padding: var(--s-3h) var(--s-4);}
}
@media (prefers-reduced-motion: reduce) { .pc-hero-icon { animation: none;}
}
.home-v2-section { padding: var(--s-3) 0 0;}
.home-v2-section-recent { padding-top: 0; padding-bottom: var(--s-2);}
.home-v2-section-head { margin-bottom: var(--s-3h); padding: 0;}
.home-v2-section-title { margin: 0;}
.home-v2-see-all { display: flex; align-items: center; gap: var(--s-1h); width: fit-content; background: transparent; border: none; margin: var(--s-3) 0 0; padding: var(--s-2) 0; color: var(--sage); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity var(--dur-state) var(--ease-ios);}
.home-v2-see-all:active { opacity: 0.6;}
.home-v2-see-all-chev { display: inline-flex; margin-left: -2px;}
.home-v2-see-all-chev svg { width: 16px; height: 16px;}
.home-v2 .scroll-content { padding-top: var(--safe-top, 0px);}
.home-v2-section:last-child { padding-bottom: var(--s-5);}
.home-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--s-5) 0 var(--s-3); isolation: isolate;}
.home-orb { position: relative; width: 100%; height: 232px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; margin-bottom: var(--s-2); transition: transform var(--dur-tap) var(--ease-ios);}
.home-orb:active { transform: scale(.98);}
.home-orb-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--tint-rgb, 125,211,232), .30), transparent 68%); filter: blur(6px); animation: orbBreathe 6s ease-in-out infinite; pointer-events: none; z-index: 0;}
@keyframes orbBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85;}
50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1;}
}
.home-orb-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(var(--tint-rgb, 125,211,232), .10); pointer-events: none; z-index: 0;}
.home-orb-ring--1 { width: 120px; height: 120px; border-color: rgba(var(--tint-rgb, 125,211,232), .24);}
.home-orb-ring--2 { width: 190px; height: 190px; border-color: rgba(var(--tint-rgb, 125,211,232), .15);}
.home-orb-ring--3 { width: 260px; height: 260px; border-color: rgba(var(--tint-rgb, 125,211,232), .09);}
.home-orb-icon { position: relative; z-index: 1; width: 56px; height: 56px; color: var(--tint, var(--sage)); display: flex; align-items: center; justify-content: center;}
.home-orb-icon svg { width: 100%; height: 100%; stroke-width: 1.6; filter: drop-shadow(0 0 10px rgba(var(--tint-rgb, 125,211,232), .5));}
.home-hero-title { text-align: center; text-wrap: balance; margin-bottom: var(--s-2h);}
.home-hero-sub { text-align: center; color: var(--text-2); margin-bottom: var(--s-5);}
.home-hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--s-3h);}
.home-play-pill { display: inline-flex; align-items: center; gap: var(--s-2h); height: 60px; padding: 0 var(--s-6); border: 0; border-radius: var(--r-pill); cursor: pointer; background: var(--cta-fill); color: var(--cta-ink); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 0 32px -8px rgba(125,211,232,.5), 0 6px 20px -10px rgba(125,211,232,.38); transition: transform var(--dur-tap) var(--ease-ios);}
.home-play-pill:active { transform: scale(.97);}
.home-play-tri { display: inline-flex; width: 24px; height: 24px;}
.home-play-tri svg { width: 100%; height: 100%;}
.home-tune-gear { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--cta-fill); color: var(--cta-ink); box-shadow: var(--elev-1); cursor: pointer; flex-shrink: 0; transition: transform var(--dur-tap) var(--ease-ios), filter var(--dur-state) var(--ease-ios);}
.home-tune-gear:hover { transform: translateY(-1px);}
.home-tune-gear:active { transform: scale(.94);}
.home-tune-gear svg { width: 20px; height: 20px; stroke-width: 1.6;}
.home-v2-list { display: flex; flex-direction: column; gap: var(--s-2h);}
.home-row { display: flex; align-items: center; gap: var(--s-4); width: 100%; padding: var(--s-3h) var(--s-4); min-height: 64px; background: linear-gradient(135deg, rgba(var(--tint-rgb, 125,211,232), .16), var(--card-1) 58%); border: 1px solid rgba(var(--tint-rgb, 125,211,232), .26); border-radius: var(--r-lg2); color: inherit; cursor: pointer; font-family: var(--font-body); text-align: left; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.home-row:hover { background: linear-gradient(135deg, rgba(var(--tint-rgb, 125,211,232), .24), var(--card-1) 54%); border-color: rgba(var(--tint-rgb, 125,211,232), .34);}
.home-row:active { transform: scale(.985);}
.home-row-icon { position: relative; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tint, var(--sage)) 20%, transparent) 0%, transparent 72%); border: 1px solid color-mix(in srgb, var(--tint, var(--sage)) 40%, transparent); color: var(--tint, var(--sage)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.home-row-icon svg { width: 24px; height: 24px; stroke-width: 1.7; fill: none; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tint, var(--sage)) 50%, transparent));}
:root[data-theme="light"] .home-row-icon { background: color-mix(in srgb, var(--tint, var(--sage)) 15%, transparent); border: 1.5px solid color-mix(in srgb, var(--tint, var(--sage)) 62%, transparent);}
:root[data-theme="light"] .home-row-icon svg { filter: none;}
.home-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1);}
.home-row-sub { color: var(--text-2);}
.home-row-play { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--tint, var(--sage)); border: 1px solid rgba(var(--tint-rgb, 125,211,232), .34); background: rgba(var(--tint-rgb, 125,211,232), .08); pointer-events: none;}
.home-row-play svg { width: 13px; height: 13px; fill: currentColor;}
.modal-pace-seg { display: flex; width: 100%;}
.modal-pace-seg .seg-btn { flex: 1;}
.sound-v2-eyebrow-row-master { align-items: center;}
.sound-v2-helper { font-size: var(--fs-label); margin: 0 0 var(--s-4h); color: var(--text-2); letter-spacing: .1px; line-height: 1.45; padding: 0 2px;}
.sound-v2-sheet, .modal-sheet-v2 { background: var(--grad-sheet);}
@media (prefers-reduced-motion: reduce) { .home-orb-glow { animation: none;}
}
.modal-row-wheel { min-height: 72px; padding-top: var(--s-2); padding-bottom: var(--s-2);}
.modal-wheel-label { flex: 1; font-weight: 600; color: var(--text); letter-spacing: -.1px;}
.modal-wheel { flex: 0 0 var(--wheel-w, 180px); height: 64px; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-3), #000 calc(100% - var(--s-3)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-3), #000 calc(100% - var(--s-3)), transparent 100%);}
.modal-wheel::-webkit-scrollbar { display: none;}
.modal-wheel-track { display: flex; height: 100%;}
.modal-wheel-item { flex: 0 0 var(--wheel-item-w, 60px); height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-md); color: var(--text-4); opacity: .65; font-variant-numeric: tabular-nums; letter-spacing: -.2px; transition: color var(--dur-tap), font-size var(--dur-tap), font-weight var(--dur-tap), opacity var(--dur-tap); user-select: none; -webkit-user-select: none; cursor: grab;}
.modal-wheel-item.pad { pointer-events: none; visibility: hidden;}
.modal-wheel-item.is-current { font-size: var(--fs-h1); line-height: 1; color: var(--text); font-weight: 700; opacity: 1; letter-spacing: -.5px;}
.modal-dur-section { padding: var(--s-1h) 0 var(--s-1);}
.sound-v2-chip-rail { display: flex; gap: var(--s-2); overflow-x: auto; overflow-y: hidden; padding: 2px var(--s-5) var(--s-1h); margin: 0 calc(-1 * var(--s-5)); scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.sound-v2-chip-rail::-webkit-scrollbar { display: none;}
.sound-v2-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--s-1h); padding: var(--s-2) var(--s-3h); border-radius: var(--r-pill); font-weight: 500; letter-spacing: .1px; white-space: nowrap; transition: background var(--dur-state), border-color var(--dur-state), color var(--dur-state), transform var(--dur-tap);}
.sound-v2-chip:hover { background: var(--white-veil); border-color: var(--sage-170);}
.sound-v2-chip.is-on { background: var(--sage-soft); border-color: var(--sage); color: var(--sage); font-weight: 600;}
.sound-v2-chip.is-dim { opacity: .42;}
.sound-v2-chip.is-locked { opacity: .55;}
.sound-v2-chip.is-locked .sound-v2-chip-ico svg { stroke: var(--sage);}
.sound-v2-bin-seg.is-locked { opacity: .55;}
.sound-v2-bin-lock svg { width: 14px; height: 14px; stroke: var(--sage);}
.sound-v2-toggle.is-locked { width: auto; background: none; border: none; box-shadow: none; color: var(--sage); padding: 0;}
.sound-v2-toggle-lock svg { width: 18px; height: 18px; stroke: currentColor;}
.sound-v2-chip-ico { display: inline-flex; width: 14px; height: 14px;}
.sound-v2-chip-ico svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.6; fill: none;}
.sound-v2-cue-row-badge { display: inline-block; margin-left: var(--s-2); padding: 2px var(--s-1h); border-radius: 999px; background: rgba(125,142,176,.13); color: var(--moon); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; vertical-align: 2px;}
.composer-sheet { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-3h) var(--s-5) calc(20px + var(--safe-bottom)); max-height: 90%; overflow-y: auto;}
.composer-head { text-align: left;}
.composer-head-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.2px; color: var(--text); margin: 0 0 var(--s-1);}
.composer-head-sub { color: var(--text-2); letter-spacing: .1px; margin: 0;}
.composer-attach { display: flex; align-items: center; gap: var(--s-2h); width: 100%; padding: var(--s-1) 2px; background: transparent; border: none; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;}
.composer-attach-box { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--r-xs); background: var(--surface-soft); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--bg, #07101c); transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios);}
.composer-attach-box svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 3; fill: none;}
.composer-attach.is-on .composer-attach-box { background: var(--sage); border-color: var(--sage);}
.composer-attach-label { color: var(--text-2); letter-spacing: .1px; transition: color var(--dur-state) var(--ease-ios);}
.composer-attach.is-on .composer-attach-label { color: var(--text);}
.composer-attach:active { transform: scale(.99);}
.composer-preview-wrap { position: relative; padding: var(--s-3); border-radius: var(--r-lg); background: linear-gradient(155deg, var(--white-tint), var(--sage-wash)); border: 1px dashed var(--white-line); transition: opacity var(--dur-state) var(--ease-ios);}
.composer-preview-wrap.is-detached { opacity: .4;}
.composer-preview-label { position: absolute; top: -8px; left: 16px; padding: 2px var(--s-2); border-radius: 999px; background: var(--bg, #07101c);}
.composer-note-wrap { display: flex; flex-direction: column; gap: var(--s-2);}
.composer-note-label .optional { color: var(--text-3); font-weight: 500; letter-spacing: .2px; text-transform: none; margin-left: var(--s-1); opacity: .8;}
.composer-note { width: 100%; min-height: 64px; resize: none; padding: var(--s-3) var(--s-3h); border-radius: var(--r-md); background: var(--surface-soft); border: 1px solid var(--border); color: var(--text); letter-spacing: .1px; outline: none; transition: border-color var(--dur-state) ease, background var(--dur-state) ease;}
.composer-note::placeholder { color: var(--text-3);}
.composer-note:focus { border-color: var(--sage-glow-45); background: var(--white-veil);}
.composer-cta { transition: border-color var(--dur-state) var(--ease-ios), background var(--dur-state) var(--ease-ios);}
.composer-cta:hover { background: var(--sage-tint);}
.reminder-time-wheel-wrap { height: 148px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);}
.reminder-wheel-col { height: 148px;}
.reminder-wheel-item { height: 44px; font-size: var(--fs-h2-md); font-weight: 300; color: var(--text-3); letter-spacing: 1px; font-variant-numeric: tabular-nums; transition: color var(--dur-state) var(--ease-ios), font-weight var(--dur-state) var(--ease-ios);}
.reminder-wheel-item.is-selected { color: var(--text); font-weight: 500; font-size: var(--fs-h2-lg); letter-spacing: .5px;}
.reminder-wheel-item.pad { height: 48px;}
.reminder-wheel-sep { font-size: var(--fs-h2-md); font-weight: 300; color: var(--text-2); padding: 0 var(--s-1h);}
@media (prefers-reduced-motion: reduce) { .reminder-wheel-item { transition: none;}
}
@media (prefers-reduced-motion: reduce) { .sound-v2-chip, .composer-attach, .composer-cta { transition: none;}
}
.stats-soft-card { background: transparent; border: 0; border-radius: 0; padding: var(--s-4h) 0; margin: 0;}
.stats-pa-card { border-top: 1px solid var(--border);}
.stats-card-lbl { font-size: var(--fs-label); color: var(--text-2); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: var(--s-2); white-space: nowrap;}
.stats-breaths-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);}
.stats-breaths-num { line-height: 1;}
.stats-breaths-delta { color: var(--sage); font-weight: 600; white-space: nowrap;}
.stats-duo { display: flex; gap: 0; border-top: 1px solid var(--border); padding-top: var(--s-4h);}
.stats-duo > .stats-soft-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 0;}
.stats-duo > .stats-soft-card:first-child { padding-right: var(--s-4h);}
.stats-duo > .stats-soft-card:last-child { border-left: 1px solid var(--border); padding-left: var(--s-4h);}
.stats-streak-top { display: flex; align-items: baseline; gap: 0; margin-bottom: 0; transform: translateX(-2px);}
.stats-streak-flame { display: inline-flex; color: var(--amber); transform: translateY(2px);}
.stats-streak-flame svg { width: 22px; height: 22px;}
.stats-streak-num.metric-display, .stats-hold-val.metric-display { font-size: var(--fs-h2-md);}
.stats-streak-num { color: var(--amber); margin: 0;}
.stats-streak-goal { color: var(--text-3); font-size: var(--fs-label); letter-spacing: .3px; margin-left: var(--s-2h);}
.stats-streak-freeze { display: inline-flex; align-items: center; gap: var(--s-1h); margin-top: var(--s-2); color: var(--sage); font-weight: 600;}
.stats-freeze-ico { display: inline-flex;}
.stats-freeze-ico svg { width: 14px; height: 14px;}
.stats-hold-val { color: var(--amber);}
.stats-hold-delta { color: var(--text-3); font-size: var(--fs-label); margin-top: var(--s-2);}
.stats-pa-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4);}
.stats-pa-title { font-size: var(--fs-h3); font-weight: 600; color: var(--text); line-height: 1.2;}
.stats-pa-sub { font-size: var(--fs-label); color: var(--text-2); margin-top: 2px;}
.stats-empty-num { color: var(--text-2);}
.stats-empty-hint { color: var(--text-2); margin-top: var(--s-1h);}
.stats-ghost-bars { display: flex; align-items: flex-end; gap: var(--s-2); margin-top: var(--s-4);}
.stats-ghost-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-2);}
.stats-ghost-bar { width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--white-rule);}
.stats-ghost-day { font-size: var(--fs-micro); color: var(--text-3); letter-spacing: .5px;}
.stats-after-row { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-2h) 0;}
.stats-after-row + .stats-after-row { margin-top: 2px;}
.stats-after-ico { width: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--sage);}
.stats-after-ico svg { width: 24px; height: 24px; filter: drop-shadow(0 0 6px var(--sage-glow));}
.stats-after-text { color: var(--text-2);}
.stats-adv-head { display: flex; align-items: baseline; justify-content: space-between;}
.stats-adv-note { color: var(--text-3);}
.stats-adv-locked { position: relative; max-height: 460px; overflow: hidden; border-radius: var(--r-lg); margin-top: var(--s-3);}
.stats-adv-blur { filter: blur(7px); opacity: .5; pointer-events: none; user-select: none;}
.stats-adv-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-2); text-align: center; padding: var(--s-6) var(--s-5) var(--s-5); background: linear-gradient(180deg, transparent, var(--bg-0) 88%);}
.stats-adv-lock-ico { color: var(--sage);}
.stats-adv-lock-ico svg { width: var(--icon-lg); height: var(--icon-lg);}
.stats-adv-lock-title { color: var(--text); font-weight: 700; font-size: var(--fs-h3);}
.stats-adv-lock-sub { color: var(--text-3); max-width: 22em;}
.stats-adv-lock-btn { margin-top: var(--s-2); width: auto; padding: var(--s-3) var(--s-6);}
.stats-hp-chart { width: 100%; height: 84px; display: block; margin-top: var(--s-3);}
.stats-hp-area { fill: var(--sage-soft);}
.stats-hp-line { fill: none; stroke: var(--sage); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;}
.stats-hp-foot { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-2h);}
.stats-hp-cur { color: var(--sage); font-size: var(--fs-h3);}
.stats-hp-cur-lbl { color: var(--text-3);}
.stats-hm-hint { color: var(--text-3); margin-top: var(--s-1h);}
.stats-hm-body { display: flex; gap: var(--s-1h); align-items: stretch; margin-top: var(--s-3);}
.stats-hm-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; align-items: center; justify-items: end; flex: 0 0 auto; color: var(--text-3); font-size: var(--fs-mini); line-height: 1;}
.stats-heatmap { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; aspect-ratio: 12 / 7;}
.stats-hm-cell { border-radius: 2px; background: var(--white-mist);}
.stats-hm-cell[data-lvl="1"] { background: var(--sage-100);}
.stats-hm-cell[data-lvl="2"] { background: var(--sage-200);}
.stats-hm-cell[data-lvl="3"] { background: var(--sage); opacity: .72;}
.stats-hm-cell[data-lvl="4"] { background: var(--sage);}
.stats-hm-cell[data-lvl="x"] { background: transparent;}
.stats-hm-legend { display: flex; align-items: center; gap: var(--s-1); justify-content: flex-end; margin-top: var(--s-2h); color: var(--text-3);}
.stats-hm-key { width: 11px; height: 11px; border-radius: 2px; display: inline-block; background: var(--white-mist);}
.stats-hm-key[data-lvl="1"] { background: var(--sage-100);}
.stats-hm-key[data-lvl="2"] { background: var(--sage-200);}
.stats-hm-key[data-lvl="3"] { background: var(--sage); opacity: .72;}
.stats-hm-key[data-lvl="4"] { background: var(--sage);}
.stats-tb { margin-top: var(--s-2h); display: flex; flex-direction: column; gap: var(--s-2h);}
.stats-tb-row { display: flex; align-items: center; gap: var(--s-2h);}
.stats-tb-name { flex: 0 0 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);}
.stats-tb-track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--white-mist); overflow: hidden;}
.stats-tb-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--sage);}
.stats-tb-min { flex: 0 0 auto; min-width: 34px; text-align: right; color: var(--text-3);}
.stats-pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2h); margin-top: var(--s-2h);}
.stats-pr-cell { background: var(--white-mist); border-radius: var(--r-lg); padding: var(--s-3) var(--s-3h);}
.stats-pr-val { color: var(--text); font-size: var(--fs-h3);}
.stats-pr-unit { font-size: var(--fs-mini); color: var(--text-3);}
.stats-pr-lbl { color: var(--text-3); font-size: var(--fs-mini); margin-top: var(--s-1);}
.stats-insight { display: flex; align-items: center; gap: var(--s-3);}
.stats-insight-ico { color: var(--sage); flex-shrink: 0; display: inline-flex;}
.stats-insight-ico svg { width: var(--icon-md); height: var(--icon-md);}
.stats-insight-text { color: var(--text-2);}
.stats-insight-text strong { color: var(--text); font-weight: 600;}
.stats-range-seg { display: inline-flex; gap: 2px; flex-shrink: 0; padding: var(--s-1); background: var(--white-tint); border-radius: var(--r-pill);}
.stats-range-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 34px; padding: 0 var(--s-2h); background: transparent; border: 0; border-radius: var(--r-pill); color: var(--text-3); font-size: var(--fs-caption); font-weight: 600; cursor: pointer; transition: background var(--dur-state) ease, color var(--dur-state) ease;}
.stats-range-btn:hover { color: var(--text-2);}
.stats-range-btn.is-on { background: var(--sage-soft); color: var(--sage);}
.stats-bars { display: flex; align-items: flex-end; gap: var(--s-2h); height: 150px; margin-bottom: var(--s-3h);}
.stats-bars.is-dense { gap: 3px;}
.stats-bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-1h); height: 100%;}
.stats-bar-val { font-size: var(--fs-mini); font-weight: 600; color: var(--text-3); line-height: 1; min-height: 10px;}
.stats-bar-val.is-empty { visibility: hidden;}
.stats-bar-track { flex: 1 1 0; width: 100%; display: flex; align-items: flex-end; justify-content: center;}
.stats-bar { width: 100%; max-width: 40px; border-radius: var(--r-sm); background: var(--sage-400); transition: height var(--dur-state) var(--ease-ios);}
.stats-bars.is-dense .stats-bar { max-width: none; border-radius: 3px;}
.stats-bar.is-empty { height: 4px; background: var(--white-line); box-shadow: none;}
.stats-bar.has-val { background: linear-gradient(180deg, var(--sage) 0%, var(--sage-400) 100%);}
.stats-bar.is-active.has-val { background: linear-gradient(180deg, var(--sage) 0%, var(--sage-300, var(--sage)) 100%); box-shadow: 0 0 14px 1px var(--sage-170);}
.stats-bar-lbl { font-size: var(--fs-mini); font-weight: 500; color: var(--text-3); letter-spacing: 0.3px;}
.stats-bar-lbl.is-active { color: var(--sage); font-weight: 700;}
.stats-bars.is-month { position: relative;}
.stats-bars.is-month .stats-bar.is-empty { display: none;}
.stats-bars.is-month::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: var(--r-sm); background: var(--white-line);}
.stats-bars.has-yaxis { position: relative; box-sizing: border-box; padding-left: var(--s-6);}
.stats-yaxis { position: absolute; inset: 0; pointer-events: none;}
.stats-yax-line { position: absolute; left: var(--s-6); right: 0; top: 0; border-top: 1px dashed var(--white-line);}
.stats-yax-max, .stats-yax-zero { position: absolute; left: 0; width: 26px; text-align: right; font-size: var(--fs-mini); font-weight: 500; color: var(--text-3); line-height: 1; letter-spacing: 0.3px;}
.stats-yax-max { top: 0; transform: translateY(-45%);}
.stats-yax-zero { bottom: 0;}
.stats-bars.has-yaxis:not(.is-month) .stats-yax-zero { bottom: 20px;}
.stats-bars.has-yaxis.is-month::after { left: var(--s-6);}
.stats-axis { display: flex; justify-content: space-between; margin: var(--s-1h) 0 var(--s-3h); font-size: var(--fs-mini); font-weight: 500; color: var(--text-3); letter-spacing: 0.3px;}
.stats-pa-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); padding-top: var(--s-3h); border-top: 1px solid var(--border);}
.stats-pa-stat { min-width: 0;}
.stats-pa-stat:nth-child(2) { text-align: center;}
.stats-pa-stat:nth-child(3) { text-align: right;}
.stats-pa-val { color: var(--text);}
.stats-pa-unit { font-size: var(--fs-label); font-weight: 500; color: var(--text-3); margin-left: 3px; font-family: var(--font-body);}
.stats-pa-val--delta { color: var(--sage);}
.stats-pa-lbl { font-size: var(--fs-label); color: var(--text-3); margin-top: 2px;}
.stats-scroll { display: flex; flex-direction: column; padding-top: var(--s-3);}
@media (prefers-reduced-motion: reduce) { .stats-bar { transition: none;}
}
@media (max-width: 380px) { .page-title { font-size: var(--fs-h2);}
}
.hist-top-bar { justify-content: flex-start; gap: var(--s-3); padding: calc(12px + var(--safe-top)) max(var(--gutter), var(--safe-right)) var(--s-2) max(var(--gutter), var(--safe-left));}
.hist-month { margin-left: auto; align-self: center; position: relative; top: 1px; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; color: var(--sage); font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent;}
.hist-month-chev { display: inline-flex;}
.hist-month-chev svg { width: 14px; height: 14px; stroke-width: 2.4;}
.hist-cal-scrim { position: fixed; inset: 0; z-index: var(--z-overlay);}
.hist-cal { position: fixed; z-index: calc(var(--z-overlay) + 1); top: calc(var(--safe-top, 0px) + 60px); right: max(var(--gutter), var(--safe-right)); left: auto; width: min(330px, calc(100vw - 2 * var(--gutter))); transform-origin: top right; animation: hist-cal-pop var(--dur-state) var(--ease-ios) both; background: var(--bg-2); border: 1px solid var(--white-line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--elev-3);}
@keyframes hist-cal-pop { from { opacity: 0; transform: translateY(-6px) scale(.96);}
to { opacity: 1; transform: translateY(0) scale(1);}
}
.hist-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3h);}
.hist-cal-title { font-size: var(--fs-h3); font-weight: 600; color: var(--text);}
.hist-cal-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--white-line); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--dur-state) ease, color var(--dur-state) ease;}
.hist-cal-nav:hover:not(:disabled) { border-color: var(--sage); color: var(--sage);}
.hist-cal-nav:disabled { opacity: .3; cursor: default;}
.hist-cal-nav svg { width: 16px; height: 16px;}
.hist-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--s-1h);}
.hist-cal-dow span { text-align: center; font-size: var(--fs-mini); font-weight: 600; color: var(--text-3); letter-spacing: 0.3px;}
.hist-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-1);}
.hist-cal-cell { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-label); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--dur-state) ease, color var(--dur-state) ease;}
.hist-cal-cell.is-blank { visibility: hidden;}
.hist-cal-cell.is-future { color: var(--text-3); opacity: .35; cursor: default;}
.hist-cal-cell:hover:not(.is-future):not(.is-sel) { background: var(--white-mist);}
.hist-cal-cell.is-today { color: var(--sage); font-weight: 700;}
.hist-cal-cell.is-sel { background: var(--sage); color: var(--bg-0); font-weight: 700;}
.hist-cal-cell.has-data::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--sage);}
.hist-cal-cell.is-sel.has-data::after { background: var(--bg-0);}
.hist-top-bar .page-title { position: relative; top: 1px;}
.comm-friend-row, .comm-suggested-row { background: var(--surface-soft); border: 1px solid var(--border); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;}
.hist-empty { background: transparent; border: 0; border-radius: 0;}
.hist-empty { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; min-height: 52vh; gap: var(--s-2);}
.hist-empty-icon { width: 56px; height: 56px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--sage-soft); color: var(--sage); display: inline-flex; align-items: center; justify-content: center;}
.hist-empty-icon svg { width: 24px; height: 24px;}
.hist-empty-cta { margin-top: var(--s-3h); min-width: 220px;}
.hist-daystrip { display: flex; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4h);}
.hist-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-1h); padding: var(--s-2) 0 var(--s-2h); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: background var(--dur-state) ease, border-color var(--dur-state) ease;}
.hist-day:hover { background: var(--white-mist);}
.hist-day-dow { font-size: var(--fs-mini); font-weight: 500; color: var(--text-3); letter-spacing: 0.4px;}
.hist-day-num { font-size: var(--fs-h3); font-weight: 600; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums;}
.hist-day.is-blank .hist-day-num { color: var(--text-3);}
.hist-day.is-sel, .hist-day.is-sel:hover, .hist-daystrip:not(.is-filtered) .hist-day.is-today { background: var(--sage); border-color: var(--sage);}
.hist-day.is-sel .hist-day-dow, .hist-day.is-sel .hist-day-num, .hist-daystrip:not(.is-filtered) .hist-day.is-today .hist-day-dow, .hist-daystrip:not(.is-filtered) .hist-day.is-today .hist-day-num { color: var(--on-sage);}
.hist-day.is-sel .hist-day-dow, .hist-daystrip:not(.is-filtered) .hist-day.is-today .hist-day-dow { font-weight: 700;}
.hist-daystrip.is-filtered .hist-day.is-today:not(.is-sel) { border-color: var(--sage);}
.hist-day.is-future { opacity: .45;}
.hist-techfilter { position: relative; margin-bottom: var(--s-5);}
.hist-techfilter-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-3h); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); cursor: pointer; transition: background var(--dur-state) ease, border-color var(--dur-state) ease;}
.hist-techfilter-btn:hover { background: var(--white-mist);}
.hist-techfilter-label { font-weight: 500;}
.hist-techfilter-chev { display: inline-flex; color: var(--text-3); transition: transform var(--dur-state) var(--ease-ios);}
.hist-techfilter-chev svg { width: 16px; height: 16px;}
.hist-techfilter-chev.is-open { transform: rotate(180deg);}
.hist-techmenu-scrim { position: fixed; inset: 0; z-index: var(--z-overlay);}
.hist-techmenu { position: relative; z-index: calc(var(--z-overlay) + 1); margin-top: var(--s-2); border: 1px solid var(--white-line); border-radius: var(--r-lg); background: var(--bg-2); padding: var(--s-1h); max-height: 48vh; overflow-y: auto; overscroll-behavior: contain;}
.hist-techmenu-item { width: 100%; display: flex; align-items: center; gap: var(--s-2h); min-height: 44px; padding: var(--s-2h) var(--s-3); background: transparent; border: 0; border-radius: var(--r-md); text-align: left; cursor: pointer; transition: background var(--dur-state) ease;}
.hist-techmenu-item:hover { background: var(--white-mist);}
.hist-techmenu-item.active { background: var(--sage-soft);}
.hist-techmenu-item.active:hover { background: var(--sage-soft);}
.hist-techmenu-all { margin-bottom: var(--s-1);}
.hist-techmenu-grid { display: flex; flex-direction: column;}
.hist-techmenu-label { flex: 1; min-width: 0; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hist-techmenu-item.active .hist-techmenu-label { color: var(--sage);}
.hist-techmenu-check { display: inline-flex; width: 16px; height: 16px; color: var(--sage); flex-shrink: 0;}
.hist-techmenu-check svg { width: 100%; height: 100%;}
.hist-nomatch { text-align: center; padding: var(--s-6) var(--s-4);}
.hist-nomatch-title { color: var(--text-3); margin: 0 0 var(--s-3);}
.hist-nomatch-clear { background: transparent; border: 0; color: var(--sage); font-weight: 600; font-size: var(--fs-label); cursor: pointer; padding: var(--s-1) var(--s-2);}
.hist-date-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: var(--s-5) 0 var(--s-2h);}
.hist-date-head:first-of-type { margin-top: var(--s-3);}
.hist-date-group { color: var(--text); font-weight: 600; margin: 0;}
.hist-date-sum { color: var(--sage); font-weight: 600; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums;}
.hist-rec { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0;}
.hist-rec + .hist-rec { border-top: 1px solid var(--border);}
.hist-rec-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--icon-fill); color: var(--sage); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.hist-rec-ico svg { width: 20px; height: 20px;}
.hist-rec-body { flex: 1; min-width: 0;}
.hist-rec-name { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hist-rec-meta { margin: 2px 0 0; color: var(--text-3);}
.hist-rec-pbtag { color: var(--sage); font-weight: 600;}
.hist-rec-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2);}
.hist-rec-dur { margin: 0; font-weight: 600; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums;}
.hist-rec-hold { display: inline-block; font-size: var(--fs-mini); font-weight: 700; letter-spacing: 0.4px; color: var(--sage); background: var(--sage-soft); padding: var(--s-1) var(--s-2h); border-radius: var(--r-pill); font-variant-numeric: tabular-nums;}
.hist-empty { text-align: center; padding: var(--s-6) var(--s-4h);}
.hist-empty-title { color: var(--text-2); font-weight: 500; margin: 0;}
.hist-empty-sub { margin: var(--s-1) 0 0;}
.hist-empty-cta { margin: var(--s-5) auto 0; display: inline-flex; min-width: 200px; justify-content: center;}
.stats-empty-cta { margin-top: auto; display: flex; justify-content: center;}
.legal-page { color: var(--text);}
.legal-page p { margin: 0 0 var(--s-4);}
.legal-page .legal-meta { color: var(--text-3); margin-bottom: var(--s-5);}
.legal-h { font-family: var(--font-display); font-weight: 600; color: var(--text); letter-spacing: -.1px; margin: var(--s-5) 0 var(--s-2h);}
.safe-disc { background: rgba(224, 138, 138, 0.06); border: 1px solid rgba(224, 138, 138, 0.22); border-radius: var(--r-lg2); padding: var(--s-4); margin-bottom: var(--s-5); display: flex; gap: var(--s-3); align-items: flex-start;}
.safe-disc-ico { width: 28px; height: 28px; border-radius: 50%; background: rgba(224, 138, 138, 0.14); color: var(--rose); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;}
.safe-disc-ico svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none;}
.safe-disc-name { font-weight: 700; color: var(--rose); letter-spacing: -.1px; margin: 0 0 var(--s-1h);}
.safe-disc-body { line-height: 1.55; color: var(--text-2); margin: 0;}
.safe-sec { font-size: var(--fs-mini); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin: 0 0 var(--s-3);}
.safe-sec.warn { color: var(--rose);}
.safe-sec-pre { display: inline-flex; align-items: center; gap: var(--s-1h);}
.safe-sec-ico { width: 11px; height: 11px; display: inline-flex; color: currentColor;}
.safe-sec-ico svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none;}
.safe-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3);}
.safe-list li { position: relative; padding-left: var(--s-4h); line-height: 1.55; color: var(--text);}
.safe-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--rose);}
.safe-list.warn li::before { background: var(--rose); box-shadow: 0 0 6px rgba(224, 138, 138, 0.35);}
.safe-list b { color: var(--text); font-weight: 600;}
.safe-foot { font-size: var(--fs-label); line-height: 1.6; color: var(--text-3); padding: var(--s-3h) var(--s-4); margin: var(--s-1) 0 0; background: rgba(125, 142, 176, 0.06); border-left: 2px solid var(--moon); border-radius: 0 var(--r-sm) var(--r-sm) 0;}
.diag-note { line-height: 1.55; color: var(--text-3); margin: 0 0 var(--s-4);}
.diag-actions { display: flex; gap: var(--s-2h); margin-bottom: var(--s-4);}
.diag-btn { flex: 1; padding: var(--s-2h) var(--s-3); border-radius: var(--r-lg); background: var(--white-veil); border: 1px solid var(--white-mist); color: var(--text); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: border-color var(--dur-state) var(--ease-ios);}
.diag-btn:hover { border-color: var(--border-strong);}
.diag-btn-clear { color: var(--rose);}
.diag-entry { background: var(--white-wash); border: 1px solid var(--white-mist); border-radius: var(--r-lg); padding: var(--s-3); margin-bottom: var(--s-2h);}
.diag-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2);}
.diag-entry-kind { font-size: var(--fs-mini); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--rose);}
.diag-entry-ts { font-size: var(--fs-mini); color: var(--text-3);}
.diag-entry-detail { margin: 0; font-size: var(--fs-label); line-height: 1.5; color: var(--text-2); white-space: pre-wrap; word-break: break-word;}
.diag-empty { padding: var(--s-7) var(--s-4);}
.install-nudge { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); padding-right: var(--s-6); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);}
.install-nudge-icon { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--sage-soft); color: var(--sage);}
.install-nudge-icon svg { width: 22px; height: 22px;}
.install-nudge-body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1);}
.install-nudge-sub { margin-bottom: var(--s-1);}
.install-nudge-close { position: absolute; top: var(--s-2); right: var(--s-2); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: var(--r-sm);}
.install-nudge-close svg { width: 16px; height: 16px;}
.install-nudge-cta { display: inline-flex; align-items: center; gap: var(--s-1h); align-self: flex-start; margin-top: var(--s-1); padding: var(--s-1h) var(--s-3); background: var(--sage-soft); color: var(--sage); border: 1px solid var(--border-warm); border-radius: var(--r-pill); cursor: pointer;}
.install-nudge-cta svg { width: 15px; height: 15px;}
.install-nudge-ios { margin-top: var(--s-1);}
.install-nudge-share { display: inline-flex; vertical-align: middle;}
.install-nudge-share svg { width: 14px; height: 14px; vertical-align: middle;}
.pc-screen .pc-body.pc-body-lean { gap: var(--s-4h); padding-top: var(--s-3);}
.pc-screen .pc-body.pc-body-lean .pc-content-lean { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-4h); overflow-y: auto; scrollbar-width: none;}
.pc-screen .pc-body.pc-body-lean .pc-content-lean::-webkit-scrollbar { display: none;}
.pc-screen .pc-body.pc-body-lean .pc-content-lean > :first-child { margin-top: auto;}
.pc-screen .pc-body.pc-body-lean .pc-content-lean > :last-child { margin-bottom: auto;}
.pc-hero-icon { width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid var(--sage); background: radial-gradient(circle, var(--sage-100) 0%, var(--bg-1) 70%); display: flex; align-items: center; justify-content: center; color: var(--sage);}
.pc-hero-icon .pc-check-svg { width: 30px; height: 30px; color: var(--sage);}
.pc-hero-icon .pc-check-svg svg { width: 100%; height: 100%; stroke: var(--sage);}
.pc-card.pc-metrics-lean { padding: var(--s-4h) var(--s-3h); background: transparent; border: 0; border-radius: 0;}
.pc-card.pc-metrics-lean .pc-stat-row { width: 100%; margin: 0; background: transparent; gap: 0; border-radius: 0; overflow: visible;}
.pc-card.pc-metrics-lean .stat-col { background: transparent; padding: var(--s-1) var(--s-2); gap: var(--s-2); position: relative;}
.pc-card.pc-metrics-lean .stat-col + .stat-col::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--border); opacity: .6;}
.pc-card.pc-metrics-lean .stat-val { font-family: var(--font-display); font-size: var(--fs-h2-md); font-weight: 600; line-height: 1.05; letter-spacing: -.4px; color: var(--text); margin-bottom: var(--s-1h); font-variant-numeric: tabular-nums;}
.pc-card.pc-metrics-lean .stat-val-num { font-size: var(--fs-h2-md); font-weight: 600; letter-spacing: -.4px;}
.pc-card.pc-metrics-lean .stat-val-unit { font-size: var(--fs-body); font-weight: 500; color: var(--text-3);}
.pc-card.pc-metrics-lean .stat-lbl { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3);}
.pc-pb-pill { display: flex; align-items: center; gap: var(--s-2h); width: 100%; padding: var(--s-3) var(--s-3h); border-radius: var(--r-lg); background: var(--amber-50); border: 1px solid var(--amber-100); box-sizing: border-box; user-select: none;}
.pc-pb-pill-ico { display: inline-flex; width: 18px; height: 18px; color: var(--amber); flex-shrink: 0;}
.pc-pb-pill-ico svg { width: 100%; height: 100%;}
.pc-pb-pill-text { flex: 1; min-width: 0; font-weight: 500; letter-spacing: .1px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pc-pb-pill-val { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--amber); letter-spacing: .2px; flex-shrink: 0;}
.pc-backup-nudge { padding: var(--s-4); border-radius: var(--r-lg); background: var(--sage-90); border: 1px solid var(--sage-170); text-align: center; transition: opacity var(--dur-state) var(--ease-ios), transform var(--dur-state) var(--ease-ios);}
.pc-backup-nudge.is-dismissed { opacity: 0; transform: translateY(6px); pointer-events: none;}
.pc-backup-title { font-weight: 700; color: var(--text);}
.pc-backup-sub { color: var(--text-2); margin-top: var(--s-1);}
.pc-backup-actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3h);}
.pc-backup-later { background: transparent; border: 0; cursor: pointer; color: var(--text-3); font-weight: 600; padding: var(--s-2);}
.pc-actions.pc-actions-lean { gap: var(--s-3); padding-top: var(--s-4);}
.pc-actions-lean .pc-secondary { border-color: var(--border-warm); color: var(--sage); text-transform: uppercase; letter-spacing: 1.4px; font-size: var(--fs-caption); padding: var(--s-3h) var(--s-4h);}
.pc-card.pc-rounds-card { padding: var(--s-4) var(--s-3h); background: transparent; border: 0; border-radius: 0;}
.pc-rounds-title { font-weight: 600; letter-spacing: .2px; color: var(--text); margin: 0 0 var(--s-3);}
.pc-rounds-list { list-style: none; margin: 0; padding: 0;}
.pc-round-row { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s-3h); align-items: center; padding: var(--s-3) 0; min-height: 44px;}
.pc-round-row:first-child { padding-top: var(--s-2);}
.pc-round-row:last-child { padding-bottom: var(--s-2);}
.pc-round-num { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: .5px;}
.pc-round-row.is-longest .pc-round-num { color: var(--sage);}
.pc-round-bar { position: relative; height: 6px; background: var(--white-mist); border-radius: var(--r-pill); overflow: visible;}
.pc-round-bar-fill { position: relative; height: 100%; background: linear-gradient(90deg, rgba(125,211,232,0.45) 0%, var(--sage) 100%); border-radius: var(--r-pill); transition: width var(--dur-page) ease;}
.pc-round-time { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .3px; white-space: nowrap;}
.prof-scroll { padding-top: var(--s-1);}
.prof-scroll-v3 { padding-top: calc(22px + var(--safe-top));}
.prof-headbar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) 0 var(--s-4h);}
.prof-headbar--v4 { position: relative; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding-top: var(--s-1);}
.prof-headbar--v4 .prof-settings-gear { position: absolute; top: 0; right: 0;}
.prof-headbar--v4 .prof-id { flex: 0 0 auto; align-self: stretch; align-items: center;}
.prof-headbar--v4 .prof-name-row { justify-content: center; align-self: stretch;}
.prof-headbar--v4 .prof-name-row::before { content: ''; flex: 0 0 30px;}
.prof-orb { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; margin-top: var(--s-2);}
.prof-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--sage-170); pointer-events: none;}
.prof-orb-ring--2 { inset: 6px; border-color: var(--sage-90);}
.prof-orb-glow { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, var(--sage-170) 0%, transparent 70%); filter: blur(8px); pointer-events: none; animation: prof-orb-breathe 3.6s ease-in-out infinite;}
.prof-headbar--v4 .prof-avatar.prof-avatar-lg { position: relative; z-index: 1; width: 120px; height: 120px;}
@keyframes prof-orb-breathe { 0%, 100% { opacity: .55; transform: scale(.95);}
50% { opacity: 1; transform: scale(1.05);}
}
@media (prefers-reduced-motion: reduce) { .prof-orb-glow { animation: none;}
}
.prof-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2h); margin: var(--s-1) 0 var(--s-5);}
.prof-chip { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); background: var(--chip-fill); color: var(--text-2); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .2px; line-height: 1; white-space: nowrap;}
.prof-chip--streak { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber);}
.prof-avatar.prof-avatar-lg { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--sage); background: var(--icon-fill); box-shadow: 0 0 18px var(--sage-100); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--sage); margin: 0; padding: 0; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-state) var(--ease-ios);}
.prof-avatar.prof-avatar-lg:active { transform: scale(.96);}
.prof-avatar.prof-avatar-lg::after { content: none;}
.prof-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block;}
.prof-id { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;}
.prof-name.prof-name-v3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.4px; color: var(--text); margin: 0; line-height: 1.12; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.prof-meta { font-family: var(--font-body); font-weight: 400; color: var(--text-3); margin: 1px 0 0; letter-spacing: .1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.prof-name-row { display: flex; align-items: center; gap: var(--s-2h); min-width: 0;}
.prof-name-row .prof-name { flex: 0 1 auto;}
.prof-edit-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; border: none; color: var(--moon); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--dur-state) ease, transform var(--dur-tap) ease;}
.prof-edit-icon svg { width: 17px; height: 17px;}
.prof-edit-icon:hover { color: var(--sage);}
.prof-edit-icon:active { transform: scale(.9);}
.prof-settings-gear { flex: 0 0 auto; color: var(--sage); width: 40px; height: 40px;}
.prof-settings-gear svg { width: 20px; height: 20px;}
.prof-settings-gear { transition: box-shadow var(--dur-tap) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.prof-settings-gear:active { box-shadow: 0 0 12px var(--sage-170);}
.prof-reminders-row { display: flex; align-items: center; gap: var(--s-3h); width: 100%; margin: 0; padding: var(--row-pad-y) 0; background: transparent; border: 0; border-radius: 0; text-align: left; cursor: pointer; font-family: var(--font-body); transition: background var(--dur-state) ease, transform var(--dur-tap) ease; -webkit-tap-highlight-color: transparent;}
.prof-reminders-row + .prof-reminders-row { border-top: 1px solid var(--border);}
.prof-reminders-row:hover { background: var(--white-mist);}
.prof-reminders-row:active { transform: scale(.99);}
.prof-reminders-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0;}
.prof-reminders-title { font-family: var(--font-display);}
.prof-ach-header { margin: var(--s-5) 0 var(--s-2h); line-height: 1;}
.prof-ach-eyebrow { margin: 0; line-height: 1;}
.ach-title-count { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; letter-spacing: .1px; color: var(--text-3); font-variant-numeric: tabular-nums;}
.ach-title-count b { color: var(--sage); font-weight: 700;}
.prof-ach-seeall { align-items: baseline; gap: var(--s-1h); line-height: 1;}
.prof-ach-seeall:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 4px;}
.prof-ach-seeall { align-items: center;}
.prof-ach-seeall-arrow { display: inline-flex;}
.prof-ach-seeall-arrow svg { width: 16px; height: 16px; stroke-width: 2;}
.prof-starter { background: var(--surface-soft); border: 1.5px solid var(--border); border-radius: var(--r-2xl); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); display: flex; flex-direction: column;}
.prof-starter-eyebrow { color: var(--text-3); margin-bottom: var(--s-2);}
.prof-starter-title { margin: 0 0 var(--s-1h); color: var(--text); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); letter-spacing: var(--ls-h3);}
.prof-starter-desc { color: var(--text-2); margin: 0 0 var(--s-3h);}
.prof-starter-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3h);}
.prof-starter-btn { flex-shrink: 0; padding: var(--s-2h) var(--s-4h); border: 0; border-radius: var(--r-pill); background: var(--sage); color: var(--on-sage); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-md); letter-spacing: .2px; line-height: 1; cursor: pointer; transition: transform var(--dur-tap) var(--ease-ios);}
.prof-starter-btn:active { transform: scale(.96);}
.prof-starter-note { color: var(--text-3);}
:root[data-theme="dark"] .prof-starter-note { color: #94A3B8;}
.prof-scroll-v3 .settings-row-icon { width: var(--icon-lg); justify-content: flex-start;}
.prof-next-shelf { display: flex; align-items: stretch; gap: var(--s-2); padding: var(--s-2) 0 var(--s-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.prof-next-shelf::-webkit-scrollbar { display: none;}
.prof-next-cell { flex: 0 0 82px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--s-2); text-align: center; background: linear-gradient(135deg, rgba(var(--tint-rgb, 125,211,232), .16), var(--card-1) 58%); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-2h) var(--s-1); text-decoration: none; cursor: default;}
.prof-next-ring { width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--white-rule); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-3);}
.prof-next-ico { display: inline-flex; align-items: center; justify-content: center;}
.prof-next-ico svg { width: 18px; height: 18px;}
.prof-next-ring.is-earned { border-style: solid; border-color: var(--sage); color: var(--sage);}
.prof-next-name { color: var(--text-2); font-weight: 500; line-height: 1.2; min-height: 2.4em;}
.sub-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1); padding: var(--s-1) 0 var(--s-5); margin: 0 0 var(--s-5); background: transparent; border: 0; border-radius: 0; box-shadow: none;}
.sub-hero-badge { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sage-soft); color: var(--sage); margin-bottom: var(--s-1h);}
.sub-hero-badge svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none;}
.sub-hero-plan { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.3px; color: var(--text);}
.sub-hero-cycle { font-family: var(--font-body); color: var(--text-2); letter-spacing: .1px;}
.sub-hero-price { margin-top: var(--s-2);}
.sub-hero-per { font-family: var(--font-body); font-weight: 500; color: var(--text-3); margin-left: 2px;}
.sub-perks-eyebrow { margin: var(--s-4) 0 var(--s-3); color: var(--text-3);}
.sub-perks { display: flex; flex-direction: column; gap: var(--s-3); margin: 0 0 var(--s-5);}
.sub-perk { display: flex; align-items: flex-start; gap: var(--s-3);}
.sub-perk-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--sage-soft); color: var(--sage); display: inline-flex; align-items: center; justify-content: center;}
.sub-perk-check svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none;}
.sub-perk--soon .sub-perk-check { background: var(--surface-soft); color: var(--text-3);}
.sub-perk--soon .sub-perk-text { color: var(--text-2);}
.sub-perk-text { color: var(--text); letter-spacing: .1px;}
.sub-manage-row { gap: 0;}
.sub-cancel-title { color: var(--rose);}
.sub-manage-card { margin: var(--s-3) 0 var(--s-4);}
.sub-manage-card .prof-reminders-row { padding: var(--s-4) 0;}
.sub-manage-card .prof-reminders-row + .prof-reminders-row { border-top: 1px solid var(--border);}
.pw-link { background: none; border: 0; cursor: pointer; font-family: var(--font-body); color: var(--sage); padding: var(--s-1) 0;}
.edit-prof-body { padding: var(--s-1) var(--s-5) 0;}
.edit-prof-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.3px; color: var(--text); text-align: left; margin: var(--s-1) 0 var(--s-4h);}
.edit-prof-avatar-row { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5);}
.edit-prof-avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--sage); background: var(--icon-fill); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;}
.edit-prof-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block;}
.edit-prof-avatar-initial { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--sage);}
.edit-prof-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);}
.edit-prof-photo-btn { display: inline-block; position: relative; overflow: hidden; background: var(--sage-soft); border: 1px solid var(--sage-270); color: var(--sage); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .3px; padding: var(--s-2) var(--s-3h); border-radius: var(--r-pill); cursor: pointer; transition: background var(--dur-state) ease;}
.edit-prof-photo-btn:hover { background: var(--sage-90);}
.edit-prof-photo-remove { display: inline-flex; align-items: center; gap: var(--s-1h); background: transparent; border: 0; color: var(--rose); opacity: .82; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .3px; padding: var(--s-1h) var(--s-2) var(--s-1h) 0; margin: 0; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-state) ease, opacity var(--dur-state) ease;}
.edit-prof-photo-remove-ico { display: inline-flex;}
.edit-prof-photo-remove-ico svg { width: 1.05em; height: 1.05em;}
.edit-prof-photo-remove:hover { opacity: 1; background: var(--rose-50);}
.edit-prof-photo-remove:active { opacity: 1; background: var(--rose-100);}
.edit-prof-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.avatar-crop-overlay { position: absolute; inset: 0; z-index: var(--z-top); display: flex; align-items: center; justify-content: center; padding: var(--s-4);}
.avatar-crop-card { width: 100%; max-width: 320px; background: var(--card); border: 1px solid var(--white-line); border-radius: var(--r-2xl); padding: var(--s-5); display: flex; flex-direction: column; align-items: center; gap: var(--s-3);}
.avatar-crop-title { margin: 0;}
.avatar-crop-hint { color: var(--text-3); margin: 0; text-align: center;}
.avatar-crop-stage { position: relative; width: 260px; max-width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--card-1); touch-action: none; cursor: grab;}
.avatar-crop-stage:active { cursor: grabbing;}
.avatar-crop-img { position: absolute; top: 0; left: 0; user-select: none; -webkit-user-drag: none; will-change: transform;}
.avatar-crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.5); pointer-events: none;}
.avatar-crop-actions { margin-top: 0; width: 100%;}
.edit-prof-field { display: block; margin-bottom: var(--s-4);}
.edit-prof-label { display: block; margin-bottom: var(--s-2);}
.edit-prof-error { font-family: var(--font-body); color: var(--rose); margin: calc(-1 * var(--s-1h)) 2px var(--s-3h); letter-spacing: .1px;}
.settings-scroll { padding-top: var(--s-2);}
.settings-row-chev { display: inline-flex; width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0;}
.settings-row-chev svg { width: 100%; height: 100%;}
.lang-option-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;}
.lang-option-check { display: inline-flex; width: 16px; height: 16px; color: var(--sage); flex-shrink: 0;}
.lang-option-check svg { width: 100%; height: 100%;}
.settings-version { text-align: center; font-family: var(--font-body); font-size: var(--fs-mini); font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-3); padding: var(--s-4h) 0 var(--s-6); opacity: .6;}
.post-card.post-card-me { border-color: var(--border-warm);}
.row-flat-list { margin: 0;}
.row-flat-list .settings-row { padding-left: 0; padding-right: 0; padding-top: var(--row-pad-y); padding-bottom: var(--row-pad-y); min-height: 64px;}
.row-flat-list .settings-row + .settings-row { border-top: 1px solid var(--white-mist);}
.row-flat-list + .row-flat-list > .settings-row:first-child { border-top: 1px solid var(--white-mist);}
.settings-scroll .row-flat-list .settings-row { padding-top: var(--s-2h); padding-bottom: var(--s-2h); min-height: 56px;}
.settings-scroll .settings-group-label { margin: var(--s-5) 0 var(--s-2); color: var(--text-3);}
.settings-scroll > .settings-group-label:first-of-type { margin-top: var(--s-3);}
.row-badge { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: auto; flex-shrink: 0; padding: var(--s-1) var(--s-2h); border-radius: var(--r-pill); background: var(--sage-soft); color: var(--sage); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;}
.row-badge svg { width: 11px; height: 11px; stroke-width: 1.8;}
.row-badge--warn { background: var(--rose-100); color: var(--rose);}
.row-badge--muted { background: var(--white-mist); color: var(--text-3);}
.row-flat-list .row-title { display: inline-flex; align-items: center;}
.pg-hold-screen { background: radial-gradient(ellipse at 50% 38%, var(--amber-50) 0%, transparent 65%), var(--bg);}
.reminders-page { border-top: none; border-radius: 0;}
.reminders-page::before { content: none;}
.reminder-wheel-item { color: var(--text-3); font-family: var(--font-display); font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; letter-spacing: -.5px; transition: color var(--dur-state) ease, opacity var(--dur-state) ease;}
.reminder-wheel-item.is-selected { color: var(--text); font-weight: 600; opacity: 1;}
.reminder-wheel-item.pad { color: transparent; opacity: 0;}
.reminder-wheel-col { scrollbar-width: none; background: transparent;}
.reminder-wheel-sep { color: var(--text-3); font-family: var(--font-display); position: relative; z-index: 3;}
.rem-wheel-block { margin: var(--s-6) var(--s-5) var(--s-4); padding: var(--s-2h) var(--s-3); background: var(--surface-soft); border-radius: var(--r-xl);}
.rem-device-card { margin: 0 var(--s-5) var(--s-4); background: transparent; border: none; border-radius: 0; overflow: hidden;}
.rem-device-cell { background: transparent;}
.rem-device-cell + .rem-device-cell { border-top: 1px solid var(--border);}
.rem-device-cell.is-disabled .reminder-opt-icon, .rem-device-cell.is-disabled .reminder-opt-sub { opacity: .5;}
.rem-device-cell.is-disabled .toggle { opacity: .45;}
.rem-history-eyebrow { padding: var(--s-1) var(--s-5) var(--s-2);}
.reminders-active-list-soft { background: transparent; border: 0; border-radius: 0; margin: 0 var(--s-5);}
.reminders-active-list-soft .reminder-row { background: transparent;}
.reminders-active-list-soft .reminder-row:hover { background: transparent;}
.reminder-meta-lead { display: flex; align-items: baseline; gap: var(--s-2); color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: .1px;}
.reminder-time-lead { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--text); letter-spacing: -.2px; font-variant-numeric: tabular-nums;}
.reminder-meta-lead .dot-sep { opacity: .45;}
.reminder-meta-lead .countdown { color: var(--sage); font-weight: 500;}
@media (prefers-reduced-motion: reduce) { .pc-pb-pill, .prof-avatar-lg, .prof-edit-icon, .prof-reminders-row, .dialog-btn { transition: none; animation: none;}
.pc-hero-icon { animation: none; box-shadow: 0 0 28px var(--sage-glow);}
}
@media (max-width: 380px) { .prof-avatar.prof-avatar-lg { width: 66px; height: 66px; font-size: var(--fs-h2-lg);}
.prof-name.prof-name-v3 { font-size: var(--fs-h2);}
.pc-card.pc-metrics-lean .stat-val, .pc-card.pc-metrics-lean .stat-val-num { font-size: var(--fs-h2);}
.pc-pb-pill-text { font-size: var(--fs-caption);}
}
.compete-sub-tabs { display: flex; gap: var(--s-5); padding: 0 2px; margin: var(--s-1) 0 var(--s-4h);}
.compete-sub-tab { padding: var(--s-1h) 0 var(--s-2h); letter-spacing: .2px;}
.compete-sub-tab.active { color: var(--sage);}
.stats-soft-card.lb-stack { padding: 0 var(--s-3h); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; overflow: hidden;}
.lb-item { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-3) var(--s-1); border-bottom: 1px solid var(--white-mist);}
.lb-item:last-child { border-bottom: none;}
.lb-item.me { background: var(--sage-tint); margin: 0 calc(-1 * var(--s-3h)); padding-left: var(--s-4h); padding-right: var(--s-4h);}
.lb-item .lb-rank { flex: 0 0 24px; font-weight: 600; color: var(--text-3); text-align: center;}
.lb-avatar { width: 36px; height: 36px; font-size: var(--fs-body); flex-shrink: 0;}
.lb-id { flex: 1; min-width: 0;}
.lb-name { font-weight: 500; color: var(--text); line-height: 1.25;}
.lb-item.me .lb-name { font-weight: 700;}
.lb-you { color: var(--sage); font-size: var(--fs-label); font-weight: 500; margin-left: 2px;}
.lb-streak { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: 2px; font-size: var(--fs-label); color: var(--amber);}
.lb-streak-flame { display: inline-flex; width: 11px; height: 11px; color: var(--amber);}
.lb-xp { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; color: var(--text); letter-spacing: -.3px; flex-shrink: 0;}
.lb-item.me .lb-xp { color: var(--text);}
.lb-xp-unit { font-family: var(--font-body); font-size: var(--fs-mini); font-weight: 600; letter-spacing: 1px; color: var(--text-3); margin-left: var(--s-1);}
.rem-composer { position: relative; padding-bottom: var(--s-1);}
.rem-device-cell-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.rem-device-cell-tap:hover { background: var(--white-mist);}
.rem-device-cell-tap:hover .rem-chev { color: var(--text-2); transform: translateX(2px);}
.rem-device-cell-tap:active { transform: scale(.99);}
.rem-device-cell-trail { display: flex; align-items: center; gap: var(--s-1h); flex-shrink: 0; color: var(--text-3);}
.rem-chev { display: inline-flex; width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; transition: color var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios);}
.rem-chev svg { width: 16px; height: 16px;}
.rem-composer .toggle { width: 40px; height: 24px;}
.rem-composer .toggle.off { border: none; background: var(--white-line);}
.rem-composer .toggle.on { box-shadow: none;}
.rem-composer .toggle::after { width: 18px; height: 18px; top: 3px;}
.rem-composer .toggle.on::after { left: 19px;}
.rem-composer .toggle.off::after { left: 3px;}
.rem-date-clear { width: 22px; height: 22px; border-radius: 50%; background: var(--white-mist); border: none; color: var(--text-2); font-size: var(--fs-body); line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios);}
.rem-date-clear:hover { background: rgba(224,138,138,.18); color: var(--rose);}
.reminders-active-list-soft .reminder-row-wrap.is-active-edit .reminder-row { background: var(--sage-veil);}
.reminders-active-list-soft .reminder-row-wrap.is-active-edit::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--sage); box-shadow: 0 0 8px var(--sage-glow); z-index: 2;}
.reminder-row.disabled .reminder-meta-lead, .reminder-row.disabled .countdown, .reminder-row.disabled .reminder-time-lead { color: var(--text-3);}
.reminders-active-list-soft { overflow: hidden;}
.rem-cta-spacer { height: 18px; transition: height var(--dur-state) var(--ease-ios);}
.rem-composer.is-creating + .rem-cta-bar .rem-cta-btn, .rem-composer.is-creating ~ .rem-cta-bar .rem-cta-btn, .rem-composer.is-creating .rem-cta-spacer {}
.rem-composer.is-creating .rem-cta-spacer { height: 86px;}
.rem-cta-bar { position: sticky; bottom: 0; left: 0; right: 0; padding: 0 var(--s-5); max-height: 0; overflow: hidden; background: transparent; pointer-events: none; z-index: var(--z-raised); transition: max-height var(--dur-card) var(--ease-out-soft), padding 320ms var(--ease-out-soft);}
.rem-composer.is-creating ~ .rem-cta-bar, .rem-composer.is-creating + .rem-cta-bar { max-height: 160px; padding: var(--s-3) var(--s-5) calc(14px + var(--safe-bottom, 0px));}
.rem-cta-btn { pointer-events: none; opacity: 0; transform: translateY(110%); transition: opacity var(--dur-state) var(--ease-ios), transform 320ms var(--ease-out-soft); will-change: transform, opacity;}
.rem-composer.is-creating ~ .rem-cta-bar .rem-cta-btn, .rem-composer.is-creating + .rem-cta-bar .rem-cta-btn { pointer-events: auto; opacity: 1; transform: translateY(0);}
.rem-composer.is-creating ~ .rem-cta-bar .rem-cta-btn:disabled, .rem-composer.is-creating ~ .rem-cta-bar .rem-cta-btn[aria-disabled="true"], .rem-composer.is-creating + .rem-cta-bar .rem-cta-btn:disabled, .rem-composer.is-creating + .rem-cta-bar .rem-cta-btn[aria-disabled="true"] { opacity: .42;}
.rem-date-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: stretch; z-index: var(--z-sticky); animation: dateOverlayIn var(--dur-state) var(--ease-ios) forwards;}
@keyframes dateOverlayIn { from { opacity: 0;}
to { opacity: 1;}
}
.rem-date-sheet { width: 100%; background: var(--grad-sheet); border-top-left-radius: var(--r-2xl); border-top-right-radius: var(--r-2xl); border-top: 1px solid var(--border); padding: var(--s-2) var(--s-4h) var(--s-5); animation: dateSheetUp var(--dur-state) cubic-bezier(.2,.8,.2,1) forwards; max-height: 86%; overflow-y: auto;}
@keyframes dateSheetUp { from { transform: translateY(20%); opacity: 0;}
to { transform: translateY(0); opacity: 1;}
}
.rem-date-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-1) var(--s-4h);}
.rem-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-1);}
.rem-cal-dow-row { margin-bottom: var(--s-1h);}
.rem-cal-dow { font-family: var(--font-body); font-size: var(--fs-mini); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); text-align: center; padding: var(--s-1h) 0;}
.rem-cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; cursor: pointer; padding: 0; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios); -webkit-tap-highlight-color: transparent;}
@media (hover: hover) { .rem-cal-cell:hover:not(.is-empty):not(.is-past):not(.is-selected) { background: var(--sage-50); border-color: var(--sage-200); color: var(--sage);}
}
.rem-cal-cell.is-empty { cursor: default; pointer-events: none;}
.rem-cal-cell.is-past { color: var(--text-4); cursor: not-allowed;}
.rem-cal-cell.is-today { color: var(--sage); font-weight: 700;}
.rem-cal-cell.is-selected { background: var(--sage); border-color: var(--sage); color: var(--on-sage); font-weight: 700;}
.rem-cal-hint { margin-top: var(--s-3); text-align: center; color: var(--text-3);}
.rem-date-actions { display: flex; justify-content: center; margin-top: var(--s-4h); padding-top: var(--s-3h); border-top: 1px solid var(--border);}
.rem-date-actions .btn-primary { width: 100%;}
.rem-repeat-overlay { z-index: calc(var(--z-sticky) + 1);}
.rem-repeat-sheet { padding-bottom: calc(18px + var(--safe-bottom, 0px));}
.rem-repeat-list { display: flex; flex-direction: column; padding: var(--s-1) 0 0;}
.rem-repeat-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3h); padding: var(--s-4) var(--s-1); background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur-state) var(--ease-ios); font-family: var(--font-body);}
.rem-repeat-opt:last-child { border-bottom: none;}
.rem-repeat-opt:hover { background: var(--sage-tint);}
.rem-repeat-opt:active { background: var(--sage-soft);}
.rem-repeat-opt-body { flex: 1; min-width: 0;}
.rem-repeat-opt-label { font-weight: 600; letter-spacing: -.1px; color: var(--text); margin-bottom: 2px;}
.rem-repeat-opt-sub { color: var(--text-3); letter-spacing: .1px;}
.rem-repeat-opt.is-selected .rem-repeat-opt-label { color: var(--sage);}
.rem-repeat-opt-check { flex-shrink: 0; color: var(--sage); filter: drop-shadow(0 0 6px var(--sage-glow)); display: inline-flex;}
.rem-repeat-opt-check svg { width: 18px; height: 18px;}
@media (prefers-reduced-motion: reduce) { .rem-cta-btn, .rem-bell-master, .rem-repeat-opt, .rem-cal-cell { transition: none;}
.rem-date-overlay, .rem-date-sheet, .rem-repeat-overlay, .rem-repeat-sheet, .rem-cta-btn { animation: none;}
.reminder-row { transition: none;}
}
.pv-scroll { padding: 0 var(--s-5) var(--s-6);}
.pv-logo-row { display: flex; justify-content: center; margin-top: var(--s-2);}
.pv-logo-row--top { margin-top: var(--s-6);}
.orb-mark { color: var(--sage);}
.pv-note { text-align: center; color: var(--text-4); font-size: var(--fs-mini); margin-top: var(--s-5);}
.pv-check { width: 16px; height: 16px; flex-shrink: 0;}
.pv-launch { margin: var(--s-6) var(--s-1) 0; padding-top: var(--s-4); border-top: 1px solid var(--border);}
.pv-launch-label { color: var(--text-3);}
.pv-launch-btn { width: 100%; margin-top: var(--s-2);}
.pv-ent-line { color: var(--text); font-size: var(--fs-body); margin: 0 0 var(--s-1);}
.pv-ent-hint { color: var(--text-3); margin: 0 0 var(--s-3);}
.pv-eyebrow { text-align: center; color: var(--sage); margin-top: var(--s-3); font-size: var(--fs-caption); font-weight: 400; letter-spacing: 2px;}
.pv-title { text-align: center; font-weight: 700; font-size: var(--fs-h2-md); color: var(--text); letter-spacing: -0.5px; margin: var(--s-1h) 0 0; text-wrap: balance;}
.pv-sub { text-align: center; color: var(--text-3); font-size: var(--fs-body); margin-top: var(--s-2);}
.pv-feats { margin-top: var(--s-4h);}
.pv-feat { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0;}
.pv-feat-label { color: var(--text); font-size: var(--fs-body); font-weight: 400;}
.pv-plans { margin-top: var(--s-3h);}
.pv-plan { border: 1px solid var(--border); border-radius: var(--r-lg2); padding: var(--s-3h) var(--s-4); display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-2h);}
.pv-plan--on { border-color: var(--sage); background: var(--sage-soft);}
.pv-plan-l { display: flex; flex-direction: column; gap: var(--s-1h);}
.pv-plan-name { color: var(--text); font-weight: 400; font-size: var(--fs-md);}
.pv-plan-r { text-align: right;}
.pv-plan-price { color: var(--text); font-weight: 700; font-size: var(--fs-h2); line-height: 1;}
.pv-plan-permo { font-size: var(--fs-caption); font-weight: 400; color: var(--text-3);}
.pv-plan-detail{ color: var(--text-3); font-size: var(--fs-caption); margin-top: var(--s-1);}
.pv-save { align-self: flex-start; background: var(--sage); color: var(--on-sage); font-weight: 400; font-size: var(--fs-mini); letter-spacing: 0.5px; padding: var(--s-1) var(--s-2); border-radius: var(--r-pill);}
.pv-footer { flex-shrink: 0; padding: var(--s-3) var(--s-5) calc(var(--s-5) + var(--safe-bottom, 0px));}
.pv-footer .pv-cta { margin-top: 0;}
.pv-cta { width: 100%; margin-top: var(--s-4); font-weight: 700; font-size: var(--fs-body); letter-spacing: normal; text-transform: none;}
.pv-ghost-full { width: 100%; margin-top: var(--s-2h); font-weight: 700; font-size: var(--fs-body); letter-spacing: normal; text-transform: none;}
.pv-cancel { text-align: center; color: var(--text-3); font-size: var(--fs-label); margin-top: var(--s-2h);}
.pv-links { display: flex; justify-content: center; gap: var(--s-4h); margin-top: var(--s-3);}
.pv-statrow { display: flex; gap: var(--s-2h); margin-top: var(--s-4h);}
.pv-stat { flex: 1; background: var(--white-mist); border-radius: var(--r-lg); padding: var(--s-3h) var(--s-2); text-align: center;}
.pv-stat-num { color: var(--text); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.5px;}
.pv-stat-label { color: var(--text-3); font-size: var(--fs-mini); letter-spacing: 0.5px; text-transform: uppercase; margin-top: var(--s-1);}
.pv-authlogo { display: flex; justify-content: center; margin-top: var(--s-1h);}
.pv-authtitle { text-align: center; font-weight: 600; font-size: var(--fs-h2-lg); color: var(--text); margin: var(--s-4) 0 0; letter-spacing: -0.7px; text-wrap: balance;}
.pv-authsub { text-align: center; color: var(--slate); font-size: var(--fs-md); margin-top: var(--s-2);}
.pv-field { margin-top: var(--s-4h);}
.pv-label { color: var(--slate); display: block; margin-bottom: var(--s-2); text-align: left;}
.pv-input { width: 100%; padding: var(--s-4); border-radius: var(--r-lg);}
.pv-input--pass{ padding-right: var(--s-7);}
.pv-pass-wrap { position: relative;}
.pv-eye { position: absolute; right: var(--s-2h); top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--slate); display: inline-flex; padding: var(--s-1h); cursor: pointer;}
.pv-eye svg { width: 18px; height: 18px;}
.pv-terms { text-align: center; color: var(--slate); font-size: var(--fs-caption); margin-top: var(--s-3);}
.pv-cross { text-align: center; color: var(--slate); font-size: var(--fs-caption); margin-top: var(--s-5);}
.pv-forgot { text-align: right; margin-top: var(--s-2h);}
.pv-autherr { color: var(--rose); font-size: var(--fs-caption); line-height: var(--lh-caption); text-align: center; margin-top: var(--s-2);}
.pv-skip { display: block; width: 100%; margin-top: var(--s-4); padding: var(--s-3); background: none; border: none; color: var(--text-3); font-family: var(--font-body); font-weight: 500; text-align: center; cursor: pointer;}
.pv-skip:hover, .pv-skip:focus-visible { color: var(--text-2);}
.pv-divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0 var(--s-3h);}
.pv-divider-line { flex: 1; height: 1px; background: rgba(148,163,184,.28);}
.pv-divider-text { color: var(--slate); font-size: var(--fs-caption);}
.pv-social { display: flex; gap: var(--s-3);}
.pv-social-btn { flex: 1; padding: var(--s-4); border-radius: var(--r-pill); -webkit-appearance: none; appearance: none; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); letter-spacing: normal; text-transform: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); cursor: pointer; border: 1px solid transparent; transition: opacity var(--dur-state) var(--ease-ios);}
.pv-social-btn:active { transform: scale(.985);}
.pv-social-btn:disabled, .pv-social-btn.is-busy { opacity: .6; pointer-events: none;}
.pv-social-btn svg { width: 16px; height: 16px;}
.pv-social-btn--apple svg { width: 20px; height: 20px; transform: translateY(-1.5px);}
.pv-social-btn--apple { background: var(--surface-soft); color: #fff; border-color: var(--border);}
.pv-social-btn--google { background: var(--surface-soft); color: #fff; border-color: var(--border);}
.pv-authicon { width: 68px; height: 68px; border-radius: var(--r-circle); border: 1.5px solid var(--sage); color: var(--sage); display: inline-flex; align-items: center; justify-content: center;}
.pv-authicon svg { width: 28px; height: 28px;}
.pv-reset-title { text-align: center; font-weight: 700; font-size: var(--fs-h2-lg); color: var(--text); letter-spacing: -0.7px; margin: var(--s-4) 0 0; text-wrap: balance;}
.pv-reset-sub { text-align: center; color: var(--slate); font-size: var(--fs-md); margin: var(--s-2h) auto 0; max-width: 340px; line-height: 1.45;}
.pv-sent { display: flex; align-items: flex-start; gap: var(--s-2h); background: var(--sage-soft); border: 1px solid var(--sage-270); border-radius: var(--r-lg2); padding: var(--s-3h) var(--s-4); margin-top: var(--s-4);}
.pv-sent-check { color: var(--sage); flex-shrink: 0; margin-top: 1px;}
.pv-sent-check svg { width: 18px; height: 18px;}
.pv-sent-text { color: var(--text); font-size: var(--fs-body); line-height: 1.5;}
.pv-dim { flex: 1; background: rgba(3,6,12,.62);}
.pv-sheet { flex-shrink: 0; background: var(--grad-sheet); border-top: 1px solid var(--border); border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: 0 var(--s-5) calc(env(safe-area-inset-bottom, 0px) + var(--s-6)); box-shadow: none;}
.pv-grip { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--white-grip); margin: var(--s-3) auto var(--s-5);}
.pv-sheet-iconrow { display: flex; justify-content: center;}
.pv-sheet-icon { width: 60px; height: 60px; border-radius: var(--r-circle); border: 1.5px solid var(--rose); background: var(--rose-50); display: inline-flex; align-items: center; justify-content: center; color: var(--rose);}
.pv-sheet-icon svg { width: 26px; height: 26px;}
.pv-sheet-title{ text-align: center; font-weight: 600; font-size: var(--fs-h2); color: var(--text); margin: var(--s-4h) 0 0; letter-spacing: -0.3px;}
.pv-sheet-sub { text-align: center; color: var(--slate); font-size: var(--fs-body); line-height: 1.5; margin: var(--s-2h) auto 0; max-width: 300px;}
.pv-sheet-btn { width: 100%; padding: var(--s-4); border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); letter-spacing: normal; text-transform: none; cursor: pointer;}
.pv-sheet-btn--primary { background: var(--sage); border: none; color: var(--on-sage); margin-top: var(--s-5);}
.pv-sheet-btn--ghost { background: var(--rose-50); border: 1px solid rgba(224,138,138,.35); color: var(--rose); margin-top: var(--s-2h);}
.pv-wear-icon { width: 64px; height: 64px; border-radius: var(--r-circle); background: var(--sage-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--sage);}
.pv-wear-icon svg { width: 30px; height: 30px;}
.pv-devices-label { color: var(--text-3); margin: var(--s-5) 0 var(--s-1);}
.pv-device { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-3h) 0; border-top: 1px solid var(--border);}
.pv-device-body{ flex: 1; min-width: 0;}
.pv-device-tile{ width: 40px; height: 40px; border-radius: var(--r-md); background: var(--sage-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--sage);}
.pv-device-tile svg { width: 22px; height: 22px;}
.pv-device-name{ color: var(--text); font-weight: 500; font-size: var(--fs-md);}
.pv-device-sub { color: var(--slate); font-size: var(--fs-caption); margin-top: var(--s-1);}
.pv-connect { background: transparent; border: 1px solid var(--sage); color: var(--sage); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-mini); letter-spacing: 1px; text-transform: uppercase; padding: var(--s-2) var(--s-3h); border-radius: var(--r-pill); cursor: pointer;}
.pv-connected { display: flex; align-items: center; gap: var(--s-2);}
.pv-connected-badge { display: inline-flex; align-items: center; gap: var(--s-1h); color: var(--sage); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-mini); letter-spacing: 1px; text-transform: uppercase;}
.pv-connected-badge svg { width: 14px; height: 14px;}
.pv-manage { background: none; border: none; color: var(--slate); display: inline-flex; padding: var(--s-1h); cursor: pointer;}
.pv-manage svg { width: 18px; height: 18px;}
:root[data-theme="light"] { --bg-0: #F0F4F9; --bg-1: #FFFFFF; --bg-2: #FFFFFF; --card-1: #FFFFFF; --card-2: #FFFFFF; --chip-fill: var(--sage-soft); --icon-fill: var(--sage-90); --surface-soft: rgba(22,35,46,0.03); --surface-soft-hover: rgba(22,35,46,0.05); --on-sage: #FFFFFF; --grad-sheet: linear-gradient(180deg, #FFFFFF 0%, #F5F9FD 100%); --grad-lift: linear-gradient(135deg, #FFFFFF 0%, #F0F4F9 100%); --grad-lift-v: linear-gradient(180deg, #FFFFFF 0%, #F0F4F9 100%); --grad-ambient: linear-gradient(135deg, #F0F4F9 0%, #FFFFFF 60%, #FFFFFF 100%); --text: #16232E; --text-2: #5e7082; --text-3: #5f7184; --text-4: #b4bcc7; --slate: #475569; --ink-primary: #0F172A; --ink-secondary: #334155; --ink-muted: #5c6a80; --ink-faint: #94A3B8; --crimson: #C53030; --crimson-rgb: 197,48,48; --sage: #0A84C7; --sage-400: #086BA3; --sage-soft: rgba(10,132,199,0.08); --sage-50: var(--sage-soft); --sage-100: rgba(10,132,199,0.16); --sage-200: rgba(10,132,199,0.34); --sage-glow: rgba(10,132,199,0.35); --sage-tint: rgba(10,132,199,0.04); --sage-veil: rgba(10,132,199,0.06); --sage-90: rgba(10,132,199,0.10); --sage-110: rgba(10,132,199,0.12); --sage-130: rgba(10,132,199,0.14); --sage-170: rgba(10,132,199,0.18); --sage-210: rgba(10,132,199,0.22); --sage-270: rgba(10,132,199,0.28); --sage-290: rgba(10,132,199,0.30); --sage-glow-40: rgba(10,132,199,0.40); --sage-glow-42: rgba(10,132,199,0.42); --sage-glow-45: rgba(10,132,199,0.45); --sage-glow-peak: rgba(10,132,199,0.55); --sage-fill-3: rgba(10,132,199,0.62); --sage-phase-border: rgba(10,132,199,0.90); --sage-shimmer: rgba(10,132,199,0.95); --state-ink: 10,132,199; --amber: #C8632C; --cta-fill: linear-gradient(160deg, #38A8E0, #0A84C7); --cta-ink: #FFFFFF; --sage-wash: var(--sage-veil); --border: rgba(22,35,46,0.14); --border-strong: rgba(22,35,46,0.20); --white-wash: rgba(22,35,46,0.02); --white-wash-2: rgba(22,35,46,0.03); --white-tint: rgba(22,35,46,0.03); --white-veil: rgba(22,35,46,0.04); --white-soft: rgba(22,35,46,0.05); --white-mist: rgba(22,35,46,0.06); --white-haze: rgba(22,35,46,0.07); --white-film: rgba(22,35,46,0.08); --white-line: rgba(22,35,46,0.10); --white-line-2: rgba(22,35,46,0.12); --white-edge: rgba(22,35,46,0.13); --white-rule: rgba(22,35,46,0.14); --white-rule-2: rgba(22,35,46,0.16); --white-grip: rgba(22,35,46,0.18); --white-grip-2: rgba(22,35,46,0.24); --white-bright: rgba(22,35,46,0.30); --white-strong: rgba(22,35,46,0.38); --white-strong-2: rgba(22,35,46,0.42); --white-vivid: rgba(22,35,46,0.55); --elev-1: 0 1px 3px rgba(22,35,46,.08); --elev-2: 0 8px 28px rgba(22,35,46,.10); --elev-3: 0 24px 60px rgba(22,35,46,.14); --elev-glow-sage: 0 0 24px var(--sage-glow-42);}
:root[data-theme="light"] .bottom-nav { --nav-bg: rgba(240,244,249,0.98);}
:root[data-theme="light"] .modal-footer-v2 { background: linear-gradient(0deg, #F0F4F9 60%, rgba(240,244,249,0.92) 85%, transparent 100%);}
:root[data-theme="light"] .row-badge { background: var(--sage-110); border: 1px solid var(--sage-210);}
:root[data-theme="light"] .row-badge--warn { background: var(--rose-100); border-color: rgba(224,138,138,0.42);}
:root[data-theme="light"] .row-badge--muted { background: var(--white-mist); border: 1px solid rgba(22,35,46,0.18);}
:root[data-theme="light"] .home-play-pill { box-shadow: 0 0 32px -8px var(--sage-glow), 0 6px 20px -10px var(--sage-glow-45);}
:root[data-theme="light"] .slider { --vol-track: var(--sage-200);}
:root[data-theme="light"] .icon-btn { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-color: rgba(22,35,46,0.12); box-shadow: var(--elev-1);}
:root[data-theme="light"] .prof-settings-gear { color: var(--sage);}
:root[data-theme="light"] .rem-bell-master.is-on { background: var(--sage-170); border-color: var(--sage-200); box-shadow: none;}
:root[data-theme="light"] .home-recent-edit:active, :root[data-theme="light"] .prof-settings-gear:active { box-shadow: 0 0 12px var(--sage-glow-peak);}
:root[data-theme="light"] .home-row:hover, :root[data-theme="light"] .tech-row:hover, :root[data-theme="light"] .prof-reminders-row:hover, :root[data-theme="light"] .modal-row-clickable:hover, :root[data-theme="light"] .hist-techmenu-item:hover, :root[data-theme="light"] .reminder-row:hover, :root[data-theme="light"] .lang-option:hover { background: var(--sage-wash);}
:root[data-theme="light"] .home-recent-tune { color: var(--ink-muted); opacity: 1;}
:root[data-theme="light"] .home-recent-title { color: var(--ink-primary);}
:root[data-theme="light"] .hist-rec-meta { color: var(--ink-muted);}
:root[data-theme="light"] .hist-date-sum { color: var(--ink-muted);}
:root[data-theme="light"] .hist-rec-pbtag { color: var(--sage);}
:root[data-theme="light"] .hist-rec-hold { color: var(--sage); background: var(--sage-90); border: 1px solid var(--sage-210);}
:root[data-theme="light"] .prof-chip { border: 1px solid rgba(22,35,46,0.12); color: var(--ink-secondary);}
:root[data-theme="light"] .benefit-pill { border-color: var(--sage-210);}
:root[data-theme="light"] .sound-v2-cue-row-badge { border: 1px solid rgba(22,35,46,0.16);}
:root[data-theme="light"] .btn-ghost { border-color: var(--sage-glow-42);}
:root[data-theme="light"] .sound-v2-bin-seg:not(.is-on) .sound-v2-bin-label, :root[data-theme="light"] .sound-v2-bin-seg:not(.is-on) .sound-v2-bin-goal, :root[data-theme="light"] .sound-v2-bin-seg:not(.is-on) .sound-v2-bin-freq { color: var(--ink-muted);}
:root[data-theme="light"] .sound-v2-bin-seg.is-dim:not(.is-on) { opacity: 1;}
:root[data-theme="light"] .sound-v2-chip:not(.is-on) { color: var(--ink-secondary);}
:root[data-theme="light"] .sound-v2-helper, :root[data-theme="light"] .sound-v2-hint-icon { color: var(--ink-muted);}
:root[data-theme="light"] .phase-sub, :root[data-theme="light"] .phase-steps-loop, :root[data-theme="light"] .modal-learn-body, :root[data-theme="light"] .modal-learn-tagline, :root[data-theme="light"] .modal-learn-safety-intro, :root[data-theme="light"] .modal-learn-safety-list li, :root[data-theme="light"] .modal-learn-safety-list li span { color: var(--ink-secondary);}
:root[data-theme="light"] .phase-steps-loop { font-style: normal; opacity: 1;}
:root[data-theme="light"] .orb-inner { background: radial-gradient(circle, #ffffff 58%, rgba(240,244,249,.55) 100%); box-shadow: 0 0 50px rgba(var(--orb-color-rgb), .16) inset, 0 0 40px rgba(var(--orb-color-rgb), .20), 0 12px 36px rgba(22,35,46,.12);}
:root[data-theme="light"] .orb-inner > #t-num { color: var(--text);}
:root[data-theme="light"] .modal-wheel-item.is-current { color: var(--ink-primary);}
:root[data-theme="light"] .sheet-title { color: var(--ink-primary);}
:root[data-theme="light"] .dialog-btn-cancel { border-color: rgba(22,35,46,0.22); color: var(--ink-secondary);}
:root[data-theme="light"] .modal-learn-eyebrow { color: var(--ink-muted);}
:root[data-theme="light"] .modal-learn-safety-title { color: var(--crimson);}
:root[data-theme="light"] .timer-phase-label { color: var(--orb-color); text-shadow: none;}
:root[data-theme="light"] .prof-next-ring:not(.is-earned) { opacity: .45; border-color: var(--text-3); color: var(--text-3);}
:root[data-theme="light"] .prof-next-ring:not(.is-earned) .prof-next-ico { color: var(--text-3);}
:root[data-theme="light"] .prof-next-ring.is-earned { background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), linear-gradient(rgba(125,211,232,.20), rgba(125,211,232,.20)), linear-gradient(rgba(125,211,232,.20), rgba(125,211,232,.20));}
:root[data-theme="light"] .achieve-icon.locked { background: rgba(22,35,46,0.035); border-color: rgba(22,35,46,0.16);}
:root[data-theme="light"] .achieve-icon.locked svg { stroke: var(--text-3); opacity: .5;}
:root[data-theme="light"] .achieve-name.is-earned, :root[data-theme="light"] .prof-next-name.is-earned { color: var(--sage);}
:root[data-theme="light"] .achieve-name.is-locked { color: var(--ink-muted);}
:root[data-theme="light"] .modal-learn-safety-note > span:not(.modal-learn-safety-note-icon), :root[data-theme="light"] .modal-learn-tip > p { color: var(--ink-secondary);}
:root[data-theme="light"] .modal-learn-safety-link { color: var(--crimson); font-weight: 600;}
:root[data-theme="light"] .safe-disc-body { color: var(--ink-secondary);}
:root[data-theme="light"] .safe-sec { color: var(--ink-muted);}
:root[data-theme="light"] .safe-sec.warn, :root[data-theme="light"] .safe-disc-name { color: var(--crimson);}
:root[data-theme="light"] .dialog-btn-discard { color: var(--crimson); border-color: rgba(var(--crimson-rgb),0.30);}
:root[data-theme="light"] .pv-sheet-icon { color: var(--crimson); border-color: rgba(var(--crimson-rgb),0.35); background: rgba(var(--crimson-rgb),0.06);}
:root[data-theme="light"] .pv-sheet-btn--ghost { color: var(--crimson); border-color: rgba(var(--crimson-rgb),0.30); background: rgba(var(--crimson-rgb),0.06);}
:root[data-theme="light"] .pv-input::placeholder { color: var(--ink-muted);}
:root[data-theme="light"] .pv-divider-line { background: #E2E8F0;}
:root[data-theme="light"] .pv-social-btn--apple, :root[data-theme="light"] .pv-social-btn--google { background: #fff; border-color: #dadce0;}
:root[data-theme="light"] .pv-social-btn--apple { color: #111;}
:root[data-theme="light"] .pv-social-btn--google { color: #3c4043;}
:root[data-theme="light"] .edit-prof-photo-remove { color: var(--crimson); opacity: 1;}
:root[data-theme="light"] .so-title { color: var(--crimson);}
:root[data-theme="light"] .so-intro, :root[data-theme="light"] .so-ack-label, :root[data-theme="light"] .so-link { color: var(--ink-secondary);}
:root[data-theme="light"] .achieve-icon.earned { background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), linear-gradient(var(--tier-glow, rgba(14,122,145,.2)), var(--tier-glow, rgba(14,122,145,.2))), linear-gradient(var(--tier-glow, rgba(14,122,145,.2)), var(--tier-glow, rgba(14,122,145,.2)));}
:root[data-theme="light"] .ps-tog.on { background: var(--cta-fill);}
:root[data-theme="light"] .theme-seg .seg-btn.is-selected { background: var(--cta-fill); color: var(--cta-ink);}
:root[data-theme="light"] .stats-range-btn.is-on { background: var(--cta-fill); color: var(--cta-ink);}
:root[data-theme="light"] .stats-bar.has-val, :root[data-theme="light"] .stats-bar.is-active.has-val { background: var(--cta-fill);}
:root[data-theme="light"] .row-badge:not(.row-badge--warn):not(.row-badge--muted) { background: var(--cta-fill); border-color: transparent; color: var(--cta-ink);}