/* Psydex 2.0 — design system and screens.
   Fonts: Unbounded (display) and Onest (UI), both SIL OFL 1.1, self-hosted. */

@font-face {
    font-family: "Onest";
    src: url("fonts/Onest-VF.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Unbounded";
    src: url("fonts/Unbounded-VF.woff2") format("woff2");
    font-weight: 200 900;
    font-display: swap;
}

/* ---------- tokens ---------- */

:root {
    --paper: #F7F3EE;
    --paper-2: #EFE9E1;
    --surface: #FFFFFF;
    --surface-2: #FBF9F6;
    --ink: #221D35;
    --ink-2: #5E5873;
    --ink-3: #6F6985;
    --line: rgba(34, 29, 53, .08);
    --line-2: rgba(34, 29, 53, .14);

    --violet: #6C5CE0;
    --violet-ink: #4B3DB8;
    --violet-soft: #ECE9FF;
    --mint: #2BB673;
    --mint-ink: #127A47;
    --mint-soft: #DDF5E8;
    --sun: #FFC542;
    --sun-ink: #7A5200;
    --sun-soft: #FFF1CC;
    --peach: #FF9F7A;
    --peach-ink: #A0431F;
    --peach-soft: #FFE6DC;
    --sky: #59B4F0;
    --sky-ink: #1F6A9C;
    --sky-soft: #DFF1FD;
    --coral: #D93A40;
    --coral-ink: #A8232A;
    --coral-soft: #FFE5E3;

    --on-ink: #FFFFFF;
    --btn: #221D35;
    --btn-text: #FFFFFF;

    --shadow-1: 0 1px 2px rgba(34, 29, 53, .05), 0 6px 18px rgba(34, 29, 53, .06);
    --shadow-2: 0 2px 6px rgba(34, 29, 53, .06), 0 18px 40px rgba(34, 29, 53, .10);
    --shadow-device: 0 40px 90px rgba(34, 29, 53, .22), 0 0 0 1px rgba(34, 29, 53, .06);

    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 30px;

    --display: "Unbounded", "Onest", system-ui, sans-serif;
    --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --stage: #E9E3DA;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --paper: #14111F;
    --paper-2: #1B1729;
    --surface: #221D33;
    --surface-2: #1E1A2E;
    --ink: #F4F1FA;
    --ink-2: #B9B2CC;
    --ink-3: #8C85A2;
    --line: rgba(244, 241, 250, .08);
    --line-2: rgba(244, 241, 250, .16);

    --violet: #9D90FF;
    --violet-ink: #B9B0FF;
    --violet-soft: #2C2652;
    --mint: #4FD192;
    --mint-ink: #7FE0B0;
    --mint-soft: #173A2B;
    --sun: #FFC542;
    --sun-ink: #FFD77A;
    --sun-soft: #3A2F14;
    --peach: #FF9F7A;
    --peach-ink: #FFB89C;
    --peach-soft: #3D241C;
    --sky: #6CC0F5;
    --sky-ink: #9AD3F8;
    --sky-soft: #15314A;
    --coral: #FF6B6F;
    --coral-ink: #FF9A9D;
    --coral-soft: #3E1A1E;

    --btn: #F4F1FA;
    --btn-text: #14111F;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .35), 0 20px 44px rgba(0, 0, 0, .35);
    --shadow-device: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --stage: #0D0B15;
    color-scheme: dark;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--stage);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 3px;
    border-radius: 12px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- stage, device, scroll ---------- */

.stage {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 72px;
    background:
        radial-gradient(60% 50% at 18% 20%, rgba(157, 144, 255, .30), transparent 70%),
        radial-gradient(50% 45% at 85% 85%, rgba(79, 209, 146, .20), transparent 70%),
        radial-gradient(40% 40% at 80% 10%, rgba(255, 159, 122, .18), transparent 70%),
        var(--stage);
}

.stage-aside {
    display: none;
    width: 360px;
    color: var(--ink);
}

.stage-aside .lockup { height: 40px; }
.stage-aside h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin-top: 36px;
}
.stage-aside p {
    color: var(--ink-2);
    font-size: 17px;
    margin-top: 16px;
}
.stage-aside ul {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 14px;
}
.stage-aside li {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 500;
}
.stage-aside li .ic-wrap {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--violet);
}
.stage-aside .aside-note {
    margin-top: 32px;
    font-size: 13px;
    color: var(--ink-3);
}

@media (min-width: 1120px) {
    .stage-aside { display: block; }
}

.device {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--paper);
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 560px) {
    .device {
        width: 402px;
        height: min(874px, calc(100vh - 48px));
        border-radius: 46px;
        box-shadow: var(--shadow-device);
    }
}

.scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    overscroll-behavior: contain;
}
.scroll::-webkit-scrollbar { display: none; }

.screen {
    position: relative;
    min-height: 100%;
    padding: 0 20px 40px;
    animation: screen-in .42s var(--ease) both;
}

.screen.with-nav { padding-bottom: 116px; }
.screen.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.screen-glow {
    position: absolute;
    inset: 0 0 auto 0;
    height: 360px;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(60% 70% at 15% 0%, rgba(157, 144, 255, .22), transparent 70%),
        radial-gradient(50% 60% at 95% 10%, rgba(255, 159, 122, .16), transparent 70%);
}
.screen-glow.mint {
    background:
        radial-gradient(60% 70% at 15% 0%, rgba(79, 209, 146, .22), transparent 70%),
        radial-gradient(50% 60% at 95% 10%, rgba(89, 180, 240, .16), transparent 70%);
}
.screen-glow.sun {
    background:
        radial-gradient(60% 70% at 15% 0%, rgba(255, 197, 66, .26), transparent 70%),
        radial-gradient(50% 60% at 95% 10%, rgba(255, 159, 122, .20), transparent 70%);
}
.screen-glow.calm {
    background:
        radial-gradient(70% 70% at 50% 0%, rgba(89, 180, 240, .20), transparent 70%),
        radial-gradient(50% 60% at 95% 30%, rgba(157, 144, 255, .18), transparent 70%);
}

@keyframes screen-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---------- top bar ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin: 0 -20px;
    padding: 14px 16px 10px;
    min-height: 66px;
    background: linear-gradient(var(--paper) 55%, color-mix(in srgb, var(--paper) 0%, transparent));
}

.topbar.brand { grid-template-columns: 1fr auto; padding-left: 20px; }

.topbar-title {
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--ink);
    transition: background .2s;
}
.icon-btn:hover { background: var(--line); }
.icon-btn.filled {
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.sos-btn {
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--coral-ink);
    background: var(--coral-soft);
    justify-self: end;
}

.topbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-self: end;
}

/* ---------- bottom nav ---------- */

.tabbar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px;
    border-radius: 26px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--line);
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 0 5px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    transition: color .2s, background .2s;
}
.tab.active {
    color: var(--ink);
    background: var(--paper);
}
.tab.active .ic { color: var(--violet); }

/* ---------- icons ---------- */

.ic {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    line-height: 0;
}
.ic svg { width: 100%; height: 100%; display: block; }
.ic.sm { width: 18px; height: 18px; }
.ic.xs { width: 15px; height: 15px; }
.ic.lg { width: 28px; height: 28px; }
.ic.xl { width: 40px; height: 40px; }

.raw { line-height: 0; }
.raw svg { display: block; width: 100%; height: 100%; }

/* ---------- typography ---------- */

