@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700&display=swap');

:root {
    --panel: #2e7d32;
    --panel-edge: #1b5e20;
    --field: #2f3a2c;
    --field-text: #c9d1c5;
    --ink: #1b5e20;
    --bg: #ffffff;

    --font-display: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
    --font-body: "Nunito", sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--font-body);
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    overflow-x: hidden;
}

/* Page card shell */

.auth-page {
    min-height: 100vh;
    padding: 10vh 10vw;
}

.auth-card {
    width: 100%;
    max-width: none;
    min-height: clamp(560px, 72vh, 680px);
    background: transparent;
    gap: 10%;
}

.auth-card > [class^="col-"] {
    padding: 0;
}

@media (min-width: 768px) {
    .auth-card > .col-md-6 {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

/* Left panel */

.panel-side {
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 36px;
    min-height: clamp(560px, 72vh, 680px);
    border-radius: 24px;
    /* Flex order changes */
    position: relative;
    z-index: 2;
}

.panel-inner {
    width: 100%;
    max-width: 360px;
}

.panel-heading {
    font-family: var(--font-display);
    font-weight: 800;
    color: #ffffff;
    font-size: 1.9rem;
    line-height: 1.25;
    margin: 0 0 12px;
    text-shadow:
        -1.5px -1.5px 0 var(--ink),
         1.5px -1.5px 0 var(--ink),
        -1.5px  1.5px 0 var(--ink),
         1.5px  1.5px 0 var(--ink);
}

.panel-subtitle {
    font-family: var(--font-body);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin: 0 0 20px;
}

/* Cactus mascot */

.cactus-side {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cactus-wrap {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

.cactus-wrap svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.18));

    /* Idle */
    transform-origin: 50% 100%;
    animation: cactus-breathe 4.5s ease-in-out infinite;
}

.cactus-wrap svg.is-password-visible {
    animation: cactus-shy-bow 0.42s ease-out forwards;
}

@keyframes cactus-breathe {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    50%      { transform: translateY(-6px) scale(1.015) rotate(0.6deg); }
}

@keyframes cactus-shy-bow {
    to { transform: translateY(12px) rotate(3deg) scale(0.98); }
}

/* Eyes */
.cactus-wrap svg {
    --ex: 0px;
    --ey: 0px;
}

.cactus-eye {
    transform: translate(var(--ex), var(--ey));
    transition: transform 0.18s ease-out;
}

.cactus-eye-blink {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.cactus-eye-blink.is-blinking {
    animation: cactus-blink 0.16s ease-in-out;
}

.cactus-eye-blink.is-password-visible,
.cactus-eye-white-blink.is-password-visible,
.cactus-eye-upper-blink.is-password-visible {
    transform: scaleY(0.08);
}

.cactus-eye-white-blink,
.cactus-eye-upper-blink {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.cactus-eye-white-blink.is-blinking,
.cactus-eye-upper-blink.is-blinking {
    animation: cactus-blink 0.16s ease-in-out;
}

@keyframes cactus-blink {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.08); }
}

/* Inner group */
.cactus-arm-motion {
    transform-box: fill-box;
    animation: cactus-arm-wave 6.5s ease-in-out infinite;
    transform-origin: 50% 85%;
}

.cactus-arm-left .cactus-arm-motion {
    animation-name: cactus-arm-sway;
    transform-origin: 65% 85%;
}

.cactus-arm-right .cactus-arm-motion {
    transform-origin: 35% 85%;
    animation-delay: -1.4s;
}

/* Cactus covers eyes */
.cactus-wrap svg.is-password-visible .cactus-arm-motion {
    animation: none;
    transition: transform 0.42s ease-out;
}

.cactus-wrap svg.is-password-visible .cactus-arm-left .cactus-arm-motion {
    transform: translate(105%, -105%) rotate(52deg);
}

.cactus-wrap svg.is-password-visible .cactus-arm-right .cactus-arm-motion {
    transform: translate(-105%, -105%) rotate(-52deg);
}

@keyframes cactus-arm-sway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-6deg); }
}

