/* =====================================================
   Auth Pages — 2 Column Pastel Design
   ===================================================== */

.auth-layout { display:flex;min-height:100vh;background:var(--bg) }

/* Left Panel — Pastel Gradient + Blobs */
.auth-left {
    width:50%;
    background:var(--bg); /* Light background */
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    position:relative;
    overflow:hidden;
    border-right:1px solid var(--border);
}

/* Big gradient blobs for the left panel */
.auth-left::before {
    content:'';position:absolute;top:-10%;left:-10%;width:400px;height:400px;
    background:radial-gradient(circle,rgba(103,232,249,.2),transparent 65%);
    border-radius:50%;pointer-events:none;
}
.auth-left::after {
    content:'';position:absolute;bottom:-10%;right:-10%;width:350px;height:350px;
    background:radial-gradient(circle,rgba(249,168,212,.18),transparent 65%);
    border-radius:50%;pointer-events:none;
}

.auth-left-content { max-width:420px;position:relative;z-index:1 }
.auth-brand { display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;color:var(--text);letter-spacing:-0.3px;margin-bottom:48px;text-decoration:none }
.brand-icon {
    width:36px;height:36px;
    background:linear-gradient(135deg,var(--cyan),var(--pink));
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1E293B;
    box-shadow:0 4px 12px rgba(103,232,249,.25);
}
.auth-brand:hover { opacity:.8 }

.auth-trust h2 { color:var(--text);font-size:32px;line-height:1.2;margin-bottom:16px;letter-spacing:-0.03em }
.auth-trust p { color:var(--text-secondary);font-size:15px;line-height:1.7;margin-bottom:32px }

.trust-items { display:flex;flex-direction:column;gap:14px;margin-bottom:48px }
.trust-item { display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--text-secondary) }
.trust-item i { color:var(--cyan);flex-shrink:0 }

.trust-stat { display:flex;align-items:center;gap:24px;padding:20px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm) }
.trust-stat div { text-align:center }
.trust-stat strong { display:block;font-size:20px;font-weight:800;background:linear-gradient(135deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text }
.trust-stat span { font-size:12px;color:var(--text-muted) }
.trust-stat-sep { width:1px;height:36px;background:var(--border) }

/* Right Panel */
.auth-right {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 32px;
    background:var(--bg-card);
    position:relative;
    overflow-y:auto;
}

/* Theme toggle absolute in Right Panel */
.theme-toggle-auth {
    position:absolute;
    top:32px;
    right:32px;
    z-index:10;
}

.auth-right-inner { width:100%;max-width:400px;position:relative;z-index:1;padding:20px 0 }

/* Main Form Wrapper */
.auth-card-main {
    width:100%;
}

/* Form Headings */
.auth-form-header { margin-bottom:32px }
.auth-form-header h2 { font-size:24px;font-weight:700;margin-bottom:8px;letter-spacing:-0.02em }
.auth-form-header p { font-size:14px;color:var(--text-secondary);line-height:1.6 }

/* Auth card components */
.auth-card { margin-bottom:20px }
.auth-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;margin-top:12px }
.forgot-link { font-size:13px;font-weight:600;color:var(--text-secondary);transition:color .2s }
.forgot-link:hover { color:var(--text);text-decoration:underline }

.auth-footer { font-size:14px;color:var(--text-secondary);text-align:center;margin-top:24px }
.auth-footer a { color:var(--text);font-weight:700;text-decoration:none }
.auth-footer a:hover { opacity:0.8;text-decoration:underline }

/* Primary Button with gradient */
.auth-card-main .btn-primary {
    background:linear-gradient(135deg,var(--cyan),var(--pink));
    color:#1E293B;
    border:none;
    font-weight:700;
    box-shadow:0 4px 15px rgba(103,232,249,.3);
    border-radius:var(--radius);
    padding:14px 20px;
    width:100%;
}
.auth-card-main .btn-primary:hover {
    box-shadow:0 8px 25px rgba(103,232,249,.4);
    transform:translateY(-2px);
}

/* Google btn */
.auth-card-main .btn-google {
    background:var(--bg);
    border:1px solid var(--border);
    box-shadow:none;
    width:100%;
    font-weight:600;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 20px;
    border-radius:var(--radius);
    transition:var(--transition);
}
.auth-card-main .btn-google:hover {
    border-color:var(--cyan);
    background:var(--cyan-bg);
}

/* Inputs */
.auth-card-main .form-input {
    background:var(--bg-input);
    border:1px solid var(--border);
    padding:12px 16px;
    font-size:14px;
    border-radius:var(--radius);
    width:100%;
    transition:all .2s ease;
    color:var(--text);
}
.auth-card-main .input-group .form-input {
    padding-left: 40px;
}
.auth-card-main .form-input:focus {
    border-color:var(--cyan);
    box-shadow:0 0 0 4px var(--cyan-bg);
    outline:none;
}
.auth-card-main .form-label {
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
    color:var(--text);
}

/* OTP Display */
.otp-email-display { text-align:center;margin-bottom:24px;padding:16px;background:var(--bg-hover);border-radius:var(--radius);border:1px solid var(--border) }
.otp-email-display .email { font-weight:700;font-size:15px;color:var(--text);margin-top:4px }
.otp-timer { text-align:center;font-size:13px;color:var(--text-muted);margin:16px 0 }
.otp-timer .countdown { font-weight:700;color:var(--text);font-family:monospace;font-size:15px }
.otp-resend { text-align:center }

.otp-inputs { display:flex;gap:12px;justify-content:center;margin-bottom:24px }
.otp-input { width:48px;height:56px;text-align:center;font-size:24px;font-weight:700;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text);transition:all .2s ease }
.otp-input:focus { border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-bg);outline:none }
.otp-input.filled { border-color:var(--cyan);background:var(--cyan-bg) }

/* Separator */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    margin: 24px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}
.divider:not(:empty)::before {
    margin-right: 16px;
}
.divider:not(:empty)::after {
    margin-left: 16px;
}

/* Policy Terms */
.auth-policy {
    font-size:12px;
    color:var(--text-muted);
    text-align:center;
    margin-top:32px;
    line-height:1.6;
}
.auth-policy a { 
    color:var(--text-secondary);
    font-weight:600;
    text-decoration:none;
}
.auth-policy a:hover {
    color:var(--text);
    text-decoration:underline;
}

/* Responsive */
@media(max-width:900px){
    .auth-left { display:none }
    .auth-right { padding:32px 24px }
    .auth-right-inner { max-width:440px }
}