.chartRow{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.chartBox{ flex:1 1 520px; max-width: 640px; background:#0b1520; border:1px solid #233041; border-radius:12px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.chartTitle{ font-weight:600; margin:4px 0 8px 0; }
.legend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.legend .item{ display:flex; align-items:center; gap:6px; font-size:12px; background:#0f172a; padding:4px 8px; border-radius:10px; }
.legend .sw{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* App Info Card */
.appInfoCard {
  background: var(--card);
  padding: 18px 20px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.appInfoTop { display: flex; gap: 20px; align-items: flex-start; }
.appInfoIcon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg);
}
.appInfoIconPlaceholder {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.appInfoBody { flex: 1; min-width: 0; }
.appInfoName { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.appInfoHostname { font-size: 12.5px; margin-bottom: 4px; }
.appInfoHostname .appInfoLabel { color: var(--muted); }
.appInfoDesc { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.appInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}
.appInfoCol {
  min-width: 0;
  background: color-mix(in srgb, var(--panel), black 6%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.appInfoColTitle {
  margin-bottom: 10px;
}
.appInfoColTitle .appInfoBadge {
  font-size: 13px;
}
.appInfoRows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.appInfoRow {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  flex-wrap: wrap;
}
.appInfoLabel { color: var(--muted); white-space: nowrap; }
.appInfoVal { font-weight: 600; word-break: break-word; overflow-wrap: anywhere; }
.appInfoStore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel), black 8%);
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
.appInfoStore:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.appInfoBadge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.appInfoBadge a {
  color: inherit;
  text-decoration: none;
}
.appInfoBadge .badgeAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  opacity: .9;
}
.appInfoBadge .badgeAction:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.appInfoBadge.android { background: var(--green-bg); color: var(--green); }
.appInfoBadge.ios     { background: var(--blue-bg);  color: var(--blue);  }
.appInfoBadge.off     { background: var(--gray-bg);  color: var(--muted); }

@media (max-width: 1100px) {
  .appInfoGrid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .appInfoCard {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 14px;
  }
  .appInfoIcon,
  .appInfoIconPlaceholder {
    width: 56px;
    height: 56px;
  }
}


/* Show only on mobile */
.only-mobile { display:inline-flex !important; }
@media (min-width:768px){ .only-mobile { display:none !important; } }

/* File list link color normalization */
#fileList a { color: var(--muted) !important; text-decoration: none; }
#fileList a:hover { color: var(--text) !important; text-decoration: underline; }

/* =============================
  App Styles — Cleaned & Fixed
  - Syntax errors fixed (all braces closed)
  - Duplicates consolidated
  - Modern CSS preserved (custom props, gap, color-mix, inset)
  - Light/Dark theming kept
  ============================= */

/* Prevent white flash: keep dark backdrop while app boots */
html.preload,
html.preload body { background:#0d0d12 !important; }

#appLoader {
 position: fixed;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #0d0d12;
 z-index: 2147483647;
 transition: opacity .25s ease;
}
#appLoader .spinner {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 border: 3px solid rgba(255,255,255,0.18);
 border-top-color: #ffffff;
 animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* =============================
  Theme tokens
  ============================= */
:root {
 --bg:#0d0d12;
 --card:#16161e;
 --text:#e8e8f0;
 --muted:#8888aa;
 --border:rgba(0, 229, 212, 0.14);
 --green:#00e5a0;   --green-bg:rgba(0, 229, 160, 0.11);
 --yg:#ffb700;      --yg-bg:rgba(255, 183, 0, 1);
 --blue:#00e5d4;    --blue-hover:#00c4b8;
 --blue-bg:rgba(0, 229, 212, 0.11);
 --red:#ff4d6d;     --red-bg:rgba(255, 77, 109, 0.13);
 --gray:#8888aa;    --gray-bg:rgba(136, 136, 170, 0.15);

 --panel: var(--card);
 --accent: var(--blue);
 --accent-hover: var(--blue-hover);
 --accent-contrast: #0d0d12;
 --ok: var(--green);
 --ok-bg: var(--green-bg);
 --warn: var(--yg);
 --warn-bg: var(--yg-bg);
 --danger: var(--red);
 --danger-bg: var(--red-bg);
 --pill: var(--gray-bg);
 --pill-text: var(--text);

 --page-max: 1600px;
}


/* =============================
  Base
  ============================= */
* { box-sizing: border-box; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
}
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 16px; padding-top: 10px; padding-bottom: 10px }

/* Toolbar */
.toolbar { padding: 20px 0 8px; }
.toolbar h1 { margin: 0; font-size: 40px; }
.toolbar .sub { margin: 6px 0 14px; color: var(--muted); }
.toolbar .bar {
 display: flex;
 gap: 10px;
 align-items: center;
 background: var(--panel);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 10px;
 width: 100%;
}
.toolbar input {
 flex: 1;
 min-width: 240px;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: 10px;
 background: var(--panel);
 color: var(--text);
}
.toolbar .ghost {
 background: transparent;
 border: 1px solid var(--border);
 color: var(--text);
 border-radius: 10px;
 padding: 8px 12px;
 cursor: pointer;
}
.toolbar .primary {
 background: var(--accent);
 border: 0;
 color: #0b1220;
 font-weight: 700;
 border-radius: 10px;
 padding: 8px 12px;
 cursor: pointer;
}

/* Layout — modDetail (content) dictates height; aside (modules list) matches it via JS, modList scrolls. */
.layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding-bottom: 20px; align-items: start; }
.layout > aside { display: flex; flex-direction: column; min-height: 0; align-self: start; }

/* Sidebar */
aside { background: var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; }
aside h3 { margin: 0 0 8px; }
#modList { display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex:1; min-height:0; scrollbar-width: thin; scrollbar-color: rgba(0,229,212,.35) transparent; }
#modList::-webkit-scrollbar { width: 5px; }
#modList::-webkit-scrollbar-track { background: transparent; }
#modList::-webkit-scrollbar-thumb { background: rgba(0,229,212,.35); border-radius: 999px; }
#modList::-webkit-scrollbar-thumb:hover { background: rgba(0,229,212,.65); }

/* Module buttons */
.modBtn {
 all: unset;
 display: block;
 padding: 8px 10px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: color-mix(in srgb, var(--panel), black 10%);
 color: var(--text);
 cursor: pointer;
}
/* Selected module highlight (dark+light aware) */
.modBtn.active {
 background: color-mix(in srgb, var(--accent), white 75%);
 border-color: color-mix(in srgb, var(--accent), black 20%);
 font-weight: 700;
 color: #0b1220;
}
.modBtn.active {
 background: color-mix(in srgb, var(--accent), black 75%);
 border-color: color-mix(in srgb, var(--accent), black 30%);
 color: #fff;
}
/* Main/entry module — subtle accent outline so it stays identifiable even when another is active */
.modBtn.main {
 border-color: color-mix(in srgb, var(--accent), transparent 40%);
 box-shadow: inset 2px 0 0 0 var(--accent);
}
.modBtn.main.active {
 box-shadow: none;
}

/* Panels */
.panel { background: var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; }
.grid2 { display:grid; grid-template-columns:1fr; gap:8px; }
.title h2 { margin:0; }

/* Key/Value table */
.kv { width:100%; border-collapse:collapse; }
.kv th,
.kv td { border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; }
.kv th { width:220px; color: color-mix(in srgb, var(--text), white 10%); background: color-mix(in srgb, var(--panel), black 10%); }

/* Pills */
.pill { display:inline-flex; align-items:center; justify-content:center; min-width:22px; padding:0 6px; height:22px; border-radius:999px; border:1px solid transparent; background:color-mix(in srgb, var(--accent), black 35%); color:#fff; font-weight:600; }
.bad { color: var(--danger); }
.warn{ color: var(--warn); }
.ok { color: var(--ok); }

/* Sections (collapsible) */
.section { border:1px solid var(--border); border-radius:10px; margin-top:10px; overflow:hidden; }
.section .head { display:flex; align-items:center; justify-content:flex-start; padding:10px; background: color-mix(in srgb, var(--panel), black 10%); cursor:pointer; }
.section .head::before { content:'▸'; margin-right:8px; }
.section.open .head::before { content:'▾'; }
.section .body { display:none; padding:10px; }
.section.open .body { display:block; }
/* Non-collapsible sections */
.section.no-collapse .head { cursor: default !important; }
.section.no-collapse .head::before { content:'' !important; }

/* Text helpers */
.url { word-break: break-word; overflow-wrap:anywhere; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Rows & buttons */
.urlRow { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.btns { display:flex; gap:6px; }
.btn {
 font-weight:600;
 border-radius:8px;
 padding:6px 10px;
 cursor:pointer;
 text-decoration:none;
 display:inline-block;
 background: color-mix(in srgb, var(--panel), black 8%);
 color: var(--text);
 border: 1px solid var(--border);
 transition: background .15s ease, border-color .15s ease;
}
.btn:hover {
 background: color-mix(in srgb, var(--accent), black 55%);
 border-color: color-mix(in srgb, var(--accent), transparent 50%);
}
.btn.sm { font-size:12px; padding:4px 8px; }
.btn.ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
.list { margin:0; padding-left:18px; }
.scroll { overflow:auto; }
code { background: color-mix(in srgb, var(--panel), black 15%); border:1px solid var(--border); border-radius:6px; padding:2px 6px; color:#7ee8d7; }

/* Server header */
.svGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.svCard { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:4px 8px; align-items:center; background: color-mix(in srgb, var(--panel), black 6%); border:1px solid var(--border); border-radius:10px; padding:12px; }
.svIcon { grid-row:1/3; font-size:20px; }
.svTitle { font-size:12px; color:var(--muted); }
.svMain { font-weight:700; }
.svSub { font-size:12px; color:var(--muted); }

/* Mobile items */
.mobItem { display:flex; align-items:center; justify-content:flex-start; gap:12px; margin:6px 0; padding:6px 8px; background: color-mix(in srgb, var(--panel), black 6%); border:1px solid var(--border); border-radius:8px; }
.mobName { font-weight:700; }
.mobText { display:flex; flex-direction:column; gap:4px; min-width:0; }
.mobDesc { font-size:12px; color:var(--muted); line-height:1.45; word-break:break-word; overflow-wrap:anywhere; }
.mobBadge { display:inline-block; border:1px solid var(--border); border-radius:999px; padding:2px 8px; margin-right:6px; background: color-mix(in srgb, var(--panel), black 10%); width: 42; display: flex; align-items: center; justify-content: center; }
.mobBadge.ok { border-color:transparent; background:var(--accent); color:#0b1220; }

/* Generic text */
.muted { color: var(--muted); }
.row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.subhead { font-weight:700; margin:6px 0; }
.chip { display:inline-block; margin:2px 4px 2px 0; }

/* Action cards */
.aCard { border:1px solid var(--border); border-radius:10px; margin:8px 0; background: color-mix(in srgb, var(--panel), black 8%); }
.aHead { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; cursor:pointer; }
.aHead:hover { background: color-mix(in srgb, var(--panel), black 12%); }
.aBody { display:none; padding:12px; }
.aCard.open .aBody { display:block; }
.aTitle { font-weight:700; }
.grid.auto { table-layout:auto; }
.grid.auto.wide td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Collapsible screen cards */
.screenHead { display:flex; align-items:center; justify-content:space-between; padding:10px; cursor:pointer; }
.screenHead .left { display:flex; align-items:center; gap:8px; }
.screenCard .screenBody { display:none; border-top:1px solid var(--border); padding-top:8px; }
.screenCard.open .screenBody { display:block; }

/* Tabs */
.tabs { display:flex; gap:8px; margin-bottom:8px; }
.tab { all:unset; cursor:pointer; border:1px solid var(--border); border-radius:999px; padding:6px 12px; background: color-mix(in srgb, var(--panel), black 8%); }
.tab.active { background:var(--accent); color:#0b1220; }
.badge { display:inline-block; min-width:20px; text-align:center; padding:1px 6px; border-radius:999px; border:1px solid var(--border); margin-left:6px; background: color-mix(in srgb, var(--panel), black 12%); }

/* Print styles */
@media print {
 .no-print, .no-print * { display:none !important; }
 body { background:#fff; color:#000; }
 .panel, aside, .section, .screenCard, .kv th, .kv td { border-color:#ccc !important; background:#fff !important; }
 a,button { color:#000 !important; }
 /* Neutral gray for file links */
 a.fileLink, a.fileLink:visited { color:#9aa4b2 !important; }
 a.fileLink:hover { color:#b8c0cc !important; text-decoration:underline; }
}

/* Client var chip */
.cvChip { display:inline-block; margin:4px 6px 0 0; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background: color-mix(in srgb, var(--panel), black 6%); font-size:.9rem; line-height:1.6; white-space:nowrap; }

/* Environment card alignment (consolidated latest styles) */
.svGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.svCard { display:grid; grid-template-columns:24px 1fr; grid-template-rows:auto auto auto; gap:4px 10px; align-items:start; background: color-mix(in srgb, var(--panel), black 4%); border:1px solid var(--border); border-radius:12px; padding:12px; }
.svIcon { grid-row:1 / span 3; align-self:start; font-size:18px; opacity:.9; }
.svTitle { grid-column:2; font-size:12px; color:var(--muted); margin-top:2px; }
.svMain { grid-column:2; font-weight:800; font-size:1.05rem; line-height:1.3; }
.svSub  { grid-column:2; font-size:12px; color:var(--muted); opacity:.9; }

/* Mobile badge variants with icons */
.mobBadge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background: color-mix(in srgb, var(--panel), black 10%); }
.mobBadge.android { background:var(--green-bg); color:var(--green); border-color:transparent; }
.mobBadge.ios { background:var(--blue-bg); color:var(--blue); border-color:transparent; }
.mobBadge i { font-size:14px; line-height:1; }

/* Clickable URL links in module list (neutral gray like file links) */
a.urlLink, a.urlLink:visited { color:#9aa4b2 !important; }
a.urlLink:hover { color:#b8c0cc !important; text-decoration:underline; }

/* Colored status pills */
.pill.ok  { background: var(--ok-bg);  color:#fff; border-color:transparent; }
.pill.bad { background: var(--danger-bg); color:#fff; border-color:transparent; }
.pill.warn { background: var(--warn-bg); color:#fff; border-color:transparent; }
.pill.danger { background: var(--red, #ff4d6d); color:#fff; border-color:transparent; font-weight:700; letter-spacing:.02em; }

/* Better contrast for selected tabs */
.tab.active { background: var(--accent); color:#fff; }
.tab.active .badge { background: rgba(255,255,255,.25); color:#fff; border-color:transparent; }

/* Screen Variables: grouped by type */
.svType,
.svType.input,
.svType.local,
.svType.output,
.svType.aggregate { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; border:1px solid var(--border); font-size:12px; line-height:1.6; background: color-mix(in srgb, var(--panel), black 10%); color:var(--text); }
.svType.input     { background:var(--blue-bg);  color:#fff; border-color:transparent; }
.svType.local     { background:var(--gray-bg);  color:#fff; border-color:transparent; }
.svType.output    { background:var(--green-bg); color:#fff; border-color:transparent; }
.svType.aggregate { background:rgba(180, 120, 255, 0.18); color:#fff; border-color:transparent; }
/* Response Headers section */
.hdrCard { display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.hdrTopRow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hdrSubHead { font-weight:600; color: var(--text); margin-top:6px; font-size:13px; }
.hdrFindings { display:flex; flex-direction:column; gap:10px; }
.hdrFindGroup { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.hdrFindGroup.sevHigh { border-color: color-mix(in srgb, var(--red), transparent 60%); }
.hdrFindGroup.sevMed  { border-color: color-mix(in srgb, var(--yg, #ffb700), transparent 55%); }
.hdrFindGroup.sevLow  { border-color: color-mix(in srgb, var(--gray, #8888aa), transparent 55%); }
.hdrFindGroupHead { display:flex; align-items:center; gap:8px; padding:8px 12px; font-weight:600; font-size:13px; cursor:pointer; list-style:none; }
.hdrFindGroupHead::-webkit-details-marker { display:none; }
.hdrFindGroupHead::before { content:"▸"; display:inline-block; transition: transform .15s ease; opacity:.7; }
.hdrFindGroup[open] > .hdrFindGroupHead::before { transform: rotate(90deg); }
.hdrFindGroup.sevHigh .hdrFindGroupHead { background: var(--red-bg); color: var(--red); }
.hdrFindGroup.sevMed  .hdrFindGroupHead { background: rgba(255,183,0,0.11); color: var(--yg, #ffb700); }
.hdrFindGroup.sevLow  .hdrFindGroupHead { background: var(--gray-bg); color: var(--text); }
.hdrFindGroupIco { opacity:.9; }
.hdrFindGroupLabel { letter-spacing:.3px; }
.hdrFindGroup .pinnedCountPill { margin-left:auto; }
.hdrFindGroupItems { display:flex; flex-direction:column; gap:10px; padding:8px 10px; background: color-mix(in srgb, var(--panel), black 4%); }
.hdrCatGroup { display:flex; flex-direction:column; gap:4px; }
.hdrCatHead { display:flex; align-items:center; gap:8px; padding:2px 4px; }
.hdrCatHead .hdrCat { font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.hdrCatCount { font-size:11px; color: var(--muted); padding:0 7px; border-radius:999px; background: color-mix(in srgb, var(--panel), black 12%); border:1px solid var(--border); }
.hdrCatItems { display:flex; flex-direction:column; gap:4px; padding-left:8px; border-left:2px solid var(--border); }
.hdrFindItem { display:flex; flex-direction:column; gap:4px; padding:6px 8px; border-radius:6px; background: color-mix(in srgb, var(--panel), black 8%); }
.hdrGuideLink { margin-left:auto; color: var(--muted); text-decoration:none; font-size:14px; opacity:.75; transition: opacity .12s, color .12s; }
.hdrGuideLink:hover { opacity:1; color: var(--accent, #00e5d4); }
.hdrFindHead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pill.sevLowPill { background: var(--gray-bg); color: var(--text); border-color:transparent; }
.hdrCat { font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.hdrMsg { font-size:13px; }
.hdrEvidence { font-size:11.5px; color: var(--muted); padding:4px 8px; border-left:2px solid var(--border); white-space:pre-wrap; word-break:break-all; max-height:120px; overflow:auto; }
.cookRow { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed var(--border); flex-wrap:wrap; }
.cookRow:last-child { border-bottom:0; }
.cookName { font-weight:600; }
.cookFlags { display:flex; gap:6px; flex-wrap:wrap; }
.cookFlag { font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid transparent; }
.cookFlag.ok  { background: var(--green-bg); color: var(--green); border-color: color-mix(in srgb, var(--green), transparent 70%); }
.cookFlag.bad { background: var(--red-bg);   color: var(--red);   border-color: color-mix(in srgb, var(--red), transparent 70%); }
.cookDom { font-family: 'Fira Code', ui-monospace, monospace; font-size:11.5px; }
.hdrRawDetails summary { cursor:pointer; padding:8px 0; color: var(--muted); font-size:12px; }
.hdrRaw { display:flex; flex-direction:column; gap:4px; padding-top:6px; }
.hdrRawRow { display:grid; grid-template-columns: minmax(180px, max-content) 1fr; gap:8px; padding:6px 8px; border-radius:6px; background: color-mix(in srgb, var(--panel), black 4%); }
.hdrRawKey { color: var(--accent); font-weight:600; word-break:break-all; }
.hdrRawVal { word-break:break-all; white-space:pre-wrap; }
.svNote { display:flex; align-items:center; gap:6px; padding:6px 10px; margin:0 0 10px; border:1px dashed var(--border); border-radius:8px; background: color-mix(in srgb, var(--panel), black 4%); font-size:12px; }
.svNote i { opacity:.85; }
.svGroup { margin: 6px 0 12px; }
.svGroup + .svGroup { border-top: 1px dashed var(--border); padding-top: 10px; }
.svGroupHead { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.svGroupHead .small { font-size:12px; }
.svVarChip {
 display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:8px;
 background: color-mix(in srgb, var(--panel), black 8%); color: var(--text);
 font-family: 'Fira Code', ui-monospace, monospace; font-size:12px; line-height:1.4;
 white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Unified search input styling */
.searchWrap { position:relative; min-width:240px; width:min(420px,100%); }
.searchIcon { position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.6; font-size:14px; }
.searchInput { width:100%; padding:10px 12px 10px 32px; border:1px solid var(--border); border-radius:10px; background: color-mix(in srgb, var(--panel), white 3%); color:var(--text); outline:none; }
.searchInput::placeholder { color:var(--muted); }
.searchInput:focus { border-color: color-mix(in srgb, var(--accent), white 40%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 85%); }
/* Data list (two-line rows) */
.dataList { display:block; }
.dataRow { display:grid; grid-template-columns:28px 1fr; gap:10px 12px; padding:10px 0; }
.dataSep { border:0; border-top:1px solid var(--border); margin:0; }
.dataIcon { grid-row:1 / span 2; align-self:start; opacity:.9; }
.dataIcon i { font-size:16px; }
.dataContent { display:block; width:100%; }
.dataTop { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px 12px; }
.dataField { display:flex; flex-direction:column; gap:4px; }
.dataBottom { display:grid; grid-template-columns:1fr; gap:6px; margin-top:4px; }
.lbl { font-size:12px; color:var(--muted); }
.val { font-weight:600; word-break:break-word; overflow-wrap:anywhere; }
.dataBottom .val { font-weight:400; }

/* Web Blocks list */
.wbHead { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px 12px; font-weight:700; margin:6px 0; }
.wbList { display:block; }
.wbRow { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px 12px; padding:6px 0; }
.wbCell.mod strong { font-weight:700; }
.wbSep { border:0; border-top:1px solid var(--border); margin:8px 0; }

/* Section header icons */
.sec-ico { margin-right:8px; opacity:.9; }
.section .head { gap:8px; }
.section .head:hover { background: color-mix(in srgb, var(--panel), black 10%); }
.section .head .title { display:flex; align-items:center; gap:8px; }

/* Counter pill utility */
.pill.secCounter { color:#ffffff !important; background:#334155 !important; border-color:transparent !important; }

/* Brand mappings */
.cardish, .sectionBody, .section, .svCard { background: var(--panel); }

/* Structures cards */
.structCard { border:1px solid var(--border); border-radius:10px; background: color-mix(in srgb,var(--panel), black 6%); padding:.25rem .75rem; }
.structCard summary { display:flex; align-items:center; gap:.5rem; cursor:pointer; padding:.5rem 0; font-weight:600; list-style:none; }
.structCard summary::-webkit-details-marker { display:none; }
.structCard .tableWrap { padding:.5rem 0 .75rem; }
.table-tight { width:100%; border-collapse:collapse; }
.table-tight th,
.table-tight td { padding:.4rem .5rem; border-bottom:1px solid rgba(255,255,255,.06); }
.table-tight thead th { font-size:.85rem; color:var(--muted); text-align:left; }
.robotsTable td { vertical-align: top; }
.robotsTable td ul.list { margin: 0; padding-left: 0; list-style: none; }
.robotsGroupSource { word-break: break-all; }
.pill.tiny { font-size:.7rem; padding:.1rem .45rem; }
.pill-ok { background:var(--ok-bg); color:var(--text); }
.pill-neutral { background:var(--pill); color:var(--text); }

/* Static Entities chips */
.chipWrap { display:flex; flex-wrap:wrap; gap:.35rem; padding:.25rem 0 .5rem; }
.pill.soft { background: color-mix(in srgb, var(--yg, #ffb700), transparent 89%); color: var(--yg, #ffb700); }

/* Roles: auto-fit multi-column grid — keeps long role lists (95+) scannable.
   Columns sized ~150–220px depending on viewport. Chips are compact pill-like tags. */
.rolesGrid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 gap: 6px 10px;
 margin: 0;
 padding: 0;
}
.roleChip {
 display: inline-block;
 padding: 4px 10px;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: color-mix(in srgb, var(--panel), black 8%);
 color: var(--text);
 font-family: 'Fira Code', ui-monospace, monospace;
 font-size: 12px;
 line-height: 1.4;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* Clickable URL links (also used elsewhere) */
a.urlLink, a.urlLink:visited { color:#9aa4b2 !important; }
a.urlLink:hover { color:#b8c0cc !important; text-decoration:underline; }


/* === Improved Screen Header Visibility === */
.screenHead {
 background: color-mix(in srgb, var(--panel), black 12%);
 border: 1px solid var(--border);
 border-radius: 10px;
 margin-top: 8px;
 padding: 10px 12px;
 transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.screenHead:hover {
 background: color-mix(in srgb, var(--accent), black 30%);
 transform: translateY(-1px);
 box-shadow: 0 0 6px color-mix(in srgb, var(--accent), transparent 70%);
}

/* Chevron indicator on screen header */
.chev {
 display: inline-block;
 width: 10px;
 height: 10px;
 border-right: 2px solid var(--muted);
 border-bottom: 2px solid var(--muted);
 transform: rotate(-45deg);
 transition: transform 0.2s ease, border-color 0.2s ease;
 margin-right: 4px;
 flex-shrink: 0;
}
.screenCard.open .chev {
 transform: rotate(45deg) translate(-2px, -2px);
 border-color: var(--accent);
}

/* Expanded state — keeps the card visually distinct from its neighbours */
.screenCard.open .screenHead {
 background: color-mix(in srgb, var(--accent), black 55%);
 border-color: color-mix(in srgb, var(--accent), transparent 40%);
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
 box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 70%) inset;
}
.screenCard.open .screenHead .screenTitle {
 color: var(--accent);
}
.screenCard.open .screenBody {
 border: 1px solid color-mix(in srgb, var(--accent), transparent 40%);
 border-top: none;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 padding: 10px 12px 12px;
}


/* === Responsive === */
@media (max-width: 900px) {
 .svGrid { grid-template-columns: 1fr; }
 .dataTop { grid-template-columns:1fr; }
}

@media (max-width: 860px) {
 /* Stack the two-column layout */
 .layout { display:flex !important; flex-direction:column !important; gap:12px; }
 .layout.wrap { padding-left:12px; padding-right:12px; }

 /* Put module list above details and keep it handy */
 .layout aside.no-print { order:1; position: static; top: 8px; z-index: 30; }
 #modDetail { order:2; }

 /* Prevent module list from taking the whole viewport */
 aside.no-print #modList { max-height: 45vh; overflow:auto; }

 /* Toolbar compaction */
 .toolbar h1 { font-size: 28px; }
 .toolbar .bar { flex-wrap: wrap; gap: 8px; }
 .toolbar input { min-width: 0; flex: 1 1 100%; }

 /* Tabs wrap when space is tight */
 .tabs { flex-wrap: wrap; }

 /* Tighter section header for small screens */
 .section .head { padding: 10px; }

 /* Key/value table tweaks */
 .kv th { width: 140px; white-space: normal; word-break: break-word; line-height: 1.25; }
 .kv td { width: auto; }

 /* Web Blocks grid collapse */
 .wbHead, .wbRow { grid-template-columns:1fr; }

 /* Server Action List: stacked layout */
 .saList { display:block; }
 .saItem { padding:8px 0; }
 .saTop { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
 .saSep { opacity:.5; }
 .saBottom { margin-top:2px; }
}

@media (max-width: 420px) {
 .toolbar h1 { font-size: 24px; }
 .kv th { width: 120px; }
 .btn { padding: 6px 10px; }
}

/* Final mobile stack override for grid layout */
@media (max-width: 860px) {
 .layout { display:grid !important; grid-template-columns: 1fr !important; }
 .layout > * { grid-column: 1 / -1 !important; width:100% !important; max-width:100% !important; }
}


/* Mobile-friendly key/value layout */
@media (max-width: 600px) {
 .kv tr {
  display: block;
  margin-bottom: 1rem;
  border: 1px solid var(--border, #2a3440);
  border-radius: 6px;
  padding: 0.5rem;
  background: var(--card, #121a23);
 }

 .kv th {
  display: block;
  width: 100% !important;
  white-space: normal !important;
  font-weight: bold;
  margin-bottom: 0.25rem;
 }

 .kv td {
  display: block;
  width: 100% !important;
 }

 .kv td pre,
 .kv td .mono {
  white-space: normal !important;
  word-break: break-all;
  overflow-wrap: anywhere;
 }
}

/* Size chip for resource bytes */
.sizeChip{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:8px; padding:2px 8px;
  border:1px solid var(--border); border-radius:999px;
  font-size:.85rem; line-height:1.6;
  color:var(--muted); background: color-mix(in srgb, var(--panel), black 6%);
}
.sizeChip .sizeIco{ font-size:.9em; opacity:.9; }

.sizeChip.warn{ background: var(--warn-bg); color:#fff; border-color: transparent; }

/* Suspicious term markers */
.suspiciousHits{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:8px; vertical-align:middle; }
.suspiciousHits .pill{ height:20px; min-width:auto; padding:0 7px; font-size:11px; line-height:20px; display:inline-flex; align-items:center; gap:5px; }
.suspiciousHits .badgeGuideLink { color: inherit; opacity: .7; text-decoration: none; line-height: 1; display: inline-flex; align-items: center; }
.suspiciousHits .badgeGuideLink:hover { opacity: 1; }
.suspiciousHits .badgeGuideLink i { font-size: 11px; }
.suspiciousInline{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }

/* Grouped list (Server/Client/Data action lists) */
.glControls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.glControls .searchWrap { flex:1 1 240px; min-width:200px; }
.glControls .glToggleAll { flex:0 0 auto; display:flex; gap:6px; }
@media (max-width: 600px){
 .glControls .glToggleAll { flex:1 1 100%; justify-content:stretch; }
 .glControls .glToggleAll .btn { flex:1 1 50%; }
}
.glList { display:flex; flex-direction:column; gap:4px; }
.glFlow, .glScreen { border:1px solid var(--border, #2a3440); border-radius:6px; background: color-mix(in srgb, var(--panel, #0b1520), black 3%); }
.glScreen { background: transparent; border:none; border-left:2px solid var(--border, #2a3440); border-radius:0; margin: 2px 0 2px 12px; }
.glHead { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; user-select:none; flex-wrap:wrap; }
.glScreenHead { padding:6px 10px; }
.glHead:hover { background: rgba(255,255,255,0.03); }
.glChevron { display:inline-block; font-size:10px; opacity:.65; transition: transform .15s ease; width:10px; text-align:center; }
.glFlow.expanded > .glHead > .glChevron,
.glScreen.expanded > .glHead > .glChevron { transform: rotate(90deg); }
.glBody { display:none; padding: 0 10px 8px; }
.glFlow.expanded > .glBody,
.glScreen.expanded > .glBody { display:block; }
.glCount { margin-left:auto; font-size:12px; opacity:.6; font-variant-numeric: tabular-nums; }
.glScreen .glBody { padding: 0 10px 6px; }
.glScreen .saItem { padding:6px 0; }
.glScreen .saItem + .saItem { border-top:1px solid color-mix(in srgb, var(--border, #2a3440), transparent 60%); }
/* Single-level grouped lists (no screen sub-group) */
.glFlow > .glBody > .saItem { padding:7px 12px; }
.glFlow > .glBody > .saItem + .saItem { border-top:1px solid color-mix(in srgb, var(--border, #2a3440), transparent 60%); }

/* Column layout for short-label grouped lists (e.g. client variables). Columns auto-fit 1 to ~4 based on width. */
.glFlow.expanded > .glCols {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(var(--col-min, 200px), 1fr));
 gap: 4px 12px;
 padding: 4px 10px 8px;
}
.glCols > .saItem {
 border-top: none !important;
 padding: 5px 8px;
 min-width: 0;
}
.glCols .saItem code {
 overflow-wrap: anywhere;
 word-break: break-word;
 display: inline-block;
 max-width: 100%;
}
@media (max-width: 600px) {
 .glCols { grid-template-columns: 1fr; }
}
.glFlowName { font-weight:600; font-size:14px; color: var(--text, #e8e8f0); letter-spacing:.01em; }
.glScreenName { font-weight:500; font-size:13px; color: var(--muted, #96a0ad); }
.glFlow.expanded > .glHead .glFlowName { color: var(--accent, #00e5d4); }

/* Row layout for saItem top line — flex so separator/name siblings get proper spacing on all widths */
.saItem .saTop { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.saItem .saSep { opacity:.55; }

/* --- Translations --- */
.trLangBtns { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.trLangBtn {
 font-size: 11px; font-weight: 600; letter-spacing: .02em;
 padding: 4px 11px; border-radius: 999px;
 border: 1px solid var(--border);
 background: color-mix(in srgb, var(--panel, #16161e), black 8%);
 color: var(--muted, #8888aa);
 cursor: pointer;
 transition: background .15s ease, color .15s ease, border-color .15s ease;
 font-family: ui-monospace, Menlo, Consolas, monospace;
}
.trLangBtn:hover { color: var(--text, #e8e8f0); border-color: color-mix(in srgb, var(--accent, #00e5d4), transparent 50%); }
.trLangBtn.active {
 background: var(--accent, #00e5d4);
 color: #0d0d12;
 border-color: transparent;
}
.trItem { padding: 6px 0; }
.trItem + .trItem { border-top: 1px solid color-mix(in srgb, var(--border, #2a3440), transparent 60%); }
.trTop { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.trToggle {
 background: transparent; border: 1px solid transparent;
 cursor: pointer; padding: 2px 8px;
 color: var(--muted, #8888aa); border-radius: 6px;
 flex: 0 0 auto;
 font-size: 11px; line-height: 1;
 transition: color .15s ease, background .15s ease;
}
.trToggle:hover { color: var(--text, #e8e8f0); background: color-mix(in srgb, var(--panel, #16161e), black 12%); }
.trToggle i { transition: transform .15s ease; display: inline-block; }
.trToggle.open i { transform: rotate(90deg); }
.trText { display: none; flex: 1 1 auto; min-width: 0; word-break: break-word; line-height: 1.45; }
.trText.trActive { display: block; }
.trAll {
 margin-top: 8px; margin-left: 30px;
 padding: 6px 12px;
 border-left: 2px solid color-mix(in srgb, var(--border, #2a3440), transparent 30%);
 display: flex; flex-direction: column; gap: 6px;
}
.trLine { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.trLine .trLang {
 flex: 0 0 auto;
 font-size: 10px; font-weight: 700; letter-spacing: .06em;
 padding: 1px 7px; border-radius: 999px;
 background: color-mix(in srgb, var(--accent, #00e5d4), black 65%);
 color: var(--accent, #00e5d4);
 border: 1px solid color-mix(in srgb, var(--accent, #00e5d4), transparent 60%);
 font-family: ui-monospace, Menlo, Consolas, monospace;
 min-width: 50px; text-align: center;
}
.trLine .trAllText { color: var(--text, #e8e8f0); flex: 1 1 auto; word-break: break-word; }
.trList { display: flex; flex-direction: column; }

/* Pinned "Dangerous Actions" group at the top of the Server Action List */
.glFlow.glDanger {
 border: 1px solid color-mix(in srgb, var(--red, #ff4d6d), transparent 55%);
 background: color-mix(in srgb, var(--red, #ff4d6d), black 82%);
}
.glFlow.glDanger > .glHead { background: color-mix(in srgb, var(--red, #ff4d6d), black 70%); }
.glFlow.glDanger > .glHead:hover { background: color-mix(in srgb, var(--red, #ff4d6d), black 60%); }
.glDangerName { color: var(--red, #ff4d6d) !important; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.glDangerIco { color: var(--red, #ff4d6d); font-size: 13px; }
.glFlow.glDanger.expanded > .glHead .glFlowName { color: var(--red, #ff4d6d) !important; }

/* Pinned "Suspicious Actions" group — amber, sits below the Dangerous group */
.glFlow.glSuspicious {
 border: 1px solid color-mix(in srgb, var(--yg, #ffb700), transparent 60%);
 background: color-mix(in srgb, var(--yg, #ffb700), black 85%);
}
.glFlow.glSuspicious > .glHead { background: color-mix(in srgb, var(--yg, #ffb700), black 75%); }
.glFlow.glSuspicious > .glHead:hover { background: color-mix(in srgb, var(--yg, #ffb700), black 65%); }
.glSuspiciousName { color: var(--yg, #ffb700) !important; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.glSuspiciousIco { color: var(--yg, #ffb700); font-size: 13px; }
.glFlow.glSuspicious.expanded > .glHead .glFlowName { color: var(--yg, #ffb700) !important; }

/* "Marked only" filter toggle + CSS-only hiding when active */
.glMarkFilterBtn.active {
 background: color-mix(in srgb, var(--accent, #00e5d4), black 55%);
 border-color: color-mix(in srgb, var(--accent, #00e5d4), transparent 50%);
 color: var(--accent, #00e5d4);
}
.glList.markFilterActive .glFlow:not(.glDanger):not(.glSuspicious) .saItem:not(:has(.markBadge)) { display: none !important; }
.glList.markFilterActive .glFlow:not(.glDanger):not(.glSuspicious) .glScreen:not(:has(.saItem:has(.markBadge))) { display: none !important; }
.glList.markFilterActive .glFlow:not(.glDanger):not(.glSuspicious):not(:has(.saItem:has(.markBadge))) { display: none !important; }

/* Sidebar module-list counters — per-module unreviewed findings */
.modBtn {
 display: flex; align-items: center; gap: 6px;
 flex-wrap: nowrap; /* pills stay pinned to the right even when the name wraps */
 border-radius: 14px; /* softer corners so multi-line names don't look stretched */
 line-height: 1.25;
}
.modName {
 flex: 1 1 auto;
 min-width: 0;               /* allow the flex child to shrink below content width */
 word-break: break-word;
 overflow-wrap: anywhere;    /* break very long module names anywhere to avoid overflow */
}
.modCountPill {
 display: inline-flex; align-items: center; gap: 3px;
 flex: 0 0 auto;             /* never shrink the counter pill */
 font-size: 10px; font-weight: 700; letter-spacing: .04em;
 padding: 1px 7px; border-radius: 999px;
 border: 1px solid transparent;
 white-space: nowrap;
}
.modCountDanger { background: var(--red, #ff4d6d); color: #fff; }
.modCountWarn   { background: var(--yg,  #ffb700); color: #0d0d12; }

/* Info-link icon inside pinned group headers — opens the security guide in a new tab */
.glGuideLink { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:13px; opacity:.7; transition: opacity .15s ease, transform .15s ease; }
.glGuideLink:hover { opacity:1; transform: scale(1.1); text-decoration:none; }

/* --- Action marks (fixed / ignored / false_positive) --- */
.markBadge {
 display:inline-flex; align-items:center;
 font-size:10px; font-weight:700; letter-spacing:.06em;
 padding:2px 8px; border-radius:999px;
 border:1px solid transparent;
 text-transform:uppercase;
}
.markBadge-fixed          { background: color-mix(in srgb, var(--green, #00e5a0), transparent 78%); color: var(--green, #00e5a0); border-color: color-mix(in srgb, var(--green, #00e5a0), transparent 55%); }
.markBadge-ignored        { background: color-mix(in srgb, var(--muted, #8888aa), transparent 78%); color: var(--muted, #8888aa); border-color: color-mix(in srgb, var(--muted, #8888aa), transparent 55%); }
.markBadge-false_positive { background: color-mix(in srgb, var(--muted, #8888aa), transparent 78%); color: var(--muted, #8888aa); border-color: color-mix(in srgb, var(--muted, #8888aa), transparent 55%); }

.markWrap { position: relative; display: inline-flex; align-items: center; }
.markBtn {
 background: transparent; border: 1px solid transparent;
 color: var(--muted, #8888aa);
 border-radius: 6px; padding: 2px 6px;
 cursor: pointer; font-size: 12px;
 opacity: .55; transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
.markBtn:hover {
 opacity: 1;
 background: color-mix(in srgb, var(--panel, #16161e), black 10%);
 border-color: var(--border);
 color: var(--text, #e8e8f0);
}
.markMenu {
 position: fixed;
 z-index: 9999;
 width: 210px;
 background: var(--panel, #16161e);
 border: 1px solid var(--border);
 border-radius: 8px;
 box-shadow: 0 4px 14px rgba(0,0,0,.4);
 display: flex; flex-direction: column;
 padding: 4px;
}
.markMenuItem {
 background: transparent; border: 0;
 color: var(--text, #e8e8f0);
 text-align: left; cursor: pointer;
 padding: 6px 10px; border-radius: 6px;
 font-size: 13px;
}
.markMenuItem:hover { background: color-mix(in srgb, var(--panel, #16161e), black 12%); }
.markMenuFixed:hover   { background: color-mix(in srgb, var(--green, #00e5a0), transparent 85%); color: var(--green, #00e5a0); }
.markMenuIgnored:hover { background: color-mix(in srgb, var(--muted, #8888aa), transparent 80%); }
.markMenuFp:hover      { background: color-mix(in srgb, var(--muted, #8888aa), transparent 80%); }
.markMenuClear { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 8px; color: var(--red, #ff4d6d); }
.markMenuClear:hover { background: color-mix(in srgb, var(--red, #ff4d6d), transparent 85%); }

/* Rule-label chip shown as the sub-group header inside pinned groups */
.pinnedRuleLabel {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .04em;
 padding: 2px 8px;
 border-radius: 999px;
}

/* Deduped pinned rows: "(N call-sites)" pill + expandable list */
.pinnedCountPill {
 font-size: 11px;
 font-weight: 600;
 color: var(--muted, #96a0ad);
 background: color-mix(in srgb, var(--panel, #0b1520), black 8%);
 border: 1px solid var(--border);
 border-radius: 999px;
 padding: 1px 8px;
}
.pinnedSitesToggle {
 background: transparent;
 border: 1px solid transparent;
 color: var(--muted, #8888aa);
 border-radius: 6px;
 padding: 2px 6px;
 cursor: pointer;
 font-size: 10px;
 opacity: .6;
 transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.pinnedSitesToggle:hover { opacity: 1; background: color-mix(in srgb, var(--panel), black 12%); }
.pinnedSitesToggle.open i { transform: rotate(180deg); display: inline-block; }
.pinnedSitesList {
 margin-top: 6px;
 padding: 4px 6px 4px 18px;
 border-left: 1px dashed color-mix(in srgb, var(--border), transparent 30%);
 display: flex; flex-direction: column; gap: 2px;
}
.pinnedSite {
 font-size: 12px;
 display: inline-flex; align-items: center; gap: 4px;
}

/* Bulk-mark button in the sub-group header */
.pinnedBulkBtn {
 background: transparent;
 border: 1px solid transparent;
 color: var(--muted, #8888aa);
 border-radius: 6px;
 padding: 2px 6px;
 cursor: pointer;
 font-size: 12px;
 opacity: .55;
 transition: opacity .15s ease, background .15s ease, border-color .15s ease;
 margin-left: 4px;
}
.pinnedBulkBtn:hover {
 opacity: 1;
 background: color-mix(in srgb, var(--panel, #16161e), black 10%);
 border-color: var(--border);
 color: var(--text, #e8e8f0);
}
.pinnedRuleLabelDanger {
 background: color-mix(in srgb, var(--red, #ff4d6d), transparent 75%);
 color: var(--red, #ff4d6d);
 border: 1px solid color-mix(in srgb, var(--red, #ff4d6d), transparent 60%);
}
.pinnedRuleLabelSusp {
 background: color-mix(in srgb, var(--yg, #ffb700), transparent 78%);
 color: var(--yg, #ffb700);
 border: 1px solid color-mix(in srgb, var(--yg, #ffb700), transparent 60%);
}

/* Screens tab row + flow dropdown */
.scrTabsRow {
 display:flex; align-items:center; gap:12px;
 flex-wrap:wrap; margin: 8px 0;
}
.scrTabsRow .tabs { display:flex; gap:6px; flex-wrap:wrap; flex: 1 1 auto; }
.scrFlowWrap {
 position:relative; flex: 0 0 auto; min-width:200px;
 margin-left:auto;
}
.scrFlowSelect {
 appearance:none; -webkit-appearance:none; -moz-appearance:none;
 width:100%;
 background: color-mix(in srgb, var(--panel), black 8%);
 color: var(--text);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 8px 36px 8px 12px;
 font: inherit; font-size: 13px;
 cursor: pointer;
 transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.scrFlowSelect:hover {
 border-color: color-mix(in srgb, var(--accent), transparent 50%);
 background: color-mix(in srgb, var(--panel), black 4%);
}
.scrFlowSelect:focus {
 outline: none;
 border-color: color-mix(in srgb, var(--accent), white 10%);
 box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 80%);
}
.scrFlowSelect option { background: var(--panel); color: var(--text); }
.scrFlowChev {
 position:absolute; right:12px; top:50%;
 width:8px; height:8px; pointer-events:none;
 border-right:2px solid var(--muted);
 border-bottom:2px solid var(--muted);
 transform: translateY(-70%) rotate(45deg);
 transition: border-color .15s ease;
}
.scrFlowSelect:hover + .scrFlowChev,
.scrFlowSelect:focus + .scrFlowChev { border-color: var(--accent); }

@media (max-width: 720px) {
 .scrTabsRow { flex-direction: column; align-items: stretch; }
 .scrFlowWrap { margin-left: 0; width: 100%; }
}

/* Scan-extras chips on the report header — mirrors the dashboard row chips so
   styling stays consistent across views. Same selectors as in app.css. */
.scanExtraChip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; margin-right: 6px; border-radius: 999px; font-size: .65rem; font-weight: 600; line-height: 1.4; vertical-align: middle; border: 1px solid transparent; }
.scanExtraChip.hdr { background: rgba(0, 229, 212, .12); color: #00e5d4; border-color: rgba(0, 229, 212, .35); }
.scanExtraChip.cty { background: rgba(120, 180, 255, .14); color: #9bbcff; border-color: rgba(120, 180, 255, .35); }

/* ── Module dependency map (per-report) ───────────────────────────────── */
/* Lives inside #dependencyMapPanel on view_report. Built by              */
/* buildDependencyMapPanel() in assets/view_report.js. Theme matches the   */
/* rest of the report — cyan accent (#00e5d4), panel #16161e-ish, off-     */
/* white text. The cytoscape canvas itself is on a slightly lighter        */
/* background (#0f1322) to make node fills read clearly against it.        */

/* Counts in the section title, inline-prose style ("· N modules with M
   edges"). Reads as secondary text so the section name stays primary. */
.depMapTitleCounts {
  font-weight: 400;
  color: var(--muted, #8888aa);
  margin-left: 6px;
  font-size: 0.92em;
}

.depMapTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0,229,212,0.14);
}
.depMapStats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.depMapStat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted, #8888aa);
}
.depMapStat strong { color: var(--text, #e8e8f0); font-weight: 700; }
.depMapStatReactive    { border-color: rgba(0,229,212,0.35);  color: #66f0e0; }
.depMapStatTraditional { border-color: rgba(255,183,0,0.35);  color: #ffd47a; }
.depMapStatOffline     { border-color: rgba(255,77,109,0.35); color: #ffa3b1; }

/* Layout toggle + reset buttons. Pill-shaped, single row. Active button
   gets the accent fill so the current layout mode is visually obvious. */
.depMapControls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.depMapControlLabel {
  font-size: 11px;
  color: var(--muted, #8888aa);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 4px;
}
.depMapBtn {
  background: transparent;
  border: 1px solid rgba(0,229,212,0.22);
  color: var(--text, #e8e8f0);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.depMapBtn:hover { border-color: rgba(0,229,212,0.55); color: var(--accent, #00e5d4); }
.depMapBtnActive { background: rgba(0,229,212,0.14); border-color: rgba(0,229,212,0.55); color: var(--accent, #00e5d4); }
.depMapBtnReset { padding: 5px 9px; }

/* Inline status line — used briefly while cytoscape is loading from CDN
   on first expand, and to surface a load failure if the CDN is blocked. */
.depMapStatus {
  min-height: 18px;
  font-size: 12px;
  color: var(--muted, #8888aa);
  margin-bottom: 6px;
}
.depMapStatus:empty { display: none; }

/* The cytoscape canvas. Fixed height so the section doesn't pop the page
   layout when expanded. Bigger on desktop, smaller on mobile to keep the
   surrounding content reachable. Height bumped from 560 → 720 after user
   feedback on dense graphs (100+ modules) — fit-to-canvas was compressing
   them past the legibility threshold. The 80vh ceiling keeps it from
   eating the whole viewport on small laptop screens. */
.depMapCanvas {
  height: 720px;
  max-height: 80vh;
  width: 100%;
  background: #0f1322;
  border: 1px solid rgba(0,229,212,0.16);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .depMapCanvas { height: 480px; }
}

/* Placeholder text shown inside the canvas before cytoscape mounts (loading
   the CDN) or when something failed. Centered so it reads cleanly even
   without a graph behind it. */
.depMapPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted, #8888aa);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}

/* Legend below the canvas. Same swatch + label pattern the moduleList
   panel's "type" tabs use, but inlined here so it renders without layout
   hops while cytoscape is still initializing. */
.depMapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding: 8px 4px;
  font-size: 11px;
  color: var(--muted, #8888aa);
}
.depLegendItem { display: inline-flex; align-items: center; gap: 6px; }
.depLegendSwatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.depLegendSwatch.depRoot     { background: transparent;          border-color: #ffffff; }
.depLegendSwatch.depReactive { background: #00e5d4;              border-color: #00e5d4; }
.depLegendSwatch.depTrad     { background: #ffb700;              border-color: #ffb700; }
.depLegendSwatch.depUnknown  { background: #8888aa;              border-color: #8888aa; }
.depLegendSwatch.depOffline  { background: rgba(136,136,170,.5); border-color: #8888aa; border-style: dashed; }