/*
 * MandelaMap — Visual Polish v1
 * ─────────────────────────────────────────────────────────────
 * Drop-in override. Link AFTER shell.php's <style> block.
 * Touches: atmosphere, depth, typography, cards, rails, map,
 *          header, footer, interactions. Zero layout changes.
 * ─────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════
   1. TOKEN REFINEMENTS
   Warmer amber, slightly brighter panel surfaces,
   richer border palette, deeper glow radii.
═══════════════════════════════════════════════ */
:root {
  /* Slightly warmer, more saturated amber */
  --amber:       #f0a832;
  --amber-dim:   #8a5c18;
  --amber-glow:  rgba(240,168,50,.18);

  /* Teal pulled slightly green for more life */
  --cyan:        #22d4ee;
  --cyan-dim:    #0b4e5e;

  /* Panel surfaces: a hair lighter so text reads easier */
  --bg:   #020e11;
  --bg2:  #041318;
  --bg3:  #071c22;
  --panel:#0a2028;

  /* Borders: more visible without being harsh */
  --border:        #1e5560;
  --border-bright: #2e8898;
  --border-subtle: #112830;

  /* Glow tokens: tighter, more focused */
  --glow-amber: 0 0 6px rgba(240,168,50,.55), 0 0 20px rgba(240,168,50,.18);
  --glow-cyan:  0 0 6px rgba(34,212,238,.50), 0 0 20px rgba(34,212,238,.16);
  --glow-green: 0 0 6px rgba(32,232,160,.50), 0 0 20px rgba(32,232,160,.16);
  --glow-red:   0 0 6px rgba(232,40,80,.50),  0 0 20px rgba(232,40,80,.16);

  /* Typography rhythm */
  --fs-micro: 8px;
  --fs-tiny:  9px;
  --fs-small: 11px;
  --fs-body:  12px;
  --ls-wide:  3px;
  --ls-med:   2px;
  --ls-tight: 1px;

  /* Radius — hairline only, keep the hard-edged aesthetic */
  --r: 1px;

  /* Transition */
  --t: .18s ease;
}


/* ═══════════════════════════════════════════════
   2. ATMOSPHERE
   Scanlines + very subtle vignette. Both kept
   light enough that they're felt, not seen.
═══════════════════════════════════════════════ */

/* Scanlines — thin, low opacity, non-interruptive */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, .08) 3px,
    rgba(0, 0, 0, .08) 4px
  );
  pointer-events: none;
  z-index: 9999;
  opacity: 1;         /* was 0 — activating */
}

/* Vignette — darkens corners, draws eye to center */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    transparent 55%,
    rgba(0, 0, 0, .45) 100%
  );
  pointer-events: none;
  z-index: 9998;
  opacity: 1;         /* was 0 — activating */
}

/* Subtle animated noise texture on the body */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* ═══════════════════════════════════════════════
   3. HEADER
   More presence. Amber accent line at top.
   Logo: tighter tracking, stronger glow pulse.
═══════════════════════════════════════════════ */
header {
  background: linear-gradient(180deg, #051820 0%, var(--bg2) 100%);
  border-bottom-color: var(--border-bright);
  box-shadow: 0 1px 0 var(--border-bright),
              0 4px 24px rgba(0,0,0,.6);
  /* Amber accent stripe at very top */
  position: relative;
}
header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--amber) 20%,
    var(--cyan) 80%,
    transparent 100%
  );
  opacity: .55;
}

/* Logo — breathing glow instead of static */
.logo {
  letter-spacing: 5px;
  animation: glitch 9s infinite, logoBreath 4s ease-in-out infinite;
}
@keyframes logoBreath {
  0%, 100% { text-shadow: var(--glow-amber); }
  50%       { text-shadow: 0 0 12px rgba(240,168,50,.7), 0 0 40px rgba(240,168,50,.25); }
}
.logo small {
  letter-spacing: 3px;
  opacity: .7;
}

/* Tabs — cleaner active indicator with a top bar instead of bottom */
.tab {
  border-bottom: none;
  border-top: 2px solid transparent;
  font-size: 10px;
  letter-spacing: var(--ls-med);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.tab:hover {
  background: rgba(255,255,255,.02);
  color: var(--text);
}
.tab.active {
  border-top-color: var(--amber);
  border-bottom: none;
  color: var(--amber);
  background: linear-gradient(180deg, rgba(240,168,50,.07) 0%, transparent 100%);
}

/* Buttons — pill-like, slightly more padding */
.btn {
  border-radius: var(--r);
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: var(--ls-med);
  transition: all var(--t);
}
.btn-primary {
  background: linear-gradient(135deg, rgba(240,168,50,.08), rgba(240,168,50,.04));
  border-color: rgba(240,168,50,.55);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(240,168,50,.16), rgba(240,168,50,.08));
  box-shadow: var(--glow-amber), inset 0 1px 0 rgba(240,168,50,.12);
}

/* Live pill */
.live-pill {
  background: rgba(32,232,160,.06);
  border: 1px solid rgba(32,232,160,.18);
  padding: 3px 8px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-med);
}


/* ═══════════════════════════════════════════════
   4. SIDE RAILS
   Layered panel surfaces. Section headers
   get a left-accent bar for visual hierarchy.
═══════════════════════════════════════════════ */
.map-left, .map-right {
  background: linear-gradient(180deg, rgba(5,18,24,.98), rgba(4,14,18,.98));
  box-shadow: inset -1px 0 0 var(--border-subtle);
}
.map-right {
  box-shadow: inset 1px 0 0 var(--border-subtle);
}

.side-header {
  background: linear-gradient(180deg, rgba(8,25,32,.9), rgba(5,18,24,.6));
  padding: 10px 14px 9px;
  border-bottom-color: var(--border);
  position: relative;
}
.side-header::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--cyan), transparent);
  opacity: .6;
}
.side-title {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--cyan);
  opacity: 1;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(34,212,238,.45);
}
.side-subtitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 2px;
  color: var(--text-bright);
}


