:root {
  --tlo: #f4f6f8; --karta: #fff; --tekst: #1d2733; --przyg: #5b6773; --linia: #dde3e9;
  --akcent: #0b6e4f; --akcent-tekst: #fff; --blad: #b3261e; --uwaga: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root { --tlo: #12171c; --karta: #1b232b; --tekst: #e6ebf0; --przyg: #9aa7b3; --linia: #2d3843;
          --akcent: #2fa37a; --akcent-tekst: #08130f; --blad: #ff8a80; --uwaga: #ffcf6b; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--tlo); color: var(--tekst); }
a { color: var(--akcent); }
main { max-width: 960px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 8px 0 16px; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }
.gora { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px;
        background: var(--karta); border-bottom: 1px solid var(--linia); }
.logo { font-weight: 700; text-decoration: none; color: var(--tekst); }
.gora nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.gora nav a { padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--tekst); }
.gora nav a.akt { background: var(--akcent); color: var(--akcent-tekst); }
.gora form { margin: 0; }
button, input, select { font: inherit; }
button { padding: 8px 14px; border: 0; border-radius: 6px; background: var(--akcent);
         color: var(--akcent-tekst); cursor: pointer; }
button.link { background: none; color: var(--przyg); padding: 6px; text-decoration: underline; }
input[type=search], input[type=password], select {
  padding: 8px 10px; border: 1px solid var(--linia); border-radius: 6px; background: var(--karta);
  color: var(--tekst); width: 100%; }
label { display: block; margin: 8px 0 4px; font-weight: 600; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: 16px; margin: 16px 0; }
.waska { max-width: 380px; margin: 12vh auto 0; }
.kafle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kafel { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: 14px;
         display: flex; flex-direction: column; }
.kafel .liczba { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.kafel span:last-child { color: var(--przyg); font-size: .9rem; }
.filtry { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
.tabela-wrap { overflow-x: auto; background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linia); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { color: var(--przyg); font-weight: 600; font-size: .85rem; }
.liczbowa { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.drobne { color: var(--przyg); font-size: .85rem; }
.znacznik { background: var(--linia); border-radius: 4px; padding: 1px 6px; font-size: .75rem; }
.blad { color: var(--blad); font-weight: 600; }
.uwaga { color: var(--uwaga); }
.strony { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
code { background: var(--linia); padding: 1px 5px; border-radius: 4px; }
@media (min-width: 700px) {
  .kafle { grid-template-columns: repeat(4, 1fr); }
  .filtry { grid-template-columns: 2fr 1.5fr auto auto auto; align-items: center; }
}
input[type=text], input:not([type]) { padding: 8px 10px; border: 1px solid var(--linia); border-radius: 6px;
  background: var(--karta); color: var(--tekst); width: 100%; }
.komunikat { border-color: var(--akcent); margin-top: 0; }
form.inline { display: inline; }
.zakladki { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.zakladki a { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--linia); text-decoration: none; color: var(--tekst); background: var(--karta); }
.zakladki a.akt { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); }
.filtry-przeglad { grid-template-columns: 1fr; }
.lista-kart { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.karta-wiersz { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: 12px; overflow-wrap: anywhere; }
.wiersz-gora { font-size: 1.05rem; }
details.decyzja { margin-top: 8px; }
details.decyzja > summary { cursor: pointer; padding: 10px 12px; border: 1px solid var(--linia); border-radius: 8px; list-style: none; color: var(--akcent); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details.decyzja[open] > summary { border-color: var(--akcent); }
.pigulki { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pigulka { margin: 0; font-weight: 400; }
.pigulka input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pigulka span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--linia); border-radius: 999px; cursor: pointer; background: var(--karta); }
.pigulka input:checked + span { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); }
.pigulka input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }
textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--linia); border-radius: 6px; background: var(--karta); color: var(--tekst); font: inherit; }

/* strona „Próbni” */
input[type=tel] { padding: 8px 10px; border: 1px solid var(--linia); border-radius: 6px; background: var(--karta);
  color: var(--tekst); width: 100%; }
.numery { display: grid; gap: 8px; margin: 10px 0; }
.numer { border: 1px solid var(--linia); border-radius: 8px; padding: 10px; }
.numer-ok { border-color: var(--akcent); }
.rzad-akcji { display: grid; gap: 6px; margin-top: 6px; }
.rzad-akcji label { margin: 0; font-weight: 400; }
.rzad-akcji button, .akcje-karty button { min-height: 44px; }
.akcje-karty { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.akcje-karty form { margin: 0; }
.akcje-karty details.decyzja { flex: 1 1 220px; margin-top: 0; }
button.wtorny { background: none; color: var(--akcent); border: 1px solid var(--akcent); }
.znacznik.ok { background: var(--akcent); color: var(--akcent-tekst); }
.notatka { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--akcent); white-space: pre-line; }
@media (min-width: 700px) {
  .rzad-akcji { grid-template-columns: auto 1fr auto; align-items: center; }
  .rzad-akcji label { grid-column: 1; }
  .rzad-akcji input[type=tel] { max-width: 260px; }
}

/* Panel Próbnych (/probni) — styl jak dawny panel-artefakt: karty, chipy, liczniki u góry (paleta z panel-n8n.html, bez zewnętrznych fontów) */
:root {
  --pr-bg: #F5F5F2; --pr-surface: #FFFFFF; --pr-surface2: #ECEDE9; --pr-border: #DEDFDA; --pr-text: #191B1A; --pr-muted: #6B6F6C;
  --pr-accent: #0090A0; --pr-accent-soft: #DFF4F6; --pr-ok: #1A8A4C; --pr-ok-soft: #E3F5EA; --pr-warn: #B4740E; --pr-warn-soft: #FBEFDC;
  --pr-danger: #C23B3B; --pr-danger-soft: #FBE7E7; --pr-idle: #6B6F6C; --pr-idle-soft: #EBEBE8;
}
@media (prefers-color-scheme: dark) {
  :root { --pr-bg: #15181A; --pr-surface: #1D2124; --pr-surface2: #242830; --pr-border: #31363B; --pr-text: #EEF0EE; --pr-muted: #9AA0A0;
          --pr-accent: #3FD3E4; --pr-accent-soft: #123339; --pr-ok: #4ED089; --pr-ok-soft: #123322; --pr-warn: #E6AC49; --pr-warn-soft: #3A2C12;
          --pr-danger: #F0807D; --pr-danger-soft: #3A1A1A; --pr-idle: #9AA0A0; --pr-idle-soft: #2A2E31; }
}
@media (max-width: 699px) { .gora nav { flex: 1 1 100%; order: 3; } }
body:has(.pr) { background: var(--pr-bg); color: var(--pr-text); }
.pr h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 2px; }
.pr-sub { color: var(--pr-muted); font-size: 13.5px; margin: 0 0 16px; }
.pr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pr-stat { background: var(--pr-surface); border: 1px solid var(--pr-border); border-radius: 12px; padding: 12px 14px; text-decoration: none;
           color: var(--pr-text); display: flex; flex-direction: column; min-height: 44px; }
