html, body{ height:100%; margin:0; padding:0; }
html, body { height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#app { height: 100%; display: flex; flex-direction: column; }
header {
  padding: 10px 14px;
  background: #0b1f2a;
  color: #fff;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
header h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
header .meta { opacity: .85; font-size: 12px; }
#map{ position: fixed; inset: 0; }

.legend {
  background: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  line-height: 1.3;
  font-size: 12px;
}
.legend .row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.chip {
  width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.25);
}
.chip.red { background: #d7263d; }
.chip.orange { background: #f57c00; }
.chip.yellow { background: #f9c74f; }
.leaflet-popup-content { margin: 10px 12px; }
.popup-title { font-weight: 800; margin-bottom: 6px; }
.popup-actions a { display: inline-block; margin-top: 6px; }
.note { font-size: 12px; opacity: .9; margin-top: 8px; }

.popup-actions { font-size: 13px; }
.popup-actions .sep { margin: 0 6px; opacity: .55; }


/* ---- UI overlay (rendészeti stílus) ---- */
:root{
  --brand-bg:#0b2a4a;
  --brand-fg:#ffffff;
  --accent:#d4af37;
  --danger:#b30000;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  --radius: 14px;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

body{
  font-family: var(--ui-font);
}

/* Make map fill the screen, keep overlays above */
#map{ height:100%; width:100vw; }

.app-header{
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(11,42,74,.95), rgba(11,42,74,.80));
  color: var(--brand-fg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.brand-title{
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 16px;
  line-height: 1.1;
}
.brand-subtitle{
  opacity: .92;
  font-size: 12.5px;
  margin-top: 2px;
}
.brand-meta{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.meta-chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  white-space: nowrap;
}
.meta-chip.meta-quiet{
  background: rgba(212,175,55,.15);
  border-color: rgba(212,175,55,.35);
  color: #fff;
}

.app-footer{
  position: fixed;
  z-index: 9999;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
}
.footer-strong{
  color: #fff;
  font-weight: 700;
}

/* Leaflet controls: give some breathing room under header */
.leaflet-top.leaflet-left{
  margin-top: 84px;
}
.leaflet-top.leaflet-right{
  margin-top: 84px;
}

/* Popup styling */
.leaflet-popup-content-wrapper{
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.leaflet-popup-content{
  margin: 12px 14px;
  min-width: 220px;
  font-family: var(--ui-font);
}
.popup-title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  color: #0b2a4a;
  margin-bottom: 8px;
}
.popup-actions{
  display:flex;
  gap: 10px;
  margin: 10px 0 8px;
}
.popup-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  background: var(--danger);
  color: #fff;
  border: 1px solid rgba(0,0,0,.10);
  width: 100%;
}
.popup-actions a:hover{
  filter: brightness(1.05);
}
.note{
  font-size: 12.5px;
  color: rgba(0,0,0,.72);
}

/* Marker hover: subtle emphasis */
}

/* Header animáció */
@keyframes fadeSlideDown{
  from{ opacity:0; transform: translate(-50%, -20px); }
  to{ opacity:1; transform: translate(-50%, 0); }
}

@keyframes fadeSlideUp{
  from{ opacity:0; transform: translate(-50%, 20px); }
  to{ opacity:1; transform: translate(-50%, 0); }
}

/* Popup modernizálás */
.leaflet-popup-content-wrapper{
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,240,240,0.9));
  border-radius: 20px;
}

.popup-actions a{
  background: linear-gradient(135deg, #b30000, #ff3300);
  box-shadow: 0 6px 20px rgba(180,0,0,0.4);
  transition: all 0.2s ease;
}

.popup-actions a:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255,0,0,0.6);
}


/* ===== PREMIUM DASHBOARD + NEON + DARK MODE ===== */

:root{
  --neon-red: rgba(255,40,40,.95);
  --neon-red-soft: rgba(255,40,40,.35);
  --glass-border: rgba(255,255,255,.22);
}

/* Header: not full width already; keep compact and premium */
.glass-header{
  left: 20px;
  right: auto;
  transform: none;
  max-width: min(980px, calc(100vw - 40px));
  width: auto;
  text-align: left;

  /* animated gradient "glass" */
  background: linear-gradient(120deg,
    rgba(18,18,24,.55),
    rgba(11,42,74,.55),
    rgba(179,0,0,.45),
    rgba(18,18,24,.55)
  );
  background-size: 260% 260%;
  animation: hdrGradient 10s ease infinite, fadeSlideDown 0.8s ease;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  border: 1px solid var(--glass-border);
  box-shadow:
    0 12px 50px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 30px rgba(255,40,40,.14);
}

@keyframes hdrGradient{
  0%{ background-position: 0% 50%; }
}

.hdr-left{ display:flex; flex-direction:column; gap:4px; }
.hdr-title{
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .2px;
  line-height: 1.2;
}
.hdr-sub{
  font-size: 12.5px;
  opacity: .92;
}
.hdr-right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.hdr-pill{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  white-space: nowrap;
}
.hdr-pill-ghost{
  opacity: .9;
}

/* Footer: compact pill, neon dot */
.glass-footer{
  left: 20px;
  right: auto;
  transform: none;
  max-width: min(980px, calc(100vw - 40px));
  width: auto;
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 10px 40px rgba(0,0,0,.5),
    0 0 28px rgba(255,40,40,.10);
  animation: fadeSlideUp 0.8s ease;
}
.glass-footer .dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--neon-red);
  box-shadow: 0 0 12px var(--neon-red), 0 0 26px var(--neon-red-soft);
  flex: 0 0 auto;
}

