:root {
    --ink: #24213a;
    --muted: #66617f;
    --glass: rgba(255, 255, 255, 0.82);
    --glass-strong: rgba(255, 255, 255, 0.93);
    --line: rgba(77, 62, 123, 0.12);
    --primary: #6f5be8;
    --primary-strong: #5845ca;
    --danger: #a52d56;
    --danger-bg: rgba(255, 238, 244, 0.94);
    --success: #286f57;
    --success-bg: rgba(235, 251, 245, 0.94);
    --shadow: 0 24px 70px rgba(45, 35, 84, 0.18);
    --radius-xl: 30px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --scene:
        radial-gradient(circle at 16% 16%, rgba(255,255,255,.85), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(210,196,255,.72), transparent 30%),
        radial-gradient(circle at 50% 82%, rgba(162,230,224,.70), transparent 34%),
        linear-gradient(145deg, #f5dfff 0%, #d9e7ff 48%, #d7fff2 100%);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #dcd5f4;
}

body {
    margin: 0;
    min-height: 100dvh;
    color: var(--ink);
    font-family:
        Inter,
        ui-rounded,
        "SF Pro Rounded",
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

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

button,
a {
    touch-action: manipulation;
}

.app-shell {
    position: relative;
    min-height: 100dvh;
    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.02) 48%,
            rgba(32,24,63,.12) 100%
        ),
        var(--daily-image, none),
        var(--scene);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.app-shell::before,
.app-shell::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
    filter: blur(2px);
    opacity: .68;
}

.app-shell::before {
    width: 180px;
    height: 180px;
    top: 12%;
    left: -46px;
    border-radius: 48% 52% 63% 37% / 53% 42% 58% 47%;
    background: rgba(255, 255, 255, .34);
    transform: rotate(18deg);
}

.app-shell::after {
    width: 240px;
    height: 240px;
    right: -90px;
    bottom: 7%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .28);
    box-shadow:
        inset 0 0 0 24px rgba(255,255,255,.08),
        inset 0 0 0 58px rgba(255,255,255,.06);
}

.background-wash {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,.02) 38%,
            rgba(41,31,76,.06) 100%
        );
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: calc(64px + var(--safe-top));
    padding:
        calc(10px + var(--safe-top))
        max(16px, env(safe-area-inset-right))
        10px
        max(16px, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .42);
    border-bottom: 1px solid rgba(255, 255, 255, .42);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 850;
    letter-spacing: -.02em;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: white;
    background: linear-gradient(145deg, #7869ef, #4f3fb6);
    box-shadow: 0 8px 20px rgba(75, 56, 174, .24);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-button,
.back-button {
    appearance: none;
    border: 0;
    cursor: pointer;
}

.icon-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: var(--ink);
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
    font-weight: 900;
}

.app-main {
    position: relative;
    z-index: 2;
    width: min(100% - 28px, 620px);
    margin: 0 auto;
    padding:
        28px
        0
        calc(32px + var(--safe-bottom));
}

