/* =========================================================
   dovOZE — design system aplikacji
   =========================================================
   Tokeny przepisane 1:1 z landingu (WAITLISTA/public/styles.css).
   Nie wolno tu „poprawiać" odcienia zieleni ani dokładać
   drugiego koloru akcentu. Aplikacja ma wyglądać jak dalszy
   ciąg strony, a nie jak osobny produkt.

   Zieleń jest akcentem, nie tłem — kilka procent powierzchni
   ekranu. Hierarchię buduje kontrast szarości: --fg → --fg-2 → --fg-3.
   ========================================================= */

:root{
  /* Mówi przeglądarce, że motyw jest ciemny. Bez tego natywne
     kontrolki — rozwinięta lista <select>, pasek przewijania,
     kalendarz w polu daty — rysują się w kolorach systemowych
     i potrafią wyjść białym tekstem na białym tle. */
  color-scheme:dark;

  /* tła */
  --bg:#080A09;
  --bg-2:#0B0E0D;
  --surface:#0F1412;
  --surface-2:#141A17;
  --surface-3:#1A211D;

  /* obramowania */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);

  /* tekst */
  --fg:#EDF2EF;
  --fg-2:#A3AFA9;
  --fg-3:#6B7871;

  /* akcent */
  --green:#2BE58F;
  --green-2:#0B9A63;
  --green-3:#075C3C;
  --green-soft:rgba(43,229,143,.10);
  --green-line:rgba(43,229,143,.26);

  /* sygnał */
  --yellow:#FFC94A;
  --yellow-soft:rgba(255,201,74,.12);

  /* błąd */
  --red:#FF8A8A;
  --red-soft:rgba(255,90,90,.08);
  --red-line:rgba(255,120,120,.28);

  /* promienie */
  --r-sm:8px; --r:12px; --r-md:16px; --r-lg:22px;

  /* typografia */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* cienie */
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 32px 72px -20px rgba(0,0,0,.75);

  --side-w:224px;
  --top-h:60px;
  --przejscie:180ms cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}

img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

::selection{background:rgba(43,229,143,.28);color:#fff}

:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green);color:#04140C;padding:12px 18px;
  border-radius:0 0 var(--r) 0;font-weight:600;
}
.skip:focus{left:0}

.ico{flex:0 0 auto}

/* =========================================================
   TYPOGRAFIA
   Im większy tekst, tym mocniejszy ujemny tracking.
   Wagi wyłącznie 400 / 500 / 600.
   ========================================================= */
h1,.h1{font-size:26px;font-weight:600;letter-spacing:-.035em;line-height:1.2}
h2,.h2{font-size:19px;font-weight:600;letter-spacing:-.025em;line-height:1.3}
h3,.h3{font-size:15.5px;font-weight:600;letter-spacing:-.015em}

.etykieta{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-3);
  font-weight:400;
}

.mono{font-family:var(--mono);letter-spacing:-.02em}
.drugorzedny{color:var(--fg-2)}
.trzeciorzedny{color:var(--fg-3);font-size:13px}
.dodatni{color:var(--green)}
.ujemny{color:var(--red)}

/* =========================================================
   POWŁOKA PANELU
   ========================================================= */
.panel{display:flex;min-height:100vh}

.side{
  width:var(--side-w);
  flex:0 0 var(--side-w);
  background:var(--bg-2);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}

.side-marka{
  display:flex;align-items:center;gap:10px;
  padding:16px 14px;
  border-bottom:1px solid var(--line);
}
.side-znak{
  width:32px;height:32px;flex:0 0 32px;
  border-radius:9px;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.side-znak img{width:100%;height:100%;object-fit:contain;padding:3px}
.znak-litery{
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--green);letter-spacing:-.02em;
}
.side-marka-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.side-marka-txt strong{
  font-size:13.5px;font-weight:600;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.side-marka-txt span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);
}