/* Neon glow mode for markers */
}

/* Controls: premium glass */
.leaflet-control-layers,
.leaflet-bar{
  background: rgba(10,10,14,.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.45) !important;
}
.leaflet-control-layers label,
.leaflet-control-layers-list{
  color: rgba(255,255,255,.92) !important;
}
.leaflet-bar a{
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
}
.leaflet-control-layers-separator{
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Popup: darker premium + neon button */
.leaflet-popup-content-wrapper{
  background: rgba(18,18,24,.92) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.popup-title{ color: rgba(255,255,255,.98) !important; }
.note{ color: rgba(255,255,255,.80) !important; }

.popup-actions a{
  background: linear-gradient(135deg, rgba(179,0,0,1), rgba(255,40,40,1)) !important;
  box-shadow:
    0 10px 28px rgba(255,40,40,.28),
    0 0 22px rgba(255,40,40,.22);
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Mobile: keep compact */
@media (max-width: 520px){
  .glass-header, .glass-footer{
    left: 10px;
    max-width: calc(100vw - 20px);
  }
  .hdr-right{ justify-content:flex-start; }
}

.vad-svg-icon{ background: transparent !important; border: 0 !important; }

#app header{ display:none !important; }


/* ===== Egyszerű üveg cím (bal felső) ===== */
.glass-title{
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 9999;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.96);
  background: linear-gradient(135deg, rgba(10,10,14,.55), rgba(179,0,0,.28));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 12px 45px rgba(0,0,0,.45),
    0 0 26px rgba(255,40,40,.12);
  max-width: calc(100vw - 36px);
}
.app-header,.app-footer,.glass-header,.glass-footer{ display:none !important; }

/* Controls under the title */
.leaflet-top.leaflet-left{ margin-top: 78px; }
.leaflet-top.leaflet-right{ margin-top: 78px; }

@media (max-width:520px){
  .glass-title{ top: 10px; left: 10px; max-width: calc(100vw - 20px); }
  .leaflet-top.leaflet-left,.leaflet-top.leaflet-right{ margin-top: 86px; }
}


#map{ height:100%; width:100vw; }
body{margin:0;}


.diag{
  position: fixed;
  top: 76px;
  left: 18px;
  z-index: 10000;
  max-width: calc(100vw - 36px);
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.96);
  background: rgba(179,0,0,.62);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  font-size: 12.5px;
  font-weight: 700;
}
.hidden{ display:none; }


.counter{
  position: fixed;
  top: 64px;
  left: 18px;
  z-index: 10001;
  padding: 8px 10px;
  border-radius: 14px;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.50);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  font-size: 12px;
  font-weight: 800;
}
.hidden{ display:none; }
@media (max-width:520px){
  .counter{ top: 56px; left: 10px; }
}


