.login-page {
    min-height: 100vh;
    background: #f4f8f9;
    color: #17333d
}

.login-header {
    position: relative;
    z-index: 30;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(22px,4vw,68px);
    border-bottom: 1px solid #dce8ea;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px)
}

.login-brand {
    width: 196px
}

.login-brand img {
    height: 46px;
    width: auto
}

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

.header-control,.help-link {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #49626b;
    font-size: 13px;
    font-weight: 700
}

.header-control {
    padding: 0 11px
}

.header-control:hover,.help-link:hover {
    background: #edf5f6
}

.theme-control {
    width: 40px;
    padding: 0;
    font-size: 18px
}

.help-link {
    padding: 0 12px;
    color: #126f80
}

.connection-banner {
    position: relative;
    z-index: 25;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 48px;
    font-size: 12px
}

.connection-banner>i {
    font-size: 17px
}

.connection-banner>button {
    position: absolute;
    right: 20px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 17px
}

.connection-banner.warning {
    background: #fff0dd;
    color: #73511e
}

.connection-banner.offline {
    background: #ffe8e7;
    color: #7a3234
}

.connection-banner.preview {
    background: #eee9f8;
    color: #5f427f
}

.login-shell {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: minmax(460px,1.06fr) minmax(540px,.94fr)
}

.welcome-panel {
    position: relative;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(45px,6vw,84px) clamp(42px,7vw,110px) 36px;
    background: radial-gradient(circle at 78% 45%,rgba(200,155,234,.26),transparent 28%),radial-gradient(circle at 10% 75%,rgba(85,214,217,.2),transparent 32%),linear-gradient(145deg,#073f49 0%,#075766 48%,#253c67 100%);
    color: #fff
}

.welcome-panel:before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -190px;
    top: -245px;
    border: 90px solid rgba(255,255,255,.035);
    border-radius: 50%
}

.welcome-panel:after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    left: -205px;
    bottom: -180px;
    border: 70px solid rgba(200,155,234,.08);
    border-radius: 50%
}

.welcome-copy,.welcome-assurances {
    position: relative;
    z-index: 2
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 45px;
    color: #bde4e7;
    font-size: 13px;
    font-weight: 700
}

.back-link:hover {
    color: #fff
}

.welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #baf3ed;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.welcome-copy h1 {
    max-width: 650px;
    margin: 16px 0 19px;
    font: 600 clamp(38px,4.1vw,62px)/1.08 Sora,sans-serif;
    letter-spacing: -.045em
}

.welcome-copy>p {
    max-width: 590px;
    margin: 0;
    color: #c5dfe2;
    font-size: 17px;
    line-height: 1.75
}

.wellness-orbit {
    position: relative;
    z-index: 1;
    width: min(100%,670px);
    min-height: 360px;
    flex: 1;
    margin: 20px auto 10px
}

.orbit-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(194,242,241,.18);
    border-radius: 50%;
    transform: translate(-50%,-50%)
}

.ring-one {
    width: 330px;
    height: 330px
}

.ring-two {
    width: 230px;
    height: 230px;
    border-color: rgba(222,200,246,.18)
}

.centre-bloom {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 36px;
    background: linear-gradient(145deg,rgba(85,214,217,.35),rgba(200,155,234,.42));
    box-shadow: 0 25px 70px rgba(0,0,0,.2);
    color: #fff;
    font-size: 49px;
    transform: translate(-50%,-50%) rotate(-5deg);
    backdrop-filter: blur(12px)
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 16px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
    backdrop-filter: blur(16px)
}

.floating-card>span:nth-child(2) {
    display: flex;
    flex-direction: column
}

.floating-card small {
    color: #bdd7dc;
    font-size: 10px
}

.floating-card strong {
    font-size: 13px
}

.card-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 20px
}

.card-icon.violet {
    background: #e9ddfa;
    color: #7445a8
}

.card-icon.teal {
    background: #d7f5f2;
    color: #126f80
}

.mood-card {
    left: 2%;
    top: 22%;
    animation: gentle-float 6s ease-in-out infinite
}

.mood-card .success {
    margin-left: 9px;
    color: #79e1c0
}

.privacy-card {
    right: 1%;
    top: 39%;
    animation: gentle-float 7s ease-in-out -2s infinite
}

.pause-card {
    left: 21%;
    bottom: 5%;
    animation: gentle-float 8s ease-in-out -4s infinite
}

.breath-pulse {
    width: 40px;
    height: 40px;
    display: block;
    border: 9px solid rgba(128,235,225,.45);
    border-radius: 50%;
    background: #b9f4ed;
    box-shadow: 0 0 0 6px rgba(85,214,217,.08)
}