@keyframes cactus-arm-wave {
    0%, 55%, 100% { transform: rotate(0deg); }
    62% { transform: rotate(-12deg); }
    69% { transform: rotate(20deg); }
    76% { transform: rotate(-15deg); }
    83% { transform: rotate(10deg); }
    90% { transform: rotate(-4deg); }
}

/* Mouth */
.cactus-mouth {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: cactus-mouth-idle 3.2s ease-in-out infinite;
}

@keyframes cactus-mouth-idle {
    /* Keep SVG's original */
    0%, 100% { transform: translate(43%, -52%) scaleY(1); }
    35%      { transform: translate(43%, -52%) scaleY(0.82); }
    55%      { transform: translate(43%, -52%) scaleY(0.9); }
    75%      { transform: translate(43%, -52%) scaleY(0.7); }
}

@media (prefers-reduced-motion: reduce) {
    .cactus-wrap svg,
    .cactus-eye,
    .cactus-eye-blink.is-blinking,
    .cactus-eye-white-blink.is-blinking,
    .cactus-eye-upper-blink.is-blinking,
    .cactus-arm-motion,
    .cactus-mouth {
        animation: none;
        transition: none;
    }
}

/* Right panel */

.form-side {
    background: #ffffff;
    padding: 44px 40px;
    min-height: clamp(560px, 72vh, 680px);
    border-radius: 10%;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

#authbox {
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
}

.logo {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--panel);
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0 0 10px;
    text-align: center;
}

.welcome-heading {
    font-family: var(--font-display);
    font-weight: 1000;
    color: var(--ink);
    font-size: 3rem;
    margin: 0 0 2px;
    text-align: center;
}

.subtitle {
    margin: 0 0 16px;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

#authbox form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#authbox .form-group {
    margin-bottom: 10px;
}

#authbox label {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 4px;
}

#authbox input.auth-input.form-control {
    width: 100%;
    border: none;
    outline: none;
    border-radius: 999px;
    background: #f5f7f9;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 14px 22px;
    height: auto;
    text-align: center;
}

#authbox input.auth-input.form-control::placeholder {
    color: #87909a;
    opacity: 0.8;
}

#authbox input.auth-input.form-control:hover {
    background: #eef1f4;
}

#authbox input.auth-input.form-control:focus {
    background: #f5f7f9;
    color: var(--ink);
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.14);
}

.password-field {
    position: relative;
}

.password-field input.auth-input.form-control {
    padding-right: 48px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    line-height: 0;
    color: #6b7280;
    cursor: pointer;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
    color: var(--ink);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--panel);
    outline-offset: 2px;
    border-radius: 50%;
}

.notice {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
}

.notice-success {
    background: #e8f5e9;
    color: #1b5e20;
}

.notice-error {
    background: #fdecea;
    color: #b3261e;
}

#authbox .auth-btn.btn {
    margin-top: 6px;
    border: none;
    border-radius: 999px;
    background: var(--panel-edge);
    color: #ffffff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 0;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}

#authbox .auth-btn.btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
    color: #ffffff;
}

#authbox .auth-btn.btn:active {
    transform: translateY(0);
}

#authbox .auth-btn.btn:focus-visible,
#authbox .auth-input.form-control:focus-visible,
.mode-switch-link:focus-visible {
    outline: 3px solid var(--panel);
    outline-offset: 2px;
}

.mode-switch-link {
    display: block;
    margin-top: 14px;
    color: #6b7280;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    text-align: center;
    text-decoration: none;
}

.mode-switch-link span {
    color: var(--panel);
    font-weight: 700;
    text-decoration: underline;
}

/* "No account? Ask your adviser." is a note, not a link */
.mode-switch-link.no-account span {
    text-decoration: none;
}

.mode-switch-link:hover span {
    color: var(--panel-edge);
}

/* Responsive */

