* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg: #0a0a0a;
            --surface: #141414;
            --border: #2a2a2a;
            --text: #e8e8e8;
            --text-dim: #888;
            --accent: #fff;
            --red: #ff4444;
            --green: #44ff88;
            --yellow: #ffaa00;
            --link: #8fd3ff;          /* soft cyan-blue */
            --link-hover: #cfeaff;    /* brighter on hover */
            --link-visited: #b8a8ff;  /* subtle purple so visited is distinguishable */
            --link-underline: rgba(143, 211, 255, 0.45);
            --link-underline-hover: rgba(207, 234, 255, 0.8);

            --quiet: #4ca37a;
            --active: #ffcc00;
            --surging: #f6502b;

            --nuclear: #97559d;
            --ship-blue: #00aaff;
            --ship-blue-dk: #0066cc;
          
            --ship-amber: #ffaa00;
            --ship-amber-dk: #cc6600;
          
            --ship-bg: rgba(5, 8, 15, 0.95);
            --ship-divider: #0a3050;
            --ship-muted: #0a8090;
          
            --ship-text: #e8e8e8;
            --ship-subtext: #8090a0;
          
            --ship-shadow-blue: rgba(0,170,255,0.5);
            --ship-shadow-amber: rgba(255,170,0,0.6);
        }

        body {
            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
            background: var(--bg);
            color: var(--text);
            font-size: 13px;      /* ↑ from 12px */
            line-height: 1.55;    /* slightly looser for mono */
            -webkit-font-smoothing: antialiased;
        }

        /* Nav */
  .gp-nav{
    border-bottom: 1px solid var(--border2);
    background: rgba(8, 12, 18, 0.92);
    backdrop-filter: blur(10px);
  }
  .gp-brand{
    font-weight: 900;
    letter-spacing: 0.2px;
  }
  .gp-nav .navbar-nav > li > a{ opacity: 0.90; }
  .gp-nav .navbar-nav > .active > a{
    background: transparent !important;
    opacity: 1;
    font-weight: 700;
  }
    

         /* Footer */
    .gp-footer{
        margin-top: 26px;
        padding-top: 16px;
        border-top: 1px solid var(--border2);
    }
    .gp-link{ color: var(--accent); }
    .gp-link:hover{ color: var(--accent); opacity: 0.85; text-decoration: none; }
    .gp-h4{ margin-top: 0; font-weight: 950; }

        .header {
            position: sticky;
            top: 0;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            padding: 0.75rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .header-left a {
            color: inherit;          /* use the original text color */
            text-decoration: none;   /* remove underline */
          }
          
          .header-left a:hover,
          .header-left a:focus,
          .header-left a:active {
            color: inherit;
            text-decoration: none;
          }

        .title {
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        /* Make headline links readable on dark backgrounds */
        a.item-title,
        a.ai-title,
        a.intel-title,
        .situation-item a.headline {
        color: var(--link);
        font-weight: 600;
        font-size: 0.90rem;    
        line-height: 1.25;
        text-decoration: none;  /* remove harsh underline */
        display: inline;        /* keeps natural flow */
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        border-bottom: 1px solid var(--link-underline); /* soft underline */
        padding-bottom: 1px;
        text-shadow: 0 0 10px rgba(143, 211, 255, 0.08);

        }

        /* Hover: brighter + clearer underline */
        a.item-title:hover,
        a.ai-title:hover,
        a.intel-title:hover,
        .situation-item a.headline:hover {
        color: var(--link-hover);
        border-bottom-color: var(--link-underline-hover);
        }

        /* Visited: not too loud, but distinguishable */
        a.item-title:visited,
        a.ai-title:visited,
        a.intel-title:visited,
        .situation-item a.headline:visited {
        color: var(--link-visited);
        border-bottom-color: rgba(184, 168, 255, 0.35);
        }

        /* Keyboard accessibility */
        a.item-title:focus-visible,
        a.ai-title:focus-visible,
        a.intel-title:focus-visible,
        .situation-item a.headline:focus-visible {
        outline: 2px solid rgba(143, 211, 255, 0.55);
        outline-offset: 2px;
        border-bottom-color: transparent;
        }


        .status {
            font-size: 0.7rem;
            color: var(--text-dim);
        }

        .status.loading {
            color: var(--accent);
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .refresh-btn, .settings-btn {
            background: var(--accent);
            color: var(--bg);
            border: none;
            padding: 0.4rem 1.2rem;
            font-family: inherit;
            font-size: 0.7rem;
            font-weight: bold;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .settings-btn {
            background: var(--surface);
            color: var(--text);
            border: 1px solid var(--border);
        }

        .monitors-btn {
            background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
            color: var(--bg);
            border: none;
            font-weight: bold;
            position: relative;
            overflow: hidden;
        }

        .monitors-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: monitors-shine 3s ease-in-out infinite;
        }

        @keyframes monitors-shine {
            0%, 100% { left: -100%; }
            50% { left: 100%; }
        }

        .refresh-btn:hover, .settings-btn:hover, .monitors-btn:hover {
            opacity: 0.8;
        }

        .refresh-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Settings Modal */
        .settings-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .settings-modal.open {
            display: flex;
        }

        .settings-content {
            background: var(--bg);
            border: 1px solid var(--border);
            padding: 1.5rem;
            max-width: 400px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .settings-title {
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }

        .settings-section {
            margin-bottom: 1rem;
        }

        .settings-section-title {
            font-size: 0.65rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
        }

        .panel-toggle-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .panel-toggle-item label {
            font-size: 0.75rem;
            cursor: pointer;
        }

        .toggle-switch {
            position: relative;
            width: 36px;
            height: 20px;
            background: var(--surface);
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .toggle-switch.on {
            background: var(--green);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: var(--text);
            border-radius: 50%;
            transition: transform 0.2s;
        }

        .toggle-switch.on::after {
            transform: translateX(16px);
        }

        /* .rotate-overlay {
            display: none;
          } */

        .settings-input {
            width: 100%;
            padding: 0.5rem;
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--text);
            font-family: inherit;
            font-size: 0.7rem;
            margin-bottom: 0.25rem;
        }

        .settings-input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .settings-hint {
            font-size: 0.6rem;
            color: var(--text-dim);
        }

        .settings-reset {
            width: 100%;
            padding: 0.5rem;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-dim);
            font-family: inherit;
            font-size: 0.65rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .settings-reset:hover {
            border-color: var(--red);
            color: var(--red);
        }

        .settings-close {
            margin-top: 1rem;
            width: 100%;
            padding: 0.6rem;
            background: var(--accent);
            color: var(--bg);
            border: none;
            font-family: inherit;
            font-size: 0.7rem;
            font-weight: bold;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
        }

        .dashboard {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: minmax(280px, auto);
            gap: 12px; /* ↑ from 1px: breathing room */
            background: var(--border);
          }
          

        .panel {
            background: var(--bg);
            display: flex;
            flex-direction: column;
            min-height: 330px;
            max-height: 600px;
            transition: min-height 0.2s, opacity 0.2s, transform 0.15s;
            overflow: hidden; /* prevents scroll bleed */
        }

        .panel-global-map {
            grid-column: span 3;
            min-height: 520px;
            position: relative;
          }

          .panel-news .panel-content {
            flex: 1;
            overflow-y: auto;
            padding-right: 6px;
          }

          .panel-news {
            border-left: 1px solid rgba(63, 210, 181, 0.15);
          }
        
        .panel-news {
            grid-column: span 1;
            min-height: 520px;
            display: flex;
            flex-direction: column;
          }

        .panel-feed {
            opacity: 0.85;
        }


        .panel.hidden {
            min-height: 0;
            display: none;
        }

        .panel.wide {
            grid-column: span 2;
        }

        .panel.dragging {
            opacity: 0.5;
            transform: scale(0.98);
        }

        .panel.drag-over {
            outline: 2px dashed var(--accent);
            outline-offset: -2px;
        }

        /* Resizable panels */
        .panel {
            position: relative;
            resize: none;
        }

        .panel-resize-handle {
            position: absolute;
            background: transparent;
            z-index: 10;
        }

        .panel-resize-handle.corner {
            width: 16px;
            height: 16px;
            bottom: 0;
            right: 0;
            cursor: nwse-resize;
        }

        .panel-resize-handle.corner::before {
            content: '';
            position: absolute;
            bottom: 3px;
            right: 3px;
            width: 8px;
            height: 8px;
            border-right: 2px solid var(--border);
            border-bottom: 2px solid var(--border);
            opacity: 0.5;
            transition: all 0.2s ease;
        }

        .panel:hover .panel-resize-handle.corner::before {
            opacity: 1;
            border-color: var(--text-dim);
        }

        .panel-resize-handle.corner:hover::before {
            border-color: var(--accent);
            width: 10px;
            height: 10px;
        }

        .panel-resize-handle.bottom {
            height: 6px;
            left: 0;
            right: 16px;
            bottom: 0;
            cursor: ns-resize;
        }

        .panel-resize-handle.right {
            width: 6px;
            top: 0;
            bottom: 16px;
            right: 0;
            cursor: ew-resize;
        }

        .panel.resizing {
            user-select: none;
            transition: none;
        }

        .panel.resizing * {
            pointer-events: none;
        }

        .panel-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: grab;
            user-select: none;
        }

        .panel-header:active {
            cursor: grabbing;
        }

        .panel-header:hover {
            background: var(--surface);
        }

        .drag-handle {
            color: var(--text-dim);
            margin-right: 0.5rem;
            font-size: 0.7rem;
            opacity: 0.5;
        }

        .panel-header:hover .drag-handle {
            opacity: 1;
        }

        .panel-header-left {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .panel-toggle {
            font-size: 0.6rem;
            color: var(--text-dim);
            transition: transform 0.2s;
        }

        .panel.collapsed .panel-toggle {
            transform: rotate(-90deg);
        }

        .panel-title {
            font-size: 0.75rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-dim);
        }

        .panel-count {
            font-size: 0.65rem;
            color: var(--text-dim);
        }

        .panel-content {
            flex: 1;
            overflow-y: auto;
            max-height: 600px;
            transition: max-height 0.2s;
        
            /* Firefox */
            scrollbar-width: thin;
            scrollbar-color: var(--border) transparent;
        }

        /* Chrome / Edge / Safari */
        .panel-content::-webkit-scrollbar {
        width: 6px;              /* ← narrower */
        }

        .panel-content::-webkit-scrollbar-track {
        background: transparent;
        }

        .panel-content::-webkit-scrollbar-thumb {
        background-color: var(--border);
        border-radius: 6px;
        }

        .panel.collapsed .panel-content {
            max-height: 0;
            overflow: hidden;
        }

        .panel.collapsed {
            min-height: auto;
        }

        .item {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.2s;
        }

        .item:hover {
            background: var(--surface);
        }

        .item.alert {
            border-left: 2px solid var(--yellow);
        }

        .item-source {
            font-size: 0.55rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.15rem;
        }

        .item-title {
            font-size: 0.75rem;
            font-weight: normal;
            color: var(--text);
            text-decoration: none;
            display: block;
        }

        .item-title:hover {
            color: var(--accent);
        }

        .item-time {
            font-size: 0.55rem;
            color: var(--text-dim);
            margin-top: 0.3rem;
        }

        .alert-tag {
            font-size: 0.5rem;
            background: var(--yellow);
            color: var(--bg);
            padding: 0.1rem 0.3rem;
            margin-left: 0.5rem;
            font-weight: bold;
        }

        /* Markets Panel */
        .market-item {
            padding: 0.5rem 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .market-name {
            font-size: 0.9rem;
            font-weight: bold;
        }

        .market-symbol {
            font-size: 0.55rem;
            color: var(--text-dim);
        }

        .market-data {
            text-align: right;
        }

        .market-price {
            font-size: 0.75rem;
            font-weight: bold;
        }

        .market-change {
            font-size: 0.65rem;
        }

        .market-change.up {
            color: var(--green);
        }

        .market-change.down {
            color: var(--red);
        }

        /* Sector Heatmap */
        .heatmap {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2px;
            padding: 0.2rem;
            width: 100%;
            grid-auto-rows: 1fr;
        }

        .heatmap-cell {
            padding: 0.6rem 0.4rem;
            text-align: center;
            font-size: 0.65rem;
            font-weight: bold;
            border-radius: 2px;
            min-height: 56px; 

        }

        .heatmap-cell .sector-name {
            font-size: 0.6rem;
            opacity: 0.9;
            /* margin-bottom: 0.2rem; */
            max-width: 90%;
        }

        .heatmap-cell .sector-change {
            font-size: 0.7rem;
        }

        .heatmap-cell.up-3 { background: #19e26d; color: #333; }
        .heatmap-cell.up-2 { background: #27a256; color: #fff; }
        .heatmap-cell.up-1 { background: #57946d; color: #fff; }
        .heatmap-cell.up-0 { background: #3e5947; color: #fff; }
        .heatmap-cell.down-0 { background: #8f4141; color: #fff; }
        .heatmap-cell.down-1 { background: #8a3a3a; color: #fff; }
        .heatmap-cell.down-2 { background: #aa3333; color: #fff; }
        .heatmap-cell.down-3 { background: #cc2222; color: #fff; }

        .sector-name {
            color: inherit;          /* same color as surrounding text */
            text-decoration: none;   /* remove underline */
            font-weight: inherit;   /* keep it looking like normal text */
          }
          
          .sector-name:hover,
          .sector-name:focus,
          .sector-name:active {
            color: inherit;
            text-decoration: none;
          }
          

       /* Polymarket - compact + readable */
       .prediction-category {
        margin-bottom: 12px;
      }
      
      .prediction-category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 4px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        opacity: 0.75;
      }
      
      .prediction-category-title { opacity: 0.95; }
      .prediction-category-count { opacity: 0.6; }

      
       /* =========================
   POLYMARKET PANEL (compact)
   ========================= */
/* =========================================================
   Polymarket Panel – v2 “looks great” CSS
   Works with your markup:
   .pm-event-link > .pm-event
     .pm-event-left (question + meta)
     .pm-event-right (pm-opt cards)
   .pm-opt contains:
     .pm-opt-head > .pm-opt-bar + .pm-opt-head-fg(title + pct)
     .pm-opt-content > .pm-opt-sub + .pm-opt-deltas
   ========================================================= */

/* ---- panel container ---- */
#polymarketPanel{
  display: grid;
  gap: 14px;
  padding: 10px 8px 4px;
}

/* ---- event link reset ---- */
.pm-event-link{
  text-decoration: none;
  color: inherit;
  display: block;
}
.pm-event-link:hover .pm-event{
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* ---- event card ---- */
.pm-event{
  display: grid;
  /* grid-template-columns: minmax(240px, 1.1fr) minmax(320px, 1fr); */
  gap: 6px;
  padding:4 px 0px 8px 6px;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 10% 0%,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.03) 45%,
      rgba(0,0,0,0.12) 100%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* ---- left side ---- */
.pm-event-left{
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 4px 0px 8px 6px;
}
.pm-event-q{
  font-size: 16px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.pm-event-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  opacity: 0.70;
}
.pm-event-deltas{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- right side (options) ---- */
.pm-event-right{
  display: grid;
  gap: 12px;
  align-content: start;
}

/* "+N more" line */
.pm-more{
  font-size: 10px;
  opacity: 0.65;
  padding-left: 6px;
}

/* ---- option card wrapper ---- */
.pm-opt{
  display: grid;
  grid-template-columns: 1fr;       /* ensure vertical stacking */
  grid-auto-rows: auto;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.pm-opt:hover{
  background: rgba(255,255,255,0.045);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    0 10px 22px rgba(0,0,0,0.25);
}

/* ---- header: full-width bar with overlayed fg ---- */
.pm-opt-head{
  position: relative;
  height: 44px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* background track */
.pm-opt-bar{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);
}
/* fill to probability */
.pm-opt-bar::before{
  content: "";
  position: absolute;
  inset: 0;
  width: var(--p);
  background: linear-gradient(90deg,
  rgba(43, 236, 146, 0.644),
  rgba(31, 191, 116, 0.315));
  transition: width 260ms ease;
}
/* subtle top sheen */
.pm-opt-bar::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.00) 55%
  );
  opacity: 0.55;
  pointer-events: none;
}

/* foreground content */
.pm-opt-head-fg{
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  min-width: 0;
}

/* title in header */
.pm-opt-title{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* improves contrast over green bar */
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  opacity: 0.92;
}

/* percent pill */
.pm-opt-pct{
  font-size: 14px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  white-space: nowrap;
  opacity: 0.95;
}

/* ---- content area under header ---- */
.pm-opt-content{
  display: grid;
  grid-template-columns: auto 1fr;   /* sub on left, chips take remaining */
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
  padding: 0 4px 2px 4px;
}

/* Vol line */
.pm-opt-sub{
  font-size: 10px;
  opacity: 0.78;
  letter-spacing: 0.01em;
  white-space: nowrap;              /* prevent wrap */
}

/* chips align to the right and wrap */
.pm-opt-deltas{
  display: flex;
  justify-content: flex-end;        /* right align */
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- generic delta chips ---- */
.pm-delta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  opacity: 0.95;
  line-height: 1;
}

/* state chip */
.pm-delta--muted{
  opacity: 0.55;
}

/* category tints (kept subtle, dark-mode friendly) */
.pm-delta--p{
  background: rgba(120,180,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(120,180,255,0.20);
}
.pm-delta--vol{
  background: rgba(0, 255, 162, 0.087);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 162, 0.118);
}
.pm-delta--liq{
  background: rgba(255,220,120,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,220,120,0.18);
}
.pm-delta--spr{
  background: rgba(255,120,120,0.13);
  box-shadow: inset 0 0 0 1px rgba(255,120,120,0.18);
}

/* ---- directional emphasis ---- */

/* positive (inflow / added liquidity) */
.pm-delta--pos.pm-delta--vol{
  background: rgba(0,255,160,0.14);
  box-shadow: inset 0 0 0 1px rgba(0,255,160,0.18);
}

.pm-delta--pos.pm-delta--liq{
  background: rgba(255, 220, 120, 0.20);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 120, 0.26);
}

/* negative (outflow / liquidity pulled) */
.pm-delta--neg.pm-delta--vol{
  background: rgba(0, 255, 162, 0.015);
  box-shadow: inset 0 0 0 1px rgba(0,255,160,0.18);
}

.pm-delta--neg.pm-delta--liq{
  background: rgba(255, 140, 80, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 80, 0.24);
}

/* flat / zero */
.pm-delta--flat{
  opacity: 0.55;
}


/* ---- event signal strip ---- */
.pm-signal{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  margin-top: 2px;
}

.pm-sig{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  font-size: 13px;
  line-height: 1;
  opacity: 0.92;
}

.pm-sig-k{
  opacity: 0.65;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pm-sig-v{
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* subtle category tints */
.pm-sig--vol, .pm-sig--dvol{
  background: rgba(0,255,160,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,255,160,0.16);
}
.pm-sig--liq, .pm-sig--dliq{
  background: rgba(255,220,120,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,220,120,0.16);
}
.pm-sig--spr, .pm-sig--dspr{
  background: rgba(255,120,120,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,120,120,0.14);
}
.pm-sig--dp{
  background: rgba(120,180,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(120,180,255,0.16);
}

.pm-baseline{
  margin-left: 8px;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.55;
  white-space: nowrap;
}

.pct-baseline{
  font-size: 11px;
  font-weight: 800;
  opacity: 0.85;
  white-space: nowrap;
}


/* ---- responsiveness ---- */
@media (max-width: 980px){
  .pm-event{
    grid-template-columns: 1fr;
  }
  .pm-event-q{
    font-size: 14px;
  }
}

@media (max-width: 520px){
  .pm-event{
    padding: 14px 14px;
    border-radius: 16px;
  }
  .pm-event-q{
    font-size: 12px;
  }
  .pm-opt{
    border-radius: 16px;
  }
  .pm-opt-title{
    font-size: 14px;
  }
  .pm-opt-pct{
    font-size: 12px;
    padding: 6px 9px;
  }
  .pm-opt-content{
    grid-template-columns: 1fr;     /* stack */
  }
  .pm-opt-deltas{
    justify-content: flex-start;
  }
  .pm-opt-sub{
    white-space: normal;
  }

  .pm-delta{
    font-size: 10px;
    padding: 7px 10px;
  }
}
/* background: linear-gradient(
    90deg,
    rgba(43, 236, 146, 0.644),
    rgba(31, 191, 116, 0.315)
  ); */



.gp-page-polymarket {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Full-height main area */
.gp-page-polymarket .gp-fullpage {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  overflow: hidden;     /* prevents body scroll + inner scroll */
  padding: 12px;
  min-height: 0;        /* IMPORTANT for nested flex */
}


.gp-page-polymarket .gp-center-2wide {
  flex: 1 1 auto;       /* <— this is the missing piece most of the time */
  width: 100%;
  max-width: 1100px;
  display: flex;
  min-height: 0;        /* IMPORTANT */
  align-items: stretch; /* ensure child fills height */
}

/* Panel fills available height */
.gp-page-polymarket .panel-polymarket {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel-polymarket {
background: var(--bg);
max-height: 900px;
transition: min-height 0.2s, opacity 0.2s, transform 0.15s;
overflow: hidden; /* prevents scroll bleed */
}

/* Scroll markets inside panel */
.gp-page-polymarket .panel-polymarket .panel-content {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.panel-polymarket a:hover,
.panel-polymarket a:focus {
  color: inherit;
  text-decoration: none; /* optional */
}

.pm-event-link {
  all: unset;
  display: block;
  cursor: pointer;
}

.pm-event-link:focus-visible {
  outline: 2px solid #1aa37a;
  outline-offset: 2px;
}




        .gp-about-status-summary{
            font-size: 12px;
            opacity: 0.85;
            margin: 6px 0 10px;
          }
          
          .gp-about-status-list{
            display: grid;
            gap: 8px;
          }
          
          .gp-about-status-row{
            display:flex;
            align-items:center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 10px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
          }
          
          .gp-about-status-left{
            display:flex;
            flex-direction: column;
            gap: 2px;
          }
          
          .gp-about-status-name{
            font-weight: 800;
            font-size: 12px;
          }
          
          .gp-about-status-meta{
            font-size: 11px;
            opacity: 0.75;
          }
          
          .gp-chip{
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.10);
            white-space: nowrap;
          }
          
          .gp-chip-fresh{ background: rgba(46,204,113,0.16); border-color: rgba(46,204,113,0.34); }
          .gp-chip-stale{ background: rgba(255,167,38,0.16); border-color: rgba(255,167,38,0.32); }
          .gp-chip-missing{ background: rgba(255,74,74,0.14); border-color: rgba(255,74,74,0.26); }
          .gp-chip-unknown{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }

          
          /* Overlay layer that sits directly above the map */
        #mapOverlays {
          position: absolute;
          top: 0;
          left: 0;

          width: 100%;
          height: 100%;

          z-index: 200;            /* must be ABOVE map/SVG */
          pointer-events: none;    /* allow map interaction by default */
        }
        /* World Map Panel */
        #worldMapContainer { 
            cursor: grab; 
            touch-action: none;     
            overscroll-behavior: contain;
        }
        #mapZoomWrapper { transform-origin: 0 0; }

        #worldMapContainer:active { cursor: grabbing; }

        #mapPanel {
            max-height: none;
            height: 550px;       
            overflow: hidden;
            max-width: 1100px;
          }
          

        /* Global Map - Situation Room Style */
        .world-map {
            width: 100%;
            height: 100%; /* 550px; */
            position: relative;
            background: #020a08;
            overflow: hidden;
            border: 1px solid #1b2430;
        }

        .world-map::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 40, 30, 0.03) 2px,
                rgba(0, 40, 30, 0.03) 4px
            );
            pointer-events: none;
            z-index: 10;
        }

        /* Subtle vignette to pull focus toward center */
        .world-map::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,0.35) 100%
            );
            pointer-events: none;
            z-index: 11; /* above grid scanlines */
        }
  

        .world-map svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* Zoomable map container */
        .map-zoom-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-origin: center center;
            transition: transform 0.3s ease;
        }

        .map-zoom-controls {
            position: absolute;
            top: 65px;
            right: 10px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            z-index: 50;
        }

        .map-zoom-btn {
            width: 28px;
            height: 28px;
            background: rgba(0, 30, 20, 0.9);
            border: 1px solid #0f6040;
            color: #00ff88;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            font-family: 'SF Mono', monospace;
        }

        .map-zoom-btn:hover {
            background: rgba(0, 60, 40, 0.9);
            border-color: #00ff88;
            box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
        }

        .map-zoom-btn:active {
            transform: scale(0.95);
        }

        .map-zoom-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .map-zoom-level {
            font-size: 0.55rem;
            color: #0f6040;
            text-align: center;
            padding: 2px 0;
            font-family: 'SF Mono', monospace;
        }

        .map-zoom-reset {
            font-size: 0.6rem;
            padding: 4px 6px;
            width: auto;
            height: auto;
        }

        /* Pan hint */
        .map-pan-hint {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.5rem;
            color: #0f6040;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 50;
            pointer-events: none;
        }

        .world-map:hover .map-pan-hint.show {
            opacity: 0.7;
        }

        .map-overlays {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5;
        }

        .map-overlays > * {
            pointer-events: auto;
        }

        .coord-label {
            position: absolute;
            font-size: 0.55rem;
            color: #0f6040;
            font-family: 'SF Mono', monospace;
            pointer-events: none;
            z-index: 5;
        }

        .coord-label.lat {
            transform: translateY(-50%);
        }

        .coord-label.lon {
            transform: translateX(-50%);
        }

        .map-corner-label {
            position: absolute;
            font-size: 0.5rem;
            color: #0f6040;
            font-family: 'SF Mono', monospace;
            letter-spacing: 0.1em;
            z-index: 15;
        }

        .map-corner-label.tl { top: 8px; left: 10px; }
        .map-corner-label.tr { top: 8px; right: 10px; }
        .map-corner-label.bl { bottom: 8px; left: 10px; }
        .map-corner-label.br { bottom: 8px; right: 10px; }

        .terminator-layer .night-shade {
            mix-blend-mode: multiply;
          }
          
        .terminator-layer .terminator-line {
            filter: drop-shadow(0 0 2px rgba(76, 93, 107, 0.55));
          }

        .hotspot {
            position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 20;
            
        }

        .hotspot-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: relative;
            border: 1px solid;
        }

        .hotspot-dot::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: pulse-ring 2s ease-out infinite;
        }

        .hotspot-dot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid;
            opacity: 0.2;
        }

        .hotspot.quiet .hotspot-dot {
            background: var(--quiet);
            border-color: var(--quiet);
            box-shadow: 0 0 7px var(--quiet), 0 0 15px rgba(0,255,136,0.3);
        }
        .hotspot.quiet .hotspot-dot::before { background: var(--quiet); }
        .hotspot.quiet .hotspot-dot::after { border-color: var(--quiet); }

        .hotspot.active .hotspot-dot {
            background: var(--active);
            border-color: var(--active);
            box-shadow: 0 0 10px var(--active), 0 0 15px rgba(255,204,0,0.3);
        }
        .hotspot.active .hotspot-dot::before { background: var(--active); }
        .hotspot.active .hotspot-dot::after { border-color: var(--active); }

        .hotspot.surging .hotspot-dot {
            background: var(--surging);
            border-color: var(--surging);
            box-shadow: 0 0 10px var(--surging), 0 0 20px rgba(255,51,51,0.4);
            animation: glow-high 1s ease-in-out infinite alternate;
        }
        .hotspot.surging .hotspot-dot::before { background: var(--surging); }
        .hotspot.surging .hotspot-dot::after { border-color: var(--surging); animation: target-lock 1.5s linear infinite; }

        @keyframes pulse-ring {
            0% { width: 100%; height: 100%; opacity: 0.6; }
            100% { width: 200%; height: 200%; opacity: 0; }
        }

        @keyframes pulse-ring-sm {
            0% { width: 75%; height: 75%; opacity: 0.6; }
            100% { width: 150%; height: 150%; opacity: 0; }
        }

        @keyframes glow-high {
            from { box-shadow: 0 0 10px var(--surging), 0 0 20px rgba(255,51,51,0.3); }
            to { box-shadow: 0 0 15px var(--surging), 0 0 30px rgba(255,51,51,0.5); }
        }

        @keyframes target-lock {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .hotspot-label {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.55rem;
            font-family: 'SF Mono', monospace;
            color: #00ff88;
            white-space: nowrap;
            text-shadow: 0 0 5px rgba(0,255,136,0.5);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .hotspot.active .hotspot-label { color: var(--active); text-shadow: 0 0 5px rgba(255,204,0,0.5); }
        .hotspot.surging .hotspot-label { color: var(--surging); text-shadow: 0 0 5px rgba(255,51,51,0.5); }

        .hotspot-info {
            font-size: 0.45rem;
            color: #0a8060;
            text-transform: none;
        }


        /* Make hotspots clickable */
        .hotspot {
            cursor: pointer;
            pointer-events: auto;
        }

        .hotspot:hover .hotspot-dot {
            transform: scale(1.4);
        }

        .hotspot:hover .hotspot-label {
            transform: translateX(-50%) scale(1.1);
            text-shadow: 0 0 10px currentColor;
            display: block;
        }

        .hotspot.quiet:hover .hotspot-dot { box-shadow: 0 0 25px #00ff88, 0 0 40px rgba(0,255,136,0.5); }
        .hotspot.surging:hover .hotspot-dot { box-shadow: 0 0 25px var(--active), 0 0 40px rgba(255,204,0,0.5); }
        .hotspot.active:hover .hotspot-dot { box-shadow: 0 0 30px var(--surging), 0 0 50px rgba(255,51,51,0.6); }


        
/* Base marker: shared positioning + ring */
.chokepoint,
.port{
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 20; 
}

.chokepoint::before,
.port::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}

@keyframes ship-scan{
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.chokepoint:hover::before,
.port:hover::before{
  border-color: var(--ship-blue);
  animation: ship-scan 1.5s ease-in-out infinite;
}

/* Base label: same style for both */
.chokepoint-label,
.port-label{
display:none;
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.45rem;
  color: var(--ship-blue);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chokepoint:hover .chokepoint-label,
.port:hover .port-label{
  color: #4eb9b9;
  text-shadow: 0 0 8px rgba(0,255,255,0.6);
  font-size: 0.8rem;
  display: block;
}

/* Base icon sizing */
.chokepoint-icon,
.port-icon{
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.chokepoint:hover .chokepoint-icon,
.port:hover .port-icon{
  transform: scale(1.25);
  box-shadow: 0 0 15px rgba(0,170,255,0.8);
}

/* =========================
   PORT (distinct icon)
   ========================= */

   .port-icon{
    border-radius: 4px; /* square-ish */
    border: 1px solid rgba(0,0,0,0.35);
    background: rgba(182, 94, 209, 0.9);
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  }
  
  
  
  .port.alert .port-icon{
    filter: saturate(1.2);
  }
  
  .port-icon::after{
    content: "\f13d"; /* fa-anchor */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    opacity: 0.9;
  }
  

  /* Ensure icons can host pseudo elements */
.chokepoint-icon,
.port-icon {
  position: relative;
}

/* Only animate when there is matched news */
/* Keep anchor on ::after, use ::before for ping ring */
.chokepoint.has-news .chokepoint-icon::before,
.port.has-news .port-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.5;
  animation: gpPing 1.8s ease-out infinite;
  pointer-events: none;

  /* ensure the ring sits BEHIND the anchor glyph */
  z-index: 0;
}

/* Optional: a subtle glow on the icon itself */
.chokepoint.has-news .chokepoint-icon,
.port.has-news .port-icon {
  animation: gpGlow 1.8s ease-in-out infinite;
}

@keyframes gpPing {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.0; }
  20%  { opacity: 0.6; }
  70%  { opacity: 0.0; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0.0; }
}

@keyframes gpGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(255,255,255,0.55)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chokepoint.has-news .chokepoint-icon::after,
  .port.has-news .port-icon::after,
  .chokepoint.has-news .chokepoint-icon,
  .port.has-news .port-icon {
    animation: none !important;
  }
}

/* =========================
   NO DATA STATE
   ========================= */

   .chokepoint.no-data .chokepoint-icon,
   .port.no-data .port-icon{
     background: #666;           /* neutral gray */
     border-color: rgba(0,0,0,0.4);
     box-shadow: none;
     filter: grayscale(0.4);
     z-index: 17;             /* beneath normal markers */
   }

   .chokepoint.no-data:hover::before,
.port.no-data:hover::before{
  border-color: rgba(160,160,160,0.5);
  animation: none;
}

.chokepoint.no-data:hover .chokepoint-icon,
.port.no-data:hover .port-icon{
  transform: scale(1.1);         /* subtle hover, not flashy */
  box-shadow: 0 0 6px rgba(160,160,160,0.4);
}

.chokepoint.no-data .chokepoint-label,
.port.no-data .port-label{
  color: #9aa3ad;
  text-shadow: none;
}

/* Any marker with data floats above no-data */
.chokepoint:not(.no-data),
.port:not(.no-data) {
  z-index: 20;
}

/* Alerts always highest */
.chokepoint.alert,
.port.alert {
  z-index: 30;
}

/* NODATA should be colored, not gray */
.chokepoint.alert-nodata .chokepoint-icon,
.port.alert-nodata .port-icon {
  border: 1px solid rgba(90, 220, 255, 0.85);
  background: rgba(90, 220, 255, 0.18);
  box-shadow: 0 0 10px rgba(90, 220, 255, 0.22);
}

.chokepoint.alert-nodata .chokepoint-label,
.port.alert-nodata .port-label {
  opacity: 0.9;
}

/* Optional: small “?” badge vibe */
.chokepoint.alert-nodata .cp-badge,
.port.alert-nodata .cp-badge {
  background: rgba(90, 220, 255, 0.12);
  border: 1px solid rgba(90, 220, 255, 0.35);
  color: rgba(90, 220, 255, 0.95);
}


  
/* =========================
   CHOKEPOINT (anchor square)
   ========================= */

.chokepoint-icon{
  background: var(--ship-blue-dk);
  border: 2px solid var(--ship-blue);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--ship-shadow-blue);
}

.chokepoint-icon::after{
  content: "\f13d"; /* fa-anchor */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
}

/* Chokepoint alert state */
@keyframes ship-pulse{
  0%, 100% { box-shadow: 0 0 8px rgba(255,170,0,0.4); }
  50% { box-shadow: 0 0 16px rgba(255,170,0,0.8); }
}

.chokepoint.alert .chokepoint-icon{
  background: var(--ship-amber-dk);
  border-color: var(--ship-amber);
  box-shadow: 0 0 12px var(--ship-shadow-amber);
  animation: ship-pulse 1.5s ease-in-out infinite;
}

.chokepoint.alert:hover .chokepoint-icon{
  box-shadow: 0 0 20px rgba(255,170,0,1);
}

/* badge weights */
.chokepoint.alert-low .cp-badge { opacity: .85; }
.chokepoint.alert-med .cp-badge { font-weight: 600; }
.chokepoint.alert-high .cp-badge { font-weight: 700; }
.chokepoint.alert-critical .cp-badge { font-weight: 800; }

/* =========================
   PORT (distinct icon)
   ========================= */



  
        /* Earthquake markers */
        .quake {
            position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: auto;
            z-index: 17;
            cursor: pointer;
        }

        .quake::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid transparent;
            transition: all 0.3s ease;
        }

        .quake:hover::before {
            border-color: #ff6600;
            animation: quake-ring 0.5s ease-out infinite;
        }

        @keyframes quake-ring {
            0% { width: 20px; height: 20px; opacity: 1; }
            100% { width: 40px; height: 40px; opacity: 0; }
        }

        .quake:hover .quake-icon {
            filter: brightness(1.5);
            transform: scale(1.3);
        }
        .quake-label {
            position: absolute;
            top: -0.480rem;
            left: 1.3rem;
            transform: translateX(-50%);
            font-size: 0.7rem;
            font-family: 'SF Mono', monospace;
            color: #ff6600;
            white-space: nowrap;
            text-shadow: 0 0 5px rgba(255,102,0,0.5);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: color 0.2s, text-shadow 0.2s, transform 0.2s;

        }
        .quake:hover .quake-label {
            color: #ff9944;
            text-shadow: 0 0 8px rgba(255, 102, 0, 0.8);
            transform: translateX(-50%) scale(1.1);
        }

        .quake-icon {
            width: 4px;
            height: 4px;
            background: radial-gradient(circle, yellow 0%, orange 100%);
            /* border-radius: 50%; */
            animation: quake-pulse 2.0s cubic-bezier(0.4, 0, 1, 1) infinite;
            transition: transform 0.2s, filter 0.2s;
        }

        .quake.major .quake-icon {
            width: 18px;
            height: 18px;
            background: radial-gradient(circle, #ff0000 0%, #cc0000 100%);
            animation: quake-pulse-major 1.75s ease-out infinite;
        }

        .quake.major:hover .quake-icon {
            box-shadow: 0 0 25px rgba(255, 0, 0, 0.9);
        }

        @keyframes quake-pulse {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }

        @keyframes quake-pulse-major {
            0% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px #ff0000; }
            100% { transform: scale(2.5); opacity: 0; box-shadow: 0 0 30px #ff0000; }
        }





  /* Oil markers – match shipping style */
.oil-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    z-index: 18;
  }
  
  /* Square, subtle, infrastructure-style */
  .oil-icon {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 4px; /* square-ish like ports */
    border: 1px solid rgba(0,0,0,0.35);
    background: rgba(160, 160, 160, 0.85); /* neutral default */
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  }
  
  /* Icon glyph */
  .oil-icon::after {
    content: "\e532"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    font-size: 8px;
    opacity: 0.85;
    color: #111;
  }
  
  /* --- States --- */
  
  .oil-marker.no-data .oil-icon {
    background: rgba(110,110,110,0.6);
    opacity: 0.6;
  }
  
  .oil-marker.alert-normal .oil-icon {
    background: var(--quiet); /* calm green */
  }
  
  .oil-marker.alert-elevated .oil-icon {
    background: var(--active); /* amber */
  }
  
  .oil-marker.alert-high .oil-icon {
    background: var(--surging); /* red */
  }
  
  /* Optional: subtle emphasis only */
  .oil-marker.alert .oil-icon {
    filter: saturate(1.15);
  }
  
  
  .oil-badge {
    margin-left: 6px;
    font-size: 9px;
    opacity: 0.9;
  }
  
  .oil-badge-nodata { opacity: 0.75; }
  



        /* Cyber threat indicators */
        .cyber-zone {
            position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: auto;
            z-index: 16;
            cursor: pointer;
        }

        .cyber-zone::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: 1px solid transparent;
            transition: all 0.3s ease;
        }

        .cyber-zone:hover::before {
            border-color: #ff00ff;
            background: radial-gradient(circle, rgba(255,0,255,0.1) 0%, transparent 70%);
            animation: cyber-expand 1.5s ease-out infinite;
        }

        @keyframes cyber-expand {
            0% { width: 25px; height: 25px; opacity: 1; }
            100% { width: 50px; height: 50px; opacity: 0; }
        }

        .cyber-zone:hover .cyber-icon {
            opacity: 1;
            box-shadow: 0 0 25px rgba(255,0,255,0.9);
            transform: scale(1.2);
            animation: cyber-scan 1s linear infinite;
        }

        .cyber-zone:hover .cyber-label {
            opacity: 1;
            color: #ff66ff;
            text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
            transform: translateX(-50%) scale(1.1);
        }

        .cyber-icon {
            width: 20px;
            height: 20px;
            border: 1px dashed #ff00ff;
            border-radius: 50%;
            opacity: 0.4;
            animation: cyber-scan 3s linear infinite;
            transition: all 0.3s ease;
        }

        .cyber-zone.active .cyber-icon {
            opacity: 0.8;
            border-color: #ff00ff;
            box-shadow: 0 0 15px rgba(255,0,255,0.4);
            animation: cyber-active 1s ease-in-out infinite;
        }

        .cyber-zone.active:hover .cyber-icon {
            box-shadow: 0 0 30px rgba(255,0,255,1);
        }

        @keyframes cyber-scan {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes cyber-active {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        .cyber-label {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.45rem;
            color: #ff00ff;
            opacity: 0.6;
            transition: all 0.2s ease;
        }





        /* Layoff tracker */
        .layoff-item {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .layoff-company {
            font-size: 0.75rem;
            font-weight: bold;
            color: var(--text);
        }

        .layoff-count {
            font-size: 0.8rem;
            color: var(--red);
            font-weight: bold;
            float: right;
        }

        .layoff-meta {
            font-size: 0.75rem;
            color: var(--text-dim);
            margin-top: 0.2rem;
        }

        /* Situation panels */
        .situation-header {
            padding: 0.75rem 1rem;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }

        .situation-title {
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 0.3rem;
            padding: 0.65rem 1rem;
        }

        .situation-subtitle {
            font-size: 0.6rem;
            color: var(--text-dim);
        }

        .situation-status {
            display: inline-block;
            padding: 0.15rem 0.4rem;
            font-size: 0.55rem;
            font-weight: bold;
            border-radius: 2px;
            margin-left: 0.5rem;
        }

        .situation-status.critical { background: var(--red); color: #fff; }
        .situation-status.elevated { background: var(--yellow); color: var(--bg); }
        .situation-status.monitoring { background: var(--green); color: var(--bg); }

        .situation-item {
            padding: 0.65rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .situation-item .meta {
            margin-top: 0.35rem;
            font-size: 0.78rem;
            opacity: 0.85;
          }

        .situation-item .label {
            color: var(--text-dim);
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .loading-msg {
            padding: 1rem;
            color: var(--text-dim);
            font-size: 0.7rem;
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }


        /* Livestream */
        .panel-wide {
            grid-column: span 2;
        }

        
        .panel-livestream {
            min-height: auto;
        }

        

        .livestream-container {
            padding: 0 !important;
            aspect-ratio: 16 / 9;
            max-height: none;
            overflow: hidden;
        }

        .livestream-container iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        .live-indicator {
            background: var(--red);
            color: #fff;
            padding: 0.15rem 0.4rem;
            border-radius: 3px;
            font-size: 0.55rem;
            font-weight: bold;
            animation: live-pulse 2s ease-in-out infinite;
        }

        @keyframes live-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

   
  
  


        /* Congressional Trades */
        .congress-item {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .congress-info {
            flex: 1;
            min-width: 0;
        }

        .congress-name {
            font-size: 0.9rem;
            font-weight: bold;
            color: var(--text);
        }

        .congress-party {
            font-size: 0.55rem;
            padding: 0.1rem 0.3rem;
            border-radius: 2px;
            margin-left: 0.4rem;
        }

        .congress-party.D { background: #2266cc; color: #fff; }
        .congress-party.R { background: #cc2222; color: #fff; }
        .congress-party.I { background: #666; color: #fff; }

        .congress-ticker {
            font-size: 0.75rem;
            font-weight: bold;
            color: var(--accent);
            margin-top: 0.2rem;
        }

        .congress-meta {
            font-size: 0.55rem;
            color: var(--text-dim);
            margin-top: 0.15rem;
        }

        .congress-type {
            text-align: right;
        }

        .congress-action {
            font-size: 0.65rem;
            font-weight: bold;
            padding: 0.2rem 0.4rem;
            border-radius: 2px;
        }

        .congress-action.buy { background: var(--green); color: var(--bg); }
        .congress-action.sell { background: var(--red); color: #fff; }

        .congress-amount {
            font-size: 0.55rem;
            color: var(--text-dim);
            margin-top: 0.25rem;
        }

        /* Whale Watch */
        .whale-item {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .whale-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .whale-coin {
            font-size: 0.9rem;
            font-weight: bold;
        }

        .whale-amount {
            font-size: 0.75rem;
            font-weight: bold;
            color: var(--accent);
        }

        .whale-usd {
            font-size: 0.55rem;
            color: var(--text-dim);
        }

        .whale-flow {
            font-size: 0.6rem;
            color: var(--text-dim);
            margin-top: 0.2rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .whale-flow .arrow {
            color: var(--yellow);
        }

        /* Main Character */
        .main-char-display {
            padding: 1.5rem 1rem;
            text-align: center;
        }

        .main-char-label {
            font-size: 0.6rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
        }

        .main-char-name {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--accent);
            margin-bottom: 0.3rem;
        }

        .main-char-count {
            font-size: 0.9rem;
            color: var(--text-dim);
        }

        .main-char-list {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .char-row {
            display: flex;
            justify-content: space-between;
            padding: 0.35rem 1rem;
            font-size: 0.7rem;
        }

        .char-row .rank {
            color: var(--text-dim);
            width: 1.5rem;
        }

        .char-row .name {
            flex: 1;
        }

        .char-row .mentions {
            color: var(--text-dim);
        }

        /* Contracts */
        .contract-item {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .contract-agency {
            font-size: 0.75rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .contract-desc {
            font-size: 0.85rem;
            color: var(--text);
            margin-top: 0.2rem;
        }

        .contract-meta {
            display: flex;
            justify-content: space-between;
            margin-top: 0.3rem;
            font-size: 0.6rem;
        }

        .contract-vendor {
            font-size: 0.6rem;
            color: var(--text-dim);
        }

        .contract-value {
            font-size: 0.9rem;
            font-weight: bold;
            color: var(--green);
        }

        /* AI Tracker */
        .ai-item {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .ai-source {
            font-size: 0.55rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .ai-title {
            font-size: 0.75rem;
            color: var(--text);
            margin-top: 0.15rem;
        }

        .ai-date {
            font-size: 0.55rem;
            color: var(--text-dim);
            margin-top: 0.2rem;
        }

        /* Intel Feed */
        .intel-item {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .intel-item.priority {
            border-left: 2px solid var(--red);
            background: rgba(255, 68, 68, 0.05);
        }

        .intel-hotspot{
            position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: auto;
          }
          
          .hotspot-label{
            display:none;
            position: absolute;
            left: 50%;
            bottom: 100%;                 /* place above */
            transform: translate(-50%, -10px);
            white-space: nowrap;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
          
            /* readability */
            color: rgba(190, 255, 220, 0.95);
            text-shadow: 0 0 10px rgba(0,0,0,0.75), 0 0 18px rgba(0,255,170,0.12);
            pointer-events: none;          /* clicks go to marker */
          }
          
          

        .intel-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 0.2rem;
        }

        .intel-source {
            font-size: 0.55rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .intel-tags {
            display: flex;
            gap: 0.3rem;
            flex-wrap: wrap;
        }

        .intel-tag {
            font-size: 0.5rem;
            padding: 0.1rem 0.35rem;
            border-radius: 2px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .intel-tag.region {
            background: #1a3a5a;
            color: #6ab0ff;
        }

        .intel-tag.topic {
            background: #3a2a4a;
            color: #b090d0;
        }

        .intel-tag.osint {
            background: #2a4a3a;
            color: #60d090;
        }

        .intel-tag.govt {
            background: #4a3a2a;
            color: #d0a060;
        }

        .intel-title {
            font-size: 0.75rem;
            color: var(--text);
            text-decoration: none;
            display: block;
            line-height: 1.4;
        }

        .intel-title:hover {
            color: var(--accent);
        }

        .intel-meta {
            font-size: 0.55rem;
            color: var(--text-dim);
            margin-top: 0.25rem;
            display: flex;
            gap: 0.75rem;
        }

        /* Money Printer Gauge */
        .printer-gauge {
            padding: 1.5rem 1rem;
            text-align: center;
        }

        .printer-label {
            font-size: 0.6rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.75rem;
        }

        .printer-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--accent);
        }

        .printer-unit {
            font-size: 0.8rem;
            color: var(--text-dim);
            margin-left: 0.3rem;
        }

        .printer-change {
            font-size: 0.8rem;
            margin-top: 0.5rem;
        }

        .printer-change.up { color: var(--red); }
        .printer-change.down { color: var(--green); }

        .printer-bar {
            margin-top: 1rem;
            height: 8px;
            background: var(--surface);
            border-radius: 4px;
            overflow: hidden;
        }

        .printer-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--green), var(--yellow), var(--red));
            transition: width 0.5s ease;
        }

        .printer-status {
            margin-top: 0.75rem;
            font-size: 0.65rem;
            color: var(--text-dim);
        }

        .printer-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 0.4rem;
            animation: blink 1s infinite;
        }

        .printer-indicator.on { background: var(--red); }
        .printer-indicator.off { background: var(--green); }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .section-divider {
            padding: 0.4rem 1rem;
            background: var(--surface);
            font-size: 0.55rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-dim);
        }


        

        /* Conflict Zone Boundaries - Enhanced Overlays */
        .conflict-zone-path {
            fill: none;
            stroke: var(--surging);
            stroke-width: 2;
            stroke-dasharray: 8, 4;
            stroke-linecap: round;
            opacity: 0.8;
            animation: conflict-march 1s linear infinite;
        }

        .conflict-zone-path.high-intensity {
            stroke: #ff0000;
            stroke-width: 3;
            filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.8));
            animation: conflict-march 0.8s linear infinite, conflict-pulse 2s ease-in-out infinite;
        }

        .conflict-zone-fill {
            fill: rgba(255, 50, 50, 0.08);
            stroke: none;
            animation: conflict-fill-pulse 3s ease-in-out infinite;
        }

        .conflict-zone-fill.high-intensity {
            fill: rgba(255, 30, 30, 0.15);
            animation: conflict-fill-pulse 2s ease-in-out infinite;
        }

        /* Conflict zone inner glow effect */
        .conflict-zone-glow {
            fill: none;
            stroke: rgba(255, 50, 50, 0.4);
            stroke-width: 8;
            filter: blur(4px);
            animation: conflict-glow-pulse 2s ease-in-out infinite;
        }

        .conflict-zone-label {
            position: absolute;
            font-size: 0.55rem;
            color: #dd2f2f;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            background: rgba(20, 0, 0, 0.85);
            padding: 0.2rem 0.5rem;
            border: 1px solid var(--surging);
            pointer-events: auto;
            cursor: pointer;
            white-space: nowrap;
            animation: conflict-label-pulse 2s ease-in-out infinite;
            transition: all 0.2s ease;
            box-shadow: 0 0 10px rgba(255, 50, 50, 0.3), inset 0 0 8px rgba(255, 50, 50, 0.1);
        }

        .conflict-zone-label::before {
            content: '⚠';
            margin-right: 4px;
            font-size: 0.6rem;
        }

        .conflict-zone-label.high-intensity {
            border-color: #ff0000;
            color: #ff0000;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.5), inset 0 0 10px rgba(255, 0, 0, 0.2);
            animation: conflict-label-pulse-high 1.5s ease-in-out infinite;
        }

        .conflict-zone-label.high-intensity::before {
            content: '🔴';
            animation: rotate 4s linear infinite;
        }

        .conflict-zone-label:hover {
            background: rgba(60, 0, 0, 0.95);
            transform: scale(1.15);
            box-shadow: 0 0 20px rgba(255, 51, 51, 0.7), inset 0 0 15px rgba(255, 50, 50, 0.3);
            animation: none;
            z-index: 100;
        }

        @keyframes conflict-march {
            to { stroke-dashoffset: -12; }
        }

        @keyframes conflict-pulse {
            0%, 100% { stroke-width: 3; }
            50% { stroke-width: 4; }
        }

        @keyframes conflict-fill-pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        @keyframes conflict-glow-pulse {
            0%, 100% { opacity: 0.3; stroke-width: 8; }
            50% { opacity: 0.6; stroke-width: 12; }
        }

        @keyframes conflict-label-pulse {
            0%, 100% { opacity: 0.9; box-shadow: 0 0 10px rgba(255, 50, 50, 0.3), inset 0 0 8px rgba(255, 50, 50, 0.1); }
            50% { opacity: 1; box-shadow: 0 0 15px rgba(255, 50, 50, 0.5), inset 0 0 10px rgba(255, 50, 50, 0.2); }
        }

        @keyframes conflict-label-pulse-high {
            0%, 100% { opacity: 0.9; box-shadow: 0 0 15px rgba(255, 0, 0, 0.5), inset 0 0 10px rgba(255, 0, 0, 0.2); }
            50% { opacity: 1; box-shadow: 0 0 25px rgba(255, 0, 0, 0.7), inset 0 0 15px rgba(255, 0, 0, 0.3); }
        }


  
/* Spiderfy map */
       .spider-layer {
        position: absolute;
        inset: 0;
        z-index: 9999;           /* above overlays */
        display: none;
        pointer-events: none;    /* enabled only when active */
      }
      
      .spider-layer.active {
        display: block;
        pointer-events: auto;
      }
      

        .spider-lines {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        }

        .spider-node {
        position: absolute;
        z-index: 2;               /* ABOVE lines */
        transform: translate(-50%, -50%);
        pointer-events: auto;
        }

      
      /* Big tap halo */
      .spider-node::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 34px;
        height: 34px;
        transform: translate(-50%, -50%);
        border-radius: 999px;
        /* keep it invisible but tappable */
        background: rgba(255,255,255,0.001);
      }
      
      /* Optional: make the fanned markers visually “pop” a bit */
      .spider-node .spider-clone {
        filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
      }
      


        /* Hotspot Popup (panel style) */
        .hotspot-popup {
            display: none;
            position: absolute;
            z-index: 100;
            top: 20px !important;
            right: 20px !important;
          
            background: linear-gradient(
              180deg,
              rgba(10, 18, 14, 0.98) 0%,
              rgba(6, 12, 9, 0.98) 65%,
              rgba(4, 8, 6, 0.98) 100%
            );
          
            border: 1px solid rgba(70, 255, 160, 0.35);
            border-radius: 10px;
            outline: 1px solid rgba(120, 255, 190, 0.10);
          
            min-width: 340px;
            max-width: 460px;
            max-height: min(72vh, 560px);
          
            box-shadow:
              0 18px 60px rgba(0,0,0,0.7),
              0 0 40px rgba(40, 255, 170, 0.10);
          
            backdrop-filter: blur(6px);
            overflow: hidden; /* enables sticky header + body scroll */
            pointer-events: auto;
          }
          
          .hotspot-popup.visible { display: block; }
          .hotspot-popup {
            /* Surface */
            background:
              radial-gradient(120% 140% at 0% 0%,
                rgba(70, 255, 160, 0.14) 0%,
                rgba(10, 22, 18, 0.92) 42%,
                rgba(0, 0, 0, 0.96) 100%);
            border: 1px solid rgba(70, 255, 160, 0.18);
            border-radius: 16px;
          
            /* Depth */
            box-shadow:
              0 18px 44px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(70, 255, 160, 0.06) inset,
              0 0 28px rgba(70, 255, 160, 0.06);
          
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
          
            overflow: hidden;
            position: relative;
          }
          
          /* Optional subtle scan/noise overlay */
          .hotspot-popup::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
              repeating-linear-gradient(
                to bottom,
                rgba(255,255,255,0.02) 0px,
                rgba(255,255,255,0.02) 1px,
                rgba(0,0,0,0.00) 3px,
                rgba(0,0,0,0.00) 6px
              );
            opacity: 0.25;
            mix-blend-mode: overlay;
          }
          
          /* =========================================================
             Header – more presence, clearer controls
             ========================================================= */
          
          .hotspot-popup-header {
            position: sticky;
            top: 0;
            z-index: 3;
          
            padding: 0.95rem 1rem 0.85rem;
            border-bottom: 1px solid rgba(70, 255, 160, 0.14);
          
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.75rem;
          
            background:
              linear-gradient(180deg,
                rgba(70, 255, 160, 0.10),
                rgba(0,0,0,0.55));
          }
          
          .hotspot-popup-title {
            font-size: 0.92rem;              /* bump */
            font-weight: 900;
            color: rgba(200, 255, 230, 0.98);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            line-height: 1.1;
          
            text-shadow: 0 0 10px rgba(70,255,160,0.14);
          }
          
          .hotspot-popup-subtitle {
            margin-top: 0.35rem;
            font-size: 0.60rem;
            color: rgba(170, 220, 195, 0.82);
            letter-spacing: 0.08em;
          }
          
          .hotspot-popup-header-right {
            display: flex;
            align-items: center;
            gap: 0.5rem;
          }
          
          .hotspot-popup-level {
            font-size: 0.56rem;
            padding: 0.30rem 0.60rem;
            border-radius: 999px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.14em;
          
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: 0 0 0 1px rgba(0,0,0,0.22) inset;
          }
          
          /* Make level colors feel "systemy" not loud blocks */
          .hotspot-popup-level.high {
            background: rgba(255, 60, 60, 0.18);
            border-color: rgba(255, 60, 60, 0.35);
            color: rgba(255, 210, 210, 0.98);
          }
          .hotspot-popup-level.medium {
            background: rgba(255, 160, 0, 0.16);
            border-color: rgba(255, 160, 0, 0.35);
            color: rgba(255, 235, 200, 0.98);
          }
          .hotspot-popup-level.watch,
          .hotspot-popup-level.low,
          .hotspot-popup-level.normal {
            background: rgba(70, 255, 160, 0.14);
            border-color: rgba(70, 255, 160, 0.28);
            color: rgba(200, 255, 230, 0.98);
          }
          
          .hotspot-popup-close {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.10);
            color: rgba(170, 220, 195, 0.92);
          
            width: 30px;
            height: 30px;
            border-radius: 10px;
          
            font-size: 1.05rem;
            cursor: pointer;
            line-height: 1;
          
            box-shadow:
              0 10px 18px rgba(0,0,0,0.35),
              0 0 0 1px rgba(0,0,0,0.22) inset;
          
            transition: transform 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
          }
          
          .hotspot-popup-close:hover {
            transform: translateY(-1px);
            color: rgba(220, 255, 240, 1);
            background: rgba(70, 255, 160, 0.10);
            border-color: rgba(70, 255, 160, 0.24);
          }
          
          /* =========================================================
             Body + Scrollbar polish
             ========================================================= */
          
          .hotspot-popup-body {
            overflow-y: auto;
            max-height: calc(min(72vh, 560px) - 62px);
            padding: 0.85rem; /* add breathing room */
          }
          
          /* Thin, themed scrollbars */
          .hotspot-popup-body::-webkit-scrollbar,
          .hotspot-popup-headlines::-webkit-scrollbar {
            width: 8px;
          }
          .hotspot-popup-body::-webkit-scrollbar-track,
          .hotspot-popup-headlines::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.03);
            border-left: 1px solid rgba(70,255,160,0.08);
          }
          .hotspot-popup-body::-webkit-scrollbar-thumb,
          .hotspot-popup-headlines::-webkit-scrollbar-thumb {
            background: rgba(70,255,160,0.18);
            border: 1px solid rgba(70,255,160,0.22);
            border-radius: 999px;
          }
          .hotspot-popup-body::-webkit-scrollbar-thumb:hover,
          .hotspot-popup-headlines::-webkit-scrollbar-thumb:hover {
            background: rgba(70,255,160,0.26);
          }
          
          /* =========================================================
             Section cards – make components distinguishable
             ========================================================= */
          
          .hotspot-popup-section {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(70,255,160,0.10);
            border-radius: 14px;
            box-shadow:
              0 14px 26px rgba(0,0,0,0.40),
              0 0 0 1px rgba(0,0,0,0.20) inset;
            overflow: hidden;
            margin-bottom: 0.75rem;
          }
          
          .hotspot-popup-section-header {
            padding: 0.65rem 0.85rem;
            border-bottom: 1px solid rgba(70,255,160,0.10);
            background:
              linear-gradient(180deg,
                rgba(70,255,160,0.08),
                rgba(0,0,0,0.00));
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
          }
          
          .hotspot-popup-section-title {
            font-size: 0.52rem;
            color: rgba(200,255,230,0.88);
            text-transform: uppercase;
            letter-spacing: 0.16em;
          }
          
          /* =========================================================
             Meta cards – cleaner grid, more contrast
             ========================================================= */
          
          .hotspot-popup-meta {
            padding: 0.8rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.65rem;
          }
          
          .hotspot-popup-meta-item {
            padding: 0.60rem 0.65rem;
            border-radius: 12px;
            background: rgba(70, 255, 160, 0.05);
            border: 1px solid rgba(70, 255, 160, 0.12);
            box-shadow: 0 0 0 1px rgba(0,0,0,0.18) inset;
          }
          
          .hotspot-popup-meta-label {
            color: rgba(170, 220, 195, 0.86);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            display: block;
            margin-bottom: 0.25rem;
            font-size: 0.50rem;
          }
          
          .hotspot-popup-meta-value {
            color: rgba(220, 255, 240, 0.98);
            font-size: 0.66rem;
            font-weight: 800;
          }
          
          /* =========================================================
             Description/subtext – make it read like a brief
             ========================================================= */
          
          .hotspot-popup-desc,
          .hotspot-popup-subtext {
            padding: 0.8rem 0.85rem;
            font-size: 0.70rem;
            line-height: 1.6;
          }
          
          .hotspot-popup-desc {
            color: rgba(220, 255, 240, 0.92);
            border-top: 1px solid rgba(70,255,160,0.08);
          }
          
          .hotspot-popup-subtext {
            color: rgba(170, 220, 195, 0.92);
            border-top: 1px solid rgba(70,255,160,0.06);
          }
          
          /* =========================================================
             Agencies chips – more "pill" + depth
             ========================================================= */
          
          .hotspot-popup-agencies {
            padding: 0.75rem 0.85rem 0.85rem;
          }
          
          .hotspot-popup-agency {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
          
            font-size: 0.56rem;
            padding: 0.26rem 0.55rem;
            margin: 0.20rem 0.30rem 0.20rem 0;
          
            border-radius: 999px;
            background: rgba(70, 255, 160, 0.10);
            border: 1px solid rgba(70, 255, 160, 0.20);
            color: rgba(220, 255, 240, 0.95);
          
            box-shadow:
              0 10px 18px rgba(0,0,0,0.28),
              0 0 0 1px rgba(0,0,0,0.16) inset;
          }
          
          /* =========================================================
             Headlines – rows feel like distinct items
             ========================================================= */
          
          .hotspot-popup-headlines {
            max-height: 240px; /* give this section more room */
            overflow-y: auto;
          }
          
          .hotspot-popup-headline {
            padding: 0.70rem 0.85rem;
            border-bottom: 1px solid rgba(70, 255, 160, 0.08);
          
            font-size: 0.76rem;
            color: rgba(220, 255, 240, 0.92);
            cursor: pointer;
          
            background: rgba(0,0,0,0.00);
            transition: background 0.15s, transform 0.15s, border-color 0.15s;
          }
          
          .hotspot-popup-headline:hover {
            background: rgba(70, 255, 160, 0.06);
            transform: translateX(3px);
            border-bottom-color: rgba(70, 255, 160, 0.16);
          }
          
          .hotspot-popup-source {
            display: inline-flex;
            align-items: center;
          
            font-size: 0.46rem;
            color: rgba(185, 235, 210, 0.96);
            text-transform: uppercase;
            letter-spacing: 0.14em;
          
            padding: 0.16rem 0.38rem;
            border-radius: 999px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(70,255,160,0.10);
            margin-bottom: 0.30rem;
          }
          
          .hotspot-popup-headline a {
            color: inherit;
            text-decoration: none;
          }
          .hotspot-popup-headline a:hover {
            color: rgba(230, 255, 245, 1);
          }
          
         
          
    .chokepoint-popup-note{
        margin: 10px 0 6px 0;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 1.25;
        border: 1px solid rgba(255,255,255,0.08);
    }
    .chokepoint-popup-note .sub{ opacity: 0.85; margin-top: 4px; font-size: 10px; }
    .chokepoint-popup-note.ok   { background: rgba( 80, 255, 180, 0.08); }
    .chokepoint-popup-note.info { background: rgba( 90, 220, 255, 0.08); border-color: rgba(90, 220, 255, 0.18); }
    .chokepoint-popup-note.warn { background: rgba(255, 180,  60, 0.08); border-color: rgba(255, 180, 60, 0.18); }
          

/* =========================
   POPUP (shared for chokepoints + ports)
   ========================= */
   .chokepoint-popup {
    
    display: none;
    position: absolute;
    z-index: 100;
    top: 20px !important;
    right: 20px !important;
  
    background:
      radial-gradient(120% 140% at 0% 0%,
        rgba(0, 170, 255, 0.16) 0%,
        rgba(6, 16, 26, 0.92) 42%,
        rgba(0, 0, 0, 0.96) 100%);
  
    border: 1px solid var(--ship-blue-dk);
    border-radius: 14px;
  
    min-width: 260px;
    max-width: 320px;
  
    box-shadow:
      0 16px 36px rgba(0,0,0,0.65),
      0 0 0 1px rgba(0,170,255,0.08) inset,
      0 0 26px rgba(0,170,255,0.12);
  
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    overflow: hidden;
    pointer-events: auto;
  }
  
  .chokepoint-popup.visible { display: block; }
  
  .chokepoint-popup.alert {
    border-color: var(--ship-amber);
    box-shadow:
      0 16px 36px rgba(0,0,0,0.65),
      0 0 30px rgba(255,170,0,0.22);
  }
  .chokepoint-popup-header {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--ship-divider);
  
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    background:
      linear-gradient(180deg,
        rgba(0,170,255,0.14),
        rgba(0,0,0,0.55));
  }
  
  .chokepoint-popup-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ship-blue);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  
  .chokepoint-popup.is-port .chokepoint-popup-title::after {
    content: "  ⚓";
    opacity: 0.85;
  }
  
  .chokepoint-popup-status {
    font-size: 0.52rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
  }
  
  .chokepoint-popup-status.normal {
    background: rgba(0,170,255,0.20);
    border-color: rgba(0,170,255,0.35);
    color: #e6f7ff;
  }
  
  .chokepoint-popup-status.alert {
    background: rgba(255,170,0,0.22);
    border-color: rgba(255,170,0,0.40);
    color: #fff3d6;
  }
  .chokepoint-popup-body {
    padding: 0.75rem;
  }
  
  .chokepoint-popup-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,170,255,0.12);
    border-radius: 12px;
  
    box-shadow:
      0 12px 24px rgba(0,0,0,0.45),
      0 0 0 1px rgba(0,0,0,0.22) inset;
  
    margin-bottom: 0.65rem;
    overflow: hidden;
  }
  
  .chokepoint-popup-section-header {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--ship-divider);
    background: rgba(0,170,255,0.10);
  }
  
  .chokepoint-popup-section-title {
    font-size: 0.5rem;
    color: var(--ship-blue);
    text-transform: uppercase;
    letter-spacing: 0.16em;
  }
  .chokepoint-popup-info {
    padding: 0.65rem 0.75rem;
  }
  
  .chokepoint-popup-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    padding: 0.28rem 0;
  }
  
  .chokepoint-popup-stat + .chokepoint-popup-stat {
    border-top: 1px dashed rgba(0,170,255,0.18);
  }
  
  .chokepoint-popup-stat-label {
    color: var(--ship-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  
  .chokepoint-popup-stat-value {
    color: var(--ship-text);
    font-weight: 700;
  }
  .chokepoint-popup-desc {
    font-size: 0.65rem;
    color: var(--ship-subtext);
    padding: 0.65rem 0.75rem;
    line-height: 1.55;
  }
  .chokepoint-popup-headlines {
    max-height: 160px;
    overflow-y: auto;
  }
  
  .chokepoint-popup-headline {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--ship-divider);
    font-size: 0.72rem;
    color: var(--ship-text);
    transition: background 0.15s, transform 0.15s;
  }
  
  .chokepoint-popup-headline:hover {
    background: rgba(0,170,255,0.08);
    transform: translateX(3px);
  }
  
  .chokepoint-popup-headline a {
    color: inherit;
    text-decoration: none;
  }
            
  .chokepoint-popup-close {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(170, 220, 195, 0.92);
  
    width: 30px;
    height: 30px;
    border-radius: 10px;
  
    font-size: 1.05rem;
    cursor: pointer;
    line-height: 1;
  
    box-shadow:
      0 10px 18px rgba(0,0,0,0.35),
      0 0 0 1px rgba(0,0,0,0.22) inset;
  
    transition: transform 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
  }


/* =========================================================
   Oil Popup – upgraded panel (matches hotspot/port styling)
   ========================================================= */

   .oil-popup {
    position: absolute;
    width: 280px;
    max-height: 540px;
    overflow: hidden;
    display: none;
    z-index: 50;
  
    border-radius: 14px;
  
    background:
      radial-gradient(120% 140% at 0% 0%,
        rgba(255, 190, 70, 0.10) 0%,
        rgba(10, 16, 22, 0.92) 45%,
        rgba(0, 0, 0, 0.96) 100%);
  
    border: 1px solid rgba(255,255,255,0.10);
  
    box-shadow:
      0 16px 36px rgba(0,0,0,0.65),
      0 0 0 1px rgba(255,190,70,0.06) inset,
      0 0 26px rgba(255,190,70,0.08);
  
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    position: absolute;
  }
  
  .oil-popup.visible { display: block; }
  
  /* Subtle scan/noise overlay */
  .oil-popup::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.02) 0px,
        rgba(255,255,255,0.02) 1px,
        rgba(0,0,0,0.00) 3px,
        rgba(0,0,0,0.00) 6px
      );
    opacity: 0.22;
    mix-blend-mode: overlay;
  }
  
  /* =========================================================
     Header
     ========================================================= */
  
  .oil-popup-header {
    position: sticky;
    top: 0;
    z-index: 2;
  
    display: flex;
    align-items: center;
    gap: 10px;
  
    padding: 0.70rem 0.80rem 0.65rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  
    background:
      linear-gradient(180deg,
        rgba(255,190,70,0.10),
        rgba(0,0,0,0.55));
  }
  
  .oil-popup-title {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(245, 245, 245, 0.96);
    text-shadow: 0 0 10px rgba(255,190,70,0.10);
  }
  
  .oil-popup-status {
    font-size: 0.52rem;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
  
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  
    background: rgba(255,255,255,0.05);
    color: rgba(245,245,245,0.92);
  }
  
  .oil-popup-status.alert {
    background: rgba(200, 70, 55, 0.18);
    border-color: rgba(200, 70, 55, 0.38);
    color: rgba(255, 225, 220, 0.98);
  }
  
  .oil-popup-status.normal {
    background: rgba(80, 170, 120, 0.16);
    border-color: rgba(80, 170, 120, 0.30);
    color: rgba(220, 255, 235, 0.96);
  }
  
  .oil-popup-close {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.80);
  
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  
    box-shadow:
      0 10px 18px rgba(0,0,0,0.35),
      0 0 0 1px rgba(0,0,0,0.22) inset;
  
    transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  }
  
  .oil-popup-close:hover {
    transform: translateY(-1px);
    background: rgba(255,190,70,0.10);
    border-color: rgba(255,190,70,0.20);
    color: rgba(255,255,255,0.95);
  }
  
  /* =========================================================
     Body + scrollbars
     ========================================================= */
  
  .oil-popup-body {
    padding: 0.75rem;
    overflow: auto;
    max-height: 290px;
  }
  
  /* Thin themed scrollbar */
  .oil-popup-body::-webkit-scrollbar { width: 8px; }
  .oil-popup-body::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
    border-left: 1px solid rgba(255,190,70,0.08);
  }
  .oil-popup-body::-webkit-scrollbar-thumb {
    background: rgba(255,190,70,0.18);
    border: 1px solid rgba(255,190,70,0.22);
    border-radius: 999px;
  }
  .oil-popup-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,190,70,0.26);
  }
  
  /* =========================================================
     Section cards (same pattern as chokepoint/hotspot)
     ========================================================= */
  
  .oil-popup-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,190,70,0.10);
    border-radius: 12px;
  
    box-shadow:
      0 12px 22px rgba(0,0,0,0.45),
      0 0 0 1px rgba(0,0,0,0.22) inset;
  
    padding: 0.65rem 0.70rem;
    margin-bottom: 0.65rem;
  }
  
  .oil-popup-section-title {
    font-size: 0.50rem;
    font-weight: 900;
    opacity: 0.92;
    margin-bottom: 0.50rem;
  
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 225, 170, 0.92);
  }
  
  /* =========================================================
     Info grid + stat typography
     ========================================================= */
  
  .oil-popup-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.70rem;
  }
  
  .oil-popup-stat-label {
    display: block;
    font-size: 0.50rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(210, 215, 220, 0.68);
    margin-bottom: 0.20rem;
  }
  
  .oil-popup-stat-value {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(245, 245, 245, 0.95);
  }
  
  /* Description */
  .oil-popup-desc {
    font-size: 0.66rem;
    color: rgba(220, 225, 230, 0.78);
    line-height: 1.45;
  }
  

/* Earthquake Popup (panel style) */
.quake-popup {
    display: none;
    position: absolute;
    z-index: 100;
  
    background: linear-gradient(
      180deg,
      rgba(22, 10, 6, 0.98) 0%,
      rgba(12, 6, 4, 0.98) 65%,
      rgba(8, 4, 3, 0.98) 100%
    );
  
    border: 1px solid rgba(255, 120, 40, 0.45);
    border-radius: 10px;
    outline: 1px solid rgba(255, 160, 90, 0.10);
  
    min-width: 320px;
    max-width: 420px;
    max-height: min(60vh, 420px);
    top: 20px !important;
    right: 20px !important;
  
    box-shadow:
      0 18px 60px rgba(0,0,0,0.7),
      0 0 40px rgba(255, 120, 40, 0.12);
  
    backdrop-filter: blur(6px);
    overflow: hidden;
    pointer-events: auto;
  }
  
  .quake-popup.visible { display: block; }
  
  /* severity border accents */
  .quake-popup.minor { border-color: rgba(255, 150, 60, 0.45); }
  .quake-popup.moderate { border-color: rgba(255, 90, 40, 0.55); }
  .quake-popup.major {
    border-color: rgba(255, 30, 30, 0.70);
    box-shadow: 0 18px 60px rgba(0,0,0,0.7), 0 0 50px rgba(255, 30, 30, 0.18);
  }
  
  /* Sticky header */
  .quake-popup-header {
    position: sticky;
    top: 0;
    z-index: 3;
  
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 120, 40, 0.18);
  
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  
    background:
      radial-gradient(120% 120% at 0% 0%,
        rgba(255, 120, 40, 0.18) 0%,
        rgba(255, 120, 40, 0.06) 45%,
        rgba(0,0,0,0) 100%);
  }
  
  .quake-popup-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(255, 190, 140, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.1;
  }
  
  .quake-popup-subtitle {
    margin-top: 0.35rem;
    font-size: 0.60rem;
    color: rgba(230, 200, 180, 0.85);
    letter-spacing: 0.06em;
  }
  
  .quake-popup-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* Badge */
  .quake-popup-severity {
    font-size: 0.56rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(255,255,255,0.08);
  }
  
  .quake-popup-severity.minor {
    background: rgba(255, 150, 60, 0.24);
    color: rgba(255, 220, 200, 0.95);
  }
  .quake-popup-severity.moderate {
    background: rgba(255, 90, 40, 0.70);
    color: #fff;
  }
  .quake-popup-severity.major {
    background: rgba(255, 30, 30, 0.92);
    color: #fff;
    animation: pulse-level 1.2s infinite;
  }
  
  /* Close */
  .quake-popup-close {
    position: static;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(230, 200, 180, 0.9);
  
    width: 28px;
    height: 28px;
    border-radius: 8px;
  
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .quake-popup-close:hover {
    color: rgba(255, 220, 200, 1);
    background: rgba(255, 120, 40, 0.10);
    border-color: rgba(255, 120, 40, 0.20);
  }
  
  /* Body scroll */
  .quake-popup-body {
    overflow-y: auto;
    max-height: calc(min(60vh, 420px) - 62px);
  }
  
  /* Hero row */
  .quake-popup-hero {
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid rgba(255, 120, 40, 0.12);
  }
  
  .quake-popup-mag {
    display: inline-block;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(255, 170, 110, 0.95);
  }
  .quake-popup-mag.moderate { color: rgba(255, 120, 70, 0.98); }
  .quake-popup-mag.major { color: rgba(255, 80, 80, 0.98); }
  
  .quake-popup-time {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.58rem;
    color: rgba(230, 200, 180, 0.75);
    letter-spacing: 0.06em;
  }
  
  /* Meta cards */
  .quake-popup-meta {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 120, 40, 0.12);
  
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.9rem;
  }
  
  .quake-popup-meta-item {
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 120, 40, 0.06);
    border: 1px solid rgba(255, 120, 40, 0.10);
  }
  
  .quake-popup-meta-label {
    color: rgba(230, 180, 150, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.22rem;
    font-size: 0.48rem;
  }
  
  .quake-popup-meta-value {
    color: rgba(255, 235, 220, 0.95);
    font-size: 0.62rem;
    font-weight: 700;
  }
  
  /* Link */
  .quake-popup-link {
    display: block;
    padding: 0.65rem 1rem;
    font-size: 0.62rem;
    color: rgba(255, 190, 140, 0.95);
    text-decoration: none;
    text-align: center;
    border-top: 1px solid rgba(255, 120, 40, 0.12);
  }
  .quake-popup-link:hover {
    background: rgba(255, 120, 40, 0.08);
    color: rgba(255, 220, 200, 1);
  }
  
        /* Cyber Popup */
        .cyber-popup {
            display: none;
            position: absolute;
            z-index: 100;
            background: rgba(10, 5, 15, 0.95);
            border: 1px solid #ff00ff;
            min-width: 260px;
            max-width: 320px;
            top: 20px !important;
            right: 20px !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 0, 255, 0.2);
            pointer-events: auto;
        }

        .cyber-popup.visible {
            display: block;
        }

        .cyber-popup.active {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 0, 255, 0.4);
        }

        .cyber-popup-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #301030;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cyber-popup-title {
            font-size: 0.8rem;
            font-weight: bold;
            color: #ff00ff;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .cyber-popup-status {
            font-size: 0.5rem;
            padding: 0.2rem 0.5rem;
            border-radius: 2px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .cyber-popup-status.dormant { background: #404; color: #a0a; }
        .cyber-popup-status.active { background: #ff00ff; color: #000; animation: pulse-level 1s infinite; }

        .cyber-popup-apt {
            padding: 0.5rem 1rem;
            font-size: 0.65rem;
            color: #ff80ff;
            border-bottom: 1px solid #301030;
            font-family: 'SF Mono', monospace;
        }

        .cyber-popup-desc {
            padding: 0.6rem 1rem;
            font-size: 0.6rem;
            color: #a080a0;
            line-height: 1.5;
            border-bottom: 1px solid #301030;
        }

        .cyber-popup-info {
            padding: 0.6rem 1rem;
        }

        .cyber-popup-stat {
            display: flex;
            justify-content: space-between;
            font-size: 0.55rem;
            padding: 0.2rem 0;
        }

        .cyber-popup-stat-label {
            color: #604060;
        }

        .cyber-popup-stat-value {
            color: #e8e8e8;
        }

        .cyber-popup-targets {
            padding: 0.5rem 1rem;
            border-top: 1px solid #301030;
        }

        .cyber-popup-targets-label {
            font-size: 0.5rem;
            color: #604060;
            text-transform: uppercase;
            margin-bottom: 0.3rem;
        }

        .cyber-popup-target-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.3rem;
        }

        .cyber-popup-target-tag {
            font-size: 0.5rem;
            padding: 0.15rem 0.4rem;
            background: #301030;
            color: #ff80ff;
            border-radius: 2px;
        }

        .cyber-popup-close {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: none;
            border: none;
            color: #604060;
            font-size: 1rem;
            cursor: pointer;
            padding: 0.25rem;
            line-height: 1;
        }

        .cyber-popup-close:hover {
            color: #ff00ff;
        }
  /* Intensity chip feels more “badge-like” */
  .conflict-popup-intensity {
    font-size: 0.56rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(255,255,255,0.08);
  }
  
  .conflict-popup-intensity.high {
    background: rgba(255, 20, 20, 0.92);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 20, 20, 0.25), 0 0 18px rgba(255, 20, 20, 0.22);
    animation: pulse-level 1.2s infinite;
  }
  .conflict-popup-intensity.medium {
    background: rgba(255, 120, 0, 0.85);
    color: #fff;
  }
  .conflict-popup-intensity.watch {
    background: rgba(255, 210, 0, 0.9);
    color: rgba(0,0,0,0.9);
  }
  
  /* Body scroll */
  .conflict-popup-body {
    overflow-y: auto;
    max-height: calc(min(72vh, 560px) - 62px);
  }
  
  /* Meta: looks like real stats */
  .conflict-popup-meta {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 70, 70, 0.18);
  
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.9rem;
  }
  
  .conflict-popup-meta-item {
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 60, 60, 0.06);
    border: 1px solid rgba(255, 80, 80, 0.10);
  }
  
  .conflict-popup-meta-label {
    color: rgba(180, 120, 120, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.22rem;
    font-size: 0.48rem;
  }
  
  .conflict-popup-meta-value {
    color: rgba(255, 205, 205, 0.95);
    font-size: 0.62rem;
    font-weight: 700;
  }
  
  /* Description: readable, not washed out */
  .conflict-popup-desc {
    padding: 0.85rem 1rem;
    font-size: 0.68rem;
    color: var(--text);
    line-height: 1.55;
    border-bottom: 1px solid rgba(255, 70, 70, 0.16);
  }
  
  /* Parties -> chips look intentional */
  .conflict-popup-parties,
  .conflict-popup-events {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 70, 70, 0.14);
  }
  
  .conflict-popup-parties-title,
  .conflict-popup-events-title,
  .conflict-popup-headlines-title {
    font-size: 0.5rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
  }
  
  .conflict-popup-party {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  
    font-size: 0.56rem;
    padding: 0.22rem 0.5rem;
    margin: 0.18rem 0.25rem 0.18rem 0;
  
    border-radius: 999px;
    background: rgba(255, 60, 60, 0.10);
    border: 1px solid rgba(255, 90, 90, 0.18);
    color: rgba(255, 210, 210, 0.92);
  }
  
  /* Events list: better bullet, better spacing */
  .conflict-popup-event {
    font-size: 0.58rem;
    color: rgba(255, 205, 205, 0.92);
    padding: 0.28rem 0;
    padding-left: 0.85rem;
    position: relative;
  }
  .conflict-popup-event::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0.55rem;
    background: rgba(255, 70, 70, 0.9);
    box-shadow: 0 0 10px rgba(255, 70, 70, 0.25);
  }
  
  /* Headlines: keep scroll, but make items feel clickable */
  .conflict-popup-headlines {
    max-height: 180px;
    overflow-y: auto;
  }
  
  .conflict-popup-headline {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(255, 70, 70, 0.12);
    font-size: 0.75rem;
    color: rgba(230, 200, 200, 0.9);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
  }
  
  .conflict-popup-headline:hover {
    background: rgba(255, 70, 70, 0.10);
    transform: translateX(2px);
  }
  
  .conflict-popup-headline-source {
    font-size: 0.46rem;
    color: rgba(180, 120, 120, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.2rem;
  }
  
  
  
  /* Optional: nicer scrollbars (webkit) */
  .conflict-popup-body::-webkit-scrollbar,
  .conflict-popup-headlines::-webkit-scrollbar {
    width: 8px;
  }
  .conflict-popup-body::-webkit-scrollbar-thumb,
  .conflict-popup-headlines::-webkit-scrollbar-thumb {
    background: rgba(255, 70, 70, 0.18);
    border-radius: 999px;
  }
  .conflict-popup-body::-webkit-scrollbar-track,
  .conflict-popup-headlines::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
  }
  
        /* Military Base Markers */
        .military-base {
            position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: auto;
            z-index: 19;
            cursor: pointer;
        }

        .military-base::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid transparent;
            transition: all 0.3s ease;
        }

        .military-base:hover::before {
            border-color: currentColor;
            animation: base-ping 1s ease-out infinite;
        }

        .military-base:hover .base-icon {
            transform: translateY(-2px) scale(1.1);
        }

        .military-base.us-nato:hover::before { border-color: #4488ff; }
        .military-base.china:hover::before { border-color: #ff4444; }
        .military-base.russia:hover::before { border-color: #ff8800; }

        @keyframes base-ping {
            0% { width: 20px; height: 20px; opacity: 1; }
            100% { width: 35px; height: 35px; opacity: 0; }
        }

        .base-icon {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 10px solid currentColor; /* triangle color */
            transition: transform 0.2s, filter 0.2s;
            transform: translateY(-1px);

        }

        .base-icon.us-nato {
            color: #4488ff;
            filter: drop-shadow(0 0 6px rgba(68,136,255,0.6));
        }
        
        .base-icon.china {
            color: #ff4444;
            filter: drop-shadow(0 0 6px rgba(255,68,68,0.6));
        }
        
        .base-icon.russia {
            color: #ff8800;
            filter: drop-shadow(0 0 6px rgba(255,136,0,0.6));
        }

        

        .military-base:hover .base-icon.us-nato {
            filter: drop-shadow(0 0 14px rgba(68,136,255,0.9));
        }
        
        .military-base:hover .base-icon.china {
            filter: drop-shadow(0 0 14px rgba(255,68,68,0.9));
        }
        
        .military-base:hover .base-icon.russia {
            filter: drop-shadow(0 0 14px rgba(255,136,0,0.9));
        }

        .base-label {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%) translateY(5px);
            font-size: 0.45rem;
            white-space: nowrap;
            opacity: 0;
            transition: all 0.2s ease;
            background: rgba(0, 0, 0, 0.8);
            padding: 0.15rem 0.4rem;
            border-radius: 2px;
        }

        .military-base:hover .base-label {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            font-size: 0.8rem;
            text-shadow: 0 0 8px rgba(0,255,255,0.6);
        }
        

        .base-label.us-nato { color: #4488ff; border: 1px solid #4488ff; }
        .base-label.china { color: #ff4444; border: 1px solid #ff4444; }
        .base-label.russia { color: #ff8800; border: 1px solid #ff8800; }

        /* Nuclear Facility Markers */
        .nuclear-facility {
            position: relative;
            width: 16px;
            height: 16px;
            border-radius: 4px; /* square-ish like ports */
            border: 1px solid rgba(0,0,0,0.35);
            background: rgba(160, 160, 160, 0.85); /* neutral default */
            box-shadow: 0 1px 6px rgba(0,0,0,0.25);position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: auto;
            z-index: 18;
            cursor: pointer;
        }

        .nuclear-facility::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px dashed transparent;
            transition: all 0.3s ease;
        }

        .nuclear-facility:hover::before {
            border-color: var(--nuclear);
            animation: nuclear-rotate 3s linear infinite;
        }

        .nuclear-facility:hover .nuclear-icon {
            transform: scale(1.4);
            box-shadow: 0 0 20px rgba(255, 255, 0, 1);
        }

        .nuclear-facility:hover .nuclear-icon.weapons {
            box-shadow: 0 0 25px rgba(255, 0, 0, 1);
        }

        .nuclear-facility.tier-background {
            opacity: 0.45;
            filter: saturate(0.7);
          }
          
          .nuclear-facility.tier-critical .nuclear-icon {
            box-shadow: 0 0 18px rgba(255,80,80,0.45);
          }

        @keyframes nuclear-rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .nuclear-icon {
            width: 16px;
            height: 16px;
            background: var(--nuclear);
            border: 2px solid var(--nuclear);
            border-radius: 50%;
            position: relative;
            box-shadow: 0 0 8px rgb(212, 72, 225);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .nuclear-icon::before {
            content: "\f7b9"; 
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 6px;
            color: #000;
        }

        .nuclear-icon.weapons {
            background: var(--nuclear);
            border-color: var(--nuclear);
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
            animation: nuclear-pulse 1.5s ease-in-out infinite;
        }

        @keyframes nuclear-pulse {
            0%, 100% { box-shadow: 0 0 8px rgba(255, 0, 0, 0.5); }
            50% { box-shadow: 0 0 15px rgba(255, 0, 0, 0.9); }
        }

        .nuclear-label {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%) translateY(5px);
            font-size: 0.65rem;
            color: var(--nuclear);
            white-space: nowrap;
            opacity: 0;
            transition: all 0.2s ease;
            background: rgba(0, 0, 0, 0.85);
            padding: 0.15rem 0.4rem;
            border: 1px solid var(--nuclear);
            border-radius: 2px;
        }

        .nuclear-facility:hover .nuclear-label {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }


          
  /* Immigration markers */
 /* =========================
   MIGRATION (cooler style)
   ========================= */

/* Base marker: shared positioning + ring */
.migration {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 18; /* align with shipping markers */
}

.migration .migration-icon{
  width: var(--migSize, 6px);
  height: var(--migSize, 6px);
  border-radius: 999px; /* if it’s a dot */
}


/* Outer scan ring */
.migration::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 18px;
  height: 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  opacity: 0.95;

  transition: border-color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

@keyframes mig-scan {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.migration:hover::before {
  border-color: rgba(255, 179, 71, 0.85);
  box-shadow: 0 0 18px rgba(255, 179, 71, 0.25);
  animation: mig-scan 1.5s ease-in-out infinite;
}

/* Icon sizing */
.migration-icon {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;

  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: rgba(255, 179, 71, 0.95);
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

/* Make it feel “active” on hover like ports */
.migration:hover .migration-icon {
  transform: scale(1.25);
  box-shadow:
    0 0 16px rgba(255, 179, 71, 0.75),
    0 1px 10px rgba(0,0,0,0.35);
  filter: saturate(1.15);
}

/* Add an icon glyph inside (Font Awesome required like your port icon) */
.migration-icon::after {
  font-family: "Font Awesome 6 Free";
  
}



/* =========================
   Hover label (cool card)
   ========================= */

/* Use your existing data-migration-label attr */
.migration::after {
  content: attr(data-migration-label);
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);

  display: block;
  padding: 7px 10px;

  font-size: 0.78rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: nowrap;

  color: rgba(255, 235, 210, 0.95);

  background: linear-gradient(
    180deg,
    rgba(18, 10, 6, 0.92),
    rgba(10, 6, 4, 0.92)
  );

  border: 1px solid rgba(255, 179, 71, 0.25);
  border-radius: 10px;

  box-shadow:
    0 14px 40px rgba(0,0,0,0.55),
    0 0 20px rgba(255, 179, 71, 0.15);

  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 30;
}

.migration:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* =========================
   Tier styling (optional)
   ========================= */

/* High (big metros: NYC/LA/HOU/DFW/DC/CHI) */
.migration.tier-high:hover::before {
  border-color: rgba(255, 120, 60, 0.9);
  box-shadow: 0 0 22px rgba(255, 120, 60, 0.25);
}
.migration.tier-high .migration-icon {
  background: rgba(255, 120, 60, 0.95);
}

/* Mid (200k–399k) */
.migration.tier-mid .migration-icon {
  background: rgba(255, 179, 71, 0.95);
  z-index: 15;
}

/* Low (<200k) */
.migration.tier-low .migration-icon {
  background: rgb(159 142 117 / 90%);
  z-index: 14;
}

/* Optional: subtle “alert” shimmer on top tier */
@keyframes mig-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,120,60,0.55), 0 1px 10px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 0 48px rgba(255,120,60,0.85), 0 1px 10px rgba(0,0,0,0.35); }
}
.migration.tier-high:hover .migration-icon {
  animation: mig-glow 1.8s ease-in-out infinite;
}


        
    /* internet */
    /* ISP dots */
.isp-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 23;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
  }


.isp-dot::after {
    content: attr(data-headline);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
  
    background: rgba(12, 12, 14, 0.95);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
  
    padding: 6px 6px;
    border-radius: 6px;
    white-space: nowrap;
  
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 4;
  }
  
  .isp-dot:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }
  .isp-dot.isp-issue::after {
    background: rgba(230, 33, 33, 0.95);
  }
  
  .isp-dot.isp-up::after {
    background: rgba(51, 161, 88, 0.65);
  }
  
  .isp-dot-core {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(7, 179, 214, 0.30);
  }
  
  .isp-dot-label {
    margin-top: 4px;
    font-size: 8px;
    opacity: 0.85;
    text-align: center;
    white-space: nowrap;
  }
  
  /* Status colors rely on existing theme vars if you have them */
  .isp-up .isp-dot-core { background: rgb(45, 187, 131 / 90%); }
  .isp-issue .isp-dot-core { 
    background: rgba(235, 33, 33, 0.95); 
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2px rgba(235, 33, 33, 0.75);

  }
  .isp-unknown .isp-dot-core { background: rgba(205, 135, 56, 0.9); }
  
  /* Cloud markers stand out from country markers */
.isp-dot.isp-origin .isp-dot-label {
  font-size: 9px;
  letter-spacing: 0.5px;
}

/* Optional: ASN markers */
.isp-dot.isp-asn .isp-dot-label {
  font-size: 9px;
}

  /* Optional region badges */
  .isp-region {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 20;
    font-size: 11px;
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(10,16,22,0.75);
    border: 1px solid rgba(255,255,255,0.10);
    pointer-events: none; /* labels shouldn't block clicks */
  }
  
  .isp-region-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    opacity: 0.9;
  }
  
  .isp-region.isp-up .isp-region-badge { background: rgba(80, 220, 140, 0.18); }
  .isp-region.isp-issue .isp-region-badge { background: rgba(255, 90, 90, 0.18); }
  .isp-region.isp-unknown .isp-region-badge { background: rgba(170,170,170, 0.14); }
  
        /* Undersea Cables */
        .cable-path {
            fill: none;
            stroke: #4eb9b9;
            stroke-width: 1.5;
            stroke-opacity: 0.4;
            stroke-linecap: round;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .cable-path:hover {
            stroke-opacity: 1;
            stroke-width: 3;
            stroke: #4eb9b9;
            filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8));
            stroke-dasharray: 8, 4;
            animation: cable-flow 0.5s linear infinite;
        }

        @keyframes cable-flow {
            to { stroke-dashoffset: -12; }
        }

        .cable-path.major {
            stroke-width: 2;
            stroke-opacity: 0.6;
        }

        .cable-path.major:hover {
            stroke-width: 4;
        }

        .cable-path.alert-high { 
          stroke-width: 2.5px;
          animation: cable-pulse 2.2s ease-in-out infinite;
        }
        .cable-path.alert-critical { 
          stroke-width: 3px;
          animation: cable-pulse 2.2s ease-in-out infinite;
         }
        .cable-path.tier-1 { opacity: 0.9; }
        .cable-path.tier-3 { opacity: 0.5; }

        @keyframes cable-pulse {
          0%   { stroke-width: 1.6; opacity: 0.7; }
          50%  { stroke-width: 3.0; opacity: 1; }
          100% { stroke-width: 1.6; opacity: 0.7; }
        }
        .cable-endpoint {
            fill: #4eb9b9;
            stroke: #00aaaa;
            stroke-width: 1;
        }

        /* Sanctions Heat Map - Country fills */
        .country-sanctioned-severe {
            fill: #660000 !important;
        }

        .country-sanctioned-high {
            fill: #442200 !important;
        }

        .country-sanctioned-moderate {
            fill: #333300 !important;
        }

        .country-sanctioned-low {
            fill: #223322 !important;
        }

        /* Breaking News Pulse */
        .news-pulse {
            position: absolute;
            /* transform: translate(-50%, -50%); */
            pointer-events: none;
            z-index: 25;
            
        }

        .news-pulse-ring {
            position: absolute;
            width: 15px;
            height: 15px;
            border: 2px solid #ff0000;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: news-pulse-expand 2s ease-out infinite;
        }
        .news-pulse-ring-el {
            position: absolute;
            width: 10px;
            height: 10px;
            border: 2px solid #ffae00;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: news-pulse-expand 2s ease-out infinite;
        }

        .news-pulse-ring:nth-child(2) {
            animation-delay: 0.5s;
        }

        .news-pulse-ring:nth-child(3) {
            animation-delay: 1s;
        }

        @keyframes news-pulse-expand {
            0% {
                width: 10px;
                height: 10px;
                opacity: 1;
                border-width: 3px;
            }
            100% {
                width: 40px;
                height: 40px;
                opacity: 0;
                border-width: 1px;
            }
        }

        .news-pulse-label {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6rem;
            color: #ff0000;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            animation: blink 1s ease-in-out infinite;
            background: rgba(0, 0, 0, 0.8);
            padding: 0.2rem 0.5rem;
            border: 1px solid #ff0000;
        }

        /* 24-Hour Flashback Slider */
        .flashback-control {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 1rem;
            background: rgba(0, 0, 0, 0.85);
            padding: 0.5rem 1rem;
            border: 1px solid #0f5040;
            z-index: 50;
        }

        .flashback-label {
            font-size: 0.55rem;
            color: #0a8060;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            transition: color 0.2s;
        }

        .flashback-control:hover .flashback-label {
            color: #00ff88;
        }

        .flashback-slider {
            width: 200px;
            height: 4px;
            -webkit-appearance: none;
            appearance: none;
            background: #1b2430;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .flashback-slider:hover {
            background: #0f5040;
            height: 6px;
        }

        .flashback-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            background: #00ff88;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
            transition: all 0.2s;
        }

        .flashback-slider:hover::-webkit-slider-thumb {
            width: 18px;
            height: 18px;
            box-shadow: 0 0 15px rgba(0, 255, 136, 0.9);
        }

        .flashback-slider::-moz-range-thumb {
            width: 14px;
            height: 14px;
            background: #00ff88;
            border-radius: 50%;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .flashback-slider:hover::-moz-range-thumb {
            width: 18px;
            height: 18px;
            box-shadow: 0 0 15px rgba(0, 255, 136, 0.9);
        }

        .flashback-time {
            font-size: 0.65rem;
            color: #00ff88;
            font-family: 'SF Mono', monospace;
            min-width: 60px;
            transition: all 0.2s;
        }

        .flashback-control:hover .flashback-time {
            text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
        }

        .flashback-mode-indicator {
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 170, 0, 0.9);
            color: #000;
            padding: 0.3rem 1rem;
            font-size: 0.6rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            z-index: 50;
            display: none;
        }

        .flashback-mode-indicator.active {
            display: block;
            animation: blink 1s ease-in-out infinite;
        }

        /* News Density Heatmap */
        .density-blob {
            position: absolute;
            border-radius: 50%;
            pointer-events: auto;
            z-index: 12;
            mix-blend-mode: screen;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .density-blob.low {
            background: radial-gradient(circle, rgba(0, 255, 136, 0.3) 0%, transparent 70%);
        }

        .density-blob.medium {
            background: radial-gradient(circle, rgba(255, 204, 0, 0.35) 0%, transparent 70%);
        }

        .density-blob.high {
            background: radial-gradient(circle, rgba(255, 68, 68, 0.4) 0%, transparent 70%);
            animation: density-glow 2s ease-in-out infinite;
        }

        .density-blob:hover {
            transform: translate(-50%, -50%) scale(1.3) !important;
            filter: brightness(1.5);
        }

        .density-blob.low:hover {
            background: radial-gradient(circle, rgba(0, 255, 136, 0.5) 0%, transparent 70%);
        }

        .density-blob.medium:hover {
            background: radial-gradient(circle, rgba(255, 204, 0, 0.55) 0%, transparent 70%);
        }

        .density-blob.high:hover {
            background: radial-gradient(circle, rgba(255, 68, 68, 0.6) 0%, transparent 70%);
        }

        @keyframes density-glow {
            0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
        }

        /* Map Layer Toggle */
        .map-layer-toggle {
            position: absolute;
            top: 8px;
            left: 55%;
            transform: translateX(-50%);
            display: flex;
            gap: 2px;
            background: rgba(0, 0, 0, 0.85);
            padding: 4px;
            /* border: 1px solid #0f5040; */
            z-index: 50;
            backdrop-filter: blur(4px);
        }

        .layer-btn {
            background: transparent;
            border: 1px solid #1b2430;
            color: #0a8060;
            font-size: 0.5rem;
            padding: 0.3rem 0.3rem;
            cursor: pointer;
            font-family: 'SF Mono', monospace;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .layer-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
            transition: left 0.4s ease;
        }

        .layer-btn:hover::before {
            left: 100%;
        }

        .layer-btn:hover {
            border-color: #00ff88;
            color: #00ff88;
            text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
            transform: translateY(-1px);
        }

        .layer-btn.active {
            background: #0f5040;
            color: #00ff88;
            border-color: #00ff88;
            box-shadow: 0 0 10px rgba(0, 255, 136, 0.3), inset 0 0 10px rgba(0, 255, 136, 0.1);
        }

        .layer-btn.active:hover {
            background: #1b2430;
            box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
        }

        /* Custom Monitors */
        .monitors-section {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .monitors-list {
            max-height: 200px;
            overflow-y: auto;
            margin-bottom: 0.75rem;
        }

        .monitor-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem;
            background: var(--surface);
            border: 1px solid var(--border);
            margin-bottom: 0.5rem;
            border-radius: 2px;
        }

        .monitor-item-info {
            flex: 1;
            min-width: 0;
        }

        .monitor-item-name {
            font-size: 0.9rem;
            font-weight: bold;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .monitor-item-color {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .monitor-item-keywords {
            font-size: 0.55rem;
            color: var(--text-dim);
            margin-top: 0.2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .monitor-item-location {
            font-size: 0.5rem;
            color: var(--green);
            margin-top: 0.15rem;
        }

        .monitor-item-actions {
            display: flex;
            gap: 0.25rem;
        }

        .monitor-item-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-dim);
            width: 22px;
            height: 22px;
            font-size: 0.6rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .monitor-item-btn:hover {
            border-color: var(--text);
            color: var(--text);
        }

        .monitor-item-btn.delete:hover {
            border-color: var(--red);
            color: var(--red);
        }

        .add-monitor-btn {
            width: 100%;
            padding: 0.5rem;
            background: transparent;
            border: 1px dashed var(--border);
            color: var(--text-dim);
            font-family: inherit;
            font-size: 0.65rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .add-monitor-btn:hover {
            border-color: var(--green);
            color: var(--green);
        }

        /* Monitor Form Modal */
        .monitor-form-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            z-index: 1100;
            justify-content: center;
            align-items: center;
        }

        .monitor-form-overlay.open {
            display: flex;
        }

        .monitor-form {
            background: var(--bg);
            border: 1px solid var(--border);
            padding: 1.5rem;
            width: 90%;
            max-width: 400px;
        }
        .monitor-form-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          }
          
          .monitor-save-inline {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 6px;
            white-space: nowrap;
          }

        .monitor-form-title {
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }

        .monitor-form-field {
            margin-bottom: 0.5rem;
        }

        .monitor-form-label {
            font-size: 0.65rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.4rem;
            display: block;
        }

        .monitor-form-input {
            width: 100%;
            padding: 0.5rem;
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--text);
            font-family: inherit;
            font-size: 0.75rem;
        }

        .monitor-form-input:focus {
            outline: none;
            border-color: var(--green);
        }

        .monitor-form-hint {
            font-size: 0.55rem;
            color: var(--text-dim);
            margin-top: 0.3rem;
        }

        .monitor-form-colors {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .monitor-color-option {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
        }

        .monitor-color-option:hover {
            transform: scale(1.2);
        }

        .monitor-color-option.selected {
            border-color: var(--text);
            box-shadow: 0 0 10px currentColor;
        }

        .monitor-form-location {
            display: flex;
            gap: 0.5rem;
        }

        .monitor-form-location input {
            flex: 1;
        }

        .monitor-form-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

        .monitor-form-actions button {
            flex: 1;
            padding: 0.6rem;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: bold;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
        }

        .monitor-save-btn {
            background: var(--green);
            color: var(--bg);
            border: none;
        }

        .monitor-save-btn:hover {
            opacity: 0.8;
        }

        .monitor-cancel-btn {
            background: transparent;
            color: var(--text-dim);
            border: 1px solid var(--border);
        }

        .monitor-cancel-btn:hover {
            border-color: var(--text);
            color: var(--text);
        }

        /* Custom Hotspot (user-created) */
        .custom-hotspot {
            position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: auto;
            z-index: 21;
            cursor: pointer;
        }

        .custom-hotspot-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            position: relative;
            border: 2px solid;
            box-shadow: 0 0 10px currentColor;
            transition: all 0.2s;
        }

        .custom-hotspot-dot::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: custom-pulse 2s ease-out infinite;
            background: currentColor;
        }

        @keyframes custom-pulse {
            0% { width: 100%; height: 100%; opacity: 0.6; }
            100% { width: 250%; height: 250%; opacity: 0; }
        }

        .custom-hotspot:hover .custom-hotspot-dot {
            transform: scale(1.4);
            box-shadow: 0 0 20px currentColor;
        }

        .custom-hotspot:hover .custom-hotspot-label {
            transform: translateX(-50%) scale(1.1);
            text-shadow: 0 0 10px currentColor;
            display: block;
        }

        .custom-hotspot-label {
            position: absolute;
            top: 18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.5rem;
            font-family: 'SF Mono', monospace;
            white-space: nowrap;
            text-shadow: 0 0 5px currentColor;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.2s;
        }

        .custom-hotspot:hover .custom-hotspot-label {
            transform: translateX(-50%) scale(1.1);
        }

        .custom-hotspot-count {
            font-size: 0.4rem;
            opacity: 0.7;
        }

        /* My Monitors Panel */
        .monitor-match {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.2s;
        }

        .monitor-match:hover {
            background: var(--surface);
        }

        .monitor-match-header {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.3rem;
        }

        .monitor-match-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .monitor-match-name {
            font-size: 0.6rem;
            font-weight: bold;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .monitor-match-title {
            font-size: 0.75rem;
            color: var(--text);
            text-decoration: none;
            display: block;
        }

        .monitor-match-title:hover {
            color: var(--accent);
        }

        .monitor-match-source {
            font-size: 0.5rem;
            color: var(--text-dim);
            margin-top: 0.2rem;
        }

        .monitors-empty {
            padding: 1.5rem 1rem;
            text-align: center;
            color: var(--text-dim);
            font-size: 0.9rem;
        }

        .monitors-empty-hint {
            font-size: 0.6rem;
            margin-top: 0.5rem;
            opacity: 0.7;
        }

        /* cable popups */
        /* cable-popup.css */

      .cable-popup {
        position: fixed;
        z-index: 9999;
        max-width: 420px;
        max-height: 70vh;
        overflow: auto;
        padding: 12px;
        background: rgba(10, 14, 18, 0.97);
        color: #e8f6f6;
        border-radius: 14px;
        border: 1px solid rgba(78, 185, 185, 0.35);
        box-shadow: 0 12px 30px rgba(0,0,0,0.45);
        backdrop-filter: blur(6px);
        font-size: 13px;
        line-height: 1.35;
      }

      .popup-header {
        display: flex;
        justify-content: space-between;
        gap: 10px;
      }

      .popup-title {
        font-weight: 800;
        font-size: 14px;
      }

      .popup-badges {
        margin-top: 4px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }

      .popup-reason {
        margin-top: 6px;
        font-size: 12px;
        opacity: 0.8;
      }

      .popup-close {
        background: none;
        border: none;
        color: #e8f6f6;
        font-size: 20px;
        cursor: pointer;
      }

      .popup-section {
        margin-top: 12px;
      }

      .popup-section-title {
        font-weight: 700;
        margin-bottom: 6px;
      }

      .popup-muted {
        margin-top: 10px;
        opacity: 0.7;
      }

      /* Pills */

      .pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .pill {
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.22);
      }

      .pill.danger {
        background: rgba(255,100,100,0.12);
        border-color: rgba(255,100,100,0.45);
      }

      /* Badges */

      .badge {
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.22);
      }

      .badge.alert-high {
        background: rgba(255,160,70,0.18);
        border-color: rgba(255,160,70,0.45);
      }

      .badge.alert-critical {
        background: rgba(255,70,70,0.2);
        border-color: rgba(255,70,70,0.55);
      }

      /* Headlines */

      .headline-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .headline-card {
        padding: 8px 9px;
        border-radius: 10px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
      }

      .headline-title {
        font-weight: 700;
      }

      .headline-title a {
        color: #86f0f0;
        text-decoration: none;
      }

      .headline-title a:hover {
        text-decoration: underline;
      }

      .headline-meta {
        font-size: 12px;
        opacity: 0.75;
        margin-top: 2px;
      }

      .headline-snippet {
        margin-top: 6px;
        opacity: 0.85;
      }

        /* Custom Hotspot Popup */
        .custom-hotspot-popup {
            display: none;
            position: absolute;
            z-index: 100;
            background: rgba(5, 10, 8, 0.95);
            border: 1px solid var(--border);
            min-width: 280px;
            max-width: 350px;
            top: 20px !important;
            right: 20px !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        .custom-hotspot-popup.visible {
            display: block;
        }

        .custom-hotspot-popup-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .custom-hotspot-popup-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .custom-hotspot-popup-name {
            font-size: 0.85rem;
            font-weight: bold;
        }

        .custom-hotspot-popup-count {
            margin-left: auto;
            font-size: 0.65rem;
            padding: 0.2rem 0.7rem;
            border-radius: 3px;
            background: var(--surface);
        }

        .custom-hotspot-popup-keywords {
            padding: 0.5rem 1rem;
            font-size: 0.6rem;
            color: var(--text-dim);
            border-bottom: 1px solid var(--border);
        }

        .custom-hotspot-popup-coords {
            padding: 0.4rem 1rem;
            font-size: 0.55rem;
            color: var(--text-dim);
            font-family: 'SF Mono', monospace;
            border-bottom: 1px solid var(--border);
        }

        .custom-hotspot-popup-matches {
            max-height: 200px;
            overflow-y: auto;
        }

        .custom-hotspot-popup-match {
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .custom-hotspot-popup-match:last-child {
            border-bottom: none;
        }

        .custom-hotspot-popup-match a {
            font-size: 0.9rem;
            color: var(--text);
            text-decoration: none;
            display: block;
        }

        .custom-hotspot-popup-match a:hover {
            color: var(--accent);
        }

        .custom-hotspot-popup-match-source {
            font-size: 0.5rem;
            color: var(--text-dim);
            margin-top: 0.2rem;
        }

        .custom-hotspot-popup-empty {
            padding: 1rem;
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-dim);
        }

        .custom-hotspot-popup-close {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 1rem;
            cursor: pointer;
            padding: 0.25rem;
            line-height: 1;
        }

    
/* Popup styling (keep consistent with conflict popup vibe) */
/* .energy-popup {
  position: absolute;
  z-index: 50;
  width: 360px;
  max-width: calc(100vw - 20px);
  display: none;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(14, 18, 28, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
} */
.energy-popup.visible { display: block; }

.energy-popup-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(10, 12, 18, 0.7);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.energy-popup-title { font-weight: 700; font-size: 15px; }
.energy-popup-subtitle { font-size: 12px; opacity: 0.75; margin-top: 2px; }

.energy-popup-header-right { display: flex; align-items: center; gap: 10px; }
.energy-popup-intensity {
  font-size: 11px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}
.energy-popup-intensity.high { background: rgba(255,90,90,0.15); }
.energy-popup-intensity.med  { background: rgba(255,190,90,0.14); }
.energy-popup-intensity.low  { background: rgba(120,200,255,0.14); }

.energy-popup-close {
  background: transparent; border: 0; color: rgba(255,255,255,0.8);
  font-size: 20px; line-height: 1; cursor: pointer;
}

.energy-popup-body { 
  padding: 12px 14px; 
  max-height: 60vh; 
  overflow: auto; 
}

.energy-popup-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 8px;
}
/* Compact KPI layout: 1 big + 3 mini */
.energy-popup-kpis-compact {
  display: grid;
  gap: 10px;
  margin: 10px 0 8px;
}

.energy-kpi {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.energy-kpi-label { font-size: 11px; opacity: 0.75; }
.energy-kpi-value { font-size: 16px; font-weight: 800; margin-top: 4px; }

/* Top panel */
.energy-kpi-main {
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.energy-kpi-main .energy-kpi-value {
  font-size: 28px;
  letter-spacing: 0.4px;
}

.energy-kpi-sub {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.65;
}

/* Row of 3 minis */
.energy-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.energy-kpi-mini .energy-kpi-value {
  font-size: 15px;
}

/* Mobile: stack minis 2 + 1 */
@media (max-width: 520px) {
  .energy-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.energy-kpi-footnote {
  font-size: 11px;
  opacity: 0.60;
  line-height: 1.2;
  margin-top: 2px;
  padding-left:10px;
}

.energy-cost-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
}

.energy-cost-label{
  font-size: 12px;
  font-weight: 650;
  opacity: 0.82;
}

.energy-cost-sub{
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.62;
}

.energy-cost-right{
  text-align:right;
  min-width: 110px;
}

.energy-cost-value{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.energy-cost-meta{
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.55;
}






    /* =========================================================
   GP POPUP BASE (shared)
   ========================================================= */

.gp-popup,
.hotspot-popup,
.conflict-popup,
.chokepoint-popup,
.oil-popup,
.quake-popup,
.cyber-popup,
.conflict-popup,
.custom-hotspot-popup, 
.migrantsPopup,
.energy-popup
 {
  display: none;
  position: absolute;
  z-index: 100;
  top: 5px !important;
  right: 20px !important;

  /* defaults (can be overridden by per-type vars) */
  min-width: var(--gp-pop-minw, 280px);
  max-width: var(--gp-pop-maxw, 420px);
  max-height: var(--gp-pop-maxh, min(72vh, 600px));

  border-radius: var(--gp-pop-radius, 14px);
  border: 1px solid var(--gp-pop-border, rgba(255,255,255,0.10));
  box-shadow: var(--gp-pop-shadow,
    0 18px 44px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 28px rgba(255,255,255,0.06)
  );

  background: var(--gp-pop-bg, rgba(255,255,255,0.07));

  backdrop-filter: blur(var(--gp-pop-blur, 10px));
  -webkit-backdrop-filter: blur(var(--gp-pop-blur, 10px));

  overflow: hidden; /* sticky header + scroll body */
  pointer-events: auto;
}

.gp-popup.visible,
.hotspot-popup.visible,
.conflict-popup.visible,
.chokepoint-popup.visible,
.oil-popup.visible,
.quake-popup.visible,
.cyber-popup.visible,
.conflict-popup.visible,
.custom-hotspot-popup.visible {
  display: block;
}

/* Optional scanlines/noise overlay (toggle via --gp-pop-scan-opacity: 0) */
.gp-popup::before,
.hotspot-popup::before,
.custom-hotspot-popup::before,
.conflict-popup::before,
.oil-popup::before,
.quake-popup::before,
.energy-popup::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      rgba(0,0,0,0.00) 3px,
      rgba(0,0,0,0.00) 6px
    );
  opacity: var(--gp-pop-scan-opacity, 0);
  mix-blend-mode: overlay;
}

/* ---------- Header ---------- */
/* Map your existing per-popup headers onto shared behavior */
.gp-popup-header,
.hotspot-popup-header,
.conflict-popup-header,
.chokepoint-popup-header,
.oil-popup-header,
.quake-popup-header,
.cyber-popup-header,
.conflict-popup-header,
.custom-hotspot-popup-header,
.energy-popup-header {
  position: sticky;
  top: 0;
  z-index: 3;
  

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  padding: var(--gp-pop-head-pad, 0.85rem 1rem);
  padding-right: 3.25rem; /* adjust if your close is larger */
  border-bottom: 1px solid var(--gp-pop-divider, rgba(255,255,255,0.08));

  background: var(--gp-pop-head-bg,
    linear-gradient(180deg,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.55))
  );
}

/* Titles (keep your existing classes, just normalize typography) */
.gp-popup-title,
.hotspot-popup-title,
.conflict-popup-title
.oil-popup-title,
.quake-popup-title,
.cyber-popup-title,
.conflict-popup-title,
.custom-hotspot-popup-name {
  font-size: var(--gp-pop-title-size, 0.78rem);
  font-weight: var(--gp-pop-title-weight, 900);
  letter-spacing: var(--gp-pop-title-track, 0.12em);
  text-transform: uppercase;
  color: var(--gp-pop-title-color, rgba(245,245,245,0.96));
  line-height: 1.1;
}

.chokepoint-popup-title{
    color: var(--ship-blue);
}

/* Subtitle (if present) */
.gp-popup-subtitle,
.hotspot-popup-subtitle,
.custom-hotspot-popup-subtitle,
.conflict-popup-subtitle,
.quake-popup-subtitle,
.conflict-popup-subtitle {
  margin-top: 0.35rem;
  font-size: 0.60rem;
  letter-spacing: 0.08em;
  color: var(--gp-pop-subtitle-color, rgba(200,210,220,0.78));
}

/* Status/Badge base */
.gp-popup-badge,
.hotspot-popup-level,
.conflict-popup-status,
.chokepoint-popup-status,
.oil-popup-status,
.quake-popup-severity,
.conflict-popup-intensity,
.custom-hotspot-popup-count,
.cyber-popup-status {
  font-size: 0.56rem;
  padding: 0.28rem 0.60rem;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.22) inset;
  color: var(--gp-pop-badge-color, rgba(245,245,245,0.92));
}

/* Close button base (used by most of yours already) */
.gp-popup-close,
.hotspot-popup-close,
.conflict-popup-close,
.chokepoint-popup-close,
.oil-popup-close,
.custom-hotspot-popup-close,
.cyber-popup-close,
/* .quake-popup-close, */
.energy-popup-close {
  color: var(--gp-pop-close-color, rgba(225,225,225,0.85));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 10px 18px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.22) inset;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  position: absolute;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25);
  z-index: 9999;
}

.conflict-popup-close {
  top: 0.5rem;
}

.gp-popup-close:hover,
.hotspot-popup-close:hover,
.conflict-popup-close:hover,
.chokepoint-popup-close:hover,
.oil-popup-close:hover,
.quake-popup-close:hover,
.custom-hotspot-popup-close:hover,
.cyber-popup-close:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--gp-accent, #6ef) 12%, rgba(255,255,255,0.03));
  border-color: color-mix(in srgb, var(--gp-accent, #6ef) 25%, rgba(255,255,255,0.10));
  color: rgba(255,255,255,0.95);
}

/* ---------- Body ---------- */
.gp-popup-body,
.hotspot-popup-body,
.custom-hotspot-popup-body,
.conflict-popup-body,
.chokepoint-popup-body,
.oil-popup-body,
.cyber-popup-info,
.energy-popup-body {
  padding: var(--gp-pop-body-pad, 0.85rem);
  overflow-y: auto;
  max-height: calc(var(--gp-pop-maxh, min(72vh, 560px)) - var(--gp-pop-head-h, 62px));
}

.quake-popup-body, .oil-popup-body, .custom-hotspot-popup-matches {
    padding: 0 0;
    max-height: calc(var(--gp-pop-maxh, min(72vh, 560px)) - var(--gp-pop-head-h, 62px));
}

/* Scrollbar (shared) */
.gp-popup-body::-webkit-scrollbar,
.hotspot-popup-body::-webkit-scrollbar,
.conflict-popup-body::-webkit-scrollbar,
.chokepoint-popup-body::-webkit-scrollbar,
.oil-popup-body::-webkit-scrollbar,
.quake-popup-body::-webkit-scrollbar,
.custom-hotspot-popup-matches::-webkit-scrollbar,
.cyber-popup-info::-webkit-scrollbar,
.energy-popup-body::-webkit-scrollbar
 {
  width: 8px;
}
.gp-popup-body::-webkit-scrollbar-track,
.hotspot-popup-body::-webkit-scrollbar-track,
.conflict-popup-body::-webkit-scrollbar-track,
.chokepoint-popup-body::-webkit-scrollbar-track,
.oil-popup-body::-webkit-scrollbar-track,
.quake-popup-body::-webkit-scrollbar-track,
.custom-hotspot-popup-matches::-webkit-scrollbar-track,
.cyber-popup-info::-webkit-scrollbar-track,
.energy-popup-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
  border-left: 1px solid var(--gp-pop-scroll-border, rgba(255,255,255,0.08));
}
.gp-popup-body::-webkit-scrollbar-thumb,
.hotspot-popup-body::-webkit-scrollbar-thumb,
.conflict-popup-body::-webkit-scrollbar-thumb,
.chokepoint-popup-body::-webkit-scrollbar-thumb,
.oil-popup-body::-webkit-scrollbar-thumb,
.quake-popup-body::-webkit-scrollbar-thumb,
.custom-hotspot-popup-matches::-webkit-scrollbar-thumb,
.cyber-popup-info::-webkit-scrollbar-thumb,
.energy-popup-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--gp-accent, #6ef) 20%, rgba(255,255,255,0.10));
  border: 1px solid color-mix(in srgb, var(--gp-accent, #6ef) 30%, rgba(255,255,255,0.12));
  border-radius: 999px;
}
.gp-popup-body::-webkit-scrollbar-thumb:hover,
.hotspot-popup-body::-webkit-scrollbar-thumb:hover,
.conflict-popup-body::-webkit-scrollbar-thumb:hover,
.chokepoint-popup-body::-webkit-scrollbar-thumb:hover,
.oil-popup-body::-webkit-scrollbar-thumb:hover,
.quake-popup-body::-webkit-scrollbar-thumb:hover,
.custom-hotspot-popup-matches::-webkit-scrollbar-thumb:hover,
.cyber-popup-info::-webkit-scrollbar-thumb:hover,
.energy-popup-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--gp-accent, #6ef) 30%, rgba(255,255,255,0.10));
}




/* ---------- Section cards ---------- */
.gp-popup-section,
.hotspot-popup-section,
.custom-hotspot-popup,   /* inconsistency here, but the effect is cool */
.conflict-popup-section,
.chokepoint-popup-section,
.oil-popup-section,
.quake-popup-section,
.cyber-popup-section,
.energy-popup-section,
.energy-popup-kpis-compact {
  background: rgba(255,255,255,0.02);
  border: 1px solid color-mix(in srgb, var(--gp-accent, #6ef) 18%, rgba(255,255,255,0.10));
  border-radius: 14px;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.40),
    0 0 0 1px rgba(0,0,0,0.20) inset;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.chokepoint-popup-section{
    background: rgba(255,255,255,0.03);
}

.gp-popup-section-header,
.hotspot-popup-section-header,
.custom-hotspot-popup-section-header,
.conflict-popup-section-header,
.chokepoint-popup-section-header,
.quake-popup-section-header,
.oil-popup-section-header,
.cyber-popup-section-header,
.energy-popup-section-header {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gp-accent, #6ef) 14%, rgba(255,255,255,0.08));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gp-accent, #6ef) 10%, rgba(0,0,0,0.00)),
    rgba(0,0,0,0.00)
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.gp-popup-section-title,
.hotspot-popup-section-title,
.custom-hotspot-popup-title,
.conflict-popup-section-title,
.chokepoint-popup-section-title,
.quake-popup-section-title,
.oil-popup-section-title,
.energy-popup-headlines-title {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gp-accent, #6ef) 55%, rgba(245,245,245,0.80));
}

.energy-popup-headline,
.conflict-popup-headlines, 
.hotspot-popup-headlines, 
.custom-hotspot-popup-mates{
        max-height: 240px; /* give this section more room */
        overflow-y: auto;
}

.energy-popup-desc { margin-top: 10px; font-size: 12px; opacity: 0.9; line-height: 1.35; }

.energy-popup-headlines-title { margin-top: 6px; font-size: 12px; font-weight: 700; opacity: 0.85; }
/* .energy-popup-headlines { margin-top: 6px; display: grid; gap: 8px; } */
/* .energy-popup-headline { padding: 8px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } */
.energy-popup-headline-source { font-size: 11px; opacity: 0.7; margin-bottom: 4px; }
/* .energy-popup-headline a { color: rgba(190, 220, 255, 0.95); text-decoration: none; } */
/* .energy-popup-headline a:hover { text-decoration: underline; } */

.energy-popup-headline,
.conflict-popup-headlines, 
.hotspot-popup-headline, 
.custom-hotspot-popup-match {
padding: 0.70rem 0.85rem;
border-bottom: 1px solid rgba(70, 255, 160, 0.08);

font-size: 0.76rem;
color: rgba(220, 255, 240, 0.92);
cursor: pointer;

background: rgba(0,0,0,0.00);
transition: background 0.15s, transform 0.15s, border-color 0.15s;
}

.energy-popup-headline:hover
.conflict-popup-headlines:hover, 
.hotspot-popup-headline:hover, 
.custom-hotspot-popup-match:hover {
background: rgba(70, 255, 160, 0.06);
transform: translateX(3px);
border-bottom-color: rgba(70, 255, 160, 0.16);
}

.conflict-popup-source, 
.hotspot-popup-source,  
.custom-hotspot-popup-match-source {
display: inline-flex;
align-items: center;

font-size: 0.46rem;
color: rgba(185, 235, 210, 0.96);
text-transform: uppercase;
letter-spacing: 0.14em;

padding: 0.16rem 0.38rem;
border-radius: 999px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(70,255,160,0.10);
margin-bottom: 0.30rem;
}

.energy-popup-headline a,
.conflict-popup-headline a, 
.hotspot-popup-headline a, 
.custom-hotspot-popup-match a {
color: inherit;
text-decoration: none;
}
.energy-popup-headline a:hover,
.conflict-popup-headline a:hover, 
.hotspot-popup-headline a:hover,
 .custom-hotspot-popup-match a:hover {
color: rgba(230, 255, 245, 1);
}

/* Empty state */
.conflict-popup-empty, .hotspot-popup-empty, .custom-hotspot-popup-empty,
.oil-popup-empty, .quake-popup-empty, .chokepoint-popup-empty, .chokepoint-popup-visibility,
.energy-popup-no-news {
padding: 0.85rem;
color: rgba(170, 220, 195, 0.86);
font-size: 0.66rem;
}

.chokepoint-popup-empty, .chokepoint-popup-visibility
{
    color: var(--ship-muted);
}



/* HOTSPOT (green) */
.hotspot-popup {
    --gp-accent: rgba(70,255,160,1);
    --gp-pop-minw: 340px;
    --gp-pop-maxw: 460px;
    --gp-pop-maxh: min(72vh, 560px);
    --gp-pop-radius: 16px;
    --gp-pop-scan-opacity: 0.25;
  
    --gp-pop-bg: radial-gradient(120% 140% at 0% 0%,
      rgba(70, 255, 160, 0.14) 0%,
      rgba(10, 22, 18, 0.5) 42%,
      rgba(0, 0, 0, 0.9) 100%);
    --gp-pop-border: rgba(70, 255, 160, 0.18);
    --gp-pop-divider: rgba(70, 255, 160, 0.14);
    --gp-pop-head-bg: linear-gradient(180deg,
      rgba(70, 255, 160, 0.10),
      rgba(0,0,0,0.55));
    --gp-pop-title-color: rgba(200, 255, 230, 0.98);
  }
  
  /* CHOKEPOINT / PORT (blue) */
  .chokepoint-popup {
    --gp-accent: rgba(0,170,255,1);
    --gp-pop-minw: 260px;
    --gp-pop-maxw: 320px;
    --gp-pop-radius: 14px;
  
    --gp-pop-bg: radial-gradient(120% 140% at 0% 0%,
      rgba(0, 170, 255, 0.16) 0%,
      rgba(6, 16, 26, 0.8) 42%,
      rgba(0, 0, 0, 0.96) 100%);
    --gp-pop-border: rgba(0,170,255,0.22);
    --gp-pop-head-bg: linear-gradient(180deg,
      rgba(0,170,255,0.14),
      rgba(0,0,0,0.55));
    --gp-pop-title-color: rgba(200,240,255,0.95);
  }
  
  /* alert modifier */
  .chokepoint-popup.alert {
    --gp-accent: rgba(255,170,0,1);
    --gp-pop-border: rgba(255,170,0,0.40);
  }
  
  /* OIL (amber) */
  .oil-popup {
    --gp-accent: rgba(255,190,70,1);
    --gp-pop-minw: 280px;
    --gp-pop-maxw: 340px;
    --gp-pop-maxh: 540px;
    --gp-pop-radius: 14px;
    --gp-pop-scan-opacity: 0.22;
  
    --gp-pop-bg: radial-gradient(120% 140% at 0% 0%,
      rgba(255, 190, 70, 0.10) 0%,
      rgba(10, 16, 22, 0.8) 45%,
      rgba(0, 0, 0, 0.96) 100%);
  }
  
  /* QUAKES (orange) */
  .quake-popup {
    --gp-accent: rgba(255,120,40,1);
    --gp-pop-minw: 320px;
    --gp-pop-maxw: 420px;
    --gp-pop-maxh: min(160vh, 420px);
    --gp-pop-radius: 16px;
    --gp-pop-scan-opacity: 0.22;
  
    --gp-pop-bg: radial-gradient(120% 140% at 0% 0%,
      rgba(255, 140, 60, 0.16) 0%,
      rgba(18, 10, 7, 0.8) 44%,
      rgba(0, 0, 0, 0.9) 100%);
    --gp-pop-title-color: rgba(255, 220, 200, 0.98);
  }
  
  /* severity modifier: just tweak accent/border (no giant restyles) */
  .quake-popup.minor    { --gp-accent: rgba(255,150,60,1); }
  .quake-popup.moderate { --gp-accent: rgba(255, 90,40,1); }
  .quake-popup.major    { --gp-accent: rgba(255, 30,30,1); }
  
  /* CONFLICT (red) */
  .conflict-popup {
    --gp-accent: rgba(255,70,70,1);
    --gp-pop-minw: 340px;
    --gp-pop-maxw: 440px;
    --gp-pop-radius: 10px;
  
    --gp-pop-bg: linear-gradient(180deg,
      rgba(30, 6, 6, 0.88) 0%,
      rgba(16, 4, 4, 0.4) 60%,
      rgba(10, 3, 3, 0.3) 100%);
    --gp-pop-border: rgba(255, 60, 60, 0.55);
    --gp-pop-title-color: rgba(255, 120, 120, 0.95);
    --gp-pop-divider: rgba(255, 70, 70, 0.22);
  }
  
  /* CYBER (magenta) - keep your distinctive vibe, but unify structure */
  .cyber-popup {
    --gp-accent: rgba(255,0,255,1);
    --gp-pop-minw: 260px;
    --gp-pop-maxw: 320px;
    --gp-pop-radius: 12px;
  
    --gp-pop-bg: rgba(10, 5, 15, 0.95);
    --gp-pop-border: rgba(255,0,255,0.40);
    --gp-pop-divider: rgba(48,16,48,1);
    --gp-pop-title-color: rgba(255,0,255,0.95);
    --gp-pop-head-bg: linear-gradient(180deg,
      rgba(255,0,255,0.10),
      rgba(0,0,0,0.55));
  }
  
  /* CUSTOM HOTSPOT (neutral) */
  .custom-hotspot-popup {
    --gp-accent: rgba(160, 180, 170, 1);
    --gp-pop-minw: 280px;
    --gp-pop-maxw: 350px;
    --gp-pop-radius: 12px;
  
    --gp-pop-bg: rgba(5, 10, 8, 0.95);
    --gp-pop-border: rgba(255,255,255,0.10);
    --gp-pop-divider: rgba(255,255,255,0.08);
  }
  


  /* ==============================
   CITY CAM MARKERS
   ============================== */

.citycam-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 30;
  }
  
  /* Visible dot */
  .citycam-marker .citycam-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #9fd4ff, #2f7cff);
    border: 1px solid rgba(160, 200, 255, 0.9);
    box-shadow:
      0 0 6px rgba(120, 180, 255, 0.8),
      0 0 14px rgba(80, 140, 255, 0.6);
  }
  
  /* Optional pulse */
  .citycam-marker::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(120, 180, 255, 0.35);
    animation: citycam-pulse 2.2s ease-out infinite;
  }
  
  @keyframes citycam-pulse {
    0%   { opacity: 0.9; transform: scale(0.6); }
    100% { opacity: 0;   transform: scale(1.6); }
  }
  
  /* Status variants (optional) */
  .citycam-ok .citycam-dot {
    background: radial-gradient(circle at 30% 30%, #a8ffd0, #2ecc71);
  }
  
  .citycam-down .citycam-dot {
    background: radial-gradient(circle at 30% 30%, #ffb0b0, #e74c3c);
    box-shadow:
      0 0 6px rgba(255, 90, 90, 0.9),
      0 0 14px rgba(255, 60, 60, 0.7);
  }
  
  .citycam-unknown .citycam-dot {
    background: radial-gradient(circle at 30% 30%, #ccc, #888);
  }

  
  /* City Cam Popup (panel style) */
.citycam-popup {
    display: none;
    position: absolute;
    z-index: 120;
    min-width: 320px;
    max-width: 460px;
    max-height: min(60vh, 520px);
    overflow: hidden;
  
    background: linear-gradient(180deg, rgba(12,14,18,0.98) 0%, rgba(8,10,14,0.98) 100%);
    border: 1px solid rgba(120, 170, 255, 0.35);
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.7);
  }
  
  .citycam-popup.visible { display: block; }
  
  .citycam-popup-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  
  .citycam-popup-title {
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  
  .citycam-popup-subtitle {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
  }
  
  .citycam-popup-provider {
    font-size: 11px;
    opacity: 0.8;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 4px 8px;
    border-radius: 999px;
  }
  
  .citycam-popup-close {
    margin-left: 10px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.8);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  
  .citycam-popup-body {
    padding: 12px;
  }
  
  .citycam-popup-img,
  .citycam-popup-video {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
  }
  
  .citycam-popup-loading,
  .citycam-popup-error {
    font-size: 13px;
    opacity: 0.9;
  }
  
  .citycam-popup-link {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    text-decoration: none;
  }

  
/* Migration Popup */
.migration-popup {
  display: none;
  position: absolute;
  z-index: 120;

  min-width: 320px;
  max-width: 420px;
  max-height: min(60vh, 420px);

  border-radius: 12px;
  overflow: hidden;

  border: 1px solid rgba(255, 179, 71, 0.35);
  outline: 1px solid rgba(255, 179, 71, 0.10);

  background: linear-gradient(
    180deg,
    rgba(18, 10, 6, 0.96) 0%,
    rgba(10, 6, 4, 0.96) 70%,
    rgba(8, 4, 3, 0.96) 100%
  );

  box-shadow:
    0 18px 60px rgba(0,0,0,0.7),
    0 0 40px rgba(255,179,71,0.12);
}

.migration-popup.visible { display: block; }

.migration-popup-header {
  position: sticky;
  top: 0;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);

  background: linear-gradient(180deg,
    rgba(255,255,255,0.06),
    rgba(0,0,0,0.55)
  );
}

.migration-popup-title {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: rgba(255, 220, 190, 0.95);
}

.migration-popup-subtitle {
  margin-top: 2px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.migration-popup-header-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.migration-popup-rank {
  font-size: 0.75rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255,179,71,0.35);
  background: rgba(255,179,71,0.12);
  color: rgba(255, 220, 190, 0.95);
}

.migration-popup-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  line-height: 1;
  font-size: 20px;
}
.migration-popup-close:hover {
  border-color: rgba(255,179,71,0.35);
  box-shadow: 0 0 0 3px rgba(255,179,71,0.12);
}

.migration-popup-body {
  padding: 0.9rem 1rem 1rem;
}

.migration-popup-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.migration-popup-metric-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
}

.migration-popup-metric-value {
  margin-top: 4px;
  font-size: 1.35rem;
  font-weight: 800;
  color: rgba(255, 235, 210, 0.95);
}
.migration-popup-metric-suffix {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,179,71,0.9);
}

.migration-popup-grid {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.migration-popup-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.6rem;

  padding: 0.55rem 0.65rem;
  border-radius: 10px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.migration-popup-k {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.migration-popup-v {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.88);
  overflow-wrap: anywhere;
}

.migration-popup-footnote {
  margin-top: 0.8rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.55);
}


/* ----------------------- */
/* --- Energy overlay: make it POP --- */
.energy-growth-layer { pointer-events: none; }
.energy-zone-hit { pointer-events: all; fill: transparent; cursor: pointer; }

/* Keep fill visible (was too low) */
.energy-zone-fill {
  opacity: 0.28;                 /* was ~0.18 */
  mix-blend-mode: screen;        /* makes it glow against dark land */
}

/* The animated dashed line should be brighter + thicker */
.energy-zone-path {
  opacity: 0.70;
  fill: none;
  stroke-width: 1.4px;
  stroke-linecap: round;

  /* explicitly disable dashed animation by default */
  stroke-dasharray: none;
  animation: none;
  filter: none;
  mix-blend-mode: normal;
}

.energy-zone-underlay {
  opacity: 0.10;
  fill: rgba(0,0,0,0.9);
}



/* Glow is OFF by default */
.energy-zone-glow{
  fill: none;
  stroke-width: 10px;
  opacity: 0;          /* key: hidden unless has-news */
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: none;
}

/* Optional inner core line (off unless you use it) */
.energy-zone-core{
  fill: none;
  stroke-width: 1.2px;
  opacity: 0;
  mix-blend-mode: screen;
}
/* =========================
   HAS NEWS (turn it on)
   ========================= */

/* If the PATH gets .has-news */
.energy-zone-path.has-news{
  opacity: 0.95;
  stroke-width: 2.6px;
  stroke-dasharray: 8 7;
  animation: dash 5.5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.12));
  mix-blend-mode: screen;
}

/* Glow aura when has-news */
.energy-zone-glow.has-news{
  opacity: 0.38;
  animation: demandNewsGlow 1.8s ease-in-out infinite;
}

/* Optional core line when has-news */
.energy-zone-core.has-news{
  opacity: 0.95;
}

/* =========================
   Animations
   ========================= */

@keyframes demandNewsGlow{
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.95; }
}

@keyframes dash{
  to { stroke-dashoffset: -80; }
}

/* --- Intensity palettes --- */
/* HIGH: hot red */
.energy-zone-glow.high-intensity { stroke: rgba(255, 85, 95, 1); }
.energy-zone-fill.high-intensity { fill: rgba(255, 60, 80, 0.55); }
.energy-zone-path.high-intensity { stroke: rgba(255, 120, 130, 1); }
.energy-zone-core.high-intensity { stroke: rgba(255, 210, 215, 1); }

/* MED: amber */
.energy-zone-glow.med-intensity { stroke: rgba(255, 190, 70, 1); }
.energy-zone-fill.med-intensity { fill: rgba(255, 170, 70, 0.42); }
.energy-zone-path.med-intensity { stroke: rgba(255, 220, 130, 1); }
.energy-zone-core.med-intensity { stroke: rgba(255, 245, 210, 1); }

/* LOW: electric cyan */
.energy-zone-glow.low-intensity { stroke: rgba(90, 210, 255, 1); }
.energy-zone-fill.low-intensity { fill: rgba(60, 190, 255, 0.34); }
.energy-zone-path.low-intensity { stroke: rgba(140, 235, 255, 1); }
.energy-zone-core.low-intensity { stroke: rgba(220, 250, 255, 1); }





             /* Only show on small screens in portrait */
/* --- Mobile portrait: 1-column dashboard + no panel scrolling + smaller map --- */
@media (max-width: 900px) and (orientation: portrait) {
    /* When a popup is open, expand the map panel height so popup is readable */
  #mapPanel.popup-open {
    height: calc(100svh - 220px) !important; /* adjust 120px for your header */
    max-height: calc(100svh - 220px) !important;
  }
  
  .oil-icon 
  {
    width: 12px;
    height: 12px;
  }

  .gp-popup-body,
  .hotspot-popup-body,
  .custom-hotspot-popup-body,
  .conflict-popup-body,
  .chokepoint-popup-body,
  .oil-popup-body,
  .cyber-popup-info,
  .energy-popup-body {
   
    max-height: 210px;
  }
    .header-left {
        gap: 0rem;
    }

    /* 1 column grid */
    .dashboard {
      grid-template-columns: 1fr;
      grid-auto-rows: auto; /* let panels size naturally on mobile */
    }

    .map-layer-toggle {
        left: 50%;
        gap: 2px;
        width: calc(100vw - 10px)  !important;
        max-width: 420px;
    }

  
    .layer-btn {
      padding: 0.3rem 0.2rem;
    }

    .panel   {
      min-height: 450px;
    }
    .panel-polymarket{
      min-height: 650px;
    }
  
    /* force ALL panels to 1 column */
    .panel,
    .panel.wide,
    .panel-global-map,
    .panel-news,
    .panel-wide {
      grid-column: 1 / -1 !important; /* span full single column */
    }
  
    /* remove vertical scrolling everywhere inside panels */
    .panel,
    .panel .panel-content,
    .panel-news .panel-content,
    .panel-wide .panel-content {
      overflow-y: visible !important;
    }
  
    /* if you still want to prevent horizontal bleed */
    .panel,
    .panel .panel-content {
      overflow-x: hidden;
    }
    .panel-global-map {
        min-height: 350px !important;
        /* height: auto !important; */
    }
  
    /* map panel container height */
    #mapPanel {
      height: 350px !important;
      max-height: 350px !important;
      max-width: 100% !important;
    }
  
    .world-map {
      height: 100%;
      overscroll-behavior: contain;
    }
  
    .quake-label {
        top: -0.280rem;
        left: 1.1rem;
        font-size: 0.5rem;

    }
    /* your existing mobile tweaks */
    .monitor-form-header { gap: 10px; }
    .monitor-form-title { font-size: 16px; }
    .monitor-save-inline { padding: 6px 10px; font-size: 12px; }

    
  }
    

        @media (max-width: 1400px) {
            .dashboard {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            .panel.wide {
                grid-column: span 1;
            }
            .dashboard > .panel-global-map {
                grid-column: 1 / -1;
              }
        }

        @media (max-width: 1200px) {
            .dashboard {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .panel-global-map,
            .panel-news {
              grid-column: span 4;
            }
          
            .panel-news {
              min-height: 300px;
            }
          }
          

        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }

            .header {
                padding: 0.75rem 1rem;
            }

            .panel-content {
                max-height: 650px;
            }
        }

        @media (max-width: 1600px) and (orientation: landscape) {
            .dashboard {
                grid-template-columns: repeat(3, 1fr);
            } 

            .map-layer-toggle {
                left: 50%;
                gap: 4px;
            }

            .monitor-form-header {
                gap: 10px;
              }
            
              .monitor-form-title {
                font-size: 16px;
              }
            
              .monitor-save-inline {
                padding: 6px 10px;
                font-size: 12px;
              }
        }