/* 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;
  margin:0;
  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)}

/* IT4Y_REMEMBER_ME_MOBILE_2026_06_14 -- remember-me row inline flex. Strict CSP (style-src 'self', no unsafe-inline) blocks the inline style= attrs the checkbox row shipped with, so it fell back to .it4lg-field input{width:100%} (full-width checkbox block) + .it4lg-field>label{display:block;text-transform:uppercase} (label stacked below) -> broken esp. on mobile. These rules restore inline flex from the stylesheet (CSP-safe). Covers #rememberme (unified login) + #li-remember (customer panel.js3 + admin adminp.js3). */
.it4lg-field>label:has(#rememberme),.it4lg-field>label:has(#li-remember){display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--lg-text);line-height:1.35;cursor:pointer;-webkit-user-select:none;user-select:none}
#rememberme,#li-remember{appearance:auto;-webkit-appearance:auto;width:16px;height:16px;min-width:16px;flex:0 0 16px;margin:0;padding:0;cursor:pointer;accent-color:#22a0ff;box-sizing:border-box}

/* IT4Y_LOGIN_CONTRAST_2026_06_18 -- base theme text color so untagged modal text (reset-view
   title/description rendered plain, outside .it4lg-card) inherits --lg-text instead of UA black
   (invisible on dark cards); opaque placeholders for WCAG AA; autofilled input stays high-contrast. */
.it4lg-scope{color:var(--lg-text)}
.it4lg-field input::placeholder{opacity:1}
.it4lg-field input:-webkit-autofill,.it4lg-field input:-webkit-autofill:hover,.it4lg-field input:-webkit-autofill:focus,.it4lg-field input:-webkit-autofill:active{-webkit-text-fill-color:var(--lg-text);caret-color:var(--lg-text);-webkit-box-shadow:0 0 0 1000px var(--lg-input) inset;box-shadow:0 0 0 1000px var(--lg-input) inset;transition:background-color 9999s ease-out 0s}

/* IT4Y_LOGIN_UI_2026_07_22 — Phase-1 login polish: OS-dark auto-detect (respects prefers-color-scheme;
   a service-forced .it4lg-dark, or the new .it4lg-force-light escape hatch, still wins) + primary-button
   depth/hover to the top-tier bar. Additive, strict-CSP-clean (external sheet, no inline). */
@media(prefers-color-scheme:dark){
  .it4lg-scope:not(.it4lg-dark):not(.it4lg-force-light){
    --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-btn{box-shadow:0 1px 2px rgba(15,23,42,.12),0 1px 3px rgba(37,99,235,.26);transition:opacity .15s,transform .12s,box-shadow .15s,filter .15s}
.it4lg-btn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 2px 6px rgba(15,23,42,.16),0 6px 16px rgba(37,99,235,.30)}
.it4lg-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px rgba(15,23,42,.14)}

/* IT4Y_LOGIN_TOUCH_COMFORT_2026_07_24 — consistent mobile and keyboard
   ergonomics across every shared login host without altering form behavior. */
.it4lg-field input:not([type="checkbox"]){min-height:48px}
.it4lg-pw input{padding-right:50px}
.it4lg-eye{right:2px;width:44px;height:44px;display:grid;place-items:center;padding:0}
.it4lg-btn{min-height:48px}
.it4lg-field>label:has(#rememberme),.it4lg-field>label:has(#li-remember){min-height:44px}
.it4lg-foot a{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
.it4lg-eye:focus-visible,.it4lg-btn:focus-visible,.it4lg-foot a:focus-visible{outline:3px solid var(--lg-accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.it4lg-btn{transition:none}.it4lg-btn:hover:not(:disabled){transform:none}}