/* AuditPro — TrustWarden | app.css */
:root {
  --ps-bg:#141414; --ps-panel:#1E1E1E; --ps-surface:#252525;
  --ps-raised:#2C2C2C; --ps-overlay:#333333;
  --ps-border:#3A3A3A; --ps-border-lo:#2A2A2A;
  --ps-text:#DEDEDE; --ps-text-2:#A0A0A0; --ps-text-3:#6A6A6A;
  --ps-blue:#1473E6; --ps-blue-h:#0D66D0;
  --ps-blue-dim:rgba(20,115,230,.15); --ps-blue-glow:rgba(20,115,230,.25);
  --ps-green:#2D9D78; --ps-green-dim:rgba(45,157,120,.15);
  --ps-orange:#E68619; --ps-orange-dim:rgba(230,134,25,.15);
  --ps-red:#E34850; --ps-red-dim:rgba(227,72,80,.15);
  --ps-purple:#7E4CF5;
  --sidebar-w:212px; --topbar-h:48px;
  --r:4px; --r-md:6px;
  --font:'Source Sans 3',sans-serif; --mono:'Source Code Pro',monospace;
  --shadow:0 4px 20px rgba(0,0,0,.5); --shadow-lg:0 8px 40px rgba(0,0,0,.7);
}

/* ── LIGHT THEME ────────────────────────────────────────────── */
[data-theme="light"] {
  --ps-bg:#F0F2F5; --ps-panel:#FFFFFF; --ps-surface:#F8F9FA;
  --ps-raised:#ECEEF1; --ps-overlay:#E2E5E9;
  --ps-border:#D0D4DA; --ps-border-lo:#E2E5E9;
  --ps-text:#1A1A1A; --ps-text-2:#545454; --ps-text-3:#8C8C8C;
  --ps-blue:#1473E6; --ps-blue-h:#0D66D0;
  --ps-blue-dim:rgba(20,115,230,.10); --ps-blue-glow:rgba(20,115,230,.20);
  --ps-green:#1E7D5A; --ps-green-dim:rgba(30,125,90,.10);
  --ps-orange:#C06C00; --ps-orange-dim:rgba(192,108,0,.10);
  --ps-red:#C9252D; --ps-red-dim:rgba(201,37,45,.10);
  --ps-purple:#6433D0;
  --shadow:0 2px 12px rgba(0,0,0,.10); --shadow-lg:0 6px 28px rgba(0,0,0,.15);
}
[data-theme="light"] ::-webkit-scrollbar-thumb { background:#C0C4CC; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:#A8ADB8; }
[data-theme="light"] .badge-gray { background:rgba(0,0,0,.07); color:var(--ps-text-2); }
[data-theme="light"] .cat-card-icon { background:rgba(0,0,0,.05); }
[data-theme="light"] .step-num { background:var(--ps-surface); }
[data-theme="light"] .ctrl-code-lbl { color:#0052CC; background:rgba(20,115,230,.10); }
[data-theme="light"] #ctrl-tooltip { background:#FFFFFF; color:#333; border-color:#D0D4DA; box-shadow:0 4px 20px rgba(0,0,0,.15); }
[data-theme="light"] .alert-info  { color:#0052CC; }
[data-theme="light"] .alert-success { color:#1E7D5A; }
[data-theme="light"] .alert-warning { color:#8A4800; }
[data-theme="light"] .alert-error   { color:#C9252D; }
[data-theme="light"] .stat-icon.c-blue   { color:#0052CC; }
[data-theme="light"] .stat-icon.c-green  { color:#1E7D5A; }
[data-theme="light"] .stat-icon.c-orange { color:#8A4800; }
[data-theme="light"] .stat-icon.c-purple { color:#5A2DB5; }
[data-theme="light"] .badge-blue   { color:#0052CC; }
[data-theme="light"] .badge-green  { color:#1E7D5A; }
[data-theme="light"] .badge-orange { color:#8A4800; }
[data-theme="light"] .badge-red    { color:#C9252D; }
[data-theme="light"] .badge-purple { color:#5A2DB5; }
[data-theme="light"] .finding-ref  { color:#0052CC; }
[data-theme="light"] .cat-code     { color:#0052CC; }
[data-theme="light"] .wiz-header   { background:linear-gradient(135deg,#0D4A9E,#1473E6); }
[data-theme="light"] .modal-overlay { background:rgba(0,0,0,.45); }

/* smooth theme transition */
*, *::before, *::after { transition-property:background-color,border-color,color,box-shadow; transition-duration:.18s; transition-timing-function:ease; box-sizing:border-box; margin:0; padding:0; }
/* override transition for elements that need instant response */
.btn, .nav-item, .tab, .cat-card, tbody tr, .toast { transition-duration:.12s; }
html, body { height:100%; font-family:var(--font); font-size:13px; color:var(--ps-text); background:var(--ps-bg); overflow:hidden; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#444; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#555; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin   { to{transform:rotate(360deg)} }

/* ── AUTH WRAP ──────────────────────────────────────────────── */
#auth-wrap {
  display:flex; align-items:center; justify-content:center;
  height:100vh; background:var(--ps-bg); position:relative;
}
#auth-wrap::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--ps-border-lo) 1px,transparent 1px),
    linear-gradient(90deg,var(--ps-border-lo) 1px,transparent 1px);
  background-size:48px 48px; opacity:.35; pointer-events:none;
}
#auth-wrap::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--ps-blue),transparent);
}
.auth-screen { display:none; width:100%; justify-content:center; }
.auth-screen.active { display:flex; }
.auth-card {
  position:relative; z-index:1; width:400px;
  background:var(--ps-panel); border:1px solid var(--ps-border);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  padding:36px 32px 30px; animation:fadeUp .3s ease;
}
.auth-logo { display:flex; align-items:center; gap:11px; margin-bottom:26px; }
.auth-logo-icon {
  width:34px; height:34px; border-radius:var(--r);
  background:var(--ps-blue); display:flex; align-items:center;
  justify-content:center; color:#fff; flex-shrink:0;
}
.auth-logo-name { font-size:16px; font-weight:700; color:var(--ps-text); }
.auth-logo-sub  { font-size:9px; color:var(--ps-text-3); letter-spacing:.7px; text-transform:uppercase; }
.auth-heading   { font-size:19px; font-weight:700; margin-bottom:5px; }
.auth-sub       { font-size:12.5px; color:var(--ps-text-2); margin-bottom:22px; line-height:1.55; }
.link-btn {
  background:none; border:none; color:var(--ps-blue);
  font-family:var(--font); font-size:12.5px; cursor:pointer;
  padding:0; transition:opacity .15s;
}
.link-btn:hover { opacity:.75; }

/* ── FORM ELEMENTS ──────────────────────────────────────────── */
.fg { display:flex; flex-direction:column; gap:5px; }
.form-label {
  font-size:10px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--ps-text-3);
}
.req { color:var(--ps-red); margin-left:2px; }
.form-hint { font-size:11px; color:var(--ps-text-3); margin-top:2px; }
.input-wrap { position:relative; }
.input-icon {
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  color:var(--ps-text-3); display:flex; align-items:center; pointer-events:none;
}
.ps-input {
  width:100%; padding:8px 10px 8px 32px;
  background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--r); color:var(--ps-text);
  font-size:13px; font-family:var(--font); outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.ps-input::placeholder { color:var(--ps-text-3); }
.ps-input:focus {
  border-color:var(--ps-blue);
  box-shadow:0 0 0 2px var(--ps-blue-glow);
}
.ps-input-plain {
  width:100%; padding:7px 10px;
  background:var(--ps-raised); border:1px solid var(--ps-border);
  border-radius:var(--r); color:var(--ps-text);
  font-size:13px; font-family:var(--font); outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.ps-input-plain:focus { border-color:var(--ps-blue); box-shadow:0 0 0 2px var(--ps-blue-glow); }
.ps-select {
  width:100%; padding:7px 9px;
  background:var(--ps-raised); border:1px solid var(--ps-border);
  border-radius:var(--r); color:var(--ps-text);
  font-size:13px; font-family:var(--font); outline:none;
  transition:border-color .12s;
}
.ps-select:focus { border-color:var(--ps-blue); box-shadow:0 0 0 2px var(--ps-blue-glow); }
.ps-textarea {
  width:100%; padding:8px 10px;
  background:var(--ps-raised); border:1px solid var(--ps-border);
  border-radius:var(--r); color:var(--ps-text);
  font-size:13px; font-family:var(--font); outline:none;
  resize:vertical; min-height:64px; line-height:1.55;
  transition:border-color .12s;
}
.ps-textarea:focus { border-color:var(--ps-blue); box-shadow:0 0 0 2px var(--ps-blue-glow); }
.form-row { display:grid; gap:12px; margin-bottom:12px; }
.form-row.col-1 { grid-template-columns:1fr; }
.form-row.col-2 { grid-template-columns:1fr 1fr; }
.form-row.col-3 { grid-template-columns:1fr 1fr 1fr; }
.span2 { grid-column:1/-1; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 15px; border-radius:var(--r);
  font-size:12.5px; font-weight:600; font-family:var(--font);
  cursor:pointer; border:none;
  transition:background .12s, transform .1s; white-space:nowrap;
}
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-full { width:100%; }
.btn-sm   { padding:5px 11px; font-size:12px; }
.btn-primary   { background:var(--ps-blue);   color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--ps-blue-h); }
.btn-secondary { background:var(--ps-raised); color:var(--ps-text); border:1px solid var(--ps-border); }
.btn-secondary:hover:not(:disabled) { background:var(--ps-overlay); }
.btn-ghost  { background:none; color:var(--ps-blue); padding:5px 8px; }
.btn-ghost:hover { background:var(--ps-blue-dim); }
.btn-danger { background:var(--ps-red-dim); color:var(--ps-red); border:1px solid rgba(227,72,80,.3); }
.btn-danger:hover { background:rgba(227,72,80,.25); }
.btn-icon {
  padding:5px; border-radius:var(--r); background:none; border:none;
  color:var(--ps-text-2); cursor:pointer;
  display:inline-flex; align-items:center;
  transition:background .1s, color .1s;
}
.btn-icon:hover { background:var(--ps-raised); color:var(--ps-text); }

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert {
  display:flex; align-items:flex-start; gap:8px;
  padding:9px 12px; border-radius:var(--r);
  font-size:12.5px; line-height:1.5;
}
.alert-info    { background:var(--ps-blue-dim);   color:#6BAEFF; border:1px solid rgba(20,115,230,.3); }
.alert-success { background:var(--ps-green-dim);  color:#4EC9A0; border:1px solid rgba(45,157,120,.3); }
.alert-warning { background:var(--ps-orange-dim); color:#FFAD33; border:1px solid rgba(230,134,25,.3); }
.alert-error   { background:var(--ps-red-dim);    color:#FF7B82; border:1px solid rgba(227,72,80,.3); }

/* spacing helpers */
.mb-4  { margin-bottom:4px; }  .mb-6  { margin-bottom:6px; }
.mb-10 { margin-bottom:10px; } .mb-14 { margin-bottom:14px; }
.mb-18 { margin-bottom:18px; } .mb-22 { margin-bottom:22px; }

/* ── APP SHELL ──────────────────────────────────────────────── */
#app-shell { display:flex; height:100vh; width:100%; }

/* SIDEBAR */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; background:var(--ps-panel);
  border-right:1px solid var(--ps-border-lo);
  display:flex; flex-direction:column; height:100vh;
  overflow-y:auto; overflow-x:hidden;
}
.sidebar-logo {
  display:flex; align-items:center; gap:9px;
  padding:13px 15px 11px; border-bottom:1px solid var(--ps-border-lo); flex-shrink:0;
}
.logo-mark {
  width:27px; height:27px; border-radius:var(--r);
  background:var(--ps-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-name    { font-size:14px; font-weight:700; color:var(--ps-text); }
.logo-tagline { font-size:9px; color:var(--ps-text-3); letter-spacing:.5px; text-transform:uppercase; }
.nav-section  {
  padding:14px 15px 4px;
  font-size:9px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--ps-text-3);
}
.nav-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 15px; font-size:12.5px; color:var(--ps-text-2);
  cursor:pointer; position:relative;
  transition:background .1s, color .1s;
  border:none; background:none; width:100%;
  text-align:left; font-family:var(--font);
}
.nav-item:hover { background:var(--ps-raised); color:var(--ps-text); }
.nav-item.active { background:var(--ps-blue-dim); color:var(--ps-text); }
.nav-item.active::before {
  content:''; position:absolute; left:0; top:4px; bottom:4px;
  width:2px; background:var(--ps-blue); border-radius:0 2px 2px 0;
}
.nav-icon  { display:flex; align-items:center; flex-shrink:0; color:inherit; }
.nav-badge {
  margin-left:auto; background:var(--ps-blue); color:#fff;
  font-size:9px; font-weight:700; padding:1px 5px; border-radius:10px;
}
.sidebar-bottom { border-top:1px solid var(--ps-border-lo); flex-shrink:0; }
.user-tile {
  display:flex; align-items:center; gap:9px;
  padding:11px 15px; transition:background .1s;
}
.user-tile:hover { background:var(--ps-raised); }
.user-avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--ps-blue),var(--ps-purple));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
}
.user-name { font-size:12.5px; font-weight:600; color:var(--ps-text); }
.user-role { font-size:10px; color:var(--ps-text-3); }

/* TOP BAR */
.app-right {
  flex:1; display:flex; flex-direction:column;
  height:100vh; overflow:hidden; background:var(--ps-bg);
}
.topbar {
  height:var(--topbar-h); flex-shrink:0;
  background:var(--ps-panel); border-bottom:1px solid var(--ps-border-lo);
  display:flex; align-items:center; padding:0 20px; gap:12px;
}
.breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--ps-text-2);
}
.breadcrumb strong { color:var(--ps-text); font-weight:600; }
.breadcrumb-sep   { color:var(--ps-text-3); display:flex; align-items:center; }
.topbar-right     { margin-left:auto; display:flex; align-items:center; gap:8px; }
.topbar-div       { width:1px; height:18px; background:var(--ps-border); margin:0 2px; }
.lang-switch { display:flex; border:1px solid var(--ps-border); border-radius:var(--r); overflow:hidden; }
.lang-btn {
  padding:4px 10px; font-size:11px; font-weight:700;
  background:none; border:none; color:var(--ps-text-2);
  cursor:pointer; font-family:var(--font); letter-spacing:.5px;
  transition:background .1s, color .1s;
}
.lang-btn.active { background:var(--ps-blue); color:#fff; }

/* CONTENT */
.content { flex:1; overflow-y:auto; overflow-x:hidden; padding:22px 22px 40px; }

/* ── CARDS ──────────────────────────────────────────────────── */
.card { background:var(--ps-surface); border:1px solid var(--ps-border-lo); border-radius:var(--r-md); overflow:hidden; }
.card-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--ps-border-lo);
}
.card-title { font-size:13px; font-weight:700; color:var(--ps-text); }
.card-body  { padding:16px; }

/* ── GRID / LAYOUT ──────────────────────────────────────────── */
.grid-4  { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.grid-2  { display:grid; grid-template-columns:1fr 1fr;       gap:14px; }
.grid-32 { display:grid; grid-template-columns:2fr 1fr;        gap:14px; }
.grid-cat{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.page-hdr {
  display:flex; align-items:flex-start;
  justify-content:space-between; margin-bottom:18px;
}
.page-title     { font-size:18px; font-weight:700; color:var(--ps-text); }
.page-sub       { font-size:12px; color:var(--ps-text-2); margin-top:2px; }
.page-hdr-actions { display:flex; gap:8px; align-items:center; }

/* ── STAT CARDS ─────────────────────────────────────────────── */
.stat-card {
  background:var(--ps-surface); border:1px solid var(--ps-border-lo);
  border-radius:var(--r-md); padding:15px 17px;
  position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  border-radius:var(--r-md) var(--r-md) 0 0;
}
.stat-card.c-blue::after   { background:var(--ps-blue); }
.stat-card.c-green::after  { background:var(--ps-green); }
.stat-card.c-orange::after { background:var(--ps-orange); }
.stat-card.c-purple::after { background:var(--ps-purple); }
.stat-icon {
  width:30px; height:30px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.stat-icon.c-blue   { background:var(--ps-blue-dim);            color:#6BAEFF; }
.stat-icon.c-green  { background:var(--ps-green-dim);           color:#4EC9A0; }
.stat-icon.c-orange { background:var(--ps-orange-dim);          color:#FFAD33; }
.stat-icon.c-purple { background:rgba(126,76,245,.15);          color:#B794FF; }
.stat-label {
  font-size:10px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--ps-text-3); margin-bottom:4px;
}
.stat-value { font-size:24px; font-weight:700; color:var(--ps-text); line-height:1; }
.stat-change { font-size:11px; margin-top:5px; color:var(--ps-text-3); }
.stat-change.up   { color:var(--ps-green); }
.stat-change.warn { color:var(--ps-orange); }

/* ── TABLE ──────────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead tr { background:var(--ps-raised); }
th {
  padding:8px 13px; text-align:left;
  font-size:10px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--ps-text-3);
  border-bottom:1px solid var(--ps-border); white-space:nowrap;
}
td {
  padding:9px 13px; border-bottom:1px solid var(--ps-border-lo);
  font-size:12.5px; color:var(--ps-text-2); vertical-align:middle;
}
tbody tr:last-child td  { border-bottom:none; }
tbody tr:hover td { background:var(--ps-raised); color:var(--ps-text); }
.cell-primary   { font-weight:600; color:var(--ps-text); }
.cell-secondary { font-size:11px; color:var(--ps-text-3); margin-top:1px; }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:10px;
  font-size:10.5px; font-weight:700;
}
.badge-blue   { background:var(--ps-blue-dim);            color:#6BAEFF; }
.badge-green  { background:var(--ps-green-dim);           color:#4EC9A0; }
.badge-orange { background:var(--ps-orange-dim);          color:#FFAD33; }
.badge-red    { background:var(--ps-red-dim);             color:#FF7B82; }
.badge-gray   { background:rgba(255,255,255,.06);         color:var(--ps-text-2); }
.badge-purple { background:rgba(126,76,245,.15);          color:#B794FF; }

/* ── PROGRESS ───────────────────────────────────────────────── */
.prog-wrap { display:flex; align-items:center; gap:7px; }
.prog-bar  { flex:1; height:5px; background:var(--ps-raised); border-radius:3px; overflow:hidden; min-width:60px; }
.prog-fill { height:100%; border-radius:3px; background:var(--ps-blue); }
.prog-fill.green  { background:var(--ps-green); }
.prog-fill.orange { background:var(--ps-orange); }
.prog-pct  { font-size:11px; font-weight:600; color:var(--ps-text-2); width:28px; text-align:right; flex-shrink:0; }

/* ── TABS ───────────────────────────────────────────────────── */
.tabs { display:flex; border-bottom:1px solid var(--ps-border); background:var(--ps-surface); /*overflow-x:auto;*/ }
.tabs::-webkit-scrollbar { display:none; }
.tab {
  padding:9px 15px; font-size:12.5px; font-weight:600;
  color:var(--ps-text-3); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .12s; white-space:nowrap; flex-shrink:0;
}
.tab:hover:not(.active) { color:var(--ps-text-2); }
.tab.active { color:var(--ps-blue); border-bottom-color:var(--ps-blue); }

/* ── WIZARD ─────────────────────────────────────────────────── */
.wiz-header {
  background:linear-gradient(135deg,#0A3D7A,#1473E6);
  padding:18px 22px; border-radius:var(--r-md) var(--r-md) 0 0;
}
.wiz-title { font-size:15px; font-weight:700; color:#fff; }
.wiz-desc  { font-size:12px; color:rgba(255,255,255,.7); margin-top:2px; }
.stepper   {
  display:flex; align-items:center;
  background:var(--ps-surface); border-bottom:1px solid var(--ps-border);
  padding:0 18px; overflow-x:auto;
}
.step { display:flex; align-items:center; gap:7px; padding:11px 0; flex-shrink:0; }
.step + .step { margin-left:4px; }
.step + .step::before { content:''; display:block; width:18px; height:1px; background:var(--ps-border); margin-right:4px; }
.step-num {
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
  border:1.5px solid var(--ps-border); color:var(--ps-text-3);
  background:var(--ps-bg); flex-shrink:0;
}
.step.done   .step-num { background:var(--ps-green);  border-color:var(--ps-green);  color:#fff; }
.step.active .step-num { background:var(--ps-blue);   border-color:var(--ps-blue);   color:#fff; }
.step-lbl              { font-size:11px; font-weight:600; color:var(--ps-text-3); }
.step.active .step-lbl { color:var(--ps-text); }
.step.done   .step-lbl { color:var(--ps-text-2); }
.wiz-body   { padding:20px 22px; background:var(--ps-surface); border-radius:0 0 var(--r-md) var(--r-md); }
.wiz-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:16px; margin-top:16px; border-top:1px solid var(--ps-border-lo);
}
.wiz-step-lbl { font-size:11px; color:var(--ps-text-3); }
.divider-lbl {
  display:flex; align-items:center; gap:10px;
  font-size:10px; font-weight:700; color:var(--ps-text-3);
  text-transform:uppercase; letter-spacing:.6px;
  margin:18px 0 13px;
}
.divider-lbl::before, .divider-lbl::after { content:''; flex:1; height:1px; background:var(--ps-border-lo); }

/* ── CATEGORY CARDS ─────────────────────────────────────────── */
.cat-card {
  border:1.5px solid var(--ps-border); border-radius:var(--r-md);
  padding:13px; cursor:pointer;
  transition:border-color .12s, background .12s; background:var(--ps-raised);
}
.cat-card:hover  { border-color:#4B9CF5; background:var(--ps-blue-dim); }
.cat-card.active { border-color:var(--ps-blue); background:var(--ps-blue-dim); }
.cat-card-icon {
  width:28px; height:28px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px; color:var(--ps-text-2); background:rgba(255,255,255,.05);
}
.cat-card.active .cat-card-icon { color:#6BAEFF; background:var(--ps-blue-dim); }
.cat-name  { font-size:12px; font-weight:700; color:var(--ps-text); }
.cat-code  { font-size:10px; font-family:var(--mono); color:var(--ps-blue); font-weight:600; margin-top:1px; }
.cat-desc  { font-size:11px; color:var(--ps-text-2); margin-top:4px; line-height:1.4; }
.cat-sel   { font-size:10px; color:var(--ps-green); font-weight:700; margin-top:6px; display:flex; align-items:center; gap:3px; }

/* ── CONTROLS ───────────────────────────────────────────────── */
.ctrl-row { padding:14px 0; border-bottom:1px solid var(--ps-border-lo); }
.ctrl-row:last-child { border-bottom:none; }
.ctrl-meta { display:flex; align-items:center; gap:9px; margin-bottom:8px; flex-wrap:wrap; }
.ctrl-code-lbl {
  font-size:10px; font-family:var(--mono); font-weight:700;
  color:#6BAEFF; background:var(--ps-blue-dim); padding:2px 6px; border-radius:3px;
}
.ctrl-name-lbl { font-size:13px; font-weight:700; color:var(--ps-text); }
.ctrl-desc-lbl { font-size:12px; color:var(--ps-text-3); margin-bottom:10px; line-height:1.5; }
.ctrl-info-icon {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--ps-blue); cursor:default; flex-shrink:0;
}
#ctrl-tooltip {
  position:fixed; z-index:9999;
  background:#1e1e1e; color:#ccc;
  border:1px solid #3a3a3a; border-radius:6px;
  padding:11px 14px; font-size:11px; line-height:1.6;
  width:340px; max-width:90vw; white-space:normal; text-align:left;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  pointer-events:none; display:none;
}

/* ── FINDINGS ───────────────────────────────────────────────── */
.finding-card {
  background:var(--ps-surface); border:1px solid var(--ps-border-lo);
  border-radius:var(--r-md); display:flex; overflow:hidden; margin-bottom:10px;
}
.finding-sev { width:4px; flex-shrink:0; }
.finding-sev.high   { background:var(--ps-red); }
.finding-sev.medium { background:var(--ps-orange); }
.finding-sev.low    { background:var(--ps-green); }
.finding-body       { flex:1; padding:13px 15px; }
.finding-title-txt  { font-size:13px; font-weight:700; color:var(--ps-text); }
.finding-ref        { font-size:10px; font-family:var(--mono); color:var(--ps-blue); margin-top:2px; font-weight:600; }
.finding-desc-txt   { font-size:12.5px; color:var(--ps-text-2); margin-top:7px; line-height:1.55; }
.finding-meta       { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; align-items:center; }

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.72); z-index:200;
  align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--ps-panel); border:1px solid var(--ps-border);
  border-radius:var(--r-md); min-width:380px; max-width:520px;
  width:90%; padding:22px; box-shadow:var(--shadow-lg);
  animation:fadeUp .22s ease;
}
.modal-title  { font-size:15px; font-weight:700; margin-bottom:4px; }
.modal-sub    { font-size:12px; color:var(--ps-text-2); margin-bottom:18px; line-height:1.5; }
.modal-footer {
  display:flex; justify-content:flex-end; gap:8px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--ps-border-lo);
}

/* ── TOAST ──────────────────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:20px; right:20px; z-index:300;
  display:flex; flex-direction:column; gap:8px;
}
.toast {
  background:var(--ps-panel); border:1px solid var(--ps-border);
  border-radius:var(--r-md); padding:10px 14px;
  font-size:12.5px; color:var(--ps-text); box-shadow:var(--shadow);
  min-width:220px; animation:fadeUp .25s ease;
  display:flex; align-items:center; gap:8px;
}
.toast.success { border-left:3px solid var(--ps-green); }
.toast.error   { border-left:3px solid var(--ps-red); }
.toast.info    { border-left:3px solid var(--ps-blue); }

/* ── MISC ───────────────────────────────────────────────────── */
.loading-state {
  display:flex; align-items:center; gap:10px;
  color:var(--ps-text-3); padding:48px 0; justify-content:center;
}
.spin { animation:spin 1s linear infinite; }
.side-stack { display:flex; flex-direction:column; gap:12px; }
.status-dot { width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:5px; }
.empty-state { text-align:center; padding:48px 20px; color:var(--ps-text-3); }
.empty-state svg { margin:0 auto 12px; display:block; opacity:.3; }

/* ── SCREENSAVER ─────────────────────────────────────────────── */
@keyframes ss-fade-in  { from{opacity:0} to{opacity:1} }
@keyframes ss-pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(.96)} }
@keyframes ss-scan     { 0%{top:0;opacity:1} 100%{top:100%;opacity:0} }
@keyframes ss-dot-blink{ 0%,100%{opacity:1} 50%{opacity:.2} }

#screensaver {
  position:fixed; inset:0; z-index:9000;
  background:#0A0A0F;
  display:flex; align-items:center; justify-content:center;
  animation:ss-fade-in .6s ease;
  cursor:pointer;
}
#ss-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.18;
}
.ss-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:0; user-select:none;
}
.ss-logo-wrap {
  position:relative; width:90px; height:90px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
}
.ss-shield {
  width:90px; height:90px; border-radius:50%;
  background:linear-gradient(135deg,#0A3D7A,#1473E6);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 40px rgba(20,115,230,.4), 0 0 80px rgba(20,115,230,.15);
  animation:ss-pulse 3s ease-in-out infinite;
}
.ss-scan {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(20,115,230,.8),transparent);
  animation:ss-scan 2.5s ease-in-out infinite;
  border-radius:1px;
}
.ss-app {
  font-size:28px; font-weight:800; color:#fff;
  letter-spacing:1px; margin-bottom:4px;
  font-family:'Source Sans 3',sans-serif;
}
.ss-tagline {
  font-size:10px; font-weight:700; color:rgba(255,255,255,.4);
  letter-spacing:3px; text-transform:uppercase;
  margin-bottom:28px;
  font-family:'Source Sans 3',sans-serif;
}
.ss-status {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.6);
  letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:14px;
  font-family:'Source Sans 3',sans-serif;
}
.ss-dot {
  width:6px; height:6px; border-radius:50%;
  background:#1473E6;
  animation:ss-dot-blink 1.8s ease-in-out infinite;
  box-shadow:0 0 6px #1473E6;
}
.ss-hint {
  font-size:11px; color:rgba(255,255,255,.2);
  letter-spacing:.5px;
  font-family:'Source Sans 3',sans-serif;
}