.europa-wrap{display:grid;grid-template-columns: 1fr 380px;gap:16px;align-items:start}
@media (max-width: 1100px){.europa-wrap{grid-template-columns:1fr}}
.europa-panel{background:rgba(10,12,16,.55);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px;backdrop-filter: blur(10px);box-shadow: 0 10px 30px rgba(0,0,0,.25)}
.europa-panel h1{font-size:18px;margin:0 0 10px}
.europa-panel .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.europa-panel input[type="search"]{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:inherit;outline:none}
.europa-panel .pill{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);font-size:13px}
.europa-panel button{padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:inherit;cursor:pointer}
.europa-panel button:hover{background:rgba(255,255,255,.10)}
.europa-map-wrap{position:relative}
.europa-map{height: calc(100vh - 160px); min-height:560px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10)}
.europa-toast{
  position:absolute;
  left:14px;
  top:14px;
  z-index: 600; /* nad leaflet */
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.90);
  font-size: 13px;
  line-height: 1.2;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(0);
  opacity: 1;
  transition: opacity .25s ease, transform .25s ease;
}
.europa-toast.hide{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events:none;
}
@media (max-width: 1100px){.europa-map{height: 70vh; min-height:520px}}
.europa-legend{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.europa-legend .box{padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);font-size:12px;line-height:1.35}
.europa-status{margin-top:8px;font-size:12px;opacity:.9}
.europa-status.ok{color:#bfe5c1}
.europa-status.err{color:#ffb3b3}

.toggle-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.toggle{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);font-size:12px;cursor:pointer;user-select:none}
.toggle input{accent-color:#ffd166}

.marker-capital{filter: drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.capital-chip{position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
  font-weight:700;
}
.capital-chip .wx{font-size:16px;line-height:1;margin-bottom:2px}
.capital-chip .t{font-size:16px;line-height:1;margin-top:2px}
.capital-chip .wind{font-size:12px;line-height:1.1;margin-top:4px;opacity:.95;display:flex;align-items:center;gap:6px}
.capital-chip .wind svg{display:block}
.capital-chip .n{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter: blur(8px);font-size:12px;font-weight:800;letter-spacing:.2px;color:rgba(255,255,255,.95);text-shadow: 0 2px 10px rgba(0,0,0,.55);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.capital-pop{min-width:240px}
.capital-pop .title{font-weight:800;margin-bottom:4px}
.capital-pop .sub{font-size:12px;opacity:.75;margin-bottom:6px}
.capital-pop .grid{display:grid;grid-template-columns: 1fr 1fr;gap:6px;font-size:12px}
.capital-pop .kv{padding:6px 8px;border-radius:10px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20);font-size:11px;margin-left:6px}

/* === DARK WORLD MAP === */
.dark-map .leaflet-container {
  background:#0b0f14;
}
.dark-map .leaflet-tile {
  filter: brightness(.65) contrast(1.1) saturate(1.2);
}

/* === WEATHER ICONS (WMO) === */
.weather-icon {
  width:28px;
  height:28px;
  background-size:contain;
  background-repeat:no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
}

/* ==== Ładne ikony pogodowe (SVG) ==== */
.wx-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
.wx-ic svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter: drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.wx-ic svg circle{fill:currentColor;stroke:none}
.wx-ic.cloud{color: rgba(230,235,255,.92)}
.wx-ic.clear-day{color:#ffd166}
.wx-ic.clear-night{color:#9bb7ff}
.wx-ic.partly-day{color:#ffd166}
.wx-ic.partly-night{color:#9bb7ff}
.wx-ic.rain{color:#66b8ff}
.wx-ic.snow{color:#eaf2ff}
.wx-ic.fog{color:rgba(220,225,240,.85)}
.wx-ic.storm{color:#9b5cff}
.wx-stack{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
.wx-stack svg{position:absolute;inset:0}
.wx-stack svg:last-child{transform: translate(4px,4px) scale(.95);opacity:.95;color: rgba(230,235,255,.92)}
.capital-chip .wx{font-size:0;line-height:1;margin-bottom:2px} /* reset emoji sizing */


/* ==== Animacje ikon (PRO) ==== */
.wx-svg{overflow:visible}

/* delikatne "unoszenie" ikon */
.marker-capital .wx-ic{animation: wxFloat 2.8s ease-in-out infinite}
@keyframes wxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}

/* słońce */
.wx-ic.clear-day .wx-sun-rays{transform-origin:12px 12px;animation: wxRotate 10s linear infinite}
@keyframes wxRotate{to{transform:rotate(360deg)}}

/* księżyc + gwiazdy */
.wx-ic.clear-night .wx-moon{animation: wxPulse 3.4s ease-in-out infinite}
.wx-ic.clear-night .wx-star{opacity:.55;animation: wxTwinkle 2.8s ease-in-out infinite}
.wx-ic.clear-night .wx-star.s2{animation-delay:.7s}
.wx-ic.clear-night .wx-star.s3{animation-delay:1.2s}
@keyframes wxPulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.9;transform:translateY(-.4px)}}
@keyframes wxTwinkle{0%,100%{opacity:.25}50%{opacity:.75}}

/* chmury – przesuw + różne prędkości */
.wx-ic .wx-cloud{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wx-ic .cloud-back{opacity:.55;animation: wxDrift 7.5s ease-in-out infinite}
.wx-ic .cloud-front{opacity:.92;animation: wxDrift 5.2s ease-in-out infinite}
@keyframes wxDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(1.6px)}}

/* deszcz – krople spadają */
.wx-ic.rain .wx-drop,
.wx-ic.storm .wx-drop{
  stroke:currentColor;
  stroke-width:1.9;
  animation: wxRain 1.1s linear infinite;
  opacity:.9;
}
.wx-ic.rain .wx-drop.d2,
.wx-ic.storm .wx-drop.d2{animation-delay:.22s}
.wx-ic.rain .wx-drop.d3{animation-delay:.44s}
.wx-ic.rain .wx-drop.d4{animation-delay:.66s}
@keyframes wxRain{
  0%{transform:translateY(-.6px);opacity:.2}
  20%{opacity:.9}
  100%{transform:translateY(2.6px);opacity:.1}
}

/* śnieg – płatki opadają + lekki drift */
.wx-ic.snow .wx-flake{
  fill:currentColor;
  stroke:none;
  opacity:.9;
  animation: wxSnow 1.7s ease-in-out infinite;
}
.wx-ic.snow .wx-flake.f2{animation-delay:.35s}
.wx-ic.snow .wx-flake.f3{animation-delay:.7s}
@keyframes wxSnow{
  0%{transform:translate(0,-.8px);opacity:.25}
  50%{transform:translate(.8px,1.2px);opacity:.95}
  100%{transform:translate(0,2.8px);opacity:.15}
}

/* mgła – linie "płyną" */
.wx-ic.fog .wx-fogline{
  stroke:currentColor;
  stroke-width:1.7;
  opacity:.75;
  animation: wxFog 3.2s ease-in-out infinite;
}
.wx-ic.fog .wx-fogline.l2{animation-delay:.35s}
.wx-ic.fog .wx-fogline.l3{animation-delay:.7s}
@keyframes wxFog{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(1.4px);opacity:.9}}

/* burza – błyskawica mruga */
.wx-ic.storm .wx-bolt{
  stroke:currentColor;
  stroke-width:1.9;
  fill:none;
  animation: wxFlash 2.4s infinite;
  transform-origin:12px 16px;
}
@keyframes wxFlash{
  0%,78%,100%{opacity:.25}
  80%{opacity:1}
  82%{opacity:.25}
  85%{opacity:1}
  88%{opacity:.25}
}

/* mini ikony opadów (zamiast emoji) */
.wx-mini{display:inline-flex;align-items:center;justify-content:center;gap:2px}
.wx-mini svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.wx-mini.rain{color:#66b8ff}
.wx-mini.snow{color:#eaf2ff}

/* ==== Center loader ==== */
@keyframes spin{to{transform:rotate(360deg)}}


/* ==== PRO legenda ==== */
.europa-legend.pro .box-title{font-weight:800;margin-bottom:8px;letter-spacing:.2px}
.europa-legend.pro .lg-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;opacity:.92;margin:6px 0}
.europa-legend.pro .lg-ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);font-size:12px;opacity:.9}
.europa-legend.pro .scale{display:grid;gap:6px;margin-top:6px}
.europa-legend.pro .scale.temp{grid-template-columns: repeat(7, 1fr)}
.europa-legend.pro .scale.wind{grid-template-columns: repeat(5, 1fr)}
.europa-legend.pro .sw{height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
/* temp colors (as in utils) */
.europa-legend.pro .sw[data-t="m40"]{background:#3a0f73}
.europa-legend.pro .sw[data-t="m20"]{background:#9a6bff}
.europa-legend.pro .sw[data-t="m10"]{background:#1f63ff}
.europa-legend.pro .sw[data-t="m0"]{background:#66b8ff}
.europa-legend.pro .sw[data-t="p10"]{background:#19c37d}
.europa-legend.pro .sw[data-t="p20"]{background:#ffd166}
.europa-legend.pro .sw[data-t="p30"]{background:#ff3b30}
/* wind colors (as in utils) */
.europa-legend.pro .sw[data-w="l1"]{background:#19c37d}
.europa-legend.pro .sw[data-w="l2"]{background:#ffd166}
.europa-legend.pro .sw[data-w="l3"]{background:#ff8a3d}
.europa-legend.pro .sw[data-w="l4"]{background:#ff3b30}
.europa-legend.pro .sw[data-w="l5"]{background:#9b5cff}
.europa-legend.pro .scale-labels{display:flex;justify-content:space-between;font-size:11px;opacity:.75;margin-top:6px}
.europa-legend.pro .hint{margin-top:8px;font-size:12px;opacity:.78;line-height:1.35}

/* ==== Marker: czytelniejsze nazwy stolic ==== */
.capital-chip{position:relative;width:78px;height:78px;border-radius:20px}
.capital-chip .n{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter: blur(8px);font-size:12px;font-weight:800;letter-spacing:.2px;color:rgba(255,255,255,.95);text-shadow: 0 2px 10px rgba(0,0,0,.55);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* === Granice państw (nocny tryb) === */
.leaflet-overlay-pane path {
  filter: drop-shadow(0 0 2px rgba(255,212,0,.35));
}

/* === Nazwa stolicy pod pogodą === */
.capital-chip .n{
  position: static;
  margin-top: 6px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  text-align: center;
  color: rgba(255,255,255,.9);
}