.welcome-assurances {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    color: #bcd8dd;
    font-size: 11px;
    font-weight: 700
}

.welcome-assurances span {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.welcome-assurances i {
    color: #77e0da;
    font-size: 15px
}

.auth-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 46px clamp(26px,5vw,78px) 25px;
    background: radial-gradient(circle at 90% 0%,rgba(200,155,234,.12),transparent 29%),#f7fafb
}

.auth-card {
    width: min(100%,560px);
    padding: 34px clamp(24px,3.5vw,44px);
    border: 1px solid #dce7e9;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(6,78,91,.09)
}

.auth-heading {
    text-align: center
}

.mobile-brand-mark {
    display: none
}

.auth-kicker {
    margin: 0;
    color: #7550a1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase
}

.auth-heading h2,.reset-dialog h2 {
    margin: 7px 0 8px;
    font: 600 25px/1.2 Sora,sans-serif;
    letter-spacing: -.035em
}

.auth-heading>p:last-child {
    margin: 0;
    color: #71838a;
    font-size: 13px
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 24px 0 18px;
    padding: 5px;
    border-radius: 13px;
    background: #eff4f5
}

.auth-tab {
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #687c84;
    font-size: 13px;
    font-weight: 800
}

.auth-tab.active {
    background: #fff;
    color: #0f7181;
    box-shadow: 0 5px 15px rgba(6,78,91,.08)
}

.auth-tab:focus-visible,.google-button:focus-visible,.auth-submit:focus-visible,.text-button:focus-visible,.password-toggle:focus-visible,.header-control:focus-visible,.help-link:focus-visible,.modal-close:focus-visible {
    outline: 3px solid rgba(123,76,201,.32);
    outline-offset: 2px
}

.google-button {
    width: 100%;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid #ccdadd;
    border-radius: 12px;
    background: #fff;
    color: #263f48;
    font-size: 13px;
    font-weight: 800;
    transition: .2s
}

.google-button:hover {
    border-color: #a7bec4;
    background: #f9fbfb
}

.google-mark {
    font-size: 19px;
    color: #4285f4
}

.form-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: #8a999e;
    font-size: 10px
}

.form-divider:before,.form-divider:after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e1e9eb
}

.auth-form {
    display: grid;
    gap: 14px
}

.auth-field {
    display: block
}

.auth-field>span:first-child {
    display: block;
    margin-bottom: 6px;
    color: #405861;
    font-size: 11px;
    font-weight: 800
}

.input-wrap {
    height: 48px;
    display: flex!important;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #cbd9dc;
    border-radius: 12px;
    background: #fbfdfd;
    transition: .18s
}

.input-wrap>i:first-child {
    color: #147e91;
    font-size: 17px
}

.input-wrap input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1c3943;
    font: 500 13px "Plus Jakarta Sans",sans-serif
}

.input-wrap input::placeholder {
    color: #9aa9ae
}

.input-wrap:focus-within {
    border-color: #147e91;
    box-shadow: 0 0 0 3px rgba(20,126,145,.1);
    background: #fff
}

.password-toggle {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #71858c;
    font-size: 17px
}

.password-toggle:hover {
    background: #edf4f5
}

.field-success {
    display: none;
    color: #33875b!important
}

.auth-field.valid .field-success {
    display: block
}

.auth-field.invalid .input-wrap {
    border-color: #ac4549;
    background: #fff9f8
}

.field-error {
    display: block;
    min-height: 14px;
    margin-top: 4px;
    color: #a0393e;
    font-size: 10px;
    font-weight: 600
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.remember-choice,.agreement-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #5d727a;
    font-size: 11px
}

.remember-choice input,.agreement-choice input {
    position: absolute;
    opacity: 0
}

.custom-checkbox {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    border: 1px solid #b8c9cc;
    border-radius: 5px;
    background: #fff;
    color: transparent
}

.remember-choice input:checked+.custom-checkbox,.agreement-choice input:checked+.custom-checkbox {
    border-color: #147e91;
    background: #147e91;
    color: #fff
}

.remember-choice input:focus-visible+.custom-checkbox,.agreement-choice input:focus-visible+.custom-checkbox {
    outline: 3px solid rgba(123,76,201,.3);
    outline-offset: 2px
}

.text-button {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #147585;
    font-size: 11px;
    font-weight: 800
}

.text-button:hover {
    text-decoration: underline
}

.auth-submit {
    position: relative;
    width: 100%;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(110deg,#064e5b,#0f7887);
    box-shadow: 0 13px 28px rgba(6,78,91,.2);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    transition: .2s
}

.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(6,78,91,.25)
}

