/* ========================================================
   MILITARY INTELLIGENCE DASHBOARD — DARK THEME
   ======================================================== */

/* ========== SECTION ORDER ==========================================
   1. Fonts
   2. CSS Variables (reset + :root)
   3. Base reset
   4. Header
   5. Stats bar
   6. Map
   7. Custom markers
   8. Animations
   9. Tooltips
   10. Shared panel utilities (.panel-glass, .panel-close-btn, scrollbar)
   11. Detail panel
   12. Legend
   13. Widgets (pizza, timer, marker-tooltip, country)
   14. Timeline panel
   15. Full chronology overlay
   16. Shared event entry classes (detail-chron + flog-event)
   17. Routes
   18. Miscellaneous (scanline, air route dash)
   19. Responsive
   =================================================================== */

/* ========== 1. FONTS ========== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./vendor/fonts/jetbrains-mono-300.woff2) format('woff2'),
       url(./vendor/fonts/jetbrains-mono-300.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./vendor/fonts/jetbrains-mono-400.woff2) format('woff2'),
       url(./vendor/fonts/jetbrains-mono-400.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./vendor/fonts/jetbrains-mono-500.woff2) format('woff2'),
       url(./vendor/fonts/jetbrains-mono-500.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./vendor/fonts/jetbrains-mono-600.woff2) format('woff2'),
       url(./vendor/fonts/jetbrains-mono-600.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./vendor/fonts/jetbrains-mono-700.woff2) format('woff2'),
       url(./vendor/fonts/jetbrains-mono-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./vendor/fonts/share-tech-mono-400.ttf) format('truetype');
}

/* ========== 2. CSS VARIABLES ========== */
:root {
  --bg-primary: #0a0e17;
  --bg-secondary: #0f1520;
  --bg-tertiary: #141c2b;
  --bg-panel: #111927;
  --border: #1a2537;
  --border-bright: #253040;

  --text-primary: #e0e6ed;
  --text-secondary: #8899aa;
  --text-muted: #556677;

  /* Faction colors — used by JS via FACTION_COLORS and directly in CSS selectors below */
  --us: #1e90ff;
  --us-stroke: #4da6ff;
  --us-glow: rgba(30, 144, 255, 0.6);

  --nato: #00c853;
  --nato-stroke: #33d975;
  --nato-glow: rgba(0, 200, 83, 0.6);

  --iran: #ff2d2d;
  --iran-stroke: #ff5555;
  --iran-glow: rgba(255, 45, 45, 0.6);

  --proxy: #ff9100;
  --proxy-stroke: #ffab40;
  --proxy-glow: rgba(255, 145, 0, 0.6);

  /* Israel shares blue with US, but has a white stroke */
  --israel: #1e90ff;
  --israel-stroke: #ffffff;
  --israel-glow: rgba(30, 144, 255, 0.6);

  --accent: #00d4ff;
  --accent-glow: rgba(0, 212, 255, 0.4);
  --war-red: #ff3333;
  --war-red-glow: rgba(255, 51, 51, 0.5);

  --font-mono: 'JetBrains Mono', 'Share Tech Mono', 'Courier New', monospace;
}

/* ========== 3. BASE RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* ========== 4. HEADER ========== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 52px;
  background: linear-gradient(180deg, rgba(10, 14, 23, 0.72), rgba(10, 14, 23, 0.65));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  text-shadow: 0 0 20px var(--accent-glow);
}

/* Faction name colors in the header title */
.ht-us { color: var(--us); }
.ht-nato { color: var(--nato); }
.ht-israel { color: #ffffff; }
.ht-iran { color: var(--iran); }
.ht-proxy { color: var(--proxy); }

.header-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

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

/* -- Language Switcher -- */
#visitor-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  border: 1px solid var(--border-bright);
  height: 34px;
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 8px;
  user-select: none;
  -webkit-user-select: none;
}
#lang-switcher {
  display: flex;
  gap: 2px;
  margin-right: 4px;
}
#lang-switcher .lang-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
}
#lang-switcher .lang-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}
#lang-switcher .lang-btn.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: var(--accent);
  color: var(--accent);
}

/* ========== 5. STATS BAR ========== */
#stats-bar {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 36px;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.stats-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
}

/* Base stats label — faction variants below add faction color */
.stats-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}

/* ---------------------------------------------------
   FACTION LABEL VARIANTS
   Pattern: background uses faction RGBA at 15% opacity,
   color uses the faction CSS variable,
   border uses faction RGBA at 30% opacity.
   Israel shares US blue but keeps its own selector
   for future differentiation.
   --------------------------------------------------- */
.stats-label-us {
  background: rgba(30, 144, 255, 0.15);
  color: var(--us);
  border: 1px solid rgba(30, 144, 255, 0.3);
}
.stats-label-nato {
  background: rgba(0, 200, 83, 0.15);
  color: var(--nato);
  border: 1px solid rgba(0, 200, 83, 0.3);
}
.stats-label-iran {
  background: rgba(255, 45, 45, 0.15);
  color: var(--iran);
  border: 1px solid rgba(255, 45, 45, 0.3);
}
.stats-label-proxy {
  background: rgba(255, 145, 0, 0.15);
  color: var(--proxy);
  border: 1px solid rgba(255, 145, 0, 0.3);
}
.stats-label-israel {
  background: rgba(30, 144, 255, 0.15);
  color: var(--israel);
  border: 1px solid rgba(30, 144, 255, 0.3);
  position: relative;
}

.stats-value {
  color: var(--text-primary);
  font-weight: 500;
}

.stats-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

.stats-divider {
  width: 1px;
  height: 20px;
  background: var(--border-bright);
  margin: 0 10px;
}

