.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 12% 12%, rgba(99,102,241,.18), transparent 32%),
        radial-gradient(circle at 90% 85%, rgba(14,165,233,.14), transparent 30%),
        #f6f7fb;
    overflow-x: hidden;
}
.auth-shell {
    width: min(1040px, 100%);
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(400px, 1.1fr);
    overflow: hidden;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.04);
}
.auth-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    color: white;
    background: linear-gradient(145deg,#312e81 0%,#4f46e5 54%,#2563eb 100%);
    isolation: isolate;
}
.auth-showcase::before,.auth-showcase::after { content:''; position:absolute; border-radius:50%; z-index:-1; }
.auth-showcase::before { width:340px;height:340px;right:-170px;top:-120px;background:rgba(255,255,255,.1); }
.auth-showcase::after { width:260px;height:260px;left:-130px;bottom:-110px;border:55px solid rgba(255,255,255,.07); }
.auth-brand { display:flex;align-items:center;gap:12px;font-size:1.05rem;font-weight:750;letter-spacing:-.01em; }
.auth-brand-mark { display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:white;color:#4338ca;font-size:1.1rem;font-weight:800;box-shadow:0 8px 24px rgba(15,23,42,.15); }
.auth-promise h2 { max-width:360px;margin:0 0 16px;font-size:clamp(2rem,3.2vw,3rem);line-height:1.05;letter-spacing:-.045em; }
.auth-promise p { max-width:350px;margin:0;color:rgba(255,255,255,.76);font-size:.98rem;line-height:1.7; }
.auth-feature { display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.88);font-size:.84rem; }
.auth-feature-dot { width:9px;height:9px;border-radius:50%;background:#86efac;box-shadow:0 0 0 5px rgba(134,239,172,.14); }
.auth-panel { display:flex;align-items:center;justify-content:center;padding:56px clamp(32px,6vw,76px); }
.auth-container { width:100%;max-width:420px; }
.auth-card { width:100%; }
.auth-header { margin-bottom:30px; }
.auth-eyebrow { display:inline-flex;margin-bottom:12px;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:.72rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase; }
.auth-header h1 { margin:0 0 9px;color:#0f172a;font-size:2rem;line-height:1.15;letter-spacing:-.035em; }
.auth-header p { margin:0;color:#64748b;font-size:.92rem; }
.auth-form { display:grid;gap:18px; }
.auth-form .form-group { margin:0; }
.auth-form .form-label { display:block;margin-bottom:7px;color:#334155;font-size:.8rem;font-weight:700; }
.auth-form .form-input { height:50px;border-color:#dbe1ea;border-radius:12px;background:#fff;font-size:.92rem;transition:border-color .15s,box-shadow .15s; }
.auth-form .form-input:focus { border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.11); }
.auth-input-wrap { position:relative; }
.auth-input-wrap .form-input { padding-left:44px; }
.auth-input-icon { position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#94a3b8;pointer-events:none; }
.auth-password-toggle { position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#64748b;border-radius:8px;padding:7px;cursor:pointer; }
.auth-password-toggle:hover { background:#f1f5f9;color:#334155; }
.auth-submit { height:50px;margin-top:4px;border:0;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#2563eb);box-shadow:0 10px 24px rgba(79,70,229,.22);font-weight:700; }
.auth-submit:hover { transform:translateY(-1px);box-shadow:0 13px 28px rgba(79,70,229,.28); }
.auth-footer { margin-top:26px;padding-top:22px;border-top:1px solid #eef2f7;text-align:center; }
.auth-footer p { margin:0;color:#64748b;font-size:.86rem; }
.auth-footer a { color:#4f46e5;font-weight:700;text-decoration:none; }
.auth-footer a:hover { color:#3730a3;text-decoration:underline; }
.auth-page .alert { margin-bottom:20px;border-radius:12px; }
.auth-mobile-brand { display:none;align-items:center;gap:10px;margin-bottom:30px;font-weight:750;color:#0f172a; }
.auth-mobile-brand .auth-brand-mark { width:36px;height:36px;color:white;background:#4f46e5;box-shadow:none; }
@media (max-width: 780px) {
    .auth-page { padding:18px;place-items:start center; }
    .auth-shell { min-height:0;grid-template-columns:1fr;border-radius:22px; }
    .auth-showcase { display:none; }
    .auth-panel { min-height:calc(100vh - 36px);padding:38px 28px; }
    .auth-mobile-brand { display:flex; }
}
@media (max-width: 420px) {
    .auth-page { padding:0;background:white; }
    .auth-shell { min-height:100vh;border:0;border-radius:0;box-shadow:none; }
    .auth-panel { padding:30px 22px; }
    .auth-header h1 { font-size:1.75rem; }
}