.auth-submit:disabled,.google-button:disabled {
    opacity: .58;
    cursor: not-allowed;
    transform: none
}

.button-spinner {
    display: none;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .8s linear infinite
}

.auth-submit.loading>i,.auth-submit.loading>span:first-child {
    display: none
}

.auth-submit.loading .button-spinner {
    display: block
}

.auth-alert {
    padding: 10px 12px;
    border: 1px solid #edc4c5;
    border-radius: 10px;
    background: #fff5f4;
    color: #7f3337;
    font-size: 11px
}

.auth-alert.success {
    border-color: #bddfc9;
    background: #f0faf3;
    color: #2f7348
}

.field-row {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 11px
}

.password-strength {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 4px;
    margin-top: 8px
}

.password-strength i {
    height: 4px;
    border-radius: 99px;
    background: #e1e9eb
}

.password-strength[data-score="1"] i:nth-child(-n+1) {
    background: #ba5559
}

.password-strength[data-score="2"] i:nth-child(-n+2) {
    background: #d5963e
}

.password-strength[data-score="3"] i:nth-child(-n+3) {
    background: #499982
}

.password-strength[data-score="4"] i {
    background: #2b8162
}

.password-requirements {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: #85969b;
    font-size: 9px
}

.password-requirements li {
    display: flex;
    align-items: center;
    gap: 3px
}

.password-requirements li.met {
    color: #398157
}

.password-requirements li.met i:before {
    content: "\eb7b"
}

.agreement-group {
    display: grid;
    gap: 9px
}

.agreement-choice a {
    color: #147585;
    font-weight: 800;
    text-decoration: underline
}

.agreement-choice.invalid {
    color: #9f3a3f
}

.agreement-error {
    margin-top: -4px
}

.setup-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    margin: -3px 0 0;
    color: #829399;
    font-size: 9px;
    text-align: center
}

.setup-note i {
    color: #147e91;
    font-size: 13px
}

.auth-safety-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e2eaec
}

.auth-safety-note>i {
    color: #33865e;
    font-size: 20px
}

.auth-safety-note p {
    display: flex;
    flex-direction: column;
    margin: 0
}

.auth-safety-note strong {
    font-size: 10px
}

.auth-safety-note span {
    margin-top: 2px;
    color: #7b8d93;
    font-size: 9px;
    line-height: 1.55
}

.login-footer {
    width: min(100%,560px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 18px;
    color: #7b8d93;
    font-size: 10px
}

.login-footer nav {
    display: flex;
    gap: 13px
}

.login-footer a:hover {
    color: #147585
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,28,34,.66);
    backdrop-filter: blur(5px)
}

.reset-dialog {
    position: relative;
    width: min(100%,440px);
    padding: 34px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.3);
    text-align: center
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #eef3f4;
    color: #536b74;
    font-size: 18px
}

.reset-icon {
    width: 61px;
    height: 61px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 20px;
    background: #ede5f7;
    color: #744ba8;
    font-size: 27px
}

.reset-dialog>p:not(.auth-kicker):not(.reset-help) {
    margin: 0 0 20px;
    color: #71848b;
    font-size: 12px
}

.reset-dialog form {
    text-align: left
}

.reset-dialog .auth-submit {
    margin-top: 10px
}

.reset-help {
    margin: 15px 0 0;
    color: #829399;
    font-size: 10px
}

.reset-help a {
    color: #147585;
    font-weight: 800
}

.auth-toast {
    position: fixed;
    z-index: 110;
    right: 20px;
    bottom: 20px;
    max-width: 430px;
    display: grid;
    grid-template-columns: 25px 1fr 28px;
    align-items: center;
    gap: 8px;
    padding: 13px 14px;
    border-radius: 13px;
    background: #153d47;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    font-size: 11px
}

.auth-toast>i {
    color: #7ae0dc;
    font-size: 19px
}

.auth-toast button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 16px
}

.login-page.is-busy {
    cursor: progress
}

[data-theme=dark] .login-header {
    background: rgba(8,47,56,.95);
    border-color: #244b54
}

[data-theme=dark] .header-control,[data-theme=dark] .help-link {
    color: #d6e9ec
}

[data-theme=dark] .header-control:hover,[data-theme=dark] .help-link:hover {
    background: #153e48
}

[data-theme=dark] .login-brand img {
    filter: brightness(0) invert(1)
}

[data-theme=dark] .auth-side {
    background: radial-gradient(circle at 90% 0%,rgba(123,76,201,.19),transparent 30%),#082f38
}

