:root {
  --navy: #13294b; --navy-2: #0b1d38; --accent: #2f73da; --bg: #f4f6f9; --border: #dde3ea; --muted: #64748b;
  --brand-red: #d71920; --brand-blue: #2f73da; --brand-ink: #111827;
}
body { background: var(--bg); font-size: 0.875rem; color: #1e293b; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 245px; flex-shrink: 0; background: var(--navy); color: #cbd5e1; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { padding: 1rem 1.1rem; color: #fff; font-weight: 600; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; gap: .6rem; align-items: center; }
.sidebar .brand .logo { background: #fff; color: var(--navy); border-radius: 6px; padding: 2px 7px; font-weight: 700; font-size: .8rem; }
.sidebar .section { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: #8aa0b8; padding: 1rem 1.1rem .35rem; }
.sidebar a { display: flex; gap: .6rem; align-items: center; padding: .45rem 1.1rem; color: #cbd5e1; text-decoration: none; border-left: 3px solid transparent; }
.sidebar a:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar a.active { background: rgba(255,255,255,.09); color: #fff; border-left-color: #60a5fa; }
.main { flex: 1; min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid var(--border); padding: .7rem 1.5rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.content { padding: 1.25rem 1.5rem 3rem; }
.page-title { font-size: 1.2rem; font-weight: 600; margin: 0; }
.card { border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--border); font-weight: 600; }
.kpi .value { font-size: 1.7rem; font-weight: 700; color: var(--navy); }
.kpi .label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.chart-box { position: relative; height: 280px; }
.report-wrap { max-height: 65vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.report-table { margin: 0; font-size: .8rem; }
.report-table thead th { position: sticky; top: 0; background: var(--navy); color: #fff; font-weight: 600; white-space: nowrap; vertical-align: middle; border-color: #2d4f75; }
.report-table thead tr:nth-child(2) th { top: 31px; }
.report-table td { white-space: nowrap; border-color: #eef2f6; }
.report-table tr.row-sub td { background: #f0f4f8; font-weight: 600; }
.report-table tr.row-total td { background: #d9e2ec; font-weight: 700; }
.report-table tr.row-heading td { background: #f8fafc; font-weight: 700; color: var(--navy); }
.report-head { text-align: center; padding: .75rem 0 .5rem; }
.report-head .org { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.list-report { display: flex; align-items: center; padding: .55rem .9rem; border-bottom: 1px solid #eef2f6; gap: .75rem; }
.list-report:last-child { border-bottom: 0; }
.list-report:hover { background: #f8fafc; }
.badge-soft { background: #e8eef7; color: var(--navy); font-weight: 500; }
.grid-input td { padding: 2px 3px; vertical-align: middle; }
.grid-input .form-control, .grid-input .form-select { font-size: .78rem; padding: 2px 6px; min-height: 28px; }
.grid-input th { font-size: .72rem; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.nav-tabs .nav-link { font-size: .82rem; }
.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; max-width: 420px; }
.busy-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #60a5fa, #2563eb); animation: busy 1s linear infinite; z-index: 2000; }
@keyframes busy { 0% { opacity: .4 } 50% { opacity: 1 } 100% { opacity: .4 } }
.help { color: var(--muted); font-size: .75rem; }
code.tok { background: #eef2ff; color: #3730a3; padding: 1px 5px; border-radius: 4px; cursor: pointer; }
textarea.sql { font-family: Consolas, monospace; font-size: .78rem; }
[x-cloak] { display: none !important; }
@media (max-width: 900px) { .sidebar { display: none; } .content { padding: 1rem; } }

.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy) 0%, #2d4f75 100%); padding: 16px; }
.auth-overlay { position: fixed; inset: 0; z-index: 1050; background: rgba(15, 23, 42, .55); }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { display: inline-block; background: var(--navy); color: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 700; }
/* ------------------------------------------------------------------ SAFE RegEdge branding */
.pm-safe { color: var(--brand-red); font-weight: 800; letter-spacing: .02em; }
.pm-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-red) 0%, #a3121a 45%, var(--brand-blue) 100%); color: #fff; font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(215, 25, 32, .25); flex-shrink: 0; }
.pm-icon.sm { width: 34px; height: 34px; border-radius: 9px; font-size: 1.05rem; box-shadow: none; }
.sidebar .brand { gap: .65rem; padding: .9rem 1rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 1.05rem; font-weight: 700; color: #fff; }
.sidebar .pm-safe { color: #ff5a5f; }
.brand-tag { font-size: .66rem; color: #8aa0b8; text-transform: uppercase; letter-spacing: .08em; }
.sidebar-foot { padding: 1.5rem 1.1rem 1rem; font-size: .68rem; color: #6f86a0; line-height: 1.4; }
.sidebar-foot b { color: #a9bbd0; font-weight: 600; }
.btn-brand { background: linear-gradient(90deg, var(--brand-red), #b3141b); border: 0; color: #fff; font-weight: 600; border-radius: 10px; }
.btn-brand:hover, .btn-brand:focus { background: linear-gradient(90deg, #c0161d, #95100f); color: #fff; }
.btn-brand:disabled { background: #e7a3a6; color: #fff; opacity: 1; }

/* ------------------------------------------------------------------ sign-in page */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: #fff; }
.login-hero { position: relative; overflow: hidden; color: #e2e8f0;
  background: radial-gradient(120% 90% at 0% 0%, #1d3f73 0%, var(--navy) 45%, var(--navy-2) 100%); display: flex; align-items: center; }
.hero-swoosh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; padding: 3.5rem clamp(2rem, 6vw, 5.5rem); max-width: 680px; }
.product-mark { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.pm-text { display: flex; flex-direction: column; }
.pm-name { font-size: 1.9rem; font-weight: 800; color: #fff; letter-spacing: -.01em; line-height: 1.1; }
.login-hero .pm-safe { color: #ff4d55; }
.pm-tag { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: #93b4e0; margin-top: .2rem; }
.hero-title { font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 1rem; }
.hero-title span { background: linear-gradient(90deg, #ff6b70, #6ea8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 1rem; color: #b8c7da; line-height: 1.6; margin-bottom: 2rem; }
.hero-points { list-style: none; padding: 0; margin: 0 0 2.25rem; display: grid; gap: 1rem; }
.hero-points li { display: flex; gap: .9rem; align-items: flex-start; }
.hero-points i { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  display: inline-flex; align-items: center; justify-content: center; color: #8db8ff; font-size: 1.05rem; flex-shrink: 0; }
.hero-points b { display: block; color: #fff; font-weight: 600; font-size: .92rem; }
.hero-points span { color: #9fb2c9; font-size: .82rem; }
.hero-stats { display: flex; gap: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.hero-stats b { display: block; font-size: 1.6rem; font-weight: 800; color: #fff; }
.hero-stats span { font-size: .75rem; color: #9fb2c9; text-transform: uppercase; letter-spacing: .06em; }

.login-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: #fff; }
.login-form { width: 100%; max-width: 410px; }
.login-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 1.75rem -6px; mix-blend-mode: multiply; }
.login-product { font-size: 1.4rem; font-weight: 800; color: var(--brand-ink); margin: -1rem 0 1.25rem; }
.login-title { font-size: 1.75rem; font-weight: 800; color: var(--brand-ink); margin-bottom: .25rem; letter-spacing: -.01em; }
.login-sub { color: var(--muted); margin-bottom: 1.75rem; font-size: .95rem; }
.login-form .form-label { font-weight: 600; font-size: .8rem; color: #334155; margin-bottom: .35rem; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 1.05rem; pointer-events: none; }
.input-icon .form-control { padding-left: 2.6rem; padding-right: 2.8rem; border-radius: 10px; font-size: .95rem; border-color: #d5dde7; background: #f8fafc; }
.input-icon .form-control:focus { background: #fff; border-color: var(--brand-blue); box-shadow: 0 0 0 .2rem rgba(47, 115, 218, .15); }
.pwd-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #64748b; padding: 6px 10px; border-radius: 8px; }
.pwd-toggle:hover { background: #eef2f7; color: #1e293b; }
.caps-warn { color: #b45309; font-size: .78rem; margin-top: .35rem; }
.login-note { display: flex; gap: .5rem; margin-top: 1.5rem; padding: .75rem .9rem; border-radius: 10px; background: #f1f5fb; color: #475569; font-size: .78rem; line-height: 1.45; }
.login-note i { color: var(--brand-blue); }
.login-foot { margin-top: 2rem; font-size: .72rem; color: #94a3b8; text-align: center; }

@media (max-width: 991px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-panel { min-height: 100vh; padding: 2rem 16px; }
}