/* === Bootstrap 5 → zgodność z dotychczasowym wyglądem (requirements/018 Goal 2) ===
   Aplikacja powstała na Bootstrap 3 i po cichu korzystała z jego wartości
   bazowych; Bootstrap 5 nadał też NOWE znaczenie nazwom, których używamy
   (.card to u niego kolumna flex, .progress — flex, .badge — baseline).
   Ten blok stoi NA POCZĄTKU arkusza: przywraca wartości bazowe, a każda
   późniejsza reguła aplikacji dalej z nim wygrywa. Lista powstała z porównania
   stylów obliczonych każdego elementu przed i po (experiments/ux/ux_style_diff.R),
   nie ze zgadywania. Wartości pikselowe i szarości to wartości Bootstrapa 3. */
.container-fluid { padding-left: 15px; padding-right: 15px; }
.shiny-html-output { display: block; }
svg { vertical-align: baseline; }
summary { display: block; }
tbody, td, tfoot, th, thead, tr { border-style: none; }
input, button, optgroup, select, textarea { color: inherit; font: inherit; }
input[type=checkbox], input[type=radio] { line-height: normal; }
label { margin-bottom: 5px; font-weight: 700; max-width: 100%; }
.shiny-input-container > label.control-label, .form-group > label.control-label, .control-label { margin-bottom: 5px; }
.card { display: block; position: static; flex-direction: row; min-width: auto; word-wrap: normal; }
.card-title { margin-bottom: 0; }
.btn { white-space: nowrap; margin-bottom: 0; }
.badge { vertical-align: middle; min-width: 10px; }
.progress { display: block; margin-bottom: 20px; font-size: inherit; line-height: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
textarea.form-control { height: auto; }
.form-control::placeholder { color: #999; opacity: 1; }
.form-control { height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff;
  border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
pre { margin: 0 0 10px; padding: 9.5px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.42857143; color: #333; background-color: #f5f5f5;
  border: 1px solid #ccc; border-radius: 4px; }
select.form-control { padding-right: 12px; line-height: normal; }
.btn-default { color: #333; background-color: #fff; }
.modal-dialog { margin: 10px; }
.modal-content { display: block; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.modal-header { display: block; border-radius: 0; }
.modal-title { line-height: 1.42857143; }
.modal-footer { display: block; padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; border-radius: 0; }
.modal-footer > * { margin: 0; }
.modal-footer .btn + .btn { margin-left: 5px; }
.modal-backdrop { background-color: #000; }
@media (min-width: 768px) {
  .modal-dialog { width: 600px; max-width: none; margin: 30px auto; }
  .modal-sm { width: 300px; }
}
@media (min-width: 992px) { .modal-lg { width: 900px; max-width: none; } }
/* === koniec zgodności z Bootstrap 5 === */

/* pozyt.ai web app — komponenty UI v2 (port 1:1 z ui_kits/web_app/app.css
   projektu design; tokeny ładowane osobno jako pozyt-tokens.css). */

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body { margin: 0; }

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-rows: var(--pz-header-h) 1fr;
  height: 100vh;
  /* kotwica dla rozwijanej listy pracy (.agent-pop) — .app nie ma overflow,
     więc panel nie zostanie przycięty */
  position: relative;
  background: var(--pz-bg);
  color: var(--pz-text);
}

/* ---------- Header ---------- */
.header {
  display: flex;
  align-items: center;
  gap: var(--pz-space-4);
  padding: 0 var(--pz-space-5);
  background: var(--pz-surface);
  border-bottom: 1px solid var(--pz-border);
  height: var(--pz-header-h);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--pz-brand-ink); color: var(--pz-bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; position: relative;
  letter-spacing: -0.02em;
}
.brand-mark::after {
  content: ""; position: absolute;
  right: 5px; bottom: 6px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--pz-brand-accent);
}
.brand-word { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.brand-word .dot { color: var(--pz-brand-accent); }
/* Logo „myśli": kropka na znaku pulsuje, gdy pozyt pracuje (klasę .working
   przełącza pozyt-app.js na podstawie obecności aktywnej karty pracy). */
.brand-mark.working::after { animation: pz-dot-think 1.1s ease-in-out infinite; }
@keyframes pz-dot-think {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.6); }
}

.project-switch {
  margin-left: var(--pz-space-5);
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--pz-text-muted);
  padding: 4px 10px; border-radius: 4px; cursor: pointer;
  position: relative;
}
.project-switch:hover { background: var(--pz-surface-2); }
.project-switch strong { color: var(--pz-text); font-weight: 500; }
.project-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 240px;
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md); box-shadow: var(--pz-shadow-lg);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.project-menu .pm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 4px; font-size: 13px; cursor: pointer;
  color: var(--pz-text);
}
.project-menu .pm-item:hover { background: var(--pz-surface-2); }
.project-menu .pm-item.active { background: var(--pz-surface-2); font-weight: 500; }
.project-menu .pm-item .cnt {
  margin-left: auto; font-family: var(--pz-font-mono); font-size: 10px;
  background: var(--pz-brand-accent-soft); color: #7A5212;
  padding: 1px 6px; border-radius: 9999px; border: 1px solid var(--pz-brand-accent);
  font-weight: 600;
}
.project-menu .pm-sep { height: 1px; background: var(--pz-border); margin: 4px 6px; }
/* Kilkanaście domen nie może wypchnąć menu poza ekran. */
.project-menu { max-height: 70vh; overflow-y: auto; }
.project-menu .pm-filter {
  margin: 2px 2px 6px; padding: 6px 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--pz-border); border-radius: 4px;
  background: var(--pz-surface); color: var(--pz-text);
}
.project-menu .pm-filter:focus { outline: 2px solid var(--pz-brand-ink); outline-offset: -1px; }
.proj-settings {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px;
  color: var(--pz-text-subtle); cursor: pointer; border: none; background: none;
}
.proj-settings:hover { background: var(--pz-surface-2); color: var(--pz-text); }

.header-right { margin-left: auto; display: flex; align-items: center; gap: var(--pz-space-3); }
.agent-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 4px;
  font-size: 13px; font-weight: 500; color: var(--pz-text);
  background: transparent; border: 1px solid var(--pz-border);
  cursor: pointer; font-family: inherit;
}
.agent-status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.agent-status .dot.pulse { animation: pz-pulse 2s ease-in-out infinite; }
@keyframes pz-pulse { 0%,100% {opacity:.5} 50% {opacity:1} }
.agent-status.success .dot { background: var(--pz-success); }
.agent-status.info    .dot { background: var(--pz-info); }
.agent-status.warning .dot { background: var(--pz-warning); }
.agent-status.warning { color: var(--pz-warning-text); border-color: var(--pz-warning); background: var(--pz-warning-soft); }
.agent-status.danger  .dot { background: var(--pz-danger); }
.agent-status.danger  { color: var(--pz-danger-text); border-color: var(--pz-danger); background: var(--pz-danger-soft); }
.agent-status.idle    .dot { background: transparent; border: 1.5px solid var(--pz-text-subtle); }
.agent-status.idle    { color: var(--pz-text-muted); }
/* Global decision counter (sum across ALL projects) rides on the status pill */
.agent-status .gcnt {
  font-family: var(--pz-font-mono); font-size: 10px; font-weight: 700;
  background: var(--pz-brand-accent-soft); color: #7A5212;
  border: 1px solid var(--pz-brand-accent);
  padding: 1px 6px; border-radius: 9999px;
}

/* ---------- Rozwijana lista pracy pod pigułką ----------
   Prawy pasek żyje w zakładce „Dziś" i znika poniżej 1280 px, więc ten panel
   jest jedynym globalnym widokiem pracy — i jedynym miejscem z „Przerwij"
   poza „Dziś". Dlatego NIE chowamy go w media query. */
.agent-pop {
  position: absolute; top: var(--pz-header-h); right: var(--pz-space-5);
  z-index: 60;                 /* nad .awaiting (20) i .project-menu (50), pod modalem */
}
.ap-panel {
  width: 360px; max-width: calc(100vw - 32px); margin-top: 6px;
  max-height: calc(100vh - var(--pz-header-h) - 24px); overflow-y: auto;
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md); box-shadow: var(--pz-shadow-lg);
  padding: 12px; display: flex; flex-direction: column; gap: var(--pz-space-4);
}
.rail-title .n {
  font-family: var(--pz-font-mono); font-weight: 700; margin-left: 6px;
  color: var(--pz-text-muted);
}
.ap-row {
  border: 1px solid var(--pz-brand-accent); background: var(--pz-brand-accent-soft);
  border-radius: var(--pz-radius-md); padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.ap-row:hover { border-color: var(--pz-brand-ink); }
.ap-row-t { font-size: 13px; font-weight: 500; color: var(--pz-text); }
.ap-row-s { font-size: 11px; color: var(--pz-text-muted); }
.ap-empty { font-size: 12px; color: var(--pz-text-muted); padding: 4px 2px; }
/* Domena w panelu 360 px potrafi być długa. */
.agent-pop .d-host { overflow-wrap: anywhere; }
/* Stan „wciśnięty" bez round-tripu. `:not(.warning)` jest KONIECZNE — inaczej
   ta reguła zbiłaby ochrowe tło stanu „pozyt potrzebuje cię" dokładnie wtedy,
   gdy jest najważniejsze. Bez animacji wejścia: panel przerysowuje się co
   ~1,5 s przy postępie narzędzia, więc `transition` dawałby migotanie. */
.app:has(.ap-panel) .agent-status:not(.warning) {
  background: var(--pz-surface-2); border-color: var(--pz-border-strong);
}

.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--pz-surface-2); color: var(--pz-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--pz-border);
  cursor: pointer;
}

/* ---------- Main (v2: no sidebar) ---------- */
/* grid-template-ROWS jest kluczowe: bez definitywnego wiersza `.content` trafia
   do wiersza `auto` (rozmiar treści) → łańcuch wysokości się rwie, `.stream`
   rośnie do pełnej treści i NIE scrolluje (scrolluje całe okno, ląduje na górze =
   najstarsze). minmax(0,1fr) domyka wysokość do dołu → `.stream` staje się
   realnym scrollerem i JS może zjechać na najnowsze. */
.main { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr);
        height: 100%; min-height: 0; }

/* ---------- Content area ---------- */
.content {
  display: grid;
  grid-template-rows: var(--pz-tabs-h) 1fr;
  min-height: 0;
  overflow: hidden;
}
.tabs {
  display: flex;
  border-bottom: 1px solid var(--pz-border);
  padding: 0 var(--pz-space-5);
  gap: 4px;
  background: var(--pz-bg);
}
.tab {
  padding: 14px 16px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pz-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
  background: transparent;
  border-left: none; border-right: none; border-top: none;
  font-family: inherit;
}
.tab:hover { color: var(--pz-text); }
.tab.active { color: var(--pz-text); border-bottom-color: var(--pz-brand-ink); font-weight: 600; }
.tab .ic { width: 16px; height: 16px; }
.tab .count {
  background: var(--pz-surface-2);
  color: var(--pz-text-muted);
  padding: 2px 6px; border-radius: 9999px;
  font-size: 10px; font-weight: 600;
  font-family: var(--pz-font-mono);
  line-height: 1.2;
}
.tab.active .count { background: var(--pz-brand-accent-soft); color: #7A5212; }
.tab .count.accent { background: var(--pz-brand-accent-soft); color: #7A5212; }

.tab-body {
  overflow: auto;
  padding: var(--pz-space-6);
}
.tab-body.stream { padding: 0; }

.container { max-width: var(--pz-content-maxw); margin: 0 auto; }

/* ---------- Today: stream + rail ---------- */
.today {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  height: 100%; min-height: 0;
}
.stream-col { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
/* Jawne wiersze: brakująca/ukryta sekcja awaiting nie może przesunąć
   composera do środkowego wiersza 1fr (display:none nie generuje boxa). */
/* Kokpit i decyzje dzielą pierwszy wiersz; przy niskim oknie przewija się on
   sam, żeby nigdy nie zabrał miejsca rozmowie i composerowi. */
.stream-col > .today-top { grid-row: 1; min-height: 0; max-height: 68vh; overflow-y: auto; }
.stream-col > .stream   { grid-row: 2; }
.stream-col > .composer { grid-row: 3; }

/* Inbox jest statycznym uiOutput-em (żeby jego odświeżenie nie przerysowywało
   composera) — pusty renderUI zostawia pusty kontener, który MUSI zniknąć,
   inaczej nad strumieniem wisi pusty pasek z paddingiem i obwódką. */
.awaiting:empty { display: none; padding: 0; border: 0; }

.awaiting {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--pz-bg) 88%, transparent);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--pz-border);
  padding: var(--pz-space-3) var(--pz-space-6);
}
.awaiting .aw-title {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #7A5212; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.awaiting .aw-title .n { font-family: var(--pz-font-mono); color: var(--pz-text-subtle); }
.awaiting-inner, .stream-inner, .composer-inner { max-width: 760px; margin: 0 auto; width: 100%; }

.stream {
  overflow-y: auto; min-height: 0;
  padding: var(--pz-space-5) var(--pz-space-6) var(--pz-space-6);
}
.stream-inner { display: flex; flex-direction: column; gap: 16px; }

.day-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 0;
  color: var(--pz-text-subtle);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.day-divider::before, .day-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--pz-border);
}

.stream-filter { display: flex; gap: 6px; padding-bottom: 4px; }
.chip {
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--pz-text-muted);
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: 9999px; padding: 4px 12px; cursor: pointer; line-height: 1.3;
}
.chip:hover { border-color: var(--pz-border-strong); color: var(--pz-text); }
.chip.active { background: var(--pz-brand-ink); border-color: var(--pz-brand-ink); color: #fff; }

/* ---------- Stream cards (shared chrome) ---------- */
.scard { max-width: 640px; }
.scard .s-meta {
  font-size: 11px; color: var(--pz-text-subtle); font-family: var(--pz-font-mono);
  margin: 0 0 4px 40px;
}
.scard .s-body { margin-left: 40px; }
.scard-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none; float: left;
  background: var(--pz-brand-ink); color: var(--pz-bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; position: relative; letter-spacing: -0.02em;
}
.scard-avatar::after {
  content:""; position:absolute; right:5px; bottom:6px;
  width:3px; height:3px; border-radius:50%; background: var(--pz-brand-accent);
}

/* Decision card — the loudest element in the product */
.dcard {
  background: var(--pz-surface);
  border: 1px solid var(--pz-brand-accent);
  border-radius: var(--pz-radius-md);
  box-shadow: var(--pz-shadow-md);
  overflow: hidden;
}
.dcard .d-head {
  background: var(--pz-brand-accent-soft);
  border-bottom: 1px solid var(--pz-brand-accent);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: #7A5212;
}
.dcard .d-head .when { margin-left: auto; font-family: var(--pz-font-mono); font-weight: 400; color: var(--pz-text-subtle); }
.dcard .d-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.dcard .d-title { font-size: 17px; font-weight: 500; color: var(--pz-text); line-height: 1.3; }
.dcard .d-basis { font-size: 12px; color: var(--pz-text-muted); line-height: 1.5; }
.dcard .d-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 14px; border-top: 1px solid var(--pz-border);
}
/* answered states — audit trail, card never disappears */
.dcard.approved { border-color: var(--pz-success); box-shadow: var(--pz-shadow-sm); }
.dcard.approved .d-head { background: var(--pz-success-soft); border-bottom-color: var(--pz-success); color: var(--pz-success-text); }
.dcard.rejected { border-color: var(--pz-border-strong); opacity: .75; box-shadow: none; }
.dcard.rejected .d-head { background: var(--pz-surface-2); border-bottom-color: var(--pz-border); color: var(--pz-text-muted); }
.dcard.expired { border-color: var(--pz-border-strong); opacity: .75; box-shadow: none; }
.dcard.expired .d-head { background: var(--pz-surface-2); border-bottom-color: var(--pz-border); color: var(--pz-text-muted); }
.dcard.suspended { border-style: dashed; }
.dcard .d-resolution {
  padding: 8px 16px 12px; font-size: 12px; color: var(--pz-text-muted);
  display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--pz-border);
}
.dcard .task-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--pz-text); }
/* Znaczek pokazujemy TYLKO dla zadania zablokowanego, więc niesie powód i nie
   ma stałej szerokości — czternaście identycznych plakietek nic nie mówiło. */
.dcard .task-row .badge { flex: none; }
/* Grupy zadań: co napisał model vs co przepisane z Wniosków. */
.dcard .d-group-label { font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pz-text-muted); padding-top: 6px; }
.dcard .d-tasks { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
/* Proweniencja i werdykt pokrycia — jedna linijka każde. */
.dcard .d-provenance { color: var(--pz-text); }
.dcard .d-verdict { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.5; padding-top: 4px; border-top: 1px solid var(--pz-border);
  margin-top: 4px; }
.dcard .d-verdict .ic { position: relative; top: 2px; }
.dcard .goal-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; font-size: 13px; }
.dcard .goal-row .val { font-family: var(--pz-font-mono); font-variant-numeric: tabular-nums; }
.dcard .goal-row input {
  width: 76px; font: inherit; font-family: var(--pz-font-mono); font-size: 13px;
  padding: 3px 8px; border: 1px solid var(--pz-border-strong); border-radius: 4px;
  background: var(--pz-bg); text-align: right;
}
.dcard .profile-field { display: flex; flex-direction: column; gap: 3px; }
.dcard .profile-field .pf-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pz-text-muted); }
.dcard .profile-field .pf-value { font-size: 13px; line-height: 1.5; padding: 6px 10px; background: var(--pz-bg); border: 1px solid var(--pz-border); border-radius: 4px; }
/* Rynek na karcie profilu — pole widoczne ZAWSZE, także nierozpoznane, bo to
   ono decyduje, gdzie mierzymy popyt i pozycje. */
.dcard .market-field .pf-value { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dcard .market-evidence { margin: -2px 0 2px; }

/* Karta KOŃCA pracy — przerwanej („Przerwane") albo wygasłej decyzji („Wznów").
   Pracy W TOKU nie ma już w strumieniu: jej miejsce to prawy pasek (`.rail-card`),
   więc reguły paska postępu, tykacza, stanu „w kolejce" i stopki z „Przerwij"
   zostały stąd usunięte razem z widgetem. */
.wcard {
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.wcard .w-line { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.wcard .w-label { font-weight: 500; }
.wcard .w-hint { font-size: 11px; color: var(--pz-text-subtle); }
/* Przerwane: bez paska, bez tykacza — praca stanęła i to ma być widać. */
.wcard.cancelled { border-style: dashed; color: var(--pz-text-muted); }
.wcard.cancelled .w-label { font-weight: 500; }

/* Przełączniki autonomii: opis po lewej, stan po prawej. */
.au-row { display: flex; align-items: flex-start; gap: 16px; }
.au-row .au-text { flex: 1; min-width: 0; }
.au-row .btn { flex: none; white-space: nowrap; }

/* Result card */
.rcard {
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md); box-shadow: var(--pz-shadow-sm); overflow: hidden;
}
.rcard .r-head {
  padding: 10px 14px; display: flex; align-items: center; gap: 8px;
  background: var(--pz-info-soft); border-bottom: 1px solid var(--pz-border);
  font-size: 12px; font-weight: 600; color: var(--pz-info-text);
}
.rcard .r-head .when { margin-left: auto; font-family: var(--pz-font-mono); font-weight: 400; color: var(--pz-text-subtle); }
.rcard .r-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.rcard .r-title { font-size: 15px; font-weight: 500; }
.rcard .r-findings { font-size: 13px; color: var(--pz-text); padding-left: 2px; display: flex; flex-direction: column; gap: 3px; }
/* werdykt: jedno zdanie „jak poszło", liczone z widoku raportu */
.rcard .r-verdict { font-size: 14px; font-weight: 500; color: var(--pz-text); }
.rcard .r-actions { display: flex; gap: 8px; padding: 8px 16px 12px; border-top: 1px solid var(--pz-border); }

/* coverage line (shared: rcard + dossier report) */
.covline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cov {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; font-family: var(--pz-font-mono);
  padding: 2px 8px; border-radius: 9999px; line-height: 1.5;
}
.cov.ok   { background: var(--pz-success-soft); color: var(--pz-success-text); }
.cov.err  { background: var(--pz-danger-soft);  color: var(--pz-danger-text); }
/* pominięte = brak pomiaru, nie ostrzeżenie (007 A7) */
.cov.skip { background: var(--pz-neutral-soft); color: var(--pz-neutral-text); }
.delta-line { font-size: 12px; color: var(--pz-text-muted); font-variant-numeric: tabular-nums; }
.delta-line .up { color: var(--pz-success-text); font-weight: 600; }
.delta-line .down { color: var(--pz-danger-text); font-weight: 600; }

/* Error / milestone cards */
.ecard {
  background: var(--pz-surface); border: 1px solid var(--pz-danger);
  border-radius: var(--pz-radius-md); padding: 12px 16px;
  display: flex; align-items: flex-start; gap: 10px; font-size: 13px;
}
.milestone {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--pz-text-muted); padding: 2px 0 2px 40px;
}

/* Chat messages in the stream */
.msg-agent, .msg-user { display: flex; gap: 12px; max-width: 75%; }
.msg-user { margin-left: auto; flex-direction: row-reverse; }
.msg-bubble {
  border-radius: 8px; padding: 10px 14px;
  font-size: 15px; line-height: 1.55; text-wrap: pretty;
}
.msg-agent .msg-bubble { background: var(--pz-surface); border: 1px solid var(--pz-border); color: var(--pz-text); }
.msg-user  .msg-bubble { background: var(--pz-brand-ink); color: #fff; }
.msg-who { font-size: 11px; color: var(--pz-text-subtle); font-family: var(--pz-font-mono); margin-bottom: 4px; }
.msg-expand {
  border: none; background: none; padding: 0; margin-top: 6px;
  font-size: 12px; font-weight: 500; color: var(--pz-info); cursor: pointer; font-family: inherit;
}
.uavatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--pz-surface-2); color: var(--pz-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px; border: 1px solid var(--pz-border);
}

/* Composer */
.composer {
  border-top: 1px solid var(--pz-border); background: var(--pz-surface);
  padding: var(--pz-space-4) var(--pz-space-6);
}
.composer-inner { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; font: inherit; font-size: 15px; line-height: 1.5;
  color: var(--pz-text); background: var(--pz-bg);
  border: 1px solid var(--pz-border-strong); border-radius: 4px;
  padding: 8px 12px; min-height: 38px; max-height: 120px; outline: none;
}

/* ---------- Sugestie nad composerem ---------- */
/* Pas „co teraz" siedzi WEWNĄTRZ .composer, nad .composer-inner, i dzieli z nim
   tor 760 px (patrz reguła `.composer-inner` wyżej) — bez tego pigułki wiszą po
   lewej, a pole wpisywania jest wyśrodkowane. Pusty kontener musi zniknąć z CSS,
   bo statycznego uiOutput-u nie da się ukryć z serwera (jak .awaiting:empty). */
.composer > .suggest-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: 760px; margin: 0 auto var(--pz-space-3); width: 100%;
}
.suggest-bar:empty { display: none; margin: 0; }

/* PIGUŁKA, nie przycisk: sugestia to skrót do operacji osiągalnej też gdzie
   indziej, więc ma być cicha. Stąd rozmiar chipa filtra, nie przycisku akcji. */
.suggest-bar .sg-btn {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--pz-font-sans); font-size: 12.5px; font-weight: 500;
  line-height: 1.35; color: var(--pz-text);
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: 9999px; padding: 5px 11px;
  cursor: pointer; white-space: nowrap; max-width: 100%;
  transition: background var(--pz-duration-fast) var(--pz-ease),
              border-color var(--pz-duration-fast) var(--pz-ease);
}
.suggest-bar .sg-btn:hover {
  background: var(--pz-surface-2); border-color: var(--pz-border-strong);
}
/* Skraca się WYŁĄCZNIE etykieta — podpowiedź i strzałka zostają, inaczej
   pigułka kończy się urwanym słowem bez sygnału, że to przycisk. */
.suggest-bar .sg-label { overflow: hidden; text-overflow: ellipsis; }
.suggest-bar .sg-hint { color: var(--pz-text-subtle); font-weight: 400; flex: none; }
/* Pigułka statusu ścieżki — pozycja BEZ akcji obok przycisków. Przygaszona,
   z kreskowaną ramką: mówi, co pozyt zrobi sam albo na co czeka. Bez ochry
   (ochra znaczy „czekam na Twoją odpowiedź"). */
.sg-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--pz-text-muted);
  padding: 6px 12px; border-radius: 4px; border: 1px dashed var(--pz-border-strong);
  background: transparent; line-height: 1; white-space: nowrap;
}
.sg-status::before { content: "\2192"; color: var(--pz-text-subtle); }
.suggest-bar .sg-hint::before { content: "·"; margin-right: 6px; color: var(--pz-border-strong); }
.suggest-bar .sg-btn::after {
  content: "\2192"; color: var(--pz-text-subtle); font-weight: 400; flex: none;
}

/* Przeliczany fragment NIE przygasa (022). Shiny domyślnie zjeżdża z kryciem do
   0,3 na czas przeliczenia — przy pracy w tle wyglądało to jak miganie całej
   aplikacji. Klasa zostaje (czekają na nią testy), znika tylko efekt. */
.recalculating, .shiny-html-output.recalculating, .shiny-bound-output.recalculating {
  opacity: 1 !important; transition: none !important; }

/* ---------- Rail ---------- */
.rail {
  border-left: 1px solid var(--pz-border);
  background: var(--pz-surface-2);
  overflow-y: auto; padding: var(--pz-space-4);
  display: flex; flex-direction: column; gap: var(--pz-space-4);
}
/* Nagłówek sekcji pracy — WSPÓLNY dla paska i rozwijanej listy w nagłówku
   (jedna kompozycja `ui_work_sections`, dwa miejsca renderu). */
.rail-title {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pz-text-subtle); margin-bottom: 8px;
}
/* Ochra znaczy „czekam na Twoją odpowiedź" — wyłącznie sekcja, która stoi na
   użytkowniku. Praca w toku zostaje neutralna. */
.rail-title.wait { color: #7A5212; }
.work-sec { display: flex; flex-direction: column; gap: 8px; }
/* Trzy gniazda paska (cele, praca, możliwości) układają się jak jego dzieci. */
.rail-part { display: flex; flex-direction: column; gap: var(--pz-space-4); }
.rail-part:empty { display: none; }
/* Karta wpisu jest reużywana przez rozwijaną listę w nagłówku — bez tego
   selektora byłaby tam zupełnie bez stylu. */
.rail .rail-card, .agent-pop .rail-card {
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md); padding: 12px;
}
.rail .mini-goal { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--pz-border); }
.rail .mini-goal:first-child { padding-top: 0; }
.rail .mini-goal:last-child { border-bottom: none; padding-bottom: 0; }
.rail .mini-goal .mg-top { display: flex; align-items: center; gap: 8px; }
.rail .mini-goal .mg-name {
  font-size: 12px; color: var(--pz-text); font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail .mini-goal .mg-bar { display: flex; align-items: center; gap: 8px; }
.rail .mini-goal .mg-bar .progress { flex: 1; }
.rail .mini-goal .mg-pct {
  font-family: var(--pz-font-mono); font-size: 12px; font-weight: 600;
  color: var(--pz-text); min-width: 34px; text-align: right;
}
.rail .mini-goal .mg-vals { font-size: 11px; color: var(--pz-text-muted); font-variant-numeric: tabular-nums; }

/* Zakładka Cele — pasek postępu w kaflu i detalu (poza railem) */
/* Panel detalu celu */
.rail .setup-step { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 0; color: var(--pz-text-muted); }
.rail .setup-step.done { color: var(--pz-success-text); }
.rail .setup-step.current { color: var(--pz-text); font-weight: 500; }

/* ---------- Portfolio ---------- */
.portfolio-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.portfolio-table th {
  text-align: left; padding: 8px 12px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pz-text-subtle); background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-border);
}
.portfolio-table td { padding: 12px; border-bottom: 1px solid var(--pz-border); vertical-align: middle; }
.portfolio-table tr:hover td { background: var(--pz-surface); cursor: pointer; }
.portfolio-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--pz-font-mono); font-size: 12px; }
.pstat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.pstat .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- Dossier report ---------- */
.dossier { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); overflow: hidden; }
.dossier .do-head { padding: var(--pz-space-4) var(--pz-space-5); border-bottom: 1px solid var(--pz-border); display: flex; flex-direction: column; gap: 8px; }
.dossier .do-title { font-size: 20px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.dossier .do-title .host { font-size: 13px; color: var(--pz-text-muted); font-weight: 400; }
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px var(--pz-space-5); border-bottom: 1px solid var(--pz-border); }
.check-row:last-child { border-bottom: none; }
.check-row .ck-icon { flex: none; margin-top: 1px; }
.check-row .ck-id { font-family: var(--pz-font-mono); font-size: 12px; color: var(--pz-text); width: 150px; flex: none; }
.check-row .ck-facts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.fact-chip {
  font-family: var(--pz-font-mono); font-size: 11px;
  background: var(--pz-surface-2); border: 1px solid var(--pz-border);
  padding: 2px 8px; border-radius: 4px; color: var(--pz-text);
  font-variant-numeric: tabular-nums;
}
.check-row .ck-reason { font-size: 12px; color: var(--pz-text-muted); flex: 1; }

/* Bogaty raport (Wyniki): kondycja, problemy, zmierzone fakty */
.dossier .rep-health { display: flex; align-items: center; gap: 8px; }
.dossier .rep-health .rh-label { font-size: 12px; color: var(--pz-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.dossier .rep-health .rh-score { font-size: 22px; font-weight: 700; line-height: 1; }
.dossier .rep-health .rh-summary { font-size: 14px; color: var(--pz-text); font-weight: 500; }
.dossier .rep-sec-title {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pz-text-muted); padding: 16px var(--pz-space-5) 8px;
}
.issue { padding: 12px var(--pz-space-5); border-bottom: 1px solid var(--pz-border); }
.issue:last-of-type { border-bottom: none; }
.issue .issue-head { display: flex; align-items: center; gap: 8px; }
.issue .issue-head .badge { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.issue .issue-title { font-size: 14px; font-weight: 600; }
.issue .issue-body { font-size: 13px; color: var(--pz-text); margin-top: 4px; line-height: 1.5; }
.issue .issue-body strong { color: var(--pz-text-muted); font-weight: 600; }
.issue .issue-ev { margin-top: 4px; }
/* per-punkt: omówienie LLM + akcje (dodaj do zadań / rozwiń) */
.issue .issue-discuss {
  font-size: 13px; color: var(--pz-text); margin-top: 8px; line-height: 1.55;
  background: var(--pz-surface); border-left: 3px solid var(--pz-brand-ink);
  border-radius: 4px; padding: 8px 12px;
}
.issue .issue-discuss strong { color: var(--pz-text-muted); font-weight: 600; }
.issue .issue-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
/* punkt już wzięty / omówienie w toku — stan zamiast przycisku */
.issue .issue-busy { display: inline-flex; align-items: center; }
/* badge „w zadaniach" prowadzi do planu — pierwsze pytanie po zniknięciu akcji */
.issue .issue-inplan { border: 0; cursor: pointer; font: inherit; }
/* Zaznaczanie punktu do planu. Etykieta NALEŻY do rodziny `.btn` — dotąd miała
   własną regułę (12px/600/promień 6px, bez `font-family`) i stała w jednym
   wierszu obok `.btn.sm` (13px/500/promień 4px), więc trzy sąsiadujące akcje
   wyglądały jak z trzech różnych systemów. Checkbox ZOSTAJE nośnikiem stanu:
   `pozyt-app.js` liczy zaznaczenia po `[data-issue-check]`, a `change` na
   inpucie wewnątrz `<label>` działa tak samo jak dotąd. */
.issue .issue-pick input { accent-color: var(--pz-brand-ink); margin: 0; }
.issue .issue-pick:has(input:checked) {
  background: var(--pz-surface); color: var(--pz-text);
  border-color: var(--pz-brand-ink);
}
/* pasek wyboru — jedno kliknięcie zamienia zaznaczone punkty w plan */
.pick-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 12px;
  background: var(--pz-bg); border: 1px solid var(--pz-border); border-radius: 8px;
}
.pick-bar .pick-count { margin-right: auto; }
/* wejście w tryb wyboru z karty wyniku („Wybierz zadania →") — krótkie
   podświetlenie, żeby było widać, GDZIE się wylądowało. Atrament, nie ochra:
   ochra znaczy „czekam na Twoją odpowiedź", a to jest nawigacja. */
.pick-bar.flash {
  border-color: var(--pz-brand-ink);
  box-shadow: 0 0 0 3px var(--pz-surface-2);
  animation: pz-pick-flash 1.6s ease-out 1;
}
@keyframes pz-pick-flash {
  0% { box-shadow: 0 0 0 6px var(--pz-surface-2); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.findings-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.findings-head .pz-meta { flex: 1; }
/* deterministyczne szczegóły punktu / fakty-listy jako tabele */
.rv-det { margin-top: 8px; }
.rv-det .rv-det-cap { font-size: 12px; margin-bottom: 4px; }
.rv-det-table { width: 100%; }
.rv-det-table th, .rv-det-table td { padding: 6px 10px; }
.rv-det-list { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--pz-text); line-height: 1.6; }
.rv-det-list li { word-break: break-word; }
.rv-det-kv { display: flex; flex-direction: column; gap: 4px; }
.rv-det-kv .rv-kv-row { display: flex; gap: 10px; font-size: 12px; align-items: baseline; }
.rv-det-kv .rv-kv-label { color: var(--pz-text-muted); flex: none; min-width: 160px; }
.rv-det-kv .rv-kv-val { color: var(--pz-text); word-break: break-word; }
.rv-fact-tables { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dossier .rep-sec-head { padding: 10px var(--pz-space-5); border-top: 1px solid var(--pz-border); }
.rep-sec { display: flex; flex-direction: column; gap: 6px; padding: 10px var(--pz-space-5); border-top: 1px solid var(--pz-border); }
.rep-sec .rs-head { display: flex; align-items: center; gap: 8px; }
.rep-sec .rs-icon { flex: none; display: flex; }
.rep-sec .rs-label { font-family: var(--pz-font-mono); font-size: 12px; color: var(--pz-text); font-weight: 500; }
.rep-sec .rs-brief { font-size: 12px; }
.rep-sec .ck-facts { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 22px; }
.evidence {
  font-family: var(--pz-font-mono); font-size: 11px; line-height: 1.6;
  background: var(--pz-surface-2); border: 1px solid var(--pz-border);
  border-radius: 4px; padding: 8px 10px; color: var(--pz-text-muted);
  margin-top: 6px; white-space: pre-wrap;
}
/* Proza agenta vs zmierzony dowód. `.evidence` znaczy „to zmierzyliśmy" i musi
   znaczyć to nadal — deliverable dostaje własny, wyraźnie słabszy wariant. */
.proposal-lbl {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pz-text-muted); margin-top: 8px;
}
.evidence.proposal { border-style: dashed; margin-top: 3px; }
.art-origin { font-size: 10px; color: var(--pz-text-muted); margin-top: 4px; }

/* ---------- GEO report extras (score meter, scorecard, competitors) ---------- */
.dossier .rep-meter { padding: 4px var(--pz-space-5) 0; }
.dossier .rep-meter .progress { height: 6px; }
.scorecard {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px; padding: 4px var(--pz-space-5) 12px;
}
.scorecard .sc-item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.scorecard .sc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.scorecard .sc-dot.ok { background: var(--pz-success); }
.scorecard .sc-dot.fail { background: var(--pz-danger); }
.scorecard .sc-label { font-size: 12px; font-weight: 600; flex: none; }
.scorecard .sc-ev {
  font-size: 11px; color: var(--pz-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dossier .portfolio-table { margin: 0 0 8px; }
.dossier .portfolio-table th, .dossier .portfolio-table td { padding: 8px var(--pz-space-5); }
.dossier .portfolio-table tr:hover td { cursor: default; }
.rep-competitors {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 4px var(--pz-space-5) 12px;
}
/* „który element strony pasuje" — wtórne wobec liczby obok, więc przygaszone */
.rep-part { color: var(--pz-text-muted); font-size: var(--pz-text-sm); white-space: nowrap; }
.cite-matrix td:nth-child(2) { max-width: 320px; }
.cite-matrix td:last-child { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Drawer ---------- */
.drawer-scrim { position: fixed; inset: 0; background: rgba(31,42,68,.25); z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; z-index: 100;
  background: var(--pz-surface); border-left: 1px solid var(--pz-border);
  box-shadow: var(--pz-shadow-lg); display: flex; flex-direction: column;
}
.drawer .dr-head { padding: var(--pz-space-4) var(--pz-space-5); border-bottom: 1px solid var(--pz-border); display: flex; align-items: center; gap: 10px; }
.drawer .dr-body { overflow-y: auto; padding: var(--pz-space-4) var(--pz-space-5); display: flex; flex-direction: column; gap: 12px; }

/* ---------- Reusable: card ---------- */
.card {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md);
  padding: var(--pz-space-4);
  box-shadow: var(--pz-shadow-sm);
  transition: box-shadow 120ms var(--pz-ease), border-color 120ms var(--pz-ease);
}
.card.hoverable { cursor: pointer; }
.card.hoverable:hover { box-shadow: var(--pz-shadow-md); border-color: var(--pz-border-strong); }

/* ---------- Reusable: buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pz-font-sans);
  font-size: 15px; font-weight: 500;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition: background var(--pz-duration-fast) var(--pz-ease), border-color var(--pz-duration-fast) var(--pz-ease);
}
.btn.sm { font-size: 13px; padding: 6px 12px; }
.btn-primary { background: var(--pz-brand-ink); color: #fff; }
.btn-primary:hover { background: var(--pz-brand-ink-hover); }
.btn-secondary { background: var(--pz-surface); color: var(--pz-text); border-color: var(--pz-border-strong); }
.btn-secondary:hover { background: var(--pz-surface-2); }
.btn-ghost { background: transparent; color: var(--pz-text-muted); }
.btn-ghost:hover { background: var(--pz-surface-2); color: var(--pz-text); }
.btn-destructive { background: transparent; color: var(--pz-danger); border-color: var(--pz-danger); }
.btn-destructive:hover { background: var(--pz-danger-soft); }

.btn .ic { width: 14px; height: 14px; }

/* ---------- Reusable: badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--pz-radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.badge .ic { width: 11px; height: 11px; }
.b-success { background: var(--pz-success-soft); color: var(--pz-success-text); }
.b-warning { background: var(--pz-warning-soft); color: var(--pz-warning-text); }
.b-danger  { background: var(--pz-danger-soft);  color: var(--pz-danger-text); }
.b-info    { background: var(--pz-info-soft);    color: var(--pz-info-text); }
.b-neutral { background: var(--pz-neutral-soft); color: var(--pz-neutral-text); }
.b-accent  { background: var(--pz-brand-accent-soft); color: #7A5212; }
.b-ink-solid { background: var(--pz-brand-ink); color: #fff; }

/* ---------- Progress bar ---------- */
.progress { height: 4px; background: var(--pz-border); border-radius: 9999px; overflow: hidden; }
.progress > .fill { height: 100%; border-radius: 9999px; background: var(--pz-brand-ink); position: relative; overflow: hidden;
  transition: width 400ms ease; }
.progress > .fill.shim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: pz-shim 1.6s linear infinite;
}
.progress > .fill.success { background: var(--pz-success); }
/* Dzienny budżet pracy (Ustawienia — projekt „Pakiet i budżet”, bez waluty) */
.pu-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pu-box { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; padding: 16px;
          border: 1px solid var(--pz-border); background: var(--pz-bg); border-radius: var(--pz-radius-md); }
.pu-box.pu-near { border-color: var(--pz-warning); background: var(--pz-warning-soft); }
.pu-box.pu-over { border-color: var(--pz-danger); background: var(--pz-danger-soft); }
.pu-box-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.pu-title { font-size: 14px; font-weight: 600; }
.pu-box.pu-near .pu-title { color: var(--pz-warning-text); }
.pu-box.pu-over .pu-title { color: var(--pz-danger-text); }
.pu-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; color: #fff; background: var(--pz-text-muted); }
.pu-badge.pu-near { background: var(--pz-warning); }
.pu-badge.pu-over { background: var(--pz-danger); }
.pu-meter { height: 10px; border-radius: 9999px; background: var(--pz-border); overflow: hidden; }
.pu-meter > .fill { display: block; height: 100%; border-radius: 9999px; background: var(--pz-brand-ink); }
.pu-meter > .fill.pu-near { background: var(--pz-warning); }
.pu-meter > .fill.pu-over { background: var(--pz-danger); }
.pu-body { color: var(--pz-text-muted); line-height: 1.55; max-width: 66ch; }
.pu-facts { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--pz-border);
            font-size: 12px; color: var(--pz-text-subtle); }
.pu-facts strong { color: var(--pz-text-muted); font-weight: 600; }
/* Dokupienie puli (requirements/013 Goal 2) */
.pu-topups { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.pu-topups .sub-pending { flex-basis: 100%; margin-top: 4px; border-radius: var(--pz-radius); border: 1px solid var(--pz-border); }
/* Pakiet i rozliczenia (karta subskrypcji) */
.sub-card { padding: 0; overflow: hidden; }
.sub-top { padding: 22px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.sub-name { display: flex; align-items: center; gap: 10px; }
.sub-name h3 { font-size: 20px; font-weight: 600; margin: 0; }
.sub-price { display: flex; flex-direction: column; gap: 4px; }
.sub-price b { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sub-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--pz-text-muted); }
.sub-meta strong { color: var(--pz-text); font-weight: 600; }
.sub-pending { padding: 14px 22px; border-top: 1px solid var(--pz-border); background: var(--pz-warning-soft);
               display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sub-pending span { font-size: 13px; color: var(--pz-warning-text); }
/* Co obejmuje pakiet (requirements/013) — wymiary z zużyciem, bez kwot */
.plan-dims { padding: 14px 22px; border-top: 1px solid var(--pz-border); margin: 0;
             display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; }
.pd-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-row dt { font-size: 12px; color: var(--pz-text-subtle); }
.pd-row dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--pz-text); overflow-wrap: anywhere; }
.pd-row.pd-full dd { color: var(--pz-warning-text); }
@keyframes pz-shim { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Severity pill ---------- */
.sev-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 8px;
  border-radius: 9999px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.sev-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sev-critical .dot { background: var(--pz-danger); } .sev-critical .lbl { color: var(--pz-danger-text); }
.sev-high     .dot { background: var(--pz-sev-high); } .sev-high .lbl { color: #7A3818; }
.sev-medium   .dot { background: var(--pz-warning); } .sev-medium .lbl { color: var(--pz-warning-text); }
.sev-low      .dot { background: var(--pz-info); } .sev-low .lbl { color: var(--pz-info-text); }
.sev-info     .dot { background: var(--pz-neutral); } .sev-info .lbl { color: var(--pz-neutral-text); }

/* ---------- Tabular nums ---------- */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Kit-only: demo state toggle (not part of the product) ---------- */
.kit-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  display: flex; gap: 4px; padding: 4px;
  background: var(--pz-surface); border: 1px solid var(--pz-border-strong);
  border-radius: 9999px; box-shadow: var(--pz-shadow-lg);
}
.kit-toggle button {
  font-family: inherit; font-size: 11px; font-weight: 600;
  border: none; background: none; color: var(--pz-text-muted);
  padding: 4px 12px; border-radius: 9999px; cursor: pointer;
}
.kit-toggle button.on { background: var(--pz-brand-ink); color: #fff; }

/* ---------- Responsive: hide the rail below 1280px (after .rail rules so
   the media query wins the cascade) ---------- */
@media (max-width: 1279px) {
  .today { grid-template-columns: 1fr; }
  .rail { display: none; }
}

/* ---------- Scrollbar-light ---------- */
.tab-body::-webkit-scrollbar, .stream::-webkit-scrollbar, .rail::-webkit-scrollbar { width: 8px; height: 8px; }
.tab-body::-webkit-scrollbar-thumb, .stream::-webkit-scrollbar-thumb, .rail::-webkit-scrollbar-thumb { background: var(--pz-border); border-radius: 9999px; }
.tab-body::-webkit-scrollbar-thumb:hover, .stream::-webkit-scrollbar-thumb:hover { background: var(--pz-border-strong); }

/* ---------- Auth screens (Shiny app only) ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--pz-bg); }
.auth-card {
  width: 380px; background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg); box-shadow: var(--pz-shadow-lg); padding: var(--pz-space-6);
}
.auth-card .brand { justify-content: center; margin-bottom: var(--pz-space-5); }
.auth-card .form-group { margin-bottom: var(--pz-space-3); }
.auth-card label { font-size: var(--pz-text-sm); font-weight: var(--pz-weight-medium); }
.auth-card input[type="text"], .auth-card input[type="password"] {
  width: 100%; padding: var(--pz-space-2) var(--pz-space-3);
  border: 1px solid var(--pz-border-strong); border-radius: var(--pz-radius-sm); font: inherit;
}
.auth-err { color: var(--pz-danger-text); background: var(--pz-danger-soft);
  border-radius: var(--pz-radius-sm); padding: var(--pz-space-2) var(--pz-space-3);
  font-size: var(--pz-text-sm); margin-bottom: var(--pz-space-3); }
.auth-switch { text-align: center; margin-top: var(--pz-space-3); font-size: var(--pz-text-sm); color: var(--pz-text-muted); }
.auth-switch a { color: var(--pz-info); cursor: pointer; }

/* ---------- Rejestracja: pakiet → konto → płatność (010, projekt „Rejestracja”) ---------- */
.reg-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--pz-bg); }
.reg-bar { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
           padding: 0 clamp(12px, 3vw, 24px); background: var(--pz-surface); border-bottom: 1px solid var(--pz-border); }
.reg-bar .brand { margin: 0; }
.reg-bar a { color: var(--pz-brand-ink); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.reg-main { flex: 1; display: flex; justify-content: center; padding: clamp(24px, 4vw, 48px) clamp(12px, 3vw, 24px); }
.reg-col { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 24px; }
.reg-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.reg-step { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.reg-step-bar { height: 3px; border-radius: 2px; display: block; background: var(--pz-border); }
.reg-step.is-done .reg-step-bar, .reg-step.is-current .reg-step-bar { background: var(--pz-brand-ink); }
.reg-step-label { font-size: 12px; color: var(--pz-text-subtle); }
.reg-step.is-done .reg-step-label { color: var(--pz-text); }
.reg-step.is-current .reg-step-label { color: var(--pz-text); font-weight: 600; }
.reg-section { display: flex; flex-direction: column; gap: 18px; }
.reg-heading { display: flex; flex-direction: column; gap: 6px; }
.reg-heading h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.reg-heading p { font-size: 14px; margin: 0; }
.reg-heading a { color: var(--pz-brand-ink); cursor: pointer; }
.reg-plans { display: flex; flex-direction: column; gap: 10px; }
.btn.reg-plan-card { width: 100%; text-align: left; display: flex; gap: 16px; align-items: flex-start;
  justify-content: space-between; padding: 16px 18px; background: var(--pz-surface); color: var(--pz-text);
  border: 1.5px solid var(--pz-border); border-radius: var(--pz-radius-lg); line-height: 1.4; white-space: normal; }
.btn.reg-plan-card:hover { border-color: var(--pz-border-strong); }
/* Shiny owija etykietę `actionButton` w `span.action-label` — to ON układa kartę. */
.btn.reg-plan-card > .action-label { display: flex; width: 100%; gap: 16px; align-items: flex-start;
  justify-content: space-between; }
.btn.reg-plan-card.is-selected { border-color: var(--pz-brand-ink); box-shadow: var(--pz-shadow-md); }
.reg-plan-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.reg-plan-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.reg-plan-flag { font-size: 10px; font-weight: 600; color: var(--pz-warning-text); background: var(--pz-brand-accent-soft);
  border-radius: 9999px; padding: 2px 8px; }
.reg-plan-check { color: var(--pz-success); font-size: 14px; }
.reg-plan-who { font-size: 13px; color: var(--pz-text-muted); font-weight: 400; }
.reg-plan-cap { font-size: 12px; color: var(--pz-text-subtle); font-weight: 400; }
.reg-plan-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.reg-plan-price b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.reg-plan-price span { font-size: 11px; color: var(--pz-text-muted); font-weight: 400; }
.reg-actions { display: flex; justify-content: space-between; gap: 12px; }
.reg-actions.end { justify-content: flex-end; }
.btn.reg-cta { padding: 11px 20px; }
.reg-form { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.reg-field { display: flex; flex-direction: column; gap: 6px; }
.reg-field label { font-size: 13px; font-weight: 600; }
.reg-field .form-group { margin: 0; }
.reg-field input[type="text"], .reg-field input[type="password"] { width: 100%; font: inherit; font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--pz-border-strong); border-radius: var(--pz-radius-md);
  background: var(--pz-surface); color: var(--pz-text); }
.reg-err { font-size: 12px; color: var(--pz-danger-text); line-height: 1.5; }
.reg-err a { color: var(--pz-brand-ink); cursor: pointer; }
.pw-meter { display: flex; align-items: center; gap: 3px; }
.pw-seg { width: 20px; height: 4px; border-radius: 2px; background: var(--pz-border); display: inline-block; }
.pw-label { font-size: 12px; color: var(--pz-text-muted); margin-left: 5px; }
.pw-meter[data-score="1"] .pw-seg:nth-child(-n+1) { background: var(--pz-danger); }
.pw-meter[data-score="2"] .pw-seg:nth-child(-n+2) { background: var(--pz-warning); }
.pw-meter[data-score="3"] .pw-seg { background: var(--pz-success); }
.reg-consents { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--pz-border); }
.reg-consent { font-size: 13px; line-height: 1.5; }
.reg-consent .checkbox, .reg-consent .form-group { margin: 0; }
.reg-consent a { color: var(--pz-brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.reg-consent .shiny-input-container { width: 100%; }
.reg-consent .reg-err { margin-left: 26px; }
.pay-card { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); overflow: hidden; }
.pay-summary { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.pay-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.pay-row .pz-meta { font-size: 14px; }
.pay-summary .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--pz-text-muted); }
.pay-row.total { padding-top: 12px; border-top: 1px solid var(--pz-border); align-items: baseline; font-weight: 600; }
.pay-row.total b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-note { font-size: 12px; }
.pay-gateway { padding: 18px 22px; border-top: 1px dashed var(--pz-border-strong); background: var(--pz-bg);
  display: flex; flex-direction: column; gap: 12px; }
.row-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-test-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pz-info-text);
  background: var(--pz-info-soft); border: 1px solid var(--pz-info); border-radius: 9999px; padding: 3px 10px; }
.pay-slot { font-size: 12px; color: var(--pz-text-subtle); }
.pay-failed { padding: 16px 22px; background: var(--pz-danger-soft); border-top: 1px solid var(--pz-border);
  display: flex; flex-direction: column; gap: 6px; color: var(--pz-danger-text); font-size: 13px; line-height: 1.5; }
.pay-failed strong { font-size: 14px; }
.pay-actions { padding: 18px 22px; border-top: 1px solid var(--pz-border); display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.reg-done { align-items: flex-start; background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg); padding: 32px; }
.reg-done h1 { font-size: 24px; font-weight: 700; margin: 0; }
.reg-done p { font-size: 15px; line-height: 1.6; max-width: 52ch; margin: 0; }
.reg-done-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 9999px; background: var(--pz-success-soft); color: var(--pz-success-text); font-size: 18px; }
.unpaid-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px clamp(12px, 3vw, 24px);
  background: var(--pz-warning-soft); border-bottom: 1px solid var(--pz-border); }
.unpaid-dot { font-size: 14px; color: var(--pz-warning-text); line-height: 1.4; }
.unpaid-text { display: flex; flex-direction: column; gap: 6px; flex: 1; color: var(--pz-warning-text); }
.unpaid-text strong { font-size: 14px; }
.unpaid-text span { font-size: 13px; line-height: 1.5; max-width: 70ch; }

/* ---------- Onboarding hero (no projects yet) ---------- */
.hero-wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.hero {
  width: 520px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: var(--pz-space-4);
}
.hero .brand { justify-content: center; }
.hero-title {
  font-family: var(--pz-font-display, inherit); font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--pz-text); margin: var(--pz-space-2) 0 0;
}
.hero-sub {
  color: var(--pz-text-muted); font-size: 15px; line-height: 1.55;
  max-width: 440px; margin: 0;
}
.hero-cta { padding: 11px 26px; font-size: 15px; margin-top: var(--pz-space-2); }
.hero-or {
  display: flex; align-items: center; gap: 12px; width: 320px; margin: 2px 0;
  color: var(--pz-text-subtle); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-or::before, .hero-or::after {
  content: ""; flex: 1; height: 1px; background: var(--pz-border);
}
#hero-manual { width: 100%; max-width: 420px; }
.hero .row2 { display: flex; gap: 8px; }
.hero input { flex: 1; padding: 10px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--pz-border-strong); border-radius: var(--pz-radius-sm); }

/* ---------- Offline banner ---------- */
.offline {
  background: var(--pz-warning-soft); border: 1px solid var(--pz-warning);
  border-radius: var(--pz-radius-md); padding: 10px 14px; font-size: 12px;
  color: var(--pz-warning-text); display: flex; align-items: center; gap: 8px;
}

/* ---------- Shiny odds and ends ---------- */
.shiny-input-container { width: auto; margin-bottom: 0; }
/* Shiny opakowuje textarea w bootstrapowy form-group — w composerze MUSI
   flexować na całą szerokość (jak w kicie), inaczej input jest wąskim pudełkiem. */
.composer-inner .shiny-input-container { flex: 1 1 auto; width: 100%; margin: 0; }
.composer-inner .shiny-input-container .form-control,
.composer textarea { width: 100%; }
.msg-bubble p { max-width: none; margin: 0 0 var(--pz-space-2); }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul, .msg-bubble ol { margin: 0 0 var(--pz-space-2); padding-left: 20px; }
.msg-bubble table { border-collapse: collapse; font-size: var(--pz-text-sm); }
.msg-bubble th, .msg-bubble td { border-bottom: 1px solid var(--pz-border); padding: 4px 10px; text-align: left; }
.hero .row2 .shiny-input-container { flex: 1; }
.hero .row2 input { width: 100%; padding: 10px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--pz-border-strong); border-radius: var(--pz-radius-sm); }

/* ---------- pz-container (NIE .container — Bootstrap 3 dokleja do niej
   clearfix :before, którego pseudo-element staje się fantomowym pierwszym
   itemem grida i wywraca layouty) ---------- */
.pz-container { max-width: var(--pz-content-maxw); margin: 0 auto; }

/* Chipy pokrycia z długimi powodami muszą się ŁAMAĆ, nie rozpychać kart */
.cov { white-space: normal; text-align: left; line-height: 1.45; max-width: 100%; }
/* Fact-chipy w wierszach checków: przycinane elipsą */
.fact-chip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-row .ck-id { width: 130px; word-break: break-all; }

/* ---------- Suwak celu (karta decyzji kind="goal") ---------- */
.goal-single { display: flex; flex-direction: column; gap: 10px; }
.goal-slider { position: relative; padding: 6px 0 6px; }
.gs-range {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 6px;
  background: var(--pz-border); border-radius: 9999px; outline: none; margin: 0;
}
.gs-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pz-brand-ink); border: 2px solid var(--pz-surface);
  box-shadow: var(--pz-shadow-md); cursor: grab;
}
.gs-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pz-brand-ink); border: 2px solid var(--pz-surface);
  box-shadow: var(--pz-shadow-md); cursor: grab;
}
.gs-range:focus-visible { outline: 2px solid var(--pz-brand-accent); outline-offset: 4px; }
/* Kropki referencyjne siedzą NA torze suwaka (tor: top 6px + 6px wys. →
   środek 9px; kropka 10px z obwódką → top 4px). Wartości NIE są przy
   kropkach — idą do legendy .gs-legend (etykiety przy kropkach nachodziły
   na siebie przy bliskich wartościach). */
.gs-marks { position: absolute; left: 0; right: 0; top: 2px; height: 14px; pointer-events: none; }
.gs-mark { position: absolute; transform: translateX(-50%); }
.gs-mark .gs-dot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--pz-surface); box-shadow: 0 0 0 1px var(--pz-border);
}
.gs-mark.m-today .gs-dot, .gs-leg.m-today .gs-dot { background: var(--pz-text); }
.gs-mark.m-trend .gs-dot, .gs-leg.m-trend .gs-dot { background: var(--pz-info); }
.gs-mark.m-sugg  .gs-dot, .gs-leg.m-sugg  .gs-dot { background: var(--pz-brand-accent); }
.gs-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  font-size: 12px; color: var(--pz-text-muted);
}
.gs-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gs-leg .gs-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.gs-leg .tnum { font-family: var(--pz-font-mono); color: var(--pz-text); }
.goal-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.goal-edit .gs-num {
  width: 110px; font-family: var(--pz-font-mono); font-size: 13px;
  padding: 5px 10px; border: 1px solid var(--pz-border-strong); border-radius: 4px;
  background: var(--pz-bg); text-align: right; font-variant-numeric: tabular-nums;
}
.goal-verdict {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--pz-warning-soft); border-radius: 4px; font-size: 12px;
  color: var(--pz-warning-text);
}
/* ---------- Etykieta domeny na karcie decyzji (inbox jest globalny) ------- */
.d-head .d-host {
  margin-left: 10px; font-family: var(--pz-font-mono); font-weight: 400;
  font-size: 11px; color: var(--pz-text); background: var(--pz-surface);
  border: 1px solid var(--pz-border); border-radius: 9999px; padding: 1px 8px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d-title .d-title-host { font-weight: 600; color: var(--pz-text); }

/* ---------- Property picker (select_properties) ---------- */
/* przełącznik kont Google — wygląd chipów filtra strumienia */
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.acc-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.acc-chips .chip .cnt {
  font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums;
}
/* konto bez wolnych domen / z błędem: widoczne, ale nieklikalne */
.acc-chips .chip-dead { opacity: .55; cursor: not-allowed; }
.prop-list { display: flex; flex-direction: column; gap: 6px; }
.prop-row {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 8px 10px; border: 1px solid var(--pz-border); border-radius: 4px;
  cursor: pointer; font-weight: 400;
}
.prop-row:hover { background: var(--pz-surface-2); }
.prop-row input[type="radio"], .prop-row input[type="checkbox"] {
  accent-color: var(--pz-brand-ink); width: 15px; height: 15px; flex: 0 0 auto;
}
.prop-row .prop-name {
  font-weight: 500; font-size: 14px; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prop-row .prop-meta {
  margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  text-align: right;
}
.hero .msg-expand { font-size: 13px; }

/* ── Zadania: gotowce do wdrożenia + ręczne odhaczanie (Etap 1) ────────────── */
.art-wrap { margin-top: 8px; }
.art-wrap-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--pz-text-subtle); margin-bottom: 6px;
}
.artifact {
  border: 1px solid var(--pz-border); border-radius: 6px;
  background: var(--pz-surface); margin-bottom: 8px; overflow: hidden;
}
.art-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--pz-border);
  background: var(--pz-surface-2);
}
.art-kind { font-size: 12px; font-weight: 600; color: var(--pz-text); }
.art-url {
  font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-subtle);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.art-head .art-copy { margin-left: auto; flex: 0 0 auto; }
/* Stan produkcji gotowca — druga oś zadania (produkcja vs wdrożenie). */
/* Licznik znaków przy title/meta — tam gdzie długość realnie ma reguły. */
.art-count { font-size: 11px; color: var(--pz-text-muted); }
.art-url-none { color: var(--pz-text-subtle); font-style: italic; }
/* Znacznik do surowego HTML — drugorzędny wobec samej wartości. */
.art-tag { border-top: 1px dashed var(--pz-border); margin-top: 6px; padding-top: 6px; }
.art-tag-head { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.art-tag-head .pz-meta { flex: 1; }
.art-tag-pre { opacity: .85; }
/* JEDNA polityka łamania dla payloadu — karta i tabela hurtowa wyglądały inaczej. */
.art-payload, .art-table .art-t-val {
  font-family: var(--pz-font-mono); font-size: 12px; line-height: 1.6;
  margin: 0; padding: 10px; color: var(--pz-text); white-space: pre-wrap;
  word-break: break-word; max-height: 240px; overflow: auto;
}
.art-note {
  font-size: 11px; color: var(--pz-text-muted);
  padding: 0 10px 8px; margin-top: -2px;
}

/* Playbook „jak wdrożyć" per zadanie (router, Etap 2) */
.task-playbook {
  font-size: 12px; line-height: 1.5; color: var(--pz-text-muted);
  background: var(--pz-surface-2); border: 1px dashed var(--pz-border);
  border-radius: 6px; padding: 7px 10px; margin-top: 8px;
}
.task-playbook strong { color: var(--pz-text); }
.plat-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-size: 12px; color: var(--pz-text-muted);
}
.plat-chip .pc-val {
  font-family: var(--pz-font-mono); font-size: 11px; font-weight: 600;
  color: var(--pz-text); background: var(--pz-surface-2);
  border: 1px solid var(--pz-border); border-radius: 4px; padding: 1px 7px;
}