/* ===== Premium neon (stabil) ===== */

/* Neon glow for circle markers (csak egérrel/desktopon, mobilon blur-mentes) */
@media (hover:hover) and (pointer:fine){
  .leaflet-interactive{
    filter: drop-shadow(0 0 10px rgba(255,40,40,.55)) drop-shadow(0 0 18px rgba(255,40,40,.35));
  }
}
/* Glass controls */
.leaflet-control-layers,
.leaflet-bar{
  background: rgba(10,10,14,.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.45) !important;
}
.leaflet-control-layers label,
.leaflet-control-layers-list{ color: rgba(255,255,255,.92) !important; }
.leaflet-control-layers-separator{ border-top: 1px solid rgba(255,255,255,.12) !important; }
.leaflet-bar a{ color: rgba(255,255,255,.92) !important; background: transparent !important; }

/* Premium popup */
.leaflet-popup-content-wrapper{
  background: rgba(18,18,24,.92) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 20px;
}
.popup-title{ color: rgba(255,255,255,.98) !important; }
.note{ color: rgba(255,255,255,.80) !important; }
.popup-actions a{
  background: linear-gradient(135deg, rgba(179,0,0,1), rgba(255,40,40,1)) !important;
  box-shadow: 0 10px 28px rgba(255,40,40,.28), 0 0 22px rgba(255,40,40,.22);
  border: 1px solid rgba(255,255,255,.14) !important;
}


/* ===== Vad.png DIV ICON ===== */
.vad-div-icon{
  background: transparent !important;
  border: 0 !important;
}
.vad-div-wrap{
  width: 32px;
  height: 32px;
  display:block;
}
.vad-div-wrap img{
  width: 32px;
  height: 32px;
  display:block;
  /* alapállapot: NINCS pulzálás (Androidon ne mossa a térképet) */
  transform: translateZ(0);
  filter: drop-shadow(0 0 4px rgba(255,0,0,.28));
}


