/* ═══════════════════════════════════════════════════════════════
   TotalOBD UI — standalone pages (sign in, password, 2FA, errors)
   Loaded after each page's own <style>, so these rules win.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --a-bg:#f7f6f2;
  --a-surface:#ffffff;
  --a-surface-2:#faf9f6;
  --a-surface-3:#f2f1ec;
  --a-border:#e7e5df;
  --a-divider:#e9e7e1;
  --a-text:#141414;
  --a-text-2:#6b6a66;
  --a-text-3:#9b9993;
  --a-red:#e63946;
  --a-red-hover:#d42e3b;
  --a-green:#43c35b;
  --a-shadow:0 2px 4px rgba(20,20,20,.03),0 30px 60px -30px rgba(20,20,20,.22);
  --a-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --a-display:'Archivo','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tobd-red:var(--a-red);
  --tobd-red-hover:var(--a-red-hover);
  --font-sans:var(--a-font);
  --font:var(--a-font);
  --tblr-font-sans-serif:var(--a-font);
}
:root[data-bs-theme="dark"]{
  color-scheme:dark;
  --a-bg:#0d0e10;
  --a-surface:#16171a;
  --a-surface-2:#1b1c20;
  --a-surface-3:#202126;
  --a-border:#27292e;
  --a-divider:#2a2c31;
  --a-text:#f2f1ee;
  --a-text-2:#a4a39e;
  --a-text-3:#76756f;
  --a-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}

html,body{background:var(--a-bg) !important;color:var(--a-text) !important;font-family:var(--a-font) !important;-webkit-font-smoothing:antialiased;}

/* Page frame */
.login-wrapper,.fp-wrapper,.rp-wrapper,.cp-wrapper,.act-wrapper,.tfa-wrapper{
  padding:1.25rem !important;
  background:
    radial-gradient(60rem 30rem at 50% -10%,color-mix(in oklab,var(--a-red) 7%,transparent),transparent 70%);
}

/* Card */
.login-card,.fp-card,.rp-card,.cp-card,.act-card,.tfa-card{
  max-width:420px !important;
  background:var(--a-surface) !important;
  border:1px solid var(--a-border) !important;
  border-radius:22px !important;
  box-shadow:var(--a-shadow) !important;
  padding:2.25rem 2rem 2rem !important;
  color:var(--a-text);
}
.act-card,.rp-card,.cp-card{max-width:460px !important;}

.login-brand,.fp-brand,.rp-brand,.cp-brand,.act-brand{text-align:left !important;margin-bottom:1.75rem !important;}
.login-brand img,.fp-brand img,.rp-brand img,.cp-brand img,.act-brand img{max-height:36px !important;}

.login-title,.fp-title,.rp-title,.cp-title,.act-title,.tfa-title{
  font-family:var(--a-display) !important;
  text-align:left !important;
  font-size:1.6rem !important;
  font-weight:700 !important;
  letter-spacing:-.015em;
  word-spacing:.06em;
  color:var(--a-text) !important;
  margin:0 0 .35rem !important;
}
.rp-title,.cp-title{margin-bottom:1.35rem !important;}
.login-subtitle,.fp-subtitle,.act-subtitle,.tfa-subtitle{
  text-align:left !important;
  color:var(--a-text-2) !important;
  font-size:.92rem !important;
  line-height:1.55;
  margin-bottom:1.6rem !important;
}
.tfa-title,.tfa-subtitle{text-align:center !important;}
.tfa-icon{background:color-mix(in oklab,var(--a-red) 10%,transparent) !important;color:var(--a-red) !important;border-radius:16px !important;}