/* Decyzja write_confirm — diff zapisu na żywej stronie (Etap 3) */
.wc-write {
  border: 1px solid var(--pz-border); border-radius: 6px;
  background: var(--pz-surface); padding: 8px 10px; margin-top: 8px;
}
.wc-where { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wc-field { font-size: 12px; font-weight: 600; color: var(--pz-text); }
.wc-url {
  font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-subtle);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wc-old, .wc-new {
  font-size: 12px; line-height: 1.5; padding: 3px 6px; border-radius: 4px;
  white-space: pre-wrap; word-break: break-word;
}
.wc-old { color: var(--pz-text-muted); text-decoration: line-through; }
/* Stan „przed", którego nikt nie odczytał — przekreślenie sugerowałoby, że
   wiemy, co zastępujemy. Nie wiemy. */
.wc-old.wc-unmeasured { text-decoration: none; color: var(--pz-warning, #a06a1f); }
.wc-new { color: var(--pz-text); background: var(--pz-success-soft, rgba(46,125,50,.10)); margin-top: 3px; }
.wc-lbl { font-family: var(--pz-font-mono); font-size: 10px; text-transform: uppercase; color: var(--pz-text-subtle); }

/* Pełny deliverable w modalu — bez limitu wysokości karty, przewijalny */
.art-payload.art-full { max-height: 60vh; font-size: 13px; }

/* Notka „do weryfikacji" — dlaczego zadanie nie spełniło kryteriów recenzji */
/* Weryfikacja wdrożenia (S8) — czy zalecana zmiana jest na stronie.
   BEZ OCHRY: --pz-brand-accent znaczy „czekam na Twoją odpowiedź", a to jest
   pomiar, nie decyzja. Kolor niesie kierunek (widać / nie widać), nie pilność. */
.rcard.v-ok   { border-left: 3px solid var(--pz-chart-good); }
.rcard.v-bad  { border-left: 3px solid var(--pz-chart-bad); }
.rcard.v-warn { border-left: 3px solid var(--pz-warning, #C79100); }

/* Alert proaktywny (Etap 5) — pozyt sam zauważył sygnał */
.acard {
  border: 1px solid var(--pz-border); border-left: 3px solid var(--pz-warning, #C79100);
  border-radius: 8px; background: var(--pz-surface); padding: 12px 14px;
}
.acard .a-line { display: flex; align-items: center; gap: 8px; }
.acard .a-label { flex: 1; font-size: 14px; font-weight: 500; color: var(--pz-text); }
.acard .a-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Ekran zakładania projektu — etapy z żywym postępem bieżącego kroku. */
.setup-screen { max-width: 460px; text-align: left; }
.setup-screen .hero-title, .setup-screen .hero-sub { text-align: center; }
.setup-stages { margin: 22px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.setup-stages .setup-step {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
  font-size: 14px; color: var(--pz-text-muted);
}
.setup-stages .setup-step.done { color: var(--pz-success-text); }
.setup-stages .setup-step.current { color: var(--pz-text); font-weight: 500; }
.setup-stages .setup-step .ic { flex: none; margin-top: 2px; }
.setup-stages .progress { max-width: 100%; }
.setup-error {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--pz-danger-soft); color: var(--pz-danger-text);
}
.setup-error .btn { margin-top: 8px; }
.setup-foot { margin-top: 18px; text-align: center; }

/* ══ Zakładka „Wyniki" — dane GSC, działania, frazy ══════════════════════════
   Wykresy rysuje Apache ECharts (echarts4r) w trybie SVG; opcje budujemy
   w R (apps/web/R/oc_charts.R), więc kolory serii, siatki i osi NIE są tutaj —
   ECharts nie czyta zmiennych CSS. Tu zostaje tylko chrom wokół wykresu. */

.oc-tab > .card, .oc-tab > .echarts4r { margin-bottom: 16px; }
.oc-chart-card { padding-top: 8px; }
.oc-chart-card .echarts4r { width: 100% !important; }
.oc-spark { display: inline-block; vertical-align: middle; line-height: 0; }
.oc-spark .echarts4r { display: inline-block; }
.ch-hint { font-size: 10px; color: var(--pz-text-subtle); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* — karty KPI jako przełącznik metryki (wzór z agentseo) — */
.oc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi-card {
  min-height: 96px; padding: 12px 14px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; font: inherit;
  transition: border-color 120ms var(--pz-ease), box-shadow 120ms var(--pz-ease);
}
.kpi-card:hover { border-color: var(--pz-border-strong); box-shadow: var(--pz-shadow-md); }
/* obrączka w ochrze = „to jest wybrane"; ochra nie wchodzi na sam wykres */
.kpi-card-active {
  border-color: var(--pz-brand-accent);
  box-shadow: 0 0 0 2px var(--pz-brand-accent-soft);
}
.kpi-top { display: flex; align-items: center; gap: 6px; }
.kpi-val { display: flex; align-items: baseline; gap: 6px; }
.kpi-base { font-size: 15px; color: var(--pz-text-muted); }
.kpi-arrow { color: var(--pz-text-subtle); font-size: 12px; }
.kpi-now { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.kpi-spark { margin-top: 4px; line-height: 0; }
.kpi-spark .echarts4r { width: 100% !important; }

/* — ikona pomocy — */
.pz-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pz-surface-2); color: var(--pz-text-muted);
  cursor: help; flex-shrink: 0; margin-left: auto;
  transition: background 120ms var(--pz-ease), color 120ms var(--pz-ease);
}
.pz-help-icon:hover { background: var(--pz-brand-ink); color: #fff; }
.pz-help-icon svg { width: 11px; height: 11px; }

/* — przegląd, treemap, movers — */
.oc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.oc-stat { display: flex; flex-direction: column; gap: 2px; }
.oc-buckets, .oc-treemap-card { margin-bottom: 16px; }
.oc-bucket-legend { display: flex; gap: 14px; margin: 6px 0 10px; font-size: 11px; color: var(--pz-text-muted); }
.oc-bucket-legend .blg { display: inline-flex; align-items: center; gap: 6px; }
.oc-bucket-legend .blg-dot { width: 10px; height: 10px; border-radius: 2px; }
.oc-movers-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.movers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.movers-card .oc-sec-h { padding-bottom: 4px; }
.mover-row, .churn-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--pz-border); cursor: pointer; font-size: 13px;
}
.churn-row { grid-template-columns: 1fr auto; }
.mover-row:last-child, .churn-row:last-child { border-bottom: none; }
.mover-row:hover, .churn-row:hover { background: var(--pz-surface-2); }
.mv-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-v { font-variant-numeric: tabular-nums; color: var(--pz-text-muted); }
.oc-churn { margin-bottom: 16px; }
.churn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* — eksplorator — */
.oc-explorer-bar { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.oc-modes { display: flex; align-items: center; gap: 6px; }
.oc-count { margin-left: auto; }
.oc-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oc-filters .form-group { margin: 0; }
.oc-filters .form-control { height: 30px; font-size: 13px; padding: 4px 10px; }
.oc-fl { font-size: 11px; color: var(--pz-text-subtle); text-transform: uppercase; letter-spacing: .05em; }
.chip-filter {
  height: 28px; padding: 0 12px; border-radius: 9999px; font-size: 12px;
  border: 1px solid var(--pz-border); background: var(--pz-bg);
  color: var(--pz-text-muted); cursor: pointer; transition: all 120ms var(--pz-ease);
}
.chip-filter:hover { border-color: var(--pz-border-strong); color: var(--pz-text); }
.chip-filter-active {
  background: var(--pz-brand-accent-soft); border-color: var(--pz-brand-accent);
  color: var(--pz-text); font-weight: 500;
}
/* — wyrównanie tabeli fraz —
   Nagłówek MUSI dziedziczyć to samo wyrównanie co komórka (klasa `num` bije
   `.portfolio-table th { text-align:left }` specyficznością), a wartość i delta
   siedzą w dwóch torach o stałej szerokości — inaczej krawędź trzyma delta
   i liczba dryfuje wiersz po wierszu. */
.oc-kwt .oc-nc { text-align: right; white-space: nowrap; }
/* FLEX, nie inline-block: między dwoma inline-blockami zostaje węzeł białego
   znaku o szerokości zależnej od fontu (nagłówek sans 10px vs komórka mono
   12px = 4px rozjazdu). We flexie białe znaki między elementami znikają. */
.oc-kwt .oc-ncw { display: inline-flex; align-items: baseline; justify-content: flex-end; }
.oc-kwt .oc-nc .oc-nv { flex: 0 0 auto; }
.oc-kwt .oc-nc .oc-nd {
  flex: 0 0 auto; width: 62px; margin-left: 6px;
  text-align: left; white-space: nowrap; overflow: hidden;
}
.oc-kwt th.oc-nc { font-family: inherit; }
/* Dopasowanie i Trend: do prawej jak sąsiedzi, ale BEZ mono/12px z `.num` —
   inaczej słowo „dobre" przeskakuje na font monospace. */
.oc-kwt .oc-c { text-align: right; }
/* Stałe szerokości kolumn liczbowych: strzałka sortowania doklejana do
   nagłówka nie może przestawiać całego układu. Fraza zostaje elastyczna. */
.oc-kwt th:nth-child(2), .oc-kwt th:nth-child(5) { width: 148px; }
.oc-kwt th:nth-child(3), .oc-kwt th:nth-child(4) { width: 92px; }
.oc-kwt th:nth-child(6) { width: 132px; }
.oc-kwt th:nth-child(7) { width: 116px; }
.oc-kwt th { cursor: pointer; user-select: none; }
.oc-kwt tr.kw-row-active { background: var(--pz-brand-accent-soft); }
.bucket-pill {
  font-size: 10px; padding: 1px 6px; border-radius: 9999px; margin-left: 6px;
  color: #fff; font-variant-numeric: tabular-nums;
}
.oc-trend { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-trend.good { color: var(--pz-chart-good); font-weight: 600; }
.oc-trend.bad { color: var(--pz-chart-bad); font-weight: 600; }
.oc-trend.weak { color: var(--pz-text-subtle); }
.oc-trend.none { color: var(--pz-border-strong); }
.oc-trend-note { font-size: 10px; color: var(--pz-text-subtle); margin-left: 4px; }

/* — dopasowanie treści strony do frazy (pomiar, nie ocena „dobrze/źle") — */
.oc-fit {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--pz-text-muted);
}
.oc-fit .oc-fit-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pz-border-strong);
}
.oc-fit.fit-strong .oc-fit-dot { background: var(--pz-chart-good); }
.oc-fit.fit-moderate .oc-fit-dot { background: var(--pz-warn, #B08A3C); }
.oc-fit.fit-weak .oc-fit-dot { background: var(--pz-chart-bad); }
.oc-fit.none { color: var(--pz-border-strong); }
/* Pomiar sprzed zmiany treści: przygaszony i jawnie oznaczony — nigdy nie
   udaje wartości bieżącej. */
.oc-fit.stale { opacity: .55; }
.oc-fit .oc-fit-stale { color: var(--pz-chart-bad); font-weight: 700; margin-left: 2px; }
.oc-fitbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--pz-border);
  background: var(--pz-surface-sunken, transparent);
}
.oc-fitbar.warn { border-left: 2px solid var(--pz-chart-bad); }
.acard.content-changed .a-sub { margin-top: 4px; }
.oc-head .oc-bar { align-items: baseline; }
.oc-head .pz-h4 { font-size: 15px; }
@media (max-width: 900px) {
  .oc-kpis { grid-template-columns: repeat(2, 1fr); }
  .oc-stats, .movers-grid, .churn-cols { grid-template-columns: 1fr; }
}

/* — nagłówek: zakres osi, odświeżenie — */
.oc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-bar .chips { display: inline-flex; gap: 6px; }
.oc-bar .oc-refresh { margin-left: auto; }
.oc-kpis, .oc-dkpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px;
}
.oc-kpi-cell { display: flex; flex-direction: column; gap: 2px; }
.oc-kpi-cell .oc-ml {
  font-size: 11px; font-weight: 500; color: var(--pz-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.oc-kpi-cell .oc-v { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.oc-kpi-d { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.oc-kpi-d .oc-sub { font-size: 11px; color: var(--pz-text-subtle); }
.oc-dkpis { margin: 14px 0 6px; }
.oc-dkpis .oc-kpi-cell .oc-v { font-size: 18px; }
.oc-stamp { margin-top: 12px; font-size: 11px; color: var(--pz-text-subtle); }
.oc-d { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-d.good { color: var(--pz-chart-good); }
.oc-d.bad { color: var(--pz-chart-bad); }
@media (max-width: 900px) { .oc-kpis, .oc-dkpis { grid-template-columns: repeat(2, 1fr); } }

.oc-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--pz-text-muted); }
.oc-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.oc-legend .lg-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--pz-chart-marker);
}
.oc-legend .lg-dot.measure {
  background: var(--pz-surface); box-shadow: inset 0 0 0 1.5px var(--pz-chart-marker-measure);
}
.oc-legend .lg-right { margin-left: auto; color: var(--pz-text-subtle); }

/* — działania i wpływ — */
.oc-sec-h { font-size: 13px; font-weight: 600; padding-bottom: 6px; display: flex; gap: 10px; align-items: baseline; }
.oc-sec-sub { font-weight: 400; }
.oc-row {
  display: grid; grid-template-columns: 66px 1fr auto; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--pz-border); align-items: start;
}
.oc-when { font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-muted); padding-top: 2px; }
.oc-t { font-size: 14px; font-weight: 500; line-height: 1.4; }
.oc-kind {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pz-chart-marker); margin-right: 7px; vertical-align: 1px;
}
.oc-kind.measure { background: var(--pz-surface); box-shadow: inset 0 0 0 1.5px var(--pz-chart-marker-measure); }
.oc-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px;
  font-size: 12px; color: var(--pz-text-muted); font-variant-numeric: tabular-nums;
}
.oc-meta .oc-eff { font-weight: 600; color: var(--pz-text); }
.oc-scope { font-size: 11px; color: var(--pz-text-subtle); margin-top: 3px; }
.oc-act { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.oc-note { font-size: 11px; color: var(--pz-text-subtle); padding-top: 10px; border-top: 1px solid var(--pz-border); margin-top: 4px; }
.oc-empty { padding: 8px 0 4px; }
.oc-row.focus {
  background: var(--pz-chart-marker-soft);
  box-shadow: inset 3px 0 0 var(--pz-chart-marker);
  border-radius: var(--pz-radius-sm);
}

/* — aktualizacje Google — pas, nie kropka: aktualizacja ma rozciągłość — */
.oc-legend .lg-band {
  width: 16px; height: 9px; border-radius: 2px;
  background: var(--pz-chart-update-soft);
  box-shadow: inset 0 0 0 1px var(--pz-chart-update);
}
.oc-kind.update {
  width: 14px; height: 8px; border-radius: 2px;
  background: var(--pz-chart-update-soft);
  box-shadow: inset 0 0 0 1px var(--pz-chart-update);
}
.oc-kind.update.outage { background: var(--pz-surface); }
.upd-kind { margin-left: 8px; font-weight: 500; }
.upd-sum {
  font-size: 12px; line-height: 1.5; color: var(--pz-text-muted);
  margin-top: 5px; max-width: 72ch;
}
.upd-sum-src { color: var(--pz-text-subtle); font-style: italic; }
.upd-conf { font-size: 11px; color: var(--pz-text-subtle); margin-top: 5px; }
.oc-row.upd-row.focus {
  background: var(--pz-chart-update-soft);
  box-shadow: inset 3px 0 0 var(--pz-chart-update);
}

/* — grupy fraz — */
/* Stałe tory zamiast `auto`: przy `auto` każdy nagłówek grupy liczy szerokość
   z własnej treści, więc liczby w kolejnych grupach nie stoją w jednej osi. */
.oc-ghead {
  display: grid; grid-template-columns: 1fr 150px 128px 132px; gap: 16px; align-items: center;
  padding: 11px 0; cursor: pointer; border-top: 1px solid var(--pz-border);
}
.oc-ghead:hover { background: var(--pz-surface-2); }
.oc-glabel { font-size: 14px; font-weight: 500; }
.oc-caret { display: inline-block; width: 14px; color: var(--pz-text-subtle); font-size: 10px; }
.oc-gpage { font-family: var(--pz-font-mono); font-size: 11px; color: var(--pz-text-subtle); margin: 2px 0 0 14px; }
.oc-gnum {
  font-size: 12px; color: var(--pz-text-muted); white-space: nowrap;
  display: flex; align-items: baseline; justify-content: flex-end;
}
.oc-gnum .oc-nv { flex: 0 0 auto; }
.oc-gnum .oc-nd { flex: 0 0 auto; width: 54px; margin-left: 6px; text-align: left; }
.oc-more { margin-top: 10px; }
.oc-kwt { margin: 2px 0 10px; }
.oc-kwt tbody tr { cursor: pointer; }
.oc-kwt tbody tr:hover { background: var(--pz-surface-2); }
.oc-kwt tbody tr.on { background: var(--pz-brand-accent-soft); }
.oc-kwt .oc-d { margin-left: 6px; font-size: 11px; }
.oc-pill {
  font-size: 10px; padding: 1px 7px; border-radius: 9999px; margin-left: 6px;
  background: var(--pz-warning-soft); color: var(--pz-warning-text);
}

/* — szczegóły frazy — */
.oc-detail {
  border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md);
  padding: 14px 16px; margin: 0 0 12px; background: var(--pz-surface);
}
.oc-dtop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.oc-dkw { font-size: 18px; font-weight: 600; }
.oc-back { margin-left: auto; }
.oc-dmeta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 6px; font-size: 12px; color: var(--pz-text-muted);
}
.oc-detail .echarts4r { width: 100% !important; }
.rail-others .pz-small { color: var(--pz-text-subtle); margin-top: 2px; word-break: break-all; }
.rail-card .d-host { margin-left: 6px; }

/* — przełącznik widoków w „Wynikach" — */
.oc-subnav { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.oc-subnav .oc-subcount { margin-left: 6px; font-size: 10px; opacity: .75; }

/* — „pozyt odpowiada": kanał rozmowy, nie karta pracy — */
.typing-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0 8px 2px; color: var(--pz-text-muted); font-size: 13px;
}
.typing-row .t-dots { display: inline-flex; gap: 4px; padding-top: 6px; }
.typing-row .t-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pz-border-strong);
  animation: pz-typing 1.2s infinite ease-in-out;
}
.typing-row .t-dots span:nth-child(2) { animation-delay: .15s; }
.typing-row .t-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pz-typing { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.typing-row .t-stages { display: flex; flex-direction: column; gap: 2px; }
.typing-row .t-stage { line-height: 1.5; }
.typing-row .t-stage:not(:last-child) { color: var(--pz-text-subtle); }
.typing-row .t-time { margin-left: auto; font-size: 11px; color: var(--pz-text-subtle); }

/* — propozycja pomiaru (część rozmowy, nie decyzja z inboxu) — */
.pcard { padding: 2px 0; }
.pcard .p-line { display: flex; align-items: center; gap: 8px; }
.pcard .p-label { flex: 1; font-size: 14px; font-weight: 500; color: var(--pz-text); }
.pcard .p-actions { display: flex; gap: 8px; margin-top: 10px; }
.pcard-started .p-label, .pcard-already .p-label, .pcard-skipped .p-label { color: var(--pz-text-muted); }
.pcard-skipped { opacity: .7; }

/* Rozkład dopasowania w szczegółach frazy — co dokładnie poprawić */
.oc-fitdet { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 2px; }
.oc-fitdet .oc-ml { margin-right: 6px; }
.oc-fitdet-v { font-weight: 600; }

/* ---------- Zakładka AI ---------- */
.ai-tab { display: flex; flex-direction: column; gap: var(--pz-space-4); }
.ai-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--pz-space-4); }
.ai-tile {
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md); padding: var(--pz-space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.ai-tile-v { font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--pz-brand-ink); }
.ai-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ai-card { padding: var(--pz-space-4) 0 var(--pz-space-3); }
.ai-card .pz-meta, .ai-card .rep-sec-title { padding-left: var(--pz-space-5); padding-right: var(--pz-space-5); }
.ai-card-foot { display: flex; gap: 8px; padding: 8px var(--pz-space-5) 0; }
.ai-chart-card { padding: var(--pz-space-4); }
.ai-fit-row { display: flex; align-items: baseline; gap: 10px; padding: 0 var(--pz-space-5) 4px; }

/* Monitorowane zapytania AI — kurowana lista nad kaflami pomiaru. Świadomie bez
   ochry: `--pz-brand-accent` znaczy „czekam na Twoją odpowiedź", a to jest
   zwykła lista robocza, nie decyzja. */
.ai-queries { margin-bottom: var(--pz-space-4); }
.ai-queries .rep-sec-head { padding: 0 var(--pz-space-5) 8px; }
.aiq-note { padding-bottom: 8px; }
/* Lista monitorowanych zapytań jest USTAWIENIEM, nie wynikiem — domyślnie
   zwinięta. `<details>` zamiast własnego przełącznika: zero JS, zero nowej
   gałęzi delegacji w pozyt-app.js i treść ZOSTAJE w DOM (testy czytające
   `get_html` widzą ją tak samo jak dotąd). */
.aiq-fold { padding: 0 var(--pz-space-5) 4px; }
.aiq-summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--pz-text-muted);
  padding: 6px 0; list-style: none; user-select: none;
}
.aiq-summary::-webkit-details-marker { display: none; }
.aiq-summary::before { content: "\203A"; display: inline-block; transition: transform 120ms var(--pz-ease); }
.aiq-fold[open] .aiq-summary::before { transform: rotate(90deg); }
.aiq-summary:hover { color: var(--pz-text); }
.aiq-fold .aiq-less, .aiq-fold[open] .aiq-more { display: none; }
.aiq-fold[open] .aiq-less { display: inline; }
.aiq-table { width: 100%; }
.aiq-table th, .aiq-table td { vertical-align: middle; }
.aiq-table .aiq-q { max-width: 420px; overflow-wrap: anywhere; }
.aiq-table .aiq-pick { width: 28px; }
.aiq-table .aiq-acts { text-align: right; white-space: nowrap; }
.aiq-table tr.aiq-paused .aiq-q { color: var(--pz-text-subtle); text-decoration: line-through; }
.aiq-prop-title { padding-top: var(--pz-space-3); }
.aiq-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px var(--pz-space-5) 0;
}
.aiq-bar .aiq-count { margin-right: auto; }
.aiq-add { display: flex; align-items: flex-end; gap: 8px; padding: 8px var(--pz-space-5) 0; }
.aiq-add .form-group { flex: 1; margin-bottom: 0; }
.aiq-add select.form-control { min-width: 180px; }

/* Tematy strony (016 Goal 5): zatwierdzanie i wybór monitorowanych. */
.ait-table { width: 100%; }
.ait-table th, .ait-table td { vertical-align: middle; }
.ait-table .ait-label { font-weight: 500; color: var(--pz-text); }
.ait-table .ait-acts { text-align: right; display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end; align-items: center; }
.ait-table .badge + .badge { margin-left: 4px; }
.ait-more { display: inline-flex; align-items: center; gap: 6px; }
.ait-more[open] { flex-wrap: wrap; }
.ait-more .ait-in { font: inherit; padding: 4px 8px; border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm); max-width: 220px; }
.ait-rejected { padding: 8px var(--pz-space-5) 0; }
.ait-add { display: flex; align-items: flex-end; gap: 8px; padding: 8px var(--pz-space-5) 0; flex-wrap: wrap; }
.ait-add .form-group { flex: 1; min-width: 180px; margin-bottom: 0; }

/* Werdykt per silnik + macierz zapytanie × silnik. Bez ochry: nic tu nie czeka
   na zgodę użytkownika, to są wyniki pomiaru. */
.ai-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--pz-space-3); }
.ai-eng-head { padding: 0 0 8px; }
.ai-eng .ai-tile-v { font-size: 22px; }
.ai-note { padding-top: 8px; }
/* Wycena na karcie zgody — musi być czytelna, nie schowana w metadanych. */
.p-quote { color: var(--pz-text); font-size: 13px; padding-top: 4px; }
.ai-change { padding-bottom: var(--pz-space-3); }
.ai-change-list { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--pz-space-5); }
.ai-change-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ai-change-eng { font-weight: 500; color: var(--pz-text); min-width: 88px; }
.ai-change-q { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-top: 4px; }
.ai-matrix th, .ai-matrix td { vertical-align: middle; }
.ai-matrix .ai-q { max-width: 320px; overflow-wrap: anywhere; }
.ai-matrix .ai-demand { white-space: nowrap; }
.ai-matrix .ai-cell { white-space: nowrap; }
.ai-matrix .ai-fr { margin-left: 4px; }
.ai-matrix tr.open .ai-q { font-weight: 500; }
.linklike {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.linklike:hover { color: var(--pz-brand-ink); text-decoration: underline; }
.ai-row-detail > td { padding: 0 var(--pz-space-4) var(--pz-space-3); }
.ai-detail { padding-top: 4px; }
.ai-comp-list { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--pz-space-5); }
.ai-comp-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* Eksport w pasku Eksploratora — przygaszony, po prawej stronie filtrów. */
.oc-explorer-bar .oc-export { display: flex; gap: 4px; margin-left: auto; flex: none; }
.oc-explorer-bar .oc-export a { text-decoration: none; }
/* Nazwa metody i p przy werdykcie wpływu — przygaszone, bo to metadane. */
.oc-actions .oc-method { color: var(--pz-text-subtle); }

/* Gotowce planu w tabeli (S1) — wartość mono, adres wąsko, wartość oddycha. */
.art-bulk { margin-top: 12px; border-top: 1px solid var(--pz-border); padding-top: 12px; }
.art-bulk-head { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.art-bulk-head::-webkit-details-marker { display: none; }
.art-bulk[open] .art-bulk-head { margin-bottom: 8px; }
.art-bulk-head .art-wrap-title { flex: 1; }
.art-table td { vertical-align: top; }
.art-table .art-t-url { max-width: 220px; word-break: break-all; font-size: 11px; }
.art-table .art-t-kind { white-space: nowrap; color: var(--pz-text-muted); font-size: 12px; }

/* ── Badanie fraz (raport): grupy tematyczne + wybór fraz do celów ───────── */
/* Uwaga: zakładka „Wyniki" ma własne grupy fraz pod klasami .oc-* — te tutaj
   należą wyłącznie do raportu badania fraz. */
.kw-note { margin: 4px 0 10px; }
.kw-group { margin-bottom: 16px; }
.kw-ghead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 0 4px; border-bottom: 1px solid var(--pz-border);
}
.kw-ghead .kw-glabel { font-weight: 600; }
.kw-table { margin-top: 6px; }
.kw-table td.kw-pick { width: 34px; }
/* Wolumen zawsze dwuwierszowo: PRZEDZIAŁ + jego dokładność. Kubełkowanej
   liczby nie wolno pokazać jako pojedynczej wartości. */
.kw-table td.kw-vol { white-space: nowrap; }
.kw-table .kw-range { display: block; }
/* Ocena biznesowa frazy (017 G3): podpis pod frazą, powód w dymku. */
.biz-sign { display: block; font-size: 12px; }
.biz-sign[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.kw-table .kw-prec { display: block; font-size: 11px; }
.kw-ingoal { cursor: pointer; }
.kw-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 12px;
  background: var(--pz-bg); border: 1px solid var(--pz-border); border-radius: 8px;
}
.kw-bar .kw-count { margin-right: auto; }

/* ── Dostęp robotów AI ─────────────────────────────────────────────────────
   Karta stoi NAD kaflami pomiaru, bo zablokowany robot to jedyna przyczyna
   werdyktu „nie cytują nas", której nie widać w samym pomiarze cytowań.
   Blokada robota TRENINGOWEGO nie jest wyróżniona: bywa świadomą decyzją
   właściciela praw i nie odbiera cytowań. */
.aib-card.warn { border-left: 3px solid var(--pz-danger); }
.aib-head { padding: 0 var(--pz-space-5) var(--pz-space-3); font-size: 13px; }
.aib-card.warn .aib-head { color: var(--pz-danger); font-weight: 600; }
.aib-group { padding: var(--pz-space-3) var(--pz-space-5) 0; }
.aib-group .oc-ml { display: block; margin-bottom: 2px; }
.aib-sub { padding: 0 0 6px; }
.aib-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--pz-border); }
.aib-table tr:hover td { background: transparent; cursor: default; }
.aib-ua { white-space: nowrap; width: 1%; }
.aib-what { overflow-wrap: anywhere; }
.aib-v { white-space: nowrap; width: 1%; text-align: right; }
.aib-rule { margin-left: 6px; }
.aib-row.blocked .aib-ua code { color: var(--pz-danger); }
.aib-note { padding-top: var(--pz-space-3); }

/* ── Mapa cieplna retrievalu ───────────────────────────────────────────────
   Wiersz = fragment strony, kolumna = fraza, komórka = dopasowanie w PROCENTACH
   (nigdy surowy dystans). Skala jest SEKWENCYJNA i atramentowa: mierzona
   wielkość ma jeden kierunek, a nie dwa bieguny — dwukolorowa sugerowałaby
   ocenę „dobrze/źle", a to jest pomiar, nie werdykt. Ochra nie występuje. */
.aih-scroll { overflow-x: auto; padding: 0 var(--pz-space-5); }
.aih-table { table-layout: auto; }
.aih-table th, .aih-table td { padding: 8px 10px; }
.aih-table tr:hover td { background: transparent; cursor: default; }
/* Nagłówki kolumn CELOWO poziome. Pierwsza wersja miała `writing-mode:
   vertical-rl` + `transform: rotate(180deg)` w komórce tabeli — ładniejsze przy
   wąskich kolumnach, ale pionowy tekst w układzie tabelarycznym potrafi zapętlić
   layout Blinka; pełny przebieg E2E dostawał wtedy `websocketpp End of File`
   i tracił połączenie z przeglądarką (baseline bez tej reguły: zero takich
   błędów). Zawijana i ucięta etykieta czyta się gorzej o włos, a nie wywraca
   renderera. */
.aih-q {
  max-width: 88px; font-weight: 500; vertical-align: bottom;
  overflow-wrap: anywhere; hyphens: auto;
}
.aih-chunk { max-width: 260px; overflow-wrap: anywhere; font-size: 12px; }
.aih-cell { border-radius: 2px; }
.aih-cell.h1 { background: var(--pz-chart-heat-1); }
.aih-cell.h2 { background: var(--pz-chart-heat-2); }
.aih-cell.h3 { background: var(--pz-chart-heat-3); }
.aih-cell.h4 { background: var(--pz-chart-heat-4); color: var(--pz-chart-heat-on-dark); }
.aih-cell.h5 { background: var(--pz-chart-heat-5); color: var(--pz-chart-heat-on-dark); }
.aih-cell.hbest { outline: 2px solid var(--pz-brand-ink); outline-offset: -2px; font-weight: 700; }
.aih-cell.h4.hbest, .aih-cell.h5.hbest { outline-color: var(--pz-chart-heat-on-dark); }

/* Która NASZA podstrona została zacytowana — trzeci stan („nie wiem") jest
   przygaszony, bo to brak pomiaru, a nie wynik. */
.cite-page code { font-size: 11px; overflow-wrap: anywhere; }
.cite-page.unknown { font-style: italic; }

/* Nieudana praca (007 C3): tytuł pracy + powód ze słownika. */
.ecard .ecard-t { font-weight: 500; }
.ecard .ecard-r { color: var(--pz-text-muted); margin-top: 2px; }
.rail-title.err { color: var(--pz-danger-text); }
.ap-row.ap-err { border-color: var(--pz-danger); background: var(--pz-danger-soft); cursor: default; }
.ap-row.ap-err .btn { margin-top: 6px; align-self: flex-start; }

/* ---------- Responsywność (007 D1) ----------
   Kolumna siatki `auto` i `1fr` dostają minimum z TREŚCI (min-content), więc
   nagłówek z pigułką i siedem zakładek rozpychały stronę do 647 px na
   telefonie: ucięte „Wyślij" i „Zatwierdź", niewidoczne Wnioski i Cele.
   `minmax(0, 1fr)` pozwala kolumnie być węższą niż treść; to, co nie może się
   złamać (pasek zakładek), przewija się w poziomie WEWNĄTRZ siebie. */
.app  { grid-template-columns: minmax(0, 1fr); }
.main { grid-template-columns: minmax(0, 1fr); }
.content { min-width: 0; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; white-space: nowrap; }
.header { min-width: 0; }
@media (max-width: 640px) {
  .header { gap: var(--pz-space-2); padding: 0 var(--pz-space-3); }
  .brand-word, .user-avatar { display: none; }
  .project-switch { margin-left: 0; min-width: 0; }
  .project-switch strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
  .header-right { gap: var(--pz-space-2); min-width: 0; }
  .agent-status { max-width: 140px; }
  .agent-status [role="status"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs { padding: 0 var(--pz-space-2); }
  .tab { padding: 12px 10px 10px; }
  .project-menu { min-width: min(240px, calc(100vw - 24px)); }
}
/* Lista po lewej + szczegół po prawej (Raporty, Cele). Na wąskim ekranie
   jedno pod drugim — stała kolumna 300 px zostawiała szczegółowi 48 px. */
@media (max-width: 900px) {
}
@media (max-width: 640px) {
  #do_logout { padding: 4px 8px; }
  .agent-status { max-width: 112px; }
  .project-switch strong { max-width: 96px; }
  .today .stream-col { min-width: 0; }
  .oc-kpis, .oc-dkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-legend { flex-wrap: wrap; }
  /* Tabela szersza od ekranu przewija się sama, nie cała strona. */
  table.portfolio-table { display: block; max-width: 100%; overflow-x: auto; }
  .pz-container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1279px) { .today { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  /* Bootstrapowy .container-fluid dokłada 15 px z każdej strony POZA siatką. */
  body > .container-fluid { padding-left: 0; padding-right: 0; }
}
.stream-col { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  .header { gap: 6px; padding: 0 10px; }
  .header-right { gap: 6px; }
  .agent-status { max-width: 96px; padding-left: 8px; padding-right: 8px; }
  .project-switch { padding: 4px 6px; }
  .project-switch strong { max-width: 84px; }
}

/* Podsumowanie zakładki AI (007 D3): blokery pierwsze i wyróżnione. */
.ai-summary .ai-sum-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ai-summary .ai-sum-row { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.ai-summary .ai-sum-row .ic { flex: none; position: relative; top: 2px; color: var(--pz-success); }
.ai-summary .ai-sum-row.blocker { color: var(--pz-danger-text); font-weight: 500; }
.ai-summary .ai-sum-row.blocker .ic { color: var(--pz-danger); }

/* Wiersz wniosku (007 D2): waga · tytuł ze źródłem i datą · akcja. */
.finding-row { padding: 0; overflow: hidden; margin-bottom: 8px; }
.finding-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.finding-main { flex: 1 1 240px; min-width: 0; cursor: pointer; }
.finding-title { font-size: 14px; font-weight: 500; }
.finding-src { margin-top: 2px; }
.finding-act { margin-left: auto; flex: none; }
.finding-more { padding: 0 16px 14px; }
.finding-fix { margin-top: 8px; color: var(--pz-text-muted); }
details.findings-done { margin-top: 16px; }
details.findings-done > summary {
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--pz-text-muted);
  padding: 6px 0; margin-bottom: 8px;
}

/* Lista uwag walidacji planu (007 D4). */
details.d-consistency { margin-top: 6px; }
details.d-consistency > summary { cursor: pointer; }
details.d-consistency ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; }
details.d-consistency li { margin: 3px 0; }
/* Nagłówki kolumn liczbowych tabeli fraz się nie łamią — „PRIORYT" było ucięte (007 D5). */
.kw-table th { white-space: nowrap; }
.kw-table { width: 100%; }

/* Kafle KPI (007 D6): kolumna `1fr` brała minimum z treści, więc czwarty kafel
   wychodził poza kontener przy 1400 px. `minmax(0, 1fr)` + łamanie wartości. */
.oc-kpis, .oc-dkpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .oc-kpis, .oc-dkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-card { min-width: 0; overflow: hidden; }
.kpi-val { flex-wrap: wrap; min-width: 0; }
.oc-kpi-window { color: var(--pz-text-muted); margin: 12px 0 6px; font-weight: 500; }

/* ── Widoki AI z control plane (requirements/014 Goal 4) ─────────────────── */
.ai-tile-ci { font-size: 12px; color: var(--pz-text); }
.ai-tile-change { font-size: 11px; }
.ai-topic-table td { vertical-align: top; }
.ai-topic-row td { background: var(--pz-surface-2); padding-top: 10px; }
.ai-topic-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ai-topic-label { font-weight: 600; }
.ai-topic-seeds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ai-q-row.ai-gap td.ai-q { box-shadow: inset 3px 0 0 var(--pz-danger); }
.ai-stale { margin-left: 4px; }
.ai-drill-vs { font-size: 13px; margin: 4px 0 8px; }
.ai-drill-vs.warn { color: var(--pz-warning-text); }
.ai-answers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.ai-answer { border: 1px solid var(--pz-border); border-radius: 8px; padding: 8px 10px; }
.ai-answer-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.ai-answer-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
mark.ai-mention { background: var(--pz-info-soft); color: inherit; padding: 0 2px; border-radius: 3px; }
.ai-cite-ours td { font-weight: 600; }
.ai-comp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .ai-comp-charts { grid-template-columns: 1fr; } }

/* Karta „Tematy strony do zatwierdzenia" (decyzja `topics`, requirements/016). */
.topic-list { display: flex; flex-direction: column; gap: var(--pz-space-2); margin: var(--pz-space-3) 0; }
.topic-row { display: flex; gap: var(--pz-space-3); align-items: flex-start;
  padding: var(--pz-space-2) var(--pz-space-3); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-md); background: var(--pz-surface); }
.topic-pick { padding-top: 6px; }
.topic-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.topic-name { font: inherit; font-weight: 600; color: var(--pz-text); border: 1px solid transparent;
  border-radius: var(--pz-radius-sm); padding: 2px 6px; margin-left: -6px; background: transparent; }
.topic-name:hover, .topic-name:focus { border-color: var(--pz-border-strong); background: var(--pz-surface-2); }
.topic-meta { display: flex; flex-wrap: wrap; gap: var(--pz-space-2); align-items: center; }
.topic-phrases { color: var(--pz-text-subtle); overflow-wrap: anywhere; }
.topic-merge { margin: var(--pz-space-2) 0; display: flex; flex-direction: column; gap: 4px; }
.topic-merge-row { display: flex; gap: var(--pz-space-2); align-items: center; }

/* ── Zakładka AI per temat (016 Goal 6) — wg zaakceptowanych makiet ─────── */
/* Nagłówki kart AI: dotąd stylowane tylko w `.dossier` — w kartach AI tytuł
   i akcja stały jeden pod drugim, bez odstępów. */
.ai-card .rep-sec-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 0 var(--pz-space-5) 8px; }
.ai-card .rep-sec-head .rep-sec-title, .ai-card .rep-sec-head .pz-meta { padding-left: 0; padding-right: 0; }
.ai-card .rep-sec-title { font-size: 15px; font-weight: 600; color: var(--pz-text); }
.ai-tab > * + * { margin-top: var(--pz-space-4); }
.ai-tab > .shiny-html-output:empty { display: none; }

.ait-steps-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 var(--pz-space-5); }
.ait-step { display: flex; align-items: center; gap: 10px; }
.ait-step-n { width: 28px; height: 28px; border-radius: var(--pz-radius-full); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
  background: var(--pz-surface-2); color: var(--pz-text-muted); flex: none; }
.ait-step.current .ait-step-n { background: var(--pz-brand-ink); color: var(--pz-surface); }
.ait-step.done .ait-step-n { background: var(--pz-success-soft); color: var(--pz-success-text); }
.ait-step-t { font-weight: 600; color: var(--pz-text); }
.ait-step.todo .ait-step-t { color: var(--pz-text-muted); }
.ait-step-arrow { color: var(--pz-text-subtle); }
.ait-steps-next { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px var(--pz-space-5) 0; }
.ait-steps-next .pz-meta { padding: 0; }

.ait-head { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 28px; align-items: center;
  padding: var(--pz-space-4) var(--pz-space-5); }
.ait-head .rep-sec-title, .ait-head .pz-meta { padding: 0; }
.ait-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.ait-big .ait-share { font-size: 40px; font-weight: 700; letter-spacing: -1px; color: var(--pz-text); }
.ait-bar { position: relative; height: 10px; max-width: 340px; background: var(--pz-surface-2);
  border-radius: var(--pz-radius-full); margin-bottom: 6px; }
.ait-bar-ci { position: absolute; top: 0; bottom: 0; border-radius: var(--pz-radius-full);
  background: var(--pz-chart-heat-2); }
.ait-bar-pt { position: absolute; top: -3px; width: 3px; height: 16px; margin-left: -1px;
  background: var(--pz-brand-ink); border-radius: 2px; }
.hatch, .ait-bar-ci.hatch { background-image: repeating-linear-gradient(135deg, var(--pz-chart-hatch) 0 2px,
  transparent 2px 7px); }
.ait-kvs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ait-kv { display: flex; flex-direction: column; gap: 2px; }
.ait-kv b { font-size: 20px; color: var(--pz-text); }
.ait-kv .pz-meta { padding: 0; }
.ait-unmeasured { color: var(--pz-chart-unmeasured); }
.ait-small { margin-left: 6px; }

.ait-legend { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }
.ait-lg { display: inline-flex; align-items: center; gap: 6px; }
.ait-sw { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.ait-sw.heat { background: linear-gradient(90deg, var(--pz-chart-heat-1), var(--pz-chart-heat-5)); }
.ait-sw.hatch { background-color: var(--pz-chart-heat-2); }
.ait-sw.unmeasured { background: var(--pz-surface); border: 1.5px solid var(--pz-chart-unmeasured); }
.ait-sw.oop { background: var(--pz-chart-out-of-plan-fill); border: 1.5px dashed var(--pz-chart-out-of-plan); }

.ait-prio { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 8px var(--pz-space-5) 0; padding: 10px 12px; border-radius: var(--pz-radius-md);
  background: var(--pz-chart-priority-zone); }
.ait-prio-t { font-weight: 500; color: var(--pz-text); }
.ait-gap { margin: 0 var(--pz-space-5) 8px; padding: 10px 12px; border-radius: var(--pz-radius-md);
  background: var(--pz-warning-soft); color: var(--pz-warning-text); font-size: 13px; }
.ait-funnel-notes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
  padding: 8px var(--pz-space-5) 0; font-size: 12px; }
.ait-fn b { font-size: 16px; color: var(--pz-text); }
.ait-fn .pz-meta { padding: 0; }

/* Szuflada tematu: panel po prawej (telefon — cały ekran). */
.ait-drawer, .pzv-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 900;
  overflow-y: auto; background: var(--pz-surface); border-left: 1px solid var(--pz-border);
  box-shadow: var(--pz-shadow-lg); padding: 22px 26px; display: flex; flex-direction: column; gap: 6px; }
.ait-dr-top, .pzv-dr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ait-dr-top .badge + .badge, .pzv-dr-top .badge + .badge { margin-left: 6px; }
.ait-dr-title, .pzv-dr-title { font-size: 20px; font-weight: 600; color: var(--pz-text); margin-top: 6px; }
.ait-dr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.ait-dr-kpi { background: var(--pz-bg); border-radius: var(--pz-radius-md); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; }
.ait-dr-kpi b, .ait-dr-kpi .ait-share { font-size: 20px; font-weight: 700; color: var(--pz-text); }
.ait-dr-sec, .pzv-dr-sec { border-top: 1px solid var(--pz-border); padding: 14px 0; display: flex; flex-direction: column;
  gap: 8px; font-size: 13px; }
.ait-dr-phrase { display: grid; grid-template-columns: 1fr 110px 110px; gap: 10px; }
.ait-dr-q td.ait-kn { text-align: center; font-variant-numeric: tabular-nums; }
.ait-dr-snip { background: var(--pz-bg); border-radius: var(--pz-radius-md); padding: 10px 12px; line-height: 1.5; }
.ait-dr-snip mark, .ai-tab mark { background: var(--pz-brand-accent-soft); color: var(--pz-text);
  padding: 0 2px; border-radius: 3px; }
.ait-dr-warn { background: var(--pz-warning-soft); color: var(--pz-warning-text);
  border-radius: var(--pz-radius-md); padding: 8px 10px; }