/* Pulzálás: CSAK JS-ből indítjuk kattintás után (Androidon ne induljon véletlenül betöltéskor) */
.vad-div-icon .vad-div-wrap img{
    animation: vadSubtlePulse 2.8s ease-in-out infinite !important;
  will-change: transform;
}

}
/* ===== Készítő jelzés (jobb alsó sarok) ===== */
.credit-glass{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10002;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(10,10,14,.55);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.credit-glass a{
  color: rgba(255,255,255,.98);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.credit-glass a:hover{
  text-decoration-thickness: 2px;
}
@media (max-width:520px){
  .credit-glass{ right: 10px; bottom: 10px; padding: 9px 10px; }
}


/* ===== Modern cím (bal felső) ===== */
.glass-title{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(10,10,14,.52);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  color: rgba(255,255,255,.94);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
  position: relative;
  overflow: hidden;
}

/* Finom „shimmer” csík a felületen */
.glass-title::before{
  content: "";
  position: absolute;
  inset: -60% -40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
  transform: translateX(-40%) rotate(8deg);
  animation: titleShimmer 6.5s linear infinite;
  pointer-events: none;
}

@keyframes titleShimmer{
  0%{ transform: translateX(-60%) rotate(8deg); opacity: .0; }
  10%{ opacity: .35; }
  90%{ opacity: .0; }
}

/* Szövegkiemelések */
.title-accent{
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.70));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.title-strong{
  background: linear-gradient(135deg, rgba(255,72,72,1), rgba(179,0,0,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255,40,40,.18);
}

@media (max-width:520px){
  .glass-title{ font-size: 14px; padding: 10px 12px; border-radius: 16px; }
}


/* ===== FIX: cím ne tolja le a térképet ===== */
.glass-title{
  position: fixed !important;
  top: 14px;
  left: 14px;
  z-index: 10003;
  max-width: calc(100vw - 28px);
}

/* Ha nagyon hosszú, törjön szépen */
.glass-title{ flex-wrap: wrap; }


/* ===== GPS / Saját pozíció gomb + jelölés ===== */
.locate-control .locate-btn{
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}
.locate-control .locate-btn img{
  width: 18px;
  height: 18px;
  display: block;
  opacity: .92;
}
.locate-control .locate-btn.is-loading{
  position: relative;
  pointer-events: none;
}
.locate-control .locate-btn.is-loading::after{
  content:"";
  position:absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  animation: gpsSpin 0.85s linear infinite;
}
@keyframes gpsSpin{ to{ transform: rotate(360deg); } }

/* Pulsáló pozíció pötty */
.user-pos-icon{ background: transparent !important; border: 0 !important; }
.user-pos-dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 3px rgba(0,132,255,.55), 0 0 14px rgba(0,132,255,.35);
  position: relative;
}
.user-pos-dot::after{
  content:"";
  position:absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px solid rgba(0,132,255,.45);
  animation: none;
}

.user-pos-dot.is-pulsing::after{
  animation: gpsPulse 1.6s ease-out infinite;
}
@keyframes gpsPulse{
  0%{ transform: scale(0.5); opacity: .85; }
}

/* Kis "toast" popup (GPS) */
.gps-toast .leaflet-popup-content-wrapper{
  padding: 0;
  border-radius: 14px;
}
.gps-toast-inner{
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 800;
}


/* ===== Balesetszámláló réteg (főképernyő) ===== */
.accident-overlay{
  position: fixed;
  top: 66px;
  left: 18px;
  z-index: 9998;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.96);
  background: linear-gradient(135deg, rgba(10,10,14,.55), rgba(255,155,0,.22));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 36px rgba(0,0,0,.42);
  max-width: calc(100vw - 36px);
}
.accident-overlay .accident-number{
  font-weight: 900;
  margin-left: 6px;
  font-size: 15px;
}


/* ===== Balesetszámláló (bal alsó, üveg hatás, animált szám) ===== */

.baleset-counter{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9999;

  padding: 10px 14px;
  border-radius: 999px;
  max-width: 320px;

  background: rgba(15, 18, 24, .38);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 6px rgba(0,0,0,.75);
  line-height: 1.1;
  user-select: none;
}

.baleset-line1{ font-weight: 800; font-size: 13px; }
.baleset-line2{ font-weight: 800; font-size: 13px; margin-top: 4px; }

.baleset-number{
  font-weight: 900;
  font-size: 16px;
  color: #ff4d4d;
  text-shadow: 0 0 4px rgba(255,0,0,.25), 0 2px 6px rgba(0,0,0,.75);
  animation: balesetElegantPulse 3.2s ease-in-out infinite;
}

@keyframes balesetElegantPulse{
  0%   { text-shadow: 0 0 4px rgba(255,0,0,.20), 0 2px 6px rgba(0,0,0,.75); }
  50%  { text-shadow: 0 0 10px rgba(255,0,0,.45), 0 2px 6px rgba(0,0,0,.75); }
  100% { text-shadow: 0 0 4px rgba(255,0,0,.20), 0 2px 6px rgba(0,0,0,.75); }
}
  50%  { transform: scale(1.08); opacity: .85; }
  100% { transform: scale(1);   opacity: 1; }
}

