:root {
    --bg: #f6f4f0; --surface: #ffffff; --surface-2: #faf8f4; --border: #ebe6dd;
    --text: #14142b; --muted: #76768a;
    --accent: #e0a35e; --accent-dark: #c4883f; --accent-soft: #fbf0e0; --accent-ink: #20150a;
    --danger: #e0364b; --danger-soft: #fdecee; --success: #12a150; --success-soft: #e7f7ee;
}
[data-theme="dark"] {
    --bg: #0d0e13; --surface: #16181f; --surface-2: #1c1f28; --border: #272b37;
    --text: #f2f2f7; --muted: #9a9db0;
    --accent: #e5ab6a; --accent-dark: #f0bd84; --accent-soft: rgba(229, 171, 106, 0.13);
    --danger: #ff6b7d; --danger-soft: rgba(255, 107, 125, 0.13); --success: #34d27b; --success-soft: rgba(52, 210, 123, 0.12);
}

body.auth-body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 14px;
    background-image: radial-gradient(circle at 15% 0%, var(--accent-soft), transparent 45%);
}

.auth-theme-btn {
    position: fixed; top: 16px; right: 16px;
    width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-dark);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.auth-theme-btn .fa-moon { display: none; }
[data-theme="dark"] .auth-theme-btn .fa-moon { display: inline; }
[data-theme="dark"] .auth-theme-btn .fa-sun { display: none; }

.auth-wrapper { width: 100%; max-width: 440px; }

.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand .word { font-weight: 800; font-size: 2rem; letter-spacing: 2px; color: var(--text); }
.auth-brand .word b { color: var(--accent); }
.auth-brand .bar { height: 3px; width: 64px; margin: 6px auto 8px; background: linear-gradient(90deg, var(--accent), transparent); border-radius: 2px; }
.auth-brand p { margin: 0; color: var(--muted); font-size: 0.92rem; }

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 26px 26px;
    box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04), 0 18px 40px rgba(20, 20, 43, 0.08);
}

.auth-tabs { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 22px; }
.auth-tabs a { flex: 1; text-align: center; padding: 9px 0; border-radius: 9px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.auth-tabs a.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }

.auth-field {
    display: flex; align-items: center;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
    margin-bottom: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.auth-field .prefix { color: var(--accent-dark); font-weight: 700; padding-right: 12px; border-right: 1px solid var(--border); margin-right: 12px; font-size: 0.92rem; }
.auth-field > i { color: var(--muted); width: 18px; text-align: center; margin-right: 12px; }
.auth-field input { border: none; background: transparent; outline: none; flex: 1; min-width: 0; padding: 13px 0; font-size: 0.95rem; color: var(--text); }
.auth-field input::placeholder { color: var(--muted); opacity: 0.7; }
.auth-field .toggle-eye { cursor: pointer; color: var(--muted); margin: 0 0 0 8px; width: auto; }

.auth-options { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; margin: 4px 0 18px; color: var(--muted); }
.auth-options a { color: var(--accent-dark); text-decoration: none; font-weight: 600; }

.auth-btn {
    width: 100%; border: none;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700; padding: 13px; border-radius: 12px; font-size: 0.98rem; cursor: pointer;
    transition: filter 0.15s;
}
.auth-btn:hover { filter: brightness(1.06); }

.auth-footer-link { text-align: center; margin: 20px 0 0; font-size: 0.88rem; color: var(--muted); }
.auth-footer-link a { color: var(--accent-dark); font-weight: 700; text-decoration: none; }

.auth-alert { border-radius: 12px; font-size: 0.88rem; padding: 11px 14px; margin-bottom: 16px; }
.auth-body .alert-danger { background: var(--danger-soft); border: none; color: var(--danger); }
.auth-body .alert-success { background: var(--success-soft); border: none; color: var(--success); }

.auth-body .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; }
.auth-body .modal-header, .auth-body .modal-footer { border-color: var(--border); }
[data-theme="dark"] .auth-body .btn-close { filter: invert(1) grayscale(1) brightness(200%); }
.auth-body .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }