/* Public UI Polish: shared SaaS/finance-portal presentation layer for public-facing
   login, registration, and demo pages. Lightweight, dependency-free CSS only.
   No frameworks, no external fonts/trackers, no JS. */
:root{
  --pui-navy:#0b1224;
  --pui-brand:#2563eb;
  --pui-brand-2:#7c3aed;
  --pui-text:#0d172a;
  --pui-muted:#5b6b85;
  --pui-border:#dde5f3;
  --pui-panel:#ffffff;
  --pui-bg:#f5f8ff;
  --pui-ok-bg:#ecfdf5; --pui-ok-fg:#166534; --pui-ok-bd:#bbf7d0;
  --pui-warn-bg:#fff7ed; --pui-warn-fg:#9a3412; --pui-warn-bd:#fed7aa;
  --pui-err-bg:#fef2f2; --pui-err-fg:#991b1b; --pui-err-bd:#fecaca;
  --pui-info-bg:#eff6ff; --pui-info-fg:#1e3a8a; --pui-info-bd:#bfdbfe;
  --pui-radius:18px;
  --pui-shadow:0 20px 50px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
body.pui-body{
  margin:0;font-family:-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  color:var(--pui-text);background:var(--pui-bg);line-height:1.55;min-height:100vh;
}
.pui-shell{max-width:960px;margin:0 auto;padding:0 20px}
.pui-shell-narrow{max-width:640px;margin:0 auto;padding:0 20px}
a{color:var(--pui-brand)}

.pui-hero{
  background:linear-gradient(150deg,var(--pui-navy) 0%,#173d8f 55%,var(--pui-brand-2) 130%);
  color:#fff;padding:30px 0 40px;
}
.pui-hero-inner{max-width:960px;margin:0 auto;padding:0 20px}
.pui-hero-inner.narrow{max-width:640px}
.pui-wordmark{font-size:12px;font-weight:800;color:rgba(255,255,255,.7);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.pui-hero h1{font-size:26px;line-height:1.2;margin:0 0 8px;letter-spacing:-.02em}
.pui-hero p.pui-sub{font-size:14.5px;color:rgba(255,255,255,.85);margin:0;max-width:560px}

.pui-main{margin-top:-24px;padding-bottom:36px}
.pui-card{
  background:var(--pui-panel);border:1px solid var(--pui-border);border-radius:var(--pui-radius);
  box-shadow:var(--pui-shadow);padding:22px;margin-bottom:16px;
}
.pui-card h2{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.pui-card h3{margin:0 0 6px;font-size:15px}
.pui-card p.pui-help{margin:0 0 14px;font-size:13px;color:var(--pui-muted)}
.pui-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

.pui-field{margin:0 0 14px}
.pui-field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--pui-text)}
.pui-field .pui-hint{font-size:12px;color:var(--pui-muted);margin-top:5px}
.pui-field input,.pui-field select{
  width:100%;border:1px solid var(--pui-border);border-radius:11px;background:#fff;color:var(--pui-text);
  padding:11px 13px;font-size:15px;outline:none;transition:.15s;
}
.pui-field input:focus,.pui-field select:focus{border-color:var(--pui-brand);box-shadow:0 0 0 3px rgba(37,99,235,.14)}

.pui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:11px;padding:11px 16px;font-size:14px;font-weight:800;cursor:pointer;
  background:linear-gradient(135deg,var(--pui-brand),var(--pui-brand-2));color:#fff;text-decoration:none;
}
.pui-btn:hover{text-decoration:none;filter:brightness(1.05)}
.pui-btn:disabled,.pui-btn.pui-disabled{background:#e2e8f0;color:#94a3b8;cursor:not-allowed}
.pui-btn-secondary{background:#eef2ff;color:var(--pui-brand)}
.pui-btn-ghost{background:#fff;color:var(--pui-text);border:1px solid var(--pui-border)}
.pui-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}

.pui-notice{border-radius:14px;padding:12px 14px;margin:0 0 14px;font-size:13.5px}
.pui-notice.ok{background:var(--pui-ok-bg);color:var(--pui-ok-fg);border:1px solid var(--pui-ok-bd)}
.pui-notice.warn{background:var(--pui-warn-bg);color:var(--pui-warn-fg);border:1px solid var(--pui-warn-bd)}
.pui-notice.err{background:var(--pui-err-bg);color:var(--pui-err-fg);border:1px solid var(--pui-err-bd)}
.pui-notice.info{background:var(--pui-info-bg);color:var(--pui-info-fg);border:1px solid var(--pui-info-bd)}
.pui-notice b{display:block;margin-bottom:2px}

.pui-badge{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;
  font-size:11.5px;font-weight:800;border:1px solid transparent;
}
.pui-badge.ok{background:var(--pui-ok-bg);color:var(--pui-ok-fg);border-color:var(--pui-ok-bd)}
.pui-badge.warn{background:var(--pui-warn-bg);color:var(--pui-warn-fg);border-color:var(--pui-warn-bd)}
.pui-badge.info{background:var(--pui-info-bg);color:var(--pui-info-fg);border-color:var(--pui-info-bd)}

.pui-steps{display:grid;gap:10px}
.pui-step{display:flex;gap:10px;padding:11px 12px;border:1px solid var(--pui-border);border-radius:12px;background:#f8fbff;font-size:13.5px}
.pui-step .pui-step-num{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--pui-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;
}

.pui-otp-code{font-size:26px;letter-spacing:6px;font-weight:900;background:var(--pui-navy);color:#fff;border-radius:12px;padding:14px;display:inline-block;text-align:center}
.pui-status-list{list-style:none;padding:0;margin:0}
.pui-status-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:11px;margin-bottom:7px;background:#f8fbff;border:1px solid var(--pui-border);font-size:13.5px}
.pui-status-list li.on{border-color:#93c5fd;background:#eff6ff}
.pui-status-list .pui-status-tag{font-size:11.5px;font-weight:800;color:var(--pui-muted)}

.pui-footer{
  border-top:1px solid var(--pui-border);margin-top:8px;padding:18px 20px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--pui-muted);
}
.pui-footer a{color:var(--pui-muted);font-weight:700;text-decoration:none}
.pui-footer a:hover{color:var(--pui-brand)}
.pui-links{font-size:13px}
.pui-links a{font-weight:700;text-decoration:none;margin-right:14px}
.pui-links a:last-child{margin-right:0}

.pui-top-utility{display:flex;justify-content:flex-end;padding:14px 20px;max-width:960px;margin:0 auto}
.pui-top-utility a{font-size:13px;font-weight:700;color:var(--pui-muted);text-decoration:none}
.pui-top-utility a:hover{color:var(--pui-brand)}

@media (max-width:760px){
  .pui-grid-2{grid-template-columns:1fr}
  .pui-hero h1{font-size:22px}
}