@media (max-width: 600px){
  .baleset-counter{
    left: 12px;
    bottom: 12px;
    max-width: 190px;
    padding: 8px 10px;
    border-radius: 12px;
  }
  .baleset-line1, .baleset-line2{ font-size: 12.5px; }
  .baleset-number{
  font-weight: 900;
  font-size: 16px;
  color: #ff4d4d;
  text-shadow: 0 0 4px rgba(255,0,0,.25), 0 2px 6px rgba(0,0,0,.75);
  animation: balesetElegantPulse 3.2s ease-in-out infinite;
}

@keyframes balesetElegantPulse{
  0%   { text-shadow: 0 0 4px rgba(255,0,0,.20), 0 2px 6px rgba(0,0,0,.75); }
  50%  { text-shadow: 0 0 10px rgba(255,0,0,.45), 0 2px 6px rgba(0,0,0,.75); }
  100% { text-shadow: 0 0 4px rgba(255,0,0,.20), 0 2px 6px rgba(0,0,0,.75); }
}
  50%  { transform: scale(1.08); opacity: .85; }
  100% { transform: scale(1);   opacity: 1; }
}
}



/* ===== Modern rétegkezelő ikon ===== */
.leaflet-control-layers-toggle {
    background-image: none !important;
    background-color: rgba(15, 18, 24, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    width: 38px !important;
    height: 38px !important;
    position: relative;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.25);
}

.leaflet-control-layers-toggle::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 9px;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2L2 7l10 5 10-5-10-5zm0 7.2L2 4.8V9l10 5 10-5V4.8L12 9.2zm0 6L2 10.8V15l10 5 10-5v-4.2l-10 4.4z'/></svg>") center center no-repeat;
    background-size: contain;
    opacity: 0.95;
}

.leaflet-control-layers {
    border-radius: 12px !important;
    overflow: hidden;
}



/* ===== GLASS BLACK POPUP - FIXED ===== */

.leaflet-popup-content-wrapper {
    background: rgba(15, 15, 15, 0.55) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 10px 35px rgba(0,0,0,0.7);
    color: #ffffff;
}

.leaflet-popup-tip {
    background: rgba(15, 15, 15, 0.55) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.leaflet-popup-content {
    background: transparent !important;
    color: #ffffff;
}

.leaflet-popup-close-button {
    color: #ffffff !important;
    font-size: 18px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.leaflet-popup-close-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

.leaflet-popup {
    animation: popupFade 0.25s ease-out;
}

@keyframes popupFade {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}






/* ===== Admin toolbar (save/load) – Leaflet control ===== */
.admin-toolbar{
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0,0,0,0.55);
  padding: 10px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

.admin-toolbar button,
.admin-toolbar .filebtn{
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.1;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  user-select: none;
}

.admin-toolbar button:hover,
.admin-toolbar .filebtn:hover{
  background: rgba(0,0,0,0.85);
  transform: translateY(-1px);
}

.admin-toolbar input{ display:none; }


/* Útszakasz törlés UI */
.admin-toolbar .route-row{ display:flex; gap:6px; margin-top:6px; align-items:center; }
.admin-toolbar .routeSelect{ flex:1; min-width: 140px; height: 30px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,10,14,.35); color: rgba(255,255,255,.92); padding: 0 10px; }
.admin-toolbar .btnDelete{ height: 30px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.14); color: rgba(255,255,255,.92); font-weight: 700; }
.admin-toolbar .btnDelete:disabled{ opacity:.45; }

/* Floating author badge */
.author-badge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  /* Match the bottom-left accident panel (dark glass) */
  background: rgba(15, 18, 24, .38);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 6px rgba(0,0,0,.75);
  font-size: 13px;
  line-height: 1;
  user-select: none;

  animation: authorBadgeFloat 6s ease-in-out infinite;
}
.author-badge__label{
  opacity: .85;
  font-weight: 600;
  white-space: nowrap;
}

