/* Theme variables */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --k-bg: #070B14;
  --k-card: #0F1629;
  --k-border: #1E293B;
  --k-accent: #22D3EE;
  --k-muted: #64748B;
  --k-text: #E2E8F0;
  --k-text-inv: #070B14;
  --k-glow: rgba(34, 211, 238, 0.08);
  --k-glow2: rgba(59, 130, 246, 0.05);
  --k-map-fill: #1E293B;
  --k-gauge-track: #1E293B;
}

[data-theme="light"] {
  color-scheme: light;
  --k-bg: #F1F5F9;
  --k-card: #FFFFFF;
  --k-border: #E2E8F0;
  --k-accent: #0891B2;
  --k-muted: #64748B;
  --k-text: #0F172A;
  --k-text-inv: #FFFFFF;
  --k-glow: rgba(8, 145, 178, 0.06);
  --k-glow2: rgba(59, 130, 246, 0.04);
  --k-map-fill: #CBD5E1;
  --k-gauge-track: #E2E8F0;
}

body {
  background-color: var(--k-bg) !important;
  color: var(--k-text) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, var(--k-glow), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, var(--k-glow2), transparent);
}

/* Override Tailwind utility classes used in markup */
.bg-kbg { background-color: var(--k-bg) !important; }
.bg-kcard { background-color: var(--k-card) !important; }
.border-kborder { border-color: var(--k-border) !important; }
.text-ktext { color: var(--k-text) !important; }
.text-kmuted { color: var(--k-muted) !important; }
.text-kaccent { color: var(--k-accent) !important; }
.text-kbg { color: var(--k-text-inv) !important; }

.loc-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.loc-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--k-accent) 40%, transparent);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--k-accent) 20%, transparent);
}
.loc-card.offline {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: auto; /* hover map still works */
}
.loc-card.offline:hover {
  border-color: var(--k-border);
}
a.loc-card.offline {
  pointer-events: none;
}

.status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.status-dot.online { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.5); }
.status-dot.offline { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,0.4); }

.map-marker { cursor: pointer; transition: transform 0.15s ease; }
.map-marker:hover { transform: scale(1.25); }
.map-marker circle.pulse { animation: pulse 2s ease-out infinite; }
@keyframes pulse {
  0% { r: 6; opacity: 0.6; }
  100% { r: 18; opacity: 0; }
}

#gauge-value { font-variant-numeric: tabular-nums; }
#results.show { opacity: 1; }

#theme-toggle, #lang-toggle {
  color: var(--k-text);
  border-color: var(--k-border);
}
#theme-toggle:hover, #lang-toggle:hover {
  border-color: var(--k-accent);
  color: var(--k-accent);
}

.queue-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--k-border);
  border-top-color: var(--k-accent);
  border-radius: 50%;
  display: inline-block;
  animation: queue-spin 0.7s linear infinite;
}
@keyframes queue-spin {
  to { transform: rotate(360deg); }
}

/* Map panel */
.map-panel {
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(34, 211, 238, 0.07), transparent 65%),
    var(--k-card);
}
.map-glow {
  pointer-events: none;
  background: radial-gradient(ellipse at 55% 35%, rgba(34, 211, 238, 0.12), transparent 55%);
}
[data-theme="light"] .map-land {
  fill: #94a3b8 !important;
  stroke: #64748b !important;
}
[data-theme="light"] .map-grid {
  stroke: #cbd5e1 !important;
}

.flag-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
}
.flag-img {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);
  display: block;
}
.flag-emoji { font-size: 1.4rem; line-height: 1; }

#test-flag {
  display: inline-flex;
  align-items: center;
}
#test-flag .flag-img {
  width: 32px;
  height: 24px;
  border-radius: 4px;
}

