:root, body[data-theme="dark"]{
    --tlo:#161618;
    --panel:#1d1d20;
    --panel-2:#27272b;
    --linia:#3a3a41;
    --ink:#ececee;
    --muted:#9a9aa2;
    --akcent:#e6e6e9;        /* jasna stal */
    --akcent-tekst:#1a1a1c;  /* tekst na akcencie */
    --chip:#b9b9c0;
    --pin:#f1f1f3;
    --pin-obwod:#161618;
    --cien:rgba(0,0,0,.5);
    --ok:#9fd6b4;
    --blad:#e0a3a3;
  }
  body[data-theme="light"]{
    --tlo:#f1f1f2;
    --panel:#ffffff;
    --panel-2:#f6f6f7;
    --linia:#d7d7db;
    --ink:#1b1b1e;
    --muted:#6c6c74;
    --akcent:#222226;
    --akcent-tekst:#f4f4f5;
    --chip:#55555c;
    --pin:#222226;
    --pin-obwod:#f1f1f2;
    --cien:rgba(0,0,0,.16);
    --ok:#2c7a4b;
    --blad:#a33d3d;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;height:100dvh}
  body{
    background:var(--tlo);color:var(--ink);
    font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;
    display:flex;flex-direction:column;overflow:hidden;
    transition:background .25s,color .25s;
  }

  .baner-miejsce{
    width:100%;display:flex;align-items:center;justify-content:center;
    padding:19px 16px;border-bottom:1px solid var(--linia);flex-shrink:0}
  .baner-miejsce img,.baner-miejsce a{max-width:100%;height:auto}
  .baner-miejsce img{display:block;border-radius:8px;max-height:160px}
  .baner-puste{
    width:100%;text-align:center;font-size:12px;
    color:var(--muted);letter-spacing:.04em;
    border:1px dashed var(--linia);border-radius:8px;padding:38px 8px}

  /* ── pasek wydarzeń w tym miesiącu (przewijany) ─────────── */
  .pasek-dat{
    overflow:hidden;flex-shrink:0;
    border-bottom:1px solid var(--linia);
    background:var(--panel-2);
    padding:9px 0;
  }
  .pasek-dat-track{
    display:flex;align-items:baseline;width:max-content;
    white-space:nowrap;will-change:transform;
    animation: pasek-przewij linear infinite;
    animation-duration: var(--pasek-czas, 50s);
  }
  .pasek-dat:hover .pasek-dat-track{animation-play-state:paused}
  .pasek-dat-item{
    display:inline-flex;align-items:baseline;gap:8px;
    padding:0 26px;font-size:13px;cursor:pointer;
    border-right:1px solid var(--linia);color:var(--ink);
    transition:color .12s}
  .pasek-dat-item:hover{color:var(--muted)}
  .pasek-dat-item b{
    font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;font-size:11.5px;color:var(--muted)}
  .pasek-dat-item .pasek-dat-miejsce{color:var(--muted)}
  .pasek-dat-puste{padding:0 18px;font-size:13px;color:var(--muted)}
  @keyframes pasek-przewij{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }
  @media (prefers-reduced-motion: reduce){
    .pasek-dat-track{animation:none}
  }
  .baner-zajawka{color:var(--muted);font-size:12.5px;letter-spacing:.06em;
    text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bmc{
    flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
    background:#caa06c;color:#2b1d10;text-decoration:none;
    font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;
    box-shadow:0 2px 10px var(--cien);transition:transform .12s;
  }
  .bmc:hover{transform:translateY(-1px)}
  .bmc:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* ── nagłówek ─────────────────────────────── */
  header{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:12px 18px;border-bottom:1px solid var(--linia);
    background:var(--panel);flex-shrink:0;z-index:1200;position:relative;
    row-gap:10px;
  }
  .naglowek-gora{
    flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  }
  .naglowek-akcje{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .logo{
    font-weight:900;font-size:17px;letter-spacing:.16em;text-transform:uppercase;
    flex-shrink:0;display:flex;align-items:center;height:100%;max-height:48px}
  .logo b{color:var(--muted);font-weight:600}
  .logo img{display:block;height:100%;max-height:40px;max-width:160px;width:auto}
  header .licznik{margin-left:auto;color:var(--muted);font-size:13px;flex-shrink:0}
  .btn{
    border:0;border-radius:10px;cursor:pointer;text-align:center;
    font-family:inherit;font-weight:600;font-size:14px;
    padding:10px 16px;transition:transform .12s,box-shadow .12s,background .12s,color .12s;
  }
  .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .btn-glowny{background:var(--akcent);color:var(--akcent-tekst);
    box-shadow:0 3px 14px var(--cien)}
  .btn-glowny:hover{transform:translateY(-1px)}
  .btn-cichy{background:var(--panel-2);color:var(--ink);border:1px solid var(--linia)}
  .btn-cichy:hover{background:var(--linia)}
  .btn-ikona{
    width:40px;height:40px;padding:0;border-radius:50%;
    font-size:22px;font-weight:700;line-height:1;
    display:inline-flex;align-items:center;justify-content:center}
  #btnMotyw{
    width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    font-size:17px;padding:0;background:var(--panel-2);
    border:1px solid var(--linia);color:var(--ink);cursor:pointer}
  #btnMotyw:hover{background:var(--linia)}
  #btnMotyw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* ── układ ────────────────────────────────── */
  main{flex:1;display:flex;min-height:0;position:relative}
  #mapa{flex:1;min-width:0;background:var(--tlo)}
  .leaflet-container{font-family:inherit;background:var(--tlo)}
  #mapa.celownik{cursor:crosshair}

  aside{
    width:380px;flex-shrink:0;display:flex;flex-direction:column;
    border-right:1px solid var(--linia);background:var(--panel);min-height:0;
  }
  .filtry-naglowek{
    flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
    gap:10px;flex-wrap:wrap}
  .filtry-naglowek input[type="search"]{
    flex:1 1 160px;min-width:120px;max-width:260px;
    background:var(--tlo);color:var(--ink);
    border:1px solid var(--linia);border-radius:8px;
    padding:8px 11px;font-family:inherit;font-size:13px;
  }
  .filtry-naglowek input:focus{
    outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
  form input,form select,form textarea{
    width:100%;background:var(--tlo);color:var(--ink);
    border:1px solid var(--linia);border-radius:8px;
    padding:9px 11px;font-family:inherit;font-size:14px;
  }
  form :is(input,select,textarea):focus{
    outline:2px solid var(--ink);outline-offset:0;border-color:transparent}

  #lista{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}
  #lista::-webkit-scrollbar{width:8px}
  #lista::-webkit-scrollbar-thumb{background:var(--linia);border-radius:4px}
  .lista-tytul,.lista-tytul-dol{display:none}

  /* ── bilet ────────────────────────────────── */
  .bilet{
    position:relative;display:flex;background:var(--panel-2);
    border:1px solid var(--linia);border-radius:12px;cursor:pointer;
    transition:transform .12s,border-color .12s;overflow:hidden;
    flex-shrink:0;  /* karta nigdy się nie ściska — lista po prostu się przewija */
  }
  .bilet:hover,.bilet:focus-visible{transform:translateY(-2px);border-color:var(--muted)}
  .bilet:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .bilet .tresc{flex:1;padding:13px 14px;min-width:0}
  .bilet .data{
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);font-weight:700;margin-bottom:4px}
  .bilet h3{font-size:15px;font-weight:800;line-height:1.3;
    margin-bottom:3px;overflow-wrap:anywhere}
  .bilet .gdzie{color:var(--muted);font-size:13px}
  .bilet .gat{
    display:inline-block;margin-top:7px;font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--chip);
    border:1px solid var(--linia);border-radius:999px;padding:2px 9px}
  .bilet .gat + .gat-festiwal{margin-left:6px}
  .bilet .gat-festiwal{
    display:inline-block;margin-top:7px;font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
    border:1px solid var(--ink);border-radius:999px;padding:2px 9px}
  .bilet .kupon{
    width:86px;flex-shrink:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
    border-left:2px dashed var(--linia);background:var(--panel);
  }
  .bilet .kupon::before,.bilet .kupon::after{
    content:"";position:absolute;right:71px;width:16px;height:16px;
    border-radius:50%;background:var(--panel);border:1px solid var(--linia)}
  .bilet .kupon::before{top:-9px}
  .bilet .kupon::after{bottom:-9px}
  .kupon .cena{font-weight:800;font-size:14.5px}
  .kupon .waluta{font-size:11px;color:var(--muted);letter-spacing:.1em}
  .kupon-linki{display:flex;gap:8px;margin-top:6px}
  .kupon-linki a{
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:50%;
    color:var(--ink);border:1px solid var(--linia);background:var(--tlo);
    transition:background .12s,color .12s}
  .kupon-linki a svg{width:18px;height:18px;fill:currentColor}
  .kupon-linki a:hover{color:var(--muted);background:var(--panel-2)}
  .segmenty{display:flex;gap:8px;flex-wrap:wrap}
  .seg{display:flex;background:var(--tlo);border:1px solid var(--linia);
    border-radius:8px;overflow:hidden;flex:1;min-width:max-content}
  .seg button{
    flex:1;background:none;border:0;padding:7px 10px;cursor:pointer;
    font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
    white-space:nowrap}
  .seg button+button{border-left:1px solid var(--linia)}
  .seg button.aktywny{background:var(--akcent);color:var(--akcent-tekst)}
  .seg button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  .pusto{color:var(--muted);text-align:center;padding:40px 10px;line-height:1.6;flex-shrink:0}

  /* ── markery ──────────────────────────────── */
  .pin{position:relative}
  .pin .kropka{
    width:14px;height:14px;border-radius:50%;background:var(--pin);
    border:2px solid var(--pin-obwod);box-shadow:0 0 8px 1px var(--cien)}
  .pin .fala{
    position:absolute;inset:-7px;border-radius:50%;
    border:2px solid var(--pin);opacity:.6;animation:fala 2.2s infinite}
  .pin.pin-czerwony .kropka{background:#e2554f}
  .pin.pin-czerwony .fala{border-color:#e2554f}
  .pin.pin-zielony .kropka{background:#4cb56e}
  .pin.pin-zielony .fala{border-color:#4cb56e}
  .pin.pin-fioletowy .kropka{background:#a06bea}
  .pin.pin-fioletowy .fala{border-color:#a06bea}
  @keyframes fala{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.5);opacity:0}}
  @media (prefers-reduced-motion:reduce){
    .pin .fala{animation:none}
    .btn,.bilet{transition:none}
  }

  /* ── wybór koloru pinezki ─────────────────── */
  .kolory{display:flex;gap:10px;align-items:center}
  .kolor-kafel{
    width:30px;height:30px;border-radius:50%;cursor:pointer;padding:0;
    border:2px solid var(--linia);background:var(--pin);
    transition:transform .12s,border-color .12s,box-shadow .12s}
  .kolor-kafel:hover{transform:scale(1.08)}
  .kolor-kafel.aktywny{border-color:var(--ink);box-shadow:0 0 0 3px var(--tlo),0 0 0 5px var(--ink)}
  .kolor-kafel[data-kolor="czerwona"]{background:#e2554f}
  .kolor-kafel[data-kolor="zielona"]{background:#4cb56e}
  .kolor-kafel[data-kolor="fioletowa"]{background:#a06bea}
  .leaflet-popup-content-wrapper{
    background:var(--panel-2);color:var(--ink);border-radius:12px;
    border:1px solid var(--linia)}
  .leaflet-popup-tip{background:var(--panel-2)}
  .leaflet-popup-content{margin:14px 16px;line-height:1.5;font-size:13.5px}
  .pop h3{font-size:14px;font-weight:800;margin-bottom:2px}
  .pop .meta{color:var(--muted);font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
  .pop .opis{color:var(--muted);margin-bottom:8px;max-width:240px}
  .pop .cena{font-weight:700}
  .pop a{color:var(--ink)}
  .pop .usun{margin-top:8px;background:none;border:1px solid var(--linia);
    color:var(--muted);border-radius:7px;padding:4px 10px;font-size:12px;
    cursor:pointer;font-family:inherit}
  .pop .usun:hover{color:var(--blad);border-color:var(--blad)}
  .leaflet-bar a{background:var(--panel-2);color:var(--ink);border-color:var(--linia)}
  .leaflet-bar a:hover{background:var(--linia)}

  /* ── panel dodawania ──────────────────────── */
  #panelForm{
    position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);
    background:var(--panel);border-left:1px solid var(--linia);
    z-index:1500;display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .25s ease;
  }
  #panelForm.otwarty{transform:translateX(0)}
  #panelForm .naglowek{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;border-bottom:1px solid var(--linia)}
  #panelForm h2{font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  #panelForm form{flex:1;overflow-y:auto;padding:18px;display:grid;gap:13px}
  form label{display:grid;gap:5px;font-size:12.5px;color:var(--muted);
    font-weight:600;letter-spacing:.04em}
  form textarea{resize:vertical;min-height:74px}
  .rzad2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .lokal{border:1px dashed var(--linia);border-radius:10px;padding:12px;
    display:grid;gap:8px;background:var(--tlo)}
  .lokal .status{font-size:13px;color:var(--muted)}
  .lokal .status.ok{color:var(--ok);font-weight:600}
  .blad{color:var(--blad);font-size:13px;display:none}
  .blad.widoczny{display:block}
  .info{font-size:12px;color:var(--muted);line-height:1.5}
  .captcha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .captcha .pytanie{font-weight:700;font-size:15px;white-space:nowrap}
  .captcha input{width:70px;flex:0 0 70px}
  .pole-bot{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;
    opacity:0;overflow:hidden}
  .zamknij{background:none;border:0;color:var(--muted);font-size:22px;
    cursor:pointer;line-height:1;padding:4px}
  .zamknij:hover{color:var(--ink)}

  .toast{
    position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);
    background:var(--panel-2);border:1px solid var(--muted);color:var(--ink);
    padding:11px 20px;border-radius:10px;z-index:2000;font-size:14px;
    transition:transform .3s;box-shadow:0 8px 30px var(--cien)}
  .toast.widoczny{transform:translateX(-50%) translateY(0)}

  /* ── logowanie ───────────────────────────── */
  .kto{color:var(--muted);font-size:13px}
  .kto b{color:var(--ink)}
  #tloAuth{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:2500;display:none;align-items:center;justify-content:center;padding:16px}
  #tloAuth.otwarty{display:flex}
  #oknoAuth{
    width:min(380px,100%);background:var(--panel);border:1px solid var(--linia);
    border-radius:14px;box-shadow:0 16px 50px var(--cien);overflow:hidden}
  #oknoAuth .naglowek{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:1px solid var(--linia)}
  #oknoAuth h2{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  #formAuth{display:grid;gap:13px;padding:18px}
  #formAuth input{
    width:100%;background:var(--tlo);color:var(--ink);
    border:1px solid var(--linia);border-radius:8px;
    padding:9px 11px;font-family:inherit;font-size:14px}
  #formAuth input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
  #formAuth .info{font-size:12px;color:var(--muted);line-height:1.5}

  /* ── stopka ───────────────────────────────── */
  footer{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:8px 18px;border-top:1px solid var(--linia);
    background:var(--panel);flex-shrink:0;min-height:38px}
  .stopka-tekst{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
  #stopkaSocial{display:flex;gap:8px;flex-wrap:wrap}
  #stopkaSocial a{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:600;
    border:1px solid var(--linia);border-radius:999px;padding:4px 12px;
    transition:background .12s}
  #stopkaSocial a svg{width:14px;height:14px;flex-shrink:0;fill:currentColor}
  #stopkaSocial a:hover{background:var(--panel-2)}
  #stopkaSocial a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  @media (max-width:760px){
    main{flex-direction:column}
    #mapa{order:1;flex:1;min-height:0}
    aside{
      width:100%;order:2;flex:none;max-height:38vh;overflow-y:auto;
      border-right:0;border-top:1px solid var(--linia)}

    header{padding:10px 12px;gap:8px;row-gap:8px}
    .logo{font-size:13px;letter-spacing:.1em}
    .logo img{max-height:32px;max-width:120px}
    .naglowek-gora{justify-content:space-between}
    .naglowek-akcje{justify-content:flex-end}
    #btnZglos{display:none}
    .btn{padding:9px 12px;font-size:13px}
    .kto{display:none}

    .pasek-dat-item{padding:0 16px;font-size:12px}
    .bmc{font-size:11px;padding:6px 10px;gap:4px}
    .baner-miejsce{padding:10px 14px}
    .baner-miejsce img{max-height:100px}
    .baner-puste{padding:14px 8px;font-size:11px}

    #panelForm{display:none}
    header .licznik{display:none}

    /* na telefonie: tylko mapa + skrócona lista najbliższych wydarzeń */
    .filtry-naglowek{display:none}
    .lista-tytul,.lista-tytul-dol{
      display:block;padding:12px 16px 0;font-size:12px;font-weight:800;
      letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
    .lista-tytul-dol{
      font-weight:600;letter-spacing:.02em;text-transform:none;
      text-align:center;padding:2px 16px 10px;font-size:11px}
    #lista{flex:none;padding:8px 16px;gap:8px}
    #lista .bilet:nth-child(n+4){display:none}
    #lista .pusto{padding:20px 10px}
    #lista .kupon{display:none}
    #lista .gat,#lista .gat-festiwal{display:none}
    #lista .tresc{padding:10px 12px}
    #lista h3{font-size:14px}
    footer{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  }

  @media (max-width:420px){
    .rzad2{grid-template-columns:1fr}
  }

  /* ── autocomplete miast ────────────────────── */
  .miasto-wrap{position:relative}
  .miasto-lista{
    position:absolute;top:100%;left:0;right:0;z-index:2000;
    background:var(--panel);border:1px solid var(--linia);
    border-radius:8px;box-shadow:0 8px 24px var(--cien);
    max-height:220px;overflow-y:auto;display:none}
  .miasto-lista.otwarta{display:block}
  .miasto-lista li{
    list-style:none;padding:9px 12px;cursor:pointer;
    font-size:13px;display:flex;justify-content:space-between;gap:8px}
  .miasto-lista li:hover,.miasto-lista li.aktywna{background:var(--panel-2)}
  .miasto-lista li .kraj{font-size:12px;color:var(--muted)}

  /* ── klaster markerów (spiderify) ───────────── */
  .pin-klaster{
    width:30px;height:30px;border-radius:50%;
    background:var(--ink);color:var(--tlo);
    font-size:12px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px var(--tlo), 0 0 0 5px var(--ink);
    cursor:pointer;transition:transform .12s}
  .pin-klaster:hover{transform:scale(1.1)}