:root{
  --bg:#0b1220;
  --bg2:#0f1a2f;
  --text:#e8eefc;
  --muted:#b9c6e4;
  --card:rgba(10,16,30,0.55);
  --stroke:rgba(255,255,255,0.10);
  --accent:#7dd3fc;
  --shadow:0 14px 40px rgba(0,0,0,0.35);
  --hi:#ef4444;
  --lo:#60a5fa;
}

.bary-wrap{ padding:14px; }

.bary-topbar{
  display:flex;
  gap:14px;
  align-items:stretch;
  justify-content:space-between;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px;
}

.tb-left{ display:flex; gap:12px; align-items:flex-start; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; padding:0 10px; border-radius:999px;
  background:rgba(125,211,252,0.18);
  border:1px solid rgba(125,211,252,0.35);
  color:var(--text); font-weight:700; letter-spacing:.5px;
}

.tb-head h1{ margin:0; font-size:18px; }
.tb-head p{ margin:6px 0 0 0; color:var(--muted); font-size:13px; line-height:1.35; max-width:740px; }

.tb-right{ display:flex; flex-direction:column; gap:10px; min-width:360px; }
.live{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.dot{
  width:10px; height:10px; border-radius:50%;
  background:#6b7280; box-shadow:0 0 0 3px rgba(107,114,128,.18);
}
.dot.live{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.dot.stale{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.dot.err{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }

.controls{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  padding-top:4px;
}
.btn{
  height:34px; min-width:44px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  cursor:pointer;
  transition:transform .08s ease, background .15s ease;
}
.btn:hover{ background:rgba(255,255,255,0.10); }
.btn:active{ transform:scale(.98); }

.meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.meta #timeLabel{ font-weight:700; font-size:12.5px; }
.muted{ color:var(--muted); font-size:12px; }

.toggles{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.tg{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text); }
.tg input{ transform:translateY(1px); }

.sliders{ display:flex; flex-direction:column; gap:8px; }
.sliderRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
.sliderRow input{ width:170px; }

.bary-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:12px;
  align-items:start;
}

.mapCard{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.map{ height: calc(100vh - 240px); min-height:520px; }

.mapHint{
  padding:10px 12px;
  border-top:1px solid var(--stroke);
  background:rgba(0,0,0,0.12);
}

.side{ display:flex; flex-direction:column; gap:12px; }
.side-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;
}
.side-card h3{ margin:0 0 10px 0; font-size:14px; }
.leg{ display:flex; flex-direction:column; gap:8px; }
.leg-item{ display:flex; gap:10px; align-items:center; font-size:13px; color:var(--text); }

.hlDot{
  width:28px; height:28px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  color:#0b1220;
}
.hlDot.hi{ background:var(--hi); }
.hlDot.lo{ background:var(--lo); }

.swatch{
  width:18px; height:18px; border-radius:6px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.08);
}
.swatch.press{ background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(125,211,252,0.15)); }
.swatch.temp{ background:linear-gradient(180deg, rgba(96,165,250,0.22), rgba(239,68,68,0.20)); }

.leg-note{ margin:10px 0 0 0; color:var(--muted); font-size:12px; line-height:1.35; }

.statusList{ display:flex; flex-direction:column; gap:8px; }
.statusList > div{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; }
.statusList .k{ color:var(--muted); }
.statusList .v{ color:var(--text); font-weight:700; }

.leaflet-control-layers{
  background:rgba(10,16,30,0.90) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  border-radius:12px !important;
  color:var(--text) !important;
}
.leaflet-control-attribution{
  background:rgba(10,16,30,0.55) !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.75) !important;
}
.leaflet-popup-content-wrapper{
  background:rgba(10,16,30,0.92) !important;
  color:var(--text) !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,0.12) !important;
}
.leaflet-popup-tip{ background:rgba(10,16,30,0.92) !important; }

.hlMarker{
  width:52px; height:52px;
  border-radius:999px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,0.22);
  box-shadow:0 10px 20px rgba(0,0,0,0.35);
  color:#0b1220;
  font-weight:900;
}
.hlMarker .p{ font-size:11px; font-weight:800; margin-top:-2px; opacity:.85; }
.hlMarker.hi{ background:var(--hi); }
.hlMarker.lo{ background:var(--lo); }


.hlMarker{
  backdrop-filter: blur(6px);
}
.hlMarker > div:first-child{
  font-size:16px;
  line-height:16px;
  margin-bottom:1px;
}
.hlMarker .p{
  font-size:11px;
  letter-spacing:.2px;
}
.hlMarker.hi{ background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)) , var(--hi); }
.hlMarker.lo{ background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)) , var(--lo); }

