*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --g400:#D4AF37;--g500:#B8960C;--g700:#8B7008;
  --n950:#050D1A;--n900:#0A1628;--n800:#0F2040;
  --s400:#A8B4C4;--s600:#6B7A8D;
  --bg:var(--n900);--bg2:var(--n800);--bgc:rgba(15,32,64,.7);
  --bd:rgba(212,175,55,.18);--bdh:rgba(212,175,55,.45);
  --tx:#F0F4F8;--txm:#C8D4E0;--txd:var(--s400);--ac:var(--g400);
  --r:4px;--ez:cubic-bezier(.4,0,.2,1);--ezs:cubic-bezier(.34,1.56,.64,1);
  --fd:'Playfair Display',Georgia,serif;
  --fb:'DM Sans',system-ui,sans-serif;
  --fm:'DM Mono',monospace;
}
[data-theme="light"]{
  --bg:#F5F7FA;--bg2:#FFF;--bgc:rgba(255,255,255,.92);
  --bd:rgba(139,112,8,.2);--bdh:rgba(139,112,8,.5);
  --tx:#0A1628;--txm:#1E3A6E;--txd:#6B7A8D;--ac:var(--g700);
}
html,body{height:100%;font-family:var(--fb);background:var(--bg);color:var(--tx);}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow:hidden;}
/* Background decorativo */
body::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(139,112,8,.08),transparent 70%),linear-gradient(180deg,var(--n950),var(--n900));z-index:0;}
[data-theme="light"] body::before{background:linear-gradient(180deg,#F5F7FA,#EBF0F8);}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(212,175,55,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.04) 1px,transparent 1px);background-size:60px 60px;z-index:0;}
/* Card */
.card{position:relative;z-index:2;width:100%;max-width:420px;margin:20px;background:var(--bgc);border:1px solid var(--bd);backdrop-filter:blur(24px);animation:fadeUp .5s var(--ezs) both;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g700),var(--g400),var(--g700));}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
/* Header */
.ch{padding:28px 28px 0;text-align:center;}
.clogo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;}
.clogo img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(212,175,55,.4));}
.cname{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--ac);text-align:left;line-height:1.1;}
.csub{font-family:var(--fm);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txd);display:block;margin-top:2px;}
/* Tabs */
.tabs{display:flex;gap:5px;padding:0 28px;margin-top:18px;}
.tab{flex:1;padding:8px 5px;text-align:center;background:rgba(255,255,255,.03);border:1px solid var(--bd);cursor:pointer;font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txd);transition:all .2s;border-radius:var(--r);}
.tab.ac{border-color:var(--ac);color:var(--ac);background:rgba(212,175,55,.08);}
/* Body */
.cb{padding:22px 28px 28px;}
/* Step titles */
.step-title{font-family:var(--fd);font-size:1.18rem;font-weight:700;color:var(--ac);margin-bottom:4px;}
.step-sub{font-family:var(--fm);font-size:.65rem;letter-spacing:.1em;color:var(--txd);margin-bottom:18px;}
/* Form */
.fg{margin-bottom:12px;}
.fg label{display:block;font-family:var(--fm);font-size:.57rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--txd);margin-bottom:4px;}
.fi{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--bd);color:var(--tx);padding:10px 13px;font-size:.9rem;outline:none;transition:border-color .2s,background .2s;border-radius:var(--r);font-family:var(--fb);}
[data-theme="light"] .fi{background:rgba(10,22,40,.04);}
.fi:focus{border-color:var(--ac);background:rgba(212,175,55,.04);}
.fi::placeholder{color:var(--txd);opacity:.5;}
/* Password toggle */
.pw-wrap{position:relative;}
.pw-wrap .fi{padding-right:42px;}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--txd);padding:4px;transition:color .2s;}
.pw-toggle:hover{color:var(--ac);}
.pw-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;}
/* TOTP inputs */
.totp-grid{display:flex;gap:7px;justify-content:center;margin-bottom:6px;}
.totp-digit{width:44px;height:52px;text-align:center;font-family:var(--fm);font-size:1.4rem;font-weight:500;background:rgba(255,255,255,.06);border:1px solid var(--bd);color:var(--tx);border-radius:var(--r);transition:border-color .2s,background .2s;outline:none;caret-color:transparent;}
[data-theme="light"] .totp-digit{background:rgba(10,22,40,.04);}
.totp-digit:focus{border-color:var(--ac);background:rgba(212,175,55,.06);}
.totp-hint{font-family:var(--fm);font-size:.62rem;color:var(--txd);text-align:center;margin-top:5px;}
/* Forgot link */
.forgot{text-align:right;margin-top:-7px;margin-bottom:10px;}
.forgot a{font-family:var(--fm);font-size:.62rem;color:var(--ac);transition:opacity .2s;}
.forgot a:hover{opacity:.7;}
/* Separator */
.sep{display:flex;align-items:center;gap:9px;margin:14px 0;}
.sep span{font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;color:var(--txd);white-space:nowrap;}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--bd);}
/* 2FA info box */
.info-box{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;background:rgba(212,175,55,.05);border:1px solid var(--bd);border-radius:var(--r);margin-bottom:16px;}
.info-box.err{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.35);}
.info-box.ok{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.35);}
.info-box .icon{font-size:1rem;flex-shrink:0;margin-top:1px;}
.info-box p{font-size:.72rem;color:var(--txd);line-height:1.55;}
.info-box.err p{color:#FCA5A5;}
.info-box.ok p{color:#86EFAC;}
/* Button */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-family:var(--fm);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:13px 24px;cursor:pointer;transition:all .25s var(--ez);border:none;background:linear-gradient(135deg,var(--g700),var(--g500));color:var(--n900);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);margin-top:4px;}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px rgba(212,175,55,.4);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
/* Back link */
.back-link{text-align:center;margin-top:14px;}
.back-link button{background:none;border:none;cursor:pointer;font-family:var(--fm);font-size:.65rem;color:var(--ac);letter-spacing:.1em;text-decoration:none;transition:opacity .2s;}
.back-link button:hover{opacity:.7;}
/* Footer */
.cf{padding:14px 28px;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.cf-leg{font-family:var(--fm);font-size:.56rem;letter-spacing:.08em;color:var(--txd);}
.cf-badges{display:flex;gap:4px;}
.cf-badge{font-family:var(--fm);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;background:rgba(255,255,255,.03);border:1px solid var(--bd);color:var(--s600);border-radius:2px;}
/* Theme toggle */
.theme-btn{position:fixed;top:16px;right:16px;z-index:100;width:34px;height:34px;background:rgba(255,255,255,.05);border:1px solid var(--bd);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .25s;}
.theme-btn:hover{border-color:var(--ac);}
.theme-btn svg{width:16px;height:16px;stroke:var(--txd);fill:none;stroke-width:1.5;}
.im{display:block;}.is{display:none;}
[data-theme="light"] .im{display:none;}[data-theme="light"] .is{display:block;}
/* Back to site */
.site-link{position:fixed;top:16px;left:16px;z-index:100;font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txd);text-decoration:none;display:flex;align-items:center;gap:5px;transition:color .2s;}
.site-link:hover{color:var(--ac);}
.site-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}
/* Spinner */
.spin{width:16px;height:16px;border:2px solid rgba(10,22,40,.3);border-top-color:var(--n900);border-radius:50%;animation:spin .6s linear infinite;display:none;}
@keyframes spin{to{transform:rotate(360deg);}}
/* Loading state */
.btn.loading .spin{display:block;}
.btn.loading .btn-txt{display:none;}
/* Responsive */
@media(max-width:480px){
  .card{margin:12px;}
  .ch,.cb,.cf{padding-left:18px;padding-right:18px;}
  .tabs{padding:0 18px;}
  .totp-digit{width:38px;height:46px;font-size:1.2rem;}
}