/* ========== 6. MAP ========== */
#map {
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #0a0e17;
}

/* ---- TILE LAYER STYLING ---- */

/* Base: CartoDB dark_nolabels — native dark theme, no CSS filter tricks */
/* No filter needed — natively dark land + dark ocean */

/* Labels on top — light labels for dark background.
   Applied via className: 'tile-labels' in Leaflet layer options. */
.tile-labels {
  opacity: 0.85;
}

/* Hide Leaflet attribution bar */
.leaflet-control-attribution {
  display: none !important;
}

.leaflet-control-zoom a {
  background: var(--bg-panel) !important;
  color: var(--accent) !important;
  border-color: var(--border) !important;
  font-family: var(--font-mono) !important;
}
.leaflet-control-zoom a:hover {
  background: var(--bg-tertiary) !important;
}

/* ========== 7. CUSTOM MARKERS ========== */

/* Invisible hit area for easier hover/click */
.marker-hit-area {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}

/* Base marker: static, no animation */
.marker-base {
  position: absolute;
  border-radius: 50%;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.marker-base:hover,
.custom-marker-wrapper:hover .marker-base {
  opacity: 1;
  transform: scale(1.2);
  z-index: 10000 !important;
}

/* ---------------------------------------------------
   FACTION MARKER BASE COLORS
   Pattern: radial-gradient using faction stroke→fill,
   1px border in stroke color, subtle box-shadow glow.
   Israel is same blue as US but has a 2px white border.
   --------------------------------------------------- */
.marker-us {
  background: radial-gradient(circle at 35% 35%, var(--us-stroke), var(--us));
  border: 1px solid var(--us-stroke);
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.3);
}
.marker-nato {
  background: radial-gradient(circle at 35% 35%, var(--nato-stroke), var(--nato));
  border: 1px solid var(--nato-stroke);
  box-shadow: 0 0 6px rgba(0, 200, 83, 0.3);
}
.marker-iran {
  background: radial-gradient(circle at 35% 35%, var(--iran-stroke), var(--iran));
  border: 1px solid var(--iran-stroke);
  box-shadow: 0 0 6px rgba(255, 45, 45, 0.3);
}
.marker-proxy {
  background: radial-gradient(circle at 35% 35%, var(--proxy-stroke), var(--proxy));
  border: 1px solid var(--proxy-stroke);
  box-shadow: 0 0 6px rgba(255, 145, 0, 0.3);
}
/* Israel — same blue as US, white 2px border */
.marker-israel {
  background: radial-gradient(circle at 35% 35%, var(--us-stroke), var(--israel));
  border: 2px solid #ffffff;
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.3), 0 0 4px rgba(255, 255, 255, 0.3);
}

/* ========== PULSATION — light event indicator ========== */
/* Gentle glow for markers with events in current update */
.marker-new {
  opacity: 1;
  animation: marker-pulse-light 2.4s ease-in-out infinite;
}

/* ---------------------------------------------------
   FACTION PULSATION GLOW — added to .marker-new
   Each faction has its own glow color via box-shadow.
   Israel gets an additional white glow layer.
   --------------------------------------------------- */
.marker-new.marker-us {
  box-shadow: 0 0 20px var(--us-glow), 0 0 50px rgba(30, 144, 255, 0.35);
}
.marker-new.marker-nato {
  box-shadow: 0 0 20px var(--nato-glow), 0 0 50px rgba(0, 200, 83, 0.35);
}
.marker-new.marker-iran {
  box-shadow: 0 0 20px var(--iran-glow), 0 0 50px rgba(255, 45, 45, 0.35);
}
.marker-new.marker-proxy {
  box-shadow: 0 0 20px var(--proxy-glow), 0 0 50px rgba(255, 145, 0, 0.35);
}
.marker-new.marker-israel {
  box-shadow: 0 0 20px var(--israel-glow), 0 0 50px rgba(30, 144, 255, 0.35), 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Expanding ring via separate div overlay — radar ping effect */
.pulse-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: ring-expand 2.5s ease-out infinite;
}

/* ---------------------------------------------------
   FACTION PULSE RING COLORS
   Pattern: 2px border in faction color, glow box-shadow.
   Israel uses white border with israel-glow shadow.
   --------------------------------------------------- */
.pulse-ring-us {
  border: 2px solid var(--us);
  box-shadow: 0 0 6px var(--us-glow);
}
.pulse-ring-nato {
  border: 2px solid var(--nato);
  box-shadow: 0 0 6px var(--nato-glow);
}
.pulse-ring-iran {
  border: 2px solid var(--iran);
  box-shadow: 0 0 6px var(--iran-glow);
}
.pulse-ring-proxy {
  border: 2px solid var(--proxy);
  box-shadow: 0 0 6px var(--proxy-glow);
}
.pulse-ring-israel {
  border: 2px solid #ffffff;
  box-shadow: 0 0 6px var(--israel-glow);
}

/* Second ring — staggered delay for double-ring effect */
.pulse-ring-2 {
  animation-delay: 1.25s;
}

/* (pulse-combat removed — only 3 marker types: static, light pulse, strike blast) */

/* ========== STRIKE POINT — damaged target, erratic blast-wave pulse ========== */
.pulse-strike-ring {
  position: absolute;
  pointer-events: none;
  animation: strike-expand 0.45s ease-out infinite;
}
.pulse-strike-ring svg {
  width: 100%;
  height: 100%;
}
.pulse-strike-ring-2 {
  animation-delay: 0.22s;
}
/* Regeneration class — briefly applied to swap SVG without flicker */
.pulse-strike-ring.regen { animation: none; opacity: 0; }