.side-nav{padding:10px 9px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav-poz{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:7px;
  font-size:13.5px;color:var(--fg-3);
  transition:background var(--przejscie),color var(--przejscie);
}
.nav-poz:hover{background:rgba(255,255,255,.035);color:var(--fg-2)}
.nav-poz--on{background:rgba(255,255,255,.05);color:var(--fg);font-weight:500}
.nav-poz--on .ico{color:var(--green)}

.side-stopka{
  display:flex;align-items:center;gap:9px;
  padding:12px 13px;border-top:1px solid var(--line);
}
.side-av{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--fg-2);
}
.side-kto{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3}
.side-kto b{
  font-size:12.5px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.side-kto span{font-size:10.5px;color:var(--fg-3)}
.side-wyjscie{
  color:var(--fg-3);padding:5px;border-radius:6px;
  transition:color var(--przejscie),background var(--przejscie);
}
.side-wyjscie:hover{color:var(--red);background:var(--red-soft)}

.tresc-kolumna{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:var(--top-h);
  flex:0 0 var(--top-h);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 24px;
  position:sticky;top:0;z-index:20;
  background:rgba(8,10,9,.78);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.okruszki{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg-3);min-width:0}
.okruszki a{transition:color var(--przejscie)}
.okruszki a:hover{color:var(--fg-2)}
.okruszki [aria-current]{color:var(--fg)}
.okruszki .sep{color:var(--fg-3);opacity:.5}
.topbar-akcje{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.tresc{padding:24px;flex:1}
.tresc--waskie{max-width:1180px;width:100%;margin-inline:auto}

/* =========================================================
   PRZYCISKI
   Na jednym ekranie dokładnie jeden primary.
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border-radius:10px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;background:none;
  cursor:pointer;white-space:nowrap;
  transition:transform var(--przejscie),background var(--przejscie),
             border-color var(--przejscie),box-shadow var(--przejscie),color var(--przejscie);
}
.btn--sm{height:38px;padding:0 16px;font-size:13.5px;border-radius:9px}
.btn--lg{height:52px;padding:0 26px;font-size:15.5px;border-radius:12px}

.btn--primary{
  background:linear-gradient(180deg,#33EE97 0%,#2BE58F 45%,#17C97A 100%);
  color:#04140C;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 24px -10px rgba(43,229,143,.7);
}
.btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 12px 30px -10px rgba(43,229,143,.85);
}

.btn--ghost{background:rgba(255,255,255,.035);border-color:var(--line-2);color:var(--fg)}
.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);transform:translateY(-1px)}

.btn--cichy{color:var(--fg-3);padding:0 12px}
.btn--cichy:hover{color:var(--fg);background:rgba(255,255,255,.04)}

.btn--zly{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.btn--zly:hover{background:rgba(255,90,90,.14)}

.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

.btn-ikona{
  width:34px;height:34px;padding:0;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--fg-3);border:1px solid transparent;background:none;cursor:pointer;
  transition:color var(--przejscie),background var(--przejscie),border-color var(--przejscie);
}
.btn-ikona:hover{color:var(--fg);background:rgba(255,255,255,.05);border-color:var(--line-2)}
.btn-ikona--zly:hover{color:var(--red);background:var(--red-soft);border-color:var(--red-line)}

/* =========================================================
   FORMULARZE
   ========================================================= */
.pole{margin-bottom:14px}
.pole label{
  display:block;font-size:12.5px;font-weight:500;
  color:var(--fg-2);margin-bottom:6px;
}
.pole input,.pole select,.pole textarea{
  width:100%;height:46px;padding:0 14px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);
  font-size:14.5px;
  transition:border-color var(--przejscie),background var(--przejscie),box-shadow var(--przejscie);
}
.pole textarea{height:auto;padding:11px 14px;line-height:1.55;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{
  outline:none;
  border-color:var(--green);
  background:rgba(43,229,143,.04);
  box-shadow:0 0 0 3px rgba(43,229,143,.14);
}
.pole input::placeholder,.pole textarea::placeholder{color:var(--fg-3)}
.pole select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7871' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:36px;
}

/* Zapasowe kolory rozwiniętej listy natywnej — działają, gdy JS
   jest wyłączony i własny komponent się nie zbuduje. Bez tego
   opcje dziedziczą color:inherit i giną na jasnym tle systemowym. */
select option,
select optgroup{
  background:#141A17;
  color:#EDF2EF;
}
.podpowiedz{font-size:12px;color:var(--fg-3);margin-top:5px;line-height:1.5}

.pola-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.pola-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
@media(max-width:640px){.pola-2,.pola-3{grid-template-columns:1fr}}

.z-sufiksem{position:relative}
.z-sufiksem .sufiks{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:12.5px;color:var(--fg-3);pointer-events:none;
}
.z-sufiksem input{padding-right:44px}

/* segmenty (radio jako przełącznik) */
.segment{display:flex;gap:4px;background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  border-radius:10px;padding:3px}
.segment label{flex:1;position:relative;margin:0}
.segment input{position:absolute;opacity:0;width:0;height:0}
.segment span{
  display:flex;align-items:center;justify-content:center;
  height:36px;border-radius:7px;font-size:13px;font-weight:500;
  color:var(--fg-3);cursor:pointer;text-align:center;padding:0 10px;
  transition:background var(--przejscie),color var(--przejscie);
}
.segment input:checked + span{background:rgba(255,255,255,.07);color:var(--fg)}
.segment input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}

.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.check input{width:17px;height:17px;flex:0 0 17px;margin-top:2px;accent-color:var(--green)}

/* =========================================================
   KARTY I PANELE
   ========================================================= */
.karta{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:22px;
}
.karta--klik{transition:border-color var(--przejscie),transform var(--przejscie),background var(--przejscie)}
.karta--klik:hover{border-color:var(--line-2);transform:translateY(-2px);background:var(--surface-2)}

.karta-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.karta-head h2,.karta-head h3{margin:0}

.siatka{display:grid;gap:16px}
.siatka--2{grid-template-columns:repeat(2,1fr)}
.siatka--3{grid-template-columns:repeat(3,1fr)}
.siatka--4{grid-template-columns:repeat(4,1fr)}
.siatka--6{grid-template-columns:repeat(6,1fr)}
.siatka--glowna{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}
@media(max-width:1100px){
  .siatka--4,.siatka--6{grid-template-columns:repeat(3,1fr)}
  .siatka--glowna{grid-template-columns:1fr}
}
@media(max-width:760px){
  .siatka--2,.siatka--3,.siatka--4,.siatka--6{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .siatka--2,.siatka--3,.siatka--4,.siatka--6{grid-template-columns:1fr}
}

/* =========================================================
   KPI
   ========================================================= */
.kpi{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:7px;
  transition:border-color var(--przejscie),transform var(--przejscie);
}
.kpi:hover{border-color:var(--line-2);transform:translateY(-2px)}
.kpi__label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);
}
.kpi__value{
  font-family:var(--mono);font-size:26px;font-weight:600;
  letter-spacing:-.035em;line-height:1.05;color:var(--fg);
}
.kpi__value--male{font-size:21px}
.kpi__delta{font-size:12px;color:var(--fg-3)}
.kpi__delta--plus{color:var(--green)}