.display {
    font-family: var(--display);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.14;
    letter-spacing: -.025em;
}
.h1 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 25px;
    line-height: 1.18;
    letter-spacing: -.02em;
}
.h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.015em;
}
.h3 {
    font-weight: 650;
    font-size: 16.5px;
    line-height: 1.3;
}
.lead { font-size: 16.5px; color: var(--ink-2); line-height: 1.5; }
.body { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.small { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.tiny { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.kicker {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--violet-ink);
}
.kicker.mint { color: var(--mint-ink); }
.kicker.muted { color: var(--ink-3); }
.kicker.coral { color: var(--coral-ink); }
.center-text { text-align: center; }
.num { font-variant-numeric: tabular-nums; }
.accent-word { color: var(--violet); }

.gap-4 { height: 4px; } .gap-8 { height: 8px; } .gap-12 { height: 12px; }
.gap-16 { height: 16px; } .gap-20 { height: 20px; } .gap-24 { height: 24px; }
.gap-32 { height: 32px; } .gap-40 { height: 40px; }
.grow { flex: 1; }

.stack { display: grid; gap: 12px; }
.stack-8 { display: grid; gap: 8px; }
.stack-16 { display: grid; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.top { align-items: flex-start; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }

.section {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 30px 0 12px;
}
.section .h2 { font-size: 18px; }
.section .small { margin-top: 2px; }
.link-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--violet-ink);
    white-space: nowrap;
    min-height: 44px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
}

/* ---------- buttons ---------- */

.btn {
    min-height: 56px;
    padding: 0 22px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 650;
    font-size: 16px;
    text-decoration: none;
    transition: transform .15s var(--ease), box-shadow .2s, background .2s, opacity .2s;
    user-select: none;
}
.btn:active { transform: scale(.98); }
.btn.block { width: 100%; }
.btn.primary { background: var(--btn); color: var(--btn-text); box-shadow: 0 10px 24px rgba(34, 29, 53, .18); }
.btn.primary:hover { box-shadow: 0 14px 30px rgba(34, 29, 53, .24); }
.btn.violet { background: var(--violet); color: #fff; box-shadow: 0 10px 24px rgba(108, 92, 224, .30); }
:root[data-theme="dark"] .btn.violet { color: #14111F; }
.btn.mint { background: var(--mint); color: #08281A; }
.btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn.ghost { background: transparent; color: var(--ink-2); min-height: 48px; }
.btn.ghost:hover { color: var(--ink); }
.btn.danger { background: var(--coral-soft); color: var(--coral-ink); }
.btn.coral { background: var(--coral); color: #fff; }
.btn.small { min-height: 44px; padding: 0 16px; border-radius: 14px; font-size: 14px; }
.btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }

.cta-dock {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 24px -20px -40px;
    padding: 16px 20px 24px;
    background: linear-gradient(transparent, var(--paper) 30%);
}

/* ---------- chips & segmented ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll-x {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 2px 20px 6px;
    scrollbar-width: none;
}
.chips.scroll-x::-webkit-scrollbar { display: none; }

.chip {
    min-height: 44px;
    padding: 0 15px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--ink);
    transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.chip:active { transform: scale(.97); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.on .ic { color: inherit; }
.chip .ic { color: var(--violet); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    background: var(--paper-2);
    color: var(--ink-2);
}
.pill.violet { background: var(--violet-soft); color: var(--violet-ink); }
.pill.mint { background: var(--mint-soft); color: var(--mint-ink); }
.pill.sun { background: var(--sun-soft); color: var(--sun-ink); }
.pill.peach { background: var(--peach-soft); color: var(--peach-ink); }
.pill.coral { background: var(--coral-soft); color: var(--coral-ink); }
.pill.ink { background: var(--ink); color: var(--paper); }

.segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 4px;
    gap: 4px;
    border-radius: 16px;
    background: var(--paper-2);
}
.segmented button {
    min-height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
}
.segmented button.on {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

/* ---------- cards ---------- */

.card {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
button.card { transition: transform .18s var(--ease), box-shadow .2s; }
button.card:hover { box-shadow: var(--shadow-2); }
button.card:active { transform: scale(.985); }
.card.flat { box-shadow: none; }
.card.tint-violet { background: var(--violet-soft); border-color: transparent; box-shadow: none; }
.card.tint-mint { background: var(--mint-soft); border-color: transparent; box-shadow: none; }
.card.tint-sun { background: var(--sun-soft); border-color: transparent; box-shadow: none; }
.card.tint-peach { background: var(--peach-soft); border-color: transparent; box-shadow: none; }
.card.tint-sky { background: var(--sky-soft); border-color: transparent; box-shadow: none; }
.card.tint-coral { background: var(--coral-soft); border-color: transparent; box-shadow: none; }
.card.ink {
    background: #221D35;
    color: #F4F1FA;
    border-color: transparent;
}
:root[data-theme="dark"] .card.ink { background: #2C2547; }
.card.ink .small, .card.ink .body { color: rgba(244, 241, 250, .72); }
.card.ink .kicker { color: #C9C1FF; }

.tile-icon {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--violet-soft);
    color: var(--violet-ink);
}
.tile-icon.mint { background: var(--mint-soft); color: var(--mint-ink); }
.tile-icon.sun { background: var(--sun-soft); color: var(--sun-ink); }
.tile-icon.peach { background: var(--peach-soft); color: var(--peach-ink); }
.tile-icon.sky { background: var(--sky-soft); color: var(--sky-ink); }
.tile-icon.coral { background: var(--coral-soft); color: var(--coral-ink); }
.tile-icon.ink { background: var(--ink); color: var(--paper); }
.tile-icon.glass { background: rgba(255, 255, 255, .14); color: #fff; }

.chev { color: var(--ink-3); }

.list-card { padding: 6px 0; }
.list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 10px 18px;
    text-align: left;
}
.list-row + .list-row { border-top: 1px solid var(--line); }
button.list-row:hover { background: var(--surface-2); }
.list-row .grow .h3 { font-size: 15.5px; }

.note {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.45;
}
.note .ic { color: var(--violet); margin-top: 1px; }

.footer-safety {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.5;
}
.footer-safety button {
    display: inline-block;
    padding: 12px 0;
    color: var(--coral-ink);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- inputs ---------- */

.field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 8px 0 18px;
    border-radius: 18px;
    background: var(--surface);
    border: 1.5px solid var(--line-2);
    transition: border-color .2s, box-shadow .2s;
}
.field:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
}
.field input::placeholder { color: var(--ink-3); font-weight: 500; }

.switch {
    position: relative;
    width: 52px;
    height: 32px;
    flex: none;
    border-radius: 999px;
    background: var(--line-2);
    transition: background .2s;
}
.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: transform .25s var(--ease);
}
.switch.on { background: var(--mint); }
.switch.on::after { transform: translateX(20px); }

.check {
    width: 26px;
    height: 26px;
    position: relative;
    flex: none;
    border-radius: 9px;
    border: 2px solid var(--line-2);
    display: grid;
    place-items: center;
    color: transparent;
    transition: all .2s;
}
.check.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.consent {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
}
.consent .h3 { font-size: 15px; }
.consent .small { margin-top: 3px; }

/* range slider */
.slider-wrap { position: relative; padding: 6px 0; }
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    background: transparent;
    cursor: pointer;
    margin: 0;
}
.slider::-webkit-slider-runnable-track {
    height: 14px;
    border-radius: 999px;
    background: var(--track, linear-gradient(90deg, var(--paper-2), var(--violet)));
}
.slider::-moz-range-track {
    height: 14px;
    border-radius: 999px;
    background: var(--track, linear-gradient(90deg, var(--paper-2), var(--violet)));
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 34px;
    height: 34px;
    margin-top: -10px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--thumb, var(--violet)) 26%, transparent), 0 4px 12px rgba(34, 29, 53, .25);
}
.slider::-moz-range-thumb {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--thumb, var(--violet)) 26%, transparent), 0 4px 12px rgba(34, 29, 53, .25);
}
.slider-legend {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--ink-3);
    font-weight: 500;
}

