/* ════════════════════════════════════════════════════════════════════════
   Z.E.R.O. — territory command center
   Holographic MapLibre map + dual HUD rails · JetBrains Mono · cyan core
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --bg-0: #02060e;
  --bg-1: #04101f;
  --cyan: #19e6ff;
  --cyan-2: #00d4ff;
  --red: #ff3b5c;
  --green: #2bff88;
  --magenta: #ff4fd8;
  --amber: #ffb454;
  --blue: #5aa9ff;
  --white: #eaf6ff;
  --label: #6f8ca8;
  --label-dim: #44607a;

  --line: rgba(25, 230, 255, 0.16);
  --line-soft: rgba(25, 230, 255, 0.08);
  --glass: rgba(6, 15, 30, 0.62);

  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --e: cubic-bezier(0.22, 1, 0.36, 1);

  --pad: clamp(14px, 1.6vw, 30px);
  --rail-w: clamp(258px, 20vw, 340px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--white);
  font-family: var(--mono);
  font-size: clamp(13px, 0.92vw, 17px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ════ MAP (background) ════ */
#map { position: fixed; inset: 0; z-index: 1; background: var(--bg-0); }
.maplibregl-ctrl-attrib { font-family: var(--mono); font-size: 9px; opacity: 0.32; }
.maplibregl-ctrl-attrib a { color: var(--label); }
.map-tint {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(70vw 30vh at 16% 2%, rgba(120, 90, 255, 0.08), transparent 70%),
    radial-gradient(70vw 28vh at 86% 2%, rgba(43, 255, 136, 0.05), transparent 70%),
    radial-gradient(120vw 24vh at 50% 6%, rgba(25, 200, 255, 0.15), transparent 70%),
    radial-gradient(60vw 50vw at 50% 54%, rgba(25, 190, 255, 0.15), transparent 66%),
    linear-gradient(180deg, rgba(2, 10, 22, 0.32), transparent 26%, transparent 70%, rgba(2, 8, 16, 0.55));
  mix-blend-mode: screen;
}
.bg-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50vw 50vw at 50% 60%, rgba(10, 90, 140, 0.2), transparent 70%);
}

/* ════ base + lead markers (on the map) ════ */
.base-marker { position: relative; width: 0; height: 0; }
.base-marker .bm-core {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #eaffff, var(--cyan) 55%, #0a4a63);
  box-shadow: 0 0 16px var(--cyan), 0 0 4px #fff;
}
.base-marker .bm-ring {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(25, 230, 255, 0.55); animation: bmPulse 2.6s ease-out infinite;
}
.base-marker .bm-ping {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--cyan); opacity: 0;
}
.base-marker.ping .bm-ping { animation: bmPing 1.1s var(--e) 1; }
.base-marker .bm-label {
  position: absolute; left: 14px; top: -8px; white-space: nowrap;
  font-size: 10px; letter-spacing: 0.18em; color: var(--cyan);
  text-shadow: 0 0 10px rgba(25, 230, 255, 0.7), 0 1px 3px #000;
}
@keyframes bmPulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes bmPing { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(6); opacity: 0; } }

/* ════ TOP HUD ════ */
.hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: clamp(14px, 1.7vw, 28px) var(--pad) 0;
  pointer-events: none;
}
.hud-top > * { pointer-events: auto; }
.brand-row { display: flex; align-items: flex-start; gap: 8px; }
.brand-bracket { color: var(--cyan); font-size: clamp(15px, 1.3vw, 22px); line-height: 1; transform: translateY(2px); text-shadow: 0 0 12px rgba(25, 230, 255, 0.6); }
.brand-mark { margin: 0; font-size: clamp(20px, 2.1vw, 38px); font-weight: 800; letter-spacing: 0.18em; color: var(--white); text-shadow: 0 0 24px rgba(25, 230, 255, 0.35); }
.brand-sub { margin: 5px 0 0; font-size: clamp(8px, 0.62vw, 10.5px); font-weight: 500; letter-spacing: 0.3em; color: var(--label); }

.live-pill {
  display: inline-flex; align-items: center; gap: clamp(8px, 0.7vw, 13px);
  padding: clamp(6px, 0.5vw, 9px) clamp(11px, 0.9vw, 17px); margin-top: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.9);
  font-size: clamp(9px, 0.7vw, 12px); letter-spacing: 0.18em; white-space: nowrap;
}
.live-pill-label { color: var(--white); font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 3px #fff; animation: blink 1.4s steps(1) infinite; }
.live-sep { width: 1px; height: 12px; background: var(--line); }
.live-pill-date { color: var(--label); }
.live-pill-time { color: var(--cyan); font-weight: 600; }

.status-cluster { display: flex; align-items: flex-start; gap: clamp(11px, 1.1vw, 20px); }
.status-text { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.thinking-word { font-size: clamp(8px, 0.62vw, 11px); font-weight: 600; letter-spacing: 0.42em; color: var(--label); padding-left: 0.42em; transition: color 0.4s, text-shadow 0.4s; }
body.is-thinking .thinking-word { color: var(--cyan); text-shadow: 0 0 14px rgba(25, 230, 255, 0.7); }
.clock { font-size: clamp(21px, 2vw, 38px); font-weight: 700; line-height: 0.92; color: var(--white); text-shadow: 0 0 26px rgba(25, 230, 255, 0.45); }
.status-orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; }
.status-orb { width: clamp(24px, 2vw, 36px); height: clamp(24px, 2vw, 36px); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #cfffff, var(--cyan) 42%, #0a4a63 78%, #06212e); box-shadow: 0 0 0 1px rgba(25, 230, 255, 0.4), 0 0 22px rgba(25, 230, 255, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.35); animation: orbPulse 3.4s ease-in-out infinite; }
.status-label { font-size: clamp(7px, 0.56vw, 9.5px); letter-spacing: 0.28em; color: var(--label); }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.12; } }
@keyframes orbPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(25,230,255,.4), 0 0 18px rgba(25,230,255,.6), inset 0 0 10px rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 1px rgba(25,230,255,.6), 0 0 34px rgba(25,230,255,.95), inset 0 0 12px rgba(255,255,255,.5); } }

/* ════ RAILS ════ */
.rail {
  position: fixed; z-index: 20; width: var(--rail-w);
  top: clamp(74px, 10vh, 114px); bottom: clamp(44px, 6vh, 70px);
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--pad);
  pointer-events: none;
}
.rail-l { left: 0; }
.rail-r { right: 0; }
.rail-stack { display: flex; flex-direction: column; gap: clamp(9px, 1.1vh, 16px); width: 100%; transform-origin: center center; }
.rail-stack .card { pointer-events: auto; }

/* ════ CARDS ════ */
.card {
  position: relative; width: 100%;
  padding: clamp(11px, 0.85vw, 17px) clamp(13px, 1vw, 19px) clamp(12px, 0.9vw, 16px);
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(25, 230, 255, 0.03), 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}
.cnr { position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--cyan); opacity: 0.8; pointer-events: none; filter: drop-shadow(0 0 4px rgba(25, 230, 255, 0.6)); }
.cnr-tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.cnr-tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.cnr-bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.cnr-br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: clamp(8px, 0.6vw, 12px); margin-bottom: clamp(8px, 0.6vw, 12px); border-bottom: 1px solid var(--line-soft); }
.card-title { font-size: clamp(10px, 0.78vw, 13px); font-weight: 700; letter-spacing: 0.18em; color: var(--white); }
.card-badge { font-size: clamp(7.5px, 0.58vw, 9.5px); font-weight: 600; letter-spacing: 0.16em; color: var(--label); padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(25, 230, 255, 0.04); white-space: nowrap; }
.badge-accent { color: var(--cyan); border-color: rgba(25, 230, 255, 0.4); background: rgba(25, 230, 255, 0.1); text-shadow: 0 0 10px rgba(25, 230, 255, 0.5); }