/* =========================================================
   CHIPY / STATUSY
   ========================================================= */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:99px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.05);
  color:var(--fg-2);white-space:nowrap;
}
.chip--ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.chip--uwaga{background:var(--yellow-soft);border-color:rgba(255,201,74,.28);color:var(--yellow)}
.chip--zly{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.chip--info{background:rgba(255,255,255,.06);border-color:var(--line-2);color:var(--fg)}
.chip--cichy{background:transparent;border-color:var(--line);color:var(--fg-3)}

/* =========================================================
   TABELE
   Bez naprzemiennego tła, bez pionowych linii.
   Liczby do prawej, złożone mono.
   ========================================================= */
.tabela-otul{overflow-x:auto;border-radius:var(--r-md)}
table.tabela{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
table.tabela th{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);
  text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.tabela td{
  padding:13px 14px;border-bottom:1px solid var(--line);
  vertical-align:middle;
}
table.tabela tr:last-child td{border-bottom:0}
table.tabela tbody tr{transition:background var(--przejscie)}
table.tabela tbody tr:hover{background:rgba(255,255,255,.02)}
table.tabela .liczba{text-align:right;font-family:var(--mono);letter-spacing:-.02em;white-space:nowrap}
table.tabela .akcje{text-align:right;white-space:nowrap}
table.tabela a.link{color:var(--fg);font-weight:500}
table.tabela a.link:hover{color:var(--green)}
.komorka-pod{display:block;font-size:12px;color:var(--fg-3);margin-top:2px}

/* =========================================================
   PIPELINE (tablica kolumnowa)
   ========================================================= */
.tablica{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.tablica-kol{
  flex:0 0 236px;width:236px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:11px;
}
.tablica-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;padding:0 2px;
}
.tablica-head span{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);
}
.tablica-head i{
  font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--fg-3);background:rgba(255,255,255,.05);
  border-radius:99px;padding:2px 7px;
}
.tablica-head--wygrana span,.tablica-head--wygrana i{color:var(--green)}
.tablica-head--wygrana i{background:var(--green-soft)}

.lead{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:10px 11px;margin-bottom:7px;
  transition:border-color var(--przejscie),transform var(--przejscie),background var(--przejscie);
}
.lead:hover{border-color:var(--line-2);transform:translateY(-1px);background:var(--surface-2)}
.lead b{display:block;font-size:13px;font-weight:500;letter-spacing:-.01em}
.lead span{display:block;font-size:11.5px;color:var(--fg-3);margin-top:2px}
.lead em{
  display:inline-block;font-style:normal;margin-top:6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 6px;border-radius:99px;
  background:var(--yellow-soft);color:var(--yellow);
}
.lead--wygrana{border-color:var(--green-line);background:var(--green-soft)}
.lead--wygrana span{color:var(--green)}
.tablica-pusto{
  font-size:11.5px;color:var(--fg-3);text-align:center;
  padding:14px 8px;border:1px dashed var(--line);border-radius:var(--r-sm);
}

/* =========================================================
   LISTA AKTYWNOŚCI
   ========================================================= */
.log{display:flex;flex-direction:column}
.log li{
  display:flex;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;
}
.log li:last-child{border-bottom:0}
.log-kropka{
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:var(--fg-3);margin-top:7px;
}
.log-kropka--ok{background:var(--green)}
.log-kropka--uwaga{background:var(--yellow)}
.log-tresc{flex:1;min-width:0}
.log-tresc b{font-weight:500}
.log-czas{
  font-family:var(--mono);font-size:11px;color:var(--fg-3);
  white-space:nowrap;flex:0 0 auto;
}

/* =========================================================
   WYMAGA DZIAŁANIA
   ========================================================= */
.zadania{display:flex;flex-direction:column;gap:8px}
.zadanie{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);
  transition:border-color var(--przejscie),transform var(--przejscie);
}
.zadanie:hover{border-color:var(--line-2);transform:translateY(-1px)}
.zadanie-licz{
  font-family:var(--mono);font-size:16px;font-weight:600;
  letter-spacing:-.03em;color:var(--fg);
  min-width:26px;text-align:center;
}
.zadanie-licz--uwaga{color:var(--yellow)}
.zadanie-txt{flex:1;min-width:0;font-size:13.5px}
.zadanie-txt span{display:block;font-size:11.5px;color:var(--fg-3);margin-top:1px}
.zadanie .ico{color:var(--fg-3)}

/* =========================================================
   ALERTY
   ========================================================= */
.alert{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 14px;border-radius:var(--r);
  font-size:13.5px;line-height:1.5;margin-bottom:16px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
}
.alert .ico{margin-top:2px;flex:0 0 auto}
.alert--ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.alert--blad{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.alert--uwaga{background:var(--yellow-soft);border-color:rgba(255,201,74,.28);color:var(--yellow)}

/* =========================================================
   PUSTE STANY I SZKIELETY
   ========================================================= */
.pusto{
  text-align:center;padding:52px 24px;
  border:1px dashed var(--line-2);border-radius:var(--r-md);
}
.pusto h3{font-size:15.5px;font-weight:600;margin-bottom:6px;letter-spacing:-.015em}
.pusto p{font-size:13.5px;color:var(--fg-2);margin-bottom:18px;max-width:44ch;margin-inline:auto}

.szkielet{
  background:rgba(255,255,255,.04);
  border-radius:var(--r-sm);
  height:16px;
  animation:puls 1.4s ease-in-out infinite;
}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.45}}

/* =========================================================
   WYKRES
   ========================================================= */