/* ---------- aura ---------- */

.aura {
    --a1: #9D90FF;
    --a2: #FF9F7A;
    --a3: #4FD192;
    --speed: 16s;
    position: relative;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    background: var(--a1);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--a1) 45%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .25);
    transform: translateZ(0);
}
.aura::before, .aura::after {
    content: "";
    position: absolute;
    inset: -30%;
    border-radius: 45%;
    animation: aura-spin var(--speed) linear infinite;
}
.aura::before {
    background:
        radial-gradient(35% 40% at 30% 30%, var(--a2), transparent 70%),
        radial-gradient(40% 40% at 70% 65%, var(--a3), transparent 70%),
        radial-gradient(30% 30% at 75% 25%, rgba(255, 255, 255, .7), transparent 70%);
    filter: blur(8px);
}
.aura::after {
    background: radial-gradient(28% 30% at 35% 72%, color-mix(in srgb, var(--a1) 60%, #fff), transparent 70%);
    animation-duration: calc(var(--speed) * 1.6);
    animation-direction: reverse;
    filter: blur(10px);
    opacity: .8;
}
.aura .aura-gloss {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(60% 45% at 35% 22%, rgba(255, 255, 255, .55), transparent 60%);
    z-index: 2;
}
.aura .aura-letter {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 8px rgba(34, 29, 53, .35);
}
@keyframes aura-spin { to { transform: rotate(360deg); } }

.aura-xl { width: 220px; height: 220px; }
.aura-lg { width: 168px; height: 168px; }
.aura-md { width: 88px; height: 88px; }
.aura-sm { width: 44px; height: 44px; }
.aura-sm .aura-letter { font-size: 16px; }
.aura-md .aura-letter { font-size: 30px; }
.aura-lg .aura-letter { font-size: 56px; }
.aura-xs { width: 30px; height: 30px; box-shadow: none; }

.aura-halo {
    position: relative;
    display: grid;
    place-items: center;
    width: fit-content;
    margin-inline: auto;
}
.aura-halo::before {
    content: "";
    position: absolute;
    width: 128%;
    height: 128%;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    animation: halo 6s ease-in-out infinite;
}
.aura-halo::after {
    content: "";
    position: absolute;
    width: 156%;
    height: 156%;
    border-radius: 50%;
    border: 1px solid var(--line);
    animation: halo 6s ease-in-out infinite .8s;
}
@keyframes halo {
    0%, 100% { transform: scale(.96); opacity: .6; }
    50% { transform: scale(1.03); opacity: 1; }
}

/* ---------- welcome ---------- */

.welcome { padding-top: 8px; text-align: left; }
.welcome .lockup-wrap { height: 30px; display: flex; align-items: center; }
.welcome .lockup-wrap .raw { height: 30px; }
.welcome-hero {
    position: relative;
    height: 290px;
    display: grid;
    place-items: center;
    margin: 6px 0 0;
}
.float-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-2);
    font-size: 12.5px;
    font-weight: 650;
    animation: bob 5s ease-in-out infinite;
    white-space: nowrap;
}
.float-chip .tile-icon { width: 30px; height: 30px; border-radius: 10px; }
.float-chip .tile-icon .ic { width: 17px; height: 17px; }
.float-chip.a { left: 0; top: 46px; }
.float-chip.b { right: 0; top: 120px; animation-delay: -1.6s; }
.float-chip.c { left: 18px; bottom: 26px; animation-delay: -3.1s; }
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: center;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}
.trust-line span { display: inline-flex; gap: 5px; align-items: center; }
.trust-line .ic { color: var(--mint); width: 15px; height: 15px; }

.invite-banner {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--sun-soft);
    color: var(--sun-ink);
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 14px;
}

/* ---------- intro ---------- */

.steps-dots { display: flex; gap: 6px; justify-content: center; }
.steps-dots i {
    width: 22px;
    height: 6px;
    border-radius: 999px;
    background: var(--line-2);
    transition: all .3s;
}
.steps-dots i.on { background: var(--ink); width: 34px; }

.aura-picker { display: flex; gap: 4px; justify-content: space-between; }
.aura-option {
    position: relative;
    padding: 4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color .2s, transform .2s;
}
.aura-option.on { border-color: var(--ink); transform: scale(1.06); }
.aura-option .aura { width: 38px; height: 38px; box-shadow: none; }

.alias-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 34px 0 26px;
}
.alias-preview .alias-name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 20px;
    min-height: 26px;
}

/* ---------- quest ---------- */

.quest-path {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 6px 0 20px;
}
.quest-path .node {
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 50%;
    background: var(--paper-2);
    border: 2px solid var(--line-2);
    transition: all .3s;
}
.quest-path .node.done { background: var(--violet); border-color: var(--violet); }
.quest-path .node.now {
    width: 18px;
    height: 18px;
    background: var(--surface);
    border: 5px solid var(--violet);
    box-shadow: 0 0 0 5px var(--violet-soft);
}
.quest-path .edge { flex: 1; height: 2px; background: var(--line-2); }
.quest-path .edge.done { background: var(--violet); }

.quest-card {
    padding: 22px 20px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    animation: card-in .45s var(--ease) both;
}
@keyframes card-in {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}
.quest-card .h1 { font-size: 22px; margin-top: 10px; }

.answers { display: grid; gap: 8px; margin-top: 20px; }
.answer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 8px 16px 8px 10px;
    border-radius: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 15px;
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    transition: all .18s var(--ease);
}
.answer:hover { border-color: var(--line-2); }
.answer .meter {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 22px;
    width: 36px;
    flex: none;
    justify-content: center;
}
.answer .meter i {
    width: 5px;
    border-radius: 3px;
    background: var(--line-2);
}
.answer.on {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: scale(1.01);
}
.answer.on .meter i.f { background: var(--sun); }
.answer .meter i.f { background: var(--violet); }
.answer .tick { margin-left: auto; opacity: 0; transition: opacity .2s; }
.answer.on .tick { opacity: 1; }

/* ---------- result ring ---------- */

.ring-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 6px auto 18px;
}
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--paper-2); }
.ring-fill {
    fill: none;
    stroke-linecap: round;
    animation: ring-draw 1.4s var(--ease) both;
}
@keyframes ring-draw { from { stroke-dashoffset: var(--c); } }
.ring-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
}
.ring-value {
    font-family: var(--display);
    font-weight: 600;
    font-size: 54px;
    line-height: 1;
    letter-spacing: -.03em;
}
.ring-label { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-top: 6px; }

.meter-row { display: grid; gap: 8px; }
.meter-row + .meter-row { margin-top: 16px; }
.meter-head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.meter-head span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar-track {
    height: 10px;
    border-radius: 999px;
    background: var(--paper-2);
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--violet);
    transform-origin: left;
    animation: grow-x 1.1s var(--ease) both;
}
@keyframes grow-x { from { transform: scaleX(0); } }

/* ---------- home ---------- */

.home-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 18px;
}
.home-head .grow .small { font-weight: 600; }
.home-head .h1 { font-size: 23px; }
.streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-1);
    font-weight: 700;
    font-size: 15px;
}
.streak-chip .ic { color: var(--peach); }