@media (max-width: 767.98px) {
    .auth-page {
        padding: 32px 24px;
    }

    .auth-card {
        min-height: 0;
        gap: 0;
    }

    .panel-side {
        padding: 32px 24px;
        min-height: auto;
        border-radius: 24px 24px 0 0;
    }

    .panel-heading {
        font-size: 1.5rem;
    }

    .cactus-wrap {
        max-width: 170px;
    }

    .form-side {
        padding: 34px 26px;
        min-height: auto;
        border-radius: 0 0 24px 24px;
    }

    .logo,
    .welcome-heading,
    .subtitle {
        text-align: center;
    }
}

/* Login */

.auth-card {
    animation: auth-card-fade-in 0.5s ease-out both;
}

@keyframes auth-card-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    body.page-login #panelSide { order: 1; }
    body.page-login #formSide  { order: 2; }

    body.page-signup #panelSide { order: 2; }
    body.page-signup #formSide  { order: 1; }
}

/* Panes/panel copy swap */
.auth-pane[hidden],
.panel-copy[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .auth-card {
        animation: none;
    }
}

/* Cactus pose Durations */

.cactus-wrap.cactus-shock svg {
    animation: cactus-shock-pose 0.9s cubic-bezier(.34, 1.56, .64, 1) both;
}

.cactus-wrap.cactus-shock .cactus-arm-motion {
    animation: cactus-shock-arms 0.9s ease-out both;
}

@keyframes cactus-shock-pose {
    0%   { transform: translateY(0)    scale(1)    rotate(0deg); }
    30%  { transform: translateY(-16px) scale(1.08) rotate(-4deg); }
    55%  { transform: translateY(4px)   scale(0.96) rotate(3deg); }
    75%  { transform: translateY(-4px)  scale(1.02) rotate(-1deg); }
    100% { transform: translateY(0)    scale(1)    rotate(0deg); }
}

@keyframes cactus-shock-arms {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(-58deg); }
    60%  { transform: rotate(-28deg); }
    100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cactus-wrap.cactus-shock svg,
    .cactus-wrap.cactus-shock .cactus-arm-motion {
        animation: none;
    }
}

/* Registration form */

#authbox .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 10px;
}

#authbox .form-grid .field-full {
    grid-column: 1 / -1;
}

#authbox .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

#authbox .field label {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    text-align: left;
    font-size: 0.82rem;
    margin: 0;
}

#authbox .field .required {
    color: #b3261e;
}

#authbox select.auth-input.form-control {
    width: 100%;
    border: none;
    outline: none;
    border-radius: 999px;
    background: #f5f7f9;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 12px 20px;
    height: auto;
    appearance: none;
}

#authbox select.auth-input.form-control:hover {
    background: #eef1f4;
}

#authbox select.auth-input.form-control:focus {
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.14);
}

#authbox input[type="date"].auth-input.form-control {
    text-align: left;
    color-scheme: light;
}

#authbox .form-grid .auth-input.form-control {
    padding: 12px 20px;
    text-align: left;
    font-size: 0.95rem;
}

@media (max-width: 767.98px) {
    #authbox .form-grid {
        grid-template-columns: 1fr;
    }
}
/* Sign-up */

/* Address Guardian email */
#authbox .form-grid .field-wide {
    grid-column: 1 / -1;
}

@media (min-width: 992px) {
    body.page-signup .auth-page {
        padding-top: 4vh;
        padding-bottom: 4vh;
    }

    body.page-signup .auth-card {
        gap: 4%;
    }

    /* Wider form box */
    body.page-signup .auth-card > #formSide,
    body.page-signup .auth-card > .form-side {
        flex: 0 0 64%;
        max-width: 64%;
        padding: 28px 36px;
    }

    body.page-signup .auth-card > #panelSide,
    body.page-signup .auth-card > .panel-side {
        flex: 0 0 32%;
        max-width: 32%;
    }

    body.page-signup #authbox {
        max-width: 780px;
    }

    body.page-signup .logo {
        font-size: 2rem;
        margin-bottom: 2px;
    }

    body.page-signup .welcome-heading {
        font-size: 2.3rem;
    }

    body.page-signup #authbox .form-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 14px;
        row-gap: 8px;
    }

    body.page-signup #authbox .form-grid .field-wide {
        grid-column: auto;
    }

    body.page-signup #authbox .form-grid .auth-input.form-control,
    body.page-signup #authbox select.auth-input.form-control {
        padding: 10px 16px;
    }
}