.card-body { display: flex; flex-direction: column; gap: clamp(7px, 0.55vw, 11px); }
.row { display: flex; align-items: baseline; gap: 8px; }
.row-label { font-size: clamp(8px, 0.62vw, 10.5px); font-weight: 500; letter-spacing: 0.12em; color: var(--label); white-space: nowrap; }
.row-dots { flex: 1 1 auto; align-self: center; height: 0; border-bottom: 1px dotted rgba(111, 140, 168, 0.4); transform: translateY(2px); }
.row-val { font-size: clamp(13px, 1.05vw, 19px); font-weight: 700; color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-val.glow { color: var(--cyan); text-shadow: 0 0 16px rgba(25, 230, 255, 0.55); }
.row-val.pos, .num.pos { color: var(--green); text-shadow: 0 0 16px rgba(43, 255, 136, 0.5); }

/* ── LEADS panel ── */
.leads-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.leads-big { display: flex; align-items: baseline; gap: 7px; }
.leads-big .num { font-size: clamp(30px, 2.8vw, 50px); font-weight: 800; color: var(--cyan); line-height: 0.9; text-shadow: 0 0 24px rgba(25, 230, 255, 0.6); }
.leads-unit { font-size: 9.5px; letter-spacing: 0.16em; color: var(--label); text-transform: uppercase; }
.leads-tiers { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.tier-chip { font-size: 9px; letter-spacing: 0.1em; color: var(--label); padding: 2px 7px; border: 1px solid var(--line-soft); border-radius: 999px; }
.tier-chip b { color: var(--white); }
.tier-chip.tier-a { color: var(--cyan); border-color: rgba(25, 230, 255, 0.3); }
.leads-sub { font-size: 9.5px; letter-spacing: 0.08em; color: var(--amber); min-height: 0; }
.row-mini-label { font-size: 8.5px; letter-spacing: 0.22em; color: var(--label-dim); margin-top: 2px; }
.near-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; counter-reset: n; }
.near-list li { display: flex; align-items: center; gap: 8px; font-size: clamp(9px, 0.72vw, 12px); color: var(--white); }
.near-list li::before { counter-increment: n; content: counter(n, decimal-leading-zero); font-size: 9px; color: var(--cyan); opacity: 0.7; }
.near-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-mi { color: var(--label); font-size: 0.85em; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 5px 11px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; letter-spacing: 0.08em; color: var(--label); text-transform: uppercase; }
.legend i { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 7px currentColor; }

/* ── sparklines ── */
.spark { display: flex; align-items: flex-end; gap: clamp(3px, 0.35vw, 5px); height: clamp(24px, 2.6vw, 38px); margin-top: clamp(5px, 0.5vw, 9px); padding-top: 7px; border-top: 1px solid var(--line-soft); }
.spark i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--cyan), rgba(25, 230, 255, 0.16)); box-shadow: 0 0 12px -2px rgba(25, 230, 255, 0.6); transform-origin: bottom; transform: scaleY(0); animation: barGrow 0.9s var(--e) forwards; }
.spark i.peak { background: linear-gradient(180deg, #bffaff, var(--cyan)); }
.spark-pos i { background: linear-gradient(180deg, var(--green), rgba(43, 255, 136, 0.16)); box-shadow: 0 0 12px -2px rgba(43, 255, 136, 0.6); }
.spark-pos i.peak { background: linear-gradient(180deg, #c6ffe0, var(--green)); }
@keyframes barGrow { to { transform: scaleY(1); } }

/* ── KALSHI ── */
.kalshi-row { display: flex; gap: 10px; margin-bottom: 2px; }
.kpi { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: 5px; background: rgba(255, 255, 255, 0.015); }
.kpi-label { font-size: 8px; letter-spacing: 0.16em; color: var(--label); }
.kpi-val { font-size: clamp(14px, 1.2vw, 20px); font-weight: 700; color: var(--white); }

/* ── CLOUDFLARE card ── */
.cf-big { font-size: clamp(30px, 2.8vw, 50px); font-weight: 800; color: var(--cyan); line-height: 0.9; text-shadow: 0 0 24px rgba(25, 230, 255, 0.6); }
.cf-foot { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line-soft); font-size: 8.5px; letter-spacing: 0.12em; color: var(--label); }
.cf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); animation: blink 2.6s steps(1) infinite; flex-shrink: 0; }

/* ── KPI value variants (Stripe / Kalshi) ── */
.kpi-val.glow { color: var(--cyan); text-shadow: 0 0 16px rgba(25, 230, 255, 0.55); }
.kpi-val.pos { color: var(--green); text-shadow: 0 0 16px rgba(43, 255, 136, 0.5); }
.kpi-val.neg { color: var(--red); text-shadow: 0 0 16px rgba(255, 59, 92, 0.5); }

/* ── WEATHER card ── */
.wx-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wx-icon { width: clamp(26px, 2.2vw, 36px); height: clamp(26px, 2.2vw, 36px); color: var(--cyan); filter: drop-shadow(0 0 10px rgba(25, 230, 255, 0.5)); display: inline-flex; }
.wx-icon svg { width: 100%; height: 100%; }
.wx-deg { font-size: clamp(11px, 0.9vw, 15px); color: var(--label); margin-left: -4px; align-self: flex-start; margin-top: 4px; }
.wx-desc { flex: 1; text-align: right; font-size: clamp(9px, 0.72vw, 12px); letter-spacing: 0.1em; color: var(--label); text-transform: uppercase; }

/* ── single NAPLES LEADS node on the map ── */
.naples-marker { position: relative; width: 0; height: 0; }
.naples-marker .nm-core { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #eaffff, var(--cyan) 55%, #0a4a63); box-shadow: 0 0 18px var(--cyan), 0 0 5px #fff; }
.naples-marker .nm-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(25, 230, 255, 0.5); animation: bmPulse 2.8s ease-out infinite; }
.naples-marker .nm-ping { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cyan); opacity: 0; }
.naples-marker.ping .nm-ping { animation: bmPing 1.1s var(--e) 1; }
.nm-card { position: absolute; left: 18px; top: -16px; min-width: 152px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: rgba(6, 15, 30, 0.8); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); box-shadow: 0 16px 38px -18px #000; }
.nm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-soft); padding-bottom: 5px; margin-bottom: 6px; }
.nm-title { font-size: 10px; letter-spacing: 0.18em; color: var(--cyan); text-shadow: 0 0 10px rgba(25, 230, 255, 0.6); }
.nm-count { font-size: 19px; font-weight: 800; color: #fff; }
.nm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.nm-seg { display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; letter-spacing: 0.05em; color: var(--label); }
.nm-seg i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; flex-shrink: 0; }

