/* IT4Y_UNIFIED_LOGIN_2026_06_02 — single source of truth for login card LAYOUT/STRUCTURE.
   Colors are per-brand via CSS vars set on .it4lg-scope (default = light/customer).
   Services set .it4lg-scope.it4lg-dark for the dark/branded theme. Structure is identical
   across every host; only the color tokens + logo/name differ. */
.it4lg-scope{
  --lg-bg:#eef1f6; --lg-card:#ffffff; --lg-border:#e3e7ee; --lg-input:#ffffff;
  --lg-text:#0f172a; --lg-muted:#64748b; --lg-accent:#2563eb; --lg-accent-tx:#ffffff;
  --lg-ring:rgba(37,99,235,.18); --lg-badge-bg:#eff4ff; --lg-badge-tx:#2563eb;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.it4lg-scope.it4lg-dark{
  --lg-bg:#0a0f1c; --lg-card:#121a2e; --lg-border:#243049; --lg-input:#0e1626;
  --lg-text:#e5e7eb; --lg-muted:#94a3b8; --lg-accent:#3b82f6; --lg-accent-tx:#ffffff;
  --lg-ring:rgba(59,130,246,.30); --lg-badge-bg:rgba(59,130,246,.14); --lg-badge-tx:#7cb0ff;
}
.it4lg-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--lg-bg);box-sizing:border-box}
.it4lg-card{width:100%;max-width:404px;background:var(--lg-card);border:1px solid var(--lg-border);border-radius:14px;padding:34px 30px;box-shadow:0 10px 34px rgba(15,23,42,.10);box-sizing:border-box}
.it4lg-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:8px}
.it4lg-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lg-badge-tx);background:var(--lg-badge-bg);border-radius:999px;padding:5px 11px}
.it4lg-h1{font-size:23px;line-height:1.2;font-weight:700;text-align:center;margin:14px 0 6px;color:var(--lg-text);letter-spacing:-.01em}
.it4lg-sub{font-size:13px;line-height:1.5;text-align:center;color:var(--lg-muted);margin:0 0 22px}
.it4lg-msg{margin:0 0 14px;min-height:0}
.it4lg-field{margin-bottom:15px}
.it4lg-field>label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lg-muted);margin:0 0 6px}
.it4lg-field input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--lg-border);border-radius:9px;background:var(--lg-input);color:var(--lg-text);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
.it4lg-field input::placeholder{color:var(--lg-muted);opacity:.7}
.it4lg-field input:focus{border-color:var(--lg-accent);box-shadow:0 0 0 3px var(--lg-ring)}
.it4lg-pw{position:relative}
.it4lg-pw input{padding-right:42px}
.it4lg-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:16px;color:var(--lg-muted);padding:5px 9px;line-height:1}
.it4lg-btn{width:100%;padding:12px;border:0;border-radius:9px;background:var(--lg-accent);color:var(--lg-accent-tx);font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s;margin-top:2px}
.it4lg-btn:disabled{opacity:.6;cursor:default}
.it4lg-caps{display:none;font-size:12px;color:#d97706;margin-top:5px}
.it4lg-foot{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:16px;font-size:13px}
.it4lg-foot a{color:var(--lg-accent);text-decoration:none;cursor:pointer}
.it4lg-foot a:hover{text-decoration:underline}
.it4lg-err{color:#dc2626;font-size:13px;margin-bottom:2px}
.it4lg-ok{color:#059669;font-size:13px}
.it4lg-info{color:var(--lg-muted);font-size:13px}
.it4lg-extra{margin-top:18px;border-top:1px solid var(--lg-border);padding-top:14px}
.it4lg-extra summary{font-size:12px;color:var(--lg-muted);cursor:pointer;list-style:none}
.it4lg-spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:it4lgspin .7s linear infinite;vertical-align:-2px;margin-right:5px}
@keyframes it4lgspin{to{transform:rotate(360deg)}}
@media(max-width:480px){.it4lg-wrap{padding:14px}.it4lg-card{padding:26px 20px;border-radius:12px;box-shadow:0 4px 18px rgba(15,23,42,.08)}.it4lg-h1{font-size:21px}}
/* it4lg-code-input */
#li-totp,#lc-code,#code{letter-spacing:4px;text-align:center;font-weight:600}
/* IT4Y_LOGIN_CSP_STRICT_2026_06_03 — classes replacing the former inline style= attributes in the
   login app innerHTML, so the page is strict-CSP-clean (style-src 'self', no 'unsafe-inline'). */
.it4lg-hide{display:none}
.it4lg-enroll-info{text-align:center;margin:2px 0 14px}
.it4lg-enroll-codewrap{margin-top:8px}
.it4lg-secret{display:inline-block;font-size:13px;letter-spacing:2px;word-break:break-all;background:var(--lg-input);border:1px solid var(--lg-border);color:var(--lg-text);padding:8px 12px;border-radius:8px}
.it4lg-rc-box{background:var(--lg-input);border:1px dashed var(--lg-border);border-radius:9px;padding:12px 16px;margin-bottom:16px;user-select:all}
.it4lg-rc-line{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;padding:3px 0;color:var(--lg-text)}