/* PHONE */
@media (max-width: 767.98px) {
    body.page-login #panelSide,
    body.page-signup #panelSide {
        order: 1 !important;
    }

    body.page-login #formSide,
    body.page-signup #formSide {
        order: 2 !important;
    }

    #panelSide.panel-side {
        background: transparent !important;
        box-shadow: none !important;
        min-height: 0 !important;
        padding: 8px 0 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    #panelSide .panel-copy {
        display: none !important;
    }

    #panelSide .panel-inner {
        max-width: none;
    }

    #panelSide .cactus-wrap {
        max-width: 110px;
    }

    #panelSide .cactus-wrap svg {
        filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12));
    }

    #formSide.form-side {
        padding-top: 6px !important;
        border-radius: 24px;
        transform: none !important;
    }

    .auth-page {
        padding-top: 16px;
    }
}

/* Register form */
#authbox .form-grid,
body.page-signup #authbox .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#authbox .form-grid .field-wide,
body.page-signup #authbox .form-grid .field-wide {
    grid-column: 1 / -1 !important;
}

#authbox .form-grid .form-section-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 2px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--panel);
    text-align: left;
}

#authbox .form-grid .form-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
}

@media (max-width: 767.98px) {
    #authbox .form-grid {
        column-gap: 10px !important;
    }

    #authbox .form-grid .auth-input.form-control,
    #authbox select.auth-input.form-control {
        padding: 10px 14px !important;
        font-size: 16px;   /* Stops phones zooming */
    }

    #authbox .field label {
        font-size: 0.78rem;
    }
}

/* PHONE */
@media (max-width: 767.98px) {
    .logo,
    body.page-signup .logo {
        font-size: 1.7rem !important;
        margin-bottom: 2px;
    }

    .welcome-heading,
    body.page-signup .welcome-heading {
        font-size: 1.9rem !important;
        line-height: 1.15;
        margin-bottom: 4px;
    }

    .subtitle {
        font-size: 0.8rem !important;
    }

    .auth-input,
    .auth-input.form-control,
    #authbox .form-grid .auth-input.form-control,
    #authbox select.auth-input.form-control,
    #authbox select,
    #authbox input[type="date"] {
        font-size: 14px !important;
    }

    #authbox .field label {
        font-size: 0.72rem !important;
    }

    .auth-btn {
        font-size: 0.95rem !important;
    }

    .mode-switch-link,
    .notice {
        font-size: 0.8rem !important;
    }

    #authbox .form-grid .form-section-title {
        font-size: 0.85rem;
    }
}

/* Phone curve */
@media (max-width: 767.98px) {
    body.page-login,
    body.page-signup {
        background: #f4f8f3;
    }

    body.page-login .auth-page,
    body.page-signup .auth-page {
        padding: 24px 14px 28px !important;
        background: #f4f8f3;
    }

    body.page-login #panelSide.panel-side,
    body.page-signup #panelSide.panel-side {
        position: relative;
        padding: 0 !important;
    }

    /* Green band */
    body.page-login #panelSide.panel-side::before,
    body.page-signup #panelSide.panel-side::before {
        content: "";
        position: absolute;
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        top: -100vh;
        bottom: -80px;
        z-index: -1;
        pointer-events: none;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V40 Q720 -30 0 90 Z' fill='%232e7d32'/%3E%3C/svg%3E") left bottom / 100% 70px no-repeat,
            linear-gradient(var(--panel), var(--panel)) left top / 100% calc(100% - 69px) no-repeat;
    }

    body.page-login #panelSide .cactus-wrap,
    body.page-signup #panelSide .cactus-wrap {
        max-width: 190px !important;
    }

    body.page-login #panelSide .cactus-wrap svg,
    body.page-signup #panelSide .cactus-wrap svg {
        filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.3));
    }

    body.page-login #formSide.form-side,
    body.page-signup #formSide.form-side {
        z-index: 3;
        background: #ffffff;
        border-radius: 22px !important;
        box-shadow: 0 16px 36px rgba(20, 60, 20, 0.16);
        padding: 22px 18px 24px !important;
        margin-top: 4px;
    }
}