/* base-direction chip (since the view orbits Naples, base is off-frame) */
.map-base-chip { position: fixed; left: 50%; top: clamp(84px, 12vh, 126px); transform: translateX(-50%); z-index: 22; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 15, 30, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 10px; letter-spacing: 0.14em; color: var(--label); white-space: nowrap; }
.map-base-chip b { color: var(--cyan); margin-left: 4px; }
.map-base-chip .mbc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }

/* discreet cluster tag + per-lead hover tooltip */
.naples-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--cyan); background: rgba(6, 15, 30, 0.62); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; text-shadow: 0 0 8px rgba(25, 230, 255, 0.6); pointer-events: none; transform: translateY(-8px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lead-pop .maplibregl-popup-content { background: rgba(6, 16, 30, 0.92); border: 1px solid var(--line); border-radius: 6px; padding: 7px 11px; box-shadow: 0 14px 32px -16px #000; font-family: var(--mono); }
.lead-pop .maplibregl-popup-content b { display: block; font-size: 11.5px; color: #fff; letter-spacing: 0.03em; }
.lead-pop .maplibregl-popup-content span { font-size: 9px; letter-spacing: 0.16em; color: var(--cyan); text-transform: uppercase; }
.lead-pop .maplibregl-popup-tip { border-top-color: rgba(6, 16, 30, 0.92) !important; border-bottom-color: rgba(6, 16, 30, 0.92) !important; }

/* ── lead dossier (click) ── */
.dossier { position: fixed; left: 50%; bottom: clamp(54px, 8vh, 92px); transform: translateX(-50%) translateY(18px); width: min(560px, 62vw); z-index: 35; padding: clamp(15px, 1.1vw, 21px) clamp(17px, 1.3vw, 24px); border: 1px solid var(--line); border-radius: 7px; background: rgba(5, 13, 26, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 70px -28px #000, 0 0 44px -20px rgba(25, 230, 255, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--e), transform 0.35s var(--e); }
.dossier.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.dossier-x { position: absolute; top: 9px; right: 11px; width: 24px; height: 24px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--label); border-radius: 5px; cursor: pointer; font-size: 11px; line-height: 1; }
.dossier-x:hover { color: var(--danger); border-color: rgba(255, 93, 110, 0.5); }
.dossier-head { display: flex; align-items: center; gap: 11px; padding-right: 28px; }
.dossier-tier { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; font-weight: 800; font-size: 13px; flex: none; }
.dossier-tier.tier-a { color: #04130c; background: var(--cyan); }
.dossier-tier.tier-b { color: #04130c; background: var(--blue); }
.dossier-tier.tier-c { color: var(--white); background: rgba(255, 255, 255, 0.14); }
.dossier-name { flex: 1; font-size: clamp(16px, 1.4vw, 22px); font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.dossier-web { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--cyan); border: 1px solid rgba(25, 230, 255, 0.4); background: rgba(25, 230, 255, 0.1); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.dossier-stats { display: flex; gap: 20px; margin-top: 12px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--label); text-transform: uppercase; }
.dossier-stats b { color: #fff; font-size: 17px; font-weight: 700; }
.dossier-offer { margin-top: 9px; font-size: 13px; color: var(--cyan); letter-spacing: 0.03em; min-height: 1em; }
.dossier-info { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.di-row { display: flex; gap: 12px; font-size: 12.5px; color: var(--white); }
.di-row .row-label { min-width: 100px; }
.dossier-actions { display: flex; gap: 10px; margin-top: 14px; }
.dossier-btn { flex: 1; text-align: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; font-size: 11.5px; letter-spacing: 0.12em; color: var(--white); background: rgba(255, 255, 255, 0.03); cursor: pointer; text-decoration: none; transition: 0.2s; }
.dossier-btn:hover { border-color: rgba(25, 230, 255, 0.5); background: rgba(25, 230, 255, 0.08); color: var(--cyan); }
.dossier-btn.accent { color: #04130c; background: var(--cyan); border-color: var(--cyan); }
.dossier-btn.accent:hover { filter: brightness(1.1); color: #04130c; }

/* ── radar sweep over the map ── */
.radar-sweep {
  position: fixed; inset: -25%; z-index: 3; pointer-events: none; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(25, 230, 255, 0) 0deg, rgba(25, 230, 255, 0) 296deg,
    rgba(25, 230, 255, 0.05) 338deg, rgba(140, 240, 255, 0.16) 357deg,
    rgba(180, 250, 255, 0.06) 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, #000 36%, transparent 62%);
  mask: radial-gradient(circle at 50% 50%, #000 0%, #000 36%, transparent 62%);
  mix-blend-mode: screen; opacity: 0.65;
  transform-origin: 50% 50%;
  animation: sweep 16s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

/* ── dossier "checker": foto + Google Maps embebido ── */
.dossier { max-height: 84vh; overflow-y: auto; }
.dossier-checker { margin-top: 12px; }
.dchk-photo-wrap { display: block; width: 100%; height: clamp(200px, 30vh, 320px); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #06121f; position: relative; }
.dchk-photo-wrap::after { content: '⤢ GOOGLE MAPS'; position: absolute; bottom: 8px; right: 9px; font-size: 9px; letter-spacing: 0.12em; color: var(--cyan); background: rgba(2,8,16,0.74); padding: 3px 8px; border-radius: 4px; opacity: 0; transition: opacity 0.2s; }
.dchk-photo-wrap:hover::after { opacity: 1; }
.dchk-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── AGENDA: mini calendar + notes ── */
.agenda-body { gap: 9px; }
.mini-cal { display: flex; flex-direction: column; gap: 4px; }
.mc-wd, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mc-wd i { text-align: center; font-style: normal; font-size: 8px; letter-spacing: 0.05em; color: var(--label-dim); }
.mc-grid span { aspect-ratio: 1; display: grid; place-items: center; position: relative; font-size: clamp(8.5px, 0.66vw, 11px); color: var(--label); border-radius: 4px; border: 1px solid transparent; }
.mc-grid span.out { opacity: 0.25; }
.mc-grid span.has { color: var(--white); border-color: var(--line-soft); }
.mc-grid span.has::after { content: ''; position: absolute; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.mc-grid span.today { color: var(--bg-0); background: var(--cyan); font-weight: 700; box-shadow: 0 0 16px -3px rgba(25, 230, 255, 0.8); }
.mc-grid span.today::after { background: var(--bg-0); box-shadow: none; }
.notes { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.notes li { display: flex; align-items: center; gap: 8px; font-size: clamp(9px, 0.72vw, 11.5px); color: var(--white); }
.notes li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 7px var(--amber); flex-shrink: 0; }
.notes li .note-tag { margin-left: auto; font-size: 8px; letter-spacing: 0.1em; color: var(--label); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 6px; }

/* ── floating INSIGHT ── */
.insight-float {
  position: fixed; z-index: 22; left: 50%; bottom: clamp(52px, 7.5vh, 82px); transform: translateX(-50%);
  width: min(46vw, 560px); padding: clamp(12px, 1vw, 18px) clamp(16px, 1.3vw, 24px);
  border: 1px solid var(--line); border-radius: 5px; background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px -30px rgba(0, 0, 0, 0.95);
}
.insight-badge { font-size: 8.5px; letter-spacing: 0.24em; color: var(--cyan); text-shadow: 0 0 10px rgba(25, 230, 255, 0.5); }
.insight { margin: 6px 0 0; font-size: clamp(14px, 1.25vw, 22px); font-weight: 500; line-height: 1.3; color: var(--white); text-shadow: 0 0 22px rgba(25, 230, 255, 0.18); }
.insight::before { content: '“'; color: var(--cyan); opacity: 0.7; }
.insight::after { content: '”'; color: var(--cyan); opacity: 0.7; }

/* ════ TICKER ════ */
.ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: clamp(28px, 3.6vh, 42px); display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(2, 8, 16, 0.2), rgba(2, 8, 16, 0.82)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; flex-shrink: 0; white-space: nowrap; will-change: transform; animation: ticker 46s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; font-size: clamp(8.5px, 0.7vw, 11.5px); letter-spacing: 0.2em; color: rgba(25, 230, 255, 0.66); }
.ticker-item::after { content: '◇'; color: rgba(25, 230, 255, 0.32); font-size: 0.8em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ════ overlays ════ */
.scanlines, .grain, .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.scanlines { background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,10,18,0.14) 3px, rgba(0,0,0,0) 4px); opacity: 0.5; mix-blend-mode: multiply; }
.grain { opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 0.6s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 33% { transform: translate(-2%,1%); } 66% { transform: translate(1%,-2%); } 100% { transform: translate(0,0); } }
.vignette { background: radial-gradient(125% 125% at 50% 48%, transparent 50%, rgba(0,2,6,0.7) 100%); }

/* ════ entrance ════ */
.reveal { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity 0.9s var(--e), transform 0.9s var(--e), filter 0.9s var(--e); transition-delay: var(--d, 0s); }
.insight-float.reveal { transform: translateX(-50%) translateY(16px); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.insight-float.reveal.in { transform: translateX(-50%); }
.in [data-glitch] { animation: glitch 0.5s steps(2) 1; animation-delay: calc(var(--d, 0s) + 0.5s); }
@keyframes glitch { 0% { transform: translate(0); text-shadow: 0 0 0 transparent; } 25% { transform: translate(-2px); text-shadow: 2px 0 var(--red), -2px 0 var(--cyan); } 50% { transform: translate(2px); text-shadow: -2px 0 var(--green), 2px 0 var(--cyan); } 100% { transform: translate(0); text-shadow: 0 0 0 transparent; } }

/* ════ RESPONSIVE ════ */
@media (min-width: 2200px) { :root { --rail-w: clamp(360px, 18vw, 500px); } body { font-size: clamp(17px, 0.8vw, 25px); } }

@media (max-width: 1080px) {
  .insight-float { width: 64vw; }
}
@media (max-width: 820px) {
  /* narrow: rails become slim top/bottom bands isn't ideal — shrink + allow the map to peek center */
  :root { --rail-w: clamp(190px, 44vw, 250px); }
  .rail { justify-content: flex-start; gap: 8px; padding-top: 92px; }
  .rail .card { backdrop-filter: blur(18px); }
  .legend, .spark, .near-list li:nth-child(n + 3) { display: none; }
  .insight-float { width: 86vw; bottom: 44px; }
}
@media (max-width: 560px) {
  /* phone: stack — left rail top, right rail bottom, map behind, no horizontal overflow */
  :root { --rail-w: calc(50vw - 14px); }
  .brand-sub { display: none; }
  .agenda-body .mini-cal { display: none; }
  .insight-float { display: none; }
}

/* ════ reduced motion — force final state (Web-Rules §3) ════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal, .spark i { opacity: 1 !important; transform: none !important; filter: none !important; }
  .insight-float.reveal { transform: translateX(-50%) !important; }
}

/* ════ AFINADO — swap de columnas + legibilidad lateral ════ */
:root { --rail-w: clamp(300px, 23vw, 400px); }

/* izquierda = Kalshi / Weather / Agenda · derecha = Stripe / Cloudflare / Leads */
.rail-l { left: auto; right: 0; }
.rail-r { right: auto; left: 0; }
.rail-r .rail-stack > :nth-child(1) { order: 2; } /* weather */
.rail-r .rail-stack > :nth-child(2) { order: 1; } /* kalshi  */
.rail-r .rail-stack > :nth-child(3) { order: 3; } /* agenda  */
.rail-l .rail-stack > :nth-child(1) { order: 3; } /* leads   */
.rail-l .rail-stack > :nth-child(2) { order: 1; } /* stripe  */
.rail-l .rail-stack > :nth-child(3) { order: 2; } /* cloudflare */

/* alto más compacto → las 3 tarjetas caben a mayor escala (texto legible) */
.rail-stack { gap: clamp(8px, 1vh, 14px); }
.card { padding: clamp(10px, 0.7vw, 15px) clamp(13px, 1vw, 19px) clamp(10px, 0.7vw, 14px); }
.card-head { padding-bottom: clamp(7px, 0.5vw, 10px); margin-bottom: clamp(7px, 0.5vw, 10px); }
.card-body { gap: clamp(6px, 0.5vw, 10px); }
.cf-foot { margin-top: 5px; padding-top: 6px; }

/* tipografía un punto mayor */
.card-title { font-size: clamp(12px, 0.95vw, 15.5px); }
.card-badge { font-size: clamp(8.5px, 0.66vw, 11px); }
.row-label { font-size: clamp(10px, 0.8vw, 13px); }
.row-val { font-size: clamp(15px, 1.2vw, 21px); }
.kpi-label { font-size: 9.5px; }
.kpi-val { font-size: clamp(16px, 1.4vw, 23px); }
.leads-unit, .tier-chip, .leads-sub, .row-mini-label, .legend span, .cf-foot { font-size: 10px; }
.near-list li, .notes li { font-size: clamp(10.5px, 0.82vw, 13.5px); }
.mc-grid span { font-size: clamp(10px, 0.78vw, 13px); }
.wx-desc { font-size: clamp(10px, 0.76vw, 12.5px); }
.map-base-chip { font-size: 11.5px; }

/* recortar lo más alto un pelín para que respire */
.leads-big .num, .cf-big { font-size: clamp(30px, 2.5vw, 44px); }
.near-list li:nth-child(3) { display: none; } /* top-2 nearest */
.notes li:nth-child(3) { display: none; }      /* 2 notas */