.author-badge__link {
  color: rgba(255,255,255,.98);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0,0,0,.75);
}

.author-badge__link:hover{
  text-decoration: underline;
}

.author-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
}

@keyframes authorBadgeFloat{
  0%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .author-badge{ animation: none; }
}




/* ===== Mobil: alsó fix elemek ne csússzanak egymásra ===== */
@media (max-width: 520px){
  /* A két alsó „üveg” felület (bal alsó számláló + jobb alsó jelvény) telefonnál könnyen átfed */
  .baleset-counter{
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: 64px; /* hely a jelvénynek alul */
  }
  .author-badge{
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: 12px;
    justify-content: center;
    animation: none; /* kevesebb ugrálás mobilon */
  }
  .author-badge__label{ display:inline; font-size:12px; opacity:.9; } /* mobilon is látszódjon */
  .author-badge{ flex-wrap: wrap; gap: 6px; }
  .author-badge__link{ font-size:13px; }
}
/* Admin toolbar section separator */
.tool-sep{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Veszélyes helyek UI row */
.danger-row{
  display: flex;
  gap: 6px;
}

.danger-row select{
  flex: 1 1 auto;
  min-width: 160px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
}

/* Active state for add button */
.admin-toolbar .btnDangerAdd.is-active{
  outline: 2px solid rgba(255,255,255,0.25);
}

/* Marker icon */
.danger-place-icon{ background: transparent; border: none; }
.danger-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 60, 60, 0.95);
  box-shadow: 0 0 0 3px rgba(255,60,60,0.25), 0 6px 12px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.55);
}

/* === Android blur / pulzálás fix === */
.is-android .leaflet-interactive{ filter: none !important; }
.is-android .vad-div-wrap img{ filter: none !important; animation: none !important; }
.is-android .vad-div-icon.is-pulsing .vad-div-wrap img{ animation: none !important; } /* JS pulse only, Androidon teljesen kikapcsoljuk */
.is-android .user-pos-dot::after{ animation: none !important; opacity: 0 !important; }


/* ==========================
   Vadveszély tábla – enyhe folyamatos pulzálás
   ========================== */

@keyframes vadSubtlePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

.vad-div-icon .vad-div-wrap img {
  animation: vadSubtlePulse 2.8s ease-in-out infinite;
  transform-origin: center center;
}


/* ==========================
   Mobil optimalizálás (fejléc + alsó sáv)
   ========================== */

/* Alapból maradjon egy sorban asztalin */
.glass-title .title-line1,
.glass-title .title-line2,
.glass-title .title-line3{
  display: inline;
}
.glass-title .title-line2{ margin-left: 6px; }
.glass-title .title-line3{ margin-left: 6px; }
.glass-title .title-mid{ opacity: .92; }

@media (max-width:520px){
  /* Fejléc: középre, fix 3 sor */
  .glass-title{
    left: 12px !important;
    right: 12px !important;
    top: 10px !important;
    max-width: none !important;
    text-align: center !important;
    display: block !important;
  }
  .glass-title .title-line1,
  .glass-title .title-line2,
  .glass-title .title-line3{
    display: block !important;
    margin-left: 0 !important;
  }
  .glass-title .title-line1{ font-size: 16px; }
  .glass-title .title-line2{ font-size: 14px; }
  .glass-title .title-line3{ font-size: 13px; line-height: 1.15; }

  /* Alsó sáv: a két panel ne foglalja el külön-külön a teljes szélességet */
  .credit-glass{ display:none !important; } /* duplikált készítő doboz elrejtése mobilon */

  .baleset-counter{
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    max-width: calc(50vw - 18px) !important;
    padding: 8px 10px !important;
  }

  .author-badge{
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    max-width: calc(50vw - 18px) !important;
    padding: 8px 10px !important;
    justify-content: flex-end !important;
  }

  .author-badge__label{ font-size: 11px !important; }
  .author-badge__link{ font-size: 12px !important; }
}


