:root {
    --page-bg: #062e5d;
    --page-bg-2: #0a5398;
    --shell-bg: #115998;
    --story-bg: #0a3f78;
    --story-bg-2: #1771ba;
    --story-ink: #ffffff;
    --story-muted: rgba(229, 244, 255, .82);
    --accent: #2d8de4;
    --accent-dark: #0a3c70;
    --accent-soft: rgba(255, 255, 255, .12);
    --ink: #ffffff;
    --muted: #c8dff2;
    --line: rgba(255, 255, 255, .22);
    --field: #f5f9fd;
    --shadow: 0 32px 90px rgba(0, 25, 61, .4);
    --shell-radius: 46px;
    --story-width: 48%;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    font-family: "Leelawadee UI", "Tahoma", sans-serif;
    background:
        radial-gradient(circle at 12% 12%, rgba(92, 177, 255, .18) 0 6%, transparent 6.2%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    transition: background .45s ease, color .35s ease;
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.login-page {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 52px 32px;
    isolation: isolate;
}

.ambient {
    position: fixed;
    z-index: -1;
    pointer-events: none;
    opacity: .7;
    transition: all .6s ease;
}

.ambient-one {
    top: -120px;
    left: -80px;
    width: 380px;
    height: 380px;
    border: 48px solid rgba(77, 195, 230, .12);
    border-radius: 50%;
}

.ambient-two {
    right: -90px;
    bottom: -90px;
    width: 330px;
    height: 330px;
    border-radius: 42% 58% 50% 50%;
    background: rgba(88, 157, 235, .14);
    transform: rotate(26deg);
}

.ambient-three {
    top: 18%;
    right: 7%;
    width: 90px;
    height: 90px;
    border: 18px solid rgba(52, 193, 213, .12);
    border-radius: 30px;
    transform: rotate(28deg);
}

.login-shell {
    position: relative;
    width: min(1160px, 100%);
    min-height: 670px;
    display: grid;
    grid-template-columns: var(--story-width) 1fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: var(--shell-radius);
    background: var(--shell-bg);
    box-shadow: var(--shadow);
    transition: border-radius .45s ease, box-shadow .45s ease, transform .45s ease;
}

.story-panel,
.form-panel {
    position: relative;
    min-width: 0;
}

.story-panel {
    min-height: 670px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 42px 48px;
    color: var(--story-ink);
    background:
        radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .28) 0 5%, transparent 5.2%),
        linear-gradient(145deg, var(--story-bg), var(--story-bg-2));
    transition: background .5s ease, color .35s ease;
}

.story-panel::after {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -150px;
    width: 120%;
    height: 310px;
    border-radius: 50% 50% 0 0;
    background: rgba(255, 255, 255, .24);
    transform: rotate(-4deg);
}

.brand-lockup,
.mobile-brand {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 17px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(5, 48, 92, .5);
    box-shadow: 0 12px 26px rgba(21, 86, 107, .14);
}

.brand-mark img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.brand-lockup strong,
.mobile-brand strong {
    display: block;
    font-family: "Arial Rounded MT Bold", "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.brand-lockup small,
.mobile-brand small {
    display: block;
    margin-top: 1px;
    color: var(--story-muted);
    font-size: .71rem;
}

.story-copy {
    position: relative;
    z-index: 4;
    width: min(470px, 100%);
    margin-top: 82px;
}

.eyebrow,
.form-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Arial Rounded MT Bold", "Segoe UI", sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.eyebrow {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .36);
}

.story-title {
    margin: 18px 0 12px;
    font-size: clamp(2rem, 3.3vw, 3.15rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.03em;
}

.story-description {
    max-width: 430px;
    margin: 0;
    color: var(--story-muted);
    font-size: .95rem;
    line-height: 1.85;
}

.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.feature-list span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    font-size: .76rem;
    font-weight: 600;
}

.care-scene {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

.sun {
    position: absolute;
    top: 94px;
    right: 55px;
    width: 78px;
    height: 78px;
    border: 12px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    background: #ffd86f;
    box-shadow: 0 0 0 14px rgba(255, 235, 147, .22);
}

.cloud {
    position: absolute;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .64);
}

