:root {
  --bg: #030406;
  --bg-elevated: #0b0d12;
  --card: #0d0f16;
  --card-border: #20242f;
  --blue-500: #2e7bff;
  --blue-400: #5a9bff;
  --blue-300: #8fbcff;
  --blue-glow: rgba(46, 123, 255, 0.35);
  --text: #f3f5f9;
  --text-dim: #8991a3;
  --danger: #ff5a7a;
  --success: #3ee6a8;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at top, #0c1a33 0%, var(--bg) 55%, #000000 100%);
  color: var(--text);
  font-family: var(--font);
  min-height: 100%;
}

a {
  color: var(--blue-300);
  text-decoration: none;
}

a:hover {
  color: var(--blue-400);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
}

.brand .mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-500), #0b2a66);
  box-shadow: 0 0 24px rgba(46, 123, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
}

nav.site-nav {
  display: flex;
  gap: 18px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue-500), #1a4fc4);
  border: none;
  box-shadow: 0 8px 24px rgba(46, 123, 255, 0.35);
}

.btn-ghost {
  background: transparent;
}

.btn-danger {
  background: transparent;
  border-color: rgba(255, 90, 122, 0.4);
  color: var(--danger);
}

section.hero {
  padding: 80px 0 60px;
  text-align: center;
}

.hero-photo {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.hero-photo-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #0c1a33 0%, #030610 60%, #000000 100%);
}

.hero-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(90, 155, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 155, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 72%);
}

.hero-ring {
  position: absolute;
  top: 38%;
  left: 50%;
  border: 1px solid rgba(90, 155, 255, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hero-ring.ring-1 {
  width: 540px;
  height: 540px;
}

.hero-ring.ring-2 {
  width: 900px;
  height: 900px;
  border-color: rgba(90, 155, 255, 0.08);
}

.hero-aircraft {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 92vw);
  transform: translate(-50%, -52%) rotate(-6deg);
  filter: drop-shadow(0 0 55px rgba(46, 123, 255, 0.55));
  animation: hero-aircraft-drift 9s ease-in-out infinite;
}

@keyframes hero-aircraft-drift {
  0%, 100% { transform: translate(-50%, -52%) rotate(-6deg); }
  50% { transform: translate(-50%, -55%) rotate(-5deg); }
}

.hero-contrail {
  position: absolute;
  top: 54%;
  left: 8%;
  width: 46%;
  height: 2px;
  background: linear-gradient(90deg, rgba(143, 188, 255, 0) 0%, rgba(143, 188, 255, 0.35) 70%, rgba(143, 188, 255, 0.55) 100%);
  transform: rotate(-6deg);
  filter: blur(1.5px);
}

.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 5, 16, 0.55) 0%,
    rgba(2, 5, 16, 0.8) 60%,
    var(--bg) 100%
  );
}

.hero-photo-content {
  position: relative;
  z-index: 1;
  padding: 120px 24px 80px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #ffffff, var(--blue-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  color: var(--text-dim);
  font-size: 1.15rem;
  max-width: 620px;
  margin: 0 auto 32px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.badge-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}

.badge {
  font-size: 0.8rem;
  color: var(--text-dim);
  border: 1px solid var(--card-border);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(46, 123, 255, 0.08);
}

section.features {
  padding: 40px 0 70px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 {
  margin: 10px 0 8px;
  font-size: 1.05rem;
}

.card p {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

.icon-dot {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(46, 123, 255, 0.15);
  color: var(--blue-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

section.how {
  padding: 40px 0 70px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.step-number {
  font-size: 0.85rem;
  color: var(--blue-400);
  font-weight: 700;
  letter-spacing: 0.08em;
}

section.pricing {
  padding: 40px 0 90px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.plan {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plan.featured {
  border-color: var(--blue-500);
  box-shadow: 0 0 40px rgba(46, 123, 255, 0.25);
}

.plan .price {
  font-size: 2rem;
  font-weight: 800;
}

.plan .price span {
  font-size: 0.95rem;
  color: var(--text-dim);
  font-weight: 500;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

footer.site-footer {
  border-top: 1px solid var(--card-border);
  padding: 28px 0 48px;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

.logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  text-decoration: none;
}

.logo-lockup svg {
  filter: drop-shadow(0 0 18px rgba(46, 123, 255, 0.5));
}

.logo-lockup-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.logo-lockup-line {
  font-weight: 800;
  letter-spacing: 0.38em;
  margin-right: -0.38em;
}

.logo-lockup-line.primary {
  font-size: 1.2rem;
  color: var(--text);
}

.logo-lockup-line.secondary {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  color: var(--blue-300);
}

/* Auth pages */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px;
}

.auth-card h1 {
  font-size: 1.4rem;
  margin: 0 0 6px;
}

.auth-card p.sub {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 24px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.95rem;
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--blue-500);
}

.error-text {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 10px;
  min-height: 1.2em;
}

/* App shell (dashboard/campaign) */
.app-shell {
  min-height: 100vh;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--card-border);
}

main.app-main {
  padding: 32px 0 60px;
}

/* Sidebar app shell */
.app-shell-sidebar {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar .brand {
  padding: 0 8px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 28px;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}

.sidebar-link .nav-icon {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.12s ease;
}

.sidebar-link:hover .nav-icon {
  opacity: 1;
}

.sidebar-link.active .nav-icon {
  opacity: 1;
  color: var(--blue-300);
}

.sidebar-link:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.sidebar-link.active {
  background: rgba(46, 123, 255, 0.15);
  color: var(--blue-300);
  font-weight: 700;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}

.sidebar-footer .badge {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-content {
  flex: 1;
  min-width: 0;
  padding: 36px 40px 60px;
}

.app-content > *:not(.modal-backdrop) {
  max-width: 1120px;
}

@media (max-width: 820px) {
  .app-shell-sidebar {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-flow: row wrap;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    row-gap: 10px;
  }
  .sidebar .brand {
    order: 1;
  }
  .sidebar-footer {
    order: 2;
    flex-direction: row;
    margin-left: auto;
    padding-top: 0;
    border-top: none;
  }
  .sidebar-nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: row;
    margin-top: 0;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .sidebar-link {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .app-content {
    padding: 24px 16px 48px;
  }
}

.filter-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 4px;
}

.filter-tab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.filter-tab:hover {
  color: var(--text);
}

.filter-tab.active {
  background: var(--blue-500);
  color: #fff;
}

.verdict-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.verdict-badge.allow {
  background: rgba(62, 230, 168, 0.15);
  color: var(--success);
}

.verdict-badge.block {
  background: rgba(255, 90, 122, 0.15);
  color: var(--danger);
}

/* View tabs (page-level, e.g. Visão geral / Tempo real) */
.view-tabs {
  display: inline-flex;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}

.view-tab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.view-tab:hover {
  color: var(--text);
}

.view-tab.active {
  background: var(--blue-500);
  color: #fff;
}

/* Live / real-time map */
.live-panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px;
}

.live-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.live-counter {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.live-counter #live-count {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text);
}

.live-counter-label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(255, 90, 122, 0.6);
  animation: live-dot-pulse 1.6s infinite;
  align-self: center;
}

@keyframes live-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 122, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(255, 90, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 122, 0); }
}

.live-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.live-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}

.live-blocked-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}

.live-blocked-toggle input {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.live-legend .dot.block {
  background: var(--danger);
}

.radar-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 500;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #0a1830 0%, #050a16 72%, #020408 100%);
  border: 1px solid var(--card-border);
}

.radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(90, 155, 255, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.radar-ring.ring-1 { width: 34%; height: 68%; }
.radar-ring.ring-2 { width: 62%; height: 124%; }
.radar-ring.ring-3 { width: 90%; height: 180%; }

.radar-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(90, 155, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 155, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform-origin: 50% 50%;
  background: conic-gradient(
    from 0deg,
    rgba(90, 155, 255, 0.22) 0deg,
    rgba(90, 155, 255, 0) 55deg,
    rgba(90, 155, 255, 0) 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: radar-sweep-spin 10s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* History map's own sweep: a thin bright line with a short comet-tail,
   instead of the live map's wide soft cone — same radar language, a
   different enough look that the two panels don't read as duplicates.
   Placed AFTER the <svg> in markup (not before, like the rings/grid) so
   its screen-blend composites over the land/state fill and visit dots
   too, not just the background behind the map — that's what makes the
   sweep visibly light up the map as it passes instead of only the ocean
   gaps around it. Same 5s spin as the live map's cone, by request. */
.radar-sweep-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform-origin: 50% 50%;
  background: conic-gradient(
    from 0deg,
    rgba(130, 200, 255, 0.95) 0deg,
    rgba(130, 200, 255, 0.5) 1.2deg,
    rgba(90, 155, 255, 0.14) 8deg,
    rgba(90, 155, 255, 0) 38deg,
    rgba(90, 155, 255, 0) 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: radar-sweep-spin 10s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

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

/* Dashboard home's mini radar: a compact, purely decorative circular
   face (ring/tick marks drawn into its SVG at runtime) that pings a
   blip whenever a genuinely new visit comes in since the widget loaded,
   rather than dumping the last few minutes all at once — the point is
   the "live contact" feel, not a data-complete map. Clicking anywhere
   on it goes to the real Tempo Real page. Monochrome green CRT look —
   deliberately different from the blue multi-campaign map, since this
   widget only ever shows two colors anyway (allow/block), so it reads
   fine as a classic green "friendly/hostile" military radar. */
#radar-mini-card h2 {
  margin: 0 0 16px;
}

/* No max-width/margin override here on purpose: this card stays the
   same full column width as "Acessos"/"Top campanhas" above it (capped
   by .app-content > *:not(.modal-backdrop) like they are), and
   .radar-mini-row centers its own, much narrower content inside that —
   centering the card itself instead left it centered within the whole
   .app-content width, which drifted way off from the other blocks'
   left-aligned column on a wide window. */
.radar-mini-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.radar-mini-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.radar-mini-col-title {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  font-family: monospace;
}

.radar-mini-col-title.block {
  color: rgba(255, 170, 190, 0.95);
  text-shadow: 0 0 8px rgba(255, 70, 100, 0.85), 0 0 18px rgba(255, 70, 100, 0.45), 0 1px 1px rgba(0, 0, 0, 0.8);
}

.radar-mini-col-title.allow {
  color: rgba(160, 255, 215, 0.95);
  text-shadow: 0 0 8px rgba(62, 230, 168, 0.85), 0 0 18px rgba(62, 230, 168, 0.45), 0 1px 1px rgba(0, 0, 0, 0.8);
}

.radar-mini-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
}

.radar-mini-stat {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.radar-mini-stat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  flex: 0 0 auto;
}

.radar-mini-stat.allow .radar-mini-stat-dot {
  background: var(--success);
  box-shadow: 0 0 6px rgba(62, 230, 168, 0.8);
}

.radar-mini-stat.block .radar-mini-stat-dot {
  background: var(--danger);
  box-shadow: 0 0 6px rgba(255, 90, 122, 0.8);
}

.radar-mini-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
}

.radar-mini-stat-label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.radar-mini {
  position: relative;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #0b2918 0%, #030e07 72%, #000000 100%);
  border: 1px solid rgba(62, 230, 168, 0.4);
  transition: border-color 0.2s ease;
}

.radar-mini.theme-block {
  background: radial-gradient(circle at 50% 50%, #2b0c12 0%, #0e0306 72%, #000000 100%);
  border-color: rgba(255, 70, 100, 0.4);
}

.radar-mini-wrap:hover .radar-mini {
  border-color: rgba(62, 230, 168, 0.85);
}

.radar-mini-wrap:hover .radar-mini.theme-block {
  border-color: rgba(255, 70, 100, 0.85);
}

.radar-mini-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* "Ambient" edge glow — an original CSS texture (not a stock photo:
   licensing on the HUD reference image was unknown, too risky to bake
   into a product that's actually sold) that echoes the same idea —
   livelier/busier near the rim, calm and readable in the middle where
   the blips actually show up. Masked so it fades to nothing toward the
   center instead of competing with the contacts. */
.radar-mini-ambient {
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(140, 255, 205, 0.32) 0deg 1.4deg,
      transparent 1.4deg 8deg
    ),
    radial-gradient(circle at 50% 50%, rgba(62, 230, 168, 0.3) 0%, rgba(62, 230, 168, 0) 58%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 32%, black 82%, black 100%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 32%, black 82%, black 100%);
  pointer-events: none;
}

.radar-mini-ambient.theme-block {
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 150, 170, 0.32) 0deg 1.4deg,
      transparent 1.4deg 8deg
    ),
    radial-gradient(circle at 50% 50%, rgba(255, 70, 100, 0.3) 0%, rgba(255, 70, 100, 0) 58%);
}

/* CRT scanlines — a subtle texture instead of a literal "matrix rain",
   which would compete too much with the blips in a widget this small. */
.radar-mini-scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.35) 0px,
    rgba(0, 0, 0, 0.35) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.radar-mini-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform-origin: 50% 50%;
  background: conic-gradient(
    from 0deg,
    rgba(170, 255, 215, 0.8) 0deg,
    rgba(62, 230, 168, 0.35) 10deg,
    rgba(62, 230, 168, 0) 45deg,
    rgba(62, 230, 168, 0) 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: radar-sweep-spin 10s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.radar-mini-sweep.theme-block {
  background: conic-gradient(
    from 0deg,
    rgba(255, 190, 200, 0.8) 0deg,
    rgba(255, 70, 100, 0.35) 10deg,
    rgba(255, 70, 100, 0) 45deg,
    rgba(255, 70, 100, 0) 360deg
  );
}

.radar-mini-blips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A little plane silhouette (Material "flight" glyph) recolored via
   mask instead of a plain dot, nose pointing up with a random heading
   applied per contact. */
.radar-mini-blip {
  --rot: 0deg;
  position: absolute;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,16V14L13,9V3.5C13,2.67 12.33,2 11.5,2C10.67,2 10,2.67 10,3.5V9L2,14V16L10,13.5V19L7.5,20.5V22L11.5,21L15.5,22V20.5L13,19V13.5L21,16Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,16V14L13,9V3.5C13,2.67 12.33,2 11.5,2C10.67,2 10,2.67 10,3.5V9L2,14V16L10,13.5V19L7.5,20.5V22L11.5,21L15.5,22V20.5L13,19V13.5L21,16Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: radar-mini-blip-ping 60s ease-out forwards;
}

.radar-mini-blip.allow {
  background-color: var(--success);
  filter: drop-shadow(0 0 4px rgba(62, 230, 168, 0.9));
}

.radar-mini-blip.block {
  background-color: var(--danger);
  filter: drop-shadow(0 0 4px rgba(255, 90, 122, 0.9));
}

@keyframes radar-mini-blip-ping {
  0% { transform: scale(0.4) rotate(var(--rot)); opacity: 0; }
  10% { transform: scale(1.4) rotate(var(--rot)); opacity: 1; }
  20% { transform: scale(1) rotate(var(--rot)); opacity: 1; }
  70% { transform: scale(1) rotate(var(--rot)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--rot)); opacity: 0; }
}

.radar-mini-cta {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: none;
}

.radar-mini-cta:hover {
  color: var(--success);
}

#live-map,
#live24-map {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  /* d3.zoom() handles pinch/wheel itself; without this the browser's own
     touch scroll/zoom fights it on mobile. */
  touch-action: none;
}

#live-map .map-land {
  fill: #0e2340;
  stroke: rgba(90, 155, 255, 0.35);
  stroke-width: 0.5;
}

#live-map .map-state {
  fill: #0e2340;
  stroke: rgba(90, 155, 255, 0.4);
  stroke-width: 0.6;
}

#live-map .visit-dot,
#live24-map .visit-dot {
  animation: visit-dot-in 0.4s ease-out;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
  cursor: pointer;
}

#live-map .visit-dot.block,
#live24-map .visit-dot.block {
  fill: var(--danger);
}

@keyframes visit-dot-in {
  0% { r: 0; opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0.9; }
}

.map-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 0.8rem;
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: none;
  line-height: 1.5;
  max-width: 220px;
}

.map-tooltip .tt-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.map-tooltip .tt-dim {
  color: var(--text-dim);
  font-size: 0.75rem;
}

.stat-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.page-title-row h1 {
  font-size: 1.5rem;
  margin: 0;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.data-table th,
table.data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-dim);
}

table.data-table th {
  color: var(--text);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.data-table tbody tr {
  transition: background 0.12s ease;
}

table.data-table tbody tr:hover {
  background: var(--bg-elevated);
}

table.data-table tbody tr:last-child td {
  border-bottom: none;
}

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-dim);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 16, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal-backdrop.hidden {
  display: none;
}

.modal {
  width: 100%;
  max-width: 460px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h2 {
  margin-top: 0;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.checkbox-row label {
  color: var(--text);
  font-size: 0.92rem;
}

.checkbox-row.disabled {
  opacity: 0.55;
}

.checkbox-row.disabled label {
  color: var(--text-dim);
}

.soon-tag {
  font-size: 0.7rem;
  color: var(--blue-300);
  border: 1px solid var(--card-border);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46, 123, 255, 0.1);
  margin-left: 6px;
  white-space: nowrap;
}

.field-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: -2px 0 10px;
}

.field-note.zoom-hint {
  margin-top: -12px;
  opacity: 0.75;
}

.zoom-reset-btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* Map content (land/state outlines + visit dots) lives inside this <g>;
   d3.zoom() only ever touches its transform, never the SVG itself, so
   panning/zooming can't fight the viewBox scaling. */
.zoom-layer {
  cursor: grab;
}

.zoom-layer:active {
  cursor: grabbing;
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 9px;
  padding: 12px 14px;
}

