@import '_content/MindsetBuilderHybrid.Shared/MindsetBuilderHybrid.Shared.7dho9a16no.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-frame[b-epp2xjq5ve] {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: visible;
}

.app-content[b-epp2xjq5ve] {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 110px;
    box-sizing: border-box;
}

/* Global app themes */
.app-frame.global-theme-midnight[b-epp2xjq5ve] {
    --global-theme-background: radial-gradient(circle at 8% 18%, rgba(110, 49, 225, 0.42), transparent 32%), radial-gradient(circle at 90% 76%, rgba(178, 51, 211, 0.22), transparent 34%), linear-gradient(135deg, #211047 0%, #11102d 48%, #1d1239 100%);
}

.app-frame.global-theme-lavender[b-epp2xjq5ve] {
    --global-theme-background: radial-gradient(circle at 12% 16%, rgba(226, 188, 255, 0.42), transparent 32%), radial-gradient(circle at 88% 76%, rgba(173, 116, 255, 0.32), transparent 35%), linear-gradient(135deg, #45306e 0%, #2d2153 48%, #58407c 100%);
}

.app-frame.global-theme-sunset[b-epp2xjq5ve] {
    --global-theme-background: radial-gradient(circle at 10% 18%, rgba(255, 156, 105, 0.38), transparent 33%), radial-gradient(circle at 88% 75%, rgba(228, 75, 153, 0.3), transparent 35%), linear-gradient(135deg, #542441 0%, #2b1737 48%, #703145 100%);
}

.app-frame.global-theme-forest[b-epp2xjq5ve] {
    --global-theme-background: radial-gradient(circle at 9% 18%, rgba(85, 191, 143, 0.3), transparent 32%), radial-gradient(circle at 90% 76%, rgba(88, 136, 115, 0.27), transparent 36%), linear-gradient(135deg, #173d38 0%, #10282c 48%, #28493e 100%);
}

/* Apply the selected theme to every app page */
.app-frame[b-epp2xjq5ve]  .mindset-page,
.app-frame[b-epp2xjq5ve]  .home-page,
.app-frame[b-epp2xjq5ve]  .quotes-page,
.app-frame[b-epp2xjq5ve]  .journal-page,
.app-frame[b-epp2xjq5ve]  .farm-page,
.app-frame[b-epp2xjq5ve]  .more-page,
.app-frame[b-epp2xjq5ve]  .progress-page,
.app-frame[b-epp2xjq5ve]  .goals-page,
.app-frame[b-epp2xjq5ve]  .mood-page,
.app-frame[b-epp2xjq5ve]  .help-page,
.app-frame[b-epp2xjq5ve]  .support-page,
.app-frame[b-epp2xjq5ve]  .subscription-page,
.app-frame[b-epp2xjq5ve]  .inventory-page,
.app-frame[b-epp2xjq5ve]  .ai-page,
.app-frame[b-epp2xjq5ve]  .auth-page {
    background: var(--global-theme-background) !important;
    background-attachment: fixed !important;
    background-size: 115% 115% !important;
    transition: background 0.8s ease;
}

.app-frame.global-theme-ocean[b-epp2xjq5ve] {
    background: radial-gradient(circle at 10% 18%, rgba(59, 180, 255, 0.38), transparent 32%), radial-gradient(circle at 88% 12%, rgba(102, 116, 255, 0.30), transparent 35%), linear-gradient(145deg, #071a35 0%, #101844 52%, #080d28 100%);
}

.app-frame.global-theme-rose[b-epp2xjq5ve] {
    background: radial-gradient(circle at 12% 16%, rgba(255, 99, 190, 0.40), transparent 32%), radial-gradient(circle at 88% 20%, rgba(175, 89, 255, 0.34), transparent 35%), linear-gradient(145deg, #30102c 0%, #22113e 52%, #10091f 100%);
}

.app-frame.global-theme-golden[b-epp2xjq5ve] {
    background: radial-gradient(circle at 10% 18%, rgba(255, 204, 92, 0.42), transparent 32%), radial-gradient(circle at 88% 16%, rgba(255, 138, 76, 0.30), transparent 35%), linear-gradient(145deg, #33200d 0%, #25172f 52%, #100b1e 100%);
}

.app-frame.global-theme-crystal[b-epp2xjq5ve] {
    background: radial-gradient(circle at 12% 18%, rgba(112, 235, 255, 0.38), transparent 32%), radial-gradient(circle at 88% 16%, rgba(186, 156, 255, 0.34), transparent 35%), linear-gradient(145deg, #071f31 0%, #16153e 52%, #090b22 100%);
}

.app-frame.global-theme-emerald[b-epp2xjq5ve] {
    background: radial-gradient(circle at 10% 18%, rgba(72, 241, 174, 0.35), transparent 32%), radial-gradient(circle at 88% 14%, rgba(42, 190, 211, 0.30), transparent 35%), linear-gradient(145deg, #082b27 0%, #10243b 52%, #07151e 100%);
}

#blazor-error-ui[b-epp2xjq5ve] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-epp2xjq5ve] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.bottom-nav[b-53kggbswz1] {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1000;
    width: min(calc(100% - 28px), 590px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    padding: 8px;
    background: linear-gradient( 135deg, rgba(19, 22, 48, 0.96), rgba(29, 24, 62, 0.94) );
    border: 1px solid rgba(165, 132, 255, 0.32);
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42), 0 0 28px rgba(119, 78, 220, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

[b-53kggbswz1] .nav-item {
    position: relative;
    min-width: 0;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 17px;
    color: #aaa6c7;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: color 240ms ease, background-color 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
}

    [b-53kggbswz1] .nav-item:hover {
        color: #ddd2ff;
        background: rgba(132, 91, 246, 0.10);
        transform: translateY(-3px);
    }

    [b-53kggbswz1] .nav-item.active {
        color: #ffffff;
        background: linear-gradient( 145deg, rgba(126, 87, 226, 0.38), rgba(75, 60, 150, 0.24) );
        box-shadow: inset 0 0 18px rgba(175, 143, 255, 0.12), 0 6px 18px rgba(61, 35, 126, 0.28);
    }

        [b-53kggbswz1] .nav-item.active::before {
            content: "";
            position: absolute;
            top: 5px;
            width: 26px;
            height: 3px;
            border-radius: 999px;
            background: #cbb8ff;
            box-shadow: 0 0 10px rgba(190, 162, 255, 0.8);
        }

.nav-icon[b-53kggbswz1] {
    font-size: 23px;
    line-height: 1;
    font-weight: 500;
}

@media (max-width: 420px) {
    .bottom-nav[b-53kggbswz1] {
        width: calc(100% - 18px);
        bottom: max(9px, env(safe-area-inset-bottom));
        border-radius: 21px;
    }

    [b-53kggbswz1] .nav-item {
        height: 58px;
        font-size: 11px;
    }

    .nav-icon[b-53kggbswz1] {
        font-size: 21px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-l8vlhq1j24],
.components-reconnect-repeated-attempt-visible[b-l8vlhq1j24],
.components-reconnect-failed-visible[b-l8vlhq1j24],
.components-pause-visible[b-l8vlhq1j24],
.components-resume-failed-visible[b-l8vlhq1j24],
.components-rejoining-animation[b-l8vlhq1j24] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-l8vlhq1j24],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-l8vlhq1j24],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-l8vlhq1j24],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-l8vlhq1j24],
#components-reconnect-modal.components-reconnect-retrying[b-l8vlhq1j24],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-l8vlhq1j24],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-l8vlhq1j24],
#components-reconnect-modal.components-reconnect-failed[b-l8vlhq1j24],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-l8vlhq1j24] {
    display: block;
}


#components-reconnect-modal[b-l8vlhq1j24] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-l8vlhq1j24 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-l8vlhq1j24 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-l8vlhq1j24 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-l8vlhq1j24]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-l8vlhq1j24 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-l8vlhq1j24 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-l8vlhq1j24 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-l8vlhq1j24 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-l8vlhq1j24] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-l8vlhq1j24] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-l8vlhq1j24] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-l8vlhq1j24] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-l8vlhq1j24] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-l8vlhq1j24] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-l8vlhq1j24] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-l8vlhq1j24 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-l8vlhq1j24] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-l8vlhq1j24 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Account.razor.rz.scp.css */
.settings-page[b-k8fcx3oc5o] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: #f8f1ff;
    background: radial-gradient(circle at 15% 12%, rgba(151, 91, 226, 0.18), transparent 32%), radial-gradient(circle at 88% 38%, rgba(218, 112, 177, 0.1), transparent 30%), linear-gradient(180deg, #100b26 0%, #17102f 46%, #0d0920 100%);
}

    .settings-page[b-k8fcx3oc5o]::before,
    .settings-page[b-k8fcx3oc5o]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

        .individual-stars[b-k8fcx3oc5o] {
            position: absolute;
            z-index: 1;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .individual-star[b-k8fcx3oc5o] {
            position: absolute;
            left: var(--left);
            top: var(--top);
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background: white;
            box-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(202, 164, 255, 0.55);
            animation: individualStarDrift-b-k8fcx3oc5o var(--move-duration) ease-in-out var(--delay) infinite alternate, individualStarTwinkle-b-k8fcx3oc5o var(--twinkle-duration) ease-in-out var(--delay) infinite; 
        }

        @keyframes individualStarDrift-b-k8fcx3oc5o {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(var(--drift-x), var(--drift-y));
            }
        }

        @keyframes individualStarTwinkle-b-k8fcx3oc5o {
            0%, 100% {
                opacity: 0.18;
            }

            35% {
                opacity: 0.95;
            }

            65% {
                opacity: 0.42;
            }
        }
    }

    .settings-page[b-k8fcx3oc5o]::before {
        display: none;
        opacity: 0.68;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(222, 190, 255, 0.6) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255, 220, 242, 0.45) 0 1px, transparent 1.5px);
        background-size: 91px 91px, 143px 143px, 207px 207px;
        background-position: 24px 35px, 112px 74px, 61px 158px;
        animation: settingsStarsDrift-b-k8fcx3oc5o 45s linear infinite;
    }

    .settings-page[b-k8fcx3oc5o]::after {
        display: none;
        opacity: 0.45;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1.4px, transparent 2px), radial-gradient(circle, rgba(208, 169, 255, 0.78) 0 1.2px, transparent 2px);
        background-size: 263px 263px, 379px 379px;
        background-position: 70px 106px, 284px 48px;
        animation: settingsLargeStarsDrift-b-k8fcx3oc5o 58s linear infinite;
    }

.settings-glow[b-k8fcx3oc5o] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(12px);
}

.glow-one[b-k8fcx3oc5o] {
    top: 90px;
    left: -110px;
    width: 290px;
    height: 290px;
    background: rgba(128, 79, 211, 0.14);
    animation: settingsGlowFloat-b-k8fcx3oc5o 9s ease-in-out infinite;
}

.glow-two[b-k8fcx3oc5o] {
    right: -130px;
    bottom: 180px;
    width: 330px;
    height: 330px;
    background: rgba(220, 112, 174, 0.09);
    animation: settingsGlowFloat-b-k8fcx3oc5o 11s 1.5s ease-in-out infinite reverse;
}

.settings-header[b-k8fcx3oc5o] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 14px;
    width: min(100% - 36px, 900px);
    margin: 0 auto;
    padding: 30px 0 20px;
    animation: settingsHeaderEntrance-b-k8fcx3oc5o 0.55s ease both;
}

.page-label[b-k8fcx3oc5o],
.eyebrow[b-k8fcx3oc5o] {
    margin: 0;
    color: #b89bdc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.settings-header h1[b-k8fcx3oc5o] {
    margin: 5px 0 0;
    color: #fff9f5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    line-height: 1;
}

.back-button[b-k8fcx3oc5o],
.header-icon[b-k8fcx3oc5o] {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(219, 188, 255, 0.17);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 10px 28px rgba(4, 2, 18, 0.24);
    backdrop-filter: blur(12px);
}

.back-button[b-k8fcx3oc5o] {
    color: #eee3fa;
    text-decoration: none;
    font-size: 31px;
    line-height: 1;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .back-button:hover[b-k8fcx3oc5o] {
        color: white;
        background: rgba(170, 113, 235, 0.18);
        box-shadow: 0 0 22px rgba(177, 119, 247, 0.16);
        transform: translateX(-3px);
    }

.header-icon[b-k8fcx3oc5o] {
    font-size: 21px;
    animation: gearFloat-b-k8fcx3oc5o 4s ease-in-out infinite;
}

.settings-content[b-k8fcx3oc5o] {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(100% - 36px, 900px);
    margin: 0 auto;
    padding-bottom: 48px;
    flex-direction: column;
    gap: 15px;
}

.settings-card[b-k8fcx3oc5o] {
    padding: 22px;
    border: 1px solid rgba(216, 188, 255, 0.13);
    border-radius: 25px;
    background: linear-gradient( 145deg, rgba(41, 29, 73, 0.78), rgba(24, 17, 48, 0.76) );
    box-shadow: 0 18px 46px rgba(5, 2, 20, 0.28), inset 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(18px);
    animation: settingsCardEntrance-b-k8fcx3oc5o 0.65s ease both;
}

    .settings-card:nth-child(2)[b-k8fcx3oc5o] {
        animation-delay: 0.08s;
    }

    .settings-card:nth-child(3)[b-k8fcx3oc5o] {
        animation-delay: 0.16s;
    }

    .settings-card:nth-child(4)[b-k8fcx3oc5o] {
        animation-delay: 0.24s;
    }

.section-heading[b-k8fcx3oc5o] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.section-icon[b-k8fcx3oc5o] {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    font-size: 21px;
}

    .section-icon.purple[b-k8fcx3oc5o] {
        background: rgba(159, 107, 235, 0.18);
    }

    .section-icon.pink[b-k8fcx3oc5o] {
        background: rgba(235, 112, 170, 0.16);
    }

    .section-icon.gold[b-k8fcx3oc5o] {
        background: rgba(231, 179, 85, 0.16);
    }

    .section-icon.blue[b-k8fcx3oc5o] {
        background: rgba(93, 164, 230, 0.16);
    }

.section-heading h2[b-k8fcx3oc5o] {
    margin: 4px 0 0;
    color: #fff9f4;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.setting-row[b-k8fcx3oc5o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 66px;
    padding: 13px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

    .setting-row strong[b-k8fcx3oc5o] {
        display: block;
        color: #f8f2fc;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 14px;
    }

    .setting-row span[b-k8fcx3oc5o] {
        display: block;
        margin-top: 4px;
        color: #aaa0b7;
        font-size: 10px;
        line-height: 1.45;
    }

.text-input[b-k8fcx3oc5o],
.select-input[b-k8fcx3oc5o],
.time-input[b-k8fcx3oc5o] {
    height: 40px;
    border: 1px solid rgba(220, 196, 255, 0.16);
    border-radius: 12px;
    outline: none;
    color: #f2e9f8;
    background: rgba(8, 5, 27, 0.43);
    font-family: inherit;
    font-size: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.text-input[b-k8fcx3oc5o] {
    width: 210px;
    padding: 0 12px;
}

.select-input[b-k8fcx3oc5o] {
    width: 170px;
    padding: 0 10px;
}

.time-input[b-k8fcx3oc5o] {
    width: 108px;
    padding: 0 9px;
}

.select-input option[b-k8fcx3oc5o] {
    color: #24183e;
    background: #fff;
}

.text-input:focus[b-k8fcx3oc5o],
.select-input:focus[b-k8fcx3oc5o],
.time-input:focus[b-k8fcx3oc5o] {
    border-color: rgba(190, 143, 250, 0.54);
    background: rgba(17, 10, 44, 0.62);
    box-shadow: 0 0 0 3px rgba(174, 116, 245, 0.1);
}

.time-input:disabled[b-k8fcx3oc5o] {
    opacity: 0.38;
    cursor: not-allowed;
}

.toggle-switch[b-k8fcx3oc5o] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 27px;
    flex: 0 0 48px;
}

    .toggle-switch input[b-k8fcx3oc5o] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.toggle-slider[b-k8fcx3oc5o] {
    position: absolute;
    inset: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(104, 94, 119, 0.44);
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

    .toggle-slider[b-k8fcx3oc5o]::before {
        content: "";
        position: absolute;
        left: 3px;
        bottom: 3px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #e6dfea;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.32);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
    }

.toggle-switch input:checked + .toggle-slider[b-k8fcx3oc5o] {
    background: linear-gradient(135deg, #825fdc, #be7eea);
    box-shadow: 0 0 18px rgba(176, 116, 235, 0.27);
}

    .toggle-switch input:checked + .toggle-slider[b-k8fcx3oc5o]::before {
        background: white;
        transform: translateX(21px);
    }

.save-settings-button[b-k8fcx3oc5o] {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border: 1px solid rgba(236, 204, 255, 0.2);
    border-radius: 17px;
    color: white;
    background: linear-gradient(135deg, #805bd9, #b875e5 58%, #d77bb6);
    box-shadow: 0 12px 30px rgba(117, 72, 201, 0.28), 0 0 22px rgba(186, 116, 230, 0.13);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    animation: settingsCardEntrance-b-k8fcx3oc5o 0.65s 0.32s ease both;
}

    .save-settings-button span[b-k8fcx3oc5o] {
        margin: 0;
        font-size: 17px;
    }

    .save-settings-button:hover[b-k8fcx3oc5o] {
        filter: brightness(1.08);
        box-shadow: 0 15px 35px rgba(117, 72, 201, 0.36), 0 0 29px rgba(201, 125, 235, 0.2);
        transform: translateY(-2px);
    }

.saved-message[b-k8fcx3oc5o] {
    position: fixed;
    z-index: 10;
    right: 24px;
    bottom: 24px;
    padding: 13px 18px;
    border: 1px solid rgba(159, 239, 191, 0.2);
    border-radius: 15px;
    color: #eafff1;
    background: rgba(38, 101, 68, 0.92);
    box-shadow: 0 14px 35px rgba(3, 15, 9, 0.38);
    font-size: 11px;
    backdrop-filter: blur(14px);
    animation: savedMessageEntrance-b-k8fcx3oc5o 0.35s ease both;
}

@keyframes settingsHeaderEntrance-b-k8fcx3oc5o {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes settingsCardEntrance-b-k8fcx3oc5o {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes savedMessageEntrance-b-k8fcx3oc5o {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gearFloat-b-k8fcx3oc5o {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(12deg);
    }
}

@keyframes settingsGlowFloat-b-k8fcx3oc5o {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(24px, -20px, 0) scale(1.08);
    }
}

@keyframes settingsStarsDrift-b-k8fcx3oc5o {
    from {
        background-position: 24px 35px, 112px 74px, 61px 158px;
    }

    to {
        background-position: 24px 308px, 112px 360px, 61px 572px;
    }
}

@keyframes settingsLargeStarsDrift-b-k8fcx3oc5o {
    from {
        background-position: 70px 106px, 284px 48px;
    }

    to {
        background-position: 70px 632px, 284px 806px;
    }
}

@media (max-width: 600px) {
    .settings-header[b-k8fcx3oc5o],
    .settings-content[b-k8fcx3oc5o] {
        width: min(100% - 24px, 900px);
    }

    .settings-header[b-k8fcx3oc5o] {
        padding-top: 23px;
    }

    .settings-card[b-k8fcx3oc5o] {
        padding: 17px;
        border-radius: 22px;
    }

    .setting-row[b-k8fcx3oc5o] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .text-input[b-k8fcx3oc5o],
    .select-input[b-k8fcx3oc5o],
    .time-input[b-k8fcx3oc5o] {
        width: 100%;
    }

    .toggle-switch[b-k8fcx3oc5o] {
        justify-self: end;
        margin-top: -39px;
    }

    .setting-row:has(.toggle-switch) > div[b-k8fcx3oc5o] {
        padding-right: 62px;
    }
}

@media (max-width: 430px) {
    .settings-header[b-k8fcx3oc5o] {
        grid-template-columns: 40px 1fr 42px;
        gap: 9px;
    }

        .settings-header h1[b-k8fcx3oc5o] {
            font-size: 28px;
        }

    .back-button[b-k8fcx3oc5o] {
        width: 39px;
        height: 39px;
    }

    .header-icon[b-k8fcx3oc5o] {
        width: 42px;
        height: 42px;
    }

    .section-heading h2[b-k8fcx3oc5o] {
        font-size: 20px;
    }

    .saved-message[b-k8fcx3oc5o] {
        right: 12px;
        bottom: 16px;
        left: 12px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-page *[b-k8fcx3oc5o],
    .settings-page *[b-k8fcx3oc5o]::before,
    .settings-page *[b-k8fcx3oc5o]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
.bio-input[b-k8fcx3oc5o] {
    width: 210px;
    min-height: 72px;
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid rgba(220, 196, 255, 0.16);
    border-radius: 12px;
    outline: none;
    color: #f2e9f8;
    background: rgba(8, 5, 27, 0.43);
    font-family: inherit;
    font-size: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .bio-input:focus[b-k8fcx3oc5o] {
        border-color: rgba(190, 143, 250, 0.54);
        background: rgba(17, 10, 44, 0.62);
        box-shadow: 0 0 0 3px rgba(174, 116, 245, 0.1);
    }

@media (max-width: 600px) {
    .bio-input[b-k8fcx3oc5o] {
        width: 100%;
    }
}

/* Login, guest and logout design */
.account-access-card[b-k8fcx3oc5o] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 17px;
    align-items: center;
    margin: 4px 0 25px;
    padding: 19px;
    overflow: hidden;
    background: radial-gradient(circle at 8% 50%, rgba(161, 84, 255, 0.22), transparent 34%), linear-gradient(120deg, rgba(58, 35, 106, 0.74), rgba(22, 18, 56, 0.82));
    border: 1px solid rgba(202, 166, 255, 0.28);
    border-radius: 21px;
    box-shadow: 0 14px 35px rgba(7, 3, 25, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

    .account-access-card[b-k8fcx3oc5o]::after {
        position: absolute;
        top: -70px;
        right: 8%;
        width: 150px;
        height: 150px;
        pointer-events: none;
        content: "";
        background: rgba(158, 75, 255, 0.16);
        border-radius: 50%;
        filter: blur(35px);
        animation: accountAccessGlow-b-k8fcx3oc5o 5s ease-in-out infinite alternate;
    }

.account-access-icon[b-k8fcx3oc5o] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #ffffff;
    font-size: 1.25rem;
    background: radial-gradient(circle at 35% 30%, #ffffff, transparent 15%), linear-gradient(145deg, #a75cff, #5722ac);
    border: 1px solid rgba(229, 207, 255, 0.42);
    border-radius: 17px;
    box-shadow: 0 0 18px rgba(190, 128, 255, 0.42), 0 0 38px rgba(127, 56, 225, 0.2);
    animation: accountIconFloat-b-k8fcx3oc5o 3.8s ease-in-out infinite;
}

.account-access-info[b-k8fcx3oc5o] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-access-label[b-k8fcx3oc5o] {
    color: #c9a8ff;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.account-access-info strong[b-k8fcx3oc5o] {
    color: #ffffff;
    font-size: 1rem;
}

.account-access-info p[b-k8fcx3oc5o] {
    margin: 0;
    color: rgba(231, 222, 249, 0.58);
    font-size: 0.78rem;
    line-height: 1.5;
}

.account-access-actions[b-k8fcx3oc5o] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 9px;
    align-items: center;
}

.account-login-button[b-k8fcx3oc5o] {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 0 16px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
    background: linear-gradient(135deg, #9d55ff, #6c30d5);
    border: 1px solid rgba(231, 211, 255, 0.42);
    border-radius: 13px;
    box-shadow: 0 9px 23px rgba(89, 32, 181, 0.28);
    transition: filter 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

    .account-login-button:hover[b-k8fcx3oc5o] {
        color: #ffffff;
        filter: brightness(1.12);
        box-shadow: 0 12px 30px rgba(112, 45, 214, 0.42);
        transform: translateY(-2px);
    }

.account-logout-button[b-k8fcx3oc5o] {
    min-height: 45px;
    padding: 0 14px;
    color: rgba(234, 226, 250, 0.4);
    font: inherit;
    font-size: 0.8rem;
    background: rgba(12, 10, 36, 0.48);
    border: 1px solid rgba(198, 165, 248, 0.14);
    border-radius: 13px;
}

    .account-logout-button:disabled[b-k8fcx3oc5o] {
        cursor: not-allowed;
        opacity: 0.55;
    }

@keyframes accountIconFloat-b-k8fcx3oc5o {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-4px) rotate(7deg);
    }
}

@keyframes accountAccessGlow-b-k8fcx3oc5o {
    from {
        opacity: 0.4;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1.14);
    }
}

@media (max-width: 760px) {
    .account-access-card[b-k8fcx3oc5o] {
        grid-template-columns: auto 1fr;
    }

    .account-access-actions[b-k8fcx3oc5o] {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .account-login-button[b-k8fcx3oc5o],
    .account-logout-button[b-k8fcx3oc5o] {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-access-card[b-k8fcx3oc5o]::after,
    .account-access-icon[b-k8fcx3oc5o] {
        animation: none;
    }
}

/* Four active appearance themes */
.settings-page[b-k8fcx3oc5o] {
    transition: background-color 0.8s ease, color 0.5s ease;
}

    /* 1. Midnight Garden */
    .settings-page.theme-midnight[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 8% 18%, rgba(110, 49, 225, 0.42), transparent 32%), radial-gradient(circle at 90% 76%, rgba(178, 51, 211, 0.22), transparent 34%), linear-gradient(135deg, #211047 0%, #11102d 48%, #1d1239 100%);
    }

    /* 2. Lavender Dream */
    .settings-page.theme-lavender[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 12% 16%, rgba(226, 188, 255, 0.42), transparent 32%), radial-gradient(circle at 88% 76%, rgba(173, 116, 255, 0.32), transparent 35%), linear-gradient(135deg, #45306e 0%, #2d2153 48%, #58407c 100%);
    }

    /* 3. Cozy Sunset */
    .settings-page.theme-sunset[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 10% 18%, rgba(255, 156, 105, 0.38), transparent 33%), radial-gradient(circle at 88% 75%, rgba(228, 75, 153, 0.3), transparent 35%), linear-gradient(135deg, #542441 0%, #2b1737 48%, #703145 100%);
    }

    /* 4. Forest Calm */
    .settings-page.theme-forest[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 9% 18%, rgba(85, 191, 143, 0.3), transparent 32%), radial-gradient(circle at 90% 76%, rgba(88, 136, 115, 0.27), transparent 36%), linear-gradient(135deg, #173d38 0%, #10282c 48%, #28493e 100%);
    }

    /* 5. Ocean Moonlight */
    .settings-page.theme-ocean[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 10% 18%, rgba(59, 180, 255, 0.38), transparent 32%), radial-gradient(circle at 88% 12%, rgba(102, 116, 255, 0.30), transparent 35%), linear-gradient(145deg, #071a35 0%, #101844 52%, #080d28 100%);
    }

    /* 6. Rose Galaxy */
    .settings-page.theme-rose[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 12% 16%, rgba(255, 99, 190, 0.40), transparent 32%), radial-gradient(circle at 88% 20%, rgba(175, 89, 255, 0.34), transparent 35%), linear-gradient(145deg, #30102c 0%, #22113e 52%, #10091f 100%);
    }

    /* 7. Golden Stardust */
    .settings-page.theme-golden[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 10% 18%, rgba(255, 204, 92, 0.42), transparent 32%), radial-gradient(circle at 88% 16%, rgba(255, 138, 76, 0.30), transparent 35%), linear-gradient(145deg, #33200d 0%, #25172f 52%, #100b1e 100%);
    }

    /* 8. Crystal Night */
    .settings-page.theme-crystal[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 12% 18%, rgba(112, 235, 255, 0.38), transparent 32%), radial-gradient(circle at 88% 16%, rgba(186, 156, 255, 0.34), transparent 35%), linear-gradient(145deg, #071f31 0%, #16153e 52%, #090b22 100%);
    }

    /* 9. Emerald Aurora */
    .settings-page.theme-emerald[b-k8fcx3oc5o] {
        background: radial-gradient(circle at 10% 18%, rgba(72, 241, 174, 0.35), transparent 32%), radial-gradient(circle at 88% 14%, rgba(42, 190, 211, 0.30), transparent 35%), linear-gradient(145deg, #082b27 0%, #10243b 52%, #07151e 100%);
    }

    /* Special glow effect for every theme */
    .settings-page[class*="theme-"][b-k8fcx3oc5o]::before {
        position: fixed;
        top: -120px;
        right: -100px;
        z-index: 0;
        width: 340px;
        height: 340px;
        content: "";
        pointer-events: none;
        background: rgba(214, 174, 255, 0.15);
        border-radius: 50%;
        filter: blur(70px);
        animation: themeGlowFloat-b-k8fcx3oc5o 8s ease-in-out infinite alternate;
    }

.settings-header[b-k8fcx3oc5o],
.settings-content[b-k8fcx3oc5o] {
    position: relative;
    z-index: 2;
}

@keyframes themeGlowFloat-b-k8fcx3oc5o {
    from {
        opacity: 0.55;
        transform: translate3d(0, 0, 0) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translate3d(-45px, 55px, 0) scale(1.12);
    }
}

    /* Keep the theme movement soft and peaceful */
    .settings-page.theme-midnight[b-k8fcx3oc5o],
    .settings-page.theme-lavender[b-k8fcx3oc5o],
    .settings-page.theme-sunset[b-k8fcx3oc5o],
    .settings-page.theme-forest[b-k8fcx3oc5o] {
        background-size: 115% 115%;
        animation: activeThemeMove-b-k8fcx3oc5o 15s ease-in-out infinite alternate;
    }

@keyframes activeThemeMove-b-k8fcx3oc5o {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 100% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-page.theme-midnight[b-k8fcx3oc5o],
    .settings-page.theme-lavender[b-k8fcx3oc5o],
    .settings-page.theme-sunset[b-k8fcx3oc5o],
    .settings-page.theme-forest[b-k8fcx3oc5o] {
        animation: none;
    }
}

/* Modern theme selector */
.theme-select[b-k8fcx3oc5o] {
    width: 100%;
    padding: 14px 46px 14px 16px;
    color: #f7f0ff;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(45deg, transparent 50%, #cfadff 50%) calc(100% - 20px) 50% / 6px 6px no-repeat, linear-gradient(135deg, #cfadff 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat, linear-gradient( 135deg, rgba(143, 88, 230, 0.24), rgba(39, 28, 79, 0.92) );
    border: 1px solid rgba(207, 173, 255, 0.35);
    border-radius: 15px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px rgba(13, 7, 34, 0.28);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

    .theme-select:hover[b-k8fcx3oc5o] {
        border-color: rgba(218, 190, 255, 0.65);
        box-shadow: 0 0 22px rgba(163, 102, 255, 0.2), 0 8px 24px rgba(13, 7, 34, 0.35);
        transform: translateY(-1px);
    }

    .theme-select:focus[b-k8fcx3oc5o] {
        border-color: #c89cff;
        box-shadow: 0 0 0 3px rgba(174, 112, 255, 0.14), 0 0 26px rgba(174, 112, 255, 0.25);
    }

    .theme-select option[b-k8fcx3oc5o] {
        color: #f7efff;
        background: #1b1238;
    }

.settings-page[b-k8fcx3oc5o] {
    display: block !important;
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 24px 140px !important;
    box-sizing: border-box;

}

    .settings-page .settings-header[b-k8fcx3oc5o],
    .settings-page .settings-content[b-k8fcx3oc5o] {
        position: relative;
        z-index: 2;
    }

.save-settings-button[b-k8fcx3oc5o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}

    .save-settings-button span[b-k8fcx3oc5o] {
        display: inline-block;
    }

/* Language selector special effects */
.select-input[b-k8fcx3oc5o] {
    color: #ffffff;
    background: linear-gradient( 135deg, rgba(49, 34, 91, 0.96), rgba(24, 19, 57, 0.96) );
    border: 1px solid rgba(201, 160, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(14, 8, 34, 0.3);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

    .select-input:hover[b-k8fcx3oc5o] {
        transform: translateY(-2px);
        border-color: rgba(224, 185, 255, 0.7);
        box-shadow: 0 0 18px rgba(183, 112, 255, 0.28), 0 10px 28px rgba(14, 8, 34, 0.42);
    }

    .select-input:focus[b-k8fcx3oc5o] {
        outline: none;
        transform: translateY(-2px);
        border-color: #e1b5ff;
        box-shadow: 0 0 0 3px rgba(194, 125, 255, 0.15), 0 0 24px rgba(194, 125, 255, 0.4);
    }

    .select-input option[b-k8fcx3oc5o] {
        color: #ffffff;
        background: #21183f;
    }

/* Language selector coming-soon message */
.language-select-area[b-k8fcx3oc5o] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 220px);
    gap: 9px;
}

.language-select[b-k8fcx3oc5o] {
    width: 100%;
}

.language-coming-soon[b-k8fcx3oc5o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 8px 12px;
    color: #f2d8ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    background: linear-gradient( 135deg, rgba(169, 92, 255, 0.16), rgba(235, 150, 255, 0.09) );
    border: 1px solid rgba(218, 166, 255, 0.28);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(57, 20, 105, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: 0 0 12px rgba(224, 177, 255, 0.5);
}

.coming-soon-sparkle[b-k8fcx3oc5o] {
    display: inline-block;
    color: #ffd77d;
    font-size: 0.9rem;
    filter: drop-shadow(0 0 7px rgba(255, 211, 112, 0.8));
    animation: comingSoonSparkle-b-k8fcx3oc5o 2.2s ease-in-out infinite;
}

@keyframes comingSoonSparkle-b-k8fcx3oc5o {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.85) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(12deg);
    }
}

@media (max-width: 650px) {
    .language-select-area[b-k8fcx3oc5o] {
        width: 100%;
        margin-top: 14px;
    }
}

/* Language control */
.language-control[b-k8fcx3oc5o] {
    width: 220px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.language-select[b-k8fcx3oc5o] {
    width: 172px;
    align-self: flex-end;
}

/* New coming-soon design */
.language-status[b-k8fcx3oc5o] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    min-width: 172px;
    padding: 9px 12px;
    margin-left: auto;
    color: #f8ecff;
    background: linear-gradient( 135deg, rgba(160, 91, 255, 0.24), rgba(236, 139, 255, 0.12) );
    border: 1px solid rgba(220, 174, 255, 0.4);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(74, 27, 132, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

    .language-status[b-k8fcx3oc5o]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 110deg, transparent 20%, rgba(255, 255, 255, 0.12) 50%, transparent 80% );
        transform: translateX(-120%);
        animation: languageStatusShine-b-k8fcx3oc5o 4s ease-in-out infinite;
    }

.language-status-dot[b-k8fcx3oc5o] {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    background: #d99bff;
    border-radius: 50%;
    box-shadow: 0 0 7px #d99bff, 0 0 15px rgba(217, 155, 255, 0.75);
    animation: languageStatusPulse-b-k8fcx3oc5o 2s ease-in-out infinite;
}

.language-status div[b-k8fcx3oc5o] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.language-status strong[b-k8fcx3oc5o] {
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.language-status small[b-k8fcx3oc5o] {
    margin-top: 4px;
    color: #dcb8ff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.language-status-spark[b-k8fcx3oc5o] {
    position: relative;
    z-index: 1;
    margin-left: auto;
    color: #ffd989;
    font-size: 0.85rem;
    filter: drop-shadow(0 0 6px rgba(255, 217, 137, 0.85));
    animation: languageSparkTwinkle-b-k8fcx3oc5o 2.2s ease-in-out infinite;
}

@keyframes languageStatusPulse-b-k8fcx3oc5o {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@keyframes languageSparkTwinkle-b-k8fcx3oc5o {
    0%, 100% {
        opacity: 0.55;
        transform: rotate(0deg) scale(0.85);
    }

    50% {
        opacity: 1;
        transform: rotate(15deg) scale(1.15);
    }
}

@keyframes languageStatusShine-b-k8fcx3oc5o {
    0%, 65% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@media (max-width: 650px) {
    .language-control[b-k8fcx3oc5o] {
        width: 100%;
        margin-top: 14px;
        align-items: stretch;
    }

    .language-select[b-k8fcx3oc5o],
    .language-status[b-k8fcx3oc5o] {
        width: 100%;
    }
}

.account-page-actions[b-k8fcx3oc5o] {
    margin-top: 8px;
}

.account-cancel-link[b-k8fcx3oc5o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.account-logout-active[b-k8fcx3oc5o] {
    color: #f5ecff;
    cursor: pointer;
    border: 1px solid rgba(205, 170, 255, 0.3);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.account-logout-active:hover[b-k8fcx3oc5o] {
    border-color: rgba(224, 198, 255, 0.58);
    box-shadow: 0 0 16px rgba(158, 98, 241, 0.2);
}
/* /Components/Pages/AiCoach.razor.rz.scp.css */
.ai-page[b-jruxc9bluv] {
    position: relative;
    min-height: 100vh;
    padding: 54px 24px 150px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(circle at 10% 18%, rgba(118, 55, 238, 0.38), transparent 31%), radial-gradient(circle at 88% 70%, rgba(183, 56, 219, 0.24), transparent 32%), linear-gradient(135deg, #211047 0%, #11102d 48%, #1d1239 100%);
    isolation: isolate;
}

    .ai-page[b-jruxc9bluv]::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        content: "";
        background: linear-gradient( 115deg, transparent 20%, rgba(193, 157, 255, 0.04) 45%, transparent 70% );
        animation: pageLightMove-b-jruxc9bluv 14s ease-in-out infinite alternate;
    }

.ai-shell[b-jruxc9bluv] {
    position: relative;
    z-index: 2;
    width: min(100%, 1080px);
    margin: 0 auto;
}

.ai-header[b-jruxc9bluv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.ai-back-button[b-jruxc9bluv] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    color: #e9ddff;
    text-decoration: none;
    background: rgba(23, 16, 54, 0.72);
    border: 1px solid rgba(204, 172, 255, 0.25);
    border-radius: 999px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

    .ai-back-button:hover[b-jruxc9bluv] {
        color: #ffffff;
        border-color: rgba(211, 181, 255, 0.65);
        box-shadow: 0 0 22px rgba(147, 83, 255, 0.22);
        transform: translateX(-3px);
    }

.ai-preview-badge[b-jruxc9bluv] {
    padding: 9px 14px;
    color: #f4e9ff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    background: rgba(135, 68, 255, 0.2);
    border: 1px solid rgba(198, 158, 255, 0.38);
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(135, 68, 255, 0.16);
}

.ai-hero[b-jruxc9bluv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 38px;
    text-align: center;
}

.ai-orb-area[b-jruxc9bluv] {
    position: relative;
    display: grid;
    width: 176px;
    height: 176px;
    margin-bottom: 22px;
    place-items: center;
}

.ai-orb[b-jruxc9bluv] {
    position: relative;
    z-index: 3;
    display: grid;
    width: 94px;
    height: 94px;
    place-items: center;
    font-size: 2.25rem;
    color: #ffffff;
    background: radial-gradient(circle at 35% 28%, #ffffff 0%, #dfc8ff 8%, transparent 22%), radial-gradient(circle at center, #9f5cff 0%, #7433e4 45%, #38166f 100%);
    border: 1px solid rgba(239, 222, 255, 0.65);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(215, 182, 255, 0.8), 0 0 48px rgba(145, 71, 255, 0.65), 0 0 95px rgba(112, 45, 226, 0.4);
    animation: aiOrbFloat-b-jruxc9bluv 4.5s ease-in-out infinite;
}

    .ai-orb span[b-jruxc9bluv] {
        filter: drop-shadow(0 0 10px #ffffff);
        animation: aiSparkle-b-jruxc9bluv 2.8s ease-in-out infinite;
    }

.ai-orb-ring[b-jruxc9bluv] {
    position: absolute;
    border: 1px solid rgba(208, 177, 255, 0.35);
    border-radius: 50%;
}

.ai-orb-ring-one[b-jruxc9bluv] {
    width: 128px;
    height: 128px;
    animation: ringPulse-b-jruxc9bluv 4s ease-in-out infinite;
}

.ai-orb-ring-two[b-jruxc9bluv] {
    width: 168px;
    height: 168px;
    border-style: dashed;
    opacity: 0.45;
    animation: ringRotate-b-jruxc9bluv 22s linear infinite;
}

.ai-eyebrow[b-jruxc9bluv] {
    margin: 0 0 10px;
    color: #cab1ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.ai-hero h1[b-jruxc9bluv] {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    text-shadow: 0 0 30px rgba(161, 105, 255, 0.2);
}

.ai-subtitle[b-jruxc9bluv] {
    max-width: 660px;
    margin: 18px auto;
    color: rgba(236, 229, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.7;
}

.ai-status[b-jruxc9bluv] {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    padding: 9px 14px;
    color: rgba(237, 229, 255, 0.76);
    font-size: 0.82rem;
    background: rgba(15, 12, 39, 0.52);
    border: 1px solid rgba(196, 161, 255, 0.22);
    border-radius: 999px;
}

.ai-status-dot[b-jruxc9bluv] {
    width: 8px;
    height: 8px;
    background: #b777ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #b777ff;
    animation: statusPulse-b-jruxc9bluv 2s ease-in-out infinite;
}

.ai-chat-card[b-jruxc9bluv] {
    position: relative;
    padding: 25px;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(41, 29, 83, 0.88), rgba(17, 15, 48, 0.92) );
    border: 1px solid rgba(196, 158, 255, 0.32);
    border-radius: 30px;
    box-shadow: 0 28px 80px rgba(4, 2, 18, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
}

    .ai-chat-card[b-jruxc9bluv]::before {
        position: absolute;
        top: 0;
        left: -45%;
        width: 35%;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, #d6b5ff, transparent);
        animation: cardShimmer-b-jruxc9bluv 6s ease-in-out infinite;
    }

.ai-chat-heading[b-jruxc9bluv] {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(203, 174, 255, 0.13);
}

    .ai-chat-heading > div:last-child[b-jruxc9bluv] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ai-chat-heading strong[b-jruxc9bluv] {
        font-size: 1rem;
    }

    .ai-chat-heading span[b-jruxc9bluv] {
        color: rgba(231, 222, 255, 0.6);
        font-size: 0.82rem;
    }

.ai-avatar[b-jruxc9bluv],
.message-avatar[b-jruxc9bluv] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, #9552ff, #51239a);
    border: 1px solid rgba(225, 205, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(145, 76, 255, 0.3);
}

.ai-avatar[b-jruxc9bluv] {
    width: 46px;
    height: 46px;
}

.message-avatar[b-jruxc9bluv] {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.ai-messages[b-jruxc9bluv] {
    display: flex;
    flex-direction: column;
    gap: 17px;
    min-height: 230px;
    max-height: 430px;
    padding: 26px 4px;
    overflow-y: auto;
}

.ai-message-row[b-jruxc9bluv] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.user-message-row[b-jruxc9bluv] {
    justify-content: flex-end;
}

.ai-message[b-jruxc9bluv] {
    max-width: min(76%, 680px);
    padding: 14px 17px;
    line-height: 1.6;
    border-radius: 20px;
    animation: messageAppear-b-jruxc9bluv 0.35s ease-out;
}

.coach-message[b-jruxc9bluv] {
    color: #eee7ff;
    background: rgba(55, 39, 97, 0.78);
    border: 1px solid rgba(197, 160, 255, 0.19);
    border-bottom-left-radius: 7px;
}

.user-message[b-jruxc9bluv] {
    color: #ffffff;
    background: linear-gradient(135deg, #8f4cff, #6030c5);
    border: 1px solid rgba(229, 211, 255, 0.35);
    border-bottom-right-radius: 7px;
    box-shadow: 0 8px 25px rgba(89, 37, 181, 0.25);
}

.typing-message[b-jruxc9bluv] {
    display: flex;
    gap: 6px;
    min-width: 68px;
}

    .typing-message span[b-jruxc9bluv] {
        width: 7px;
        height: 7px;
        background: #d5b8ff;
        border-radius: 50%;
        animation: typingDot-b-jruxc9bluv 1.2s ease-in-out infinite;
    }

        .typing-message span:nth-child(2)[b-jruxc9bluv] {
            animation-delay: 0.15s;
        }

        .typing-message span:nth-child(3)[b-jruxc9bluv] {
            animation-delay: 0.3s;
        }

.ai-suggestions[b-jruxc9bluv] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

    .ai-suggestions button[b-jruxc9bluv] {
        padding: 10px 14px;
        color: #e9ddff;
        cursor: pointer;
        background: rgba(72, 43, 125, 0.45);
        border: 1px solid rgba(197, 160, 255, 0.22);
        border-radius: 999px;
        transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    }

        .ai-suggestions button:hover[b-jruxc9bluv] {
            color: #ffffff;
            background: rgba(115, 62, 213, 0.58);
            box-shadow: 0 0 20px rgba(145, 79, 255, 0.2);
            transform: translateY(-2px);
        }

.ai-input-area[b-jruxc9bluv] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px;
    background: rgba(8, 8, 31, 0.7);
    border: 1px solid rgba(195, 159, 255, 0.24);
    border-radius: 22px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

    .ai-input-area:focus-within[b-jruxc9bluv] {
        border-color: rgba(186, 132, 255, 0.7);
        box-shadow: 0 0 0 3px rgba(143, 76, 255, 0.12), 0 0 28px rgba(123, 55, 232, 0.16);
    }

    .ai-input-area textarea[b-jruxc9bluv] {
        min-height: 64px;
        max-height: 150px;
        padding: 11px 12px;
        resize: vertical;
        color: #ffffff;
        font: inherit;
        line-height: 1.5;
        outline: none;
        background: transparent;
        border: 0;
    }

        .ai-input-area textarea[b-jruxc9bluv]::placeholder {
            color: rgba(226, 215, 248, 0.42);
        }

.ai-send-button[b-jruxc9bluv] {
    display: flex;
    gap: 9px;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    min-width: 118px;
    padding: 0 18px;
    color: #ffffff;
    font-weight: 750;
    cursor: pointer;
    background: linear-gradient(135deg, #a057ff, #7134de);
    border: 1px solid rgba(231, 210, 255, 0.45);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(92, 35, 190, 0.35);
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

    .ai-send-button:hover:not(:disabled)[b-jruxc9bluv] {
        filter: brightness(1.12);
        box-shadow: 0 12px 34px rgba(123, 55, 228, 0.5);
        transform: translateY(-2px);
    }

    .ai-send-button:disabled[b-jruxc9bluv] {
        cursor: not-allowed;
        opacity: 0.42;
        box-shadow: none;
    }

.ai-input-footer[b-jruxc9bluv] {
    display: flex;
    justify-content: space-between;
    padding: 9px 6px 0;
    color: rgba(225, 214, 248, 0.45);
    font-size: 0.75rem;
}

.ai-note[b-jruxc9bluv] {
    margin: 20px 0 0;
    color: rgba(227, 215, 250, 0.55);
    font-size: 0.82rem;
    text-align: center;
}

.ai-glow[b-jruxc9bluv] {
    position: absolute;
    z-index: 0;
    width: 480px;
    height: 480px;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
    animation: glowDrift-b-jruxc9bluv 12s ease-in-out infinite alternate;
}

.ai-glow-left[b-jruxc9bluv] {
    top: 12%;
    left: -240px;
    background: #6d35ff;
}

.ai-glow-right[b-jruxc9bluv] {
    right: -230px;
    bottom: 4%;
    background: #d13bea;
    animation-delay: -5s;
}

@keyframes aiOrbFloat-b-jruxc9bluv {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.04);
    }
}

@keyframes aiSparkle-b-jruxc9bluv {
    0%, 100% {
        opacity: 0.72;
        transform: scale(0.84) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.16) rotate(45deg);
    }
}

@keyframes ringPulse-b-jruxc9bluv {
    0%, 100% {
        opacity: 0.28;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.08);
    }
}

@keyframes ringRotate-b-jruxc9bluv {
    to {
        transform: rotate(360deg);
    }
}

@keyframes statusPulse-b-jruxc9bluv {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes cardShimmer-b-jruxc9bluv {
    0% {
        left: -45%;
    }

    55%, 100% {
        left: 110%;
    }
}

@keyframes typingDot-b-jruxc9bluv {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

@keyframes messageAppear-b-jruxc9bluv {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes glowDrift-b-jruxc9bluv {
    from {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    to {
        transform: translate3d(45px, -30px, 0) scale(1.12);
    }
}

@keyframes pageLightMove-b-jruxc9bluv {
    from {
        transform: translateX(-4%);
    }

    to {
        transform: translateX(4%);
    }
}

@media (max-width: 700px) {
    .ai-page[b-jruxc9bluv] {
        padding: 30px 15px 130px;
    }

    .ai-header[b-jruxc9bluv] {
        align-items: flex-start;
        gap: 12px;
    }

    .ai-preview-badge[b-jruxc9bluv] {
        font-size: 0.62rem;
    }

    .ai-orb-area[b-jruxc9bluv] {
        width: 145px;
        height: 145px;
    }

    .ai-orb-ring-two[b-jruxc9bluv] {
        width: 140px;
        height: 140px;
    }

    .ai-chat-card[b-jruxc9bluv] {
        padding: 18px 14px;
        border-radius: 24px;
    }

    .ai-message[b-jruxc9bluv] {
        max-width: 86%;
    }

    .ai-input-area[b-jruxc9bluv] {
        grid-template-columns: 1fr;
    }

    .ai-send-button[b-jruxc9bluv] {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-page[b-jruxc9bluv]::before,
    .ai-orb[b-jruxc9bluv],
    .ai-orb span[b-jruxc9bluv],
    .ai-orb-ring[b-jruxc9bluv],
    .ai-status-dot[b-jruxc9bluv],
    .ai-chat-card[b-jruxc9bluv]::before,
    .typing-message span[b-jruxc9bluv],
    .ai-glow[b-jruxc9bluv] {
        animation: none;
    }
}

.ai-chat-heading-text[b-jruxc9bluv] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.ai-conversation-actions[b-jruxc9bluv] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-left: auto;
}

.ai-primary-action[b-jruxc9bluv],
.ai-secondary-action[b-jruxc9bluv] {
    min-height: 40px;
    padding: 9px 15px;
    color: #ffffff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    border-radius: 13px;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ai-primary-action[b-jruxc9bluv] {
    background: linear-gradient(135deg, #9e55ff, #6e32da);
    border: 1px solid rgba(231, 210, 255, 0.45);
    box-shadow: 0 8px 22px rgba(111, 48, 217, 0.3);
}

.ai-secondary-action[b-jruxc9bluv] {
    background: rgba(67, 43, 116, 0.58);
    border: 1px solid rgba(202, 171, 255, 0.3);
}

    .ai-primary-action:hover:not(:disabled)[b-jruxc9bluv],
    .ai-secondary-action:hover:not(:disabled)[b-jruxc9bluv] {
        border-color: rgba(226, 205, 255, 0.7);
        box-shadow: 0 10px 28px rgba(126, 61, 229, 0.36);
        transform: translateY(-2px);
    }

    .ai-primary-action:disabled[b-jruxc9bluv],
    .ai-secondary-action:disabled[b-jruxc9bluv] {
        cursor: not-allowed;
        opacity: 0.45;
        box-shadow: none;
    }

.ai-conversation-notice[b-jruxc9bluv] {
    margin-top: 16px;
    padding: 11px 14px;
    font-size: 0.84rem;
    border-radius: 13px;
}

.ai-notice-success[b-jruxc9bluv] {
    color: #e9ddff;
    background: rgba(112, 63, 191, 0.22);
    border: 1px solid rgba(191, 157, 255, 0.35);
}

.ai-notice-error[b-jruxc9bluv] {
    color: #ffdce8;
    background: rgba(151, 39, 91, 0.22);
    border: 1px solid rgba(255, 136, 185, 0.34);
}

.ai-conversation-title-row[b-jruxc9bluv] {
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    grid-template-columns: max-content minmax(0, 1fr) minmax(210px, max-content) !important;
    overflow: visible !important;
}

.ai-conversation-title-row input[b-jruxc9bluv] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.ai-storage-label[b-jruxc9bluv] {
    width: auto !important;
    max-width: none !important;
    justify-self: end;
    text-align: right;
    white-space: nowrap !important;
    overflow: visible !important;
}

@media (max-width: 900px) {
    .ai-conversation-title-row[b-jruxc9bluv] {
        grid-template-columns: 1fr !important;
    }

    .ai-storage-label[b-jruxc9bluv] {
        justify-self: start;
        text-align: left;
        white-space: normal !important;
    }
}
    }

        .ai-conversation-title-row input:focus[b-jruxc9bluv] {
            border-color: rgba(196, 147, 255, 0.74);
            box-shadow: 0 0 0 3px rgba(145, 82, 255, 0.12);
        }

.ai-storage-label[b-jruxc9bluv] {
    color: rgba(224, 210, 249, 0.5);
    font-size: 0.72rem;
    white-space: nowrap;
}

.ai-workspace[b-jruxc9bluv] {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.ai-saved-panel[b-jruxc9bluv] {
    min-width: 0;
    padding: 14px;
    background: rgba(10, 9, 34, 0.58);
    border: 1px solid rgba(195, 159, 255, 0.17);
    border-radius: 19px;
}

.ai-saved-heading[b-jruxc9bluv] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(201, 170, 255, 0.13);
}

    .ai-saved-heading strong[b-jruxc9bluv] {
        font-size: 0.86rem;
    }

    .ai-saved-heading button[b-jruxc9bluv] {
        display: grid;
        width: 32px;
        height: 32px;
        padding: 0;
        color: #e9dcff;
        cursor: pointer;
        background: rgba(85, 49, 146, 0.42);
        border: 1px solid rgba(199, 161, 255, 0.22);
        border-radius: 10px;
        place-items: center;
    }

        .ai-saved-heading button:disabled[b-jruxc9bluv] {
            cursor: not-allowed;
            opacity: 0.4;
        }

.ai-saved-empty[b-jruxc9bluv] {
    margin: 18px 4px;
    color: rgba(225, 214, 248, 0.48);
    font-size: 0.8rem;
    line-height: 1.5;
}

.ai-saved-list[b-jruxc9bluv] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 490px;
    margin-top: 12px;
    overflow-y: auto;
}

.ai-saved-item[b-jruxc9bluv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 5px;
    background: rgba(54, 37, 94, 0.4);
    border: 1px solid transparent;
    border-radius: 14px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

    .ai-saved-item:hover[b-jruxc9bluv],
    .ai-saved-item.is-active[b-jruxc9bluv] {
        background: rgba(93, 53, 163, 0.48);
        border-color: rgba(199, 163, 255, 0.3);
    }

.ai-saved-open[b-jruxc9bluv] {
    display: flex;
    min-width: 0;
    padding: 9px;
    overflow: hidden;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: 0;
    flex-direction: column;
    gap: 4px;
}

    .ai-saved-open strong[b-jruxc9bluv] {
        overflow: hidden;
        font-size: 0.82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ai-saved-open span[b-jruxc9bluv],
    .ai-saved-open small[b-jruxc9bluv] {
        overflow: hidden;
        color: rgba(228, 217, 250, 0.48);
        font-size: 0.68rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ai-saved-delete[b-jruxc9bluv] {
    align-self: center;
    width: 34px;
    height: 34px;
    color: #ffd5e7;
    cursor: pointer;
    background: rgba(130, 38, 78, 0.2);
    border: 1px solid rgba(255, 145, 191, 0.16);
    border-radius: 10px;
}

    .ai-saved-delete:hover[b-jruxc9bluv] {
        background: rgba(170, 45, 98, 0.32);
        border-color: rgba(255, 151, 195, 0.38);
    }

.ai-chat-main[b-jruxc9bluv] {
    min-width: 0;
}

.ai-export-actions[b-jruxc9bluv] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 14px;
    color: rgba(226, 215, 248, 0.48);
    font-size: 0.75rem;
}

    .ai-export-actions button[b-jruxc9bluv] {
        min-width: 58px;
        padding: 8px 12px;
        color: #eee3ff;
        font: inherit;
        font-size: 0.75rem;
        font-weight: 750;
        cursor: pointer;
        background: rgba(75, 45, 130, 0.5);
        border: 1px solid rgba(200, 163, 255, 0.24);
        border-radius: 10px;
    }

        .ai-export-actions button:hover:not(:disabled)[b-jruxc9bluv] {
            background: rgba(113, 63, 202, 0.58);
            border-color: rgba(214, 183, 255, 0.48);
        }

        .ai-export-actions button:disabled[b-jruxc9bluv] {
            cursor: not-allowed;
            opacity: 0.4;
        }

@media (max-width: 900px) {
    .ai-workspace[b-jruxc9bluv] {
        grid-template-columns: 1fr;
    }

    .ai-saved-list[b-jruxc9bluv] {
        max-height: 245px;
    }
}

@media (max-width: 700px) {
    .ai-chat-heading[b-jruxc9bluv] {
        flex-wrap: wrap;
    }

    .ai-conversation-actions[b-jruxc9bluv] {
        width: 100%;
        margin-left: 60px;
    }

    .ai-conversation-title-row[b-jruxc9bluv] {
        grid-template-columns: 1fr;
    }

    .ai-storage-label[b-jruxc9bluv] {
        white-space: normal;
    }

    .ai-primary-action[b-jruxc9bluv],
    .ai-secondary-action[b-jruxc9bluv] {
        flex: 1;
    }

    .ai-export-actions[b-jruxc9bluv] {
        justify-content: flex-start;
    }
}

.ai-chat-card[b-jruxc9bluv],
.ai-conversation-title-row[b-jruxc9bluv],
.ai-workspace[b-jruxc9bluv],
.ai-chat-main[b-jruxc9bluv] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ai-conversation-title-row[b-jruxc9bluv] {
    grid-template-columns: auto minmax(0, 1fr) minmax(120px, auto);
    overflow: hidden;
}

    .ai-conversation-title-row input[b-jruxc9bluv] {
        min-width: 0;
        box-sizing: border-box;
    }

.ai-storage-label[b-jruxc9bluv] {
    max-width: 180px;
    overflow-wrap: anywhere;
    text-align: right;
    white-space: normal;
}

@media (max-width: 900px) {
    .ai-conversation-title-row[b-jruxc9bluv] {
        grid-template-columns: 1fr;
    }

    .ai-storage-label[b-jruxc9bluv] {
        max-width: none;
        text-align: left;
    }
}

.ai-conversation-title-row[b-jruxc9bluv] {
    width: calc(100% - 28px) !important;
    margin: 18px 14px 0 !important;
}

@media (max-width: 700px) {
    .ai-conversation-title-row[b-jruxc9bluv] {
        width: 100% !important;
        margin: 18px 0 0 !important;
    }
}

.ai-conversation-title-row[b-jruxc9bluv] {
    width: calc(100% - 80px) !important;
    max-width: 980px !important;
    margin: 18px auto 0 !important;
    grid-template-columns: 110px minmax(0, 1fr) 170px !important;
}

@media (max-width: 900px) {
    .ai-conversation-title-row[b-jruxc9bluv] {
        width: 100% !important;
        max-width: none !important;
        margin: 18px 0 0 !important;
        grid-template-columns: 1fr !important;
    }
}

.ai-conversation-title-row[b-jruxc9bluv] {
    width: calc(100% - 180px) !important;
    max-width: 900px !important;
    margin: 18px auto 0 !important;
    grid-template-columns: 110px minmax(0, 1fr) 170px !important;
}

@media (max-width: 900px) {
    .ai-conversation-title-row[b-jruxc9bluv] {
        width: calc(100% - 30px) !important;
        max-width: none !important;
        grid-template-columns: 1fr !important;
    }
}

/* Conversation title — polished glass design */
.ai-conversation-title-row[b-jruxc9bluv] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 22px !important;
    padding: 18px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(119, 74, 210, 0.18), rgba(35, 24, 82, 0.44)) !important;
    border: 1px solid rgba(196, 165, 255, 0.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(7, 4, 27, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(14px);
}

    .ai-conversation-title-row label[b-jruxc9bluv] {
        display: block !important;
        margin: 0 !important;
        color: #f4ecff !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
    }

    .ai-conversation-title-row input[b-jruxc9bluv] {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        color: #ffffff !important;
        background: rgba(12, 8, 38, 0.62) !important;
        border: 1px solid rgba(187, 146, 255, 0.42) !important;
        border-radius: 13px !important;
        outline: none !important;
        font: inherit !important;
        transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease !important;
    }

        .ai-conversation-title-row input[b-jruxc9bluv]::placeholder {
            color: rgba(223, 211, 246, 0.5) !important;
        }

        .ai-conversation-title-row input:hover[b-jruxc9bluv] {
            border-color: rgba(211, 181, 255, 0.68) !important;
            background: rgba(18, 12, 52, 0.74) !important;
        }

        .ai-conversation-title-row input:focus[b-jruxc9bluv] {
            border-color: rgba(184, 128, 255, 0.95) !important;
            background: rgba(21, 13, 59, 0.88) !important;
            box-shadow: 0 0 0 3px rgba(155, 91, 255, 0.18), 0 8px 24px rgba(37, 15, 91, 0.24) !important;
            transform: translateY(-1px);
        }

    .ai-conversation-title-row .ai-storage-label[b-jruxc9bluv] {
        display: block !important;
        margin: 0 !important;
        color: rgba(218, 205, 243, 0.68) !important;
        font-size: 0.76rem !important;
        line-height: 1.4 !important;
    }
/* /Components/Pages/Farm.razor.rz.scp.css */
:host[b-8bcvzou1k3] {
    display: block;
}

.farm-page[b-8bcvzou1k3] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 72px 24px 170px;
    color: #f8f6ff;
    background: radial-gradient(circle at 8% 15%, rgba(113, 62, 190, 0.42), transparent 29%), radial-gradient(circle at 94% 78%, rgba(18, 120, 114, 0.30), transparent 31%), linear-gradient(135deg, #17102f 0%, #080d21 52%, #092735 100%);
}

.farm-glow[b-8bcvzou1k3] {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.farm-glow-left[b-8bcvzou1k3] {
    top: 18%;
    left: -260px;
    background: rgba(124, 71, 223, 0.22);
}

.farm-glow-right[b-8bcvzou1k3] {
    right: -260px;
    bottom: 8%;
    background: rgba(21, 157, 122, 0.18);
}

.farm-shell[b-8bcvzou1k3] {
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    margin: 0 auto;
}

.farm-header[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.eyebrow[b-8bcvzou1k3] {
    margin: 0 0 10px;
    color: #cbb6ff;
    font-size: 0.83rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.farm-header h1[b-8bcvzou1k3] {
    margin: 0;
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    font-weight: 500;
    letter-spacing: -0.05em;
}

.farm-subtitle[b-8bcvzou1k3] {
    margin: 10px 0 0;
    color: #b9b3cf;
    font-size: 1.08rem;
}

.inventory-button[b-8bcvzou1k3],
.reset-button[b-8bcvzou1k3],
.close-button[b-8bcvzou1k3] {
    border: 1px solid rgba(166, 127, 255, 0.38);
    color: #f7f2ff;
    background: rgba(39, 29, 76, 0.76);
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease;
}

    .inventory-button:hover[b-8bcvzou1k3],
    .reset-button:hover[b-8bcvzou1k3],
    .close-button:hover[b-8bcvzou1k3] {
        transform: translateY(-2px);
        background: rgba(80, 53, 145, 0.88);
    }

.inventory-button[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 18px;
    font-weight: 800;
}

    .inventory-button strong[b-8bcvzou1k3] {
        display: grid;
        place-items: center;
        min-width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #7652ce;
    }

.resource-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.resource-card[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 18px;
    border: 1px solid rgba(153, 131, 207, 0.18);
    border-radius: 22px;
    background: rgba(24, 27, 57, 0.82);
    box-shadow: 0 18px 40px rgba(2, 5, 19, 0.18);
}

.resource-icon[b-8bcvzou1k3] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 1.45rem;
    background: rgba(93, 65, 158, 0.30);
}

.resource-card div[b-8bcvzou1k3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.resource-card strong[b-8bcvzou1k3] {
    font-size: 1.35rem;
}

.resource-card div span[b-8bcvzou1k3] {
    color: #a9a3bc;
    font-size: 0.88rem;
}

.level-card[b-8bcvzou1k3] {
    margin-bottom: 20px;
    padding: 18px 22px;
    border: 1px solid rgba(152, 130, 209, 0.18);
    border-radius: 20px;
    background: rgba(15, 19, 43, 0.76);
}

.level-heading[b-8bcvzou1k3] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
    color: #aaa4bc;
    font-size: 0.85rem;
}

    .level-heading div[b-8bcvzou1k3] {
        display: flex;
        gap: 12px;
    }

    .level-heading strong[b-8bcvzou1k3] {
        color: #fff;
    }

.level-track[b-8bcvzou1k3],
.growth-track[b-8bcvzou1k3] {
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.level-track[b-8bcvzou1k3] {
    height: 9px;
}

.level-fill[b-8bcvzou1k3],
.growth-fill[b-8bcvzou1k3] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8159df, #c3a4ff, #74dfaa);
    transition: width 420ms ease;
}

.farm-scene[b-8bcvzou1k3] {
    overflow: hidden;
    border: 1px solid rgba(153, 115, 227, 0.48);
    border-radius: 34px;
    background: rgba(18, 19, 49, 0.93);
    box-shadow: 0 32px 90px rgba(2, 4, 18, 0.35);
}

.scene-top[b-8bcvzou1k3] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 34px;
    background: linear-gradient(120deg, rgba(67, 45, 126, 0.72), rgba(13, 74, 77, 0.44));
}

    .scene-top h2[b-8bcvzou1k3],
    .plots-heading h2[b-8bcvzou1k3],
    .section-heading h2[b-8bcvzou1k3],
    .reward-panel h2[b-8bcvzou1k3] {
        margin: 0;
        font-weight: 600;
        letter-spacing: -0.025em;
    }

    .scene-top p:last-child[b-8bcvzou1k3] {
        margin: 8px 0 0;
        color: #b9b3cb;
    }

.weather-pill[b-8bcvzou1k3] {
    align-self: flex-start;
    padding: 12px 16px;
    border: 1px solid rgba(208, 191, 255, 0.24);
    border-radius: 999px;
    color: #dcd0fa;
    background: rgba(15, 22, 49, 0.55);
    white-space: nowrap;
}

.landscape[b-8bcvzou1k3] {
    position: relative;
    height: 225px;
    overflow: hidden;
    background: linear-gradient(180deg, #192450 0%, #30356a 45%, #506e62 100%);
}

.moon[b-8bcvzou1k3] {
    position: absolute;
    top: 30px;
    right: 11%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: #fff4c0;
    font-size: 1.5rem;
    background: rgba(239, 224, 171, 0.18);
    box-shadow: 0 0 35px rgba(238, 214, 146, 0.32);
}

.cloud[b-8bcvzou1k3] {
    position: absolute;
    color: rgba(224, 218, 255, 0.28);
    font-size: 3.3rem;
}

.cloud-one[b-8bcvzou1k3] {
    top: 34px;
    left: 13%;
}

.cloud-two[b-8bcvzou1k3] {
    top: 82px;
    right: 29%;
    transform: scale(0.72);
}

.hill[b-8bcvzou1k3] {
    position: absolute;
    bottom: -90px;
    border-radius: 50% 50% 0 0;
}

.hill-one[b-8bcvzou1k3] {
    left: -8%;
    width: 70%;
    height: 235px;
    background: #244d4c;
    transform: rotate(5deg);
}

.hill-two[b-8bcvzou1k3] {
    right: -12%;
    width: 72%;
    height: 210px;
    background: #183e3b;
    transform: rotate(-6deg);
}

.little-house[b-8bcvzou1k3] {
    position: absolute;
    z-index: 2;
    right: 18%;
    bottom: 34px;
    font-size: 4.7rem;
    filter: drop-shadow(0 14px 10px rgba(2, 8, 19, 0.38));
}

.trees[b-8bcvzou1k3] {
    position: absolute;
    z-index: 2;
    bottom: 25px;
    left: 10%;
    font-size: 2.7rem;
    letter-spacing: 10px;
    filter: brightness(0.75) saturate(0.85);
}

.plots-section[b-8bcvzou1k3] {
    padding: 32px;
}

.plots-heading[b-8bcvzou1k3],
.section-heading[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.reset-button[b-8bcvzou1k3] {
    padding: 10px 15px;
    border-radius: 13px;
}

.plots-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.plot-card[b-8bcvzou1k3] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 335px;
    padding: 15px;
    border: 1px solid rgba(145, 126, 190, 0.22);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(36, 37, 76, 0.94), rgba(18, 22, 48, 0.96));
    transition: transform 220ms ease, border-color 220ms ease;
}

    .plot-card.plot-card-locked[b-8bcvzou1k3] {
        border-color: rgba(248, 113, 113, 0.42);
        background: linear-gradient(180deg, rgba(42, 34, 66, 0.96), rgba(20, 20, 42, 0.98));
        box-shadow: inset 0 0 28px rgba(15, 23, 42, 0.45), 0 12px 30px rgba(0, 0, 0, 0.22);
    }

        .plot-card.plot-card-locked[b-8bcvzou1k3]::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 8px, transparent 8px, transparent 16px );
            pointer-events: none;
        }

.plot-lock-badge[b-8bcvzou1k3] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 7px 11px;
    border: 1px solid rgba(248, 113, 113, 0.38);
    border-radius: 999px;
    background: rgba(69, 10, 10, 0.72);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
    color: #fecaca;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    backdrop-filter: blur(10px);
}

    .plot-card:hover[b-8bcvzou1k3] {
        transform: translateY(-4px);
        border-color: rgba(178, 142, 255, 0.52);
    }

    .plot-card.ready[b-8bcvzou1k3] {
        border-color: rgba(105, 226, 164, 0.62);
        box-shadow: 0 0 30px rgba(57, 189, 119, 0.12);
    }

.plot-number[b-8bcvzou1k3] {
    color: #a8a1bd;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.crop-circle[b-8bcvzou1k3] {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 22px auto 18px;
    border: 1px solid rgba(178, 143, 255, 0.26);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(103, 72, 175, 0.34), rgba(34, 27, 69, 0.76));
    box-shadow: inset 0 0 28px rgba(116, 76, 192, 0.14);
}

.crop-emoji[b-8bcvzou1k3] {
    font-size: 2.25rem;
}

.plot-card h3[b-8bcvzou1k3] {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.plot-card p[b-8bcvzou1k3] {
    min-height: 58px;
    margin: 0;
    color: #a9a3ba;
    font-size: 0.86rem;
    line-height: 1.55;
}

.growth-track[b-8bcvzou1k3] {
    height: 6px;
    margin-top: auto;
}

.stage-label[b-8bcvzou1k3] {
    margin: 7px 0 13px;
    color: #8f89a5;
    font-size: 0.72rem;
}

.plot-action[b-8bcvzou1k3] {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    color: white;
    font-weight: 850;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease;
}

    .plot-action:hover[b-8bcvzou1k3] {
        transform: translateY(-2px);
        filter: brightness(1.12);
    }

.grow-button[b-8bcvzou1k3] {
    background: linear-gradient(135deg, #6745b7, #8761d9);
}

.water-button[b-8bcvzou1k3] {
    background: linear-gradient(135deg, #326da6, #478bc5);
}

.harvest-button[b-8bcvzou1k3] {
    color: #092117;
    background: linear-gradient(135deg, #67d99d, #a1e5a2);
}

.message-card[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 19px 22px;
    border: 1px solid rgba(128, 198, 164, 0.25);
    border-radius: 20px;
    background: rgba(13, 52, 45, 0.72);
}

    .message-card > span[b-8bcvzou1k3] {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        border-radius: 15px;
        font-size: 1.35rem;
        background: rgba(46, 144, 105, 0.18);
    }

    .message-card strong[b-8bcvzou1k3] {
        font-size: 1rem;
    }

    .message-card p[b-8bcvzou1k3] {
        margin: 5px 0 0;
        color: #9ebcb1;
        font-size: 0.88rem;
    }

.lower-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 18px;
}

.tasks-panel[b-8bcvzou1k3],
.reward-panel[b-8bcvzou1k3],
.inventory-panel[b-8bcvzou1k3] {
    border: 1px solid rgba(151, 126, 212, 0.22);
    border-radius: 28px;
    background: rgba(21, 23, 53, 0.88);
}

.tasks-panel[b-8bcvzou1k3] {
    padding: 26px;
}

.task-count[b-8bcvzou1k3] {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #d9caff;
    font-weight: 900;
    background: rgba(103, 73, 174, 0.30);
}

.task-card[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid rgba(141, 127, 178, 0.14);
    border-radius: 18px;
    background: rgba(10, 15, 35, 0.56);
}

    .task-card.complete[b-8bcvzou1k3] {
        border-color: rgba(74, 199, 131, 0.28);
        background: rgba(13, 55, 43, 0.48);
    }

.task-check[b-8bcvzou1k3] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #d8c8ff;
    font-weight: 900;
    background: #3c2c6b;
}

.task-card.complete .task-check[b-8bcvzou1k3] {
    color: #072217;
    background: #72dca6;
}

.task-card strong[b-8bcvzou1k3] {
    font-size: 0.93rem;
}

.task-card p[b-8bcvzou1k3] {
    margin: 4px 0 0;
    color: #948da7;
    font-size: 0.8rem;
}

.task-card > span:last-child[b-8bcvzou1k3] {
    color: #78daa9;
    font-size: 0.79rem;
    font-weight: 800;
}

.reward-panel[b-8bcvzou1k3] {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background: radial-gradient(circle at 100% 0%, rgba(102, 197, 142, 0.17), transparent 37%), linear-gradient(145deg, rgba(24, 67, 57, 0.84), rgba(18, 25, 52, 0.94));
}

.reward-star[b-8bcvzou1k3] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    border-radius: 16px;
    color: #f5d577;
    background: rgba(216, 187, 99, 0.12);
}

.reward-panel > p:not(.eyebrow)[b-8bcvzou1k3] {
    color: #a2b8b1;
    line-height: 1.65;
}

.reward-items[b-8bcvzou1k3] {
    display: flex;
    gap: 8px;
    margin: 22px 0;
}

    .reward-items span[b-8bcvzou1k3] {
        flex: 1;
        padding: 11px 8px;
        border-radius: 13px;
        text-align: center;
        font-size: 0.85rem;
        font-weight: 800;
        background: rgba(4, 29, 24, 0.58);
    }

.journal-link[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    color: white;
    font-weight: 850;
    text-decoration: none;
    background: linear-gradient(135deg, #6845b7, #815bd2);
}

.inventory-panel[b-8bcvzou1k3] {
    margin-top: 18px;
    padding: 26px;
}

.close-button[b-8bcvzou1k3] {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 1.4rem;
}

.inventory-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}

.inventory-item[b-8bcvzou1k3] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    padding: 18px;
    border: 1px solid rgba(153, 132, 201, 0.18);
    border-radius: 20px;
    background: rgba(10, 15, 35, 0.58);
}

    .inventory-item > span[b-8bcvzou1k3] {
        margin-bottom: 18px;
        font-size: 2.2rem;
    }

    .inventory-item small[b-8bcvzou1k3] {
        margin-top: 7px;
        color: #918aa2;
    }

    .inventory-item b[b-8bcvzou1k3] {
        position: absolute;
        right: 14px;
        bottom: 14px;
        color: #d9c9ff;
    }

    .inventory-item.locked[b-8bcvzou1k3] {
        opacity: 0.48;
    }

@media (max-width: 920px) {
    .resource-grid[b-8bcvzou1k3],
    .plots-grid[b-8bcvzou1k3],
    .inventory-grid[b-8bcvzou1k3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .lower-grid[b-8bcvzou1k3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .farm-page[b-8bcvzou1k3] {
        padding: 38px 16px 145px;
    }

    .farm-header[b-8bcvzou1k3],
    .scene-top[b-8bcvzou1k3],
    .plots-heading[b-8bcvzou1k3] {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-button[b-8bcvzou1k3] {
        width: 100%;
        justify-content: center;
    }

    .resource-grid[b-8bcvzou1k3] {
        gap: 10px;
    }

    .resource-card[b-8bcvzou1k3] {
        min-height: 80px;
        padding: 13px;
    }

    .resource-icon[b-8bcvzou1k3] {
        width: 40px;
        height: 40px;
    }

    .scene-top[b-8bcvzou1k3],
    .plots-section[b-8bcvzou1k3] {
        padding: 24px 18px;
    }

    .weather-pill[b-8bcvzou1k3] {
        white-space: normal;
    }

    .landscape[b-8bcvzou1k3] {
        height: 190px;
    }

    .plots-grid[b-8bcvzou1k3] {
        grid-template-columns: 1fr;
    }

    .plot-card[b-8bcvzou1k3] {
        min-height: 340px;
    }

    .task-card[b-8bcvzou1k3] {
        grid-template-columns: auto 1fr;
    }

        .task-card > span:last-child[b-8bcvzou1k3] {
            grid-column: 2;
        }

    .inventory-grid[b-8bcvzou1k3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   FARM SPECIAL EFFECTS
   ===================================================== */

/* Floating fireflies */
.landscape[b-8bcvzou1k3]::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 34px;
    left: 7%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    background: #fff4a8;
    box-shadow: 95px 78px 0 #ffef9d, 190px 22px 0 #fff5b5, 285px 108px 0 #ffdf72, 390px 55px 0 #fff1a3, 510px 122px 0 #ffe475, 630px 35px 0 #fff5ba, 755px 92px 0 #ffe585, 890px 48px 0 #fff4ab;
    filter: drop-shadow(0 0 6px #ffdf73);
    animation: fireflyFloat-b-8bcvzou1k3 5.5s ease-in-out infinite;
}

/* Slowly moving clouds */
.cloud-one[b-8bcvzou1k3] {
    animation: cloudMoveOne-b-8bcvzou1k3 18s ease-in-out infinite alternate;
}

.cloud-two[b-8bcvzou1k3] {
    animation: cloudMoveTwo-b-8bcvzou1k3 22s ease-in-out infinite alternate;
}

/* New seed popping from the ground */
.plot-card.planted .crop-emoji[b-8bcvzou1k3] {
    transform-origin: bottom center;
    animation: seedPop-b-8bcvzou1k3 1.1s cubic-bezier(.2, 1.45, .4, 1);
}

/* Water ripple around the crop */
.plot-card.watered .crop-circle[b-8bcvzou1k3] {
    animation: waterRipple-b-8bcvzou1k3 2.2s ease-in-out infinite;
}

    .plot-card.watered .crop-circle[b-8bcvzou1k3]::before,
    .plot-card.watered .crop-circle[b-8bcvzou1k3]::after {
        content: "💧";
        position: absolute;
        z-index: 2;
        font-size: 1rem;
        pointer-events: none;
    }

    .plot-card.watered .crop-circle[b-8bcvzou1k3]::before {
        top: 6px;
        left: 13px;
        animation: waterDropLeft-b-8bcvzou1k3 1.8s ease-in-out infinite;
    }

    .plot-card.watered .crop-circle[b-8bcvzou1k3]::after {
        top: 2px;
        right: 13px;
        animation: waterDropRight-b-8bcvzou1k3 1.8s ease-in-out 0.45s infinite;
    }

/* Growing sprout movement */
.plot-card.growing .crop-emoji[b-8bcvzou1k3] {
    display: inline-block;
    transform-origin: bottom center;
    animation: sproutSway-b-8bcvzou1k3 2.4s ease-in-out infinite;
}

.plot-card.growing .crop-circle[b-8bcvzou1k3] {
    box-shadow: inset 0 0 28px rgba(95, 219, 146, 0.18), 0 0 28px rgba(77, 213, 137, 0.16);
}

/* Harvest-ready glow and sparkles */
.plot-card.ready[b-8bcvzou1k3] {
    animation: readyCardGlow-b-8bcvzou1k3 2.3s ease-in-out infinite;
}

    .plot-card.ready .crop-circle[b-8bcvzou1k3] {
        position: relative;
        animation: harvestPulse-b-8bcvzou1k3 1.8s ease-in-out infinite;
    }

        .plot-card.ready .crop-circle[b-8bcvzou1k3]::before {
            content: "✦";
            position: absolute;
            z-index: 3;
            top: 10px;
            left: 10px;
            width: 10px;
            height: 10px;
            color: #fff0a5;
            font-size: 0.9rem;
            pointer-events: none;
            text-shadow: 52px 2px 0 #fff4c4, 5px 50px 0 #9fffc7, 51px 49px 0 #ffe47b;
            filter: drop-shadow(0 0 5px rgba(255, 231, 130, 0.85));
            transform-origin: 34px 34px;
            animation: harvestSparkle-b-8bcvzou1k3 1.8s ease-in-out infinite;
        }

    .plot-card.ready .crop-emoji[b-8bcvzou1k3] {
        display: inline-block;
        animation: carrotBounce-b-8bcvzou1k3 1.6s ease-in-out infinite;
    }

/* Smooth button glow and moving shine */
.plot-action[b-8bcvzou1k3] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    .plot-action[b-8bcvzou1k3]::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -50%;
        left: -75%;
        width: 45%;
        height: 200%;
        opacity: 0;
        transform: rotate(24deg);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.38), transparent );
        transition: left 650ms ease, opacity 250ms ease;
    }

    .plot-action:hover[b-8bcvzou1k3]::before {
        left: 135%;
        opacity: 1;
    }

    .plot-action:hover[b-8bcvzou1k3] {
        box-shadow: 0 10px 28px rgba(105, 71, 188, 0.38), 0 0 18px rgba(170, 133, 255, 0.22);
    }

.water-button:hover[b-8bcvzou1k3] {
    box-shadow: 0 10px 28px rgba(52, 134, 205, 0.38), 0 0 18px rgba(89, 172, 238, 0.24);
}

.harvest-button:hover[b-8bcvzou1k3] {
    box-shadow: 0 10px 28px rgba(72, 210, 139, 0.38), 0 0 22px rgba(120, 238, 169, 0.28);
}

/* Animations */

@keyframes fireflyFloat-b-8bcvzou1k3 {
    0% {
        transform: translate(0, 0);
        opacity: 0.2;
    }

    25% {
        opacity: 1;
    }

    50% {
        transform: translate(25px, -16px);
        opacity: 0.45;
    }

    75% {
        opacity: 1;
    }

    100% {
        transform: translate(-10px, 12px);
        opacity: 0.25;
    }
}

@keyframes cloudMoveOne-b-8bcvzou1k3 {
    from {
        transform: translateX(-14px);
        opacity: 0.20;
    }

    to {
        transform: translateX(58px);
        opacity: 0.38;
    }
}

@keyframes cloudMoveTwo-b-8bcvzou1k3 {
    from {
        transform: translateX(20px) scale(0.72);
        opacity: 0.18;
    }

    to {
        transform: translateX(-55px) scale(0.72);
        opacity: 0.34;
    }
}

@keyframes seedPop-b-8bcvzou1k3 {
    0% {
        transform: translateY(22px) scale(0.25);
        opacity: 0;
    }

    55% {
        transform: translateY(-7px) scale(1.18);
        opacity: 1;
    }

    78% {
        transform: translateY(2px) scale(0.94);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes waterRipple-b-8bcvzou1k3 {
    0%, 100% {
        box-shadow: inset 0 0 28px rgba(79, 169, 231, 0.16), 0 0 0 0 rgba(85, 177, 238, 0);
    }

    50% {
        box-shadow: inset 0 0 34px rgba(79, 169, 231, 0.30), 0 0 0 12px rgba(85, 177, 238, 0.08);
    }
}

@keyframes waterDropLeft-b-8bcvzou1k3 {
    0% {
        transform: translateY(-14px) rotate(-10deg);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        transform: translateY(50px) rotate(12deg);
        opacity: 0;
    }
}

@keyframes waterDropRight-b-8bcvzou1k3 {
    0% {
        transform: translateY(-17px) rotate(12deg);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        transform: translateY(53px) rotate(-12deg);
        opacity: 0;
    }
}

@keyframes sproutSway-b-8bcvzou1k3 {
    0%, 100% {
        transform: rotate(-5deg) translateY(1px);
    }

    50% {
        transform: rotate(6deg) translateY(-5px) scale(1.07);
    }
}

@keyframes readyCardGlow-b-8bcvzou1k3 {
    0%, 100% {
        box-shadow: 0 0 22px rgba(74, 218, 142, 0.10);
    }

    50% {
        box-shadow: 0 0 38px rgba(74, 218, 142, 0.25), inset 0 0 25px rgba(82, 222, 149, 0.05);
    }
}

@keyframes harvestPulse-b-8bcvzou1k3 {
    0%, 100% {
        transform: scale(1);
        box-shadow: inset 0 0 28px rgba(88, 223, 149, 0.18), 0 0 18px rgba(88, 223, 149, 0.16);
    }

    50% {
        transform: scale(1.06);
        box-shadow: inset 0 0 38px rgba(88, 223, 149, 0.30), 0 0 38px rgba(88, 223, 149, 0.28);
    }
}

@keyframes harvestSparkle-b-8bcvzou1k3 {
    0%, 100% {
        transform: scale(0.72);
        opacity: 0.25;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes carrotBounce-b-8bcvzou1k3 {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-8px) rotate(3deg) scale(1.08);
    }
}

/* Accessibility: disable movement when the device requests it */
@media (prefers-reduced-motion: reduce) {
    .landscape[b-8bcvzou1k3]::after,
    .cloud[b-8bcvzou1k3],
    .crop-circle[b-8bcvzou1k3],
    .crop-emoji[b-8bcvzou1k3],
    .plot-card[b-8bcvzou1k3],
    .plot-card.ready .crop-circle[b-8bcvzou1k3]::before {
        animation: none !important;
    }
}
/* =====================================================
   AUTOMATIC LOCAL-TIME FARM THEMES
   ===================================================== */

.landscape[b-8bcvzou1k3],
.landscape .hill[b-8bcvzou1k3],
.landscape .moon[b-8bcvzou1k3],
.landscape .cloud[b-8bcvzou1k3],
.landscape .trees[b-8bcvzou1k3] {
    transition: background 1.2s ease, color 1.2s ease, opacity 1.2s ease, filter 1.2s ease, box-shadow 1.2s ease;
}

    /* MORNING: 5:00 AM – 11:59 AM */
    .landscape.time-morning[b-8bcvzou1k3] {
        background: linear-gradient( 180deg, #f6b8ba 0%, #d8b9e8 35%, #8fc8c0 100% );
    }

        .landscape.time-morning .moon[b-8bcvzou1k3] {
            color: #ffe078;
            background: rgba(255, 232, 142, 0.28);
            box-shadow: 0 0 42px rgba(255, 215, 105, 0.62);
        }

        .landscape.time-morning .hill-one[b-8bcvzou1k3] {
            background: #5f9270;
        }

        .landscape.time-morning .hill-two[b-8bcvzou1k3] {
            background: #3f755d;
        }

        .landscape.time-morning .cloud[b-8bcvzou1k3] {
            color: rgba(255, 247, 250, 0.48);
        }

        .landscape.time-morning .trees[b-8bcvzou1k3] {
            filter: brightness(1.08) saturate(1.08);
        }

        /* Hide fireflies during daylight */
        .landscape.time-morning[b-8bcvzou1k3]::after {
            display: none;
        }

    /* AFTERNOON: 12:00 PM – 4:59 PM */
    .landscape.time-afternoon[b-8bcvzou1k3] {
        background: linear-gradient( 180deg, #62b8d4 0%, #83cbd2 46%, #80bb91 100% );
    }

        .landscape.time-afternoon .moon[b-8bcvzou1k3] {
            color: #fff2a4;
            background: rgba(255, 235, 132, 0.30);
            box-shadow: 0 0 48px rgba(255, 226, 102, 0.66);
        }

        .landscape.time-afternoon .hill-one[b-8bcvzou1k3] {
            background: #478462;
        }

        .landscape.time-afternoon .hill-two[b-8bcvzou1k3] {
            background: #2e694f;
        }

        .landscape.time-afternoon .cloud[b-8bcvzou1k3] {
            color: rgba(255, 255, 255, 0.62);
        }

        .landscape.time-afternoon .trees[b-8bcvzou1k3] {
            filter: brightness(1.12) saturate(1.15);
        }

        .landscape.time-afternoon[b-8bcvzou1k3]::after {
            display: none;
        }

    /* EVENING: 5:00 PM – 8:59 PM */
    .landscape.time-evening[b-8bcvzou1k3] {
        background: linear-gradient( 180deg, #d47a78 0%, #9d668e 40%, #4e6670 100% );
    }

        .landscape.time-evening .moon[b-8bcvzou1k3] {
            color: #ffe4a0;
            background: rgba(255, 193, 112, 0.22);
            box-shadow: 0 0 40px rgba(255, 178, 101, 0.45);
        }

        .landscape.time-evening .hill-one[b-8bcvzou1k3] {
            background: #456756;
        }

        .landscape.time-evening .hill-two[b-8bcvzou1k3] {
            background: #304f46;
        }

        .landscape.time-evening .cloud[b-8bcvzou1k3] {
            color: rgba(255, 220, 224, 0.34);
        }

        .landscape.time-evening .trees[b-8bcvzou1k3] {
            filter: brightness(0.90) saturate(0.95);
        }

    /* NIGHT: 9:00 PM – 4:59 AM */
    .landscape.time-night[b-8bcvzou1k3] {
        background: linear-gradient( 180deg, #17244d 0%, #303568 46%, #425f5a 100% );
    }

        .landscape.time-night .moon[b-8bcvzou1k3] {
            color: #fff5c1;
            background: rgba(237, 225, 174, 0.18);
            box-shadow: 0 0 42px rgba(238, 214, 146, 0.34);
        }

        .landscape.time-night .hill-one[b-8bcvzou1k3] {
            background: #244d4c;
        }

        .landscape.time-night .hill-two[b-8bcvzou1k3] {
            background: #183e3b;
        }

        .landscape.time-night .cloud[b-8bcvzou1k3] {
            color: rgba(223, 218, 255, 0.26);
        }

        .landscape.time-night .trees[b-8bcvzou1k3] {
            filter: brightness(0.72) saturate(0.82);
        }
/* =====================================================
   INVENTORY POPUP
   ===================================================== */

.inventory-overlay[b-8bcvzou1k3] {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 6, 20, 0.78);
    backdrop-filter: blur(14px);
    animation: inventoryFadeIn-b-8bcvzou1k3 240ms ease-out;
}

.inventory-modal[b-8bcvzou1k3] {
    display: flex;
    flex-direction: column;
    width: min(940px, 100%);
    max-height: min(820px, 88vh);
    overflow: hidden;
    border: 1px solid rgba(174, 136, 255, 0.48);
    border-radius: 32px;
    color: #f8f5ff;
    background: radial-gradient( circle at 100% 0%, rgba(82, 170, 136, 0.16), transparent 32% ), linear-gradient( 145deg, rgba(32, 27, 73, 0.98), rgba(11, 16, 39, 0.99) );
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.62), 0 0 45px rgba(112, 72, 201, 0.18);
    animation: inventoryModalOpen-b-8bcvzou1k3 380ms cubic-bezier(.2, .95, .3, 1);
}

.inventory-header[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px 22px;
    border-bottom: 1px solid rgba(158, 132, 211, 0.16);
}

.inventory-title-area[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    gap: 17px;
}

    .inventory-title-area h2[b-8bcvzou1k3] {
        margin: 0;
        font-size: 1.8rem;
        letter-spacing: -0.035em;
    }

    .inventory-title-area p[b-8bcvzou1k3] {
        margin-bottom: 5px;
    }

    .inventory-title-area div:last-child > span[b-8bcvzou1k3] {
        display: block;
        margin-top: 5px;
        color: #9891aa;
        font-size: 0.84rem;
    }

.inventory-bag-icon[b-8bcvzou1k3] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 1px solid rgba(177, 137, 255, 0.32);
    border-radius: 19px;
    font-size: 1.7rem;
    background: linear-gradient( 145deg, rgba(113, 75, 193, 0.42), rgba(56, 39, 103, 0.56) );
    box-shadow: 0 10px 28px rgba(59, 32, 120, 0.28);
}

.inventory-close[b-8bcvzou1k3] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(175, 149, 225, 0.26);
    border-radius: 15px;
    color: #ded6ed;
    font-size: 1.55rem;
    cursor: pointer;
    background: rgba(54, 43, 94, 0.48);
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

    .inventory-close:hover[b-8bcvzou1k3] {
        transform: rotate(6deg) scale(1.06);
        border-color: rgba(196, 165, 255, 0.55);
        background: rgba(104, 72, 174, 0.68);
    }

.inventory-tabs[b-8bcvzou1k3] {
    display: flex;
    gap: 9px;
    padding: 18px 30px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(158, 132, 211, 0.14);
    background: rgba(9, 13, 33, 0.32);
}

.inventory-tab[b-8bcvzou1k3] {
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid rgba(159, 137, 204, 0.20);
    border-radius: 14px;
    color: #a9a2ba;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(28, 29, 63, 0.62);
    transition: color 190ms ease, transform 190ms ease, background 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}

    .inventory-tab:hover[b-8bcvzou1k3] {
        color: #f5efff;
        transform: translateY(-2px);
        border-color: rgba(172, 135, 248, 0.40);
    }

    .inventory-tab.active[b-8bcvzou1k3] {
        color: white;
        border-color: rgba(173, 130, 255, 0.72);
        background: linear-gradient( 135deg, #6845b7, #815ad1 );
        box-shadow: 0 8px 22px rgba(78, 46, 150, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

.inventory-content[b-8bcvzou1k3] {
    flex: 1;
    overflow-y: auto;
    padding: 25px 30px 30px;
}

    .inventory-content[b-8bcvzou1k3]::-webkit-scrollbar {
        width: 7px;
    }

    .inventory-content[b-8bcvzou1k3]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.03);
    }

    .inventory-content[b-8bcvzou1k3]::-webkit-scrollbar-thumb {
        border-radius: 99px;
        background: rgba(139, 105, 210, 0.46);
    }

.inventory-items-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.inventory-slot[b-8bcvzou1k3] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 230px;
    overflow: hidden;
    padding: 17px;
    border: 1px solid rgba(154, 130, 204, 0.20);
    border-radius: 22px;
    background: linear-gradient( 160deg, rgba(38, 38, 79, 0.88), rgba(17, 22, 49, 0.92) );
    box-shadow: 0 16px 32px rgba(2, 4, 17, 0.16);
    transition: transform 210ms ease, border-color 210ms ease, box-shadow 210ms ease;
    animation: inventoryItemAppear-b-8bcvzou1k3 380ms ease-out both;
}

    .inventory-slot:nth-child(2)[b-8bcvzou1k3] {
        animation-delay: 45ms;
    }

    .inventory-slot:nth-child(3)[b-8bcvzou1k3] {
        animation-delay: 90ms;
    }

    .inventory-slot:nth-child(4)[b-8bcvzou1k3] {
        animation-delay: 135ms;
    }

    .inventory-slot:nth-child(5)[b-8bcvzou1k3] {
        animation-delay: 180ms;
    }

    .inventory-slot:nth-child(6)[b-8bcvzou1k3] {
        animation-delay: 225ms;
    }

    .inventory-slot:hover[b-8bcvzou1k3] {
        transform: translateY(-5px);
        border-color: rgba(180, 142, 255, 0.50);
        box-shadow: 0 20px 40px rgba(2, 4, 17, 0.28), 0 0 24px rgba(112, 76, 190, 0.12);
    }

.item-category[b-8bcvzou1k3] {
    align-self: flex-start;
    padding: 5px 8px;
    border-radius: 8px;
    color: #c9b7ef;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    background: rgba(112, 79, 179, 0.20);
}

.item-picture[b-8bcvzou1k3] {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 20px auto 17px;
    border: 1px solid rgba(176, 143, 235, 0.26);
    border-radius: 25px;
    font-size: 2.55rem;
    background: radial-gradient( circle, rgba(105, 75, 171, 0.34), rgba(32, 27, 68, 0.76) );
    transition: transform 220ms ease;
}

.inventory-slot:hover .item-picture[b-8bcvzou1k3] {
    transform: translateY(-3px) scale(1.06);
}

.seed-picture[b-8bcvzou1k3] {
    box-shadow: 0 0 28px rgba(97, 212, 140, 0.12);
}

.crop-picture[b-8bcvzou1k3] {
    box-shadow: 0 0 28px rgba(238, 167, 77, 0.13);
}

.item-information[b-8bcvzou1k3] {
    display: flex;
    flex-direction: column;
    padding-right: 35px;
}

    .item-information strong[b-8bcvzou1k3] {
        font-size: 0.96rem;
    }

    .item-information small[b-8bcvzou1k3] {
        margin-top: 5px;
        color: #938ca5;
        font-size: 0.75rem;
        line-height: 1.4;
    }

.item-quantity[b-8bcvzou1k3],
.item-lock[b-8bcvzou1k3] {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 32px;
    padding: 0 9px;
    border-radius: 11px;
}

.item-quantity[b-8bcvzou1k3] {
    color: #e4d8ff;
    font-size: 0.82rem;
    background: rgba(108, 73, 184, 0.38);
}

.item-lock[b-8bcvzou1k3] {
    font-size: 0.92rem;
    background: rgba(44, 43, 65, 0.74);
}

.locked-slot[b-8bcvzou1k3] {
    filter: saturate(0.45);
    opacity: 0.53;
}

    .locked-slot:hover[b-8bcvzou1k3] {
        transform: none;
    }

.empty-slot[b-8bcvzou1k3] {
    opacity: 0.72;
}

.inventory-footer[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 30px 24px;
    border-top: 1px solid rgba(158, 132, 211, 0.16);
    background: rgba(8, 12, 29, 0.38);
}

    .inventory-footer > div[b-8bcvzou1k3] {
        display: flex;
        align-items: center;
        gap: 11px;
    }

        .inventory-footer > div > span[b-8bcvzou1k3] {
            font-size: 1.6rem;
        }

    .inventory-footer p[b-8bcvzou1k3] {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    .inventory-footer small[b-8bcvzou1k3] {
        color: #8f899f;
    }

    .inventory-footer strong[b-8bcvzou1k3] {
        margin-top: 2px;
        font-size: 0.93rem;
    }

.inventory-done-button[b-8bcvzou1k3] {
    min-width: 118px;
    min-height: 46px;
    border: 0;
    border-radius: 15px;
    color: white;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient( 135deg, #6845b7, #835dd4 );
    box-shadow: 0 10px 25px rgba(74, 42, 143, 0.28);
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

    .inventory-done-button:hover[b-8bcvzou1k3] {
        transform: translateY(-2px);
        filter: brightness(1.12);
        box-shadow: 0 15px 30px rgba(74, 42, 143, 0.38);
    }

@keyframes inventoryFadeIn-b-8bcvzou1k3 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes inventoryModalOpen-b-8bcvzou1k3 {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes inventoryItemAppear-b-8bcvzou1k3 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 760px) {
    .inventory-overlay[b-8bcvzou1k3] {
        align-items: end;
        padding: 12px;
    }

    .inventory-modal[b-8bcvzou1k3] {
        max-height: 91vh;
        border-radius: 28px 28px 20px 20px;
    }

    .inventory-header[b-8bcvzou1k3],
    .inventory-tabs[b-8bcvzou1k3],
    .inventory-content[b-8bcvzou1k3],
    .inventory-footer[b-8bcvzou1k3] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .inventory-items-grid[b-8bcvzou1k3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-slot[b-8bcvzou1k3] {
        min-height: 210px;
    }
}

@media (max-width: 460px) {
    .inventory-title-area .eyebrow[b-8bcvzou1k3] {
        display: none;
    }

    .inventory-bag-icon[b-8bcvzou1k3] {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .inventory-items-grid[b-8bcvzou1k3] {
        grid-template-columns: 1fr;
    }

    .inventory-footer[b-8bcvzou1k3] {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-done-button[b-8bcvzou1k3] {
        width: 100%;
    }
}

.inventory-overlay[b-8bcvzou1k3] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(5, 3, 20, 0.76);
    backdrop-filter: blur(6px);
}

.inventory-drawer[b-8bcvzou1k3] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    width: min(92vw, 760px);
    max-height: 86vh;
    padding: 24px 18px 36px;
    overflow-y: auto;
    color: #ffffff;
    background: radial-gradient(circle at top right, rgba(156, 90, 255, 0.28), transparent 35%), linear-gradient(180deg, #191235 0%, #0d0922 100%);
    border: 1px solid rgba(207, 176, 255, 0.35);
    border-radius: 24px;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.65);
    transform: translate(-50%, -50%);
    animation: inventoryPopupIn 0.3s ease-out;
}

@keyframes inventorySlideIn-b-8bcvzou1k3 {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.inventory-top[b-8bcvzou1k3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

    .inventory-top h2[b-8bcvzou1k3] {
        margin: 2px 0 5px;
        color: #ffffff;
        font-size: 28px;
    }

    .inventory-top p[b-8bcvzou1k3] {
        margin: 0;
        color: #cbbfe7;
        font-size: 13px;
    }

.inventory-eyebrow[b-8bcvzou1k3] {
    color: #b891ff !important;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.close-inventory[b-8bcvzou1k3] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 12px;
}

.inventory-summary[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 20px;
}

.inventory-summary-card[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 11px 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(195, 157, 255, 0.22);
    border-radius: 14px;
}

    .inventory-summary-card span[b-8bcvzou1k3] {
        font-size: 22px;
    }

    .inventory-summary-card strong[b-8bcvzou1k3],
    .inventory-summary-card small[b-8bcvzou1k3] {
        display: block;
    }

    .inventory-summary-card strong[b-8bcvzou1k3] {
        color: #ffffff;
        font-size: 16px;
    }

    .inventory-summary-card small[b-8bcvzou1k3] {
        color: #bdb1d8;
        font-size: 10px;
    }

.inventory-items-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.inventory-item-card[b-8bcvzou1k3] {
    position: relative;
    min-width: 0;
    padding: 16px 12px 14px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.1), rgba(115, 72, 180, 0.08) );
    border: 1px solid rgba(205, 174, 255, 0.25);
    border-radius: 17px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

    .inventory-item-card h3[b-8bcvzou1k3] {
        margin: 7px 0 4px;
        color: #ffffff;
        font-size: 14px;
    }

    .inventory-item-card p[b-8bcvzou1k3] {
        min-height: 32px;
        margin: 0 0 9px;
        color: #bdb1d8;
        font-size: 10px;
        line-height: 1.4;
    }

.item-icon[b-8bcvzou1k3] {
    margin-top: 15px;
    font-size: 35px;
    filter: drop-shadow(0 0 9px rgba(199, 159, 255, 0.45));
}

.item-quantity[b-8bcvzou1k3] {
    display: inline-block;
    padding: 4px 10px;
    color: #fff2ad;
    font-size: 13px;
    background: rgba(245, 190, 76, 0.13);
    border: 1px solid rgba(245, 190, 76, 0.28);
    border-radius: 999px;
}

.item-rarity[b-8bcvzou1k3] {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 3px 6px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.7px;
    border-radius: 999px;
}

    .item-rarity.common[b-8bcvzou1k3] {
        color: #d8d4e3;
        background: rgba(216, 212, 227, 0.13);
    }

    .item-rarity.rare[b-8bcvzou1k3] {
        color: #78c9ff;
        background: rgba(65, 166, 255, 0.16);
    }

    .item-rarity.epic[b-8bcvzou1k3] {
        color: #d59aff;
        background: rgba(181, 91, 255, 0.17);
    }

    .item-rarity.legendary[b-8bcvzou1k3] {
        color: #ffd56d;
        background: rgba(255, 190, 58, 0.17);
    }

@media (max-width: 420px) {
    .inventory-drawer[b-8bcvzou1k3] {
        width: 92%;
        max-height: 88vh;
    }

    .inventory-summary[b-8bcvzou1k3] {
        grid-template-columns: 1fr;
    }
}

/* Stars visible only inside the meadow sky */
.landscape[b-8bcvzou1k3] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.landscape-stars[b-8bcvzou1k3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Clean garden-bed layout */
.plots-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.plot-card[b-8bcvzou1k3] {
    min-width: 0;
    min-height: 390px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.plot-copy[b-8bcvzou1k3] {
    min-width: 0;
    text-align: center;
}

    .plot-copy h3[b-8bcvzou1k3],
    .plot-copy p[b-8bcvzou1k3] {
        margin: 6px 0;
        overflow-wrap: anywhere;
    }

.plot-action[b-8bcvzou1k3] {
    width: 100%;
    min-height: 52px;
    margin-top: auto;
    padding: 12px 18px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    border: 1px solid rgba(220, 190, 255, 0.45);
    border-radius: 15px;
}

    .plot-action:disabled[b-8bcvzou1k3] {
        cursor: wait;
        opacity: 0.82;
        filter: saturate(0.85);
    }

        .plot-action:disabled:hover[b-8bcvzou1k3] {
            transform: none;
        }

/* Professional seed-selection popup */
.seed-picker-backdrop[b-8bcvzou1k3] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 3, 18, 0.78);
    backdrop-filter: blur(12px);
    animation: seedBackdropIn-b-8bcvzou1k3 0.25s ease-out;
}

.seed-picker[b-8bcvzou1k3] {
    position: relative;
    width: min(920px, 94vw);
    max-height: 86vh;
    padding: 30px;
    overflow-y: auto;
    color: #ffffff;
    background: radial-gradient(circle at top right, rgba(178, 105, 255, 0.26), transparent 38%), linear-gradient(145deg, rgba(31, 22, 62, 0.98), rgba(13, 9, 35, 0.98));
    border: 1px solid rgba(219, 188, 255, 0.38);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65), 0 0 45px rgba(150, 80, 255, 0.18);
    animation: seedPickerIn-b-8bcvzou1k3 0.32s ease-out;
}

    .seed-picker h2[b-8bcvzou1k3] {
        max-width: 700px;
        margin: 7px 50px 6px 0;
        font-size: clamp(1.5rem, 3vw, 2.15rem);
        line-height: 1.2;
    }

.seed-picker-hint[b-8bcvzou1k3] {
    margin: 0 0 24px;
    color: rgba(238, 226, 255, 0.75);
}

.seed-picker-close[b-8bcvzou1k3] {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.25s ease;
}

    .seed-picker-close:hover[b-8bcvzou1k3] {
        background: rgba(205, 142, 255, 0.24);
        transform: rotate(90deg) scale(1.06);
    }

.seed-choice-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.seed-choice-card[b-8bcvzou1k3] {
    min-width: 0;
    min-height: 145px;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    text-align: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(143, 86, 220, 0.08));
    border: 1px solid rgba(214, 181, 255, 0.25);
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

    .seed-choice-card:hover:not(:disabled)[b-8bcvzou1k3] {
        transform: translateY(-6px);
        border-color: rgba(229, 199, 255, 0.72);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3), 0 0 22px rgba(177, 106, 255, 0.24);
    }

    .seed-choice-card:disabled[b-8bcvzou1k3] {
        opacity: 0.38;
        cursor: not-allowed;
        filter: grayscale(0.65);
    }

    .seed-choice-card strong[b-8bcvzou1k3] {
        overflow-wrap: anywhere;
        line-height: 1.2;
    }

    .seed-choice-card span:last-child[b-8bcvzou1k3] {
        color: rgba(237, 224, 255, 0.72);
        font-size: 0.84rem;
    }

.seed-choice-emoji[b-8bcvzou1k3] {
    font-size: 38px;
    filter: drop-shadow(0 0 10px rgba(220, 180, 255, 0.48));
}

@keyframes seedBackdropIn-b-8bcvzou1k3 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes seedPickerIn-b-8bcvzou1k3 {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 760px) {
    .plots-grid[b-8bcvzou1k3] {
        grid-template-columns: 1fr;
    }

    .seed-choice-grid[b-8bcvzou1k3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seed-picker[b-8bcvzou1k3] {
        padding: 24px 18px;
    }
}

/* FARM INVENTORY POPUP */
.inventory-drawer[b-8bcvzou1k3] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    width: min(92vw, 1040px);
    max-height: 88vh;
    padding: 28px;
    overflow-y: auto;
    color: #ffffff;
    background: radial-gradient(circle at 80% 10%, rgba(157, 94, 255, 0.24), transparent 35%), linear-gradient(145deg, #211544 0%, #100927 55%, #090619 100%);
    border: 1px solid rgba(207, 176, 255, 0.42);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75), 0 0 45px rgba(139, 92, 246, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translate(-50%, -50%);
    animation: farmInventoryOpen-b-8bcvzou1k3 0.35s ease-out;
    scrollbar-width: thin;
    scrollbar-color: #9d6cff transparent;
}

.farm-inventory-grid[b-8bcvzou1k3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.farm-item-card[b-8bcvzou1k3] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 145px;
    padding: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(50, 33, 91, 0.94), rgba(22, 15, 48, 0.96));
    border: 1px solid rgba(191, 158, 255, 0.24);
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .farm-item-card[b-8bcvzou1k3]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient( circle at 15% 20%, rgba(177, 124, 255, 0.16), transparent 42% );
    }

    .farm-item-card:hover[b-8bcvzou1k3] {
        z-index: 2;
        transform: translateY(-6px) scale(1.02);
        border-color: rgba(210, 180, 255, 0.65);
        box-shadow: 0 20px 38px rgba(0, 0, 0, 0.48), 0 0 25px rgba(159, 101, 255, 0.28);
    }

.farm-item-icon[b-8bcvzou1k3] {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    place-items: center;
    font-size: 42px;
    background: rgba(14, 9, 35, 0.72);
    border: 1px solid rgba(214, 185, 255, 0.28);
    border-radius: 18px;
    filter: drop-shadow(0 0 9px rgba(200, 160, 255, 0.45));
    transition: transform 0.3s ease;
}

.farm-item-card:hover .farm-item-icon[b-8bcvzou1k3] {
    transform: scale(1.1) rotate(-4deg);
}

.farm-item-details[b-8bcvzou1k3] {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}

    .farm-item-details h4[b-8bcvzou1k3] {
        margin: 0 0 7px;
        color: #ffffff;
        font-size: 17px;
        font-weight: 750;
    }

    .farm-item-details p[b-8bcvzou1k3] {
        margin: 0 0 13px;
        color: rgba(235, 226, 255, 0.68);
        font-size: 12px;
        line-height: 1.45;
    }

.farm-item-meta[b-8bcvzou1k3] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

    .farm-item-meta span[b-8bcvzou1k3] {
        padding: 4px 9px;
        color: #d7c3ff;
        font-size: 10px;
        font-weight: 700;
        background: rgba(139, 92, 246, 0.15);
        border: 1px solid rgba(181, 143, 255, 0.22);
        border-radius: 999px;
    }

    .farm-item-meta strong[b-8bcvzou1k3] {
        margin-left: auto;
        color: #ffffff;
        font-size: 16px;
    }

.farm-new-badge[b-8bcvzou1k3] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 4px 8px;
    color: #17072c;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.7px;
    background: linear-gradient(135deg, #ffe071, #ff9ee7);
    border-radius: 999px;
    box-shadow: 0 0 15px rgba(255, 205, 116, 0.55);
}

/* RARITY EFFECTS */
.rarity-common[b-8bcvzou1k3] {
    border-color: rgba(191, 196, 220, 0.3);
}

.rarity-uncommon[b-8bcvzou1k3] {
    border-color: rgba(77, 225, 160, 0.42);
    box-shadow: 0 12px 28px rgba(25, 180, 117, 0.12);
}

.rarity-rare[b-8bcvzou1k3] {
    border-color: rgba(72, 157, 255, 0.5);
    box-shadow: 0 12px 30px rgba(66, 135, 255, 0.16);
}

.rarity-epic[b-8bcvzou1k3] {
    border-color: rgba(186, 104, 255, 0.58);
    box-shadow: 0 12px 32px rgba(165, 72, 255, 0.2);
}

.rarity-legendary[b-8bcvzou1k3] {
    border-color: rgba(255, 192, 72, 0.65);
    box-shadow: 0 12px 34px rgba(255, 170, 38, 0.2), 0 0 20px rgba(255, 205, 97, 0.12);
}

@keyframes farmInventoryOpen-b-8bcvzou1k3 {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 900px) {
    .farm-inventory-grid[b-8bcvzou1k3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .inventory-drawer[b-8bcvzou1k3] {
        width: 94vw;
        padding: 18px;
    }

    .farm-inventory-grid[b-8bcvzou1k3] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/FloatingStars.razor.rz.scp.css */
.floating-star[b-wekac69ob2] {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient( circle, #ffffff 0%, #fffbe8 30%, #ffe7a8 55%, rgba(212, 190, 255, 0.3) 72%, transparent 100% );
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 0 7px rgba(255, 230, 175, 0.7), 0 0 13px rgba(194, 165, 255, 0.4);
    opacity: 0.35;
    animation-name: starSlowFloat-b-wekac69ob2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    will-change: transform, opacity;
}

@keyframes starSlowFloat-b-wekac69ob2 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.75);
        opacity: 0.2;
    }

    35% {
        opacity: 0.75;
    }

    65% {
        opacity: 0.4;
    }

    100% {
        transform: translate3d(var(--move-x), var(--move-y), 0) scale(1.15);
        opacity: 0.9;
    }
}
/* /Components/Pages/Goals.razor.rz.scp.css */
.goals-page[b-1a1kbaybhw] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    color: #fffaf3;
    background: radial-gradient(circle at 12% 15%, rgba(151, 104, 246, 0.24), transparent 31%), radial-gradient(circle at 92% 35%, rgba(244, 130, 183, 0.16), transparent 29%), radial-gradient(circle at 45% 100%, rgba(73, 184, 132, 0.15), transparent 38%), linear-gradient(160deg, #211942 0%, #17122f 52%, #100d24 100%);
    font-family: "Segoe UI", sans-serif;
    isolation: isolate;
}

    /* Scattered background stars */

    .goals-page[b-1a1kbaybhw]::before,
    .goals-page[b-1a1kbaybhw]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .goals-page[b-1a1kbaybhw]::before {
        opacity: 0.4;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 1px, transparent 1.7px), radial-gradient(circle, rgba(220, 192, 255, 0.7) 1.2px, transparent 2px), radial-gradient(circle, rgba(255, 211, 238, 0.55) 0.8px, transparent 1.5px);
        background-size: 179px 227px, 263px 191px, 337px 283px;
        background-position: 27px 41px, 137px 86px, 69px 179px;
        animation: smallStarsDrift-b-1a1kbaybhw 30s linear infinite;
    }

    .goals-page[b-1a1kbaybhw]::after {
        opacity: 0.52;
        background-image: radial-gradient(circle, rgba(255, 246, 255, 0.9) 1.6px, transparent 2.7px), radial-gradient(circle, rgba(197, 161, 255, 0.72) 1.3px, transparent 2.4px);
        background-size: 433px 379px, 557px 467px;
        background-position: 83px 131px, 305px 57px;
        animation: largeStarsDrift-b-1a1kbaybhw 55s linear infinite;
    }

/* Background glows */

.goals-glow[b-1a1kbaybhw] {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
    animation: glowFloat-b-1a1kbaybhw 9s ease-in-out infinite;
}

.glow-one[b-1a1kbaybhw] {
    top: 180px;
    left: -150px;
    width: 330px;
    height: 330px;
    background: rgba(153, 104, 255, 0.2);
}

.glow-two[b-1a1kbaybhw] {
    top: 760px;
    right: -170px;
    width: 370px;
    height: 370px;
    background: rgba(75, 193, 131, 0.14);
    animation-delay: -4.5s;
}

/* Floating decorative stars */

.floating-star[b-1a1kbaybhw] {
    position: absolute;
    z-index: 1;
    color: #ead5ff;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(235, 207, 255, 0.9), 0 0 20px rgba(176, 115, 255, 0.7);
    animation: starFloat-b-1a1kbaybhw 5s ease-in-out infinite;
}

.star-one[b-1a1kbaybhw] {
    top: 145px;
    right: 8%;
    font-size: 21px;
}

.star-two[b-1a1kbaybhw] {
    top: 545px;
    left: 5%;
    font-size: 16px;
    animation-delay: -1.7s;
}

.star-three[b-1a1kbaybhw] {
    top: 1080px;
    right: 6%;
    font-size: 19px;
    animation-delay: -3.1s;
}

/* Header */

.goals-header[b-1a1kbaybhw] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px 1fr 48px;
    align-items: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 18px;
    animation: headerEntrance-b-1a1kbaybhw 0.65s ease both;
}

    .goals-header h1[b-1a1kbaybhw] {
        margin: 2px 0 0;
        color: #fffaf5;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(28px, 5vw, 42px);
        line-height: 1.05;
        letter-spacing: -0.5px;
    }

.page-label[b-1a1kbaybhw],
.eyebrow[b-1a1kbaybhw] {
    margin: 0;
    color: #c8a9ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.back-button[b-1a1kbaybhw] {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(226, 203, 255, 0.22);
    border-radius: 14px;
    color: #fff9ff;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 25px rgba(7, 4, 25, 0.25);
    text-decoration: none;
    font-size: 23px;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .back-button:hover[b-1a1kbaybhw] {
        color: white;
        background: rgba(166, 119, 255, 0.22);
        box-shadow: 0 0 22px rgba(174, 126, 255, 0.3);
        transform: translateX(-3px);
    }

.header-icon[b-1a1kbaybhw] {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(229, 199, 255, 0.24);
    border-radius: 16px;
    background: linear-gradient( 145deg, rgba(174, 118, 255, 0.3), rgba(244, 132, 184, 0.16) );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 25px rgba(175, 118, 255, 0.14);
    font-size: 23px;
    animation: targetPulse-b-1a1kbaybhw 3s ease-in-out infinite;
}

/* Main content */

.goals-content[b-1a1kbaybhw] {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(100% - 32px, 900px);
    margin: 0 auto;
    padding-bottom: 120px;
    flex-direction: column;
    gap: 18px;
}

/* Shared cards */

.goal-summary-card[b-1a1kbaybhw],
.goals-card[b-1a1kbaybhw],
.reminders-card[b-1a1kbaybhw],
.encouragement-card[b-1a1kbaybhw] {
    border: 1px solid rgba(225, 207, 255, 0.14);
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045) );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 18px 45px rgba(5, 3, 20, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Summary */

.goal-summary-card[b-1a1kbaybhw] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 24px;
    overflow: hidden;
    border-radius: 27px;
    animation: cardEntrance-b-1a1kbaybhw 0.7s 0.08s ease both;
}

    .goal-summary-card[b-1a1kbaybhw]::after {
        content: "";
        position: absolute;
        top: -95px;
        right: -65px;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(205, 158, 255, 0.23), transparent 70% );
        pointer-events: none;
        animation: summaryGlow-b-1a1kbaybhw 4s ease-in-out infinite;
    }

.summary-text[b-1a1kbaybhw] {
    position: relative;
    z-index: 1;
}

    .summary-text h2[b-1a1kbaybhw] {
        margin: 5px 0 8px;
        color: #fff9f4;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(22px, 4vw, 29px);
    }

    .summary-text > p:last-of-type[b-1a1kbaybhw] {
        max-width: 520px;
        margin: 0;
        color: #c8c0d4;
        font-size: 13px;
        line-height: 1.6;
    }

.summary-stats[b-1a1kbaybhw] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

    .summary-stats > div[b-1a1kbaybhw] {
        display: flex;
        min-width: 92px;
        padding: 10px 12px;
        flex-direction: column;
        border: 1px solid rgba(215, 190, 255, 0.12);
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.05);
    }

    .summary-stats strong[b-1a1kbaybhw] {
        color: #fff8f1;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
    }

    .summary-stats span[b-1a1kbaybhw] {
        margin-top: 2px;
        color: #aaa1b8;
        font-size: 9px;
    }

/* Progress ring */

.progress-ring[b-1a1kbaybhw] {
    --goal-progress: 0deg;
    position: relative;
    z-index: 1;
    display: grid;
    width: 126px;
    height: 126px;
    place-items: center;
    flex: 0 0 126px;
    border-radius: 50%;
    background: conic-gradient( #efa1ca 0deg, #b57af0 var(--goal-progress), rgba(255, 255, 255, 0.09) var(--goal-progress), rgba(255, 255, 255, 0.09) 360deg );
    box-shadow: 0 0 28px rgba(181, 122, 240, 0.24), inset 0 0 20px rgba(255, 255, 255, 0.06);
    animation: ringEntrance-b-1a1kbaybhw 1s 0.35s ease both;
}

    .progress-ring[b-1a1kbaybhw]::before {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        background: #1a1434;
        box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.28);
    }

.progress-ring-center[b-1a1kbaybhw] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .progress-ring-center strong[b-1a1kbaybhw] {
        color: #fff9f4;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 25px;
    }

    .progress-ring-center span[b-1a1kbaybhw] {
        margin-top: 2px;
        color: #bdb3c9;
        font-size: 9px;
    }

/* Section headings */

.goals-card[b-1a1kbaybhw],
.reminders-card[b-1a1kbaybhw] {
    padding: 23px;
    border-radius: 27px;
}

.goals-card[b-1a1kbaybhw] {
    animation: cardEntrance-b-1a1kbaybhw 0.7s 0.17s ease both;
}

.reminders-card[b-1a1kbaybhw] {
    animation: cardEntrance-b-1a1kbaybhw 0.7s 0.28s ease both;
}

.section-heading[b-1a1kbaybhw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

    .section-heading h2[b-1a1kbaybhw] {
        margin: 4px 0 0;
        color: #fff9f4;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 23px;
    }

/* Add goal button */

.add-goal-button[b-1a1kbaybhw] {
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(218, 184, 255, 0.22);
    border-radius: 14px;
    color: #f6eaff;
    background: linear-gradient( 145deg, rgba(164, 108, 239, 0.24), rgba(123, 86, 192, 0.16) );
    box-shadow: 0 8px 20px rgba(8, 4, 25, 0.18);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .add-goal-button span[b-1a1kbaybhw] {
        font-size: 17px;
        line-height: 1;
    }

    .add-goal-button:hover[b-1a1kbaybhw] {
        background: rgba(174, 117, 247, 0.3);
        box-shadow: 0 0 22px rgba(177, 119, 247, 0.18);
        transform: translateY(-2px);
    }

/* New goal form */

.new-goal-form[b-1a1kbaybhw] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
    padding: 13px;
    border: 1px solid rgba(211, 182, 255, 0.16);
    border-radius: 19px;
    background: rgba(140, 96, 208, 0.09);
    animation: formEntrance-b-1a1kbaybhw 0.35s ease both;
}

.new-goal-icon[b-1a1kbaybhw] {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 14px;
    background: rgba(92, 194, 137, 0.14);
    font-size: 21px;
}

.new-goal-fields[b-1a1kbaybhw] {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 9px;
}

    .new-goal-fields input[b-1a1kbaybhw],
    .new-goal-fields select[b-1a1kbaybhw] {
        min-width: 0;
        height: 40px;
        border: 1px solid rgba(224, 204, 255, 0.14);
        border-radius: 12px;
        outline: none;
        color: #fff8f3;
        background: rgba(8, 5, 28, 0.42);
        font-family: inherit;
        font-size: 11px;
    }

    .new-goal-fields input[b-1a1kbaybhw] {
        padding: 0 12px;
    }

    .new-goal-fields select[b-1a1kbaybhw] {
        padding: 0 9px;
    }

    .new-goal-fields option[b-1a1kbaybhw] {
        color: #22183d;
        background: white;
    }

    .new-goal-fields input[b-1a1kbaybhw]::placeholder {
        color: #968ba5;
    }

    .new-goal-fields input:focus[b-1a1kbaybhw],
    .new-goal-fields select:focus[b-1a1kbaybhw] {
        border-color: rgba(194, 148, 255, 0.5);
        box-shadow: 0 0 0 3px rgba(174, 116, 245, 0.1);
    }

.save-goal-button[b-1a1kbaybhw],
.cancel-goal-button[b-1a1kbaybhw] {
    height: 40px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.save-goal-button[b-1a1kbaybhw] {
    padding: 0 15px;
    color: #fff;
    background: linear-gradient(135deg, #9b6ce3, #c77fe6);
    font-size: 10px;
    font-weight: 800;
}

    .save-goal-button:disabled[b-1a1kbaybhw] {
        opacity: 0.35;
        cursor: default;
    }

    .save-goal-button:not(:disabled):hover[b-1a1kbaybhw] {
        transform: translateY(-2px);
    }

.cancel-goal-button[b-1a1kbaybhw] {
    width: 40px;
    color: #cfc4db;
    background: rgba(255, 255, 255, 0.07);
    font-size: 20px;
}

    .cancel-goal-button:hover[b-1a1kbaybhw] {
        color: white;
        background: rgba(255, 135, 166, 0.14);
    }

/* Goal list */

.goal-list[b-1a1kbaybhw] {
    display: flex;
    margin-top: 18px;
    flex-direction: column;
    gap: 10px;
}

.goal-item[b-1a1kbaybhw] {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.045);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}

    .goal-item:hover[b-1a1kbaybhw] {
        border-color: rgba(206, 168, 255, 0.25);
        background: rgba(166, 113, 229, 0.08);
        transform: translateX(4px);
    }

    .goal-item.completed[b-1a1kbaybhw] {
        border-color: rgba(92, 202, 143, 0.14);
        background: rgba(66, 161, 109, 0.07);
    }

.goal-check[b-1a1kbaybhw] {
    display: grid;
    width: 29px;
    height: 29px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(223, 203, 255, 0.25);
    border-radius: 50%;
    color: #effff4;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.goal-item.completed .goal-check[b-1a1kbaybhw] {
    border-color: rgba(112, 224, 158, 0.38);
    background: linear-gradient(145deg, #4aa874, #62c58c);
    box-shadow: 0 0 17px rgba(83, 199, 133, 0.22);
    animation: checkPop-b-1a1kbaybhw 0.35s ease both;
}

.goal-check:hover[b-1a1kbaybhw] {
    transform: scale(1.08);
}

.goal-icon[b-1a1kbaybhw] {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border-radius: 14px;
    font-size: 21px;
}

    .goal-icon.purple[b-1a1kbaybhw] {
        background: rgba(164, 113, 243, 0.18);
    }

    .goal-icon.pink[b-1a1kbaybhw] {
        background: rgba(244, 125, 179, 0.16);
    }

    .goal-icon.blue[b-1a1kbaybhw] {
        background: rgba(100, 171, 239, 0.16);
    }

    .goal-icon.green[b-1a1kbaybhw] {
        background: rgba(82, 193, 132, 0.16);
    }

    .goal-icon.gold[b-1a1kbaybhw] {
        background: rgba(237, 184, 92, 0.17);
    }

.goal-details strong[b-1a1kbaybhw] {
    display: block;
    color: #faf5ff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    transition: color 0.25s ease;
}

.goal-details span[b-1a1kbaybhw] {
    display: block;
    margin-top: 4px;
    color: #a9a0b6;
    font-size: 9px;
}

.goal-item.completed .goal-details strong[b-1a1kbaybhw] {
    color: #b9b0c2;
    text-decoration: line-through;
}

.goal-reward[b-1a1kbaybhw] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #e6c8ff;
    font-size: 9px;
    white-space: nowrap;
}

.goal-item.completed .goal-reward[b-1a1kbaybhw] {
    color: #a5dbba;
}

/* Goals progress */

.goals-progress[b-1a1kbaybhw] {
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.goals-progress-heading[b-1a1kbaybhw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    color: #bfb6ca;
    font-size: 10px;
}

    .goals-progress-heading strong[b-1a1kbaybhw] {
        color: #ead9ff;
        font-size: 10px;
    }

.goals-progress-track[b-1a1kbaybhw] {
    position: relative;
    height: 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(7, 5, 25, 0.48);
}

.goals-progress-fill[b-1a1kbaybhw] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7659df, #b378ed 55%, #ee9fc8);
    box-shadow: 0 0 12px rgba(179, 120, 237, 0.65), 0 0 22px rgba(238, 159, 200, 0.25);
    transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.goals-progress-shine[b-1a1kbaybhw] {
    position: absolute;
    top: 0;
    left: -30%;
    width: 25%;
    height: 100%;
    opacity: 0.75;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent );
    transform: skewX(-20deg);
    animation: progressShine-b-1a1kbaybhw 3s ease-in-out infinite;
}

/* Reminders */

.reminder-bell[b-1a1kbaybhw] {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(242, 197, 125, 0.18);
    border-radius: 14px;
    background: rgba(231, 176, 87, 0.11);
    font-size: 20px;
    animation: bellRing-b-1a1kbaybhw 3.5s ease-in-out infinite;
}

.reminder-list[b-1a1kbaybhw] {
    display: flex;
    margin-top: 18px;
    flex-direction: column;
    gap: 10px;
}

.reminder-item[b-1a1kbaybhw] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.045);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

    .reminder-item:hover[b-1a1kbaybhw] {
        border-color: rgba(198, 161, 248, 0.22);
        transform: translateY(-2px);
    }

.reminder-icon[b-1a1kbaybhw] {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border-radius: 14px;
    font-size: 20px;
}

    .reminder-icon.lavender[b-1a1kbaybhw] {
        background: rgba(165, 116, 239, 0.17);
    }

    .reminder-icon.green[b-1a1kbaybhw] {
        background: rgba(82, 193, 132, 0.16);
    }

    .reminder-icon.pink[b-1a1kbaybhw] {
        background: rgba(244, 125, 179, 0.15);
    }

.reminder-details strong[b-1a1kbaybhw] {
    display: block;
    color: #faf5ff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}

.reminder-details span[b-1a1kbaybhw] {
    display: block;
    margin-top: 4px;
    color: #aaa1b6;
    font-size: 9px;
}

.reminder-time[b-1a1kbaybhw] {
    box-sizing: border-box;
    width: 132px;
    min-width: 132px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(220, 197, 255, 0.15);
    border-radius: 12px;
    outline: none;
    color: #ffffff;
    color-scheme: dark;
    background: rgba(7, 5, 25, 0.42);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

    .reminder-time:focus[b-1a1kbaybhw] {
        border-color: rgba(191, 145, 250, 0.45);
    }

    .reminder-time[b-1a1kbaybhw]::-webkit-datetime-edit {
        padding: 0;
        color: #ffffff;
    }

    .reminder-time[b-1a1kbaybhw]::-webkit-datetime-edit-fields-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .reminder-time[b-1a1kbaybhw]::-webkit-calendar-picker-indicator {
        opacity: 0.85;
        cursor: pointer;
    }

/* Toggle switch */

.toggle-switch[b-1a1kbaybhw] {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex: 0 0 46px;
}

    .toggle-switch input[b-1a1kbaybhw] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.toggle-slider[b-1a1kbaybhw] {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(108, 98, 122, 0.42);
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

    .toggle-slider[b-1a1kbaybhw]::before {
        content: "";
        position: absolute;
        left: 3px;
        bottom: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #e6dfea;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.32);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
    }

.toggle-switch input:checked + .toggle-slider[b-1a1kbaybhw] {
    background: linear-gradient(135deg, #825fdc, #be7eea);
    box-shadow: 0 0 17px rgba(176, 116, 235, 0.25);
}

    .toggle-switch input:checked + .toggle-slider[b-1a1kbaybhw]::before {
        background: white;
        transform: translateX(20px);
    }

/* Encouragement */

.encouragement-card[b-1a1kbaybhw] {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 21px;
    border-color: rgba(236, 156, 196, 0.15);
    border-radius: 24px;
    background: linear-gradient( 135deg, rgba(222, 114, 171, 0.1), rgba(151, 104, 219, 0.09) );
    animation: cardEntrance-b-1a1kbaybhw 0.7s 0.38s ease both;
}

.encouragement-icon[b-1a1kbaybhw] {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border: 1px solid rgba(255, 183, 219, 0.18);
    border-radius: 19px;
    background: rgba(224, 119, 174, 0.13);
    box-shadow: 0 0 25px rgba(226, 121, 175, 0.11);
    font-size: 28px;
    animation: flowerFloat-b-1a1kbaybhw 3s ease-in-out infinite;
}

.encouragement-card h2[b-1a1kbaybhw] {
    margin: 4px 0 5px;
    color: #fff9f4;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.encouragement-card > div:last-child > p:last-child[b-1a1kbaybhw] {
    margin: 0;
    color: #c5bccd;
    font-size: 12px;
    line-height: 1.5;
}

/* Animations */

@keyframes headerEntrance-b-1a1kbaybhw {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardEntrance-b-1a1kbaybhw {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes formEntrance-b-1a1kbaybhw {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ringEntrance-b-1a1kbaybhw {
    from {
        opacity: 0;
        transform: scale(0.65) rotate(-80deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes checkPop-b-1a1kbaybhw {
    0% {
        transform: scale(0.65);
    }

    65% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes progressShine-b-1a1kbaybhw {
    0% {
        left: -30%;
    }

    55%, 100% {
        left: 115%;
    }
}

@keyframes starFloat-b-1a1kbaybhw {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(0) rotate(0deg) scale(0.85);
    }

    50% {
        opacity: 1;
        transform: translateY(-18px) rotate(18deg) scale(1.15);
    }
}

@keyframes glowFloat-b-1a1kbaybhw {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(24px, -25px, 0) scale(1.08);
    }
}

@keyframes summaryGlow-b-1a1kbaybhw {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.14);
    }
}

@keyframes targetPulse-b-1a1kbaybhw {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(175, 118, 255, 0.1);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 28px rgba(175, 118, 255, 0.24);
    }
}

@keyframes bellRing-b-1a1kbaybhw {
    0%, 82%, 100% {
        transform: rotate(0deg);
    }

    86% {
        transform: rotate(-10deg);
    }

    90% {
        transform: rotate(10deg);
    }

    94% {
        transform: rotate(-6deg);
    }

    98% {
        transform: rotate(5deg);
    }
}

@keyframes flowerFloat-b-1a1kbaybhw {
    0%, 100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-5px) rotate(5deg);
    }
}

@keyframes smallStarsDrift-b-1a1kbaybhw {
    from {
        background-position: 27px 41px, 137px 86px, 69px 179px;
    }

    to {
        background-position: 27px 268px, 137px 277px, 69px 462px;
    }
}

@keyframes largeStarsDrift-b-1a1kbaybhw {
    from {
        background-position: 83px 131px, 305px 57px;
    }

    to {
        background-position: 83px 510px, 305px 524px;
    }
}

/* Tablet and mobile */

@media (max-width: 700px) {
    .goals-header[b-1a1kbaybhw] {
        padding: 24px 16px 16px;
    }

    .goals-content[b-1a1kbaybhw] {
        width: min(100% - 24px, 900px);
    }

    .goal-summary-card[b-1a1kbaybhw] {
        grid-template-columns: 1fr;
    }

    .progress-ring[b-1a1kbaybhw] {
        width: 116px;
        height: 116px;
        margin: 0 auto;
    }

    .summary-stats[b-1a1kbaybhw] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

        .summary-stats > div[b-1a1kbaybhw] {
            min-width: 0;
        }

    .new-goal-form[b-1a1kbaybhw] {
        grid-template-columns: auto 1fr auto;
    }

    .new-goal-fields[b-1a1kbaybhw] {
        grid-template-columns: 1fr;
    }

    .cancel-goal-button[b-1a1kbaybhw] {
        grid-column: 3;
        grid-row: 1;
    }

    .save-goal-button[b-1a1kbaybhw] {
        grid-column: 2 / 4;
    }

    .reminder-item[b-1a1kbaybhw] {
        grid-template-columns: auto 1fr auto;
    }

    .reminder-time[b-1a1kbaybhw] {
        grid-column: 2;
        width: 100%;
    }

    .toggle-switch[b-1a1kbaybhw] {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

@media (max-width: 430px) {
    .goals-header[b-1a1kbaybhw] {
        grid-template-columns: 40px 1fr 42px;
        gap: 9px;
    }

        .goals-header h1[b-1a1kbaybhw] {
            font-size: 27px;
        }

    .back-button[b-1a1kbaybhw] {
        width: 39px;
        height: 39px;
    }

    .header-icon[b-1a1kbaybhw] {
        width: 42px;
        height: 42px;
    }

    .goal-summary-card[b-1a1kbaybhw],
    .goals-card[b-1a1kbaybhw],
    .reminders-card[b-1a1kbaybhw] {
        padding: 17px;
        border-radius: 22px;
    }

    .summary-text h2[b-1a1kbaybhw] {
        font-size: 21px;
    }

    .summary-stats[b-1a1kbaybhw] {
        gap: 6px;
    }

        .summary-stats > div[b-1a1kbaybhw] {
            padding: 9px 7px;
        }

        .summary-stats strong[b-1a1kbaybhw] {
            font-size: 18px;
        }

    .section-heading h2[b-1a1kbaybhw] {
        font-size: 20px;
    }

    .add-goal-button[b-1a1kbaybhw] {
        padding: 9px 10px;
    }

    .goal-item[b-1a1kbaybhw] {
        grid-template-columns: auto auto 1fr;
        gap: 9px;
        padding: 11px;
    }

    .goal-icon[b-1a1kbaybhw] {
        width: 40px;
        height: 40px;
    }

    .goal-reward[b-1a1kbaybhw] {
        grid-column: 3;
    }

    .reminder-item[b-1a1kbaybhw] {
        gap: 9px;
        padding: 11px;
    }

    .reminder-icon[b-1a1kbaybhw] {
        width: 40px;
        height: 40px;
    }

    .encouragement-card[b-1a1kbaybhw] {
        padding: 17px;
    }

    .encouragement-icon[b-1a1kbaybhw] {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 24px;
    }

    .encouragement-card h2[b-1a1kbaybhw] {
        font-size: 17px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .goals-page *[b-1a1kbaybhw],
    .goals-page *[b-1a1kbaybhw]::before,
    .goals-page *[b-1a1kbaybhw]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Personalized daily prompt special effects */
.reminder-icon.gold[b-1a1kbaybhw] {
    position: relative;
    color: #ffe5a8;
    background: rgba(237, 184, 92, 0.17);
    box-shadow: 0 0 12px rgba(255, 214, 120, 0.35), 0 0 24px rgba(237, 184, 92, 0.18);
    animation: personalizedPromptPulse-b-1a1kbaybhw 2.4s ease-in-out infinite;
}

    .reminder-icon.gold[b-1a1kbaybhw]::before,
    .reminder-icon.gold[b-1a1kbaybhw]::after {
        position: absolute;
        color: #fff1b8;
        pointer-events: none;
        content: "✦";
        text-shadow: 0 0 8px rgba(255, 226, 145, 0.9);
        animation: personalizedSparkle-b-1a1kbaybhw 2.8s ease-in-out infinite;
    }

    .reminder-icon.gold[b-1a1kbaybhw]::before {
        top: -8px;
        right: -5px;
        font-size: 10px;
    }

    .reminder-icon.gold[b-1a1kbaybhw]::after {
        bottom: -6px;
        left: -4px;
        font-size: 7px;
        animation-delay: 1.2s;
    }

@keyframes personalizedPromptPulse-b-1a1kbaybhw {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(255, 214, 120, 0.30), 0 0 22px rgba(237, 184, 92, 0.15);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 18px rgba(255, 225, 145, 0.55), 0 0 32px rgba(237, 184, 92, 0.28);
    }
}

@keyframes personalizedSparkle-b-1a1kbaybhw {
    0%, 100% {
        opacity: 0.2;
        transform: translateY(3px) scale(0.7) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px) scale(1.15) rotate(90deg);
    }
}

/* Personalized daily diary */
.personalized-prompt-section[b-1a1kbaybhw] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin-top: 24px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 207, 126, 0.28);
    border-radius: 26px;
    background: radial-gradient(circle at top right, rgba(255, 194, 103, 0.16), transparent 42%), linear-gradient( 145deg, rgba(61, 38, 96, 0.92), rgba(26, 19, 57, 0.94) );
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 196, 105, 0.09);
}

    .personalized-prompt-section[b-1a1kbaybhw]::before {
        position: absolute;
        top: -60px;
        right: -40px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 205, 112, 0.12);
        filter: blur(45px);
        pointer-events: none;
        content: "";
    }

.personalized-prompt-heading[b-1a1kbaybhw] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

    .personalized-prompt-heading h2[b-1a1kbaybhw] {
        margin: 3px 0 0;
        color: #fff8e8;
        font-size: 1.55rem;
    }

    .personalized-prompt-heading .eyebrow[b-1a1kbaybhw] {
        margin: 0;
        color: #e2bfff;
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.15em;
    }

.personalized-prompt-question[b-1a1kbaybhw] {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
    color: #fff8e9;
    font-size: 1.03rem;
    line-height: 1.6;
}

.personalized-prompt-answer[b-1a1kbaybhw] {
    position: relative;
    z-index: 1;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 130px;
    padding: 17px 18px;
    resize: vertical;
    color: #ffffff;
    font: inherit;
    line-height: 1.6;
    outline: none;
    border: 1px solid rgba(226, 191, 255, 0.24);
    border-radius: 18px;
    background: rgba(9, 7, 30, 0.52);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.2);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

    .personalized-prompt-answer[b-1a1kbaybhw]::placeholder {
        color: rgba(255, 255, 255, 0.48);
    }

    .personalized-prompt-answer:focus[b-1a1kbaybhw] {
        border-color: rgba(220, 168, 255, 0.72);
        box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(173, 105, 255, 0.12), 0 0 24px rgba(181, 117, 255, 0.18);
        transform: translateY(-1px);
    }

.save-diary-button[b-1a1kbaybhw] {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    padding: 13px 23px;
    color: #ffffff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: linear-gradient(135deg, #8c58e9, #d477c7);
    box-shadow: 0 10px 25px rgba(109, 55, 190, 0.34), 0 0 18px rgba(205, 112, 220, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .save-diary-button:hover:not(:disabled)[b-1a1kbaybhw] {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(109, 55, 190, 0.42), 0 0 26px rgba(222, 132, 229, 0.26);
    }

    .save-diary-button:active:not(:disabled)[b-1a1kbaybhw] {
        transform: scale(0.98);
    }

    .save-diary-button:disabled[b-1a1kbaybhw] {
        opacity: 0.42;
        cursor: not-allowed;
        box-shadow: none;
    }

.diary-saved-message[b-1a1kbaybhw] {
    position: relative;
    z-index: 1;
    margin-top: 15px;
    padding: 12px 15px;
    color: #fff1b8;
    border: 1px solid rgba(255, 218, 132, 0.22);
    border-radius: 13px;
    background: rgba(255, 207, 105, 0.09);
    animation: diarySavedIn-b-1a1kbaybhw 0.45s ease-out;
}

@keyframes diarySavedIn-b-1a1kbaybhw {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 650px) {
    .personalized-prompt-section[b-1a1kbaybhw] {
        padding: 20px;
    }

    .personalized-prompt-heading h2[b-1a1kbaybhw] {
        font-size: 1.28rem;
    }

    .save-diary-button[b-1a1kbaybhw] {
        width: 100%;
    }
}
.diary-writing-area[b-1a1kbaybhw] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 20px;
}

    .diary-writing-area .personalized-prompt-answer[b-1a1kbaybhw] {
        padding-bottom: 38px;
    }

.diary-character-count[b-1a1kbaybhw] {
    position: absolute;
    right: 16px;
    bottom: 13px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.74rem;
    font-weight: 600;
    pointer-events: none;
}

.save-reminders-button[b-1a1kbaybhw] {
    width: 100%;
    margin-top: 18px;
    padding: 13px 18px;
    border: 1px solid rgba(196, 167, 255, 0.45);
    border-radius: 16px;
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.28);
}

.reminder-saved-message[b-1a1kbaybhw] {
    margin: 12px 0 0;
    color: #b8f7d4;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Modern styling for only the 3 summary cards */
.summary-stats > div[b-1a1kbaybhw] {
    position: relative;
    min-width: 105px;
    padding: 18px 14px;
    overflow: hidden;
    border: 1px solid rgba(216, 198, 255, 0.35);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(108, 78, 166, 0.42), rgba(28, 20, 61, 0.78) );
    box-shadow: 0 10px 28px rgba(10, 5, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
}

    .summary-stats > div:hover[b-1a1kbaybhw] {
        transform: translateY(-5px) scale(1.03);
        border-color: rgba(225, 211, 255, 0.75);
        box-shadow: 0 14px 34px rgba(128, 79, 220, 0.36), 0 0 22px rgba(181, 139, 255, 0.22);
    }

    .summary-stats > div[b-1a1kbaybhw]::after {
        content: "";
        position: absolute;
        inset: -80% -40%;
        z-index: -1;
        background: linear-gradient( 115deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62% );
        transform: translateX(-65%) rotate(10deg);
        animation: summary-card-shine-b-1a1kbaybhw 5s ease-in-out infinite;
    }

    .summary-stats > div:nth-child(1)[b-1a1kbaybhw] {
        background: linear-gradient( 145deg, rgba(67, 160, 130, 0.35), rgba(24, 42, 57, 0.85) );
    }

    .summary-stats > div:nth-child(2)[b-1a1kbaybhw] {
        background: linear-gradient( 145deg, rgba(139, 92, 246, 0.4), rgba(39, 25, 75, 0.88) );
    }

    .summary-stats > div:nth-child(3)[b-1a1kbaybhw] {
        background: linear-gradient( 145deg, rgba(230, 166, 73, 0.32), rgba(67, 39, 67, 0.88) );
    }

    .summary-stats > div[b-1a1kbaybhw]::before {
        display: block;
        margin-bottom: 7px;
        font-size: 1.25rem;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    }

    .summary-stats > div:nth-child(1)[b-1a1kbaybhw]::before {
        content: "✓";
        color: #9ff3d4;
    }

    .summary-stats > div:nth-child(2)[b-1a1kbaybhw]::before {
        content: "✦";
        color: #d8c0ff;
    }

    .summary-stats > div:nth-child(3)[b-1a1kbaybhw]::before {
        content: "🔥";
    }

    .summary-stats > div strong[b-1a1kbaybhw] {
        display: block;
        color: #ffffff;
        font-size: 1.75rem;
        font-weight: 800;
        line-height: 1;
        text-shadow: 0 0 14px rgba(216, 191, 255, 0.55);
    }

    .summary-stats > div span[b-1a1kbaybhw] {
        display: block;
        margin-top: 8px;
        color: #eee7ff;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

@keyframes summary-card-shine-b-1a1kbaybhw {
    0%, 55% {
        transform: translateX(-65%) rotate(10deg);
    }

    85%, 100% {
        transform: translateX(65%) rotate(10deg);
    }
}
/* /Components/Pages/HelpSupport.razor.rz.scp.css */
.help-page[b-f4rxbve4l3] {
    position: relative;
    min-height: 100vh;
    padding: 44px 20px 100px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(circle at 12% 10%, rgba(137, 78, 255, 0.24), transparent 31%), radial-gradient(circle at 88% 35%, rgba(224, 151, 255, 0.14), transparent 32%), radial-gradient(circle at 50% 100%, rgba(76, 39, 158, 0.28), transparent 45%), linear-gradient(160deg, #080516 0%, #110924 50%, #080517 100%);
    isolation: isolate;
}

.help-content[b-f4rxbve4l3] {
    position: relative;
    z-index: 2;
    width: min(1020px, 100%);
    margin: 0 auto;
}

/* Header */

.help-header[b-f4rxbve4l3] {
    max-width: 670px;
    margin: 0 auto 46px;
    text-align: center;
    animation: helpHeaderIn-b-f4rxbve4l3 0.75s ease-out both;
}

.help-icon[b-f4rxbve4l3] {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    place-items: center;
    color: #f1dcff;
    font-size: 32px;
    font-weight: 800;
    border: 1px solid rgba(211, 178, 255, 0.38);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(174, 107, 255, 0.24), rgba(255, 255, 255, 0.05));
    box-shadow: 0 0 28px rgba(166, 92, 255, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: helpIconFloat-b-f4rxbve4l3 3.2s ease-in-out infinite;
}

.help-label[b-f4rxbve4l3] {
    margin: 0 0 10px;
    color: #c9aaff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.help-header h1[b-f4rxbve4l3] {
    margin: 0;
    color: #ffffff;
    font-size: clamp(36px, 6vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.5px;
    text-shadow: 0 0 30px rgba(177, 123, 255, 0.28);
}

.help-description[b-f4rxbve4l3] {
    margin: 17px auto 0;
    color: #c2bad4;
    font-size: 16px;
    line-height: 1.7;
}

/* Support cards */

.support-actions[b-f4rxbve4l3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}

.support-card[b-f4rxbve4l3] {
    position: relative;
    display: flex;
    min-height: 265px;
    padding: 28px 24px 24px;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(203, 175, 255, 0.2);
    border-radius: 25px;
    background: radial-gradient(circle at top right, rgba(164, 91, 255, 0.13), transparent 38%), linear-gradient(155deg, rgba(35, 23, 70, 0.9), rgba(15, 9, 35, 0.95));
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    animation: supportCardIn-b-f4rxbve4l3 0.7s ease-out both;
}

    .support-card:nth-child(1)[b-f4rxbve4l3] {
        animation-delay: 0.08s;
    }

    .support-card:nth-child(2)[b-f4rxbve4l3] {
        animation-delay: 0.16s;
    }

    .support-card:nth-child(3)[b-f4rxbve4l3] {
        animation-delay: 0.24s;
    }

    .support-card[b-f4rxbve4l3]::before {
        position: absolute;
        top: -80px;
        right: -80px;
        width: 170px;
        height: 170px;
        content: "";
        pointer-events: none;
        border-radius: 50%;
        background: rgba(164, 93, 255, 0.16);
        filter: blur(38px);
        transition: transform 0.35s ease;
    }

    .support-card:hover[b-f4rxbve4l3] {
        border-color: rgba(205, 159, 255, 0.55);
        box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(149, 82, 255, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.09);
        transform: translateY(-8px);
    }

        .support-card:hover[b-f4rxbve4l3]::before {
            transform: scale(1.3);
        }

.card-icon[b-f4rxbve4l3] {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    place-items: center;
    color: #ead9ff;
    font-size: 25px;
    border: 1px solid rgba(210, 176, 255, 0.27);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(159, 92, 255, 0.23), rgba(255, 255, 255, 0.04));
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.35s ease;
}

.support-card:hover .card-icon[b-f4rxbve4l3] {
    transform: translateY(-3px) rotate(-4deg) scale(1.07);
}

.support-card h2[b-f4rxbve4l3] {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
}

.support-card p[b-f4rxbve4l3] {
    margin: 0 0 23px;
    color: #aaa3bc;
    font-size: 13px;
    line-height: 1.6;
}

.support-button[b-f4rxbve4l3] {
    display: flex;
    width: 100%;
    padding: 13px 15px;
    margin-top: auto;
    align-items: center;
    justify-content: space-between;
    color: #eee6fa;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid rgba(197, 154, 255, 0.34);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(115, 65, 199, 0.34), rgba(56, 31, 108, 0.5));
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .support-button span[b-f4rxbve4l3] {
        font-size: 18px;
        transition: transform 0.25s ease;
    }

    .support-button:hover[b-f4rxbve4l3] {
        border-color: rgba(224, 190, 255, 0.72);
        background: linear-gradient(135deg, #8050df, #ae66ef);
        box-shadow: 0 10px 24px rgba(133, 65, 220, 0.3);
        transform: translateY(-2px);
    }

        .support-button:hover span[b-f4rxbve4l3] {
            transform: translateX(4px);
        }

/* FAQ section */

.faq-section[b-f4rxbve4l3] {
    padding: 32px;
    border: 1px solid rgba(202, 173, 255, 0.19);
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(30, 20, 61, 0.88), rgba(13, 8, 31, 0.94));
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    animation: faqSectionIn-b-f4rxbve4l3 0.75s 0.25s ease-out both;
}

.section-heading[b-f4rxbve4l3] {
    display: flex;
    gap: 16px;
    margin-bottom: 27px;
    align-items: center;
}

.section-icon[b-f4rxbve4l3] {
    display: grid;
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    place-items: center;
    color: #e4caff;
    font-size: 21px;
    border: 1px solid rgba(205, 166, 255, 0.28);
    border-radius: 15px;
    background: rgba(144, 76, 229, 0.16);
    box-shadow: 0 0 20px rgba(158, 89, 255, 0.12);
}

.section-heading p[b-f4rxbve4l3] {
    margin: 0 0 5px;
    color: #b58eea;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.section-heading h2[b-f4rxbve4l3] {
    margin: 0;
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
}

.faq-list[b-f4rxbve4l3] {
    display: grid;
    gap: 12px;
}

.faq-item[b-f4rxbve4l3] {
    overflow: hidden;
    border: 1px solid rgba(201, 171, 245, 0.13);
    border-radius: 17px;
    background: rgba(11, 7, 28, 0.45);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

    .faq-item:hover[b-f4rxbve4l3] {
        border-color: rgba(202, 161, 255, 0.34);
    }

    .faq-item.open[b-f4rxbve4l3] {
        border-color: rgba(203, 159, 255, 0.42);
        background: rgba(68, 38, 115, 0.24);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    }

.faq-question[b-f4rxbve4l3] {
    display: flex;
    width: 100%;
    gap: 18px;
    padding: 19px 20px;
    align-items: center;
    justify-content: space-between;
    color: #e9e3f3;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.faq-toggle[b-f4rxbve4l3] {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    color: #d9b9ff;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid rgba(199, 151, 255, 0.26);
    border-radius: 9px;
    background: rgba(139, 72, 225, 0.13);
    transition: transform 0.3s ease, background 0.3s ease;
}

.faq-item.open .faq-toggle[b-f4rxbve4l3] {
    background: rgba(161, 90, 247, 0.26);
    transform: rotate(180deg);
}

.faq-answer[b-f4rxbve4l3] {
    padding: 0 20px 20px;
    animation: faqAnswerIn-b-f4rxbve4l3 0.3s ease-out both;
}

    .faq-answer p[b-f4rxbve4l3] {
        padding-top: 16px;
        margin: 0;
        color: #bbb2ca;
        font-size: 13px;
        line-height: 1.75;
        border-top: 1px solid rgba(204, 171, 255, 0.12);
    }

/* Support form */

.support-form-section[b-f4rxbve4l3] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    width: min(92vw, 760px);
    max-height: 86vh;
    overflow-y: auto;
    transform: translate(-50%, -50%);
    max-width: 760px;
    padding: 30px;
    border: 1px solid rgba(205, 166, 255, 0.3);
    border-radius: 27px;
    background: radial-gradient(circle at top right, rgba(160, 88, 255, 0.16), transparent 35%), linear-gradient(155deg, rgba(36, 23, 72, 0.96), rgba(14, 8, 33, 0.98));
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(145, 80, 244, 0.1);
   
}

.form-heading[b-f4rxbve4l3] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
}

.form-label[b-f4rxbve4l3] {
    margin: 0 0 7px;
    color: #bd97f0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.form-heading h2[b-f4rxbve4l3] {
    margin: 0;
    color: #ffffff;
    font-size: 27px;
}

.close-form-button[b-f4rxbve4l3] {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: #d8cde4;
    font: inherit;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid rgba(208, 176, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

    .close-form-button:hover[b-f4rxbve4l3] {
        color: #ffffff;
        background: rgba(174, 99, 255, 0.19);
        transform: rotate(5deg);
    }

.form-description[b-f4rxbve4l3] {
    margin: 14px 0 25px;
    color: #ada5bd;
    font-size: 13px;
    line-height: 1.65;
}

.contact-information[b-f4rxbve4l3] {
    padding: 16px 18px;
    margin: 0 0 24px;
    color: #c9bfd8;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid rgba(205, 166, 255, 0.22);
    border-radius: 16px;
    background: linear-gradient( 135deg, rgba(126, 70, 205, 0.16), rgba(27, 16, 55, 0.48) );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

    .contact-information p[b-f4rxbve4l3] {
        margin: 0 0 8px;
    }

        .contact-information p:last-child[b-f4rxbve4l3] {
            margin-bottom: 0;
            padding-top: 8px;
            color: #aaa0ba;
            border-top: 1px solid rgba(205, 166, 255, 0.12);
        }

    .contact-information strong[b-f4rxbve4l3] {
        color: #eadcff;
        font-weight: 800;
    }

.support-form[b-f4rxbve4l3] {
    display: grid;
    gap: 18px;
}

    .support-form label[b-f4rxbve4l3] {
        display: grid;
        gap: 8px;
        color: #d4cbdf;
        font-size: 12px;
        font-weight: 700;
    }

    .support-form input[b-f4rxbve4l3],
    .support-form textarea[b-f4rxbve4l3] {
        width: 100%;
        padding: 14px 15px;
        color: #ffffff;
        font: inherit;
        font-size: 13px;
        outline: none;
        border: 1px solid rgba(201, 170, 246, 0.2);
        border-radius: 14px;
        background: rgba(8, 5, 23, 0.62);
        box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
        transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    .support-form textarea[b-f4rxbve4l3] {
        min-height: 145px;
        resize: vertical;
    }

        .support-form input[b-f4rxbve4l3]::placeholder,
        .support-form textarea[b-f4rxbve4l3]::placeholder {
            color: #746d82;
        }

        .support-form input:focus[b-f4rxbve4l3],
        .support-form textarea:focus[b-f4rxbve4l3] {
            border-color: rgba(190, 134, 255, 0.68);
            background: rgba(18, 10, 40, 0.78);
            box-shadow: 0 0 0 3px rgba(157, 91, 238, 0.12), 0 0 22px rgba(142, 77, 231, 0.1);
        }

.form-error[b-f4rxbve4l3] {
    padding: 12px 14px;
    margin: 0;
    color: #ffd3dc;
    font-size: 12px;
    border: 1px solid rgba(255, 126, 151, 0.24);
    border-radius: 12px;
    background: rgba(155, 43, 67, 0.16);
}

.send-message-button[b-f4rxbve4l3] {
    display: flex;
    width: 100%;
    gap: 9px;
    padding: 15px 18px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid rgba(225, 188, 255, 0.5);
    border-radius: 15px;
    background: linear-gradient(135deg, #7949dc, #b466eb);
    box-shadow: 0 12px 28px rgba(135, 66, 220, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .send-message-button:hover[b-f4rxbve4l3] {
        box-shadow: 0 16px 35px rgba(150, 75, 230, 0.42), 0 0 24px rgba(178, 103, 255, 0.17);
        transform: translateY(-2px);
    }

/* Success message */

.success-message[b-f4rxbve4l3] {
    display: flex;
    max-width: 580px;
    gap: 14px;
    padding: 17px 20px;
    margin: 30px auto 0;
    align-items: center;
    border: 1px solid rgba(169, 255, 210, 0.25);
    border-radius: 18px;
    background: rgba(28, 91, 72, 0.23);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.22);
    animation: successMessageIn-b-f4rxbve4l3 0.45s ease-out both;
}

.success-check[b-f4rxbve4l3] {
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    place-items: center;
    color: #e0fff0;
    font-weight: 900;
    border-radius: 50%;
    background: linear-gradient(135deg, #3fb888, #65d6aa);
    box-shadow: 0 0 20px rgba(86, 213, 164, 0.26);
}

.success-message strong[b-f4rxbve4l3] {
    color: #ffffff;
    font-size: 14px;
}

.success-message p[b-f4rxbve4l3] {
    margin: 4px 0 0;
    color: #afc1ba;
    font-size: 11px;
}

.help-footer[b-f4rxbve4l3] {
    display: flex;
    gap: 10px;
    margin: 36px auto 0;
    align-items: center;
    justify-content: center;
    color: #7f788c;
    font-size: 11px;
    text-align: center;
}

.footer-dot[b-f4rxbve4l3] {
    color: #a57bd8;
}

/* Animated stars */

.help-stars[b-f4rxbve4l3] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.help-star[b-f4rxbve4l3] {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 7px rgba(213, 184, 255, 0.9);
    animation: helpStarTwinkle-b-f4rxbve4l3 3s ease-in-out infinite;
}

.help-star-1[b-f4rxbve4l3] {
    top: 5%;
    left: 8%;
    animation-delay: 0.2s;
}

.help-star-2[b-f4rxbve4l3] {
    top: 11%;
    left: 27%;
    width: 2px;
    height: 2px;
    animation-delay: 1.1s;
}

.help-star-3[b-f4rxbve4l3] {
    top: 8%;
    right: 12%;
    width: 4px;
    height: 4px;
    animation-delay: 1.8s;
}

.help-star-4[b-f4rxbve4l3] {
    top: 23%;
    left: 4%;
    animation-delay: 2.3s;
}

.help-star-5[b-f4rxbve4l3] {
    top: 29%;
    right: 6%;
    width: 2px;
    height: 2px;
    animation-delay: 0.7s;
}

.help-star-6[b-f4rxbve4l3] {
    top: 39%;
    left: 13%;
    width: 4px;
    height: 4px;
    animation-delay: 1.4s;
}

.help-star-7[b-f4rxbve4l3] {
    top: 45%;
    right: 10%;
    animation-delay: 2.1s;
}

.help-star-8[b-f4rxbve4l3] {
    top: 56%;
    left: 5%;
    width: 2px;
    height: 2px;
    animation-delay: 0.4s;
}

.help-star-9[b-f4rxbve4l3] {
    top: 62%;
    right: 17%;
    width: 4px;
    height: 4px;
    animation-delay: 1.7s;
}

.help-star-10[b-f4rxbve4l3] {
    top: 71%;
    left: 31%;
    animation-delay: 2.5s;
}

.help-star-11[b-f4rxbve4l3] {
    top: 78%;
    right: 7%;
    width: 2px;
    height: 2px;
    animation-delay: 0.9s;
}

.help-star-12[b-f4rxbve4l3] {
    top: 87%;
    left: 12%;
    animation-delay: 2.8s;
}

.help-star-13[b-f4rxbve4l3] {
    top: 16%;
    left: 43%;
    width: 2px;
    height: 2px;
    animation-delay: 1.3s;
}

.help-star-14[b-f4rxbve4l3] {
    top: 34%;
    right: 31%;
    animation-delay: 2.6s;
}

.help-star-15[b-f4rxbve4l3] {
    top: 51%;
    left: 38%;
    width: 4px;
    height: 4px;
    animation-delay: 0.5s;
}

.help-star-16[b-f4rxbve4l3] {
    top: 68%;
    right: 39%;
    width: 2px;
    height: 2px;
    animation-delay: 1.9s;
}

.help-star-17[b-f4rxbve4l3] {
    top: 83%;
    left: 56%;
    animation-delay: 2.9s;
}

.help-star-18[b-f4rxbve4l3] {
    top: 94%;
    right: 25%;
    width: 4px;
    height: 4px;
    animation-delay: 0.8s;
}

/* Animations */

@keyframes helpHeaderIn-b-f4rxbve4l3 {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes supportCardIn-b-f4rxbve4l3 {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes faqSectionIn-b-f4rxbve4l3 {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes supportFormIn-b-f4rxbve4l3 {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes successMessageIn-b-f4rxbve4l3 {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes faqAnswerIn-b-f4rxbve4l3 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes helpIconFloat-b-f4rxbve4l3 {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-7px) rotate(2deg);
    }
}

@keyframes helpStarTwinkle-b-f4rxbve4l3 {
    0%, 100% {
        opacity: 0.2;
        transform: scale(0.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* Tablet */

@media (max-width: 850px) {
    .support-actions[b-f4rxbve4l3] {
        grid-template-columns: 1fr;
    }

    .support-card[b-f4rxbve4l3] {
        min-height: auto;
    }
}

/* Mobile */

@media (max-width: 620px) {
    .help-page[b-f4rxbve4l3] {
        padding: 32px 14px 100px;
    }

    .help-header[b-f4rxbve4l3] {
        margin-bottom: 35px;
    }

        .help-header h1[b-f4rxbve4l3] {
            font-size: 38px;
        }

    .help-description[b-f4rxbve4l3] {
        font-size: 14px;
    }

    .support-actions[b-f4rxbve4l3] {
        gap: 18px;
        margin-bottom: 32px;
    }

    .support-card[b-f4rxbve4l3] {
        padding: 24px 20px 21px;
    }

        .support-card:hover[b-f4rxbve4l3] {
            transform: translateY(-4px);
        }

    .faq-section[b-f4rxbve4l3] {
        padding: 24px 17px;
        border-radius: 23px;
    }

    .section-heading h2[b-f4rxbve4l3] {
        font-size: 21px;
    }

    .faq-question[b-f4rxbve4l3] {
        padding: 17px 15px;
        font-size: 13px;
    }

    .faq-answer[b-f4rxbve4l3] {
        padding: 0 15px 17px;
    }

    .support-form-section[b-f4rxbve4l3] {
        padding: 24px 18px;
    }

    .form-heading h2[b-f4rxbve4l3] {
        font-size: 23px;
    }

    .help-footer[b-f4rxbve4l3] {
        flex-direction: column;
        gap: 4px;
    }

    .footer-dot[b-f4rxbve4l3] {
        display: none;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .help-header[b-f4rxbve4l3],
    .help-icon[b-f4rxbve4l3],
    .support-card[b-f4rxbve4l3],
    .faq-section[b-f4rxbve4l3],
    .help-star[b-f4rxbve4l3],
    .support-form-section[b-f4rxbve4l3],
    .success-message[b-f4rxbve4l3],
    .faq-answer[b-f4rxbve4l3] {
        animation: none;
    }

    .support-card[b-f4rxbve4l3],
    .card-icon[b-f4rxbve4l3],
    .support-button[b-f4rxbve4l3],
    .faq-item[b-f4rxbve4l3],
    .faq-toggle[b-f4rxbve4l3],
    .send-message-button[b-f4rxbve4l3] {
        transition-duration: 0.01ms;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.mindset-page[b-4zoxlah1kw] {
    --navy: #080d1c;
    --card: rgba(22, 27, 53, 0.88);
    --purple: #8b5cf6;
    --lavender: #c4b5fd;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 42px 24px 60px;
    margin: 0;
    color: white;
    font-family: "Segoe UI", sans-serif;
    background: radial-gradient(circle at 10% 5%, #312166 0, transparent 34%), radial-gradient(circle at 90% 35%, #123e4c 0, transparent 30%), linear-gradient(155deg, #080d1c 0%, #0b1020 55%, #10152c 100%);
}

..floating-stars[b-4zoxlah1kw] {
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh;
    margin: 0 !important;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}


.home-shell[b-4zoxlah1kw] {
    width: min(100%, 720px);
    margin: auto;
    position: relative;
    z-index: 2;
    display: grid;
    gap: 22px;
}

.ambient[b-4zoxlah1kw] {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    pointer-events: none;
    animation: ambientMove-b-4zoxlah1kw 8s ease-in-out infinite alternate;
}

.ambient-one[b-4zoxlah1kw] {
    top: -100px;
    left: -80px;
    background: #8b5cf6;
}

.ambient-two[b-4zoxlah1kw] {
    right: -120px;
    bottom: 5%;
    background: #22d3ee;
    animation-delay: -4s;
}

.home-header[b-4zoxlah1kw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.eyebrow[b-4zoxlah1kw],
.section-label[b-4zoxlah1kw] {
    margin: 0 0 7px;
    color: var(--lavender);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.home-header h1[b-4zoxlah1kw] {
    margin: 0;
    font-size: clamp(30px, 6vw, 42px);
    line-height: 1.05;
}

.subtitle[b-4zoxlah1kw] {
    margin: 8px 0 0;
    color: #b8b4d8;
}

.plant-badge[b-4zoxlah1kw] {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 1px solid #8069e8;
    border-radius: 50%;
    color: white;
    font-size: 27px;
    cursor: pointer;
    background: linear-gradient(145deg, #2d2759, #17152f);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.35);
    transition: transform 180ms ease, box-shadow 180ms ease;
    animation: plantFloat-b-4zoxlah1kw 3s ease-in-out infinite;
}

    .plant-badge:hover[b-4zoxlah1kw] {
        transform: translateY(-4px) scale(1.08);
        box-shadow: 0 0 42px rgba(139, 92, 246, 0.7);
    }

.quote-card[b-4zoxlah1kw] {
    position: relative;
    overflow: hidden;
    padding: 25px;
    border: 1px solid rgba(167, 139, 250, 0.65);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(36, 31, 71, 0.96), rgba(18, 23, 48, 0.96));
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.08);
}

    .quote-card h2[b-4zoxlah1kw] {
        position: relative;
        margin: 0;
        max-width: 620px;
        font-size: clamp(22px, 4vw, 30px);
        line-height: 1.28;
    }

.quote-message[b-4zoxlah1kw] {
    position: relative;
    margin: 13px 0 0;
    color: #b8b4d8;
}

.quote-glow[b-4zoxlah1kw] {
    position: absolute;
    width: 180px;
    height: 180px;
    top: -90px;
    right: -40px;
    border-radius: 50%;
    background: #8b5cf6;
    filter: blur(55px);
    opacity: 0.28;
}

.stats-grid[b-4zoxlah1kw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat-card[b-4zoxlah1kw] {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 17px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    transition: transform 180ms ease, border-color 180ms ease;
}

    .stat-card:hover[b-4zoxlah1kw] {
        transform: translateY(-5px);
        border-color: rgba(167, 139, 250, 0.7);
    }

.stat-icon[b-4zoxlah1kw] {
    font-size: 25px;
}

.stat-card strong[b-4zoxlah1kw] {
    font-size: 17px;
}

.stat-card small[b-4zoxlah1kw] {
    color: #9e99bc;
}

.journey-section[b-4zoxlah1kw],
.mood-section[b-4zoxlah1kw] {
    display: grid;
    gap: 13px;
}

    .journey-section h2[b-4zoxlah1kw],
    .mood-section h2[b-4zoxlah1kw] {
        margin: -4px 0 2px;
        font-size: 22px;
    }

.action-button[b-4zoxlah1kw] {
    --glow-rgb: 139, 92, 246;
    --button-surface: #0b0e1a;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-height: 72px;
    padding: 14px 18px;
    overflow: visible;
    border: 0;
    border-radius: 21px;
    color: white;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.28);
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 600ms ease;
}

    .action-button[b-4zoxlah1kw]::before {
        content: "";
        position: absolute;
        z-index: -2;
        inset: -2px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        background: conic-gradient( from var(--orbit-angle), transparent 0deg, transparent 205deg, rgba(var(--glow-rgb), 0.12) 235deg, rgba(var(--glow-rgb), 1) 295deg, transparent 345deg );
        filter: drop-shadow(0 0 9px rgba(var(--glow-rgb), 0.9)) drop-shadow(0 0 22px rgba(var(--glow-rgb), 0.5));
        transition: opacity 700ms ease;
        animation: orbitGlow-b-4zoxlah1kw 5.5s linear infinite;
    }

    .action-button:hover[b-4zoxlah1kw]::before {
        opacity: 1;
    }
    .action-button > .inside-glow[b-4zoxlah1kw] {
        position: absolute;
        z-index: 0;
        inset: 2px;
        border-radius: 19px;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient( 190px circle at var(--mouse-x) var(--mouse-y), rgba(var(--glow-rgb), 0.48) 0%, rgba(var(--glow-rgb), 0.20) 35%, transparent 72% );
        transition: opacity 800ms ease;
    }

    .action-button:hover > .inside-glow[b-4zoxlah1kw] {
        opacity: 1;
    }

    .action-button > span:not(.inside-glow)[b-4zoxlah1kw] {
        position: relative;
        z-index: 2;
    }


.action-button[b-4zoxlah1kw]::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: 20px;
    pointer-events: none;
    background: linear-gradient( 120deg, rgba(var(--glow-rgb), 0.08), transparent 42% ), var(--button-surface);
}

    .action-button:hover[b-4zoxlah1kw] {
        transform: translateY(-3px) scale(1.006);
        box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42), 0 0 34px rgba(var(--glow-rgb), 0.28);
    }

    .action-button:active[b-4zoxlah1kw] {
        transform: translateY(-1px) scale(0.98);
    }

    .action-button > span:first-child[b-4zoxlah1kw] {
        font-size: 25px;
    }

    .action-button > span[b-4zoxlah1kw] {
        position: relative;
        z-index: 1;
    }

    .action-button strong[b-4zoxlah1kw],
    .action-button small[b-4zoxlah1kw] {
        display: block;
    }

    .action-button strong[b-4zoxlah1kw] {
        font-size: 16px;
    }

    .action-button small[b-4zoxlah1kw] {
        margin-top: 3px;
        color: rgba(255, 255, 255, 0.76);
    }

.button-arrow[b-4zoxlah1kw] {
    font-size: 24px;
    transition: transform 180ms ease;
}

.action-button:hover .button-arrow[b-4zoxlah1kw] {
    transform: translateX(5px);
}

.farm-action[b-4zoxlah1kw] {
    --glow-rgb: 52, 211, 153;
    --button-surface: #081713;
}

.mood-grid[b-4zoxlah1kw] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.mood-button[b-4zoxlah1kw] {
    min-height: 60px;
    border: 1px solid transparent;
    border-radius: 18px;
    font-size: 25px;
    cursor: pointer;
    background: rgba(23, 27, 53, 0.94);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .mood-button:hover[b-4zoxlah1kw] {
        transform: translateY(-6px) scale(1.08);
        border-color: #a78bfa;
        background: #29234f;
        box-shadow: 0 12px 26px rgba(139, 92, 246, 0.3);
    }

    .mood-button:active[b-4zoxlah1kw] {
        transform: scale(0.93);
    }

    .mood-button.selected[b-4zoxlah1kw] {
        border-color: #c4b5fd;
        background: linear-gradient(145deg, #8b5cf6, #5b35c8);
        box-shadow: 0 0 28px rgba(139, 92, 246, 0.62);
        animation: selectedMood-b-4zoxlah1kw 350ms ease-out;
    }

    .mood-button:disabled[b-4zoxlah1kw],
    .mood-button:disabled:hover[b-4zoxlah1kw] {
        cursor: not-allowed;
        opacity: 0.52;
        transform: none;
        border-color: transparent;
        background: rgba(23, 27, 53, 0.76);
        box-shadow: none;
    }

.mood-saved[b-4zoxlah1kw] {
    padding: 13px 16px;
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 16px;
    color: #d1fae5;
    background: rgba(20, 83, 68, 0.46);
    animation: savedEntrance-b-4zoxlah1kw 350ms ease-out;
}

.mood-status[b-4zoxlah1kw] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 16px;
    color: #ddd6fe;
    background: rgba(46, 38, 86, 0.48);
    animation: savedEntrance-b-4zoxlah1kw 350ms ease-out;
}

    .mood-status > span[b-4zoxlah1kw] {
        display: grid;
        flex: 0 0 31px;
        height: 31px;
        place-items: center;
        border-radius: 10px;
        background: rgba(139, 92, 246, 0.22);
    }

    .mood-status strong[b-4zoxlah1kw] {
        display: block;
        margin-bottom: 4px;
    }

    .mood-status a[b-4zoxlah1kw] {
        color: #d8c8ff;
        font-weight: 800;
        text-decoration: none;
    }

        .mood-status a:hover[b-4zoxlah1kw] {
            color: #ffffff;
            text-decoration: underline;
        }

.mood-loading[b-4zoxlah1kw],
.mood-saving[b-4zoxlah1kw] {
    color: #ded7f5;
}

.mood-error[b-4zoxlah1kw] {
    color: #ffe4e6;
    border-color: rgba(251, 113, 133, 0.38);
    background: rgba(127, 29, 29, 0.34);
}

    .mood-error > span[b-4zoxlah1kw] {
        color: #fecdd3;
        background: rgba(225, 29, 72, 0.2);
        font-weight: 900;
    }
@property --orbit-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes orbitGlow-b-4zoxlah1kw {
    from {
        --orbit-angle: 0deg;
    }

    to {
        --orbit-angle: 360deg;
    }
}
@keyframes travellingGlow-b-4zoxlah1kw {
    0%, 100% {
        left: -8%;
        opacity: 0.45;
    }

    50% {
        left: 72%;
        opacity: 1;
    }
}

@keyframes plantFloat-b-4zoxlah1kw {
    0%, 100% {
        translate: 0 0;
        rotate: -3deg;
    }

    50% {
        translate: 0 -5px;
        rotate: 4deg;
    }
}

@keyframes ambientMove-b-4zoxlah1kw {
    from {
        transform: translate3d(-20px, -10px, 0) scale(0.9);
    }

    to {
        transform: translate3d(35px, 30px, 0) scale(1.15);
    }
}

@keyframes selectedMood-b-4zoxlah1kw {
    0% {
        transform: scale(0.8);
    }

    65% {
        transform: scale(1.14);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes savedEntrance-b-4zoxlah1kw {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .mindset-page[b-4zoxlah1kw] {
        margin: 0;
        padding: 32px 18px 48px;
    }

    .stats-grid[b-4zoxlah1kw] {
        gap: 8px;
    }

    .stat-card[b-4zoxlah1kw] {
        padding: 14px 6px;
    }

    .mood-grid[b-4zoxlah1kw] {
        gap: 6px;
    }

    .mood-button[b-4zoxlah1kw] {
        min-height: 54px;
        padding: 4px;
        font-size: 22px;
    }
}

.mood-section[b-4zoxlah1kw] {
    position: relative;
    z-index: 20;
    margin-top: 32px;
    margin-bottom: 170px;
}

.mood-grid[b-4zoxlah1kw] {
    position: relative;
    z-index: 21;
}
/* /Components/Pages/Inventory.razor.rz.scp.css */
.inventory-item[b-m8kroum425] {
    position: relative;
    overflow: hidden;
    animation: inventoryCardEnter-b-m8kroum425 0.55s ease both;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .inventory-item:hover[b-m8kroum425] {
        transform: translateY(-7px) scale(1.025);
    }

.item-glow[b-m8kroum425] {
    position: absolute;
    inset: -40%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient( circle, rgba(190, 130, 255, 0.3), transparent 65% );
    transition: opacity 0.35s ease;
}

.inventory-item:hover .item-glow[b-m8kroum425] {
    opacity: 1;
    animation: itemGlowPulse-b-m8kroum425 2s ease-in-out infinite;
}

/* Rarity effects */
.inventory-item.common[b-m8kroum425] {
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.07);
}

.inventory-item.uncommon[b-m8kroum425] {
    box-shadow: 0 8px 28px rgba(90, 255, 150, 0.16);
}

.inventory-item.rare[b-m8kroum425] {
    box-shadow: 0 8px 30px rgba(75, 150, 255, 0.22);
}

.inventory-item.epic[b-m8kroum425] {
    box-shadow: 0 8px 34px rgba(190, 90, 255, 0.28);
}

.inventory-item.legendary[b-m8kroum425] {
    box-shadow: 0 8px 38px rgba(255, 190, 70, 0.38);
    animation: inventoryCardEnter-b-m8kroum425 0.55s ease both, legendaryPulse-b-m8kroum425 2.4s ease-in-out infinite;
}

    /* Moving shine on Epic and Legendary items */
    .inventory-item.epic[b-m8kroum425]::before,
    .inventory-item.legendary[b-m8kroum425]::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: -60%;
        left: -80%;
        width: 45%;
        height: 220%;
        pointer-events: none;
        transform: rotate(25deg);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.42), transparent );
        animation: rarityShine-b-m8kroum425 3.6s ease-in-out infinite;
    }

    /* Sparkle */
    .inventory-item.epic[b-m8kroum425]::after,
    .inventory-item.legendary[b-m8kroum425]::after {
        content: "✦";
        position: absolute;
        z-index: 3;
        top: 10px;
        right: 12px;
        color: #fff1a8;
        text-shadow: 0 0 8px #ffffff, 0 0 15px #d68cff;
        pointer-events: none;
        animation: raritySparkle-b-m8kroum425 1.8s ease-in-out infinite;
    }

@keyframes inventoryCardEnter-b-m8kroum425 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes itemGlowPulse-b-m8kroum425 {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.35;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.75;
    }
}

@keyframes rarityShine-b-m8kroum425 {
    0%, 35% {
        left: -80%;
    }

    70%, 100% {
        left: 145%;
    }
}

@keyframes raritySparkle-b-m8kroum425 {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.75) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.25) rotate(90deg);
    }
}

@keyframes legendaryPulse-b-m8kroum425 {
    0%, 100% {
        box-shadow: 0 8px 30px rgba(255, 190, 70, 0.25);
    }

    50% {
        box-shadow: 0 10px 42px rgba(255, 190, 70, 0.55), 0 0 20px rgba(255, 120, 230, 0.25);
    }
}
/* /Components/Pages/Journal.razor.rz.scp.css */
.journal-page[b-g4d0jzl8jn] {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    color: #f8f6ff;
    background: radial-gradient(circle at 8% 10%, rgba(111, 64, 200, 0.36), transparent 31%), radial-gradient(circle at 91% 38%, rgba(17, 123, 131, 0.25), transparent 34%), linear-gradient(145deg, #090d20 0%, #0c1127 55%, #071a24 100%);
}

.journal-shell[b-g4d0jzl8jn] {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
    padding: 58px 0 88px;
}

.journal-glow[b-g4d0jzl8jn] {
    position: absolute;
    z-index: 0;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.22;
    animation: floatingGlow-b-g4d0jzl8jn 10s ease-in-out infinite alternate;
}

.glow-left[b-g4d0jzl8jn] {
    top: 10%;
    left: -220px;
    background: #7748d1;
}

.glow-right[b-g4d0jzl8jn] {
    top: 50%;
    right: -220px;
    background: #118a91;
    animation-delay: -5s;
}

.journal-header[b-g4d0jzl8jn] {
    max-width: 780px;
    margin-bottom: 35px;
    animation: riseIn-b-g4d0jzl8jn 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.eyebrow[b-g4d0jzl8jn],
.today-label[b-g4d0jzl8jn] {
    color: #cbb7ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.17em;
}

.journal-header h1[b-g4d0jzl8jn] {
    margin: 10px 0 16px;
    font-size: clamp(37px, 5vw, 57px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-shadow: 0 0 35px rgba(164, 123, 255, 0.2);
}

.journal-header > p:last-child[b-g4d0jzl8jn] {
    max-width: 700px;
    margin: 0;
    color: #b8b4cc;
    font-size: 18px;
    line-height: 1.65;
}

.journal-layout[b-g4d0jzl8jn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 345px;
    align-items: start;
    gap: 22px;
}

.editor-panel[b-g4d0jzl8jn],
.reward-card[b-g4d0jzl8jn],
.privacy-card[b-g4d0jzl8jn],
.recent-card[b-g4d0jzl8jn] {
    border: 1px solid rgba(154, 137, 211, 0.23);
    background: linear-gradient( 145deg, rgba(25, 28, 61, 0.93), rgba(14, 18, 42, 0.94) );
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
}

.editor-panel[b-g4d0jzl8jn] {
    padding: 30px;
    border-radius: 30px;
    animation: riseIn-b-g4d0jzl8jn 700ms 90ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.editor-heading[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 23px;
}

    .editor-heading h2[b-g4d0jzl8jn] {
        margin: 8px 0 0;
        font-size: clamp(25px, 3vw, 33px);
        letter-spacing: -0.025em;
    }

.new-entry-button[b-g4d0jzl8jn] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 43px;
    padding: 0 15px;
    border: 1px solid rgba(187, 158, 250, 0.25);
    border-radius: 14px;
    color: #cdc3e9;
    background: rgba(88, 59, 146, 0.18);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease, border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

    .new-entry-button span[b-g4d0jzl8jn] {
        font-size: 19px;
    }

    .new-entry-button:hover[b-g4d0jzl8jn] {
        transform: translateY(-3px);
        color: #ffffff;
        border-color: rgba(205, 180, 255, 0.58);
        background: rgba(103, 71, 169, 0.34);
        box-shadow: 0 12px 28px rgba(42, 23, 87, 0.3);
    }

.prompt-card[b-g4d0jzl8jn] {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 21px;
    border: 1px solid rgba(188, 153, 255, 0.42);
    border-radius: 21px;
    background: radial-gradient(circle at 90% 10%, rgba(154, 103, 246, 0.24), transparent 34%), linear-gradient(135deg, rgba(62, 47, 113, 0.72), rgba(34, 34, 78, 0.76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 13px 35px rgba(27, 15, 60, 0.22);
    transition: transform 470ms cubic-bezier(0.22, 1, 0.36, 1), border-color 420ms ease, box-shadow 420ms ease;
}

    .prompt-card[b-g4d0jzl8jn]::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -45%;
        width: 30%;
        height: 300%;
        pointer-events: none;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.09), transparent );
        transform: rotate(22deg);
        animation: travellingShine-b-g4d0jzl8jn 7s ease-in-out infinite;
    }

    .prompt-card:hover[b-g4d0jzl8jn] {
        transform: translateY(-4px);
        border-color: rgba(211, 188, 255, 0.72);
        box-shadow: 0 19px 45px rgba(25, 13, 58, 0.35), 0 0 26px rgba(122, 78, 210, 0.13);
    }

.prompt-icon[b-g4d0jzl8jn] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 16px;
    color: #f2d77c;
    background: rgba(111, 76, 180, 0.35);
    font-size: 23px;
    box-shadow: 0 0 22px rgba(235, 203, 109, 0.12);
    animation: sparklePulse-b-g4d0jzl8jn 3s ease-in-out infinite;
}

.prompt-content[b-g4d0jzl8jn] {
    position: relative;
    z-index: 1;
}

    .prompt-content > span[b-g4d0jzl8jn] {
        color: #cbb8f3;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.14em;
    }

    .prompt-content p[b-g4d0jzl8jn] {
        margin: 7px 0 12px;
        color: #ffffff;
        font-size: 17px;
        font-weight: 720;
        line-height: 1.45;
    }

.prompt-dots[b-g4d0jzl8jn] {
    display: flex;
    gap: 5px;
}

.prompt-dot[b-g4d0jzl8jn] {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(207, 190, 240, 0.26);
    transition: width 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

    .prompt-dot.active[b-g4d0jzl8jn] {
        width: 17px;
        background: #ccb8ff;
        box-shadow: 0 0 9px rgba(197, 169, 255, 0.64);
    }

.change-prompt-button[b-g4d0jzl8jn] {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(205, 183, 251, 0.24);
    border-radius: 50%;
    color: #d8ccee;
    background: rgba(12, 14, 37, 0.38);
    font: inherit;
    font-size: 20px;
    cursor: pointer;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

    .change-prompt-button:hover[b-g4d0jzl8jn] {
        transform: rotate(180deg) scale(1.1);
        color: #ffffff;
        background: rgba(102, 69, 166, 0.4);
        box-shadow: 0 0 22px rgba(157, 116, 238, 0.23);
    }

.title-field[b-g4d0jzl8jn] {
    display: block;
    margin-top: 23px;
}

    .title-field span[b-g4d0jzl8jn] {
        display: block;
        margin: 0 0 9px 3px;
        color: #a9a4bc;
        font-size: 12px;
        font-weight: 750;
    }

    .title-field input[b-g4d0jzl8jn] {
        width: 100%;
        height: 52px;
        padding: 0 16px;
        border: 1px solid rgba(146, 134, 187, 0.21);
        outline: 0;
        border-radius: 16px;
        box-sizing: border-box;
        color: #f8f6ff;
        background: rgba(9, 13, 33, 0.56);
        font: inherit;
        transition: border-color 300ms ease, box-shadow 300ms ease, background 300ms ease;
    }

        .title-field input[b-g4d0jzl8jn]::placeholder,
        .writing-area textarea[b-g4d0jzl8jn]::placeholder {
            color: #747188;
        }

        .title-field input:focus[b-g4d0jzl8jn] {
            border-color: rgba(190, 158, 255, 0.65);
            background: rgba(12, 15, 39, 0.76);
            box-shadow: 0 0 0 4px rgba(128, 82, 222, 0.1);
        }

.writing-area[b-g4d0jzl8jn] {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(146, 134, 187, 0.22);
    border-radius: 20px;
    background: rgba(8, 12, 31, 0.67);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), border-color 350ms ease, box-shadow 420ms ease, background 350ms ease;
}

    .writing-area.is-focused[b-g4d0jzl8jn] {
        transform: translateY(-3px);
        border-color: rgba(193, 162, 255, 0.7);
        background: rgba(10, 13, 36, 0.84);
        box-shadow: 0 0 0 4px rgba(126, 82, 219, 0.1), 0 17px 42px rgba(0, 0, 0, 0.25), inset 0 0 30px rgba(106, 70, 187, 0.05);
    }

    .writing-area textarea[b-g4d0jzl8jn] {
        display: block;
        width: 100%;
        min-height: 295px;
        padding: 22px;
        border: 0;
        outline: 0;
        resize: vertical;
        box-sizing: border-box;
        color: #f4f1fb;
        background: transparent;
        font: inherit;
        font-size: 16px;
        line-height: 1.75;
    }

.writing-footer[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 18px;
    border-top: 1px solid rgba(143, 130, 181, 0.14);
    color: #817e95;
    font-size: 11px;
}

.privacy-note[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .privacy-note span[b-g4d0jzl8jn] {
        color: #ad96dc;
    }

.writing-counts[b-g4d0jzl8jn] {
    display: flex;
    gap: 13px;
}

.validation-message[b-g4d0jzl8jn],
.save-confirmation[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 650;
    animation: messageEntrance-b-g4d0jzl8jn 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.validation-message[b-g4d0jzl8jn] {
    border: 1px solid rgba(244, 166, 102, 0.35);
    color: #ffd6b3;
    background: rgba(105, 51, 28, 0.25);
}

.save-confirmation[b-g4d0jzl8jn] {
    border: 1px solid rgba(83, 218, 157, 0.34);
    color: #bff5dc;
    background: rgba(25, 92, 67, 0.26);
}

    .save-confirmation span[b-g4d0jzl8jn] {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        color: #08291e;
        background: #79e3b5;
    }

.editor-actions[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
}

    .editor-actions p[b-g4d0jzl8jn] {
        margin: 0;
        color: #77748b;
        font-size: 12px;
    }

.ready-message[b-g4d0jzl8jn] {
    color: #a9e7ca;
}

.save-button[b-g4d0jzl8jn] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 188px;
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(151, 136, 191, 0.25);
    border-radius: 17px;
    color: #88849b;
    background: rgba(44, 43, 67, 0.68);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 430ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease, border-color 350ms ease, background 350ms ease, box-shadow 430ms ease;
}

    .save-button.is-ready[b-g4d0jzl8jn] {
        color: #ffffff;
        border-color: rgba(204, 179, 255, 0.67);
        background: linear-gradient(135deg, #7953cf, #5536a0);
        box-shadow: 0 13px 32px rgba(75, 42, 147, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 24px rgba(135, 87, 226, 0.14);
    }

        .save-button.is-ready:hover[b-g4d0jzl8jn] {
            transform: translateY(-5px) scale(1.02);
            border-color: rgba(226, 209, 255, 0.9);
            box-shadow: 0 21px 42px rgba(64, 32, 137, 0.48), 0 0 32px rgba(151, 100, 244, 0.26);
        }

        .save-button.is-ready:active[b-g4d0jzl8jn] {
            transform: translateY(-1px) scale(0.98);
        }

    .save-button.is-saved[b-g4d0jzl8jn] {
        color: #d5fae8;
        border-color: rgba(104, 224, 168, 0.5);
        background: linear-gradient(135deg, #246b52, #194a3a);
        box-shadow: 0 0 26px rgba(65, 198, 137, 0.16);
    }

.save-button-glow[b-g4d0jzl8jn] {
    position: absolute;
    z-index: -1;
    top: -80%;
    left: -45%;
    width: 30%;
    height: 260%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.28), transparent );
    transform: rotate(20deg);
}

.save-button.is-ready .save-button-glow[b-g4d0jzl8jn] {
    animation: buttonShine-b-g4d0jzl8jn 4.7s ease-in-out infinite;
}

.save-icon[b-g4d0jzl8jn] {
    font-size: 17px;
}

.journal-sidebar[b-g4d0jzl8jn] {
    display: grid;
    gap: 17px;
    animation: riseIn-b-g4d0jzl8jn 700ms 170ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reward-card[b-g4d0jzl8jn],
.privacy-card[b-g4d0jzl8jn],
.recent-card[b-g4d0jzl8jn] {
    border-radius: 24px;
}

.reward-card[b-g4d0jzl8jn] {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-color: rgba(105, 209, 157, 0.29);
    background: radial-gradient(circle at 90% 0%, rgba(79, 191, 139, 0.17), transparent 37%), linear-gradient(145deg, rgba(20, 56, 49, 0.88), rgba(13, 32, 35, 0.94));
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), border-color 400ms ease, box-shadow 480ms ease;
}

    .reward-card:hover[b-g4d0jzl8jn] {
        transform: translateY(-6px);
        border-color: rgba(115, 225, 170, 0.5);
        box-shadow: 0 27px 55px rgba(0, 0, 0, 0.34), 0 0 28px rgba(54, 182, 126, 0.12);
    }

.reward-card-top[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b8f0d2;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.reward-sparkle[b-g4d0jzl8jn] {
    color: #f0d474;
    filter: drop-shadow(0 0 8px rgba(240, 211, 111, 0.58));
    animation: sparklePulse-b-g4d0jzl8jn 2.7s ease-in-out infinite;
}

.reward-card h3[b-g4d0jzl8jn] {
    margin: 14px 0 8px;
    font-size: 22px;
}

.reward-card > p[b-g4d0jzl8jn] {
    margin: 0;
    color: #9fb9ad;
    font-size: 13px;
    line-height: 1.55;
}

.reward-items[b-g4d0jzl8jn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 19px;
}

    .reward-items > div[b-g4d0jzl8jn] {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 13px 4px;
        border: 1px solid rgba(108, 197, 153, 0.15);
        border-radius: 15px;
        background: rgba(7, 29, 25, 0.43);
        transition: transform 330ms cubic-bezier(0.22, 1, 0.36, 1), background 300ms ease;
    }

        .reward-items > div:hover[b-g4d0jzl8jn] {
            transform: translateY(-4px);
            background: rgba(19, 75, 58, 0.47);
        }

.reward-emoji[b-g4d0jzl8jn] {
    min-height: 23px;
    font-size: 19px;
}

.reward-items strong[b-g4d0jzl8jn] {
    margin-top: 6px;
    font-size: 16px;
}

.reward-items small[b-g4d0jzl8jn] {
    margin-top: 2px;
    color: #7f9e90;
    font-size: 10px;
}

.reward-status[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 17px;
    padding: 10px;
    border-radius: 13px;
    color: #829c90;
    background: rgba(5, 25, 22, 0.4);
    font-size: 11px;
    font-weight: 700;
}

    .reward-status.completed[b-g4d0jzl8jn] {
        color: #c4f5dc;
        background: rgba(30, 111, 81, 0.32);
    }

.privacy-card[b-g4d0jzl8jn] {
    display: flex;
    gap: 14px;
    padding: 19px;
}

.privacy-symbol[b-g4d0jzl8jn] {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 14px;
    color: #c9b4f5;
    background: rgba(100, 70, 165, 0.24);
}

.privacy-card h3[b-g4d0jzl8jn] {
    margin: 1px 0 6px;
    font-size: 14px;
}

.privacy-card p[b-g4d0jzl8jn] {
    margin: 0;
    color: #8e8a9e;
    font-size: 11px;
    line-height: 1.55;
}

.recent-card[b-g4d0jzl8jn] {
    padding: 20px;
}

.recent-heading[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .recent-heading h3[b-g4d0jzl8jn] {
        margin: 0;
        font-size: 16px;
    }

    .recent-heading > span[b-g4d0jzl8jn] {
        display: grid;
        place-items: center;
        width: 27px;
        height: 27px;
        border-radius: 10px;
        color: #c7b7e9;
        background: rgba(97, 67, 158, 0.22);
        font-size: 11px;
        font-weight: 800;
    }

.recent-empty[b-g4d0jzl8jn] {
    padding: 26px 8px 10px;
    text-align: center;
    color: #777489;
}

    .recent-empty > span[b-g4d0jzl8jn] {
        color: #ac91e1;
        font-size: 24px;
    }

    .recent-empty p[b-g4d0jzl8jn] {
        margin: 9px 0 0;
        font-size: 11px;
    }

.recent-entry[b-g4d0jzl8jn] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 13px;
    border-radius: 14px;
    background: rgba(9, 13, 32, 0.48);
    animation: messageEntrance-b-g4d0jzl8jn 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.entry-spark[b-g4d0jzl8jn] {
    color: #b59ae8;
}

.recent-entry strong[b-g4d0jzl8jn] {
    display: block;
    color: #ebe6f6;
    font-size: 12px;
}

.recent-entry p[b-g4d0jzl8jn] {
    overflow: hidden;
    margin: 5px 0;
    color: #888497;
    font-size: 10px;
    line-height: 1.4;
}

.recent-entry small[b-g4d0jzl8jn] {
    color: #676476;
    font-size: 9px;
}

.reward-overlay[b-g4d0jzl8jn] {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: radial-gradient(circle at center, rgba(101, 65, 176, 0.2), transparent 46%), rgba(4, 7, 20, 0.8);
    backdrop-filter: blur(13px);
    animation: overlayEntrance-b-g4d0jzl8jn 350ms ease both;
}

.reward-celebration[b-g4d0jzl8jn] {
    position: relative;
    overflow: hidden;
    width: min(100%, 520px);
    padding: 42px;
    border: 1px solid rgba(195, 165, 255, 0.62);
    border-radius: 32px;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(124, 205, 160, 0.18), transparent 38%), radial-gradient(circle at 100% 100%, rgba(135, 81, 225, 0.24), transparent 40%), linear-gradient(145deg, #20204a, #11162f);
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.62), 0 0 65px rgba(121, 77, 210, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: celebrationEntrance-b-g4d0jzl8jn 650ms cubic-bezier(0.18, 1.25, 0.34, 1) both;
}

    .reward-celebration[b-g4d0jzl8jn]::before {
        content: "";
        position: absolute;
        inset: -60%;
        pointer-events: none;
        background: conic-gradient( transparent, rgba(187, 151, 255, 0.08), transparent, rgba(100, 220, 163, 0.07), transparent );
        animation: auraRotation-b-g4d0jzl8jn 15s linear infinite;
    }

    .celebration-icon[b-g4d0jzl8jn],
    .celebration-label[b-g4d0jzl8jn],
    .reward-celebration h2[b-g4d0jzl8jn],
    .celebration-text[b-g4d0jzl8jn],
    .celebration-rewards[b-g4d0jzl8jn],
    .reward-celebration button[b-g4d0jzl8jn] {
        position: relative;
        z-index: 2;
    }

.celebration-icon[b-g4d0jzl8jn] {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: 0 auto 20px;
    border: 1px solid rgba(126, 226, 175, 0.52);
    border-radius: 27px;
    background: radial-gradient(circle, rgba(105, 224, 167, 0.28), rgba(24, 86, 65, 0.3));
    box-shadow: 0 0 38px rgba(75, 213, 148, 0.24), inset 0 0 24px rgba(120, 235, 180, 0.12);
    font-size: 42px;
    animation: iconFloat-b-g4d0jzl8jn 2.7s ease-in-out infinite;
}

.celebration-label[b-g4d0jzl8jn] {
    margin: 0 0 10px;
    color: #c8b3f6;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.reward-celebration h2[b-g4d0jzl8jn] {
    margin: 0;
    font-size: clamp(27px, 5vw, 38px);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.celebration-text[b-g4d0jzl8jn] {
    max-width: 400px;
    margin: 15px auto 24px;
    color: #aaa6bb;
    line-height: 1.6;
}

.celebration-rewards[b-g4d0jzl8jn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

    .celebration-rewards > div[b-g4d0jzl8jn] {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 7px;
        padding: 15px 7px;
        border: 1px solid rgba(163, 144, 208, 0.2);
        border-radius: 16px;
        background: rgba(8, 13, 33, 0.46);
    }

    .celebration-rewards span[b-g4d0jzl8jn] {
        font-size: 25px;
    }

    .celebration-rewards strong[b-g4d0jzl8jn] {
        font-size: 12px;
    }

.reward-celebration button[b-g4d0jzl8jn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 210px;
    min-height: 52px;
    margin-top: 27px;
    border: 1px solid rgba(214, 194, 255, 0.68);
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(135deg, #7650c8, #4e3296);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(59, 32, 124, 0.43);
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease;
}

    .reward-celebration button:hover[b-g4d0jzl8jn] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 22px 46px rgba(55, 28, 124, 0.54), 0 0 28px rgba(145, 94, 235, 0.23);
    }

    .reward-celebration button span[b-g4d0jzl8jn] {
        transition: transform 300ms ease;
    }

    .reward-celebration button:hover span[b-g4d0jzl8jn] {
        transform: translateX(5px);
    }

.floating-particle[b-g4d0jzl8jn] {
    position: absolute;
    z-index: 2001;
    color: #dfcaff;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(202, 174, 255, 0.75));
    animation: particleFloat-b-g4d0jzl8jn 3s ease-in-out infinite;
}

.particle-one[b-g4d0jzl8jn] {
    top: 18%;
    left: 24%;
    font-size: 27px;
}

.particle-two[b-g4d0jzl8jn] {
    top: 26%;
    right: 23%;
    font-size: 20px;
    animation-delay: -1s;
}

.particle-three[b-g4d0jzl8jn] {
    bottom: 23%;
    left: 29%;
    font-size: 18px;
    animation-delay: -1.8s;
}

.particle-four[b-g4d0jzl8jn] {
    right: 28%;
    bottom: 20%;
    font-size: 25px;
    animation-delay: -0.6s;
}

@keyframes riseIn-b-g4d0jzl8jn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatingGlow-b-g4d0jzl8jn {
    from {
        transform: translate3d(-18px, -12px, 0) scale(0.92);
    }

    to {
        transform: translate3d(30px, 25px, 0) scale(1.08);
    }
}

@keyframes travellingShine-b-g4d0jzl8jn {
    0%, 42% {
        left: -50%;
        opacity: 0;
    }

    54% {
        opacity: 1;
    }

    78%, 100% {
        left: 130%;
        opacity: 0;
    }
}

@keyframes buttonShine-b-g4d0jzl8jn {
    0%, 42% {
        left: -45%;
        opacity: 0;
    }

    56% {
        opacity: 1;
    }

    80%, 100% {
        left: 135%;
        opacity: 0;
    }
}

@keyframes sparklePulse-b-g4d0jzl8jn {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.86) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.16) rotate(18deg);
    }
}

@keyframes messageEntrance-b-g4d0jzl8jn {
    from {
        opacity: 0;
        transform: translateY(-7px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes overlayEntrance-b-g4d0jzl8jn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes celebrationEntrance-b-g4d0jzl8jn {
    from {
        opacity: 0;
        transform: translateY(35px) scale(0.87);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes auraRotation-b-g4d0jzl8jn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes iconFloat-b-g4d0jzl8jn {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-9px) rotate(3deg);
    }
}

@keyframes particleFloat-b-g4d0jzl8jn {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(8px) scale(0.85) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateY(-16px) scale(1.18) rotate(16deg);
    }
}

@media (max-width: 950px) {
    .journal-layout[b-g4d0jzl8jn] {
        grid-template-columns: 1fr;
    }

    .journal-sidebar[b-g4d0jzl8jn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reward-card[b-g4d0jzl8jn] {
        grid-row: span 2;
    }
}

@media (max-width: 680px) {
    .journal-shell[b-g4d0jzl8jn] {
        width: min(100% - 26px, 1180px);
        padding-top: 38px;
    }

    .editor-panel[b-g4d0jzl8jn] {
        padding: 21px;
        border-radius: 25px;
    }

    .editor-heading[b-g4d0jzl8jn] {
        align-items: flex-start;
        flex-direction: column;
    }

    .journal-sidebar[b-g4d0jzl8jn] {
        grid-template-columns: 1fr;
    }

    .reward-card[b-g4d0jzl8jn] {
        grid-row: auto;
    }
}

@media (max-width: 470px) {
    .journal-header h1[b-g4d0jzl8jn] {
        font-size: 37px;
    }

    .journal-header > p:last-child[b-g4d0jzl8jn] {
        font-size: 16px;
    }

    .prompt-card[b-g4d0jzl8jn] {
        grid-template-columns: auto 1fr;
    }

    .change-prompt-button[b-g4d0jzl8jn] {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .writing-footer[b-g4d0jzl8jn],
    .editor-actions[b-g4d0jzl8jn] {
        align-items: flex-start;
        flex-direction: column;
    }

    .save-button[b-g4d0jzl8jn] {
        width: 100%;
    }

    .celebration-rewards[b-g4d0jzl8jn] {
        grid-template-columns: 1fr;
    }

    .reward-celebration[b-g4d0jzl8jn] {
        max-height: calc(100vh - 28px);
        padding: 29px 20px;
        overflow-y: auto;
    }

    .floating-particle[b-g4d0jzl8jn] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-g4d0jzl8jn],
    *[b-g4d0jzl8jn]::before,
    *[b-g4d0jzl8jn]::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* =========================================
   COMPLETE JOURNAL FEATURES
   ========================================= */

.journal-feature-grid[b-g4d0jzl8jn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.feature-card[b-g4d0jzl8jn] {
    padding: 20px;
    border: 1px solid rgba(173, 145, 230, 0.22);
    border-radius: 21px;
    background: radial-gradient( circle at 100% 0%, rgba(126, 79, 211, 0.13), transparent 38% ), rgba(8, 12, 32, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.42s ease;
}

    .feature-card:hover[b-g4d0jzl8jn] {
        transform: translateY(-4px);
        border-color: rgba(196, 165, 255, 0.43);
        box-shadow: 0 16px 36px rgba(3, 5, 18, 0.25);
    }

.feature-heading[b-g4d0jzl8jn],
.export-heading[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon[b-g4d0jzl8jn],
.export-icon[b-g4d0jzl8jn] {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    color: #eadcff;
    background: rgba(109, 70, 181, 0.25);
    border: 1px solid rgba(195, 166, 255, 0.24);
    border-radius: 14px;
    box-shadow: 0 0 18px rgba(145, 95, 232, 0.1);
    font-size: 19px;
}

.feature-label[b-g4d0jzl8jn],
.export-heading > div > span[b-g4d0jzl8jn] {
    display: block;
    margin-bottom: 4px;
    color: #bda6eb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.feature-heading h3[b-g4d0jzl8jn],
.export-heading h3[b-g4d0jzl8jn] {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
}

.feature-description[b-g4d0jzl8jn] {
    margin: 14px 0;
    color: #918ca2;
    font-size: 11px;
    line-height: 1.55;
}

/* Gratitude fields */

.mini-field[b-g4d0jzl8jn] {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}

    .mini-field > span[b-g4d0jzl8jn] {
        display: grid;
        place-items: center;
        height: 30px;
        color: #d8c5ff;
        background: rgba(101, 67, 166, 0.24);
        border-radius: 10px;
        font-size: 11px;
        font-weight: 800;
    }

    .mini-field input[b-g4d0jzl8jn],
    .feature-field input[b-g4d0jzl8jn],
    .feature-field select[b-g4d0jzl8jn],
    .feature-field textarea[b-g4d0jzl8jn] {
        width: 100%;
        box-sizing: border-box;
        color: #f5f1ff;
        background: rgba(5, 9, 26, 0.58);
        border: 1px solid rgba(147, 131, 187, 0.2);
        border-radius: 12px;
        outline: none;
        font: inherit;
        font-size: 12px;
        transition: border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
    }

    .mini-field input[b-g4d0jzl8jn] {
        height: 39px;
        padding: 0 12px;
    }

/* Goal and weekly fields */

.feature-field[b-g4d0jzl8jn] {
    display: block;
    margin-top: 13px;
}

    .feature-field > span[b-g4d0jzl8jn] {
        display: block;
        margin: 0 0 7px 2px;
        color: #9a95aa;
        font-size: 10px;
        font-weight: 750;
    }

    .feature-field input[b-g4d0jzl8jn],
    .feature-field select[b-g4d0jzl8jn] {
        height: 42px;
        padding: 0 12px;
    }

    .feature-field select[b-g4d0jzl8jn] {
        color-scheme: dark;
    }

    .feature-field textarea[b-g4d0jzl8jn] {
        display: block;
        min-height: 70px;
        padding: 11px 12px;
        resize: vertical;
        line-height: 1.5;
    }

        .mini-field input:focus[b-g4d0jzl8jn],
        .feature-field input:focus[b-g4d0jzl8jn],
        .feature-field select:focus[b-g4d0jzl8jn],
        .feature-field textarea:focus[b-g4d0jzl8jn] {
            border-color: rgba(189, 155, 255, 0.62);
            background: rgba(9, 12, 34, 0.82);
            box-shadow: 0 0 0 3px rgba(124, 78, 214, 0.09);
        }

        .mini-field input[b-g4d0jzl8jn]::placeholder,
        .feature-field input[b-g4d0jzl8jn]::placeholder,
        .feature-field textarea[b-g4d0jzl8jn]::placeholder {
            color: #6f6a7e;
        }

/* Photo memory */

.photo-drop-zone[b-g4d0jzl8jn] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 190px;
    margin-top: 15px;
    color: #c9b9e9;
    background: rgba(8, 11, 29, 0.42);
    border: 1px dashed rgba(187, 157, 247, 0.38);
    border-radius: 17px;
    cursor: pointer;
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

    .photo-drop-zone:hover[b-g4d0jzl8jn] {
        transform: scale(1.01);
        border-color: rgba(213, 188, 255, 0.72);
        background: rgba(63, 40, 108, 0.2);
    }

    .photo-drop-zone input[b-g4d0jzl8jn] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

.photo-plus[b-g4d0jzl8jn] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    color: #f0e7ff;
    background: rgba(110, 73, 181, 0.35);
    border-radius: 15px;
    font-size: 24px;
}

.photo-drop-zone strong[b-g4d0jzl8jn] {
    font-size: 13px;
}

.photo-drop-zone small[b-g4d0jzl8jn] {
    margin-top: 5px;
    color: #747083;
    font-size: 9px;
}

.photo-preview[b-g4d0jzl8jn] {
    position: relative;
    height: 218px;
    margin-top: 15px;
    overflow: hidden;
    border: 1px solid rgba(188, 160, 244, 0.28);
    border-radius: 17px;
}

    .photo-preview img[b-g4d0jzl8jn] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .photo-preview button[b-g4d0jzl8jn] {
        position: absolute;
        top: 10px;
        right: 10px;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 0;
        color: #ffffff;
        background: rgba(8, 10, 23, 0.76);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        font: inherit;
        font-size: 20px;
        cursor: pointer;
    }

.photo-error[b-g4d0jzl8jn] {
    margin: 10px 0 0;
    color: #ffbd9c;
    font-size: 10px;
}

/* Calendar and export cards */

.journal-calendar-card[b-g4d0jzl8jn],
.export-card[b-g4d0jzl8jn] {
    padding: 20px;
    background: radial-gradient( circle at top right, rgba(172, 110, 255, 0.14), transparent 38% ), linear-gradient( 145deg, rgba(25, 28, 61, 0.93), rgba(14, 18, 42, 0.94) );
    border: 1px solid rgba(154, 137, 211, 0.23);
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
}

/* Journal calendar */

.calendar-header[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    text-align: center;
}

.calendar-label[b-g4d0jzl8jn] {
    display: block;
    margin-bottom: 4px;
    color: #cdb4ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.calendar-header h3[b-g4d0jzl8jn] {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
}

.calendar-arrow[b-g4d0jzl8jn] {
    width: 35px;
    height: 35px;
    padding: 0;
    color: #ffffff;
    background: rgba(141, 87, 255, 0.17);
    border: 1px solid rgba(207, 176, 255, 0.28);
    border-radius: 50%;
    font: inherit;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .calendar-arrow:hover[b-g4d0jzl8jn] {
        transform: scale(1.08);
        background: rgba(164, 105, 255, 0.36);
        box-shadow: 0 0 16px rgba(178, 119, 255, 0.35);
    }

.calendar-weekdays[b-g4d0jzl8jn],
.calendar-days[b-g4d0jzl8jn] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-weekdays[b-g4d0jzl8jn] {
    margin-bottom: 7px;
    color: #9e91b6;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}

.calendar-day[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 34px;
    color: #dcd5eb;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 10px;
    font-size: 10px;
    transition: transform 0.24s ease, background 0.24s ease;
}

    .calendar-day:not(.calendar-blank):hover[b-g4d0jzl8jn] {
        transform: translateY(-2px);
        background: rgba(156, 96, 255, 0.17);
    }

.calendar-blank[b-g4d0jzl8jn] {
    visibility: hidden;
}

.calendar-day.has-reflection[b-g4d0jzl8jn] {
    color: #ffffff;
    background: linear-gradient( 145deg, rgba(174, 107, 255, 0.76), rgba(104, 73, 255, 0.64) );
    border-color: rgba(225, 203, 255, 0.74);
    box-shadow: 0 0 11px rgba(175, 112, 255, 0.58), 0 0 22px rgba(120, 88, 255, 0.28);
    font-weight: 850;
    animation: reflectionGlow-b-g4d0jzl8jn 2.4s ease-in-out infinite;
}

.calendar-hint[b-g4d0jzl8jn] {
    margin: 13px 0 0;
    color: #9389a7;
    font-size: 9px;
    text-align: center;
}

/* Recent reflection photo and selection */

.recent-entry[b-g4d0jzl8jn] {
    position: relative;
    padding-right: 42px;
}

.entry-photo[b-g4d0jzl8jn] {
    width: 42px;
    height: 42px;
    margin-left: auto;
    object-fit: cover;
    border: 1px solid rgba(190, 161, 244, 0.25);
    border-radius: 11px;
}

.entry-select[b-g4d0jzl8jn] {
    position: absolute;
    top: 11px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: transparent;
    background: rgba(83, 55, 137, 0.15);
    border: 1px solid rgba(180, 153, 233, 0.2);
    border-radius: 8px;
    cursor: pointer;
}

    .entry-select input[b-g4d0jzl8jn] {
        position: absolute;
        opacity: 0;
    }

    .entry-select:has(input:checked)[b-g4d0jzl8jn] {
        color: #ffffff;
        background: #7049be;
        border-color: rgba(202, 179, 250, 0.62);
        box-shadow: 0 0 13px rgba(144, 92, 225, 0.28);
    }

    .entry-select span[b-g4d0jzl8jn] {
        font-size: 10px;
    }

/* PDF export */

.export-heading[b-g4d0jzl8jn] {
    margin-bottom: 12px;
}

.export-card > p[b-g4d0jzl8jn] {
    margin: 0 0 15px;
    color: #8e899f;
    font-size: 11px;
    line-height: 1.5;
}

.export-button[b-g4d0jzl8jn],
.download-pdf[b-g4d0jzl8jn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    color: #ffffff;
    background: linear-gradient(135deg, #6f49bb, #4b318f);
    border: 1px solid rgba(199, 170, 255, 0.4);
    border-radius: 13px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.32s ease, box-shadow 0.32s ease, opacity 0.25s ease;
}

    .export-button:not(:disabled):hover[b-g4d0jzl8jn],
    .download-pdf:hover[b-g4d0jzl8jn] {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgba(67, 38, 130, 0.35);
    }

    .export-button:disabled[b-g4d0jzl8jn] {
        opacity: 0.38;
        cursor: not-allowed;
    }

.download-pdf[b-g4d0jzl8jn] {
    gap: 8px;
    margin-top: 9px;
    background: linear-gradient(135deg, #286f56, #1b4c3d);
    border-color: rgba(102, 223, 164, 0.38);
}

.export-message[b-g4d0jzl8jn] {
    display: block;
    margin-top: 9px;
    color: #9d91b4;
    font-size: 9px;
    text-align: center;
}

/* Calendar glow animation */

@keyframes reflectionGlow-b-g4d0jzl8jn {
    0%, 100% {
        box-shadow: 0 0 9px rgba(175, 112, 255, 0.46), 0 0 18px rgba(120, 88, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 16px rgba(205, 160, 255, 0.78), 0 0 28px rgba(145, 95, 255, 0.43);
    }
}

/* Tablet and mobile layout */

@media (max-width: 680px) {
    .journal-feature-grid[b-g4d0jzl8jn] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 470px) {
    .feature-card[b-g4d0jzl8jn] {
        padding: 17px;
    }

    .calendar-weekdays[b-g4d0jzl8jn],
    .calendar-days[b-g4d0jzl8jn] {
        gap: 3px;
    }

    .calendar-day[b-g4d0jzl8jn] {
        min-height: 30px;
        border-radius: 8px;
        font-size: 9px;
    }

    .photo-preview[b-g4d0jzl8jn] {
        height: 190px;
    }
}

/* =========================================
   CALENDAR REFLECTION POPUP
   ========================================= */

.calendar-day[b-g4d0jzl8jn] {
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

    .calendar-day:disabled[b-g4d0jzl8jn] {
        cursor: default;
        opacity: 1;
    }

    .calendar-day.has-reflection[b-g4d0jzl8jn] {
        cursor: pointer;
    }

.calendar-entry-overlay[b-g4d0jzl8jn] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3, 5, 18, 0.78);
    backdrop-filter: blur(12px);
    animation: calendarOverlayIn-b-g4d0jzl8jn 0.28s ease-out;
}

.calendar-entry-popup[b-g4d0jzl8jn] {
    position: relative;
    width: min(92vw, 560px);
    max-height: 84vh;
    padding: 28px;
    overflow-y: auto;
    color: #f7f2ff;
    background: radial-gradient( circle at top right, rgba(165, 99, 255, 0.28), transparent 38% ), linear-gradient( 155deg, #1d173c 0%, #0d0d25 100% );
    border: 1px solid rgba(208, 180, 255, 0.4);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(123, 75, 221, 0.18);
    animation: calendarPopupIn-b-g4d0jzl8jn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.calendar-popup-close[b-g4d0jzl8jn] {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #ffffff;
    background: rgba(108, 70, 178, 0.25);
    border: 1px solid rgba(213, 188, 255, 0.32);
    border-radius: 50%;
    font: inherit;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .calendar-popup-close:hover[b-g4d0jzl8jn] {
        transform: rotate(90deg) scale(1.08);
        background: rgba(151, 91, 246, 0.48);
        box-shadow: 0 0 18px rgba(178, 119, 255, 0.34);
    }

.calendar-popup-label[b-g4d0jzl8jn] {
    display: block;
    margin-bottom: 9px;
    color: #c8aaff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.calendar-entry-popup > h3[b-g4d0jzl8jn] {
    margin: 0 45px 7px 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.25;
}

.calendar-entry-popup > time[b-g4d0jzl8jn] {
    display: block;
    margin-bottom: 20px;
    color: #9790aa;
    font-size: 11px;
}

.calendar-popup-photo[b-g4d0jzl8jn] {
    display: block;
    width: 100%;
    max-height: 280px;
    margin-bottom: 20px;
    object-fit: cover;
    border: 1px solid rgba(207, 178, 255, 0.26);
    border-radius: 18px;
}

.calendar-popup-reflection[b-g4d0jzl8jn] {
    margin: 0;
    padding: 18px;
    color: #e7e0f2;
    background: rgba(5, 8, 25, 0.48);
    border: 1px solid rgba(173, 145, 230, 0.16);
    border-radius: 17px;
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-wrap;
}

.calendar-popup-section[b-g4d0jzl8jn] {
    margin-top: 15px;
    padding: 16px 18px;
    background: rgba(74, 47, 126, 0.16);
    border: 1px solid rgba(186, 157, 240, 0.17);
    border-radius: 16px;
}

    .calendar-popup-section strong[b-g4d0jzl8jn] {
        display: block;
        margin-bottom: 8px;
        color: #d7c0ff;
        font-size: 12px;
    }

    .calendar-popup-section p[b-g4d0jzl8jn],
    .calendar-popup-section small[b-g4d0jzl8jn] {
        margin: 0;
        color: #aaa3b8;
        font-size: 11px;
        line-height: 1.6;
    }

    .calendar-popup-section small[b-g4d0jzl8jn] {
        display: block;
        margin-top: 7px;
    }

    .calendar-popup-section ul[b-g4d0jzl8jn] {
        margin: 0;
        padding-left: 18px;
        color: #bdb5ca;
        font-size: 11px;
        line-height: 1.8;
    }

@keyframes calendarOverlayIn-b-g4d0jzl8jn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes calendarPopupIn-b-g4d0jzl8jn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 470px) {
    .calendar-entry-overlay[b-g4d0jzl8jn] {
        padding: 12px;
    }

    .calendar-entry-popup[b-g4d0jzl8jn] {
        width: 100%;
        max-height: 88vh;
        padding: 22px 18px;
        border-radius: 22px;
    }

        .calendar-entry-popup > h3[b-g4d0jzl8jn] {
            font-size: 20px;
        }
}

/* Keep the calendar controls above decorative layers */
.journal-calendar-card[b-g4d0jzl8jn] {
    position: relative;
    z-index: 50;
    isolation: isolate;
    pointer-events: auto;
}

.calendar-header[b-g4d0jzl8jn],
.calendar-days[b-g4d0jzl8jn],
.calendar-weekdays[b-g4d0jzl8jn] {
    position: relative;
    z-index: 51;
    pointer-events: auto;
}

.calendar-arrow[b-g4d0jzl8jn] {
    position: relative;
    z-index: 52;
    pointer-events: auto !important;
}
.calendar-day-overlay[b-g4d0jzl8jn] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 3, 18, 0.75);
    backdrop-filter: blur(6px);
}

.calendar-day-popup[b-g4d0jzl8jn] {
    width: min(92vw, 480px);
    padding: 24px;
    color: white;
    background: linear-gradient(180deg, #211641 0%, #100b29 100%);
    border: 1px solid rgba(207, 176, 255, 0.4);
    border-radius: 22px;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.65);
}

    .calendar-day-popup h3[b-g4d0jzl8jn] {
        margin: 0 0 16px;
        color: #f4eaff;
    }

.calendar-day-textarea[b-g4d0jzl8jn] {
    width: 100%;
    min-height: 160px;
    padding: 14px;
    color: white;
    background: rgba(10, 7, 28, 0.75);
    border: 1px solid rgba(207, 176, 255, 0.35);
    border-radius: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.calendar-day-save[b-g4d0jzl8jn] {
    width: 100%;
    margin-top: 16px;
    padding: 12px 18px;
    color: white;
    font-weight: 700;
    background: linear-gradient(135deg, #8d5cff, #bd75ff);
    border: 0;
    border-radius: 14px;
    cursor: pointer;
}

.calendar-day-popup[b-g4d0jzl8jn] {
    position: relative;
}

.calendar-day-close[b-g4d0jzl8jn] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    color: #eadcff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(196, 164, 255, 0.42);
    border-radius: 50%;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .calendar-day-close:hover[b-g4d0jzl8jn] {
        color: white;
        background: rgba(168, 85, 247, 0.55);
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.55);
        transform: rotate(90deg) scale(1.08);
    }

.calendar-month-button[b-g4d0jzl8jn] {
    padding: 7px 15px;
    color: #f2e9ff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    background: linear-gradient( 135deg, rgba(115, 74, 190, 0.42), rgba(74, 46, 135, 0.42) );
    border: 1px solid rgba(203, 173, 255, 0.38);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 6px 18px rgba(22, 10, 55, 0.35);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

    .calendar-month-button:hover[b-g4d0jzl8jn] {
        color: #ffffff;
        border-color: rgba(221, 197, 255, 0.75);
        box-shadow: 0 0 20px rgba(158, 103, 255, 0.4);
        transform: translateY(-2px);
    }
/* /Components/Pages/Login.razor.rz.scp.css */
.auth-page[b-jg18jvh8i5] {
    position: relative;
    min-height: 100vh;
    padding: 55px 24px 150px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(circle at 8% 18%, rgba(116, 51, 235, 0.42), transparent 32%), radial-gradient(circle at 91% 78%, rgba(191, 56, 214, 0.24), transparent 33%), linear-gradient(135deg, #211047 0%, #11102d 48%, #1d1239 100%);
    isolation: isolate;
}

    .auth-page[b-jg18jvh8i5]::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        content: "";
        background: linear-gradient( 120deg, transparent 20%, rgba(220, 195, 255, 0.035) 48%, transparent 74% );
        animation: authPageLight-b-jg18jvh8i5 14s ease-in-out infinite alternate;
    }

.auth-shell[b-jg18jvh8i5] {
    position: relative;
    z-index: 2;
    width: min(100%, 1100px);
    margin: 0 auto;
}

.auth-back-button[b-jg18jvh8i5] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 26px;
    padding: 0 18px;
    color: #e8dcff;
    text-decoration: none;
    background: rgba(20, 14, 49, 0.7);
    border: 1px solid rgba(204, 172, 255, 0.24);
    border-radius: 999px;
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

    .auth-back-button:hover[b-jg18jvh8i5] {
        color: #ffffff;
        border-color: rgba(218, 190, 255, 0.68);
        box-shadow: 0 0 24px rgba(143, 74, 255, 0.2);
        transform: translateX(-3px);
    }

.auth-card[b-jg18jvh8i5] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(290px, 0.85fr) minmax(380px, 1.15fr);
    column-gap: 48px;
    padding: 42px;
    overflow: hidden;
    background: radial-gradient(circle at 8% 22%, rgba(144, 73, 255, 0.17), transparent 30%), linear-gradient( 145deg, rgba(45, 31, 88, 0.9), rgba(16, 14, 45, 0.94) );
    border: 1px solid rgba(203, 169, 255, 0.34);
    border-radius: 34px;
    box-shadow: 0 32px 90px rgba(4, 2, 18, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

    .auth-card[b-jg18jvh8i5]::before {
        position: absolute;
        top: 0;
        left: -45%;
        width: 38%;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, #d7baff, transparent);
        animation: authCardShimmer-b-jg18jvh8i5 7s ease-in-out infinite;
    }

.auth-brand[b-jg18jvh8i5] {
    position: relative;
    display: flex;
    grid-row: 1 / 4;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 30px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(133, 64, 239, 0.18), transparent 58%);
    border: 1px solid rgba(203, 169, 255, 0.13);
    border-radius: 27px;
}

.auth-logo[b-jg18jvh8i5] {
    position: relative;
    display: grid;
    width: 104px;
    height: 104px;
    margin-bottom: 24px;
    place-items: center;
    color: #ffffff;
    font-size: 2.5rem;
    background: radial-gradient(circle at 34% 28%, #ffffff 0%, #ddc4ff 8%, transparent 22%), radial-gradient(circle at center, #a25aff 0%, #702fd8 50%, #321261 100%);
    border: 1px solid rgba(235, 217, 255, 0.65);
    border-radius: 32px;
    box-shadow: 0 0 22px rgba(211, 178, 255, 0.7), 0 0 58px rgba(139, 66, 241, 0.46);
    animation: authLogoFloat-b-jg18jvh8i5 4.5s ease-in-out infinite;
}

    .auth-logo[b-jg18jvh8i5]::before,
    .auth-logo[b-jg18jvh8i5]::after {
        position: absolute;
        content: "";
        border: 1px solid rgba(211, 180, 255, 0.2);
        border-radius: 38px;
    }

    .auth-logo[b-jg18jvh8i5]::before {
        inset: -12px;
        animation: authLogoPulse-b-jg18jvh8i5 3.8s ease-in-out infinite;
    }

    .auth-logo[b-jg18jvh8i5]::after {
        inset: -23px;
        border-style: dashed;
        opacity: 0.45;
        animation: authLogoRotate-b-jg18jvh8i5 24s linear infinite;
    }

    .auth-logo span[b-jg18jvh8i5] {
        filter: drop-shadow(0 0 10px #ffffff);
        animation: authLogoSparkle-b-jg18jvh8i5 2.8s ease-in-out infinite;
    }

.auth-eyebrow[b-jg18jvh8i5] {
    margin: 0 0 10px;
    color: #ceb4ff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.auth-brand h1[b-jg18jvh8i5] {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.auth-description[b-jg18jvh8i5] {
    max-width: 330px;
    margin: 19px auto 0;
    color: rgba(234, 226, 250, 0.66);
    line-height: 1.7;
}

.auth-tabs[b-jg18jvh8i5] {
    display: grid;
    grid-column: 2;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 25px;
    padding: 5px;
    background: rgba(8, 7, 28, 0.62);
    border: 1px solid rgba(198, 165, 255, 0.18);
    border-radius: 17px;
}

    .auth-tabs button[b-jg18jvh8i5],
    .auth-tabs a[b-jg18jvh8i5] {
        min-height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        color: rgba(232, 222, 251, 0.58);
        font: inherit;
        font-weight: 700;
            text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: 0;
        border-radius: 12px;
        transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }

            .auth-tabs button:hover[b-jg18jvh8i5],
            .auth-tabs a:hover[b-jg18jvh8i5] {
            color: #ffffff;
        }

            .auth-tabs button.active[b-jg18jvh8i5],
            .auth-tabs a.active[b-jg18jvh8i5] {
            color: #ffffff;
            background: linear-gradient(135deg, rgba(150, 78, 255, 0.86), rgba(89, 39, 181, 0.88));
            box-shadow: 0 8px 24px rgba(87, 32, 176, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.17);
        }

.auth-form[b-jg18jvh8i5] {
    display: flex;
    grid-column: 2;
    flex-direction: column;
    gap: 17px;
}

.auth-field[b-jg18jvh8i5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .auth-field > span[b-jg18jvh8i5] {
        color: rgba(241, 234, 255, 0.78);
        font-size: 0.83rem;
        font-weight: 650;
    }

.auth-input-wrap[b-jg18jvh8i5] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 55px;
    padding: 0 14px;
    background: rgba(7, 7, 27, 0.66);
    border: 1px solid rgba(197, 160, 255, 0.2);
    border-radius: 16px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .auth-input-wrap:focus-within[b-jg18jvh8i5] {
        background: rgba(10, 8, 34, 0.86);
        border-color: rgba(188, 132, 255, 0.72);
        box-shadow: 0 0 0 3px rgba(139, 68, 243, 0.12), 0 0 25px rgba(125, 55, 227, 0.16);
    }

.field-icon[b-jg18jvh8i5] {
    margin-right: 11px;
    color: #c39cff;
    font-size: 0.9rem;
}

.auth-input-wrap input[b-jg18jvh8i5] {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    color: #ffffff;
    font: inherit;
    outline: none;
    background: transparent;
    border: 0;
}

    .auth-input-wrap input[b-jg18jvh8i5]::placeholder {
        color: rgba(224, 213, 246, 0.37);
    }

.password-toggle[b-jg18jvh8i5] {
    padding: 7px 6px;
    color: #c9a8ff;
    font-size: 0.75rem;
    cursor: pointer;
    background: transparent;
    border: 0;
}

    .password-toggle:hover[b-jg18jvh8i5] {
        color: #ffffff;
    }

.auth-options[b-jg18jvh8i5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
}

.remember-option[b-jg18jvh8i5] {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: rgba(230, 220, 249, 0.62);
    font-size: 0.8rem;
    cursor: pointer;
}

    .remember-option input[b-jg18jvh8i5] {
        width: 17px;
        height: 17px;
        accent-color: #9150f8;
    }

.forgot-button[b-jg18jvh8i5] {
    padding: 5px;
    color: #c5a4ff;
    font-size: 0.8rem;
    cursor: pointer;
    background: transparent;
    border: 0;
}

    .forgot-button:hover[b-jg18jvh8i5] {
        color: #ffffff;
        text-decoration: underline;
    }

.auth-status[b-jg18jvh8i5] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px 13px;
    font-size: 0.82rem;
    border-radius: 13px;
    animation: authStatusAppear-b-jg18jvh8i5 0.3s ease-out;
}

.error-status[b-jg18jvh8i5] {
    color: #ffd9e3;
    background: rgba(168, 42, 80, 0.16);
    border: 1px solid rgba(255, 111, 153, 0.28);
}

.success-status[b-jg18jvh8i5] {
    color: #e8dcff;
    background: rgba(118, 62, 209, 0.2);
    border: 1px solid rgba(188, 134, 255, 0.3);
}

.primary-auth-button[b-jg18jvh8i5] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 20px;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg, #a45bff, #7132dc);
    border: 1px solid rgba(232, 213, 255, 0.44);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(90, 32, 184, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: filter 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

    .primary-auth-button:hover:not(:disabled)[b-jg18jvh8i5] {
        filter: brightness(1.12);
        box-shadow: 0 15px 38px rgba(118, 51, 220, 0.5);
        transform: translateY(-2px);
    }

    .primary-auth-button:active:not(:disabled)[b-jg18jvh8i5] {
        transform: translateY(0) scale(0.99);
    }

    .primary-auth-button:disabled[b-jg18jvh8i5] {
        cursor: not-allowed;
        opacity: 0.42;
        box-shadow: none;
    }

.button-spinner[b-jg18jvh8i5] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: authSpinner-b-jg18jvh8i5 0.75s linear infinite;
}

.auth-divider[b-jg18jvh8i5] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

    .auth-divider span[b-jg18jvh8i5] {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(205, 177, 247, 0.22));
    }

        .auth-divider span:last-child[b-jg18jvh8i5] {
            background: linear-gradient(90deg, rgba(205, 177, 247, 0.22), transparent);
        }

    .auth-divider p[b-jg18jvh8i5] {
        margin: 0;
        color: rgba(224, 213, 245, 0.42);
        font-size: 0.76rem;
    }

.guest-button[b-jg18jvh8i5] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    min-height: 66px;
    padding: 10px 15px;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    background: rgba(59, 39, 105, 0.42);
    border: 1px solid rgba(198, 163, 255, 0.2);
    border-radius: 17px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

    .guest-button:hover[b-jg18jvh8i5] {
        background: rgba(82, 48, 145, 0.55);
        border-color: rgba(209, 177, 255, 0.48);
        box-shadow: 0 0 25px rgba(133, 67, 234, 0.17);
        transform: translateY(-2px);
    }

.guest-icon[b-jg18jvh8i5] {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #e8d7ff;
    background: rgba(143, 76, 238, 0.28);
    border: 1px solid rgba(207, 173, 255, 0.24);
    border-radius: 12px;
}

.guest-button > span:nth-child(2)[b-jg18jvh8i5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.guest-button strong[b-jg18jvh8i5] {
    font-size: 0.88rem;
}

.guest-button small[b-jg18jvh8i5] {
    color: rgba(228, 218, 247, 0.5);
    font-size: 0.72rem;
}

.guest-arrow[b-jg18jvh8i5] {
    color: #d1b5ff;
    font-size: 1.1rem;
}

.auth-demo-note[b-jg18jvh8i5] {
    grid-column: 1 / -1;
    margin: 30px 0 0;
    padding-top: 22px;
    color: rgba(226, 214, 247, 0.45);
    font-size: 0.76rem;
    text-align: center;
    border-top: 1px solid rgba(202, 172, 247, 0.12);
}

.auth-footer-text[b-jg18jvh8i5] {
    margin: 20px 0 0;
    color: rgba(225, 214, 245, 0.48);
    font-size: 0.8rem;
    text-align: center;
}

.auth-glow[b-jg18jvh8i5] {
    position: absolute;
    z-index: 0;
    width: 500px;
    height: 500px;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.18;
    animation: authGlowMove-b-jg18jvh8i5 12s ease-in-out infinite alternate;
}

.auth-glow-left[b-jg18jvh8i5] {
    top: 5%;
    left: -260px;
    background: #7038ff;
}

.auth-glow-right[b-jg18jvh8i5] {
    right: -250px;
    bottom: 0;
    background: #cb40df;
    animation-delay: -5s;
}

@keyframes authLogoFloat-b-jg18jvh8i5 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-9px) rotate(2deg);
    }
}

@keyframes authLogoPulse-b-jg18jvh8i5 {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.72;
        transform: scale(1.06);
    }
}

@keyframes authLogoRotate-b-jg18jvh8i5 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes authLogoSparkle-b-jg18jvh8i5 {
    0%, 100% {
        opacity: 0.7;
        transform: scale(0.82) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.18) rotate(45deg);
    }
}

@keyframes authCardShimmer-b-jg18jvh8i5 {
    0% {
        left: -45%;
    }

    55%, 100% {
        left: 110%;
    }
}

@keyframes authStatusAppear-b-jg18jvh8i5 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authSpinner-b-jg18jvh8i5 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes authGlowMove-b-jg18jvh8i5 {
    from {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    to {
        transform: translate3d(45px, -30px, 0) scale(1.12);
    }
}

@keyframes authPageLight-b-jg18jvh8i5 {
    from {
        transform: translateX(-4%);
    }

    to {
        transform: translateX(4%);
    }
}

@media (max-width: 850px) {
    .auth-card[b-jg18jvh8i5] {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 28px;
    }

    .auth-brand[b-jg18jvh8i5] {
        grid-row: auto;
        padding: 30px 20px;
    }

    .auth-tabs[b-jg18jvh8i5],
    .auth-form[b-jg18jvh8i5] {
        grid-column: 1;
    }

    .auth-demo-note[b-jg18jvh8i5] {
        grid-column: 1;
        margin-top: 4px;
    }
}

@media (max-width: 560px) {
    .auth-page[b-jg18jvh8i5] {
        padding: 30px 14px 130px;
    }

    .auth-card[b-jg18jvh8i5] {
        padding: 20px 14px;
        border-radius: 25px;
    }

    .auth-brand[b-jg18jvh8i5] {
        border-radius: 21px;
    }

    .auth-logo[b-jg18jvh8i5] {
        width: 84px;
        height: 84px;
        font-size: 2rem;
        border-radius: 26px;
    }

    .auth-options[b-jg18jvh8i5] {
        align-items: flex-start;
        gap: 10px;
    }

    .guest-button[b-jg18jvh8i5] {
        grid-template-columns: auto 1fr;
    }

    .guest-arrow[b-jg18jvh8i5] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page[b-jg18jvh8i5]::before,
    .auth-card[b-jg18jvh8i5]::before,
    .auth-logo[b-jg18jvh8i5],
    .auth-logo[b-jg18jvh8i5]::before,
    .auth-logo[b-jg18jvh8i5]::after,
    .auth-logo span[b-jg18jvh8i5],
    .button-spinner[b-jg18jvh8i5],
    .auth-glow[b-jg18jvh8i5] {
        animation: none;
    }
}
/* /Components/Pages/Mood.razor.rz.scp.css */
    .mood-page[b-9k7ay7bycb] {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        padding: 28px 18px 120px;
        color: #fff9ff;
        background: radial-gradient(circle at 12% 8%, rgba(157, 78, 255, 0.31), transparent 31%), radial-gradient(circle at 91% 38%, rgba(236, 98, 255, 0.19), transparent 33%), radial-gradient(circle at 45% 100%, rgba(82, 110, 255, 0.18), transparent 38%), linear-gradient(155deg, #0d071d 0%, #17102f 50%, #090717 100%);
    }

    .random-star-field[b-9k7ay7bycb] {
        position: absolute;
        z-index: 1;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .random-star[b-9k7ay7bycb] {
        position: absolute;
        top: var(--top);
        left: var(--left);
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        opacity: 0;
        background: var(--color);
        box-shadow: 0 0 calc(var(--size) * 2) var(--color), 0 0 calc(var(--size) * 5) var(--glow);
        animation: independentStarMove-b-9k7ay7bycb var(--speed) linear var(--delay) infinite, independentStarTwinkle-b-9k7ay7bycb var(--twinkle) ease-in-out var(--delay) infinite;
        will-change: transform, opacity;
    }

        .random-star:nth-child(5n)[b-9k7ay7bycb] {
            border-radius: 2px;
            transform: rotate(45deg);
        }

        .random-star:nth-child(7n)[b-9k7ay7bycb]::before,
        .random-star:nth-child(7n)[b-9k7ay7bycb]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            background: var(--color);
            transform: translate(-50%, -50%);
        }

        .random-star:nth-child(7n)[b-9k7ay7bycb]::before {
            width: calc(var(--size) * 4);
            height: 1px;
        }

        .random-star:nth-child(7n)[b-9k7ay7bycb]::after {
            width: 1px;
            height: calc(var(--size) * 4);
        }

    @keyframes independentStarMove-b-9k7ay7bycb {
        0% {
            transform: translate3d(0, 35px, 0) rotate(0deg) scale(0.7);
            opacity: 0;
        }

        8% {
            opacity: var(--opacity);
        }

        48% {
            transform: translate3d(var(--drift-x), -35px, 0) rotate(100deg) scale(1.05);
            opacity: var(--opacity);
        }

        92% {
            opacity: calc(var(--opacity) * 0.75);
        }

        100% {
            transform: translate3d(calc(var(--drift-x) * -0.6), -115px, 0) rotate(210deg) scale(0.75);
            opacity: 0;
        }
    }

    @keyframes independentStarTwinkle-b-9k7ay7bycb {
        0%, 100% {
            filter: brightness(0.65);
        }

        25% {
            filter: brightness(1.8);
        }

        50% {
            filter: brightness(0.85);
        }

        75% {
            filter: brightness(2.2);
        }
    }

        

    .mood-content[b-9k7ay7bycb] {
        position: relative;
        z-index: 2;
        width: min(850px, 100%);
        margin: auto;
    }

    .back-button[b-9k7ay7bycb] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 17px;
        padding: 8px 13px 8px 9px;
        border: 1px solid rgba(218, 177, 255, 0.25);
        border-radius: 14px;
        color: #d7c7e8;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        background: rgba(38, 24, 70, 0.62);
        box-shadow: inset 0 1px rgba(255,255,255,0.08);
        backdrop-filter: blur(12px);
        transition: 0.25s ease;
        animation: enterLeft-b-9k7ay7bycb 0.6s both;
    }

        .back-button:hover[b-9k7ay7bycb] {
            color: white;
            border-color: rgba(219, 157, 255, 0.7);
            transform: translateX(-4px);
            box-shadow: 0 0 22px rgba(172, 85, 255, 0.34);
        }

    .back-arrow[b-9k7ay7bycb] {
        font-size: 25px;
        line-height: 16px;
    }

    .mood-header[b-9k7ay7bycb] {
        margin-bottom: 23px;
        text-align: center;
        animation: headerEntrance-b-9k7ay7bycb 0.75s cubic-bezier(.18,.89,.32,1.25) both;
    }

    .header-moon[b-9k7ay7bycb] {
        position: relative;
        display: grid;
        place-items: center;
        width: 78px;
        height: 78px;
        margin: 0 auto 13px;
        border: 1px solid rgba(226, 183, 255, 0.5);
        border-radius: 26px;
        font-size: 38px;
        background: linear-gradient(145deg, rgba(149, 75, 245, 0.48), rgba(55, 30, 112, 0.52));
        box-shadow: 0 0 35px rgba(179, 83, 255, 0.55), inset 0 0 22px rgba(255,255,255,0.12);
        animation: moonFloat-b-9k7ay7bycb 3.2s ease-in-out infinite;
    }

    .moon-ring[b-9k7ay7bycb] {
        position: absolute;
        inset: -8px;
        border: 1px solid rgba(215, 161, 255, 0.25);
        border-radius: 31px;
        animation: moonRing-b-9k7ay7bycb 2.3s ease-in-out infinite;
    }

    .eyebrow[b-9k7ay7bycb],
    .step-label[b-9k7ay7bycb] {
        color: #ddaaff;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 2px;
    }

    .mood-header h1[b-9k7ay7bycb] {
        margin: 6px 0 9px;
        font-size: clamp(29px, 7vw, 46px);
        background: linear-gradient(90deg, #ffffff, #efccff, #ffe3a9);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        filter: drop-shadow(0 0 15px rgba(195, 116, 255, 0.38));
    }

    .mood-header > p:not(.eyebrow)[b-9k7ay7bycb] {
        max-width: 530px;
        margin: auto;
        color: #c5b6d7;
        font-size: 14px;
        line-height: 1.5;
    }

    .header-stats[b-9k7ay7bycb] {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 15px;
    }

    .stat-pill[b-9k7ay7bycb] {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 7px 12px;
        border: 1px solid rgba(208, 163, 255, 0.2);
        border-radius: 999px;
        color: #bfb0d1;
        font-size: 11px;
        background: rgba(34, 21, 66, 0.61);
        box-shadow: inset 0 1px rgba(255,255,255,0.06);
    }

        .stat-pill strong[b-9k7ay7bycb] {
            color: #fff;
        }

    .checkin-card[b-9k7ay7bycb],
    .history-card[b-9k7ay7bycb] {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(221, 171, 255, 0.35);
        border-radius: 28px;
        background: linear-gradient(140deg, rgba(49, 30, 89, 0.86), rgba(23, 15, 48, 0.93));
        box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 40px rgba(148, 65, 255, 0.18), inset 0 1px rgba(255,255,255,0.1);
        backdrop-filter: blur(18px);
    }

    .checkin-card[b-9k7ay7bycb] {
        padding: 23px;
        animation: cardEntrance-b-9k7ay7bycb 0.75s 0.12s cubic-bezier(.18,.89,.32,1.15) both;
    }

    .card-top-glow[b-9k7ay7bycb] {
        position: absolute;
        top: -90px;
        left: 20%;
        width: 60%;
        height: 160px;
        border-radius: 50%;
        background: rgba(190, 91, 255, 0.28);
        filter: blur(45px);
        animation: glowBreath-b-9k7ay7bycb 3s ease-in-out infinite;
    }

    .section-heading[b-9k7ay7bycb],
    .history-heading[b-9k7ay7bycb] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 17px;
    }

        .section-heading h2[b-9k7ay7bycb],
        .history-heading h2[b-9k7ay7bycb] {
            margin: 3px 0 0;
            font-size: 19px;
        }

    .selected-label[b-9k7ay7bycb],
    .optional-label[b-9k7ay7bycb],
    .history-count[b-9k7ay7bycb] {
        padding: 6px 9px;
        border: 1px solid rgba(219, 169, 255, 0.23);
        border-radius: 10px;
        color: #e4c3f8;
        font-size: 10px;
        font-weight: 800;
        background: rgba(137, 65, 216, 0.2);
    }

    .mood-grid[b-9k7ay7bycb] {
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 11px;
    }

    .mood-button[b-9k7ay7bycb] {
        position: relative;
        min-width: 0;
        min-height: 145px;
        padding: 15px 8px 12px;
        overflow: hidden;
        border: 1px solid rgba(213, 178, 244, 0.18);
        border-radius: 21px;
        color: #dfd4e9;
        cursor: pointer;
        background: linear-gradient(150deg, rgba(62, 41, 100, 0.65), rgba(28, 19, 56, 0.79));
        box-shadow: inset 0 1px rgba(255,255,255,0.07);
        transition: transform 0.28s cubic-bezier(.18,.89,.32,1.35), border-color 0.28s ease, box-shadow 0.28s ease;
    }

        .mood-button[b-9k7ay7bycb]::before {
            content: "";
            position: absolute;
            inset: -60%;
            opacity: 0;
            background: radial-gradient(circle, var(--mood-glow), transparent 55%);
            transition: opacity 0.3s ease;
        }

        .mood-button:hover[b-9k7ay7bycb] {
            transform: translateY(-7px) scale(1.035);
            border-color: var(--mood-border);
            box-shadow: 0 16px 28px rgba(0,0,0,0.3), 0 0 24px var(--mood-glow);
        }

            .mood-button:hover[b-9k7ay7bycb]::before,
            .mood-button.selected[b-9k7ay7bycb]::before {
                opacity: 0.5;
            }

        .mood-button.selected[b-9k7ay7bycb] {
            color: white;
            transform: translateY(-5px) scale(1.045);
            border-color: var(--mood-border);
            box-shadow: 0 16px 32px rgba(0,0,0,0.36), 0 0 30px var(--mood-glow), inset 0 0 22px var(--mood-glow);
        }

    .mood-orb[b-9k7ay7bycb] {
        position: relative;
        display: grid;
        place-items: center;
        width: 61px;
        height: 61px;
        margin: 0 auto 10px;
        border-radius: 19px;
        font-size: 31px;
        background: rgba(15, 9, 33, 0.58);
        box-shadow: 0 0 20px var(--mood-glow), inset 0 0 14px rgba(255,255,255,0.08);
        transition: transform 0.3s ease;
    }

    .mood-button:hover .mood-orb[b-9k7ay7bycb] {
        transform: rotate(-6deg) scale(1.13);
    }

    .mood-button.selected .mood-orb[b-9k7ay7bycb] {
        animation: selectedMood-b-9k7ay7bycb 1.8s ease-in-out infinite;
    }

    .selection-ring[b-9k7ay7bycb] {
        position: absolute;
        inset: -6px;
        border: 2px solid var(--mood-border);
        border-radius: 24px;
        opacity: 0;
    }

    .mood-button.selected .selection-ring[b-9k7ay7bycb] {
        opacity: 1;
        animation: selectionPulse-b-9k7ay7bycb 1.7s ease-out infinite;
    }

    .mood-button strong[b-9k7ay7bycb],
    .mood-button small[b-9k7ay7bycb] {
        position: relative;
        display: block;
    }

    .mood-button strong[b-9k7ay7bycb] {
        margin-bottom: 4px;
        font-size: 13px;
    }

    .mood-button small[b-9k7ay7bycb] {
        color: #a99bb9;
        font-size: 9px;
        line-height: 1.3;
    }

    .selected-check[b-9k7ay7bycb] {
        position: absolute;
        top: 8px;
        right: 8px;
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #160b29;
        font-size: 11px;
        font-weight: 900;
        opacity: 0;
        transform: scale(0);
        background: #f2d8ff;
        box-shadow: 0 0 14px var(--mood-border);
        transition: 0.25s ease;
    }

    .mood-button.selected .selected-check[b-9k7ay7bycb] {
        opacity: 1;
        transform: scale(1);
    }

    .mood-radiant[b-9k7ay7bycb] {
        --mood-glow: rgba(255, 191, 72, 0.42);
        --mood-border: rgba(255, 215, 120, 0.88);
    }

    .mood-happy[b-9k7ay7bycb] {
        --mood-glow: rgba(245, 112, 213, 0.4);
        --mood-border: rgba(255, 155, 229, 0.88);
    }

    .mood-calm[b-9k7ay7bycb] {
        --mood-glow: rgba(81, 205, 226, 0.4);
        --mood-border: rgba(139, 232, 248, 0.88);
    }

    .mood-low[b-9k7ay7bycb] {
        --mood-glow: rgba(112, 132, 255, 0.4);
        --mood-border: rgba(160, 172, 255, 0.88);
    }

    .mood-overwhelmed[b-9k7ay7bycb] {
        --mood-glow: rgba(183, 98, 255, 0.42);
        --mood-border: rgba(214, 155, 255, 0.9);
    }

    .mood-message[b-9k7ay7bycb] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 16px;
        padding: 13px 15px;
        border: 1px solid rgba(215, 167, 255, 0.24);
        border-radius: 17px;
        background: linear-gradient(100deg, rgba(140, 65, 218, 0.2), rgba(74, 45, 123, 0.11));
        animation: messageEntrance-b-9k7ay7bycb 0.42s cubic-bezier(.18,.89,.32,1.3) both;
    }

    .message-sparkle[b-9k7ay7bycb] {
        color: #e4b4ff;
        font-size: 20px;
        filter: drop-shadow(0 0 9px #bc60ff);
        animation: sparkleSpin-b-9k7ay7bycb 2.2s ease-in-out infinite;
    }

    .mood-message strong[b-9k7ay7bycb] {
        font-size: 13px;
    }

    .mood-message p[b-9k7ay7bycb] {
        margin: 4px 0 0;
        color: #bfaed0;
        font-size: 11px;
        line-height: 1.45;
    }

    .note-section[b-9k7ay7bycb] {
        position: relative;
        margin-top: 24px;
        padding-top: 22px;
        border-top: 1px solid rgba(220, 183, 255, 0.13);
    }

    .note-heading[b-9k7ay7bycb] {
        margin-bottom: 12px;
    }

    .textarea-wrapper[b-9k7ay7bycb] {
        overflow: hidden;
        border: 1px solid rgba(211, 171, 245, 0.22);
        border-radius: 19px;
        background: rgba(12, 8, 29, 0.5);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .textarea-wrapper:focus-within[b-9k7ay7bycb] {
            border-color: rgba(207, 135, 255, 0.75);
            box-shadow: 0 0 28px rgba(164, 75, 255, 0.25), inset 0 0 20px rgba(124, 59, 197, 0.1);
        }

        .textarea-wrapper textarea[b-9k7ay7bycb] {
            display: block;
            width: 100%;
            min-height: 105px;
            padding: 15px;
            resize: vertical;
            outline: none;
            border: 0;
            color: white;
            font: inherit;
            font-size: 13px;
            line-height: 1.55;
            background: transparent;
        }

            .textarea-wrapper textarea[b-9k7ay7bycb]::placeholder {
                color: #81758f;
            }

    .textarea-footer[b-9k7ay7bycb] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 14px;
        border-top: 1px solid rgba(218, 180, 255, 0.1);
        color: #8f819e;
        font-size: 9px;
        background: rgba(32, 20, 57, 0.48);
    }

    .save-button[b-9k7ay7bycb] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        margin-top: 19px;
        padding: 14px 18px;
        overflow: hidden;
        border: 1px solid rgba(204, 174, 225, 0.16);
        border-radius: 17px;
        color: #8e819a;
        font-size: 13px;
        font-weight: 850;
        cursor: not-allowed;
        background: rgba(72, 55, 88, 0.34);
        transition: 0.3s ease;
    }

        .save-button.ready[b-9k7ay7bycb] {
            color: white;
            cursor: pointer;
            border-color: rgba(238, 199, 255, 0.5);
            background: linear-gradient(135deg, #aa5eff, #6d2ce7);
            box-shadow: 0 0 29px rgba(167, 79, 255, 0.52), inset 0 1px rgba(255,255,255,0.18);
        }

            .save-button.ready:hover[b-9k7ay7bycb] {
                transform: translateY(-4px) scale(1.015);
                box-shadow: 0 12px 28px rgba(0,0,0,0.3), 0 0 43px rgba(203, 110, 255, 0.82);
            }

            .save-button.ready:active[b-9k7ay7bycb] {
                transform: scale(0.975);
            }

    .button-glow[b-9k7ay7bycb] {
        position: absolute;
        top: -50%;
        left: -60%;
        width: 35%;
        height: 200%;
        transform: rotate(25deg);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.26), transparent);
    }

    .save-button.ready .button-glow[b-9k7ay7bycb] {
        animation: buttonShine-b-9k7ay7bycb 3.5s ease-in-out infinite;
    }

    .save-icon[b-9k7ay7bycb],
    .save-arrow[b-9k7ay7bycb],
    .save-button > span:not(.button-glow)[b-9k7ay7bycb] {
        position: relative;
    }

    .save-icon[b-9k7ay7bycb] {
        color: #ffe9ad;
        animation: sparkleSpin-b-9k7ay7bycb 2s ease-in-out infinite;
    }

    .save-arrow[b-9k7ay7bycb] {
        transition: transform 0.25s ease;
    }

    .save-button:hover .save-arrow[b-9k7ay7bycb] {
        transform: translateX(5px);
    }

    .save-hint[b-9k7ay7bycb] {
        margin: 9px 0 0;
        color: #8f819c;
        font-size: 10px;
        text-align: center;
    }

    .saving-spinner[b-9k7ay7bycb] {
        width: 17px;
        height: 17px;
        border: 2px solid rgba(255,255,255,0.25);
        border-top-color: white;
        border-radius: 50%;
        animation: spin-b-9k7ay7bycb 0.7s linear infinite;
    }

    .history-card[b-9k7ay7bycb] {
        margin-top: 18px;
        padding: 21px;
        animation: cardEntrance-b-9k7ay7bycb 0.65s cubic-bezier(.18,.89,.32,1.15) both;
    }

    .history-list[b-9k7ay7bycb] {
        display: grid;
        gap: 9px;
    }

    .history-item[b-9k7ay7bycb] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid rgba(213, 170, 245, 0.12);
        border-radius: 17px;
        background: rgba(18, 12, 38, 0.46);
        transition: 0.25s ease;
    }

        .history-item:hover[b-9k7ay7bycb] {
            transform: translateX(4px);
            border-color: rgba(212, 155, 255, 0.4);
            box-shadow: 0 0 20px rgba(141, 63, 220, 0.18);
        }

    .history-icon[b-9k7ay7bycb] {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 23px;
        background: rgba(38, 24, 67, 0.8);
        box-shadow: 0 0 16px var(--mood-glow);
    }

    .history-details[b-9k7ay7bycb] {
        min-width: 0;
    }

    .history-title[b-9k7ay7bycb] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
    }

        .history-title strong[b-9k7ay7bycb] {
            font-size: 12px;
        }

        .history-title span[b-9k7ay7bycb],
        .history-item time[b-9k7ay7bycb] {
            color: #9587a3;
            font-size: 9px;
        }

    .history-details p[b-9k7ay7bycb] {
        margin: 4px 0 0;
        overflow: hidden;
        color: #b5a6c3;
        font-size: 10px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .history-details .empty-note[b-9k7ay7bycb] {
        color: #776d81;
        font-style: italic;
    }

    .garden-message[b-9k7ay7bycb] {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 22px;
        color: #9e8caf;
        font-size: 11px;
        text-align: center;
        animation: cardEntrance-b-9k7ay7bycb 0.7s 0.5s both;
    }

        .garden-message span[b-9k7ay7bycb] {
            animation: plantBounce-b-9k7ay7bycb 2.3s ease-in-out infinite;
        }

    .aurora[b-9k7ay7bycb] {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(75px);
        animation: auroraMove-b-9k7ay7bycb 9s ease-in-out infinite alternate;
    }

    .aurora-one[b-9k7ay7bycb] {
        top: 6%;
        left: -170px;
        width: 330px;
        height: 330px;
        background: rgba(119, 60, 255, 0.36);
    }

    .aurora-two[b-9k7ay7bycb] {
        top: 42%;
        right: -190px;
        width: 350px;
        height: 350px;
        background: rgba(225, 68, 255, 0.25);
        animation-delay: -3s;
    }

    .aurora-three[b-9k7ay7bycb] {
        bottom: -170px;
        left: 25%;
        width: 370px;
        height: 300px;
        background: rgba(75, 105, 255, 0.19);
        animation-delay: -6s;
    }

    .floating-shape[b-9k7ay7bycb] {
        position: absolute;
        z-index: 1;
        color: #ecc7ff;
        pointer-events: none;
        filter: drop-shadow(0 0 9px #bb5cff);
        animation: floatingSparkle-b-9k7ay7bycb 5s ease-in-out infinite;
    }

    .shape-one[b-9k7ay7bycb] {
        top: 7%;
        right: 10%;
        font-size: 18px;
    }

    .shape-two[b-9k7ay7bycb] {
        top: 24%;
        left: 4%;
        font-size: 12px;
        animation-delay: -1s;
    }

    .shape-three[b-9k7ay7bycb] {
        top: 47%;
        right: 4%;
        font-size: 16px;
        animation-delay: -2s;
    }

    .shape-four[b-9k7ay7bycb] {
        top: 66%;
        left: 5%;
        font-size: 14px;
        animation-delay: -3s;
    }

    .shape-five[b-9k7ay7bycb] {
        bottom: 12%;
        right: 9%;
        font-size: 13px;
        animation-delay: -4s;
    }

    .shape-six[b-9k7ay7bycb] {
        bottom: 5%;
        left: 15%;
        font-size: 17px;
        animation-delay: -2.5s;
    }

    .save-overlay[b-9k7ay7bycb] {
        position: fixed;
        z-index: 1000;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(7, 4, 17, 0.72);
        backdrop-filter: blur(9px);
        animation: overlayEntrance-b-9k7ay7bycb 0.3s both;
    }

    .saved-popup[b-9k7ay7bycb] {
        position: relative;
        width: min(330px, 100%);
        padding: 31px 22px;
        border: 1px solid rgba(234, 195, 255, 0.55);
        border-radius: 28px;
        text-align: center;
        background: radial-gradient(circle at 50% 0%, rgba(193, 100, 255, 0.36), transparent 55%), linear-gradient(145deg, #302052, #17102d);
        box-shadow: 0 25px 70px rgba(0,0,0,0.55), 0 0 55px rgba(184, 81, 255, 0.55), inset 0 1px rgba(255,255,255,0.16);
        animation: popupEntrance-b-9k7ay7bycb 0.55s cubic-bezier(.18,.89,.32,1.35) both;
    }

    .saved-icon[b-9k7ay7bycb] {
        display: grid;
        place-items: center;
        width: 68px;
        height: 68px;
        margin: 0 auto 14px;
        border-radius: 22px;
        color: #26113e;
        font-size: 32px;
        font-weight: 900;
        background: linear-gradient(135deg, #e5bbff, #f9e5ff);
        box-shadow: 0 0 35px rgba(222, 159, 255, 0.8);
        animation: successPulse-b-9k7ay7bycb 1.5s ease-in-out infinite;
    }

    .saved-popup h2[b-9k7ay7bycb] {
        margin: 0 0 7px;
        font-size: 24px;
    }

    .saved-popup p[b-9k7ay7bycb] {
        margin: 0;
        color: #c6b2d7;
        font-size: 13px;
    }

    .reward-text[b-9k7ay7bycb] {
        display: inline-block;
        margin-top: 16px;
        padding: 7px 12px;
        border: 1px solid rgba(255, 225, 147, 0.3);
        border-radius: 999px;
        color: #ffe6a0;
        font-size: 11px;
        font-weight: 850;
        background: rgba(188, 134, 46, 0.16);
        box-shadow: 0 0 18px rgba(255, 206, 92, 0.2);
    }

    .celebration[b-9k7ay7bycb] {
        position: fixed;
        z-index: 1001;
        color: #f4ccff;
        font-size: 25px;
        filter: drop-shadow(0 0 12px #c05fff);
        animation: celebrationBurst-b-9k7ay7bycb 1.4s ease-out infinite;
    }

    .celebration-one[b-9k7ay7bycb] {
        top: 27%;
        left: 29%;
    }

    .celebration-two[b-9k7ay7bycb] {
        top: 31%;
        right: 29%;
        animation-delay: -0.25s;
    }

    .celebration-three[b-9k7ay7bycb] {
        bottom: 28%;
        left: 31%;
        animation-delay: -0.5s;
    }

    .celebration-four[b-9k7ay7bycb] {
        bottom: 32%;
        right: 30%;
        animation-delay: -0.75s;
    }

    .celebration-five[b-9k7ay7bycb] {
        top: 18%;
        left: 49%;
        animation-delay: -1s;
    }

    @keyframes headerEntrance-b-9k7ay7bycb {
        from {
            opacity: 0;
            transform: translateY(-24px) scale(0.93);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes cardEntrance-b-9k7ay7bycb {
        from {
            opacity: 0;
            transform: translateY(32px) scale(0.94);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes enterLeft-b-9k7ay7bycb {
        from {
            opacity: 0;
            transform: translateX(20px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes messageEntrance-b-9k7ay7bycb {
        from {
            opacity: 0;
            transform: translateY(-8px) scale(0.96);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes moonFloat-b-9k7ay7bycb {
        0%, 100% {
            transform: translateY(0) rotate(-3deg);
        }

        50% {
            transform: translateY(-8px) rotate(4deg);
        }
    }

    @keyframes moonRing-b-9k7ay7bycb {
        0%, 100% {
            transform: scale(0.94);
            opacity: 0.3;
        }

        50% {
            transform: scale(1.12);
            opacity: 0.9;
        }
    }

    @keyframes selectedMood-b-9k7ay7bycb {
        0%, 100% {
            transform: scale(1) rotate(-2deg);
        }

        50% {
            transform: scale(1.09) rotate(3deg);
        }
    }

    @keyframes selectionPulse-b-9k7ay7bycb {
        0% {
            transform: scale(0.9);
            opacity: 0.9;
        }

        100% {
            transform: scale(1.22);
            opacity: 0;
        }
    }

    @keyframes glowBreath-b-9k7ay7bycb {
        0%, 100% {
            transform: scale(0.85);
            opacity: 0.35;
        }

        50% {
            transform: scale(1.2);
            opacity: 0.85;
        }
    }

    @keyframes sparkleSpin-b-9k7ay7bycb {
        0%, 100% {
            transform: rotate(0deg) scale(0.85);
        }

        50% {
            transform: rotate(180deg) scale(1.22);
        }
    }

    @keyframes floatingSparkle-b-9k7ay7bycb {
        0%, 100% {
            transform: translateY(0) rotate(0deg) scale(0.75);
            opacity: 0.25;
        }

        50% {
            transform: translateY(-22px) rotate(180deg) scale(1.35);
            opacity: 1;
        }
    }

    @keyframes auroraMove-b-9k7ay7bycb {
        from {
            transform: translate3d(-20px, -15px, 0) scale(0.85);
        }

        to {
            transform: translate3d(40px, 30px, 0) scale(1.18);
        }
    }

    @keyframes buttonShine-b-9k7ay7bycb {
        0%, 55% {
            left: -60%;
        }

        85%, 100% {
            left: 140%;
        }
    }

    

    @keyframes plantBounce-b-9k7ay7bycb {
        0%, 100% {
            transform: translateY(0) rotate(-3deg);
        }

        50% {
            transform: translateY(-4px) rotate(4deg);
        }
    }

    @keyframes spin-b-9k7ay7bycb {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes overlayEntrance-b-9k7ay7bycb {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes popupEntrance-b-9k7ay7bycb {
        from {
            opacity: 0;
            transform: translateY(25px) scale(0.72);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes successPulse-b-9k7ay7bycb {
        0%, 100% {
            transform: scale(1) rotate(-3deg);
        }

        50% {
            transform: scale(1.1) rotate(3deg);
        }
    }

    @keyframes celebrationBurst-b-9k7ay7bycb {
        0% {
            transform: translateY(15px) scale(0.5) rotate(0deg);
            opacity: 0;
        }

        45% {
            opacity: 1;
        }

        100% {
            transform: translateY(-45px) scale(1.35) rotate(180deg);
            opacity: 0;
        }
    }

    @media (max-width: 700px) {
        .mood-page[b-9k7ay7bycb] {
            padding: 22px 14px 110px;
        }

        .checkin-card[b-9k7ay7bycb],
        .history-card[b-9k7ay7bycb] {
            padding: 17px;
            border-radius: 23px;
        }

        .mood-grid[b-9k7ay7bycb] {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .mood-button[b-9k7ay7bycb] {
            min-height: 137px;
        }
    }

    @media (max-width: 420px) {
        .mood-grid[b-9k7ay7bycb] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .mood-button:last-child[b-9k7ay7bycb] {
            grid-column: 1 / -1;
        }

        .history-item[b-9k7ay7bycb] {
            grid-template-columns: auto 1fr;
        }

            .history-item time[b-9k7ay7bycb] {
                display: none;
            }

        .textarea-footer[b-9k7ay7bycb] {
            align-items: flex-end;
            flex-direction: column;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mood-page *[b-9k7ay7bycb],
        .mood-page *[b-9k7ay7bycb]::before,
        .mood-page *[b-9k7ay7bycb]::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
        }
    }
/* /Components/Pages/More.razor.rz.scp.css */
.featured-content h2[b-2t1crn6dmg] {
    color: #fff9f5;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.18);
}
/* AI Mindset Coach card */
.ai-coach-menu-card[b-2t1crn6dmg] {
    grid-column: 1 / -1;
    min-height: 145px;
    background: radial-gradient(circle at 12% 50%, rgba(169, 91, 255, 0.28), transparent 30%), linear-gradient(120deg, rgba(68, 35, 122, 0.92), rgba(26, 19, 61, 0.95));
    border-color: rgba(203, 164, 255, 0.48);
    box-shadow: 0 18px 45px rgba(11, 5, 32, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

    .ai-coach-menu-card[b-2t1crn6dmg]::after {
        position: absolute;
        top: -80px;
        right: 8%;
        width: 180px;
        height: 180px;
        pointer-events: none;
        content: "";
        background: rgba(163, 83, 255, 0.18);
        border-radius: 50%;
        filter: blur(38px);
        animation: aiCardGlow-b-2t1crn6dmg 5s ease-in-out infinite alternate;
    }

    .ai-coach-menu-card:hover[b-2t1crn6dmg] {
        border-color: rgba(220, 192, 255, 0.78);
        box-shadow: 0 22px 55px rgba(56, 18, 113, 0.38), 0 0 30px rgba(145, 72, 255, 0.18);
    }

.ai-menu-icon[b-2t1crn6dmg] {
    color: #ffffff;
    background: radial-gradient(circle at 35% 30%, #ffffff, transparent 16%), linear-gradient(145deg, #a75dff, #5723aa);
    box-shadow: 0 0 20px rgba(188, 126, 255, 0.52), 0 0 45px rgba(125, 56, 225, 0.25);
    animation: aiMenuIconFloat-b-2t1crn6dmg 3.8s ease-in-out infinite;
}

.ai-card-label[b-2t1crn6dmg] {
    display: inline-block;
    margin-bottom: 5px;
    color: #d5b7ff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

@keyframes aiMenuIconFloat-b-2t1crn6dmg {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(8deg);
    }
}

@keyframes aiCardGlow-b-2t1crn6dmg {
    from {
        opacity: 0.45;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1.15);
    }
}

@media (max-width: 700px) {
    .ai-coach-menu-card[b-2t1crn6dmg] {
        grid-column: auto;
        min-height: 130px;
    }
}
/* /Components/Pages/Progress.razor.rz.scp.css */
.progress-page[b-hd0a02tw2r] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    color: #fffaf2;
    background: radial-gradient(circle at 15% 12%, rgba(157, 113, 255, 0.25), transparent 32%), radial-gradient(circle at 90% 28%, rgba(255, 137, 191, 0.17), transparent 30%), radial-gradient(circle at 50% 100%, rgba(72, 178, 132, 0.16), transparent 38%), linear-gradient(160deg, #211941 0%, #17122f 52%, #100d24 100%);
    font-family: "Segoe UI", sans-serif;
    isolation: isolate;
}

    /* Background texture */

    .progress-page[b-hd0a02tw2r]::before,
    .progress-page[b-hd0a02tw2r]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    /* Small stars — irregularly scattered */
    .progress-page[b-hd0a02tw2r]::before {
        z-index: 0;
        opacity: 0.42;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1.7px), radial-gradient(circle, rgba(224, 197, 255, 0.65) 1.2px, transparent 2px), radial-gradient(circle, rgba(255, 220, 244, 0.48) 0.8px, transparent 1.5px);
        background-size: 173px 211px, 257px 183px, 319px 271px;
        background-position: 21px 37px, 113px 79px, 52px 164px;
        animation: smallStarsDrift-b-hd0a02tw2r 28s linear infinite;
    }

    /* Larger stars — much farther apart */
    .progress-page[b-hd0a02tw2r]::after {
        z-index: 0;
        opacity: 0.55;
        background-image: radial-gradient(circle, rgba(255, 244, 255, 0.85) 1.6px, transparent 2.7px), radial-gradient(circle, rgba(202, 168, 255, 0.7) 1.3px, transparent 2.4px);
        background-size: 421px 367px, 533px 449px;
        background-position: 76px 124px, 291px 48px;
        animation: largeStarsDrift-b-hd0a02tw2r 38s ease-in-out infinite alternate;
    }

/* Soft moving background glows */

.progress-glow[b-hd0a02tw2r] {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(25px);
    pointer-events: none;
    animation: glowFloat-b-hd0a02tw2r 8s ease-in-out infinite;
}

.glow-one[b-hd0a02tw2r] {
    top: 160px;
    left: -130px;
    width: 310px;
    height: 310px;
    background: rgba(154, 104, 255, 0.22);
}

.glow-two[b-hd0a02tw2r] {
    top: 620px;
    right: -160px;
    width: 350px;
    height: 350px;
    background: rgba(255, 140, 194, 0.16);
    animation-delay: -4s;
}

/* Floating sparkles */

.floating-sparkle[b-hd0a02tw2r] {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    color: #f2d8ff;
    text-shadow: 0 0 8px rgba(241, 210, 255, 0.9), 0 0 18px rgba(190, 131, 255, 0.8);
    animation: sparkleFloat-b-hd0a02tw2r 5s ease-in-out infinite;
}

.sparkle-one[b-hd0a02tw2r] {
    top: 135px;
    right: 9%;
    font-size: 22px;
}

.sparkle-two[b-hd0a02tw2r] {
    top: 460px;
    left: 5%;
    font-size: 16px;
    animation-delay: -1.8s;
}

.sparkle-three[b-hd0a02tw2r] {
    top: 900px;
    right: 5%;
    font-size: 20px;
    animation-delay: -3.2s;
}

/* Header */

.progress-header[b-hd0a02tw2r] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px 1fr 48px;
    align-items: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 18px;
    animation: slideDown-b-hd0a02tw2r 0.65s ease both;
}

    .progress-header h1[b-hd0a02tw2r] {
        margin: 2px 0 0;
        color: #fffaf5;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(30px, 5vw, 42px);
        line-height: 1;
        letter-spacing: -0.5px;
    }

.page-label[b-hd0a02tw2r],
.eyebrow[b-hd0a02tw2r] {
    margin: 0;
    color: #c8a9ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.back-button[b-hd0a02tw2r] {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(226, 203, 255, 0.22);
    border-radius: 14px;
    color: #fff9ff;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 25px rgba(7, 4, 25, 0.25);
    text-decoration: none;
    font-size: 23px;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .back-button:hover[b-hd0a02tw2r] {
        color: white;
        background: rgba(166, 119, 255, 0.22);
        box-shadow: 0 0 22px rgba(174, 126, 255, 0.3);
        transform: translateX(-3px);
    }

.header-icon[b-hd0a02tw2r] {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(199, 246, 213, 0.22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(82, 177, 124, 0.24), rgba(115, 87, 186, 0.17));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 25px rgba(88, 203, 139, 0.12);
    font-size: 23px;
    animation: leafPulse-b-hd0a02tw2r 3s ease-in-out infinite;
}

/* Main content */

.progress-content[b-hd0a02tw2r] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: min(100% - 32px, 900px);
    margin: 0 auto;
    padding-bottom: 120px;
}

/* Level card */

.level-card[b-hd0a02tw2r],
.progress-card[b-hd0a02tw2r],
.encouragement-card[b-hd0a02tw2r] {
    border: 1px solid rgba(225, 207, 255, 0.14);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 18px 45px rgba(5, 3, 20, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.level-card[b-hd0a02tw2r] {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 26px;
    animation: cardEntrance-b-hd0a02tw2r 0.7s 0.08s ease both;
}

    .level-card[b-hd0a02tw2r]::after {
        content: "";
        position: absolute;
        top: -80px;
        right: -60px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200, 156, 255, 0.25), transparent 70%);
        pointer-events: none;
        animation: levelGlow-b-hd0a02tw2r 4s ease-in-out infinite;
    }

.level-top[b-hd0a02tw2r] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
}

.level-badge[b-hd0a02tw2r] {
    display: flex;
    width: 78px;
    height: 78px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(231, 206, 255, 0.45);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(171, 118, 255, 0.45), rgba(96, 69, 169, 0.35));
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.12), 0 0 28px rgba(172, 119, 255, 0.22);
}

    .level-badge span[b-hd0a02tw2r] {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
    }

    .level-badge small[b-hd0a02tw2r] {
        margin-top: 5px;
        color: #e8d8ff;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }

.level-details h2[b-hd0a02tw2r],
.section-heading h2[b-hd0a02tw2r],
.encouragement-card h2[b-hd0a02tw2r] {
    margin: 4px 0 5px;
    color: #fff9f4;
    font-family: Georgia, "Times New Roman", serif;
}

.level-details h2[b-hd0a02tw2r] {
    font-size: clamp(20px, 4vw, 27px);
}

.level-details > p:last-child[b-hd0a02tw2r],
.encouragement-card > div > p:last-child[b-hd0a02tw2r] {
    margin: 0;
    color: #c9c2d9;
    font-size: 13px;
    line-height: 1.55;
}

.streak-badge[b-hd0a02tw2r] {
    display: flex;
    min-width: 78px;
    padding: 10px 9px;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255, 189, 128, 0.2);
    border-radius: 18px;
    background: rgba(255, 150, 99, 0.09);
}

    .streak-badge span[b-hd0a02tw2r] {
        font-size: 21px;
        animation: flameBounce-b-hd0a02tw2r 1.8s ease-in-out infinite;
    }

    .streak-badge strong[b-hd0a02tw2r] {
        margin-top: 2px;
        color: #ffe1bc;
        font-size: 19px;
    }

    .streak-badge small[b-hd0a02tw2r] {
        color: #c8bfcd;
        font-size: 9px;
    }

/* XP bar */

.xp-heading[b-hd0a02tw2r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 23px 0 9px;
    color: #d7cfdf;
    font-size: 11px;
}

    .xp-heading strong[b-hd0a02tw2r] {
        color: #f2ddff;
        font-size: 11px;
    }

.xp-track[b-hd0a02tw2r] {
    position: relative;
    height: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(7, 5, 25, 0.48);
    box-shadow: inset 0 2px 5px rgba(2, 1, 12, 0.45);
}

.xp-fill[b-hd0a02tw2r] {
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7a59e8, #b577f2 48%, #f2a1cf 100%);
    box-shadow: 0 0 12px rgba(184, 118, 246, 0.8), 0 0 25px rgba(232, 145, 216, 0.35);
    transform-origin: left;
    animation: fillProgress-b-hd0a02tw2r 1.8s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.xp-shine[b-hd0a02tw2r] {
    position: absolute;
    top: 0;
    left: -30%;
    width: 25%;
    height: 100%;
    opacity: 0.8;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent );
    transform: skewX(-20deg);
    animation: xpShine-b-hd0a02tw2r 3s 1.4s ease-in-out infinite;
}

.xp-message[b-hd0a02tw2r] {
    margin: 10px 0 0;
    color: #bdb4ca;
    font-size: 10px;
    text-align: right;
}

/* Statistics */

.stats-grid[b-hd0a02tw2r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stat-card[b-hd0a02tw2r] {
    display: flex;
    min-height: 142px;
    padding: 17px 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(223, 204, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.065);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 30px rgba(5, 3, 20, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: cardEntrance-b-hd0a02tw2r 0.65s ease both;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .stat-card:nth-child(1)[b-hd0a02tw2r] {
        animation-delay: 0.15s;
    }

    .stat-card:nth-child(2)[b-hd0a02tw2r] {
        animation-delay: 0.23s;
    }

    .stat-card:nth-child(3)[b-hd0a02tw2r] {
        animation-delay: 0.31s;
    }

    .stat-card:nth-child(4)[b-hd0a02tw2r] {
        animation-delay: 0.39s;
    }

    .stat-card:hover[b-hd0a02tw2r] {
        border-color: rgba(208, 168, 255, 0.32);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 16px 35px rgba(10, 6, 32, 0.3), 0 0 22px rgba(165, 110, 239, 0.11);
        transform: translateY(-5px);
    }

.stat-icon[b-hd0a02tw2r] {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    place-items: center;
    border-radius: 15px;
    font-size: 21px;
}

    .stat-icon.purple[b-hd0a02tw2r] {
        background: rgba(161, 114, 247, 0.2);
        box-shadow: 0 0 18px rgba(161, 114, 247, 0.14);
    }

    .stat-icon.pink[b-hd0a02tw2r] {
        background: rgba(244, 129, 181, 0.17);
        box-shadow: 0 0 18px rgba(244, 129, 181, 0.13);
    }

    .stat-icon.green[b-hd0a02tw2r] {
        background: rgba(92, 198, 142, 0.17);
        box-shadow: 0 0 18px rgba(92, 198, 142, 0.13);
    }

    .stat-icon.gold[b-hd0a02tw2r] {
        background: rgba(240, 190, 100, 0.18);
        box-shadow: 0 0 18px rgba(240, 190, 100, 0.13);
    }

.stat-card strong[b-hd0a02tw2r] {
    color: #fff9f3;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
}

.stat-card span:last-child[b-hd0a02tw2r] {
    margin-top: 4px;
    color: #bfb7cb;
    font-size: 10px;
    text-align: center;
}

/* Shared progress cards */

.progress-card[b-hd0a02tw2r] {
    padding: 22px;
    border-radius: 26px;
}

.weekly-card[b-hd0a02tw2r] {
    animation: cardEntrance-b-hd0a02tw2r 0.7s 0.46s ease both;
}

.achievements-card[b-hd0a02tw2r] {
    animation: cardEntrance-b-hd0a02tw2r 0.7s 0.54s ease both;
}

.section-heading[b-hd0a02tw2r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .section-heading h2[b-hd0a02tw2r] {
        font-size: 22px;
    }

.week-total[b-hd0a02tw2r],
.achievement-count[b-hd0a02tw2r] {
    padding: 7px 11px;
    border: 1px solid rgba(210, 181, 255, 0.15);
    border-radius: 999px;
    color: #d7c1f8;
    background: rgba(162, 112, 233, 0.1);
    font-size: 9px;
    white-space: nowrap;
}

/* Weekly chart */

.activity-chart[b-hd0a02tw2r] {
    display: grid;
    height: 180px;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 10px;
    margin-top: 22px;
    padding: 18px 15px 10px;
    border-radius: 20px;
    background: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 38px;
}

.day-column[b-hd0a02tw2r] {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.activity-bar[b-hd0a02tw2r] {
    width: min(100%, 28px);
    min-height: 18px;
    border-radius: 10px 10px 5px 5px;
    background: linear-gradient(180deg, #d59af5, #8764e5);
    box-shadow: 0 0 12px rgba(182, 126, 239, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform-origin: bottom;
    animation: growBar-b-hd0a02tw2r 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.day-column:nth-child(1) .activity-bar[b-hd0a02tw2r] {
    animation-delay: 0.58s;
}

.day-column:nth-child(2) .activity-bar[b-hd0a02tw2r] {
    animation-delay: 0.66s;
}

.day-column:nth-child(3) .activity-bar[b-hd0a02tw2r] {
    animation-delay: 0.74s;
}

.day-column:nth-child(4) .activity-bar[b-hd0a02tw2r] {
    animation-delay: 0.82s;
}

.day-column:nth-child(5) .activity-bar[b-hd0a02tw2r] {
    animation-delay: 0.9s;
}

.height-60[b-hd0a02tw2r] {
    height: 60%;
}

.height-85[b-hd0a02tw2r] {
    height: 85%;
}

.height-45[b-hd0a02tw2r] {
    height: 45%;
}

.height-95[b-hd0a02tw2r] {
    height: 95%;
}

.height-70[b-hd0a02tw2r] {
    height: 70%;
}

.height-25[b-hd0a02tw2r] {
    height: 25%;
}

.activity-bar.inactive[b-hd0a02tw2r] {
    opacity: 0.26;
    background: linear-gradient(180deg, #8e849e, #575065);
    box-shadow: none;
}

.activity-bar.today[b-hd0a02tw2r] {
    outline: 2px solid rgba(255, 218, 133, 0.5);
    outline-offset: 2px;
}

.day-column span[b-hd0a02tw2r] {
    color: #aaa2b7;
    font-size: 9px;
}

.weekly-data-note[b-hd0a02tw2r] {
    margin: 12px 0 0;
    color: #aaa2b7;
    font-size: 10px;
    text-align: right;
}

.progress-feature-state[b-hd0a02tw2r],
.subscription-feature-lock[b-hd0a02tw2r] {
    display: flex;
    min-height: 116px;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(204, 174, 255, 0.2);
    border-radius: 20px;
    color: #e8ddf7;
    background: linear-gradient(145deg, rgba(81, 58, 129, 0.26), rgba(26, 22, 52, 0.55));
}

.progress-feature-state > span[b-hd0a02tw2r],
.feature-lock-icon[b-hd0a02tw2r] {
    display: grid;
    flex: 0 0 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    color: #e6d5ff;
    background: rgba(151, 98, 238, 0.2);
    box-shadow: 0 0 20px rgba(144, 91, 232, 0.14);
}

.progress-feature-error[b-hd0a02tw2r] {
    color: #ffe4e6;
    border-color: rgba(251, 113, 133, 0.28);
    background: rgba(127, 29, 29, 0.24);
}

.subscription-feature-lock > div[b-hd0a02tw2r] {
    min-width: 0;
}

.subscription-feature-lock strong[b-hd0a02tw2r] {
    display: block;
    color: #ffffff;
    font-size: 14px;
}

.subscription-feature-lock p[b-hd0a02tw2r] {
    margin: 5px 0 0;
    color: #aaa2b7;
    font-size: 11px;
    line-height: 1.5;
}

.subscription-feature-lock a[b-hd0a02tw2r] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 9px 13px;
    border: 1px solid rgba(213, 185, 255, 0.35);
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #7654cf, #51368f);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 9px 20px rgba(50, 30, 98, 0.26);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

    .subscription-feature-lock a:hover[b-hd0a02tw2r] {
        transform: translateY(-2px);
        border-color: rgba(230, 211, 255, 0.7);
    }

/* Achievements */

.achievement-list[b-hd0a02tw2r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.achievement-item[b-hd0a02tw2r] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 13px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

    .achievement-item.unlocked:hover[b-hd0a02tw2r] {
        border-color: rgba(201, 165, 255, 0.27);
        background: rgba(186, 136, 244, 0.09);
        transform: translateX(4px);
    }

    .achievement-item.unlocked[b-hd0a02tw2r]::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 55%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.07), transparent );
        animation: achievementShine-b-hd0a02tw2r 5s ease-in-out infinite;
    }

.achievement-icon[b-hd0a02tw2r] {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(190, 139, 250, 0.19), rgba(108, 84, 174, 0.12));
    font-size: 21px;
}

.achievement-item strong[b-hd0a02tw2r] {
    display: block;
    color: #f9f3ff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}

.achievement-item p[b-hd0a02tw2r] {
    margin: 4px 0 0;
    color: #aaa2b7;
    font-size: 10px;
}

.achievement-check[b-hd0a02tw2r] {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    color: #dffbe9;
    background: rgba(87, 194, 132, 0.2);
    box-shadow: 0 0 15px rgba(87, 194, 132, 0.15);
    font-size: 13px;
}

.achievement-item.locked[b-hd0a02tw2r] {
    opacity: 0.48;
    filter: grayscale(0.4);
}

.achievement-lock[b-hd0a02tw2r] {
    font-size: 14px;
}

/* Encouragement */

.encouragement-card[b-hd0a02tw2r] {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 21px;
    border-color: rgba(135, 222, 167, 0.15);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(66, 163, 110, 0.12), rgba(163, 111, 220, 0.08));
    animation: cardEntrance-b-hd0a02tw2r 0.7s 0.62s ease both;
}

.encouragement-leaf[b-hd0a02tw2r] {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border: 1px solid rgba(155, 234, 184, 0.18);
    border-radius: 19px;
    background: rgba(70, 169, 113, 0.14);
    box-shadow: 0 0 25px rgba(74, 190, 124, 0.12);
    font-size: 28px;
    animation: leafSway-b-hd0a02tw2r 3s ease-in-out infinite;
}

.encouragement-card h2[b-hd0a02tw2r] {
    font-size: 20px;
}

/* Animations */

@keyframes slideDown-b-hd0a02tw2r {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardEntrance-b-hd0a02tw2r {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fillProgress-b-hd0a02tw2r {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes xpShine-b-hd0a02tw2r {
    0% {
        left: -30%;
    }

    55%, 100% {
        left: 110%;
    }
}

@keyframes growBar-b-hd0a02tw2r {
    from {
        opacity: 0;
        transform: scaleY(0);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes sparkleFloat-b-hd0a02tw2r {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(0) rotate(0deg) scale(0.85);
    }

    50% {
        opacity: 1;
        transform: translateY(-18px) rotate(18deg) scale(1.15);
    }
}

@keyframes glowFloat-b-hd0a02tw2r {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(22px, -24px, 0) scale(1.08);
    }
}

@keyframes levelGlow-b-hd0a02tw2r {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.14);
    }
}

@keyframes flameBounce-b-hd0a02tw2r {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-4px) rotate(4deg) scale(1.08);
    }
}

@keyframes leafPulse-b-hd0a02tw2r {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(88, 203, 139, 0.1);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 28px rgba(88, 203, 139, 0.23);
    }
}

@keyframes leafSway-b-hd0a02tw2r {
    0%, 100% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(5deg) translateY(-3px);
    }
}

@keyframes achievementShine-b-hd0a02tw2r {
    0%, 60% {
        left: -100%;
    }

    100% {
        left: 140%;
    }
}

@keyframes smallStarsDrift-b-hd0a02tw2r {
    from {
        background-position: 21px 37px, 113px 79px, 52px 164px;
    }

    to {
        background-position: 58px 104px, 71px 143px, 106px 221px;
    }
}

@keyframes largeStarsDrift-b-hd0a02tw2r {
    0% {
        background-position: 76px 124px, 291px 48px;
        transform: translateY(0);
    }

    50% {
        opacity: 0.75;
    }

    100% {
        background-position: 118px 67px, 245px 116px;
        transform: translateY(-18px);
    }
}

/* Mobile layout */

@media (max-width: 700px) {
    .progress-header[b-hd0a02tw2r] {
        padding: 24px 16px 16px;
    }

    .progress-content[b-hd0a02tw2r] {
        width: min(100% - 24px, 900px);
    }

    .level-top[b-hd0a02tw2r] {
        grid-template-columns: auto 1fr;
    }

    .streak-badge[b-hd0a02tw2r] {
        grid-column: 1 / -1;
        display: grid;
        min-width: 0;
        grid-template-columns: auto auto auto;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
    }

        .streak-badge span[b-hd0a02tw2r],
        .streak-badge strong[b-hd0a02tw2r],
        .streak-badge small[b-hd0a02tw2r] {
            margin: 0;
            align-self: center;
        }

    .stats-grid[b-hd0a02tw2r] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card[b-hd0a02tw2r] {
        min-height: 125px;
    }

    .subscription-feature-lock[b-hd0a02tw2r] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

        .subscription-feature-lock a[b-hd0a02tw2r] {
            margin-left: 58px;
        }
}

@media (max-width: 430px) {
    .progress-header[b-hd0a02tw2r] {
        grid-template-columns: 40px 1fr 42px;
        gap: 9px;
    }

        .progress-header h1[b-hd0a02tw2r] {
            font-size: 29px;
        }

    .back-button[b-hd0a02tw2r] {
        width: 39px;
        height: 39px;
    }

    .header-icon[b-hd0a02tw2r] {
        width: 42px;
        height: 42px;
    }

    .level-card[b-hd0a02tw2r],
    .progress-card[b-hd0a02tw2r] {
        padding: 17px;
        border-radius: 22px;
    }

    .level-top[b-hd0a02tw2r] {
        gap: 12px;
    }

    .level-badge[b-hd0a02tw2r] {
        width: 67px;
        height: 67px;
        border-radius: 20px;
    }

        .level-badge span[b-hd0a02tw2r] {
            font-size: 27px;
        }

    .level-details h2[b-hd0a02tw2r] {
        font-size: 18px;
    }

    .level-details > p:last-child[b-hd0a02tw2r] {
        font-size: 11px;
    }

    .activity-chart[b-hd0a02tw2r] {
        height: 165px;
        gap: 6px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .section-heading h2[b-hd0a02tw2r] {
        font-size: 19px;
    }

    .achievement-item[b-hd0a02tw2r] {
        gap: 10px;
        padding: 11px;
    }

    .achievement-icon[b-hd0a02tw2r] {
        width: 39px;
        height: 39px;
    }

    .encouragement-card[b-hd0a02tw2r] {
        padding: 17px;
    }

    .encouragement-leaf[b-hd0a02tw2r] {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 24px;
    }

    .encouragement-card h2[b-hd0a02tw2r] {
        font-size: 17px;
    }

    .subscription-feature-lock a[b-hd0a02tw2r] {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .progress-page *[b-hd0a02tw2r],
    .progress-page *[b-hd0a02tw2r]::before,
    .progress-page *[b-hd0a02tw2r]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* Advanced Mood Insights */
.mood-insights-card[b-hd0a02tw2r] {
    position: relative;
    overflow: hidden;
}

    .mood-insights-card[b-hd0a02tw2r]::before {
        position: absolute;
        top: -90px;
        right: -70px;
        width: 220px;
        height: 220px;
        content: "";
        pointer-events: none;
        background: rgba(167, 111, 255, 0.18);
        border-radius: 50%;
        filter: blur(55px);
    }

.mood-insights-header[b-hd0a02tw2r] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

    .mood-insights-header h2[b-hd0a02tw2r] {
        margin: 4px 0 7px;
        color: #ffffff;
        font-size: 1.45rem;
    }

.mood-insights-description[b-hd0a02tw2r] {
    margin: 0;
    color: rgba(239, 232, 255, 0.68);
    line-height: 1.55;
}

.insights-period[b-hd0a02tw2r] {
    flex-shrink: 0;
    padding: 8px 13px;
    color: #e8d7ff;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(151, 93, 255, 0.14);
    border: 1px solid rgba(200, 164, 255, 0.25);
    border-radius: 999px;
}

.mood-insights-summary[b-hd0a02tw2r] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.mood-summary-item[b-hd0a02tw2r] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(221, 200, 255, 0.12);
    border-radius: 17px;
}

.mood-summary-icon[b-hd0a02tw2r] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 800;
    border-radius: 13px;
}

    .mood-summary-icon.calm[b-hd0a02tw2r] {
        background: rgba(255, 193, 91, 0.14);
    }

    .mood-summary-icon.improving[b-hd0a02tw2r] {
        color: #81efbe;
        background: rgba(82, 224, 164, 0.13);
    }

    .mood-summary-icon.checkins[b-hd0a02tw2r] {
        color: #d8bbff;
        background: rgba(167, 111, 255, 0.16);
    }

.mood-summary-item div[b-hd0a02tw2r] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.mood-summary-label[b-hd0a02tw2r] {
    overflow: hidden;
    color: rgba(239, 232, 255, 0.58);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mood-summary-item strong[b-hd0a02tw2r] {
    color: #ffffff;
    font-size: 0.92rem;
}

.positive-text[b-hd0a02tw2r] {
    color: #81efbe !important;
}

.mood-chart[b-hd0a02tw2r] {
    position: relative;
    z-index: 1;
    padding: 18px;
    background: linear-gradient( 145deg, rgba(118, 69, 211, 0.13), rgba(255, 255, 255, 0.025) );
    border: 1px solid rgba(204, 171, 255, 0.14);
    border-radius: 19px;
}

.mood-chart-top[b-hd0a02tw2r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .mood-chart-top div[b-hd0a02tw2r] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

.mood-chart-label[b-hd0a02tw2r] {
    color: rgba(239, 232, 255, 0.58);
    font-size: 0.76rem;
}

.mood-chart-top strong[b-hd0a02tw2r] {
    color: #ffffff;
}

.mood-score[b-hd0a02tw2r] {
    color: #d8b8ff;
    font-size: 1.35rem;
    font-weight: 800;
}

.mood-bars[b-hd0a02tw2r] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    height: 145px;
}

.mood-day[b-hd0a02tw2r] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(239, 232, 255, 0.52);
    font-size: 0.68rem;
}

.mood-bar-track[b-hd0a02tw2r] {
    position: relative;
    display: flex;
    width: 100%;
    height: 116px;
    align-items: flex-end;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 9px;
}

.mood-bar[b-hd0a02tw2r] {
    display: block;
    width: 100%;
    min-height: 8px;
    background: linear-gradient(180deg, #c08cff, #7851d9);
    border-radius: 9px;
    box-shadow: 0 0 14px rgba(176, 120, 255, 0.25);
    animation: moodBarGrow-b-hd0a02tw2r 0.9s ease-out both;
    transform-origin: bottom;
}

    .mood-bar.today[b-hd0a02tw2r] {
        background: linear-gradient(180deg, #ffd985, #b978ff);
        box-shadow: 0 0 17px rgba(255, 210, 128, 0.34);
    }

.mood-insight-message[b-hd0a02tw2r] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 13px;
    margin-top: 16px;
    padding: 16px;
    color: #eee4ff;
    background: rgba(176, 117, 255, 0.09);
    border: 1px solid rgba(212, 180, 255, 0.16);
    border-radius: 17px;
}

.insight-sparkle[b-hd0a02tw2r] {
    color: #ffd87a;
    font-size: 1.25rem;
}

.mood-insight-message strong[b-hd0a02tw2r] {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
}

.mood-insight-message p[b-hd0a02tw2r] {
    margin: 0;
    color: rgba(239, 232, 255, 0.67);
    font-size: 0.84rem;
    line-height: 1.55;
}

@keyframes moodBarGrow-b-hd0a02tw2r {
    from {
        opacity: 0;
        transform: scaleY(0);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@media (max-width: 700px) {
    .mood-insights-header[b-hd0a02tw2r] {
        flex-direction: column;
    }

    .mood-insights-summary[b-hd0a02tw2r] {
        grid-template-columns: 1fr;
    }

    .mood-bars[b-hd0a02tw2r] {
        gap: 5px;
    }
}

.achievements-header[b-hd0a02tw2r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

    .achievements-header h2[b-hd0a02tw2r] {
        margin: 4px 0 0;
    }

.achievements-header-actions[b-hd0a02tw2r] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.achievement-count[b-hd0a02tw2r] {
    padding: 8px 13px;
    color: #e2ceff;
    font-size: 0.76rem;
    background: rgba(151, 93, 255, 0.13);
    border: 1px solid rgba(205, 174, 255, 0.22);
    border-radius: 999px;
}

.achievements-toggle[b-hd0a02tw2r] {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: #f2e9ff;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    background: rgba(157, 101, 255, 0.16);
    border: 1px solid rgba(211, 184, 255, 0.28);
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
}

    .achievements-toggle:hover[b-hd0a02tw2r] {
        background: rgba(176, 122, 255, 0.28);
        box-shadow: 0 0 18px rgba(171, 111, 255, 0.25);
    }

    .achievements-toggle.open[b-hd0a02tw2r] {
        transform: rotate(180deg);
    }

.achievement-list[b-hd0a02tw2r],
.additional-achievements[b-hd0a02tw2r] {
    display: grid;
    gap: 12px;
}

.additional-achievements[b-hd0a02tw2r] {
    animation: achievementsOpen-b-hd0a02tw2r 0.35s ease-out;
}

.achievement-item[b-hd0a02tw2r] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(214, 185, 255, 0.17);
    border-radius: 18px;
    transition: transform 0.2s ease, background 0.2s ease;
}

    .achievement-item:hover[b-hd0a02tw2r] {
        background: rgba(170, 112, 255, 0.09);
        transform: translateY(-2px);
    }

.achievement-icon[b-hd0a02tw2r] {
    display: grid;
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    place-items: center;
    font-size: 1.55rem;
    background: rgba(156, 99, 255, 0.16);
    border-radius: 16px;
}

.achievement-information[b-hd0a02tw2r] {
    min-width: 0;
    flex: 1;
}

    .achievement-information h3[b-hd0a02tw2r] {
        margin: 0 0 5px;
        color: #ffffff;
        font-size: 1rem;
    }

    .achievement-information p[b-hd0a02tw2r] {
        margin: 0;
        color: rgba(235, 226, 255, 0.62);
        font-size: 0.78rem;
    }

.achievement-status[b-hd0a02tw2r] {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #d9fff0;
    background: rgba(75, 190, 144, 0.18);
    border-radius: 50%;
}

.achievement-item.locked[b-hd0a02tw2r] {
    opacity: 0.48;
}

    .achievement-item.locked .achievement-status[b-hd0a02tw2r] {
        font-size: 0.85rem;
        background: rgba(255, 255, 255, 0.05);
    }

@keyframes achievementsOpen-b-hd0a02tw2r {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .achievement-count[b-hd0a02tw2r] {
        display: none;
    }

    .achievement-item[b-hd0a02tw2r] {
        gap: 12px;
        padding: 14px;
    }

    .achievement-icon[b-hd0a02tw2r] {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }
}
/* /Components/Pages/Quotes.razor.rz.scp.css */
.quotes-page[b-ry00gxae2q] {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    color: #f8f6ff;
    background: radial-gradient(circle at 12% 8%, rgba(112, 65, 205, 0.35), transparent 32%), radial-gradient(circle at 90% 42%, rgba(22, 125, 139, 0.25), transparent 35%), linear-gradient(145deg, #090d20 0%, #0c1127 52%, #081725 100%);
}

.quotes-shell[b-ry00gxae2q] {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 980px);
    margin: 0 auto;
    padding: 58px 0 85px;
}

.ambient-glow[b-ry00gxae2q] {
    position: absolute;
    z-index: 0;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(75px);
    opacity: 0.24;
    animation: floatingGlow-b-ry00gxae2q 9s ease-in-out infinite alternate;
}

.glow-one[b-ry00gxae2q] {
    top: 8%;
    left: -180px;
    background: #7c4ce0;
}

.glow-two[b-ry00gxae2q] {
    right: -180px;
    top: 48%;
    background: #13899a;
    animation-delay: -4s;
}

.quotes-header[b-ry00gxae2q] {
    max-width: 700px;
    margin-bottom: 34px;
    animation: riseIn-b-ry00gxae2q 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.eyebrow[b-ry00gxae2q],
.section-kicker[b-ry00gxae2q] {
    margin: 0 0 10px;
    color: #cbb7ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.quotes-header h1[b-ry00gxae2q] {
    margin: 0;
    font-size: clamp(36px, 6vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.045em;
    text-shadow: 0 0 30px rgba(168, 132, 255, 0.18);
}

.header-text[b-ry00gxae2q] {
    max-width: 650px;
    margin: 17px 0 0;
    color: #b9b6cf;
    font-size: 18px;
    line-height: 1.65;
}

.daily-quote-card[b-ry00gxae2q] {
    position: relative;
    overflow: hidden;
    min-height: 275px;
    padding: 42px;
    border: 1px solid rgba(186, 151, 255, 0.58);
    border-radius: 32px;
    background: radial-gradient(circle at 85% 20%, rgba(159, 102, 255, 0.28), transparent 30%), radial-gradient(circle at 10% 100%, rgba(62, 184, 178, 0.15), transparent 32%), linear-gradient(135deg, rgba(43, 37, 87, 0.97), rgba(25, 28, 62, 0.95));
    box-shadow: 0 26px 65px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 38px rgba(119, 77, 216, 0.13);
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), border-color 520ms ease, box-shadow 520ms ease;
    animation: riseIn-b-ry00gxae2q 700ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

    .daily-quote-card[b-ry00gxae2q]::before {
        content: "";
        position: absolute;
        top: -140%;
        left: -35%;
        width: 46%;
        height: 360%;
        pointer-events: none;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.10), transparent );
        transform: rotate(20deg);
        animation: travellingShine-b-ry00gxae2q 7s ease-in-out infinite;
    }

    .daily-quote-card:hover[b-ry00gxae2q] {
        transform: translateY(-7px) scale(1.008);
        border-color: rgba(210, 187, 255, 0.88);
        box-shadow: 0 34px 80px rgba(0, 0, 0, 0.44), 0 0 48px rgba(129, 79, 235, 0.24);
    }

.daily-label[b-ry00gxae2q] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #d7c5ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

    .daily-label span[b-ry00gxae2q] {
        color: #f1d57d;
        filter: drop-shadow(0 0 9px rgba(245, 211, 117, 0.7));
    }

.daily-quote-card blockquote[b-ry00gxae2q] {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 26px 0 20px;
    font-size: clamp(28px, 4vw, 43px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.quote-author[b-ry00gxae2q] {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #bdb7d5;
    font-size: 16px;
}

.hero-favorite[b-ry00gxae2q] {
    position: absolute;
    z-index: 3;
    top: 26px;
    right: 27px;
    width: 49px;
    height: 49px;
    border: 1px solid rgba(203, 183, 255, 0.35);
    border-radius: 50%;
    color: #d3c7ee;
    background: rgba(11, 14, 37, 0.47);
    font-size: 27px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

    .hero-favorite:hover[b-ry00gxae2q] {
        transform: scale(1.13) rotate(-7deg);
        color: #ff9dc3;
        box-shadow: 0 0 25px rgba(255, 111, 172, 0.28);
    }

    .hero-favorite.is-favorite[b-ry00gxae2q] {
        color: #ff8db8;
        background: rgba(111, 32, 75, 0.42);
        box-shadow: 0 0 24px rgba(255, 104, 168, 0.32);
        animation: heartPop-b-ry00gxae2q 430ms cubic-bezier(0.2, 1.6, 0.4, 1);
    }

.daily-sparkle[b-ry00gxae2q] {
    position: absolute;
    z-index: 1;
    color: #e9d9ff;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(215, 189, 255, 0.75));
    animation: sparklePulse-b-ry00gxae2q 2.8s ease-in-out infinite;
}

.sparkle-one[b-ry00gxae2q] {
    right: 15%;
    bottom: 20%;
    font-size: 26px;
}

.sparkle-two[b-ry00gxae2q] {
    right: 8%;
    bottom: 39%;
    font-size: 18px;
    animation-delay: -1.3s;
}

.quote-explorer[b-ry00gxae2q] {
    margin-top: 52px;
}

.section-heading[b-ry00gxae2q] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

    .section-heading h2[b-ry00gxae2q] {
        margin: 0;
        font-size: clamp(25px, 4vw, 34px);
        letter-spacing: -0.025em;
    }

.favorite-count[b-ry00gxae2q] {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid rgba(255, 132, 183, 0.22);
    border-radius: 999px;
    color: #e7c4d4;
    background: rgba(73, 28, 55, 0.23);
    font-size: 13px;
    font-weight: 700;
}

.search-box[b-ry00gxae2q] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 0 19px;
    border: 1px solid rgba(158, 143, 214, 0.24);
    border-radius: 19px;
    background: rgba(20, 24, 51, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

    .search-box:focus-within[b-ry00gxae2q] {
        transform: translateY(-2px);
        border-color: rgba(181, 149, 255, 0.76);
        box-shadow: 0 0 0 4px rgba(139, 94, 237, 0.11), 0 13px 35px rgba(0, 0, 0, 0.22);
    }

.search-icon[b-ry00gxae2q] {
    color: #c8b8ef;
    font-size: 25px;
}

.search-box input[b-ry00gxae2q] {
    width: 100%;
    border: 0;
    outline: 0;
    color: #f8f6ff;
    background: transparent;
    font: inherit;
    font-size: 16px;
}

    .search-box input[b-ry00gxae2q]::placeholder {
        color: #817e9a;
    }

.category-list[b-ry00gxae2q] {
    display: flex;
    gap: 10px;
    margin: 18px 0 28px;
    padding: 3px 0 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .category-list[b-ry00gxae2q]::-webkit-scrollbar {
        display: none;
    }

.category-button[b-ry00gxae2q] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 43px;
    padding: 0 16px;
    border: 1px solid rgba(154, 137, 210, 0.22);
    border-radius: 999px;
    color: #aaa6c1;
    background: rgba(20, 23, 50, 0.68);
    font-weight: 750;
    cursor: pointer;
    transition: color 300ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

    .category-button:hover[b-ry00gxae2q] {
        transform: translateY(-4px);
        color: #e1d8f8;
        border-color: rgba(181, 151, 255, 0.48);
        background: rgba(71, 53, 119, 0.42);
    }

    .category-button.is-selected[b-ry00gxae2q] {
        color: #ffffff;
        border-color: rgba(203, 181, 255, 0.64);
        background: linear-gradient(135deg, #6e4bc2, #433180);
        box-shadow: 0 9px 24px rgba(62, 35, 127, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .category-button.is-locked[b-ry00gxae2q] {
        color: #827e98;
        border-color: rgba(164, 145, 211, 0.16);
        background: rgba(14, 17, 38, 0.62);
    }

        .category-button.is-locked:hover[b-ry00gxae2q] {
            transform: translateY(-2px);
            color: #c8bddf;
            border-color: rgba(187, 159, 248, 0.38);
            background: rgba(50, 40, 82, 0.48);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
        }

.category-lock[b-ry00gxae2q] {
    margin-left: 2px;
    font-size: 12px;
    filter: grayscale(0.2) drop-shadow(0 0 7px rgba(202, 177, 255, 0.3));
}

.category-upgrade-message[b-ry00gxae2q] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: -8px 0 28px;
    padding: 15px 17px;
    border: 1px solid rgba(189, 160, 255, 0.34);
    border-radius: 18px;
    color: #f6f2ff;
    background: linear-gradient(135deg, rgba(67, 47, 116, 0.56), rgba(24, 29, 62, 0.78));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: toastEntrance-b-ry00gxae2q 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.category-upgrade-icon[b-ry00gxae2q] {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 13px;
    color: #f1d57d;
    background: rgba(118, 82, 189, 0.34);
    box-shadow: 0 0 20px rgba(149, 105, 235, 0.18);
}

.category-upgrade-message strong[b-ry00gxae2q] {
    font-size: 14px;
}

.category-upgrade-message p[b-ry00gxae2q] {
    margin: 3px 0 0;
    color: #b9b2cb;
    font-size: 12px;
    line-height: 1.45;
}

.category-upgrade-message a[b-ry00gxae2q] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 9px 13px;
    border: 1px solid rgba(211, 188, 255, 0.42);
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #7350c9, #50358f);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(59, 35, 114, 0.3);
    transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

    .category-upgrade-message a:hover[b-ry00gxae2q] {
        transform: translateY(-2px);
        border-color: rgba(226, 209, 255, 0.72);
        box-shadow: 0 11px 25px rgba(67, 40, 130, 0.42);
    }

.quote-grid[b-ry00gxae2q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.quote-card[b-ry00gxae2q] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 310px;
    padding: 25px;
    border: 1px solid rgba(143, 132, 190, 0.22);
    border-radius: 25px;
    background: radial-gradient(circle at 100% 0%, rgba(110, 77, 186, 0.14), transparent 32%), linear-gradient(145deg, rgba(22, 26, 56, 0.92), rgba(14, 18, 41, 0.94));
    box-shadow: 0 17px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), border-color 420ms ease, box-shadow 520ms ease;
    animation: cardEntrance-b-ry00gxae2q 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

    .quote-card[b-ry00gxae2q]::before {
        content: "";
        position: absolute;
        top: -30%;
        left: -75%;
        width: 42%;
        height: 165%;
        pointer-events: none;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.07), transparent );
        transform: rotate(18deg);
        transition: left 900ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .quote-card:hover[b-ry00gxae2q] {
        transform: translateY(-9px);
        border-color: rgba(183, 151, 255, 0.52);
        box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38), 0 0 32px rgba(107, 70, 192, 0.15);
    }

        .quote-card:hover[b-ry00gxae2q]::before {
            left: 135%;
        }

.card-top-row[b-ry00gxae2q] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quote-mark[b-ry00gxae2q] {
    color: #b79aff;
    font-size: 34px;
    line-height: 1;
    text-shadow: 0 0 18px rgba(158, 118, 255, 0.35);
}

.card-favorite[b-ry00gxae2q] {
    width: 41px;
    height: 41px;
    border: 1px solid rgba(181, 161, 224, 0.2);
    border-radius: 50%;
    color: #aaa3c3;
    background: rgba(9, 12, 31, 0.42);
    font-size: 22px;
    cursor: pointer;
    transition: transform 330ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

    .card-favorite:hover[b-ry00gxae2q] {
        transform: scale(1.14) rotate(-7deg);
        color: #ff9ec3;
    }

    .card-favorite.is-favorite[b-ry00gxae2q] {
        color: #ff8eb8;
        background: rgba(105, 32, 72, 0.34);
        box-shadow: 0 0 20px rgba(255, 104, 168, 0.22);
        animation: heartPop-b-ry00gxae2q 430ms cubic-bezier(0.2, 1.6, 0.4, 1);
    }

.quote-card blockquote[b-ry00gxae2q] {
    position: relative;
    z-index: 2;
    flex: 1;
    margin: 25px 0 18px;
    color: #f6f3ff;
    font-size: 21px;
    font-weight: 720;
    line-height: 1.5;
}

.card-author[b-ry00gxae2q] {
    position: relative;
    z-index: 2;
    margin: 0 0 23px;
    color: #9d99b5;
    font-size: 14px;
}

.card-footer[b-ry00gxae2q] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 17px;
    border-top: 1px solid rgba(149, 135, 190, 0.15);
}

.category-tag[b-ry00gxae2q] {
    padding: 7px 10px;
    border-radius: 999px;
    color: #c9b9ef;
    background: rgba(107, 78, 173, 0.19);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.reflect-button[b-ry00gxae2q] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    color: #cfc4ed;
    background: transparent;
    font-weight: 750;
    cursor: pointer;
    transition: color 280ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

    .reflect-button span[b-ry00gxae2q] {
        transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reflect-button:hover[b-ry00gxae2q] {
        color: #ffffff;
        transform: translateX(3px);
    }

        .reflect-button:hover span[b-ry00gxae2q] {
            transform: translateX(5px);
        }

.empty-state[b-ry00gxae2q] {
    padding: 55px 25px;
    border: 1px dashed rgba(175, 150, 233, 0.29);
    border-radius: 25px;
    text-align: center;
    background: rgba(23, 26, 54, 0.55);
}

    .empty-state > span[b-ry00gxae2q] {
        color: #d3bdff;
        font-size: 32px;
    }

    .empty-state h3[b-ry00gxae2q] {
        margin: 13px 0 7px;
    }

    .empty-state p[b-ry00gxae2q] {
        margin: 0;
        color: #9f9bb5;
    }

.reflection-toast[b-ry00gxae2q] {
    position: fixed;
    z-index: 1200;
    right: 25px;
    bottom: 112px;
    display: flex;
    align-items: center;
    gap: 13px;
    width: min(350px, calc(100% - 28px));
    padding: 15px;
    border: 1px solid rgba(184, 155, 255, 0.45);
    border-radius: 19px;
    color: #f7f4ff;
    background: rgba(25, 27, 59, 0.94);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.44), 0 0 28px rgba(126, 78, 223, 0.19);
    backdrop-filter: blur(18px);
    animation: toastEntrance-b-ry00gxae2q 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.toast-icon[b-ry00gxae2q] {
    display: grid;
    place-items: center;
    flex: 0 0 43px;
    height: 43px;
    border-radius: 14px;
    color: #d8c2ff;
    background: rgba(115, 75, 194, 0.28);
    font-size: 20px;
}

.reflection-toast strong[b-ry00gxae2q] {
    font-size: 14px;
}

.reflection-toast p[b-ry00gxae2q] {
    margin: 3px 0 0;
    color: #aaa6be;
    font-size: 12px;
}

.reflection-toast button[b-ry00gxae2q] {
    margin-left: auto;
    border: 0;
    color: #bcb7cd;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

@keyframes riseIn-b-ry00gxae2q {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardEntrance-b-ry00gxae2q {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes floatingGlow-b-ry00gxae2q {
    from {
        transform: translate3d(-15px, -12px, 0) scale(0.92);
    }

    to {
        transform: translate3d(28px, 25px, 0) scale(1.08);
    }
}

@keyframes travellingShine-b-ry00gxae2q {
    0%, 45% {
        left: -55%;
        opacity: 0;
    }

    55% {
        opacity: 1;
    }

    78%, 100% {
        left: 130%;
        opacity: 0;
    }
}

@keyframes sparklePulse-b-ry00gxae2q {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(18deg);
    }
}

@keyframes heartPop-b-ry00gxae2q {
    0% {
        transform: scale(0.75);
    }

    55% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes toastEntrance-b-ry00gxae2q {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 720px) {
    .quotes-shell[b-ry00gxae2q] {
        width: min(100% - 28px, 980px);
        padding-top: 38px;
    }

    .daily-quote-card[b-ry00gxae2q] {
        min-height: 250px;
        padding: 31px 25px;
        border-radius: 27px;
    }

        .daily-quote-card blockquote[b-ry00gxae2q] {
            padding-right: 24px;
        }

    .hero-favorite[b-ry00gxae2q] {
        top: 18px;
        right: 18px;
    }

    .quote-grid[b-ry00gxae2q] {
        grid-template-columns: 1fr;
    }

    .section-heading[b-ry00gxae2q] {
        align-items: flex-start;
        flex-direction: column;
    }

    .category-upgrade-message[b-ry00gxae2q] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .category-upgrade-message a[b-ry00gxae2q] {
        margin-left: 53px;
    }
}

@media (max-width: 420px) {
    .quotes-header h1[b-ry00gxae2q] {
        font-size: 37px;
    }

    .header-text[b-ry00gxae2q] {
        font-size: 16px;
    }

    .daily-quote-card blockquote[b-ry00gxae2q] {
        margin-top: 30px;
        padding-right: 0;
        font-size: 25px;
    }

    .daily-sparkle[b-ry00gxae2q] {
        display: none;
    }

    .card-footer[b-ry00gxae2q] {
        align-items: flex-start;
        flex-direction: column;
    }

    .reflect-button[b-ry00gxae2q] {
        padding: 5px 0;
    }

    .reflection-toast[b-ry00gxae2q] {
        right: 14px;
        bottom: 105px;
    }

    .category-upgrade-message a[b-ry00gxae2q] {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-ry00gxae2q],
    *[b-ry00gxae2q]::before,
    *[b-ry00gxae2q]::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}
/* /Components/Pages/Register.razor.rz.scp.css */
.auth-page[b-8wjf9ltxh0] {
    position: relative;
    min-height: 100vh;
    padding: 55px 24px 150px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(circle at 8% 18%, rgba(116, 51, 235, 0.42), transparent 32%), radial-gradient(circle at 91% 78%, rgba(191, 56, 214, 0.24), transparent 33%), linear-gradient(135deg, #211047 0%, #11102d 48%, #1d1239 100%);
    isolation: isolate;
}

    .auth-page[b-8wjf9ltxh0]::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        content: "";
        background: linear-gradient( 120deg, transparent 20%, rgba(220, 195, 255, 0.035) 48%, transparent 74% );
        animation: authPageLight-b-8wjf9ltxh0 14s ease-in-out infinite alternate;
    }

.auth-shell[b-8wjf9ltxh0] {
    position: relative;
    z-index: 2;
    width: min(100%, 1100px);
    margin: 0 auto;
}

.auth-back-button[b-8wjf9ltxh0] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 26px;
    padding: 0 18px;
    color: #e8dcff;
    text-decoration: none;
    background: rgba(20, 14, 49, 0.7);
    border: 1px solid rgba(204, 172, 255, 0.24);
    border-radius: 999px;
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

    .auth-back-button:hover[b-8wjf9ltxh0] {
        color: #ffffff;
        border-color: rgba(218, 190, 255, 0.68);
        box-shadow: 0 0 24px rgba(143, 74, 255, 0.2);
        transform: translateX(-3px);
    }

.auth-card[b-8wjf9ltxh0] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(290px, 0.85fr) minmax(380px, 1.15fr);
    column-gap: 48px;
    padding: 42px;
    overflow: hidden;
    background: radial-gradient(circle at 8% 22%, rgba(144, 73, 255, 0.17), transparent 30%), linear-gradient( 145deg, rgba(45, 31, 88, 0.9), rgba(16, 14, 45, 0.94) );
    border: 1px solid rgba(203, 169, 255, 0.34);
    border-radius: 34px;
    box-shadow: 0 32px 90px rgba(4, 2, 18, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

    .auth-card[b-8wjf9ltxh0]::before {
        position: absolute;
        top: 0;
        left: -45%;
        width: 38%;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, #d7baff, transparent);
        animation: authCardShimmer-b-8wjf9ltxh0 7s ease-in-out infinite;
    }

.auth-brand[b-8wjf9ltxh0] {
    position: relative;
    display: flex;
    grid-row: 1 / 4;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 30px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(133, 64, 239, 0.18), transparent 58%);
    border: 1px solid rgba(203, 169, 255, 0.13);
    border-radius: 27px;
}

.auth-logo[b-8wjf9ltxh0] {
    position: relative;
    display: grid;
    width: 104px;
    height: 104px;
    margin-bottom: 24px;
    place-items: center;
    color: #ffffff;
    font-size: 2.5rem;
    background: radial-gradient(circle at 34% 28%, #ffffff 0%, #ddc4ff 8%, transparent 22%), radial-gradient(circle at center, #a25aff 0%, #702fd8 50%, #321261 100%);
    border: 1px solid rgba(235, 217, 255, 0.65);
    border-radius: 32px;
    box-shadow: 0 0 22px rgba(211, 178, 255, 0.7), 0 0 58px rgba(139, 66, 241, 0.46);
    animation: authLogoFloat-b-8wjf9ltxh0 4.5s ease-in-out infinite;
}

    .auth-logo[b-8wjf9ltxh0]::before,
    .auth-logo[b-8wjf9ltxh0]::after {
        position: absolute;
        content: "";
        border: 1px solid rgba(211, 180, 255, 0.2);
        border-radius: 38px;
    }

    .auth-logo[b-8wjf9ltxh0]::before {
        inset: -12px;
        animation: authLogoPulse-b-8wjf9ltxh0 3.8s ease-in-out infinite;
    }

    .auth-logo[b-8wjf9ltxh0]::after {
        inset: -23px;
        border-style: dashed;
        opacity: 0.45;
        animation: authLogoRotate-b-8wjf9ltxh0 24s linear infinite;
    }

    .auth-logo span[b-8wjf9ltxh0] {
        filter: drop-shadow(0 0 10px #ffffff);
        animation: authLogoSparkle-b-8wjf9ltxh0 2.8s ease-in-out infinite;
    }

.auth-eyebrow[b-8wjf9ltxh0] {
    margin: 0 0 10px;
    color: #ceb4ff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.auth-brand h1[b-8wjf9ltxh0] {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.auth-description[b-8wjf9ltxh0] {
    max-width: 330px;
    margin: 19px auto 0;
    color: rgba(234, 226, 250, 0.66);
    line-height: 1.7;
}

.auth-tabs[b-8wjf9ltxh0] {
    display: grid;
    grid-column: 2;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 25px;
    padding: 5px;
    background: rgba(8, 7, 28, 0.62);
    border: 1px solid rgba(198, 165, 255, 0.18);
    border-radius: 17px;
}

    .auth-tabs button[b-8wjf9ltxh0],
    .auth-tabs a[b-8wjf9ltxh0] {
        min-height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        color: rgba(232, 222, 251, 0.58);
        font: inherit;
        font-weight: 700;
            text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: 0;
        border-radius: 12px;
        transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }

            .auth-tabs button:hover[b-8wjf9ltxh0],
            .auth-tabs a:hover[b-8wjf9ltxh0] {
            color: #ffffff;
        }

            .auth-tabs button.active[b-8wjf9ltxh0],
            .auth-tabs a.active[b-8wjf9ltxh0] {
            color: #ffffff;
            background: linear-gradient(135deg, rgba(150, 78, 255, 0.86), rgba(89, 39, 181, 0.88));
            box-shadow: 0 8px 24px rgba(87, 32, 176, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.17);
        }

.auth-form[b-8wjf9ltxh0] {
    display: flex;
    grid-column: 2;
    flex-direction: column;
    gap: 17px;
}

.auth-field[b-8wjf9ltxh0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .auth-field > span[b-8wjf9ltxh0] {
        color: rgba(241, 234, 255, 0.78);
        font-size: 0.83rem;
        font-weight: 650;
    }

.auth-input-wrap[b-8wjf9ltxh0] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 55px;
    padding: 0 14px;
    background: rgba(7, 7, 27, 0.66);
    border: 1px solid rgba(197, 160, 255, 0.2);
    border-radius: 16px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .auth-input-wrap:focus-within[b-8wjf9ltxh0] {
        background: rgba(10, 8, 34, 0.86);
        border-color: rgba(188, 132, 255, 0.72);
        box-shadow: 0 0 0 3px rgba(139, 68, 243, 0.12), 0 0 25px rgba(125, 55, 227, 0.16);
    }

.field-icon[b-8wjf9ltxh0] {
    margin-right: 11px;
    color: #c39cff;
    font-size: 0.9rem;
}

.auth-input-wrap input[b-8wjf9ltxh0] {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    color: #ffffff;
    font: inherit;
    outline: none;
    background: transparent;
    border: 0;
}

    .auth-input-wrap input[b-8wjf9ltxh0]::placeholder {
        color: rgba(224, 213, 246, 0.37);
    }

.password-toggle[b-8wjf9ltxh0] {
    padding: 7px 6px;
    color: #c9a8ff;
    font-size: 0.75rem;
    cursor: pointer;
    background: transparent;
    border: 0;
}

    .password-toggle:hover[b-8wjf9ltxh0] {
        color: #ffffff;
    }

.auth-options[b-8wjf9ltxh0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
}

.remember-option[b-8wjf9ltxh0] {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: rgba(230, 220, 249, 0.62);
    font-size: 0.8rem;
    cursor: pointer;
}

    .remember-option input[b-8wjf9ltxh0] {
        width: 17px;
        height: 17px;
        accent-color: #9150f8;
    }

.forgot-button[b-8wjf9ltxh0] {
    padding: 5px;
    color: #c5a4ff;
    font-size: 0.8rem;
    cursor: pointer;
    background: transparent;
    border: 0;
}

    .forgot-button:hover[b-8wjf9ltxh0] {
        color: #ffffff;
        text-decoration: underline;
    }

.auth-status[b-8wjf9ltxh0] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px 13px;
    font-size: 0.82rem;
    border-radius: 13px;
    animation: authStatusAppear-b-8wjf9ltxh0 0.3s ease-out;
}

.error-status[b-8wjf9ltxh0] {
    color: #ffd9e3;
    background: rgba(168, 42, 80, 0.16);
    border: 1px solid rgba(255, 111, 153, 0.28);
}

.success-status[b-8wjf9ltxh0] {
    color: #e8dcff;
    background: rgba(118, 62, 209, 0.2);
    border: 1px solid rgba(188, 134, 255, 0.3);
}

.primary-auth-button[b-8wjf9ltxh0] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 20px;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg, #a45bff, #7132dc);
    border: 1px solid rgba(232, 213, 255, 0.44);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(90, 32, 184, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: filter 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

    .primary-auth-button:hover:not(:disabled)[b-8wjf9ltxh0] {
        filter: brightness(1.12);
        box-shadow: 0 15px 38px rgba(118, 51, 220, 0.5);
        transform: translateY(-2px);
    }

    .primary-auth-button:active:not(:disabled)[b-8wjf9ltxh0] {
        transform: translateY(0) scale(0.99);
    }

    .primary-auth-button:disabled[b-8wjf9ltxh0] {
        cursor: not-allowed;
        opacity: 0.42;
        box-shadow: none;
    }

.button-spinner[b-8wjf9ltxh0] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: authSpinner-b-8wjf9ltxh0 0.75s linear infinite;
}

.auth-divider[b-8wjf9ltxh0] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

    .auth-divider span[b-8wjf9ltxh0] {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(205, 177, 247, 0.22));
    }

        .auth-divider span:last-child[b-8wjf9ltxh0] {
            background: linear-gradient(90deg, rgba(205, 177, 247, 0.22), transparent);
        }

    .auth-divider p[b-8wjf9ltxh0] {
        margin: 0;
        color: rgba(224, 213, 245, 0.42);
        font-size: 0.76rem;
    }

.guest-button[b-8wjf9ltxh0] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    min-height: 66px;
    padding: 10px 15px;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    background: rgba(59, 39, 105, 0.42);
    border: 1px solid rgba(198, 163, 255, 0.2);
    border-radius: 17px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

    .guest-button:hover[b-8wjf9ltxh0] {
        background: rgba(82, 48, 145, 0.55);
        border-color: rgba(209, 177, 255, 0.48);
        box-shadow: 0 0 25px rgba(133, 67, 234, 0.17);
        transform: translateY(-2px);
    }

.guest-icon[b-8wjf9ltxh0] {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #e8d7ff;
    background: rgba(143, 76, 238, 0.28);
    border: 1px solid rgba(207, 173, 255, 0.24);
    border-radius: 12px;
}

.guest-button > span:nth-child(2)[b-8wjf9ltxh0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.guest-button strong[b-8wjf9ltxh0] {
    font-size: 0.88rem;
}

.guest-button small[b-8wjf9ltxh0] {
    color: rgba(228, 218, 247, 0.5);
    font-size: 0.72rem;
}

.guest-arrow[b-8wjf9ltxh0] {
    color: #d1b5ff;
    font-size: 1.1rem;
}

.auth-demo-note[b-8wjf9ltxh0] {
    grid-column: 1 / -1;
    margin: 30px 0 0;
    padding-top: 22px;
    color: rgba(226, 214, 247, 0.45);
    font-size: 0.76rem;
    text-align: center;
    border-top: 1px solid rgba(202, 172, 247, 0.12);
}

.auth-footer-text[b-8wjf9ltxh0] {
    margin: 20px 0 0;
    color: rgba(225, 214, 245, 0.48);
    font-size: 0.8rem;
    text-align: center;
}

.auth-glow[b-8wjf9ltxh0] {
    position: absolute;
    z-index: 0;
    width: 500px;
    height: 500px;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.18;
    animation: authGlowMove-b-8wjf9ltxh0 12s ease-in-out infinite alternate;
}

.auth-glow-left[b-8wjf9ltxh0] {
    top: 5%;
    left: -260px;
    background: #7038ff;
}

.auth-glow-right[b-8wjf9ltxh0] {
    right: -250px;
    bottom: 0;
    background: #cb40df;
    animation-delay: -5s;
}

@keyframes authLogoFloat-b-8wjf9ltxh0 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-9px) rotate(2deg);
    }
}

@keyframes authLogoPulse-b-8wjf9ltxh0 {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.72;
        transform: scale(1.06);
    }
}

@keyframes authLogoRotate-b-8wjf9ltxh0 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes authLogoSparkle-b-8wjf9ltxh0 {
    0%, 100% {
        opacity: 0.7;
        transform: scale(0.82) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.18) rotate(45deg);
    }
}

@keyframes authCardShimmer-b-8wjf9ltxh0 {
    0% {
        left: -45%;
    }

    55%, 100% {
        left: 110%;
    }
}

@keyframes authStatusAppear-b-8wjf9ltxh0 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authSpinner-b-8wjf9ltxh0 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes authGlowMove-b-8wjf9ltxh0 {
    from {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    to {
        transform: translate3d(45px, -30px, 0) scale(1.12);
    }
}

@keyframes authPageLight-b-8wjf9ltxh0 {
    from {
        transform: translateX(-4%);
    }

    to {
        transform: translateX(4%);
    }
}

@media (max-width: 850px) {
    .auth-card[b-8wjf9ltxh0] {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 28px;
    }

    .auth-brand[b-8wjf9ltxh0] {
        grid-row: auto;
        padding: 30px 20px;
    }

    .auth-tabs[b-8wjf9ltxh0],
    .auth-form[b-8wjf9ltxh0] {
        grid-column: 1;
    }

    .auth-demo-note[b-8wjf9ltxh0] {
        grid-column: 1;
        margin-top: 4px;
    }
}

@media (max-width: 560px) {
    .auth-page[b-8wjf9ltxh0] {
        padding: 30px 14px 130px;
    }

    .auth-card[b-8wjf9ltxh0] {
        padding: 20px 14px;
        border-radius: 25px;
    }

    .auth-brand[b-8wjf9ltxh0] {
        border-radius: 21px;
    }

    .auth-logo[b-8wjf9ltxh0] {
        width: 84px;
        height: 84px;
        font-size: 2rem;
        border-radius: 26px;
    }

    .auth-options[b-8wjf9ltxh0] {
        align-items: flex-start;
        gap: 10px;
    }

    .guest-button[b-8wjf9ltxh0] {
        grid-template-columns: auto 1fr;
    }

    .guest-arrow[b-8wjf9ltxh0] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page[b-8wjf9ltxh0]::before,
    .auth-card[b-8wjf9ltxh0]::before,
    .auth-logo[b-8wjf9ltxh0],
    .auth-logo[b-8wjf9ltxh0]::before,
    .auth-logo[b-8wjf9ltxh0]::after,
    .auth-logo span[b-8wjf9ltxh0],
    .button-spinner[b-8wjf9ltxh0],
    .auth-glow[b-8wjf9ltxh0] {
        animation: none;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-page[b-npsbigq9lj] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: #f8f1ff;
    background: radial-gradient(circle at 15% 12%, rgba(151, 91, 226, 0.18), transparent 32%), radial-gradient(circle at 88% 38%, rgba(218, 112, 177, 0.1), transparent 30%), linear-gradient(180deg, #100b26 0%, #17102f 46%, #0d0920 100%);
}

    .settings-page[b-npsbigq9lj]::before,
    .settings-page[b-npsbigq9lj]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

        .individual-stars[b-npsbigq9lj] {
            position: absolute;
            z-index: 1;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .individual-star[b-npsbigq9lj] {
            position: absolute;
            left: var(--left);
            top: var(--top);
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background: white;
            box-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(202, 164, 255, 0.55);
            animation: individualStarDrift-b-npsbigq9lj var(--move-duration) ease-in-out var(--delay) infinite alternate, individualStarTwinkle-b-npsbigq9lj var(--twinkle-duration) ease-in-out var(--delay) infinite; 
        }

        @keyframes individualStarDrift-b-npsbigq9lj {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(var(--drift-x), var(--drift-y));
            }
        }

        @keyframes individualStarTwinkle-b-npsbigq9lj {
            0%, 100% {
                opacity: 0.18;
            }

            35% {
                opacity: 0.95;
            }

            65% {
                opacity: 0.42;
            }
        }
    }

    .settings-page[b-npsbigq9lj]::before {
        display: none;
        opacity: 0.68;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(222, 190, 255, 0.6) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255, 220, 242, 0.45) 0 1px, transparent 1.5px);
        background-size: 91px 91px, 143px 143px, 207px 207px;
        background-position: 24px 35px, 112px 74px, 61px 158px;
        animation: settingsStarsDrift-b-npsbigq9lj 45s linear infinite;
    }

    .settings-page[b-npsbigq9lj]::after {
        display: none;
        opacity: 0.45;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1.4px, transparent 2px), radial-gradient(circle, rgba(208, 169, 255, 0.78) 0 1.2px, transparent 2px);
        background-size: 263px 263px, 379px 379px;
        background-position: 70px 106px, 284px 48px;
        animation: settingsLargeStarsDrift-b-npsbigq9lj 58s linear infinite;
    }

.settings-glow[b-npsbigq9lj] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(12px);
}

.glow-one[b-npsbigq9lj] {
    top: 90px;
    left: -110px;
    width: 290px;
    height: 290px;
    background: rgba(128, 79, 211, 0.14);
    animation: settingsGlowFloat-b-npsbigq9lj 9s ease-in-out infinite;
}

.glow-two[b-npsbigq9lj] {
    right: -130px;
    bottom: 180px;
    width: 330px;
    height: 330px;
    background: rgba(220, 112, 174, 0.09);
    animation: settingsGlowFloat-b-npsbigq9lj 11s 1.5s ease-in-out infinite reverse;
}

.settings-header[b-npsbigq9lj] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 14px;
    width: min(100% - 36px, 900px);
    margin: 0 auto;
    padding: 30px 0 20px;
    animation: settingsHeaderEntrance-b-npsbigq9lj 0.55s ease both;
}

.page-label[b-npsbigq9lj],
.eyebrow[b-npsbigq9lj] {
    margin: 0;
    color: #b89bdc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.settings-header h1[b-npsbigq9lj] {
    margin: 5px 0 0;
    color: #fff9f5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    line-height: 1;
}

.back-button[b-npsbigq9lj],
.header-icon[b-npsbigq9lj] {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(219, 188, 255, 0.17);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 10px 28px rgba(4, 2, 18, 0.24);
    backdrop-filter: blur(12px);
}

.back-button[b-npsbigq9lj] {
    color: #eee3fa;
    text-decoration: none;
    font-size: 31px;
    line-height: 1;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .back-button:hover[b-npsbigq9lj] {
        color: white;
        background: rgba(170, 113, 235, 0.18);
        box-shadow: 0 0 22px rgba(177, 119, 247, 0.16);
        transform: translateX(-3px);
    }

.header-icon[b-npsbigq9lj] {
    font-size: 21px;
    animation: gearFloat-b-npsbigq9lj 4s ease-in-out infinite;
}

.settings-content[b-npsbigq9lj] {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(100% - 36px, 900px);
    margin: 0 auto;
    padding-bottom: 48px;
    flex-direction: column;
    gap: 15px;
}

.settings-card[b-npsbigq9lj] {
    padding: 22px;
    border: 1px solid rgba(216, 188, 255, 0.13);
    border-radius: 25px;
    background: linear-gradient( 145deg, rgba(41, 29, 73, 0.78), rgba(24, 17, 48, 0.76) );
    box-shadow: 0 18px 46px rgba(5, 2, 20, 0.28), inset 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(18px);
    animation: settingsCardEntrance-b-npsbigq9lj 0.65s ease both;
}

    .settings-card:nth-child(2)[b-npsbigq9lj] {
        animation-delay: 0.08s;
    }

    .settings-card:nth-child(3)[b-npsbigq9lj] {
        animation-delay: 0.16s;
    }

    .settings-card:nth-child(4)[b-npsbigq9lj] {
        animation-delay: 0.24s;
    }

.section-heading[b-npsbigq9lj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.section-icon[b-npsbigq9lj] {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    font-size: 21px;
}

    .section-icon.purple[b-npsbigq9lj] {
        background: rgba(159, 107, 235, 0.18);
    }

    .section-icon.pink[b-npsbigq9lj] {
        background: rgba(235, 112, 170, 0.16);
    }

    .section-icon.gold[b-npsbigq9lj] {
        background: rgba(231, 179, 85, 0.16);
    }

    .section-icon.blue[b-npsbigq9lj] {
        background: rgba(93, 164, 230, 0.16);
    }

.section-heading h2[b-npsbigq9lj] {
    margin: 4px 0 0;
    color: #fff9f4;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.setting-row[b-npsbigq9lj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 66px;
    padding: 13px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

    .setting-row strong[b-npsbigq9lj] {
        display: block;
        color: #f8f2fc;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 14px;
    }

    .setting-row span[b-npsbigq9lj] {
        display: block;
        margin-top: 4px;
        color: #aaa0b7;
        font-size: 10px;
        line-height: 1.45;
    }

.text-input[b-npsbigq9lj],
.select-input[b-npsbigq9lj],
.time-input[b-npsbigq9lj] {
    height: 40px;
    border: 1px solid rgba(220, 196, 255, 0.16);
    border-radius: 12px;
    outline: none;
    color: #f2e9f8;
    background: rgba(8, 5, 27, 0.43);
    font-family: inherit;
    font-size: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.text-input[b-npsbigq9lj] {
    width: 210px;
    padding: 0 12px;
}

.select-input[b-npsbigq9lj] {
    width: 170px;
    padding: 0 10px;
}

.time-input[b-npsbigq9lj] {
    width: 108px;
    padding: 0 9px;
}

.select-input option[b-npsbigq9lj] {
    color: #24183e;
    background: #fff;
}

.text-input:focus[b-npsbigq9lj],
.select-input:focus[b-npsbigq9lj],
.time-input:focus[b-npsbigq9lj] {
    border-color: rgba(190, 143, 250, 0.54);
    background: rgba(17, 10, 44, 0.62);
    box-shadow: 0 0 0 3px rgba(174, 116, 245, 0.1);
}

.time-input:disabled[b-npsbigq9lj] {
    opacity: 0.38;
    cursor: not-allowed;
}

.toggle-switch[b-npsbigq9lj] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 27px;
    flex: 0 0 48px;
}

    .toggle-switch input[b-npsbigq9lj] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.toggle-slider[b-npsbigq9lj] {
    position: absolute;
    inset: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(104, 94, 119, 0.44);
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

    .toggle-slider[b-npsbigq9lj]::before {
        content: "";
        position: absolute;
        left: 3px;
        bottom: 3px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #e6dfea;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.32);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
    }

.toggle-switch input:checked + .toggle-slider[b-npsbigq9lj] {
    background: linear-gradient(135deg, #825fdc, #be7eea);
    box-shadow: 0 0 18px rgba(176, 116, 235, 0.27);
}

    .toggle-switch input:checked + .toggle-slider[b-npsbigq9lj]::before {
        background: white;
        transform: translateX(21px);
    }

.save-settings-button[b-npsbigq9lj] {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border: 1px solid rgba(236, 204, 255, 0.2);
    border-radius: 17px;
    color: white;
    background: linear-gradient(135deg, #805bd9, #b875e5 58%, #d77bb6);
    box-shadow: 0 12px 30px rgba(117, 72, 201, 0.28), 0 0 22px rgba(186, 116, 230, 0.13);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    animation: settingsCardEntrance-b-npsbigq9lj 0.65s 0.32s ease both;
}

    .save-settings-button span[b-npsbigq9lj] {
        margin: 0;
        font-size: 17px;
    }

    .save-settings-button:hover[b-npsbigq9lj] {
        filter: brightness(1.08);
        box-shadow: 0 15px 35px rgba(117, 72, 201, 0.36), 0 0 29px rgba(201, 125, 235, 0.2);
        transform: translateY(-2px);
    }

.saved-message[b-npsbigq9lj] {
    position: fixed;
    z-index: 10;
    right: 24px;
    bottom: 24px;
    padding: 13px 18px;
    border: 1px solid rgba(159, 239, 191, 0.2);
    border-radius: 15px;
    color: #eafff1;
    background: rgba(38, 101, 68, 0.92);
    box-shadow: 0 14px 35px rgba(3, 15, 9, 0.38);
    font-size: 11px;
    backdrop-filter: blur(14px);
    animation: savedMessageEntrance-b-npsbigq9lj 0.35s ease both;
}

@keyframes settingsHeaderEntrance-b-npsbigq9lj {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes settingsCardEntrance-b-npsbigq9lj {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes savedMessageEntrance-b-npsbigq9lj {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gearFloat-b-npsbigq9lj {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(12deg);
    }
}

@keyframes settingsGlowFloat-b-npsbigq9lj {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(24px, -20px, 0) scale(1.08);
    }
}

@keyframes settingsStarsDrift-b-npsbigq9lj {
    from {
        background-position: 24px 35px, 112px 74px, 61px 158px;
    }

    to {
        background-position: 24px 308px, 112px 360px, 61px 572px;
    }
}

@keyframes settingsLargeStarsDrift-b-npsbigq9lj {
    from {
        background-position: 70px 106px, 284px 48px;
    }

    to {
        background-position: 70px 632px, 284px 806px;
    }
}

@media (max-width: 600px) {
    .settings-header[b-npsbigq9lj],
    .settings-content[b-npsbigq9lj] {
        width: min(100% - 24px, 900px);
    }

    .settings-header[b-npsbigq9lj] {
        padding-top: 23px;
    }

    .settings-card[b-npsbigq9lj] {
        padding: 17px;
        border-radius: 22px;
    }

    .setting-row[b-npsbigq9lj] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .text-input[b-npsbigq9lj],
    .select-input[b-npsbigq9lj],
    .time-input[b-npsbigq9lj] {
        width: 100%;
    }

    .toggle-switch[b-npsbigq9lj] {
        justify-self: end;
        margin-top: -39px;
    }

    .setting-row:has(.toggle-switch) > div[b-npsbigq9lj] {
        padding-right: 62px;
    }
}

@media (max-width: 430px) {
    .settings-header[b-npsbigq9lj] {
        grid-template-columns: 40px 1fr 42px;
        gap: 9px;
    }

        .settings-header h1[b-npsbigq9lj] {
            font-size: 28px;
        }

    .back-button[b-npsbigq9lj] {
        width: 39px;
        height: 39px;
    }

    .header-icon[b-npsbigq9lj] {
        width: 42px;
        height: 42px;
    }

    .section-heading h2[b-npsbigq9lj] {
        font-size: 20px;
    }

    .saved-message[b-npsbigq9lj] {
        right: 12px;
        bottom: 16px;
        left: 12px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-page *[b-npsbigq9lj],
    .settings-page *[b-npsbigq9lj]::before,
    .settings-page *[b-npsbigq9lj]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
.bio-input[b-npsbigq9lj] {
    width: 210px;
    min-height: 72px;
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid rgba(220, 196, 255, 0.16);
    border-radius: 12px;
    outline: none;
    color: #f2e9f8;
    background: rgba(8, 5, 27, 0.43);
    font-family: inherit;
    font-size: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .bio-input:focus[b-npsbigq9lj] {
        border-color: rgba(190, 143, 250, 0.54);
        background: rgba(17, 10, 44, 0.62);
        box-shadow: 0 0 0 3px rgba(174, 116, 245, 0.1);
    }

@media (max-width: 600px) {
    .bio-input[b-npsbigq9lj] {
        width: 100%;
    }
}

/* Login, guest and logout design */
.account-access-card[b-npsbigq9lj] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 17px;
    align-items: center;
    margin: 4px 0 25px;
    padding: 19px;
    overflow: hidden;
    background: radial-gradient(circle at 8% 50%, rgba(161, 84, 255, 0.22), transparent 34%), linear-gradient(120deg, rgba(58, 35, 106, 0.74), rgba(22, 18, 56, 0.82));
    border: 1px solid rgba(202, 166, 255, 0.28);
    border-radius: 21px;
    box-shadow: 0 14px 35px rgba(7, 3, 25, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

    .account-access-card[b-npsbigq9lj]::after {
        position: absolute;
        top: -70px;
        right: 8%;
        width: 150px;
        height: 150px;
        pointer-events: none;
        content: "";
        background: rgba(158, 75, 255, 0.16);
        border-radius: 50%;
        filter: blur(35px);
        animation: accountAccessGlow-b-npsbigq9lj 5s ease-in-out infinite alternate;
    }

.account-access-icon[b-npsbigq9lj] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #ffffff;
    font-size: 1.25rem;
    background: radial-gradient(circle at 35% 30%, #ffffff, transparent 15%), linear-gradient(145deg, #a75cff, #5722ac);
    border: 1px solid rgba(229, 207, 255, 0.42);
    border-radius: 17px;
    box-shadow: 0 0 18px rgba(190, 128, 255, 0.42), 0 0 38px rgba(127, 56, 225, 0.2);
    animation: accountIconFloat-b-npsbigq9lj 3.8s ease-in-out infinite;
}

.account-access-info[b-npsbigq9lj] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-access-label[b-npsbigq9lj] {
    color: #c9a8ff;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.account-access-info strong[b-npsbigq9lj] {
    color: #ffffff;
    font-size: 1rem;
}

.account-access-info p[b-npsbigq9lj] {
    margin: 0;
    color: rgba(231, 222, 249, 0.58);
    font-size: 0.78rem;
    line-height: 1.5;
}

.account-access-actions[b-npsbigq9lj] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 9px;
    align-items: center;
}

.account-login-button[b-npsbigq9lj] {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 0 16px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
    background: linear-gradient(135deg, #9d55ff, #6c30d5);
    border: 1px solid rgba(231, 211, 255, 0.42);
    border-radius: 13px;
    box-shadow: 0 9px 23px rgba(89, 32, 181, 0.28);
    transition: filter 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

    .account-login-button:hover[b-npsbigq9lj] {
        color: #ffffff;
        filter: brightness(1.12);
        box-shadow: 0 12px 30px rgba(112, 45, 214, 0.42);
        transform: translateY(-2px);
    }

.account-logout-button[b-npsbigq9lj] {
    min-height: 45px;
    padding: 0 14px;
    color: rgba(234, 226, 250, 0.4);
    font: inherit;
    font-size: 0.8rem;
    background: rgba(12, 10, 36, 0.48);
    border: 1px solid rgba(198, 165, 248, 0.14);
    border-radius: 13px;
}

    .account-logout-button:disabled[b-npsbigq9lj] {
        cursor: not-allowed;
        opacity: 0.55;
    }

.account-logout-button:not(:disabled)[b-npsbigq9lj] {
    color: #f2e7ff;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.account-logout-button:not(:disabled):hover[b-npsbigq9lj] {
    border-color: rgba(214, 181, 255, 0.52);
    background: rgba(38, 27, 76, 0.78);
    box-shadow: 0 0 16px rgba(151, 96, 235, 0.2);
}

@keyframes accountIconFloat-b-npsbigq9lj {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-4px) rotate(7deg);
    }
}

@keyframes accountAccessGlow-b-npsbigq9lj {
    from {
        opacity: 0.4;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1.14);
    }
}

@media (max-width: 760px) {
    .account-access-card[b-npsbigq9lj] {
        grid-template-columns: auto 1fr;
    }

    .account-access-actions[b-npsbigq9lj] {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .account-login-button[b-npsbigq9lj],
    .account-logout-button[b-npsbigq9lj] {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-access-card[b-npsbigq9lj]::after,
    .account-access-icon[b-npsbigq9lj] {
        animation: none;
    }
}

/* Active appearance themes */
.settings-page[b-npsbigq9lj] {
    transition: background-color 0.8s ease, color 0.5s ease;
}

    /* 1. Midnight Garden */
    .settings-page.theme-midnight[b-npsbigq9lj] {
        background: radial-gradient(circle at 8% 18%, rgba(110, 49, 225, 0.42), transparent 32%), radial-gradient(circle at 90% 76%, rgba(178, 51, 211, 0.22), transparent 34%), linear-gradient(135deg, #211047 0%, #11102d 48%, #1d1239 100%);
    }

    /* 2. Lavender Dream */
    .settings-page.theme-lavender[b-npsbigq9lj] {
        background: radial-gradient(circle at 12% 16%, rgba(226, 188, 255, 0.42), transparent 32%), radial-gradient(circle at 88% 76%, rgba(173, 116, 255, 0.32), transparent 35%), linear-gradient(135deg, #45306e 0%, #2d2153 48%, #58407c 100%);
    }

    /* 3. Cozy Sunset */
    .settings-page.theme-sunset[b-npsbigq9lj] {
        background: radial-gradient(circle at 10% 18%, rgba(255, 156, 105, 0.38), transparent 33%), radial-gradient(circle at 88% 75%, rgba(228, 75, 153, 0.3), transparent 35%), linear-gradient(135deg, #542441 0%, #2b1737 48%, #703145 100%);
    }

    /* 4. Forest Calm */
    .settings-page.theme-forest[b-npsbigq9lj] {
        background: radial-gradient(circle at 9% 18%, rgba(85, 191, 143, 0.3), transparent 32%), radial-gradient(circle at 90% 76%, rgba(88, 136, 115, 0.27), transparent 36%), linear-gradient(135deg, #173d38 0%, #10282c 48%, #28493e 100%);
    }

    /* 5. Ocean Moonlight */
    .settings-page.theme-ocean[b-npsbigq9lj] {
        background: radial-gradient(circle at 10% 18%, rgba(59, 180, 255, 0.38), transparent 32%), radial-gradient(circle at 88% 12%, rgba(102, 116, 255, 0.30), transparent 35%), linear-gradient(145deg, #071a35 0%, #101844 52%, #080d28 100%);
    }

    /* 6. Rose Galaxy */
    .settings-page.theme-rose[b-npsbigq9lj] {
        background: radial-gradient(circle at 12% 16%, rgba(255, 99, 190, 0.40), transparent 32%), radial-gradient(circle at 88% 20%, rgba(175, 89, 255, 0.34), transparent 35%), linear-gradient(145deg, #30102c 0%, #22113e 52%, #10091f 100%);
    }

    /* 7. Golden Stardust */
    .settings-page.theme-golden[b-npsbigq9lj] {
        background: radial-gradient(circle at 10% 18%, rgba(255, 204, 92, 0.42), transparent 32%), radial-gradient(circle at 88% 16%, rgba(255, 138, 76, 0.30), transparent 35%), linear-gradient(145deg, #33200d 0%, #25172f 52%, #100b1e 100%);
    }

    /* 8. Crystal Night */
    .settings-page.theme-crystal[b-npsbigq9lj] {
        background: radial-gradient(circle at 12% 18%, rgba(112, 235, 255, 0.38), transparent 32%), radial-gradient(circle at 88% 16%, rgba(186, 156, 255, 0.34), transparent 35%), linear-gradient(145deg, #071f31 0%, #16153e 52%, #090b22 100%);
    }

    /* 9. Emerald Aurora */
    .settings-page.theme-emerald[b-npsbigq9lj] {
        background: radial-gradient(circle at 10% 18%, rgba(72, 241, 174, 0.35), transparent 32%), radial-gradient(circle at 88% 14%, rgba(42, 190, 211, 0.30), transparent 35%), linear-gradient(145deg, #082b27 0%, #10243b 52%, #07151e 100%);
    }

    /* Special glow effect for every theme */
    .settings-page[class*="theme-"][b-npsbigq9lj]::before {
        position: fixed;
        top: -120px;
        right: -100px;
        z-index: 0;
        width: 340px;
        height: 340px;
        content: "";
        pointer-events: none;
        background: rgba(214, 174, 255, 0.15);
        border-radius: 50%;
        filter: blur(70px);
        animation: themeGlowFloat-b-npsbigq9lj 8s ease-in-out infinite alternate;
    }

.settings-header[b-npsbigq9lj],
.settings-content[b-npsbigq9lj] {
    position: relative;
    z-index: 2;
}

@keyframes themeGlowFloat-b-npsbigq9lj {
    from {
        opacity: 0.55;
        transform: translate3d(0, 0, 0) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translate3d(-45px, 55px, 0) scale(1.12);
    }
}

    /* Keep the theme movement soft and peaceful */
    .settings-page.theme-midnight[b-npsbigq9lj],
    .settings-page.theme-lavender[b-npsbigq9lj],
    .settings-page.theme-sunset[b-npsbigq9lj],
    .settings-page.theme-forest[b-npsbigq9lj] {
        background-size: 115% 115%;
        animation: activeThemeMove-b-npsbigq9lj 15s ease-in-out infinite alternate;
    }

@keyframes activeThemeMove-b-npsbigq9lj {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 100% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-page.theme-midnight[b-npsbigq9lj],
    .settings-page.theme-lavender[b-npsbigq9lj],
    .settings-page.theme-sunset[b-npsbigq9lj],
    .settings-page.theme-forest[b-npsbigq9lj] {
        animation: none;
    }
}

/* Modern theme selector */
.theme-select[b-npsbigq9lj] {
    width: 100%;
    height: 52px;
    padding: 0 46px 0 16px;
    box-sizing: border-box;
    color: #f7f0ff;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
    cursor: pointer;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(45deg, transparent 50%, #cfadff 50%) calc(100% - 20px) 50% / 6px 6px no-repeat, linear-gradient(135deg, #cfadff 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat, linear-gradient( 135deg, rgba(143, 88, 230, 0.24), rgba(39, 28, 79, 0.92) );
    border: 1px solid rgba(207, 173, 255, 0.35);
    border-radius: 15px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px rgba(13, 7, 34, 0.28);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

    .theme-select:hover[b-npsbigq9lj] {
        border-color: rgba(218, 190, 255, 0.65);
        box-shadow: 0 0 22px rgba(163, 102, 255, 0.2), 0 8px 24px rgba(13, 7, 34, 0.35);
        transform: translateY(-1px);
    }

.theme-access-row[b-npsbigq9lj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -3px 2px 8px;
    padding: 11px 13px;
    border: 1px solid rgba(207, 173, 255, 0.15);
    border-radius: 13px;
    color: #d9c8eb;
    background: rgba(27, 18, 56, 0.5);
    font-size: 12px;
    line-height: 1.45;
}

    .theme-access-row a[b-npsbigq9lj] {
        flex: 0 0 auto;
        color: #e5c8ff;
        font-weight: 700;
        text-decoration: none;
    }

        .theme-access-row a:hover[b-npsbigq9lj] {
            color: #fff;
            text-decoration: underline;
        }

.coming-soon-badge[b-npsbigq9lj] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 8px 12px;
    border: 1px solid rgba(207, 173, 255, 0.24);
    border-radius: 999px;
    color: #e7d5f8 !important;
    background: linear-gradient(135deg, rgba(145, 91, 220, 0.2), rgba(64, 39, 104, 0.3));
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.settings-error-message[b-npsbigq9lj] {
    padding: 13px 16px;
    border: 1px solid rgba(255, 139, 173, 0.32);
    border-radius: 14px;
    color: #ffdce7;
    background: rgba(111, 28, 62, 0.34);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 620px) {
    .theme-access-row[b-npsbigq9lj] {
        align-items: flex-start;
        flex-direction: column;
    }

    .coming-soon-badge[b-npsbigq9lj] {
        min-width: 92px;
        font-size: 10px !important;
    }
}

    .theme-select:focus[b-npsbigq9lj] {
        border-color: #c89cff;
        box-shadow: 0 0 0 3px rgba(174, 112, 255, 0.14), 0 0 26px rgba(174, 112, 255, 0.25);
    }

    .theme-select option[b-npsbigq9lj] {
        color: #f7efff;
        background: #1b1238;
    }

.settings-page[b-npsbigq9lj] {
    display: block !important;
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 24px 140px !important;
    box-sizing: border-box;

}

    .settings-page .settings-header[b-npsbigq9lj],
    .settings-page .settings-content[b-npsbigq9lj] {
        position: relative;
        z-index: 2;
    }

.save-settings-button[b-npsbigq9lj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}

    .save-settings-button span[b-npsbigq9lj] {
        display: inline-block;
    }

/* Language selector special effects */
.select-input[b-npsbigq9lj] {
    color: #ffffff;
    background: linear-gradient( 135deg, rgba(49, 34, 91, 0.96), rgba(24, 19, 57, 0.96) );
    border: 1px solid rgba(201, 160, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(14, 8, 34, 0.3);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

    .select-input:hover[b-npsbigq9lj] {
        transform: translateY(-2px);
        border-color: rgba(224, 185, 255, 0.7);
        box-shadow: 0 0 18px rgba(183, 112, 255, 0.28), 0 10px 28px rgba(14, 8, 34, 0.42);
    }

    .select-input:focus[b-npsbigq9lj] {
        outline: none;
        transform: translateY(-2px);
        border-color: #e1b5ff;
        box-shadow: 0 0 0 3px rgba(194, 125, 255, 0.15), 0 0 24px rgba(194, 125, 255, 0.4);
    }

    .select-input option[b-npsbigq9lj] {
        color: #ffffff;
        background: #21183f;
    }

/* Language selector coming-soon message */
.language-select-area[b-npsbigq9lj] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 220px);
    gap: 9px;
}

.language-select[b-npsbigq9lj] {
    width: 100%;
}

.language-coming-soon[b-npsbigq9lj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 8px 12px;
    color: #f2d8ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    background: linear-gradient( 135deg, rgba(169, 92, 255, 0.16), rgba(235, 150, 255, 0.09) );
    border: 1px solid rgba(218, 166, 255, 0.28);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(57, 20, 105, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: 0 0 12px rgba(224, 177, 255, 0.5);
}

.coming-soon-sparkle[b-npsbigq9lj] {
    display: inline-block;
    color: #ffd77d;
    font-size: 0.9rem;
    filter: drop-shadow(0 0 7px rgba(255, 211, 112, 0.8));
    animation: comingSoonSparkle-b-npsbigq9lj 2.2s ease-in-out infinite;
}

@keyframes comingSoonSparkle-b-npsbigq9lj {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.85) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(12deg);
    }
}

@media (max-width: 650px) {
    .language-select-area[b-npsbigq9lj] {
        width: 100%;
        margin-top: 14px;
    }
}

/* Account security */
.account-security-card[b-npsbigq9lj] {
    scroll-margin-top: 24px;
}

.security-feedback[b-npsbigq9lj] {
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
}

    .security-feedback.success[b-npsbigq9lj] {
        border: 1px solid rgba(111, 227, 176, 0.3);
        color: #d9ffed;
        background: rgba(31, 111, 77, 0.3);
    }

    .security-feedback.error[b-npsbigq9lj] {
        border: 1px solid rgba(255, 132, 165, 0.32);
        color: #ffe0e9;
        background: rgba(115, 29, 61, 0.34);
    }

.security-panel[b-npsbigq9lj] {
    padding: 18px;
    border: 1px solid rgba(205, 173, 255, 0.15);
    border-radius: 18px;
    background: rgba(15, 9, 42, 0.34);
}

.security-panel-heading[b-npsbigq9lj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.security-panel-icon[b-npsbigq9lj] {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(198, 156, 255, 0.2);
    border-radius: 13px;
    background: rgba(135, 79, 218, 0.2);
}

.security-panel-heading strong[b-npsbigq9lj],
.delete-account-zone summary strong[b-npsbigq9lj] {
    display: block;
    color: #fff8ff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
}

.security-panel-heading p[b-npsbigq9lj] {
    margin: 3px 0 0;
    color: #b9acc8;
    font-size: 11px;
    line-height: 1.45;
}

.security-form[b-npsbigq9lj],
.delete-account-form[b-npsbigq9lj] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.security-field-grid[b-npsbigq9lj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.security-field[b-npsbigq9lj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #d9cae8;
    font-size: 11px;
    font-weight: 700;
}

    .security-field span[b-npsbigq9lj] {
        margin: 0;
        color: #d9cae8;
        font-size: 11px;
        line-height: 1.3;
    }

    .security-field input[b-npsbigq9lj] {
        width: 100%;
        height: 44px;
        padding: 0 12px;
        box-sizing: border-box;
        border: 1px solid rgba(205, 173, 255, 0.22);
        border-radius: 12px;
        outline: none;
        color: #fff;
        background: rgba(9, 5, 30, 0.58);
        font: inherit;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .security-field input:focus[b-npsbigq9lj] {
            border-color: rgba(202, 151, 255, 0.72);
            box-shadow: 0 0 0 3px rgba(180, 107, 255, 0.12);
        }

.password-requirements[b-npsbigq9lj] {
    margin: 0;
    color: #a99bb8;
    font-size: 10px;
    line-height: 1.45;
}

.reset-password-button[b-npsbigq9lj] {
    align-self: flex-end;
    min-width: 170px;
    padding: 11px 18px;
    border: 1px solid rgba(222, 192, 255, 0.24);
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #8f4de1, #6a35bd);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(67, 26, 123, 0.28);
}

    .reset-password-button:hover[b-npsbigq9lj] {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

.delete-account-zone[b-npsbigq9lj] {
    margin-top: 15px;
    border: 1px solid rgba(255, 120, 151, 0.22);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(73, 16, 40, 0.2);
}

    .delete-account-zone summary[b-npsbigq9lj] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 18px;
        list-style: none;
        cursor: pointer;
    }

        .delete-account-zone summary[b-npsbigq9lj]::-webkit-details-marker {
            display: none;
        }

        .delete-account-zone summary small[b-npsbigq9lj] {
            display: block;
            margin-top: 4px;
            color: #d2a7b5;
            font-size: 10px;
        }

.delete-expand-icon[b-npsbigq9lj] {
    color: #ffb2c5;
    font-size: 22px;
    transition: transform 0.2s ease;
}

.delete-account-zone[open] .delete-expand-icon[b-npsbigq9lj] {
    transform: rotate(180deg);
}

.delete-account-content[b-npsbigq9lj] {
    padding: 0 18px 18px;
    border-top: 1px solid rgba(255, 133, 163, 0.14);
}

.delete-account-warning[b-npsbigq9lj] {
    margin: 15px 0;
    padding: 13px 14px;
    border-radius: 13px;
    color: #f5d9e2;
    background: rgba(116, 31, 59, 0.28);
}

    .delete-account-warning strong[b-npsbigq9lj] {
        color: #ffd6e1;
        font-size: 13px;
    }

    .delete-account-warning p[b-npsbigq9lj] {
        margin: 6px 0 0;
        color: #d9b6c2;
        font-size: 10px;
        line-height: 1.5;
    }

.delete-account-form[b-npsbigq9lj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

.delete-account-button[b-npsbigq9lj] {
    grid-column: 1 / -1;
    justify-self: end;
    padding: 11px 17px;
    border: 1px solid rgba(255, 160, 181, 0.34);
    border-radius: 13px;
    color: #fff2f5;
    background: linear-gradient(135deg, #a92f59, #791f43);
    font-weight: 800;
    cursor: pointer;
}

    .delete-account-button:hover[b-npsbigq9lj] {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

.security-signed-out-message[b-npsbigq9lj] {
    padding: 14px;
    border: 1px solid rgba(205, 173, 255, 0.16);
    border-radius: 14px;
    color: #cbbbdc;
    background: rgba(20, 12, 50, 0.38);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 760px) {
    .security-field-grid[b-npsbigq9lj],
    .delete-account-form[b-npsbigq9lj] {
        grid-template-columns: 1fr;
    }

    .reset-password-button[b-npsbigq9lj],
    .delete-account-button[b-npsbigq9lj] {
        width: 100%;
        justify-self: stretch;
    }
}

/* Language control */
.language-control[b-npsbigq9lj] {
    width: 220px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.language-select[b-npsbigq9lj] {
    width: 172px;
    align-self: flex-end;
}

/* New coming-soon design */
.language-status[b-npsbigq9lj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    min-width: 172px;
    padding: 9px 12px;
    margin-left: auto;
    color: #f8ecff;
    background: linear-gradient( 135deg, rgba(160, 91, 255, 0.24), rgba(236, 139, 255, 0.12) );
    border: 1px solid rgba(220, 174, 255, 0.4);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(74, 27, 132, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

    .language-status[b-npsbigq9lj]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 110deg, transparent 20%, rgba(255, 255, 255, 0.12) 50%, transparent 80% );
        transform: translateX(-120%);
        animation: languageStatusShine-b-npsbigq9lj 4s ease-in-out infinite;
    }

.language-status-dot[b-npsbigq9lj] {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    background: #d99bff;
    border-radius: 50%;
    box-shadow: 0 0 7px #d99bff, 0 0 15px rgba(217, 155, 255, 0.75);
    animation: languageStatusPulse-b-npsbigq9lj 2s ease-in-out infinite;
}

.language-status div[b-npsbigq9lj] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.language-status strong[b-npsbigq9lj] {
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.language-status small[b-npsbigq9lj] {
    margin-top: 4px;
    color: #dcb8ff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.language-status-spark[b-npsbigq9lj] {
    position: relative;
    z-index: 1;
    margin-left: auto;
    color: #ffd989;
    font-size: 0.85rem;
    filter: drop-shadow(0 0 6px rgba(255, 217, 137, 0.85));
    animation: languageSparkTwinkle-b-npsbigq9lj 2.2s ease-in-out infinite;
}

@keyframes languageStatusPulse-b-npsbigq9lj {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@keyframes languageSparkTwinkle-b-npsbigq9lj {
    0%, 100% {
        opacity: 0.55;
        transform: rotate(0deg) scale(0.85);
    }

    50% {
        opacity: 1;
        transform: rotate(15deg) scale(1.15);
    }
}

@keyframes languageStatusShine-b-npsbigq9lj {
    0%, 65% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@media (max-width: 650px) {
    .language-control[b-npsbigq9lj] {
        width: 100%;
        margin-top: 14px;
        align-items: stretch;
    }

    .language-select[b-npsbigq9lj],
    .language-status[b-npsbigq9lj] {
        width: 100%;
    }
}
/* /Components/Pages/Subscription.razor.rz.scp.css */
.subscription-page[b-vzhfp87zh0] {
    position: relative;
    min-height: 100vh;
    padding: 44px 20px 90px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(circle at 15% 12%, rgba(132, 75, 255, 0.22), transparent 30%), radial-gradient(circle at 85% 30%, rgba(232, 167, 255, 0.13), transparent 32%), radial-gradient(circle at 50% 100%, rgba(70, 37, 145, 0.28), transparent 45%), linear-gradient(160deg, #070515 0%, #100923 48%, #080517 100%);
    isolation: isolate;
}

.subscription-content[b-vzhfp87zh0] {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
}

/* Header */

.subscription-header[b-vzhfp87zh0] {
    max-width: 680px;
    margin: 0 auto 50px;
    text-align: center;
    animation: subscriptionHeaderIn-b-vzhfp87zh0 0.8s ease-out both;
}

.crown-icon[b-vzhfp87zh0] {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    place-items: center;
    color: #ffe5a4;
    font-size: 34px;
    border: 1px solid rgba(255, 220, 146, 0.35);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 221, 143, 0.18), rgba(154, 90, 255, 0.16));
    box-shadow: 0 0 24px rgba(255, 205, 105, 0.18), inset 0 0 18px rgba(255, 255, 255, 0.06);
    animation: crownFloat-b-vzhfp87zh0 3.2s ease-in-out infinite;
}

.subscription-label[b-vzhfp87zh0] {
    margin: 0 0 10px;
    color: #c9aaff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.subscription-header h1[b-vzhfp87zh0] {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 6vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.5px;
    text-shadow: 0 0 30px rgba(177, 123, 255, 0.24);
}

.subscription-description[b-vzhfp87zh0] {
    max-width: 560px;
    margin: 18px auto 28px;
    color: #bdb6d2;
    font-size: 16px;
    line-height: 1.7;
}

/* Monthly and yearly switch */

.billing-switch[b-vzhfp87zh0] {
    display: inline-flex;
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(205, 174, 255, 0.2);
    border-radius: 18px;
    background: rgba(19, 12, 43, 0.72);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
}

.billing-button[b-vzhfp87zh0] {
    position: relative;
    min-width: 120px;
    padding: 12px 18px;
    color: #aaa2c1;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    border-radius: 13px;
    background: transparent;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

    .billing-button:hover[b-vzhfp87zh0] {
        color: #ffffff;
        transform: translateY(-1px);
    }

    .billing-button.active[b-vzhfp87zh0] {
        color: #ffffff;
        background: linear-gradient(135deg, #8754f5, #b66eff);
        box-shadow: 0 7px 20px rgba(145, 76, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

.billing-button-disabled[b-vzhfp87zh0],
.billing-button-disabled:hover[b-vzhfp87zh0] {
    color: #716a82;
    cursor: not-allowed;
    background: transparent;
    box-shadow: none;
    opacity: 0.72;
    transform: none;
}

.save-label[b-vzhfp87zh0] {
    display: block;
    margin-top: 2px;
    color: #ffe7a8;
    font-size: 9px;
    letter-spacing: 0.4px;
}

/* Plan cards */

.plans-grid[b-vzhfp87zh0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.plan-card[b-vzhfp87zh0] {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 570px;
    padding: 32px 24px 26px;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(203, 175, 255, 0.17);
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(34, 23, 68, 0.88), rgba(14, 9, 34, 0.94));
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    animation: planCardIn-b-vzhfp87zh0 0.75s ease-out both;
}

    .plan-card:nth-child(1)[b-vzhfp87zh0] {
        animation-delay: 0.08s;
    }

    .plan-card:nth-child(2)[b-vzhfp87zh0] {
        animation-delay: 0.16s;
    }

    .plan-card:nth-child(3)[b-vzhfp87zh0] {
        animation-delay: 0.24s;
    }

    .plan-card:nth-child(4)[b-vzhfp87zh0] {
        animation-delay: 0.32s;
    }

    .plan-card:hover[b-vzhfp87zh0] {
        z-index: 3;
        border-color: rgba(194, 143, 255, 0.52);
        box-shadow: 0 28px 65px rgba(0, 0, 0, 0.5), 0 0 32px rgba(142, 80, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.09);
        transform: translateY(-10px);
    }

    .plan-card.recommended[b-vzhfp87zh0] {
        border-color: rgba(211, 162, 255, 0.62);
        background: radial-gradient(circle at top, rgba(176, 97, 255, 0.22), transparent 38%), linear-gradient(160deg, rgba(47, 27, 91, 0.96), rgba(18, 10, 42, 0.97));
        box-shadow: 0 24px 60px rgba(88, 38, 153, 0.4), 0 0 34px rgba(169, 93, 255, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

        .plan-card.recommended[b-vzhfp87zh0]::before {
            position: absolute;
            top: -80%;
            left: -90%;
            width: 55%;
            height: 250%;
            content: "";
            pointer-events: none;
            background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.11), transparent );
            transform: rotate(24deg);
            animation: premiumShimmer-b-vzhfp87zh0 4.8s ease-in-out infinite;
        }

    .plan-card.selected[b-vzhfp87zh0] {
        border-color: #d9adff;
        box-shadow: 0 28px 65px rgba(0, 0, 0, 0.48), 0 0 0 2px rgba(196, 137, 255, 0.17), 0 0 40px rgba(166, 92, 255, 0.27);
        transform: translateY(-8px);
    }

.plan-glow[b-vzhfp87zh0] {
    position: absolute;
    top: -90px;
    right: -90px;
    width: 190px;
    height: 190px;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(156, 86, 255, 0.17);
    filter: blur(45px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.plan-card:hover .plan-glow[b-vzhfp87zh0] {
    opacity: 1;
    transform: scale(1.28);
}

.recommended-badge[b-vzhfp87zh0] {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 7px 10px;
    color: #fff1bd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 224, 151, 0.3);
    border-radius: 999px;
    background: rgba(147, 91, 22, 0.26);
    box-shadow: 0 0 18px rgba(255, 202, 102, 0.12);
}

.plan-icon[b-vzhfp87zh0] {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    place-items: center;
    font-size: 28px;
    border: 1px solid rgba(207, 177, 255, 0.22);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(169, 105, 255, 0.2), rgba(255, 255, 255, 0.04) );
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.35s ease;
}

.plan-card:hover .plan-icon[b-vzhfp87zh0] {
    transform: translateY(-3px) rotate(-3deg) scale(1.06);
}

.plan-card h2[b-vzhfp87zh0] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
}

.plan-summary[b-vzhfp87zh0] {
    min-height: 44px;
    margin: 0 0 22px;
    color: #aaa3bd;
    font-size: 13px;
    line-height: 1.55;
}

.plan-price[b-vzhfp87zh0] {
    display: flex;
    min-height: 53px;
    align-items: flex-end;
    color: #ffffff;
}

.currency[b-vzhfp87zh0] {
    margin: 0 4px 9px 0;
    color: #d7c6ec;
    font-size: 16px;
    font-weight: 700;
}

.price-number[b-vzhfp87zh0] {
    font-size: 42px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -2px;
}

.price-period[b-vzhfp87zh0] {
    margin: 0 0 7px 7px;
    color: #918aa5;
    font-size: 12px;
}

.yearly-note[b-vzhfp87zh0] {
    min-height: 22px;
    margin: 10px 0 0;
    color: #d8cdea;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    text-shadow: 0 0 10px rgba(196, 158, 255, 0.25);
}

.feature-divider[b-vzhfp87zh0] {
    height: 1px;
    margin: 22px 0;
    background: linear-gradient( 90deg, rgba(211, 178, 255, 0.25), transparent );
}

.plan-features[b-vzhfp87zh0] {
    display: grid;
    gap: 13px;
    padding: 0;
    margin: 0 0 28px;
    list-style: none;
}

    .plan-features li[b-vzhfp87zh0] {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        color: #c7c1d5;
        font-size: 12px;
        line-height: 1.45;
    }

.feature-check[b-vzhfp87zh0] {
    display: grid;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    place-items: center;
    color: #d8b9ff;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgba(194, 144, 255, 0.28);
    border-radius: 50%;
    background: rgba(143, 76, 230, 0.15);
}

/* Select buttons */

.select-plan-button[b-vzhfp87zh0] {
    position: relative;
    width: 100%;
    margin-top: auto;
    padding: 14px 16px;
    overflow: hidden;
    color: #eee6fa;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid rgba(196, 155, 255, 0.34);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(116, 66, 201, 0.32), rgba(54, 30, 104, 0.45));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .select-plan-button[b-vzhfp87zh0]::after {
        position: absolute;
        top: 0;
        left: -110%;
        width: 70%;
        height: 100%;
        content: "";
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.16), transparent );
        transition: left 0.55s ease;
    }

    .select-plan-button:hover[b-vzhfp87zh0] {
        border-color: rgba(221, 184, 255, 0.7);
        background: linear-gradient(135deg, #8050df, #ac66ee);
        box-shadow: 0 10px 24px rgba(133, 65, 220, 0.32);
        transform: translateY(-2px);
    }

        .select-plan-button:hover[b-vzhfp87zh0]::after {
            left: 140%;
        }

.subscription-disabled-button[b-vzhfp87zh0],
.subscription-disabled-button:hover[b-vzhfp87zh0] {
    color: #918aa5;
    cursor: not-allowed;
    border-color: rgba(196, 155, 255, 0.18);
    background: rgba(45, 27, 82, 0.32);
    box-shadow: none;
    opacity: 0.82;
    transform: none;
}

.subscription-login-link[b-vzhfp87zh0] {
    display: flex;
    box-sizing: border-box;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

.selected-button[b-vzhfp87zh0] {
    color: #ffffff;
    border-color: rgba(222, 188, 255, 0.75);
    background: linear-gradient(135deg, #8c56e9, #c275f2);
    box-shadow: 0 10px 26px rgba(155, 79, 232, 0.35), 0 0 20px rgba(175, 102, 255, 0.15);
}

/* Custom subscription buttons */

.custom-subscribe-button[b-vzhfp87zh0] {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 66px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 11px 14px;
    margin-top: auto;
    overflow: hidden;
    align-items: center;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
    border: 1px solid rgba(225, 190, 255, 0.48);
    border-radius: 18px;
    background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.22), transparent 34%), linear-gradient(135deg, #7040d8 0%, #9854e8 52%, #bd68ee 100%);
    box-shadow: 0 14px 30px rgba(101, 48, 187, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

    .custom-subscribe-button[b-vzhfp87zh0]::before {
        position: absolute;
        top: -70%;
        left: -65%;
        width: 45%;
        height: 240%;
        content: "";
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
        transform: rotate(20deg);
        transition: left 0.6s ease;
    }

    .custom-subscribe-button:hover[b-vzhfp87zh0] {
        border-color: rgba(246, 221, 255, 0.78);
        box-shadow: 0 18px 36px rgba(126, 58, 214, 0.48), 0 0 24px rgba(188, 103, 242, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        filter: saturate(1.08) brightness(1.05);
        transform: translateY(-3px);
    }

        .custom-subscribe-button:hover[b-vzhfp87zh0]::before {
            left: 130%;
        }

    .custom-subscribe-button:focus-visible[b-vzhfp87zh0] {
        outline: 3px solid rgba(239, 215, 255, 0.72);
        outline-offset: 3px;
    }

    .custom-subscribe-button:disabled[b-vzhfp87zh0],
    .custom-subscribe-button:disabled:hover[b-vzhfp87zh0] {
        cursor: wait;
        box-shadow: 0 10px 24px rgba(74, 37, 139, 0.28);
        filter: saturate(0.75);
        opacity: 0.72;
        transform: none;
    }

.recommended-subscribe-button[b-vzhfp87zh0] {
    border-color: rgba(255, 226, 157, 0.62);
    background: radial-gradient(circle at 18% 0%, rgba(255, 244, 201, 0.28), transparent 36%), linear-gradient(135deg, #7441d8 0%, #a354e6 48%, #d07aeb 100%);
    box-shadow: 0 15px 34px rgba(126, 56, 205, 0.46), 0 0 22px rgba(255, 211, 126, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.subscribe-button-sparkle[b-vzhfp87zh0] {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff0b8;
    font-size: 18px;
    border: 1px solid rgba(255, 245, 215, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.subscribe-button-copy[b-vzhfp87zh0] {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    text-align: left;
}

    .subscribe-button-copy strong[b-vzhfp87zh0] {
        font-size: 14px;
        font-weight: 850;
        line-height: 1.25;
        letter-spacing: 0.1px;
    }

    .subscribe-button-copy small[b-vzhfp87zh0] {
        margin-top: 3px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 10px;
        font-weight: 650;
        line-height: 1.2;
    }

.subscribe-button-arrow[b-vzhfp87zh0] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    font-size: 17px;
    border-radius: 50%;
    background: rgba(24, 11, 56, 0.24);
    transition: transform 0.22s ease, background 0.22s ease;
}

.custom-subscribe-button:hover .subscribe-button-arrow[b-vzhfp87zh0] {
    background: rgba(24, 11, 56, 0.36);
    transform: translateX(3px);
}

.checkout-spinner[b-vzhfp87zh0] {
    position: relative;
    z-index: 1;
    width: 25px;
    height: 25px;
    margin-left: 5px;
    border: 3px solid rgba(255, 255, 255, 0.26);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: checkoutSpinner-b-vzhfp87zh0 0.8s linear infinite;
}

/* Selected-plan message */

.selection-message[b-vzhfp87zh0] {
    display: flex;
    max-width: 560px;
    gap: 14px;
    padding: 17px 20px;
    margin: 36px auto 0;
    align-items: center;
    color: #ffffff;
    border: 1px solid rgba(183, 255, 217, 0.24);
    border-radius: 18px;
    background: rgba(28, 91, 72, 0.22);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
    animation: selectionMessageIn-b-vzhfp87zh0 0.45s ease-out both;
}

.selection-check[b-vzhfp87zh0] {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: #d4ffe8;
    font-weight: 900;
    border-radius: 50%;
    background: linear-gradient(135deg, #3fb888, #65d6aa);
    box-shadow: 0 0 20px rgba(86, 213, 164, 0.25);
    animation: checkPulse-b-vzhfp87zh0 1.8s ease-in-out infinite;
}

.selection-message strong[b-vzhfp87zh0] {
    font-size: 14px;
}

.selection-message p[b-vzhfp87zh0] {
    margin: 4px 0 0;
    color: #aebfb9;
    font-size: 11px;
}

/* Checkout feedback */

.checkout-feedback[b-vzhfp87zh0] {
    display: grid;
    width: min(680px, 100%);
    box-sizing: border-box;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 17px 20px;
    margin: 28px auto 0;
    align-items: center;
    color: #ffffff;
    border: 1px solid rgba(205, 174, 255, 0.24);
    border-radius: 18px;
    background: rgba(35, 22, 68, 0.78);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(14px);
}

.checkout-feedback.success[b-vzhfp87zh0] {
    border-color: rgba(126, 245, 186, 0.34);
    background: rgba(28, 91, 72, 0.42);
}

.checkout-feedback.error[b-vzhfp87zh0] {
    border-color: rgba(255, 151, 178, 0.34);
    background: rgba(108, 34, 64, 0.42);
}

.checkout-feedback-icon[b-vzhfp87zh0] {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    border-radius: 50%;
    background: linear-gradient(135deg, #8350df, #c26eea);
}

.checkout-feedback.success .checkout-feedback-icon[b-vzhfp87zh0] {
    background: linear-gradient(135deg, #35a878, #63d5a6);
}

.checkout-feedback.error .checkout-feedback-icon[b-vzhfp87zh0] {
    background: linear-gradient(135deg, #d04d74, #ed7d9b);
}

.checkout-feedback strong[b-vzhfp87zh0] {
    font-size: 14px;
}

.checkout-feedback p[b-vzhfp87zh0] {
    margin: 4px 0 0;
    color: #c7bfd6;
    font-size: 11px;
    line-height: 1.45;
}

.checkout-retry-button[b-vzhfp87zh0] {
    padding: 9px 12px;
    color: #ffffff;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.1);
}

.checkout-retry-button:hover[b-vzhfp87zh0] {
    background: rgba(255, 255, 255, 0.17);
}

.checkout-retry-button:disabled[b-vzhfp87zh0] {
    cursor: wait;
    opacity: 0.55;
}

/* Subscription cancellation */

.subscription-cancel-panel[b-vzhfp87zh0] {
    width: min(680px, 100%);
    box-sizing: border-box;
    padding: 20px;
    margin: 24px auto 0;
    color: #ffffff;
    border: 1px solid rgba(255, 180, 205, 0.24);
    border-radius: 18px;
    background: rgba(50, 31, 74, 0.72);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
}

.subscription-cancel-heading[b-vzhfp87zh0] {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
}

.subscription-cancel-label[b-vzhfp87zh0] {
    margin: 0 0 5px;
    color: #cdb8ef;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.35px;
}

.subscription-cancel-panel h3[b-vzhfp87zh0] {
    margin: 0;
    font-size: 16px;
}

.subscription-cancel-copy[b-vzhfp87zh0],
.subscription-cancel-confirmation p[b-vzhfp87zh0],
.subscription-cancelled-panel p[b-vzhfp87zh0] {
    margin: 10px 0 0;
    color: #c7bfd6;
    font-size: 12px;
    line-height: 1.55;
}

.subscription-cancel-button[b-vzhfp87zh0],
.subscription-keep-button[b-vzhfp87zh0],
.subscription-confirm-cancel-button[b-vzhfp87zh0] {
    padding: 10px 14px;
    color: #ffffff;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    border-radius: 11px;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.subscription-cancel-button[b-vzhfp87zh0] {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 156, 187, 0.38);
    background: rgba(142, 48, 83, 0.24);
}

.subscription-cancel-button:hover[b-vzhfp87zh0],
.subscription-confirm-cancel-button:hover[b-vzhfp87zh0] {
    transform: translateY(-1px);
    background: rgba(181, 58, 100, 0.54);
}

.subscription-cancel-confirmation[b-vzhfp87zh0] {
    padding: 16px;
    border: 1px solid rgba(255, 151, 178, 0.3);
    border-radius: 14px;
    background: rgba(108, 34, 64, 0.32);
}

.subscription-cancel-confirmation strong[b-vzhfp87zh0] {
    font-size: 14px;
}

.subscription-cancel-actions[b-vzhfp87zh0] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: flex-end;
}

.subscription-keep-button[b-vzhfp87zh0] {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
}

.subscription-keep-button:hover[b-vzhfp87zh0] {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14);
}

.subscription-confirm-cancel-button[b-vzhfp87zh0] {
    border: 1px solid rgba(255, 151, 178, 0.42);
    background: rgba(166, 48, 91, 0.46);
}

.subscription-cancel-button:disabled[b-vzhfp87zh0],
.subscription-keep-button:disabled[b-vzhfp87zh0],
.subscription-confirm-cancel-button:disabled[b-vzhfp87zh0] {
    cursor: wait;
    opacity: 0.55;
    transform: none;
}

.subscription-cancelled-panel[b-vzhfp87zh0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border-color: rgba(126, 245, 186, 0.3);
    background: rgba(28, 91, 72, 0.34);
}

.subscription-cancel-icon[b-vzhfp87zh0] {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #ffffff;
    font-weight: 900;
    border-radius: 50%;
    background: linear-gradient(135deg, #35a878, #63d5a6);
}

.subscription-footer[b-vzhfp87zh0] {
    margin: 36px auto 0;
    color: #777086;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0.35px;
}

/* Animated stars */

.subscription-stars[b-vzhfp87zh0],
.subscription-stars[b-vzhfp87zh0]::before,
.subscription-stars[b-vzhfp87zh0]::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.star[b-vzhfp87zh0] {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 7px rgba(213, 184, 255, 0.9);
    animation: starTwinkle-b-vzhfp87zh0 3s ease-in-out infinite;
}

.star-1[b-vzhfp87zh0] {
    top: 7%;
    left: 8%;
    animation-delay: 0.2s;
}

.star-2[b-vzhfp87zh0] {
    top: 14%;
    left: 26%;
    width: 2px;
    height: 2px;
    animation-delay: 1.1s;
}

.star-3[b-vzhfp87zh0] {
    top: 8%;
    right: 13%;
    width: 4px;
    height: 4px;
    animation-delay: 1.8s;
}

.star-4[b-vzhfp87zh0] {
    top: 29%;
    left: 4%;
    animation-delay: 2.3s;
}

.star-5[b-vzhfp87zh0] {
    top: 36%;
    right: 5%;
    width: 2px;
    height: 2px;
    animation-delay: 0.7s;
}

.star-6[b-vzhfp87zh0] {
    top: 55%;
    left: 12%;
    width: 4px;
    height: 4px;
    animation-delay: 1.4s;
}

.star-7[b-vzhfp87zh0] {
    top: 61%;
    right: 9%;
    animation-delay: 2.1s;
}

.star-8[b-vzhfp87zh0] {
    top: 76%;
    left: 5%;
    width: 2px;
    height: 2px;
    animation-delay: 0.4s;
}

.star-9[b-vzhfp87zh0] {
    top: 86%;
    right: 18%;
    width: 4px;
    height: 4px;
    animation-delay: 1.7s;
}

.star-10[b-vzhfp87zh0] {
    top: 92%;
    left: 33%;
    animation-delay: 2.5s;
}

.star-11[b-vzhfp87zh0] {
    top: 46%;
    left: 47%;
    width: 2px;
    height: 2px;
    animation-delay: 0.9s;
}

.star-12[b-vzhfp87zh0] {
    top: 21%;
    right: 35%;
    animation-delay: 2.8s;
}

.star-13[b-vzhfp87zh0] {
    top: 17%;
    left: 15%;
    width: 2px;
    height: 2px;
    animation-delay: 1.3s;
}

.star-14[b-vzhfp87zh0] {
    top: 32%;
    left: 34%;
    animation-delay: 2.6s;
}

.star-15[b-vzhfp87zh0] {
    top: 43%;
    right: 22%;
    width: 4px;
    height: 4px;
    animation-delay: 0.5s;
}

.star-16[b-vzhfp87zh0] {
    top: 68%;
    left: 25%;
    width: 2px;
    height: 2px;
    animation-delay: 1.9s;
}

.star-17[b-vzhfp87zh0] {
    top: 79%;
    right: 36%;
    animation-delay: 2.9s;
}

.star-18[b-vzhfp87zh0] {
    top: 94%;
    left: 72%;
    width: 4px;
    height: 4px;
    animation-delay: 0.8s;
}

/* Animations */

@keyframes subscriptionHeaderIn-b-vzhfp87zh0 {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes planCardIn-b-vzhfp87zh0 {
    from {
        opacity: 0;
        transform: translateY(34px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes selectionMessageIn-b-vzhfp87zh0 {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes crownFloat-b-vzhfp87zh0 {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
        box-shadow: 0 0 24px rgba(255, 205, 105, 0.18), inset 0 0 18px rgba(255, 255, 255, 0.06);
    }

    50% {
        transform: translateY(-7px) rotate(2deg);
        box-shadow: 0 0 34px rgba(255, 205, 105, 0.3), inset 0 0 18px rgba(255, 255, 255, 0.08);
    }
}

@keyframes premiumShimmer-b-vzhfp87zh0 {
    0%, 22% {
        left: -90%;
    }

    52%, 100% {
        left: 155%;
    }
}

@keyframes starTwinkle-b-vzhfp87zh0 {
    0%, 100% {
        opacity: 0.2;
        transform: scale(0.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

@keyframes checkPulse-b-vzhfp87zh0 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 14px rgba(86, 213, 164, 0.22);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 25px rgba(86, 213, 164, 0.4);
    }
}

@keyframes checkoutSpinner-b-vzhfp87zh0 {
    to {
        transform: rotate(360deg);
    }
}

/* Tablet */

@media (max-width: 1050px) {
    .plans-grid[b-vzhfp87zh0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-card[b-vzhfp87zh0] {
        min-height: 540px;
    }
}

/* Mobile */

@media (max-width: 620px) {
    .subscription-page[b-vzhfp87zh0] {
        padding: 32px 14px 100px;
    }

    .subscription-header[b-vzhfp87zh0] {
        margin-bottom: 36px;
    }

        .subscription-header h1[b-vzhfp87zh0] {
            font-size: 37px;
        }

    .subscription-description[b-vzhfp87zh0] {
        font-size: 14px;
    }

    .billing-switch[b-vzhfp87zh0] {
        display: flex;
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    .billing-button[b-vzhfp87zh0] {
        min-width: 0;
        flex: 1;
    }

    .plans-grid[b-vzhfp87zh0] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .plan-card[b-vzhfp87zh0] {
        min-height: auto;
        padding: 28px 22px 24px;
    }

        .plan-card:hover[b-vzhfp87zh0],
        .plan-card.selected[b-vzhfp87zh0] {
            transform: translateY(-5px);
        }

    .recommended-badge[b-vzhfp87zh0] {
        top: 14px;
        right: 14px;
    }

    .checkout-feedback[b-vzhfp87zh0] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .checkout-retry-button[b-vzhfp87zh0] {
        grid-column: 1 / -1;
    }

    .subscription-cancel-heading[b-vzhfp87zh0],
    .subscription-cancel-actions[b-vzhfp87zh0] {
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-cancel-button[b-vzhfp87zh0],
    .subscription-keep-button[b-vzhfp87zh0],
    .subscription-confirm-cancel-button[b-vzhfp87zh0] {
        width: 100%;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .subscription-header[b-vzhfp87zh0],
    .plan-card[b-vzhfp87zh0],
    .crown-icon[b-vzhfp87zh0],
    .star[b-vzhfp87zh0],
    .plan-card.recommended[b-vzhfp87zh0]::before,
    .selection-message[b-vzhfp87zh0],
    .selection-check[b-vzhfp87zh0] {
        animation: none;
    }

    .checkout-spinner[b-vzhfp87zh0] {
        animation: none;
    }

    .plan-card[b-vzhfp87zh0],
    .plan-icon[b-vzhfp87zh0],
    .select-plan-button[b-vzhfp87zh0],
    .custom-subscribe-button[b-vzhfp87zh0],
    .billing-button[b-vzhfp87zh0],
    .subscription-cancel-button[b-vzhfp87zh0],
    .subscription-keep-button[b-vzhfp87zh0],
    .subscription-confirm-cancel-button[b-vzhfp87zh0] {
        transition-duration: 0.01ms;
    }
}