.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: inherit;
}

.cloud::before {
    left: 18px;
    width: 48px;
    height: 48px;
}

.cloud::after {
    right: 17px;
    width: 38px;
    height: 38px;
}

.cloud-one {
    top: 190px;
    right: -30px;
    width: 146px;
}

.cloud-two {
    bottom: 118px;
    left: -35px;
    width: 124px;
    transform: scale(.8);
}

.rainbow {
    position: absolute;
    right: -40px;
    bottom: 86px;
    width: 248px;
    height: 124px;
    overflow: hidden;
}

.rainbow span {
    position: absolute;
    inset: 0;
    border: 22px solid rgba(255, 134, 101, .56);
    border-bottom: 0;
    border-radius: 200px 200px 0 0;
}

.rainbow span:nth-child(2) {
    inset: 20px;
    border-color: rgba(255, 214, 105, .72);
    border-bottom: 0;
}

.rainbow span:nth-child(3) {
    inset: 40px;
    border-color: rgba(121, 214, 174, .76);
    border-bottom: 0;
}

.character {
    position: absolute;
    bottom: 28px;
    z-index: 4;
    width: 96px;
    text-align: center;
}

.character .face {
    position: relative;
    z-index: 2;
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin: 0 auto -6px;
    border: 4px solid #fff;
    border-radius: 48% 48% 46% 46%;
    color: #724c3b;
    background: #ffd9bd;
    font-family: "Arial Rounded MT Bold", "Segoe UI", sans-serif;
    font-size: .8rem;
}

.character .body {
    width: 90px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 42px 42px 20px 20px;
    color: #ff6a6a;
    background: #fff;
    box-shadow: 0 12px 22px rgba(40, 99, 116, .14);
    font-size: 1.5rem;
}

.doctor {
    right: 210px;
}

.doctor .face::before {
    content: "";
    position: absolute;
    top: -7px;
    width: 58px;
    height: 28px;
    border-radius: 35px 35px 10px 10px;
    background: #394a69;
    z-index: -1;
}

.child {
    right: 115px;
    transform: scale(.78);
    transform-origin: bottom;
}

.child .body {
    background: #ffd96b;
}

.heart,
.star {
    position: absolute;
    color: #fff;
    text-shadow: 0 8px 18px rgba(37, 102, 121, .12);
}

.heart {
    right: 182px;
    bottom: 145px;
    color: #ff6c78;
    font-size: 28px;
    transform: rotate(12deg);
}

.star-one {
    top: 245px;
    left: 34px;
    font-size: 32px;
}

.star-two {
    right: 46px;
    bottom: 260px;
    font-size: 20px;
}

.trust-note {
    position: absolute;
    z-index: 5;
    left: 48px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--story-muted);
    font-size: .73rem;
}

.form-panel {
    display: grid;
    place-items: center;
    padding: 46px 48px;
    background: var(--shell-bg);
    transition: background .45s ease;
}

.form-inner {
    width: min(410px, 100%);
}

.mobile-brand {
    display: none;
    margin-bottom: 28px;
}

.mobile-brand img {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(5, 48, 92, .5);
    object-fit: contain;
}

.mobile-brand small {
    color: var(--muted);
}

.form-kicker {
    color: var(--accent-dark);
}

.form-inner h1 {
    margin: 7px 0 8px;
    color: var(--ink);
    font-size: clamp(1.65rem, 2.2vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.form-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
}

.role-badges {
    display: flex;
    gap: 8px;
    margin: 20px 0 23px;
}

.role-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: .75rem;
    font-weight: 600;
}

.field-group {
    margin-bottom: 15px;
}

.field-group label {
    display: block;
    margin: 0 0 7px;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 600;
}

.field-control {
    min-height: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--field);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field-control:focus-within {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.field-control > i {
    width: 48px;
    flex: 0 0 48px;
    color: var(--accent-dark);
    text-align: center;
    font-size: 1.25rem;
}

.field-control input {
    width: 100%;
    height: 48px;
    min-width: 0;
    padding: 0 10px 0 0;
    border: 0;
    outline: 0;
    color: #173a5e;
    background: transparent;
    font-size: .84rem;
}

.field-control input::placeholder {
    color: #8a9caf;
}

.password-toggle {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 0;
    outline: 0;
    color: #6f87a0;
    background: transparent;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--accent-dark);
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 5px 0 21px;
    font-size: .74rem;
}

.remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    cursor: pointer;
}

.remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.form-options a {
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: none;
}

.form-options a:hover {
    text-decoration: underline;
}

.login-button {
    width: 100%;
    min-height: 51px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    box-shadow: 0 13px 24px color-mix(in srgb, var(--accent) 29%, transparent);
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.login-button:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 16px 28px color-mix(in srgb, var(--accent) 38%, transparent);
}

.login-button:focus-visible {
    outline: 4px solid color-mix(in srgb, var(--accent) 24%, transparent);
    outline-offset: 3px;
}

.login-button:disabled {
    cursor: wait;
    opacity: .82;
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.btn-text i {
    font-size: 1.2rem;
}

.btn-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.login-button.is-loading .btn-text {
    display: none;
}

.login-button.is-loading .btn-loading {
    display: inline-flex;
}

.support-box {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
    padding: 11px 13px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--field) 70%, transparent);
}

.support-box > i {
    color: var(--accent-dark);
    font-size: 1.2rem;
}

.support-box p,
.privacy-note {
    margin: 0;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.6;
}

.privacy-note {
    margin-top: 15px;
    text-align: center;
}

.privacy-note i {
    margin-right: 3px;
    color: #59a988;
}

/* Blue Candy Clouds — final clinic login direction */
body[data-theme="candy"] {
    --page-bg: #062e5d;
    --page-bg-2: #0a5398;
    --shell-bg: #115998;
    --story-bg: #0a3f78;
    --story-bg-2: #1771ba;
    --story-ink: #ffffff;
    --story-muted: rgba(229, 244, 255, .82);
    --accent: #2d8de4;
    --accent-dark: #0a3c70;
    --accent-soft: rgba(255, 255, 255, .12);
    --ink: #ffffff;
    --muted: #c8dff2;
    --line: rgba(255, 255, 255, .22);
    --field: #f5f9fd;
    --shadow: 0 32px 90px rgba(0, 25, 61, .4);
    --shell-radius: 46px;
    --story-width: 48%;
}

body[data-theme="candy"] .login-shell {
    min-height: 700px;
    grid-template-columns: var(--story-width) 1fr;
    border-color: rgba(255, 255, 255, .16);
}

body[data-theme="candy"] .story-panel {
    min-height: 700px;
    border-radius: 0 52% 52% 0 / 0 22% 22% 0;
}

body[data-theme="candy"] .story-panel::after {
    left: -20%;
    bottom: -90px;
    width: 130%;
    background: rgba(255, 255, 255, .18);
}

body[data-theme="candy"] .story-copy {
    margin-top: 60px;
}

body[data-theme="candy"] .story-title {
    font-size: clamp(2rem, 3.2vw, 2.85rem);
}