.wykres{width:100%;height:130px;overflow:visible}
.wykres-linia{fill:none;stroke:var(--green);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wykres-pole{fill:url(#gradWykres)}
.wykres-siatka{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}

/* =========================================================
   ZAKŁADKI
   ========================================================= */
.zakladki{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.zakladka{
  padding:9px 14px;font-size:13.5px;color:var(--fg-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;transition:color var(--przejscie),border-color var(--przejscie);
}
.zakladka:hover{color:var(--fg-2)}
.zakladka--on{color:var(--fg);border-bottom-color:var(--green);font-weight:500}

/* =========================================================
   POLE HASŁA
   Podgląd wpisanego hasła. Bez niego wpisuje się kilkanaście
   znaków na ślepo, dwa razy — i literówka wychodzi dopiero
   po wysłaniu formularza.
   ========================================================= */
.pole-haslo{position:relative;display:flex}
.pole-haslo input{width:100%;padding-right:42px}
.podglad-haslo{
  position:absolute;right:1px;top:1px;bottom:1px;width:38px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:0 var(--r) var(--r) 0;
  color:var(--fg-3);cursor:pointer;
}
.podglad-haslo:hover{color:var(--fg)}
.podglad-haslo:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.podglad-haslo[aria-pressed="true"]{color:var(--green)}

/* Lista wymagań zapala się w trakcie pisania. Póki pole jest
   puste, nic nie świeci na czerwono — brak odpowiedzi to
   jeszcze nie błąd. */
.wymogi{list-style:none;margin:-6px 0 16px;padding:0;display:flex;flex-direction:column;gap:5px}
.wymog{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--fg-3);transition:color .15s;
}
.wymog-znak{
  width:14px;height:14px;flex:none;border-radius:50%;
  border:1.5px solid var(--line-2);position:relative;transition:all .15s;
}
.wymog--ok{color:var(--green)}
.wymog--ok .wymog-znak{border-color:var(--green);background:var(--green-soft)}
.wymog--ok .wymog-znak::after{
  content:"";position:absolute;left:3.5px;top:1px;
  width:4px;height:7px;border:solid var(--green);
  border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
}
.wymog--brak{color:var(--fg-2)}
.wymog--brak .wymog-znak{border-color:var(--line-2)}

.zgodnosc{font-size:12.5px;margin:-8px 0 14px}
.zgodnosc--ok{color:var(--green)}
.zgodnosc--zla{color:var(--yellow)}

/* =========================================================
   OKNO POTWIERDZENIA
   Zastępuje window.confirm(), którego przeglądarka pozwala
   wyciszyć — a wyciszony zwraca false bez pytania i akcja
   przestaje działać bez śladu.
   ========================================================= */
.potwierdzenie{
  width:min(420px, calc(100vw - 32px));
  padding:24px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);color:var(--fg);
  box-shadow:var(--shadow-lg);
}
.potwierdzenie::backdrop{background:rgba(0,0,0,.62)}
.potwierdzenie__tytul{font-size:17px;letter-spacing:-.02em;margin:0 0 8px}
.potwierdzenie__tresc{font-size:13.5px;color:var(--fg-2);line-height:1.55;margin:0}
.potwierdzenie__akcje{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}
.potwierdzenie__akcje .btn{width:auto}

/* Zakładka do funkcji spoza pakietu. Widoczna, ale wyraźnie
   nieaktywna — prowadzi do cennika, nie do zablokowanego ekranu. */
.zakladka--zamknieta{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--fg-3);opacity:.55;
}
.zakladka--zamknieta:hover{opacity:.85;color:var(--fg-2)}
.zakladka--zamknieta svg{flex:none}

/* =========================================================
   PAKIETY
   Trzy karty obok siebie. Karta aktualnego pakietu ma zieloną
   krawędź — od razu widać, gdzie się jest.
   ========================================================= */
.pakiet-karta{display:flex;flex-direction:column}
.pakiet-karta--twoj{border-color:var(--green-line);background:var(--green-soft)}
.pakiet-cena{margin:0 0 4px;line-height:1.1}
.pakiet-cena strong{font-size:30px;font-weight:600;letter-spacing:-.02em}
.pakiet-cena span{font-size:13px;color:var(--fg-3)}
.pakiet-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pakiet-poz{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--fg-3);
}
.pakiet-poz svg{flex:none;opacity:.5}
.pakiet-poz--masz{color:var(--fg-2)}
.pakiet-poz--masz svg{color:var(--green);opacity:1}
.pakiet-poz--wszystko{
  font-weight:500;color:var(--fg-2);
  padding-bottom:7px;border-bottom:1px solid var(--line);
}

/* =========================================================
   NAGŁÓWEK STRONY
   ========================================================= */
.naglowek{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.naglowek-txt{min-width:0}
.naglowek h1{margin-bottom:5px}
.naglowek p{font-size:13.5px;color:var(--fg-2)}
.naglowek-akcje{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.pasek-filtrow{display:flex;gap:8px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.pasek-filtrow .pole{margin:0}
.pasek-filtrow input,.pasek-filtrow select{height:38px;font-size:13.5px}
.szukajka{min-width:240px}

/* =========================================================
   DWIE KOLUMNY (szczegół klienta / oferty)
   ========================================================= */
.dwie{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media(max-width:1000px){.dwie{grid-template-columns:1fr}}

.dane-lista{display:flex;flex-direction:column;gap:0}
.dane-wiersz{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;
}
.dane-wiersz:last-child{border-bottom:0}
.dane-wiersz dt{color:var(--fg-3);flex:0 0 auto}
.dane-wiersz dd{margin:0;text-align:right;min-width:0;word-break:break-word}

/* =========================================================
   WARIANTY
   ========================================================= */
.warianty{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.wariant{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:20px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--przejscie),transform var(--przejscie);
}
.wariant:hover{border-color:var(--line-2);transform:translateY(-2px)}
.wariant--on{border-color:var(--green-line);background:var(--green-soft)}
.wariant__odznaka{
  position:absolute;top:-9px;left:20px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--yellow-soft);color:var(--yellow);
  border:1px solid rgba(255,201,74,.28);
  border-radius:99px;padding:3px 9px;
}
.wariant__nazwa{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);
}
.wariant__cena{
  font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:-.035em;
}
.wariant__cena i{font-style:normal;font-size:14px;color:var(--fg-3);margin-left:2px}
.wariant__lista{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--fg-2)}
.wariant__lista li{display:flex;gap:7px;align-items:flex-start}
.wariant__lista li::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--fg-3);margin-top:8px;flex:0 0 4px}
.wariant--on .wariant__lista li::before{background:var(--green)}

