/* ── Login Page ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --pri: #4f46e5; --pri-light: #6366f1; --pri-dark: #3730a3; --accent: #7c3aed;
    --t1: #0f172a; --t2: #334155; --t3: #64748b; --t4: #94a3b8;
    --border: #e2e8f0; --red: #dc2626; --green: #16a34a;
}
body { font-family: var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; background: #fff; }
.login-page { display: flex; min-height: 100vh; }

.login-brand {
    width: 44%; background: linear-gradient(160deg, #312e81 0%, #4f46e5 40%, #7c3aed 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 60px 48px; position: relative; overflow: hidden;
}
.login-brand::before { content: ''; position: absolute; top: -30%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); border-radius: 50%; }
.login-brand::after  { content: ''; position: absolute; bottom: -20%; left: -15%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%); border-radius: 50%; }
.brand-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 24px 24px; }
.brand-content { position: relative; z-index: 2; text-align: center; max-width: 340px; }
.brand-icon { width: 80px; height: 80px; background: rgba(255,255,255,.12); backdrop-filter: blur(16px); border-radius: 24px; border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 28px; box-shadow: 0 8px 32px rgba(0,0,0,.15); }
.brand-icon i { font-size: 36px; color: #fff; }
.brand-content h1 { font-size: 38px; font-weight: 900; color: #fff; letter-spacing: -.5px; margin-bottom: 8px; }
.brand-content h1 span { opacity: .75; font-weight: 700; }
.brand-tagline { font-size: 15px; color: rgba(255,255,255,.6); margin-bottom: 56px; }
.brand-features { text-align: left; }
.feature-item { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; }
.feature-item i { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }

.login-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 64px; background: #fff; }
.form-container { width: 100%; max-width: 400px; }
.form-header { margin-bottom: 40px; }
.form-header h2 { font-size: 30px; font-weight: 800; color: var(--t1); letter-spacing: -.5px; margin-bottom: 8px; }
.form-header p { font-size: 15px; color: var(--t3); }

.flash-messages { margin-bottom: 24px; }
.flash-msg { padding: 13px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: slideIn .3s ease; }
.flash-msg.error { background: #fef2f2; border: 1px solid #fecaca; color: var(--red); }
.flash-msg.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--green); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } }

.form-group { margin-bottom: 22px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 8px; }
.input-field { position: relative; }
.input-field > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--t4); font-size: 15px; z-index: 1; transition: color .2s; }
.input-field input { width: 100%; padding: 14px 16px 14px 48px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; font-size: 15px; font-family: var(--font); color: var(--t1); outline: none; transition: all .2s; }
.input-field input::placeholder { color: #cbd5e1; }
.input-field input:focus { border-color: var(--pri); box-shadow: 0 0 0 4px rgba(79,70,229,.08); }
.input-field input:focus ~ i { color: var(--pri); }

.btn-submit { width: 100%; padding: 15px; background: var(--pri); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; font-family: var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all .25s; margin-top: 8px; box-shadow: 0 4px 14px rgba(79,70,229,.3); }
.btn-submit:hover { background: var(--pri-dark); box-shadow: 0 6px 20px rgba(79,70,229,.4); transform: translateY(-1px); }

.form-footer { text-align: center; margin-top: 40px; font-size: 12px; color: var(--t4); display: flex; align-items: center; justify-content: center; gap: 6px; }
.form-footer i { color: var(--pri-light); }

@media (max-width: 960px) {
    .login-brand { display: none; }
    .login-form-panel { padding: 40px 28px; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
}