.ait-dr-sec .btn, .pzv-dr-sec .btn { align-self: flex-start; }

/* „Szczegóły techniczne”: zwinięte CSS-em — wykresy w środku zachowują rozmiar
   (w zamkniętym <details> miałyby 0×0 i ECharts przerwałby flush Shiny). */
.ai-tech { margin-top: var(--pz-space-5); }
.ai-tech-cb { position: absolute; opacity: 0; pointer-events: none; }
.ai-tech-sub { margin-left: 8px; }
.ai-tech-less { display: none; }
.ai-tech-cb:checked ~ .ai-tech-toggle .ai-tech-more { display: none; }
.ai-tech-cb:checked ~ .ai-tech-toggle .ai-tech-less { display: inline; }
.ai-tech-cb:not(:checked) ~ .ai-tech-body { height: 0; overflow: hidden; visibility: hidden; }
.ai-tech-body > * + * { margin-top: var(--pz-space-4); }
.ai-tech-cb:checked ~ .ai-tech-body { margin-top: var(--pz-space-4); }

@media (max-width: 900px) {
  .ait-head { grid-template-columns: 1fr; gap: 16px; }
  .ait-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ait-funnel-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ait-dr-kpis { grid-template-columns: 1fr; }
  .ait-drawer, .pzv-drawer { padding: 16px; }
}

/* === 018 klocki wspólne (ui_common.R) — WYŁĄCZNIE tokeny, ruch tylko CSS === */
.pzv-head { display: flex; align-items: flex-end; gap: var(--pz-space-5); margin-bottom: var(--pz-space-5); flex-wrap: wrap; }
.pzv-head-main { flex: 1 1 320px; min-width: 0; }
.pzv-title { font-size: var(--pz-text-xl); line-height: var(--pz-lh-xl); font-weight: var(--pz-weight-semibold); margin: 0; }
.pzv-state { font-size: var(--pz-text-base); color: var(--pz-text-muted); margin-top: 2px; }
.pzv-state b { color: var(--pz-text); font-weight: var(--pz-weight-semibold); }
.pzv-fresh { font-size: 12px; color: var(--pz-text-muted); }
.pzv-fresh.pzv-stale { border: 1px dashed var(--pz-chart-unmeasured); border-radius: var(--pz-radius-sm); padding: 0 8px; line-height: 20px; }

.pzv-kpi { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-height: 112px; min-width: 0;
  transition: border-color var(--pz-duration-fast) var(--pz-ease); }
.pzv-kpi-label, .pzv-kpi-note, .pzv-kpi-int { font-size: 12px; line-height: var(--pz-lh-xs); color: var(--pz-text-muted); }
.pzv-kpi-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--pz-space-3); }
.pzv-kpi-val { font-size: 28px; font-weight: var(--pz-weight-bold); line-height: 1.2; letter-spacing: -0.02em; color: var(--pz-text); }
.pzv-kpi-ctx { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pzv-kpi-spark { width: 84px; height: 30px; flex: none; }
.pzv-kpi-un { border-style: dashed; border-color: var(--pz-chart-unmeasured); background: transparent; }
.pzv-kpi-un .pzv-kpi-val { color: var(--pz-text-muted); }
.pzv-kpi-un .btn { align-self: flex-start; margin-top: 4px; }
.pzv-delta { font-size: var(--pz-text-sm); font-weight: var(--pz-weight-semibold); }
.pzv-up { color: var(--pz-success-text); }
.pzv-down { color: var(--pz-danger-text); }
.pzv-flat { color: var(--pz-text-muted); }
.pzv-spark { display: block; }
.pzv-spark polyline { fill: none; stroke: var(--pz-chart-line); stroke-width: 1.5; }

.pzv-over { font-size: var(--pz-text-xs); font-weight: var(--pz-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pz-text-muted); }
.pzv-empty { border: 1px dashed var(--pz-border-strong); border-radius: var(--pz-radius-lg); padding: 28px;
  text-align: center; display: flex; flex-direction: column; gap: var(--pz-space-2); align-items: center; }
.pzv-empty-clean { border-style: solid; border-color: var(--pz-border); }
.pzv-empty-title { font-size: var(--pz-text-md); font-weight: var(--pz-weight-semibold); color: var(--pz-text); }
.pzv-empty-text { font-size: 14px; color: var(--pz-text-muted); max-width: 52ch; }
.pzv-empty-act { margin-top: var(--pz-space-2); }

.pzv-cov { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pzv-cov-bar { display: flex; gap: 2px; height: 10px; border-radius: var(--pz-radius-full); overflow: hidden; background: var(--pz-surface-2); }
.pzv-cov-mini .pzv-cov-bar { height: 6px; }
.pzv-cov-seg { display: block; flex-basis: 0; min-width: 4px; }
.pzv-cov-m { background: var(--pz-brand-ink); }
.pzv-cov-s { background-image: repeating-linear-gradient(135deg, var(--pz-chart-hatch) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--pz-chart-unmeasured); }
.pzv-cov-f { background: var(--pz-danger); }
.pzv-cov-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--pz-text-muted); }
.pzv-cov-lg { display: inline-flex; align-items: center; gap: 6px; }
.pzv-cov-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pzv-dr-foot { border-top: 1px solid var(--pz-border); padding-top: var(--pz-space-3); margin-top: auto;
  display: flex; gap: var(--pz-space-2); justify-content: flex-end; }

/* Tabela-eksplorator (pz_table) */
.pzv-table { font-size: 14px; }
.pzv-cell-t { font-weight: var(--pz-weight-medium); color: var(--pz-text); }
.pzv-cell-m { font-size: 12px; color: var(--pz-text-muted); }
.pzv-cell-na { color: var(--pz-text-subtle); }
.pzv-cell-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--pz-space-2); }
.pzv-bar { display: inline-block; height: 8px; border-radius: 2px; background: var(--pz-chart-heat-3); }
.pzv-detail { padding: 14px 20px 18px; background: var(--pz-bg); }
/* === koniec 018 klocki === */

/* === 018 paczka 1: Dziś i Portfel — WYŁĄCZNIE tokeny; ochra = czeka na Ciebie === */
/* --- 018 paczka 1: kokpit „Dziś” (ui_today.R) --- */
.cockpit-slot:empty { display: none; }
.cockpit-slot { padding: var(--pz-space-4) var(--pz-space-6) 0; }
.pzv-cockpit { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--pz-space-3); }
.pzv-ck-card { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg);
  padding: 12px 20px 14px; display: flex; flex-direction: column; gap: var(--pz-space-3); }
.pzv-ck-top { display: flex; align-items: center; gap: var(--pz-space-3); min-width: 0; }
.pzv-ck-top .btn { margin-left: auto; flex: none; }
.pzv-ck-line { font-size: var(--pz-text-sm); font-weight: var(--pz-weight-semibold); color: var(--pz-text); display: none; }
.pzv-ck-line.pzv-ck-you { color: var(--pz-warning-text); }
.pzv-ck-show { display: none; }
.pzv-ck-say { display: flex; align-items: center; justify-content: space-between; gap: var(--pz-space-3); flex-wrap: wrap; }
.pzv-ck-sentence { font-size: 14px; color: var(--pz-text); flex: 1 1 320px; min-width: 0; }
.pzv-ck-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pz-space-3); }
.pzv-ck-kpis .pzv-kpi { min-height: 96px; padding: 12px 14px; }
.pzv-kpi-side { display: flex; align-items: center; gap: 4px; flex: none; padding-bottom: 4px; }
.pzv-kpi[data-you="1"] { border-color: var(--pz-brand-accent); }
.pzv-kpi-sev { display: flex; gap: 4px; flex-wrap: wrap; }
.pzv-band { position: relative; height: 10px; border-radius: 2px; background: var(--pz-surface-2); margin: 4px 0 2px; }
.pzv-band-ci { position: absolute; top: 0; height: 10px; background: var(--pz-chart-heat-2); border-radius: 2px; }
.pzv-band-pt { position: absolute; top: -3px; width: 3px; height: 16px; margin-left: -1px; background: var(--pz-text); }

.pzv-path { display: flex; align-items: flex-start; }
.pzv-step { flex: 1; position: relative; padding-top: 22px; font-size: var(--pz-text-sm); color: var(--pz-text-muted); min-width: 0; }
.pzv-step::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--pz-border-strong); }
.pzv-step::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--pz-surface); border: 2px solid var(--pz-border-strong); box-sizing: border-box; }
.pzv-step:last-child::before { display: none; }
.pzv-step-done { color: var(--pz-text); }
.pzv-step-done::before { background: var(--pz-brand-ink); }
.pzv-step-done::after { background: var(--pz-brand-ink); border-color: var(--pz-brand-ink); }
.pzv-step-now { color: var(--pz-text); font-weight: var(--pz-weight-semibold); }
.pzv-step-now::after { border-color: var(--pz-brand-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pz-brand-ink) 12%, transparent); }
.pzv-step-you { color: var(--pz-warning-text); font-weight: var(--pz-weight-semibold); }
.pzv-step-you::after { background: var(--pz-brand-accent); border-color: var(--pz-brand-accent);
  box-shadow: 0 0 0 4px var(--pz-brand-accent-soft); }

/* Zwinięty: jedna linia — krok, zdanie, akcja. Wybór użytkownika (`data-pref`)
   wygrywa; bez wyboru telefon jest zwinięty, komputer rozwinięty. */
.pzv-cockpit[data-pref="closed"] .pzv-path,
.pzv-cockpit[data-pref="closed"] .pzv-ck-kpis,
.pzv-cockpit[data-pref="closed"] .pzv-ck-hide { display: none; }
.pzv-cockpit[data-pref="closed"] .pzv-ck-show,
.pzv-cockpit[data-pref="closed"] .pzv-ck-line { display: inline; }
@media (max-width: 900px) {
  .pzv-ck-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pzv-step-s { display: none; }
}
@media (max-width: 640px) {
  .cockpit-slot { padding: var(--pz-space-3) var(--pz-space-3) 0; }
  .pzv-ck-card { padding: 10px 12px 12px; }
  .pzv-ck-top .pzv-over { display: none; }
  .pzv-step { font-size: 11px; }
  .pzv-step:not(.pzv-step-now):not(.pzv-step-you) .pzv-step-l { display: none; }
  .pzv-cockpit[data-pref="auto"] .pzv-path,
  .pzv-cockpit[data-pref="auto"] .pzv-ck-kpis,
  .pzv-cockpit[data-pref="auto"] .pzv-ck-hide { display: none; }
  .pzv-cockpit[data-pref="auto"] .pzv-ck-show,
  .pzv-cockpit[data-pref="auto"] .pzv-ck-line { display: inline; }
  .pzv-cockpit:not([data-pref="open"]) .pzv-ck-line { display: inline; }
}

/* --- 018 paczka 1: Portfel (ui_portfolio.R) --- */
.pzv-portfolio { max-width: 1248px; }
.pzv-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pz-space-4); margin-bottom: var(--pz-space-5); }
.btn.pzv-count { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; min-height: 88px;
  padding: 14px 16px; text-align: left; white-space: normal; background: var(--pz-surface);
  border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); }
.btn.pzv-count:hover { border-color: var(--pz-border-strong); }
.btn.pzv-count-you { border: 2px solid var(--pz-brand-accent); }
.pzv-pf-box { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); overflow: hidden; }
.pzv-pf-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--pz-space-3);
  padding: 12px 16px; flex-wrap: wrap; }
.pzv-pf-bar .stream-filter { padding-bottom: 0; flex-wrap: wrap; }
.pzv-pf-box .pzv-empty { margin: 0 16px 16px; }
.pzv-pf-clicks { display: flex; align-items: center; gap: var(--pz-space-2); }
.pzv-dash { display: inline-block; width: 84px; border-top: 1px dashed var(--pz-chart-unmeasured); }
.pzv-pf-needs { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pzv-pf-needs .badge { white-space: normal; text-align: left; }
.badge.pzv-b-you { background: var(--pz-brand-accent-soft); color: var(--pz-warning-text); border: 1px solid var(--pz-brand-accent); }
.badge.pzv-b-stale { background: transparent; color: var(--pz-text-muted); border: 1px dashed var(--pz-chart-unmeasured); }
.btn.pzv-pf-host { padding-left: 0; font-weight: var(--pz-weight-medium); color: var(--pz-text); }
.pzv-pf-ro, .pzv-pf-ro .btn.pzv-pf-host { color: var(--pz-text-muted); }
.pzv-mp-wrap { display: flex; flex-direction: column; gap: 4px; }
.pzv-mp { display: flex; gap: 3px; }
.pzv-mp i { width: 18px; height: 6px; border-radius: 2px; background: var(--pz-border-strong); display: block; }
.pzv-mp i.pzv-mp-d { background: var(--pz-brand-ink); }
.pzv-mp i.pzv-mp-you { background: var(--pz-brand-accent); }
.pzv-mp i.pzv-mp-now { background: var(--pz-info); }
.pzv-pf-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: var(--pz-space-4); align-items: center; }
.pzv-pf-sentence { font-size: 14px; color: var(--pz-text); }
.pzv-pf-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--pz-space-3);
  padding: 12px 16px; background: var(--pz-surface-2); flex-wrap: wrap; }
.pzv-pf-cards { display: none; flex-direction: column; gap: var(--pz-space-3); padding: 0 12px 12px; }
.pzv-pf-card { border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: var(--pz-space-2); background: var(--pz-surface); }
.pzv-pf-card.pzv-pf-you { border-color: var(--pz-brand-accent); }
.pzv-pf-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pz-space-2); flex-wrap: wrap; }
.pzv-pf-card .pzv-mp i { flex: 1; width: auto; }
.pzv-pf-card .btn { align-self: flex-start; min-height: 44px; }
@media (max-width: 900px) { .pzv-pf-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pzv-counts { grid-template-columns: minmax(0, 1fr); gap: var(--pz-space-2); }
  .btn.pzv-count { min-height: 0; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
  .pzv-pf-table { display: none; }
  .pzv-pf-cards { display: flex; }
}

/* --- 018 paczka 1: karty strumienia --- */
.d-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pz-space-4); margin: 10px 0 6px; }
.d-sum-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.d-sum-n { font-size: 24px; font-weight: var(--pz-weight-bold); line-height: 1.2; color: var(--pz-text); }
.d-more { margin: 4px 0 8px; }
.d-more > summary { cursor: pointer; font-size: var(--pz-text-sm); color: var(--pz-info-text); list-style: none; }
.d-more > summary::-webkit-details-marker { display: none; }
.d-more[open] > summary { margin-bottom: 6px; }
.r-cov { max-width: 220px; margin: 6px 0 2px; }
@media (max-width: 640px) { .d-summary { grid-template-columns: minmax(0, 1fr); } }
/* Akcje decyzji zawsze pod ręką: pierwszy wiersz „Dziś” przewija się w sobie,
   więc przyciski kleją się do dolnej krawędzi widocznej części karty.
   `clip` zamiast `hidden` — `hidden` robi z karty kontener przewijania
   i `sticky` trzymałby się jej, a nie widoku. */
.today-top .dcard { overflow: clip; }
.today-top .dcard .d-actions { position: sticky; bottom: 0; z-index: 1; background: var(--pz-surface); }
/* === koniec 018 paczka 1 === */


/* === 018 paczka 2: Wyniki, Raporty, Wnioski — WYŁĄCZNIE tokeny; ochra = pozyt proponuje === */
.pzv-what { font-size: var(--pz-text-sm); color: var(--pz-text-muted); margin: 2px 0 12px; }
.badge.pzv-b-meas { background: transparent; border: 1px solid var(--pz-border-strong); color: var(--pz-text); }
.badge.pzv-b-prop { background: transparent; border: 1px dashed var(--pz-brand-accent); color: var(--pz-warning-text); }
.pzv-seg { border: 1px solid var(--pz-border-strong); border-radius: 0; margin-left: -1px; }
.pzv-seg:first-of-type { border-radius: var(--pz-radius-md) 0 0 var(--pz-radius-md); margin-left: 0; }
.pzv-seg:last-of-type { border-radius: 0 var(--pz-radius-md) var(--pz-radius-md) 0; }
.pzv-seg.active { background: var(--pz-brand-ink); border-color: var(--pz-brand-ink); color: var(--pz-surface); }

/* --- Wnioski --- */
.pzv-fv-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--pz-space-4); margin-bottom: var(--pz-space-4); }
.pzv-mx { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 14px; }
.pzv-mx th { font-size: var(--pz-text-xs); font-weight: var(--pz-weight-semibold); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pz-text-muted); padding: 4px 8px; text-align: center; }
.pzv-mx th.pzv-mx-l { text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px;
  color: var(--pz-text); font-weight: var(--pz-weight-medium); }
.pzv-mx th.pzv-mx-l .badge { margin-left: 6px; }
.pzv-mx td { text-align: center; padding: 0; width: 86px; height: 40px; border-radius: var(--pz-radius-md); }
.pzv-mx-0 { background: var(--pz-surface-2); color: var(--pz-text-subtle); }
.pzv-mx-un { border: 1px dashed var(--pz-chart-unmeasured); color: var(--pz-text-muted); font-size: 12px; }
.btn.pzv-mx-cell { width: 100%; height: 40px; min-height: 0; padding: 0; justify-content: center; border: 0;
  font-weight: var(--pz-weight-semibold); font-variant-numeric: tabular-nums; color: var(--pz-text); }
.btn.pzv-mx-1 { background: var(--pz-chart-heat-1); }
.btn.pzv-mx-2 { background: var(--pz-chart-heat-2); }
.btn.pzv-mx-3 { background: var(--pz-chart-heat-4); color: var(--pz-surface); }
.btn.pzv-mx-prop { background: transparent; border: 1px dashed var(--pz-brand-accent); color: var(--pz-warning-text); }
.btn.pzv-mx-cell.active { outline: 2px solid var(--pz-brand-ink); outline-offset: 1px; }
.pzv-mx-foot { margin-top: var(--pz-space-2); }
.pzv-lc-row { display: flex; gap: var(--pz-space-2); align-items: stretch; }
.btn.pzv-lc { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; height: auto;
  padding: 12px 14px; border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg);
  background: var(--pz-surface); text-align: left; white-space: normal; }
.btn.pzv-lc.active { border: 2px solid var(--pz-brand-ink); }
.pzv-fv-arrow { align-self: center; color: var(--pz-text-subtle); }
.pzv-lc-foot { display: flex; gap: var(--pz-space-3); align-items: center; flex-wrap: wrap; margin-top: var(--pz-space-3); }
.pzv-fv-box { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); overflow: hidden; }
.pzv-fv-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--pz-space-3);
  padding: 12px 16px; flex-wrap: wrap; }
.pzv-fv-group { display: flex; align-items: center; gap: 0; }
.pzv-fv-group .pzv-cell-m { margin-right: var(--pz-space-2); }
.pzv-fv-grp-h { background: var(--pz-surface-2); font-size: var(--pz-text-xs); font-weight: var(--pz-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pz-text-muted); padding: 6px 16px; }
.pzv-fv-title .badge { margin-right: 4px; }
.pzv-fv-act { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.pzv-fv-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--pz-space-5); }
.pzv-fv-detail > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.pzv-fv-fix { font-size: 14px; }
.pzv-fv-chain { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pzv-fv-foot { padding: 10px 16px; border-top: 1px solid var(--pz-border); }
.pzv-fv-cards { display: none; flex-direction: column; gap: var(--pz-space-3); padding: 0 12px 12px; }
.pzv-fv-card { border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; background: var(--pz-surface); }
.pzv-fv-card.pzv-fv-prop { border-style: dashed; border-color: var(--pz-brand-accent); }
.pzv-fv-card-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pzv-fv-card .pzv-fv-act { justify-content: flex-start; }
@media (max-width: 760px) {
  .pzv-fv-top { grid-template-columns: minmax(0, 1fr); }
  .pzv-fv-tables { display: none; }
  .pzv-fv-cards { display: flex; }
  .pzv-lc-row { flex-wrap: wrap; }
  .pzv-fv-arrow { display: none; }
  .pzv-fv-detail { grid-template-columns: minmax(0, 1fr); }
  .pzv-fv-card .btn { min-height: 44px; }
  .pzv-mx { table-layout: fixed; border-spacing: 3px; }
  .pzv-mx td { width: auto; }
  .pzv-mx thead th:first-child, .pzv-mx th.pzv-mx-l { width: 38%; font-size: 13px; overflow-wrap: anywhere; }
  .pzv-mx thead th { padding: 4px 0; font-size: 10px; letter-spacing: 0; }
  .btn.pzv-lc { flex: 1 1 100%; }
  .pzv-fv-bar .stream-filter { flex-wrap: wrap; }
}
/* Nagłówek kolumn tylko nad pierwszą grupą — kolumny mają te same szerokości. */
.pzv-fv-grp + .pzv-fv-grp .rt-thead { display: none; }

/* --- Raporty --- */
.pzv-rp-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: var(--pz-space-4); align-items: start; }
.pzv-rp-list { display: flex; flex-direction: column; gap: 10px; }
.pzv-rp-item { padding: 12px 14px; border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg);
  background: var(--pz-surface); display: flex; flex-direction: column; gap: 6px; cursor: pointer; margin: 0; }
