/* ── Splash screen ─────────────────────── */
    @keyframes splashDismiss {
      0%, 82%  { opacity:1; visibility:visible; }
      100%     { opacity:0; visibility:hidden; }
    }
    #splash {
      position:fixed; inset:0; z-index:9999;
      background:#0a0e1a;
      display:flex; align-items:center; justify-content:center;
      animation:splashDismiss 3.65s ease forwards;
    }
    #splash img { width:min(560px, 85vw); height:min(560px, 85vh); object-fit:contain; }
    /* ─────────────────────────────────────── */
        :root {
      --bg-dark:  #0a0e1a;
      --bg-card:  #111827;
      --bg-card2: #1a2236;
      --accent:   #00d4ff;
      --accent2:  #0066cc;
      --red:      #ff3b3b;
      --orange:   #ff8c00;
      --yellow:   #ffd700;
      --green:    #00e676;
      --cyan:     #00bcd4;
      --purple:   #b94fff;
      --text:     #e2e8f0;
      --muted:    #8892a4;
      --border:   #1e2d4a;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html, body { min-height:100%; }
    body {
      background: var(--bg-dark);
      color: var(--text);
      font-family: "Segoe UI", system-ui, sans-serif;
      min-height: 100vh;
    }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ── HEADER ── */
    header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 24px; height: 60px;
      background: #060b14; border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 1000;
    }
    .brand { display:flex; align-items:center; gap:12px; }
    .brand-icon {
      width:72px; height:72px; border-radius:8px;
      object-fit:contain; flex-shrink:0; display:block;
    }
    .modal-hero-icon {
      width:90px; height:90px; object-fit:contain;
      display:block; margin: 0 auto 10px; border-radius:8px;
    }
    .brand-name { font-size:18px; font-weight:700; letter-spacing:1px; }
    .brand-name span { color: var(--accent); }
    .brand-sub { font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:-2px; }
    .status-bar { display:flex; align-items:center; gap:16px; }
    .live-badge {
      display:flex; align-items:center; gap:6px;
      background:rgba(0,230,118,.1); border:1px solid rgba(0,230,118,.3);
      border-radius:20px; padding:4px 12px;
      font-size:11px; font-weight:600; color:var(--green);
      text-transform:uppercase; letter-spacing:1px;
    }
    .live-dot { width:7px; height:7px; background:var(--green); border-radius:50%; animation:blink 1.2s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
    .threat-badge {
      padding:4px 14px; border-radius:20px; font-size:11px;
      font-weight:700; letter-spacing:1px; text-transform:uppercase; border:1px solid;
      color:var(--red); background:rgba(255,59,59,.1); border-color:rgba(255,59,59,.4);
    }
    .hdr-clock { font-size:12px; color:var(--muted); font-family:monospace; }
    .refresh-countdown { font-size:11px; color:var(--accent); border-left:1px solid var(--border); padding-left:14px; font-variant-numeric:tabular-nums; min-width:60px; font-family:monospace; }
    .about-btn {
      background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.25);
      color:var(--accent); border-radius:6px; padding:4px 12px;
      font-size:12px; cursor:pointer;
    }
    .about-btn:hover { background:rgba(0,212,255,.15); }

    /* ── LAYOUT ── */
    .layout {
      display: grid;
      grid-template-columns: 340px 1fr 340px;
      grid-template-rows: 1fr;
      height: calc(100vh - 60px);
      overflow: hidden;
    }

    /* ── PANELS ── */
    .panel {
      background: var(--bg-card);
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .panel.right { border-right:none; border-left:1px solid var(--border); }
    .panel-header {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border);
      display:flex; align-items:center; justify-content:space-between;
      flex-shrink:0;
    }
    .panel-title { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); }
    .panel-body { flex:1; overflow-y:auto; padding:10px; }
    .panel-body::-webkit-scrollbar { width:4px; }
    .panel-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

    /* ── ACTOR CARDS ── */
    .actor-card {
      background: var(--bg-card2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: border-color .2s, background .2s;
    }
    .actor-card:hover { border-color: var(--accent); background:#1f2e48; }
    .actor-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
    .actor-name { font-size:13px; font-weight:700; color:var(--text); }
    .actor-alias { font-size:10px; color:var(--muted); margin-top:1px; }
    .threat-pill {
      font-size:10px; font-weight:700; padding:2px 8px;
      border-radius:12px; border:1px solid; text-transform:uppercase; letter-spacing:.5px;
      white-space:nowrap;
    }
    .pill-critical { color:var(--red);    background:rgba(255,59,59,.12);  border-color:rgba(255,59,59,.4); }
    .pill-high     { color:var(--orange); background:rgba(255,140,0,.12);  border-color:rgba(255,140,0,.4); }
    .pill-elevated { color:var(--yellow); background:rgba(255,215,0,.12);  border-color:rgba(255,215,0,.4); }
    .pill-state    { color:var(--purple); background:rgba(185,79,255,.12); border-color:rgba(185,79,255,.4); }
    .pill-ransomware{ color:var(--red);   background:rgba(255,59,59,.12);  border-color:rgba(255,59,59,.4); }
    .actor-origin {
      font-size:10px; color:var(--muted); margin-bottom:5px;
      display:flex; align-items:center; gap:6px;
    }
    .origin-flag { font-size:13px; }
    .actor-tactics { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
    .tactic-tag {
      font-size:9px; font-weight:600; padding:2px 7px;
      border-radius:10px; background:rgba(0,212,255,.08);
      border:1px solid rgba(0,212,255,.2); color:var(--cyan);
      text-transform:uppercase; letter-spacing:.5px;
    }
    .actor-desc { font-size:11px; color:var(--muted); line-height:1.5; margin-top:5px; }

    /* ── CENTER HEATMAP ── */
    .heatmap-container {
      position: relative;
      background: var(--bg-dark);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .heatmap-title-bar {
      padding: 14px 20px 10px;
      border-bottom: 1px solid var(--border);
      display:flex; align-items:center; justify-content:space-between;
      flex-shrink:0;
    }
    .heatmap-title { font-size:13px; font-weight:700; color:var(--text); }
    .heatmap-sub { font-size:10px; color:var(--muted); margin-top:2px; }
    .heatmap-wrap { flex:1; overflow-y:auto; padding:16px; }
    .heatmap-wrap::-webkit-scrollbar { width:4px; }
    .heatmap-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

    /* ── SECTION HEADERS ── */
    .section-label {
      font-size:10px; font-weight:700; letter-spacing:2px;
      text-transform:uppercase; color:var(--muted);
      padding: 4px 0 10px; border-bottom:1px solid var(--border);
      margin-bottom:12px;
    }

    /* ── HEATMAP GRID ── */
    .heatmap-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 8px;
      margin-bottom: 24px;
    }
    .heat-cell {
      border-radius: 8px;
      padding: 12px 10px;
      text-align: center;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
      border: 1px solid transparent;
      position: relative;
    }
    .heat-cell:hover { transform:scale(1.04); box-shadow:0 0 18px rgba(0,212,255,.18); border-color:rgba(0,212,255,.3); }
    .heat-cell.risk-critical { background:rgba(255,59,59,.22); border-color:rgba(255,59,59,.4); }
    .heat-cell.risk-high     { background:rgba(255,140,0,.18); border-color:rgba(255,140,0,.3); }
    .heat-cell.risk-elevated { background:rgba(255,215,0,.14); border-color:rgba(255,215,0,.3); }
    .heat-cell.risk-medium   { background:rgba(0,188,212,.12); border-color:rgba(0,188,212,.25); }
    .heat-cell-name { font-size:11px; font-weight:700; margin-bottom:4px; line-height:1.3; }
    .heat-cell-country { font-size:18px; margin-bottom:4px; }
    .heat-cell-score {
      font-size:20px; font-weight:900; font-family:monospace;
      line-height:1;
    }
    .heat-cell.risk-critical .heat-cell-score { color:var(--red); }
    .heat-cell.risk-high     .heat-cell-score { color:var(--orange); }
    .heat-cell.risk-elevated .heat-cell-score { color:var(--yellow); }
    .heat-cell.risk-medium   .heat-cell-score { color:var(--cyan); }
    .heat-cell-type { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }

    /* ── TRENDS STRIP ── */
    .trends-grid {
      display:grid; grid-template-columns: 1fr 1fr; gap:8px;
      margin-bottom:24px;
    }
    .trend-card {
      background:var(--bg-card2); border:1px solid var(--border);
      border-radius:8px; padding:12px;
    }
    .trend-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
    .trend-value { font-size:13px; font-weight:700; color:var(--text); }
    .trend-delta { font-size:10px; margin-top:2px; }
    .delta-up   { color:var(--red); }
    .delta-down { color:var(--green); }

    /* ── TACTICS TABLE ── */
    .tactics-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:24px; }
    .tactics-table th {
      text-align:left; padding:8px 10px;
      background:var(--bg-card2); color:var(--muted);
      font-size:10px; text-transform:uppercase; letter-spacing:1px;
      border-bottom:1px solid var(--border);
    }
    .tactics-table td { padding:8px 10px; border-bottom:1px solid rgba(30,45,74,.6); vertical-align:top; }
    .tactics-table tr:last-child td { border-bottom:none; }
    .tactics-table tr:hover td { background:rgba(255,255,255,.02); }
    .tactic-name { font-weight:700; color:var(--accent); }
    .tactic-actors { color:var(--muted); font-size:11px; }
    .tactic-bar-wrap { margin-top:4px; height:4px; background:rgba(255,255,255,.07); border-radius:2px; }
    .tactic-bar { height:100%; border-radius:2px; background:linear-gradient(90deg, var(--accent2), var(--accent)); }

    /* ── RIGHT PANEL: TIMELINE / IOCS ── */
    .stats-strip {
      display:flex; gap:6px; flex-wrap:wrap; padding:10px 10px 0;
    }
    .ss-item {
      flex:1; min-width:80px;
      background:var(--bg-card2); border:1px solid var(--border);
      border-radius:6px; padding:8px;
      text-align:center;
    }
    .ss-num { font-size:20px; font-weight:900; font-family:monospace; }
    .ss-num.c { color:var(--red); }
    .ss-num.h { color:var(--orange); }
    .ss-num.m { color:var(--yellow); }
    .ss-label { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }

    .timeline-item {
      display:flex; gap:10px;
      padding:9px 0; border-bottom:1px solid rgba(30,45,74,.6);
      font-size:11px;
    }
    .timeline-item:last-child { border-bottom:none; }
    .tl-dot {
      width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:3px;
    }
    .tl-dot.c { background:var(--red); box-shadow:0 0 6px var(--red); }
    .tl-dot.h { background:var(--orange); box-shadow:0 0 6px var(--orange); }
    .tl-dot.m { background:var(--yellow); }
    .tl-content {}
    .tl-actor { font-weight:700; color:var(--text); }
    .tl-detail { color:var(--muted); margin-top:2px; line-height:1.4; }
    .tl-time { font-size:9px; color:var(--muted); margin-top:3px; font-family:monospace; }

    .subsection-title {
      font-size:10px; font-weight:700; letter-spacing:2px;
      text-transform:uppercase; color:var(--accent);
      padding: 12px 0 8px;
    }

    /* ── LEGEND ── */
    .legend {
      display:flex; gap:14px; flex-wrap:wrap;
      padding:10px 16px;
      border-top:1px solid var(--border);
      background:#060b14;
      flex-shrink:0;
    }
    .legend-title { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; align-self:center; }
    .legend-item { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--muted); }
    .legend-dot { width:10px; height:10px; border-radius:3px; }
    .dot-critical { background:rgba(255,59,59,.6); border:1px solid var(--red); }
    .dot-high     { background:rgba(255,140,0,.6); border:1px solid var(--orange); }
    .dot-elevated { background:rgba(255,215,0,.6); border:1px solid var(--yellow); }
    .dot-medium   { background:rgba(0,188,212,.5); border:1px solid var(--cyan); }

    /* ── MODAL ── */
    .modal-overlay {
      display:none; position:fixed; inset:0; z-index:2000;
      background:rgba(0,0,0,.75); align-items:center; justify-content:center;
    }
    .modal-overlay.open { display:flex; }
    .modal-box {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:12px; max-width:620px; width:90%;
      max-height:85vh; overflow-y:auto; padding:28px; position:relative;
    }
    .modal-box::-webkit-scrollbar { width:4px; }
    .modal-box::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
    .modal-close {
      position:absolute; top:14px; right:16px;
      background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer;
    }
    .modal-close:hover { color:var(--text); }
    .modal-actor-name { font-size:22px; font-weight:900; margin-bottom:4px; }
    .modal-actor-alias { font-size:12px; color:var(--muted); margin-bottom:16px; }
    .modal-section { margin-bottom:16px; }
    .modal-section h4 { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent); margin-bottom:6px; }
    .modal-section p, .modal-section li { font-size:13px; color:var(--muted); line-height:1.6; }
    .modal-section ul { padding-left:16px; }
    .modal-targets { display:flex; flex-wrap:wrap; gap:6px; }
    .target-tag {
      font-size:11px; padding:3px 9px; border-radius:12px;
      background:rgba(255,140,0,.1); border:1px solid rgba(255,140,0,.3);
      color:var(--orange);
    }

    .soc-footer {
      font-size:11px; color:var(--muted);
      padding:10px 16px; border-top:1px solid var(--border);
      background:#060b14; text-align:center; flex-shrink:0;
    }
    .soc-footer a { color:var(--muted); }
    .soc-footer a:hover { color:var(--accent); }

    @media (max-width:1100px) {
      .layout { grid-template-columns: 1fr 1fr; grid-template-rows:auto auto; height:auto; overflow:auto; }
      .panel.right { border-left:none; border-top:1px solid var(--border); grid-column:1/-1; }
      body { overflow:auto; }
    }
    @media (max-width:700px) {
      .layout { grid-template-columns:1fr; }
      .heatmap-grid { grid-template-columns:repeat(3,1fr); }
      .status-bar .hdr-clock { display:none; }
    }

/* ── Data pipeline timestamp ── */
.data-updated {
  font-size:10px; color:#4a5568; font-family:monospace;
  border-left:1px solid var(--border); padding-left:12px;
  white-space:nowrap; display:none;
}
.data-updated:not(:empty) { display:block; }