/* Picture background */
.panel-side,
#panelSide.panel-side {
    background: #126255 url("../images/login_img.png") center / cover no-repeat;
}

@media (max-width: 767.98px) {
    #panelSide.panel-side {
        background: transparent !important;
    }

    body.page-login #panelSide.panel-side::before,
    body.page-signup #panelSide.panel-side::before {
        background: #126255 url("../images/login_img.png") center bottom -40px / auto 520px no-repeat;
        -webkit-mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V40 Q720 -30 0 90 Z' fill='%23000'/%3E%3C/svg%3E") left bottom / 100% 70px no-repeat,
            linear-gradient(#000, #000) left top / 100% calc(100% - 69px) no-repeat;
                mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V40 Q720 -30 0 90 Z' fill='%23000'/%3E%3C/svg%3E") left bottom / 100% 70px no-repeat,
            linear-gradient(#000, #000) left top / 100% calc(100% - 69px) no-repeat;
    }
}

/* Whole page picture (computer) */
@media (min-width: 768px) {
    body.page-login,
    body.page-signup {
        background: #126255 url("../images/login_img.png") center / cover fixed no-repeat;
    }

    #panelSide.panel-side,
    .panel-side {
        background: transparent !important;
        box-shadow: none !important;
    }

    #formSide.form-side {
        background: #ffffffc2;
        border-radius: 28px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    }
}

/* ===== Theme: Classic (original colours) - generated, see themes.css ===== */
:root:where([data-theme="classic"]) {
    --ink: #1b3a6b;
    --bg: #29b6f6;
}

/* ===== Theme: Dark - generated, see themes.css ===== */
:root:where([data-theme="dark"]) {
    --ink: #b0e8b4;
    --bg: #1a1e1a;
}
:where(html[data-theme="dark"]) body {
    background: #1a1e1a;
}
:where(html[data-theme="dark"]) .form-side {
    background: #1a1e1a;
}
:where(html[data-theme="dark"]) .subtitle {
    color: #a5aab4;
}
:where(html[data-theme="dark"]) #authbox input.auth-input.form-control {
    background: #1d2024;
}
:where(html[data-theme="dark"]) #authbox input.auth-input.form-control:hover {
    background: #202427;
}
:where(html[data-theme="dark"]) #authbox input.auth-input.form-control:focus {
    background: #1d2024;
}
:where(html[data-theme="dark"]) .password-toggle-btn {
    color: #a5aab4;
}
:where(html[data-theme="dark"]) .notice-success {
    background: #1f2c20;
    color: #b0e8b4;
}
:where(html[data-theme="dark"]) .notice-error {
    background: #2f1816;
    color: #e18b86;
}
:where(html[data-theme="dark"]) .mode-switch-link {
    color: #a5aab4;
}
:where(html[data-theme="dark"]) #authbox .field .required {
    color: #e18b86;
}
:where(html[data-theme="dark"]) #authbox select.auth-input.form-control {
    background: #1d2024;
}
:where(html[data-theme="dark"]) #authbox select.auth-input.form-control:hover {
    background: #202427;
}
:where(html[data-theme="dark"]) #authbox .form-grid .form-section-title::after {
    background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 767.98px) {
    :where(html[data-theme="dark"]) body.page-login,
    :where(html[data-theme="dark"]) body.page-signup {
        background: #1f251d;
    }
}
@media (max-width: 767.98px) {
    :where(html[data-theme="dark"]) body.page-login .auth-page,
    :where(html[data-theme="dark"]) body.page-signup .auth-page {
        background: #1f251d;
    }
}
@media (max-width: 767.98px) {
    :where(html[data-theme="dark"]) body.page-login #formSide.form-side,
    :where(html[data-theme="dark"]) body.page-signup #formSide.form-side {
        background: #1a1e1a;
    }
}
@media (min-width: 768px) {
    :where(html[data-theme="dark"]) #formSide.form-side {
        background: #1a1e1a;
    }
}