/* =========================================================
   RUCH
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* =========================================================
   RESPONSYWNOŚĆ PANELU
   Poniżej 900px sidebar zwija się w dolną nawigację.
   ========================================================= */
@media(max-width:900px){
  .panel{flex-direction:column}
  .side{
    position:fixed;bottom:0;left:0;right:0;top:auto;
    width:100%;flex:none;height:auto;
    flex-direction:row;align-items:center;
    border-right:0;border-top:1px solid var(--line);
    z-index:50;padding:0;
  }
  .side-marka,.side-stopka{display:none}
  .side-nav{flex-direction:row;padding:6px 4px;gap:0;justify-content:space-around;width:100%}
  .nav-poz{flex-direction:column;gap:3px;font-size:10px;padding:5px 4px;flex:1;text-align:center}
  .nav-poz span{font-size:10px}
  .tresc-kolumna{padding-bottom:62px}
  .topbar{padding:0 16px}
  .tresc{padding:18px 16px}
  .naglowek h1{font-size:22px}
}

@media(max-width:520px){
  .topbar-akcje .btn span{display:none}
  .topbar-akcje .btn{padding:0 12px}
}

/* =========================================================
   KONFIGURATOR
   Formularz po lewej, wycena na żywo po prawej.
   ========================================================= */
.konf{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
.konf-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.konf-panel{position:sticky;top:calc(var(--top-h) + 16px)}
.konf-panel-in{
  display:flex;flex-direction:column;gap:16px;
  max-height:calc(100vh - var(--top-h) - 32px);
  overflow-y:auto;padding-right:2px;
}

.konf-krok-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.konf-krok-nr{
  width:26px;height:26px;flex:0 0 26px;border-radius:7px;
  background:var(--surface-2);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11.5px;color:var(--fg-3);
}
.konf-krok-head h2{font-size:15.5px;letter-spacing:-.015em}
.konf-krok-head .podpowiedz{margin-top:0}
.konf-krok .pole:last-child{margin-bottom:0}

.info{
  display:flex;gap:9px;align-items:flex-start;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px;margin:13px 0;
  font-size:12.5px;line-height:1.55;color:var(--fg-2);
}
.info .ico{margin-top:2px;flex:0 0 auto;color:var(--fg-3)}
.info b{color:var(--fg);font-weight:500}

.stepper{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stepper button{
  width:38px;height:38px;flex:0 0 38px;border-radius:9px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);
  color:var(--fg);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--przejscie),border-color var(--przejscie);
}
.stepper button:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.stepper input{
  width:64px;height:38px;text-align:center;padding:0;
  font-family:var(--mono);font-size:14.5px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:9px;
}
.stepper input:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(43,229,143,.14);
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield}

.dod-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 34px;gap:7px;margin-bottom:7px}
.dod-row input{
  height:40px;padding:0 12px;font-size:13.5px;border-radius:9px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.dod-row input:focus{
  outline:none;border-color:var(--green);
  background:rgba(43,229,143,.04);box-shadow:0 0 0 3px rgba(43,229,143,.14);
}
.dod-row .btn-ikona{width:34px;height:40px}

/* ---------- sumy w panelu wyceny ---------- */
.sumy{margin-top:16px}
.sumy-lista{display:flex;flex-direction:column}
.suma-wiersz{
  display:flex;justify-content:space-between;gap:14px;
  padding:8px 0;font-size:13.5px;color:var(--fg-2);
  border-bottom:1px solid var(--line);
}
.suma-wiersz:last-child{border-bottom:0}
.suma-wiersz .mono{color:var(--fg);letter-spacing:-.02em}
.suma-wiersz--minus .mono{color:var(--green)}

.suma-glowna{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-top:13px;padding-top:13px;border-top:1px solid var(--line-2);
}
.suma-glowna .etykieta{display:block}
.suma-glowna .podpowiedz{margin-top:2px}
.suma-glowna b{font-size:23px;font-weight:600;letter-spacing:-.04em;white-space:nowrap}
.suma-glowna--zielona b{color:var(--green)}

.karta--wewn{border-color:var(--line-2);background:var(--surface-2)}

/* ---------- pasek mobilny ---------- */
.pasek-mobilny{display:none}

@media(max-width:1040px){
  .konf{grid-template-columns:1fr}
  .konf-panel{position:static}
  .konf-panel-in{max-height:none;overflow:visible}
}

@media(max-width:900px){
  .pasek-mobilny{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:62px;z-index:40;
    padding:11px 16px;
    background:rgba(8,10,9,.92);
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    border-top:1px solid var(--line);
  }
  .pasek-mobilny b{display:block;font-size:17px;font-weight:600;letter-spacing:-.035em}
}

/* =========================================================
   LINK DO OFERTY
   ========================================================= */
.link-box{display:flex;gap:8px;align-items:center}
.link-box input{
  flex:1;min-width:0;height:42px;padding:0 13px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em;color:var(--fg-2);
}
.link-box input:focus{
  outline:none;border-color:var(--green);color:var(--fg);
  box-shadow:0 0 0 3px rgba(43,229,143,.14);
}

/* =========================================================
   EDYTOR CENNIKA
   ========================================================= */
.cennik{display:flex;flex-direction:column;gap:7px}
.cennik-naglowki{display:grid;gap:8px;padding:0 2px 2px}
.cennik-wiersz{display:grid;gap:8px;align-items:center}
.cennik-wiersz input{
  height:40px;padding:0 12px;font-size:13.5px;border-radius:9px;width:100%;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.cennik-wiersz input:focus{
  outline:none;border-color:var(--green);
  background:rgba(43,229,143,.04);box-shadow:0 0 0 3px rgba(43,229,143,.14);
}
.cennik-wiersz .btn-ikona{width:38px;height:40px}
.cennik-wiersz--auto{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.cennik-wiersz--auto:last-child{border-bottom:0}
.cennik-wiersz--auto input{width:150px;flex:0 0 150px}
.cennik-wiersz--auto .podpowiedz{margin-top:1px}

.pasek-zapisu{
  position:sticky;bottom:0;z-index:15;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding:14px 18px;margin-top:4px;
  background:rgba(8,10,9,.9);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--line-2);border-radius:var(--r-md);
}
.pasek-zapisu .podpowiedz{margin:0}
@media(max-width:900px){ .pasek-zapisu{bottom:62px} }

/* =========================================================
   DROBIAZGI
   ========================================================= */
.wybor-wyceny{
  align-items:center;gap:11px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);
  transition:border-color var(--przejscie),background var(--przejscie);
}
.wybor-wyceny:hover{border-color:var(--line-2);background:var(--surface-2)}
.wybor-wyceny .podpowiedz{margin-top:0}

.logo-podglad{
  height:96px;border:1px dashed var(--line-2);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.02);padding:12px;
}
.logo-podglad img{max-height:100%;max-width:100%;object-fit:contain}

