@import url('https://fonts.googleapis.com/css2?family=Saira:wght@600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;700&display=swap');

/* MotoKingPro — Auth (Bench Console / Crimson Noir) · preview design · shared stylesheet */
:root{ --bc-brand:#dc2626; --bc-brand2:#ef4444; --bc-ink:#0c0708; --bc-surf:#161011; --bc-surf2:#1d1416; --bc-line:#2a1c1e; --bc-line2:#3a282b; --bc-txt:#f3ece9; --bc-muted:#cdbfb9; --bc-faint:#8a766f; --bc-ok:#34d399; --bc-soft:rgba(220,38,38,.16); }
html[data-bs-theme="light"], html[data-bs-theme="light"] body, html[data-bs-theme="dark"], html[data-bs-theme="dark"] body, body { background: var(--bc-ink) !important; color: var(--bc-txt) !important; font-family:"Hanken Grotesk",system-ui,sans-serif !important; padding-top: 80px; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(1100px 520px at 80% -8%, rgba(220,38,38,.12), transparent 60%), radial-gradient(800px 480px at 0% 0%, rgba(150,90,210,.05), transparent 55%); }
.navbar { background: rgba(18,12,13,.85) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bc-line) !important; }
.navbar .navbar-brand, .navbar .nav-link { color: var(--bc-txt) !important; font-family:"Saira",sans-serif !important; font-weight:600; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--bc-brand2) !important; }
.navbar .btn-primary-custom { background: var(--bc-brand) !important; border:none !important; color:#fff !important; font-family:"Saira",sans-serif; font-weight:700; border-radius:11px; }
.navbar .btn-theme-toggle { background: var(--bc-surf2) !important; border:1px solid var(--bc-line2) !important; color: var(--bc-muted) !important; border-radius:50%; width:38px; height:38px; }

.auth-wrap { max-width: 480px; margin: 40px auto; position: relative; z-index: 1; }
.auth-head { text-align: center; margin-bottom: 1.4rem; }
.auth-head .klabel { font-family:"Spline Sans Mono",monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bc-brand2); }
.auth-head h2 { font-family:"Saira",sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--bc-txt); margin:.45rem 0 0; }
.atabs { display:flex; gap:.2rem; border:1px solid var(--bc-line); border-radius:11px; padding:.25rem; margin-bottom:1.2rem; background:var(--bc-ink); }
.atab { flex:1; padding:.55rem; border:none; border-radius:8px; background:transparent; color:var(--bc-muted); font-family:"Saira",sans-serif; font-weight:600; cursor:pointer; transition:.13s; text-decoration:none; text-align:center; }
.atab.on { background:var(--bc-brand); color:#fff; }
.apanel { background:var(--bc-surf); border:1px solid var(--bc-line); border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.45); }
.apb { padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:1rem; }
.afield label { font-size:.72rem; color:var(--bc-faint); font-family:"Spline Sans Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }
.ain { position:relative; margin-top:.35rem; }
.ain .lead { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--bc-brand2); font-size:.85rem; pointer-events:none; }
.ain input { width:100%; padding:.7rem .8rem .7rem 2.4rem; border:1px solid var(--bc-line); border-radius:10px; background:var(--bc-surf2); color:var(--bc-txt); font-family:"Hanken Grotesk",sans-serif; }
.ain input::placeholder { color:var(--bc-faint); }
.ain input:focus { outline:none; border-color:var(--bc-brand2); box-shadow:0 0 0 3px var(--bc-soft); }
.ain.pw input { padding-right:2.7rem; }
.ain .toggle { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--bc-faint); cursor:pointer; padding:.35rem; border-radius:7px; line-height:1; }
.ain .toggle:hover { color:var(--bc-brand2); }
.acheck { display:flex; align-items:center; justify-content:space-between; font-size:.82rem; flex-wrap:wrap; gap:.4rem; }
.acheck label { display:flex; align-items:center; gap:.45rem; color:var(--bc-muted); cursor:pointer; margin:0; }
.acheck input { width:15px; height:15px; accent-color:var(--bc-brand); }
.acheck a { color:var(--bc-brand2); cursor:pointer; text-decoration:none; }
.aturn { display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border:1px solid var(--bc-line); border-radius:10px; background:var(--bc-surf2); font-size:.82rem; color:var(--bc-muted); }
.aalt { text-align:center; font-size:.82rem; color:var(--bc-faint); }
.aalt a { color:var(--bc-brand2); cursor:pointer; text-decoration:none; font-weight:600; }
.ahint { font-size:.74rem; color:var(--bc-faint); display:flex; align-items:flex-start; gap:.4rem; line-height:1.4; }
.abtn { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1rem; border-radius:11px; font-family:"Saira",sans-serif; font-weight:700; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:.15s; }
.abtn-pri { background:var(--bc-brand); color:#fff; box-shadow:0 8px 22px var(--bc-soft); }
.abtn-pri:hover { background:var(--bc-brand2); color:#fff; transform:translateY(-1px); }
.abtn-gh { background:transparent; border-color:var(--bc-line2); color:var(--bc-txt); }
.abtn-gh:hover { border-color:var(--bc-brand2); color:var(--bc-brand2); }
.auth-icon { width:54px; height:54px; border-radius:14px; background:var(--bc-soft); color:var(--bc-brand2); display:grid; place-items:center; font-size:1.3rem; margin:0 auto .8rem; }
.otp { display:flex; gap:.45rem; justify-content:center; margin:.2rem 0; }
.otp input { width:46px; height:56px; text-align:center; font-family:"Spline Sans Mono",monospace; font-size:1.5rem; font-weight:700; border:1px solid var(--bc-line2); border-radius:12px; background:var(--bc-surf2); color:var(--bc-txt); padding:0; caret-color:var(--bc-brand); }
.otp input:focus { outline:none; border-color:var(--bc-brand); box-shadow:0 0 0 3px var(--bc-soft); }
.otp input.f { border-color:var(--bc-brand2); }
.asuccess { text-align:center; padding:.4rem 0; }
.asuccess .ic { width:60px; height:60px; border-radius:50%; background:rgba(52,211,153,.16); color:var(--bc-ok); display:grid; place-items:center; font-size:1.5rem; margin:0 auto .9rem; }
.asuccess.err .ic { background:var(--bc-soft); color:var(--bc-brand2); }
.asuccess h3 { font-family:"Saira",sans-serif; font-size:1.2rem; color:var(--bc-txt); margin-bottom:.4rem; }
.asuccess p { font-size:.86rem; color:var(--bc-muted); max-width:40ch; margin:0 auto; }
.aspin { width:18px; height:18px; border:2px solid var(--bc-line2); border-top-color:var(--bc-brand2); border-radius:50%; animation:aspin .7s linear infinite; display:inline-block; vertical-align:middle; }
@keyframes aspin { to { transform: rotate(360deg); } }
.alert-danger { background:var(--bc-soft) !important; border:1px solid rgba(220,38,38,.4) !important; color:#f7b3b3 !important; border-radius:11px; }
.alert-success { background:rgba(52,211,153,.12) !important; border:1px solid rgba(52,211,153,.4) !important; color:#c9efdd !important; border-radius:11px; }
@media (prefers-reduced-motion: reduce){ *,*::before{ animation:none !important; transition:none !important; } }
@media (max-width:560px){ .otp input{ width:40px; height:50px; font-size:1.3rem; } .apb{ padding:1.3rem 1.1rem; } }