/* ===== Theme: Custom (buttons, cards, text colour) - generated, see themes.css ===== */
:where(html[data-theme="custom"]) .notice-success {
    color: var(--tc-card-text);
}
:where(html[data-theme="custom"]) body {
    background: var(--tc-card);
}
:where(html[data-theme="custom"]) .form-side {
    background: var(--tc-card);
}
:where(html[data-theme="custom"]) #authbox input.auth-input.form-control {
    background: var(--tc-card);
}
:where(html[data-theme="custom"]) #authbox input.auth-input.form-control:focus {
    background: var(--tc-card);
}
:where(html[data-theme="custom"]) .notice-error {
    background: var(--tc-card);
}
:where(html[data-theme="custom"]) #authbox select.auth-input.form-control {
    background: var(--tc-card);
}
@media (max-width: 767.98px) {
    :where(html[data-theme="custom"]) body.page-login,
    :where(html[data-theme="custom"]) body.page-signup {
        background: var(--tc-card);
    }
}
@media (max-width: 767.98px) {
    :where(html[data-theme="custom"]) body.page-login .auth-page,
    :where(html[data-theme="custom"]) body.page-signup .auth-page {
        background: var(--tc-card);
    }
}
@media (max-width: 767.98px) {
    :where(html[data-theme="custom"]) body.page-login #formSide.form-side,
    :where(html[data-theme="custom"]) body.page-signup #formSide.form-side {
        background: var(--tc-card);
    }
}
@media (min-width: 768px) {
    :where(html[data-theme="custom"]) #formSide.form-side {
        background: var(--tc-card);
    }
}

/* ===== Always-light areas (student analytics pop-up, notes) keep their normal colours - generated ===== */
html[data-theme="dark"] :is(.student-modal, .qh-modal, .nt-pad, .nt-list-wrap),
html[data-theme="custom"] :is(.student-modal, .qh-modal, .nt-pad, .nt-list-wrap) {
    --ink: #1b5e20;
    --bg: #ffffff;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .form-side {
    background: #ffffff;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .subtitle {
    color: #6b7280;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox input.auth-input.form-control {
    background: #f5f7f9;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox input.auth-input.form-control:hover {
    background: #eef1f4;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox input.auth-input.form-control:focus {
    background: #f5f7f9;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .password-toggle-btn {
    color: #6b7280;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .notice-success {
    background: #e8f5e9;
    color: #1b5e20;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .notice-error {
    background: #fdecea;
    color: #b3261e;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .mode-switch-link {
    color: #6b7280;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox .field .required {
    color: #b3261e;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox select.auth-input.form-control {
    background: #f5f7f9;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox select.auth-input.form-control:hover {
    background: #eef1f4;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox .form-grid .form-section-title::after {
    background: rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) {
    :where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #formSide.form-side {
        background: #ffffff;
    }
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .notice-success {
    color: #1b5e20;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .form-side {
    background: #ffffff;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox input.auth-input.form-control {
    background: #f5f7f9;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox input.auth-input.form-control:focus {
    background: #f5f7f9;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) .notice-error {
    background: #fdecea;
}
:where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #authbox select.auth-input.form-control {
    background: #f5f7f9;
}
@media (min-width: 768px) {
    :where(html[data-theme="dark"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap),html[data-theme="custom"] :is(.student-modal,.qh-modal,.nt-pad,.nt-list-wrap)) #formSide.form-side {
        background: #ffffff;
    }
}