.wybor-koloru{
  width:46px;height:38px;flex:0 0 46px;padding:3px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:9px;
}

.form-inline{display:inline-flex;margin:0}
.form-inline select{
  height:34px;font-size:12.5px;padding:0 30px 0 10px;
  background-position:right 8px center;
}
.form-inline select:disabled{opacity:.55;cursor:default}

.haslo-startowe{
  display:block;margin:8px 0;padding:11px 14px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,201,74,.28);
  border-radius:var(--r-sm);
  font-size:16px;letter-spacing:.04em;color:var(--fg);
  user-select:all;word-break:break-all;
}

/* =========================================================
   PORADNIK
   ========================================================= */
.side-nav-dol{padding:6px 9px 10px;border-top:1px solid var(--line);margin-top:auto}
.btn-pomoc{color:var(--fg-3)}
.btn-pomoc:hover{color:var(--green)}

.poradnik{display:grid;grid-template-columns:236px minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:1000px){ .poradnik{grid-template-columns:1fr;gap:18px} }

.poradnik-spis{
  position:sticky;top:calc(var(--top-h) + 24px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px;
}
@media(max-width:1000px){ .poradnik-spis{position:static} }
.poradnik-spis .etykieta{display:block;margin-bottom:11px}
.poradnik-spis ol{display:flex;flex-direction:column;gap:1px;counter-reset:none}
.poradnik-spis a{
  display:flex;align-items:baseline;gap:9px;
  padding:6px 8px;border-radius:7px;font-size:13px;color:var(--fg-2);
  transition:background var(--przejscie),color var(--przejscie);
}
.poradnik-spis a:hover{background:rgba(255,255,255,.04);color:var(--fg)}

.poradnik-nr{
  font-family:var(--mono);font-size:10.5px;color:var(--fg-3);
  flex:0 0 auto;letter-spacing:.04em;
}

.poradnik-tresc{display:flex;flex-direction:column;gap:16px;min-width:0}

.poradnik-rozdzial{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:26px;
  scroll-margin-top:calc(var(--top-h) + 20px);
}
.poradnik-rozdzial > header{display:flex;gap:13px;margin-bottom:18px}
.poradnik-rozdzial > header .poradnik-nr{font-size:12px;padding-top:5px}
.poradnik-rozdzial h2{font-size:19px;letter-spacing:-.025em;margin-bottom:4px}
.poradnik-lead{font-size:13.5px;color:var(--fg-2);line-height:1.6;max-width:64ch}

.poradnik-rozdzial h3{
  font-size:14.5px;font-weight:600;letter-spacing:-.015em;
  margin:22px 0 8px;
}
.poradnik-rozdzial p{font-size:14px;line-height:1.7;color:var(--fg-2);margin-bottom:11px;max-width:70ch}
.poradnik-rozdzial p:last-child{margin-bottom:0}
.poradnik-rozdzial b{color:var(--fg);font-weight:500}
.poradnik-rozdzial a:not(.btn):not(.motyw-podglad){
  color:var(--green);border-bottom:1px solid var(--green-line);
}
.poradnik-rozdzial a:not(.btn):hover{border-bottom-color:var(--green)}

.poradnik-lista{display:flex;flex-direction:column;gap:9px;margin-bottom:12px;max-width:70ch}
.poradnik-lista li{
  position:relative;padding-left:16px;
  font-size:14px;line-height:1.65;color:var(--fg-2);
}
.poradnik-lista li::before{
  content:"";position:absolute;left:0;top:9px;
  width:4px;height:4px;border-radius:50%;background:var(--fg-3);
}
.poradnik-szept{display:block;font-size:12.5px;color:var(--fg-3);margin-top:2px}

/* ---------- kroki ---------- */
.poradnik-kroki{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.poradnik-kroki li{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--line)}
.poradnik-kroki li:last-child{border-bottom:0}
.poradnik-krok-nr{
  flex:0 0 25px;width:25px;height:25px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-soft);border:1px solid var(--green-line);
  font-family:var(--mono);font-size:11.5px;color:var(--green);
}
.poradnik-kroki b{display:block;font-size:14px;font-weight:600;color:var(--fg);margin-bottom:3px}
.poradnik-kroki p{margin:0;font-size:13.5px}