.ritual {
    padding: 20px;
    border-radius: var(--r-xl);
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(157, 144, 255, .55), transparent 60%),
        radial-gradient(70% 80% at 0% 100%, rgba(79, 209, 146, .28), transparent 60%),
        #221D35;
    color: #F4F1FA;
    box-shadow: 0 24px 50px rgba(34, 29, 53, .28);
    overflow: hidden;
    position: relative;
}
:root[data-theme="dark"] .ritual {
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(157, 144, 255, .45), transparent 60%),
        radial-gradient(70% 80% at 0% 100%, rgba(79, 209, 146, .22), transparent 60%),
        #2A2342;
}
.ritual .kicker { color: #C9C1FF; }
.ritual .h1 { font-size: 22px; margin-top: 6px; color: #fff; }
.ritual .small { color: rgba(244, 241, 250, .72); }
.ritual-top { display: flex; gap: 14px; align-items: flex-start; }
.ritual-plant {
    width: 92px;
    height: 104px;
    flex: none;
    margin: -6px -6px 0 0;
}
.ritual-steps { display: grid; gap: 8px; margin: 18px 0 16px; }
.ritual-step {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-align: left;
    transition: background .2s;
}
.ritual-step:hover { background: rgba(255, 255, 255, .13); }
.ritual-step .bubble {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .28);
    font-size: 13px;
    font-weight: 700;
}
.ritual-step.done .bubble { background: var(--mint); border-color: var(--mint); color: #08281A; }
.ritual-step.next .bubble { border-color: #fff; }
.ritual-step .t { font-weight: 650; font-size: 15px; }
.ritual-step .d { font-size: 12.5px; color: rgba(244, 241, 250, .62); }
.ritual-step.done .t { color: rgba(255, 255, 255, .7); }
.ritual .btn.light {
    background: #fff;
    color: #221D35;
    width: 100%;
}

.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0 8px;
    border-radius: 16px;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--ink-3);
}
.week-day.today { background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); }
.week-day .dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--paper-2);
}
.week-day .dot .raw { width: 26px; height: 26px; }
.week-day.done .dot { background: var(--mint-soft); }
.week-day.part .dot { background: var(--sun-soft); }

.goal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.goal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border-radius: 18px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.01em;
    transition: all .2s var(--ease);
}
.goal .tile-icon { width: 40px; height: 40px; border-radius: 13px; }
.goal.on { border-color: var(--ink); box-shadow: var(--shadow-1); transform: translateY(-2px); }

.affirm {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
}
.affirm .h3 { font-size: 15.5px; line-height: 1.4; font-weight: 600; }

.carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 4px 20px 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: none; }

.practice-card {
    width: 168px;
    padding: 0;
    border-radius: 22px;
    overflow: hidden;
}
.practice-cover {
    position: relative;
    height: 104px;
    display: grid;
    place-items: center;
    color: #fff;
}
.practice-cover .ic { width: 40px; height: 40px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); }
.practice-cover .pill { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .9); color: #221D35; }
.practice-cover .lock {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(34, 29, 53, .55);
}
.practice-cover .lock .ic { width: 15px; height: 15px; }
.practice-body { padding: 12px 14px 14px; }
.practice-body .h3 { font-size: 15px; }
.practice-body .tiny { margin-top: 4px; }
.practice-done {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mint);
    color: #08281A;
}
.practice-done .ic { width: 15px; height: 15px; }

