:root {
  --bt-red:  #ef4444;
  --bt-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  --bt-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================================
   HERO CHIPS
   ========================================================================= */
    .hero-chips { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
    .hero-chip {
      font-family: var(--bt-mono); font-size: .7rem; padding: .3rem .75rem;
      border-radius: 4px; border: 1px solid; font-weight: 600;
    }
    .chip-mitre { border-color: #c2410c; color: #c2410c; background: rgba(249,115,22,.1); }
    .chip-steps { border-color: #0891b2; color: #0891b2; background: rgba(34,211,238,.08); }
    .chip-src   { border-color: #7e22ce; color: #7e22ce; background: rgba(167,139,250,.08); }

/* =========================================================================
   INCIDENT TABS — wrapping pill grid
   ========================================================================= */
    .incident-tabs {
      background: var(--primary-color, #2c3e50); border-bottom: 1px solid #1e293b;
      display: flex; flex-wrap: wrap; gap: .45rem;
      padding: .75rem 1rem; justify-content: center;
    }
    .itab {
      padding: .5rem .9rem; font-size: .78rem; font-weight: 600;
      color: rgba(255,255,255,.65); cursor: pointer;
      border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
      transition: color .2s, border-color .2s, background .2s;
      white-space: nowrap; background: rgba(255,255,255,.05);
      font-family: var(--bt-sans);
    }
    .itab:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
    .itab.active { color: #ffffff; background: rgba(239,68,68,.15); border-color: var(--bt-red); }
    .itab-prov {
      display: inline-block; margin-left: .35rem; font-size: .6rem;
      padding: .08rem .35rem; border-radius: 3px; font-family: var(--bt-mono); font-weight: 700;
    }
    .prov-aws   { background: rgba(251,191,36,.15); color: #fbbf24; }
    .prov-azure { background: rgba(96,165,250,.15);  color: #60a5fa; }

/* =========================================================================
   MAIN CONTENT — LIGHT MODE DEFAULTS
   ========================================================================= */
    .kc-main { background: var(--light-bg, #f8f9fa); min-height: 60vh; padding: 0 0 4rem; }
    .incident-panel { display: none; }
    .incident-panel.active { display: block; }

    /* Incident header */
    .inc-header {
      background: #ffffff; border-bottom: 1px solid #e2e8f0;
      padding: 2rem 1.5rem 1.5rem; max-width: 960px; margin: 0 auto;
    }
    .inc-meta { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .85rem; align-items: center; }
    .inc-year { font-family: var(--bt-mono); font-size: .75rem; font-weight: 700; color: #64748b; }
    .sev-badge { font-family: var(--bt-mono); font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: .2rem .6rem; border-radius: 3px; }
    .sev-critical { background: rgba(239,68,68,.15); color: var(--bt-red); border: 1px solid rgba(239,68,68,.3); }
    .prov-tag { font-family: var(--bt-mono); font-size: .68rem; font-weight: 700; padding: .2rem .6rem; border-radius: 3px; }
    .inc-title { font-family: var(--bt-mono); font-size: clamp(1rem, 2.5vw, 1.45rem); font-weight: 700; color: #0f172a; margin: 0 0 .75rem; line-height: 1.35; }
    .inc-summary { font-size: .91rem; color: #475569; line-height: 1.7; max-width: 720px; margin-bottom: 1rem; }
    .inc-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .inc-stat { font-size: .8rem; color: #64748b; }
    .inc-stat strong { color: #1e293b; }
    .pm-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-family: var(--bt-mono); color: var(--secondary-color, #3498db); text-decoration: none; margin-top: .75rem; margin-right: .75rem; }
    .pm-link:hover { text-decoration: underline; }

    /* Kill chain */
    .kill-chain { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; position: relative; }
    .kill-chain::before {
      content: ''; position: absolute;
      left: calc(1.5rem + 19px); top: 2rem; bottom: 4rem;
      width: 1px;
      background: linear-gradient(to bottom, #ef4444 0%, #7c3aed 50%, #0ea5e9 100%);
      opacity: .4;
    }
    @media (min-width: 640px) { .kill-chain::before { left: calc(1.5rem + 23px); } }

    /* Phase label */
    .phase-lbl {
      font-family: var(--bt-mono); font-size: .63rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .12em; color: #475569;
      margin: 1.75rem 0 .7rem 3.5rem;
      display: flex; align-items: center; gap: .75rem;
    }
    @media (min-width: 640px) { .phase-lbl { margin-left: 4.4rem; } }
    .phase-lbl::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
    .ph-recon   { color: #b45309; }
    .ph-init    { color: #dc2626; }
    .ph-exec    { color: #ea580c; }
    .ph-cred    { color: #a16207; }
    .ph-priv    { color: #7e22ce; }
    .ph-persist { color: #4338ca; }
    .ph-exfil   { color: #0891b2; }
    .ph-impact  { color: #059669; }
    .ph-disco   { color: #64748b; }

    /* Step */
    .kc-step { display: flex; gap: 1rem; margin-bottom: .9rem; animation: slideIn .3s ease both; }
    @keyframes slideIn { from { opacity:0; transform: translateX(-8px); } to { opacity:1; transform: none; } }
    .kc-step:nth-child(2) { animation-delay:.05s; }
    .kc-step:nth-child(3) { animation-delay:.10s; }
    .kc-step:nth-child(4) { animation-delay:.15s; }
    .kc-step:nth-child(5) { animation-delay:.20s; }
    .kc-step:nth-child(6) { animation-delay:.25s; }
    .kc-step:nth-child(7) { animation-delay:.30s; }

    .step-num {
      flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
      border: 1.5px solid #cbd5e1; background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--bt-mono); font-size: .72rem; font-weight: 700;
      color: #94a3b8; position: relative; z-index: 1; margin-top: .1rem;
    }
    .step-r .step-num  { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
    .step-o .step-num  { border-color: #f97316; color: #f97316; background: #fff7ed; }
    .step-y .step-num  { border-color: #f59e0b; color: #f59e0b; background: #fefce8; }
    .step-p .step-num  { border-color: #a855f7; color: #a855f7; background: #faf5ff; }
    .step-b .step-num  { border-color: #6366f1; color: #6366f1; background: #eef2ff; }
    .step-c .step-num  { border-color: #22d3ee; color: #22d3ee; background: #ecfeff; }
    .step-g .step-num  { border-color: #10b981; color: #10b981; background: #f0fdf4; }

    .step-body {
      flex: 1; background: #ffffff; border: 1px solid #e2e8f0;
      border-radius: 8px; padding: .95rem 1.2rem; transition: border-color .2s;
    }
    .step-body:hover { border-color: #cbd5e1; }

    .step-hdr { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .45rem; }
    .step-title { font-size: .92rem; font-weight: 700; color: #0f172a; flex: 1; min-width: 160px; }

    .mt {
      font-family: var(--bt-mono); font-size: .63rem; font-weight: 700;
      padding: .2rem .52rem; border-radius: 3px; white-space: nowrap;
      text-decoration: none; transition: opacity .15s;
    }
    .mt:hover { opacity: .75; text-decoration: underline; }
    .mt-ta { background: rgba(249,115,22,.15); color: #c2410c; border: 1px solid rgba(249,115,22,.3); }
    .mt-ex { background: rgba(239,68,68,.15);  color: #dc2626; border: 1px solid rgba(239,68,68,.3); }
    .mt-pe { background: rgba(168,85,247,.15); color: #7e22ce; border: 1px solid rgba(168,85,247,.3); }
    .mt-de { background: rgba(99,102,241,.15); color: #4338ca; border: 1px solid rgba(99,102,241,.3); }
    .mt-ca { background: rgba(234,179,8,.15);  color: #a16207; border: 1px solid rgba(234,179,8,.3); }
    .mt-di { background: rgba(20,184,166,.15); color: #0d9488; border: 1px solid rgba(20,184,166,.3); }
    .mt-lm { background: rgba(59,130,246,.15); color: #2563eb; border: 1px solid rgba(59,130,246,.3); }
    .mt-co { background: rgba(16,185,129,.15); color: #059669; border: 1px solid rgba(16,185,129,.3); }
    .mt-ef { background: rgba(34,211,238,.15); color: #0891b2; border: 1px solid rgba(34,211,238,.3); }
    .mt-p2 { background: rgba(168,85,247,.15); color: #7e22ce; border: 1px solid rgba(168,85,247,.3); }

    .step-desc { font-size: .86rem; color: #475569; line-height: 1.65; margin-bottom: .55rem; }
    .step-code {
      font-family: var(--bt-mono); font-size: .73rem;
      background: #f1f5f9; border: 1px solid #e2e8f0;
      border-radius: 5px; padding: .55rem .8rem;
      color: #475569; margin-bottom: .55rem; line-height: 1.6;
    }
    .step-code .hl { color: #b45309; }
    .step-tags { display: flex; gap: .35rem; flex-wrap: wrap; }
    .stag { font-size: .66rem; padding: .13rem .48rem; border-radius: 3px; background: #f1f5f9; color: #64748b; font-family: var(--bt-mono); }

    /* Defender box */
    .def-box { margin-top: 2rem; background: #eff6ff; border: 1px solid #93c5fd; border-left: 3px solid #3b82f6; border-radius: 0 8px 8px 0; padding: 1.2rem 1.4rem; }
    .def-box h3 { font-family: var(--bt-mono); font-size: .75rem; font-weight: 700; color: #1d4ed8; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .7rem; }
    .def-items { display: flex; flex-direction: column; gap: .45rem; }
    .def-item { display: flex; gap: .7rem; font-size: .83rem; color: #334155; line-height: 1.55; }
    .def-item::before { content: '\2192'; color: #3b82f6; flex-shrink: 0; font-family: var(--bt-mono); font-weight: 700; margin-top: .05rem; }

    /* Sources */
    .src-box { margin-top: 1.4rem; padding: .9rem 1.1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
    .src-box h4 { font-family: var(--bt-mono); font-size: .65rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .55rem; }
    .src-links { display: flex; gap: .45rem; flex-wrap: wrap; }
    .src-link { font-size: .73rem; color: var(--secondary-color, #3498db); text-decoration: none; font-family: var(--bt-mono); padding: .18rem .52rem; border: 1px solid #cbd5e1; border-radius: 3px; transition: background .15s; }
    .src-link:hover { background: rgba(52,152,219,.08); }

    /* CTA */
    .contribute-cta { max-width: 960px; margin: 2.5rem auto 0; padding: 1.4rem; background: #ffffff; border: 1px dashed #e2e8f0; border-radius: 8px; text-align: center; }
    .contribute-cta h3 { font-family: var(--bt-mono); color: #0f172a; font-size: .9rem; margin: 0 0 .35rem; }
    .contribute-cta p { color: #64748b; font-size: .83rem; margin: 0 0 .9rem; }
    .btn-mono { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--bt-mono); font-size: .78rem; font-weight: 700; padding: .5rem 1rem; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); color: #dc2626; border-radius: 5px; text-decoration: none; transition: background .15s; }
    .btn-mono:hover { background: rgba(239,68,68,.2); }

/* Provider tag colour variants */
.prov-purple { background: rgba(168,85,247,.15); color: #7e22ce; }
.prov-green  { background: rgba(34,197,94,.15);  color: #16a34a; }
.prov-blue   { background: rgba(96,165,250,.15);  color: #2563eb; }

/* Mitnick community note banner */
.mitnick-note {
  margin-top: 1rem; padding: .75rem 1rem;
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.25);
  border-radius: 6px; font-size: .8rem;
  color: #7e22ce; font-family: var(--bt-mono);
}
.mitnick-note a { color: #7e22ce; }

/* =========================================================================
   DARK MODE — auto (prefers-color-scheme) + explicit toggle
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .incident-tabs { background: #0f172a; border-color: #1e293b; }
  :root:not([data-theme]) .kc-main { background: #080d18; }
  :root:not([data-theme]) .inc-header { background: #0f172a; border-color: #1e293b; }
  :root:not([data-theme]) .inc-title { color: #f1f5f9; }
  :root:not([data-theme]) .inc-summary { color: #94a3b8; }
  :root:not([data-theme]) .inc-stat { color: #64748b; }
  :root:not([data-theme]) .inc-stat strong { color: #cbd5e1; }
  :root:not([data-theme]) .step-body { background: #0d1424; border-color: #1e293b; }
  :root:not([data-theme]) .step-body:hover { border-color: #334155; }
  :root:not([data-theme]) .step-title { color: #e2e8f0; }
  :root:not([data-theme]) .step-desc { color: #94a3b8; }
  :root:not([data-theme]) .step-code { background: #070b14; border-color: #1e293b; color: #64748b; }
  :root:not([data-theme]) .step-code .hl { color: #f59e0b; }
  :root:not([data-theme]) .stag { background: #1e293b; color: #64748b; }
  :root:not([data-theme]) .kill-chain::before { opacity: .25; }
  :root:not([data-theme]) .phase-lbl::after { background: #1e293b; }
  :root:not([data-theme]) .phase-lbl { color: #475569; }
  :root:not([data-theme]) .ph-recon   { color: #f59e0b; }
  :root:not([data-theme]) .ph-init    { color: #ef4444; }
  :root:not([data-theme]) .ph-exec    { color: #f97316; }
  :root:not([data-theme]) .ph-cred    { color: #fde047; }
  :root:not([data-theme]) .ph-priv    { color: #a855f7; }
  :root:not([data-theme]) .ph-persist { color: #6366f1; }
  :root:not([data-theme]) .ph-exfil   { color: #22d3ee; }
  :root:not([data-theme]) .ph-impact  { color: #10b981; }
  :root:not([data-theme]) .ph-disco   { color: #94a3b8; }
  :root:not([data-theme]) .step-num { border-color: #334155; background: #0f172a; color: #475569; }
  :root:not([data-theme]) .step-r .step-num { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.1); }
  :root:not([data-theme]) .step-o .step-num { border-color: #f97316; color: #f97316; background: rgba(249,115,22,.1); }
  :root:not([data-theme]) .step-y .step-num { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.1); }
  :root:not([data-theme]) .step-p .step-num { border-color: #a855f7; color: #a855f7; background: rgba(168,85,247,.1); }
  :root:not([data-theme]) .step-b .step-num { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,.1); }
  :root:not([data-theme]) .step-c .step-num { border-color: #22d3ee; color: #22d3ee; background: rgba(34,211,238,.1); }
  :root:not([data-theme]) .step-g .step-num { border-color: #10b981; color: #10b981; background: rgba(16,185,129,.1); }
  :root:not([data-theme]) .mt-ta { color: #fb923c; }
  :root:not([data-theme]) .mt-ex { color: #f87171; }
  :root:not([data-theme]) .mt-pe { color: #c084fc; }
  :root:not([data-theme]) .mt-de { color: #a5b4fc; }
  :root:not([data-theme]) .mt-ca { color: #fde047; }
  :root:not([data-theme]) .mt-di { color: #5eead4; }
  :root:not([data-theme]) .mt-lm { color: #93c5fd; }
  :root:not([data-theme]) .mt-co { color: #6ee7b7; }
  :root:not([data-theme]) .mt-ef { color: #67e8f9; }
  :root:not([data-theme]) .mt-p2 { color: #c084fc; }
  :root:not([data-theme]) .pm-link { color: #38bdf8; }
  :root:not([data-theme]) .def-box { background: #0a1628; border-color: #1e3a5f; border-left-color: #38bdf8; }
  :root:not([data-theme]) .def-box h3 { color: #38bdf8; }
  :root:not([data-theme]) .def-item { color: #94a3b8; }
  :root:not([data-theme]) .def-item::before { color: #38bdf8; }
  :root:not([data-theme]) .src-box { background: #0a0f1e; border-color: #1e293b; }
  :root:not([data-theme]) .src-box h4 { color: #475569; }
  :root:not([data-theme]) .src-link { color: #38bdf8; border-color: #1e3a5f; }
  :root:not([data-theme]) .src-link:hover { background: rgba(56,189,248,.08); }
  :root:not([data-theme]) .contribute-cta { background: #0d1424; border-color: #1e293b; }
  :root:not([data-theme]) .contribute-cta h3 { color: #e2e8f0; }
  :root:not([data-theme]) .contribute-cta p { color: #64748b; }
  :root:not([data-theme]) .btn-mono { color: #f87171; }
  :root:not([data-theme]) .prov-purple { color: #c084fc; }
  :root:not([data-theme]) .prov-green { color: #4ade80; }
  :root:not([data-theme]) .prov-blue { color: #60a5fa; }
  :root:not([data-theme]) .chip-mitre { border-color: #f97316; color: #fb923c; background: rgba(249,115,22,.1); }
  :root:not([data-theme]) .chip-steps { border-color: #22d3ee; color: #22d3ee; background: rgba(34,211,238,.08); }
  :root:not([data-theme]) .chip-src   { border-color: #a78bfa; color: #c4b5fd; background: rgba(167,139,250,.08); }
  :root:not([data-theme]) .mitnick-note { color: #c084fc; }
  :root:not([data-theme]) .mitnick-note a { color: #c084fc; }
}

[data-theme="dark"] .incident-tabs { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .kc-main { background: #080d18; }
[data-theme="dark"] .inc-header { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .inc-title { color: #f1f5f9; }
[data-theme="dark"] .inc-summary { color: #94a3b8; }
[data-theme="dark"] .inc-stat { color: #64748b; }
[data-theme="dark"] .inc-stat strong { color: #cbd5e1; }
[data-theme="dark"] .step-body { background: #0d1424; border-color: #1e293b; }
[data-theme="dark"] .step-body:hover { border-color: #334155; }
[data-theme="dark"] .step-title { color: #e2e8f0; }
[data-theme="dark"] .step-desc { color: #94a3b8; }
[data-theme="dark"] .step-code { background: #070b14; border-color: #1e293b; color: #64748b; }
[data-theme="dark"] .step-code .hl { color: #f59e0b; }
[data-theme="dark"] .stag { background: #1e293b; color: #64748b; }
[data-theme="dark"] .kill-chain::before { opacity: .25; }
[data-theme="dark"] .phase-lbl::after { background: #1e293b; }
[data-theme="dark"] .phase-lbl { color: #475569; }
[data-theme="dark"] .ph-recon   { color: #f59e0b; }
[data-theme="dark"] .ph-init    { color: #ef4444; }
[data-theme="dark"] .ph-exec    { color: #f97316; }
[data-theme="dark"] .ph-cred    { color: #fde047; }
[data-theme="dark"] .ph-priv    { color: #a855f7; }
[data-theme="dark"] .ph-persist { color: #6366f1; }
[data-theme="dark"] .ph-exfil   { color: #22d3ee; }
[data-theme="dark"] .ph-impact  { color: #10b981; }
[data-theme="dark"] .ph-disco   { color: #94a3b8; }
[data-theme="dark"] .step-num { border-color: #334155; background: #0f172a; color: #475569; }
[data-theme="dark"] .step-r .step-num { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.1); }
[data-theme="dark"] .step-o .step-num { border-color: #f97316; color: #f97316; background: rgba(249,115,22,.1); }
[data-theme="dark"] .step-y .step-num { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.1); }
[data-theme="dark"] .step-p .step-num { border-color: #a855f7; color: #a855f7; background: rgba(168,85,247,.1); }
[data-theme="dark"] .step-b .step-num { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,.1); }
[data-theme="dark"] .step-c .step-num { border-color: #22d3ee; color: #22d3ee; background: rgba(34,211,238,.1); }
[data-theme="dark"] .step-g .step-num { border-color: #10b981; color: #10b981; background: rgba(16,185,129,.1); }
[data-theme="dark"] .mt-ta { color: #fb923c; }
[data-theme="dark"] .mt-ex { color: #f87171; }
[data-theme="dark"] .mt-pe { color: #c084fc; }
[data-theme="dark"] .mt-de { color: #a5b4fc; }
[data-theme="dark"] .mt-ca { color: #fde047; }
[data-theme="dark"] .mt-di { color: #5eead4; }
[data-theme="dark"] .mt-lm { color: #93c5fd; }
[data-theme="dark"] .mt-co { color: #6ee7b7; }
[data-theme="dark"] .mt-ef { color: #67e8f9; }
[data-theme="dark"] .mt-p2 { color: #c084fc; }
[data-theme="dark"] .pm-link { color: #38bdf8; }
[data-theme="dark"] .def-box { background: #0a1628; border-color: #1e3a5f; border-left-color: #38bdf8; }
[data-theme="dark"] .def-box h3 { color: #38bdf8; }
[data-theme="dark"] .def-item { color: #94a3b8; }
[data-theme="dark"] .def-item::before { color: #38bdf8; }
[data-theme="dark"] .src-box { background: #0a0f1e; border-color: #1e293b; }
[data-theme="dark"] .src-box h4 { color: #475569; }
[data-theme="dark"] .src-link { color: #38bdf8; border-color: #1e3a5f; }
[data-theme="dark"] .src-link:hover { background: rgba(56,189,248,.08); }
[data-theme="dark"] .contribute-cta { background: #0d1424; border-color: #1e293b; }
[data-theme="dark"] .contribute-cta h3 { color: #e2e8f0; }
[data-theme="dark"] .contribute-cta p { color: #64748b; }
[data-theme="dark"] .btn-mono { color: #f87171; }
[data-theme="dark"] .prov-purple { color: #c084fc; }
[data-theme="dark"] .prov-green { color: #4ade80; }
[data-theme="dark"] .prov-blue { color: #60a5fa; }
[data-theme="dark"] .chip-mitre { border-color: #f97316; color: #fb923c; background: rgba(249,115,22,.1); }
[data-theme="dark"] .chip-steps { border-color: #22d3ee; color: #22d3ee; background: rgba(34,211,238,.08); }
[data-theme="dark"] .chip-src   { border-color: #a78bfa; color: #c4b5fd; background: rgba(167,139,250,.08); }
[data-theme="dark"] .mitnick-note { color: #c084fc; }
[data-theme="dark"] .mitnick-note a { color: #c084fc; }