/* Shares its palette and token names with CIS-Cyber-Maturity-Assessment.html (src/part1.html)
   and the sibling GTCC Governance Center tool, so the auth portal reads as the same product
   family rather than a bolted-on, visually unrelated login page. */
:root{
  --navy:#16508F; --navy-dark:#0E2841; --navy-hdr:#145890;
  --orange:#FBAE40; --bg:#F4F6F9;
  --surface:#FFFFFF; --surface-2:#EDF1F6; --border:#D8DFE8;
  --text:#0E2841; --text-2:#4A5A70; --text-3:#7A8699;
  --red:#C00000; --green:#70AD47;
  --shadow:0 1px 3px rgba(14,40,65,.08), 0 4px 14px rgba(14,40,65,.06);
}
[data-theme="dark"]{
  --bg:#0A1626; --surface:#10233B; --surface-2:#16304F; --border:#24405F;
  --text:#E9EFF6; --text-2:#A9BAD0; --text-3:#71849E;
  --shadow:0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:Calibri,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--navy-dark);color:#fff;padding:14px 24px;display:flex;align-items:center;gap:12px}
.topbar h1{font-size:16px;margin:0;font-weight:800;letter-spacing:.2px}
.topbar .tag{font-size:11px;color:var(--orange);font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.spacer{flex:1}
.themebtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:7px;width:30px;height:30px;cursor:pointer}

main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:420px;padding:30px 28px}
.card h2{margin:0 0 4px;font-size:20px;color:var(--navy);font-weight:800}
.card p.lead{margin:0 0 22px;color:var(--text-2);font-size:13.5px}

.tabs{display:flex;gap:6px;margin-bottom:22px}
.tabs button{flex:1;padding:9px 0;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);border-radius:8px;font-weight:700;font-size:13px;cursor:pointer}
.tabs button.active{background:var(--navy);border-color:var(--navy);color:#fff}

.fld{display:block;font-size:12.5px;font-weight:700;color:var(--text-2);margin:14px 0 6px}
input[type=text],input[type=email]{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:14px;font-family:inherit}
input:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}

.btn{width:100%;margin-top:20px;padding:11px 0;background:var(--navy);color:#fff;border:none;border-radius:8px;font-weight:800;font-size:14.5px;cursor:pointer}
.btn:hover{background:var(--navy-hdr)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn.link{width:auto;margin:8px 0 0;padding:0;background:none;color:var(--navy);font-weight:700;font-size:12.5px;text-decoration:underline}
.btn-spaced{margin-top:10px}

.note{font-size:11.5px;color:var(--text-3);margin-top:16px;line-height:1.5}
.banner{padding:11px 13px;border-radius:8px;font-size:12.5px;margin-bottom:16px;line-height:1.5}
.banner.info{background:#eef4fb;color:#0E2841;border:1px solid #b9d0ea}
[data-theme="dark"] .banner.info{background:#122a44;color:#cfe0f2;border-color:#1f3f61}
.banner.error{background:#fdf0f0;color:#7a1414;border:1px solid #f0b9b9}
[data-theme="dark"] .banner.error{background:#3a1414;color:#f0b9b9;border-color:#5a2020}
.banner.ok{background:#e9f3e4;color:#2f5121;border:1px solid #bcd9ac}
[data-theme="dark"] .banner.ok{background:#173a12;color:#bcd9ac;border-color:#2c521f}

.otp-row{display:flex;gap:8px;justify-content:center;margin:18px 0 6px}
.otp-row input{width:44px;height:52px;text-align:center;font-size:22px;font-weight:800;padding:0}
.otp-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-3);margin-top:6px}
.countdown{font-weight:700;color:var(--navy)}
.countdown.expiring{color:var(--red)}

.checkbox-fld{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);margin-top:16px;cursor:pointer}
.checkbox-fld input{width:auto;margin:0}

.hidden{display:none !important}

.status-card .who{font-size:14px;color:var(--text);margin-bottom:2px}
.status-card .email{font-size:12.5px;color:var(--text-2);margin-bottom:18px}

footer{padding:16px;text-align:center;font-size:11px;color:var(--text-3)}
.suite-version{display:inline-block;margin-top:4px;font-size:10.5px;opacity:.75}