/* APJ Threat Intel — "Blueprint" design system (Industry ds, rust/brown accent override). */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root {
  color-scheme: light;
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  /* Accent ramp — rust/brown override for this project (replaces the ds default steel-blue) */
  --color-accent: #b47c48;
  --color-accent-100: #f8ede4;
  --color-accent-200: #f0d7c4;
  --color-accent-300: #e2b98e;
  --color-accent-400: #cf9862;
  --color-accent-500: #b47c48;
  --color-accent-600: #96603a;
  --color-accent-700: #7a4c2e;
  --color-accent-800: #5c3a24;
  --color-accent-900: #3c2618;

  /* Reserved for real severity states (INFOCON, source-fetch health) — never used as brand color */
  --lvl-green: #3d7a4f;
  --lvl-yellow: #a98a1f;
  --lvl-orange: #b4661f;
  --lvl-red: #b3271f;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Consolas, monospace;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-5: 17px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); text-decoration: underline; }
img { display: block; max-width: 100%; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-200); }

/* ── layout ───────────────────────────────────────────────────────── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4); }
.section { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-4); scroll-margin-top: 64px; }
/* Only one numbered section (Brief/Feed/Ransomware/Telegram/Actors/Map) is shown at a time — the
   nav acts as a tab strip rather than an in-page scroll jump; see wireTabs()/showTab() in app.js. */
[hidden] { display: none !important; }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.section.tab-enter { animation: tabIn .22s ease both; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-head-left { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.section-controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.apj-num { font-family: var(--font-heading); font-size: 13px; letter-spacing: .08em; color: var(--color-accent-700); }
.apj-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }

.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); }
.feed-grid, .actor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.actor-grid { gap: var(--space-4); }
@media (max-width: 720px) {
  .grid-2-1, .feed-grid, .actor-grid { grid-template-columns: 1fr; }
  h1 { font-size: 32px; }
  .apj-seg button { padding: 10px 13px; font-size: 13px; }
}

/* ── blueprint frame: hairline border + corner registration marks ──── */
.blueprint { position: relative; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid var(--color-divider); padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); border-color: transparent; padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* ── forms ───────────────────────────────────────────────────────── */
.input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.search-input { min-width: 200px; max-width: 260px; }

.apj-seg { display: inline-flex; border: 1px solid var(--color-divider); flex-wrap: wrap; }
.apj-seg button { font-family: var(--font-body); font-size: 12.5px; padding: 7px 12px; border: none; background: transparent; color: var(--color-text); cursor: pointer; border-right: 1px solid var(--color-divider); }
.apj-seg button:last-child { border-right: none; }
.apj-seg button:hover { background: var(--color-accent-100); }
.apj-seg button[aria-pressed="true"] { background: var(--color-accent); color: #fff; }
.apj-seg button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ── cards ───────────────────────────────────────────────────────── */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: 0; background: transparent; border: 1px solid var(--color-divider); }
.card-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: .8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* ── tags ────────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; border-radius: 0; white-space: nowrap; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* ── nav ─────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); max-width: 1180px; margin: 0 auto; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: var(--space-4); }
.nav-links a { color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--color-accent-700); }
.nav-links a[aria-current='page'] { font-weight: 600; border-bottom-color: var(--color-accent); }
.nav-links .tag { margin-left: var(--space-2); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-divider); background: transparent; cursor: pointer; flex-shrink: 0; }
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--color-text); }
.nav-toggle[aria-expanded="true"] { background: var(--color-surface); }

@media (max-width: 720px) {
  .nav { flex-wrap: nowrap; gap: var(--space-3); }
  .nav > .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); box-shadow: var(--shadow-md); padding: var(--space-2) var(--space-4) var(--space-3); z-index: 49; }
  .nav-links.open { display: flex; }
  .nav-links a { width: 100%; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
  .nav-links .tag { align-self: flex-start; margin: var(--space-3) 0 0; }
}

/* ── tables ──────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

@media (max-width: 640px) {
  /* Tables don't work on narrow screens — restyle each row as a bordered card, each cell as a labeled line. */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border-bottom: 1px solid var(--color-divider); padding: var(--space-3) 0; }
  .table tr:last-child { border-bottom: none; }
  .table td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 3px 0; border-bottom: none; text-align: right; }
  .table td::before { content: attr(data-label); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-neutral-600); text-align: left; flex-shrink: 0; }
}

/* ── status strip (source health, generation time, errors) ─────────── */
.status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); max-width: 1180px; margin: 0 auto; font-size: 11px; }
.status-strip .apj-eyebrow { opacity: .55; }
.src-details { flex-basis: 100%; }
.src-details summary { cursor: pointer; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; list-style: none; }
.src-details summary::-webkit-details-marker { display: none; }
.src-details summary::before { content: "▸ "; }
.src-details[open] summary::before { content: "▾ "; }
.src-details #srcbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.srcpill { font-size: 10.5px; padding: 2px 9px; border: 1px solid var(--color-divider); color: var(--color-neutral-700); }
.srcpill.ok { border-color: color-mix(in srgb, var(--lvl-green) 45%, transparent); color: var(--lvl-green); }
.srcpill.fail { border-color: color-mix(in srgb, var(--lvl-red) 45%, transparent); color: var(--lvl-red); }
.err-banner { display: none; width: 100%; margin-top: 4px; font-size: 12px; color: var(--lvl-red); border: 1px solid color-mix(in srgb, var(--lvl-red) 45%, transparent); background: color-mix(in srgb, var(--lvl-red) 8%, transparent); padding: 7px 12px; }
.err-banner.show { display: block; }

/* ── hero INFOCON tag ────────────────────────────────────────────── */
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.infocon-tag { display: inline-flex; align-items: center; gap: 6px; }
.infocon-tag .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--lvl-green); animation: livePulse 1.6s ease-in-out infinite; }
.infocon-tag.lvl-green .dot { background: var(--lvl-green); }
.infocon-tag.lvl-yellow .dot { background: var(--lvl-yellow); }
.infocon-tag.lvl-orange .dot { background: var(--lvl-orange); }
.infocon-tag.lvl-red .dot { background: var(--lvl-red); }

/* ── signal snapshot bars ────────────────────────────────────────── */
.apj-barcell { height: 6px; background: var(--color-neutral-200); position: relative; overflow: hidden; }
.apj-barfill { position: absolute; inset: 0; background: var(--color-accent); }
.snap-row { margin-bottom: var(--space-4); }
.snap-row:last-child { margin-bottom: 0; }
.snap-row .snap-hdr { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.snap-row .snap-hdr b { font-weight: 600; }

/* ── daily brief ─────────────────────────────────────────────────── */
.bsec { margin-bottom: var(--space-4); }
.bsec:last-child { margin-bottom: 0; }
.bsec .bhdr { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 2px solid var(--color-divider); }
.bsec .bhdr .n { background: var(--color-neutral-800); color: #fff; font-size: 10px; font-family: var(--font-body); padding: 1px 7px; }
.bsec.pri .bhdr { border-bottom-color: var(--color-accent); }
.bsec.pri .bhdr .n { background: var(--color-accent-700); }
.bsec.act .bhdr { border-bottom-color: var(--lvl-orange); }
.bsec.act .bhdr .n { background: var(--lvl-orange); }
.blist { list-style: none; margin: 0; padding: 0; }
.blist li { padding: 5px 0 5px 16px; position: relative; line-height: 1.45; font-size: 13.5px; }
.blist li::before { content: "▸"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
.blist li b { font-weight: 700; }
.blist .bsrc { display: inline-block; margin-left: 4px; }
.blist .bsrc a { font-size: 10.5px; color: var(--color-accent-700); background: var(--color-accent-100); padding: 0 5px; text-decoration: none; margin-right: 3px; white-space: nowrap; }
.blist .bsrc a:hover { text-decoration: underline; }
.bempty { color: var(--color-neutral-600); font-size: 12.5px; font-style: italic; padding: 3px 0 3px 16px; }

/* ── critical vulnerabilities (CISA KEV) widget ─────────────────────── */
.kev-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.kev-item:last-child { border-bottom: none; }
.kev-item .kev-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.kev-item .kev-name { font-size: 13px; font-weight: 600; line-height: 1.3; }

/* ── ranked widgets (Top TTPs) ───────────────────────────────────── */
.rank-row { display: flex; align-items: center; gap: var(--space-2); padding: 5px 0; border-bottom: 1px solid var(--color-divider); font-size: 12.5px; }
.rank-row:last-child { border-bottom: none; }
.rank-row .rank-n { font-family: var(--font-heading); color: var(--color-accent-700); width: 16px; flex-shrink: 0; }
.rank-row .rank-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .rank-count { color: var(--color-neutral-600); font-size: 11px; flex-shrink: 0; }

/* ── live feed ───────────────────────────────────────────────────── */
.feed-card-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.feed-card .card-title { font-size: 16px; }
.feed-card .card-title a { color: var(--color-text); }
.feed-card .card-title a:hover { color: var(--color-accent-700); }
.empty { color: var(--color-neutral-600); font-style: italic; padding: var(--space-4) 0; grid-column: 1 / -1; }

/* ── actor tracker ───────────────────────────────────────────────── */
.actor-card { cursor: pointer; padding: var(--space-5) !important; }
.actor-card .actor-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.actor-card .aka { font-size: 12px; color: var(--color-neutral-700); margin: 2px 0 var(--space-2); }
.actor-card .actor-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--space-2) 0; }
.actor-card .det { display: none; border-top: 1px dashed var(--color-divider); margin-top: var(--space-2); padding-top: var(--space-2); }
.actor-card.open .det { display: block; }
.det .row { margin-bottom: var(--space-2); }
.det .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-700); }
.ttp { display: inline-block; background: var(--color-accent-100); color: var(--color-accent-800); font-size: 11px; padding: 1px 6px; margin: 2px 3px 0 0; font-family: var(--font-mono); }
.conf { font-size: 11px; color: var(--color-neutral-600); font-style: italic; }
.tapbtn { margin-top: var(--space-2); font-size: 11.5px; border: 1px solid var(--color-divider); background: transparent; padding: 4px 10px; cursor: pointer; }
.tapbtn:hover { border-color: var(--color-accent); color: var(--color-accent-700); }

/* ── export banner + footer ─────────────────────────────────────── */
.export-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-6) !important; }
.export-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.copy-status { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; align-self: center; }

footer.site-foot { border-top: 1px solid var(--color-divider); padding: var(--space-6) var(--space-4); max-width: 1180px; margin: 0 auto; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); font-size: 13px; color: var(--color-neutral-700); }
.foot-grid strong { color: var(--color-text); }
.foot-right { text-align: right; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; } .foot-right { text-align: left; margin-top: var(--space-3); } }

