*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --black: #0a0a0a; --surface: #111111; --surface-2: #161616;
  --border: #222222; --border-light: #2a2a2a;
  --red: #c41a1a; --red-dark: #9b1515; --red-glow: #e62222;
  --red-soft: rgba(196,26,26,0.12); --red-border: rgba(196,26,26,0.25);
  --white: #f5f5f5; --white-soft: #d0d0d0; --grey: #777; --grey-dark: #555; --grey-muted: #444;
  --success: #22c55e; --danger: #ef4444;
  --font-display: 'Permanent Marker', cursive;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Poppins', sans-serif;
}
html, body { height: 100%; font-family: var(--font-body); background: var(--black); color: var(--white); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

.auth-page { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-container { width: 100%; max-width: 440px; margin: 0 auto; }

/* Hero */
.auth-hero { padding: 50px 30px 20px; text-align: center; position: relative; overflow: hidden; }
.auth-hero .bg-glow { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(196,26,26,0.12) 0%, transparent 70%); top: -50px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.auth-logo { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; background: var(--red-soft); filter: drop-shadow(0 0 40px rgba(196,26,26,0.25)); }
.auth-logo svg { width: 40px; height: 40px; fill: var(--red); }
.auth-brand { font-family: var(--font-display); font-size: 1.4rem; position: relative; z-index: 2; }
.auth-brand .red { color: var(--red); }
.auth-tagline { font-family: var(--font-heading); font-weight: 600; font-size: 0.6rem; letter-spacing: 4px; text-transform: uppercase; color: var(--grey); margin-top: 4px; position: relative; z-index: 2; }

/* Forms */
.auth-forms { padding: 10px 28px 40px; }
.auth-tab-bar { display: flex; background: var(--surface); border-radius: 14px; padding: 4px; margin-bottom: 24px; border: 1px solid var(--border); }
.auth-tab { flex: 1; padding: 11px; border: none; border-radius: 11px; background: transparent; color: var(--grey); font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; text-align: center; text-decoration: none; }
.auth-tab.active { background: var(--red); color: var(--white); }
.auth-form { display: none; flex-direction: column; gap: 12px; animation: fadeSlideUp 0.4s ease-out; }
.auth-form.active { display: flex; }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Inputs */
.input-group label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); margin-bottom: 5px; }
.input-group .input-wrap { position: relative; display: flex; align-items: center; }
.input-group .input-icon { position: absolute; left: 14px; width: 17px; height: 17px; stroke: var(--grey-muted); fill: none; stroke-width: 1.5; pointer-events: none; z-index: 2; }
.input-group input { width: 100%; padding: 13px 16px 13px 42px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--white); font-family: var(--font-body); font-size: 0.83rem; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.input-group input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.input-group input::placeholder { color: var(--grey-muted); }
.input-group .toggle-pass { position: absolute; right: 14px; cursor: pointer; width: 19px; height: 19px; stroke: var(--grey-muted); fill: none; stroke-width: 1.5; z-index: 2; }
.input-group .input-error { font-size: 0.67rem; color: var(--danger); margin-top: 3px; display: none; }
.input-group.error input { border-color: var(--danger); }
.input-group.error .input-error { display: block; }

.forgot-link { text-align: right; margin-top: -4px; }
.forgot-link a { font-size: 0.7rem; color: var(--red); text-decoration: none; font-weight: 500; }

/* Checkbox */
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.custom-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; margin-top: 1px; }
.custom-check.checked { background: var(--red); border-color: var(--red); }
.custom-check svg { width: 12px; height: 12px; stroke: var(--white); fill: none; stroke-width: 3; opacity: 0; transition: opacity 0.2s; }
.custom-check.checked svg { opacity: 1; }
.checkbox-row span { font-size: 0.72rem; color: var(--grey); line-height: 1.4; }
.checkbox-row span a { color: var(--red); text-decoration: underline; }

/* Button */
.auth-btn { width: 100%; padding: 15px; border: none; border-radius: 16px; background: var(--red); color: var(--white); font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.auth-btn:hover { background: var(--red-glow); }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn .spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.3); border-top-color: var(--white); border-radius: 50%; animation: spin 0.6s linear infinite; display: none; }
.auth-btn.loading .spinner { display: block; }
.auth-btn.loading .btn-label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-switch { text-align: center; margin-top: 16px; padding-bottom: 20px; font-size: 0.78rem; color: var(--grey); }
.auth-switch a { color: var(--red); font-weight: 600; cursor: pointer; text-decoration: none; }

/* Toast */
.toast { position: fixed; top: 40px; left: 50%; transform: translateX(-50%) translateY(-100px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 20px; font-size: 0.78rem; color: var(--white); z-index: 999; display: flex; align-items: center; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); max-width: 90%; }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--danger); }
.toast.success { border-color: var(--success); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.error svg { stroke: var(--danger); fill: none; stroke-width: 2; }
.toast.success svg { stroke: var(--success); fill: none; stroke-width: 2; }