body[data-theme="candy"] .form-panel {
    background:
        radial-gradient(circle at 100% 0, rgba(95, 178, 255, .2), transparent 36%),
        linear-gradient(155deg, #1764a8, var(--shell-bg));
}

body[data-theme="candy"] .form-kicker,
body[data-theme="candy"] .form-options a {
    color: #bde2ff;
}

body[data-theme="candy"] .role-badges span {
    color: #eaf6ff;
    border: 1px solid rgba(255, 255, 255, .14);
}

body[data-theme="candy"] .field-control {
    border-color: rgba(255, 255, 255, .36);
    box-shadow: 0 8px 18px rgba(0, 38, 82, .12);
}

body[data-theme="candy"] .field-control > i {
    color: #2269a7;
}

body[data-theme="candy"] .login-button {
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(135deg, #0b427c, #052d58);
    box-shadow: 0 14px 28px rgba(0, 31, 69, .34);
}

body[data-theme="candy"] .support-box {
    background: rgba(255, 255, 255, .08);
}

body[data-theme="candy"] .support-box > i,
body[data-theme="candy"] .privacy-note i {
    color: #a9dcff;
}

body[data-theme="candy"] .character {
    bottom: 26px;
}

body[data-theme="candy"] .rainbow {
    right: 10px;
    bottom: 100px;
    transform: scale(.86);
}

body[data-theme="candy"] .ambient-one {
    border-radius: 36% 64% 58% 42%;
    border: 0;
    background: rgba(79, 168, 248, .18);
}

body[data-theme="candy"] .ambient-three {
    border-radius: 50%;
}

/* 03 — Mint Checkup */
body[data-theme="mint"] {
    --page-bg: #e8fff5;
    --page-bg-2: #d9f7ef;
    --shell-bg: #fafffd;
    --story-bg: #8fe1c4;
    --story-bg-2: #d9f7d4;
    --story-ink: #13584b;
    --story-muted: #3e756b;
    --accent: #2fb890;
    --accent-dark: #168268;
    --accent-soft: #e0f8ef;
    --ink: #173e3a;
    --muted: #718b87;
    --line: #d6e9e4;
    --field: #f4fbf9;
    --shadow: 0 28px 70px rgba(42, 111, 92, .16);
    --shell-radius: 24px;
    --story-width: 57%;
}

body[data-theme="mint"] .login-shell {
    transform: rotate(-.35deg);
}

body[data-theme="mint"] .form-panel {
    transform: rotate(.35deg);
}

body[data-theme="mint"] .story-panel {
    clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
    padding-right: 90px;
}

body[data-theme="mint"] .story-panel::after {
    bottom: -170px;
    background: rgba(255, 255, 255, .32);
}

body[data-theme="mint"] .story-copy {
    margin-top: 70px;
}

body[data-theme="mint"] .care-scene {
    transform: translateX(-10px);
}

body[data-theme="mint"] .sun {
    background: #fff280;
}

body[data-theme="mint"] .rainbow span:first-child {
    border-color: rgba(77, 183, 145, .6);
}

/* 04 — Playroom Tiles */
body[data-theme="playroom"] {
    --page-bg: #fff4d9;
    --page-bg-2: #f0f8ff;
    --shell-bg: #fffef9;
    --story-bg: #ffe070;
    --story-bg-2: #ffc85a;
    --story-ink: #343f63;
    --story-muted: #58607c;
    --accent: #5f74e8;
    --accent-dark: #4457bf;
    --accent-soft: #e9edff;
    --ink: #303856;
    --muted: #7b8195;
    --line: #e4e3dc;
    --field: #fbfaf5;
    --shadow: 14px 14px 0 rgba(64, 79, 119, .12);
    --shell-radius: 14px;
    --story-width: 46%;
}

body[data-theme="playroom"] .login-shell {
    border: 3px solid #343f63;
}

body[data-theme="playroom"] .story-panel {
    min-height: 670px;
    border-right: 3px solid #343f63;
}

body[data-theme="playroom"] .story-panel::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 18px;
    width: 64px;
    height: 64px;
    border: 3px solid #343f63;
    border-radius: 12px;
    background: #ff8b79;
    box-shadow:
        -76px 0 0 #78d6cf,
        0 76px 0 #fff2af;
    transform: rotate(8deg);
}

body[data-theme="playroom"] .brand-mark,
body[data-theme="playroom"] .field-control,
body[data-theme="playroom"] .login-button,
body[data-theme="playroom"] .support-box,
body[data-theme="playroom"] .theme-button {
    border-radius: 7px;
}

body[data-theme="playroom"] .eyebrow,
body[data-theme="playroom"] .feature-list span,
body[data-theme="playroom"] .role-badges span {
    border-radius: 6px;
}

body[data-theme="playroom"] .story-copy {
    margin-top: 95px;
}

body[data-theme="playroom"] .care-scene {
    transform: scale(.9);
    transform-origin: bottom right;
}

body[data-theme="playroom"] .ambient-one,
body[data-theme="playroom"] .ambient-two,
body[data-theme="playroom"] .ambient-three {
    border-radius: 16px;
}

/* 05 — Storybook Sky */
body[data-theme="storybook"] {
    --page-bg: #d8efff;
    --page-bg-2: #f3eaff;
    --shell-bg: #ffffff;
    --story-bg: #6aaeed;
    --story-bg-2: #a8d7fa;
    --story-ink: #ffffff;
    --story-muted: rgba(255, 255, 255, .82);
    --accent: #6178df;
    --accent-dark: #4356b4;
    --accent-soft: #e9edff;
    --ink: #243763;
    --muted: #73809d;
    --line: #dce3f0;
    --field: #f7f9fd;
    --shadow: 0 32px 90px rgba(55, 87, 142, .22);
    --shell-radius: 36px 36px 100px 36px;
    --story-width: 54%;
}

body[data-theme="storybook"] .story-panel {
    background:
        radial-gradient(circle at 75% 18%, #fff9c9 0 5%, rgba(255,255,255,.16) 5.2% 7%, transparent 7.2%),
        linear-gradient(160deg, var(--story-bg), var(--story-bg-2));
}

body[data-theme="storybook"] .story-panel::before {
    content: "✦  ·  ✧       ✦";
    position: absolute;
    top: 34px;
    left: 44%;
    color: rgba(255, 255, 255, .7);
    font-size: 24px;
    letter-spacing: 20px;
    white-space: nowrap;
}

body[data-theme="storybook"] .story-panel::after {
    bottom: -115px;
    height: 280px;
    background: rgba(255, 255, 255, .3);
}

body[data-theme="storybook"] .story-copy {
    margin-top: 70px;
}

body[data-theme="storybook"] .eyebrow {
    background: rgba(52, 93, 151, .18);
}

body[data-theme="storybook"] .feature-list span {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(52, 93, 151, .14);
}

body[data-theme="storybook"] .sun {
    opacity: 0;
}

/* 06 — Peachy Care */
body[data-theme="peach"] {
    --page-bg: #fff0e9;
    --page-bg-2: #fff9d9;
    --shell-bg: #fffdf9;
    --story-bg: #ff987d;
    --story-bg-2: #ffc78f;
    --story-ink: #61382f;
    --story-muted: #79554b;
    --accent: #f26f61;
    --accent-dark: #cb4c42;
    --accent-soft: #ffebe6;
    --ink: #523833;
    --muted: #927a74;
    --line: #eaded8;
    --field: #fff9f6;
    --shadow: 0 28px 70px rgba(151, 90, 69, .17);
    --shell-radius: 28px;
    --story-width: 43%;
}

body[data-theme="peach"] .login-shell {
    grid-template-columns: 1fr var(--story-width);
}

body[data-theme="peach"] .story-panel {
    grid-column: 2;
    grid-row: 1;
    padding: 40px;
}

body[data-theme="peach"] .form-panel {
    grid-column: 1;
    grid-row: 1;
}

body[data-theme="peach"] .story-copy {
    margin-top: 78px;
}

body[data-theme="peach"] .story-title {
    font-size: clamp(1.9rem, 3vw, 2.7rem);
}

body[data-theme="peach"] .feature-list {
    display: grid;
    grid-template-columns: 1fr;
    width: fit-content;
}

body[data-theme="peach"] .care-scene {
    transform: translateX(55px) scale(.88);
    transform-origin: bottom right;
}

body[data-theme="peach"] .doctor {
    right: 180px;
}

body[data-theme="peach"] .child {
    right: 92px;
}

body[data-theme="peach"] .trust-note {
    left: 40px;
}

/* 07 — Rainbow Rounds */
body[data-theme="rainbow"] {
    --page-bg: #f5edff;
    --page-bg-2: #e7fbf5;
    --shell-bg: rgba(255, 255, 255, .94);
    --story-bg: #fff7b7;
    --story-bg-2: #c9f1df;
    --story-ink: #304d57;
    --story-muted: #5d777d;
    --accent: #9a6ee8;
    --accent-dark: #714bb9;
    --accent-soft: #f0e9ff;
    --ink: #334552;
    --muted: #7a8b93;
    --line: #dfe8e7;
    --field: #fbfdfd;
    --shadow: 0 32px 90px rgba(91, 87, 129, .18);
    --shell-radius: 70px 28px 70px 28px;
    --story-width: 50%;
}

body[data-theme="rainbow"] .login-page::before,
body[data-theme="rainbow"] .login-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 380px;
    height: 380px;
    border: 55px solid rgba(154, 110, 232, .12);
    border-radius: 50%;
}

body[data-theme="rainbow"] .login-page::before {
    top: -170px;
    right: -100px;
}

body[data-theme="rainbow"] .login-page::after {
    bottom: -190px;
    left: -100px;
    border-color: rgba(64, 190, 160, .12);
}

body[data-theme="rainbow"] .story-panel {
    margin: 18px;
    min-height: calc(670px - 36px);
    border-radius: 55px 22px 55px 22px;
}

body[data-theme="rainbow"] .story-panel::after {
    bottom: -135px;
}

body[data-theme="rainbow"] .story-copy {
    margin-top: 55px;
}

body[data-theme="rainbow"] .rainbow {
    right: 0;
    bottom: 70px;
    transform: scale(1.08);
}

/* 08 — Cozy Night Shift */
body[data-theme="night"] {
    --page-bg: #18234f;
    --page-bg-2: #334881;
    --shell-bg: #fbfcff;
    --story-bg: #334e93;
    --story-bg-2: #596dcc;
    --story-ink: #ffffff;
    --story-muted: rgba(242, 245, 255, .78);
    --accent: #ffbd62;
    --accent-dark: #e58c3f;
    --accent-soft: #fff2dc;
    --ink: #26345b;
    --muted: #75809d;
    --line: #dce2ee;
    --field: #f7f9fd;
    --picker: rgba(34, 45, 87, .88);
    --shadow: 0 36px 100px rgba(7, 15, 45, .35);
    --shell-radius: 30px;
    --story-width: 55%;
}

body[data-theme="night"] .story-panel {
    background:
        radial-gradient(circle at 80% 14%, #ffe59b 0 5%, rgba(255,255,255,.12) 5.2% 7%, transparent 7.2%),
        linear-gradient(155deg, var(--story-bg), var(--story-bg-2));
}

body[data-theme="night"] .story-panel::before {
    content: "✦     ·       ✧   ·     ✦";
    position: absolute;
    inset: 82px 20px auto 120px;
    color: rgba(255, 255, 255, .72);
    font-size: 20px;
    letter-spacing: 15px;
}

body[data-theme="night"] .story-copy {
    margin-top: 72px;
}

body[data-theme="night"] .eyebrow,
body[data-theme="night"] .feature-list span {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .16);
}

body[data-theme="night"] .sun {
    top: 80px;
    background: #ffe49b;
    box-shadow: 0 0 55px rgba(255, 224, 137, .3);
}

body[data-theme="night"] .picker-heading strong,
body[data-theme="night"] .picker-heading small {
    color: #fff;
}

body[data-theme="night"] .theme-button {
    color: #d8def4;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
}

body[data-theme="night"] .theme-button.active {
    color: #26345b;
    background: var(--accent);
}

body[data-theme="night"] .ambient-one {
    border-color: rgba(255, 255, 255, .05);
}

body[data-theme="night"] .ambient-two {
    background: rgba(255, 202, 106, .09);
}

@media (max-width: 1000px) {
    .login-shell,
    body[data-theme="candy"] .login-shell,
    body[data-theme="peach"] .login-shell {
        width: min(720px, 100%);
        grid-template-columns: 1fr;
    }

    .story-panel,
    body[data-theme="candy"] .story-panel,
    body[data-theme="mint"] .story-panel,
    body[data-theme="playroom"] .story-panel,
    body[data-theme="rainbow"] .story-panel,
    body[data-theme="peach"] .story-panel {
        display: none;
    }

    .form-panel,
    body[data-theme="peach"] .form-panel {
        grid-column: 1;
        grid-row: 1;
        min-height: 670px;
        transform: none;
    }

    .mobile-brand {
        display: flex;
    }
}

@media (max-width: 720px) {
    .login-page {
        display: block;
        min-height: 100svh;
        padding: 18px 14px;
    }

    .login-shell {
        min-height: auto;
        border-radius: 24px;
    }

    .form-panel {
        min-height: calc(100svh - 144px);
        padding: 34px 24px;
    }

}

@media (max-width: 420px) {
    .form-panel {
        padding: 29px 18px;
    }

    .role-badges {
        margin-top: 17px;
    }

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

    .remember span {
        max-width: 90px;
    }

    .support-box {
        align-items: flex-start;
    }
}

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

.swal2-popup.swal-loader-overlay {
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.swal-loader-shell {
    display: inline-flex;
    min-width: 340px;
    padding: 2px 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: swal-loader-fade .9s ease-out both;
}

.swal-loading-text-wrap {
    display: block;
    margin-bottom: 6px;
    text-align: center;
}

.swal-loading-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .22px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.swal-loading-subtitle {
    margin-top: 4px;
    color: rgba(239, 252, 255, .92);
    font-size: .83rem;
    font-weight: 500;
    letter-spacing: .12px;
}

.swal-loading-syringe-wrap {
    position: relative;
    width: 286px;
    height: 42px;
    margin-top: 10px;
    overflow: hidden;
}

.swal-syringe-rail {
    position: absolute;
    top: 50%;
    right: 8px;
    left: 8px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(112, 202, 215, .24), rgba(255, 190, 199, .48), rgba(112, 202, 215, .24));
    box-shadow: inset 0 0 0 1px rgba(215, 249, 252, .24);
    transform: translateY(-50%);
}

.swal-loading-syringe,
.swal-loading-syringe-glow {
    position: absolute;
    left: 0;
    width: 96px;
    animation: swal-syringe-slide 1.65s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}

.swal-loading-syringe {
    top: 8px;
    height: 26px;
    filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .2));
}