/* ---------- tak / nie ---------- */
.poradnik-porownanie{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;
}
@media(max-width:700px){ .poradnik-porownanie{grid-template-columns:1fr} }
.poradnik-tak,.poradnik-nie{
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
}
.poradnik-tak{background:var(--green-soft);border-color:var(--green-line)}
.poradnik-tak .etykieta{color:var(--green)}
.poradnik-nie{background:var(--red-soft);border-color:var(--red-line)}
.poradnik-nie .etykieta{color:var(--red)}
.poradnik-tak p,.poradnik-nie p{margin:7px 0 0;font-size:13.5px;color:var(--fg-2)}

/* ---------- wskazówka i uwaga ---------- */
.poradnik-wskazowka,.poradnik-uwaga{
  display:flex;gap:10px;align-items:flex-start;
  border-radius:var(--r);padding:13px 15px;margin:14px 0;
}
.poradnik-wskazowka{background:rgba(255,255,255,.03);border:1px solid var(--line-2)}
.poradnik-wskazowka .ico{color:var(--fg-3);margin-top:3px}
.poradnik-uwaga{background:var(--yellow-soft);border:1px solid rgba(255,201,74,.28)}
.poradnik-uwaga .ico{color:var(--yellow);margin-top:3px}
.poradnik-wskazowka p,.poradnik-uwaga p{margin:0;font-size:13.5px;line-height:1.6}
.poradnik-uwaga p{color:var(--fg-2)}
.poradnik-uwaga b{color:var(--yellow)}

.poradnik-wzor{
  font-family:var(--mono);font-size:12.5px;line-height:1.9;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;color:var(--fg-3)!important;
}
.poradnik-wzor b{color:var(--green)!important;font-weight:400}

/* ---------- pytania ---------- */
.poradnik-faq{display:flex;flex-direction:column}
.poradnik-faq details{border-bottom:1px solid var(--line)}
.poradnik-faq details:last-child{border-bottom:0}
.poradnik-faq summary{
  list-style:none;cursor:pointer;padding:13px 26px 13px 0;position:relative;
  font-size:14px;font-weight:500;color:var(--fg);
}
.poradnik-faq summary::-webkit-details-marker{display:none}
.poradnik-faq summary::after{
  content:"";position:absolute;right:6px;top:19px;
  width:7px;height:7px;border-right:1.6px solid var(--fg-3);
  border-bottom:1.6px solid var(--fg-3);transform:rotate(45deg);
  transition:transform var(--przejscie);
}
.poradnik-faq details[open] summary::after{transform:rotate(-135deg);top:22px}
.poradnik-faq summary:hover{color:var(--green)}
.poradnik-faq details > div{padding:0 0 15px}
.poradnik-faq details p{margin:0;font-size:13.5px}

/* =========================================================
   KOD QR
   ========================================================= */
.qr-blok{
  display:flex;gap:16px;align-items:flex-start;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
/* Biała karta także w ciemnym panelu — kod QR czyta się pewnie
   tylko jako ciemne moduły na jasnym tle, a „cicha strefa" wokół
   niego też musi być jasna. */
.qr-obraz{
  flex:0 0 104px;width:104px;padding:6px;
  background:#FFFFFF;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
}
.qr-obraz svg{width:100%;height:auto;display:block}
.qr-txt{min-width:0;flex:1}
.qr-txt b{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px}
.qr-txt .podpowiedz{margin:0 0 10px}
.qr-akcje{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:560px){
  .qr-blok{flex-direction:column}
  .qr-obraz{flex:0 0 auto;width:132px}
}

/* Pełny ekran do pokazania klientowi na spotkaniu. */
body.qr-pelny{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;text-align:center;
}
.qr-pelny main{max-width:420px;width:100%}
.qr-pelny .etykieta{display:block;margin-bottom:20px}
.qr-pelny-obraz{
  width:100%;max-width:340px;margin:0 auto 22px;padding:18px;
  background:#FFFFFF;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
}
.qr-pelny-obraz svg{width:100%;height:auto;display:block}
.qr-pelny-link{
  font-size:12px;color:var(--fg-3);word-break:break-all;
  margin-bottom:10px;letter-spacing:-.01em;
}
.qr-pelny-podpowiedz{font-size:13.5px;color:var(--fg-2);margin-bottom:22px}

/* =========================================================
   USTAWIENIA — numeracja, przełączniki, wyniki zespołu
   ========================================================= */
.wzor-podglad{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;margin:-2px 0 10px;
  background:var(--green-soft);border:1px solid var(--green-line);
  border-radius:var(--r-sm);
}
.wzor-podglad b{font-size:17px;font-weight:600;letter-spacing:-.03em;color:var(--green)}

.wzor-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:14px}
.wzor-legenda span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-3)}
.wzor-legenda code{
  font-family:var(--mono);font-size:11px;color:var(--fg-2);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:5px;padding:2px 5px;
}

/* Przełącznik sekcji oferty — pole wyboru z opisem, w ramce,
   żeby dało się je odróżnić od zwykłej listy punktów. */
.przelacznik{
  align-items:flex-start;gap:11px;padding:11px 13px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  transition:border-color var(--przejscie);
}
.przelacznik:hover{border-color:var(--line-2)}
.przelacznik strong{font-size:13.5px;font-weight:500}
.przelacznik .podpowiedz{margin:0}

.wiersz-suma td{
  border-top:1px solid var(--line-2);
  background:rgba(255,255,255,.02);
  font-weight:500;
}
.wiersz-wylaczony{opacity:.5}

/* =========================================================
   WYBÓR MOTYWU OFERTY
   ========================================================= */
.motywy{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.motywy legend{padding:0;margin-bottom:9px}

.motyw{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--line);background:var(--surface);
  transition:border-color var(--przejscie),background var(--przejscie);
}
.motyw:hover{border-color:var(--line-2);background:var(--surface-2)}
.motyw--on{border-color:var(--green-line);background:var(--green-soft)}