.flag-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flag-svg {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.35);
  display: block;
}
.flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--k-border);
  color: var(--k-text);
}
#test-flag {
  display: inline-flex;
  align-items: center;
}
#test-flag .flag-svg {
  width: 32px;
  height: 24px;
  border-radius: 4px;
}
[data-theme="light"] .map-label-bg {
  fill: #ffffff !important;
  stroke: #cbd5e1 !important;
}
[data-theme="light"] .map-label-text {
  fill: #0f172a !important;
}
[data-theme="light"] .map-land {
  fill: #94a3b8 !important;
  stroke: #64748b !important;
}

/* Leaflet map */
#geo-map {
  background: #0b1220;
}
[data-theme="light"] #geo-map {
  background: #e2e8f0;
}
.k-marker {
  background: transparent !important;
  border: none !important;
}
.k-marker-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c, #22D3EE);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #22D3EE) 35%, transparent),
              0 2px 8px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%);
}
.k-marker-label {
  position: absolute;
  left: 12px;
  top: -10px;
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.92);
  color: #f1f5f9;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.35;
  pointer-events: none;
}
.k-marker-label span {
  display: block;
  color: #22D3EE;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
}
[data-theme="light"] .k-marker-label {
  background: rgba(255,255,255,0.95);
  color: #0f172a;
  border-color: #cbd5e1;
}
.leaflet-control-zoom a {
  background: var(--k-card) !important;
  color: var(--k-text) !important;
  border-color: var(--k-border) !important;
}

/* Offline map themes */
:root, [data-theme="dark"] {
  --map-water: #0a1220;
  --map-land1: #1a3352;
  --map-land2: #13263d;
  --map-land-stroke: #3b5678;
  --map-label-bg: rgba(15, 23, 42, 0.92);
  --map-label-border: #334155;
  --map-label-text: #f1f5f9;
  --map-label-ping: #22D3EE;
}
[data-theme="light"] {
  --map-water: #dbe7f3;
  --map-land1: #9db0c5;
  --map-land2: #7f95ad;
  --map-land-stroke: #5c738c;
  --map-label-bg: rgba(255, 255, 255, 0.95);
  --map-label-border: #cbd5e1;
  --map-label-text: #0f172a;
  --map-label-ping: #0891b2;
}
.map-panel {
  background: var(--map-water);
}
.map-water {
  fill: var(--map-water);
}
.map-label-bg {
  fill: var(--map-label-bg);
  stroke: var(--map-label-border);
  stroke-width: 1;
}
.map-label-title {
  fill: var(--map-label-text);
}
.map-label-ping {
  fill: var(--map-label-ping);
}
.map-land {
  fill: var(--map-land1);
  stroke: var(--map-land-stroke);
}

/* Realistic offline map */
#map-host svg {
  width: 100%;
  height: 100%;
}
#map-host .map-water {
  fill: var(--map-water);
}
#map-host .map-land {
  fill: var(--map-land1);
  stroke: var(--map-land-stroke);
  stroke-width: 0.35;
  transition: fill 0.2s ease;
}
#map-host .map-land:hover {
  fill: var(--map-land2);
}

#map-markers {
  pointer-events: none;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.map-pin-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #34d399; /* online green */
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.28), 0 2px 8px rgba(0,0,0,0.3);
}
.map-pin.is-offline .map-pin-dot {
  background: #f87171; /* offline soft red */
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.28), 0 2px 8px rgba(0,0,0,0.25);
}
.map-pin-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--map-label-bg);
  border: 1px solid var(--map-label-border);
  border-radius: 8px;
  padding: 4px 8px 5px;
  line-height: 1.25;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  text-align: left;
}
.map-pin.side-right .map-pin-card { left: 16px; }
.map-pin.side-left .map-pin-card { right: 16px; }
.map-pin-city {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--map-label-text);
}
.map-pin-ping {
  display: block;
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--map-label-ping);
}
.map-pin.is-offline .map-pin-ping {
  color: #f87171;
}

