.test-wrap{padding:0}
.test-map-wrap{position:relative; width:100%; height: calc(100dvh - 64px);}
.test-map{position:absolute; inset:0; width:100%; height:100%;}
/* panel */
.test-ui{
  position:absolute; left:14px; top:14px; z-index: 1000;
  width:min(360px, calc(100vw - 28px));
  background: rgba(10,12,16,.82);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 12px 10px 12px;
}
.test-ui.is-collapsed{transform: translateY(calc(-100% - 18px)); opacity:.2; pointer-events:none}
.test-ui__title{font-weight:700; letter-spacing:.2px; margin-bottom:8px; color:#fff}
.test-ui__row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.test-ui .btn{
  appearance:none; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff; border-radius: 12px;
  padding: 8px 10px; font-weight:600; cursor:pointer;
}
.test-ui .btn:hover{background: rgba(255,255,255,.10)}
.test-ui__legend{border-top:1px solid rgba(255,255,255,.08); padding-top:10px}
.legend-title{font-weight:700; margin-bottom:8px; color:#fff}
.legend-grid{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff; font-weight:650; font-size:13px;
}
.chip::before{content:""; width:10px; height:10px; border-radius: 999px; display:inline-block}
.chip--rain::before{background:#28a9ff}
.chip--snow::before{background:#bfe6ff}
.chip--storm::before{background:#c86cff}
.chip--mix::before{background:#4be06a}
.legend-note{margin-top:8px; font-size:12px; color: rgba(255,255,255,.75)}
.muted{color: rgba(255,255,255,.78)}
/* Leaflet tweaks for touch */
.leaflet-touch .leaflet-bar a{width:40px; height:40px; line-height:40px;}
/* Make OWM tiles blend nicer */
.owm-clouds canvas, .owm-clouds img { mix-blend-mode: screen; }
.owm-precip canvas, .owm-precip img { mix-blend-mode: normal; }
/* Responsive */
@media (max-width: 720px){
  .test-map-wrap{height: calc(100dvh - 56px);}
  .test-ui{left:10px; top:10px; width:min(360px, calc(100vw - 20px));}
}
/* ====== PRO: kolorowy radar jak na screenie ====== */
.leaflet-tile.radar-tile{
  mix-blend-mode: screen;
  filter: saturate(1.35) contrast(1.08);
}
.leaflet-tile.clouds-tile{
  opacity: 0.60;
  mix-blend-mode: soft-light;
}
.leaflet-tile.owm-precip-tile{
  mix-blend-mode: screen;
  filter: saturate(1.25);
}

/* kompatybilność z poprzednimi klasami */
.owm-clouds img, .owm-clouds canvas{ mix-blend-mode: soft-light; }
.owm-precip img, .owm-precip canvas{ mix-blend-mode: screen; }

/* ====== Timeline (RainViewer) ====== */
.test-timeline{
  margin-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
}
.test-timeline__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:8px;
}
.test-timeline__title{font-weight:700; color:#fff}
.test-timeline__time{font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); font-size:12px}
.test-timeline__row{display:flex; gap:10px; align-items:center}
.btn--small{padding:6px 10px; border-radius:10px}
.rv-slider{
  width: 100%;
  accent-color: rgba(255,255,255,.75);
}

/* ====== Lepsza widoczność śniegu (OWM snow) ====== */
.leaflet-tile.owm-snow-tile{
  mix-blend-mode: screen;
  filter: saturate(1.55) contrast(1.15) brightness(1.02);
}