/* radiogram — CSS paczki zawężony do .pk-radiogram + motyw webp.pl. Źródło: new-tools/paczki/radiogram. Generowane: buduj.mjs */
.pk-radiogram{
  --bg: #ffffff; --surface: #141926; --surface2: #1d2433;
  --text: #eaeef5; --muted: #98a2b3; --accent: #f9c94a; --accent2: #8f7dff;
  --danger: #ff5d5d;
  color-scheme: dark;
}
.pk-radiogram, .pk-radiogram *{ box-sizing: border-box; }
.pk-radiogram{
  margin: 0; font-family: system-ui, "Segoe UI", sans-serif;
  background: radial-gradient(900px 500px at 80% -10%, #f8fafc 0%, var(--bg) 60%);
  color: var(--text); min-height: 100vh; padding-bottom: 90px;
}
.pk-radiogram .top{ display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid #f1f5f9; position: sticky; top: 0; background: rgba(11,14,20,.92); backdrop-filter: blur(6px); z-index: 50; }
.pk-radiogram .brand{ font-weight: 800; font-size: 22px; color: var(--text); text-decoration: none; }
.pk-radiogram .brand span{ color: var(--accent); }
.pk-radiogram .brand small{ color: var(--muted); font-weight: 400; font-size: 11px; }
.pk-radiogram nav{ display: flex; gap: 6px; margin-left: auto; }
.pk-radiogram nav a{ color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 10px; font-size: 14px; }
.pk-radiogram nav a.on{ background: var(--surface2); color: var(--text); }
.pk-radiogram main{ max-width: 1000px; margin: 26px auto 40px; padding: 0 16px; }
.pk-radiogram h1{ font-size: 30px; margin: 6px 0 4px; }
.pk-radiogram h2{ font-size: 19px; }
.pk-radiogram .lede{ color: var(--muted); margin: 0 0 16px; }
.pk-radiogram .orbit{
  position: relative; overflow: hidden; border-radius: 20px;
  background: linear-gradient(140deg, #f8fafc 0%, #12172a 70%);
  border: 1px solid #1f2740; padding: 30px 24px; margin-bottom: 22px;
}
.pk-radiogram .orbit h1{ font-size: 34px; }
.pk-radiogram .orbit .chips{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pk-radiogram .searchbar{ display: flex; gap: 8px; margin-bottom: 14px; }
.pk-radiogram .searchbar input{
  flex: 1; padding: 13px 16px; font-size: 16px;
  background: var(--surface); border: 1px solid #2a3245; color: var(--text); border-radius: 12px;
}
.pk-radiogram .searchbar button{ padding: 12px 20px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.pk-radiogram .searchbar .rnd{ background: var(--accent2); color: #fff; }
.pk-radiogram .searchbar .rnd-sim{ background: #2c3652; }
.pk-radiogram .searchbar .rnd:disabled{ opacity: .6; cursor: wait; }
.pk-radiogram .rnd-hint{ color: var(--muted); display: block; margin: -6px 0 8px; font-size: 13px; }
.pk-radiogram .chip-row{ display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.pk-radiogram .chip{
  border: 1px solid #2a324a; background: var(--surface); color: var(--muted);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.pk-radiogram .chip.is-active{ background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.pk-radiogram .chip small{ opacity: .7; margin-left: 4px; }
.pk-radiogram .facet-label{ color: var(--muted); font-size: 13px; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.pk-radiogram .grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.pk-radiogram .card{
  display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--surface); border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 12px; cursor: pointer; color: var(--text); min-width: 0;
}
.pk-radiogram .card:hover{ border-color: #3a466b; }
.pk-radiogram .card img{ width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface2); flex-shrink: 0; }
.pk-radiogram .card .t{ font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-radiogram .card .s{ color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-radiogram .card .fav{ margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; }
.pk-radiogram .card .fav-on{ color: var(--accent); }
.pk-radiogram .empty{ color: var(--muted); text-align: center; padding: 40px 0; }
.pk-radiogram .err{ color: var(--danger); }
.pk-radiogram .player{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex; gap: 14px; align-items: center;
  background: rgba(17,22,34,.97); border-top: 1px solid #e2e8f0;
  padding: 10px 18px;
}
.pk-radiogram .player img{ width: 46px; height: 46px; border-radius: 10px; background: var(--surface2); object-fit: cover; }
.pk-radiogram .p-meta{ min-width: 0; flex: 1; }
.pk-radiogram .p-meta #p-title{ font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-radiogram .p-meta #p-sub{ color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-radiogram .p-btn{ width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 17px; cursor: pointer; }
.pk-radiogram .p-vol{ display: flex; gap: 6px; align-items: center; color: var(--muted); }
.pk-radiogram #p-state{ color: var(--muted); font-size: 12px; width: 70px; text-align: right; }
.pk-radiogram .pod{ display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; }
.pk-radiogram .pod img{ width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--surface2); }
.pk-radiogram .pod .body{ min-width: 0; }
.pk-radiogram .pod .t{ font-weight: 700; }
.pk-radiogram .pod .d{ color: var(--muted); font-size: 13px; max-height: 40px; overflow: hidden; }
.pk-radiogram .pod button{ margin-top: 8px; }
.pk-radiogram .ep{ display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.pk-radiogram .ep:hover{ background: var(--surface); }
.pk-radiogram .ep .t{ font-size: 14px; font-weight: 600; }
.pk-radiogram .ep .s{ color: var(--muted); font-size: 12px; }
.pk-radiogram .loading{ color: var(--muted); padding: 30px 0; text-align: center; }
@media (max-width: 640px){.pk-radiogram .grid{ grid-template-columns: 1fr 1fr; }
.pk-radiogram .p-vol{ display: none; }
}

/* === motyw webp.pl (nadpisuje ciemny motyw paczki) === */
.pk-radiogram{--bg:#ffffff;--surface:#ffffff;--surface2:#f8fafc;--text:#0f172a;--muted:#64748b;--accent:#4f46e5;--accent2:#7c3aed;--gold:#4f46e5;--danger:#dc2626;--ok:#059669;
  color-scheme:light;color:var(--text);background:none!important;min-height:0!important;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55}
.pk-radiogram .top,.pk-radiogram .foot,.pk-radiogram .back,.pk-radiogram #view>h1,.pk-radiogram #view>.lede:first-of-type{display:none!important}
.pk-radiogram .panel{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -18px rgba(15,23,42,.25)}
.pk-radiogram input,.pk-radiogram select,.pk-radiogram textarea{background:#f8fafc;color:#0f172a;border:1.5px solid #e2e8f0;border-radius:10px}
.pk-radiogram .fields select,.pk-radiogram label select{display:block;width:100%;min-height:42px;padding:9px 12px;font:inherit;font-size:15px;appearance:auto}
.pk-radiogram input:focus,.pk-radiogram select:focus,.pk-radiogram textarea:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.15);background:#fff}
.pk-radiogram .cta{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.pk-radiogram .cta.ghost,.pk-radiogram .cta.ghosted,.pk-radiogram .cta[data-rot],.pk-radiogram .row .cta{background:#fff;color:#4f46e5;border:1px solid #e2e8f0}
.pk-radiogram #go.cta,.pk-radiogram .row #go.cta{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:0}
.pk-radiogram .res{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}
.pk-radiogram .res b{color:#0f172a}
.pk-radiogram a{color:#4f46e5}
.pk-radiogram .err{color:#dc2626}
.pk-radiogram ::placeholder{color:#94a3b8}
.pk-radiogram [data-mode="photo"],.pk-radiogram #photoBlock{display:none!important}
.pk-radiogram .orbit{background:linear-gradient(135deg,#eef2ff,#f5f3ff)!important;border:1px solid #e0e7ff!important}
.pk-radiogram .orbit h1,.pk-radiogram .orbit .lede{color:#0f172a}
.pk-radiogram .player{background:rgba(255,255,255,.97)!important;border-top:1px solid #e2e8f0!important;box-shadow:0 -8px 30px -12px rgba(15,23,42,.25);color:#0f172a}
.pk-radiogram .player #p-sub,.pk-radiogram .player #p-state{color:#64748b}
.pk-radiogram .przyklady{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13px;color:#64748b}
.pk-radiogram .przyklady .chip{border:1px solid #e2e8f0;background:#fff;color:#334155;border-radius:999px;padding:5px 11px;cursor:pointer;font-size:13px}
.pk-radiogram .przyklady .chip:hover{border-color:#4f46e5;color:#4f46e5}
.pk-radiogram .res b.err{text-align:left}
.pk-radiogram textarea,.pk-radiogram textarea.mono{word-break:normal!important;overflow-wrap:break-word;white-space:pre-wrap}
.pk-radiogram label.inline:has(> input[type=checkbox]){display:flex!important;gap:8px;align-items:center}
.pk-radiogram label.inline > input[type=checkbox]{width:auto!important;margin:0!important;display:inline-block!important}
@media (max-width:600px){.pk-radiogram label.inline{display:block;margin:8px 0}.pk-radiogram label.inline input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),.pk-radiogram label.inline select,.pk-radiogram label.inline textarea{display:block;width:100%!important;max-width:100%;margin-top:4px;box-sizing:border-box}}
.pk-radiogram .pk-zakladki{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:6px;background:#f1f5f9;border-radius:14px}
.pk-radiogram .pk-zakladki a{flex:1 1 auto;text-align:center;padding:9px 14px;border-radius:10px;color:#334155;font-weight:600;text-decoration:none;white-space:nowrap}
.pk-radiogram .pk-zakladki a.on{background:#fff;color:#4f46e5;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.pk-radiogram .drop{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;padding:18px;margin:0 0 14px;border:2px dashed #c7d2fe;border-radius:14px;background:#f5f7ff;color:#334155;text-align:center;cursor:pointer;transition:.15s}
.pk-radiogram .drop:hover,.pk-radiogram .drop.nad{border-color:#4f46e5;background:#eef2ff}
.pk-radiogram .drop b{color:#4f46e5}