/* Logo mark — как на рендере */
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #22D3EE 0%, #3B82F6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.35);
  flex-shrink: 0;
}
.logo-mark span {
  font-weight: 800;
  font-size: 16px;
  color: #070B14;
  line-height: 1;
  letter-spacing: -0.02em;
}
[data-theme="light"] .logo-mark {
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.brand-link { text-decoration: none; color: inherit; }
.brand-k {
  width: 40px;
  height: 36px;
  display: block;
  flex-shrink: 0;
}
.brand-serv {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--k-text);
}
.brand-sub {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--k-accent);
  letter-spacing: 0.04em;
  opacity: 0.9;
}
@media (max-width: 640px) {
  .brand-sub { display: none; }
}


/* Map: единый фон панели и «воды» */
.map-panel {
  background: var(--map-water) !important;
  border-color: var(--k-border);
}
#map-host,
#map-host svg {
  background: var(--map-water);
}
#map-host .map-water {
  fill: var(--map-water);
}

.brand-k {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
}


/* Modern test stages */
.test-steps {
  width: min(100%, 320px);
  margin: 1.25rem auto 0;
  padding: 0 4px;
}
.test-steps-track {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: var(--k-border);
  margin: 0 18px 12px;
  overflow: hidden;
}
.test-steps-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22D3EE, #3B82F6);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
}
.test-steps-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.test-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--k-muted);
  transition: color 0.3s ease;
}
.test-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--k-border);
  border: 2px solid var(--k-card);
  box-shadow: 0 0 0 1px var(--k-border);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
}
.test-step-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.test-step.active {
  color: var(--k-accent);
}
.test-step.active .test-step-dot {
  background: var(--k-accent);
  transform: scale(1.35);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 28%, transparent),
              0 0 12px color-mix(in srgb, var(--k-accent) 40%, transparent);
}
.test-step.active .test-step-label {
  opacity: 1;
  color: var(--k-accent);
  font-weight: 600;
}
.test-step.done {
  color: var(--k-text);
}
.test-step.done .test-step-dot {
  background: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 25%, transparent);
}
.test-step.done .test-step-label {
  opacity: 0.9;
}

/* Map focus / card hover */
.loc-card.is-focus {
  border-color: color-mix(in srgb, #34d399 45%, var(--k-border)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #34d399 20%, transparent),
              0 12px 28px -14px rgba(52, 211, 153, 0.35);
  transform: translateY(-1px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.map-pin.is-dim {
  opacity: 0.4;
  filter: grayscale(0.3);
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.map-pin.is-focus {
  opacity: 1;
  z-index: 5;
}
.map-pin.is-focus .map-pin-dot {
  transform: scale(1.25);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.9),
    0 0 0 8px rgba(52, 211, 153, 0.25),
    0 0 20px 4px rgba(52, 211, 153, 0.35);
  animation: pin-pulse 1.6s ease-in-out infinite;
}
@keyframes pin-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 8px rgba(52,211,153,0.22), 0 0 18px 2px rgba(52,211,153,0.3); }
  50% { box-shadow: 0 0 0 3px rgba(255,255,255,0.95), 0 0 0 12px rgba(52,211,153,0.15), 0 0 28px 6px rgba(52,211,153,0.4); }
}
.map-pin.is-focus .map-pin-card {
  border-color: color-mix(in srgb, #34d399 50%, var(--map-label-border));
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transform: translateY(-50%) scale(1.04);
}
.map-pin.is-offline.is-focus .map-pin-dot {
  animation: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.9),
    0 0 0 8px rgba(248, 113, 113, 0.25),
    0 0 18px rgba(248, 113, 113, 0.35);
}
.map-pin {
  transition: opacity 0.3s ease, left 0.35s cubic-bezier(0.22,1,0.36,1), top 0.35s cubic-bezier(0.22,1,0.36,1);
}
#map-host svg {
  transition: none; /* viewBox анимируется в JS */
}

#map-host path.map-land.is-hl {
  fill: color-mix(in srgb, #34d399 12%, var(--map-land1)) !important;
  stroke: color-mix(in srgb, #34d399 30%, var(--map-land-stroke));
  stroke-width: 0.55;
  filter: none;
  transition: fill 0.5s ease, stroke 0.5s ease;
}
#map-host path.map-land {
  transition: fill 0.35s ease, stroke 0.35s ease;
}