:root {
  --bg: #0d0f14; --bg2: #13161e; --bg3: #1a1e28; --bg4: #212637;
  --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.12);
  --text: #f0f2f8; --text2: #8b91a8; --text3: #555c77;
  --accent: #4f8ef7; --accent2: #3b7aee;
  --red: #f87171; --red-bg: rgba(248,113,113,0.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-wrap { width: 100%; max-width: 420px; padding: 24px; }
.auth-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 32px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand-icon { width: 40px; height: 40px; background: var(--accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.brand-icon i { color: #fff; font-size: 20px; }
.brand-name { font-size: 18px; font-weight: 600; color: var(--text); }
.brand-sub { font-size: 12px; color: var(--text3); }
.auth-title { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.auth-desc { font-size: 13px; color: var(--text3); margin-bottom: 24px; }
.alert-error { background: var(--red-bg); border: 1px solid rgba(248,113,113,0.2); color: var(--red); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.input-wrap { position: relative; }
.input-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 16px; pointer-events: none; }
.input-wrap input { width: 100%; height: 40px; padding: 0 12px 0 38px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; transition: border-color 0.15s; }
.input-wrap input:focus { border-color: var(--accent); }
.btn-submit { width: 100%; height: 42px; background: var(--accent); border: none; border-radius: 8px; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; transition: background 0.15s; }
.btn-submit:hover { background: var(--accent2); }
.auth-footer { text-align: center; font-size: 13px; color: var(--text3); margin-top: 20px; }
.auth-footer a { color: var(--accent); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }