/* Apply globally to completely strip out mobile web browser artifacts */
* {
  /* 1. Eliminate the blue tap highlight overlay entirely */
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;

  /* 2. Prevent accidental text-selection highlights while dragging/tapping the globe */
  -webkit-user-select: none;
  user-select: none;
}

@keyframes fps-throttle {
  from {
    opacity: 0.99;
  }

  to {
    opacity: 1;
  }
}

:root {
  --border-hover: rgba(59, 130, 246, 0.5);

  /* Professional Status Palette */
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-danger: #ef4444;

  --bg-dark: #070d19;
  --card-bg: rgba(10, 20, 38, 0.95);
  --border-glow: #1e3a8a;

  /* Neon Accent Palette */
  --market-purple: #d500f9;
  --curr-gold: #ffd600;
  --tour-cyan: #00e5ff;
  --pulse-green: #00e676;
  --danger-red: #ff1744;
  --danger-orange: #ff9100;
  --danger-yellow: yellow;

  --text-blue: #00bfff;
  --text-orange: #ff9f43;

  --border: rgba(43, 74, 114, 0.4);
  --text-red: #ff3b3b;

  /* Deep Ocean Base Tones */
  --bg-main: #020b14;
  --bg-card: #051829;
  --border-color: #0b2e4f;

  /* Flat Blue Modern Palette */
  --text-primary: #e2f1ff;
  --text-secondary: #537d99;
  --flat-blue: #0088ff;
  --flat-blue-hover: #33a3ff;
  --flat-blue-dark: #0055cc;
  --accent-green: #00ffa2;

  --neon-blue: #00a8ff;
  --neon-green: #00ff88;
  --text-muted: #64748b;
  --header-h: 46px;

  /* Dynamic mobile swipe tracking handle value */
  --mobile-translate-y: 0px;

  --bg-dashboard: #080b11;
  --bg-surface: #111622;
  --bg-input: #0b0e16;
  --brand-cyan: #00f0ff;
  --brand-danger: #ff4a4a;
  --text-main: #f0f4f8;

  --bg-glass: rgba(10, 16, 26, 0.85);
  --bg-panel: #0b1528;
  --border-panel: rgba(255, 255, 255, 0.08);

  /* Pure UI Accents from Image */
  --accent-blue: #1d4ed8;
  --accent-blue-glow: rgba(29, 78, 216, 0.4);
  --accent-blue-light: #3b82f6;
  --accent-emerald: #10b981;



  --bg-color: #030814;
  --panel-bg: #051126;
  --border-blue: #0088ff;
  --glow-blue: rgba(0, 136, 255, 0.4);
  --bar-empty: #092140;
  --accent-red: #ff3b30;
  --accent-warn: #ffaa00;


  --card-border: #1a2638;

  --color-low: #2b7fff;
  --color-medium: #ff9800;
  --color-live: #ff2a2a;
  --color-nodata: #4a5768;

  --text-light: #c0d1e5;

  --card-width: 135px;
  --card-gap: 12px;

  --card-bg-light: #0f1c2e;
  --accent-cyan: #00d8f6;

  --text-sub: #94a3b8;
}

body {
  /* Forces the browser composite layer to sync to a 30-step timing function */

  /* 3. Lock down the viewport boundary—stops the page from bouncing or being pulled away */
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;

  /* 4. Disable elastic rubber-banding scroll physics on mobile browsers */
  overscroll-behavior: none;

  /* 5. Smooth out font rendering for modern high-DPI phone displays */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin: 0;

  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;



  display: flex;


}

/* Re-allow text selection ONLY inside text fields or logs if necessary */
.log-container,
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Apply to your dashboard images, maps, and icon asset indicators */


.ticker-text {
  gap: 40px;
}



/* Force wrapper to absolute viewport bounds */
#globeContainer {
  position: absolute !important;
  left: 0 !important;

}



#globeViz {
  position: relative;
  overflow: hidden;

}

.mini-list {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.mini-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.more {
  font-size: 13px;
  font-weight: bold;
}




#miniStrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 8px;
  align-items: center;
  scroll-behavior: smooth;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#miniStrip::-webkit-scrollbar {
  height: 6px;
}

#miniStrip::-webkit-scrollbar-track {
  background: transparent;
}

#miniStrip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

#miniStrip::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.mini-item {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* OPTIMIZED: Replaced general 'all' layout transitions with explicit properties */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.mini-item:hover {
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.12);
}

.mini-item.active {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  transform: scale(1.15);
}

.mini-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mini-item.active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 60%);
  z-index: -1;
}

.mini-cluster:hover {
  z-index: 9999;

}


/* CLOSE BUTTON */
#closebtn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 217, 255, 0.12);
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
}

#closebtn:hover {
  background: rgba(255, 80, 80, 0.4);
  transform: scale(1.1);
}

#uiLayer {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;

}

#uiLayer * {
  pointer-events: auto;
}

#globeControls button {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
}

#globeControls button:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

#globeControls button.active {
  background: rgba(0, 180, 255, 0.25);
}

#controlBar {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
}










.native-globe-tooltip,
#clashAnchor,
#countryAnchor,
#tradeAnchor {
  z-index: 999999 !important;
}




.panel {
  position: absolute;
  transform: translate(-50%, -120%);
  color: #d9f7ff;
  width: 300px;
  height: auto;
  /* 🔥 REMOVE FIXED HEIGHT */

  border-radius: 12px;
  gap: 2px;

  padding: 3px;

  overflow: hidden;
  background: linear-gradient(180deg,
      rgba(0, 255, 255, 0.10) 0%,
      rgba(0, 40, 60, 0.92) 35%,
      rgba(0, 18, 30, 0.96) 100%);
}

.panel-content {
  display: flex;
  flex-direction: column;

  border-bottom: 0.1px solid rgba(0, 200, 255, 0.096);

}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #00d9ff;
}

.panel::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.panel::after {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

.block {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;

  border-radius: 2px;
  /* remove rounded look */

  border: 1px solid rgba(0, 200, 255, 0.2);
}

.hidden {
  display: none;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 2px 4px;
  height: 28px;
  /* 🔥 key fix */
  text-shadow: 0 0 10px #00f6ff, 0 0 20px #00f6ff;

}

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;

}

.header-card {
  background: rgba(3, 147, 236, 0.85);
  border: 1px solid rgba(0, 217, 255, 0.35);

  padding: 6px 8px;
  border-radius: 8px;

  font-size: 10px;
  color: #cfefff;
}

.panel-header h3 {
  font-size: 10px;
  margin: 0;
  line-height: 1;
  letter-spacing: 0.5px;

}

.sentiment {
  font-size: 14px;
  line-height: 1;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sentiment.positive {
  color: #00ff9c;
}

.sentiment.negative {
  color: #ff3b3b;
}

.sentiment.neutral {
  color: #aaa;
}



/* each vertical group */
.metric-column {
  display: flex;
  flex-direction: column;
  gap: 6px;

  min-width: 100px;
}

.block {
  flex: 1;
  min-width: 0;

  background: rgba(0, 0, 0, 0.4);
  padding: 8px;

  border-radius: 3px;
  border: 1px solid rgba(0, 200, 255, 0.2);

  font-size: 11px;
}

.block p {
  margin: 2px 0;
}

h3 {
  font-size: 10px;
  margin-bottom: 4px;
}

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

h3 {
  font-size: 12px;
  color: #00d9ff;
  margin-bottom: 5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-btn {
  width: 22px;
  height: 22px;
  background-color: #00d9ff;
  font-size: 12px;

  padding: 0;
  border-radius: 6px;
}

.close-btn:hover {
  background: rgb(0, 200, 255);
  color: white;
}

.metric {
  background: rgb(0, 20, 30);
  border: 1px solid rgba(0, 217, 255, 0.28);

  border-radius: 8px;


  min-height: 30px;
  position: relative;
  overflow: hidden;
  padding: 6px 10px;
  min-width: 100px;
  border: 1px solid rgba(0, 217, 255, 0.4);

  background: rgba(0, 25, 40, 0.85);



  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.06),
      rgba(0, 25, 40, 0.88));

  border: 1px solid rgba(0, 217, 255, 0.28);


}

/* header row */
.metric-header {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 5px;

}

.metric-right {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* arrow */
.arrow {
  transition: transform 0.2s ease;
}

/* hidden chart */
.chart-container {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease;
}

.metric.expanded .chart-container {
  height: 40px;
  /* 🔥 smaller */
}



.metric.expanded .arrow {
  transform: rotate(90deg);
  /* ▶ → ▼ */
}

.score-bar {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 30px;
  margin-top: 6px;

}

.score-segment {
  flex: 1;
  background: #222;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.dynamic-text {
  font-family: "Orbitron", sans-serif;
  color: #00f6ff;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 8px;
  text-shadow: 0 0 10px #00f6ff, 0 0 20px #00f6ff;
}

.market-text {
  font-family: "Orbitron", sans-serif;
  color: yellow;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 8px;
  outline-color: yellow;
  align-content: end;
  text-align: right;
  text-shadow: 0 0 10px #00f6ff, 0 0 20px #00f6ff;
}

.trend-up {
  color: #00c853;
  /* green */
}

.trend-down {
  color: #ff1744;
  /* red */
}

.trend-flat {
  color: #9e9e9e;
  /* grey */
}

#tooltip {
  position: fixed;
  background: rgba(10, 10, 20, 0.95);
  color: white;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  pointer-events: none;

  opacity: 0;
  transform: translateY(4px);

  transition:
    opacity 0.15s ease,
    transform 0.15s ease;

  z-index: 999999;

  border: 1px solid rgba(255, 255, 255, 0.08);


}

.panel-header img {
  margin-top: 4px;
  height: 25px;
  width: 25px;
}

.fi.fi {
  height: 25px;
  width: 25px;

}

#clashAnchor,
#countryAnchor {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}


/* triangle */
.anchor-tip {
  position: absolute;

  left: 50%;
  top: 0;

  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  border-top: 14px solid rgb(9, 74, 90);
  filter:
    drop-shadow(0 0 6px cyan) drop-shadow(0 0 12px cyan);
}


.route-status {
  background: rgb(0, 20, 30);
  border: 1px solid rgba(0, 217, 255, 0.28);

  border-radius: 8px;


  min-height: 30px;
  position: relative;
  overflow: hidden;
  padding: 6px 10px;
  min-width: 100px;
  border: 1px solid rgba(0, 217, 255, 0.4);
  letter-spacing: 1px;
  background: rgba(0, 25, 40, 0.85);
  font-size: 20px;

  text-align: center;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.06),
      rgba(0, 25, 40, 0.88));

  border: 1px solid rgba(0, 217, 255, 0.28);


}

.choke-text {
  font-family: "Orbitron", sans-serif;
  color: yellow;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 8px;
  outline-color: yellow;
  align-content: end;
  text-align: center;
  gap: 3px;
  padding: 2px;
  text-shadow: 0 0 10px #00f6ff, 0 0 20px #00f6ff;
}

.dynamic-text-route {
  font-family: "Orbitron", sans-serif;
  color: #00f6ff;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 8px;
  padding: 5px;
  text-shadow: 0 0 10px #00f6ff, 0 0 20px #00f6ff;
  text-align: center;

}



.status-operational {
  background: rgba(0, 255, 120, 0.2);
  color: #00ff88;
  text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;

}

.status-delayed {
  background: rgba(255, 200, 0, 0.2);
  color: #ffcc00;
  text-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00;

}

.status-disrupted {
  background: rgba(255, 120, 0, 0.2);
  color: #ff7a00;
  text-shadow: 0 0 10px #ff7a00, 0 0 20px #ff7a00;

}

.status-high-alert {
  background: rgba(255, 0, 0, 0.2);
  color: #ff2b2b;
  text-shadow: 0 0 10px #ff2b2b, 0 0 20px #ff2b2b;

}

.item-btn {
  font-size: 10px;
  padding: 4px 10px;
  border: none;
  border-radius: 999px;

  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;

  cursor: pointer;


  letter-spacing: 0.3px;
  font-weight: 600;
}

.item-btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: linear-gradient(135deg, #34d399, #22c55e);
}

.item-btn:active {
  transform: translateY(0px) scale(0.98);
}


#shipTooltip,
.ship-tooltip,
.plane-tooltip {
  position: absolute;

  left: 50%;
  /*top: -10px;*/

  transform:
    translate(-50%, -120%) scale(0.9);

  background: rgba(0, 0, 0, 0.85);

  color: white;

  padding: 6px 10px;
  z-index: 999 !important;

  border-radius: 8px;

  font-size: 12px;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  transition:
    opacity 0.15s ease,
    transform 0.15s ease;

}


.log-container {
  padding: 10px;
  overflow-y: auto;
  height: 100%;
}

.drawer-content {
  height: 100%;
}

.log-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  color: white;
  font-size: 12px;
}

.log-time {
  color: #00d9ff;
  margin-bottom: 6px;
  font-size: 11px;
}

.log-data {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}



#tradeAnchor {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: center bottom;
}

#tradePanel {
  width: 290px;
  height: 210px;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  background-color: rgba(10, 20, 38, 0.95);
  position: absolute;

  /* panel appears above the tip */
  left: 50%;
  bottom: -1px;

  transform: translateX(-50%);

  pointer-events: auto;
}

#clashAnchor,
#countryAnchor {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: center bottom;
  z-index: 9999;

}

#countryPanel {
  background: var(--card-bg);
  border: 1px solid rgba(43, 74, 114, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  padding: 5px 6px;
  width: 100%;
  width: 305px;
  height: 235px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  box-sizing: border-box;
  transition: opacity 0.3s ease, transform 0.3s ease;

  /* panel appears above the tip */
  left: 50%;
  bottom: -1px;

  transform: translateX(-50%);

  pointer-events: auto;
}


.geo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.geo-item:hover {
  transform: translateY(-2px);


}

/* Stop any radar/sweeper rotations or pulses specifically for the peaceful state */
.status-peaceful .tactical-crosshair-wrapper *,
.status-peaceful .peace-icon {
  animation: none !important;
  transform: none !important;
}

/* Optional: Hide the tactical crosshair hair-lines entirely for the dove */
.status-peaceful .reticle-cross-x,
.status-peaceful .reticle-cross-y {
  display: none;
}

.item-img {
  width: 34px;
  height: 34px;

  border-radius: 8px;

  object-fit: cover;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.item-content {
  display: flex;
  align-items: center;

  flex: 1;
  /* take remaining space */
  min-width: 0;
  /* allows text truncation */
}

.item-name {
  flex: 1;
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-btn {
  margin-left: auto;

  padding: 4px 8px;

  font-size: 11px;
  letter-spacing: 0.6px;

  background: rgba(120, 180, 255, 0.12);
  border: 1px solid rgba(120, 180, 255, 0.25);

  color: #a8d7ff;

  border-radius: 8px;

  cursor: pointer;

}

.item-btn:hover {
  background: rgba(120, 180, 255, 0.22);
  border-color: rgba(120, 180, 255, 0.4);
}

.geo-item.updated {
  animation: chipPulse 0.5s ease;
}

@keyframes chipPulse {}



#btnSound,
#btnRotate,
#btnTour {}

#btnSound:hover,
#btnRotate:hover,
#btnTour:hover {
  transform: translateY(-2px) scale(1.06);

  background: rgba(0, 170, 255, 0.08);

  border: 1px solid rgba(0, 200, 255, 0.35);


}

#btnSound:active,
#btnRotate:active,
#btnTour:active {
  transform: scale(0.95);
}

#btnSound img,
#btnRotate img,
#btnTour img {
  width: 28px;
  height: 28px;

  object-fit: contain;

  pointer-events: none;

  user-select: none;


}

/* optional glowing active state */
#btnRotate.active,
#btnSound.active,
#btnTour.active {
  background: rgba(0, 180, 255, 0.12);

  border: 1px solid rgba(0, 220, 255, 0.5);


}


.mini-cluster {
  /* Let WebGL see right through the container gaps to fire ring/point interactions */
  pointer-events: none;
}

.mini-cluster div {
  /* Re-enable interactions exclusively for the child button items */
  pointer-events: auto;
}

/* Add this to your CSS file */


/* Let the globe manage .mini-cluster positioning completely. 
   Do NOT put hover scale styles directly on this container. */
.mini-cluster {
  pointer-events: auto;
}

/* Target all contents inside the cluster during hover */
.mini-cluster:hover>* {
  transform: scale(1.5);
  z-index: 101;

}

/* Ensure children have smooth scaling physics from the correct anchor point */
.mini-cluster>* {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: bottom center;
}

/* Container settings */
.cluster-anchor {
  position: relative;

}

/* 1. SCALING TRANSFORM ENGINE */
.mini-cluster {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: bottom center;

}

.cluster-anchor:hover .mini-cluster {
  transform: scale(1.5);

}

.cluster-anchor:hover {
  z-index: 102 !important;

}

/* 2. PIN LABEL VISIBILITY */
.pin-label {
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  width: max-content;

  /* ─── HOVER EXIT: Instantaneous reset (0s delay) ─── */
  transition: opacity 0.1s ease-in-out 0s, transform 0.1s ease-in-out 0s;
}

/* ─── HOVER ENTER: 1-Second delayed reveal ─── */
.cluster-anchor:hover .pin-label {
  opacity: 1;
  transform: translateX(-50%) translateY(-15px);

  /* Overrides the transition property with a 1-second execution delay when entering hover */
  transition: opacity 0.2s ease-in-out 0.4s, transform 0.2s ease-in-out 0.4s;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  70% {
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========= FUTURISTIC LOADER ========= */

/* OVERLAY */
#iframeOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999999999999999999;

  overflow: hidden;
}

/* BACKGROUND */
#iframeBack {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.82);

  animation: fadeBack 0.35s ease;
}

/* TV PANEL */
#iframeModal {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 82%;
  height: 84%;

  overflow: hidden;

  border-radius: 14px;

  background: #05070c;

  border: 1px solid rgba(0, 255, 255, 0.18);


  transform:
    translate(-50%, -50%) scaleY(0.002) scaleX(0);

  transform-origin: center center;

  animation:
    tvTurnOn 1.10s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* SCANLINES */
#iframeModal::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 2px,
      transparent 4px);

  pointer-events: none;

  opacity: 0.18;
}

/* IFRAME */
#iframeView {
  width: 100%;
  height: 100%;

  border: none;

  background: #05070c;
  opacity: 0;

  animation:
    screenAppear 0.2s linear 0.45s forwards;
}

/* CLOSE BUTTON */
#closeIframe {
  position: absolute;

  top: 12px;
  right: 12px;

  z-index: 10;

  width: 34px;
  height: 34px;

  border: none;
  border-radius: 8px;

  background: rgba(0, 0, 0, 0.55);

  color: #9eefff;

  cursor: pointer;

  opacity: 0;

  animation:
    fadeUI 0.25s ease 0.55s forwards;
}

/* OPEN */

@keyframes tvTurnOn {

  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%) scaleY(0.001) scaleX(0);

    filter:
      brightness(4) blur(10px);
  }

  20% {
    opacity: 1;

    transform:
      translate(-50%, -50%) scaleY(0.004) scaleX(1);

    filter:
      brightness(3) blur(6px);
  }

  45% {
    transform:
      translate(-50%, -50%) scaleY(0.08) scaleX(1);

    filter:
      brightness(2.2) blur(3px);
  }

  70% {
    transform:
      translate(-50%, -50%) scaleY(1.02) scaleX(1.01);

    filter:
      brightness(1.15) blur(0.5px);
  }

  100% {
    transform:
      translate(-50%, -50%) scaleY(1) scaleX(1);

    filter:
      brightness(1) blur(0);
  }
}

/* SCREEN FADE IN */

@keyframes screenAppear {
  to {
    opacity: 1;
  }
}

/* UI */

@keyframes fadeUI {
  to {
    opacity: 1;
  }
}

/* BACKGROUND */

@keyframes fadeBack {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#iframeModal.closing {
  animation:
    tvTurnOff 0.5s cubic-bezier(.7, 0, .9, .3) forwards;
}

#iframeModal.closing #iframeView,
#iframeModal.closing #closeIframe {
  opacity: 0;
}

/* CLOSE */

@keyframes tvTurnOff {

  0% {
    transform:
      translate(-50%, -50%) scaleY(1) scaleX(1);

    opacity: 1;

    filter:
      brightness(1.2);
  }

  45% {
    transform:
      translate(-50%, -50%) scaleY(0.02) scaleX(1);

    filter:
      brightness(3);
  }

  100% {
    transform:
      translate(-50%, -50%) scaleY(0.002) scaleX(0);

    opacity: 0;

    filter:
      brightness(6);
  }
}

#iframeLoader {
  position: absolute;
  inset: 0;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: radial-gradient(circle at center,
      rgba(0, 255, 255, 0.06),
    );

  /* Smooth fade when loading finishes */
  transition: opacity 0.45s ease, visibility 0.45s ease;
  opacity: 1;
  visibility: visible;
}

/* State to seamlessly hide loader */
#iframeLoader.hidden-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* moving hologrid */
#iframeLoader::before {
  content: "";
  position: absolute;
  inset: -200%;

  background: linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);

  background-size: 40px 40px;

  transform: perspective(900px) rotateX(82deg);

  animation: holoGrid 12s linear infinite;
}

/* glow sweep */
#iframeLoader::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(to bottom,
      transparent,
      rgba(0, 255, 255, 0.08),
      transparent);

  animation: scanner 2.2s linear infinite;
}

/* CENTER */
.loaderCore {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* OUTER RINGS */
.loaderRing {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 255, 0.25);
}

.loaderRing.r1 {
  width: 160px;
  height: 160px;
  border-top-color: #00ffff;
  animation: spin 4s linear infinite;
}

.loaderRing.r2 {
  width: 120px;
  height: 120px;
  border-right-color: #57d0ff;
  animation: spinReverse 3s linear infinite;
}

.loaderRing.r3 {
  width: 80px;
  height: 80px;
  border-left-color: #8ffcff;
  animation: spin 2s linear infinite;
}

/* CORE */
.loaderDot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00ffff;
  animation: pulseCore 1.4s ease-in-out infinite;
}

/* TEXT */
.loaderText {
  position: absolute;
  bottom: 18%;
  font-size: 11px;
  letter-spacing: 5px;
  color: #8ffcff;
  font-family: monospace;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  animation: textBlink 1.8s ease infinite;
}

/* ANIMATIONS */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes pulseCore {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.8);
    opacity: 0.55;
  }
}

@keyframes holoGrid {
  from {
    transform: perspective(900px) rotateX(82deg) translateY(0);
  }

  to {
    transform: perspective(900px) rotateX(82deg) translateY(40px);
  }
}

@keyframes scanner {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes textBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* =========================
   DROPDOWN PANEL (UNIFIED)
========================= */


/* =========================
   ITEM (UNIFIED VERSION)
========================= */

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 12px;

  border-radius: 10px;

  background: rgba(10, 14, 20, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.9);

  transition: 0.2s ease;
}

.item:hover {
  background: rgba(0, 255, 200, 0.06);
  transform: translateX(3px);
}

.source-title,
.source-left {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;

}

.source-left img {
  width: 18px;
  height: 18px;

  border-radius: 4px;
  opacity: 0.9;
}



/* RIGHT BUTTONS */
.source-actions {
  display: flex;
  gap: 6px;
}

/* BUTTON STYLE */
.source-actions button {
  font-size: 10px;
  letter-spacing: 1px;

  padding: 4px 8px;

  border-radius: 6px;

  cursor: pointer;

  border: 1px solid rgba(0, 255, 200, 0.25);
  background: rgba(0, 255, 200, 0.08);

  color: #00ffd0;

  transition: 0.2s ease;

}

.source-actions button:hover {
  background: rgba(0, 255, 200, 0.18);
  transform: translateY(-1px);
}

/* BUTTON VARIANTS */
.btn-track {
  border-color: rgba(0, 255, 200, 0.35);
}

.btn-info {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}





#miniStripLabel {
  min-height: 24px;
  margin-bottom: 8px;
  width: 100%;
  padding: 4px 10px;
  position: fixed;
  font-size: 12px;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.692);
  top: -20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  opacity: 0;
  transition: .2s;
  z-index: 99999;
  left: 50%;
  /* Start at the horizontal center of the viewport */
  transform: translateX(-50%);
  /* Pull it back by half its own width */
  align-content: center;
}

#miniStripLabel.show {
  opacity: 1;
}




/* ===== Stylish scrollbar (Chrome / Edge / Safari) ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0f0f0f;
  /* dark track */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4facfe, #00f2fe);
  border-radius: 10px;
  border: 2px solid #0f0f0f;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #43e97b, #38f9d7);
}

/* ===== Firefox support ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: #00f2fe #0f0f0f;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* useful if you have a fixed navbar */
}

#fastTooltip {
  position: fixed;
  left: 0;
  top: 0;
  background: black;
  color: white;
  padding: 12px;
  border-radius: 12px;
  font-size: 13px;
  pointer-events: auto;
  /* Allow users to click inside the tooltip if needed */
  display: none;
  z-index: 999999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);

}

/* Add a close button wrapper inside your tooltip if you want */
.tooltip-close-btn {
  float: right;
  cursor: pointer;
  color: #aaa;
  font-weight: bold;
  margin-left: 10px;
}

.tooltip-close-btn:hover {
  color: #fff;
}



/* ========================================================
   CSS-ONLY INTERACTION ENGINE FOR GLOBE OVERLAYS
   ======================================================== */

.cluster-anchor,
.pin-label,
.mini-cluster {
  pointer-events: none !important;
  user-select: none !important;

}

/* #region MARK: LEFT DRAWER */

.drawer.left {
  position: fixed;
  top: 90px;
  left: 0;
  /* Align directly to the edge for easier calculation */
  width: 440px;
  height: calc(100vh - 110px);
  background: var(--bg-panel, #0b1528);
  border: 1px solid var(--border-panel, rgba(255, 255, 255, 0.08));
  border-radius: 0 12px 12px 0;
  /* Flat on the screen edge, rounded on the right */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  z-index: 9999997;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;

  /* FIXED: Shift exactly -100% so the left edge of the panel sits just offscreen */
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active Open Position Shift */
.drawer.left.open {
  transform: translateX(0);
}

/* FIXED TAB HANDLE: Stays locked onto the viewport visible seam */
.drawer.left .drawer-toggle {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 28px;
  height: 120px;
  background: var(--bg-panel, #0b1528);
  border: 1px solid var(--border-panel, rgba(255, 255, 255, 0.08));
  border-left: none;
  border-radius: 0 16px 16px 0;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* --- INITIAL HIDDEN OFFSCREEN STATE --- */
  opacity: 0;
  /* Retain vertical 50% centering AND pull it off the left edge */
  transform: translateY(-50%) translateX(-100%);
  pointer-events: none;

  /* Smooth transition for sliding and fading */
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    color 0.2s ease;
}

/* --- ANIMATED / VISIBLE STATE --- */
.drawer.left .drawer-toggle.is-animated {
  opacity: 1;
  /* Returns to its normal position flush against the drawer edge */
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

.drawer.left .drawer-toggle:hover {
  color: #ffffff;
  background: rgba(11, 21, 40, 0.9);
}

/* Reliable Arrow Typography Core Configuration */
.drawer.left .drawer-toggle .arrow-icon {
  font-size: 13px;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CSS Vector Turning: Flips arrow 180 degrees backwards when panel slides open */
.drawer.left.open .drawer-toggle .arrow-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   UNIFIED MOBILE SCREEN RESPONSIVE CONFIGURATIONS
   ========================================================================== */

/* Entrance animation when a new log card is created */
@keyframes logCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Flash pulse animation when a processing log completes */
@keyframes logCompletePulse {
  0% {
    box-shadow: 0 0 0px rgba(0, 255, 76, 0);
  }

  50% {
    box-shadow: 0 0 12px rgba(0, 255, 76, 0.4);
    background-color: rgba(0, 255, 76, 0.12);
  }

  100% {
    box-shadow: 0 0 0px rgba(0, 255, 76, 0);
  }
}

/* Continuous smooth pulse for active processing cards */
@keyframes logProcessingGlow {

  0%,
  100% {
    border-left-color: rgba(0, 255, 76, 0.6);
  }

  50% {
    border-left-color: rgba(0, 255, 76, 1);
  }
}


.log-spinner-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid rgba(0, 255, 76, 0.2);
  border-top-color: currentColor;
  /* Dynamically inherits text color */
  border-radius: 50%;
  animation: logSpinner 0.8s linear infinite;



  background: var(--neon-blue);
  color: #000;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 1px 2px;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--neon-blue);
  transition: all 0.25s ease;
  position: fixed;
  margin-left: 20;
  visibility: hidden;
}

@keyframes logSpinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* #endregion */







/* #region MARK: RIGHT DRAWER */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');





.drawer.right {
  position: fixed;
  top: 90px;
  right: 0;
  /* Locked right on screen edge border */
  width: 440px;
  height: calc(100vh - 110px);
  background: var(--bg-panel, #0b1528);
  border: 1px solid var(--border-panel, rgba(255, 255, 255, 0.08));
  border-radius: 12px 0 0 12px;
  /* Rounded on left edge, flat on screen boundary */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  z-index: 9999997;
  /* Symmetrical offscreen translation logic */
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active open position shifting */
.drawer.right.open {
  transform: translateX(0);
}

.drawer.right .drawer-toggle {
  position: absolute;
  top: 50%;
  right: 100%;
  width: 28px;
  height: 120px;
  background: var(--bg-panel, #0b1528);
  border: 1px solid var(--border-panel, rgba(255, 255, 255, 0.08));
  border-right: none;
  border-radius: 16px 0 0 16px;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* --- INITIAL HIDDEN OFFSCREEN STATE --- */
  opacity: 0;
  /* Retain vertical centering (-50%) AND push it off to the right (+100%) */
  transform: translateY(-50%) translateX(100%);
  pointer-events: none;

  /* Smooth transition for sliding and fading */
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    color 0.2s ease;
}

/* --- ANIMATED / VISIBLE STATE --- */
.drawer.right .drawer-toggle.is-animated {
  opacity: 1;
  /* Returns flush against the right drawer's left seam */
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

.drawer-toggle:hover {
  color: #ffffff;
  background: rgba(11, 21, 40, 0.9);
}

.drawer-toggle .arrow {
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Flips the utility directional icon on open toggles */
.drawer.right.open .drawer-toggle .arrow {
  transform: rotate(180deg);
}

/* Top Section Title Bar with Close Interactive Node */
.drawer-header {
  padding: 20px 24px 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}



/* Internal Grid Scroller Frame layout */
.drawer-content {
  padding: 0 24px 100px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.drawer.left .drawer-content {
  padding: 0 24px 50px 24px;

}

.drawer-content::-webkit-scrollbar {
  width: 4px;
}

.drawer-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

/* Sub-Sectional Segment Title */
.section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

/* Slider Rows Formats */
.control-group {
  margin-bottom: 18px;
}

.control-group:last-child {
  margin-bottom: 0;
}

.control-group label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.slider-wrapper {
  display: flex;
  align-items: center;
}

.control-group input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: #1e293b;
  height: 6px;
  border-radius: 3px;
  outline: none;
}

/* Digital blue clean flat sliders matches context image */
.control-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-blue-light);
  cursor: pointer;
  transition: background 0.15s ease;
}

.control-group input[type="range"]::-webkit-slider-thumb:hover {
  background: #60a5fa;
}

.sliderValue {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Clean 2-Column Checkbox Grid Matching Image Layout */
.toggle-grid-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 14px;
  column-gap: 16px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.checkbox-container input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #334155;
  border-radius: 4px;
  background-color: transparent;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.checkbox-container input:checked {
  background-color: var(--accent-blue-light);
  border-color: var(--accent-blue-light);
}

.checkbox-container input:checked::before {
  content: "✓";
  font-size: 11px;
  color: #ffffff;
  font-weight: bold;
}

/* Projection Model Segment Control blocks */
.btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.drawer-btn {
  background: transparent;
  border: 1px solid #1e293b;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  padding: 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-btn:hover {
  border-color: #334155;
  color: #ffffff;
}

.drawer-btn.active {
  background: rgba(29, 78, 216, 0.15);
  border-color: var(--accent-blue-light);
  color: #ffffff;
}

/* Diagnostics Cards Metrics Grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-card {
  background: transparent;
  border: 1px solid #1e293b;
  padding: 12px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.stat-label {
  color: var(--text-secondary);
}

.stat-value {
  font-weight: 500;
}

#fpsCounter,
#objectCounter {
  color: var(--accent-emerald);
}

/* Bottom Matrix Data Node Meta links */
.data-credits {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.data-credits a {
  color: #38bdf8;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.data-credits a:hover {
  text-decoration: underline;
}

.data-credits a::after {
  content: "↗";
  font-size: 10px;
}

/* Canvas simulation background content placeholder text */
.app-placeholder {
  padding: 40px;
  color: rgba(255, 255, 255, 0.1);
}

.app-placeholder h1 {
  font-weight: 300;
  letter-spacing: 2px;
}


/* #endregion */



/* ==========================================================================
   UNIFIED MOBILE SCREEN RESPONSIVE CONFIGURATIONS
   ========================================================================== */
@media (max-width: 576px) {

  /* Shared Structural Dimensions */
  .drawer.left,
  .drawer.right {
    top: 60px;
    width: 85vw;
    max-width: 380px;
    height: calc(100vh - 80px);
  }

  /* Left Drawer Specific Rules */
  .drawer.left {
    left: 0;
    right: auto;
    border-radius: 0 12px 12px 0;
    transform: translateX(-100%);
    /* Offscreen to the left */
  }

  /* Right Drawer Specific Rules */
  .drawer.right {
    right: 0;
    left: auto;
    border-radius: 12px 0 0 12px;
    transform: translateX(100%);
    /* Offscreen to the right */
  }

  /* Unified Open State Reset */
  .drawer.left.open,
  .drawer.right.open {
    transform: translateX(0);
    /* Slides cleanly into view */
  }

  /* Shrink Toggles Slightly for Touch Targets */
  .drawer.left .drawer-toggle,
  .drawer.right .drawer-toggle {
    width: 28px;
    height: 90px;
  }
}



/* #region MARK:FEEDBACK */




.demo-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* --- DASHBOARD COMPONENTS --- */
.dashboard-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: 8px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-card h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* --- INTERFACE ACTIONS --- */
.btn-action {
  background-color: transparent;
  color: var(--brand-cyan);
  font-weight: 500;
  border: 1px solid var(--brand-cyan);
  padding: 10px 16px;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.btn-action:hover:not(:disabled) {
  background-color: rgba(0, 240, 255, 0.06);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}

.btn-action:disabled {
  border-color: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 16px;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.04);
}

/* --- ABSOLUTE VIEWPORT MODAL OVERLAY --- */
.modal-overlay-feedback {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(4, 6, 10, 0.75) !important;
  backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999999999999 !important;
  transition: opacity 0.2s ease;
}

.modal-overlay-feedback.hidden {
  display: none !important;
}

.modal-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 24px;
  border-radius: 8px;
  width: 420px;
  max-width: 90%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.modal-box h2 {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
}

/* Dynamic context block styling */
.context-preview {
  font-size: 0.85rem;
  color: var(--brand-cyan);
  margin-bottom: 20px;
  line-height: 1.4;
  background: rgba(0, 240, 255, 0.03);
  padding: 10px 12px;
  border-radius: 4px;
  border-left: 2px solid var(--brand-cyan);
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

select,
textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-main);
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 0.9rem;
  font-family: inherit;
}

select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-cyan);
}

textarea {
  height: 110px;
  resize: vertical;
}

.char-counter {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: -10px;
  margin-bottom: 20px;
  text-align: right;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* --- VIEWPORT GLOBAL TOAST --- */
.toast {
  position: fixed !important;
  top: -100px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 99999999999 !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  transition: top 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.toast.show {
  top: 24px !important;
}

.toast.success {
  border-color: var(--brand-cyan);
}

.toast.success .toast-icon {
  color: var(--brand-cyan);
}

.toast.error {
  border-color: var(--brand-danger);
}

.toast.error .toast-icon {
  color: var(--brand-danger);
}

.spinner {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none !important;
}

/* #endregion */







/* #region MARK: CHAT */




/* --- DESKTOP ENGINE STYLING --- */
.dashboard-container {
  position: absolute;
  top: 120px;
  left: calc(100vw - 420px);
  width: 380px;
  height: 520px;
  min-width: 340px;
  min-height: 400px;
  max-width: 700px;
  max-height: 900px;

  background: linear-gradient(180deg, #040a18 0%, #020612 100%);
  border: 1px solid rgba(0, 168, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 168, 255, 0.05);
  display: none;
  flex-direction: column;
  z-index: 9999999;
  backdrop-filter: blur(12px);

  resize: both;
  overflow: hidden;
}

.dashboard-header {
  height: var(--header-h);
  padding: 0 14px;
  border-bottom: 1px solid rgba(0, 168, 255, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(5, 13, 30, 0.8);
  cursor: move;
  user-select: none;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}

.header-title-set {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

/* 1. Prevent flag and buttons from squishing */
.header-title-set .fi,
.header-title-set button {
  flex-shrink: 0;
  z-index: 2;
}

/* 2. Container holding icon + text window */
.header-title-set h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;

  width: 170px;
  /* Fixed 170px window */
  overflow: hidden;
  /* Clips overflowing text cleanly */
  flex-shrink: 0;

  display: flex;
  align-items: center;
  gap: 3px;
}

.header-title-set h2 svg {
  flex-shrink: 0;
  display: block;
}

/* 3. The marquee text wrapper */
.header-title-set h2 span {
  display: inline-block;
  white-space: nowrap;

  /* Forces browser to measure FULL text string including 'FIRE' */
  box-sizing: content-box;
  padding-right: 30px;
  /* Safety clearance so last word never touches the right edge */

  animation: slideMarquee 8s linear infinite alternate;
}

@keyframes slideMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    /* Shifts the text left until the end of the text (+ padding) is fully shown */
    transform: translateX(calc(-100% + 140px));
  }
}

.status-dot {
  width: 6px;
  height: 6px;
  background-color: var(--neon-green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--neon-green);
}

.toggle-sidebar-btn {
  background: transparent;
  border: 1px solid rgba(0, 168, 255, 0.25);
  color: var(--neon-blue);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.close-dock-btn {
  color: var(--text-muted);
  font-size: 25px;
  cursor: pointer;
  padding: 4px 2px;
  user-select: none;
}

.workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.sidebar-channels {
  width: 80%;
  background: rgba(3, 8, 18, 0.98);
  border-right: 1px solid rgba(0, 168, 255, 0.15);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: width 0.2s ease, opacity 0.15s;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-channels.collapsed {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border-right: none;
}

.sidebar-section-title {
  font-size: 10px;
  font-weight: bold;
  color: var(--neon-blue);
  text-transform: uppercase;
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
}

.channel-card {
  /* Fix box calculation & lock total height */
  box-sizing: border-box;
  height: 45px;
  min-height: 45px;

  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 4px;

  /* Reduce vertical padding so content fits inside 45px */
  padding: 0 8px;

  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.channel-card.active {
  background: rgba(0, 168, 255, 0.08);
  border-color: var(--neon-blue);
}

.channel-name {
  font-size: 11px;
  font-weight: 600;
}

.chat-main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(2, 5, 11, 0.25);
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.date-separator {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 10px;
  margin: 10px 0;
}

.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.date-separator span {
  padding: 0 10px;
}

.msg-row {
  display: flex;
  gap: 10px;
  max-width: 85%;
}

.msg-row.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.user-avatar {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}

/* --- RICH UI IN-LINE DETECTOR PANEL --- */
.msg-row.sent .msg-bubble {
  background: rgba(5, 28, 59, 0.7);
  border-color: rgba(0, 168, 255, 0.25);
}

.telemetry-card {
  background: rgba(4, 10, 24, 0.95);
  border: 1px solid rgba(0, 168, 255, 0.2);
  border-radius: 4px;
  padding: 12px;
  margin-top: 6px;
  min-width: 240px;
}

.telemetry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(43, 74, 114, 0.2);
  padding-bottom: 4px;
}

.telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 0px 0;
  color: var(--text-muted);
}

.telemetry-val {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.telemetry-val.green {
  color: var(--neon-green);
}

.reply-context {
  font-size: 10px;
  color: #8a99ad;
  background: rgba(0, 168, 255, 0.05);
  border-left: 2px solid var(--neon-blue);
  padding: 2px 6px;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.msg-timestamp {
  font-size: 9px;
  color: var(--text-muted);
}

.reply-preview-bar {
  display: none;
  background: rgba(0, 168, 255, 0.06);
  border-top: 1px solid rgba(0, 168, 255, 0.2);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--neon-blue);
  justify-content: space-between;
  align-items: center;
}

.reply-preview-bar button {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
}

#reply-preview-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.chat-input-area {
  padding: 15px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 8px;
}

.input-wrapper {
  flex: 1;
  background: rgba(4, 9, 21, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  display: flex;
  padding: 2px 8px;
}

.chat-input-area input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 0;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
}

.chat-input-area input:focus {
  outline: none;
}

.send-btn {
  background: rgba(0, 168, 255, 0.1);
  border: 1px solid var(--neon-blue);
  color: var(--neon-blue);
  padding: 0 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
}

/* --- MOBILE OVERRIDE CORE (YouTube Sheet Paradigm) --- */
@media (max-width: 768px) {
  .dashboard-container {
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 12px 12px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    resize: none !important;
    display: flex;

    /* Reactive Heights */
    --mobile-height: 62vh;
    height: var(--mobile-height) !important;

    /* Performance & Smooth Animations */
    will-change: transform, opacity;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease,
      visibility 0.4s step-end;

    /* INITIAL / HIDDEN STATE: Pulled fully down off-screen */
    transform: translateY(100%) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .chat-input-area {
    padding: 15px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }

  /* ACTIVE STATE: Raised into view from bottom */
  .dashboard-container.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    /* Raises to default dynamic offset or top position */
    transform: translateY(var(--mobile-translate-y, 0%)) !important;

    /* Instant visibility when triggering open */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease,
      visibility 0s linear;
  }

  .dashboard-container.snapping {
    transition: transform 0.25s cubic-bezier(0.1, 0.9, 0.2, 1), height 0.25s cubic-bezier(0.1, 0.9, 0.2, 1), border-radius 0.15s ease !important;
  }

  .dashboard-container.fullscreen {
    height: 100vh !important;
    border-radius: 0px;
  }

  .dashboard-header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
  }

  .dashboard-header {
    height: calc(var(--header-h) + 6px);
    padding-top: 10px;
    cursor: grab;
    touch-action: none;
    /* Prevents browser scroll interference during gestures */
  }

  .sidebar-channels {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1000;
    width: 75%;
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.8);
  }
}

/* --- NOTIFICATION SIDEBAR COUNTERS --- */
.noti-badge {
  background-color: #ff4a4a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: auto;
  /* Pulls badge tight to the right side edge */
  box-shadow: 0 0 8px rgba(255, 74, 74, 0.4);
  animation: badge-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Pulsing outer borders when messages arrive while minimized on mobile */
.dashboard-container.has-unread-activity {
  border-color: rgba(255, 74, 74, 0.6) !important;
  box-shadow: 0 -5px 25px rgba(255, 74, 74, 0.25) !important;
}

@keyframes badge-pop {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}













.global-badge {
  background: var(--neon-blue);
  color: #000;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--neon-blue);
  transition: all 0.25s ease;
}

.global-badge1 {
  background: var(--neon-blue);
  color: #000;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 1px 2px;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--neon-blue);
  transition: all 0.25s ease;
  position: fixed;
  margin-left: 20;
  visibility: hidden;
}

@media (max-width: 768px) {

  .log-spinner-icon,
  .global-badge1 {
    margin-left: 51;
    font-weight: 700;
    font-size: 10;

  }
}

/* Update your existing .msg-bubble selector with these wrapping properties */
.msg-bubble {
  background: rgba(13, 22, 43, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;

  /* FIXES FOR TEXT OVERFLOW: */
  word-break: break-word;
  /* Breaks massive words or long string paths */
  overflow-wrap: break-word;
  /* Standard constraint for modern browsers */
}

/* ADD THIS NEW SELECTOR to contain the inner flexible column width */
.msg-bubble-wrapper {
  flex: 1;
  min-width: 0;
  /* Forces the container to shrink correctly inside flex rows */
  display: flex;
  flex-direction: column;

}


/* News Message Highlighting Container Rules */
.msg-bubble.news-alert {
  background: rgba(245, 158, 11, 0.12);
  /* Subtle transparent tactical amber background */
  border: 1px dashed #f59e0b;
  /* Golden dashed status indicator */
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
  /* Neon glow effect */
}

/* Custom header layout inside the bubble */
.news-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #f59e0b;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
  font-family: monospace;
}

.news-header::before {
  content: "⚡";
}

/* #endregion */





/* Container styling */
.mini-list-item {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease-in-out;
  background: none;
}

/* Sprite clipping window static styles */
.sprite-clip {
  overflow: hidden;
  position: relative;
  transform-origin: center center;
  flex-shrink: 0;
}

/* Spritesheet image static styles */
.sprite-img {
  position: absolute;
  max-width: none;
  /* Prevents the image from interfering with container pointer events */
  pointer-events: none; 
}

/* #region MARK: INFOBOX */



/* Fullscreen Lightbox Overlay */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
  /* Ensure it stays above everything */
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}

.lightbox-overlay.show {
  opacity: 1;
}

/* Lightbox Image */
.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.2s ease;
  cursor: zoom-in;
  user-select: none;
}

/* Zoomed-in state */
.lightbox-img.zoomed {
  transform: scale(2);
  /* Adjust zoom level here */
  cursor: zoom-out;
}

/* Close Button */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
}

/* --- BASE CONTAINER (MOBILE FIRST VIEW) --- */
#infoBox.news-container {
  width: 100%;
  background-color: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 2, 8, 0.85);
  display: flex;
  flex-direction: column;
  /* ⚡ THE UNRESTRICED MOBILE SCROLL KIT ⚡ */
  max-height: 100%;
  /* Clamps height so it actually creates a viewport to scroll inside */
  /* Forces scrollbar allocation if elements overflow */
  -webkit-overflow-scrolling: touch;
  /* Native iOS/Android momentum physics speed boost */
  pointer-events: auto !important;
  /* Forces mobile browsers to process touches directly here */
  position: fixed;
  padding-bottom: 100px;
  z-index: 9999998;
  inset: 0;
  /* Sets top: 0, right: 0, bottom: 0, left: 0 */
  margin: auto;
  /* Automatically centers within available space */



  /* 1. HIDE SCROLLBAR FOR FIREFOX & IE/EDGE */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  /* Preserve scrolling capability */
  overflow-y: auto !important;
}

/* 2. HIDE SCROLLBAR FOR WEBKIT (CHROME, SAFARI, OPERA) */
#infoBox.news-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#infoBox.hidden {
  display: none !important;
}

/* Mobile Header Layout */
.mobile-only-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);

  /* 📌 THE STICKY HEADER FIX --- */
  position: sticky;
  top: -5;
  background-color: var(--bg-main);
  /* Prevents text from bleeding behind it while scrolling */
  z-index: 10;
  /* Keeps it layered safely above scrolling images/carousels */
}

.mobile-only-header h2 {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--text-primary);
  font-weight: 600;
}

.top-badges-row {
  display: none;
}

.article-mid-split {
  display: flex;
  flex-direction: column;
}

/* Multiple Media Slide Viewport */
#mediaContainer.featured-media {
  position: relative;
  width: 100%;
  height: 220px;
  order: 1;
  overflow: hidden;

}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
  min-width: 100%;
  width: 100%;
  height: 100%;

}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maritime-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 136, 255, 0.1);
  border: 1px solid var(--flat-blue);
  color: var(--flat-blue);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  z-index: 5;
}

/* Carousel Controls */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(2, 11, 20, 0.7);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  z-index: 5;
  transition: all 0.2s;
}

.carousel-nav-btn:hover {
  background: var(--flat-blue);
  border-color: var(--flat-blue);
}

.carousel-nav-btn.prev {
  left: 10px;
}

.carousel-nav-btn.next {
  right: 10px;
}

.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

.carousel-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(226, 241, 255, 0.25);
  cursor: pointer;
  transition: background 0.2s;
}

.carousel-dots .dot.active {
  background: var(--flat-blue);
}

.article-title {
  font-size: 20px;
  line-height: 1.3;
  padding: 20px 20px 10px 20px;
  order: 2;

}

.article-meta-row {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 0 20px 15px 20px;
  order: 3;
}



.article-left-text {
  display: flex;
  flex-direction: column;
  order: 4;
}

.article-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 0 20px 20px 20px;
}

/* Mobile Context Dropdown Layout */
.dropdown-section {
  padding: 0 20px 20px 20px;
  position: relative;

}

.dropdown .dropbtn {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 12px 15px;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;

}

.dropdown-content {
  display: none;
  background: #041629;
  border: 1px solid var(--flat-blue);
  border-radius: 6px;
  padding: 8px;
  margin-top: 4px;
  max-height: 280px;
  /* Caps height so it doesn't push down the page layout */
  overflow-y: auto;
  /* Injects the vertical scroll lane instantly when items overflow */
  overflow-x: hidden;
  /* Prevents horizontal layout shaking on small displays */
  box-sizing: border-box;
  /* Secures inner items from bleeding past borders */

  /* Optional: Enables ultra-smooth kinetic swipe response on mobile webkit browsers */
  -webkit-overflow-scrolling: touch;
}

.dropdown-content a {
  display: block;
  color: var(--flat-blue-hover);
  font-size: 13px;
  padding: 6px 8px;
  text-decoration: none;
  border-radius: 4px;
}

.dropdown-content a:hover {
  background: rgba(0, 136, 255, 0.1);
}

#dialogClusterHost.action-buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 20px 20px 20px;
  order: 5;
}

.action-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  height: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: inherit;
  cursor: pointer;
}

.action-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-btn .btn-text {
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.3px;
}

.share-btn {
  color: var(--flat-blue);
  border-color: rgba(0, 136, 255, 0.2);
}

.global-chat-btn {
  color: var(--flat-blue-hover);
  border-color: rgba(51, 163, 255, 0.2);
}

.local-chat-btn {
  color: var(--flat-blue);
  border-color: rgba(0, 136, 255, 0.2);
}

.report-btn {
  color: var(--flat-blue-dark);
  border-color: rgba(0, 85, 204, 0.3);
}

.mobile-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 0 20px 20px 20px;
  order: 6;
}

.sidebar-section {
  padding: 0 20px 120px 20px;
  order: 7;
}

.sidebar-header h3 {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: bold;
  letter-spacing: 0.5px;
}

.sidebar-header .minimize-toggle-btn {
  display: none;
}

.articles-stack {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-top: 12px;
}

.articles-stack::-webkit-scrollbar {
  display: none;
}

.feed-card {
  min-width: 145px;
  width: 145px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  gap: 8px;
  cursor: pointer;
  height: 150px;
  align-items: center;
}

.feed-thumb {
  width: 100%;
  height: 75px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: auto;
}

.feed-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feed-content h4 {
  font-size: 11px;
  font-weight: normal;
  line-height: 1.3;
  height: 30px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Specifies exactly 3 lines maximum */
  -webkit-box-orient: vertical;
  /* Required orientation for line-clamp to work */
  margin-top: 0;
}

.feed-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: var(--text-secondary);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--flat-blue);
}

.view-all-footer-btn {
  display: none;
}


/* ==========================================================================
       OPTIMIZED DESKTOP LAYOUT (DYNAMIC TWO-DIMENSIONAL LOCK ENGINE)
       ========================================================================== */
@media (min-width: 850px) {
  #infoBox.news-container {
    width: 900px;
    height: 500px;
    max-width: 100%;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    padding: 24px;
    gap: 24px;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  }

  #infoBox.news-container.sidebar-collapsed {
    width: 600px;
  }

  .main-article-wrapper {
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 100%;
    flex-shrink: 0;
  }

  .mobile-only-header {
    display: none;
  }

  .top-badges-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    height: 28px;
  }

  .left-badges-group {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .global-news-badge {
    background: rgba(0, 136, 255, 0.04);
    border: 1px solid rgba(0, 136, 255, 0.18);
    color: var(--flat-blue);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
  }

  .desktop-maritime-badge {
    background: rgba(0, 255, 162, 0.04);
    border: 1px solid rgba(0, 255, 162, 0.18);
    color: var(--accent-green);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
  }

  .article-mid-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    margin-bottom: 16px;
    flex: 1;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }

  .article-title {
    font-size: 24px;
    line-height: 1.25;
    padding: 0;
    grid-column: span 2;
    order: unset;
    align-self: start;
    min-height: 60px;
  }

  .article-left-text {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    order: unset;
    min-height: 0;
    position: relative;
    /* Context parent for the absolute dropdown system */
    height: 230px;
  }

  .article-description {
    padding: 0;
    font-size: 14px;
    line-height: 1.55;
    overflow-y: auto;
    flex: 1;
  }

  .article-description::-webkit-scrollbar {
    width: 4px;
  }

  .article-description::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
  }

  /* Desktop Dropdown Overlay Patch Architecture */
  .dropdown-section {
    padding: 0;
    position: static;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    bottom: 35px;
    /* Floats perfectly upwards above metadata lane boundaries */
    left: 0;
    width: 100%;
    z-index: 99;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  }

  .article-meta-row {
    padding: 0;
    margin-top: auto;
    order: unset;
  }

  #mediaContainer.featured-media {
    height: 100%;
    max-height: 260px;
    border-radius: 6px;
    overflow: hidden;
    order: unset;
  }

  #mediaContainer.featured-media .maritime-badge {
    display: none;
  }

  #dialogClusterHost.action-buttons-grid {
    padding: 16px 0 0 0;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    order: unset;
    gap: 12px;
    height: 76px;
  }

  .action-btn {
    height: 60px;
    flex-direction: row;
    gap: 10px;
    transition: all 0.2s ease;
  }

  .action-btn:hover {
    background: rgba(0, 136, 255, 0.05);
    border-color: var(--flat-blue-hover);
    color: var(--flat-blue-hover);
  }

  .action-btn svg {
    width: 16px;
    height: 16px;
  }

  .action-btn .btn-text {
    font-size: 10px;
  }

  .mobile-divider {
    display: none;
  }

  /* --- DRAWER SIDEBAR PANEL SYSTEM --- */
  .sidebar-section {
    width: 300px;
    height: 100%;
    border-left: 1px solid var(--border-color);
    padding: 0 0 0 15px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    order: unset;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.2s ease,
      border-color 0.25s ease;
    overflow: hidden;
  }

  #infoBox.news-container.sidebar-collapsed .sidebar-section {
    width: 0px;
    padding-left: 0;
    opacity: 0;
    border-left-color: transparent;
  }

  .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    height: 28px;
  }

  .sidebar-header h3 {
    font-size: 13px;
    color: var(--flat-blue);
    letter-spacing: 1px;
  }

  .minimize-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
  }

  .minimize-toggle-btn:hover {
    background: rgba(0, 136, 255, 0.08);
    color: var(--flat-blue);
    border-color: var(--flat-blue);
  }

  .articles-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 0;
    overflow-y: auto;
    flex: 1;
  }

  .articles-stack::-webkit-scrollbar {
    width: 4px;
  }

  .articles-stack::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
  }

  .feed-card {
    flex-direction: row;
    padding: 10px;
    gap: 12px;
    background: #010a12;
    border-color: #08223a;
    flex-shrink: 0;
    height: 80px;

    width: 223px;
  }

  .feed-card.active-segment {
    border-color: #124c7e;
    background: #061c30;
  }

  .feed-thumb {
    width: 75px;
    height: 65px;
  }

  .feed-content {
    flex: 1;
  }

  .feed-content h4 {
    font-size: 12px;
    height: auto;
    margin-top: 0;

    /* --- FORCE MAX 3 LINES WITH ELLIPSIS --- */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Specifies exactly 3 lines maximum */
    -webkit-box-orient: vertical;
    /* Required orientation for line-clamp to work */
    overflow: hidden;
  }

  .view-all-footer-btn {
    display: flex;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
    transition: all 0.2s ease;
  }

  .view-all-footer-btn:hover {
    border-color: var(--flat-blue);
    color: var(--text-primary);
  }
}



/* --- REFACTORED DROPDOWN INTERNAL GRID --- */
.dropdown-content {
  display: none;
  background: #041629;
  border: 1px solid var(--flat-blue);
  border-radius: 6px;
  padding: 6px;
  margin-top: 4px;
}

/* Row wrapper for each source item */
.dropdown-content .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(11, 46, 79, 0.6);
  gap: 12px;
}

.dropdown-content .item:last-child {
  border-bottom: none;
}

/* Left alignment side (Favicon + Text Name) */
.dropdown-content .source-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-content .source-left img {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
}

/* Right alignment action buttons wrapper */
.dropdown-content .source-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Flat blue mini buttons */
.dropdown-content .source-actions button {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--flat-blue-hover);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-content .source-actions button:hover {
  background: rgba(0, 136, 255, 0.1);
  border-color: var(--flat-blue-hover);
  color: var(--text-primary);
}

/* Desktop positioning safety */
@media (min-width: 850px) {
  .dropdown-content {
    display: none;
    position: absolute;
    bottom: 35px;
    /* Floats perfectly upwards above metadata lanes */
    left: 0;
    width: 100%;
    z-index: 99;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
  }
}

/* --- FLAT TECH CLOSE BUTTON COMPONENT --- */
.close-panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.close-panel-btn:hover {
  background: rgba(255, 59, 105, 0.1);
  /* Soft transparent red indicator glow */
  border-color: #ff3b69;
  /* Sharp warning line */
  color: #ff3b69;
  /* Red alert text string indicator */
}



/* --- MOBILE CLOSE BUTTON TRIGGER --- */
.mobile-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.mobile-close-btn:hover,
.mobile-close-btn:active {
  color: #ff3b69;
  /* Highlights red when pressed on touch screens */
}

.article-meta-row {
  display: flex;
  align-items: center;
  gap: 13px;
  /* Adjust spacing between sections as needed */
  font-family: sans-serif;
  color: #555;
}

.article-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Adjust spacing between icon and text */
}

.meta-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}


.verified-badge {
  /* Organic, grassroots green */
  font-weight: bold;

  background: rgba(0, 255, 162, 0.08);
  color: var(--accent-green);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 162, 0.2);
}



.official-badge {
  /* Authoritative deep blue */
  font-weight: bold;

  background: rgba(0, 255, 162, 0.08);
  color: var(--flat-blue-dark);
  padding: 2px 1px 2px 1px;
  border-radius: 4px;
  border: 1px solid rgba(47, 0, 255, 0.2);
}

/* 1. Setup the container positioning */
.tooltip-container {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* 2. Build the tooltip box style using pseudo-elements */
.tooltip-container::after {
  content: attr(data-tooltip);
  /* Pulls text directly from HTML attribute */
  position: absolute;
  bottom: 135%;
  /* Position right above the badge */
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background-color: #1e293b;
  /* Dark slate background */
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  /* Prevents awkward text wrapping */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  opacity: 0;
  pointer-events: none;
  /* Avoids mouse interaction bugs */
  transition: all 0.15s ease-in-out;
  z-index: 10;
  left: -20;
  /* Align with the right edge of the badge */
  transform: scale(0.9);
  /* Removed the left 50% shift */
}

/* 3. Build the little downward pointer arrow */
.tooltip-container::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #1e293b transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s ease-in-out;
  z-index: 10;
}

/* 4. Trigger hover effects smoothly */
.tooltip-container:hover::after,
.tooltip-container:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}



/* #endregion */







/* #region MARK: TOOLBAR */
/* --- DESKTOP TOOLBAR SLIDE ANIMATION --- */
.toolbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1320px;
  background: rgba(2, 12, 28, 0.4);
  padding: 10px 20px;
  border: 1px solid #0a4775;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 110, 255, 0.15), inset 0 0 10px rgba(0, 110, 255, 0.1);
  position: fixed;
  top: 3px;
  left: 50%;
  user-select: none;
  z-index: 999999;

  /* Smooth Transition Properties */
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;

  /* DESKTOP INITIAL HIDDEN/OFFSCREEN STATE (Slid up and hidden) */
  opacity: 0;
  transform: translate(-50%, -150%);
  pointer-events: none;
}

/* DESKTOP ANIMATED VISIBLE STATE */
.toolbar-container.is-animated {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Futuristic bracket edges (Desktop default styles) */
.toolbar-container::before,
.toolbar-container::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 100%;
  border: 2px solid #0099ff;
  top: -2px;
  border-radius: 6px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.toolbar-container::before {
  left: -2px;
  border-right: none;
}

.toolbar-container::after {
  right: -2px;
  border-left: none;
}

/* Button Groups */
.controls-left,
.controls-right {
  display: flex;
  gap: 3px;
}

/* Reusable Square Desktop Buttons */
.nav-btn {
  background: rgba(4, 23, 49, 0.6);
  border: 1px solid #105385;
  border-radius: 6px;
  color: #51a4e7;
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn:hover {
  transform: translateY(-2px) scale(1.06);
  background: rgba(0, 110, 255, 0.15);
  border-color: #0099ff;
  box-shadow: 0 0 12px rgba(0, 153, 255, 0.4);
}

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

.nav-btn svg {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
}

.nav-btn span {
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
}

.all-news-btn {
  width: 70px;
}

#tickerFilterBtn,
.nav-btn.feedback,
.nav-btn.conflicts,
.nav-btn.confreel,
.cinematic-btn {
  width: 66px;
  border-color: #1168a8;
}

.cinematic-btn {
display: none;
}

/* Injected Expand Controller Hidden on Desktop */
.expand-btn {
  display: none;
}

/* Center Ticker Container */
.news-ticker-container {
  flex: 1;
  display: flex;
  align-items: center;
  height: 38px;
  margin: 0 20px;
  background: rgba(1, 14, 34, 0.8);
  border: 1px solid #0b3e64;
  border-radius: 4px;
  padding: 0 10px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 8px rgba(0, 110, 255, 0.2);
}

.news-ticker-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: #38b6ff;
  box-shadow: 0 0 6px #38b6ff;
}

.breaking-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #610c11;
  border: 1px solid #b31c24;
  color: #ff4d52;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  margin-right: 15px;
  flex-shrink: 0;
}

.breaking-tag .pulse-dot {
  position: relative;
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #ff4d52;
  border-radius: 50%;
}

.breaking-tag .pulse-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff4d52;
  border-radius: 50%;
  animation: radarPulse 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: center;
}

@keyframes radarPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

.ticker-wrapper {
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: grab;
  height: 100%;
}

.ticker-text {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #c5d7e8;
  font-size: 13px;
  will-change: transform;
  font-weight: 600;
}

.ticker-dot {
  width: 5px;
  height: 5px;
  background-color: #51a4e7;
  border-radius: 50%;
  margin: 0 15px;
  display: inline-block;
}

.clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgba(0, 170, 255, 0.3);
  padding-right: 5px;
  margin-right: 15px;
  width: 100px;
}

.date-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8ab4f8;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.date-row svg {
  width: 12px;
  height: 12px;
  fill: #00aaff;
}

.time-row {
  text-align: center;
}

.time-row span.tz {
  font-size: 10px;
  color: #00aaff;
  margin-left: 2px;
}

.ticker-filter-group {
  position: relative;
  display: inline-block;
}

.ticker-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  background: #020c1c;
  border: 1px solid #105385;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 110, 255, 0.15);
  overflow: hidden;
  z-index: 999999;
}

.ticker-dropdown-panel.show {
  display: block;
}

.dropdown-item {
  padding: 10px 14px;
  color: #c5d7e8;
  font-family: monospace;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.dropdown-item:hover {
  background: rgba(0, 110, 255, 0.2);
  color: #ffffff;
}

/* ==========================================================================
       MOBILE RESPONSIVE CHANGES (NON-DESTRUCTIVE 2-ROW GRID OVERRIDE)
       ========================================================================== */
@media (max-width: 768px) {

  /* Sticky Top Ticker Bar remains identical */
  .news-ticker-container {
    position: fixed;
    top: -40px;
    left: 0;
    width: 100%;
    margin: 0;
    height: 40px;
    background: rgba(1, 14, 34, 0.95);
    border: none;
    border-bottom: 1px solid #0b3e64;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 1000;
  }

  .news-ticker-container::after {
    width: 60px;
    height: 1px;
  }

  /* Hide Clock Container on mobile completely */
  .clock-container {
    display: none !important;
  }

  /* Convert parent toolbar to dynamic CSS grid layout */
  .toolbar-container {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 6px 14px;
    background: rgba(2, 12, 28, 0.92);
    border: none;
    border-bottom: 1px solid #0a4775;
    border-radius: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    z-index: 999;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 0px;
    column-gap: 4px;

    /* --- FIX 1: Transition ONLY opacity & transform (NOT 'all') --- */
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.3s ease;

    /* --- FIX 2: MOBILE INITIAL OFFSCREEN STATE --- */
    opacity: 0;
    /* Pull strictly up on Y-axis. Do NOT use translateX(-50%) */
    transform: translateY(-150%) translateX(0);
    pointer-events: none;
  }

  /* --- FIX 3: MOBILE ANIMATED VISIBLE STATE --- */
  .toolbar-container.is-animated {
    opacity: 1;
    transform: translateY(0) translateX(0);
    pointer-events: auto;
  }

  .toolbar-container::before,
  .toolbar-container::after {
    height: calc(100% - 6px);
    top: 3px;
    border-width: 2px;
    border-color: #0099ff;
  }

  .toolbar-container::before {
    left: 4px;
    border-right: none;
    border-radius: 4px 0 0 4px;
  }

  .toolbar-container::after {
    right: 4px;
    border-left: none;
    border-radius: 0 4px 4px 0;
  }

  /* Flatten nested wrapping layout divs completely on mobile */
  .controls-left,
  .controls-right {
    display: contents;
  }

  /* Force display the dynamic expander switch */
  .expand-btn {
    display: flex !important;
    order: 4;
  }

  /* --- ROW 1 EXPLICIT GRID ORDERS --- */
  #logs {
    order: 1;
  }

  #chat {
    order: 2;
  }

  .nav-btn.conflicts {
    order: 3;
  }

  .nav-btn.feedback {
    order: 7;
  }

  .nav-btn.confreel {
    order: 8;
  }

  .ticker-filter-group {
    order: 9;
  }

  /* --- ROW 2 EXPLICIT GRID ORDERS (Hidden natively) --- */
  #volBtn {
    order: 6;
  }

  #btnRotate {
    order: 5;
  }

  .cinematic-btn {
    order: 10;
    display: none;
  }

  /* Target second row elements directly to inject visibility collapse rules */
  .ticker-filter-group,
  .nav-btn.confreel,
  #volBtn,
  #btnRotate,
  #feedback,
  .cinematic-btn {
    max-height: 0;
    padding: 0;
    margin: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin-top 0.25s ease;
  }

  /* --- REVEAL MECHANICS WHEN CONTAINER IS ACTIVE --- */
  .toolbar-container.expanded {
    row-gap: 4px;
  }

  .toolbar-container.expanded .ticker-filter-group,
  .toolbar-container.expanded .nav-btn.confreel,
  .toolbar-container.expanded #volBtn,
  .toolbar-container.expanded #btnRotate,
  .toolbar-container.expanded #feedback,
  .toolbar-container.expanded .cinematic-btn {
    max-height: 32px;
    opacity: 1;
    pointer-events: auto;
    border-width: 1px;
    padding: 0 2px;
    margin-top: 2px;
  }

  /* Global mobile design overwrites for responsive layout buttons */
  .nav-btn,
  .nav-btn.feedback,
  .nav-btn.conflicts,
  .nav-btn.confreel,
  .nav-btn.all-news-btn,
  .nav-btn.cinematic-btn,
  .ticker-filter-group {
    width: 100% !important;
    height: 32px;
    flex-direction: row;
    justify-content: center;
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(4, 23, 49, 0.5);
    border-color: #0b3e64;
  }

  .nav-btn svg {
    width: 16px;
    height: 16px;
    margin-bottom: 0;
    margin-right: 2px;
  }

  .nav-btn span {
    font-size: 8px;
    letter-spacing: 0px;
    font-weight: 500;
    white-space: nowrap;
  }

  .ticker-dropdown-panel {
    position: fixed;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 340px;
  }
}

#tickerDropdownPanel {
  /* Restrict the maximum height (adjust 200px to whatever fits your design) */
  max-height: 200px;

  /* Enable vertical scrolling only when content overflows */
  overflow-y: auto;

  /* Optional: Prevents horizontal scrollbars if text wraps tightly */
  overflow-x: hidden;

  /* Optional smooth scrolling behavior for a premium feel */
  scroll-behavior: smooth;
}

/* Optional: Customizing the scrollbar track and thumb to look sleeker */
#tickerDropdownPanel::-webkit-scrollbar {
  width: 6px;
}

#tickerDropdownPanel::-webkit-scrollbar-track {
  background: transparent;
}

#tickerDropdownPanel::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 4px;
}

#tickerDropdownPanel::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* #endregion */






/* #region MARK: SWIPER */
/* ==========================================================================
   GLOBAL SYSTEM OVERLAYS & SCROLL UTILITIES
   ========================================================================== */

/* ==========================================================================
   COMPOSITED DUAL-LAYERING RENDERING PATHS (ICONS/FALLBACKS)
   ========================================================================== */
   
.card-image-blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: center -100;
  object-fit: cover;
  display: block !important;
  opacity: 0.85;
  z-index: 1;

  /* Pre-rendered layout filters save massive frame budget metrics */
  filter: blur(4px) brightness(0.45);
  transform: scale(1.15) translate3d(0, 0, 0);

  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-image-fg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transform: translate3d(0, 0, 0);
}

.card-image-centered {
  width: auto;
  height: auto;
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
  border-radius: 16px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.fallback-icon-style {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
}






.deck-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: #040810;
  box-sizing: border-box;
  overflow: hidden;

  /* Centered Modal Overlay Bounds for Desktop */
  width: 90%;
  max-width: 1200px;
  height: 80%;
  max-height: 620px;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.15);
}

/* Mobile Screen Bounds Override */
@media (max-width: 768px) {
  .deck-container {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    border: none;
  }
}

.deck-hud-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 12px 24px;
  background: #040810;
  box-sizing: border-box;
  z-index: 10;
  flex-shrink: 0;
}

.deck-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
}

.deck-header-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0;
  text-align: center;
  flex: 1;
}

#deck-menu-hamburger {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

#deck-menu-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}

#deck-close,
#deck-close-clashlist {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}

#deck-close:hover {
  color: #ffffff;
}

.deck-search-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.deck-search-container .search-icon {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.deck-search-container .filter-icon {
  position: absolute;
  right: 16px;
  width: 18px;
  height: 18px;
  color: #00ccff;
  cursor: pointer;
}

#deck-search {
  width: 100%;
  background: rgba(7, 13, 25, 0.5);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 8px;
  padding: 12px 46px 12px 46px;
  box-sizing: border-box;
  font-size: 0.95rem;
  color: #ffffff;
  outline: none;
}

/* ==========================================================================
   VIEWPORT SCROLL MECHANICS
   ========================================================================== */
.deck-viewport {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.swiper-wrapper-track {
  display: flex;
  box-sizing: border-box;
}

.virtual-card-pool-container {
  display: flex;
  box-sizing: border-box;
}

/* Common Card Rules */
.card-slide {
  background: #070d19;
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.card-media-side {
  position: relative;
  overflow: hidden;
}

.card-image-container {
  width: 100%;
  height: 100%;
}

.full-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  background: rgba(4, 8, 16, 0.75);
  border: 1px solid currentColor;
}

@media (max-width: 769px) {
  .card-tag {
    left: 0px;
    padding: 5px 5px 5px 5px;
    border-radius: 2px;

  }

}

/* Dynamic Asset Category Map */
.tag-category-conflict {
  color: #00ffcc;
}

.tag-category-economic {
  color: #00ccff;
}

.tag-category-cyber {
  color: #00ffaa;
}

.tag-category-humanitarian {
  color: #00e5ff;
}

.card-content-side {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.card-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card-title {
  color: #ffffff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-kebab-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.card-summary {
  color: rgba(255, 255, 255, 0.5);
  margin: 8px 0 auto 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

.card-date-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.5);
}

.calendar-icon {
  width: 14px;
  height: 14px;
}

.card-date-text {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.card-bookmark-btn {
  background: transparent;
  border: none;
  color: #00ccff;
  width: 16px;
  height: 16px;
  padding: 0;
  cursor: pointer;
}

/* ==========================================================================
   DESKTOP VARIANT (HORIZONTAL SCROLL ROW Layout)
   ========================================================================== */
@media (min-width: 769px) {
  .deck-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 24px 0 !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;



    overflow-anchor: none !important;
    scroll-snap-type: none !important;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Structural wrapper hosting layout track geometry */
  .swiper-wrapper-track {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    /* Replaced max-content to prevent rendering context dropouts */
    transform: translateZ(0);
    will-change: transform;
  }

  .virtual-card-pool-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    /* Aligned with JS dynamic layout geometry (CARD_GAP = 20) */
  }

  /* Permanent start & end padding bumpers that never scroll away */
  .swiper-wrapper-track::before {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    flex-shrink: 0 !important;
  }

  .swiper-wrapper-track::after {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    flex-shrink: 0 !important;
  }

  .card-slide {
    width: 290px !important;
    /* Aligned with JS virtualization constants (CARD_WIDTH = 300) */
    height: 410px !important;
    flex-shrink: 0 !important;
    transition: border-color 0.2s;
    cursor: grab;

  }

  .card-slide:hover {
    border-color: #00ccff !important;
  }

  .card-media-side {
    width: 100%;
    height: 210px;
    flex-shrink: 0;
  }

  .card-content-side {
    width: 100%;
    height: 270px;
    padding: 20px;
    justify-content: space-between;
  }

  .card-title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .card-summary {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .deck-pagination-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }

  .dot {
    width: 24px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
  }

  .dot.active {
    background: #00ccff;
  }
}

/* ==========================================================================
   DESKTOP CONTROL BUTTON CONTROLLER (LAYOUT MATRIX LAYER)
   ========================================================================== */
@media (min-width: 769px) {
  .deck-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex !important;
    justify-content: space-between;
    pointer-events: none;
    /* Passes clicks through container background */
    padding: 0 16px;
    box-sizing: border-box;
    transform: translateY(-50%);
    z-index: 90;
    /* Keeps controls above cards */
  }

  .deck-nav-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(4, 8, 16, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #00ccff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    /* Restores clickability on the buttons */
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    padding: 0 !important;
  }

  .deck-nav-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
    /* Inherits text color on hover */
    stroke: currentColor;
    transition: transform 0.2s ease;
  }

  .deck-nav-btn:hover {
    background: #00ccff !important;
    border-color: #00ccff !important;
    color: #040810 !important;
  }

  #deck-nav-left:hover svg {
    transform: translateX(-2px);
  }

  #deck-nav-right:hover svg {
    transform: translateX(2px);
  }
}

/* ==========================================================================
   MOBILE VARIANT (VERTICAL SCROLL LIST Layout)
   ========================================================================== */
@media (max-width: 768px) {
  .deck-viewport {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 16px 200px 16px;
  }

  .swiper-wrapper-track {
    display: block !important;
    width: 100% !important;
    transform: none !important;
  }

  .virtual-card-pool-container {
    flex-direction: column !important;
    gap: 16px;
    width: 100% !important;
  }

  .card-slide {
    flex-direction: row !important;
    width: 100% !important;
    height: 160px !important;
  }

  .card-media-side {
    width: 40%;
    height: 100%;
    flex-shrink: 0;
  }

  .card-content-side {
    width: 60%;
    padding: 14px;
    justify-content: space-between;
  }

  .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .card-summary {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .deck-controls,
  .deck-pagination-dots,
  .deck-controls-desktop {
    display: none !important;
  }
}

.deck-container.hidden-deck {
  display: none !important;
}

/* #endregion */






/* #region MARK: PANELS */





.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 4, 8, 0.75);
  backdrop-filter: blur(8px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.cyber-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #070d19;
  border: 1px solid #2563eb;
  border-bottom: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -10px 35px rgba(37, 99, 235, 0.25);
  z-index: 2001;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  box-sizing: border-box;
  max-height: 90vh;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.cyber-modal.is-active {
  transform: translateY(0);
}


.card-header-label {
  display: flex;
  align-items: end;
}

.flag-box {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid #2563eb;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
}

.card-label1 {
  display: flex;
  align-items: center;
}



.pulse-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
}



.close-panel {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s;
}

.close-panel:hover {
  color: var(--text-red);
}

.modal-body {
  overflow-y: auto;
  padding-bottom: 50px;
}

/* Modal Grid & Dashboard Elements Layout */
.cyber-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cyber-grid .full-width {
  grid-column: span 2;
}




.cyber-card {
  background: rgba(13, 22, 38, 0.85);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90px;
  position: relative;
  transition: box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out;
  box-sizing: border-box;
}

.cyber-card.highlight-focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), inset 0 0 10px rgba(59, 130, 246, 0.1);
}

.card-label {
  font-size: 10px;
  color: var(--text-blue);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

.card-main {
  font-size: 22px;
  font-weight: 700;
}

.card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}





/* ==========================================================================
       DUMMY INTEL FEED MATRIX STYLES
       ========================================================================== */
.news-feed-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px dashed rgba(0, 191, 255, 0.2);
  padding-top: 12px;
}

.news-card-item {
  display: flex;
  gap: 12px;
  background: rgba(4, 10, 20, 0.7);
  border: 1px solid rgba(43, 74, 114, 0.25);
  border-radius: 4px;
  padding: 10px;
  transition: background 0.2s, border-color 0.2s;
}

.news-card-item:hover {
  background: rgba(6, 15, 30, 0.9);
  border-color: rgba(0, 191, 255, 0.4);
}

/* CSS Embedded Placeholder Graphic Block */
.news-image-placeholder {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 3px;
  background: #0a1426;
  border: 1px dashed rgba(0, 191, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 191, 255, 0.3);
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.news-image-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 48%, rgba(0, 191, 255, 0.05) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(0, 191, 255, 0.05) 50%, transparent 52%);
  background-size: 8px 8px;
}

.news-content-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.news-meta-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: monospace;
  font-size: 9px;
  margin-bottom: 2px;
}

.news-tag {
  color: var(--text-orange);
  font-weight: bold;
}

.news-time {
  color: var(--text-muted);
}

.news-headline {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-summary {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive Scaling Matrix */
@media (min-width: 992px) {
  .cyber-modal {
    max-width: 800px;

    left: 50%;
    bottom: auto;
    top: 52%;
    transform: translate(-50%, -45%) scale(0.95);
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }

  .cyber-modal.is-active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
  }
}

/* Utility Inside Badges and Lists */
.choke-details-block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 8px;
  padding: 10px;
  background: rgba(4, 8, 17, 0.5);
  border-radius: 4px;
  margin-top: 6px;
}

.risk-high {
  color: var(--text-red) !important;
}

.risk-low {
  color: var(--pulse-green) !important;
}

.status-pill {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
}

.status-pill.low {
  background: rgba(0, 230, 118, 0.15);
  color: var(--pulse-green);
}

.status-delayed {
  background: rgba(255, 145, 0, 0.15) !important;
  color: var(--danger-yellow) !important;
  border: 1px solid rgba(255, 145, 0, 0.3);
}

.accordion-row {
  border: 1px solid rgba(43, 74, 114, 0.2);
  border-radius: 4px;
  margin-bottom: 6px;
  background: rgba(5, 12, 23, 0.4);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

.title-text {
  font-size: 12px;
  font-weight: 600;
}

/* Compact Box Setup */
.fade-scroll-wrapper {
  position: relative;
  width: 100%;
}

.fade-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  background: linear-gradient(to right, rgba(10, 20, 38, 0) 0%, rgba(10, 20, 38, 0.95) 100%);
  pointer-events: none;
  z-index: 2;
}

.choke-scroll-container {
  display: flex;
  gap: 0px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: smooth;
}

.choke-scroll-container::-webkit-scrollbar {
  display: none;
}

.choke-scroll-container:active {
  cursor: grabbing;
}

.compact-panel {
  width: 325px;
  height: 245px;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.compact-panel:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(43, 74, 114, 0.2);
  padding-bottom: 4px;
}

.title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.status {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-red);
  text-transform: uppercase;
  background: rgba(255, 59, 59, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 59, 59, 0.25);
  margin-left: auto;

}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 0px 0;
}

.box {
  background: rgba(5, 12, 23, 0.6);
  border: 1px solid rgba(43, 74, 114, 0.15);
  border-radius: 4px;
  padding: 3px 4px;
  box-sizing: border-box;
  cursor: pointer;

}

.box:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);

}

.label {
  font-size: 8.5px;
  color: var(--text-blue);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1px;
}

.val {
  font-size: 14px;
  font-weight: 700;
}

.sub {
  font-size: 8.5px;
  color: var(--text-muted);
}

.choke-section {
  background: rgba(5, 12, 23, 0.6);
  border: 1px solid rgba(43, 74, 114, 0.15);
  border-radius: 4px;
  padding: 6px;
}

.choke-section:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);

}

.choke-title {
  font-size: 8.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.choke-gate-node {
  flex: 0 0 115px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aperture-reticle-wrapper {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aperture-bracket-left,
.aperture-bracket-right {
  position: absolute;
  width: 4px;
  height: 100%;
  /* Fallback to pulse-green if no data-status matches yet */
  border: 1.5px solid var(--node-color, var(--pulse-green));
  opacity: 0.7;
}

.aperture-bracket-left {
  left: 0;
  border-right: none;
  border-radius: 3px 0 0 3px;
}

.aperture-bracket-right {
  right: 0;
  border-left: none;
  border-radius: 0 3px 3px 0;
}

.aperture-reticle-wrapper svg {
  position: absolute;
  width: 75%;
  height: 75%;
  animation: apertureSpinReverse 8s linear infinite;
}

.aperture-reticle-wrapper circle {
  fill: none;
  stroke: var(--text-red);
  stroke-width: 1.5;
  stroke-dasharray: 5, 3;
}

.aperture-flow-core {
  position: absolute;
  width: 4px;
  height: 12px;
  background: var(--text-red);
  box-shadow: 0 0 8px var(--text-red);
  border-radius: 2px;
  animation: chokeCompression 1.4s ease-in-out infinite alternate;
}

@keyframes apertureSpinReverse {
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes chokeCompression {
  0% {
    height: 4px;
    opacity: 0.4;
  }

  100% {
    height: 14px;
    opacity: 1;
  }
}

.choke-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.choke-name {
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choke-status {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-red);
}

.footer {
  font-size: 8px;
  color: var(--text-muted);
  text-align: center;
}

/* Status Element styling driven purely by data attributes */
#tradePanel .status[data-status="operational"] {
  --status-color: var(--pulse-green);
}

#tradePanel .status[data-status="disrupted"] {
  --status-color: var(--danger-yellow);
}

#tradePanel .status[data-status="delayed"] {
  --status-color: var(--danger-orange);
}

#tradePanel .status[data-status="high-alert"] {
  --status-color: var(--danger-red);
}

#tradePanel .status {
  color: var(--status-color, var(--pulse-green));
  border-color: var(--status-color, var(--pulse-green));
  /* Modern CSS creates an exact 10% opacity backdrop from the root variable */
  background: color-mix(in srgb, var(--status-color, var(--pulse-green)) 10%, transparent);
}

/* Grid Box Values styling driven by metrics data attributes */
#tradePanel .val[data-activity="high"] {
  color: var(--market-purple);
}

#tradePanel .val[data-activity="normal"] {
  color: var(--text-blue);
}

#tradePanel .val[data-activity="low"] {
  color: var(--text-secondary);
}

#tradePanel .val[data-risk="low"] {
  color: var(--pulse-green);
}

#tradePanel .val[data-risk="medium"] {
  color: var(--status-warning);
}

#tradePanel .val[data-risk="high"] {
  color: var(--danger-red);
}

#tradePanel .val[data-trend="rising"] {
  color: var(--pulse-green);
}

#tradePanel .val[data-trend="stable"] {
  color: var(--text-blue);
}

#tradePanel .val[data-trend="falling"] {
  color: var(--danger-orange);
}

/* Dynamic Chokepoint Gate status rings and metrics */
.choke-gate-node[data-status="operational"] {
  --node-color: var(--pulse-green);
}

.choke-gate-node[data-status="disrupted"] {
  --node-color: var(--danger-yellow);
}

.choke-gate-node[data-status="delayed"] {
  --node-color: var(--danger-orange);
}

.choke-gate-node[data-status="high-alert"] {
  --node-color: var(--danger-red);
}

.choke-gate-node .aperture-reticle-wrapper svg circle {
  stroke: var(--node-color, var(--pulse-green));
}

.choke-gate-node .aperture-flow-core {
  background: var(--node-color, var(--pulse-green));
  box-shadow: 0 0 8px var(--node-color, var(--pulse-green));
}

.choke-gate-node .choke-status {
  color: var(--node-color, var(--pulse-green));
}


/* Card Container Baseline */
.route-intel-feed {
  border: 1px solid rgba(0, 191, 255, 0.25);
  background: rgba(5, 12, 23, 0.85);
}

.route-intel-feed .card-label {
  color: var(--text-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.route-intel-feed .secure-version-tag {
  font-size: 8.5px;
  font-family: monospace;
  color: var(--text-muted);
}

.route-intel-feed #newsActionWrapper {
  margin-top: 8px;
}

.route-intel-feed .news-action-btn {
  width: 100%;
  background: rgba(0, 191, 255, 0.05);
  border: 1px solid rgba(0, 191, 255, 0.3);
  color: var(--text-blue);
  font-family: monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.route-intel-feed .news-progress-box {
  display: none;
  margin-top: 12px;
  font-family: monospace;
  font-size: 0.75rem;
}

.route-intel-feed .progress-meta {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.route-intel-feed .progress-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.route-intel-feed .progress-bar-inner {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--text-blue), var(--pulse-green));
  box-shadow: 0 0 6px var(--text-blue);
  transition: width 0.1s linear;
}

/* Data Attribute Styling Matrix */
#modalRouteActivity[data-activity="high"] {
  color: var(--market-purple);
}

#modalRouteActivity[data-activity="normal"] {
  color: var(--text-blue);
}

#modalRouteActivity[data-activity="low"] {
  color: var(--text-secondary);
}

#modalRouteTrend[data-trend*="rising"] {
  color: var(--pulse-green);
}

#modalRouteTrend[data-trend*="stable"] {
  color: var(--flat-blue);
}

#modalRouteTrend[data-trend*="falling"] {
  color: var(--danger-orange);
}

#modalRiskValue[data-risk="low"] {
  color: var(--pulse-green);
}

#modalRiskValue[data-risk="medium"] {
  color: var(--status-warning);
}

#modalRiskValue[data-risk="high"] {
  color: var(--danger-red);
}

/* Custom Left Borders for specific commercial classes */
.spec-item[data-vessel-type="container"] {
  border-left-color: var(--text-blue);
}

.spec-item[data-vessel-type="tanker"] {
  border-left-color: var(--curr-gold);
}

.spec-item[data-vessel-type="bulk"] {
  border-left-color: var(--danger-red);
}

.spec-item[data-vessel-type="cargo"] {
  border-left-color: var(--curr-gold);
}

.spec-item[data-vessel-type="roro"] {
  border-left-color: var(--danger-red);
}

/* Core Global typography cleanups for headers and subfields */
#modalRouteActivity {
  color: var(--text-primary, #ffffff);
  transition: color 0.25s ease;
}

#modalRouteTimestamp {
  color: var(--text-primary, #ffffff);
}

/* Icons */
.vessel-count-icon {
  color: var(--text-blue, #3b82f6);
  vertical-align: middle;
}

.threat-icon-element {
  color: var(--node-color, var(--pulse-green));
  vertical-align: middle;
}

.vessel-label-suffix {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Charts Framework Bounds Layout without inline style templates */
.chart-canvas-wrapper {
  width: 100%;
  height: 220px;
  margin-top: 10px;
  position: relative;
}

.structural-accent-blue {
  color: var(--text-blue);
}

/* Container Baselines & Empty Fallbacks */
.accordion-empty-fallback {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 10px;
  font-family: monospace;
}

/* Accordion Row Structural Layout Rules */
.accordion-row .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.accordion-row .badge-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Core System Cascading Color Vectors */
.accordion-header .chokepoint-vector-icon {
  vertical-align: middle;
  transition: color 0.25s ease;
}

/* Color Engine via data-status rules */
.accordion-header[data-status="operational"] .chokepoint-vector-icon {
  color: var(--pulse-green);
}

.accordion-header[data-status="delayed"] .chokepoint-vector-icon {
  color: var(--danger-orange);
}

.accordion-header[data-status="disrupted"] .chokepoint-vector-icon {
  color: var(--curr-gold);
}

.accordion-header[data-status="high-alert"] .chokepoint-vector-icon {
  color: var(--danger-red);
}

/* Status Pill Baseline Design Specs */
.accordion-header .status-pill {
  font-family: monospace;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Status Pill Color Configurations */
.status-pill[data-pill-status="operational"] {
  background: rgba(0, 230, 118, 0.12);
  color: var(--pulse-green);
}

.status-pill[data-pill-status="delayed"] {
  background: rgba(255, 166, 0, 0.1);
  color: var(--danger-orange);
}

.status-pill[data-pill-status="disrupted"] {
  background: rgba(251, 255, 23, 0.12);
  color: var(--curr-gold);

}

.status-pill[data-pill-status="high-alert"] {
  background: rgba(255, 23, 68, 0.12);

  color: var(--danger-red);
}

/* Internal Dynamic Breakdown Item Styling Rules */
.choke-details-block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px;
}

.choke-details-block .metric-item {
  display: flex;
  flex-direction: column;
}

.choke-details-block .metric-label {
  color: var(--text-muted);
  font-size: 11px;
  font-family: monospace;
}

.choke-details-block .metric-value {
  color: var(--text-primary, #ffffff);
  font-size: 13px;
  font-family: monospace;
}

.choke-details-block .metric-empty-notice {
  grid-column: span 2;
  color: var(--text-muted);
  font-size: 10px;
  font-style: italic;
}

/* --- Tactical Flag Box Frame --- */
.flag-box {
  background: rgba(4, 10, 20, 0.95);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 4px;
  width: 42px;
  /* Slightly widened to frame the tactical radar maps beautifully */
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 8px rgba(0, 191, 255, 0.15), 0 0 15px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Base Asset Layers hidden by default */
.geo-vector-asset {
  position: absolute;
  width: 90%;
  height: 90%;
  opacity: 0;
  transform: scale(0.85) rotate(-10deg);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* --- Map Visibility Controller Rules via Data Attributes --- */
[data-region="middle-east"] .region-middle-east,
[data-region="sea"] .region-sea,
[data-region="panama"] .region-panama {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* --- Internal SVG Vector Subsystem Themes --- */
.geo-vector-asset .hud-radar-ring {
  fill: none;
  stroke: rgba(0, 191, 255, 0.2);
  stroke-width: 1px;
}

.geo-vector-asset .landmass-contour {
  fill: rgba(0, 191, 255, 0.06);
  stroke: rgba(0, 191, 255, 0.25);
  stroke-width: 1.25px;
  stroke-linejoin: round;
}

.geo-vector-asset .transit-intercept-vector {
  fill: none;
  stroke: var(--text-blue, #00bfff);
  stroke-width: 1px;
  opacity: 0.7;
}

/* Pulse Animation for Critical Radar Targets */
@keyframes radarPing {
  0% {
    r: 2px;
    opacity: 1;
  }

  100% {
    r: 8px;
    opacity: 0;
  }
}

.geo-vector-asset .target-node-pulse {
  fill: var(--text-blue, #00bfff);
  stroke: var(--text-blue, #00bfff);
  stroke-width: 1px;
}

/* --- Flag Box Frame Core --- */
.flag-box {
  background: rgba(4, 10, 20, 0.95);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 4px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 8px rgba(0, 191, 255, 0.15), 0 0 15px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Base Hidden Layer Setup */
.geo-vector-asset {
  position: absolute;
  width: 90%;
  height: 90%;
  opacity: 0;
  transform: scale(0.85) rotate(-8deg);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* --- Route Vector Dynamic Visibility Engine --- */
[data-region="trans-pacific"] .region-trans-pacific,
[data-region="asia-europe"] .region-asia-europe,
[data-region="transatlantic"] .region-transatlantic,
[data-region="intra-asia"] .region-intra-asia,
[data-region="sam-europe"] .region-sam-europe,
[data-region="asia-me"] .region-asia-me,
[data-region="russia-europe"] .region-russia-europe {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* --- SVG Sub-element Aesthetics --- */
.geo-vector-asset .hud-radar-ring {
  fill: none;
  stroke: rgba(0, 191, 255, 0.18);
  stroke-width: 1px;
}

.geo-vector-asset .landmass-contour {
  fill: rgba(0, 191, 255, 0.05);
  stroke: rgba(0, 191, 255, 0.22);
  stroke-width: 1.25px;
  stroke-linejoin: round;
}

.geo-vector-asset .transit-intercept-vector {
  fill: none;
  stroke: var(--text-blue, #00bfff);
  stroke-width: 1px;
  opacity: 0.75;
}

.geo-vector-asset .target-node-pulse {
  fill: var(--text-blue, #00bfff);
  stroke: var(--text-blue, #00bfff);
  stroke-width: 1.5px;
}

/* --- Macro State Color Adaptations via Header Context --- */
.cyber-header:has(.status-delayed) .flag-box {
  border-color: rgba(255, 145, 0, 0.45);
  box-shadow: inset 0 0 8px rgba(255, 145, 0, 0.1), 0 0 10px rgba(255, 145, 0, 0.1);
}

.cyber-header:has(.status-delayed) .target-node-pulse {
  fill: var(--curr-gold, #ffd600);
  stroke: var(--curr-gold, #ffd600);
}

.cyber-header:has(.status-delayed) .transit-intercept-vector {
  stroke: var(--curr-gold, #ffd600);
}

.cyber-header:has(.status-disrupted) .flag-box,
.cyber-header:has(.status-critical) .flag-box {
  border-color: rgba(255, 23, 68, 0.55);
  box-shadow: inset 0 0 8px rgba(255, 23, 68, 0.15), 0 0 12px rgba(255, 23, 68, 0.2);
}

.cyber-header:has(.status-disrupted) .target-node-pulse,
.cyber-header:has(.status-critical) .target-node-pulse {
  fill: var(--text-red, #ff1744);
  stroke: var(--text-red, #ff1744);
}

.cyber-header:has(.status-disrupted) .transit-intercept-vector,
.cyber-header:has(.status-critical) .transit-intercept-vector {
  stroke: var(--text-red, #ff1744);
}

/* ==========================================================================
       country profile
       ========================================================================== */




/* ==========================================================================
       TRACKER / RADAR SYSTEM STYLES (SHARED)
       ========================================================================== */
.compact-tracker-node {
  width: 20px;
  height: 20px;
  background: #040811;
  border: 1px solid rgba(43, 74, 114, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: help;
}

.mini-radar-wrapper {
  position: relative;
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-radar-wrapper::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px dashed var(--pulse-color, var(--pulse-green));
  animation: miniExpand 2s linear infinite;
}

.mini-pulse-core {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pulse-color, var(--pulse-green));
  box-shadow: 0 0 6px var(--pulse-color, var(--pulse-green));
}

.compact-tracker-node::after {
  content: attr(data-tracker-tooltip);
  position: absolute;
  bottom: 135%;
  right: -10px;
  width: 190px;
  background: #091428;
  border: 1px solid rgba(59, 130, 246, 0.7);
  color: #f1f5f9;
  font-size: 0.7rem;
  font-family: monospace;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  white-space: pre-line;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
  line-height: 1.3;
}

.compact-tracker-node:hover::after {
  opacity: 1;
  visibility: visible;
}

@keyframes miniExpand {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.state-stable {
  --pulse-color: var(--pulse-green);
}

.state-nominal {
  --pulse-color: var(--curr-gold);
}

.state-unstable {
  --pulse-color: var(--danger-red);
}

/* ==========================================================================
       TELEMETRY PREVIEW TERMINAL
       ========================================================================== */
.telemetry-preview-box {
  background: var(--card-bg);
  border: 1px solid rgba(43, 74, 114, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  max-width: 325px;
  max-height: 245px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
  gap: 3px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}



.telemetry-identity-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-flag-node {
  width: 24px;
  height: 16px;
  background: #006c35;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 108, 53, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-flag-node span {
  color: white;
  font-weight: 800;
  font-size: 7px;
  letter-spacing: 0.2px;
}

.telemetry-identity h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.header-controls-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.preview-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0px 0px 0px 2px;
  display: flex;
  align-items: center;
}

.preview-close-btn:hover {
  color: var(--danger-red);
}


.telemetry-box {
  background: rgba(5, 12, 23, 0.6);
  border: 1px solid rgba(43, 74, 114, 0.15);
  border-radius: 4px;
  padding: 6px 8px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.telemetry-box:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);

}

.telemetry-label {
  font-size: 8.5px;
  color: var(--text-blue);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.telemetry-val {
  font-size: 14px;
  font-weight: 700;
}

.telemetry-box .telemetry-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telemetry-sub {
  font-size: 8.5px;
  color: var(--text-muted);
}

.vector-scroller-section {
  background: rgba(5, 12, 23, 0.6);
  border: 1px solid rgba(43, 74, 114, 0.15);
  border-radius: 4px;
  padding: 6px;
}

.vector-scroller-section:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);

}

.vector-scroller-title {
  font-size: 8.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.fade-scroll-wrapper {
  position: relative;
  width: 100%;
}

.fade-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  height: 100%;
  width: 35px;
  background: linear-gradient(to right, rgba(10, 20, 38, 0) 0%, rgba(10, 20, 38, 0.98) 100%);
  pointer-events: none;
  z-index: 5;
}

.vector-scroll-container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: smooth;
}

.vector-scroll-container::-webkit-scrollbar {
  display: none;
}

.vector-scroll-container:active {
  cursor: grabbing;
}

.vector-ring-node {
  flex: 0 0 130px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.tactical-crosshair-wrapper {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tactical-crosshair-wrapper svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  animation: tacticalRadarScan 6s linear infinite;
}

.tactical-crosshair-wrapper circle {
  fill: none;
  stroke-width: 1.5;
}

.tactical-crosshair-wrapper .outer-grid {
  stroke-dasharray: 4, 3;
  opacity: 0.4;
}

.tactical-crosshair-wrapper .sweeper-arc {
  stroke-dasharray: 40, 50;
  stroke-width: 2.5;
}

.reticle-cross-x,
.reticle-cross-y {
  position: absolute;
  background: var(--threat-color, var(--danger-red));
  opacity: 0.6;
}

.reticle-cross-x {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.reticle-cross-y {
  height: 100%;
  width: 1px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.reticle-target-lock {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--bg-dark);
  border: 1.5px solid var(--threat-color, var(--danger-red));
  border-radius: 50%;
  z-index: 2;
  animation: tacticalPulse 1.5s ease-in-out infinite alternate;
}

@keyframes tacticalRadarScan {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes tacticalPulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 2px var(--threat-color);
  }

  100% {
    transform: scale(1.2);
    box-shadow: 0 0 8px var(--threat-color);
  }
}

.vector-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vector-name {
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-main);
}

.vector-status {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.preview-footer {
  font-size: 8px;
  color: var(--text-muted);
  text-align: center;
}

/* ==========================================================================
       MODAL STRUCTURAL MATRIX is off
       ========================================================================== */
.data-summary-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 1rem;
}





.card-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* Forces text to stay on a single line */
  /* Ensures the container spans the full width */

}

.card-main {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-sub {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 2px;
}

.inline-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}



/*///////////////////////////*/




/* ==========================================================================
       TRACKER / RADAR SYSTEM STYLES (SHARED)
       ========================================================================== */
.compact-tracker-node {
  width: 20px;
  height: 20px;
  background: #040811;
  border: 1px solid rgba(43, 74, 114, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: help;
}

.mini-radar-wrapper {
  position: relative;
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-radar-wrapper::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px dashed var(--pulse-color, var(--pulse-green));
  animation: miniExpand 2s linear infinite;
}

.mini-pulse-core {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pulse-color, var(--pulse-green));
  box-shadow: 0 0 6px var(--pulse-color, var(--pulse-green));
}

.compact-tracker-node::after {
  content: attr(data-tracker-tooltip);
  position: absolute;
  bottom: -600%;
  right: -10px;
  width: 190px;
  background: #091428;
  border: 1px solid rgba(59, 130, 246, 0.7);
  color: #f1f5f9;
  font-size: 0.7rem;
  font-family: monospace;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  white-space: pre-line;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
  line-height: 1.3;
}

.compact-tracker-node:hover::after {
  opacity: 1;
  visibility: visible;
}

@keyframes miniExpand {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.state-stable {
  --pulse-color: var(--pulse-green);
}

.state-nominal {
  --pulse-color: var(--curr-gold);
}

.state-unstable {
  --pulse-color: var(--danger-red);
}

/* ==========================================================================
       TELEMETRY PREVIEW TERMINAL
       ========================================================================== */
.telemetry-preview-box {
  background: var(--card-bg);
  border: 1px solid rgba(43, 74, 114, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  max-width: 325px;
  max-height: 245px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
  gap: 3px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}



.telemetry-identity-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-flag-node {
  width: 24px;
  height: 16px;
  background: #006c35;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 108, 53, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-flag-node span {
  color: white;
  font-weight: 800;
  font-size: 7px;
  letter-spacing: 0.2px;
}





.preview-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  display: flex;
  align-items: center;
}

.preview-close-btn:hover {
  color: var(--danger-red);
}


.telemetry-box {
  background: rgba(5, 12, 23, 0.6);
  border: 1px solid rgba(43, 74, 114, 0.15);
  border-radius: 4px;
  padding: 6px 8px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.telemetry-box:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(59, 130, 246, 0.4);
}

.telemetry-label {
  font-size: 8.5px;
  color: var(--text-blue);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.telemetry-val {
  font-size: 14px;
  font-weight: 700;
}

.telemetry-box .telemetry-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telemetry-sub {
  font-size: 8.5px;
  color: var(--text-muted);
}

.vector-scroller-section {
  background: rgba(5, 12, 23, 0.6);
  border: 1px solid rgba(43, 74, 114, 0.15);
  border-radius: 4px;
  padding: 6px;
}

.vector-scroller-title {
  font-size: 8.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.fade-scroll-wrapper {
  position: relative;
  width: 100%;
}

.fade-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  height: 100%;
  width: 35px;
  background: linear-gradient(to right, rgba(10, 20, 38, 0) 0%, rgba(10, 20, 38, 0.98) 100%);
  pointer-events: none;
  z-index: 5;
}

.vector-scroll-container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: smooth;
}

.vector-scroll-container::-webkit-scrollbar {
  display: none;
}

.vector-scroll-container:active {
  cursor: grabbing;
}

.vector-ring-node {
  flex: 0 0 130px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.tactical-crosshair-wrapper {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tactical-crosshair-wrapper svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  animation: tacticalRadarScan 6s linear infinite;
}

.tactical-crosshair-wrapper circle {
  fill: none;
  stroke-width: 1.5;
}

.tactical-crosshair-wrapper .outer-grid {
  stroke-dasharray: 4, 3;
  opacity: 0.4;
}

.tactical-crosshair-wrapper .sweeper-arc {
  stroke-dasharray: 40, 50;
  stroke-width: 2.5;
}

.reticle-cross-x,
.reticle-cross-y {
  position: absolute;
  background: var(--threat-color, var(--danger-red));
  opacity: 0.6;
}

.reticle-cross-x {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.reticle-cross-y {
  height: 100%;
  width: 1px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.reticle-target-lock {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--bg-dark);
  border: 1.5px solid var(--threat-color, var(--danger-red));
  border-radius: 50%;
  z-index: 2;
  animation: tacticalPulse 1.5s ease-in-out infinite alternate;
}

@keyframes tacticalRadarScan {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes tacticalPulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 2px var(--threat-color);
  }

  100% {
    transform: scale(1.2);
    box-shadow: 0 0 8px var(--threat-color);
  }
}

.vector-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vector-name {
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-main);
}

.vector-status {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.preview-footer {
  font-size: 8px;
  color: var(--text-muted);
  text-align: center;
}

/* ==========================================================================
       MODAL STRUCTURAL MATRIX
       ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 4, 8, 0.7);
  backdrop-filter: blur(8px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}





.flag-box {
  width: 50px;
  height: 35px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flag-box span {
  color: white;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 0.5px;
}



.title-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --- Base Mobile Structure (Tiers stack vertically) --- */
.cyber-header {
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  padding-bottom: 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-brand h2 {
  margin: 0;
  color: var(--text-main, #fff);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.header-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Typography styles for labels */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--text-muted, #8a99ad);

}

.meta-row span {
  display: inline-flex;
  align-items: end;
}

.meta-row span i {
  margin-right: 5px;
  color: #3b82f6;
}


/* --- Desktop Adaptation (Everything aligned on 1 row beneath title) --- */
@media (min-width: 769px) {
  .cyber-header {
    display: grid;
    /* Grid layout maps out top row, and forces sub-items to sit beside each other */
    grid-template-areas:
      "top-line top-line"
      "stats    time";
    grid-template-columns: auto 1fr;
    /* stats takes up needed width, timestamp takes remaining */
    row-gap: 8px;
    column-gap: 24px;
    /* Pulls the timestamp text directly beside the region text */
    align-items: center;
  }

  .header-top-row {
    grid-area: top-line;
  }

  .stats-group {
    grid-area: stats;
  }

  .time-group {
    grid-area: time;
  }

}

.profile-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-details h2 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.35rem;
  letter-spacing: 1px;
  font-weight: 700;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  align-items: center;
}



.close-panel {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-panel:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.modal-body {
  /* Restrict scrolling axis strictly to vertical */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  /* Prevents touch dragging horizontally */

  /* Smooth scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar for Firefox & IE/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar for WebKit (Chrome, Safari, Opera) */
.modal-body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


.full-width {
  grid-column: span 1;
}

.vertical-stack-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.25rem;
}

.data-summary-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 1rem;
}




.card-sub {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 2px;
}

.inline-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inline-badge.purple {
  background: rgba(213, 0, 249, 0.1);
  color: var(--market-purple);
  border: 1px solid rgba(213, 0, 249, 0.2);
}

.inline-badge.gold {
  background: rgba(255, 214, 0, 0.1);
  color: var(--curr-gold);
  border: 1px solid rgba(255, 214, 0, 0.2);
}

.inline-badge.cyan {
  background: rgba(0, 229, 255, 0.1);
  color: var(--tour-cyan);
  border: 1px solid rgba(0, 229, 255, 0.2);
}

.inline-badge.green {
  background: rgba(0, 230, 118, 0.1);
  color: var(--pulse-green);
  border: 1px solid rgba(0, 230, 118, 0.2);
}

.inline-badge.blue {
  background: rgba(0, 191, 255, 0.1);
  color: var(--text-blue);
  border: 1px solid rgba(0, 191, 255, 0.2);
}

.spec-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.spec-item {
  background: rgba(5, 9, 17, 0.4);
  border-left: 2px solid rgba(37, 99, 235, 0.4);
  padding: 4px 10px;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;

}

.spec-item label {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
}

.spec-item span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}

/* --- Grid 1: Overview (Total & Risk) --- */
.overview-grid1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Split evenly into 2 columns */
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  /* Space between the two grids */
  text-align: center;
  /* Centers the text inside the items */
}

.overview-item1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Dead centers content within its grid cell */
  border-radius: 5px;
  padding: 10 0 10 5px;
  background: rgba(5, 9, 17, 0.4);
  border: 1px solid rgba(37, 99, 235, 0.4);
  background: linear-gradient(45deg, transparent 48%, rgba(0, 191, 255, 0.05) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(0, 191, 255, 0.05) 50%, transparent 52%);
  background-size: 4px 4px;
  font-weight: 700;
}

/* --- Grid 2: Ship Breakdown (Forced One Row) --- */
/* Keep your existing desktop styles exactly as they are */
.spec-details-grid1 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 1fr);
  gap: 12px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
}

/* Add this media query right underneath to handle small screens */
@media (max-width: 768px) {
  .spec-details-grid1 {
    grid-auto-flow: row;
    /* Flips layout from horizontal to vertical */
    grid-template-columns: 1fr;
    /* Forces items into a single full-width column */
    overflow-x: visible;
    /* Disables horizontal scrolling */
  }
}

/* Base styles for the spec items to keep them neat */
.spec-item1 {
  border-left: 3px solid;
  /* Dynamic color applied via your inline styles */
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  /* Subtle backdrop if you have a dark theme */
  display: flex;
  flex-direction: column;
}

.spec-item1 label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.spec-item1 span {
  font-size: 1rem;
  font-weight: bold;
}

/* Upgraded Chart Container */
.large-chart-box {
  width: 100%;
  height: 140px;
  position: relative;
  margin-top: 0.5rem;
  background: rgba(4, 8, 16, 0.5);
  border: 1px solid rgba(43, 74, 114, 0.25);
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
}

.panel-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--danger-red);
  font-weight: 700;
  letter-spacing: 0.75px;
}

.conflict-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}




.accordion-header:hover {
  background: rgba(37, 99, 235, 0.1);
}

.accordion-header .title-text {
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}






.status-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

.status-pill.medium {
  background: rgba(255, 145, 0, 0.15);
  color: var(--danger-orange);
}

.status-pill.low {
  background: rgba(255, 23, 68, 0.15);
  color: var(--danger-red);
}

/* ==========================================================================
       RESTORED INTELLIGENCE NEWS RADAR COMPONENTS
       ========================================================================== */
.news-radar-terminal-action {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px dashed rgba(255, 23, 68, 0.15);
  padding-top: 12px;
}

.cyber-scan-trigger-btn {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(29, 78, 216, 0.4) 100%);
  border: 1px solid rgba(59, 130, 246, 0.6);
  color: #ffffff;
  padding: 10px 16px;
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
  transition: all 0.2s ease-in-out;
}

.cyber-scan-trigger-btn:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.35) 0%, rgba(29, 78, 216, 0.55) 100%);
  border-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.scan-progress-box-wrapper {
  background: rgba(4, 8, 16, 0.7);
  border: 1px solid rgba(43, 74, 114, 0.4);
  border-radius: 6px;
  padding: 10px 12px;
  display: none;
}

.scan-meta-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-family: monospace;
  font-size: 0.7rem;
}

.scan-track-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
}

.scan-fill-progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, var(--pulse-green) 100%);
  box-shadow: 0 0 6px var(--pulse-green);
  transition: width 0.1s linear;
}

/* ==========================================================================
       MEDIA BREAKPOINTS & RESPONSIVE RECONCILIATION
       ========================================================================== */



@media (min-width: 576px) {
  .cyber-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .full-width {
    grid-column: span 2;
  }

  .data-summary-row {
    flex-direction: row;
    align-items: center;
  }

  .spec-details-grid {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .card-macro-data .spec-details-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    margin-left: auto;
  }
}


/* ==========================================================================
       OPERATIONS LEDGER MODULE
       ========================================================================== */




.status-dot.warning {
  background: var(--status-warning);
}

.status-dot.danger {
  background: var(--status-danger);
}

.badge-status {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-status.blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.badge-status.success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.badge-status.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.badge-status.danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.ledger-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.ledger-summary-node {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  padding: 6px 8px;
  border-radius: 4px;
}

.ledger-summary-node .title {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.ledger-summary-node .data {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.operations-ledger-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ledger-row {
  background: #1f2937;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.ledger-row-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 10px;
  cursor: pointer;
}

.ledger-row-title {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ledger-row-trigger .chevron {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.2s;
}

.ledger-row.is-expanded .chevron {
  transform: rotate(90deg);
}

.ledger-row-expanded-content {
  max-height: 0;
  overflow: hidden;
  /* Dynamic variable fallback + structural transition timing tweak */
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
  will-change: max-height;
}

/* Completely dropped the hardcoded .is-expanded max-height: 380px variant */
.ledger-row.is-expanded .ledger-row-expanded-content {
  max-height: var(--expanded-height, 200px);
}

.ledger-meta-bar {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}

.ledger-meta-bar span svg {
  transform: translateY(4px);
  /* Moves down 20px (use negative for up) */
}


.ledger-content-split-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inner-ledger-sources-box {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px;
}

.inner-sources-title {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.horizontal-scroll-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}

.horizontal-scroll-container::-webkit-scrollbar {
  display: none;
}

.source-circle-node {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.source-circle-node img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ledger-action-footer {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}

.btn-action-primary {
  background: #2563eb;
  border: none;
  color: white;
  padding: 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.inline-progress-block {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px;
  display: none;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin-bottom: 4px;
}

.progress-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background: var(--accent-blue);
  transition: width 0.1s linear;
}

/* ==========================================================================
       MEDIA BREAKPOINTS & DESKTOP RESET ENGINE
       ========================================================================== */
@media (min-width: 576px) {
  .modal-title-sub {
    flex-direction: row;
    column-gap: 12px;
  }

  .card-top-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .data-matrix-subgrid {
    max-width: 240px;
  }

  .ledger-meta-bar {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 992px) {
  /* Adapt back to seamless centered command viewbox overlay standard for wider display frames */

  .dashboard-header {
    border-radius: 12px 12px 0 0;
    padding: 18px 10px;
  }

  .modal-content-scroller {
    padding: 20px;
  }

  .dashboard-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .span-all-columns {
    grid-column: span 2;
  }

  .ledger-content-split-layout {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .inner-ledger-sources-box {
    min-width: 240px;
  }
}

/* #endregion */



/* Let hovers work beautifully */
.mini-cluster div[data-title] {
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.mini-cluster div[data-title]:hover {
  transform: scale(1.2);
}

.mini-cluster div[data-title] img {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
}

/* Keeps structural tags readable by search bots, but hidden from human eyes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}



/* THE WIDE TRIGGER BUTTON */
.hub-trigger-btn {
  background: rgba(8, 12, 18, 0.92);
  border: 1px solid rgba(0, 255, 208, 0.25);
  color: #00ffd0;
  padding: 8px 32px;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 208, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hub-trigger-btn:hover {
  background: rgba(14, 22, 33, 0.95);
  border-color: #00ffd0;
  box-shadow: 0 0 20px rgba(0, 255, 208, 0.15);
}

.hub-pulse {
  width: 6px;
  height: 6px;
  background: #00ffd0;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ffd0;
}

/* HORIZONTAL CARDBOARD GRID SLIDE LAYER */
.horizontal-card-grid {
  width: 100%;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 208, 0.2) transparent;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 160px;
  /* Dictates fixed visual ceiling height */
  opacity: 1;
  transform: translateY(0);
}

/* Visibility states for smooth toggle animation */
.hidden-hub {
  max-height: 0px !important;
  opacity: 0 !important;
  transform: translateY(-15px) !important;
  pointer-events: none;
  display: none;
}

/* THE HORIZONTAL CARDS */
.news-card-horizontal {
  flex: 0 0 260px;
  /* Explicit core card width width lock */
  background: rgba(6, 10, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.news-card-horizontal:hover {
  border-color: rgba(0, 255, 208, 0.3);
  background: rgba(10, 16, 24, 0.95);
  transform: translateY(-2px);
}

.card-edge-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3700ff, #00ffd0);
}

.card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-body h3 {
  margin: 0;
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Keeps neat trailing dots if headline is long */
}

.card-body p {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* Clips description blocks perfectly at 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* Horizontal Scroll track design customization */
.horizontal-card-grid::-webkit-scrollbar {
  height: 4px;
}

.horizontal-card-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 208, 0.25);
  border-radius: 2px;
}

/* Responsive tweaks for smaller laptop or tablet environments */
@media(max-width: 1024px) {
  .top-hub-wrapper {
    width: 100%;
  }
}


.catge-image {
  position: relative;
  top: -20px;
  left: 0px;
  width: 100px;
  height: 100px;
}



.hud-line {
  box-shadow: 0 -10px 35px rgba(37, 99, 235, 0.25);
  bottom: 0;
  left: 0;
  background: #070d19;
  border: 1px solid #2563eb;
  border-bottom: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -10px 35px rgba(37, 100, 235, 0.514);
  flex-direction: column;
  padding: 1.25rem;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  position: fixed;


  z-index: 99999999999;
  width: 100%;
  height: 2px;

}




/* The anchor container for your news cluster */



/* The ultra-light, delayed fuse ripple */
.hud-ripple-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  pointer-events: none;

  /* Low-fi blurry texture map */
  background: radial-gradient(circle, rgba(239, 68, 68, 0) 50%, rgba(239, 68, 68, 0.7) 58%, rgba(239, 68, 68, 0) 70%);

  will-change: transform, opacity;

  /* Total loop duration is 4 seconds */
  animation: hudPulseDelayed 4s linear infinite;
}

/* Second wave is offset so they alternate sleep cycles */
.hud-ripple-ring.wave-2 {
  animation-delay: 2s;
}

@keyframes hudPulseDelayed {

  /* ========================================================== */
  /* THE SLEEP PHASE (0% to 75% = First 3 Seconds)             */
  /* ========================================================== */
  /* The ring stays locked small and completely invisible.     */
  /* The GPU does zero matrix calculations here during spins!  */
  0%,
  75% {
    transform: scale(0.4);
    opacity: 0;
  }

  /* ========================================================== */
  /* THE ACTIVE PHASE (75% to 100% = Last 1 Second)            */
  /* ========================================================== */
  /* The ring wakes up, performs a tight scale, and fades out  */
  76% {
    opacity: 0.8;
  }

  100% {
    transform: scale(3.0);
    opacity: 0;
  }
}

/* Target the library's internal tooltip container wrapper but inject your design token blueprint */
.cyber-path-tooltip {
  width: 190px;
  background: #091428 !important;
  border: 1px solid #3b82f6 !important;
  color: #f1f5f9 !important;
  font-size: 0.7rem !important;
  font-family: monospace !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  white-space: pre-line !important;
  line-height: 1.3 !important;
  text-align: left;
}

/* --- THE ULTIMATE OVERRIDE BLOCK --- */

/* 1. Target every known tooltip class permutation in the framework */
/* --- THE ULTIMATE OVERRIDE BLOCK (WITH SAFEGUARD) --- */

/* 1. Target framework tooltips, but explicitly skip yours */

div[class*="tooltip"]:not(.cyber-path-tooltip):not(.native-globe-tooltip) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* 🚀 The Magic: Boost element2's z-index ONLY when the anchor is active/visible */
.explosion-coordinate-wrapper:has(.clash-anchor:not(.hidden)) {
  z-index: 999999 !important;
}

/* Detonation Anchor Layout */
.tactical-detonation-node {
  position: relative;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  /* 🚀 CRITICAL: Change this to 'auto' so the browser registers pointer interactions */
  pointer-events: auto;
}

/* Core Impact White Flash (UNCHANGED) */
.tactical-detonation-node::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 14px 4px var(--flash-color, #ff1a1a);
  animation: coreDetonate 2.2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

/* 🚀 NEW: Permanent Clickable Border Hitbox */
.tactical-detonation-node::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* Define a large, comfortable hitbox area */
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;

  /* Draw the permanent, clean border */
  border: 1.5px solid var(--flash-color, #ff1a1a);
  background: transparent;

  /* Subtle glow to match the tactical theme */
  box-shadow: 0 0 6px var(--flash-color, #ff1a1a);

  /* Smooth scale/opacity transitions on hover */
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Optional: Subtle hover effect indicating clickability */
.tactical-detonation-node:hover::after {
  transform: translate(-50%, -50%) scale(1.15);
  background: rgba(255, 26, 26, 0.1);
  /* transparent tint of your color */
}

/* Core Detonation Animation (UNCHANGED) */
@keyframes coreDetonate {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }

  12% {
    transform: translate(-50%, -50%) scale(2.2);
    background: #ffffff;
    opacity: 1;
  }

  35% {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--flash-color, #ff1a1a);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.2;
  }
}



/* #region MARK: clashes */

.details-btn {
  background: rgba(0, 136, 255, 0.1);
  border: 1px solid rgba(0, 136, 255, 0.4);
  border-radius: 4px;
  color: var(--border-blue);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Space between SVG icon and text */
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* Ensure SVG matches hover state cleanly */
.details-btn svg {
  flex-shrink: 0;
}

.details-btn:hover {
  background: var(--border-blue);
  color: #ffffff;
  box-shadow: 0 0 8px var(--glow-blue);
}

/* Enforce exact 290x210px container size */
.dashboard-mini {
  width: 290px;
  height: 210px;
  border: 1px solid var(--border-blue);
  box-shadow: 0 0 12px var(--glow-blue);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--bg-card);
  border-radius: 8px;

  justify-content: space-between;
  background-color: rgba(10, 20, 38, 0.95);
  position: absolute;

  /* panel appears above the tip */
  left: 50%;
  bottom: -1px;

  transform: translateX(-50%);

  pointer-events: auto;
}

/* Closed State Triggered by Button */
.dashboard-mini.closed {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* Header Layout */
.hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 136, 255, 0.2);
  padding-bottom: 4px;
}

/* 1. This parent limits the physical space to 200px and clips the extra text */
/* 1. Tell the parent to act as a container */
.title-wrapper {
  width: 190px;
  overflow: hidden;
  white-space: nowrap;
}

.title {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-main);
  letter-spacing: 0.5px;
  white-space: nowrap;

  /* 1. Use inline-block (or width: max-content) so it can grow wider than the parent */
  width: max-content;

  animation: slideMarquee 8s linear infinite alternate;

}

@keyframes slideMarquee {

  0%,
  20% {
    transform: translateX(0);
  }

  80%,
  100% {
    /* If text is 100px: min(0px, -100px + 200px) -> min(0px, 100px) -> 0px (No movement!)
      If text is 300px: min(0px, -300px + 200px) -> min(0px, -100px) -> -100px (Smooth slide!)
    */
    transform: translateX(min(0px, calc(-100% + 190px)));
  }
}

.hdr-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Glowing Warning + AI indicator */
.ai-indicator {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.5);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 12px;
  font-weight: bold;
  color: var(--accent-warn);
  text-shadow: 0 0 3px rgba(255, 170, 0, 0.5);
  box-shadow: 0 0 5px rgba(255, 170, 0, 0.15);
  animation: warnGlow 1.8s infinite alternate ease-in-out;
  cursor: help;

}

/* Modal Overlay Background */
.ai-modal-overlay {
  display: none;
  /* Hidden initially */
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Modal Active State */
.ai-modal-overlay.active {
  display: flex;
}

/* Modal Box */
.ai-modal-card {
  background: #0b1528;
  padding: 20px;
  border-radius: 5px;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.ai-modal-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.1rem;
  color: whitesmoke;
}

.ai-modal-card p {
  font-size: 0.9rem;
  color: whitesmoke;
  margin-bottom: 16px;
}

.ai-modal-close {
  background-color: #0b3e64;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 1px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

.ai-indicator svg {
  stroke: var(--accent-warn);
  stroke-width: 2.5;
}

/* Close Box Button */
.close-btn {

  font-size: 9px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;



  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;

}

.close-btn:hover {
  border-color: var(--accent-red);
  color: var(--text-main);
  background: rgba(255, 59, 48, 0.2);
  box-shadow: 0 0 6px var(--accent-red);
}

/* Flags & Visuals */
.flags-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 3px 0;
}

.flag {
  width: 36px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
}

/* Flowing Rightward Arrows Container */
.arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 12px;
  overflow: hidden;
}

.arrows svg {
  width: 12px;
  height: 12px;
  stroke: var(--border-blue);
  stroke-width: 2.5;
  fill: none;
  filter: drop-shadow(0 0 2px var(--border-blue));
  position: absolute;
  animation: flowRightAnimation 1.5s infinite linear;
}

.arrows svg:nth-child(1) {
  animation-delay: 0s;
}

.arrows svg:nth-child(2) {
  animation-delay: -0.5s;
}

.arrows svg:nth-child(3) {
  animation-delay: -1s;
}

.meta {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meta-date {
  color: var(--accent-blue-light);
  font-weight: bold;
}

/* Main Grid Area */
.grid-mid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
  flex-grow: 1;
  align-items: center;
}

/* Attack Metrics (Left) */
.metrics {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.row {
  display: grid;
  grid-template-columns: 25px 48px 1fr;
  align-items: center;
  gap: 6px;
}

.row svg {
  width: 22px;
  height: 22px;
  stroke: var(--border-blue);
  stroke-width: 1.7;
  fill: none;
}

.label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-main);
  text-transform: uppercase;
  white-space: nowrap;
}

.seg-bar {
  display: flex;
  gap: 1.0px;
}

.seg-bar .seg {
  flex-grow: 1;
  height: 7px;
  background-color: var(--bar-empty);
  border-radius: 1px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Side Stats (Right) */
.stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid rgba(0, 136, 255, 0.2);
  padding-left: 10px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-icon {
  width: 22px;
  height: 22px;
  stroke: var(--border-blue);
  stroke-width: 1.7;
  fill: none;
  display: flex;
  align-items: center;

}

.stat svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

.stat.red svg {
  stroke: var(--accent-red);
  filter: drop-shadow(0 0 2px var(--accent-red));
}

.stat.blue svg {
  stroke: var(--border-blue);
  filter: drop-shadow(0 0 2px var(--border-blue));
}

.stat-details {
  line-height: 1.1;
}

.s-lbl {
  font-size: 7.5px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.s-val {
  font-size: 13px;
  font-weight: 800;
}

.s-val.red {
  color: var(--accent-red);
}

.s-val.blue {
  color: var(--border-blue);
}

.s-val span {
  font-size: 8.5px;
  color: var(--text-muted);
  font-weight: normal;
}

/* Sources Footer styling */
.src-dots-row {
  display: flex;
  gap: 6px;
}

/* Bottom Row */
.bottom-row {
  border-top: 1px solid rgba(0, 136, 255, 0.2);
  padding-top: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btm-lbl-box {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btm-lbl-box svg {
  width: 20px;
  height: 20px;
  stroke: var(--border-blue);
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

.btm-lbl {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-main);
  letter-spacing: 0.5px;
}

.btm-track {
  display: flex;
  gap: 2.5px;
  flex-grow: 1;
  justify-content: flex-start;
}

/* Animations */
@keyframes flowRightAnimation {
  0% {
    transform: translateX(-18px);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateX(18px);
    opacity: 0;
  }
}

@keyframes warnGlow {
  0% {
    border-color: rgba(255, 170, 0, 0.4);
    box-shadow: 0 0 3px rgba(255, 170, 0, 0.1);
  }

  100% {
    border-color: rgba(255, 170, 0, 0.9);
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
  }
}

/* #endregion */





/* #region MARK: clashes modal */

.ai-indicator1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 170, 0, 0.08);
  border: 1px solid rgba(255, 170, 0, 0.4);
  border-radius: 6px;
  padding: 4px 8px;
  animation: warnGlow 1.8s infinite alternate ease-in-out;
}

.ai-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-warn);
  text-shadow: 0 0 3px rgba(255, 170, 0, 0.4);
}

.ai-label svg {
  fill: currentColor;
}

/* Vertical Divider */
.ai-divider {
  width: 1px;
  height: 14px;
  background-color: rgba(255, 170, 0, 0.35);
}

/* Nested Report Button (Matching Amber Accent) */
.btn-report-nested {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.4);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-warn);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all 0.2s ease-in-out;
}

.btn-report-nested:hover {
  background: rgba(255, 170, 0, 0.3);
  border-color: var(--accent-warn);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
}


/* Modal Overlay Container */
.modal-conflict {
  width: 100%;
  max-width: 800px;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  visibility: hidden;
}

/* Inline Close Button */
.close-btn-clashModal {
  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;



  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;

}

.close-btn-clashModal:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 216, 246, 0.3);
}

/* Layout Grid Desktop */
.modal-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;

  overflow-y: auto;
  scroll-behavior: smooth;

  /* 1. HIDE SCROLLBAR FOR FIREFOX & IE/EDGE */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  /* Preserve scrolling capability */
  overflow-y: auto !important;
}

/* 2. HIDE SCROLLBAR FOR WEBKIT (CHROME, SAFARI, OPERA) */
.modal-grid::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Left Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 50px;

}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--border-color);
}

.card-title-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.summary-text {
  font-size: 0.825rem;
  line-height: 1.45;
  color: var(--text-sub);
  height: 135px;
  overflow-y: auto;
}

/* Interactive Geo Map Container */
.map-card {
  position: relative;
  height: 220px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

#geo-map {
  width: 100%;
  height: 100%;
  background: #070c14;
}

/* Map UI Customization & Dark Overlay */
.leaflet-container {
  background: var(--bg-dark) !important;
}

/* Custom Pulsing Markers */
.geo-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
}

.geo-pulse::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: pulse 2s infinite ease-out;
  opacity: 0.8;
}

.geo-pulse.cyan {
  background-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
}

.geo-pulse.red {
  background-color: var(--accent-red);
  color: var(--accent-red);
  box-shadow: 0 0 10px var(--accent-red);
}

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Dashed Path Animation */
.flight-path {
  stroke-dasharray: 6, 6;
  animation: dash 30s linear infinite;
}

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

/* Main Content Right */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Top Stats Line */
.top-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  scroll-behavior: unset;
}

/* Badge with Integrated Impact Score */
.badge-impact {
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  background: rgba(255, 51, 75, 0.1);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.05em;
}



/* Title Section */
.main-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
  height: 80px;
}

/* Meta Pill Bar */
.meta-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--text-sub);
  justify-content: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-divider {
  width: 1px;
  height: 14px;
  background-color: var(--border-color);
}

/* Equipment Category Grid */
.stats-grid-clash {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stat-card-clash {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  background-color: var(--card-bg);
}

.stat-card-clash.active {
  border-color: var(--accent-cyan);
  background: linear-gradient(180deg, rgba(0, 216, 246, 0.05) 0%, rgba(11, 20, 34, 1) 100%);
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.stat-icon {
  color: var(--accent-cyan);
}

.stat-info {
  text-align: right;
}

.stat-label-clash {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 10-Segment Bar Container Styling */
.segmented-bar {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 6px;
  margin-top: 4px;
}

.segmented-bar .seg {
  flex: 1;
  height: 100%;
  border-radius: 1px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Info Matrix */
.info-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--card-bg);
}

.clash-target {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--card-bg);
  padding: 15px;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--text-sub);
  display: flex;
  align-content: center;
}

.matrix-cell {
  padding: 12px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.matrix-cell:nth-child(2n) {
  border-right: none;
}

.matrix-cell:nth-last-child(-n+2) {
  border-bottom: none;
}

.cell-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 6px;
  text-transform: uppercase;
  height: 30px;
}

.cell-value {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.cell-coords {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Progress & Intensity */

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background-color: var(--card-bg-light);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--accent-cyan);
  border-radius: 3px;
}

/* Sources Section */
.sources-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  background-color: var(--card-bg);

}

.sources-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  height: 407px;
  overflow-y: auto;
  padding-right: 4px;
}

.sources-list::-webkit-scrollbar {
  width: 4px;
}

.sources-list::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

.sources-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.sources-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

.source-item {
  display: flex;
  gap: 10px;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
  margin-top: 8px;
  align-items: center;
}

.source-thumb {
  width: 70px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.source-text {
  flex: 1;
  font-size: 0.75rem;
  line-height: 1.3;
}

.source-meta {
  font-size: 0.68rem;
  color: var(--accent-cyan);
  margin-top: 4px;
}

.source-meta span {
  color: var(--text-muted);
}

/* Responsive Mobile Layout Strategy */
@media (max-width: 768px) {
  body {
    padding: 8px;
  }

  .modal-conflict {
    padding: 16px;
  }

  /* Flex layout to re-order mobile sections explicitly */
  .modal-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .modal-grid {
    /* 1. HIDE SCROLLBAR FOR FIREFOX & IE/EDGE */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */

    /* Preserve scrolling capability */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 2. HIDE SCROLLBAR FOR WEBKIT (CHROME, SAFARI, OPERA) */
  .modal-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* 1. Main Content Container (Title, Badges, Metrics) comes first */
  .main-content {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Allow sources to break out of main-content flex order */
  .sources-card {
    order: 3;
  }

  /* 2. Sidebar (Summary + Map) comes second */
  .sidebar {
    order: 2;
    margin-bottom: 0px;

  }

  /* Enable CSS display contents on mobile so .sources-card respects top flex ordering */
  .main-content {
    display: contents;
  }

  .top-stats,
  .main-title,
  .meta-bar,
  .stats-grid-clash,
  .clash-target,
  .info-matrix {
    order: 1;
  }

  .stats-grid-clash {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-title {
    font-size: 1.15rem;
  }

  .hero-img {
    height: 160px;
  }

  .map-card {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .meta-bar {
    gap: 6px;
    align-items: flex-start;
  }

  .info-matrix {
    grid-template-columns: 1fr;
  }

  .matrix-cell {
    border-right: none !important;
    border-bottom: 1px solid var(--border-color);
  }

  .matrix-cell:last-child {
    border-bottom: none;
  }
}

/* #endregion */





/* #region MARK: clashlist */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Class applied to body or main element when hidden */
.main-content-clashList.content-hidden {
  display: none !important;
}


.main-content-clashList {
  flex: 1;
  padding: 28px 32px;
  gap: 20px;
  overflow-y: auto;





  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: #040810;
  box-sizing: border-box;
  overflow: hidden;

  /* Centered Modal Overlay Bounds for Desktop */
  width: 90%;
  max-width: 1200px;
  height: 80%;
  max-height: 620px;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.15);


}

/* UNIFIED HEADER */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.menu-toggle-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
}

.brand-logo-icon {
  width: 32px;
  height: 32px;
  color: #e52e2e;
}

.page-title h2 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0;
}

.page-title p {
  color: #627282;
  font-size: 13px;
  margin-top: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ai-summary-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e52e2e;
  background: rgba(229, 46, 46, 0.05);
  color: #ff4d4d;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.ai-summary-btn:hover {
  background: rgba(229, 46, 46, 0.15);
}

.last-updated {
  text-align: right;
}

.last-updated .label {
  font-size: 9px;
  font-weight: 700;
  color: #5d6f80;
  letter-spacing: 0.8px;
  display: block;
}

.last-updated .time-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
}

/* KPI GRID */
.kpi-grid-clash-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.kpi-card {
  background-color: #060c14;
  border: 1px solid #101c2a;
  border-radius: 8px;
  padding: 16px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.kpi-info {
  display: flex;
  flex-direction: column;
}

.kpi-title {
  font-size: 10px;
  font-weight: 700;
  color: #5d6f80;
  letter-spacing: 0.8px;
}

.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 4px 0;
  line-height: 1;
}

.kpi-value.red {
  color: #e52e2e;
}

.kpi-subtext {
  font-size: 11px;
  color: #5d6f80;
}

.kpi-chart {
  width: 48px;
  height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-chart .chart-progress {
  transition: stroke-dasharray 0.6s ease-in-out;
}

.kpi-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 162, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00a2ff;
}

/* BADGES */
.impact-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(229, 46, 46, 0.1);
  border: 1px solid rgba(229, 46, 46, 0.3);
  color: #ef4444;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.confidence-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* UNIFIED CONFLICT LIST / TABLE */
.conflicts-container {
  background-color: #060c14;
  border: 1px solid #101c2a;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table tr {}

.table th {
  padding: 14px 16px;
  font-size: 10px;
  font-weight: 700;
  color: #5d6f80;
  letter-spacing: 0.8px;
  border-bottom: 1px solid #101c2a;
  background-color: #04080e;
  white-space: nowrap;
}

.table td {
  padding: 14px 16px;
  border-bottom: 1px solid #0e1724;
  color: #ffffff;
  font-size: 12px;
  vertical-align: middle;

}

.table tr:last-child td {
  border-bottom: none;

}

.table tr:hover {
  background-color: #0a1320;
}

/* Hide arrow cell on Desktop */
.arrows-cell {
  display: none;
}

.date-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8c9ba5;
}

.date-cell .icon {
  width: 16px;
  height: 16px;
  color: #5d6f80;
}

.date-text {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  white-space: nowrap;
}

.date-text .time {
  color: #ffffff;
  font-weight: 600;
}

.conflict-title {
  font-weight: 500;
  color: #e2e8f0;
  line-height: 1.3;
}

.country-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  white-space: nowrap;
}

.flag-icon {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}

.action-btn-clash-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e52e2e;
  background: transparent;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.action-btn-clash-list:hover {
  background: #e52e2e;
}

.mobile-country-label {
  display: none;
}



.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #8c9ba5;
  cursor: pointer;
  background: transparent;
  font-size: 11px;
}

.page-btn.active {
  border-color: #e52e2e;
  color: #ffffff;
  background: rgba(229, 46, 46, 0.1);
}

.rows-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rows-select {
  background-color: #08101a;
  border: 1px solid #121e2e;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* ===================================================
       MOBILE RESPONSIVE OVERRIDES (<= 768px)
    =================================================== */
@media (max-width: 768px) {
  .main-content-clashList {
    gap: 14px;
    padding: 5px 5px;


    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    border: none;
  }

  /* Header overrides */
  .app-header {
    align-items: center;
  }

  .header-left {
    align-items: center;
    gap: 8px;
  }



  .brand-logo-icon {
    width: 22px;
    height: 22px;
  }

  .page-title p,
  .last-updated {
    display: none;
  }

  .page-title h2 {
    font-size: 16px;
    margin-top: -4px;
  }

  .ai-summary-btn {
    padding: 4px 8px;
    font-size: 10px;
  }

  .ai-summary-btn .icon {
    display: none;
  }

  .header-actions {
    gap: 8px;
  }

  /* Horizontal Scrollable KPI Cards */
  .kpi-grid-clash-list {
    display: flex;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    height: 700px;
    scrollbar-width: none;
  }

  .kpi-card {
    flex: 0 0 145px;
    scroll-snap-align: start;
    padding: 12px;
  }

  .kpi-value {
    font-size: 24px;
  }

  /* Mobile Card Grid Architecture */
  .conflicts-container {
    background: transparent;
    border: none;
  }

  .table,
  .table thead,
  .table tbody {
    display: block;
    width: 100%;
  }

  .table thead {
    display: none;
    /* Hide table header on mobile */
  }

  .table tbody {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .table tr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "title title title"
      "date date date"
      "source arrows target"
      "badges badges details";
    background-color: #040c16;
    border: 1px solid #0f2133;
    border-left: 3px solid #ef4444;
    border-radius: 8px;
    padding: 12px;
    gap: 8px 6px;
    position: relative;
  }

  /* 🚀 ADD THIS RULE: When .cell-source is missing, make .cell-target span all 3 columns */
  .table tr:not(:has(.cell-source)) {
    grid-template-areas:
      "title title title"
      "date date date"
      "target target target"
      "badges badges details";
  }

  /* Ensure target centers or aligns cleanly when full-width */
  .table tr:not(:has(.cell-source)) .cell-target {
    justify-content: center;
    /* Or 'center' depending on your design preference */
  }

  .table tr:hover {
    background-color: #040c16;
  }

  .table td {
    padding: 0;
    border: none;
    width: auto;
  }

  /* TIER 1: Title and Date */
  .cell-title {
    grid-area: title;
  }

  .conflict-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
  }

  .cell-date {
    grid-area: date;
    margin-bottom: 6px;
  }

  .date-cell {
    font-size: 11px;
    color: #64748b;
  }

  .date-text {
    flex-direction: row;
    gap: 6px;
  }

  /* TIER 2: Source -> Arrows -> Target */
  .cell-source {
    grid-area: source;
    padding-top: 10px !important;
    border-top: 1px dashed #101c2a !important;
    display: flex;
    justify-content: center;
  }

  .cell-target {
    grid-area: target;
    padding-top: 10px !important;
    border-top: 1px dashed #101c2a !important;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .arrows-cell {
    grid-area: arrows;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding-top: 10px !important;
    border-top: 1px dashed #101c2a !important;
  }

  .arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
  }

  .arrows svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    margin-left: -6px;
  }

  .arrows svg:first-child {
    margin-left: 0;
  }

  .country-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .mobile-country-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: #5d6f80;
    letter-spacing: 0.5px;
  }

  /* TIER 3: Impact & Confidence Side-by-Side */
  .cell-impact {
    grid-area: badges;
    padding-top: 10px !important;
    border-top: 1px dashed #101c2a !important;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .cell-confidence {
    grid-area: badges;
    padding-top: 10px !important;
    border-top: 1px dashed #101c2a !important;
    display: flex;
    align-items: center;
    margin-left: 62px;
  }

  .cell-details {
    grid-area: details;
    padding-top: 10px !important;
    border-top: 1px dashed #101c2a !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .action-btn-clash-list {
    padding: 4px 10px;
    font-size: 10px;
  }


}

/* #endregion */






/* #region MARK: film */

.film-tape-container {
  position: fixed;
  bottom: 100px;
  /* Make sure to include 'px' */
  left: 0;
  right: 0;
  margin: 0 auto;
  /* Centers the block within the left/right bounds */

  width: 100%;
  max-width: 1000px;
  background: #090e17;
  border: 1px solid #1c2738;
  border-radius: 10px;
  padding: 18px 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  display: flex;
  box-sizing: border-box;

}

.film-tape-container.hidden {
  display: none !important;
}

.film-tape-container::before,
.film-tape-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background-image: repeating-linear-gradient(90deg,
      #1c2838 0px,
      #1c2838 10px,
      transparent 10px,
      transparent 18px);
  z-index: 5;
}

.film-tape-container::before {
  top: 6px;
}

.film-tape-container::after {
  bottom: 6px;
}

.film-texture {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#152030 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.4;
  pointer-events: none;
}

.timeline-viewport {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  scrollbar-width: none;
  position: relative;
  cursor: grab;
  /* Visual feedback for draggable area */
}

.timeline-viewport::-webkit-scrollbar {
  display: none;
}

/* Active dragging state cursor */
.timeline-viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;
  /* Disable smooth transition during active drag for responsiveness */
}

.virtual-runway {
  position: relative;
  height: 110px;
  width: 0px;
}

.nav-btn-film {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(10, 16, 26, 0.9);
  border: 1px solid #1f2e45;
  color: var(--text-light);
  width: 38px;
  height: 85px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn-film:hover {
  background: #182538;
  border-color: #385075;
  color: #fff;
}

.nav-btn-film.left {
  left: 8px;
}

.nav-btn-film.right {
  right: 8px;
}

.frame-card {
  position: absolute;
  top: 0;
  width: var(--card-width);
  height: 110px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s;
  will-change: transform, left;
  box-sizing: border-box;

}

.frame-card:hover {
  border-color: #2c4263;
  transform: translateY(-2px);
}

.frame-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.frame-events {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.histogram {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5px;
  height: 22px;
  width: 100%;
  padding: 0 8px;
}

.bar {
  flex: 1;
  max-width: 4px;
  background-color: var(--color-low);
  border-radius: 1px;
}

.frame-status {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.frame-card[data-severity="LOW"] .bar {
  background-color: var(--color-low);
}

.frame-card[data-severity="LOW"] .frame-status {
  color: var(--color-low);
}

.frame-card[data-severity="MEDIUM"] .bar {
  background-color: var(--color-medium);
}

.frame-card[data-severity="MEDIUM"] .frame-status {
  color: var(--color-medium);
}

.frame-card[data-severity="HIGH"] .bar {
  background-color: var(--color-live);
}

.frame-card[data-severity="HIGH"] .frame-status {
  color: var(--color-live);
}

.frame-card[data-severity="nodata"] .frame-status {
  color: var(--color-nodata);
}

.frame-card[data-severity="nodata"] .no-data-dash {
  color: var(--color-nodata);
  font-size: 1rem;
  margin: 4px 0;
}

.frame-card.active {
  border: 1.5px solid var(--color-live);
  box-shadow: 0 0 15px rgba(255, 42, 42, 0.4), inset 0 0 8px rgba(255, 42, 42, 0.15);
  background: rgba(22, 10, 16, 0.9);
}

.frame-card.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--color-live);
}

/* Close Button Positioning & Style */
.close-btn-film {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 20;
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.close-btn-film:hover {
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.08);
}

/* #endregion */









/* #region MARK: side buttons */

/* Fixed container anchored to top-right */
.button-container {
  position: fixed;
  top: 120px;
  right: 2px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;

  /* Smooth performance optimizations */
  will-change: opacity, transform;

  /* Transition handles opacity, slide, and delayed visibility for clean exit */
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s step-end;

  /* Hidden state (slid slightly to the right off-screen) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(15px);
}

/* Active state triggered by JS */
.button-container.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);

  /* Instantly make visible when showing */
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear;
}

@media(min-width: 1370px) {
  .button-container {
    position: fixed;
    top: 320px;
    right: 20px;
  }
}

/* Base Icon Button Styling */
.btn-icon {
  width: 48px;
  height: 48px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Default Inactive Blue Theme */
  background-color: rgba(15, 23, 42, 0.85);
  /* Dark slate blue background */
  border: 1px solid rgba(56, 189, 248, 0.3);
  /* Subtle blue border */
  border-radius: 10px;
  backdrop-filter: blur(8px);

  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

/* Hover State */
.btn-icon:hover {
  background-color: rgba(30, 41, 59, 0.95);
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.25);
}

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

/* ACTIVE STATE (Toggled via JS) */
.btn-icon.active {
  background-color: rgba(14, 165, 233, 0.25);
  /* Bright blue glow tint */
  border-color: #00f0ff;
  /* Vivid neon cyan */
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), inset 0 0 10px rgba(56, 189, 248, 0.3);
}

/* Change SVG glow color when active */
.btn-icon.active svg {
  filter: drop-shadow(0 0 6px #00f0ff);
}

.btn-icon svg {
  width: 100%;
  height: 100%;
  transition: filter 0.2s ease;
}

/* #endregion */




/* #region MARK: ARCHIVE TOAST */
/* 1. MOBILE-FIRST CENTERED ARCHIVE TOAST */
.archive-dashboard-toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 380px;
  background: #1e293b;
  border: 1px solid #334155;
  border-left: 4px solid #f59e0b;
  color: #f8fafc;
  padding: 3px 5px;
  align-items: center;
  justify-content: space-between;
  gap: 0px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  border-radius: 30px;
  z-index: 9999;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  display: none;
  /* Smooth Transition Properties */
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;

  /* DESKTOP INITIAL HIDDEN/OFFSCREEN STATE (Slid up and hidden) */
  opacity: 0;
  transform: translate(-50%, -150%);
  pointer-events: none;
}

/* DESKTOP ANIMATED VISIBLE STATE */
.archive-dashboard-toast.is-animated {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Left Archive Content Container */
.archive-toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.archive-toast-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.archive-toast-text {
  color: #cbd5e1;
  line-height: 1.3;
}

.archive-toast-action {
  color: #3b82f6;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.archive-toast-content:hover .archive-toast-action {
  color: #60a5fa;
}

/* Right Archive Dismiss Button */
.archive-toast-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 36px;
  min-height: 36px;
}

.archive-toast-close-btn:hover {
  color: #f8fafc;
  background-color: rgba(255, 255, 255, 0.1);
}

/* 2. CUSTOM ARCHIVE CONFIRMATION MODAL */
.archive-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.archive-modal-overlay.archive-active {
  opacity: 1;
  pointer-events: auto;
}

.archive-modal-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.2s ease;
  color: #f8fafc;
  box-sizing: border-box;
}

.archive-modal-overlay.archive-active .archive-modal-card {
  transform: scale(1);
}

.archive-modal-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.archive-modal-desc {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.archive-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.archive-btn {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  flex: 1;
  text-align: center;
}

@media (max-width: 480px) {
  .archive-dashboard-toast {
top:0px;
  width: calc(100% - 24px);
  max-width: 300px;

  padding: 3px 5px;

  gap: 0px;

  font-size: 10px;

}

.archive-toast-badge {
  
  font-size: 8px;
  font-weight: 700;

}
  .archive-btn {
    flex: initial;
  }
}

.archive-btn-secondary {
  background: transparent;
  color: #94a3b8;
  border: 1px solid #334155;
}

.archive-btn-primary {
  background: #3b82f6;
  color: #ffffff;
}


/* #endregion */


/* #region MARK: NEWS TOAST */

    /* Fullscreen Overlay - Blocks interactions across the page */
    .news-date-toast-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.35); /* Semi-transparent dimming */
      display: flex;
      justify-content: center;
      align-items: flex-start; /* Positions toast at the top */
      padding-top: 24px;
      z-index: 9999999;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    /* Class used to hide the overlay */
    .news-date-toast-overlay.news-date-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none; /* Allows clicks to pass through when hidden */
    }

    /* Toast Box Styling */
    .news-date-toast {
      display: flex;
      align-items: center;
      gap: 12px;
      top: 200;
      background-color: #0f172a;
      color: #ffffff;
      padding: 12px 24px;
      border-radius: 8px;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
      font-size: 14px;
      font-weight: 500;
      min-width: 240px;
      justify-content: center;
      transform: translateY(0);
      transition: transform 0.25s ease, background-color 0.3s ease;
    }

    .news-date-toast-overlay.news-date-hidden .news-date-toast {
      transform: translateY(-20px); /* Slide up when hidden */
    }

    /* Success & Error Colors */
    .news-date-toast.news-date-success {
      background-color: #15803d;
    }

    .news-date-toast.news-date-error {
      background-color: #b91c1c;
    }

    /* Loading Spinner */
    .news-date-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #ffffff;
      border-radius: 50%;
      animation: news-date-spin 0.8s linear infinite;
    }

    @keyframes news-date-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* Page UI Demo Elements */
    .news-date-demo-card {
      background: #ffffff;
      padding: 32px;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
      text-align: center;
      max-width: 400px;
      width: 90%;
    }


    .news-date-button-group {
      display: flex;
      gap: 12px;
      justify-content: center;
    }



    .news-date-btn-success {
      background-color: #22c55e;
      color: #ffffff;
    }

    .news-date-btn-success:hover {
      background-color: #16a34a;
    }

    .news-date-btn-fail {
      background-color: #ef4444;
      color: #ffffff;
    }

    .news-date-btn-fail:hover {
      background-color: #dc2626;
    }
/* #endregion */


/* #region MARK: SPLASH */

/* =========================================
       TV OVERLAY & MODAL
       ========================================= */
#iframeOverlay-splash {
  position: fixed;
  inset: 0;
  z-index: 99999999999999999999;
  overflow: hidden;
}

#iframeBack-splash {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 10, 0.96);
  animation: fadeBack-splash 0.35s ease;
}

#iframeModal-splash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #03060f;
  border: 1px solid rgba(0, 82, 255, 0.25);
  transform: translate(-50%, -50%) scaleY(0.002) scaleX(0);
  transform-origin: center center;
  animation: tvTurnOn-splash 1.10s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#iframeModal-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px,
      transparent 2px, transparent 4px);
  pointer-events: none;
  opacity: 0.18;
  z-index: 20;
}

#iframeView-splash {
  width: 100%;
  height: 100%;
  border: none;
  background: #03060f;
  opacity: 0;
  animation: screenAppear-splash 0.2s linear 0.45s forwards;
  position: relative;
}


/* =========================================
       FUTURISTIC LOADER
       ========================================= */
#iframeLoader-splash {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(0, 82, 255, 0.12), transparent);
  transition: opacity 0.45s ease, visibility 0.45s ease;
  opacity: 1;
  visibility: visible;
}

#iframeLoader-splash.hidden-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#iframeLoader-splash::before {
  content: "";
  position: absolute;
  inset: -200%;
  background: linear-gradient(rgba(0, 82, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 82, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(900px) rotateX(82deg);
  animation: holoGrid-splash 12s linear infinite;
}

#iframeLoader-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 82, 255, 0.15), transparent);
  animation: scanner-splash 2.2s linear infinite;
}

.loaderCore-splash {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loaderRing-splash {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 82, 255, 0.2);
}

.loaderRing-splash.r1 {
  width: 160px;
  height: 160px;
  border-top-color: #0052ff;
  animation: spin-splash 4s linear infinite;
}

.loaderRing-splash.r2 {
  width: 120px;
  height: 120px;
  border-right-color: #00a2ff;
  animation: spinReverse-splash 3s linear infinite;
}

.loaderRing-splash.r3 {
  width: 80px;
  height: 80px;
  border-left-color: #00f0ff;
  animation: spin-splash 2s linear infinite;
}

.loaderDot-splash {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 12px #0052ff;
  animation: pulseCore-splash 1.4s ease-in-out infinite;
}

/* Error mode styles for core ring */
#iframeLoader-splash.failed .loaderRing-splash {
  border-color: rgba(255, 0, 85, 0.2);
}

#iframeLoader-splash.failed .loaderRing-splash.r1,
#iframeLoader-splash.failed .loaderRing-splash.r2,
#iframeLoader-splash.failed .loaderRing-splash.r3 {
  border-color: transparent;
  border-top-color: #ff0055;
  animation-duration: 0.8s;
  /* Strobe faster on error */
}

#iframeLoader-splash.failed .loaderDot-splash {
  background: #ff0055;
  box-shadow: 0 0 12px #ff0055;
}

.loaderStatus-splash {
  position: absolute;
  bottom: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.loaderText-splash {
  font-size: 13px;
  letter-spacing: 4px;
  color: #00f0ff;
  font-family: monospace;
  text-shadow: 0 0 10px rgba(0, 82, 255, 0.85);
  animation: textBlink-splash 1.8s ease infinite;
}

#iframeLoader-splash.failed .loaderText-splash {
  color: #ff0055;
  text-shadow: 0 0 10px rgba(255, 0, 85, 0.85);
}

.progressBar-splash {
  width: 180px;
  height: 5px;
  background: rgba(0, 82, 255, 0.15);
  border: 1px solid rgba(0, 82, 255, 0.35);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 82, 255, 0.15);
}

#progressFill-splash {
  height: 100%;
  width: 0%;
  background: #00f0ff;
  box-shadow: 0 0 12px #0052ff;
  transition: none !important;
}

/* Retry Button */
#retryBtn-splash {
  display: none;
  padding: 6px 18px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ff0055;
  background: rgba(255, 0, 85, 0.1);
  border: 1px solid #ff0055;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.3);
  transition: all 0.2s ease;
  text-transform: uppercase;
}

#retryBtn-splash:hover {
  background: #ff0055;
  color: #000;
  box-shadow: 0 0 18px rgba(255, 0, 85, 0.8);
}

/* =========================================
       ANIMATIONS
       ========================================= */
@keyframes tvTurnOn-splash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0.001) scaleX(0);
    filter: brightness(4) blur(10px);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(0.004) scaleX(1);
    filter: brightness(3) blur(6px);
  }

  45% {
    transform: translate(-50%, -50%) scaleY(0.08) scaleX(1);
    filter: brightness(2.2) blur(3px);
  }

  70% {
    transform: translate(-50%, -50%) scaleY(1.02) scaleX(1.01);
    filter: brightness(1.15) blur(0.5px);
  }

  100% {
    transform: translate(-50%, -50%) scaleY(1) scaleX(1);
    filter: brightness(1) blur(0);
  }
}

@keyframes screenAppear-splash {
  to {
    opacity: 1;
  }
}

@keyframes fadeUI-splash {
  to {
    opacity: 1;
  }
}

@keyframes fadeBack-splash {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#iframeModal-splash.closing {
  animation: tvTurnOff-splash 0.5s cubic-bezier(.7, 0, .9, .3) forwards;
}

#iframeModal-splash.closing #iframeView-splash {
  opacity: 0;
  transition: opacity 0.2s;
}

@keyframes tvTurnOff-splash {
  0% {
    transform: translate(-50%, -50%) scaleY(1) scaleX(1);
    opacity: 1;
    filter: brightness(1.2);
  }

  45% {
    transform: translate(-50%, -50%) scaleY(0.02) scaleX(1);
    filter: brightness(3);
  }

  100% {
    transform: translate(-50%, -50%) scaleY(0.002) scaleX(0);
    opacity: 0;
    filter: brightness(6);
  }
}

@keyframes spin-splash {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse-splash {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes pulseCore-splash {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.8);
    opacity: 0.55;
  }
}

@keyframes holoGrid-splash {
  from {
    transform: perspective(900px) rotateX(82deg) translateY(0);
  }

  to {
    transform: perspective(900px) rotateX(82deg) translateY(40px);
  }
}

@keyframes scanner-splash {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes textBlink-splash {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* #endregion */