.pzv-rp-item.active { border: 2px solid var(--pz-brand-ink); padding: 11px 13px; }
.pzv-rp-un { border-style: dashed; border-color: var(--pz-chart-unmeasured); background: transparent; cursor: default; }
.pzv-rp-un .pzv-cell-t { color: var(--pz-text-muted); }
.pzv-rp-un .btn { align-self: flex-start; }
.pzv-rp-top { display: flex; justify-content: space-between; align-items: center; gap: var(--pz-space-2); }
.pzv-rp-score { font-weight: var(--pz-weight-bold); }
.pzv-rp-main { display: flex; flex-direction: column; gap: var(--pz-space-4); min-width: 0; }
.dossier.pzv-report { display: flex; flex-direction: column; gap: var(--pz-space-4);
  background: transparent; border: 0; border-radius: 0; overflow: visible; }
.dossier.pzv-report .do-head { display: grid; gap: var(--pz-space-6); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg); padding: 18px 20px; }
.pzv-rp-extras { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); overflow: hidden; }
.pzv-rp-extras:empty { display: none; }
.pzv-rp-older { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pzv-rp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 340px); gap: var(--pz-space-6); align-items: start; }
.pzv-rp-head-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pzv-rp-score-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pzv-rp-big { font-size: 40px; font-weight: var(--pz-weight-bold); line-height: 1.1; letter-spacing: -0.02em; }
.pzv-rp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pzv-rp-cov { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pzv-ring { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pzv-ring-bg { fill: none; stroke: var(--pz-surface-2); stroke-width: 12; }
.pzv-ring-arc { fill: none; stroke-width: 12; }
.pzv-ring-m { stroke: var(--pz-brand-ink); }
.pzv-ring-s { stroke: var(--pz-chart-unmeasured); stroke-width: 6; stroke-dasharray: none; opacity: 0.55; }
.pzv-ring-f { stroke: var(--pz-danger); }
.pzv-ring-n { font-size: 18px; font-weight: var(--pz-weight-bold); fill: var(--pz-text); }
.pzv-ring-t { font-size: 11px; fill: var(--pz-text-muted); }
.pzv-ring-legend { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--pz-text-muted); }
.pzv-rp-missing { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pzv-rp-miss { padding: 9px 0; border-bottom: 1px solid var(--pz-border); }
.pzv-rp-miss:last-child { border-bottom: 0; }
.pzv-rp-miss-top, .pzv-rp-miss-why { display: flex; justify-content: space-between; align-items: center; gap: var(--pz-space-2); }
.pzv-rp-miss-why { margin-top: 2px; align-items: flex-start; }
.pzv-rp-miss-why .btn { flex: none; }
.pzv-rp-part { display: grid; grid-template-columns: 230px minmax(0, 1fr) 260px; gap: 14px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--pz-border); }
.pzv-rp-part-n { font-size: 14px; font-weight: var(--pz-weight-medium); }
.pzv-cells { display: flex; gap: 3px; flex-wrap: wrap; }
.pzv-cell { display: inline-block; width: 30px; height: 14px; border-radius: 2px; }
.pzv-cov-legend .pzv-cell { width: 14px; height: 10px; }
.pzv-rp-parts .pzv-cov-legend { margin-top: var(--pz-space-3); }
.pzv-cell-ok { background: var(--pz-brand-ink); }
.pzv-cell-warn { background: var(--pz-warning); }
.pzv-cell-crit { background: var(--pz-danger); }
.pzv-cell-skipped { background-image: repeating-linear-gradient(135deg, var(--pz-chart-hatch) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--pz-chart-unmeasured); }
.pzv-cell-errored { background: transparent; box-shadow: inset 0 0 0 2px var(--pz-danger); }
.pzv-rp-issues { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); overflow: hidden; }
.pzv-rp-issues-h { display: flex; justify-content: space-between; align-items: center; gap: var(--pz-space-3); padding: 14px 16px; }
.pzv-rp-issues-h .rep-sec-title { margin: 0; }
.pzv-rp-issues .pzv-empty { margin: 0 16px 16px; }
.pzv-rp-issues .pick-bar { margin: 0; border-radius: 0; }
.pzv-rp-issue .badge { margin-right: 4px; }
.pzv-rp-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pz-space-5); }
.pzv-rp-detail > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 900px) {
  .pzv-rp-head, .dossier.pzv-report .do-head { grid-template-columns: minmax(0, 1fr); }
  .pzv-rp-cov { align-items: flex-start; }
  .pzv-ring { flex-direction: row; }
  .pzv-rp-part { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pzv-rp-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pzv-rp-grid { grid-template-columns: minmax(0, 1fr); }
  .pzv-rp-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .pzv-rp-item { flex: 0 0 200px; }
  .pzv-rp-issues .btn { min-height: 44px; }
  /* Tabela punktów jako lista kart — ten sam DOM (zaznaczenia do planu żyją
     w wierszach), inny układ: komórki jedna pod drugą, bez nagłówka kolumn. */
  .pzv-rp-table .rt-thead { display: none !important; }
  .pzv-rp-table .rt-table { overflow: visible; }
  .pzv-rp-table .rt-tr { display: flex; flex-wrap: wrap; padding: 10px 0; align-items: center; }
  .pzv-rp-table .rt-td { flex: 1 1 100% !important; width: auto !important; min-width: 0 !important;
    max-width: none !important; padding: 2px 14px !important; border: 0; text-align: left;
    overflow: visible !important; white-space: normal !important; }
  .pzv-rp-table .rt-td-inner { white-space: normal !important; overflow: visible !important; padding: 0 !important; }
  .pzv-rp-table .rt-td:first-child { flex: 0 0 44px !important; }
  .pzv-rp-table .rt-td:nth-child(2) { flex: 1 1 calc(100% - 60px) !important; }
  .pzv-rp-table .pzv-fv-act { justify-content: flex-start; }
}

/* --- Wyniki --- */
/* Trend crawla bez historii: karta zwinięta do zera, ale wykres zachowuje własny
   rozmiar (wzorzec ui_ai_tech) — `display: none` dałby kontener 0×0 dla ECharts. */
.pzv-outcomes .oc-crawl-card:not(:has(svg)) { height: 0; min-height: 0; padding: 0; margin: 0; border: 0;
  overflow: hidden; visibility: hidden; }
.pzv-outcomes .pzv-head .pzv-fresh { flex-basis: 100%; order: 5; }
.pzv-outcomes .kpi-trend, .pzv-outcomes .kpi-short { display: block; }
.pzv-oc-events { margin-top: var(--pz-space-4); border-top: 1px solid var(--pz-border); padding-top: var(--pz-space-3); }
.pzv-oc-events .card { border: 0; padding: 0; box-shadow: none; background: transparent; }
.pzv-oc-events .card + .card, .pzv-oc-events > div + div .card { margin-top: var(--pz-space-4); }
.pzv-oc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pz-space-4); margin: var(--pz-space-4) 0; align-items: start; }
.pzv-oc-mv-head { display: flex; justify-content: space-between; align-items: center; gap: var(--pz-space-3); flex-wrap: wrap; }
.pzv-mv-churns { display: flex; flex-direction: column; gap: 6px; margin-top: var(--pz-space-3); }
.pzv-mv-churn { display: flex; gap: var(--pz-space-2); align-items: center; font-size: 13px; cursor: pointer; }
.pzv-mv-q { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pzv-mv-foot, .pzv-bk-foot { margin-top: var(--pz-space-3); padding-top: var(--pz-space-2); border-top: 1px solid var(--pz-border); }
.pzv-bk-row { display: grid; grid-template-columns: 64px 80px minmax(0, 1fr) 130px; gap: var(--pz-space-3);
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--pz-border); }
.pzv-bk-head { border-bottom: 0; padding: 4px 0; }
.pzv-bk-val { text-align: right; font-size: 13px; }
.pzv-bullet { position: relative; height: 12px; background: var(--pz-surface-2); border-radius: 2px; }
.pzv-bullet-is { position: absolute; left: 0; top: 3px; height: 6px; background: var(--pz-brand-ink); border-radius: 1px; }
.pzv-bullet-ref { position: absolute; top: -3px; width: 3px; height: 18px; background: var(--pz-text); }
.pzv-oc-sort { display: flex; align-items: center; gap: 0; padding: 0 0 var(--pz-space-3); flex-wrap: wrap; }
.pzv-oc-sort .pzv-cell-m { margin-right: var(--pz-space-2); }
.pzv-oc-foot { margin-top: var(--pz-space-3); }
.pzv-kw-q .oc-pill, .pzv-kw-q .badge { margin-left: 6px; }
.pzv-kw-pos { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.pzv-kw-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--pz-space-5); }
.pzv-kw-detail > div { display: flex; flex-direction: column; gap: var(--pz-space-2); align-items: flex-start; min-width: 0; }
.pzv-kw-detail > div > div { width: 100%; }
.pzv-kw-finding { font-size: 14px; }
.pzv-mc { width: 100%; }
.pzv-mc-bar { fill: var(--pz-chart-heat-2); }
.pzv-mc-line { fill: none; stroke: var(--pz-chart-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pzv-mc-axis { stroke: var(--pz-chart-grid); stroke-width: 1; }
.pzv-mc-k-bar { background: var(--pz-chart-heat-2); }
.pzv-mc-k-line { background: var(--pz-chart-line); }
.pzv-grp-detail { display: flex; flex-direction: column; gap: var(--pz-space-2); }
.pzv-grp-detail tr[data-oc-kw] { cursor: pointer; }
@media (max-width: 900px) {
  .pzv-oc-two { grid-template-columns: minmax(0, 1fr); }
  .pzv-kw-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pzv-bk-row { grid-template-columns: 48px 64px minmax(0, 1fr) 96px; gap: var(--pz-space-2); }
  /* Lista wydarzeń pod wykresem: data i akcja w pierwszej linii, treść pod nimi na całą szerokość. */
  .pzv-oc-events .oc-row { display: flex; flex-wrap: wrap; gap: 4px var(--pz-space-3); }
  .pzv-oc-events .oc-row .oc-when { flex: 1 1 auto; }
  .pzv-oc-events .oc-row .oc-body { flex: 1 1 100%; order: 3; min-width: 0; }
  /* Tabela fraz jako lista kart — ten sam DOM, komórki jedna pod drugą. */
  .pzv-oc-table .rt-thead { display: none !important; }
  .pzv-oc-table .rt-tr { display: flex; flex-wrap: wrap; padding: 10px 0; align-items: center; }
  .pzv-oc-table .rt-td { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
    max-width: none !important; padding: 2px 10px !important; border: 0; overflow: visible !important; }
  .pzv-oc-table .rt-table, .pzv-oc-table .rt-tbody, .pzv-oc-table .rt-tr-group, .pzv-oc-table .rt-tr,
  .pzv-rp-table .rt-tbody, .pzv-rp-table .rt-tr-group, .pzv-rp-table .rt-tr { min-width: 0 !important; }
  .pzv-oc-table .rt-table { overflow: visible; }
  .pzv-oc-table .rt-td { max-width: 100% !important; overflow-wrap: anywhere; }
  .pzv-oc-table .rt-td:first-child { flex: 0 0 40px !important; }
  .pzv-oc-table .rt-td:nth-child(2) { flex: 1 1 calc(100% - 60px) !important; }
  .pzv-oc-table .rt-td-inner { white-space: normal !important; overflow: visible !important; padding: 0 !important; }
  .pzv-oc-table .pzv-bar { display: none; }
}
/* === koniec 018 paczka 2 === */

/* === 018 paczka 3: Plany, Cele, Ustawienia, wejście — WYŁĄCZNIE tokeny; ochra = czeka na Ciebie === */
.badge.pzv-b-sm { font-size: 11px; line-height: 16px; padding: 0 6px; }
.pzv-link { color: var(--pz-info-text); text-decoration: none; }
.pzv-link:hover { text-decoration: underline; }
.pzv-cnt { font-size: 11px; font-weight: var(--pz-weight-semibold); background: var(--pz-brand-accent-soft); color: var(--pz-warning-text); border-radius: 9999px; padding: 0 7px; line-height: 18px; }
.pzv-lg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pz-text-xs); color: var(--pz-text-muted); margin-right: 14px; }
.pzv-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* Plany */
.pzv-plan { margin-bottom: var(--pz-space-6); }
.pzv-plan-head { margin-bottom: var(--pz-space-4); }
.pzv-plan-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pz-space-6); }
.pzv-plan-title { display: flex; align-items: center; gap: var(--pz-space-2); font-size: 20px; font-weight: var(--pz-weight-semibold); margin-bottom: 4px; }
.pzv-plan-fx { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.pzv-stages { display: flex; height: 10px; border-radius: 9999px; overflow: hidden; gap: 2px; margin-top: 14px; }
.pzv-stages i { display: block; height: 100%; }
.pzv-stages-legend { margin-top: var(--pz-space-2); }
.pzv-st-prep { background: var(--pz-info); }
.pzv-st-you { background: var(--pz-brand-accent); }
.pzv-st-wait { background: var(--pz-chart-heat-3); }
.pzv-st-ok { background: var(--pz-success); }
.pzv-st-ana { background: var(--pz-border-strong); }
.pzv-st-closed { background: var(--pz-chart-unmeasured); }
.pzv-stage-chips { display: none; gap: 6px; margin-bottom: var(--pz-space-3); overflow-x: auto; }
.pzv-stage-chips .btn.pzv-chip { border-radius: 9999px; min-height: 36px; padding: 4px 12px; font-size: var(--pz-text-sm); white-space: nowrap; background: var(--pz-surface); border: 1px solid var(--pz-border); color: var(--pz-text); }
.pzv-stage-chips .btn.pzv-chip.is-on { background: var(--pz-brand-ink); border-color: var(--pz-brand-ink); color: var(--pz-surface); }
.pzv-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pz-space-4); align-items: flex-start; }
.pzv-col { background: var(--pz-surface-2); border-radius: var(--pz-radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pzv-col.pzv-col-you { background: var(--pz-brand-accent-soft); }
.pzv-col.pzv-col-empty { background: transparent; border: 1px dashed var(--pz-border-strong); }
.pzv-col-h { display: flex; justify-content: space-between; align-items: center; font-size: var(--pz-text-sm); font-weight: var(--pz-weight-semibold); }
.pzv-col-you .pzv-col-h { color: var(--pz-warning-text); }
.pzv-task { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; min-width: 0; }
.pzv-task.pzv-task-you { border-color: var(--pz-brand-accent); }
.pzv-task.pzv-task-bad { border-color: var(--pz-danger); }
.pzv-task-t { font-weight: var(--pz-weight-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.pzv-task-meta, .pzv-task-src, .pzv-task-fx { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pzv-axes { border-top: 1px solid var(--pz-border); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pzv-ax { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--pz-text-xs); }
.pzv-ax-k { font-size: 11px; font-weight: var(--pz-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pz-text-muted); line-height: 20px; }
.pzv-ax-v { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pzv-ax-v .badge { white-space: normal; text-align: left; }
.pzv-task-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pzv-task-det { border-top: 1px solid var(--pz-border); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.pzv-det-sec { font-size: var(--pz-text-sm); display: flex; flex-direction: column; gap: 2px; }
.pzv-strip { margin-top: var(--pz-space-4); }
.pzv-strip-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--pz-space-3); margin-top: var(--pz-space-2); }
@media (max-width: 1100px) { .pzv-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pzv-plan-top { flex-direction: column; gap: var(--pz-space-2); }
  .pzv-plan-fx { align-items: flex-start; text-align: left; }
  .pzv-stage-chips { display: flex; }
  .pzv-board { grid-template-columns: minmax(0, 1fr); }
  /* Telefon: jedna kolumna naraz — etap wybiera chip (stan w adresie, klucz `ps`). */
  .pzv-board[data-stage="preparing"] .pzv-col:not([data-stage="preparing"]),
  .pzv-board[data-stage="ready"] .pzv-col:not([data-stage="ready"]),
  .pzv-board[data-stage="awaiting_check"] .pzv-col:not([data-stage="awaiting_check"]),
  .pzv-board[data-stage="checked"] .pzv-col:not([data-stage="checked"]) { display: none; }
  .pzv-task-act .btn { min-height: 44px; }
}
/* Cele */
.pzv-gl-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--pz-space-4); align-items: flex-start; }
.pzv-gl-list { display: flex; flex-direction: column; gap: 10px; }
.btn.pzv-goal { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; padding: 14px 16px; border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); background: var(--pz-surface); color: var(--pz-text); white-space: normal; height: auto; font-weight: var(--pz-weight-regular); }
.btn.pzv-goal.is-on { border: 2px solid var(--pz-brand-ink); padding: 13px 15px; }
.btn.pzv-goal.pzv-goal-un { border-style: dashed; border-color: var(--pz-chart-unmeasured); background: transparent; }
.pzv-goal-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pz-space-2); }
.pzv-goal-t { font-weight: var(--pz-weight-semibold); overflow-wrap: anywhere; }
.pzv-goal-foot { display: flex; justify-content: space-between; gap: var(--pz-space-2); }
.pzv-bullet-need { position: absolute; top: 0; height: 12px; border-right: 2px dashed var(--pz-text-muted); }
.pzv-gl-detail { display: flex; flex-direction: column; gap: var(--pz-space-4); min-width: 0; }
.pzv-gl-chart-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pz-space-6); }
.pzv-gl-title { font-size: 20px; font-weight: var(--pz-weight-semibold); }
.pzv-gl-nums { display: flex; gap: var(--pz-space-6); flex: none; white-space: nowrap; }
.pzv-gl-num { display: flex; flex-direction: column; }
.pzv-gl-val { font-size: 24px; font-weight: var(--pz-weight-bold); line-height: 1.2; }
.pzv-gl-val.is-muted { color: var(--pz-text-muted); }
.pzv-gl-foot { border-top: 1px solid var(--pz-border); margin-top: var(--pz-space-3); padding-top: var(--pz-space-2); display: flex; flex-direction: column; gap: 4px; }
.pzv-lg-ink { background: var(--pz-brand-ink); }
.pzv-lg-pace { background: var(--pz-chart-compare); }
.pzv-lg-mark { background: var(--pz-info); }
.pzv-lg-band { background: var(--pz-chart-heat-2); }
.pzv-gl-nochart { border: 1px dashed var(--pz-border-strong); border-radius: var(--pz-radius-md); padding: var(--pz-space-5); margin-top: var(--pz-space-3); }
.pzv-gl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pz-space-4); align-items: flex-start; }
.pzv-gl-line { display: flex; gap: var(--pz-space-3); align-items: flex-start; margin-top: 10px; font-size: 14px; }
.pzv-gl-line .badge { flex: none; }
.pzv-gl-act { margin-top: var(--pz-space-3); }
.pzv-gl-why { margin-top: var(--pz-space-3); }
.pzv-gl-work-h { display: flex; justify-content: space-between; align-items: center; gap: var(--pz-space-2); }
.pzv-gl-task { display: flex; gap: var(--pz-space-2); align-items: flex-start; justify-content: space-between; margin-top: 10px; }
.pzv-gl-task > div { flex: 1; min-width: 0; }
.pzv-gl-task-t { font-size: 14px; font-weight: var(--pz-weight-medium); }
.pzv-gl-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--pz-info); color: var(--pz-surface); font-size: 11px; font-weight: var(--pz-weight-bold); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pzv-gl-dot.pzv-gl-dot-m { background: var(--pz-surface); color: var(--pz-text-muted); border: 1px solid var(--pz-border-strong); }
@media (max-width: 900px) {
  .pzv-gl-grid, .pzv-gl-two { grid-template-columns: minmax(0, 1fr); }
  .pzv-gl-chart-h { flex-direction: column; gap: var(--pz-space-2); }
  .pzv-gl-nums { gap: var(--pz-space-4); white-space: normal; flex-wrap: wrap; }
}
/* Ustawienia */
.pzv-set-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--pz-space-6); align-items: flex-start; }
.pzv-set-nav { position: sticky; top: var(--pz-space-4); display: flex; flex-direction: column; gap: 2px; }
.pzv-set-nav .pzv-over { padding: 12px 12px 6px; }
.pzv-set-nav .pzv-over:first-child { padding-top: 0; }
.btn.pzv-set-nav-i { justify-content: flex-start; text-align: left; border: 1px solid transparent; background: transparent; color: var(--pz-text-muted); font-weight: var(--pz-weight-regular); padding: 8px 12px; white-space: normal; height: auto; }
.btn.pzv-set-nav-i:hover, .btn.pzv-set-nav-i:focus-visible { background: var(--pz-surface); border-color: var(--pz-border); color: var(--pz-text); }
.pzv-set-body { display: flex; flex-direction: column; gap: var(--pz-space-6); min-width: 0; }
.pzv-set-sec { display: flex; flex-direction: column; gap: var(--pz-space-4); scroll-margin-top: var(--pz-space-4); }
.pzv-set-sec > .card, .pzv-set-sec > div > .card { margin: 0; }
.pzv-set-h { font-size: var(--pz-text-md); font-weight: var(--pz-weight-semibold); margin: 0; }
.pzv-pool-pct { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.pzv-pool-num { font-size: 40px; font-weight: var(--pz-weight-bold); letter-spacing: -0.02em; line-height: 1.1; }
.pu-meter.pzv-pool-meter { position: relative; overflow: visible; height: 14px; border-radius: 4px; }
.pu-meter.pzv-pool-meter > .fill { border-radius: 4px; }
.pzv-pool-th { position: absolute; left: 80%; top: -4px; height: 22px; border-left: 1px dashed var(--pz-text-muted); }
.pzv-settings .plan-dims { display: flex; flex-direction: column; gap: 0; }
.pzv-settings .pd-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 190px; gap: var(--pz-space-4); align-items: center; padding: 9px 0; border-bottom: 1px solid var(--pz-border); }
.pzv-settings .pd-row:last-child { border-bottom: 0; }
.pzv-settings .pd-row dt { font-size: 14px; font-weight: var(--pz-weight-medium); color: var(--pz-text); }
.pzv-settings .pd-row dd { text-align: right; }
.pzv-settings .pd-row.pd-over .pzv-bullet-is { background: var(--pz-danger); }
.pzv-settings .pd-row.pd-over dd { color: var(--pz-danger-text); }
.pzv-auto-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pz-space-6); }
.pzv-auto .au-acc { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 320px; }
.pzv-auto-tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: var(--pz-space-3); }
.pzv-auto-tbl th { font-size: 11px; font-weight: var(--pz-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pz-text-muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--pz-border); }
.pzv-auto-tbl td { padding: 12px 10px; border-bottom: 1px solid var(--pz-border); vertical-align: top; }
.pzv-auto-tbl tr.au-row { display: table-row; }
.pzv-auto-tbl .au-kind, .pzv-auto .au-kind { font-weight: var(--pz-weight-semibold); }
.pzv-auto-tbl td.au-kind { width: 210px; }
.pzv-auto-tbl .au-state { text-align: right; white-space: nowrap; }
.pzv-auto-tbl td.au-state > * { margin-left: 8px; vertical-align: middle; }
.pzv-auto .au-budget { display: flex; justify-content: space-between; align-items: center; gap: var(--pz-space-4); margin-top: var(--pz-space-4); flex-wrap: wrap; }
.pzv-auto .au-budget-in { display: flex; gap: var(--pz-space-2); align-items: center; }
.pzv-auto .au-budget-in .form-group { margin: 0; }
.pzv-auto .au-cost { margin-top: var(--pz-space-3); }
@media (max-width: 900px) {
  .pzv-set-grid { grid-template-columns: minmax(0, 1fr); gap: var(--pz-space-4); }
  .pzv-set-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; }
  .pzv-set-nav .pzv-over { display: none; }
  .btn.pzv-set-nav-i { border: 1px solid var(--pz-border); border-radius: 9999px; background: var(--pz-surface); color: var(--pz-text); white-space: nowrap; min-height: 36px; padding: 4px 12px; }
  .pzv-settings .pd-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pzv-settings .pd-row .pd-bar { grid-column: 1 / -1; order: 3; }
  .pzv-auto-h { flex-direction: column; gap: var(--pz-space-2); }
  .pzv-auto .au-acc { text-align: left; align-items: flex-start; }
  /* Macierz jako karty: nagłówki kolumn znikają, komórki stają jedna pod drugą. */
  .pzv-auto-tbl thead { display: none; }
  .pzv-auto-tbl, .pzv-auto-tbl tbody { display: block; }
  .pzv-auto-tbl tr.au-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--pz-border); }
  .pzv-auto-tbl td { padding: 0; border: 0; width: auto !important; }
  .pzv-auto-tbl .au-state { text-align: left; white-space: normal; }
  .pzv-auto-tbl td.au-state > * { margin-left: 0; margin-right: 8px; }
  .pzv-auto-tbl .au-state .btn { min-height: 44px; }
}
/* Wejście */
.auth-wrap.pzv-auth { display: grid; grid-template-columns: 340px minmax(0, 420px); gap: var(--pz-space-10, 48px); align-items: center; justify-content: center; }
.pzv-auth-h { font-size: 20px; font-weight: var(--pz-weight-semibold); margin: 0; }
.pzv-auth-what { display: flex; flex-direction: column; gap: var(--pz-space-3); }
.pzv-auth-lead { font-size: 24px; font-weight: var(--pz-weight-semibold); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: var(--pz-space-2); }
.pzv-auth-step { display: flex; gap: var(--pz-space-3); align-items: flex-start; }
.pzv-auth-step-t { font-weight: var(--pz-weight-semibold); font-size: 14px; }
.pzv-vsteps { display: flex; flex-direction: column; gap: 0; text-align: left; background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); padding: 20px; }
.setup-step.pzv-vstep { display: flex; gap: 14px; padding: 0 0 20px; position: relative; align-items: flex-start; border: 0; background: transparent; }
.setup-step.pzv-vstep:last-child { padding-bottom: 0; }
.pzv-vstep::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: var(--pz-border-strong); }
.pzv-vstep:last-child::before { display: none; }
.pzv-vstep-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pz-border-strong); background: var(--pz-surface); flex: none; margin-top: 2px; }
.pzv-vstep.done .pzv-vstep-dot { background: var(--pz-brand-ink); border-color: var(--pz-brand-ink); }
.pzv-vstep.done::before { background: var(--pz-brand-ink); }
.pzv-vstep.current .pzv-vstep-dot { border-color: var(--pz-brand-ink); box-shadow: 0 0 0 4px var(--pz-chart-heat-1); }
.pzv-vstep.is-bad .pzv-vstep-dot { border-color: var(--pz-danger); background: var(--pz-danger-soft); box-shadow: none; }
.pzv-vstep-body { flex: 1; min-width: 0; }
.pzv-vstep-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pz-space-2); flex-wrap: wrap; }
.pzv-vstep-t { font-weight: var(--pz-weight-semibold); }
.pzv-vstep.todo .pzv-vstep-t { color: var(--pz-text-muted); }
@media (max-width: 800px) {
  .auth-wrap.pzv-auth { grid-template-columns: minmax(0, 1fr); gap: var(--pz-space-5); padding: var(--pz-space-5) var(--pz-space-4); align-content: center; }
  .pzv-auth .auth-card { width: auto; max-width: 380px; justify-self: center; box-sizing: border-box; }
  .pzv-auth .auth-card, .pzv-auth .pzv-auth-what { min-width: 0; width: 100%; }
  .pzv-auth-lead { font-size: 17px; }
}
/* === koniec 018 paczka 3 === */