/* Fields */
.login-field,.fp-field,.rp-field,.cp-field,.act-field{margin-bottom:1.1rem !important;}
.login-label,.fp-label,.rp-label,.cp-label,.act-label{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:.82rem !important;
  font-weight:600 !important;
  color:var(--a-text-2) !important;
  margin-bottom:.45rem !important;
}
.login-input,.fp-input,.tfa-input,
.rp-input-group,.cp-input-group,.act-input-group,
.act-field > .act-input{
  min-height:48px;
  border:1px solid var(--a-border) !important;
  border-radius:12px !important;
  background:var(--a-surface-2) !important;
  color:var(--a-text) !important;
  font-family:var(--a-font) !important;
  font-size:.95rem !important;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.rp-input,.cp-input,.act-input-group .act-input{color:var(--a-text) !important;font-family:var(--a-font) !important;font-size:.95rem !important;min-height:46px;}
.login-input::placeholder,.fp-input::placeholder,.rp-input::placeholder,.cp-input::placeholder,.act-input::placeholder{color:var(--a-text-3) !important;}
.login-input:focus,.fp-input:focus,.tfa-input:focus,.act-field > .act-input:focus,
.rp-input-group:focus-within,.cp-input-group:focus-within,.act-input-group:focus-within{
  border-color:var(--a-red) !important;
  background:var(--a-surface) !important;
  box-shadow:0 0 0 4px color-mix(in oklab,var(--a-red) 14%,transparent) !important;
  outline:none;
}
.rp-toggle,.cp-toggle,.act-toggle{background:transparent !important;color:var(--a-text-2) !important;}
.rp-toggle:hover,.cp-toggle:hover,.act-toggle:hover{color:var(--a-text) !important;}
.tfa-input{font-family:'JetBrains Mono',ui-monospace,monospace !important;letter-spacing:.5em !important;font-size:1.5rem !important;text-align:center;min-height:60px;}

/* Strength + requirements */
.rp-strength,.cp-strength,.act-strength{height:6px !important;border-radius:999px !important;background:var(--a-surface-3) !important;}
.rp-strength-bar,.cp-strength-bar,.act-strength-bar{border-radius:999px !important;}
.rp-reqs li,.cp-reqs li,.act-reqs li{color:var(--a-text-3) !important;font-size:.8rem !important;}
.rp-reqs li.ok,.cp-reqs li.ok,.act-reqs li.ok{color:#237a37 !important;}
.rp-dot,.cp-dot{background:var(--a-border) !important;}
.rp-reqs li.ok .rp-dot,.cp-reqs li.ok .cp-dot,.act-reqs li.ok [class*="dot"]{background:var(--a-green) !important;}
[data-bs-theme="dark"] .rp-reqs li.ok,[data-bs-theme="dark"] .cp-reqs li.ok,[data-bs-theme="dark"] .act-reqs li.ok{color:#74dc8a !important;}

/* Remember-me row */
.login-row{margin:.25rem 0 1.4rem !important;font-size:.85rem !important;}
.login-check{color:var(--a-text-2) !important;}
.login-check input[type="checkbox"]{accent-color:var(--a-text) !important;width:17px !important;height:17px !important;}
.login-forgot,.rp-back a,.cp-back a,.fp-back a,.act-footer-link,.act-footer a,.tfa-footer a{color:var(--a-text) !important;font-weight:600 !important;text-decoration:underline !important;text-decoration-color:var(--a-border) !important;text-underline-offset:3px;}
.login-forgot:hover,.rp-back a:hover,.cp-back a:hover,.fp-back a:hover,.act-footer a:hover,.tfa-footer a:hover{text-decoration-color:currentColor !important;}
.rp-back,.cp-back,.fp-back,.act-footer,.tfa-footer{color:var(--a-text-2) !important;}

/* Primary action */
.login-btn,.fp-btn,.rp-btn,.cp-btn,.act-btn,.tfa-btn,.error-btn{
  min-height:54px;
  border-radius:12px !important;
  background:var(--a-red) !important;
  color:#fff !important;
  font-family:var(--a-display) !important;
  font-weight:800 !important;
  font-size:.92rem !important;
  letter-spacing:.04em !important;
  word-spacing:.12em;
  text-transform:uppercase !important;
  box-shadow:none !important;
  transition:background .15s,transform .1s !important;
}
.login-btn:hover,.fp-btn:hover,.rp-btn:hover,.cp-btn:hover,.act-btn:hover,.tfa-btn:hover,.error-btn:hover{background:var(--a-red-hover) !important;}
.login-btn:active,.fp-btn:active,.rp-btn:active,.cp-btn:active,.act-btn:active,.tfa-btn:active{transform:translateY(1px) !important;}
.error-btn{min-height:50px;padding:0 1.5rem !important;}

/* Alerts */
.login-alert,.fp-alert,.rp-alert,.rp-alert-invalid,.cp-alert,.act-alert,.tfa-error{border-radius:12px !important;font-size:.85rem !important;line-height:1.5;padding:.85rem 1rem !important;}
[data-bs-theme="dark"] .login-alert-success,[data-bs-theme="dark"] .fp-alert-success,[data-bs-theme="dark"] .act-alert-success{background:rgba(67,195,91,.14) !important;border-color:rgba(67,195,91,.3) !important;color:#74dc8a !important;}
[data-bs-theme="dark"] .login-alert-danger,[data-bs-theme="dark"] .login-alert-warning,[data-bs-theme="dark"] .fp-alert-error,[data-bs-theme="dark"] .rp-alert-error,[data-bs-theme="dark"] .rp-alert-invalid,[data-bs-theme="dark"] .cp-alert,[data-bs-theme="dark"] .act-alert-danger,[data-bs-theme="dark"] .tfa-error{background:rgba(230,57,70,.14) !important;border-color:rgba(230,57,70,.3) !important;color:#ff9aa2 !important;}
[data-bs-theme="dark"] .login-alert-info{background:rgba(47,111,237,.16) !important;border-color:rgba(47,111,237,.3) !important;color:#8fb1ff !important;}

.login-footer,.act-footer-copy,.error-footer{color:var(--a-text-3) !important;font-size:.75rem !important;}

/* Error pages */
.error-code{
  font-family:var(--a-display) !important;
  font-size:clamp(5rem,22vw,9rem) !important;
  font-weight:800 !important;
  color:var(--a-surface-3) !important;
  -webkit-text-stroke:1px var(--a-border);
}
.error-icon{border-radius:20px !important;background:var(--a-surface) !important;border:1px solid var(--a-border);box-shadow:var(--a-shadow);}
.error-title{font-family:var(--a-display) !important;color:var(--a-text) !important;}
.error-text{color:var(--a-text-2) !important;}

/* SweetAlert (login "stay signed in?" prompt) */
.swal2-popup{border-radius:22px !important;font-family:var(--a-font) !important;background:var(--a-surface) !important;color:var(--a-text) !important;}
.swal2-title{font-family:var(--a-display) !important;color:var(--a-text) !important;}
.swal2-html-container{color:var(--a-text-2) !important;}
.swal2-actions{gap:.6rem;width:100%;flex-wrap:nowrap !important;}
.swal2-actions .swal2-styled{flex:1;margin:0 !important;min-height:48px;border-radius:12px !important;font-family:var(--a-display) !important;font-weight:800 !important;text-transform:uppercase;letter-spacing:.03em;font-size:.85rem !important;}
.swal2-styled.swal2-confirm{background:var(--a-red) !important;}
.swal2-styled.swal2-cancel{background:var(--a-surface-3) !important;color:var(--a-text) !important;}

@media (max-width:480px){
  .login-card,.fp-card,.rp-card,.cp-card,.act-card,.tfa-card{padding:1.75rem 1.25rem 1.5rem !important;border-radius:20px !important;}
  .login-title,.fp-title,.rp-title,.cp-title,.act-title,.tfa-title{font-size:1.4rem !important;}
}