/* Popup */
.hlPopup .leaflet-popup-content-wrapper{
  background: rgba(10,16,30,0.92);
  color: var(--text);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  border-radius: 16px;
}
.hlPopup .leaflet-popup-tip{
  background: rgba(10,16,30,0.92);
}
.hlPop{ min-width:260px; }
.hlPopTop{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.hlPopBadge{
  width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#0b1220;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.hlPopBadge.hi{ background: var(--hi); }
.hlPopBadge.lo{ background: var(--lo); }
.hlPopTitle{ font-weight:900; font-size:15px; }
.hlPopP{ font-weight:900; opacity:.95; margin-left:6px; }
.hlPopCond{ display:flex; gap:10px; align-items:center; padding:8px 10px; border:1px solid rgba(255,255,255,0.10); border-radius: 14px; background: rgba(255,255,255,0.04); }
.hlPopCond img{ width:40px; height:40px; border-radius:10px; background: rgba(255,255,255,0.06); }
.hlPopCondMain{ font-weight:800; }
.hlPopCondSub{ font-size:12px; opacity:.75; margin-top:2px; }
.hlPopGrid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:8px; margin-top:10px;
}
.hlPopGrid > div{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.hlPopGrid span{ font-size:12px; opacity:.78; }
.hlPopGrid b{ font-size:13px; }
.hlPopNote{ font-size:11.5px; opacity:.72; margin-top:10px; line-height:1.3; }

/* Map loading banner */
.hlLoading{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index: 900;
  display:none;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(10,16,30,0.82);
  border:1px solid rgba(255,255,255,0.12);
  color: var(--text);
  box-shadow: 0 14px 30px rgba(0,0,0,0.40);
  font-weight:800;
}
.hlLoading.show{ display:flex; align-items:center; gap:10px; }
.hlLoading.show::before{
  content:'';
  width:10px; height:10px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(125,211,252,0.18);
  animation: pulse 1.2s infinite;
}
@keyframes pulse{
  0%{ transform: scale(.95); opacity:.7; }
  50%{ transform: scale(1.12); opacity:1; }
  100%{ transform: scale(.95); opacity:.7; }
}

@media (max-width: 980px){
  .bary-topbar{ flex-direction:column; }
  .tb-right{ min-width:auto; }
  .bary-grid{ grid-template-columns: 1fr; }
  .map{ height: 62vh; min-height:420px; }
}


/* Fullscreen map loading/error overlay */
.mapOverlay{
  position:absolute;
  inset:0;
  z-index: 950;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(11,18,32,0.58);
  backdrop-filter: blur(2px);
}
.mapOverlay.show{ display:flex; }

.mapOverlay .ovCard{
  width:min(520px, 100%);
  border-radius: 18px;
  background: rgba(10,16,30,0.88);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  padding:18px 16px;
  text-align:center;
}
.mapOverlay .ovTitle{
  margin-top:10px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.mapOverlay .ovMsg{
  margin-top:8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.mapOverlay .ovMsg a{ color: var(--accent); text-decoration: none; }
.mapOverlay .ovMsg a:hover{ text-decoration: underline; }

.spinner{
  width:30px;
  height:30px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.75);
  margin: 0 auto;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg);} }



/* ----------------------------
   Legenda PRO (profesjonalny opis)
----------------------------- */
.leg-item{ align-items:flex-start; gap:10px; }
.leg-txt{ display:flex; flex-direction:column; gap:3px; }
.leg-txt b{ font-size:13px; }
.leg-txt .muted{ font-size:12px; line-height:1.35; }

.swatch.iso{
  width:16px; height:16px; border-radius:6px;
  background:transparent;
  border:2px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

.leg-fronts{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--stroke);
  display:grid;
  gap:10px;
}

.leg-front{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.front{
  position:relative;
  width:44px;
  height:14px;
  border-radius:999px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.03);
  overflow:hidden;
}

.front.cold::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:100%; height:0;
  border-top:2px solid rgba(96,165,250,0.95);
  transform:translateY(-50%);
}
.front.cold::after{
  content:"";
  position:absolute;
  left:6px; top:50%;
  width:0; height:0;
  border-left:6px solid rgba(96,165,250,0.95);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  transform:translateY(-50%);
  box-shadow:14px 0 0 rgba(96,165,250,0.95), 28px 0 0 rgba(96,165,250,0.95);
  opacity:0.95;
}

.front.warm::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:100%; height:0;
  border-top:2px solid rgba(239,68,68,0.95);
  transform:translateY(-50%);
}
.front.warm::after{
  content:"";
  position:absolute;
  left:8px; top:50%;
  width:8px; height:8px;
  border:2px solid rgba(239,68,68,0.95);
  border-left:none; border-bottom:none;
  border-radius:50%;
  transform:translateY(-50%) rotate(45deg);
  box-shadow:14px 0 0 rgba(239,68,68,0.95), 28px 0 0 rgba(239,68,68,0.95);
  opacity:0.85;
}

.front.occ::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:100%; height:0;
  border-top:2px solid rgba(168,85,247,0.95);
  transform:translateY(-50%);
}
.front.occ::after{
  content:"";
  position:absolute;
  left:6px; top:50%;
  width:0; height:0;
  border-left:6px solid rgba(168,85,247,0.95);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  transform:translateY(-50%);
  box-shadow:
    14px 0 0 rgba(168,85,247,0.95),
    28px 0 0 rgba(168,85,247,0.95);
  opacity:0.85;
  /* półkola „udajemy” delikatnym gradientem – prosto i lekko */
}