/* ── DarkGrid — dark "war room" map panel, deliberately contrasts the light blueprint theme ── */
.darkgrid { background: linear-gradient(180deg,#060810,#0b0f1a); padding: var(--space-6) var(--space-6) var(--space-6); color: #d7e6ff; border: 1px solid #1c2333; position: relative; overflow: hidden; }
.darkgrid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(94,230,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94,230,255,.05) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.dg-banner { display: flex; align-items: center; gap: 9px; padding: 7px 14px; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: 11px; border: 1px solid; position: relative; z-index: 1; flex-wrap: wrap; }
.dg-banner b { letter-spacing: .6px; text-transform: uppercase; }
.dg-banner .lvl-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
.dg-banner.lvl-green { background: rgba(24,128,56,.12); border-color: #1f7a44; color: #8ff0b0; }
.dg-banner.lvl-yellow { background: rgba(232,180,10,.12); border-color: #a98a1f; color: #ffe58a; }
.dg-banner.lvl-orange { background: rgba(232,113,10,.14); border-color: #a9611f; color: #ffbf7a; }
.dg-banner.lvl-red { background: rgba(217,48,37,.16); border-color: #a9271f; color: #ff9c92; }
.dg-regions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); position: relative; z-index: 1; }
.dg-rtab { background: #0e1524; border: 1px solid #223047; color: #8a9bc0; padding: 4px 11px; font-size: 10.5px; font-family: var(--font-mono); cursor: pointer; }
.dg-rtab:hover { border-color: #35507a; color: #b9cbe8; }
.dg-rtab.active { background: #123049; color: #5ee6ff; border-color: #2a4a6e; }
.dg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-4); position: relative; z-index: 1; flex-wrap: wrap; }
.dg-title { font-size: 13px; font-weight: 700; letter-spacing: .8px; color: #e8f6ff; text-transform: uppercase; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); }
.dg-title .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #00e5a0; box-shadow: 0 0 8px #00e5a0; animation: dgpulse 1.4s infinite; flex-shrink: 0; }
@keyframes dgpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.dg-sub { font-size: 10.5px; color: #7a8bab; font-family: var(--font-mono); margin-top: 2px; }
.dg-locate { background: #0e1524; border: 1px solid #223047; color: #d7e6ff; padding: 6px 14px; font-size: 12px; font-family: var(--font-mono); min-width: 200px; outline: none; }
.dg-locate::placeholder { color: #4d5c78; }
@media (max-width: 480px) { .dg-locate { min-width: 0; width: 100%; } }
.dg-body { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; position: relative; z-index: 1; }
@media (max-width: 760px) { .dg-body { grid-template-columns: 1fr; } }
.dg-globe-wrap { display: flex; flex-direction: column; align-items: center; }
#threatGlobe { display: block; max-width: 100%; border-radius: 50%; box-shadow: 0 0 40px rgba(0,180,255,.15); cursor: grab; touch-action: none; }
#threatGlobe:active { cursor: grabbing; }
.dg-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 10.5px; color: #8a9bc0; font-family: var(--font-mono); }
.dg-legend span { display: flex; align-items: center; gap: 5px; }
.dg-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 6px currentColor; }
.dg-feed { background: #070b14; border: 1px solid #1c2333; padding: 10px 12px; }
.dg-feed-hdr { font-size: 10.5px; color: #5ee6b8; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; font-family: var(--font-mono); display: flex; justify-content: space-between; }
.ticker { height: 300px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { animation: dgscroll 34s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes dgscroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.tk-item { padding: 7px 2px; border-bottom: 1px dashed #1c2333; font-size: 11.3px; font-family: var(--font-mono); color: #c3d3f0; line-height: 1.5; }
.tk-item b { color: #eef4ff; }
.tk-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 1px 6px; margin-right: 6px; }
.tk-in { background: rgba(255,90,74,.16); color: #ff6b5e; border: 1px solid rgba(255,107,94,.4); }
.tk-apj { background: rgba(255,171,94,.14); color: #ffab5e; border: 1px solid rgba(255,171,94,.4); }
.tk-other { background: rgba(110,168,255,.16); color: #6ea8ff; border: 1px solid rgba(110,168,255,.4); }
.dg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px,1fr)); gap: 8px; margin-top: var(--space-4); position: relative; z-index: 1; }
.dg-stat { background: #0b1120; border: 1px solid #1c2333; padding: 8px 10px; text-align: center; }
.dg-stat .v { font-size: 18px; font-weight: 700; color: #5ee6ff; font-family: var(--font-mono); }
.dg-stat .l { font-size: 9px; color: #5c6d8f; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.dg-analytics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: var(--space-4); position: relative; z-index: 1; }
@media (max-width: 760px) { .dg-analytics { grid-template-columns: 1fr; } }
.dg-achart { background: #0b1120; border: 1px solid #1c2333; padding: 10px 12px; }
.dg-achart h4 { margin: 0 0 8px; font-size: 10.5px; color: #8a9bc0; text-transform: uppercase; letter-spacing: .5px; font-family: var(--font-mono); font-weight: 600; }
.dg-chartwrap { position: relative; height: 190px; }
.dg-note { font-size: 10.5px; color: #4d5c78; margin-top: var(--space-3); position: relative; z-index: 1; font-family: var(--font-mono); }