.country-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  color: var(--text);
}

.country-check input {
  width: auto;
  margin: 0;
}

.country-check:has(input:disabled) {
  opacity: 0.45;
}

.field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat-tile {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.stat-tile:hover {
  border-color: rgba(46, 123, 255, 0.4);
  transform: translateY(-2px);
}

.stat-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--blue-500);
  opacity: 0.6;
}

.stat-tile.allow::before {
  background: var(--success);
}

.stat-tile.block::before {
  background: var(--danger);
}

.stat-tile .value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.stat-tile.allow .value {
  color: var(--success);
}

.stat-tile.block .value {
  color: var(--danger);
}

.stat-tile .label {
  color: var(--text-dim);
  font-size: 0.85rem;
}

.entry-link-row {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  overflow-x: auto;
}

.section-block {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.section-block h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.variant-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 70px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.variant-row input {
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.88rem;
  width: 100%;
}

.actions-wrapper {
  position: relative;
  display: inline-block;
}

.actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  min-width: 190px;
  padding: 6px;
  z-index: 40;
}

.actions-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
}

.actions-menu button:hover {
  background: var(--bg-elevated);
}

.actions-menu button.danger {
  color: var(--danger);
}

.variant-row .remove-variant-btn {
  background: transparent;
  border: 1px solid rgba(255, 90, 122, 0.4);
  color: var(--danger);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.85rem;
}

.variant-item {
  margin-bottom: 14px;
}

.variant-item .variant-row {
  margin-bottom: 4px;
}

/* Draggable share bar under each variant row — a styled native range
   input, so closing the gap to 100% works either by typing the weight
   field above or by dragging here; --fill (set from JS) draws the filled
   portion up to the current value. */
.variant-weight-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.variant-weight-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--blue-500) var(--fill, 0%),
    var(--bg-elevated) var(--fill, 0%)
  );
  border: 1px solid var(--card-border);
  cursor: pointer;
  outline: none;
}

.variant-weight-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 6px;
  background: transparent;
}

.variant-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--blue-400);
  border: 2px solid var(--text);
  cursor: pointer;
}

.variant-weight-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
}

.variant-weight-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
}

.variant-weight-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue-400);
  border: 2px solid var(--text);
  cursor: pointer;
}

.variant-weight-bar-label {
  font-size: 0.72rem;
  min-width: 34px;
  text-align: right;
  color: var(--text-dim);
}

.variants-weight-total {
  font-size: 0.85rem;
  margin: 2px 0 14px;
  color: var(--text-dim);
}

.variants-weight-total.ok {
  color: var(--success);
}

.variants-weight-total.warn {
  color: var(--danger);
}

.setup-steps {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.6;
}

.setup-steps li {
  margin-bottom: 8px;
}

.setup-steps ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.setup-steps code {
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--text);
}

.domain-verify-btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.domain-verify-result {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.domain-verify-result.ok {
  color: var(--success);
}

.domain-verify-result.warn {
  color: var(--danger);
}