/* =========================================================
   CAMPUS MARKETPLACE
   LOGIN PAGE
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    min-height: 100vh;

    margin: 0;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    background: #f3f4f6;

    color: #111827;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


/* =========================================================
   PAGE
========================================================= */

.login-page {
    width: 100%;

    max-width: 560px;

    min-height: 100vh;

    margin: 0 auto;

    background: #ffffff;

    overflow-x: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.top-bar {
    width: 100%;

    height: 76px;

    display: flex;

    align-items: center;

    padding: 15px 32px;
}


.back-button {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: transparent;

    color: #111827;

    border-radius: 50%;

    transition: background 0.2s ease;
}


.back-button:hover {
    background: #f3f5f8;
}


.back-button:active {
    transform: scale(0.95);
}


.back-button svg {
    width: 34px;

    height: 34px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   BRAND
========================================================= */

.brand-section {
    text-align: center;

    padding:
        0
        32px
        28px;
}


.brand-illustration {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: -4px;
}


.graduation-svg {
    width: 365px;

    max-width: 100%;

    height: auto;
}


.brand-name {
    margin-top: -8px;

    line-height: 0.94;
}


.brand-name .campus {
    color: #1552d8;

    font-size: clamp(
        35px,
        8vw,
        44px
    );

    font-weight: 800;

    letter-spacing: -1.7px;
}


.brand-name .marketplace {
    color: #111827;

    font-size: clamp(
        31px,
        7vw,
        39px
    );

    font-weight: 800;

    letter-spacing: -1.8px;

    margin-top: 5px;
}


.brand-section h1 {
    margin-top: 22px;

    color: #1552d8;

    font-size: clamp(
        25px,
        5vw,
        31px
    );

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.8px;
}


.brand-section > p {
    margin-top: 9px;

    color: #111827;

    font-size: clamp(
        16px,
        3.5vw,
        19px
    );

    line-height: 1.5;
}


/* =========================================================
   AUTH SECTION
========================================================= */

.auth-section {
    width: 100%;

    padding:
        0
        32px
        50px;
}


/* =========================================================
   TABS
========================================================= */

.auth-tabs {
    display: grid;

    grid-template-columns: 1fr 1fr;

    height: 65px;

    border-bottom:
        1px solid #e1e5eb;

    margin-bottom: 30px;
}


.auth-tab {
    position: relative;

    border: none;

    background: transparent;

    color: #606b7c;

    font-size: 21px;

    font-weight: 600;
}


.auth-tab.active {
    color: #1552d8;
}


.auth-tab.active::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -1px;

    height: 3px;

    background: #1552d8;

    border-radius:
        3px
        3px
        0
        0;
}


/* =========================================================
   FORMS
========================================================= */

.auth-form {
    display: none;
}


.auth-form.active {
    display: block;

    animation:
        fadeIn
        0.18s
        ease;
}


@keyframes fadeIn {

    from {
        opacity: 0;

        transform:
            translateY(4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   INPUT
========================================================= */

.input-group {
    width: 100%;

    min-height: 86px;

    display: flex;

    align-items: center;

    position: relative;

    border:
        1.5px solid
        #d9dfe8;

    border-radius: 19px;

    background: #ffffff;

    margin-bottom: 17px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.input-group:focus-within {
    border-color: #1552d8;

    box-shadow:
        0 0 0 4px
        rgba(
            21,
            82,
            216,
            0.08
        );
}


.input-group.invalid {
    border-color: #d92d20;

    box-shadow:
        0 0 0 4px
        rgba(
            217,
            45,
            32,
            0.08
        );
}


.input-icon {
    width: 65px;

    min-width: 65px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.input-icon svg {
    width: 29px;

    height: 29px;

    fill: none;

    stroke: #657185;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.input-group input {
    width: 100%;

    min-width: 0;

    height: 84px;

    border: none;

    outline: none;

    background: transparent;

    padding:
        0
        12px
        0
        0;

    color: #111827;

    font-size: 19px;
}


.input-group input::placeholder {
    color: #687386;
}


/* =========================================================
   PASSWORD
========================================================= */

.password-toggle {
    width: 60px;

    min-width: 60px;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: transparent;
}


.password-toggle svg {
    width: 29px;

    height: 29px;

    fill: none;

    stroke: #596477;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.password-toggle {
    cursor: pointer;
}

/* Slash across the eye while the password is shown. */
.password-toggle .eye-slash {
    display: none;
}

.password-toggle[aria-pressed="true"] .eye-slash {
    display: inline;
}

.password-toggle:focus-visible {
    outline: 3px solid rgba(20, 87, 217, 0.25);
    outline-offset: -6px;
    border-radius: 12px;
}


/* =========================================================
   FORGOT
========================================================= */

.forgot-row {
    display: flex;

    justify-content: flex-end;

    margin-top: -1px;

    margin-bottom: 35px;
}


.forgot-button {
    border: none;

    background: transparent;

    color: #064bd7;

    font-size: 17px;

    font-weight: 500;

    padding: 6px 0;
}


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


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.primary-button {
    width: 100%;

    min-height: 78px;

    border: none;

    border-radius: 18px;

    background: #0646d9;

    color: #ffffff;

    font-size: 21px;

    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}


.primary-button:hover {
    background: #003dc5;
}


.primary-button:active {
    transform: scale(0.985);
}


.primary-button:disabled {
    opacity: 0.7;

    cursor: wait;

    transform: none;
}


/* =========================================================
   SECURITY CARD
========================================================= */

.security-card {
    width: 100%;

    min-height: 112px;

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        19px
        18px;

    margin-top: 44px;

    border-radius: 18px;

    background: #f1f5fc;
}


.security-icon {
    width: 53px;

    min-width: 53px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.security-icon svg {
    width: 52px;

    height: 56px;

    fill: #1452d8;

    stroke: white;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.security-text {
    display: flex;

    flex-direction: column;

    gap: 4px;

    color: #344054;

    font-size: 14px;

    line-height: 1.45;
}


.security-text strong {
    font-weight: 500;
}


.security-text span {
    color: #5e6b80;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
    position: fixed;

    left: 50%;

    bottom: 25px;

    z-index: 1000;

    width: max-content;

    max-width:
        calc(100% - 40px);

    padding:
        13px
        20px;

    border-radius: 30px;

    background: #111827;

    color: white;

    font-size: 14px;

    font-weight: 600;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(
            -50%,
            20px
        );

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.toast.show {
    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );
}


/* =========================================================
   TABLET / DESKTOP
========================================================= */

@media (min-width: 700px) {

    body {
        padding:
            30px
            0;
    }


    .login-page {
        min-height:
            calc(100vh - 60px);

        border-radius: 30px;

        box-shadow:
            0 20px 70px
            rgba(
                0,
                0,
                0,
                0.12
            );
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 500px) {

    body {
        background: #ffffff;
    }


    .login-page {
        max-width: none;

        border-radius: 0;

        box-shadow: none;
    }


    .top-bar {
        height: 68px;

        padding:
            10px
            20px;
    }


    .brand-section {
        padding:
            0
            20px
            25px;
    }


    .auth-section {
        padding:
            0
            20px
            40px;
    }


    .graduation-svg {
        width: 340px;
    }


    .input-group {
        min-height: 78px;

        border-radius: 17px;
    }


    .input-group input {
        height: 76px;

        font-size: 17px;
    }


    .input-icon {
        width: 58px;

        min-width: 58px;
    }


    .primary-button {
        min-height: 72px;

        border-radius: 17px;
    }


}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .brand-name .campus {
        font-size: 33px;
    }


    .brand-name .marketplace {
        font-size: 29px;
    }


    .brand-section h1 {
        font-size: 24px;
    }


    .brand-section > p {
        font-size: 15px;
    }


    .auth-tabs {
        height: 58px;
    }


    .auth-tab {
        font-size: 18px;
    }


    .input-group {
        min-height: 72px;
    }


    .input-group input {
        height: 70px;

        font-size: 16px;
    }


    .security-card {
        gap: 10px;

        padding:
            16px
            12px;
    }


    .security-text {
        font-size: 12px;
    }

}

/* =========================================================
   LOGO — "NORSU CAMPUS" / "MARKETPLACE"
   Keeps the top line on one row on small phones.
========================================================= */

.brand-name .campus {
    font-size: clamp(26px, 8vw, 40px);

    white-space: nowrap;
}


/* =========================================================
   TERMS + FOOTER
========================================================= */

.terms-agree {
    margin: 2px 0 14px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 9px;

    color: #667085;

    font-size: 13px;

    line-height: 1.5;

    text-align: left;

    cursor: pointer;
}

.terms-agree input {
    flex: 0 0 auto;

    width: 18px;

    height: 18px;

    margin: 0;

    accent-color: #1552d8;

    cursor: pointer;
}

.terms-agree input:focus-visible {
    outline: 3px solid rgba(21, 82, 216, 0.25);

    outline-offset: 2px;
}

/* Create Account pressed without ticking the box */
.terms-agree.invalid {
    color: #d92d20;
}

.terms-agree.invalid input {
    outline: 2px solid #d92d20;

    outline-offset: 2px;
}

.terms-agree a,
.login-footer a {
    color: #1552d8;

    font-weight: 600;

    text-decoration: none;
}

.terms-agree a:hover,
.login-footer a:hover {
    text-decoration: underline;
}

.login-footer {
    margin-top: 26px;

    color: #667085;

    font-size: 13px;

    text-align: center;
}

.login-footer-links {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;
}

.login-footer p {
    margin-top: 6px;

    font-size: 12px;
}


/* ===== DARK THEME (generated by tools/dark-theme.py — do not edit by hand) ===== */
:root[data-theme="dark"] body { background-color: #0e1118; background-image: none; color: #d8dce5; }
:root[data-theme="dark"] .login-page { background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .back-button { border-color: currentColor; background-color: transparent; background-image: none; color: #d8dce5; }
:root[data-theme="dark"] .back-button:hover { background-color: #222835; background-image: none; }
:root[data-theme="dark"] .back-button svg { fill: none; stroke: currentColor; }
:root[data-theme="dark"] .brand-name .campus { color: #6893f0; }
:root[data-theme="dark"] .brand-name .marketplace { color: #d8dce5; }
:root[data-theme="dark"] .brand-section h1 { color: #6893f0; }
:root[data-theme="dark"] .brand-section > p { color: #d8dce5; }
:root[data-theme="dark"] .auth-tabs { border-bottom-color: #2c3443; }
:root[data-theme="dark"] .auth-tab { border-color: currentColor; background-color: transparent; background-image: none; color: #a1a9b6; }
:root[data-theme="dark"] .auth-tab.active { color: #6893f0; }
:root[data-theme="dark"] .auth-tab.active::after { background-color: #1552d8; background-image: none; }
:root[data-theme="dark"] .input-group { border-color: #313949; background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .input-group:focus-within { border-color: #1552d8; box-shadow: 0 0 0 4px rgba(21, 82, 216, 0.16); }
:root[data-theme="dark"] .input-group.invalid { border-color: #d92d20; box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.16); }
:root[data-theme="dark"] .input-icon svg { fill: none; stroke: #9ba4b3; }
:root[data-theme="dark"] .input-group input { border-color: currentColor; outline-color: currentColor; background-color: transparent; background-image: none; color: #d8dce5; }
:root[data-theme="dark"] .input-group input::placeholder { color: #9ba3b1; }
:root[data-theme="dark"] .password-toggle { border-color: currentColor; background-color: transparent; background-image: none; }
:root[data-theme="dark"] .password-toggle svg { fill: none; stroke: #a4acbb; }
:root[data-theme="dark"] .forgot-button { border-color: currentColor; background-color: transparent; background-image: none; color: #6795f3; }
:root[data-theme="dark"] .primary-button { border-color: currentColor; background-color: #0646d9; background-image: none; color: #ffffff; }
:root[data-theme="dark"] .primary-button:hover { background-color: #003dc5; background-image: none; }
:root[data-theme="dark"] .security-card { background-color: #1a263a; background-image: none; }
:root[data-theme="dark"] .security-icon svg { fill: #6893f1; stroke: #ffffff; }
:root[data-theme="dark"] .security-text { color: #bac3d1; }
:root[data-theme="dark"] .security-text span { color: #9ea8b8; }
:root[data-theme="dark"] .toast { background-color: #2d3a54; background-image: none; color: #ffffff; }
@media (min-width: 700px) {
  :root[data-theme="dark"] .login-page { box-shadow: 0 20px 70px rgba(0, 0, 0, 0.256); }
}
@media (max-width: 500px) {
  :root[data-theme="dark"] body { background-color: #0e1118; background-image: none; }
  :root[data-theme="dark"] .login-page { box-shadow: none; }
}
:root[data-theme="dark"] .terms-agree { color: #9ba3b2; }
:root[data-theme="dark"] .terms-agree input { accent-color: #6893f0; }
:root[data-theme="dark"] .terms-agree input:focus-visible { outline-color: rgba(21, 82, 216, 0.25); }
:root[data-theme="dark"] .terms-agree.invalid { color: #ea766e; }
:root[data-theme="dark"] .terms-agree.invalid input { outline-color: #d92d20; }
:root[data-theme="dark"] .terms-agree a, :root[data-theme="dark"] .login-footer a { color: #6893f0; }
:root[data-theme="dark"] .login-footer { color: #9ba3b2; }
/* ===== END DARK THEME ===== */


/* =========================================================
   CHECK YOUR EMAIL + FORGOT PASSWORD panels
   ========================================================= */
.auth-panel { text-align: center; }

.auth-panel-icon {
    width: 64px;
    height: 64px;
    margin: 6px auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf4ff;
    color: #1552d8;
}

.auth-panel-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-panel h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.3px; color: #101828; }
.auth-panel p { margin: 0 0 14px; color: #475467; font-size: 14.5px; line-height: 1.6; }
.auth-panel p strong { color: #101828; overflow-wrap: anywhere; }
.auth-panel .auth-panel-small { color: #667085; font-size: 13px; }
.auth-panel .input-group { margin: 6px 0 14px; text-align: left; }

.auth-panel .secondary-button {
    width: 100%;
    min-height: 52px;
    border: 1px solid #d0d5dd;
    border-radius: 14px;
    background: #ffffff;
    color: #101828;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.auth-panel .secondary-button:hover { background: #f8fafc; }
.auth-panel .secondary-button:disabled { opacity: .6; cursor: wait; }

.auth-panel .link-button {
    margin-top: 14px;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: #1552d8;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.auth-panel .link-button:hover { text-decoration: underline; }

.auth-panel-done {
    margin: 14px 0 0 !important;
    padding: 12px 14px;
    border-radius: 12px;
    background: #ecfdf3;
    color: #067647 !important;
    font-size: 13.5px !important;
    text-align: left;
}

.auth-panel .hidden,
.auth-panel-done.hidden { display: none; }

.auth-panel .secondary-button:focus-visible,
.auth-panel .link-button:focus-visible { outline: 3px solid rgba(21, 82, 216, .25); outline-offset: 2px; }

:root[data-theme="dark"] .auth-panel-icon { background: #1a273b; color: #6796f1; }
:root[data-theme="dark"] .auth-panel h2,
:root[data-theme="dark"] .auth-panel p strong { color: #e4e8ef; }
:root[data-theme="dark"] .auth-panel p { color: #b4bccb; }
:root[data-theme="dark"] .auth-panel .auth-panel-small { color: #9ba3b2; }
:root[data-theme="dark"] .auth-panel .secondary-button { border-color: #2b3240; background: #171b24; color: #e4e8ef; }
:root[data-theme="dark"] .auth-panel .secondary-button:hover { background: #222935; }
:root[data-theme="dark"] .auth-panel .link-button { color: #6796f1; }
:root[data-theme="dark"] .auth-panel-done { background: #15291f; color: #74eba3 !important; }


/* =========================================================
   SIGN UP: Verify button, Verified badge, 6-digit code boxes
   ========================================================= */
.verify-button {
    flex: 0 0 auto;
    min-height: 40px;
    margin-right: 10px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: #1552d8;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.verify-button:hover { background: none; text-decoration: underline; }
.verify-button:disabled { opacity: .65; cursor: wait; }

.verified-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 14px;
    color: #067647;
    font-size: 14px;
    font-weight: 700;
}
.verified-badge svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.input-group.verified { border-color: #6fcf97; }

.verify-button.hidden,
.verified-badge.hidden,
.code-box.hidden,
.code-error.hidden { display: none; }

.code-box { margin: -6px 0 17px; }

.code-text { margin: 0 0 10px; color: #475467; font-size: 13.5px; line-height: 1.5; }
.code-text strong { color: #101828; overflow-wrap: anywhere; }

.code-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }

.code-digit {
    width: 100%;
    height: 58px;
    padding: 0;
    border: 1.5px solid #d9dfe8;
    border-radius: 14px;
    background: #ffffff;
    color: #101828;
    font: inherit;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.code-digit:focus { border-color: #1552d8; box-shadow: 0 0 0 4px rgba(21, 82, 216, .1); }
.code-digit:disabled { opacity: .6; }

.code-error { margin: 10px 0 0; color: #b42318; font-size: 13px; font-weight: 600; }

.code-links { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #98a2b3; font-size: 13px; }
.code-link { padding: 4px 0; border: 0; background: none; color: #1552d8; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.code-link:hover { text-decoration: underline; }
.code-link:disabled { color: #98a2b3; cursor: default; text-decoration: none; }

.verify-button:focus-visible,
.code-link:focus-visible { outline: 3px solid rgba(21, 82, 216, .25); outline-offset: 2px; }

.code-box.shake .code-inputs { animation: codeShake .35s ease; }
@keyframes codeShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .code-box.shake .code-inputs { animation: none; }
}

@media (max-width: 400px) {
    .code-inputs { gap: 6px; }
    .code-digit { height: 50px; font-size: 20px; border-radius: 12px; }
    .verify-button { padding: 0 12px; margin-right: 8px; }
}

:root[data-theme="dark"] .verify-button,
:root[data-theme="dark"] .verify-button:hover { background: none; color: #6796f1; }
:root[data-theme="dark"] .verified-badge { color: #74eba3; }
:root[data-theme="dark"] .input-group.verified { border-color: #1f9d55; }
:root[data-theme="dark"] .code-text { color: #b4bccb; }
:root[data-theme="dark"] .code-text strong { color: #e4e8ef; }
:root[data-theme="dark"] .code-digit { border-color: #2b3240; background: #1d232e; color: #e4e8ef; }
:root[data-theme="dark"] .code-digit:focus { border-color: #6796f1; box-shadow: 0 0 0 4px rgba(103, 150, 241, .15); }
:root[data-theme="dark"] .code-error { color: #f9857b; }
:root[data-theme="dark"] .code-link { color: #6796f1; }
:root[data-theme="dark"] .code-link:disabled { color: #77849b; }

/* Desktop fields are shorter: match them. */
@media (min-width: 769px) {
    .verify-button { min-height: 36px; font-size: 13.5px; }
    .code-box { margin: -4px 0 14px; }
    .code-digit { height: 52px; font-size: 22px; border-radius: 12px; }
}