/* ══════════════════════════════════════════════════════════
   AUTH-EXTRA — Quên mật khẩu & đặt lại mật khẩu
   Loaded by: forgot.tpl / reset-password.tpl
   Tokens: var(--sc-*) from css/design-system.css
   ══════════════════════════════════════════════════════════ */

/* ── forgot ── */
:root { --primary:#ff4d6d; --card-bg:#0b1022; --border-soft:rgba(255,255,255,0.06); --text:#f9fafb; --muted:#a5b0d1; }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            min-height:100vh; font-family:system-ui,-apple-system,sans-serif;
            background:radial-gradient(circle at 0% 0%,#ff4d6d33 0,transparent 55%),
                       radial-gradient(circle at 100% 100%,#ff6f6133 0,transparent 55%),
                       linear-gradient(135deg,#020617,#050816 45%,#020617);
            color:var(--text); display:flex; align-items:center; justify-content:center; padding:24px 12px;
        }
        .card {
            width:100%; max-width:420px; background:var(--card-bg);
            border-radius:18px; border:1px solid var(--border-soft);
            box-shadow:0 22px 45px rgba(0,0,0,.65); padding:32px 28px;
        }
        .logo-wrap { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
        .logo-wrap img { height:34px; }
        .logo-text { font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#ffe6ef; }
        .logo-sub { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#ffc2d1; margin-top:2px; }
        h1 { font-size:20px; font-weight:800; margin-bottom:8px; }
        p.desc { font-size:13px; color:var(--muted); margin-bottom:22px; line-height:1.5; }
        .alert { padding:10px 14px; border-radius:12px; font-size:13px; margin-bottom:16px; }
        .alert.ok  { background:rgba(34,197,94,.15); color:#86efac; border:1px solid rgba(34,197,94,.3); }
        .alert.err { background:rgba(255,77,109,.15); color:#fca5a5; border:1px solid rgba(255,77,109,.4); }
        .field-label { font-size:13px; margin-bottom:6px; }
        .field-label span { color:#fb7185; }
        .input-wrap { position:relative; margin-bottom:18px; }
        .input-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.8; }
        input[type=email] {
            width:100%; height:48px; padding:0 12px 0 36px;
            background:#050815; border:1px solid var(--border-soft);
            border-radius:12px; color:#e2e8f0; font-size:13px; outline:none;
        }
        input[type=email]:focus { border-color:var(--primary); box-shadow:0 0 0 1px #ff4d6d66; }
        input[type=email]::placeholder { color:var(--sc-text-sub); }
        button[type=submit] {
            width:100%; height:50px; border:none; border-radius:999px;
            background:linear-gradient(135deg,#ff4d6d,#f97373);
            color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s;
        }
        button[type=submit]:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(249,115,129,.5); }
        .back-link { text-align:center; margin-top:18px; font-size:13px; color:var(--muted); }
        .back-link a { color:#fca5a5; text-decoration:none; }
        .back-link a:hover { text-decoration:underline; }
/* ── reset-password ── */
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            min-height:100vh; font-family:system-ui,-apple-system,sans-serif;
            background:radial-gradient(circle at 0% 0%,#ff4d6d33 0,transparent 55%),
                       radial-gradient(circle at 100% 100%,#ff6f6133 0,transparent 55%),
                       linear-gradient(135deg,#020617,#050816 45%,#020617);
            color:var(--text); display:flex; align-items:center; justify-content:center; padding:24px 12px;
        }
        .card {
            width:100%; max-width:420px; background:var(--card-bg);
            border-radius:18px; border:1px solid var(--border-soft);
            box-shadow:0 22px 45px rgba(0,0,0,.65); padding:32px 28px;
        }
        .logo-wrap { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
        .logo-wrap img { height:34px; }
        .logo-text { font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#ffe6ef; }
        .logo-sub { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#ffc2d1; margin-top:2px; }
        h1 { font-size:20px; font-weight:800; margin-bottom:8px; }
        p.desc { font-size:13px; color:var(--muted); margin-bottom:22px; line-height:1.5; }
        .alert { padding:10px 14px; border-radius:12px; font-size:13px; margin-bottom:16px; }
        .alert.ok  { background:rgba(34,197,94,.15); color:#86efac; border:1px solid rgba(34,197,94,.3); }
        .alert.err { background:rgba(255,77,109,.15); color:#fca5a5; border:1px solid rgba(255,77,109,.4); }
        .field-label { font-size:13px; margin-bottom:6px; }
        .field-label span { color:#fb7185; }
        .input-wrap { position:relative; margin-bottom:14px; }
        .input-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.8; }
        input[type=password] {
            width:100%; height:48px; padding:0 12px 0 36px;
            background:#050815; border:1px solid var(--border-soft);
            border-radius:12px; color:#e2e8f0; font-size:13px; outline:none;
        }
        input[type=password]:focus { border-color:var(--primary); box-shadow:0 0 0 1px #ff4d6d66; }
        input[type=password]::placeholder { color:var(--sc-text-sub); }
        button[type=submit] {
            width:100%; height:50px; border:none; border-radius:999px; margin-top:8px;
            background:linear-gradient(135deg,#ff4d6d,#f97373);
            color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s;
        }
        button[type=submit]:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(249,115,129,.5); }
        .back-link { text-align:center; margin-top:18px; font-size:13px; color:var(--muted); }
        .back-link a { color:#fca5a5; text-decoration:none; }
        .back-link a:hover { text-decoration:underline; }
        .login-btn {
            display:block; text-align:center; margin-top:18px;
            height:50px; line-height:50px; border-radius:999px;
            background:linear-gradient(135deg,#ff4d6d,#f97373);
            color:#fff; font-size:14px; font-weight:600; text-decoration:none; transition:all .15s;
        }
        .login-btn:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(249,115,129,.5); }

/* ── Responsive ── */
@media (max-width: 480px) {
    .card { padding: 24px 18px; }
    /* Tránh Safari/iOS tự zoom khi focus input < 16px */
    input[type=email],
    input[type=password] { font-size: max(16px, 1em); height: 50px; }
    button[type=submit],
    .login-btn { height: 52px; line-height: 52px; }
}