/* css/page-login.css */
@layer pages {

    /* ── Full-height centering shell ── */
    .auth-page {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1.5rem;
        min-height: 100%;
    }

    /* ── Two-panel card ── */
    .auth-card {
        display: flex;
        border-radius: 28px 22px 26px 24px / 22px 28px 24px 26px;
        overflow: hidden;
        box-shadow: 0 12px 0 rgba(110,130,200,0.55), 0 24px 60px rgba(60,80,180,0.22);
        max-width: 840px;
        width: 100%;
    }

    /* ── Left panel — form ── */
    .auth-form-panel {
        width: 420px;
        flex-shrink: 0;
        background: #ffffff;
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
        overflow-y: auto;
    }

    /* Back link */
    .auth-back {
        display: inline-flex;
        align-items: center;
        gap: 0.3em;
        font-size: 0.65rem;
        font-weight: 700;
        color: #9ba3c0;
        text-decoration: none;
        letter-spacing: 0.06em;
        align-self: flex-start;
        transition: color 0.15s;
    }
    .auth-back:hover { color: #5e6690; }

    /* Auth tabs */
    .auth-tabs {
        display: inline-flex;
        gap: 0.15rem;
        background: rgba(242,245,255,0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 4px;
        border-radius: 14px;
        border: 1.5px solid rgba(220,228,248,0.9);
        box-shadow: 0 3px 14px rgba(100,130,200,0.1);
        align-self: flex-start;
    }
    .auth-tab {
        padding: 0.32em 1.2em;
        font-size: 0.68rem;
        font-weight: 700;
        color: #5e6690;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        text-decoration: none;
        background: none;
        white-space: nowrap;
        font-family: inherit;
        letter-spacing: 0.06em;
        transition: color 0.15s;
    }
    .auth-tab:hover { color: #1e2140; }
    .auth-tab--active {
        background: #fff;
        color: #1e2140;
        box-shadow: 0 2px 0 rgba(180,190,220,0.55), 0 1px 8px rgba(100,130,200,0.13);
    }

    /* Title block */
    .auth-title-block h1 {
        font-size: 1.4rem;
        font-weight: 800;
        color: #1e2140;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }
    .auth-title-block p {
        font-size: 0.78rem;
        color: #5e6690;
        line-height: 1.5;
    }

    /* Error messages */
    .auth-error {
        font-size: 0.75rem;
        color: #c03030;
        background: #fff0f0;
        border: 1px solid #f0c8c8;
        border-radius: 10px;
        padding: 0.5rem 0.75rem;
    }

    /* Form fields */
    .auth-fields {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .auth-field {
        display: flex;
        flex-direction: column;
        gap: 0.32rem;
    }
    .auth-field-lbl {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #9ba3c0;
        text-transform: uppercase;
    }
    .auth-field-err {
        font-size: 0.65rem;
        color: #c03030;
    }
    .auth-input {
        width: 100%;
        background: rgba(245,247,255,0.9);
        border: 1.5px solid #dde4f4;
        border-radius: 12px;
        padding: 0.65em 0.85em;
        font-family: inherit;
        font-size: 0.82rem;
        color: #1e2140;
        outline: none;
        box-shadow: inset 0 2px 4px rgba(160,175,220,0.1);
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .auth-input:focus {
        border-color: rgba(120,145,225,0.6);
        box-shadow: inset 0 2px 4px rgba(160,180,220,0.1), 0 0 0 3px rgba(100,130,210,0.09);
    }
    .auth-input::placeholder { color: #9ba3c0; }
    .auth-input--error { border-color: #f0c8c8; background: #fff8f8; }
    .auth-field-hint {
        font-size: 0.6rem;
        color: #9ba3c0;
        line-height: 1.4;
    }
    .auth-field-hint a { color: #5e6690; text-decoration: none; }
    .auth-field-hint a:hover { color: #2050b0; }

    /* Forgot password row */
    .auth-forgot-row {
        display: flex;
        justify-content: flex-end;
        margin-top: 0.3rem;
    }
    .auth-forgot {
        font-size: 0.65rem;
        color: #9ba3c0;
        text-decoration: none;
        transition: color 0.15s;
    }
    .auth-forgot:hover { color: #2050b0; }

    /* Submit button */
    .auth-submit {
        width: 100%;
        padding: 0.82em 1em;
        border-radius: 100px;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        color: #fff;
        cursor: pointer;
        border: 1.5px solid #20a050;
        background: linear-gradient(160deg, #50d890, #3ecb74);
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 5px 0 #1f8a45, 0 9px 22px rgba(46,203,116,0.42);
        transition: transform 0.1s, box-shadow 0.1s;
        margin-top: 0.25rem;
    }
    .auth-submit:hover {
        transform: translateY(-2px);
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 7px 0 #1f8a45, 0 12px 28px rgba(46,203,116,0.48);
    }
    .auth-submit:active {
        transform: translateY(4px);
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 1px 0 #1f8a45, 0 4px 10px rgba(46,203,116,0.28);
    }

    /* Footer note */
    .auth-footer-note {
        font-size: 0.7rem;
        color: #5e6690;
        text-align: center;
    }
    .auth-footer-note a { color: #1e2140; font-weight: 700; text-decoration: none; }
    .auth-footer-note a:hover { text-decoration: underline; }

    /* ── Right panel — value prop ── */
    .auth-value-panel {
        flex: 1;
        background: linear-gradient(145deg, #1e2240 0%, #16183a 60%, #1a1c42 100%);
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }
    .auth-value-panel::before {
        content: '';
        position: absolute;
        top: -60px; right: -60px;
        width: 260px; height: 260px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(100,90,220,0.25) 0%, transparent 65%);
        pointer-events: none;
    }
    .auth-value-panel::after {
        content: '';
        position: absolute;
        bottom: -40px; left: -40px;
        width: 200px; height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(62,203,116,0.12) 0%, transparent 65%);
        pointer-events: none;
    }

    .auth-vp-header {
        margin-bottom: 2rem;
    }
    .auth-vp-header .vp-display {
        font-size: 1.5rem;
        font-weight: 800;
        color: #e8eaff;
        line-height: 1.2;
    }
    .auth-vp-header .vp-italic {
        font-size: 1.5rem;
        font-weight: 800;
        font-style: italic;
        color: #a8acd8;
        line-height: 1.2;
    }

    /* Brand row (signup right panel) */
    .auth-vp-brand {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin-bottom: 1.5rem;
    }
    .auth-vp-logo {
        width: 34px; height: 34px;
        border-radius: 10px;
        background: linear-gradient(145deg, #8070ff, #3ecf8e);
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 0.6rem; color: #fff;
        box-shadow: 0 5px 0 #3828a0, 0 8px 18px rgba(120,100,255,0.45);
        flex-shrink: 0;
        text-decoration: none;
    }
    .auth-vp-brandname {
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        color: rgba(200,202,238,0.7);
        text-transform: uppercase;
    }

    /* Value prop list */
    .auth-prop-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
        flex: 1;
    }
    .auth-prop-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .auth-prop-icon {
        color: rgba(140,200,255,0.75);
        font-size: 0.85rem;
        flex-shrink: 0;
        margin-top: 0.05rem;
        line-height: 1;
    }
    .auth-prop-copy strong {
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        color: rgba(220,225,255,0.95);
        margin-bottom: 0.1rem;
    }
    .auth-prop-copy span {
        font-size: 0.65rem;
        color: rgba(150,158,210,0.8);
        line-height: 1.5;
    }

    /* Stats grid */
    .auth-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        margin-top: auto;
    }
    .auth-stat {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.09);
        border-radius: 12px;
        padding: 0.75rem 0.85rem;
        box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    }
    .auth-stat__num {
        font-size: 1.4rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 0.2rem;
    }
    .auth-stat__lbl {
        font-size: 0.58rem;
        color: rgba(140,150,200,0.75);
        font-weight: 500;
        line-height: 1.35;
    }

    /* Responsive — stack on small screens */
    @media (max-width: 680px) {
        .auth-card { flex-direction: column; max-width: 480px; }
        .auth-form-panel { width: 100%; }
        .auth-value-panel { display: none; }
        .auth-page { align-items: flex-start; padding: 1.5rem 1rem; }
    }

}