/* Log Analysis Portal — all styles for data.html.
   Extracted verbatim from the former inline <style> block; section order and
   comments preserved. Loaded by data.html via <link>. No build step. */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #09090b;
  color: #fafafa;
  min-height: 100vh;
}
.layout { display: grid; grid-template-columns: 300px 1fr; min-height: 100vh; }

/* Sidebar */
.sidebar { background: #18181b; border-right: 1px solid #27272a; padding: 24px 20px; }
.sb-section { margin-bottom: 24px; }
.sb-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #a1a1aa; margin-bottom: 8px; }
select { width: 100%; background: #141416; color: #fafafa; border: 1px solid #3f3f46; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.jenkins-info { background: #141416; border: 1px solid #27272a; border-radius: 8px; padding: 12px; }
.jenkins-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.jenkins-logo-wrap { height: 36px; max-width: 100px; flex-shrink: 0; display: flex; align-items: center; }
.jenkins-logo { height: 36px; width: auto; max-width: 100px; }
.jenkins-name { font-weight: 600; font-size: 14px; color: #fafafa; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot.green { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.dot.red   { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.home-btn { display: block; margin-top: 12px; padding: 8px 14px; background: #141416; border: 1px solid #3f3f46; border-radius: 8px; color: #f0c479; font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; }
.home-btn:hover { background: #27272a; color: #fafafa; }
.app-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.app-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid transparent; color: #a1a1aa; font-size: 13px; font-weight: 600; text-decoration: none; }
.app-nav-link:hover { background: #141416; color: #fafafa; }
.app-nav-link.active { background: rgba(201,151,61,0.14); border-color: rgba(201,151,61,0.4); color: #fafafa; }
.app-nav-link .app-nav-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.sb-view-link { cursor: pointer; }
.sb-vi { width: 20px; text-align: center; font-size: 12px; flex-shrink: 0; color: #71717a; }
.sb-view-link.active .sb-vi { color: #f0c479; }
.sb-app { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 12px; background: #141416; border: 1px solid #27272a; border-radius: 10px; font-size: 14px; font-weight: 700; color: #fafafa; }
.sb-app .app-nav-logo { width: 22px; height: 22px; object-fit: contain; }
.sb-meta { margin-top: 8px; padding: 9px 12px; display: flex; flex-direction: column; gap: 8px; }
.sb-meta-row { display: flex; flex-direction: column; gap: 1px; }
.sb-meta-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #71717a; }
.sb-meta-v { font-size: 12px; color: #d4d4d8; }
.view-section-head { margin: 2px 0 16px; }
.vs-title { margin: 0 0 4px; font-family: "Inter", sans-serif; font-size: 19px; font-weight: 700; color: #fafafa; letter-spacing: -0.01em; }
.vs-sub { font-size: 12.5px; color: #a1a1aa; }

/* Main */
.main { padding: 28px 32px; overflow: auto; }
.title { font-family: "Inter", sans-serif; font-size: 27px; font-weight: 600; margin: 0 0 4px 0; color: #fafafa; letter-spacing: -0.01em; }
/* App name left, the SIEM it's scored against pinned to the right of the same row. */
.cov-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cov-title-row .title { margin: 0; }
.cov-siem { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; border: 1px solid #3f3f46; border-radius: 999px; padding: 5px 13px 5px 11px; font-size: 13px; font-weight: 600; color: #fafafa; letter-spacing: 0.01em; cursor: default; }
.cov-siem-k { font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #f0c479; }
.cov-siem.cov-siem-none { color: #a1a1aa; }
.subtitle { color: #a1a1aa; font-size: 13px; margin-bottom: 20px; }
.main-card { background: #18181b; border: 1px solid #27272a; border-radius: 12px; padding: 24px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); }

.action-search { width: 100%; background: #141416; border: 1px solid #3f3f46; border-radius: 8px; padding: 9px 14px 9px 36px; font-size: 13px; margin-bottom: 14px; font-family: inherit; color: #fafafa; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; }
.action-search::placeholder { color: #71717a; }

/* Info "i" badge beside a section title — explanation on hover (desktop) or tap
   (mobile, via the .open class toggled by covToggleInfo). */
.cov-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
  border: 1px solid #52525b; color: #a1a1aa;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
  text-transform: none; letter-spacing: 0; vertical-align: middle;
  position: relative; user-select: none; flex-shrink: 0;
}
.cov-info:hover, .cov-info:focus-visible, .cov-info.open { color: #f0c479; border-color: #f0c479; outline: none; }
.cov-info-tip {
  visibility: hidden; opacity: 0; position: absolute; top: calc(100% + 8px); left: 0;
  width: 240px; max-width: 68vw; background: #27272a; color: #d4d4d8;
  border: 1px solid #3f3f46; border-radius: 7px; padding: 9px 11px;
  font-family: "Inter", -apple-system, sans-serif; font-size: 12px; font-weight: 400; font-style: normal;
  line-height: 1.55; letter-spacing: normal; text-transform: none; text-align: left;
  white-space: normal; z-index: 60; box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  transition: opacity 0.12s;
}
.cov-info:hover .cov-info-tip, .cov-info.open .cov-info-tip { visibility: visible; opacity: 1; }

/* Matrix */
.matrix-block { background: #141416; border: 1px solid #27272a; border-radius: 12px; overflow: hidden; }
.matrix-head { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #27272a; }
.matrix-head .h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fafafa; }
.matrix-head .h .icon { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: rgba(201,151,61,0.18); color: #f0c479; }
.coverage-stat { font-size: 12px; color: #a1a1aa; }
.coverage-stat b { color: #fafafa; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Coverage-board colour key (header, top-right) — cells no longer carry a text
   label, so this is what names green/amber/red/grey. */
.cov-legend { display: inline-flex; gap: 13px; flex-wrap: wrap; align-items: center; }
.cov-legend .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #a1a1aa; letter-spacing: 0.01em; }
.cov-legend .sw { width: 11px; height: 11px; border-radius: 3px; border: 1px solid transparent; flex-shrink: 0; }
.matrix-body { padding: 14px; overflow-x: auto; }
.cat-grid { display: grid; grid-template-columns: repeat(6, minmax(160px, 1fr)); gap: 12px; min-width: 0; }
.cat-col { display: flex; flex-direction: column; }
.cat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 6px 10px; background: #18181b; border: 1px solid #27272a; border-radius: 6px; height: 34px; }
.cat-name { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #d4d4d8; }
.cards { display: flex; flex-direction: column; gap: 10px; }
.acard { border: 1px solid #27272a; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; min-height: 110px; transition: border-color 0.15s; }
.acard.good { background: linear-gradient(180deg, rgba(34,197,94,0.14), rgba(34,197,94,0.06)); border-color: rgba(34,197,94,0.35); }
.acard.bad  { background: linear-gradient(180deg, rgba(239,68,68,0.16), rgba(239,68,68,0.05)); border-color: rgba(239,68,68,0.35); }
.acard-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.acard .title { font-size: 15px; font-weight: 700; color: #fafafa; line-height: 1.3; margin: 0; font-family: "Inter", sans-serif; letter-spacing: -0.01em; }
.access-icons { display: flex; gap: 3px; flex-shrink: 0; }
.ai { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,0.04); color: #52525b; border: 1px solid transparent; cursor: help; position: relative; }
.ai.on { background: rgba(201,151,61,0.2); color: #f0c479; border-color: rgba(201,151,61,0.3); }
.ai .tip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 6px); right: 0; background: #27272a; color: #fafafa; border: 1px solid #3f3f46; border-radius: 6px; padding: 5px 8px; font-size: 10.5px; font-weight: 500; white-space: nowrap; z-index: 10; transition: opacity 0.12s; letter-spacing: normal; }
.ai:hover .tip { visibility: visible; opacity: 1; }
.mitre-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 4px; background: rgba(210,41,41,0.18); color: #fca5a5; border: 1px solid rgba(210,41,41,0.4); cursor: help; position: relative; display: inline-flex; align-items: center; gap: 3px; }
.mitre-badge::before { content: 'M'; display: inline-block; width: 11px; height: 11px; line-height: 11px; text-align: center; font-size: 9px; font-weight: 900; background: #c62828; color: white; border-radius: 2px; }
.mitre-badge .tip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 0; width: max-content; max-width: 240px; background: #27272a; color: #fafafa; border: 1px solid #3f3f46; border-radius: 6px; padding: 7px 10px; font-size: 10.5px; font-weight: 500; white-space: normal; z-index: 60; transition: opacity 0.12s; letter-spacing: normal; text-align: left; line-height: 1.5; box-shadow: 0 8px 22px rgba(0,0,0,0.55); }
.cat-col:last-child .mitre-badge .tip { left: auto; right: 0; }
.mitre-badge:hover .tip { visibility: visible; opacity: 1; }
.not-logged { font-size: 11px; font-weight: 600; color: #f87171; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; margin-top: auto; }
.not-logged::before { content: '✕'; font-weight: 700; }
.acard.clickable { cursor: pointer; }
.acard.clickable:hover { filter: brightness(1.15); }
.payload-badge { font-family: "SF Mono", Monaco, monospace; font-size: 9px; font-weight: 700; color: #f0c479; background: rgba(201,151,61,0.18); border: 1px solid rgba(201,151,61,0.35); border-radius: 4px; padding: 1px 4px; letter-spacing: 0.02em; pointer-events: none; }

/* Payload modal */
.payload-overlay { display: none; position: fixed; inset: 0; background: rgba(3,7,15,0.8); backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; padding: 40px 20px; }
.payload-overlay.open { display: flex; }
.payload-modal { background: #141416; border: 1px solid #27272a; border-radius: 12px; width: min(1240px, 100%); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.4); }
.payload-modal-head { padding: 16px 20px; border-bottom: 1px solid #27272a; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, #18181b, #141416); }
.payload-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #fafafa; }
.pm-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.payload-back { background: #27272a; border: 1px solid #3f3f46; color: #d4d4d8; font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; flex-shrink: 0; }
.payload-back:hover { background: #3f3f46; color: #fafafa; }
.payload-modal-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid #27272a; color: #a1a1aa; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.payload-modal-close:hover { background: #27272a; color: #fafafa; }
.payload-modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.payload-alert-msg { background: #18181b; border: 1px solid #27272a; border-left: 3px solid #c9973d; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: #d4d4d8; line-height: 1.5; }
#payload-top-section { display: flex; flex-direction: column; gap: 14px; }
#payload-top-section:empty { display: none; }
.pm-top-block .payload-alert-label { margin-bottom: 7px; }
.pm-mitre-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 7px; }
.pm-mitre-card { display: flex; align-items: center; gap: 9px; background: linear-gradient(180deg, rgba(210,41,41,0.12), rgba(210,41,41,0.03)); border: 1px solid rgba(210,41,41,0.35); border-left: 3px solid #c62828; border-radius: 8px; padding: 7px 12px; }
.pm-mitre-tid { font-family: "SF Mono", Monaco, monospace; font-size: 11px; font-weight: 700; color: #fca5a5; flex-shrink: 0; }
.pm-mitre-name { font-size: 12px; font-weight: 600; color: #fafafa; line-height: 1.3; }
.pm-splunk { display: flex; align-items: flex-start; gap: 9px; background: #18181b; border: 1px solid #27272a; border-radius: 8px; padding: 10px 14px; font-size: 12px; line-height: 1.5; color: #d4d4d8; }
.pm-splunk .splunk-dot { margin-top: 3px; }
.pm-splunk b { color: #fafafa; }
.pm-splunk-note { color: #a1a1aa; }
.payload-alert-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #a1a1aa; margin-bottom: 5px; }
.payload-json-wrap { position: relative; }
.payload-json-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #a1a1aa; margin-bottom: 6px; }
.payload-json { background: #0a0a0b; border: 1px solid #27272a; border-radius: 8px; padding: 14px 16px; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 11.5px; line-height: 1.65; color: #d4d4d8; white-space: pre; overflow-x: auto; max-height: 500px; overflow-y: auto; }
.payload-json .j-key { color: #7dd3fc; }
.payload-json .j-str { color: #86efac; }
.payload-json .j-num { color: #fdba74; }
.payload-json .j-bool { color: #f9a8d4; }
.payload-json .j-null { color: #94a3b8; }
.payload-json .j-punct { color: #71717a; }
.jt-indent { padding-left: 20px; border-left: 1px solid #27272a; margin: 2px 0 2px 6px; }
.jt-row, .jt-line { line-height: 1.8; }
.jt-toggle { cursor: pointer; user-select: none; color: #71717a; font-size: 10px; margin-right: 3px; display: inline-block; width: 10px; vertical-align: middle; }
.jt-toggle:hover { color: #f0c479; }
.jt-preview { display: none; }
.jt-close { display: inline; }
.jt-row.jt-collapsed > .jt-body { display: none; }
.jt-row.jt-collapsed > .jt-close { display: none; }
.jt-row.jt-collapsed > .jt-preview { display: inline; }
.payload-copy { position: absolute; top: 6px; right: 6px; background: #27272a; border: 1px solid #3f3f46; color: #d4d4d8; font-family: -apple-system, sans-serif; font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; letter-spacing: 0.05em; }
.payload-copy:hover { background: #3f3f46; color: #fafafa; }
/* Unfold-vs-Splunk side-by-side comparison in the event popup */
.pm-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.pm-compare.single { grid-template-columns: 1fr; }
/* JSON-vs-JSON: shared 3-row grid so head row, meta row and JSON row each span both
   columns at equal height → both JSON boxes have identical top AND bottom. */
.pm-compare.jsoncmp { grid-template-rows: auto auto auto; row-gap: 14px; align-items: stretch; }
.pm-compare.jsoncmp .pm-col, .pm-compare.jsoncmp #payload-splunk-evt { display: contents; }
.pm-compare.jsoncmp .pm-col-unfold .pm-col-head { grid-column: 1; grid-row: 1; }
.pm-compare.jsoncmp #payload-alert-section { grid-column: 1; grid-row: 2; align-self: start; }
.pm-compare.jsoncmp .pm-col-unfold .payload-json-wrap { grid-column: 1; grid-row: 3; }
.pm-compare.jsoncmp .pm-col-splunk .pm-col-head { grid-column: 2; grid-row: 1; }
.pm-compare.jsoncmp .pm-sb-status { grid-column: 2; grid-row: 2; align-self: start; }
.pm-compare.jsoncmp .pm-col-splunk .payload-json-wrap { grid-column: 2; grid-row: 3; }
.pm-compare.jsoncmp .payload-json, .pm-compare.jsoncmp .pm-se-box.jsonevt { height: 56vh; max-height: 56vh; }
.pm-compare.single .pm-col-splunk { display: none; }
.pm-compare.single .pm-col-head { display: none; }
.pm-col { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pm-col-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 9px; border-bottom: 1px solid #27272a; }
.pm-col-head .pm-col-bar { width: 20px; height: 3px; border-radius: 2px; }
.pm-col-unfold .pm-col-head { color: #f0c479; } .pm-col-unfold .pm-col-bar { background: #c9973d; }
.pm-col-splunk .pm-col-head { color: #a1a1aa; } .pm-col-splunk .pm-col-bar { background: #71717a; }
@media (max-width: 760px) { .pm-compare { grid-template-columns: 1fr; } }
/* Splunk baseline: concise status line + the recorded event */
.pm-sb-status { display: flex; gap: 11px; align-items: flex-start; background: #18181b; border: 1px solid #27272a; border-radius: 8px; padding: 12px 15px; }
.pm-sb-status .splunk-dot { margin-top: 4px; }
.pm-sb-status.no { border-left: 3px solid #ef4444; } .pm-sb-status.optin { border-left: 3px solid #d0975a; } .pm-sb-status.yes { border-left: 3px solid #22c55e; }
.pm-sb-verdict { font-size: 13px; font-weight: 700; color: #fafafa; margin-bottom: 3px; }
.pm-sb-note { font-size: 11.5px; color: #a1a1aa; line-height: 1.5; }
/* full-width banner used when Splunk records nothing (no side-by-side event) */
.pm-sb-banner { display: flex; gap: 11px; align-items: flex-start; background: #18181b; border: 1px solid #27272a; border-radius: 8px; padding: 12px 15px; }
.pm-sb-banner.no { border-left: 3px solid #ef4444; } .pm-sb-banner.optin { border-left: 3px solid #d0975a; }
.pm-sb-banner .splunk-dot { margin-top: 4px; }
.pm-splunk-evt .payload-json-label { display: flex; align-items: baseline; gap: 8px; }
.pm-splunk-evt .pm-se-src { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: #71717a; }
.pm-se-box { background: #0a0a0b; border: 1px solid #27272a; border-radius: 8px; padding: 20px 22px; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 12px; line-height: 1.9; overflow-x: auto; }
/* audit-trail: bare log line — deliberately thin, amber = coarse capture */
.pm-se-box.logline { border-left: 3px solid #d0975a; color: #cbb489; white-space: pre-wrap; word-break: break-word; padding: 22px 24px; }
.pm-se-box.logline .pm-se-caption { display: block; margin-top: 18px; padding-top: 15px; border-top: 1px solid #27272a; font-family: -apple-system, sans-serif; font-size: 10.5px; color: #a1a1aa; line-height: 1.6; }
.pm-se-box.jsonevt { color: #d4d4d8; white-space: pre; max-height: 360px; overflow-y: auto; }
.pm-se-box.jsonevt .j-key { color: #7dd3fc; } .pm-se-box.jsonevt .j-str { color: #86efac; }
.pm-se-box.jsonevt .j-num { color: #fdba74; } .pm-se-box.jsonevt .j-bool { color: #f9a8d4; }
.pm-se-box.jsonevt .j-null { color: #94a3b8; } .pm-se-box.jsonevt .j-punct { color: #71717a; }
/* Unfold payload — readable field/value table (alternative to the JSON tree) */
.pl-toggle { display: inline-flex; border: 1px solid #3f3f46; border-radius: 6px; overflow: hidden; }
.pl-toggle button { background: transparent; border: none; color: #a1a1aa; font-family: -apple-system, sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; cursor: pointer; }
.pl-toggle button + button { border-left: 1px solid #3f3f46; }
.pl-toggle button.on { background: #27272a; color: #d4d4d8; }
.pm-col-unfold .payload-json-label { display: flex; align-items: center; gap: 10px; }
.pl-table-wrap { background: #0a0a0b; border: 1px solid #27272a; border-radius: 8px; padding: 6px 16px 12px; overflow-x: auto; max-height: 500px; overflow-y: auto; }
.pl-sec { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #7dd3fc; margin: 16px 0 4px; padding-bottom: 5px; border-bottom: 1px solid #27272a; }
.pl-sec:first-child { margin-top: 8px; }
.pl-row { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 14px; padding: 6px 2px; border-bottom: 1px solid rgba(39,39,42,0.5); }
.pl-k { color: #8b97a8; font-family: "Inter", -apple-system, sans-serif; font-size: 12px; word-break: break-word; }
.pl-v { color: #d4d4d8; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 11.5px; word-break: break-word; white-space: pre-wrap; }
.pl-obs { display: flex; gap: 10px; align-items: baseline; padding: 6px 2px; border-bottom: 1px solid rgba(39,39,42,0.5); }
.pl-obs-type { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #f0c479; background: rgba(201,151,61,0.14); border: 1px solid rgba(201,151,61,0.32); border-radius: 4px; padding: 1px 6px; }
.pl-obs-name { color: #a1a1aa; font-family: "SF Mono", Monaco, monospace; font-size: 11px; }
.pl-obs-val { color: #d4d4d8; font-family: "SF Mono", Monaco, monospace; font-size: 11.5px; margin-left: auto; word-break: break-word; }
.pm-compare.jsoncmp .pl-table-wrap { height: 56vh; max-height: 56vh; }


/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(3,7,15,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; padding: 40px 20px; }
.modal-overlay.open { display: flex; }
.modal { background: #141416; border: 1px solid #27272a; border-radius: 12px; width: min(1000px, 100%); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.4); }
.modal-head { padding: 18px 22px; border-bottom: 1px solid #27272a; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, #18181b, #141416); }
.modal-head .m-title { display: flex; align-items: center; gap: 12px; }
.modal-head .m-title h3 { margin: 0; font-size: 17px; font-weight: 700; color: #fafafa; }
.modal-head .m-title .m-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #f0c479; background: rgba(201,151,61,0.18); padding: 3px 8px; border-radius: 10px; }
.modal-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid #27272a; color: #a1a1aa; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: #27272a; color: #fafafa; }
.modal-body { padding: 20px 22px; overflow-y: auto; display: grid; gap: 22px; }
.m-section h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #a1a1aa; margin: 0 0 10px 0; }
.log-entry { background: #18181b; border: 1px solid #27272a; border-left: 3px solid #c9973d; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; font-family: "SF Mono", Monaco, monospace; font-size: 11.5px; line-height: 1.6; color: #d4d4d8; white-space: pre-wrap; word-break: break-word; }
.log-entry .log-meta { font-family: -apple-system, sans-serif; font-size: 10.5px; color: #a1a1aa; display: flex; gap: 14px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.log-entry .log-meta b { color: #d4d4d8; font-weight: 600; }
.hl-user { background: rgba(34,197,94,0.22);   color: #86efac; padding: 1px 4px; border-radius: 3px; }
.hl-ts   { background: rgba(125,211,252,0.18); color: #7dd3fc; padding: 1px 4px; border-radius: 3px; }
.hl-id   { background: rgba(196,181,253,0.2);  color: #c4b5fd; padding: 1px 4px; border-radius: 3px; }
.hl-miss { background: rgba(239,68,68,0.18);   color: #f87171; padding: 1px 4px; border-radius: 3px; text-decoration: line-through; }
.hl-ip   { background: rgba(251,146,60,0.2);   color: #fdba74; padding: 1px 4px; border-radius: 3px; }
.hl-role { background: rgba(244,114,182,0.2);  color: #f9a8d4; padding: 1px 4px; border-radius: 3px; }
.hl-perm { background: rgba(253,224,71,0.15);  color: #fde68a; padding: 1px 4px; border-radius: 3px; }
.hl-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-family: -apple-system, sans-serif; font-size: 11px; color: #a1a1aa; }
.hl-legend .chip { display: inline-flex; align-items: center; gap: 5px; }
.hl-legend .chip::before { content: ''; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hl-legend .chip.u::before { background: rgba(34,197,94,0.45); }
.hl-legend .chip.t::before { background: rgba(125,211,252,0.4); }
.hl-legend .chip.r::before { background: rgba(244,114,182,0.4); }
.hl-legend .chip.i::before { background: rgba(251,146,60,0.4); }
.hl-legend .chip.p::before { background: rgba(253,224,71,0.35); }
.log-stream { background: #0a0a0b; border: 1px solid #27272a; border-radius: 8px; padding: 14px 16px; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 11.5px; line-height: 1.65; color: #d4d4d8; white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-height: 440px; overflow-y: auto; }
.log-stream .lg-level-info { color: #7dd3fc; font-weight: 600; }
.log-stream .lg-level-fine { color: #818cf8; font-weight: 600; }
.log-stream .lg-level-warn { color: #fbbf24; font-weight: 600; }
.log-stream .lg-class { color: #a1a1aa; }
.log-stream .lg-method { color: #a1a1aa; font-style: italic; }
.log-stream .lg-dim { color: #52525b; }
.fields-list { display: flex; flex-direction: column; gap: 6px; }
.field-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #18181b; border: 1px solid #27272a; border-radius: 8px; font-size: 12.5px; }
.field-item .f-mark { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.field-item .f-mark.yes { background: rgba(34,197,94,0.18); color: #4ade80; }
.field-item .f-mark.no  { background: rgba(239,68,68,0.18); color: #f87171; }
.field-item .f-name { font-family: "SF Mono", Monaco, monospace; font-size: 11.5px; color: #fafafa; }
.field-item .f-desc { font-size: 11px; color: #a1a1aa; margin-left: auto; }
.curl-section { grid-column: 1 / -1; }
.mitre-section { grid-column: 1 / -1; }
.mitre-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mitre-card { background: linear-gradient(180deg, rgba(210,41,41,0.08), rgba(210,41,41,0.02)); border: 1px solid rgba(210,41,41,0.3); border-left: 3px solid #c62828; border-radius: 8px; padding: 12px 14px; }
.mitre-card .m-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mitre-card .m-logo { width: 16px; height: 16px; border-radius: 3px; background: #c62828; color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 10.5px; flex-shrink: 0; }
.mitre-card .m-tid { font-family: "SF Mono", Monaco, monospace; font-size: 11px; color: #fca5a5; font-weight: 700; }
.mitre-card .m-name { font-size: 13px; font-weight: 600; color: #fafafa; }
.mitre-card .m-why { font-size: 12px; line-height: 1.5; color: #a1a1aa; }
.curl-box { position: relative; background: #0a0a0b; border: 1px solid #27272a; border-radius: 8px; padding: 14px 16px; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 12px; line-height: 1.7; color: #d4d4d8; white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
.curl-box .cmd { color: #f472b6; font-weight: 600; }
.curl-box .flag { color: #c4b5fd; }
.curl-box .url { color: #7dd3fc; }
.curl-box .str { color: #86efac; }
.curl-box .hdr { color: #fcd34d; }
.curl-copy { position: absolute; top: 10px; right: 10px; background: #27272a; border: 1px solid #3f3f46; color: #d4d4d8; font-family: -apple-system, sans-serif; font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; letter-spacing: 0.05em; }
.curl-copy:hover { background: #3f3f46; color: #fafafa; }
.gui-steps { display: flex; flex-direction: column; gap: 8px; }
.gui-step { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: #d4d4d8; line-height: 1.45; }
.gui-step .step-n { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(201,151,61,0.2); border: 1px solid rgba(201,151,61,0.4); color: #f0c479; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gui-step code { font-family: "SF Mono", Monaco, monospace; font-size: 11.5px; background: #27272a; padding: 1px 5px; border-radius: 4px; color: #93c5fd; }
.loading { display: flex; align-items: center; justify-content: center; height: 200px; color: #71717a; font-size: 14px; }

/* View switcher toolbar */
.view-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 14px 0; flex-wrap: wrap; }
.view-toolbar .action-search { flex: 1; min-width: 220px; margin-bottom: 0; }
.toolbar-btn { background: #141416; border: 1px solid #3f3f46; border-radius: 8px; color: #a1a1aa; font-family: inherit; font-size: 12px; font-weight: 600; padding: 8px 12px; cursor: pointer; }
.toolbar-btn:hover { color: #d4d4d8; border-color: #52525b; }

/* Accordion view */
.acc-section { border: 1px solid #27272a; border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #18181b; }
.acc-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; user-select: none; }
.acc-head:hover { background: #18181b; }
.acc-chev { color: #71717a; font-size: 11px; width: 12px; transition: transform 0.15s; }
.acc-section.open .acc-chev { transform: rotate(90deg); color: #f0c479; }
.acc-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #fafafa; }
.acc-stats { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 11.5px; color: #a1a1aa; flex-wrap: wrap; }
.acc-stat b { color: #d4d4d8; font-weight: 600; }
.acc-meter { width: 90px; height: 5px; border-radius: 3px; background: rgba(239,68,68,0.25); overflow: hidden; }
.acc-meter i { display: block; height: 100%; background: #22c55e; border-radius: 3px; }
.acc-body { display: none; padding: 12px 14px 14px; border-top: 1px solid #27272a; }
.acc-section.open .acc-body { display: block; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.acc-grid .acard { min-height: 74px; }

/* Table view */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #a1a1aa; padding: 8px 12px; border-bottom: 1px solid #3f3f46; cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; background: #141416; }
.tbl th:hover { color: #d4d4d8; }
.tbl th .sort-arrow { font-size: 9px; margin-left: 4px; color: #f0c479; }
.tbl td { padding: 7px 12px; border-bottom: 1px solid #27272a; color: #d4d4d8; }
.tbl td:last-child { white-space: nowrap; }
.tbl tr.trow:hover td { background: #18181b; }
.tbl tr.trow.rowclick { cursor: pointer; }
.tbl .t-cat { font-size: 10.5px; color: #a1a1aa; white-space: nowrap; }
.tbl .t-yes { color: #4ade80; font-weight: 700; }
.tbl .t-no { color: #f87171; font-weight: 700; }
.tbl .t-dim { color: #52525b; }
.tbl .t-mitre { font-family: "SF Mono", Monaco, monospace; font-size: 10.5px; color: #fca5a5; white-space: nowrap; }

/* MITRE heatmap view */
.mitre-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.tac-col { min-width: 158px; width: 158px; flex-shrink: 0; }
.tac-head { padding: 6px 10px; background: #18181b; border: 1px solid #27272a; border-radius: 6px; margin-bottom: 8px; text-align: center; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tac-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #d4d4d8; display: block; line-height: 1.25; }
.tac-count { font-size: 10px; color: #71717a; }
.tech-cell { border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; border: 1px solid #27272a; transition: filter 0.12s; height: 82px; display: flex; flex-direction: column; overflow: hidden; }
.tech-cell:hover { filter: brightness(1.25); }
.tech-cell .tc-id { font-family: "Inter", -apple-system, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #fafafa; }
.tech-cell .tc-name { font-size: 11px; color: #d4d4d8; line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.tech-cell .tc-n { margin-top: auto; }
.tech-cell .tc-n { font-size: 9.5px; color: rgba(229,233,240,0.55); }
.tech-cell.cov-full    { background: rgba(34,197,94,0.20);  border-color: rgba(34,197,94,0.4); }
.tech-cell.cov-partial { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.4); }
.tech-cell.cov-none    { background: rgba(239,68,68,0.16);  border-color: rgba(239,68,68,0.4); }
.tech-cell.cov-na      { background: rgba(120,130,150,0.07); border-color: #27272a; cursor: default; opacity: 0.65; }
.tech-cell.cov-na:hover { filter: none; }
.tech-cell.cov-na .tc-id, .tech-cell.cov-na .tc-name { color: #71717a; }
.tech-cell.cov-na .tc-n { color: rgba(120,130,150,0.6); }
.mitre-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.mitre-scope { display: inline-flex; border: 1px solid #3f3f46; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.ms-btn { background: #141416; border: none; color: #a1a1aa; font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 7px 13px; cursor: pointer; }
.ms-btn + .ms-btn { border-left: 1px solid #3f3f46; }
.ms-btn:hover { color: #d4d4d8; }
.ms-btn.active { background: #27272a; color: #fafafa; }
.mitre-ctrls { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* which ATT&CK release the data encodes — hover explains the v19 renames */
.attack-ver { font-size: 10.5px; font-weight: 500; color: #a1a1aa; border: 1px solid #3f3f46; border-radius: 999px; padding: 2px 9px; white-space: nowrap; letter-spacing: 0.02em; cursor: default; flex-shrink: 0; }
.matrix-head .h .attack-ver { margin-left: 2px; }
/* sub-technique cells nested under a parent (ATT&CK Navigator style) */
.tech-cell.has-sub .tc-id { display: inline-flex; align-items: center; gap: 5px; }
.tc-caret { cursor: pointer; font-size: 8px; color: #a1a1aa; user-select: none; line-height: 1; padding: 2px; margin: -2px 0; }
.tc-caret:hover { color: #fafafa; }
.subtech-wrap { margin: 0 0 0 11px; border-left: 1px solid #3f3f46; padding-left: 8px; display: flex; flex-direction: column; }
.tech-cell.sub { height: auto; min-height: 54px; padding: 6px 9px; }
.tech-cell.sub .tc-id { font-size: 9.5px; color: #cbd3e1; }
.tech-cell.sub .tc-name { font-size: 10px; margin-top: 1px; -webkit-line-clamp: 2; }
.tech-cell.sub .tc-n { font-size: 9px; }
.mitre-legend { display: flex; gap: 16px; font-size: 11px; color: #a1a1aa; margin-bottom: 0; }
.mitre-legend .chip { display: inline-flex; align-items: center; gap: 6px; }
.mitre-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tech-modal-list { display: flex; flex-direction: column; gap: 6px; }
.tech-action-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #18181b; border: 1px solid #27272a; border-radius: 8px; font-size: 12.5px; }
.tech-action-row .f-mark { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.tech-action-row .ta-cat { font-size: 10.5px; color: #a1a1aa; margin-left: auto; white-space: nowrap; padding-left: 10px; }
.tech-action-row .ta-subs { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.ta-sub { font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: #f0c479; background: rgba(201,151,61,0.14); border: 1px solid rgba(201,151,61,0.32); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.ta-sub.none { color: #71717a; background: transparent; border: 1px dashed #3f3f46; font-weight: 500; }

/* ── Threats: shared category colors set inline via style ── */

/* Variant A — Threat Lens filter bar */
.lens-bar { border: 1px solid #27272a; background: linear-gradient(180deg, rgba(210,41,41,0.05), rgba(11,15,23,0)); border-radius: 10px; margin: 14px 14px 0; padding: 10px 12px; }
.lens-bar-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; cursor: pointer; user-select: none; }
.lens-bar:not(.open) .lens-bar-head { margin-bottom: 0; }
.lens-caret { font-size: 10px; color: #a1a1aa; width: 10px; flex-shrink: 0; }
.lens-bar-head .lens-icon { font-size: 12px; }
.lens-bar-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #e29a9a; }
.lens-bar-hint { font-size: 10.5px; color: #a1a1aa; margin-left: 2px; }
.lens-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lens-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; border: 1px solid #3f3f46; background: #141416; color: #d4d4d8; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.lens-chip:hover { border-color: #52525b; }
.lens-chip .lc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lens-chip .lc-n { font-size: 10px; color: #a1a1aa; font-weight: 700; }
.lens-chip.active { color: #fafafa; }
.lens-banner { margin: 12px 14px 0; border: 1px solid #3f3f46; border-left-width: 3px; border-radius: 10px; padding: 13px 16px; background: #18181b; }
.lens-banner .lb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.lens-banner .lb-name { font-size: 15px; font-weight: 700; color: #fafafa; }
.lens-banner .lb-meta { font-size: 11px; color: #a1a1aa; }
.lens-banner .lb-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 20px; }
.lens-banner .lb-cve { font-family: "SF Mono", Monaco, monospace; font-size: 10.5px; color: #fca5a5; background: rgba(210,41,41,0.14); border: 1px solid rgba(210,41,41,0.3); padding: 1px 6px; border-radius: 4px; }
.lens-banner .lb-summary { font-size: 12.5px; line-height: 1.55; color: #d4d4d8; margin-bottom: 9px; }
.lb-ttps { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.lb-ttp { font-family: "SF Mono", Monaco, monospace; font-size: 10px; color: #fca5a5; background: rgba(210,41,41,0.1); border: 1px solid rgba(210,41,41,0.25); border-radius: 4px; padding: 2px 6px; }
.lens-banner .lb-foot { display: flex; align-items: center; gap: 14px; font-size: 11px; color: #a1a1aa; flex-wrap: wrap; }
.lens-banner .lb-cov b { color: #d4d4d8; }
.lens-clear { background: transparent; border: 1px solid #3f3f46; color: #a1a1aa; font-family: inherit; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; margin-left: auto; }
.lens-clear:hover { background: #27272a; color: #fafafa; }
.lens-banner .lb-src { color: #7dd3fc; text-decoration: none; }
.lens-banner .lb-src:hover { text-decoration: underline; }
.acard.lens-hit { box-shadow: 0 0 0 1px rgba(226,154,154,0.5), 0 0 14px rgba(210,41,41,0.18); }

/* Variant B — Threat Library catalog */
.threat-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.threat-card { border: 1px solid #27272a; border-left-width: 3px; border-radius: 12px; background: #18181b; padding: 15px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 9px; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.threat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.threat-card .tc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.threat-card .tc-name { font-size: 14.5px; font-weight: 700; color: #fafafa; line-height: 1.25; }
.tc-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.threat-card .tc-line { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #a1a1aa; flex-wrap: wrap; }
.threat-card .tc-actor { color: #d4d4d8; font-weight: 600; }
.threat-card .tc-cve { font-family: "SF Mono", Monaco, monospace; font-size: 10px; color: #bf9095; }
.threat-card .tc-summary { font-size: 12px; line-height: 1.5; color: #a1a1aa; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.threat-card .tc-cov { margin-top: auto; }
.threat-card .tc-cov-bar { height: 5px; border-radius: 3px; background: rgba(168,106,111,0.30); overflow: hidden; margin-top: 4px; }
.threat-card .tc-cov-bar i { display: block; height: 100%; background: #97a06a; }
.threat-card .tc-cov-txt { font-size: 10.5px; color: #a1a1aa; display: flex; justify-content: space-between; }
.threat-card .tc-cov-txt b { color: #d4d4d8; }

/* ── Stories view: illustrated threat tiles + guided attack tour ── */
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.story-tile { position: relative; border: 1px solid #27272a; border-radius: 12px; background: #18181b; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform 0.15s, box-shadow 0.15s; }
.story-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.5); }
.story-art { display: block; width: 100%; }
.story-body { padding: 13px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.story-kicker { display: flex; align-items: center; gap: 8px; }
.story-year { font-size: 10.5px; color: #a1a1aa; font-weight: 700; letter-spacing: 0.05em; }
.story-title { font-family: "Inter", sans-serif; font-size: 17px; font-weight: 700; color: #fafafa; letter-spacing: -0.01em; line-height: 1.2; }
.story-hook { font-size: 12px; line-height: 1.55; color: #a1a1aa; flex: 1; }
.story-foot { display: flex; align-items: center; gap: 12px; font-size: 10.5px; color: #a1a1aa; border-top: 1px solid #27272a; padding-top: 9px; }
.story-foot b { color: #d4d4d8; }
.story-cta { margin-left: auto; color: #f0c479; font-weight: 700; letter-spacing: 0.04em; font-size: 10px; white-space: nowrap; }
.story-tile:hover .story-cta { color: #c7d2fe; }

/* Guided tour overlay */
.tour-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: radial-gradient(1200px 600px at 70% -10%, rgba(94,129,172,0.10), transparent), #09090b; flex-direction: column; }
.tour-overlay.open { display: flex; }
.tour-top { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-bottom: 1px solid #27272a; background: rgba(13,19,32,0.7); }
.tour-name { font-size: 13.5px; font-weight: 700; color: #fafafa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tour-count { margin-left: auto; font-size: 10.5px; color: #a1a1aa; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tour-x { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid #27272a; color: #a1a1aa; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.tour-x:hover { background: #27272a; color: #fafafa; }
.tour-main { flex: 1; display: grid; grid-template-columns: 264px 1fr; min-height: 0; }
.tour-rail { border-right: 1px solid #27272a; overflow-y: auto; padding: 16px 12px; }
.tour-node { display: flex; gap: 11px; padding: 7px 9px 9px; border-radius: 8px; cursor: pointer; align-items: flex-start; position: relative; }
.tour-node:hover { background: #1c1c1f; }
.tour-node .tn-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #3f3f46; background: #141416; color: #71717a; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.tour-node .tn-line { position: absolute; left: 19px; top: 31px; bottom: -8px; width: 2px; background: #27272a; }
.tour-node:last-child .tn-line { display: none; }
.tour-node .tn-txt { min-width: 0; padding-top: 3px; }
.tour-node .tn-label { font-size: 11.5px; font-weight: 600; color: #a1a1aa; line-height: 1.3; }
.tour-node .tn-phase { display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.tour-node.done .tn-label { color: #a1a1aa; }
.tour-node.current { background: rgba(201,151,61,0.10); }
.tour-node.current .tn-label { color: #fafafa; }
.tour-stage-wrap { overflow-y: auto; padding: 32px 44px; display: flex; justify-content: center; }
.tour-stage { width: min(760px, 100%); animation: tourIn 0.28s ease; }
@keyframes tourIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ts-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #71717a; }
.ts-title { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 700; color: #fafafa; margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.15; }
.ts-sub { font-size: 12px; color: #a1a1aa; margin-bottom: 16px; line-height: 1.4; }
.ts-desc { font-size: 14.5px; line-height: 1.7; color: #d4d4d8; margin: 0 0 22px; }
.ts-hero { border-radius: 12px; overflow: hidden; border: 1px solid #27272a; margin-bottom: 22px; }
.ts-hero svg { display: block; width: 100%; }
.ts-meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ts-chip { font-size: 11px; color: #a1a1aa; background: #18181b; border: 1px solid #3f3f46; padding: 4px 11px; border-radius: 20px; font-weight: 600; }
.ts-chip b { color: #fafafa; font-weight: 700; }
.ts-panel { background: #18181b; border: 1px solid #27272a; border-radius: 12px; padding: 15px 17px; margin-bottom: 14px; }
.ts-panel-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #a1a1aa; margin-bottom: 11px; }
.ts-touch-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ts-action-chip { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 700; color: #fafafa; background: #18181b; border: 1px solid #3f3f46; border-radius: 8px; padding: 7px 12px; }
.ts-detect { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-detect .rp-pane { flex: none; }
.ts-verdict { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ts-verdict-n { font-family: "Inter", sans-serif; font-size: 42px; font-weight: 700; color: #fafafa; line-height: 1; white-space: nowrap; }
.ts-verdict-n small { font-size: 14px; color: #a1a1aa; font-weight: 600; }
.ts-verdict-side { flex: 1; min-width: 220px; }
.ts-verdict-side .acs-meter { max-width: none; margin-top: 8px; height: 7px; border-radius: 4px; background: rgba(191,97,106,0.3); overflow: hidden; }
.ts-verdict-side .acs-meter i { display: block; height: 100%; background: #a3be8c; }
.ts-verdict-sub { font-size: 12px; color: #a1a1aa; line-height: 1.5; }
.ts-cat-block { margin-bottom: 4px; }
.ts-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ts-cat-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #d4d4d8; }
.ts-cat-n { font-size: 10.5px; color: #71717a; font-weight: 600; }
.ts-cat-open { margin-left: auto; background: transparent; border: 1px solid #3f3f46; border-radius: 6px; color: #f0c479; font-family: inherit; font-size: 10.5px; font-weight: 600; padding: 4px 11px; cursor: pointer; white-space: nowrap; }
.ts-cat-open:hover { background: #27272a; color: #fafafa; }
.ts-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-nav-card { display: flex; flex-direction: column; gap: 7px; background: #18181b; border: 1px solid #27272a; border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.ts-nav-card:hover { transform: translateY(-2px); border-color: #52525b; box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
.ts-nav-ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(201,151,61,0.14); border: 1px solid rgba(201,151,61,0.3); color: #f0c479; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ts-nav-title { font-family: "Inter", sans-serif; font-size: 14.5px; font-weight: 700; color: #fafafa; }
.ts-nav-title span { color: #f0c479; }
.ts-nav-desc { font-size: 11.5px; line-height: 1.5; color: #a1a1aa; }
.tour-foot { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-top: 1px solid #27272a; background: rgba(13,19,32,0.7); }
.tour-btn { background: #18181b; border: 1px solid #3f3f46; color: #d4d4d8; padding: 9px 18px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 12.5px; font-family: inherit; }
.tour-btn:hover { background: #27272a; color: #fafafa; }
.tour-btn:disabled { opacity: 0.35; cursor: default; }
.tour-btn.primary { background: rgba(201,151,61,0.18); border-color: rgba(201,151,61,0.45); color: #c7d2fe; }
.tour-btn.primary:hover { background: rgba(201,151,61,0.28); }
.tour-hint { margin: 0 auto; font-size: 10.5px; color: #52525b; letter-spacing: 0.03em; }
@media (max-width: 900px) { .tour-main { grid-template-columns: 1fr; } .tour-rail { display: none; } .tour-stage-wrap { padding: 24px 18px; } }

/* Attack detail modal (reuses modal-overlay/modal) */
.atk-cat-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 20px; }
.atk-meta-row { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11.5px; color: #a1a1aa; margin-bottom: 4px; }
.atk-meta-row b { color: #d4d4d8; font-weight: 600; }
.atk-meta-row .lb-cve { font-family: "SF Mono", Monaco, monospace; color: #fca5a5; }
.atk-summary { font-size: 14.5px; line-height: 1.85; color: #d4d4d8; }
.atk-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.atk-action { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: #18181b; border: 1px solid #27272a; border-radius: 8px; font-size: 12.5px; color: #fafafa; }
.atk-action.clickable { cursor: pointer; }
.atk-action.clickable:hover { border-color: #52525b; background: #27272a; }
.atk-action .f-mark { width: 19px; height: 19px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; }
.atk-action .f-mark.yes { background: rgba(34,197,94,0.18); color: #4ade80; }
.atk-action .f-mark.no  { background: rgba(239,68,68,0.18); color: #f87171; }
.atk-action .aa-cat { font-size: 10px; color: #a1a1aa; margin-left: auto; white-space: nowrap; }
.atk-action .payload-badge { margin-left: auto; }
.atk-action .payload-badge + .aa-cat { margin-left: 8px; }
.atk-cov-summary { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #a1a1aa; }
.atk-cov-summary .acs-meter { flex: 1; max-width: 240px; height: 6px; border-radius: 3px; background: rgba(239,68,68,0.25); overflow: hidden; }
.atk-cov-summary .acs-meter i { display: block; height: 100%; background: #22c55e; }
.atk-src-list { display: flex; flex-wrap: wrap; gap: 7px; }
.atk-src-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 20px; background: #18181b; border: 1px solid #3f3f46; color: #d4d4d8; text-decoration: none; font-size: 12px; font-weight: 600; }
.atk-src-chip:hover { border-color: #52525b; color: #fafafa; background: #27272a; }
.atk-src-ext { color: #a1a1aa; font-size: 10px; }

/* Splunk baseline dot */
.acard-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.acard-foot-right { margin-left: auto; display: inline-flex; align-items: center; }
.not-logged-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #f87171; display: inline-flex; align-items: center; gap: 5px; }
.not-logged-tag::before { content: '✕'; font-weight: 700; }
.splunk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; cursor: help; position: relative; display: inline-block; vertical-align: middle; }
.splunk-dot.yes { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.45); }
.splunk-dot.no  { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.45); }
.splunk-dot.optin { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); opacity: 0.55; }
.splunk-dot.partial { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.45); }
.splunk-dot .tip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 7px); right: -4px; background: #27272a; color: #fafafa; border: 1px solid #3f3f46; border-radius: 6px; padding: 6px 9px; font-size: 10.5px; font-weight: 500; width: 210px; z-index: 20; transition: opacity 0.12s; letter-spacing: normal; text-align: left; line-height: 1.45; white-space: normal; }
.splunk-dot .tip b { color: #fafafa; }
.splunk-dot .tip code { display: block; margin: 4px 0; padding: 5px 7px; background: #141416; border-radius: 4px; font-family: "SF Mono", Monaco, monospace; font-size: 9.5px; color: #a3be8c; white-space: pre-wrap; word-break: break-word; max-height: 100px; overflow: auto; }
.splunk-dot:hover .tip { visibility: visible; opacity: 1; }
.splunk-legend { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; color: #a1a1aa; }
.splunk-legend .sl-item { display: inline-flex; align-items: center; gap: 6px; }
.splunk-legend .sl-sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.splunk-info { display: inline-flex; align-items: center; gap: 12px; }
.splunk-info-label { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #d4d4d8; cursor: help; }
.splunk-q { width: 14px; height: 14px; border-radius: 50%; background: #27272a; border: 1px solid #3f3f46; color: #a1a1aa; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.splunk-info-tip { visibility: hidden; opacity: 0; position: absolute; top: calc(100% + 8px); left: 0; width: 300px; background: #27272a; color: #d4d4d8; border: 1px solid #3f3f46; border-radius: 8px; padding: 9px 11px; font-size: 11px; font-weight: 500; line-height: 1.5; z-index: 30; transition: opacity 0.12s; letter-spacing: normal; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.splunk-info-label:hover .splunk-info-tip { visibility: visible; opacity: 1; }

/* Attack Replay view (Unfold vs Splunk side-by-side) */
.rp-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rp-toolbar select { flex: 1; min-width: 0; padding: 9px 12px; }
.rp-nav { width: 36px; height: 36px; flex-shrink: 0; background: #141416; border: 1px solid #3f3f46; border-radius: 8px; color: #a1a1aa; font-size: 14px; cursor: pointer; }
.rp-nav:hover { background: #27272a; color: #fafafa; }
.rp-nav:disabled { opacity: 0.35; cursor: default; }
.rp-score { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 6px; }
.rp-score-card { border: 1px solid #27272a; border-radius: 12px; padding: 14px 18px; background: #18181b; }
.rp-score-card.unfold { border-color: rgba(129,161,193,0.45); background: linear-gradient(180deg, rgba(129,161,193,0.10), rgba(129,161,193,0.02)); }
.rp-score-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #a1a1aa; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.rp-score-label .rp-logo { width: 8px; height: 8px; border-radius: 50%; }
.rp-score-n { font-size: 22px; font-weight: 700; color: #fafafa; font-family: "Inter", sans-serif; }
.rp-score-n small { font-size: 12px; font-weight: 600; color: #a1a1aa; }
.rp-score-sub { font-size: 11px; color: #a1a1aa; margin-top: 2px; min-height: 15px; }
.rp-score-meter { height: 6px; border-radius: 3px; background: rgba(191,97,106,0.3); overflow: hidden; margin-top: 9px; }
.rp-score-meter i { display: block; height: 100%; border-radius: 3px; background: #a3be8c; }
/* Replay flow: two lanes + center spine */
.rp-flow { position: relative; margin-top: 16px; display: grid; grid-template-columns: 1fr 68px 1fr; }
.rp-flow::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(50% - 34px); background: linear-gradient(180deg, rgba(129,161,193,0.10), rgba(129,161,193,0.03)); border: 1px solid rgba(129,161,193,0.30); border-radius: 4px; pointer-events: none; }
.rp-flow::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: calc(50% - 34px); background: rgba(148,163,184,0.03); border: 1px solid #3f3f46; border-radius: 4px; pointer-events: none; }
.rp-spine { position: absolute; left: 50%; top: 52px; bottom: 20px; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, #52525b 0%, #3f3f46 100%); }
.rp-flow > * { position: relative; z-index: 1; }
.rp-flow > .rp-spine { position: absolute; z-index: 0; }
.rp-lane-h { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; padding: 14px 10px 6px; }
.rp-lane-h.unfold { color: #9fc6ee; }
.rp-lane-h.splunk { color: #a1a1aa; }
.rp-lane-h .rp-lane-bar { display: block; width: 46px; height: 3px; border-radius: 2px; margin: 7px auto 0; }
.rp-lane-h.unfold .rp-lane-bar { background: #81a1c1; box-shadow: 0 0 10px rgba(129,161,193,0.5); }
.rp-lane-h.splunk .rp-lane-bar { background: #71717a; }
.rp-vs { align-self: center; justify-self: center; width: 36px; height: 36px; border-radius: 50%; background: #18181b; border: 1px solid #52525b; color: #a1a1aa; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: 0.05em; }
.rp-step-mid { grid-column: 1 / -1; text-align: center; padding: 14px 100px 12px; }
.rp-mid-card { display: inline-block; background: #18181b; border: 1px solid #3f3f46; border-radius: 12px; padding: 10px 20px 12px; max-width: 680px; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.rp-mid-arrow { color: #6d7d99; font-size: 15px; line-height: 1; margin-bottom: 10px; text-shadow: 0 0 8px rgba(129,161,193,0.35); }
.rp-mid-num { display: flex; width: 32px; height: 32px; border-radius: 50%; border: 2px solid; background: #141416; font-size: 13px; font-weight: 800; align-items: center; justify-content: center; margin: 0 auto 9px; }
.rp-mid-line { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rp-phase { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2.5px 9px; border-radius: 20px; white-space: nowrap; border: 1px solid; }
.rp-step-title { font-size: 15.5px; font-weight: 700; color: #fafafa; font-family: "Inter", sans-serif; }
.rp-step-desc { font-size: 12px; color: #a1a1aa; line-height: 1.5; margin: 6px auto 0; max-width: 640px; }
.rp-cell { padding: 0 16px 16px; min-width: 0; display: flex; }
.rp-flow-end { grid-column: 1 / -1; height: 14px; }
.rp-pane { flex: 1; border: 1px solid #27272a; border-radius: 10px; padding: 12px 14px; background: #18181b; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rp-pane.hit { border-color: rgba(163,190,140,0.55); background: linear-gradient(180deg, rgba(163,190,140,0.14), rgba(163,190,140,0.04)); box-shadow: inset 0 1px 0 rgba(163,190,140,0.2); }
.rp-pane.optin { border-color: rgba(235,203,139,0.45); background: linear-gradient(180deg, rgba(235,203,139,0.10), rgba(235,203,139,0.02)); }
.rp-pane.miss { border: 1px dashed rgba(191,97,106,0.6); background: rgba(191,97,106,0.08); }
.rp-pane-status { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.rp-pane-status .rp-ico { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; flex-shrink: 0; }
.rp-pane.hit .rp-pane-status { color: #b9d8a2; }
.rp-pane.hit .rp-ico { background: rgba(163,190,140,0.25); }
.rp-pane.optin .rp-pane-status { color: #ebcb8b; }
.rp-pane.optin .rp-ico { background: rgba(235,203,139,0.16); }
.rp-pane.miss .rp-pane-status { color: #d08a91; }
.rp-pane.miss .rp-ico { background: rgba(191,97,106,0.22); }
.rp-alert { font-size: 11.5px; line-height: 1.5; color: #d4d4d8; background: rgba(255,255,255,0.03); border-left: 2px solid rgba(129,161,193,0.6); border-radius: 4px; padding: 6px 9px; }
.rp-note { font-size: 11px; line-height: 1.45; color: #a1a1aa; }
.rp-view-evt { align-self: flex-start; margin-top: auto; background: transparent; border: 1px solid #3f3f46; border-radius: 6px; color: #f0c479; font-family: inherit; font-size: 10.5px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
.rp-view-evt:hover { background: #27272a; color: #fafafa; }
/* shared "view event" button spanning both detect panes (the popup shows both sides) */
.ts-detect-actions { display: flex; justify-content: center; margin-top: 14px; }
.ts-detect-actions .rp-view-evt { margin-top: 0; align-self: auto; font-size: 11px; padding: 6px 14px; }
.rp-miss-ghost { font-size: 11px; color: #71717a; font-style: italic; }

/* Dashboard (top-of-app aggregation) */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 20px; }
.dash-card { background: #18181b; border: 1px solid #27272a; border-radius: 12px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); min-width: 0; }
.dash-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #a1a1aa; }
.dash-body { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.donut-wrap { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.donut-wrap svg { transform: rotate(-90deg); display: block; }
.donut-wrap svg circle { transition: opacity 0.12s; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font-size: 21px; font-weight: 700; color: #fafafa; line-height: 1.1; font-family: "Inter", sans-serif; }
.donut-center span { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #71717a; margin-top: 2px; }
.dash-legend { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #a1a1aa; min-width: 0; flex: 1; }
.dl-item { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dl-dot { width: 8px; height: 8px; border-radius: 2.5px; flex-shrink: 0; }
.dl-label { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; flex: 1; min-width: 0; }
.dl-n { color: #71717a; font-weight: 700; font-size: 10.5px; white-space: nowrap; }
.dash-note { display: none; }
.tl-chart { display: flex; align-items: flex-end; gap: 7px; height: 118px; flex: 1; padding-top: 18px; min-width: 0; }
.tl-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; height: 100%; justify-content: flex-end; }
.tl-bar { width: 100%; max-width: 34px; background: linear-gradient(180deg, #81a1c1, #5e81ac); border-radius: 4px 4px 2px 2px; position: relative; min-height: 3px; }
.tl-bar.tl-zero { background: #27272a; }
.tl-bar .tl-v { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; color: #f0c479; }
.tl-year { font-size: 9px; color: #a1a1aa; font-weight: 600; white-space: nowrap; }

/* ── Coverage-only apps (MITRE ATT&CK × Splunk add-on coverage board) ── */

/* The page's verdict, stated in words before any grid cell. Replaces the coverage
   donut that used to sit here — same three numbers, read instead of decoded. */
/* Stat tiles under the app name — one per coverage state, count + percent. */
.cov-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.cov-stat { flex: 1 1 0; min-width: 150px; border: 1px solid; border-radius: 10px; padding: 12px 14px; }
.cov-stat-top { display: flex; align-items: baseline; gap: 8px; }
.cov-stat-n { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cov-stat-pct { font-size: 13px; font-weight: 600; color: #a1a1aa; font-variant-numeric: tabular-nums; }
.cov-stat-label { margin-top: 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #a1a1aa; line-height: 1.35; }

/* Sidebar campaign list — the board's spotlight control, parked beside the board
   instead of stacked above it. Capped height because Jenkins/GitLab carry 12-13. */
.sb-count { display: inline-block; background: #27272a; color: #a1a1aa; border-radius: 999px; padding: 1px 6px; font-size: 9.5px; font-weight: 700; margin-left: 5px; letter-spacing: 0.02em; vertical-align: 1px; }
.cov-camp-section { margin-top: 22px; }
.cov-camp-list { display: flex; flex-direction: column; gap: 5px; margin: 0 -4px; padding: 0 4px 2px; }
.cov-camp {
  display: flex; align-items: flex-start; gap: 7px;
  background: #18181b; border: 1px solid #27272a; border-left: 2px solid var(--cc, #71717a);
  border-radius: 5px; padding: 7px 7px 7px 8px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cov-camp:hover { background: #1c1c1f; border-color: #3f3f46; }
.cov-camp.on { background: rgba(201,151,61,0.10); border-color: rgba(201,151,61,0.42); border-left-color: var(--cc, #f0c479); }
.cov-camp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cov-camp-name {
  font-size: 13px; font-weight: 600; color: #d4d4d8; line-height: 1.36;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cov-camp.on .cov-camp-name { color: #fafafa; }
.cov-camp-meta { font-size: 9.5px; color: #71717a; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.cov-camp-meta b { color: #f0c479; font-weight: 700; }

/* How a campaign fares end to end — proportional bar plus the sentence. */
.cov-mtr { display: flex; flex-direction: column; gap: 6px; }
.cov-mtr-bar { display: flex; height: 8px; gap: 2px; }
.cov-mtr-bar i { display: block; height: 100%; border-radius: 1px; }
.cov-mtr-lbl { font-size: 11.5px; color: #a1a1aa; letter-spacing: 0.01em; }
.cov-mtr-lbl b { color: #e08a92; font-weight: 700; }

/* Campaign story, in the attack modal shared with the action-matrix path.
   The spine turns the rows from a list into a sequence. */
.cov-atk-steps { display: flex; flex-direction: column; gap: 8px; position: relative; }
.cov-atk-steps::before { content: ""; position: absolute; left: 9px; top: 16px; bottom: 16px; width: 1px; background: #27272a; }
.cov-atk-step { display: flex; gap: 9px; align-items: flex-start; position: relative; border-radius: 5px; padding: 3px 5px 3px 3px; margin: -3px -5px -3px -3px; }
.cov-atk-step-go { cursor: pointer; transition: background 0.12s; }
.cov-atk-step-go:hover { background: #18181b; }
.cov-atk-step-go:hover .cov-atk-go { color: #f0c479; }
.cov-atk-tname { font-size: 10.5px; color: #a1a1aa; }
.cov-atk-go { font-size: 10px; color: #71717a; margin-top: 3px; letter-spacing: 0.02em; transition: color 0.12s; }
.cov-atk-back {
  background: transparent; border: 1px solid #3f3f46; border-radius: 6px;
  color: #a1a1aa; font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 6px 11px; cursor: pointer; letter-spacing: 0.02em; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cov-atk-back:hover { color: #f0c479; border-color: rgba(201,151,61,0.45); }
.cov-atk-n { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #27272a; color: #a1a1aa; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; font-variant-numeric: tabular-nums; }
.cov-atk-step-body { min-width: 0; flex: 1; }
.cov-atk-step-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11.5px; }
.cov-atk-step-head b { color: #fafafa; font-weight: 700; font-variant-numeric: tabular-nums; }
.cov-atk-phase { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.cov-atk-cov { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; margin-left: auto; }
.cov-atk-cov i { width: 5px; height: 5px; border-radius: 50%; display: block; flex: none; }
.cov-atk-desc { font-size: 11.5px; color: #a1a1aa; line-height: 1.55; margin-top: 3px; }
.cov-atk-spot {
  background: rgba(201,151,61,0.14); border: 1px solid rgba(201,151,61,0.42); border-radius: 6px;
  color: #f0c479; font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 8px 13px; cursor: pointer; letter-spacing: 0.02em;
  transition: background 0.12s;
}
.cov-atk-spot:hover { background: rgba(201,151,61,0.22); }

/* ── Attack Path: ONE selected campaign, walked out step by step ──
   Only the campaign chosen in the sidebar renders here, so there is room to put
   the narration on screen instead of hiding it in a title tooltip. */
#cov-paths-slot { display: flex; flex-direction: column; gap: 14px; }

.cov-path-head { display: flex; align-items: center; gap: 9px; }
.cov-path-name { font-size: 14px; font-weight: 600; color: #fafafa; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-path-yr { font-size: 11px; color: #a1a1aa; flex: none; font-variant-numeric: tabular-nums; }
.cov-path-verdict { font-size: 11.5px; font-weight: 700; margin-left: auto; flex: none; }
.cov-path-verdict.bad { color: #e08a92; }
.cov-path-verdict.ok { color: #e3ce9d; }
.cov-path-verdict.good { color: #bcd0a8; }
.cov-path-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11.5px; color: #a1a1aa; }
.cov-path-meta b { color: #d4d4d8; font-weight: 600; }
.cov-path-empty { font-size: 11.5px; color: #71717a; padding: 10px 12px; border: 1px dashed #27272a; border-radius: 5px; }
.cov-path-foot { display: flex; }

/* The step flow: a full-width card per step, joined by a downward arrow. */
.cov-steps { display: flex; flex-direction: column; }
/* Connector: a drawn stem plus an arrowhead, centred under the step discs and
   tinted with the verdict of the step it leads into. */
.cov-step-arrow {
  width: 45px; flex: none;
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 0 3px; user-select: none;
  color: #66717f;
}
.csa-line { width: 4px; height: 20px; border-radius: 2px 2px 0 0; background: currentColor; opacity: 0.8; }
/* Drawn, not a font glyph — ▼ renders small and inconsistently across platforms. */
.csa-head {
  width: 0; height: 0; font-size: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid currentColor;
}
.cov-step-arrow.miss { color: #bf616a; }
.cov-step-arrow.part { color: #ebcb8b; }
.cov-step-arrow.ok   { color: #a3be8c; }
.cov-step {
  display: flex; gap: 12px; align-items: stretch;
  background: #18181b; border: 1px solid #27272a;
  border-left: 3px solid #71717a; border-radius: 6px;
  padding: 11px 13px 11px 0;
  transition: background 0.12s, border-color 0.12s;
}
.cov-step.miss { border-left-color: #bf616a; }
.cov-step.part { border-left-color: #ebcb8b; }
.cov-step.ok   { border-left-color: #a3be8c; }
.cov-step.go { cursor: pointer; }
.cov-step.go:hover { background: #1c1c1f; border-color: #3f3f46; }
.cov-step.go:hover .cov-step-go { color: #f0c479; }

.cov-step-rail { flex: none; width: 42px; display: flex; justify-content: center; padding-top: 1px; }
.cov-step-n {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: #27272a; color: #a1a1aa;
}
.cov-step.miss .cov-step-n { background: rgba(191,97,106,0.20); color: #e08a92; }
.cov-step.part .cov-step-n { background: rgba(235,203,139,0.20); color: #ebcb8b; }
.cov-step.ok   .cov-step-n { background: rgba(163,190,140,0.20); color: #bcd0a8; }

.cov-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cov-step-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cov-step-id { font-size: 13px; font-weight: 700; color: #fafafa; font-variant-numeric: tabular-nums; }
.cov-step-name { font-size: 12.5px; color: #d4d4d8; }
.cov-step-ph { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 3px; margin-left: auto; flex: none; }
.cov-step-untracked { color: #52525b; background: transparent; font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 500; }
.cov-step-desc { font-size: 12px; color: #a1a1aa; line-height: 1.6; max-width: 84ch; }
.cov-step-foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 10.5px; }
.cov-step-verdict { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 9.5px; }
.cov-step-verdict i { width: 6px; height: 6px; border-radius: 50%; display: block; flex: none; }
.cov-step.miss .cov-step-verdict { color: #e08a92; } .cov-step.miss .cov-step-verdict i { background: #bf616a; }
.cov-step.part .cov-step-verdict { color: #ebcb8b; } .cov-step.part .cov-step-verdict i { background: #ebcb8b; }
.cov-step.ok   .cov-step-verdict { color: #bcd0a8; } .cov-step.ok   .cov-step-verdict i { background: #a3be8c; }
.cov-step-via { font-size: 10.5px; color: #71717a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-step-go { font-size: 10px; color: #52525b; margin-left: auto; flex: none; transition: color 0.12s; letter-spacing: 0.02em; }

/* Nothing selected yet. */
/* One horizontal row of tactic columns (like .mitre-grid) rather than wrapping unrelated
   tactics onto shared rows -- wrapping made cards from different tactics visually imply
   row-alignment they have no reason to have, since each column's technique list is an
   independent length. */
/* Tactic columns WRAP rather than scrolling sideways, so the techniques that used
   to sit off-screen now fill the vertical space the grid was already reserving for
   them. Nothing is hidden and there is no void.
   The earlier objection to wrapping — that unrelated tactics appeared to share a
   row for no reason — is answered by giving each tactic its own bordered panel: a
   grid of cards is meant to line up, a set of bare columns is not. */
.cov-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.cov-grid .tac-col {
  width: 190px; min-width: 190px; flex-shrink: 0;
  background: #141416; border: 1px solid #27272a; border-radius: 7px;
  padding: 7px 7px 8px;
}
.cov-grid .tac-col .tac-head { background: transparent; border: none; border-bottom: 1px solid #27272a; border-radius: 0; height: auto; padding: 2px 2px 7px; margin-bottom: 8px; }
/* No right-edge fade any more — the grid wraps, so nothing is clipped to hint at. */
/* Cells carry only id + name now (the coverage state moved to the header legend),
   so they hug their content instead of reserving a third line's worth of height —
   otherwise the removed subtitle leaves a void below the name. `.tc-name` must not
   flex-grow here (the base rule stretches it to fill a taller cell on the matrix
   heatmap, which still has its own bottom label). */
.cov-grid .tech-cell { height: auto; min-height: 0; }
.cov-grid .tech-cell .tc-name { flex: 0 0 auto; }
.cov-scope-note { font-size: 12.5px; color: #a1a1aa; margin: -4px 0 16px; line-height: 1.5; display: none; }
.cov-nosiem-banner { font-size: 12.5px; color: #d4d4d8; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; padding: 9px 14px; margin: 20px 0 0; line-height: 1.5; }
.cov-sources { font-size: 11px; color: #71717a; margin-top: 16px; line-height: 1.6; word-break: break-all; display: none; }
.cov-sources a { color: #7a92b5; text-decoration: none; }
.cov-sources a:hover { text-decoration: underline; }
.cov-modal-sample { margin: 0; padding: 12px 14px; background: #141416; border: 1px solid #3f3f46; border-left: 3px solid #a3be8c; border-radius: 6px; font-family: "SF Mono", Monaco, monospace; font-size: 12px; color: #a3be8c; white-space: pre-wrap; word-break: break-word; line-height: 1.6; max-height: 220px; overflow: auto; }
.cov-cmd-details { margin-top: 4px; }
.cov-cmd-summary { cursor: pointer; font-size: 11.5px; color: #a1a1aa; list-style: none; user-select: none; }
.cov-cmd-summary::-webkit-details-marker { display: none; }
.cov-cmd-summary::before { content: "▸ "; }
.cov-cmd-details[open] .cov-cmd-summary::before { content: "▾ "; }
.cov-cmd-summary:hover { color: #a9b4c2; }
.cov-modal-command { margin: 8px 0 0; padding: 12px 14px; background: #141416; border: 1px solid #3f3f46; border-left: 3px solid #5e81ac; border-radius: 6px; font-family: "SF Mono", Monaco, monospace; font-size: 11.5px; color: #81a1c1; white-space: pre-wrap; word-break: break-word; line-height: 1.6; max-height: 220px; overflow: auto; }
.cov-modal-command-text { margin: 8px 0 0; }
/* "Unlocked by" callout in the technique modal — the concrete config/plugin/tier
   change that would turn a partial technique into real coverage. Only actionable
   upgrades render; kind "none" entries exist in the data but show no callout. */
.cov-upgrade { border: 1px solid rgba(245,158,11,0.4); border-left: 3px solid #f59e0b; background: rgba(245,158,11,0.07); border-radius: 8px; padding: 12px 14px; }
.cov-up-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cov-up-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fbd38d; }
.cov-up-kind { font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; }
.cov-up-kind.k-config { background: rgba(245,158,11,0.16); border: 1px solid rgba(245,158,11,0.4); color: #fbd38d; }
.cov-up-kind.k-plugin { background: rgba(129,161,193,0.16); border: 1px solid rgba(129,161,193,0.4); color: #a3c0e0; }
.cov-up-kind.k-tier   { background: rgba(180,142,173,0.16); border: 1px solid rgba(180,142,173,0.4); color: #cfaec9; }
.cov-up-kind.k-ingest { background: rgba(163,190,140,0.14); border: 1px solid rgba(163,190,140,0.38); color: #b8cfa4; }
.cov-up-knob { font-family: "SF Mono", Monaco, monospace; font-size: 12.5px; font-weight: 600; color: #fafafa; margin-bottom: 4px; }
.cov-up-detail { font-size: 13.5px; color: #d4d4d8; line-height: 1.75; }
.cov-up-shared { font-size: 11.5px; color: #f0c479; margin-top: 8px; }
.cov-spotlight-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 14px; border: 1px solid; border-radius: 8px; font-size: 12px; color: #d4d4d8; animation: covSlideIn 0.25s ease; }
.cov-spotlight-bar b { color: #fafafa; }
.cov-spotlight-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.cov-spotlight-bar .lens-clear { margin-left: auto; flex-shrink: 0; }
@keyframes covSlideIn { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }
.tech-cell.cov-dimmed { opacity: 0.22; filter: saturate(0.4); transform: scale(0.97); }
.tech-cell.cov-dimmed:hover { opacity: 0.5; }
.tech-cell.cov-spotlit { animation: covPulse 1.4s ease-out 1; box-shadow: 0 0 0 2px #f0c479, 0 0 20px rgba(240,196,121,0.6); z-index: 1; }
.cov-grid { transition: none; }
.tech-cell { transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
@keyframes covPulse {
  0%   { box-shadow: 0 0 0 2px #f0c479, 0 0 0 0 rgba(240,196,121,0.7); }
  60%  { box-shadow: 0 0 0 2px #f0c479, 0 0 0 14px rgba(240,196,121,0); }
  100% { box-shadow: 0 0 0 2px #f0c479, 0 0 20px rgba(240,196,121,0.6); }
}
/* .tbl td:last-child forces white-space:nowrap at higher specificity than the rule
   above — this cell is that last column, so beat it explicitly or the note text
   spills out past the tooltip's border instead of wrapping. */

/* ── Mobile / narrow screens ── */
@media (max-width: 640px) {
  /* Shell: the fixed sidebar becomes a sticky top bar.
     minmax(0,1fr) + min-width:0 stop the grid track from blowing out to
     the content's min-content width (which would overflow the viewport). */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .main { min-width: 0; }
  .sidebar { border-right: none; border-bottom: 1px solid #27272a; padding: 12px 14px; position: sticky; top: 0; z-index: 20; overflow-x: hidden; }
  .home-btn { display: inline-block; margin-top: 0; padding: 6px 11px; font-size: 12px; }
  .sb-app { margin-top: 10px; padding: 8px 11px; font-size: 13.5px; }
  .sb-section { margin-bottom: 0; }
  .sb-label { display: none; }
  /* View switcher: horizontal, scrollable chips */
  .app-nav { flex-direction: row; overflow-x: auto; gap: 6px; margin-top: 10px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav-link { flex-shrink: 0; padding: 7px 12px; font-size: 12.5px; }

  /* Main content: tighter padding, smaller heading */
  .main { padding: 16px 14px; }
  .title { font-size: 19px; }
  .main-card { padding: 14px; border-radius: 12px; }
  .matrix-head { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }

  /* MITRE view scope/sub-technique toggles: the 3-button sub-technique group
     is wider than a narrow viewport and was overflowing its container with no
     way to reach the clipped buttons. Stack each group full-width instead. */
  .mitre-ctrls { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .mitre-scope { display: flex; width: 100%; }
  .mitre-scope .ms-btn { flex: 1; min-width: 0; padding: 7px 2px; font-size: 10px; white-space: normal; text-align: center; }

  /* Dashboard cards stack */
  .dash { gap: 10px; margin-bottom: 16px; }
  /* Coverage page: the sidebar is a sticky top bar here, so the campaign list
     becomes one horizontally-scrollable row of chips (same treatment .app-nav
     gets above) instead of eating the whole viewport on a 13-campaign app. */
  .cov-camp-section { margin-top: 12px; }
  .cov-camp-list { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; gap: 6px; padding-bottom: 3px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cov-camp-list::-webkit-scrollbar { display: none; }
  .cov-camp { flex-shrink: 0; width: 172px; align-items: center; }
  .cov-camp-name { -webkit-line-clamp: 1; }
  /* Attack path: the step cards already stack, they just get tighter. */
  .cov-path-head { flex-wrap: wrap; gap: 6px; }
  .cov-path-verdict { margin-left: 0; }
  .cov-step { gap: 8px; padding: 10px 11px 10px 0; }
  .cov-step-rail { width: 32px; }
  .cov-step-ph { margin-left: 0; }
  .cov-step-arrow { width: 35px; }
  .cov-step-go { display: none; }

  /* Accordion: one full-width column, cards as compact rows (no boxy squares) */
  .acc-grid { grid-template-columns: 1fr; gap: 8px; }
  .acc-grid .acard { min-height: 0; padding: 11px 13px; flex-direction: row; align-items: center; gap: 12px; }
  .acc-grid .acard .title { font-size: 13.5px; flex: 1; min-width: 0; }
  .acc-grid .acard-foot { margin-top: 0; flex-shrink: 0; }
  .acc-grid .acard-foot-right { margin-left: 8px; }
  .acc-head { gap: 10px; padding: 12px 14px; }
  .acc-stats { gap: 10px; }
}