.cover-calm { background: linear-gradient(135deg, #7C9CF5, #9D90FF 55%, #C3B8FF); }
.cover-resource { background: linear-gradient(135deg, #FFB86B, #FF9F7A 55%, #FFC542); }
.cover-focus { background: linear-gradient(135deg, #3BC4A0, #2BB673 50%, #8EDB6B); }
.cover-talk { background: linear-gradient(135deg, #F28BB4, #FF9F7A 60%, #FFC9A8); }
.cover-action { background: linear-gradient(135deg, #6C5CE0, #8B6FE8 50%, #59B4F0); }
.cover-sleep { background: linear-gradient(135deg, #2B2A5A, #4B3DB8 55%, #7C6FE0); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-card { padding: 16px; }
.mini-card .tile-icon { margin-bottom: 12px; }
.mini-card .h3 { font-size: 15.5px; }
.mini-card .tiny { margin-top: 3px; }

.challenge {
    padding: 18px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(80% 100% at 100% 0%, rgba(255, 197, 66, .55), transparent 60%),
        var(--peach-soft);
}
.challenge .h3 { color: var(--ink); }
.challenge-dots { display: flex; gap: 6px; margin: 14px 0; }
.challenge-dots i {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(34, 29, 53, .10);
}
:root[data-theme="dark"] .challenge-dots i { background: rgba(255, 255, 255, .12); }
.challenge-dots i.on { background: var(--peach); }

.deep-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px;
}
.timer-badge {
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--violet) var(--p, 0%), var(--violet-soft) 0);
}
.timer-badge > div {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    font-size: 11px;
    font-weight: 700;
    color: var(--violet-ink);
}

/* ---------- garden ---------- */

.garden {
    position: relative;
    padding: 18px 16px 0;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, #E9F6FF 0%, #F2FBF4 62%, #E2F2DF 62%, #D6EBCF 100%);
    overflow: hidden;
}
:root[data-theme="dark"] .garden {
    background: linear-gradient(180deg, #1A2140 0%, #1C2A33 62%, #1D3326 62%, #183021 100%);
}
.garden-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 2px;
    height: 96px;
}
.garden-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.garden-slot .raw { width: 100%; max-width: 48px; height: 78px; }
.garden-slot.grow-in .raw { animation: sprout .9s var(--ease) both; transform-origin: bottom center; }
@keyframes sprout {
    from { transform: scale(.2) translateY(14px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.garden-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 6px 0 10px;
    font-size: 11px;
    font-weight: 650;
    text-align: center;
    color: rgba(34, 29, 53, .55);
}
:root[data-theme="dark"] .garden-labels { color: rgba(244, 241, 250, .55); }
.garden-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.garden-head .h3 { color: #221D35; }
.garden-head .small { color: rgba(34, 29, 53, .65); }
:root[data-theme="dark"] .garden-head .h3 { color: #F4F1FA; }
:root[data-theme="dark"] .garden-head .small { color: rgba(244, 241, 250, .65); }

/* ---------- check-in ---------- */

.weather-hero {
    display: grid;
    place-items: center;
    height: 210px;
    margin: 4px 0 6px;
    position: relative;
}
.weather-hero .weather-icon {
    position: absolute;
    right: 26px;
    top: 12px;
    width: 76px;
    height: 76px;
    animation: bob 5s ease-in-out infinite;
}
.weather-name {
    text-align: center;
    font-family: var(--display);
    font-weight: 600;
    font-size: 20px;
    min-height: 28px;
}
.weather-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 14px;
}
.weather-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 2px 8px;
    border-radius: 18px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    font-size: 11.5px;
    font-weight: 650;
    color: var(--ink-2);
    transition: all .2s var(--ease);
}
.weather-btn .raw { width: 38px; height: 38px; }
.weather-btn.on {
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-3px);
    box-shadow: var(--shadow-1);
}

.q-block { margin-top: 26px; }
.q-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.q-head .h3 { font-size: 16px; }
.q-value {
    font-weight: 700;
    font-size: 14px;
    color: var(--violet-ink);
}

/* ---------- breathe ---------- */

.breath-stage {
    position: relative;
    height: 310px;
    display: grid;
    place-items: center;
    margin: 14px 0 84px;
}
.breath-ring {
    position: absolute;
    width: 290px;
    height: 290px;
}
.breath-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.breath-ring .trk { fill: none; stroke: var(--line); stroke-width: 3; }
.breath-ring .prg { fill: none; stroke: var(--violet); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.breath-orb {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(60% 50% at 35% 25%, rgba(255, 255, 255, .7), transparent 60%),
        radial-gradient(70% 70% at 70% 80%, #4FD192, transparent 70%),
        radial-gradient(90% 90% at 30% 70%, #59B4F0, transparent 70%),
        #9D90FF;
    box-shadow: 0 20px 40px rgba(108, 92, 224, .30);
    transition: transform 4s cubic-bezier(.45, 0, .55, 1);
}
.breath-orb.in { transform: scale(1.55); transition-duration: 4s; }
.breath-orb.out { transform: scale(1); transition-duration: 6s; }
.breath-orb.hold { transform: scale(1.2); }
.breath-label {
    position: absolute;
    bottom: -74px;
    left: 0;
    right: 0;
    text-align: center;
}
.breath-phase {
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
}
.breath-count {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-weight: 600;
    font-size: 30px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(34, 29, 53, .3);
}
.breath-ripple {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid var(--violet);
    opacity: 0;
}
.breath-ripple.go { animation: ripple 4s ease-out infinite; }
.breath-ripple.go.r2 { animation-delay: 2s; }
@keyframes ripple {
    from { transform: scale(1); opacity: .35; }
    to { transform: scale(2.1); opacity: 0; }
}

/* ---------- step / commitment ---------- */

.commit {
    padding: 20px;
    border-radius: var(--r-lg);
    background: var(--ink);
    color: var(--paper);
    animation: card-in .4s var(--ease) both;
}
.commit .kicker { color: var(--sun); }
.commit .h2 { margin-top: 8px; color: var(--paper); }
.commit .small { color: color-mix(in srgb, var(--paper) 70%, transparent); margin-top: 8px; }

/* ---------- celebration ---------- */

.celebrate { text-align: center; padding-top: 10px; }
.celebrate-plant {
    width: 180px;
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.celebrate-plant .raw { width: 100%; height: 100%; animation: sprout 1.2s var(--ease) both; transform-origin: bottom; }
.celebrate-plant::before {
    content: "";
    position: absolute;
    inset: 10% 0 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 197, 66, .45), transparent);
    animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { transform: scale(.9); opacity: .7; }
    50% { transform: scale(1.06); opacity: 1; }
}
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.stat {
    padding: 14px 6px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    text-align: center;
}
.stat b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -.02em;
}
.stat span { font-size: 12px; color: var(--ink-2); font-weight: 600; }

.confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 60;
}
.confetti i {
    position: absolute;
    top: -12px;
    width: 9px;
    height: 14px;
    border-radius: 3px;
    opacity: 0;
    animation: confetti-fall 2.6s cubic-bezier(.25, .6, .4, 1) forwards;
}
@keyframes confetti-fall {
    0% { opacity: 1; transform: translateY(0) rotate(0); }
    100% { opacity: 0; transform: translateY(820px) rotate(720deg); }
}

/* ---------- library & player ---------- */

.lib-list { display: grid; gap: 10px; }
.lib-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px;
}
.lib-thumb {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    position: relative;
}
.lib-thumb .ic { width: 28px; height: 28px; }
.lib-item .h3 { font-size: 15.5px; }
.lib-item .meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.pack-card {
    width: 250px;
    min-height: 150px;
    padding: 18px;
    border-radius: 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}
.pack-card .h3 { color: #fff; font-size: 17px; }
.pack-card .small { color: rgba(255, 255, 255, .82); margin-top: 4px; }
.pack-card .pill { background: rgba(255, 255, 255, .22); color: #fff; align-self: flex-start; }

.player-hero {
    height: 220px;
    margin: 0 -20px;
    display: grid;
    place-items: center;
    color: #fff;
    position: relative;
    border-radius: 0 0 36px 36px;
}
.player-hero > .ic { width: 64px; height: 64px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .2)); }
.player-hero .topbar { position: absolute; top: 0; left: 0; right: 0; margin: 0; background: none; color: #fff; }
.player-hero .topbar .icon-btn { color: #fff; background: rgba(255, 255, 255, .18); }

.step-card {
    padding: 22px 20px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    min-height: 168px;
    animation: card-in .4s var(--ease) both;
}
.step-card .step-n { font-size: 13px; font-weight: 700; color: var(--violet-ink); }
.step-card .h2 { margin-top: 10px; font-size: 20px; line-height: 1.35; }
.step-progress { display: flex; gap: 6px; margin: 18px 0; }
.step-progress i { flex: 1; height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; position: relative; }
.step-progress i.done { background: var(--violet); }
.step-progress i.now::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--violet);
    transform-origin: left;
    animation: grow-x var(--dur, 20s) linear both;
}

/* ---------- deep dive & flex game ---------- */

.timer-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}
.timer-line .bar-track { flex: 1; height: 6px; }

.scale5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 20px; }
.scale5 button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 2px 10px;
    border-radius: 18px;
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    font-size: 11.5px;
    font-weight: 650;
    color: var(--ink-2);
    line-height: 1.2;
    transition: all .2s var(--ease);
}
.scale5 button .dotv {
    border-radius: 50%;
    background: var(--violet);
    opacity: .9;
}
.scale5 button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-3px); }
.scale5 button.on .dotv { background: var(--sun); }

.flex-arena {
    position: relative;
    height: 250px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: box-shadow .2s;
}
.flex-arena.ok { box-shadow: 0 0 0 4px var(--mint-soft), var(--shadow-1); }
.flex-arena.miss { animation: shake .3s; }
@keyframes shake {
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.flex-rule {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.flex-rule.color { background: var(--sun-soft); color: var(--sun-ink); }
.flex-rule.shape { background: var(--sky-soft); color: var(--sky-ink); }
.flex-shape {
    width: 108px;
    height: 108px;
    animation: pop-in .25s var(--ease) both;
}
@keyframes pop-in {
    from { transform: scale(.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.flex-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.flex-key {
    min-height: 96px;
    border-radius: 22px;
    background: var(--surface);
    border: 1.5px solid var(--line-2);
    display: grid;
    gap: 8px;
    padding: 12px;
    align-content: center;
    justify-items: center;
    transition: transform .1s;
}
.flex-key:active { transform: scale(.97); }
.flex-key .opts { display: flex; gap: 10px; align-items: center; }
.flex-key .opt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); padding: 3px 6px; border-radius: 8px; }
.flex-key .opt.active { background: var(--paper-2); color: var(--ink); }
.swatch { width: 18px; height: 18px; border-radius: 50%; }
.swatch.sq { border-radius: 4px; }

.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.triad .stat b { font-size: 26px; }

/* ---------- insights ---------- */

.hero-figure {
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
}
.trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink-2);
}
.chart-card { padding: 18px 16px 12px; }
.chart {
    position: relative;
    margin-top: 12px;
    touch-action: pan-y;
}
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .axis text { fill: var(--ink-3); font-size: 11px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.chart .series { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--violet); opacity: .1; }
.chart .dot { fill: var(--violet); stroke: var(--surface); stroke-width: 2; }
.chart .cross { stroke: var(--ink-3); stroke-width: 1; }
.chart .col { fill: var(--mint); }
.chart .col.today { fill: var(--violet); }
.chart-tip {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-2);
    z-index: 3;
}
.chart-tip b { font-size: 15px; display: block; }
.chart-tip .k { display: inline-block; width: 12px; height: 2px; background: var(--violet); vertical-align: middle; margin-right: 6px; }

.weather-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.weather-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 6px;
    border-radius: 14px;
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 650;
    color: var(--ink-3);
}
.weather-cell .raw { width: 28px; height: 28px; }
.weather-cell.empty .raw { opacity: .25; }

.locked-card {
    position: relative;
    padding: 18px;
}
.locked-card .blur {
    filter: blur(5px);
    opacity: .6;
    pointer-events: none;
    user-select: none;
}
.locked-card .unlock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 20px;
    background: color-mix(in srgb, var(--surface) 40%, transparent);
}

.recap-launch {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(255, 159, 122, .5), transparent 60%),
        radial-gradient(70% 100% at 0% 100%, rgba(157, 144, 255, .55), transparent 60%),
        #221D35;
    color: #fff;
    border: 0;
}
.recap-launch .small { color: rgba(255, 255, 255, .72); }
.recap-launch .h3 { color: #fff; }

/* stories */
.story {
    position: absolute;
    inset: 0;
    z-index: 80;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 28px;
    animation: fade-in .3s ease both;
}
@keyframes fade-in { from { opacity: 0; } }
.story-bars { display: flex; gap: 4px; }
.story-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative; }
.story-bars i.done { background: #fff; }
.story-bars i.now::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: grow-x 5.5s linear both; }
.story-top { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.story-top .raw { height: 22px; }
.story-top .icon-btn { color: #fff; background: rgba(255, 255, 255, .14); }
.story-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    text-align: left;
    animation: card-in .5s var(--ease) both;
}
.story-big {
    font-family: var(--display);
    font-weight: 600;
    font-size: 84px;
    line-height: 1;
    letter-spacing: -.04em;
}
.story-title { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.story-text { font-size: 17px; color: rgba(255, 255, 255, .8); }
.story-tap { position: absolute; top: 80px; bottom: 120px; width: 40%; z-index: 4; }
.story-body { pointer-events: none; position: relative; z-index: 3; }
.story-body .btn { pointer-events: auto; position: relative; z-index: 6; }
.story-top { position: relative; z-index: 6; }
.story-tap.l { left: 0; }
.story-tap.r { right: 0; }
.story .btn.light { background: #fff; color: #221D35; }
.story-1 { background: radial-gradient(70% 60% at 80% 10%, #FF9F7A, transparent 60%), radial-gradient(80% 70% at 10% 90%, #4FD192, transparent 60%), #3B2E8C; }
.story-2 { background: radial-gradient(70% 60% at 20% 10%, #59B4F0, transparent 60%), radial-gradient(80% 70% at 90% 90%, #9D90FF, transparent 60%), #1F2A5C; }
.story-3 { background: radial-gradient(70% 60% at 80% 20%, #FFC542, transparent 60%), radial-gradient(80% 70% at 10% 90%, #FF9F7A, transparent 60%), #7A3B4F; }
.story-4 { background: radial-gradient(70% 60% at 20% 20%, #4FD192, transparent 60%), radial-gradient(80% 70% at 90% 90%, #59B4F0, transparent 60%), #1C4A44; }
.story-5 { background: radial-gradient(70% 60% at 80% 10%, #9D90FF, transparent 60%), radial-gradient(80% 70% at 10% 90%, #FF9F7A, transparent 60%), #221D35; }
.story .garden { background: rgba(255, 255, 255, .12); }
.story .garden-labels { color: rgba(255, 255, 255, .7); }

.kv-list { margin-top: 6px; font-size: 13px; }
.kv-list .kv { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.kv-list .kv span:first-child { color: var(--ink-2); }
.kv-list .kv span:last-child { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- navigator ---------- */

.nav-hero {
    padding: 20px;
    border-radius: var(--r-xl);
    background:
        radial-gradient(90% 90% at 100% 0%, rgba(89, 180, 240, .35), transparent 60%),
        radial-gradient(70% 80% at 0% 100%, rgba(157, 144, 255, .35), transparent 60%),
        var(--surface);
    border: 1px solid var(--line);
}
.match {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}
.match-ring { width: 64px; height: 64px; flex: none; position: relative; }
.match-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.match-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; }
.reason { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.reason .ic { color: var(--mint); margin-top: 1px; }
.reason + .reason { margin-top: 10px; }

.pref-label { font-size: 13px; font-weight: 650; color: var(--ink-2); margin: 18px 0 8px; }

.brief {
    padding: 22px 20px;
    border-radius: 20px;
    background: #FFFFFF;
    color: #221D35;
    border: 1px solid rgba(34, 29, 53, .1);
    box-shadow: var(--shadow-2);
    font-size: 13.5px;
    line-height: 1.5;
}
.brief .brief-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(34, 29, 53, .1); }
.brief .brief-head .raw { height: 20px; }
.brief h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6C5CE0; margin: 14px 0 6px; }
.brief .kv { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.brief .kv span:first-child { color: #5E5873; }
.brief .kv span:last-child { font-weight: 600; text-align: right; }
.brief ul { margin: 0; padding-left: 18px; }
.brief .foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(34, 29, 53, .1); font-size: 11px; color: #6F6985; }
.spark { display: block; width: 100%; height: 44px; }

/* ---------- profile ---------- */

.profile-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 6px 0 4px;
}
.profile-head .h1 { font-size: 24px; margin-top: 6px; }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 6px 12px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    text-align: center;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}
.badge .medal {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
}
.badge .medal .ic { width: 24px; height: 24px; }
.badge.locked { color: var(--ink-3); }
.badge.locked .medal { background: var(--paper-2) !important; color: var(--ink-3); }

.plus-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 0;
    color: #fff;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(255, 197, 66, .55), transparent 60%),
        linear-gradient(120deg, #4B3DB8, #6C5CE0 60%, #8B6FE8);
}
.plus-banner .h3 { color: #fff; }
.plus-banner .small { color: rgba(255, 255, 255, .8); }

/* ---------- plus ---------- */

.plus-hero {
    margin: 0 -20px;
    padding: 70px 24px 28px;
    color: #fff;
    background:
        radial-gradient(60% 60% at 85% 10%, rgba(255, 197, 66, .55), transparent 60%),
        radial-gradient(70% 70% at 0% 100%, rgba(79, 209, 146, .35), transparent 60%),
        linear-gradient(160deg, #3B2E8C, #6C5CE0);
    border-radius: 0 0 36px 36px;
    position: relative;
}
.plus-hero .topbar { position: absolute; top: 0; left: 0; right: 0; margin: 0; background: none; }
.plus-hero .topbar .icon-btn { color: #fff; background: rgba(255, 255, 255, .16); }
.plus-hero .display { color: #fff; font-size: 28px; }
.plus-hero .lead { color: rgba(255, 255, 255, .82); margin-top: 10px; }
.benefit { display: flex; gap: 14px; align-items: flex-start; }
.benefit + .benefit { margin-top: 16px; }
.benefit .h3 { font-size: 15.5px; }
.plans { display: grid; gap: 10px; }
.plan {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    background: var(--surface);
    border: 2px solid var(--line);
    text-align: left;
    position: relative;
    transition: border-color .2s;
}
.plan.on { border-color: var(--violet); }
.plan .radio {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--line-2);
    flex: none;
    display: grid;
    place-items: center;
}
.plan.on .radio { border-color: var(--violet); }
.plan.on .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--violet); }
.plan .price { margin-left: auto; text-align: right; font-weight: 700; }
.plan .price .tiny { display: block; font-weight: 500; }
.plan .save { position: absolute; top: -11px; right: 16px; }

/* ---------- programs, diary, plus ---------- */

.program-card {
    width: 250px;
    min-height: 176px;
    padding: 16px;
    border-radius: 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
}
.program-card .pill { background: rgba(255, 255, 255, .22); color: #fff; }
.program-card .h3 { color: #fff; font-size: 17px; }
.program-card .small { color: rgba(255, 255, 255, .85); margin-top: 4px; }
.program-progress { height: 6px; border-radius: 999px; background: rgba(34, 29, 53, .12); overflow: hidden; margin-top: 10px; }
.program-card .program-progress { background: rgba(255, 255, 255, .25); }
.program-progress > div { height: 100%; border-radius: 999px; background: var(--violet); }
.program-card .program-progress > div { background: #fff; }
.program-today .lib-thumb { width: 56px; height: 56px; border-radius: 16px; }
.program-today .lib-thumb .ic { width: 26px; height: 26px; }
.program-day { align-items: flex-start; }
.program-day.current { background: var(--violet-soft); }
.day-n {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--paper-2);
    color: var(--ink-2);
}
.day-n.done { background: var(--mint); color: #08281A; }
.textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1.5px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
    resize: vertical;
    outline: none;
}
.textarea.tall { min-height: 170px; }
.textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.step-progress i.now-static { background: var(--violet); opacity: .45; }
.plus-source {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    font-size: 14px;
    line-height: 1.4;
}
.compare { padding: 6px 0; }
.compare-row {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13.5px;
    line-height: 1.35;
    align-items: center;
}
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-row .free { color: var(--ink-2); }
.compare-row .plus { color: var(--violet-ink); font-weight: 650; }
.compare-row.head { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.compare-row.head .plus { color: var(--violet-ink); }
.trial-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.trial-step { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; position: relative; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.trial-step i { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); }
.trial-step::before { content: ""; position: absolute; top: 5px; left: 16px; right: -4px; height: 2px; background: var(--line-2); }
.trial-step:last-child::before { display: none; }
.trial-step.now i { background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.trial-step b { font-size: 14px; color: var(--ink); }

/* ---------- invite ---------- */

.invite-hero {
    text-align: center;
    padding: 10px 0 0;
}
.invite-art {
    position: relative;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.invite-art .one, .invite-art .two { position: absolute; }
.invite-art .one { transform: translateX(-40px); }
.invite-art .two { transform: translateX(40px); mix-blend-mode: multiply; }
:root[data-theme="dark"] .invite-art .two { mix-blend-mode: screen; }
.code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 18px;
    border-radius: 18px;
    background: var(--surface);
    border: 1.5px dashed var(--line-2);
}
.code-box b { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .06em; }

/* ---------- assistant ---------- */

.chat { display: grid; gap: 10px; padding-top: 6px; }
.msg {
    max-width: 84%;
    padding: 12px 15px;
    border-radius: 20px;
    font-size: 15px;
    line-height: 1.45;
    animation: msg-in .35s var(--ease) both;
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.msg.bot { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; justify-self: start; }
.msg.me { background: var(--ink); color: var(--paper); border-bottom-right-radius: 6px; justify-self: end; }
.bot-line { display: flex; gap: 8px; align-items: flex-end; }
.bot-line .aura { width: 28px; height: 28px; box-shadow: none; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.chat-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; animation: msg-in .35s var(--ease) both; }
.private-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 12.5px;
    font-weight: 650;
    width: fit-content;
    margin: 0 auto 6px;
}
.analysis { display: grid; gap: 10px; }
.analysis .card { display: flex; gap: 14px; align-items: flex-start; }
.analysis .n {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--surface);
}

/* ---------- crisis ---------- */

.crisis-call {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
}
.crisis-call .num-big { font-size: 26px; font-weight: 750; letter-spacing: -.01em; }
.crisis-call.urgent { background: var(--coral); color: #fff; border-color: transparent; }
.crisis-call.urgent .small { color: rgba(255, 255, 255, .86); }
.crisis-call .call-ic {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--coral-soft);
    color: var(--coral-ink);
}
.crisis-call.urgent .call-ic { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- sheet, toast ---------- */

.scrim {
    position: absolute;
    inset: 0;
    z-index: 70;
    background: rgba(20, 17, 31, .45);
    animation: fade-in .2s ease both;
}
.sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 71;
    max-height: 92%;
    overflow-y: auto;
    padding: 10px 20px 26px;
    border-radius: 30px 30px 0 0;
    background: var(--paper);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .2);
    animation: sheet-up .38s var(--ease) both;
    scrollbar-width: none;
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet-grip { width: 40px; height: 5px; border-radius: 999px; background: var(--line-2); margin: 0 auto 14px; }
.share-preview {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-2);
    background: var(--paper-2);
    aspect-ratio: 4 / 5;
}
.share-preview canvas, .share-preview img { width: 100%; height: 100%; display: block; }
.share-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.share-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
}
.share-act .tile-icon { width: 52px; height: 52px; border-radius: 18px; }

.toast {
    position: absolute;
    left: 50%;
    top: 14px;
    pointer-events: none;
    z-index: 90;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--ink);
    color: var(--paper);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-2);
    animation: toast-in .35s var(--ease) both;
    white-space: normal;
    width: max-content;
    max-width: calc(100% - 40px);
    line-height: 1.35;
}
.toast .ic { color: var(--sun); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px); } }

.badge-pop { text-align: center; padding: 6px 0 4px; }
.badge-pop .medal {
    width: 110px;
    height: 110px;
    margin: 6px auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    animation: medal 0.8s var(--ease) both;
    box-shadow: 0 20px 40px rgba(108, 92, 224, .3);
}
.badge-pop .medal .ic { width: 48px; height: 48px; }
@keyframes medal {
    0% { transform: scale(.3) rotate(-30deg); opacity: 0; }
    60% { transform: scale(1.08) rotate(6deg); opacity: 1; }
    100% { transform: none; }
}

/* ---------- misc ---------- */

.xp-bar { display: flex; align-items: center; gap: 10px; }
.xp-bar .bar-track { flex: 1; height: 8px; background: rgba(255, 255, 255, .14); }
.xp-bar .bar-fill { background: linear-gradient(90deg, var(--sun), var(--peach)); }
.level-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
}

.divider { height: 1px; background: var(--line); margin: 16px 0; }

.empty-state {
    text-align: center;
    padding: 26px 18px;
}
.empty-state .raw { display: block; width: 90px; height: 110px; margin: 0 auto 10px; }

@media (max-width: 360px) {
    .screen { padding-left: 16px; padding-right: 16px; }
    .topbar { margin: 0 -16px; }
    .display { font-size: 26px; }
    .goal-grid { gap: 6px; }
    .weather-btn { font-size: 10.5px; }
    .carousel, .chips.scroll-x { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .breath-orb { transition-duration: 1s !important; }
}

@media print {
    html, body { height: auto; overflow: visible; background: #fff; }
    .stage, .device, .scroll, .screen { position: static !important; display: block !important; width: auto !important; height: auto !important; max-width: none !important;
        overflow: visible !important; transform: none !important; animation: none !important; box-shadow: none !important; border-radius: 0 !important; background: #fff !important; padding: 0 !important; }
    .stage-aside, .tabbar, .toast, .confetti, .screen > *:not(.brief) { display: none !important; }
    .brief { box-shadow: none; border: 0; padding: 0; font-size: 12pt; max-width: 680px; margin: 0 auto; }
}


/* ---------- QA fixes ---------- */
button.check::after { content: ""; position: absolute; inset: -10px; }
.sos-btn.compact { width: 44px; padding: 0; justify-content: center; }
.topbar-actions .link-btn + .sos-btn { margin-left: 2px; }
.weather-empty { display: grid; place-items: center; width: 28px; height: 28px; font-weight: 700; color: var(--ink-3); }
.step-progress i > b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--violet); border-radius: 999px; transition: width .25s linear; }
.step-progress i.current { background: var(--line-2); }
.home-head .h1, .profile-head .h1, .story-title, .alias-name { overflow-wrap: anywhere; }
.code-box b { white-space: nowrap; }
.btn-row { flex-wrap: wrap; }
.btn-row > .btn { min-width: 130px; }
.scroll { overflow-x: hidden; }
.screen { max-width: 100%; }

/* dark theme: cards that are always dark, readable coral, readable kicker */
.commit { background: #221D35; color: #F4F1FA; }
:root[data-theme="dark"] .commit { background: #2C2547; }
.commit .h2 { color: #F4F1FA; }
.commit .small { color: rgba(244, 241, 250, .72); }
.commit .kicker { color: #FFC542; }
:root[data-theme="dark"] .btn.coral, :root[data-theme="dark"] .crisis-call.urgent { background: #C42E35; }
.crisis-call.urgent .small { color: #fff; }

/* narrow phones */
@media (max-width: 360px) {
    .aura-option .aura { width: 32px; height: 32px; }
    .aura-option { padding: 4px; }
    .aura-picker { gap: 2px; }
    .cta-dock { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .player-hero, .plus-hero { margin-left: -16px; margin-right: -16px; }
    .compare-row { grid-template-columns: 1.2fr 1fr 1fr; padding: 10px 12px; font-size: 12.5px; }
    .segmented button { font-size: 13px; }
}

/* desktop: show the side panel earlier */
@media (min-width: 980px) and (max-width: 1119px) {
    .stage { gap: 40px; }
    .stage-aside { display: block; width: 300px; }
    .stage-aside h2 { font-size: 28px; }
}

.chart-tip { white-space: normal; max-width: 210px; }
.code-box { flex-wrap: wrap; }
.streak-chip { height: 44px; }
.footer-safety button { padding: 13px 0; }
.switch { position: relative; }
.switch::before { content: ""; position: absolute; inset: -8px -4px; }
.tab { color: var(--ink-2); }

/* topbar: title shrinks with an ellipsis instead of running under SOS / «Выйти» */
.topbar { grid-template-columns: 44px minmax(0, 1fr) auto; }
.topbar-spacer { width: 44px; }
.topbar-actions { justify-self: end; }
.topbar.titled .sos-label { display: none; }
.topbar.titled .sos-btn { width: 44px; padding: 0; justify-content: center; }

/* small print on tinted cards keeps 4.5:1 */
.card.tint-violet .tiny, .card.tint-mint .tiny, .card.tint-sun .tiny { color: var(--ink-2); }
.program-day.current .tiny, .program-today .tiny { color: var(--ink-2); }
.sheet:focus { outline: none; }

/* ---------- garden collection ---------- */
.flower-art .raw, .flower-mini .raw, .weekly-flower .raw, .meadow-plant .raw, .garden-entry-art .raw { display: block; width: 100%; height: 100%; }
.flower-art svg, .flower-mini svg, .weekly-flower svg, .meadow-plant svg, .garden-entry-art svg { display: block; width: 100%; height: 100%; overflow: visible; }

.garden-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.garden-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 10px; box-shadow: var(--shadow-1); min-width: 0; }
.garden-stat .h2 { font-size: 20px; white-space: nowrap; }
.garden-stat .tiny { display: block; margin-top: 2px; line-height: 1.25; }

.meadow {
    position: relative;
    border-radius: var(--r-xl);
    padding: 20px 14px 18px;
    min-height: 170px;
    background:
        radial-gradient(120% 60% at 50% 105%, #CFE8C2 0%, #DDF0D2 55%, transparent 56%),
        linear-gradient(180deg, #E6F3FF 0%, #F3FAF2 70%, #E2F2DA 100%);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--line);
}
:root[data-theme="dark"] .meadow {
    background:
        radial-gradient(120% 60% at 50% 105%, #1D3A2C 0%, #1A3127 55%, transparent 56%),
        linear-gradient(180deg, #1B1F3F 0%, #1E2436 70%, #1A2A24 100%);
}
.meadow-bed { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 2px 4px; }
.meadow-plant {
    width: 48px; height: 67px; padding: 0; background: none; border: 0; cursor: pointer;
    transform: translateY(var(--y, 0));
    animation: sprout .8s var(--ease) both; animation-delay: var(--d, 0s); transform-origin: bottom center;
}
.meadow-plant.weekly { width: 58px; height: 81px; }
.meadow-plant:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 12px; }
.meadow-empty { display: grid; justify-items: center; gap: 6px; padding-top: 10px; }
.meadow-empty .meadow-plant { width: 60px; height: 84px; animation: none; }

.weekly-card {
    border-radius: var(--r-xl);
    padding: 18px;
    background: linear-gradient(135deg, var(--violet-soft), var(--sun-soft));
    border: 1px solid var(--line);
}
.weekly-flower { width: 56px; height: 78px; flex: none; }
.weekly-flower.locked svg, .flower-card.locked .flower-art svg, .flower-art.locked svg { filter: brightness(0); opacity: .16; }
:root[data-theme="dark"] .weekly-flower.locked svg,
:root[data-theme="dark"] .flower-card.locked .flower-art svg,
:root[data-theme="dark"] .flower-art.locked svg { filter: brightness(0) invert(1); opacity: .2; }
.week-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week-dot { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.week-dot i {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); border: 2px dashed var(--line-2, rgba(34,29,53,.18)); color: #fff;
}
.week-dot.done i { background: var(--mint, #2BB673); border: 0; }
.week-dot.partial i { border: 2px solid var(--mint, #2BB673); background: var(--mint-soft); }
.week-dot.today i { border: 2px solid var(--violet); }
.week-dot.missed i { background: var(--paper-2); border: 0; position: relative; }
.week-dot.missed i::after { content: ""; width: 12px; height: 2px; border-radius: 2px; background: var(--ink-3); }
.week-dot.before i { opacity: .35; border-style: solid; }
.week-dot .ic { width: 16px; height: 16px; }

.flower-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.flower-card {
    position: relative; display: grid; justify-items: center; gap: 2px;
    padding: 12px 6px 12px; border-radius: 20px; text-align: center;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    min-height: 44px; cursor: pointer;
}
.flower-card.rare { background: linear-gradient(180deg, var(--violet-soft), var(--surface) 70%); }
.flower-card.weekly { background: linear-gradient(180deg, var(--sun-soft), var(--surface) 70%); }
.flower-card.locked { background: var(--paper-2); box-shadow: none; }
.flower-card .flower-art { width: 56px; height: 78px; }
.flower-name { font-weight: 650; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
.flower-how { font-size: 11.5px; color: var(--ink-2); line-height: 1.25; }
.flower-card.locked .flower-name { color: var(--ink-2); letter-spacing: .1em; }
.flower-count {
    position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px; background: var(--mint-soft); color: var(--ink);
}

.pill.common { background: var(--mint-soft); color: var(--ink); }
.pill.rare { background: var(--violet-soft); color: var(--violet-ink); }
.pill.weekly { background: var(--sun-soft); color: var(--ink); }

.flower-pop { text-align: center; padding: 4px 0; display: grid; justify-items: center; }
.flower-big {
    width: 150px; height: 170px; margin: 6px auto 10px; display: grid; place-items: center;
    border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--mint-soft), transparent 70%);
}
.flower-pop.rare .flower-big { background: radial-gradient(circle at 50% 45%, var(--violet-soft), transparent 70%); }
.flower-pop.weekly .flower-big { background: radial-gradient(circle at 50% 45%, var(--sun-soft), transparent 70%); }
.flower-big .flower-art { width: 104px; height: 146px; animation: medal .8s var(--ease) both; }

.badge-reward, .new-species {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 10px 14px; border-radius: 20px; background: var(--violet-soft); width: 100%;
}
.new-species { background: var(--mint-soft); border: 0; box-shadow: none; }
.flower-mini { width: 44px; height: 62px; flex: none; }

.garden-entry { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; }
.garden-entry-art { display: flex; align-items: flex-end; flex: none; width: 84px; height: 54px; }
.garden-entry-art .raw { width: 34px; height: 48px; margin-right: -9px; flex: none; }

@media (max-width: 360px) {
    .flower-grid { gap: 8px; }
    .flower-card .flower-art { width: 48px; height: 67px; }
    .garden-stat .h2 { font-size: 17px; }
    .week-dot i { width: 26px; height: 26px; }
}
@media (max-width: 360px) {
    .flower-card { padding: 10px 3px; }
    .flower-name { font-size: 11.5px; overflow-wrap: normal; word-break: normal; hyphens: auto; letter-spacing: -.01em; }
    .flower-how { font-size: 10.5px; }
}