.pr-stat .n { font-size: 26px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-stat .l { font-size: 11.5px; color: var(--pr-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.pr-stat.active { border-color: var(--pr-accent); box-shadow: 0 0 0 1px var(--pr-accent) inset; }
.pr-stat-przejrzec .n { color: var(--pr-warn); } .pr-stat-potwierdzone .n { color: var(--pr-accent); }
.pr-stat-zatwierdzone .n { color: var(--pr-ok); } .pr-stat-wyslane .n { color: var(--pr-text); } .pr-stat-pominiete .n { color: var(--pr-idle); }
.pr-seg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.pr-card { background: var(--pr-surface); border: 1px solid var(--pr-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px;
           display: flex; flex-direction: column; gap: 10px; color: var(--pr-text); overflow-wrap: anywhere; }
.pr-card > * { min-width: 0; }
.pr-lista { list-style: none; margin: 0; padding: 0; }
.pr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pr-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-name { font-weight: 600; font-size: 15px; }
.pr-date, .pr-meta { color: var(--pr-muted); font-size: 12.5px; }
.pr-sendbar { border-color: var(--pr-accent); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pr-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: normal; background: var(--pr-idle-soft); color: var(--pr-idle); }
.pr-chip.ok { background: var(--pr-ok-soft); color: var(--pr-ok); } .pr-chip.warn { background: var(--pr-warn-soft); color: var(--pr-warn); }
.pr-chip.danger { background: var(--pr-danger-soft); color: var(--pr-danger); } .pr-chip.accent { background: var(--pr-accent-soft); color: var(--pr-accent); }
.pr-chip.idle { background: var(--pr-idle-soft); color: var(--pr-idle); }
.pr-tel { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--pr-muted); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.pr-label .count { background: var(--pr-surface2); border-radius: 20px; padding: 1px 8px; font-size: 11px; color: var(--pr-text); }
.pr-btn { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--pr-border); border-radius: 8px; padding: 8px 12px; cursor: pointer;
          background: var(--pr-surface); color: var(--pr-text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
          min-height: 44px; }
.pr-btn:active { opacity: .7; }
.pr-btn.primary { background: var(--pr-accent-soft); color: var(--pr-accent); border-color: transparent; }
.pr-btn.ok { background: var(--pr-ok-soft); color: var(--pr-ok); border-color: transparent; }
.pr-btn.ghost { background: transparent; color: var(--pr-muted); }
.pr-btn.seg { background: var(--pr-surface2); color: var(--pr-muted); border-color: transparent; }
.pr-btn.seg.active { background: var(--pr-accent-soft); color: var(--pr-accent); border-color: var(--pr-accent); }
.pr-btn.big { width: 100%; }
.pr-btn[disabled] { opacity: .5; cursor: default; }
.pr-btn:focus-visible, .pr a:focus-visible { outline: 2px solid var(--pr-accent); outline-offset: 2px; }
.pr input[type=text], .pr input[type=search], .pr input[type=tel], .pr input[type=date], .pr select, .pr textarea {
  width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--pr-border);
  background: var(--pr-bg); color: var(--pr-text); min-height: 44px; }
.pr textarea { min-height: 76px; line-height: 1.45; }
.pr label { font-size: 12px; color: var(--pr-muted); font-weight: 400; margin: 6px 0 2px; }
.pr .pr-check { display: flex; align-items: center; gap: 8px; color: var(--pr-text); font-size: 13px; margin: 4px 0; min-height: 36px; }
.pr .pr-check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--pr-accent); flex: none; }
.pr-okres-form { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.pr-okres-form button { grid-column: 1 / -1; }
.pr-filtry { display: grid; gap: 8px; margin: 8px 0 14px; }
.pr-komunikat { background: var(--pr-accent-soft); color: var(--pr-text); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin: 0 0 12px; }
.pr-komunikat.blad { background: var(--pr-danger-soft); color: var(--pr-danger); }
.pr-ostrz { font-size: 12.5px; color: var(--pr-warn); background: var(--pr-warn-soft); border-radius: 8px; padding: 6px 10px; }
.pr-notatka { font-size: 13px; padding: 6px 10px; border-left: 3px solid var(--pr-accent); white-space: pre-line; }
.pr-numery { display: grid; gap: 8px; }
.pr-numer { border: 1px solid var(--pr-border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--pr-bg); }
.pr-numer.ok { border-color: var(--pr-ok); }
.pr-dopasowanie { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pr-dopasowanie > div { background: var(--pr-surface); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; }
.pr-dopasowanie .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pr-muted); }
.pr-dopasowanie .v { font-size: 14px; font-weight: 600; }
.pr-akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-akcje form { margin: 0; }
.pr-potwierdz { display: grid; gap: 6px; }
.pr-zatw.tak { background: var(--pr-ok-soft); border-radius: 10px; padding: 8px 10px; }
.pr-msg, .tresc-sms { background: var(--pr-surface2); border: 1px dashed var(--pr-border); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.pr-podglad { margin: 8px 0; display: grid; gap: 4px; }
.pr-det > summary { cursor: pointer; font-size: 12.5px; color: var(--pr-accent); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.pr-glowne { align-items: flex-start; }
.pr-glowne > form:first-child .big { width: auto; }
.pr-odmowy { margin: 0; padding-left: 20px; font-size: 13px; }
.pr-strony { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; gap: 8px; }
.pr-pusto { color: var(--pr-muted); }
@media (min-width: 700px) {
  .pr-stats { grid-template-columns: repeat(5, 1fr); }
  .pr-okres-form { grid-template-columns: auto 160px auto 160px auto; }
  .pr-okres-form button { grid-column: auto; }
  .pr-filtry { grid-template-columns: 2fr 1.5fr auto; }
  .pr-dopasowanie { grid-template-columns: 1fr 1fr; }
  .pr-potwierdz { grid-template-columns: auto 1fr auto; align-items: center; }
  .pr-potwierdz input { max-width: 260px; }
  .pr-btn.big { width: auto; }
  .pr-sendbar .pr-btn.big { align-self: flex-start; }
}

/* Kontakty: leady i ptaszek numeru */
.numer-kontaktu { min-width: 150px; }
.numer-kontaktu button { min-height: 44px; width: 100%; }
.pigulki-studio { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pigulki-studio a { padding: 6px 12px; border: 1px solid var(--linia); border-radius: 999px; text-decoration: none; color: var(--tekst); background: var(--karta); min-height: 36px; display: inline-flex; align-items: center; }
.pigulki-studio a.akt { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); }