/* Radio zostaje w formularzu i w kolejności tabulacji, tylko znika
   z widoku — zaznaczenie pokazuje obramowanie całej karty. */
.motyw input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;
}
.motyw:has(input:focus-visible){outline:2px solid var(--green);outline-offset:3px}

/* Miniatura motywu — nie renderuje oferty, pokazuje tylko
   zestawienie tła, karty i tekstu. */
.motyw-proba{
  flex:0 0 52px;width:52px;height:46px;border-radius:7px;
  border:1px solid;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.motyw-proba-karta{
  width:36px;height:28px;border-radius:4px;border:1px solid;
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 5px;
}
.motyw-proba-karta i{display:block;height:3px;border-radius:2px;width:100%;opacity:.75}

.motyw-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.motyw-txt b{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.motyw--on .motyw-txt b{color:var(--green)}
.motyw-txt span{font-size:12.5px;color:var(--fg-2);line-height:1.5}
.motyw-dla{color:var(--fg-3)!important;font-size:11.5px!important}
.motyw-podglady{display:flex!important;gap:14px;flex-wrap:wrap;margin-top:5px}
.motyw-podglad{
  font-size:12px;color:var(--fg-3);
  border-bottom:1px solid var(--line-2);
}
.motyw-podglad:hover{color:var(--green);border-bottom-color:var(--green-line)}

/* =========================================================
   WŁASNA LISTA ROZWIJANA
   Zastępuje natywny <select>, którego rozwiniętej listy nie da
   się ostylować. Prawdziwy <select> zostaje w formularzu, tylko
   schowany — patrz public/select.js.
   ========================================================= */
.wyb{position:relative;width:100%}

/* Natywne pole zostaje w DOM (POST i praca bez JS-a działają),
   ale znika z widoku i z kolejności tabulacji. */
.wyb-natywny{
  position:absolute!important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;
  pointer-events:none;
}

.wyb-przycisk{
  display:flex;align-items:center;gap:10px;width:100%;
  height:46px;padding:0 12px 0 14px;
  border-radius:10px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);
  color:var(--fg);font-size:14.5px;
  transition:border-color var(--przejscie),background var(--przejscie),
             box-shadow var(--przejscie);
}
.wyb-przycisk:hover{border-color:rgba(255,255,255,.2)}
.wyb-przycisk > svg{margin-left:auto;flex:0 0 auto;color:var(--fg-3);
  transition:transform var(--przejscie),color var(--przejscie)}
.wyb-przycisk:disabled{opacity:.5;pointer-events:none}

.wyb--otwarty .wyb-przycisk{
  border-color:var(--green);
  background:rgba(43,229,143,.04);
  box-shadow:0 0 0 3px rgba(43,229,143,.14);
}
.wyb--otwarty .wyb-przycisk > svg{transform:rotate(180deg);color:var(--green)}

.wyb-tekst{
  display:flex;align-items:baseline;gap:10px;min-width:0;flex:1;
}
.wyb-tekst--pusty{color:var(--fg-3)}
.wyb-nazwa{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wyb-kwota{
  flex:0 0 auto;font-size:13px;color:var(--fg-3);letter-spacing:-.02em;
}

/* ---------- rozwinięta lista ---------- */
.wyb-lista{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  max-height:288px;overflow-y:auto;overscroll-behavior:contain;
  padding:5px;
  background:var(--surface-3);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
}
.wyb--w-gore .wyb-lista{top:auto;bottom:calc(100% + 6px)}

.wyb-lista::-webkit-scrollbar{width:10px}
.wyb-lista::-webkit-scrollbar-track{background:transparent}
.wyb-lista::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);border-radius:99px;
  border:3px solid var(--surface-3);
}
.wyb-lista::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

.wyb-opcja{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:14px;color:var(--fg-2);
}
.wyb-opcja--pusta{color:var(--fg-3)}
.wyb-opcja .wyb-nazwa{flex:1}
.wyb-opcja .wyb-kwota{color:var(--fg-3)}

/* Podświetlenie idzie za klawiaturą i za myszą — jeden stan,
   żeby nie dało się mieć dwóch „aktywnych" wierszy naraz. */
.wyb-opcja--aktywna{background:rgba(255,255,255,.06);color:var(--fg)}
.wyb-opcja--aktywna .wyb-kwota{color:var(--fg-2)}

.wyb-opcja--wybrana{color:var(--fg);font-weight:500}
.wyb-opcja--wybrana .wyb-kwota{color:var(--fg-2)}

.wyb-ptaszek{
  flex:0 0 15px;width:15px;color:var(--green);opacity:0;
}
.wyb-opcja--wybrana .wyb-ptaszek{opacity:1}

.wyb-opcja[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- warianty rozmiaru ---------- */
.pasek-filtrow .wyb-przycisk,
.form-inline .wyb-przycisk{height:38px;font-size:13.5px}
.form-inline .wyb{width:auto;min-width:150px}

@media (prefers-reduced-motion: reduce){
  .wyb-przycisk,.wyb-przycisk > svg{transition:none}
}

/* Pola własnej pozycji w segmencie — pojawiają się dopiero po
   wybraniu „własna pozycja", żeby nie zaśmiecać kroku. */
.segment-wlasna{
  padding:12px 13px;margin-bottom:13px;
  background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.segment-wlasna .pole:last-child{margin-bottom:0}

/* Pozycja operatora platformy — wyróżniona żółtym, bo to jedyne
   miejsce w panelu, które wychodzi poza dane własnej firmy. */
.nav-poz--operator .ico{color:var(--yellow)}
.nav-poz--operator.nav-poz--on .ico{color:var(--yellow)}