/* ═══════ AUTH PAGE ═══════ */
:root {
    --primary: #1a3c5e;
    --primary-dark: #0f2640;
    --gold: #c8a961;
    --gold-dark: #b09248;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --danger: #ef4444;
    --ff-heading: 'Playfair Display', serif;
    --ff-body: 'Inter', sans-serif;
    --radius: 10px;
    --transition: .3s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--ff-body); color:var(--gray-700); overflow:hidden; height:100vh; }
a { text-decoration:none; color:inherit; transition:var(--transition); }
button { border:none; background:none; cursor:pointer; font-family:inherit; }
input, select { border:none; outline:none; font-family:inherit; font-size:inherit; width:100%; }

.auth-container { display:flex; height:100vh; }

/* Left Panel */
.auth-left { position:relative; flex:1; display:flex; align-items:flex-end; overflow:hidden; }
.auth-left img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.auth-left-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(15,38,64,.95) 0%, rgba(15,38,64,.6) 100%); }
.auth-left-content { position:relative; z-index:2; padding:60px; color:var(--white); }
.auth-left-content .logo { display:flex; align-items:center; gap:10px; margin-bottom:40px; color:var(--white); }
.auth-left-content .logo i { font-size:1.5rem; color:var(--gold); }
.logo-main { font-family:var(--ff-heading); font-size:1.3rem; font-weight:700; line-height:1.1; display:block; }
.logo-sub { font-size:.55rem; letter-spacing:4px; text-transform:uppercase; opacity:.7; display:block; }
.auth-left-content h2 { font-family:var(--ff-heading); font-size:2rem; margin-bottom:12px; line-height:1.3; }
.auth-left-content > p { color:rgba(255,255,255,.7); margin-bottom:30px; }
.auth-features { display:flex; flex-direction:column; gap:12px; }
.auth-features div { display:flex; align-items:center; gap:10px; font-size:.9rem; color:rgba(255,255,255,.8); }
.auth-features i { color:var(--gold); }

/* Right Panel */
.auth-right { flex:1; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--white); overflow-y:auto; }
.auth-form-wrap { width:100%; max-width:440px; }
.auth-header { margin-bottom:30px; }
.auth-header h1 { font-family:var(--ff-heading); font-size:2rem; color:var(--primary-dark); margin-bottom:8px; }
.auth-header p { color:var(--gray-500); }

.auth-error { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; color:var(--danger); font-size:.9rem; margin-bottom:20px; }

.auth-form .form-group { margin-bottom:20px; }
.auth-form label { display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:8px; }
.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap > i { position:absolute; left:14px; color:var(--gray-400); font-size:.9rem; }
.input-wrap input { padding:14px 14px 14px 42px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:8px; font-size:.95rem; color:var(--gray-700); transition:var(--transition); }
.input-wrap input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,169,97,.12); background:var(--white); }
.toggle-pass { position:absolute; right:14px; color:var(--gray-400); font-size:.9rem; transition:var(--transition); }
.toggle-pass:hover { color:var(--gray-600); }

.form-options { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.checkbox-wrap { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--gray-600); cursor:pointer; }
.checkbox-wrap input { width:auto; accent-color:var(--gold); }
.forgot-link { font-size:.88rem; color:var(--gold-dark); font-weight:500; }
.forgot-link:hover { text-decoration:underline; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 32px; font-weight:600; font-size:.95rem; border-radius:8px; transition:var(--transition); cursor:pointer; border:2px solid transparent; }
.btn-primary { background:var(--gold); color:var(--primary-dark); }
.btn-primary:hover { background:var(--gold-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(200,169,97,.3); }
.btn-block { width:100%; }
.btn-lg { padding:16px; font-size:1rem; }

/* Demo Accounts */
.demo-accounts { margin-top:30px; padding-top:24px; border-top:1px solid var(--gray-200); }
.demo-accounts h4 { font-size:.88rem; color:var(--gray-500); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.demo-accounts h4 i { color:var(--gold); }
.demo-grid { display:flex; flex-direction:column; gap:10px; }
.demo-btn { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:8px; text-align:left; transition:var(--transition); width:100%; }
.demo-btn:hover { border-color:var(--gold); background:rgba(200,169,97,.05); }
.demo-btn i { font-size:1.3rem; color:var(--primary); width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:rgba(26,60,94,.08); border-radius:8px; }
.demo-btn strong { display:block; font-size:.88rem; color:var(--primary-dark); }
.demo-btn span { font-size:.78rem; color:var(--gray-400); }

.auth-footer { margin-top:30px; text-align:center; }
.auth-footer a { font-size:.9rem; color:var(--gray-500); display:inline-flex; align-items:center; gap:6px; }
.auth-footer a:hover { color:var(--primary); }

@media(max-width:900px) {
    .auth-left { display:none; }
    .auth-right { flex:1; }
}