/* ═══════════════════════════════════════════════
   5. RANK / RECENT ITEMS
   More depth, left color bar that changes per rank,
   hover lifts with glow instead of just border-swap.
═══════════════════════════════════════════════ */
.rank-item {
  background: linear-gradient(135deg, rgba(9,24,30,.95), rgba(7,20,26,.95));
  border-color: var(--border-subtle);
  border-radius: var(--r);
  padding: 9px 11px;
  transition: all var(--t);
  position: relative;
}
/* Left rank stripe */
.rank-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--amber);
  opacity: .3;
  transition: opacity var(--t);
}
.rank-item:hover {
  border-color: var(--border-bright);
  background: linear-gradient(135deg, rgba(14,36,46,.95), rgba(10,28,36,.95));
  transform: translateX(1px);
  box-shadow: 2px 0 12px rgba(0,0,0,.3);
}
.rank-item:hover::before {
  opacity: .85;
}
/* Bottom sweep stays */
.rank-item::after {
  background: linear-gradient(90deg, var(--amber), transparent);
}

.rank-num {
  font-size: 26px;
  color: rgba(240,168,50,.35);
  min-width: 26px;
}
.rank-item:hover .rank-num {
  color: rgba(240,168,50,.75);
}

.rank-bar {
  height: 1px;
  margin-top: 6px;
  background: var(--border-subtle);
}
.rank-bar-fill {
  background: linear-gradient(90deg, var(--amber), rgba(240,168,50,.3));
}

.recent-item {
  background: linear-gradient(135deg, rgba(9,24,30,.95), rgba(7,20,26,.95));
  border-color: var(--border-subtle);
  border-radius: var(--r);
  transition: all var(--t);
}
.recent-item:hover {
  border-color: var(--border-bright);
  background: linear-gradient(135deg, rgba(14,36,46,.95), rgba(10,28,36,.95));
  transform: translateX(1px);
}
.recent-time {
  font-size: var(--fs-micro);
  opacity: .55;
}


/* ═══════════════════════════════════════════════
   6. QUICK SUBMIT / SEARCH PANEL
   Slightly raised from the rail surface.
═══════════════════════════════════════════════ */
.quick-submit {
  background: linear-gradient(0deg, rgba(5,16,20,.98), rgba(4,13,17,.92));
  border-top-color: var(--border);
  padding: 12px 13px;
}
.qs-title {
  letter-spacing: var(--ls-wide);
  opacity: .6;
  margin-bottom: 9px;
}
.qs-input {
  background: rgba(4,12,16,.9);
  border-color: var(--border);
  border-radius: var(--r);
  transition: all var(--t);
  font-size: 10px;
}
.qs-input:focus {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan), 0 0 0 3px rgba(34,212,238,.05);
}
.qs-btn {
  background: linear-gradient(135deg, rgba(240,168,50,.1), rgba(240,168,50,.04));
  border-color: rgba(240,168,50,.4);
  letter-spacing: var(--ls-med);
  transition: all var(--t);
}
.qs-btn:hover {
  background: linear-gradient(135deg, rgba(240,168,50,.18), rgba(240,168,50,.08));
  box-shadow: var(--glow-amber);
}


/* ═══════════════════════════════════════════════
   7. MAP CHROME
   HUD gets frosted glass treatment.
   Tooltip is more substantial with a color header bar.
   Breadcrumb: more readable.
═══════════════════════════════════════════════ */
#country-hud {
  background: rgba(3,12,16,.94);
  border-color: var(--border-bright);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0,0,0,.55),
              0 0 0 1px rgba(34,212,238,.08) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 14px;
}
.hud-name {
  font-size: 24px;
  letter-spacing: 4px;
  line-height: 1.1;
}
.hud-sub   { opacity: .65; margin-top: 2px; }
.hud-effects { margin-top: 4px; }

#mtt {
  background: rgba(3,12,16,.97);
  border-color: var(--border-bright);
  border-radius: var(--r);
  box-shadow:
    0 0 0 1px rgba(34,212,238,.08) inset,
    0 16px 48px rgba(0,0,0,.7),
    0 0 40px rgba(34,212,238,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Cyan accent line at top of tooltip */
#mtt::before {
  content: '';
  display: block;
  height: 1px;
  margin: -12px -16px 10px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .4;
}
.mtt-title {
  font-size: 13px;
  line-height: 1.4;
}

.map-breadcrumb {
  background: rgba(3,10,14,.92);
  border-color: var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  letter-spacing: var(--ls-med);
}

.map-back-btn {
  border-radius: var(--r);
  backdrop-filter: blur(8px);
}


/* ═══════════════════════════════════════════════
   8. DETAIL PANEL
   Richer header gradient, vote rows with
   more visible fill bars, frosted background.
═══════════════════════════════════════════════ */
#detail-panel {
  background: rgba(3,10,14,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left-color: var(--border-bright);
  box-shadow: -20px 0 60px rgba(0,0,0,.75), -1px 0 0 var(--border-bright);
}
.dp-hdr {
  background: linear-gradient(180deg, rgba(8,24,32,.9), rgba(4,14,18,.6));
  border-bottom-color: var(--border);
}

.dp-vote-row {
  border-radius: var(--r);
  background: rgba(6,18,24,.8);
  border-color: var(--border-subtle);
  transition: all var(--t);
  padding: 9px 12px;
}
.dp-vote-row::after {
  height: 3px;         /* slightly thicker fill bar */
  border-radius: 0 0 var(--r) var(--r);
}
.dp-vote-row:hover {
  background: rgba(12,30,40,.9);
}
.dp-vote-row.sel-r { box-shadow: 0 0 0 1px rgba(32,232,160,.15) inset; }
.dp-vote-row.sel-d { box-shadow: 0 0 0 1px rgba(232,40,80,.15) inset; }
.dp-vote-row.sel-u { box-shadow: 0 0 0 1px rgba(240,168,50,.15) inset; }

.dv-pct { font-size: 28px; }

.ev-item {
  border-color: var(--border-subtle);
  background: rgba(6,18,24,.7);
  border-radius: var(--r);
}
.ev-who { letter-spacing: var(--ls-med); }


/* ═══════════════════════════════════════════════
   9. EFFECT CARDS (Registry)
   The biggest upgrade. Cards go from flat
   wireframes to layered, dimensional objects.
═══════════════════════════════════════════════ */

/* Card shell */
.ecard {
  border-color: var(--border);
  background: linear-gradient(
    160deg,
    rgba(10,28,36,.98) 0%,
    rgba(6,18,24,.98) 60%,
    rgba(4,13,18,.98) 100%
  );
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(18,50,64,.6) inset,
    0 1px 0 rgba(34,212,238,.06) inset,    /* top sheen */
    0 20px 40px rgba(0,0,0,.4),
    0 4px 8px rgba(0,0,0,.3);
  transition: border-color var(--t), transform .2s ease, box-shadow .2s ease;
}
.ecard:hover {
  border-color: var(--border-bright);
  transform: translateY(-2px) scale(1.003);
  box-shadow:
    0 0 0 1px rgba(30,80,100,.7) inset,
    0 1px 0 rgba(34,212,238,.12) inset,
    0 28px 56px rgba(0,0,0,.55),
    0 8px 16px rgba(0,0,0,.4),
    0 0 40px rgba(34,212,238,.04);
}

/* Hero zone: no image — styled pattern background */
.ec-hero {
  background: linear-gradient(
    145deg,
    rgba(6,20,28,.95) 0%,
    rgba(8,26,36,.95) 40%,
    rgba(4,14,20,.95) 100%
  );
  border-bottom-color: var(--border);
  position: relative;
  overflow: hidden;
}
/* Subtle diagonal grid pattern in hero */
.ec-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34,212,238,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,212,238,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
}
/* Gradient overlay on hero */
.ec-hero::after {
  background: linear-gradient(
    180deg,
    rgba(2,8,12,.1) 0%,
    rgba(2,8,12,.04) 40%,
    rgba(2,8,12,.85) 100%
  );
}

/* Title chip on card hero */
.ec-title-chip {
  background: rgba(3,10,14,.92);
  border-color: rgba(240,168,50,.45);
  box-shadow: 0 0 20px rgba(0,0,0,.5), 0 0 0 1px rgba(240,168,50,.06) inset;
  letter-spacing: 0;
  font-size: 14px;
  backdrop-filter: blur(6px);
}

/* Card body */
.ec-body {
  padding: 14px;
  background: transparent;
}

/* Stat boxes */
.ec-stat {
  background: rgba(5,16,22,.85);
  border-color: var(--border-subtle);
  border-radius: var(--r);
  padding: 9px 10px;
  transition: border-color var(--t);
  position: relative;
  overflow: hidden;
}
.ec-stat::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,212,238,.12), transparent);
}
.ecard:hover .ec-stat { border-color: var(--border); }
.ec-stat-label { letter-spacing: var(--ls-wide); }
.ec-stat-value { font-size: 28px; line-height: 1; }

.ec-stat.shared   .ec-stat-value { text-shadow: 0 0 16px rgba(32,232,160,.4); }
.ec-stat.accepted .ec-stat-value { text-shadow: 0 0 16px rgba(34,212,238,.4); }
.ec-stat.unknown  .ec-stat-value { text-shadow: 0 0 16px rgba(240,168,50,.4); }

/* Meta pills */
.ec-meta-pill {
  background: rgba(5,16,22,.82);
  border-color: var(--border-subtle);
  border-radius: var(--r);
  transition: border-color var(--t);
}
.ecard:hover .ec-meta-pill { border-color: var(--border); }

/* Accordion button */
.ec-accordion-btn {
  border-style: solid;
  border-color: var(--border-subtle);
  background: rgba(4,13,18,.7);
  border-radius: var(--r);
  transition: all var(--t);
}
.ec-accordion-btn:hover {
  border-color: rgba(240,168,50,.5);
  background: rgba(240,168,50,.05);
  box-shadow: 0 0 16px rgba(240,168,50,.06);
}

/* Tags — slightly more vibrant */
.tag { border-radius: 1px; }
.tag-pop   { background: rgba(240,168,50,.08); border-color: rgba(240,168,50,.35); }
.tag-geo   { background: rgba(34,212,238,.08); border-color: rgba(34,212,238,.35); }
.tag-media { background: rgba(192,112,255,.08); border-color: rgba(192,112,255,.35); }
.tag-logo  { background: rgba(32,232,160,.08); border-color: rgba(32,232,160,.35); }
.tag-hot   { background: rgba(232,40,80,.1);   border-color: rgba(232,40,80,.35); }

/* Effects grid spacing */
.effects-shell { padding: 20px 22px; }
.effects-head  { margin-bottom: 22px; }
.effects-title { letter-spacing: 2px; }
.effects-kicker {
  letter-spacing: 4px;
  font-size: var(--fs-micro);
}
.effects-subtitle { color: rgba(176,216,224,.7); line-height: 1.8; }

/* Search / sort inputs */
.effects-search,
.effects-sort {
  background: rgba(4,13,18,.92);
  border-color: var(--border);
  border-radius: var(--r);
  transition: all var(--t);
}
.effects-search:focus,
.effects-sort:focus {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan), 0 0 0 3px rgba(34,212,238,.05);
  outline: none;
}


/* ═══════════════════════════════════════════════
   10. FOOTER STATS BAR
   Subtle gradient background. Numbers glow
   when hovered. Dividers softer.
═══════════════════════════════════════════════ */
.app-footer {
  background: linear-gradient(0deg, rgba(3,10,14,.99), rgba(4,13,18,.98));
  border-top-color: var(--border);
  box-shadow: 0 -1px 0 var(--border-subtle);
}
.foot-stat {
  border-right-color: var(--border-subtle);
  transition: background var(--t);
}
.foot-stat:hover {
  background: rgba(240,168,50,.03);
}
.foot-num {
  transition: color var(--t), text-shadow var(--t);
}
.foot-stat:hover .foot-num {
  color: var(--amber);
  text-shadow: var(--glow-amber);
}
.foot-lbl { letter-spacing: 3px; }


/* ═══════════════════════════════════════════════
   11. SCROLLBARS
   Thicker thumb with glow on hover.
═══════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }


/* ═══════════════════════════════════════════════
   12. MODALS
   Frosted, deeper shadow, amber title glow.
═══════════════════════════════════════════════ */
.modal {
  background: rgba(4,13,18,.98);
  border-color: var(--border-bright);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(34,212,238,.06) inset,
    0 32px 80px rgba(0,0,0,.8),
    0 0 60px rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.mhdr {
  background: linear-gradient(180deg, rgba(8,24,32,.9), rgba(4,14,18,.6));
  border-bottom-color: var(--border);
}
.mtitle {
  letter-spacing: 4px;
  text-shadow: var(--glow-amber);
}
.modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Form inputs in modals */
.fi2, .ft, .fs2, .auth-input {
  background: rgba(3,10,14,.95);
  border-color: var(--border);
  border-radius: var(--r);
  transition: all var(--t);
}
.fi2:focus, .ft:focus, .auth-input:focus {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan), 0 0 0 3px rgba(34,212,238,.05);
  background: rgba(4,14,20,.98);
}


/* ═══════════════════════════════════════════════
   13. NOTIFICATION TOAST
   Matches modal language.
═══════════════════════════════════════════════ */
#notif {
  background: rgba(4,13,18,.98);
  border-color: var(--green);
  border-radius: var(--r);
  box-shadow: var(--glow-green), 0 8px 32px rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  letter-spacing: var(--ls-med);
  font-size: 10px;
}


/* ═══════════════════════════════════════════════
   14. SEARCH SUGGEST DROPDOWN
   Frosted, consistent with modal language.
═══════════════════════════════════════════════ */
.search-suggest-list {
  background: rgba(4,12,16,.98);
  border-color: var(--border-bright);
  border-radius: var(--r);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
}
.search-suggest-item:hover,
.search-suggest-item.active {
  background: rgba(34,212,238,.06);
}
.search-suggest-label { font-size: 11px; }
.search-suggest-meta  { font-size: var(--fs-micro); opacity: .6; }


/* ═══════════════════════════════════════════════
   15. EFFECT SELECTOR (heatmap panel)
   Slightly elevated from background.
═══════════════════════════════════════════════ */
.es-search {
  background: rgba(4,13,18,.92);
  border-color: var(--border);
  border-radius: var(--r);
  font-size: 10px;
  transition: all var(--t);
}
.es-search:focus {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}
.es-item {
  border-radius: var(--r);
  font-size: 11px;
  line-height: 1.4;
  transition: all var(--t);
}
.es-item:hover {
  background: rgba(34,212,238,.04);
  border-color: var(--border);
}
.es-item.selected {
  background: rgba(240,168,50,.07);
  border-color: rgba(240,168,50,.45);
  box-shadow: 0 0 0 1px rgba(240,168,50,.08) inset;
}
.es-clear {
  border-radius: var(--r);
  font-size: var(--fs-micro);
  transition: all var(--t);
}
.es-clear:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(232,40,80,.04);
}


/* ═══════════════════════════════════════════════
   16. MAP COUNTRY PATHS
   Richer default fill, more visible hover state,
   heatmap tiers have more contrast range.
═══════════════════════════════════════════════ */
.country-path {
  fill: #0b2535;
  stroke: #1a5568;
  stroke-width: .38;
}
.country-path.hovered {
  fill: #1a607a;
  stroke: #35aec8;
  stroke-width: .5;
}
.country-path.zoomed-country {
  fill: #0f3d4e;
  stroke: var(--cyan);
  stroke-width: .5;
}

/* Heatmap: wider visible range */
.country-path.heat-0 { fill: #0b2535; }
.country-path.heat-1 { fill: #0d3d52; }
.country-path.heat-2 { fill: #0f5068; }
.country-path.heat-3 { fill: #116280; }
.country-path.heat-4 { fill: #137698; }
.country-path.heat-5 { fill: #158cb2; }

.sphere-fill   { fill: #071420; }
.graticule-line { stroke: rgba(34,212,238,.08); }


/* ═══════════════════════════════════════════════
   17. ACCOUNT DROPDOWN
   Frosted, consistent with modals.
═══════════════════════════════════════════════ */
.account-dropdown-shell {
  background: rgba(4,13,18,.98);
  border-color: var(--border-bright);
  border-radius: 2px;
  box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(34,212,238,.05) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.account-dropdown-shell a {
  border-radius: var(--r);
  font-size: 10px;
  letter-spacing: var(--ls-med);
}
.account-dropdown-shell a:hover {
  background: rgba(34,212,238,.07);
  border-color: var(--border-bright);
}


/* ═══════════════════════════════════════════════
   18. MOBILE NAV (from polish.css perspective)
   Reinforce glass quality of the bottom drawer.
═══════════════════════════════════════════════ */
.mob-nav {
  background: rgba(3,10,14,.97);
  border-top-color: var(--border-bright);
  box-shadow: 0 -8px 24px rgba(0,0,0,.5), 0 -1px 0 var(--border-bright);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.mob-drawer {
  background: rgba(4,13,18,.98);
  border-top-color: var(--border-bright);
  box-shadow: 0 -12px 40px rgba(0,0,0,.7), 0 -1px 0 var(--border-bright);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* ═══════════════════════════════════════════════
   19. SUBTLE GLOW ON ACTIVE FOCUSED ELEMENTS
   Inputs, focused buttons, etc.
═══════════════════════════════════════════════ */
*:focus-visible {
  outline: 1px solid rgba(34,212,238,.5);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(34,212,238,.08);
}


/* ═══════════════════════════════════════════════
   TRADING CARD UPGRADE + MOBILE 2-COL GRID
   Applied via polish.css or standalone theme file
═══════════════════════════════════════════════ */

/* ── Mobile: keep stat rows as 3 columns ── */
/* Overrides shell.css @media(max-width:980px) which collapses to 1fr */
@media (max-width: 900px) {
  .ec-row.ec-row-3,
  .ec-row.ec-row-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── TRADING CARD: Holographic foil shimmer ── */
.ecard {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .18s ease !important;
}

/* Foil layer — animated rainbow shimmer on hover */
.ecard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(34,212,238,.08) 30%,
    rgba(232,130,26,.06) 40%,
    rgba(192,112,255,.06) 50%,
    rgba(34,212,238,.08) 60%,
    transparent 70%
  );
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 4;
  animation: none;
}
.ecard:hover::after {
  opacity: 1;
  animation: foilShimmer 2s linear infinite;
}
@keyframes foilShimmer {
  0%   { background-position: 200% 0%; }
  100% { background-position: -200% 0%; }
}

/* Deeper hover lift */
.ecard:hover {
  transform: translateY(-4px) scale(1.012) !important;
  box-shadow:
    0 0 0 1px rgba(34,212,238,.15) inset,
    0 32px 64px rgba(0,0,0,.65),
    0 0 40px rgba(34,212,238,.08),
    0 0 80px rgba(34,212,238,.04) !important;
}

/* ── Card header: rarity stripe ── */
.ecard {
  border-top-width: 3px !important;
}
/* Rarity by tag type — orange=POP, cyan=GEO, purple=MEDIA, green=LOGO */
.ecard[id] { border-top-color: rgba(34,212,238,.5) !important; }

/* ── Hero: always show a minimum height, grid pattern ── */
.ec-hero {
  min-height: 140px;
  background: linear-gradient(145deg, #0e1420 0%, #0a1018 100%);
}

/* ── Title chip: more dramatic ── */
.ec-title-chip {
  font-family: 'Courier Prime', 'Share Tech Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-width: 1px !important;
  border-color: rgba(34,212,238,.5) !important;
  box-shadow:
    0 0 16px rgba(0,0,0,.7),
    0 0 0 1px rgba(34,212,238,.08) inset,
    0 0 20px rgba(34,212,238,.08) !important;
  letter-spacing: 0px !important;
  padding: 6px 12px !important;
  max-width: 90% !important;
}

/* ── Stats: glowing value numbers ── */
.ec-stat-value {
  font-family: 'VT323', monospace !important;
  font-size: 32px !important;
  line-height: 1 !important;
  letter-spacing: 1px;
}
.ec-stat.shared   .ec-stat-value { color: var(--green) !important; text-shadow: var(--glow-green) !important; }
.ec-stat.accepted .ec-stat-value { color: var(--cyan)  !important; text-shadow: var(--glow-cyan)  !important; }
.ec-stat.unknown  .ec-stat-value { color: var(--amber) !important; text-shadow: var(--glow-amber) !important; }

/* ── Card ID chip: styled like a set number ── */
.ec-id-chip {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: rgba(34,212,238,.6) !important;
  border: 1px solid rgba(34,212,238,.25) !important;
  background: rgba(0,0,0,.5) !important;
  padding: 2px 6px !important;
  backdrop-filter: blur(4px) !important;
}

/* ── HOT tag: pulsing glow ── */
.tag-hot {
  animation: hotPulse 2s ease-in-out infinite !important;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 8px rgba(224,48,64,.5); }
}

/* ── Evidence accordion: more dramatic open state ── */
.ec-ev-panel.open {
  border-top: 1px solid rgba(34,212,238,.2);
  background: rgba(0,0,0,.3);
}

/* ── Card entry animation ── */
@keyframes cardDeal {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ecard {
  animation: cardDeal .3s ease both !important;
}

/* ─────────────────────────────────────────────
   CARD REDESIGN ADDITIONS
   Split bar, rarity gem, rarity top stripe
───────────────────────────────────────────── */

/* Rarity top stripe — colour driven by --rarity CSS var set in JS */
.ecard {
  border-top: 3px solid var(--rarity, var(--border-bright)) !important;
  box-shadow:
    0 0 0 1px rgba(18,50,64,.6) inset,
    0 20px 40px rgba(0,0,0,.4),
    0 4px 8px rgba(0,0,0,.3);
}
.ecard:hover {
  box-shadow:
    0 0 0 1px rgba(30,80,100,.7) inset,
    0 28px 56px rgba(0,0,0,.55),
    0 0 40px rgba(var(--rarity-rgb, 34,212,238),.08) !important;
}

/* Rarity gem — pentagon top-right of hero */
/* Rarity gem — bottom-left of hero, balancing the title chip bottom-right */
.ec-rarity-gem {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: var(--rarity, var(--cyan));
  box-shadow: 0 0 8px var(--rarity, var(--cyan)), 0 0 16px var(--rarity, var(--cyan));
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  z-index: 5;
}

/* Split bar — between hero and stats */
.ec-splitbar {
  height: 4px;
  background: var(--border-subtle);
  flex-shrink: 0;
}
.ec-splitbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  position: relative;
  transition: width .6s ease;
}
.ec-splitbar-fill::after {
  content: '';
  position: absolute;
  right: -1px; top: -1px; bottom: -1px;
  width: 2px;
  background: rgba(255,255,255,.4);
}

/* Foil shimmer on hover */
.ecard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(34,212,238,.07) 30%,
    rgba(240,168,50,.05) 42%,
    rgba(192,112,255,.05) 54%,
    rgba(34,212,238,.07) 65%,
    transparent 75%
  );
  background-size: 200% 200%;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity .3s ease;
}
.ecard:hover::after {
  opacity: 1;
  animation: cardFoil 2.2s linear infinite;
}
@keyframes cardFoil {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Card deal-in animation */
@keyframes cardDeal {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ecard { animation: cardDeal .28s ease both !important; }

/* HOT tag pulse */
.tag-hot { animation: hotPulse 2s ease-in-out infinite !important; }
@keyframes hotPulse {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: 0 0 8px rgba(224,48,64,.55); }
}

/* ── Map topbar: expand button now inline, not absolute ── */
.map-expand-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* ── Atlas search: dynamic direction + 5-item scroll cap ── */
.quick-submit .search-suggest { position: relative; }

/* Base: hidden until direction is known */
.search-suggest-list {
  max-height: calc(5 * 44px) !important; /* 5 items × ~44px each */
  overflow-y: auto !important;
}

/* Direction: DOWN (default — space below is sufficient) */
#country-search-results[data-dir="down"] {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
}

/* Direction: UP (not enough space below) */
#country-search-results[data-dir="up"] {
  top: auto !important;
  bottom: 100% !important;
  margin-bottom: 4px !important;
  margin-top: 0 !important;
  box-shadow: 0 -8px 28px rgba(0,0,0,.55) !important;
}

/* ── Recent signals: location left, timestamp right ── */
.recent-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.recent-title {
  font-size: 11px;
  color: var(--text-bright);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-time {
  font-size: 9px;
  color: var(--cyan);
  opacity: .7;
  letter-spacing: 1px;
  flex-shrink: 0;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════
   READABILITY UPGRADE + LIGHT THEME FOUNDATION
   ─────────────────────────────────────────────
   Dark mode (default): high contrast, readable sizes
   Light mode (.theme-light on <html>): inverted palette
═══════════════════════════════════════════════ */

/* ── Dark mode token upgrades ── */
:root {
  /* Brighter, more readable text */
  --text:        #c0d4e0;
  --text-dim:    #6080a0;
  --text-bright: #eef8ff;

  /* Slightly more visible borders */
  --border:        #244060;
  --border-bright: #3a6888;
}

/* ── Global size/spacing floor ── */
/* Rail body text */
.recent-title  { font-size: 12px !important; letter-spacing: 0 !important; line-height: 1.4 !important; }
.recent-time   { font-size: 10px !important; letter-spacing: 0 !important; }
.rank-title    { font-size: 12px !important; letter-spacing: 0 !important; }
.rank-votes    { font-size: 10px !important; letter-spacing: 0 !important; }
.rank-num      { font-size: 24px !important; }
.qs-title      { font-size: 10px !important; letter-spacing: 2px !important; }
.qs-input, .qs-textarea { font-size: 12px !important; letter-spacing: 0 !important; }
.qs-btn        { font-size: 11px !important; letter-spacing: 1px !important; }
.es-search     { font-size: 12px !important; letter-spacing: 0 !important; }
.es-item       { font-size: 12px !important; letter-spacing: 0 !important; line-height: 1.4 !important; }
.hud-sub       { font-size: 11px !important; letter-spacing: 0 !important; }
.hud-effects   { font-size: 11px !important; letter-spacing: 0 !important; }
.dp-sec        { font-size: 10px !important; letter-spacing: 2px !important; }
.dp-desc       { font-size: 13px !important; line-height: 1.8 !important; }
.ev-txt        { font-size: 12px !important; line-height: 1.6 !important; }
.ev-who        { font-size: 10px !important; letter-spacing: 0 !important; }
.dv-lbl        { font-size: 10px !important; letter-spacing: 1px !important; }
.foot-lbl      { font-size: 9px  !important; letter-spacing: 1px !important; }
.foot-num      { font-size: 24px !important; }
.search-suggest-label { font-size: 12px !important; letter-spacing: 0 !important; }
.search-suggest-meta  { font-size: 10px !important; letter-spacing: 0 !important; }
.map-breadcrumb { font-size: 11px !important; letter-spacing: 1px !important; }
.ec-stat-label  { font-size: 9px  !important; letter-spacing: 1px !important; }
.ec-meta-label  { font-size: 9px  !important; letter-spacing: 1px !important; }
.ec-meta-value  { font-size: 12px !important; }
.tag            { font-size: 9px  !important; letter-spacing: 1px !important; }

/* ── LIGHT THEME ── */
html.theme-light {
  --bg:          #f2f4f6;
  --bg2:         #e8ecf0;
  --bg3:         #dde3ea;
  --panel:       #d2dae2;

  --border:        #8aa0b8;
  --border-bright: #5a7a96;
  --border-subtle: #b8c8d8;

  --cyan:     #006688;
  --cyan-dim: #b0ccd8;

  --amber:     #b85000;
  --amber-dim: #e8b080;

  --green:     #006633;
  --green-dim: #a0cca8;

  --red:     #cc1818;
  --red-dim: #eea0a0;

  --purple: #7744aa;

  --text:        #0a1a28;
  --text-dim:    #445566;
  --text-bright: #000a14;

  --glow-cyan:  0 0 6px rgba(0,102,136,.25), 0 0 14px rgba(0,102,136,.08);
  --glow-amber: 0 0 6px rgba(184,80,0,.25),  0 0 14px rgba(184,80,0,.08);
  --glow-green: 0 0 6px rgba(0,102,51,.25),  0 0 14px rgba(0,102,51,.08);
  --glow-red:   0 0 6px rgba(204,24,24,.25), 0 0 14px rgba(204,24,24,.08);
}

/* Atmosphere off */
html.theme-light body::before,
html.theme-light body::after { opacity: 0 !important; }
html.theme-light body { background-image: none !important; background-color: var(--bg) !important; }
html.theme-light .app { animation: none !important; }

/* Header */
html.theme-light header {
  background: #e0e8f0 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}
html.theme-light header::before { background: linear-gradient(90deg, transparent, var(--cyan), transparent) !important; opacity: .4 !important; }
html.theme-light header::after { color: rgba(184,80,0,.2) !important; }
html.theme-light .logo { color: var(--amber) !important; text-shadow: none !important; }
html.theme-light .logo small { color: rgba(184,80,0,.5) !important; }
html.theme-light .tab { color: var(--text-dim) !important; }
html.theme-light .tab.active { color: var(--amber) !important; border-top-color: var(--amber) !important; background: rgba(184,80,0,.06) !important; }
html.theme-light .tab:hover { color: var(--text-bright) !important; background: rgba(0,0,0,.04) !important; }
html.theme-light .live-pill { background: rgba(0,102,51,.08) !important; border-color: rgba(0,102,51,.3) !important; }

/* Buttons — light mode needs visible borders and text */
html.theme-light .btn {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: rgba(255,255,255,.5) !important;
}
html.theme-light .btn:hover {
  color: var(--cyan) !important;
  border-color: var(--cyan) !important;
  background: rgba(0,102,136,.06) !important;
  box-shadow: none !important;
}
html.theme-light .btn-primary {
  color: var(--amber) !important;
  border-color: var(--amber) !important;
  background: rgba(184,80,0,.08) !important;
}
html.theme-light .btn-primary:hover {
  background: rgba(184,80,0,.15) !important;
}

/* Auth button — SIGN IN needs emphasis */
html.theme-light #authBtn {
  color: white !important;
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  font-weight: 700 !important;
}
html.theme-light #authBtn:hover {
  background: #004f6a !important;
  border-color: #004f6a !important;
}

/* Rails */
html.theme-light .map-left,
html.theme-light .map-right { background: #dce4ee !important; border-color: var(--border) !important; }
html.theme-light .side-header { background: #cfd8e4 !important; border-bottom-color: var(--border) !important; }
html.theme-light .side-header::before { background: linear-gradient(180deg, transparent, var(--amber), transparent) !important; }
html.theme-light .side-body { background: transparent !important; }
html.theme-light .side-title { color: var(--cyan) !important; text-shadow: none !important; }
html.theme-light .side-subtitle { color: var(--text-bright) !important; }

/* Rank items */
html.theme-light .rank-item {
  background: #e8eef6 !important;
  border-color: var(--border-subtle) !important;
}
html.theme-light .rank-item:hover { background: #dce6f2 !important; border-color: var(--border) !important; }
html.theme-light .rank-item::before { background: var(--amber) !important; }
html.theme-light .rank-num { color: rgba(184,80,0,.4) !important; }
html.theme-light .rank-item:hover .rank-num { color: rgba(184,80,0,.8) !important; }
html.theme-light .rank-bar { background: var(--border-subtle) !important; }
html.theme-light .rank-bar-fill { background: linear-gradient(90deg, var(--amber), rgba(184,80,0,.2)) !important; }

/* Recent items */
html.theme-light .recent-item {
  background: #edf2f8 !important;
  border-color: var(--border-subtle) !important;
}
html.theme-light .recent-item:hover { background: #e0eaf4 !important; border-color: var(--border) !important; }
html.theme-light .recent-title { color: var(--text-bright) !important; }
html.theme-light .recent-time { color: var(--cyan) !important; }

/* Effect selector */
html.theme-light .es-search {
  background: white !important;
  border-color: var(--border) !important;
  color: var(--text-bright) !important;
}
html.theme-light .es-search:focus { border-color: var(--cyan) !important; }
html.theme-light .es-item {
  background: #edf2f8 !important;
  border-color: var(--border-subtle) !important;
  color: var(--text) !important;
}
html.theme-light .es-item:hover { background: #e0eaf4 !important; }
html.theme-light .es-item.selected {
  background: rgba(0,102,136,.1) !important;
  border-color: var(--cyan) !important;
  border-left-color: var(--cyan) !important;
}
html.theme-light #es-list { color: var(--text) !important; }
html.theme-light .es-title { color: var(--text-dim) !important; }
html.theme-light .es-clear {
  background: rgba(204,24,24,.08) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
}

/* Quick submit / atlas search */
html.theme-light .quick-submit {
  background: #cfd8e4 !important;
  border-top-color: var(--border) !important;
}
html.theme-light .qs-title { color: var(--cyan) !important; }
html.theme-light .qs-input {
  background: white !important;
  border-color: var(--border) !important;
  color: var(--text-bright) !important;
}
html.theme-light .qs-input::placeholder { color: var(--text-dim) !important; }
html.theme-light .qs-btn {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: white !important;
}
html.theme-light .qs-btn:hover { background: #8a3c00 !important; }

/* Map */
html.theme-light #world-svg { background: #b8ccd8 !important; }
html.theme-light .country-path { fill: #c8d8e8 !important; stroke: #8aa0b8 !important; }
html.theme-light .country-path.hovered { fill: #90b4cc !important; stroke: #4a7a99 !important; }
html.theme-light .country-path.zoomed-country { fill: #d4c0a0 !important; stroke: var(--amber) !important; }
html.theme-light .sphere-fill { fill: #9ab4c8 !important; }
html.theme-light .graticule-line { stroke: rgba(0,80,120,.12) !important; }
html.theme-light .state-path { fill: #b0c8d8 !important; stroke: #6888a0 !important; }

/* Map chrome */
html.theme-light .map-breadcrumb {
  background: rgba(240,244,248,.95) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.theme-light .bc-world { color: var(--text-dim) !important; }
html.theme-light .bc-country { color: var(--amber) !important; }
html.theme-light .map-expand-btn {
  background: rgba(240,244,248,.95) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.theme-light .map-expand-btn:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; }
html.theme-light #country-hud {
  background: rgba(240,244,248,.97) !important;
  border-color: var(--border) !important;
  border-left-color: var(--amber) !important;
}
html.theme-light .hud-name { color: var(--text-bright) !important; }

/* Footer */
html.theme-light .app-footer {
  background: #ccd6e2 !important;
  border-top-color: var(--border) !important;
}
html.theme-light .foot-stat { border-right-color: var(--border-subtle) !important; }
html.theme-light .foot-num { color: var(--text-bright) !important; }
html.theme-light .foot-lbl { color: var(--text-dim) !important; }
html.theme-light .foot-stat:hover { background: rgba(0,102,136,.06) !important; }
html.theme-light .foot-stat:hover .foot-num { color: var(--cyan) !important; text-shadow: none !important; }

/* Modal */
html.theme-light .modal {
  background: #f0f4f8 !important;
  border-color: var(--border) !important;
  border-top-color: var(--amber) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
}
html.theme-light .mhdr { background: #e4ecf4 !important; border-bottom-color: var(--border) !important; }
html.theme-light .mtitle { color: var(--amber) !important; text-shadow: none !important; }
html.theme-light .modal-overlay { background: rgba(0,20,40,.4) !important; }
html.theme-light .fi2, html.theme-light .ft, html.theme-light .auth-input {
  background: white !important;
  border-color: var(--border) !important;
  color: var(--text-bright) !important;
}
html.theme-light .fi2:focus, html.theme-light .ft:focus, html.theme-light .auth-input:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,102,136,.1) !important;
}

/* Cards */
html.theme-light .ecard {
  background: linear-gradient(160deg, #eef2f8 0%, #e4ecf4 100%) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
}
html.theme-light .ecard:hover {
  border-color: var(--border) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.15) !important;
}
html.theme-light .ec-hero { background: #d8e4f0 !important; }
html.theme-light .ec-hero::before {
  background-image: linear-gradient(rgba(0,102,136,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,102,136,.04) 1px, transparent 1px) !important;
}
html.theme-light .ec-title-chip {
  background: rgba(240,244,248,.95) !important;
  border-color: rgba(184,80,0,.5) !important;
  color: var(--text-bright) !important;
}
html.theme-light .ec-stat { background: rgba(200,216,232,.5) !important; border-color: var(--border-subtle) !important; }
html.theme-light .ec-stat-label { color: var(--text-dim) !important; }
html.theme-light .ec-meta-pill { background: rgba(200,216,232,.4) !important; border-color: var(--border-subtle) !important; }
html.theme-light .ec-accordion-btn {
  background: rgba(0,102,136,.08) !important;
  border-color: rgba(0,102,136,.3) !important;
  color: var(--cyan) !important;
}
html.theme-light .tag-pop   { background: rgba(184,80,0,.1)   !important; border-color: rgba(184,80,0,.4)   !important; }
html.theme-light .tag-geo   { background: rgba(0,102,136,.1)  !important; border-color: rgba(0,102,136,.4)  !important; }
html.theme-light .tag-media { background: rgba(119,68,170,.1) !important; border-color: rgba(119,68,170,.4) !important; }
html.theme-light .tag-logo  { background: rgba(0,102,51,.1)   !important; border-color: rgba(0,102,51,.4)   !important; }
html.theme-light .tag-hot   { background: rgba(204,24,24,.1)  !important; border-color: rgba(204,24,24,.4)  !important; }

/* Mobile nav */
html.theme-light .mob-nav {
  background: rgba(224,232,242,.98) !important;
  border-top-color: var(--border) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.1) !important;
}
html.theme-light .mob-nav-btn { color: var(--text-dim) !important; }
html.theme-light .mob-nav-btn.active { color: var(--amber) !important; }

/* Scrollbar */
html.theme-light ::-webkit-scrollbar-track { background: var(--bg2) !important; }
html.theme-light ::-webkit-scrollbar-thumb { background: var(--border) !important; }
html.theme-light ::-webkit-scrollbar-thumb:hover { background: var(--cyan) !important; }

/* Notification */
html.theme-light #notif {
  background: white !important;
  border-color: var(--green) !important;
  color: var(--text-bright) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
}

/* Search suggest */
html.theme-light .search-suggest-list {
  background: white !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}
html.theme-light .search-suggest-item:hover { background: rgba(0,102,136,.06) !important; }
html.theme-light .search-suggest-label { color: var(--text-bright) !important; }
html.theme-light .search-suggest-meta { color: var(--text-dim) !important; }

/* Account dropdown */
html.theme-light .account-dropdown-shell {
  background: white !important;
  border-color: var(--border) !important;
  border-top-color: var(--amber) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.15) !important;
}
html.theme-light .account-dropdown-shell a { color: var(--text) !important; }
html.theme-light .account-dropdown-shell a:hover { background: rgba(0,102,136,.08) !important; color: var(--cyan) !important; }

/* ── DARK MODE: specific contrast fixes ── */

/* Breadcrumb and expand button — more visible */
.map-breadcrumb {
  background: rgba(4,16,22,.95) !important;
  border-color: var(--border-bright) !important;
  color: var(--text) !important;
}
.map-expand-btn {
  background: rgba(4,16,22,.95) !important;
  border-color: var(--border-bright) !important;
  color: var(--text) !important;
}
.map-expand-btn:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.bc-world { color: var(--text) !important; }

/* Effect selector items — readable text */
.es-title { font-size: 10px !important; letter-spacing: 2px !important; color: var(--text-dim) !important; }
.es-item { color: var(--text-bright) !important; background: rgba(10,18,28,.85) !important; }
.es-item:hover { background: rgba(20,32,48,.95) !important; border-color: var(--border) !important; }

/* SIGN IN button — prominent in dark mode */
#authBtn:not(.account-trigger-shell) {
  color: var(--bg) !important;
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}
#authBtn:not(.account-trigger-shell):hover {
  background: #18a8c8 !important;
  border-color: #18a8c8 !important;
  box-shadow: var(--glow-cyan) !important;
}

/* Theme toggle button — visible */
#theme-toggle-btn {
  font-size: 16px !important;
  padding: 4px 8px !important;
  border-color: var(--border-bright) !important;
  color: var(--text) !important;
  line-height: 1 !important;
}
#theme-toggle-btn:hover {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}