/* ── Kreator zakładki AI i ekran Wynik (requirements/019) ─────────────────── */
.aiw-steps { display: flex; gap: 0; background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); padding: 6px; margin-bottom: var(--pz-space-5); }
.aiw-step { flex: 1; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--pz-radius-md); color: var(--pz-text-muted); min-width: 0; }
.aiw-step-n { width: 26px; height: 26px; border-radius: var(--pz-radius-full); border: 2px solid var(--pz-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; background: var(--pz-surface); }
.aiw-step-b { min-width: 0; display: flex; flex-direction: column; }
.aiw-step-t { font-size: 14px; font-weight: 600; line-height: 1.25; }
.aiw-step-s { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aiw-step.done { color: var(--pz-text); }
.aiw-step.done .aiw-step-n { background: var(--pz-brand-ink); border-color: var(--pz-brand-ink); color: var(--pz-surface); }
.aiw-step.current { background: var(--pz-surface-2); color: var(--pz-text); }
.aiw-step.current .aiw-step-n { border-color: var(--pz-brand-ink); }
.aiw-card { padding: var(--pz-space-6); }
.aiw-box { padding: var(--pz-space-5); margin-bottom: var(--pz-space-4); }
.aiw-box .rep-sec-head { padding: 0 0 8px; }
.aiw-card > .ai-card { box-shadow: none; }
.aiw-title { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.aiw-lead { font-size: 15px; color: var(--pz-text-muted); margin: 6px 0 18px; max-width: 76ch; }
.aiw-acts { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pz-border); }
.aiw-acts > :first-child { margin-right: auto; }
.aiw-count { font-size: 14px; margin-bottom: 12px; }
.aiw-list { display: flex; flex-direction: column; gap: 8px; }
.aiw-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 220px 44px; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md); background: var(--pz-surface); }
.aiw-row.on { border-color: var(--pz-brand-ink); }
.aiw-pick input { width: 20px; height: 20px; }
.aiw-name { font-size: 16px; font-weight: 600; border: 0; border-bottom: 1px dashed var(--pz-border-strong); background: transparent; padding: 0 0 2px; width: min(100%, 420px); color: var(--pz-text); }
.aiw-phrases { font-size: 13px; color: var(--pz-text-muted); margin-top: 4px; }
.aiw-views { font-size: 13px; color: var(--pz-text-muted); text-align: right; }
.aiw-menu { position: relative; }
.aiw-menu-body { position: absolute; right: 0; top: 32px; z-index: 5; background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md); box-shadow: var(--pz-shadow-md); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.aiw-own-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.aiw-note { font-size: 14px; color: var(--pz-text-muted); }
.aiw-busy, .aiw-progress { display: flex; gap: 10px; align-items: center; }
.aiw-spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--pz-border-strong); border-top-color: var(--pz-brand-ink); flex: none; }
.aiw-flow { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.2fr) 28px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.aiw-arr { display: flex; align-items: center; justify-content: center; color: var(--pz-text-subtle); font-size: 22px; }
.aiw-fb { background: var(--pz-surface-2); border-radius: var(--pz-radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.aiw-fh, .aiw-over { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pz-text-muted); }
.aiw-count .aiw-over { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--pz-warning-text); }
.aiw-bub { background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 13px; line-height: 1.4; }
.aiw-get { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.aiw-get i { width: 20px; height: 20px; border-radius: 50%; background: var(--pz-brand-ink); color: var(--pz-surface); font-style: normal; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.aiw-et { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md); background: var(--pz-surface); }
.aiw-et.on { border-color: var(--pz-brand-ink); box-shadow: inset 0 0 0 1px var(--pz-brand-ink); }
.aiw-et.lock { border-style: dashed; background: transparent; }
.aiw-et-b { flex: 1; min-width: 0; }
.aiw-et-n { font-weight: 600; font-size: 15px; line-height: 1.25; }
.aiw-et-d { font-size: 12px; color: var(--pz-text-muted); line-height: 1.35; }
.aiw-et-v { font-size: 24px; font-weight: 700; }
.aiw-eng { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--pz-surface); font-weight: 700; font-size: 15px; flex: none; }
.aiw-eng.sm { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
.aiw-eng.e1 { background: var(--pz-brand-ink); } .aiw-eng.e2 { background: var(--pz-chart-series-2); }
.aiw-eng.e3 { background: var(--pz-chart-series-3); } .aiw-eng.e4 { background: var(--pz-chart-series-4); }
.aiw-eng.e5 { background: var(--pz-chart-compare); }
.aiw-eng.off { background: var(--pz-surface-2); color: var(--pz-text-muted); border: 1px solid var(--pz-border-strong); }
.aiw-quote { background: var(--pz-surface-2); border-radius: var(--pz-radius-md); padding: 14px 16px; font-size: 15px; margin-top: 16px; display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.aiw-sched { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.aiw-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.aiw-hero { display: grid; grid-template-columns: 330px minmax(0, 1fr); padding: 0; overflow: hidden; }
.aiw-hero-l { padding: 24px 26px; border-right: 1px solid var(--pz-border); display: flex; flex-direction: column; gap: 20px; }
.aiw-hero-r { padding: 20px 24px; min-width: 0; }
.aiw-big { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.aiw-big small { font-size: 28px; font-weight: 600; color: var(--pz-text-muted); }
.aiw-big-2 { font-size: 44px; }
.aiw-kn { font-size: 14px; margin-top: 6px; }
.aiw-delta-row { margin-top: 8px; }
.aiw-delta { font-size: 13px; font-weight: 600; }
.aiw-delta.up { color: var(--pz-success-text); } .aiw-delta.down { color: var(--pz-danger-text); } .aiw-delta.flat { color: var(--pz-text-muted); }
.aiw-dots { display: flex; gap: 6px; margin: 8px 0 6px; flex-wrap: wrap; }
.aiw-dots i { width: 34px; height: 10px; border-radius: var(--pz-radius-full); background: var(--pz-surface-2); border: 1px solid var(--pz-border-strong); display: block; }
.aiw-dots i.on { background: var(--pz-brand-ink); border-color: var(--pz-brand-ink); }
.aiw-single { border: 1px dashed var(--pz-border-strong); border-radius: var(--pz-radius-md); padding: 28px; text-align: center; margin: 12px 0; }
.aiw-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: var(--pz-space-4) 0; }
.aiw-topic { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, .9fr) 150px auto; gap: 18px; align-items: center; padding: 13px 4px; border-top: 1px solid var(--pz-border); font-size: 14px; }
.aiw-topic-n { font-weight: 600; font-size: 15px; }
.aiw-vbar { position: relative; height: 22px; background: var(--pz-surface-2); border-radius: 4px; overflow: hidden; }
.aiw-vbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pz-brand-ink); border-radius: 4px 0 0 4px; }
.aiw-vbar span { position: absolute; left: 8px; top: 0; line-height: 22px; font-size: 12px; font-weight: 600; }
.aiw-vbar span.in { color: var(--pz-surface); }
.aiw-vbar.none { background: transparent; border: 1px dashed var(--pz-chart-unmeasured); }
.aiw-vbar.none span { color: var(--pz-text-muted); font-weight: 400; }
.aiw-edots { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aiw-edots > span { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; }
.aiw-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: flex-start; }
.aiw-stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 10px 0 8px; }
.aiw-stack i, .aiw-legend i { display: block; height: 100%; }
.aiw-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.aiw-legend span { display: inline-flex; gap: 6px; align-items: center; }
.aiw-legend i { width: 10px; height: 10px; border-radius: 2px; }
.t-ours { background: var(--pz-brand-ink); } .t-1 { background: var(--pz-chart-heat-3); } .t-2 { background: var(--pz-chart-series-2); }
.t-3 { background: var(--pz-chart-series-3); } .t-x { background: var(--pz-chart-compare); }
.aiw-srcs { margin-top: 12px; border-top: 1px solid var(--pz-border); padding-top: 6px; }
.aiw-src { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 90px; gap: 14px; align-items: center; padding: 8px 0; font-size: 14px; }
.aiw-src > :last-child { text-align: right; }
.aiw-src-bar i { display: block; height: 14px; border-radius: 3px; background: var(--pz-chart-heat-3); }
.aiw-src.me { font-weight: 600; } .aiw-src.me .aiw-src-bar i { background: var(--pz-brand-ink); }
.aiw-miss { padding: 12px 0; border-top: 1px solid var(--pz-border); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.aiw-miss-q { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; font-size: 14px; }
.aiw-next { display: flex; justify-content: space-between; gap: 16px; align-items: center; border-color: var(--pz-brand-ink); }
.aiw-next-t { font-size: 17px; font-weight: 600; }
.aiw-opp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px) auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md); }
.aiq-group td { background: var(--pz-surface-2); }
.d-shortcut { margin-top: var(--pz-space-3); display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .aiw-steps { padding: 4px; }
  .aiw-step { flex: none; padding: 8px 6px; }
  .aiw-step.current { flex: 1; }
  .aiw-step:not(.current) .aiw-step-b { display: none; }
  .aiw-card { padding: var(--pz-space-4); }
  .aiw-row { grid-template-columns: 22px minmax(0, 1fr) 40px; }
  .aiw-row .aiw-views { grid-column: 2; text-align: left; }
  .aiw-flow, .aiw-hero, .aiw-two, .aiw-opp { grid-template-columns: minmax(0, 1fr); }
  .aiw-arr { display: none; }
  .aiw-hero-l { border-right: 0; border-bottom: 1px solid var(--pz-border); flex-direction: row; flex-wrap: wrap; }
  .aiw-big { font-size: 52px; } .aiw-big-2 { font-size: 32px; }
  .aiw-topic { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .aiw-src { grid-template-columns: minmax(0, 1fr) 70px; } .aiw-src-bar { grid-column: 1 / -1; grid-row: 2; }
  .aiw-next { flex-direction: column; align-items: stretch; }
  /* Mapa na osiach nie mieści się w 390 px — na telefonie tę samą informację niosą wiersze tematów. */
  .ai-tab [data-test=ai-quadrant] { display: none; }
}

/* === 021 SWOT: plansza 2×2, kafle obszarów, stan przed progiem === */
.sw-board { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pz-space-4); }
.sw-q { --sw-c: var(--pz-neutral); --sw-soft: var(--pz-neutral-soft); --sw-text: var(--pz-neutral-text);
  background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-top: 2px solid var(--sw-c); border-radius: var(--pz-radius-lg); padding: var(--pz-space-5);
  min-height: 248px; min-width: 0; display: flex; flex-direction: column; gap: var(--pz-space-4); }
.sw-q-strengths, .sw-chip-strengths { --sw-c: var(--pz-success); --sw-soft: var(--pz-success-soft); --sw-text: var(--pz-success-text); }
.sw-q-weaknesses, .sw-chip-weaknesses { --sw-c: var(--pz-warning); --sw-soft: var(--pz-warning-soft); --sw-text: var(--pz-warning-text); }
.sw-q-opportunities, .sw-chip-opportunities { --sw-c: var(--pz-info); --sw-soft: var(--pz-info-soft); --sw-text: var(--pz-info-text); }
.sw-q-threats, .sw-chip-threats { --sw-c: var(--pz-danger); --sw-soft: var(--pz-danger-soft); --sw-text: var(--pz-danger-text); }
.sw-q-head { display: flex; align-items: center; gap: var(--pz-space-3); }
.sw-q-ic { width: 44px; height: 44px; border-radius: var(--pz-radius-full); background: var(--sw-soft); color: var(--sw-text);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sw-q-title { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: var(--pz-weight-bold); letter-spacing: -0.01em; color: var(--pz-text); }
.sw-q-n { font-size: 36px; font-weight: var(--pz-weight-bold); line-height: 1; letter-spacing: -0.03em; color: var(--pz-text); }
.sw-q-none { font-size: 14px; color: var(--pz-text-subtle); }
.sw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--pz-space-3); }
.btn.sw-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: auto; min-width: 0; padding: 14px;
  background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md); color: var(--pz-text);
  text-align: left; white-space: normal; transition: border-color var(--pz-duration-fast) var(--pz-ease); }
.btn.sw-tile:hover, .btn.sw-tile.sw-on { border-color: var(--pz-brand-ink); }
.sw-tile-ic { width: 44px; height: 44px; border-radius: var(--pz-radius-md); background: var(--pz-surface-2); color: var(--pz-text-muted);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.btn.sw-tile .sw-tile-ic svg.sw-ic { width: 26px; height: 26px; }
.sw-q-ic svg { width: 24px; height: 24px; }
.sw-tile-name { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--pz-text-muted); }
.sw-tile-val { font-size: 16px; font-weight: var(--pz-weight-bold); line-height: 1.25; overflow-wrap: anywhere; }
.sw-hub { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: var(--pz-radius-full);
  background: var(--pz-brand-ink); color: var(--pz-surface); border: 4px solid var(--pz-bg);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--pz-weight-bold); letter-spacing: 0.12em; pointer-events: none; }
.sw-rest { display: flex; gap: var(--pz-space-2); flex-wrap: wrap; margin-top: var(--pz-space-4); }
.sw-rest-btn.sw-on { background: var(--pz-surface-2); }
.sw-rest-n { font-weight: var(--pz-weight-bold); }
.sw-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--pz-radius-full); font-size: 12px; font-weight: 600;
  background: var(--sw-soft); color: var(--sw-text); }
.sw-items { display: flex; flex-direction: column; margin-top: var(--pz-space-3); }
.sw-item { display: flex; gap: var(--pz-space-3); align-items: flex-start; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--pz-border); }
.sw-item-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.sw-item-name { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 600; color: var(--pz-text); }
.sw-item-val { font-size: 14px; color: var(--pz-text); overflow-wrap: anywhere; }
.sw-item-why { font-size: 12px; color: var(--pz-text-muted); }
.sw-item .btn { flex: none; }
.sw-locked { display: flex; gap: var(--pz-space-6); align-items: center; background: var(--pz-surface); border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg); padding: var(--pz-space-6); }
.sw-ring { flex: none; }
.sw-locked-body { min-width: 0; display: flex; flex-direction: column; gap: var(--pz-space-2); }
.sw-locked-title { font-size: 28px; font-weight: var(--pz-weight-bold); letter-spacing: -0.02em; color: var(--pz-text); }
.sw-locked-text { font-size: 14px; color: var(--pz-text-muted); }
.sw-locked-next { font-size: 15px; color: var(--pz-text); }
.sw-missing { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--pz-space-2); margin-top: var(--pz-space-3); }
.sw-miss { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px dashed var(--pz-border-strong); border-radius: var(--pz-radius-md); }
.sw-miss-name { display: block; font-size: 14px; font-weight: 600; color: var(--pz-text); }
.sw-miss-name::first-letter { text-transform: uppercase; }
@media (max-width: 640px) {
  .sw-board { grid-template-columns: minmax(0, 1fr); }
  .sw-hub { display: none; }
  .sw-q { min-height: 0; padding: var(--pz-space-4); }
  .sw-q-ic { width: 36px; height: 36px; }
  .sw-q-n { font-size: 30px; }
  .sw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-locked { flex-direction: column; align-items: flex-start; padding: var(--pz-space-4); }
  .sw-missing { grid-template-columns: minmax(0, 1fr); }
}
/* === koniec 021 SWOT === */