[data-theme=dark] .auth-card,[data-theme=dark] .reset-dialog {
    background: #0c3943;
    border-color: #28505a;
    color: #edf7f8
}

[data-theme=dark] .auth-heading>p:last-child,[data-theme=dark] .reset-dialog>p:not(.auth-kicker):not(.reset-help),[data-theme=dark] .auth-safety-note span {
    color: #a9c1c6
}

[data-theme=dark] .auth-tabs {
    background: #082f38
}

[data-theme=dark] .auth-tab {
    color: #a8bfc4
}

[data-theme=dark] .auth-tab.active {
    background: #17434d;
    color: #7ee1dc
}

[data-theme=dark] .google-button {
    background: #103c45;
    border-color: #2b545d;
    color: #edf7f8
}

[data-theme=dark] .google-button:hover {
    background: #15434d
}

[data-theme=dark] .form-divider:before,[data-theme=dark] .form-divider:after,[data-theme=dark] .auth-safety-note {
    border-color: #28505a
}

[data-theme=dark] .auth-field>span:first-child {
    color: #d9e8eb
}

[data-theme=dark] .input-wrap {
    background: #103b44;
    border-color: #315861
}

[data-theme=dark] .input-wrap:focus-within {
    background: #123f49
}

[data-theme=dark] .input-wrap input {
    color: #edf7f8
}

[data-theme=dark] .custom-checkbox {
    background: #103b44;
    border-color: #3d626a
}

[data-theme=dark] .remember-choice,[data-theme=dark] .agreement-choice {
    color: #b8cdd1
}

[data-theme=dark] .modal-close {
    background: #173f48;
    color: #edf7f8
}

[data-theme=dark] .login-footer {
    color: #96b2b8
}

@keyframes gentle-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-9px)
    }
}

@keyframes login-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width: 1050px) {
    .login-shell {
        grid-template-columns:.9fr 1.1fr
    }

    .welcome-panel {
        padding-left: 45px;
        padding-right: 45px
    }

    .wellness-orbit {
        transform: scale(.9)
    }

    .mood-card {
        left: 0
    }

    .privacy-card {
        right: 0
    }

    .welcome-assurances {
        gap: 10px
    }

    .welcome-assurances span {
        font-size: 10px
    }
}

@media(max-width: 850px) {
    .login-header {
        height:68px;
        padding: 0 20px
    }

    .login-brand {
        width: 170px
    }

    .login-brand img {
        height: 40px
    }

    .login-shell {
        min-height: calc(100vh - 68px);
        grid-template-columns: 1fr
    }

    .welcome-panel {
        display: none
    }

    .auth-side {
        min-height: calc(100vh - 68px);
        padding: 38px 20px 24px
    }

    .mobile-brand-mark {
        width: 49px;
        height: 49px;
        display: grid;
        place-items: center;
        margin: 0 auto 13px;
        border-radius: 16px;
        background: linear-gradient(145deg,#d5f4f2,#e9ddf8);
        color: #146f80;
        font-size: 25px
    }

    .auth-card {
        max-width: 580px
    }
}

@media(max-width: 560px) {
    .login-header-actions {
        gap:1px
    }

    .language-control span,.language-control .ri-arrow-down-s-line,.help-link span {
        display: none
    }

    .language-control,.help-link {
        width: 38px;
        padding: 0
    }

    .login-brand {
        width: 148px
    }

    .login-brand img {
        height: 36px
    }

    .connection-banner {
        justify-content: flex-start;
        padding: 9px 46px 9px 15px;
        font-size: 10px
    }

    .auth-side {
        padding: 25px 13px 20px
    }

    .auth-card {
        padding: 27px 18px;
        border-radius: 20px
    }

    .auth-heading h2 {
        font-size: 22px
    }

    .field-row {
        grid-template-columns: 1fr
    }

    .form-options {
        align-items: flex-start
    }

    .login-footer {
        align-items: flex-start;
        flex-direction: column;
        padding-left: 4px
    }

    .reset-dialog {
        padding: 30px 20px
    }

    .auth-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none
    }
}

@media(max-width: 360px) {
    .login-header {
        padding:0 12px
    }

    .login-brand {
        width: 130px
    }

    .login-header-actions .language-control {
        display: none
    }

    .auth-tabs {
        margin-top: 19px
    }

    .auth-card {
        padding-left: 14px;
        padding-right: 14px
    }

    .password-requirements {
        gap: 7px
    }

    .form-options {
        font-size: 10px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto!important;
        transition: none!important
    }

    .floating-card,.button-spinner {
        animation: none
    }
}

[hidden] {
    display: none!important
}