:root{ --bg: #0a0e17; --bg-grid: #0d1220; --surface: #121a2b; --surface-hover: #1a2338; --border: #232d45; --border-soft: #1b243b; --gold: #c9a227; --gold-bright: #e8bc3a; --text: #eef0f4; --text-muted: #8b93a7; --text-faint: #56607a; --danger: #ef4444; --success: #22c55e; --brand-bg-1: #0d1322; --brand-bg-2: #080b13; --brand-radial: rgba(201,162,39,0.10); } /* Light mode — auth pages default to dark until theme-manager.js resolves the stored/system preference and stamps data-theme onto . */ :root[data-theme="light"]{ --bg: #f7f8fb; --bg-grid: #edeff5; --surface: #ffffff; --surface-hover: #f2f4f9; --border: #e2e6ef; --border-soft: #eceff5; --gold: #9c7a1f; --gold-bright: #c9a227; --text: #171b2b; --text-muted: #5b6478; --text-faint: #99a1b5; --danger: #dc2626; --success: #16a34a; --brand-bg-1: #fbf8f0; --brand-bg-2: #f2ecdd; --brand-radial: rgba(180,136,31,0.16); } *{ margin:0; padding:0; box-sizing:border-box; } body{ background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; min-height:100vh; transition: background-color .2s ease, color .2s ease; } .shell{ display:grid; grid-template-columns: 1.15fr 1fr; min-height:100vh; } .brand-panel{ position:relative; overflow:hidden; background: radial-gradient(ellipse 900px 500px at 15% 0%, var(--brand-radial), transparent 60%), linear-gradient(180deg, var(--brand-bg-1) 0%, var(--brand-bg-2) 100%); border-right: 1px solid var(--border-soft); display:flex; flex-direction:column; padding: 44px 56px; transition: background .2s ease; } .brand-panel::before{ content:''; position:absolute; inset:0; background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 48px 48px; opacity:.6; pointer-events:none; } .brand{ display:flex; align-items:center; gap:10px; position:relative; z-index:2; } .brand-mark{ width:32px; height:32px; border-radius:8px; background: #c9a227; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; } .brand-word{ font-family:'Fraunces', serif; font-weight:500; font-size:21px; letter-spacing:0.2px; } .brand-word span{ color: #c9a227; } .brand-copy{ position:relative; z-index:2; margin-top: auto; margin-bottom: auto; max-width: 480px; } .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:2px; color: var(--gold); font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:''; width:24px; height:1px; background: var(--gold); } .brand-copy h1{ font-family:'Fraunces', serif; font-weight:500; font-size: 34px; line-height:1.28; letter-spacing: 0.1px; color: var(--text); } .brand-copy .sub{ margin-top:20px; font-size:14.5px; line-height:1.7; color: var(--text-muted); max-width: 420px; } .stat-strip{ position:relative; z-index:2; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border-soft); } .stat-strip p{ font-size:14px; line-height:1.7; color: var(--text-muted); max-width: 460px; } .stat-strip p strong{ color: var(--gold-bright); font-weight:500; } .skyline{ position:relative; z-index:2; margin-top: 40px; width:100%; height: 120px; } .brand-foot{ position:relative; z-index:2; font-size:11.5px; color: var(--text-faint); display:flex; justify-content:space-between; } .form-side{ display:flex; flex-direction:column; background: var(--bg); transition: background-color .2s ease; } .form-top{ display:flex; justify-content:flex-end; align-items:center; gap:10px; padding: 30px 56px 0; } .theme-toggle-btn{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--border); border-radius:8px; background: var(--surface); color: var(--text-muted); cursor:pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle-btn:hover{ background: var(--surface-hover); color: var(--gold-bright); border-color: var(--gold); } .theme-toggle-btn svg{ width:16px; height:16px; } .theme-toggle-btn .icon-sun{ display:none; } :root[data-theme="dark"] .theme-toggle-btn .icon-sun{ display:block; } :root[data-theme="dark"] .theme-toggle-btn .icon-moon{ display:none; } .lang-pill{ display:flex; align-items:center; gap:8px; padding: 7px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; color: var(--text-muted); background: var(--surface); cursor:pointer; position:relative; transition: background-color .15s ease, border-color .15s ease; } .lang-dropdown{ display:none; position:absolute; top:calc(100% + 6px); right:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px; min-width:160px; z-index:10; } .lang-dropdown.show{ display:block; } html[dir="rtl"] .lang-dropdown{ right:auto; left:0; } .lang-dropdown a{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; color:var(--text); text-decoration:none; font-size:13px; transition:background .12s; } .lang-dropdown a:hover{ background:var(--surface-hover); } .lang-dropdown a.active{ color:var(--gold-bright); font-weight:600; } .flag-dot{ width:18px; height:18px; border-radius:50%; background: linear-gradient(180deg,#3a4568,#1c2540); display:flex; align-items:center; justify-content:center; font-size:10px; } .signin-note{ font-size:13px; color: var(--text-muted); } .form-center{ flex:1; display:flex; align-items:center; justify-content:center; padding: 20px 56px 60px; } .form-card{ width:100%; max-width: 420px; } .form-card .eyebrow2{ font-size:11px; text-transform:uppercase; letter-spacing:1.6px; color: var(--gold); font-weight:600; margin-bottom:10px; } .form-card h2{ font-family:'Fraunces', serif; font-weight:500; font-size: 30px; margin-bottom:10px; } .form-card .lead{ font-size:14px; color: var(--text-muted); line-height:1.6; margin-bottom: 32px; } .field{ margin-bottom: 20px; } .field label{ display:block; font-size:13px; font-weight:600; color: var(--text); margin-bottom:8px; } .input-wrap{ position:relative; display:flex; align-items:center; } .input-wrap input, .input-wrap select{ width:100%; background: var(--surface); border: 1px solid var(--border); border-radius:10px; padding: 13px 42px 13px 14px; color: var(--text); font-size:14px; font-family:'Inter', sans-serif; outline:none; transition: border-color .15s ease, background .15s ease, color .15s ease; } .input-wrap select{ appearance:none; } .input-wrap input::placeholder{ color: var(--text-faint); } .input-wrap input:focus, .input-wrap select:focus{ border-color: var(--gold); background: var(--surface-hover); } .input-wrap input.is-invalid{ border-color: var(--danger); } .input-icon{ position:absolute; right:14px; color: var(--text-faint); display:flex; cursor:pointer; } .input-icon svg{ width:16px; height:16px; } .field-error{ font-size:12px; color:var(--danger); margin-top:6px; } .row-between{ display:flex; align-items:center; justify-content:space-between; margin: 4px 0 28px; } .row-cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 500px){ .row-cols{ grid-template-columns:1fr; } } .checkbox-row{ display:flex; align-items:center; gap:9px; font-size:13px; color: var(--text-muted); } .checkbox-row input{ width:16px; height:16px; accent-color: var(--gold); border-radius:4px; } .link-gold{ font-size:13px; color: var(--gold-bright); text-decoration:none; font-weight:500; } .link-gold:hover{ text-decoration:underline; } .btn-primary{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #171207; font-weight:600; font-size:14.5px; padding: 14px 18px; border-radius:10px; border:none; cursor:pointer; box-shadow: 0 8px 24px -8px rgba(201,162,39,0.5); transition: transform .15s ease, box-shadow .15s ease; margin-top: 8px; } .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(201,162,39,0.65); } .form-foot{ margin-top: 24px; text-align:center; font-size:13px; color: var(--text-muted); } .form-foot a{ color: var(--text); font-weight:600; cursor:pointer; text-decoration:none; } .form-foot a:hover{ color: var(--gold-bright); } .terms-note{ margin-top:18px; font-size:12px; line-height:1.6; color: var(--text-faint); text-align:center; } .terms-note a{ color: var(--text-muted); text-decoration:underline; } .alert{ padding:12px 14px; border-radius:10px; margin-bottom:20px; font-size:13px; line-height:1.5; } .alert-danger{ background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.25); color:var(--danger); } @media (max-width: 900px){ .shell{ grid-template-columns: 1fr; } .brand-panel{ display:none; } .form-top{ padding: 24px 24px 0; } .form-center{ padding: 20px 24px 40px; } }