* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#08111E; --surface:#0D1B2E; --panel:#112240; --border:#1E3A5F;
  --accent:#00C8FF; --accent2:#0090C8; --green:#00D4A0; --orange:#FF8C42;
  --red:#FF4B6E; --yellow:#FFD166; --text:#E8F4FD; --muted:#7090AC; --white:#FFFFFF;
}
body { font-family:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif; background:#04090F; color:var(--text); min-height:100vh; font-feature-settings:'cv02','cv03','cv04','cv11'; }
.stat-card .sc-value,.pc-stat-n,.sr-num,.rfc-score,.mc-num,.report-score { font-variant-numeric:tabular-nums; }

/* ── SHELL ── */
.app { display:flex; min-height:100vh; }

/* ── SIDEBAR ── */
.sidebar {
  width:220px; min-height:100vh; background:var(--surface);
  border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0;
}
.logo-area {
  padding:20px 18px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:11px;
}
.nav { padding:12px 0; flex:1; }
.nav-label { font-size:9px; text-transform:uppercase; letter-spacing:1.5px; color:#1E3A5F; padding:8px 18px 3px; font-weight:700; }
.nav-item {
  display:flex; align-items:center; gap:9px; padding:8px 18px;
  cursor:pointer; font-size:12.5px; color:var(--muted);
  border-left:3px solid transparent; transition:all 0.15s;
}
.nav-item:hover { color:var(--text); background:rgba(0,200,255,0.04); }
.nav-item.active { color:var(--accent); background:rgba(0,200,255,0.07); border-left-color:var(--accent); }
.nav-item svg { width:15px; height:15px; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:9px; font-weight:700; padding:1px 6px; border-radius:10px; }
.nav-badge.ok { background:var(--green); color:#000; }
.sidebar-footer {
  padding:14px 18px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:9px;
}
.avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,#0090C8,#00D4A0);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#000; flex-shrink:0;
}
/* ── MAIN ── */
.main { flex:1; background:var(--bg); overflow-x:hidden; }
.topbar {
  height:52px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 24px; gap:14px; background:var(--surface);
}
.topbar-title { font-size:15px; font-weight:600; color:var(--white); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.topbar-sub   { font-size:11px; color:var(--muted); }
.topbar-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.btn {
  padding:7px 16px; border-radius:7px; font-size:12px; font-weight:600;
  cursor:pointer; border:none; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px;
}
.btn-primary { background:var(--accent); color:#000; }
.btn-primary:hover { background:#33D4FF; }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--muted); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.content { padding:24px; }
.screen { display:none; }
.screen.active { display:block; }

/* ── SHARED COMPONENTS ── */
.card { background:var(--panel); border:1px solid var(--border); border-radius:11px; overflow:hidden; }
.card-header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:9px;
}
.card-header h3 { font-size:12.5px; font-weight:600; color:var(--white); }
.ch-sub { font-size:10px; color:var(--muted); margin-left:auto; }
.card-body { padding:18px; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.stat-card { background:var(--panel); border:1px solid var(--border); border-radius:11px; padding:18px; }
.sc-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.sc-value { font-size:28px; font-weight:700; color:var(--white); line-height:1; }
.sc-sub   { font-size:11px; color:var(--muted); margin-top:5px; }
.risk-pill { padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; flex-shrink:0; }
.risk-critical { background:rgba(255,75,110,0.15); color:var(--red); border:1px solid rgba(255,75,110,0.3); }
.risk-high     { background:rgba(255,140,66,0.15); color:var(--orange); border:1px solid rgba(255,140,66,0.3); }
.risk-medium   { background:rgba(255,209,102,0.15); color:var(--yellow); border:1px solid rgba(255,209,102,0.3); }
.risk-low      { background:rgba(0,212,160,0.12); color:var(--green); border:1px solid rgba(0,212,160,0.3); }
.fprate {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(0,212,160,0.1); border:1px solid rgba(0,212,160,0.25);
  border-radius:6px; padding:4px 9px; font-size:10px; font-weight:700; color:var(--green);
}
.section-hdr {
  font-size:10px; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--muted); font-weight:600; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.section-hdr::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── DASHBOARD specifics ── */
.scan-row {
  display:flex; align-items:center; gap:10px; padding:11px 18px;
  border-bottom:1px solid rgba(30,58,95,0.5); cursor:pointer; transition:background 0.15s;
}
.scan-row:hover { background:rgba(0,200,255,0.04); }
.scan-row:last-child { border-bottom:none; }
.risk-gauge-wrap { display:flex; flex-direction:column; align-items:center; padding:20px 18px 14px; }
.gauge-stats { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.gs-item { text-align:center; }
.gs-num { font-size:20px; font-weight:700; }
.gs-lbl { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; margin-top:1px; }
.activity-item { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid rgba(30,58,95,0.4); }
.activity-item:last-child { border-bottom:none; padding-bottom:0; }
.act-dot { width:7px; height:7px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.act-text { font-size:11.5px; color:var(--text); line-height:1.5; }
.act-time { font-size:10px; color:var(--muted); margin-top:1px; }

/* ── SCAN form ── */
.scan-hero { max-width:660px; margin:0 auto; text-align:center; padding:16px 0 28px; }
.scan-hero h2 { font-size:24px; font-weight:700; color:var(--white); margin-bottom:6px; }
.scan-hero p  { font-size:13px; color:var(--muted); }
.step { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; max-width:150px; }
.step-num { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.step-num.done { background:var(--green); color:#000; }
.step-num.active { background:var(--accent); color:#000; }
.step-num.todo { background:var(--border); color:var(--muted); }
.step-label { font-size:10px; color:var(--muted); text-align:center; }
.step-label.active { color:var(--accent); font-weight:600; }
.step-connector { flex:1; height:2px; background:var(--border); max-width:60px; margin-bottom:18px; }
.step-connector.done { background:var(--green); }
.form-section { margin-bottom:24px; }
.form-section:last-child { margin-bottom:0; }
.form-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:11px 14px; color:var(--text); font-size:13px; outline:none; transition:border 0.2s; }
.form-input::placeholder { color:#2A4060; }
.form-input:focus { border-color:var(--accent); }
.or-div { display:flex; align-items:center; gap:10px; margin:10px 0; font-size:10px; color:var(--muted); }
.or-div::before,.or-div::after { content:''; flex:1; height:1px; background:var(--border); }
.upload-zone { border:2px dashed var(--border); border-radius:9px; padding:24px; text-align:center; cursor:pointer; transition:all 0.2s; }
.upload-zone:hover { border-color:var(--accent); background:rgba(0,200,255,0.04); }
.upload-zone p { font-size:12px; color:var(--muted); margin-top:6px; }
.upload-zone span { color:var(--accent); }
.scan-type { background:var(--bg); border:2px solid var(--border); border-radius:9px; padding:14px; cursor:pointer; transition:all 0.2s; }
.scan-type:hover { border-color:var(--accent2); }
.scan-type.selected { border-color:var(--accent); background:rgba(0,200,255,0.06); }
.scan-type .st-icon { font-size:20px; margin-bottom:6px; }
.scan-type .st-name { font-size:12px; font-weight:600; color:var(--text); margin-bottom:3px; }
.scan-type .st-desc { font-size:10px; color:var(--muted); line-height:1.4; }
.st-check { display:none; float:right; width:16px; height:16px; background:var(--accent); border-radius:50%; align-items:center; justify-content:center; }
.scan-type.selected .st-check { display:flex; }
.scan-footer { display:flex; align-items:center; justify-content:space-between; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }

/* ── RESULTS ── */
.score-ring { width:90px; height:90px; position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.score-ring svg { position:absolute; top:0; left:0; transform:rotate(-90deg); }
.sr-num { font-size:24px; font-weight:800; color:var(--red); z-index:1; }
.tag { padding:3px 9px; border-radius:5px; font-size:10px; font-weight:600; background:rgba(0,200,255,0.1); color:var(--accent); border:1px solid rgba(0,200,255,0.2); }
.mc-num { font-size:24px; font-weight:700; color:var(--white); }
.findings-table { width:100%; border-collapse:collapse; }
.findings-table th { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:9px 14px; text-align:left; border-bottom:1px solid var(--border); font-weight:600; }
.findings-table td { padding:11px 14px; font-size:12px; border-bottom:1px solid rgba(30,58,95,0.4); vertical-align:middle; }
.findings-table tr:hover td { background:rgba(0,200,255,0.03); }
.findings-table tr:last-child td { border-bottom:none; }
.cve-id { font-family:'Courier New',monospace; font-size:11px; color:var(--accent); font-weight:600; }

/* ── REPORTS LIST ── */
.report-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid rgba(30,58,95,0.4); cursor:pointer; transition:background 0.15s; }
.report-row:hover { background:rgba(0,200,255,0.04); }
.report-row:last-child { border-bottom:none; }
.report-score { font-size:20px; font-weight:800; min-width:44px; text-align:center; }

/* ── CVE DATABASE ── */
.prop-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(0,200,255,0.08); border:1px solid rgba(0,200,255,0.2); border-radius:4px; padding:2px 7px; font-size:9px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px; }

/* ── COMPONENT MAP ── */
.comp-tree-item { display:flex; align-items:flex-start; gap:8px; padding:8px 0; font-size:12px; }
.comp-tree-item .ci-dot { width:8px; height:8px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.comp-tree-child { margin-left:28px; border-left:1px solid var(--border); padding-left:14px; }
.node-graph { background:var(--panel); border:1px solid var(--border); border-radius:11px; padding:18px; min-height:380px; display:flex; align-items:center; justify-content:center; }

/* ── RISK SCORE ── */
.risk-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.risk-factor-card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px; }
.rfc-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
.rfc-score { font-size:32px; font-weight:800; line-height:1; margin-bottom:8px; }
.rfc-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:8px; }
.rfc-fill { height:100%; border-radius:2px; }
.rfc-desc { font-size:11px; color:var(--muted); line-height:1.5; }

/* ── INTEGRATIONS ── */
.integrations-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.integration-card { background:var(--panel); border:1px solid var(--border); border-radius:11px; padding:20px; transition:border 0.2s; }
.integration-card:hover { border-color:var(--accent2); cursor:pointer; }
.int-logo { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:rgba(112,144,172,0.07); border:1px solid var(--border); }
.int-logo svg { width:24px; height:24px; }
.int-logo.int-github  { background:rgba(233,236,240,0.06); color:#E8F4FD; }
.int-logo.int-jira    { background:rgba(38,132,255,0.1); color:#2684FF; border-color:rgba(38,132,255,0.25); }
.int-logo.int-slack   { background:rgba(236,68,168,0.08); color:#ECB22E; border-color:rgba(236,178,46,0.2); }
.int-logo.int-gitlab  { background:rgba(252,109,38,0.1); color:#FC6D26; border-color:rgba(252,109,38,0.25); }
.int-logo.int-splunk  { background:rgba(0,212,160,0.1); color:#00D4A0; border-color:rgba(0,212,160,0.25); }
.int-logo.int-cloud   { background:rgba(255,153,0,0.1); color:#FF9900; border-color:rgba(255,153,0,0.25); }
.int-name { font-size:14px; font-weight:700; color:var(--white); margin-bottom:3px; }
.int-desc { font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:14px; }
.int-status { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:600; }
.status-dot { width:6px; height:6px; border-radius:50%; }
.connected { color:var(--green); } .connected .status-dot { background:var(--green); }
.not-connected { color:var(--muted); } .not-connected .status-dot { background:var(--border); }
.api-key-row { display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:11px 14px; margin-bottom:8px; }
.api-key-name { font-size:12px; font-weight:600; color:var(--text); min-width:140px; }
.api-key-val { font-family:'Courier New',monospace; font-size:11px; color:var(--muted); flex:1; }
.api-key-actions { display:flex; gap:6px; }

/* ── RULES & POLICY ── */
.rule-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid rgba(30,58,95,0.4); }
.rule-row:last-child { border-bottom:none; }
.rule-info { flex:1; }
.rule-name { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.rule-desc { font-size:11px; color:var(--muted); }
.toggle { width:38px; height:20px; border-radius:10px; cursor:pointer; position:relative; flex-shrink:0; transition:background 0.2s; }
.toggle.on  { background:var(--accent); }
.toggle.off { background:var(--border); }
.toggle::after { content:''; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:3px; transition:left 0.2s; }
.toggle.on::after  { left:21px; }
.toggle.off::after { left:3px; }
.threshold-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid rgba(30,58,95,0.4); }
.threshold-row:last-child { border-bottom:none; }
.threshold-label { flex:1; font-size:13px; color:var(--text); }
.threshold-input { width:70px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:6px 10px; color:var(--text); font-size:13px; text-align:center; outline:none; }
.threshold-input:focus { border-color:var(--accent); }

/* CVE Database is an internal backend service — hidden from UI navigation */
#screen-cvedb { display:none !important; }

/* ── PEN TEST ── */
.pt-view { display:none; }
.pt-view.active { display:block; }

/* target input bar */
.pt-input { flex:1; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:11px 16px; color:var(--text); font-size:13px; font-family:'Courier New',monospace; outline:none; transition:border 0.2s; }
.pt-input:focus { border-color:var(--accent); }
.pt-input::placeholder { color:#2A4060; }
.btn-attack { background:var(--red); color:#fff; padding:10px 22px; border-radius:8px; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:7px; }
.btn-attack:hover { background:#ff2255; }

/* stage pipeline */
.pt-pipeline { display:flex; align-items:center; gap:0; margin-bottom:24px; overflow-x:auto; padding-bottom:4px; }
.pt-stage { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; min-width:100px; }
.pt-stage-num { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--border); color:var(--muted); transition:all 0.4s; }
.pt-stage-num.done { background:var(--green); color:#000; }
.pt-stage-num.running { background:var(--accent); color:#000; animation:pulse-ring 1.2s infinite; }
.pt-stage-num.failed { background:var(--red); color:#fff; }
.pt-stage-lbl { font-size:9px; color:var(--muted); text-align:center; text-transform:uppercase; letter-spacing:0.8px; transition:color 0.3s; }
.pt-stage-lbl.active { color:var(--accent); font-weight:700; }
.pt-stage-lbl.done { color:var(--green); }
.pt-connector { flex:1; height:2px; background:var(--border); transition:background 0.4s; min-width:20px; margin-bottom:18px; }
.pt-connector.done { background:var(--green); }
@keyframes pulse-ring { 0%,100%{box-shadow:0 0 0 0 rgba(0,200,255,0.4)} 50%{box-shadow:0 0 0 6px rgba(0,200,255,0)} }

/* stage output cards */
.pt-card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin-bottom:12px; }
.pt-card-title { font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.pt-card pre { font-family:'Courier New',monospace; font-size:11px; color:var(--text); line-height:1.6; white-space:pre-wrap; margin:0; }

/* terminal block */
.pt-terminal { background:#070D14; border:1px solid #0D2540; border-radius:8px; padding:14px 16px; font-family:'Courier New',monospace; font-size:11.5px; color:#10b981; line-height:1.7; white-space:pre-wrap; overflow-x:auto; margin-top:8px; }
.pt-terminal .t-cmd { color:#93c5fd; font-weight:700; }
.pt-terminal .t-label { color:#facc15; font-weight:700; }
.pt-terminal .t-success { color:#10b981; }
.pt-terminal .t-muted { color:#4A7090; }

/* success / note banners */
.pt-success-banner { background:rgba(0,212,160,0.08); border:1px solid rgba(0,212,160,0.25); border-radius:9px; padding:14px 18px; font-size:13px; color:var(--green); font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.pt-note-banner { background:rgba(0,200,255,0.06); border:1px solid rgba(0,200,255,0.2); border-radius:9px; padding:12px 18px; font-size:12px; color:var(--accent); margin-bottom:12px; }

/* summary report sections */
.pt-section-title { font-size:13px; font-weight:700; color:var(--white); border-bottom:1px solid var(--border); padding-bottom:8px; margin:22px 0 12px; }
.pt-info-card { background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:16px 18px; margin-bottom:14px; }
.pt-info-card li { list-style:none; padding:4px 0; font-size:12px; color:var(--muted); border-bottom:1px solid rgba(30,58,95,0.4); display:flex; gap:10px; }
.pt-info-card li:last-child { border-bottom:none; }
.pt-info-lbl { font-weight:600; color:var(--text); min-width:130px; }
.pt-info-val { font-family:'Courier New',monospace; font-size:11px; color:var(--accent); }
.pt-vuln-table { width:100%; border-collapse:collapse; }
.pt-vuln-table th { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:9px 14px; text-align:left; border-bottom:1px solid var(--border); font-weight:600; }
.pt-vuln-table td { padding:11px 14px; font-size:12px; border-bottom:1px solid rgba(30,58,95,0.4); vertical-align:middle; }
.pt-vuln-table tr:hover td { background:rgba(0,200,255,0.03); }
.pt-vuln-table tr:last-child td { border-bottom:none; }
.pt-stage-card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin-bottom:12px; }
.pt-stage-card h3 { font-size:13px; font-weight:700; color:var(--white); margin-bottom:8px; }
.pt-stage-card p { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:8px; }
.pt-stage-card li { font-size:12px; color:var(--muted); padding:2px 0; }
.pt-finding-box { background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:6px; padding:14px 18px; margin-bottom:10px; }
.pt-impact-box  { background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--red);   border-radius:6px; padding:14px 18px; margin-bottom:10px; }
.pt-remed-box   { background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--green); border-radius:6px; padding:14px 18px; margin-bottom:10px; }
.pt-finding-box h3,.pt-impact-box h3,.pt-remed-box h3 { font-size:13px; font-weight:700; color:var(--white); margin-bottom:8px; }
.pt-finding-box p,.pt-impact-box p { font-size:12px; color:var(--muted); line-height:1.6; }
.pt-remed-box li { font-size:12px; color:var(--muted); padding:2px 0; }

/* loading spinner dot */
.pt-loading { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:10px 0; }
.pt-loading-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pt-bounce 0.8s infinite alternate; }
.pt-loading-dot:nth-child(2){animation-delay:0.2s}.pt-loading-dot:nth-child(3){animation-delay:0.4s}
@keyframes pt-bounce { from{opacity:0.3;transform:scale(0.7)} to{opacity:1;transform:scale(1)} }

/* misc */
.two-col { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }
.empty-state { text-align:center; padding:48px 24px; }
.empty-state .es-icon { font-size:40px; margin-bottom:12px; opacity:0.4; }
.empty-state .es-text { font-size:13px; color:var(--muted); }

/* ── GLOBAL HEADER (above sidebar + main) ─────────────────────── */
.global-header {
  height:52px; background:#06101C; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 18px 0 16px;
  position:sticky; top:0; z-index:100;
}
.gh-left { display:flex; align-items:center; gap:10px; min-width:220px; flex-shrink:0; transition:min-width 0.2s; }
.app.sidebar-collapsed .gh-left { min-width:56px; }
.gh-hamburger {
  width:32px; height:32px; border-radius:7px; border:1px solid var(--border); background:transparent;
  color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; flex-shrink:0;
}
.gh-hamburger:hover { border-color:var(--accent); color:var(--accent); }
.gh-brand { display:flex; align-items:center; gap:9px; }
.app.sidebar-collapsed .gh-brand-text { display:none; }
.gh-brand-name { font-size:14px; font-weight:700; color:var(--white); letter-spacing:0.2px; }
.gh-brand-badge { font-size:8.5px; background:rgba(0,200,255,0.15); color:var(--accent); border:1px solid rgba(0,200,255,0.3); border-radius:4px; padding:1px 5px; font-weight:700; letter-spacing:0.5px; vertical-align:middle; margin-left:5px; }
.gh-search {
  flex:1; max-width:440px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:7px;
  padding:7px 12px; color:var(--muted); font-size:12px; cursor:text; transition:border 0.15s;
}
.gh-search:hover, .gh-search:focus-within { border-color:var(--accent); }
.gh-search input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:12px; }
.gh-search input::placeholder { color:#2A4060; }
.gh-search kbd { font-family:'Courier New',monospace; font-size:9.5px; color:var(--muted); border:1px solid var(--border); border-radius:3px; padding:1px 5px; background:rgba(8,17,30,0.6); }
.gh-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
.gh-icon-btn {
  position:relative; width:34px; height:34px; border-radius:7px; border:1px solid transparent; background:transparent;
  color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s;
}
.gh-icon-btn:hover { background:rgba(0,200,255,0.06); color:var(--accent); border-color:var(--border); }
.gh-icon-btn svg { width:15px; height:15px; }
.gh-notif-dot {
  /* Issue #53 — hidden by default. Only made visible when the drawer
     actually has unread content (shell.js toggles display:block when
     notif-count-badge > 0). Previously this was always visible, which
     created a permanent mismatch with the empty drawer. */
  position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%;
  background:var(--red); border:2px solid #06101C;
  display:none;
}
.gh-user {
  display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:7px;
  cursor:pointer; transition:background 0.15s; border:1px solid transparent;
}
.gh-user:hover { background:rgba(0,200,255,0.05); border-color:var(--border); }
.gh-user .avatar { width:26px; height:26px; font-size:10px; }
.gh-user-name { font-size:12px; font-weight:600; color:var(--text); line-height:1.2; }
.gh-user-role { font-size:9.5px; color:var(--muted); line-height:1.2; margin-top:1px; }
.gh-user-caret { color:var(--muted); font-size:9px; margin-left:4px; }

/* Sidebar collapse */
.app.sidebar-collapsed .sidebar { width:56px; }
.app.sidebar-collapsed .sidebar .logo-area,
.app.sidebar-collapsed .sidebar .sidebar-footer { justify-content:center; padding-left:0; padding-right:0; }
.app.sidebar-collapsed .sidebar .logo-area > div:last-child,
.app.sidebar-collapsed .sidebar .sidebar-footer > div:last-child,
.app.sidebar-collapsed .sidebar .nav-label,
.app.sidebar-collapsed .sidebar .nav-badge { display:none; }
.app.sidebar-collapsed .sidebar .nav-item {
  justify-content:center; padding:10px 0; position:relative;
}
.app.sidebar-collapsed .sidebar .nav-item span.nav-text { display:none; }
.app.sidebar-collapsed .sidebar .nav-item::after {
  content: attr(data-label); position:absolute; left:62px; top:50%; transform:translateY(-50%);
  background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:11px;
  padding:4px 9px; border-radius:5px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity 0.15s; z-index:50;
}
.app.sidebar-collapsed .sidebar .nav-item:hover::after { opacity:1; }

/* ── MOBILE RESPONSIVE SHELL (issue #27) ──────────────────────────
   On narrow viewports the sidebar defaults to collapsed (see shell.js
   applySidebarDefault). When the user manually expands it, overlay the
   main content rather than squeezing it to ~150px. Also hide the global
   search on tiny screens so the header fits. */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; top: 52px; left: 0; bottom: 0;
    z-index: 90; min-height: calc(100vh - 52px);
    transition: transform 0.2s ease, width 0.2s ease;
  }
  /* Collapsed = peek rail. */
  .app.sidebar-collapsed .sidebar { width: 56px; }
  /* Expanded on mobile = slide-in overlay covering the content. */
  .app:not(.sidebar-collapsed) .sidebar {
    width: 220px;
    box-shadow: 0 0 24px rgba(0,0,0,0.5);
  }
  /* Reserve only the narrow rail gutter for main — sidebar overlay
     covers the rest when expanded, so content never gets squished. */
  .app .main { margin-left: 56px; min-width: 0; }
  .gh-search { display: none; }
  .gh-left { min-width: 0; }
  .gh-brand-text { display: none; }
}

/* ── NARROW MOBILE (≤768px, issue #137) ───────────────────────────
   At 375px the peek-rail approach still reserves 56px and can look
   cramped. Hide the sidebar completely when collapsed so the main
   content fills the full viewport width. The overlay still slides in
   when the hamburger is tapped (not collapsed). */
@media (max-width: 768px) {
  .app.sidebar-collapsed .sidebar { display: none; }
  .app:not(.sidebar-collapsed) .sidebar {
    display: flex;
    width: 220px;
    box-shadow: 0 0 24px rgba(0,0,0,0.5);
  }
  .app .main { margin-left: 0; }
}

/* ── SCA project card grid (previously MISSING styles) ──────────── */
.sca-proj-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
@media (max-width:1280px) { .sca-proj-grid { grid-template-columns:repeat(2,1fr); } }
.sca-proj-card {
  background:var(--panel); border:1px solid var(--border); border-radius:11px;
  padding:18px 20px; cursor:pointer; transition:border 0.2s, background 0.15s, transform 0.15s;
}
.sca-proj-card:hover { border-color:var(--accent2); background:rgba(0,200,255,0.03); transform:translateY(-1px); }
.new-sca-proj {
  background:transparent; border:2px dashed var(--border); border-radius:11px;
  padding:18px 20px; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; min-height:180px; transition:border 0.2s, background 0.15s;
}
.new-sca-proj:hover { border-color:var(--accent); background:rgba(0,200,255,0.03); }

/* ── Detail page header (replaces flat title+subtitle) ─────────── */
.detail-header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:14px 24px 0;
}
.dh-breadcrumb {
  display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); margin-bottom:10px;
}
.dh-breadcrumb a { color:var(--muted); text-decoration:none; cursor:pointer; transition:color 0.15s; }
.dh-breadcrumb a:hover { color:var(--accent); }
.dh-breadcrumb .sep { color:var(--border); font-size:10px; }
.dh-breadcrumb .current { color:var(--text); font-weight:600; }
.dh-row {
  display:flex; align-items:flex-start; gap:18px; padding-bottom:14px;
}
.dh-row h1 { font-size:18px; font-weight:700; color:var(--white); line-height:1.25; margin-bottom:6px; }
.dh-chip {
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; padding:2.5px 9px;
  border-radius:5px; background:rgba(112,144,172,0.08); border:1px solid var(--border); color:var(--muted);
}
.dh-chip.mono { font-family:'Courier New',monospace; color:var(--accent); background:rgba(0,200,255,0.06); border-color:rgba(0,200,255,0.2); }
.dh-chip.ok   { color:var(--green); background:rgba(0,212,160,0.08); border-color:rgba(0,212,160,0.2); }
.dh-actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-shrink:0; }
.dh-actions .secondary-actions { display:flex; gap:6px; }

/* Grouped tag sections on result page */
.rh-tag-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.rh-tag-group-label { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; font-weight:700; margin-right:2px; }
.tag.tag-component { background:rgba(0,200,255,0.1); color:var(--accent); border-color:rgba(0,200,255,0.25); font-family:'Courier New',monospace; font-size:10px; }
.tag.tag-metric    { background:rgba(0,212,160,0.08); color:var(--green);  border-color:rgba(0,212,160,0.25); font-weight:700; }
.tag.tag-flag      { background:rgba(255,140,66,0.08); color:var(--orange); border-color:rgba(255,140,66,0.25); font-weight:700; }

/* ── DASHBOARD / PRODUCT INTRO ─────────────────────────────────── */
.dash-hero {
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  margin-bottom:22px; padding-bottom:2px;
}
.dash-hero-title { font-size:22px; font-weight:700; color:var(--white); line-height:1.25; margin-bottom:6px; letter-spacing:-0.2px; }
.dash-hero-sub   { font-size:13px; color:var(--muted); line-height:1.55; max-width:620px; }

.product-intro-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; }
.product-card {
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:22px 24px 24px; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.product-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.product-card-sca::before { background:linear-gradient(90deg,#00C8FF,#0090C8); }
.product-card-pt::before  { background:linear-gradient(90deg,#FF8C42,#FF4B6E); }
.product-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.25); }
.product-card-sca:hover { border-color:rgba(0,200,255,0.4); }
.product-card-pt:hover  { border-color:rgba(255,140,66,0.4); }

.pc-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.pc-icon-wrap {
  width:46px; height:46px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.pc-icon-wrap svg { width:24px; height:24px; }
.pc-icon-sca { background:rgba(0,200,255,0.1); color:var(--accent); border:1px solid rgba(0,200,255,0.25); }
.pc-icon-pt  { background:rgba(255,140,66,0.1); color:var(--orange); border:1px solid rgba(255,140,66,0.25); }
.pc-title { font-size:18px; font-weight:700; color:var(--white); line-height:1.2; margin-bottom:3px; letter-spacing:-0.2px; }
.pc-subtitle { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.9px; font-weight:600; }

.pc-body { display:flex; flex-direction:column; flex:1; }
.pc-desc { font-size:13px; color:var(--text); line-height:1.6; margin-bottom:16px; opacity:0.9; }

.pc-features { list-style:none; margin:0 0 18px 0; padding:0; }
.pc-features li {
  font-size:12.5px; color:var(--text); line-height:1.5;
  display:flex; align-items:flex-start; gap:9px;
  padding:5px 0;
}
.pc-check { width:13px; height:13px; flex-shrink:0; margin-top:3px; }
.product-card-sca .pc-check { color:var(--accent); }
.product-card-pt  .pc-check { color:var(--orange); }
.pc-info {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  background:rgba(112,144,172,0.15); color:var(--muted);
  font-size:9px; margin-left:4px; cursor:help; font-style:normal; font-weight:700;
}
.pc-info:hover { background:rgba(0,200,255,0.2); color:var(--accent); }

.pc-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  background:rgba(8,17,30,0.55); border:1px solid var(--border);
  border-radius:8px; padding:13px 14px; margin-bottom:18px;
}
.pc-stats > div { text-align:center; }
.pc-stat-n { font-size:20px; font-weight:800; color:var(--white); line-height:1.1; letter-spacing:-0.3px; }
.pc-stat-l { font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.7px; margin-top:4px; font-weight:600; }

.pc-cta {
  width:100%; border:none; border-radius:8px;
  padding:12px 18px; font-size:13px; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background 0.15s; margin-top:auto; letter-spacing:0.1px;
}
.pc-cta svg { width:15px; height:15px; transition:transform 0.15s; }
.pc-cta:hover svg { transform:translateX(3px); }
.pc-cta-sca { background:var(--accent); color:#000; }
.pc-cta-sca:hover { background:#33D4FF; }
.pc-cta-pt  { background:var(--orange); color:#000; }
.pc-cta-pt:hover  { background:#FFA35C; }

.dash-context { display:grid; grid-template-columns:360px 1fr; gap:18px; }

@media (max-width:1180px) {
  .product-intro-row { grid-template-columns:1fr; }
  .dash-context { grid-template-columns:1fr; }
}

/* per-page extraction — each page renders a single screen div */
.screen-page { display:block; }

/* ── SCA-NEW / PROJECT CONFIG panel (design-doc screen-sca-new scoped styles) ── */
.cfg-section { background:var(--panel); border:1px solid var(--border); border-radius:11px; margin-bottom:14px; overflow:hidden; }
.cfg-section-hdr {
  display:flex; align-items:center; gap:9px; padding:13px 18px;
  cursor:pointer; user-select:none; border-bottom:1px solid var(--border);
  font-size:12px; font-weight:700; color:var(--white);
}
.cfg-section-hdr .cfg-icon { font-size:15px; }
.cfg-section-hdr .cfg-toggle { margin-left:auto; font-size:10px; color:var(--muted); transition:transform 0.2s; }
.cfg-section-hdr.collapsed .cfg-toggle { transform:rotate(-90deg); }
.cfg-section-body { padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cfg-section-body.single-col { grid-template-columns:1fr; }
.cfg-field { display:flex; flex-direction:column; gap:6px; }
.cfg-field.full { grid-column:1/-1; }
.cfg-label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; display:flex; align-items:center; gap:6px; }
.cfg-label .cfg-hint { font-weight:400; text-transform:none; letter-spacing:0; color:var(--border); font-size:9px; background:rgba(112,144,172,0.12); padding:1px 6px; border-radius:4px; }
.cfg-input { background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:9px 12px; color:var(--text); font-size:12px; outline:none; transition:border 0.2s; width:100%; }
.cfg-input:focus { border-color:var(--accent); }
.cfg-input::placeholder { color:#2A4060; }
.cfg-select { background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:9px 12px; color:var(--text); font-size:12px; outline:none; cursor:pointer; width:100%; }
.cfg-select:focus { border-color:var(--accent); }
.cfg-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(30,58,95,0.35); }
.cfg-toggle-row:last-child { border-bottom:none; padding-bottom:0; }
.cfg-toggle-info { flex:1; }
.cfg-toggle-name { font-size:12px; color:var(--text); font-weight:500; }
.cfg-toggle-desc { font-size:10px; color:var(--muted); margin-top:1px; }
.cfg-chip-group { display:flex; flex-wrap:wrap; gap:7px; }
.cfg-chip { padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid var(--border); color:var(--muted); background:var(--bg); transition:all 0.15s; user-select:none; }
.cfg-chip:hover { border-color:var(--accent2); color:var(--text); }
.cfg-chip.active { border-color:var(--accent); color:var(--accent); background:rgba(0,200,255,0.08); }
.cfg-range-wrap { display:flex; align-items:center; gap:10px; }
.cfg-range { flex:1; accent-color:var(--accent); }
.cfg-range-val { font-size:12px; font-weight:700; color:var(--accent); min-width:30px; text-align:right; }
.new-scan-grid { display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
.scan-summary-card { background:var(--panel); border:1px solid var(--border); border-radius:11px; padding:18px; position:sticky; top:20px; }
.ss-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid rgba(30,58,95,0.35); font-size:11px; }
.ss-row:last-child { border-bottom:none; }
.ss-key { color:var(--muted); }
.ss-val { color:var(--text); font-weight:600; font-family:monospace; font-size:10px; }
.upload-zone-sm { border:2px dashed var(--border); border-radius:9px; padding:18px; text-align:center; cursor:pointer; transition:all 0.2s; }
.upload-zone-sm:hover { border-color:var(--accent); background:rgba(0,200,255,0.04); }
.upload-zone-sm p { font-size:11px; color:var(--muted); margin-top:4px; }

/* ── PT-HOME project cards (design-doc screen-pt-home scoped styles) ── */
.proj-card { background:var(--panel); border:1px solid var(--border); border-radius:11px; padding:18px 20px; cursor:pointer; transition:border 0.2s,background 0.15s; }
.proj-card:hover { border-color:var(--accent2); background:rgba(0,200,255,0.03); }
.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.proj-name { font-size:14px; font-weight:700; color:var(--white); margin-bottom:4px; }
.proj-url  { font-size:11px; color:var(--accent); font-family:monospace; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proj-meta { font-size:10px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.proj-footer { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid rgba(30,58,95,0.5); }
.proj-tasks { font-size:10px; color:var(--muted); }
.new-proj-card { background:transparent; border:2px dashed var(--border); border-radius:11px; padding:18px 20px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:160px; transition:border 0.2s; }
.new-proj-card:hover { border-color:var(--accent); background:rgba(0,200,255,0.03); }

/* ── SCA RESULTS (design-doc screen-sca scoped styles) ── */
.sca-score-ring { position:relative; flex-shrink:0; }
.sca-score-ring .sr-num { font-size:22px; font-weight:800; color:#FF8C42; }
.sca-badge-sca {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,140,66,0.12); border:1px solid rgba(255,140,66,0.35);
  color:#FF8C42; border-radius:5px; padding:3px 9px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.8px;
}
.sca-stat-strip {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px;
}
.sca-stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; text-align: center; position: relative; overflow: hidden;
}
.sca-stat::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:10px 10px 0 0;
}
.sca-stat.total::before  { background: rgba(255,140,66,0.6); }
.sca-stat.crit::before   { background: #FF4B6E; }
.sca-stat.high::before   { background: #FF8C42; }
.sca-stat.medium::before { background: #FFD166; }
.sca-stat-num { font-size: 28px; font-weight: 800; line-height:1; margin-bottom: 4px; }
.sca-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; }
.sca-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:18px; }
.sca-tab {
  padding: 9px 20px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all 0.15s; user-select:none;
}
.sca-tab:hover { color: var(--text); }
.sca-tab.active { color: #FF8C42; border-bottom-color: #FF8C42; }
.sca-tab-pane { display:none; }
.sca-tab-pane.active { display:block; }
.sca-filter-row {
  display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap;
}
.sca-filter-btn {
  padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.sca-filter-btn:hover, .sca-filter-btn.on { background: rgba(255,140,66,0.12); border-color: rgba(255,140,66,0.4); color: #FF8C42; }
.sca-filter-btn.crit-on { background:rgba(255,75,110,0.12); border-color:rgba(255,75,110,0.4); color:var(--red); }
.sca-filter-btn.high-on { background:rgba(255,140,66,0.12); border-color:rgba(255,140,66,0.4); color:var(--orange); }
.sca-filter-btn.med-on  { background:rgba(255,209,102,0.12); border-color:rgba(255,209,102,0.4); color:var(--yellow); }
.eco-badge {
  display:inline-block; padding:2px 7px; border-radius:4px; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px; font-family:monospace;
}
.eco-pypi   { background:rgba(0,200,255,0.1); color:#00C8FF; border:1px solid rgba(0,200,255,0.25); }
.eco-prop   { background:rgba(255,140,66,0.1); color:#FF8C42; border:1px solid rgba(255,140,66,0.25); }
.cve-expand-row td { padding: 0 !important; }
.cve-expand-body {
  background: rgba(8,17,30,0.7); border-top: 1px solid var(--border);
  padding: 14px 18px; font-size: 11px; line-height: 1.7;
  display: none;
}
.cve-expand-body.open { display: block; }
.cve-expand-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.cve-detail-lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 3px; }
.cve-detail-val { color: var(--text); font-family: monospace; font-size: 11px; }
.cve-desc-text { color: var(--muted); font-size: 11px; line-height:1.6; margin-top:10px; border-top:1px solid rgba(30,58,95,0.4); padding-top:10px; }
.poc-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,75,110,0.12); border:1px solid rgba(255,75,110,0.3);
  color:var(--red); border-radius:4px; padding:2px 8px; font-size:9px; font-weight:700;
  cursor:pointer; text-transform:uppercase;
}
.dep-table { width:100%; border-collapse:collapse; font-size:11px; }
.dep-table thead tr { background: rgba(255,140,66,0.06); }
.dep-table th { padding:9px 12px; text-align:left; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; border-bottom:1px solid var(--border); font-weight:600; }
.dep-table td { padding:8px 12px; border-bottom:1px solid rgba(30,58,95,0.3); vertical-align:middle; }
.dep-table tbody tr:hover { background:rgba(255,140,66,0.04); }
.dep-type-direct     { background:rgba(0,212,160,0.1);  color:var(--green);  border:1px solid rgba(0,212,160,0.25); border-radius:4px; padding:2px 7px; font-size:9px; font-weight:700; }
.dep-type-transitive { background:rgba(112,144,172,0.1); color:var(--muted);  border:1px solid rgba(112,144,172,0.25); border-radius:4px; padding:2px 7px; font-size:9px; font-weight:700; }
.sca-two-col { display:grid; grid-template-columns:1fr 340px; gap:14px; }
.risk-bar-wrap { flex:1; height:6px; background:rgba(30,58,95,0.5); border-radius:3px; overflow:hidden; }
.risk-bar-fill { height:100%; border-radius:3px; }
.expand-toggle { cursor:pointer; color:var(--muted); font-size:13px; user-select:none; transition:transform 0.15s; display:inline-block; }
.expand-toggle.open { transform: rotate(90deg); color:#FF8C42; }
.input-error { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(255,75,110,0.2); }

/* === Item 7 — utility classes extracted from inline styles in sca_results.html === */

/* Generic text colour helpers (token-driven) */
.u-color-muted        { color: var(--muted); }
.u-color-text         { color: var(--text); }
.u-color-red          { color: var(--red); }
.u-color-orange       { color: var(--orange); }
.u-color-yellow       { color: var(--yellow); }
.u-color-green        { color: var(--green); }
.u-color-accent       { color: var(--accent); }
.u-color-orange-hex   { color: #FF8C42; }
.u-color-muted-soft   { color: rgba(112,144,172,0.7); }
.u-color-muted-soft2  { color: rgba(112,144,172,0.6); }

/* Text-weight helpers */
.u-fw-400 { font-weight: 400; }
.u-fw-500 { font-weight: 500; }
.u-fw-700 { font-weight: 700; }
.u-fw-800 { font-weight: 800; }

/* Font-size helpers (page-specific micro-scale) */
.u-fs-9   { font-size: 9px; }
.u-fs-10  { font-size: 10px; }
.u-fs-11  { font-size: 11px; }
.u-fs-12  { font-size: 12px; }
.u-fs-13  { font-size: 13px; }
.u-fs-16  { font-size: 16px; }
.u-fs-24  { font-size: 24px; }

.u-mono   { font-family: monospace; }

/* Score ring (header) */
.sca-score-ring-wrap   { position: relative; flex-shrink: 0; margin-top: 2px; }
.sca-score-ring-num    { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; font-weight: 800; color: #FF8C42; }

/* Header row */
.sca-header-h-version  { color: var(--muted); font-weight: 500; }
.sca-header-h-flex     { flex: 1; min-width: 0; }
.sca-badge-sca-inline  { margin-left: 8px; vertical-align: 2px; }
.sca-stale-chip-inline { background: rgba(255,209,102,0.12); color: var(--yellow); border-color: rgba(255,209,102,0.3); }
.rh-tag-group--mt5     { margin-top: 5px; }
.tag-component-muted   { color: var(--muted); background: rgba(112,144,172,0.06); border-color: var(--border); }

/* Top action buttons */
.btn-disabled-coming-soon { opacity: 0.45; cursor: not-allowed; pointer-events: none; filter: grayscale(1); }
.btn-orange-gradient      { background: linear-gradient(135deg, #FF8C42, #FF6B1A); }

/* Progress panel */
.sca-progress-panel-root  { margin-bottom: 14px; }
.sca-progress-panel-hdr   { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; user-select: none; }
.sca-progress-hdr-left    { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--muted); }
.sca-progress-sub         { color: var(--muted); font-weight: 400; }
.sca-progress-hdr-right   { display: flex; align-items: center; gap: 10px; }
.sca-progress-abort-btn   { font-size: 10px; padding: 3px 9px; border-color: var(--red); color: var(--red); }
.sca-progress-toggle-icon { font-size: 11px; color: var(--muted); }
.sca-progress-panel-body  { padding: 16px; background: var(--panel); border: 1px solid var(--border); border-top: none; border-radius: 0 0 11px 11px; }
.sca-progress-log-wrap    { background: rgba(4,9,15,0.9); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin-bottom: 14px; }
.sca-progress-log-hdr     { padding: 9px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.sca-progress-log-label   { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.8px; }
.sca-progress-elapsed     { margin-left: auto; font-size: 10px; color: var(--muted); }
.sca-progress-log-toggle-btn { font-size: 10px; padding: 2px 8px; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); cursor: pointer; margin-left: 6px; }
.sca-progress-log-body    { padding: 12px 14px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--green); line-height: 1.6; min-height: 240px; max-height: 480px; overflow-y: auto; }

/* Result config panel */
.sca-result-config-wrap     { margin-bottom: 14px; }
.sca-result-config-hdr      { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; user-select: none; }
.sca-result-config-hdr-left { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--muted); }
.sca-result-config-caption  { color: rgba(112,144,172,0.7); font-weight: 400; margin-left: 4px; }
.sca-result-stale-badge     { margin-left: 6px; font-size: 9px; background: rgba(255,209,102,0.15); color: var(--yellow); border: 1px solid rgba(255,209,102,0.35); border-radius: 4px; padding: 1px 7px; font-weight: 700; }
.sca-result-config-toggle   { font-size: 11px; color: var(--muted); }
.sca-result-config-body     { padding: 14px 16px; background: rgba(8,17,30,0.6); border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; }
.sca-result-config-grid     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; font-size: 11px; }
.sca-result-config-foot     { margin-top: 10px; font-size: 10px; color: rgba(112,144,172,0.6); border-top: 1px solid rgba(30,58,95,0.4); padding-top: 8px; }

/* Tab badges */
.sca-tab-svg-icon       { margin-right: 5px; vertical-align: -1px; }
.sca-tab-emoji-icon     { margin-right: 5px; }
.sca-tab-count-vuln     { background: rgba(255,75,110,0.2); color: var(--red); border-radius: 10px; padding: 1px 7px; font-size: 9px; margin-left: 5px; }
.sca-tab-count-dep      { background: rgba(112,144,172,0.15); color: var(--muted); border-radius: 10px; padding: 1px 7px; font-size: 9px; margin-left: 5px; }
.sca-tab-disabled-style { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Stat strip — colour overrides on number elements */
.sca-stat-num--total { color: #FF8C42; }
.sca-stat-num--crit  { color: var(--red); }
.sca-stat-num--high  { color: var(--orange); }
.sca-stat-num--med   { color: var(--yellow); }

/* Filter row */
.sca-filter-label   { font-size: 11px; color: var(--muted); margin-right: 4px; }
.sca-filter-spacer  { flex: 1; }
.sca-filter-caption { font-size: 10px; color: var(--muted); }

/* Vuln table */
.sca-card-flush      { padding: 0; overflow: hidden; }
.sca-table-full      { width: 100%; }
.sca-vuln-thead-row  { background: rgba(255,140,66,0.05); }
.sca-vuln-th-toggle  { width: 22px; }
.sca-row-clickable   { cursor: pointer; }
.sca-row-prop        { cursor: pointer; background: rgba(255,140,66,0.03); }
.sca-cell-center     { text-align: center; }
.sca-cell-component  { font-family: monospace; font-size: 11px; }
.sca-cell-cvss-red    { font-weight: 700; color: var(--red); }
.sca-cell-cvss-orange { font-weight: 700; color: var(--orange); }
.sca-cell-cvss-yellow { font-weight: 700; color: var(--yellow); }
.sca-cell-cvss-green  { font-weight: 700; color: var(--green); }
.sca-cell-fix-red    { font-size: 10px; color: var(--red); }
.sca-cell-fix-orange { font-size: 10px; color: var(--orange); }
.sca-cell-fix-green  { font-size: 10px; color: var(--green); }
.sca-cell-fix-muted  { font-size: 10px; color: var(--muted); }
.sca-cell-poc-muted  { font-size: 10px; color: var(--muted); }
.sca-detail-val--red    { color: var(--red); }
.sca-detail-val--orange { color: var(--orange); }
.sca-detail-val--green  { color: var(--green); }
.sca-detail-val--muted  { color: var(--muted); }

/* Pagination row */
.sca-pagination-row     { padding: 10px 16px; font-size: 10px; color: var(--muted); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.sca-pagination-caption { color: var(--orange); }
.sca-link-orange        { color: var(--orange); cursor: pointer; text-decoration: underline; }
.sca-link-underline     { cursor: pointer; text-decoration: underline; }

/* Dep tab */
.sca-card-bordered-bottom { border-bottom: 1px solid var(--border); }
.sca-dep-foot             { padding: 10px 16px; font-size: 10px; color: var(--muted); border-top: 1px solid var(--border); display: flex; justify-content: space-between; }
.sca-col-stack            { display: flex; flex-direction: column; gap: 14px; }
.sca-col-stack--gap9      { display: flex; flex-direction: column; gap: 9px; }
.sca-dep-stat-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.sca-dep-stat-card-green  { text-align: center; background: var(--bg); border-radius: 8px; padding: 12px; border: 1px solid rgba(0,212,160,0.15); }
.sca-dep-stat-card-muted  { text-align: center; background: var(--bg); border-radius: 8px; padding: 12px; border: 1px solid rgba(112,144,172,0.15); }
.sca-dep-stat-num-green   { font-size: 24px; font-weight: 800; color: var(--green); }
.sca-dep-stat-num-muted   { font-size: 24px; font-weight: 800; color: var(--muted); }
.sca-dep-stat-lbl         { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; margin-top: 3px; }
.sca-dep-stat-list        { font-size: 11px; color: var(--muted); line-height: 2; border-top: 1px solid rgba(30,58,95,0.4); padding-top: 12px; }
.sca-dep-stat-row         { display: flex; justify-content: space-between; }
.sca-manifest-card        { background: var(--bg); border-radius: 7px; padding: 10px 12px; border: 1px solid rgba(0,200,255,0.12); }
.sca-manifest-name        { font-family: monospace; font-size: 11px; color: var(--accent); margin-bottom: 4px; }
.sca-manifest-sub         { font-size: 10px; color: var(--muted); }

/* Risk breakdown tab */
.sca-grid-2col           { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sca-card-body-pt12      { padding-top: 12px; }
.sca-severity-distrib    { display: flex; align-items: center; gap: 20px; padding: 16px; }
.sca-sev-legend          { flex: 1; font-size: 11px; line-height: 2.2; }
.sca-sev-legend-row      { display: flex; justify-content: space-between; align-items: center; }
.sca-sev-legend-label    { display: flex; align-items: center; gap: 6px; }
.sca-sev-dot             { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sca-sev-dot--red        { background: var(--red); }
.sca-sev-dot--orange     { background: var(--orange); }
.sca-sev-dot--yellow     { background: var(--yellow); }
.sca-sev-dot--border     { background: var(--border); }
.sca-remed-row           { display: flex; justify-content: space-between; font-size: 11px; padding: 7px 0; border-bottom: 1px solid rgba(30,58,95,0.3); }
.sca-remed-row--last     { display: flex; justify-content: space-between; font-size: 11px; padding: 7px 0; }
.sca-fix-pr-btn          { width: 100%; margin-top: 12px; background: linear-gradient(135deg, #FF8C42, #FF6B1A); font-size: 11px; }

/* Architecture pane */
.sca-arch-empty-hint   { text-align: center; color: var(--muted); padding: 40px 10px; font-size: 11px; }
.sca-arch-load-more-wrap { padding: 0 16px 14px; }
.sca-arch-schema-host    { margin-top: 10px; }

/* ──────────────────────────────────────────────────────────────────────
 * Architecture_rule-based tab — visual restyle to mirror the
 * llmsc.wj2ai.com `potential.html` "Architecture Map" panel. Scoped
 * strictly to #sca-pane-arch-v0 so the LLM tab (#sca-pane-arch-llm)
 * keeps its current look.
 *
 * Reference checklist (from potential.html lines 187-251):
 *  - arch-container 1px var(--border) border, 12px radius, #0d1117 bg
 *  - graph-pane / details-pane 60/40 split with 1px divider
 *  - details-pane uses --panel bg; sticky header with --bg-soft
 *  - dep-cards 8px radius, hover slides + indigo primary border, ›
 *    chevron on hover; no-trace cards dimmed and not-allowed
 *  - dep-name monospace 13px bold; dep-ver pill rgba(255,255,255,.1)
 *  - zoom-controls bottom-left 32px tiles, hover -> indigo
 *  - load-more dashed muted -> indigo on hover
 *  - mermaid theme tokens: subgraph #0d1117/#30363d, sub-node
 *    #1f2937/#374151 (set by buildMermaid in sca-arch-v0.js)
 * ────────────────────────────────────────────────────────────────────── */
#sca-pane-arch-v0 { --arch-v0-primary: #6366f1; --arch-v0-bg: #0d1117; --arch-v0-bg-soft: #13151f; --arch-v0-border: #2a2d42; --arch-v0-muted: #9ca3c9; }
#sca-pane-arch-v0 .arch-container {
  height: calc(100vh - 360px); min-height: 520px; max-height: 780px;
  border: 1px solid var(--arch-v0-border); border-radius: 12px;
  background: var(--arch-v0-bg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 32px rgba(0,0,0,0.35);
}
#sca-pane-arch-v0 .graph-pane {
  flex: 6; background: var(--arch-v0-bg);
  border-right: 1px solid var(--arch-v0-border);
  background-image:
    radial-gradient(circle at 25% 25%, rgba(99,102,241,0.05) 0, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(217,70,239,0.04) 0, transparent 45%);
}
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg { max-width: 100%; height: auto; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4)); }
/* Subgraph (layer) typography — bold, slight letter-spacing for the
 * "Layer Name" feel of the reference. Mermaid emits .cluster-label for
 * subgraph titles. */
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .cluster-label .nodeLabel,
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .cluster-label foreignObject div,
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .cluster text {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 13px !important;
  fill: #e6e8f5 !important;
  color: #e6e8f5 !important;
}
/* Component sub-node label */
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .node .nodeLabel,
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .node foreignObject div {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace !important;
  font-size: 11px !important;
  fill: #e6e8f5 !important;
  color: #e6e8f5 !important;
}
/* Edge label badges */
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .edgeLabel {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
}
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .edgeLabel rect,
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .edgeLabel .label-container {
  fill: rgba(19,21,31,0.92) !important;
  stroke: var(--arch-v0-border) !important;
  rx: 4; ry: 4;
}
/* Edge paths: subtle indigo glow */
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .flowchart-link,
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .edgePath path {
  stroke: #4b5273 !important; stroke-width: 1.5 !important;
}
/* Component sub-node hover glow */
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .node[id] { transition: filter 0.15s; cursor: pointer; }
#sca-pane-arch-v0 #sca-arch-v0-mermaid-output svg .node[id]:hover { filter: drop-shadow(0 0 6px rgba(99,102,241,0.55)); }

/* Details pane chrome */
#sca-pane-arch-v0 .details-pane {
  flex: 4; background: #1a1d2e; min-width: 320px;
  border-left: 1px solid var(--arch-v0-border);
}
#sca-pane-arch-v0 .arch-details-header {
  padding: 18px 20px; background: var(--arch-v0-bg-soft);
  border-bottom: 1px solid var(--arch-v0-border);
}
#sca-pane-arch-v0 .arch-details-header h3 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.2px; color: #e6e8f5;
  display: flex; align-items: center; gap: 8px;
}
#sca-pane-arch-v0 .arch-details-header h3::before {
  content: ''; display: inline-block; width: 4px; height: 16px;
  background: linear-gradient(180deg, var(--arch-v0-primary), #8b5cf6);
  border-radius: 2px;
}
#sca-pane-arch-v0 .arch-details-header .sub { font-size: 12px; color: var(--arch-v0-muted); margin-top: 6px; }
#sca-pane-arch-v0 .arch-details-body { padding: 18px 20px; }

/* Dep cards — restyled to match reference */
#sca-pane-arch-v0 .arch-details-body .dep-card {
  border: 1px solid var(--arch-v0-border); border-radius: 8px;
  margin-bottom: 12px; padding: 14px 16px;
  background: rgba(0,0,0,0.15);
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
#sca-pane-arch-v0 .arch-details-body .dep-card.has-trace {
  background: rgba(255,255,255,0.03); cursor: pointer;
}
#sca-pane-arch-v0 .arch-details-body .dep-card.has-trace:hover {
  background: rgba(99,102,241,0.08);
  border-color: var(--arch-v0-primary);
  transform: translateX(4px);
}
#sca-pane-arch-v0 .arch-details-body .dep-card.has-trace::after {
  content: '›'; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); font-size: 18px; color: var(--arch-v0-muted);
  opacity: 0; transition: opacity 0.18s;
}
#sca-pane-arch-v0 .arch-details-body .dep-card.has-trace:hover::after { opacity: 1; color: var(--arch-v0-primary); }
#sca-pane-arch-v0 .arch-details-body .dep-card.no-trace {
  background: rgba(0,0,0,0.25); border-color: transparent; opacity: 0.65;
}
#sca-pane-arch-v0 .arch-details-body .dep-card .dep-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 13px; color: #e6e8f5;
}
#sca-pane-arch-v0 .arch-details-body .dep-card .dep-ver {
  color: var(--arch-v0-muted); font-size: 11px;
  background: rgba(255,255,255,0.08);
  padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace;
}
#sca-pane-arch-v0 .arch-details-body .dep-card .dep-meta {
  font-size: 11px; color: #a8acc4; margin-top: 6px;
}
#sca-pane-arch-v0 .arch-details-body .dep-card .dep-header { margin-bottom: 8px; }

/* Zoom controls — indigo accent on hover */
#sca-pane-arch-v0 .zoom-controls { bottom: 18px; left: 18px; gap: 6px; }
#sca-pane-arch-v0 .zoom-btn {
  width: 32px; height: 32px;
  background: #1a1d2e; border: 1px solid var(--arch-v0-border);
  color: #e6e8f5; border-radius: 6px;
  font-size: 15px; transition: all 0.15s;
}
#sca-pane-arch-v0 .zoom-btn:hover {
  background: var(--arch-v0-primary); border-color: var(--arch-v0-primary);
  color: white; transform: translateY(-1px);
}

/* Load-more button */
#sca-pane-arch-v0 .arch-load-more-btn {
  background: var(--arch-v0-bg-soft);
  border: 1px dashed var(--arch-v0-muted);
  color: var(--arch-v0-muted);
  padding: 10px; font-size: 12px; border-radius: 8px;
  transition: all 0.15s;
}
#sca-pane-arch-v0 .arch-load-more-btn:hover {
  border-color: var(--arch-v0-primary); color: var(--arch-v0-primary);
  background: rgba(99,102,241,0.06);
}

/* Empty / hint states inherit the indigo palette */
#sca-pane-arch-v0 .sca-arch-empty-hint { color: var(--arch-v0-muted); font-size: 12px; }
#sca-pane-arch-v0 .arch-empty-state { color: var(--arch-v0-muted); font-size: 13px; padding: 40px 24px; }
#sca-pane-arch-v0 .arch-empty-state.error { color: #ef4444; }

/* Legend strip under the graph — subtle, helps users decode the
 * stroke-color convention emitted by buildMermaid (user=blue,
 * llm=red, orchestration=amber, default=grey). Rendered by
 * sca-arch-v0.js as a static DOM peer of the zoom controls. */
#sca-pane-arch-v0 .arch-v0-legend {
  position: absolute; bottom: 18px; right: 18px; z-index: 3;
  display: flex; gap: 10px; padding: 8px 12px;
  background: rgba(19,21,31,0.85); backdrop-filter: blur(6px);
  border: 1px solid var(--arch-v0-border); border-radius: 8px;
  font-size: 10px; color: var(--arch-v0-muted);
  font-family: 'Inter', system-ui, sans-serif;
}
#sca-pane-arch-v0 .arch-v0-legend .item { display: inline-flex; align-items: center; gap: 5px; }
#sca-pane-arch-v0 .arch-v0-legend .swatch {
  width: 10px; height: 10px; border-radius: 2px;
  border: 1.5px solid currentColor; background: var(--arch-v0-bg);
}
#sca-pane-arch-v0 .arch-v0-legend .item.user    { color: #3b82f6; }
#sca-pane-arch-v0 .arch-v0-legend .item.llm     { color: #ff5555; }
#sca-pane-arch-v0 .arch-v0-legend .item.orch    { color: #d29922; }
#sca-pane-arch-v0 .arch-v0-legend .item.default { color: #6e7681; }

/* Trace modal */
.sca-trace-dep-version { font-weight: 400; color: var(--muted); font-size: 12px; }