@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

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

    html, body {
        height: 100%;
        font-family: 'DM Sans', sans-serif;
    }

    .page-wrapper {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
        width: 100%;
    }

    /* ── LEFT PANEL ── */
    .left-panel {
        flex: 0 0 50%;
        width: 50%;
        min-height: 100vh;
        background: linear-gradient(145deg, #2e0a0a 0%, #601010 45%, #691b1b 70%, #3d0a0a 100%);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 50px;
    }

    /* Subtle dot-grid overlay */
    .left-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }

    .left-panel-logo {
        position: absolute;
        top: 36px;
        left: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 2;
        text-decoration: none;
    }

    .left-panel-logo .logo-icon {
        width: 38px;
        height: 38px;
        background: rgba(255,255,255,0.12);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .left-panel-logo span {
        font-family: 'DM Serif Display', serif;
        font-size: 18px;
        color: #fff;
        letter-spacing: 0.3px;
    }

    /* Illustration area */
    .illustration {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 420px;
        margin-bottom: 40px;
    }

    .left-tagline {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #fff;
    }

    .left-tagline h2 {
        font-family: 'DM Serif Display', serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .left-footer {
        position: absolute;
        bottom: 24px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: rgba(255,255,255,0.3);
        z-index: 2;
    }

    /* ── RIGHT PANEL ── */
    .right-panel {
        flex: 0 0 50%;
        width: 50%;
        min-height: 100vh;
        background: #f7f8fc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 52px;
    }

    .form-container {
        width: 100%;
        max-width: 380px;
    }

    .form-eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: #e84b4b;
        margin-bottom: 10px;
    }

    .form-title {
        font-family: 'DM Serif Display', serif;
        font-size: 32px;
        font-weight: 400;
        color: #0f0f1e;
        margin-bottom: 6px;
        line-height: 1.2;
    }

    .form-subtitle {
        font-size: 14px;
        color: #7b7b8d;
        margin-bottom: 32px;
    }

    /* Field */
    .field {
        margin-bottom: 18px;
    }

    .field label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #3a3a50;
        margin-bottom: 7px;
        letter-spacing: 0.2px;
    }

    .field input {
        width: 100%;
        height: 48px;
        border: 1.5px solid #e0e0eb;
        border-radius: 10px;
        background: #fff;
        padding: 0 16px;
        font-size: 14px;
        font-family: 'DM Sans', sans-serif;
        color: #0f0f1e;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .field input::placeholder { color: #b5b5c5; }

    .field input:focus {
        border-color: #e84b4b;
        box-shadow: 0 0 0 4px rgba(232,75,75,0.12);
    }

    .field input.error-field {
        border-color: #e84b4b;
        box-shadow: 0 0 0 4px rgba(232,75,75,0.1);
    }

    .error-message {
        font-size: 12px;
        color: #e84b4b;
        margin-top: 5px;
        display: none;
    }

    /* Row */
    .field-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
    }

    .remember-label {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        color: #7b7b8d;
        cursor: pointer;
    }

    .remember-label input[type="checkbox"] {
        accent-color: #e84b4b;
        width: 15px;
        height: 15px;
    }

    .forgot-link {
        font-size: 13px;
        color: #e84b4b;
        text-decoration: none;
        font-weight: 500;
    }
    .forgot-link:hover { text-decoration: underline; }

    /* Primary button */
    .btn-primary {
        width: 100%;
        height: 50px;
        background: #e84b4b;
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: 15px;
        font-weight: 600;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.2s, opacity 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 20px;
    }
    .btn-primary:hover { background: #d34040; }
    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Divider */
    .divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
    }
    .divider-line { flex: 1; height: 1px; background: #e0e0eb; }
    .divider-text { font-size: 12px; color: #b5b5c5; white-space: nowrap; }

    /* Google button */
    .btn-google {
        width: 100%;
        height: 48px;
        background: #fff;
        border: 1.5px solid #e0e0eb;
        border-radius: 10px;
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #0f0f1e;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: background 0.2s, border-color 0.2s;
        margin-bottom: 28px;
    }
    .btn-google:hover { background: #f2f2fa; border-color: #ccc; }
    .btn-google:disabled { opacity: 0.5; cursor: not-allowed; }

    .register-link {
        text-align: center;
        font-size: 13px;
        color: #7b7b8d;
    }
    .register-link a { color: #e84b4b; font-weight: 600; text-decoration: none; }
    .register-link a:hover { text-decoration: underline; }

    /* Toast */
    #toast {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 999;
        background: #fff;
        border: 1px solid #e0e0eb;
        border-radius: 12px;
        padding: 14px 18px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.12);
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #0f0f1e;
        min-width: 260px;
        max-width: 340px;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.3s, transform 0.3s;
    }

    .toast-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Responsive */
    @media (max-width: 900px) {
        .page-wrapper { flex-direction: column; }
        .left-panel { flex: none; width: 100%; min-height: 240px; padding: 36px 32px; }
        .right-panel { flex: none; width: 100%; min-height: auto; padding: 40px 28px 60px; }
        .left-panel-logo { position: relative; top: auto; left: auto; margin-bottom: 24px; }
        .illustration { max-width: 260px; margin-bottom: 20px; }
        .left-tagline h2 { font-size: 20px; }
    }