/* ---------------------------------------------------
   FACTION STRIKE RING COLORS
   Applied to the wrapper div; SVG path inherits stroke
   via CSS descendant selector (path has no class itself).
   Israel uses white stroke.
   --------------------------------------------------- */
.pulse-strike-ring-us   path { stroke: var(--us);   fill: none; stroke-width: 2; filter: drop-shadow(0 0 4px var(--us-glow)); }
.pulse-strike-ring-nato path { stroke: var(--nato); fill: none; stroke-width: 2; filter: drop-shadow(0 0 4px var(--nato-glow)); }
.pulse-strike-ring-iran path { stroke: var(--iran); fill: none; stroke-width: 2; filter: drop-shadow(0 0 4px var(--iran-glow)); }
.pulse-strike-ring-proxy  path { stroke: var(--proxy); fill: none; stroke-width: 2; filter: drop-shadow(0 0 4px var(--proxy-glow)); }
.pulse-strike-ring-israel path { stroke: #ffffff;   fill: none; stroke-width: 2; filter: drop-shadow(0 0 4px var(--israel-glow)); }

/* Marker flickering for strike targets */
.marker-strike {
  animation: marker-flicker 0.3s ease-in-out infinite alternate !important;
}

/* ========== 8. ANIMATIONS ========== */
@keyframes marker-pulse-light {
  0%   { transform: scale(1.0);  opacity: 0.9; }
  50%  { transform: scale(1.15); opacity: 1;   }
  100% { transform: scale(1.0);  opacity: 0.9; }
}

@keyframes ring-expand {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0;   }
}

@keyframes strike-expand {
  0%   { transform: scale(1);   opacity: 0.9; }
  40%  { transform: scale(1.2); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0;   }
}

@keyframes marker-flicker {
  0%   { opacity: 0.6;  }
  25%  { opacity: 1;    }
  50%  { opacity: 0.7;  }
  75%  { opacity: 0.95; }
  100% { opacity: 0.5;  }
}

@keyframes legend-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.8; }
  50%       { transform: scale(1.4); opacity: 1;   box-shadow: 0 0 12px var(--accent-glow); }
}

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

@keyframes timer-flash {
  0%   { background: rgba(0, 255, 136, 0.25); }
  100% { background: transparent; }
}

@keyframes dash-flow {
  from { stroke-dashoffset: 16; }
  to   { stroke-dashoffset: 0;  }
}

@keyframes route-pulse-ring {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2);   opacity: 0; }
}

/* ========== 9. TOOLTIPS ========== */
.custom-tooltip {
  background: rgba(15, 21, 32, 0.6) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  max-width: 340px !important;
  min-width: 200px !important;
  pointer-events: none;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.custom-tooltip::before {
  display: none !important;
}

.tooltip-inner {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ---------------------------------------------------
   FACTION TOOLTIP BORDER COLORS
   Pattern: border-left-color overrides the default accent.
   --------------------------------------------------- */
.tooltip-inner.tooltip-us     { border-left-color: var(--us); }
.tooltip-inner.tooltip-nato   { border-left-color: var(--nato); }
.tooltip-inner.tooltip-iran   { border-left-color: var(--iran); }
.tooltip-inner.tooltip-proxy  { border-left-color: var(--proxy); }
.tooltip-inner.tooltip-israel { border-left-color: var(--israel); }

.tooltip-faction {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ---------------------------------------------------
   FACTION TOOLTIP LABEL COLORS
   Pattern: each faction label uses its faction color variable.
   --------------------------------------------------- */
.tooltip-faction-us     { color: var(--us); }
.tooltip-faction-nato   { color: var(--nato); }
.tooltip-faction-iran   { color: var(--iran); }
.tooltip-faction-proxy  { color: var(--proxy); }
.tooltip-faction-israel { color: var(--israel); }

.tooltip-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.tooltip-summary {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.tooltip-new-badge {
  display: inline-block;
  background: rgba(0, 212, 255, 0.15);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  margin-left: 6px;
}
.tooltip-idx {
  display: inline-block;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
}
.detail-idx {
  display: inline-block;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin-right: 6px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* ========================================================
   10. SHARED PANEL UTILITIES
   .panel-glass  — glass-morphism backdrop shared by all panels/widgets
   .panel-close-btn — close button used by #detail-close and #full-log-close
   Scrollbar utility pattern documented below.
   ======================================================== */

/* Glass panel background — used by #detail-panel, #full-log-panel,
   #marker-tooltip-widget, #country-widget, #pizza-widget,
   #timer-widget, #legend, #timeline-panel.
   Note: each element keeps its own position/size/padding rules. */
.panel-glass {
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Shared close button — used by #detail-close and #full-log-close.
   Add class="panel-close-btn" alongside the existing IDs. */
.panel-close-btn,
#detail-close,
#full-log-close,
#analytics-close {
  background: none;
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
  font-size: 21px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: var(--font-mono);
  transition: all 0.2s;
}
.panel-close-btn:hover,
#detail-close:hover,
#full-log-close:hover,
#analytics-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--accent);
}

/* Scrollbar utility pattern — applied directly to #detail-body and #full-log-body.
   Both share the same 4-5px thin dark scrollbar style.
   If a new scrollable panel is added, mirror the same 4 rules. */
#detail-body::-webkit-scrollbar {
  width: 4px;
}
#detail-body::-webkit-scrollbar-track {
  background: transparent;
}
#detail-body::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 2px;
}
#detail-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

#full-log-body::-webkit-scrollbar       { width: 5px; }
#full-log-body::-webkit-scrollbar-track  { background: transparent; }
#full-log-body::-webkit-scrollbar-thumb  { background: var(--border-bright); border-radius: 3px; }
#full-log-body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ========== 11. DETAIL PANEL ========== */
#detail-panel {
  position: fixed;
  top: 88px;
  right: 0;
  width: 420px;
  bottom: 0;
  z-index: 1100;
  background: rgba(15, 21, 32, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateX(0);
  opacity: 1;
}

#detail-panel.hidden {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

#detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(15, 21, 32, 0.4);
  z-index: 1;
}

#detail-body {
  flex: 1;
  overflow-y: auto;
}

/* ---------------------------------------------------
   FACTION DETAIL HEADER TOP BORDER
   Pattern: 3px top border in faction color.
   --------------------------------------------------- */
#detail-header.detail-header-us     { border-top: 3px solid var(--us); }
#detail-header.detail-header-nato   { border-top: 3px solid var(--nato); }
#detail-header.detail-header-iran   { border-top: 3px solid var(--iran); }
#detail-header.detail-header-proxy  { border-top: 3px solid var(--proxy); }
#detail-header.detail-header-israel { border-top: 3px solid var(--israel); }

#detail-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  flex: 1;
}

/* #detail-close shares .panel-close-btn styles (defined in section 10) */
#detail-close {
  margin-left: 12px;
  flex-shrink: 0;
}

#detail-arrived {
  padding: 12px 20px;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}

#detail-description {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

#detail-assets {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.detail-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

#detail-assets-list {
  list-style: none;
  padding: 0;
}

#detail-assets-list li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 0 4px 14px;
  position: relative;
  line-height: 1.5;
}

#detail-assets-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 12px;
}

#detail-sources {
  padding: 16px 20px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  line-height: 1.5;
}

#detail-sources::before {
  content: 'ИСТОЧНИКИ: ';
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* Damage field inside detail panel body */
.detail-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.detail-damage-text {
  color: #ff4444;
  font-size: 12px;
  line-height: 1.5;
  padding: 0;
  white-space: pre-wrap;
}

/* ========== 12. LEGEND ========== */
#legend {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 998;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px 16px;
  min-width: 180px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.legend-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------------------------------------------------
   FACTION LEGEND DOT COLORS
   Pattern: background = faction color, border = stroke color,
   box-shadow = faction glow at 40%.
   Israel uses white border and a combined US+white glow.
   --------------------------------------------------- */
.legend-dot-us {
  background: var(--us);
  border: 2px solid var(--us-stroke);
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.4);
}
.legend-dot-nato {
  background: var(--nato);
  border: 2px solid var(--nato-stroke);
  box-shadow: 0 0 6px rgba(0, 200, 83, 0.4);
}
.legend-dot-iran {
  background: var(--iran);
  border: 2px solid var(--iran-stroke);
  box-shadow: 0 0 6px rgba(255, 45, 45, 0.4);
}
.legend-dot-proxy {
  background: var(--proxy);
  border: 2px solid var(--proxy-stroke);
  box-shadow: 0 0 6px rgba(255, 145, 0, 0.4);
}
.legend-dot-israel {
  background: var(--israel);
  border: 2px solid #ffffff;
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.4), 0 0 3px rgba(255, 255, 255, 0.4);
}
/* "Updated" indicator — accent color with pulse animation */
.legend-dot-new {
  background: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  animation: legend-pulse 1.5s ease-in-out infinite;
}

/* ========== 13. WIDGETS ========== */

/* ---- CASUALTIES WIDGET ---- */
#casualties-widget {
  position: fixed;
  left: 20px;
  z-index: 998;
  width: 230px;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px 10px;
  display: none; /* shown by JS after rendering */
  /* bottom is set dynamically by JS to sit above #legend */
}

.cas-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.cas-since {
  display: block;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: 0.6;
  font-size: 9px;
}

/* Column header row */
.cas-header-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding-left: 14px; /* align with faction names after dot */
}

.cas-hdr-name {
  flex: 1;
}

.cas-hdr {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  width: 44px;
  text-align: right;
}

.cas-hdr-killed { color: #ff4444; opacity: 0.7; }
.cas-hdr-wounded { color: #ffaa00; opacity: 0.7; }

/* Faction rows */
.cas-faction-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cas-faction-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cas-faction-name {
  flex: 1;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cas-num-col {
  width: 44px;
  text-align: right;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
}

.cas-killed {
  color: #ff4444;
}

.cas-wounded {
  color: #ffaa00;
}

.cas-dim {
  opacity: 0.3;
}

/* Sub-rows for military/civilian breakdown */
.cas-sub-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 14px;
  margin-bottom: 1px;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.4;
}

.cas-sub-label {
  flex: 1;
  color: var(--text-muted);
  opacity: 0.6;
  font-size: 9px;
  font-family: inherit;
}

.cas-sub-num {
  width: 44px;
  text-align: right;
}

/* Totals */
.cas-total {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  margin-top: 5px;
}

.cas-total-label {
  flex: 1;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  padding-left: 14px;
}

.cas-total-num {
  width: 44px;
  text-align: right;
  font-size: 11px;
}

.cas-total-killed {
  color: #ff4444;
}

.cas-total-wounded {
  color: #ffaa00;
}

.cas-note {
  font-size: 8px;
  color: var(--text-muted);
  opacity: 0.5;
  margin-top: 4px;
  line-height: 1.3;
}

/* ---- PIZZA INDEX WIDGET ---- */
#pizza-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 998;
  width: 300px;
  overflow: hidden;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px 8px;
  font-family: var(--font-mono);
}

.pizza-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.pizza-chart {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 52px;
  margin-bottom: 4px;
  overflow: visible;
  position: relative;
}

.pizza-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  flex: 1;
  min-width: 0;
  position: relative;
  transition: all 0.3s ease;
}

.pizza-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 3px;
  transition: opacity 0.2s;
}

.pizza-hour {
  font-size: 17px;
  color: var(--text-secondary);
  letter-spacing: 0;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 3px;
  font-weight: 600;
  z-index: 20;
  pointer-events: none;
}

.pizza-bar-col:hover .pizza-hour {
  display: block;
}

/* Hover tooltip on pizza bars */
.pizza-bar-col .pizza-bar-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
}
.pizza-bar-col:hover .pizza-bar-tooltip {
  display: block;
}

.pizza-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
}

.pizza-source {
  font-size: 8.5px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.pizza-source a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.pizza-source a:hover {
  color: #66bb6a;
}

.pizza-doughcon {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 3px;
  cursor: default;
}

/* ---- UPDATE TIMER WIDGET ---- */
#timer-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 998;
  width: 300px;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  display: flex;
  align-items: stretch;
  /* final bottom position is set by JS (positionTimerWidget) to sit above pizza widget */
}

.timer-left {
  flex: 1;
  min-width: 0;
}

.timer-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.timer-last {
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.timer-next {
  font-size: 10px;
  color: var(--text-secondary);
}

#countdown-display {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
}

/* Big countdown digit — last 60 seconds */
.timer-big-countdown {
  display: none; /* hidden by default, shown via JS adding .active */
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 29px;
  line-height: 1;
  color: var(--accent);
  padding: 0 10px 0 8px;
  letter-spacing: 2px;
  min-width: 44px;
  text-align: center;
  border-left: 1px solid var(--border);
  margin-left: 10px;
}

.timer-big-countdown.active {
  display: flex;
}

/* Urgent glow when ≤10s */
.timer-big-countdown.urgent {
  color: #ff4444;
  text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}

/* Flash animation on data arrival */
#timer-widget.data-arrived {
  animation: timer-flash 1.5s ease-out;
  border-color: var(--accent);
}

/* ---- MARKER TOOLTIP WIDGET (fixed right side, above country widget) ---- */
#marker-tooltip-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  z-index: 999;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  font-family: var(--font-mono);
  font-size: 12px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}
#marker-tooltip-widget.marker-tooltip-hidden {
  opacity: 0;
  pointer-events: none;
}
#mt-content .tooltip-inner {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ---- COUNTRY INFO HOVER WIDGET ---- */
#country-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  z-index: 999;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  font-family: var(--font-mono);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
#country-widget.country-widget-hidden {
  opacity: 0;
  pointer-events: none;
}

.country-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.country-widget-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.country-widget-faction {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------------------------------------------------
   FACTION COUNTRY WIDGET BADGE COLORS
   Pattern: semi-transparent background, faction-colored text,
   faction-colored border at ~35-40% opacity.
   Israel uses white text with US-blue background.
   Neutral uses gray.
   --------------------------------------------------- */
.cw-faction-us      { background: rgba(30,144,255,0.25);  color: #4da6ff; border: 1px solid rgba(30,144,255,0.4); }
.cw-faction-nato    { background: rgba(0,200,83,0.20);    color: #33d975; border: 1px solid rgba(0,200,83,0.35); }
.cw-faction-israel  { background: rgba(30,144,255,0.25);  color: #ffffff; border: 1px solid rgba(255,255,255,0.35); }
.cw-faction-iran    { background: rgba(255,45,45,0.25);   color: #ff5555; border: 1px solid rgba(255,45,45,0.4); }
.cw-faction-proxy   { background: rgba(255,145,0,0.25);   color: #ffab40; border: 1px solid rgba(255,145,0,0.4); }
.cw-faction-neutral { background: rgba(136,153,170,0.2);  color: #8899aa; border: 1px solid rgba(136,153,170,0.35); }

.country-widget-body {
  padding: 6px 12px 8px;
}

.country-widget-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
}

.cw-label {
  font-size: 10px;
  color: #6b7b8d;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cw-value {
  font-size: 12px;
  color: #c8d6e5;
  font-weight: 500;
  text-align: right;
}

.cw-value.cw-trend-up   { color: #43a047; }
.cw-value.cw-trend-down { color: #e53935; }

.country-widget-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.country-widget-footer {
  padding: 4px 12px 6px;
  font-size: 9px;
  color: #4a5568;
  letter-spacing: 0.5px;
  text-align: right;
  border-top: 1px solid var(--border);
}

/* Capital dot marker */
.capital-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 0 4px rgba(255,255,255,0.3);
}

/* ========== 14. TIMELINE PANEL ========== */
#timeline-panel {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  font-family: var(--font-mono);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,212,255,0.04);
  max-width: calc(100vw - 40px);
  min-width: 840px;
}

#tl-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#tl-controls-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.tl-btn:hover {
  background: rgba(0,212,255,0.1);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(0,212,255,0.2);
}

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

.tl-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.tl-btn-play {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.3);
  color: var(--accent);
  padding: 5px 12px;
}

.tl-btn-play:hover {
  background: rgba(0,212,255,0.18);
  box-shadow: 0 0 12px rgba(0,212,255,0.3);
}

.tl-btn-play.playing {
  background: rgba(255,200,0,0.1);
  border-color: rgba(255,200,0,0.3);
  color: #ffc800;
}

.tl-btn-play.playing:hover {
  background: rgba(255,200,0,0.2);
  box-shadow: 0 0 12px rgba(255,200,0,0.3);
}

#tl-progress-wrap {
  width: 100%;
  padding: 4px 0 2px;
  cursor: pointer;
}

#tl-progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: visible;
}
/* War zone background indicator on the track */
#tl-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--war-start-pct, 101%);
  right: 0;
  height: 100%;
  background: rgba(255, 51, 51, 0.12);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

#tl-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,212,255,0.5);
  transition: width 0.3s ease;
  pointer-events: none;
}

#tl-progress-thumb {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(0,212,255,0.7);
  pointer-events: none;
  transition: left 0.3s ease;
}

#tl-progress-wrap:hover #tl-progress-thumb {
  width: 13px;
  height: 13px;
}
/* Thumb hover glow color is inherited from inline style set by JS */

.tl-tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 10px;
  background: rgba(0, 212, 255, 0.8);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
.tl-tick-war {
  background: rgba(255, 51, 51, 0.6);
}
.tl-tick-active {
  background: var(--accent);
  width: 2px;
  box-shadow: 0 0 4px rgba(0,212,255,0.5);
}
.tl-tick-active.tl-tick-war {
  background: var(--war-red);
  box-shadow: 0 0 4px var(--war-red-glow);
}
.tl-tick-day {
  height: 14px;
  top: -5px;
  width: 1px;
  opacity: 0.5;
}

#tl-timestamp {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 130px;
  margin-left: 8px;
}

#tl-live-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #00ff88;
  background: rgba(0,255,136,0.1);
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: tl-live-blink 2s ease-in-out infinite;
}

/* Historical mode — red badge, clickable, returns to LIVE */
#tl-live-badge.tl-live-historical {
  color: #ff4444;
  background: rgba(255,68,68,0.1);
  border-color: rgba(255,68,68,0.3);
  animation: none;
  cursor: pointer;
  padding: 2px 7px;
  font-size: 10px;
  transition: all 0.15s ease;
  user-select: none;
}
#tl-live-badge.tl-live-historical:hover {
  background: rgba(255,68,68,0.25);
  border-color: rgba(255,68,68,0.6);
  box-shadow: 0 0 10px rgba(255,68,68,0.3);
  color: #ff6666;
}
#tl-live-badge.tl-live-historical:active {
  transform: scale(0.95);
}

/* ========== 15. FULL CHRONOLOGY OVERLAY ========== */
#full-log-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 8, 14, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}
#full-log-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#full-log-panel {
  width: 80vw;
  max-height: 80vh;
  background: rgba(15, 21, 32, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

#full-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#full-log-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
}

/* #full-log-close shares .panel-close-btn styles (defined in section 10) */

#full-log-body {
  overflow-y: auto;
  padding: 12px 20px 20px;
}

/* Update group inside full log */
.flog-update-group {
  margin-bottom: 20px;
}
.flog-update-group:last-child {
  margin-bottom: 0;
}

.flog-update-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ---- Full-log-only open button ---- */
/* -- Info button + popup -- */
#btn-info {
  background: none;
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
#btn-info:hover {
  background: var(--bg-tertiary);
  color: var(--accent);
  border-color: var(--accent);
}
#info-popup {
  position: fixed;
  width: 340px;
  background: rgba(15, 21, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
  z-index: 10000;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}
#info-popup.visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
#info-popup p {
  margin: 0 0 8px 0;
}
#info-popup p:last-child {
  margin-bottom: 0;
}
#info-popup ul {
  margin: 4px 0 8px 0;
  padding-left: 20px;
}
#info-popup ul li {
  margin-bottom: 2px;
}
#info-popup .info-popup-ai {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-style: italic;
}

#btn-full-log {
  background: none;
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
#btn-full-log:hover {
  background: var(--bg-tertiary);
  color: var(--accent);
  border-color: var(--accent);
}

/* ========================================================
   16. SHARED EVENT ENTRY STYLES
   .detail-chron-entry (detail panel) and .flog-event (full log)
   share the same event structure but differ in a few ways:
     - flog-event has faction left-border (always visible)
     - detail-chron-entry border is only shown on hover
     - flog-event has cursor: pointer (clickable to jump)
   Shared sub-elements: *-event-title / *-chron-event-title,
   *-event-desc / *-chron-desc, *-event-damage / *-chron-damage,
   *-event-sources / *-chron-sources.
   ======================================================== */

/* ---- Event entry: detail panel chronology ---- */
#detail-chronology {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.detail-chron-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

.detail-chron-entry {
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 2px solid transparent;
  transition: border-color 0.2s;
}

.detail-chron-entry:last-child {
  margin-bottom: 0;
}

.detail-chron-entry:hover {
  border-left-color: var(--accent);
}

/* Remove type-based always-on border colors — border only on hover now */

.detail-chron-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.detail-chron-ts {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.detail-chron-type-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  border: 1px solid;
}

/* Event type badge variants */
.badge-new        { color: #00ff88; background: rgba(0,255,136,0.08);  border-color: rgba(0,255,136,0.3); }
.badge-update     { color: var(--accent); background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.3); }
.badge-removal    { color: var(--iran); background: rgba(255,45,45,0.08); border-color: rgba(255,45,45,0.3); }
.badge-repositioning { color: var(--proxy); background: rgba(255,145,0,0.08); border-color: rgba(255,145,0,0.3); }

/* ---- Event entry: full log ---- */
.flog-event {
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  border-radius: 0 4px 4px 0;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 6px;
}
.flog-event:last-child { margin-bottom: 0; }

/* ---------------------------------------------------
   FACTION LEFT-BORDER COLORS for full-log events (always visible)
   Pattern: border-left-color = faction color variable.
   --------------------------------------------------- */
.flog-event.flog-faction-us     { border-left-color: var(--us); }
.flog-event.flog-faction-nato   { border-left-color: var(--nato); }
.flog-event.flog-faction-iran   { border-left-color: var(--iran); }
.flog-event.flog-faction-proxy  { border-left-color: var(--proxy); }
.flog-event.flog-faction-israel { border-left-color: var(--israel); }

/* Hover: tinted background + brighter text */
.flog-event:hover                   { background: rgba(255,255,255,0.03); }
.flog-event:hover .flog-event-title { color: #fff; }
.flog-event:hover .flog-event-desc  { color: var(--text-primary); }

/* ---------------------------------------------------
   FACTION HOVER BACKGROUNDS for full-log events
   Pattern: faction RGBA at 10-12% opacity on hover.
   --------------------------------------------------- */
.flog-event.flog-faction-us:hover     { background: rgba(30,144,255,0.12); }
.flog-event.flog-faction-nato:hover   { background: rgba(0,200,83,0.12); }
.flog-event.flog-faction-iran:hover   { background: rgba(255,45,45,0.10); }
.flog-event.flog-faction-proxy:hover  { background: rgba(255,145,0,0.10); }
.flog-event.flog-faction-israel:hover { background: rgba(30,144,255,0.12); }

.flog-event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.flog-event-target {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* ---- Shared sub-element styles (used by both detail-chron and flog-event) ---- */

/* Event title: same font/color in both contexts */
.detail-chron-event-title,
.flog-event-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.4;
}
/* detail-chron adds a slightly larger bottom margin */
.detail-chron-event-title { margin-bottom: 4px; }

/* Event description: same font/color in both contexts */
.detail-chron-desc,
.flog-event-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 3px;
}
.detail-chron-desc { margin-bottom: 4px; }

/* Damage sub-block: same style in both contexts */
.detail-chron-damage,
.flog-event-damage {
  font-size: 12px;
  color: #ff4444;
  line-height: 1.5;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: rgba(255, 68, 68, 0.06);
  border-left: 2px solid #ff4444;
  border-radius: 0 2px 2px 0;
}
.flog-event-damage {
  margin-top: 4px;
}

.detail-chron-damage-label,
.flog-event-damage-label {
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 11px;
}

/* Sources line: same style in both contexts */
.detail-chron-sources,
.flog-event-sources {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.detail-chron-sources::before,
.flog-event-sources::before {
  content: '\25B8 ';
  color: var(--accent);
  font-size: 10px;
}

/* ========== 17. ROUTE LINES — icons, dots & tooltips ========== */
.route-icon-wrapper {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.route-icon {
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.9));
  opacity: 0.8;
  pointer-events: none;
  cursor: pointer;
}

/* ---------------------------------------------------
   FACTION ROUTE ICON COLORS
   Pattern: color = faction color variable.
   Israel uses white.
   --------------------------------------------------- */
.route-icon-us     { color: var(--us); }
.route-icon-nato   { color: var(--nato); }
.route-icon-iran   { color: var(--iran); }
.route-icon-proxy  { color: var(--proxy); }
.route-icon-israel { color: #ffffff; }

/* Route dot (sea routes) */
.route-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.85;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Route pulse during timeline playback */
.route-icon-pulse,
.route-dot-pulse {
  position: relative;
}
.route-icon-pulse::after,
.route-dot-pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid currentColor;
  animation: route-pulse-ring 1.5s ease-out infinite;
  pointer-events: none;
}
.route-dot-pulse::after {
  border-color: inherit;
}

/* Route tooltip styling */
.route-tooltip-wrapper .leaflet-tooltip-content {
  padding: 0;
}

.route-tooltip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.4;
  max-width: 280px;
}

.route-tooltip-icon {
  font-size: 14px;
  margin-right: 4px;
  vertical-align: middle;
}

.route-tooltip-name {
  font-weight: 600;
  font-size: 12px;
  vertical-align: middle;
}

.route-tooltip-desc {
  margin-top: 3px;
  font-weight: 300;
  font-size: 11px;
  opacity: 0.85;
  line-height: 1.3;
}

.route-tooltip-ts {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-weight: 400;
  font-size: 11px;
  color: #aab;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ---------------------------------------------------
   FACTION ROUTE TOOLTIP COLORS
   Pattern: .route-tooltip-name and .route-tooltip-ts
   both use the faction color; ts has 0.8 opacity.
   --------------------------------------------------- */
.route-tooltip-us     .route-tooltip-name { color: var(--us); }
.route-tooltip-nato   .route-tooltip-name { color: var(--nato); }
.route-tooltip-iran   .route-tooltip-name { color: var(--iran); }
.route-tooltip-proxy  .route-tooltip-name { color: var(--proxy); }
.route-tooltip-israel .route-tooltip-name { color: var(--israel); }

.route-tooltip-us     .route-tooltip-ts { color: var(--us);    opacity: 0.8; }
.route-tooltip-nato   .route-tooltip-ts { color: var(--nato);  opacity: 0.8; }
.route-tooltip-iran   .route-tooltip-ts { color: var(--iran);  opacity: 0.8; }
.route-tooltip-proxy  .route-tooltip-ts { color: var(--proxy); opacity: 0.8; }
.route-tooltip-israel .route-tooltip-ts { color: var(--israel); opacity: 0.8; }

/* ---- Air route animated dash ---- */
.air-route-animated {
  animation: dash-flow 2.5s linear infinite;
}

/* ========== 18. MISCELLANEOUS ========== */

/* Scanline CRT overlay — subtle readability texture */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* ========== 19. RESPONSIVE ========== */
@media (max-width: 768px) {
  .header-title { font-size: 11px; letter-spacing: 1px; }
  .header-meta  { font-size: 9px; gap: 8px; }
  #stats-bar    { font-size: 10px; flex-wrap: wrap; height: auto; padding: 4px 10px; }
  .stats-section { gap: 4px; padding: 2px 8px; flex-wrap: wrap; }
  .stats-sep    { display: none; }
  #detail-panel { width: 100%; }
  #legend       { bottom: 10px; left: 10px; padding: 10px; }
  #casualties-widget { left: 10px; width: 200px; padding: 10px 12px 8px; }
  .cas-title { font-size: 10px; letter-spacing: 1.5px; }
  .cas-faction-row { font-size: 10px; }
  .cas-faction-name { font-size: 9px; }
  .cas-num-col { font-size: 9px; width: 38px; }
  .cas-hdr { font-size: 7px; width: 38px; }
  .cas-sub-row { font-size: 8px; padding-left: 12px; }
  .cas-sub-num { width: 38px; }
  .cas-total { font-size: 10px; }
  .cas-total-num { width: 38px; font-size: 10px; }
  .cas-note { font-size: 7px; }
  .legend-title { font-size: 10px; }
  .legend-item  { font-size: 11px; }
  #timeline-panel {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    max-width: 100%;
    min-width: unset;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 0 10px;
    gap: 6px;
  }
  #tl-timestamp {
    min-width: 90px;
    font-size: 10px;
  }
}

/* ===== SOURCE ANALYTICS OVERLAY ===== */
#analytics-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 8, 14, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}
#analytics-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#analytics-panel {
  width: 80vw;
  max-width: 720px;
  max-height: 80vh;
  background: rgba(15, 21, 32, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

#analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#analytics-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
}

#analytics-since {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

#analytics-body {
  overflow-y: auto;
  padding: 12px 20px 20px;
}

/* Analytics totals bar */
.sa-totals {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sa-total-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sa-total-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.sa-total-label {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Analytics table */
.sa-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-dim);
}
.sa-section-title:first-child {
  margin-top: 0;
}

.sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 4px;
}
.sa-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border-dim);
}
.sa-table th:not(:first-child) {
  text-align: right;
}
.sa-table td {
  padding: 3px 8px 3px 0;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.sa-table td:not(:first-child) {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.sa-table td.sa-name {
  font-weight: 600;
  color: var(--text-primary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-table tr:hover td {
  background: rgba(255,255,255,0.03);
}
.sa-hitrate-high { color: #4ade80; }
.sa-hitrate-mid  { color: #fbbf24; }
.sa-hitrate-low  { color: #f87171; }

/* Insights */
.sa-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.sa-insight-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 10px 12px;
}
.sa-insight-label {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.sa-insight-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.sa-insight-detail {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

@media (max-width: 600px) {
  #analytics-panel {
    width: 95vw;
    max-height: 90vh;
  }
  .sa-totals {
    gap: 12px;
  }
  .sa-insights {
    grid-template-columns: 1fr;
  }
  .sa-table {
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════
   AUTH POPUP
   ══════════════════════════════════════════════ */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11000;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.auth-overlay.hidden {
  display: none;
}
.auth-overlay.auth-fade-out {
  opacity: 0;
}

.auth-popup {
  background: rgba(12, 20, 35, 0.97);
  border: 1px solid rgba(100, 200, 255, 0.12);
  border-radius: 16px;
  padding: 36px 32px 32px;
  max-width: 400px;
  width: 92%;
  position: relative;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(100, 200, 255, 0.06) inset;
  animation: auth-popup-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes auth-popup-in {
  from { transform: scale(0.92) translateY(12px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.auth-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #667788;
  font-size: 22px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.auth-close:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #aabbcc;
}

.auth-back {
  position: absolute;
  top: 10px;
  left: 14px;
  background: none;
  border: none;
  color: #667788;
  font-size: 20px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.auth-back:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #aabbcc;
}

.auth-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-step.hidden {
  display: none;
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}
.auth-logo {
  margin-bottom: 12px;
}
.auth-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #e0e8f0;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.auth-subtitle {
  font-size: 13px;
  color: #7888a0;
  margin: 0;
  line-height: 1.5;
}
.auth-hint {
  font-size: 12px;
  color: #556677;
  margin: 8px 0 0;
}
.auth-icon-sent {
  font-size: 42px;
  margin-bottom: 12px;
  color: #7dd3fc;
}

.auth-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-family: inherit;
}
.auth-btn:active {
  transform: scale(0.98);
}

.auth-btn-google {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  border-color: rgba(0, 0, 0, 0.08);
}
.auth-btn-google:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
}

.auth-btn-apple {
  background: #000;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}
.auth-btn-apple:hover {
  background: #111;
  border-color: rgba(255, 255, 255, 0.25);
}

.auth-btn-email {
  background: rgba(100, 200, 255, 0.08);
  color: #a0c4e8;
  border-color: rgba(100, 200, 255, 0.15);
}
.auth-btn-email:hover {
  background: rgba(100, 200, 255, 0.14);
  border-color: rgba(100, 200, 255, 0.25);
}

.auth-btn-submit {
  background: rgba(100, 200, 255, 0.18);
  color: #7dd3fc;
  border-color: rgba(100, 200, 255, 0.3);
}
.auth-btn-submit:hover {
  background: rgba(100, 200, 255, 0.25);
}
.auth-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  width: 100%;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.auth-divider span {
  font-size: 12px;
  color: #556677;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-email-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-email-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #e0e8f0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.auth-email-form input[type="email"]:focus {
  border-color: rgba(100, 200, 255, 0.4);
}
.auth-email-form input[type="email"]::placeholder {
  color: #445566;
}

.auth-status {
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
}
.auth-status.auth-status-error {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}
.auth-status.auth-status-success {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
}