.glass-card,
.question-card {
    border: 1px solid rgba(255,255,255,.68);
    background: var(--glass);
    box-shadow: var(--shadow);
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.glass-card {
    border-radius: var(--radius-xl);
    padding: clamp(24px, 7vw, 38px);
}

.home-card,
.setup-card {
    margin-top: clamp(4vh, 11vh, 94px);
}

.home-card {
    text-align: center;
}

.eyebrow {
    margin-bottom: 8px;
    color: #6658b3;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 8vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.lead {
    max-width: 34rem;
    margin: 0 auto 28px;
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.55;
}

.mood-orb {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 34% 28%, #fff, rgba(255,255,255,.22) 35%),
        linear-gradient(145deg, #c9b9ff, #92e2d4);
    box-shadow:
        0 18px 35px rgba(82, 68, 151, .18),
        inset 0 0 0 1px rgba(255,255,255,.68);
    color: #5443ac;
    font-size: 2rem;
    font-weight: 900;
    transform: rotate(-3deg);
}

.mood-orb.complete {
    background:
        radial-gradient(circle at 34% 28%, #fff, rgba(255,255,255,.24) 35%),
        linear-gradient(145deg, #aee9d7, #9cc3ff);
    color: #286f57;
}

.button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border: 0;
    border-radius: 18px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.button:active {
    transform: scale(.985);
}

.button-primary {
    color: white;
    background: linear-gradient(145deg, #7869ef, #5b47cc);
    box-shadow: 0 13px 26px rgba(76, 57, 184, .26);
}

.button-primary:hover {
    background: linear-gradient(145deg, #6e5ee8, #513ec2);
}

.button-block {
    width: 100%;
}

.field {
    margin-bottom: 22px;
}

.field-label {
    display: block;
    margin-bottom: 9px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.field-help {
    margin-top: 8px;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.4;
}

.form-control,
.login-card input {
    width: 100%;
    min-height: 54px;
    padding: 13px 15px;
    border: 1px solid rgba(77,62,123,.17);
    border-radius: 16px;
    outline: none;
    color: var(--ink);
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.form-control:focus,
.login-card input:focus {
    border-color: rgba(111,91,232,.62);
    box-shadow:
        0 0 0 4px rgba(111,91,232,.11),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.message {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.56);
    box-shadow: 0 10px 30px rgba(44, 35, 86, .09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-weight: 700;
    line-height: 1.45;
}

.message.success {
    color: var(--success);
    background: var(--success-bg);
}

.message.error {
    color: var(--danger);
    background: var(--danger-bg);
}

.field-error {
    margin-top: 8px;
    color: var(--danger);
    font-size: .9rem;
    font-weight: 750;
}

.question-timer-anchor {
    position: fixed;
    z-index: 60;
    top: calc(72px + var(--safe-top));
    right: max(18px, env(safe-area-inset-right, 0px));
    pointer-events: none;
}

.countdown {
    display: inline-block;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: rgba(54, 48, 77, .58);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: .70rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    letter-spacing: .02em;
    opacity: .88;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .28);
}

.countdown.timer-done {
    min-width: 0;
    color: rgba(72, 65, 93, .50);
    font-size: .66rem;
    font-weight: 700;
}

@media (max-width: 390px) {
    .question-timer-anchor {
        top: calc(70px + var(--safe-top));
        right: max(14px, env(safe-area-inset-right, 0px));
    }
}

.checkin-wrap {
    min-height: calc(100dvh - 120px);
}

.question-stage {
    display: grid;
    min-height: calc(100dvh - 132px - var(--safe-bottom));
    align-items: center;
    padding-bottom: 20px;
}

.question-step[hidden] {
    display: none !important;
}

.question-step {
    width: 100%;
    animation: enter-question .3s ease both;
}

@keyframes enter-question {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.back-button {
    min-height: 42px;
    margin: 0 0 10px 4px;
    padding: 0 10px;
    border-radius: 12px;
    color: #56506d;
    background: rgba(255,255,255,.46);
    font-size: .88rem;
    font-weight: 800;
}

.question-card {
    border-radius: var(--radius-xl);
    padding: clamp(22px, 7vw, 34px);
}

.question-kicker {
    margin-bottom: 11px;
    color: #7568b6;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.question-title {
    max-width: 16ch;
    margin-bottom: 26px;
    font-size: clamp(1.85rem, 7vw, 2.65rem);
    line-height: 1.08;
}

.answer-grid > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.answer-grid > div > div {
    min-width: 0;
}

.answer-grid label {
    position: relative;
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    padding: 11px 12px;
    border: 1px solid rgba(85,70,132,.14);
    border-radius: 17px;
    color: #49435e;
    background: rgba(255,255,255,.76);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 6px 16px rgba(64,50,106,.06);
    text-align: center;
    font-size: .92rem;
    font-weight: 820;
    line-height: 1.15;
    cursor: pointer;
    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease;
}

.answer-grid label:active {
    transform: scale(.97);
}

.answer-grid input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.answer-grid label:has(input:checked) {
    border-color: rgba(111,91,232,.48);
    color: #4c3db2;
    background: #f2efff;
    box-shadow:
        0 0 0 3px rgba(111,91,232,.10),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.answer-grid-binary > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.answer-grid-binary label {
    min-height: 72px;
    font-size: 1rem;
}

.answer-grid-bleeding > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.answer-grid-bleeding > div > div:last-child {
    grid-column: 1 / -1;
}

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

.login-shell {
    display: grid;
    place-items: center;
}

.login-main {
    position: relative;
    z-index: 2;
    width: min(100% - 28px, 460px);
    padding:
        calc(24px + var(--safe-top))
        0
        calc(24px + var(--safe-bottom));
}

.login-card h1 {
    margin-bottom: 8px;
}

.login-card .mood-orb {
    margin-left: 0;
    width: 68px;
    height: 68px;
    border-radius: 23px;
}

@media (min-width: 650px) {
    .answer-grid > div {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .answer-grid-binary > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .answer-grid-bleeding > div {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .answer-grid-bleeding > div > div:last-child {
        grid-column: auto;
    }
}

@media (max-width: 430px) {
    .app-header {
        min-height: calc(58px + var(--safe-top));
    }

    .app-main {
        width: min(100% - 20px, 620px);
        padding-top: 16px;
    }

    .glass-card {
        padding: 24px 20px;
        border-radius: 25px;
    }

    .home-card,
    .setup-card {
        margin-top: 5vh;
    }

    .question-stage {
        min-height: calc(100dvh - 110px - var(--safe-bottom));
    }

    .question-card {
        padding: 22px 18px 20px;
        border-radius: 25px;
    }

    .question-title {
        margin-bottom: 20px;
    }

    .answer-grid label {
        min-height: 58px;
        border-radius: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* 50 stable daily background slots. */

.day-01 {
    --scene:
        radial-gradient(circle at 19% 21%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 31% 63%, #f6dcffcc, transparent 32%),
        radial-gradient(circle at 67% 31%, #b9e9eed8, transparent 30%),
        linear-gradient(145deg, #d9d0ff 0%, #b9e9ee 52%, #f6dcff 100%);
}

.day-02 {
    --scene:
        radial-gradient(circle at 26% 32%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 44% 68%, #efdcffcc, transparent 32%),
        radial-gradient(circle at 64% 40%, #c6f0e8d8, transparent 30%),
        linear-gradient(145deg, #cdd8ff 0%, #c6f0e8 52%, #efdcff 100%);
}

.day-03 {
    --scene:
        radial-gradient(circle at 33% 43%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 57% 73%, #ffe4f2cc, transparent 32%),
        radial-gradient(circle at 61% 49%, #addfe8d8, transparent 30%),
        linear-gradient(145deg, #e5d2ff 0%, #addfe8 52%, #ffe4f2 100%);
}

.day-04 {
    --scene:
        radial-gradient(circle at 40% 20%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 70% 78%, #bfece7cc, transparent 32%),
        radial-gradient(circle at 58% 58%, #d3c8ffd8, transparent 30%),
        linear-gradient(145deg, #cad8ff 0%, #d3c8ff 52%, #bfece7 100%);
}

.day-05 {
    --scene:
        radial-gradient(circle at 47% 31%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 83% 83%, #d9f3e2cc, transparent 32%),
        radial-gradient(circle at 55% 67%, #c7e9fad8, transparent 30%),
        linear-gradient(145deg, #e8d7ff 0%, #c7e9fa 52%, #d9f3e2 100%);
}

.day-06 {
    --scene:
        radial-gradient(circle at 54% 42%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 28% 58%, #f9e1f3cc, transparent 32%),
        radial-gradient(circle at 52% 26%, #b7e7e8d8, transparent 30%),
        linear-gradient(145deg, #d2cbff 0%, #b7e7e8 52%, #f9e1f3 100%);
}

.day-07 {
    --scene:
        radial-gradient(circle at 61% 19%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 41% 63%, #b8e7dacc, transparent 32%),
        radial-gradient(circle at 49% 35%, #e1d6ffd8, transparent 30%),
        linear-gradient(145deg, #c9d8ff 0%, #e1d6ff 52%, #b8e7da 100%);
}

.day-08 {
    --scene:
        radial-gradient(circle at 68% 30%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 54% 68%, #d8f0eecc, transparent 32%),
        radial-gradient(circle at 46% 44%, #c0e7f4d8, transparent 30%),
        linear-gradient(145deg, #e7d4ff 0%, #c0e7f4 52%, #d8f0ee 100%);
}

.day-09 {
    --scene:
        radial-gradient(circle at 75% 41%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 67% 73%, #f7dff8cc, transparent 32%),
        radial-gradient(circle at 43% 53%, #bde7dfd8, transparent 30%),
        linear-gradient(145deg, #d8d1ff 0%, #bde7df 52%, #f7dff8 100%);
}

.day-10 {
    --scene:
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 80% 78%, #ead7ffcc, transparent 32%),
        radial-gradient(circle at 70% 62%, #c8eeded8, transparent 30%),
        linear-gradient(145deg, #c8d7ff 0%, #c8eede 52%, #ead7ff 100%);
}

.day-11 {
    --scene:
        radial-gradient(circle at 15% 29%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 25% 83%, #ffe5f0cc, transparent 32%),
        radial-gradient(circle at 67% 71%, #b9e0efd8, transparent 30%),
        linear-gradient(145deg, #e3d8ff 0%, #b9e0ef 52%, #ffe5f0 100%);
}

.day-12 {
    --scene:
        radial-gradient(circle at 22% 40%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 38% 58%, #bce9e0cc, transparent 32%),
        radial-gradient(circle at 64% 30%, #d7cbffd8, transparent 30%),
        linear-gradient(145deg, #d0d4ff 0%, #d7cbff 52%, #bce9e0 100%);
}

.day-13 {
    --scene:
        radial-gradient(circle at 29% 17%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 51% 63%, #d7f0e7cc, transparent 32%),
        radial-gradient(circle at 61% 39%, #bce6eed8, transparent 30%),
        linear-gradient(145deg, #eadcff 0%, #bce6ee 52%, #d7f0e7 100%);
}

.day-14 {
    --scene:
        radial-gradient(circle at 36% 28%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 64% 68%, #fff0c7cc, transparent 32%),
        radial-gradient(circle at 58% 48%, #ccefcfd8, transparent 30%),
        linear-gradient(145deg, #cfe8ff 0%, #ccefcf 52%, #fff0c7 100%);
}

.day-15 {
    --scene:
        radial-gradient(circle at 43% 39%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 77% 73%, #f7d5e7cc, transparent 32%),
        radial-gradient(circle at 55% 57%, #d9f1c5d8, transparent 30%),
        linear-gradient(145deg, #c2e5ff 0%, #d9f1c5 52%, #f7d5e7 100%);
}

.day-16 {
    --scene:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 22% 78%, #ffe7bdcc, transparent 32%),
        radial-gradient(circle at 52% 66%, #bfe6d0d8, transparent 30%),
        linear-gradient(145deg, #d7edff 0%, #bfe6d0 52%, #ffe7bd 100%);
}

.day-17 {
    --scene:
        radial-gradient(circle at 57% 27%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 35% 83%, #e4d8ffcc, transparent 32%),
        radial-gradient(circle at 49% 25%, #d8ebbfd8, transparent 30%),
        linear-gradient(145deg, #c8e6ff 0%, #d8ebbf 52%, #e4d8ff 100%);
}

.day-18 {
    --scene:
        radial-gradient(circle at 64% 38%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 48% 58%, #ffe1cdcc, transparent 32%),
        radial-gradient(circle at 46% 34%, #bfe8ddd8, transparent 30%),
        linear-gradient(145deg, #d6efff 0%, #bfe8dd 52%, #ffe1cd 100%);
}

.day-19 {
    --scene:
        radial-gradient(circle at 71% 15%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 61% 63%, #f6e0ffcc, transparent 32%),
        radial-gradient(circle at 43% 43%, #d6f0ccd8, transparent 30%),
        linear-gradient(145deg, #c4e4f6 0%, #d6f0cc 52%, #f6e0ff 100%);
}

.day-20 {
    --scene:
        radial-gradient(circle at 78% 26%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 74% 68%, #ffe8cacc, transparent 32%),
        radial-gradient(circle at 70% 52%, #c5edc6d8, transparent 30%),
        linear-gradient(145deg, #d9ecff 0%, #c5edc6 52%, #ffe8ca 100%);
}

.day-21 {
    --scene:
        radial-gradient(circle at 85% 37%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 19% 73%, #f2d9ffcc, transparent 32%),
        radial-gradient(circle at 67% 61%, #c9e8d2d8, transparent 30%),
        linear-gradient(145deg, #cce9ff 0%, #c9e8d2 52%, #f2d9ff 100%);
}

.day-22 {
    --scene:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 32% 78%, #ffe0dacc, transparent 32%),
        radial-gradient(circle at 64% 70%, #c8eac2d8, transparent 30%),
        linear-gradient(145deg, #d1efff 0%, #c8eac2 52%, #ffe0da 100%);
}

.day-23 {
    --scene:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 45% 83%, #fce9c0cc, transparent 32%),
        radial-gradient(circle at 61% 29%, #d6efcad8, transparent 30%),
        linear-gradient(145deg, #c6e6ff 0%, #d6efca 52%, #fce9c0 100%);
}

.day-24 {
    --scene:
        radial-gradient(circle at 32% 36%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 58% 58%, #f4dfffcc, transparent 32%),
        radial-gradient(circle at 58% 38%, #bfe6d5d8, transparent 30%),
        linear-gradient(145deg, #dceeff 0%, #bfe6d5 52%, #f4dfff 100%);
}

.day-25 {
    --scene:
        radial-gradient(circle at 39% 13%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 71% 63%, #ffe4cacc, transparent 32%),
        radial-gradient(circle at 55% 47%, #d0efc4d8, transparent 30%),
        linear-gradient(145deg, #cbeaff 0%, #d0efc4 52%, #ffe4ca 100%);
}

.day-26 {
    --scene:
        radial-gradient(circle at 46% 24%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 84% 68%, #f8e2ffcc, transparent 32%),
        radial-gradient(circle at 52% 56%, #c3e9d0d8, transparent 30%),
        linear-gradient(145deg, #d4edff 0%, #c3e9d0 52%, #f8e2ff 100%);
}

.day-27 {
    --scene:
        radial-gradient(circle at 53% 35%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 29% 73%, #c8edf2cc, transparent 32%),
        radial-gradient(circle at 49% 65%, #d8d5ffd8, transparent 30%),
        linear-gradient(145deg, #ffd8dd 0%, #d8d5ff 52%, #c8edf2 100%);
}

.day-28 {
    --scene:
        radial-gradient(circle at 60% 12%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 42% 78%, #c7ecdfcc, transparent 32%),
        radial-gradient(circle at 46% 24%, #d7ddffd8, transparent 30%),
        linear-gradient(145deg, #ffdcca 0%, #d7ddff 52%, #c7ecdf 100%);
}

.day-29 {
    --scene:
        radial-gradient(circle at 67% 23%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 55% 83%, #d5efddcc, transparent 32%),
        radial-gradient(circle at 43% 33%, #cbdfffd8, transparent 30%),
        linear-gradient(145deg, #f5d7ff 0%, #cbdfff 52%, #d5efdd 100%);
}

.day-30 {
    --scene:
        radial-gradient(circle at 74% 34%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 68% 58%, #c4e9eecc, transparent 32%),
        radial-gradient(circle at 70% 42%, #d1d6ffd8, transparent 30%),
        linear-gradient(145deg, #ffd8ea 0%, #d1d6ff 52%, #c4e9ee 100%);
}

.day-31 {
    --scene:
        radial-gradient(circle at 81% 11%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 81% 63%, #cbeedfcc, transparent 32%),
        radial-gradient(circle at 67% 51%, #d7d3ffd8, transparent 30%),
        linear-gradient(145deg, #ffe1cc 0%, #d7d3ff 52%, #cbeedf 100%);
}

.day-32 {
    --scene:
        radial-gradient(circle at 14% 22%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 26% 68%, #d7efdccc, transparent 32%),
        radial-gradient(circle at 64% 60%, #c9e0ffd8, transparent 30%),
        linear-gradient(145deg, #f5dcff 0%, #c9e0ff 52%, #d7efdc 100%);
}

.day-33 {
    --scene:
        radial-gradient(circle at 21% 33%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 39% 73%, #c2edf0cc, transparent 32%),
        radial-gradient(circle at 61% 69%, #d5d8ffd8, transparent 30%),
        linear-gradient(145deg, #ffd8df 0%, #d5d8ff 52%, #c2edf0 100%);
}

.day-34 {
    --scene:
        radial-gradient(circle at 28% 10%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 52% 78%, #c8ebdecc, transparent 32%),
        radial-gradient(circle at 58% 28%, #d0dcffd8, transparent 30%),
        linear-gradient(145deg, #ffe2cf 0%, #d0dcff 52%, #c8ebde 100%);
}

.day-35 {
    --scene:
        radial-gradient(circle at 35% 21%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 65% 83%, #d4f0e0cc, transparent 32%),
        radial-gradient(circle at 55% 37%, #cedcffd8, transparent 30%),
        linear-gradient(145deg, #f4d9ff 0%, #cedcff 52%, #d4f0e0 100%);
}

.day-36 {
    --scene:
        radial-gradient(circle at 42% 32%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 78% 58%, #c5eaf0cc, transparent 32%),
        radial-gradient(circle at 52% 46%, #d2d5ffd8, transparent 30%),
        linear-gradient(145deg, #ffdce8 0%, #d2d5ff 52%, #c5eaf0 100%);
}

.day-37 {
    --scene:
        radial-gradient(circle at 49% 43%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 23% 63%, #caeddfcc, transparent 32%),
        radial-gradient(circle at 49% 55%, #d9d4ffd8, transparent 30%),
        linear-gradient(145deg, #ffe0cb 0%, #d9d4ff 52%, #caeddf 100%);
}

.day-38 {
    --scene:
        radial-gradient(circle at 56% 20%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 36% 68%, #d6eedbcc, transparent 32%),
        radial-gradient(circle at 46% 64%, #cadfffd8, transparent 30%),
        linear-gradient(145deg, #f6ddff 0%, #cadfff 52%, #d6eedb 100%);
}

.day-39 {
    --scene:
        radial-gradient(circle at 63% 31%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 49% 73%, #fff0b8cc, transparent 32%),
        radial-gradient(circle at 43% 23%, #cdd8ffd8, transparent 30%),
        linear-gradient(145deg, #ffd3e8 0%, #cdd8ff 52%, #fff0b8 100%);
}

.day-40 {
    --scene:
        radial-gradient(circle at 70% 42%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 62% 78%, #ffe2bacc, transparent 32%),
        radial-gradient(circle at 70% 32%, #c5e9ffd8, transparent 30%),
        linear-gradient(145deg, #f8d0ff 0%, #c5e9ff 52%, #ffe2ba 100%);
}

.day-41 {
    --scene:
        radial-gradient(circle at 77% 19%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 75% 83%, #c8f0e3cc, transparent 32%),
        radial-gradient(circle at 67% 41%, #d5d0ffd8, transparent 30%),
        linear-gradient(145deg, #ffd5dd 0%, #d5d0ff 52%, #c8f0e3 100%);
}

.day-42 {
    --scene:
        radial-gradient(circle at 84% 30%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 20% 58%, #ffe6c2cc, transparent 32%),
        radial-gradient(circle at 64% 50%, #c9ddffd8, transparent 30%),
        linear-gradient(145deg, #f5d6ff 0%, #c9ddff 52%, #ffe6c2 100%);
}

.day-43 {
    --scene:
        radial-gradient(circle at 17% 41%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 33% 63%, #f4e2ffcc, transparent 32%),
        radial-gradient(circle at 61% 59%, #c5e5f7d8, transparent 30%),
        linear-gradient(145deg, #ffd2ea 0%, #c5e5f7 52%, #f4e2ff 100%);
}

.day-44 {
    --scene:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 46% 68%, #c9efdfcc, transparent 32%),
        radial-gradient(circle at 58% 68%, #d0d4ffd8, transparent 30%),
        linear-gradient(145deg, #ffdad4 0%, #d0d4ff 52%, #c9efdf 100%);
}

.day-45 {
    --scene:
        radial-gradient(circle at 31% 29%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 59% 73%, #ffe3bdcc, transparent 32%),
        radial-gradient(circle at 55% 27%, #c8e6ffd8, transparent 30%),
        linear-gradient(145deg, #f7d2ff 0%, #c8e6ff 52%, #ffe3bd 100%);
}

.day-46 {
    --scene:
        radial-gradient(circle at 38% 40%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 72% 78%, #c4ecedcc, transparent 32%),
        radial-gradient(circle at 52% 36%, #d2d8ffd8, transparent 30%),
        linear-gradient(145deg, #ffd4e4 0%, #d2d8ff 52%, #c4eced 100%);
}

.day-47 {
    --scene:
        radial-gradient(circle at 45% 17%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 85% 83%, #ffe8c4cc, transparent 32%),
        radial-gradient(circle at 49% 45%, #c5e1ffd8, transparent 30%),
        linear-gradient(145deg, #f9d8ff 0%, #c5e1ff 52%, #ffe8c4 100%);
}

.day-48 {
    --scene:
        radial-gradient(circle at 52% 28%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 30% 58%, #c7efe2cc, transparent 32%),
        radial-gradient(circle at 46% 54%, #d8d0ffd8, transparent 30%),
        linear-gradient(145deg, #ffd6dc 0%, #d8d0ff 52%, #c7efe2 100%);
}

.day-49 {
    --scene:
        radial-gradient(circle at 59% 39%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 43% 63%, #ffe0c0cc, transparent 32%),
        radial-gradient(circle at 43% 63%, #c8e7f8d8, transparent 30%),
        linear-gradient(145deg, #f4d4ff 0%, #c8e7f8 52%, #ffe0c0 100%);
}

.day-50 {
    --scene:
        radial-gradient(circle at 66% 16%, rgba(255,255,255,.78), transparent 24%),
        radial-gradient(circle at 56% 68%, #caeee4cc, transparent 32%),
        radial-gradient(circle at 70% 22%, #cfd8ffd8, transparent 30%),
        linear-gradient(145deg, #ffd7e8 0%, #cfd8ff 52%, #caeee4 100%);
}

/* Passkeys / Android biometric sign-in */
.button-secondary {
    color: #514a6d;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 0 0 1px rgba(77,62,123,.12);
}

.button-secondary:hover {
    background: rgba(255,255,255,.88);
}

.biometric-button {
    gap: 10px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 750;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(77,62,123,.12);
}

.passkey-status {
    min-height: 22px;
    margin: 0 0 12px;
    color: var(--success);
    text-align: center;
    font-size: .88rem;
    font-weight: 750;
}

.passkey-status:empty {
    min-height: 0;
    margin-bottom: 0;
}

.error-text {
    color: var(--danger);
}

.passkey-card {
    margin-top: clamp(3vh, 8vh, 72px);
    text-align: center;
}

.biometric-orb {
    font-size: 1.7rem;
}

.passkey-help {
    max-width: 32rem;
    margin: 14px auto 0;
}

.passkey-list {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(77,62,123,.10);
    text-align: left;
}

.passkey-list h2 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.passkey-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(77,62,123,.08);
}

.passkey-row:first-of-type {
    border-top: 0;
}

.text-button {
    appearance: none;
    border: 0;
    padding: 10px 8px;
    color: var(--danger);
    background: transparent;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
}

/* Daily reminder shortcut: visible enough to find, secondary to the check-in CTA. */
.home-reminder-row {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.reminder-shortcut {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(84, 67, 172, .10);
    border-radius: 999px;
    color: rgba(63, 57, 83, .72);
    background: rgba(255, 255, 255, .38);
    font-size: .88rem;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.reminder-shortcut:active {
    transform: scale(.985);
}

@media (max-width: 520px) {
    .home-reminder-row {
        margin-top: 12px;
    }

    .reminder-shortcut {
        min-height: 40px;
        padding: 8px 13px;
        font-size: .84rem;
    }
}


/* Child login credentials / PWA install */
.child-login-card .lead {
    max-width: 29rem;
}

.child-code-input {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 850;
}

.child-pin-input {
    letter-spacing: .25em;
    font-size: 1.12rem;
    font-weight: 850;
}

.install-button {
    margin-top: 14px;
}

.install-help {
    margin: 10px auto 0;
    text-align: center;
}

.ash-id {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 12px;
    background: rgba(111,91,232,.10);
    color: #5544b6;
    letter-spacing: .08em;
}

.credential-value {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: .12em;
    padding: .8rem 1rem;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    text-align: center;
}