.swal-loading-syringe-glow {
    top: 0;
    height: 100%;
    border-radius: 12px;
    background: radial-gradient(circle at center, rgba(167, 255, 247, .25), rgba(167, 255, 247, 0) 70%);
    pointer-events: none;
}

.swal-syringe-plunger {
    position: absolute;
    top: 10px;
    left: 0;
    width: 22px;
    height: 6px;
    border-radius: 4px;
    background: rgba(214, 250, 255, .95);
}

.swal-syringe-plunger::before {
    position: absolute;
    top: -3px;
    left: -7px;
    width: 9px;
    height: 12px;
    border-radius: 3px;
    background: rgba(214, 250, 255, .95);
    content: "";
}

.swal-syringe-body {
    position: absolute;
    top: 6px;
    left: 20px;
    width: 56px;
    height: 14px;
    border: 1px solid rgba(225, 254, 255, .85);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(222, 255, 255, .92), rgba(197, 243, 244, .75));
}

.swal-syringe-body::before {
    position: absolute;
    top: 5px;
    left: 4px;
    width: 48px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(38, 93, 110, .62), rgba(38, 93, 110, .62) 3px, transparent 3px, transparent 7px);
    content: "";
}

.swal-syringe-needle {
    position: absolute;
    top: 12px;
    right: 0;
    width: 22px;
    height: 2px;
    background: rgba(229, 253, 255, .95);
}

.swal-syringe-needle::after {
    position: absolute;
    top: -2px;
    right: -5px;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 6px solid rgba(229, 253, 255, .95);
    content: "";
}

.swal-syringe-drop {
    position: absolute;
    top: 13px;
    right: -9px;
    width: 7px;
    height: 7px;
    border-radius: 50% 50% 50% 0;
    background: rgba(255, 184, 206, .92);
    opacity: .3;
    animation: swal-syringe-drop 1.65s ease-in-out infinite alternate;
    transform: rotate(-45deg) scale(.75);
}

@keyframes swal-loader-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

@keyframes swal-syringe-slide {
    from {
        transform: translateX(6px);
    }

    to {
        transform: translateX(184px);
    }
}

@keyframes swal-syringe-drop {
    from {
        opacity: .25;
        transform: rotate(-45deg) scale(.72);
    }

    to {
        opacity: .85;
        transform: rotate(-45deg) scale(1);
    }
}