/* --- Mobile fix: make the author glass narrower so it doesn't touch the counter --- */
@media (max-width: 520px) {
  .baleset-counter{
    left: 10px !important;
    bottom: 12px !important;
    max-width: 52vw !important; /* keep it responsive */
  }

  .author-badge{
    right: 10px !important;
    bottom: 12px !important;

    max-width: 44vw !important;   /* THIS shrinks the glass */
    padding: 8px 10px !important; /* slightly tighter */
    gap: 6px !important;

    display: flex !important;
    flex-wrap: wrap !important;   /* allow wrap to become narrower */
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .author-badge__label{
    flex: 1 0 100% !important;    /* put label on its own line */
    font-size: 11px !important;
    opacity: .9 !important;
  }

  .author-badge__link{
    flex: 1 0 100% !important;    /* name on its own line too */
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}


/* Pufferek animált megjelenése (SVG path attribútumok átmenettel) */
.buffer-poly{
  transition: stroke-opacity 260ms ease, fill-opacity 260ms ease;
}

@media (max-width:520px){
  .baleset-counter{ left: 10px; bottom: 10px; padding: 9px 12px; }
}



/* --- MOBILE FIX: prevent bottom panels from touching --- */
@media (max-width: 600px){
  .baleset-counter{
    max-width: calc(50vw - 20px) !important;
  }
  .credit-glass{
    max-width: calc(50vw - 20px) !important;
  }
}



/* --- MOBILE FIX v2: stronger spacing between the two bottom panels --- */
@media (max-width: 520px){
  .baleset-counter{
    left: 10px !important;
    right: auto !important;
    bottom: 10px !important;
    max-width: calc(50vw - 60px) !important; /* extra gap so they never touch */
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }
  .credit-glass{
    right: 10px !important;
    left: auto !important;
    bottom: 10px !important;
    max-width: calc(50vw - 60px) !important; /* extra gap so they never touch */
    padding: 8px 10px !important;
    border-radius: 14px !important;
    text-align: right !important;
  }
}

/* --- Leaflet layers button: center the icon inside the toggle --- */
.leaflet-control-layers-toggle{
  background-position: center center !important;
  background-size: 26px 26px !important;
}



/* --- MOBILE FIX v3: uniform line spacing for 3-line accident counter --- */
@media (max-width: 520px){
  .baleset-counter{
    line-height: 1.15 !important;
  }
  .baleset-counter .baleset-line1,
  .baleset-counter .baleset-line2,
  .baleset-counter .baleset-line3{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
    display: block !important;
  }
  .baleset-counter .baleset-line2{
    margin-top: 2px !important;
  }
  .baleset-counter .baleset-line3{
    margin-top: 4px !important;
  }
  .baleset-counter .baleset-number{
    display: inline-block !important;
    line-height: 1 !important;
  }
}



/* --- FIX v4: Perfect centering of Leaflet layers icon --- */
.leaflet-control-layers-toggle{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-position: center center !important;
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  padding: 0 !important;
}



/* --- FIX v5: Hard override for perfect Leaflet layers icon centering --- */
.leaflet-control-layers-toggle{
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  background-repeat: no-repeat !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.leaflet-control-layers{
  width: 36px !important;
  height: 36px !important;
}



/* --- FIX v6: Keep centered icon, but allow layers panel to expand on click --- */
/* Don't lock the whole control to 36x36 when expanded */
.leaflet-control-layers{
  width: auto !important;
  height: auto !important;
}

/* Only the small closed-state button should be 36x36 */
.leaflet-control-layers:not(.leaflet-control-layers-expanded){
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Ensure the expanded panel can size itself */
.leaflet-control-layers.leaflet-control-layers-expanded{
  width: auto !important;
  height: auto !important;
  padding: 6px 8px !important; /* Leaflet default-ish */
}