/* ============================== AUTH.CSS — Black & Gray Premium ============================== */
:root { --bg-dark: #000000; --bg-surface: #0a0a0a; --glass-border: rgba(255, 255, 255, 0.08); --accent-primary: #ffffff; --text-main: #f4f4f5; --text-dim: #71717a; }
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; margin: 0; flex-direction: column; font-family: 'Outfit', sans-serif; }
.auth-container { width: 100%; max-width: 420px; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 20px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.auth-logo { height: 40px; width: auto; object-fit: contain; transform: scale(7); }
.auth-title { font-size: 24px; font-weight: 900; letter-spacing: -1px; }
.auth-form { width: 100%; background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 40px; }
.form-title { font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 8px; }
.form-sub { font-size: 14px; color: var(--text-dim); text-align: center; margin-bottom: 30px; }
.field-group { margin-bottom: 20px; }
.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.field-input { width: 100%; background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); border-radius: 10px; padding: 11px 14px; color: var(--text-main); font-size: 14px; outline: none; transition: 0.2s; }
.field-input:focus { border-color: #fff; background: rgba(255,255,255,0.05); }
.auth-submit { width: 100%; background: #fff; border-radius: 11px; padding: 13px; color: #000; font-weight: 900; cursor: pointer; border: none; font-size: 16px; margin-top: 10px; transition: 0.2s; }
.auth-submit:hover { opacity: 0.9; transform: scale(0.98); }
.form-hint { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-dim); }
.form-hint a { color: #fff; text-decoration: none; font-weight: 700; }
.form-error { color: #ff4d4d; font-size: 13px; text-align: center; margin-top: 10px; min-height: 18px; }
.auth-back { margin-top: 30px; text-align: center; font-size: 14px; }
.auth-back a { color: var(--text-dim); text-decoration: none; }
.auth-back a:hover { color: #fff; }