/* base.css — Fachmat
   Reset + custom properties (tokeny z brief/04-STYLEGUIDE.md) + bazowe komponenty.
   Wartości TODO są neutralne — podmień na tokeny z makiet sparingu (JEDEN kierunek). */

/* ---- Custom properties (mapują 1:1 na 04-STYLEGUIDE.md) ---- */
:root {
  /* Kolory — tokeny z brief/04-STYLEGUIDE (sampling makiet; tabela kontrastów tamże) */
  --color-bg:            #F1EDE6;   /* beton / papier techniczny */
  --color-surface:       #FDFCF8;   /* karty, panele */
  --color-text:          #26292B;   /* grafit */
  --color-text-muted:    #66696B;
  --color-accent:        #E05C18;   /* pomarańcz ostrzegawcza; biały tekst TYLKO duży/bold */
  --color-accent-hover:  #C64A0A;   /* hover/pressed; też TŁO małych przycisków (kontrast 4.8:1) */
  --color-accent-text:   #FFFFFF;
  --color-border:        #E7E3DC;
  --color-border-strong: #D8D2C8;   /* obrys inputów / afordans edycji — o stopień ciemniejszy (KS4) */
  --color-success:       #219356;   /* kropki/ikony/chipy */
  --color-success-text:  #1B7A46;   /* drobny tekst statusu (4.6:1) */
  --color-warning:       #C08A16;   /* tylko tło badge / obrys */
  --color-warning-text:  #8A5F08;   /* tekst ostrzeżeń (5.5:1) */
  --color-error:         #B5341C;

  /* Typografia (fonty ładują strony przez <link> — Oswald 600/700 + Inter 400/600/700) */
  --font-head: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Geometria */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --border-w: 1px;
  --shadow-sm: 0 1px 2px rgba(38, 41, 43, .06);
  --shadow-md: 0 6px 20px rgba(38, 41, 43, .08);

  /* Spacing scale (bez zmian) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --maxw: 1080px;

  /* Skala z-index (S27): jeden porządek warstw dla całej apki — zero magicznych 9999.
     paywall MUSI być nad overlay gatingu (canceled → „Zobacz plany" otwiera plany PONAD overlay). */
  --z-sticky: 50;     /* pasek sumy kreatora */
  --z-fab: 900;       /* pływający „Zgłoś uwagę" */
  --z-aha: 940;       /* dyskretna karta capture */
  --z-overlay: 1000;  /* pełnoekranowy gating UX (past_due/canceled) */
  --z-modal: 1050;    /* modale feedback/potwierdzenia/nazwa firmy */
  --z-paywall: 1100;  /* paywall — NAD overlay */
  --z-banner: 1150;   /* baner podglądu operatora (RODO — zawsze widoczny) */
  --z-toast: 1200;    /* toasty — najwyżej */
  --z-maintenance: 1300; /* plansza przerwy technicznej — NAD wszystkim (B10) */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; font-weight: 700; }
h1, h2 { text-transform: uppercase; letter-spacing: .01em; } /* ciężkie kondensowane wersaliki — TYLKO h1/h2 */
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: 1.25rem; }
a { color: var(--color-accent-hover); text-decoration: none; } /* accent-hover: AA dla drobnego tekstu (04) */
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ---- Layout helpers ---- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.section { padding: var(--sp-8) 0; }
.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.muted { color: var(--color-text-muted); }
.hidden { display: none !important; }

/* ---- Button ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  padding: var(--sp-3) var(--sp-5);
  border: var(--border-w) solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, opacity .15s;
  background: var(--color-surface); color: var(--color-text);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-text); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-ghost { background: transparent; border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-surface); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---- Card ---- */
.card {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

/* ---- Input / form ---- */
.field { display: block; margin-bottom: var(--sp-4); }
.field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: var(--sp-2); }
.input {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: var(--sp-3); color: var(--color-text); background: var(--color-bg);
  border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius);
}
.input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ---- Feedback message (auth/errors) ---- */
.msg { padding: var(--sp-3); border-radius: var(--radius); font-size: .9rem; }
.msg-error   { background: #fdecec; color: var(--color-error); }
.msg-success { background: #e8f6ee; color: var(--color-success); }

/* ---- Badge (lifecycle status) ---- */
.badge {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: 2px var(--sp-2); border-radius: 999px; border: var(--border-w) solid var(--color-border);
}
/* Warianty statusu (np. dostarczalność maili w Wiadomościach): OK / oczekujący / błąd. */
.badge-ok     { border-color: var(--color-success); color: var(--color-success-text); }
.badge-warn   { border-color: var(--color-warning); color: var(--color-warning-text); }
.badge-danger { border-color: var(--color-error);   color: var(--color-error); }

/* ---- Top nav (app/admin) ---- */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-w) solid var(--color-border);
  background: var(--color-bg);
}
.topnav .brand { font-weight: 700; font-family: var(--font-head); }
.topnav nav { display: flex; gap: var(--sp-4); align-items: center; }

/* ---- Empty state ---- */
.empty {
  text-align: center; padding: var(--sp-8) var(--sp-4);
  border: var(--border-w) dashed var(--color-border); border-radius: var(--radius);
  color: var(--color-text-muted);
}

/* ---- Table (admin) ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: var(--sp-3); border-bottom: var(--border-w) solid var(--color-border); }
th { font-weight: 600; color: var(--color-text-muted); }

/* ---- Grid ---- */
.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Separator „albo" (OAuth ↔ formularz e-mail) ---- */
.or-sep { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); color: var(--color-text-muted); font-size: .8rem; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* ---- Baner trybu podglądu operatora (impersonation) — TRWAŁY, u góry, czerwony ---- */
.impersonation-banner {
  position: sticky; top: 0; z-index: var(--z-banner);
  background: var(--color-error); color: #fff;
  padding: var(--sp-2) var(--sp-4); text-align: center;
  font-size: .85rem; font-weight: 600;
}

/* ---- TRYB PRZERWY TECHNICZNEJ (maintenance mode, B10) — plansza + baner (maintenance.js) ----
   Plansza (mode 'app'): pełny ekran NAD wszystkim, user nie działa. Baner (mode 'admin'): sticky,
   panel operatora działa dalej. Landing (index.html) świadomie bez bramki. Wszystko na tokenach DS. */
.maintenance-locked { overflow: hidden; }
.maintenance-plane {
  position: fixed; inset: 0; z-index: var(--z-maintenance);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  background: var(--color-bg);
}
.maintenance-box {
  max-width: 420px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
.maintenance-box .maintenance-brand { transform: scale(1.1); margin-bottom: var(--sp-2); }
.maintenance-ico { width: 44px; height: 44px; color: var(--color-accent); }
.maintenance-title { font-size: 1.5rem; }
.maintenance-sub { font-size: 1rem; margin: 0; }

.maintenance-banner {
  position: sticky; top: 0; z-index: var(--z-banner);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--color-warning); color: #fff;
  padding: var(--sp-2) var(--sp-4); text-align: center;
  font-size: .85rem; font-weight: 600;
}
.maintenance-banner-link { color: #fff; text-decoration: underline; white-space: nowrap; }

/* ---- Zgoda (checkbox z linkami przy rejestracji) ---- */
.check-line { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: .9rem; margin-bottom: var(--sp-4); }
.check-line input { margin-top: 3px; }

/* ---- Przycisk destrukcyjny + strefa czerwona (usunięcie konta) ---- */
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { background: #a01f1f; }
.danger-zone { border-color: var(--color-error); }

/* ---- Overlay pełnoekranowy (subscription gating: past_due / canceled) ----
   UWAGA: to warstwa UX. Twardy gate = RLS/edge (patrz app.js requireActiveSub). */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: rgba(10, 12, 16, .72); backdrop-filter: blur(2px);
}
.overlay-box { max-width: 440px; text-align: center; background: var(--color-bg); }

/* ---- Pływający przycisk „Zgłoś uwagę" (feedback widget) ---- */
.fab {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-fab);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-radius: 999px; border: none;
  background: var(--color-accent); color: var(--color-accent-text);
  font-weight: 600; cursor: pointer; box-shadow: var(--shadow-md);
}
.fab .fab-ico { flex: none; }
.fab:hover { background: var(--color-accent-hover); }
/* I9b (S27): desktop — FAB ikonowy (koło), by NIE nachodził na kolumnę treści. Przy 1280px gutter obok
   kolumny maxw 1080 ≈116px < pełna pigułka z etykietą (~113px + odstęp) — koło 52px siada w gutterze z zapasem.
   Etykieta w tooltipie (title) + aria-label (dostępność). Mobile/tablet <1024px = pełna pigułka z tekstem. */
@media (min-width: 1024px) {
  .fab { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .fab .fab-label { display: none; }
}

/* ---- Modal (feedback) ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: rgba(10, 12, 16, .55);
}
/* Paywall PONAD overlay gatingu (canceled → „Zobacz plany"): plany klikalne, nie schowane za overlay. */
.modal-backdrop.paywall { z-index: var(--z-paywall); }
.modal { width: 100%; max-width: 480px; background: var(--color-bg); }
.modal textarea.input { resize: vertical; }

/* ============================================================
   WARSZTAT — komponenty niszy Fachmat (krok Design)
   Sygnatura: tabliczka znamionowa (plakietka z nitami), pasy
   ostrzegawcze, pomarańcz ostrzegawcza. Wszystko na tokenach.
   ============================================================ */

/* ---- A11y global ---- */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
button, [role="button"], a.btn, .tile-dzial, .chip[onclick], .lrow-add, .navtab, .fab { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Przyciski — charakter warsztatowy (nadbudowa startera) ----
   .btn-primary / -ghost / -danger / -block / :disabled zdefiniowane wyżej. */
.btn {
  min-height: 48px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  border-radius: calc(var(--radius-sm) + 2px);
}
/* Secondary (outline) — akcje drugorzędne-pozytywne („+ NOWA OFERTA") */
.btn-secondary {
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  color: var(--color-accent-hover);          /* kontrast drobnej etykiety (nie biały na accent) */
  font-weight: 600;
}
.btn-secondary:hover { background: rgba(224, 92, 24, .06); border-color: var(--color-accent-hover); }
/* Neutral (grafit) — menu, akcje neutralne */
.btn-neutral { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.btn-neutral:hover { background: #14171a; }
/* Mały przycisk — tło MUSI być accent-hover (biała etykieta 4.8:1, nie 3.7:1 na accent) */
.btn-sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); font-size: 13px; letter-spacing: .04em; }
.btn-sm.btn-primary { background: var(--color-accent-hover); }
.btn-sm.btn-primary:hover { background: #B23F06; }
/* Ładowanie (async) — spinner + zablokowany */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; opacity: .85; }
.btn-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  border-radius: 50%; animation: fm-spin .7s linear infinite;
}
.btn-secondary.btn-loading::after { border-color: rgba(198, 74, 10, .3); border-top-color: var(--color-accent-hover); }
@keyframes fm-spin { to { transform: rotate(360deg); } }

/* ---- Etykieta techniczna (label-tech) — WERSALIKI z pomarańczową kreską ---- */
.label-tech {
  display: inline-block; font-family: var(--font-body);
  text-transform: uppercase; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--color-text-muted);
}
.label-tech::after {
  content: ""; display: block; width: 28px; height: 3px; margin-top: 4px;
  background: var(--color-accent); border-radius: var(--radius-pill);
}

/* ---- Kwoty (money) — tabularne cyfry, font nagłówków ---- */
.money {
  font-family: var(--font-head); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--color-text); letter-spacing: .01em;
}
.money-lg { font-size: 26px; line-height: 1.1; }
.money .zl { color: var(--color-text-muted); font-weight: 600; }

/* ---- Plakietka znamionowa (plaq) — sygnatura z „nitami" w rogach ---- */
.plaq {
  display: inline-flex; align-items: center; gap: var(--sp-2); position: relative;
  background: var(--color-text); color: #fff;
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-body); text-transform: uppercase;
  font-weight: 700; font-size: 12px; letter-spacing: .08em; line-height: 1.3;
  background-image:
    radial-gradient(circle at 7px 7px, rgba(255, 255, 255, .45) 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 7px) 7px, rgba(255, 255, 255, .45) 1.5px, transparent 2px),
    radial-gradient(circle at 7px calc(100% - 7px), rgba(255, 255, 255, .45) 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), rgba(255, 255, 255, .45) 1.5px, transparent 2px);
}
.plaq-accent { background-color: var(--color-accent); }

/* ---- Pasy ostrzegawcze (hazard) — używać OSZCZĘDNIE ---- */
.hazard {
  height: 6px; border-radius: var(--radius-pill);
  background: repeating-linear-gradient(45deg,
    var(--color-text) 0 10px, var(--color-accent) 10px 20px);
}

/* ---- Metryczka oferty (NR OFERTY / DATA) — bilet stemplowy ---- */
.metryczka {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--color-text); border-radius: var(--radius-sm); overflow: hidden;
  font-family: var(--font-body); background: var(--color-surface);
}
.metryczka > div { padding: 4px var(--sp-3); }
.metryczka > div + div { border-left: 1.5px solid var(--color-text); }
.metryczka .mk-label { display: block; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; color: var(--color-text-muted); }
.metryczka .mk-val { font-weight: 700; font-size: 13px; letter-spacing: .02em; }

/* ---- Chipy statusu oferty ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); text-transform: uppercase;
  font-weight: 700; font-size: 12px; letter-spacing: .04em; line-height: 1.4;
  padding: 3px 10px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
}
.chip-draft { background: var(--color-surface); border-color: var(--color-text); color: var(--color-text); }
.chip-sent { background: var(--color-text); color: #fff; }
.chip-fix { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent-hover); }
.chip-important {
  position: relative; overflow: hidden; padding-right: 30px;
  background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent-hover);
}
.chip-important::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 22px;
  background: repeating-linear-gradient(45deg, var(--color-text) 0 5px, var(--color-accent) 5px 10px);
}

/* ---- Kropki statusu ---- */
.dot-success, .dot-accent { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-success { background: var(--color-success); }
.dot-accent { background: var(--color-accent); animation: fm-pulse 2s ease-in-out infinite; }
@keyframes fm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 92, 24, .45); }
  50%      { box-shadow: 0 0 0 5px rgba(224, 92, 24, 0); }
}

/* ---- Kafelek działu materiałowego (tile-dzial) ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.tile-dzial {
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color .2s, box-shadow .2s;
}
.tile-dzial:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.tile-ico {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(224, 92, 24, .10); color: var(--color-accent);
}
.tile-ico svg { width: 22px; height: 22px; }
.tile-tytul { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.tile-opis { color: var(--color-text-muted); font-size: 13px; }
.tile-kwota { margin-top: auto; padding-top: var(--sp-2); }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr; } }

/* ---- Wiersz robocizny (lrow) ---- */
.lrow {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) 0;
  border-bottom: var(--border-w) solid var(--color-border);
}
.lrow-nazwa { font-weight: 600; color: var(--color-text); }
.lrow-ilosc { color: var(--color-text-muted); font-size: 13px; white-space: nowrap; }
.lrow-kwota { text-align: right; white-space: nowrap; }
.lrow-akcja { display: inline-flex; }
.lrow-add {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%;
  border: 1.5px dashed var(--color-accent); border-radius: var(--radius-sm);
  color: var(--color-accent-hover); text-transform: uppercase; font-weight: 700;
  font-size: 13px; letter-spacing: .04em; padding: var(--sp-3); background: transparent;
}
.lrow-add:hover { background: rgba(224, 92, 24, .05); }
/* Mobile ≤720px: 2 wiersze (nazwa full-width; pod spodem ilość+kwota+akcja) — ZERO poziomego scrolla */
@media (max-width: 720px) {
  .lrow {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "nazwa nazwa nazwa" "ilosc kwota akcja";
    row-gap: var(--sp-2);
  }
  .lrow-nazwa { grid-area: nazwa; }
  .lrow-ilosc { grid-area: ilosc; align-self: center; }
  .lrow-kwota { grid-area: kwota; margin-left: auto; align-self: center; }
  .lrow-akcja { grid-area: akcja; justify-self: end; }
}

/* ---- Nawigacja zakładek (topnav tabs) ---- */
.navtabs { display: flex; gap: var(--sp-5); align-items: center; }
.navtab {
  font-family: var(--font-body); text-transform: uppercase; font-weight: 700;
  font-size: 13px; letter-spacing: .04em; color: var(--color-text-muted);
  padding: var(--sp-2) 0; border-bottom: 2px solid transparent; text-decoration: none;
  transition: color .2s, border-color .2s;
}
.navtab:hover { color: var(--color-text); text-decoration: none; }
.navtab-active { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* ---- Sticky-sum (pasek podsumowania kreatora) ---- */
.sticky-sum {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--color-text); color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-md);
}
.sticky-sum .money { color: #fff; }
.sticky-sum .money .zl { color: rgba(255, 255, 255, .6); }
.sticky-sum-item { display: flex; flex-direction: column; gap: 2px; }
.sticky-sum-item .label-tech { color: rgba(255, 255, 255, .78); }
.sticky-sum .btn { margin-left: auto; }
@media (min-width: 721px) {
  .sticky-sum--static { position: static; border-radius: var(--radius); }
}
/* Mobile ≤720px: sumy w jednym rzędzie, CTA pełnej szerokości w drugim wierszu (bez rozpychania viewportu) */
@media (max-width: 720px) {
  .sticky-sum { flex-wrap: wrap; }
  .sticky-sum .btn { margin-left: 0; width: 100%; }
}

/* ---- Skeleton (skel) ---- */
.skel {
  background: linear-gradient(90deg, #ECE7DE 25%, #F5F1EA 50%, #ECE7DE 75%);
  background-size: 200% 100%; animation: fm-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm); min-height: 14px;
}
@keyframes fm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Toast (róg dolny-prawy) ---- */
.toast {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--sp-3); max-width: 360px;
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-md); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
}
.toast-ico { flex: none; display: inline-flex; }
.toast-success .toast-ico { color: var(--color-success-text); }
.toast-error .toast-ico { color: var(--color-error); }
.toast-tytul { font-weight: 700; font-size: 14px; }
.toast-tresc { color: var(--color-text-muted); font-size: 13px; }

/* ============================================================
   WARSZTAT — SHELL nawigacji + CENNIK (F1)   [BUILDLOG S9 / plan-sesji S4a]
   Klasy przeniesione z prototypów design-system/nav.html i
   design-system/screen-cennik.html (kanon) — promowane do runtime.
   Wszystko na tokenach; zero gołych hexów.
   ============================================================ */

/* ---- Lockup marki w topnav (FACHMAT z akcentem na „MAT") ---- */
.brand-lockup { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand-lockup .word { font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text); }
.brand-lockup .word b { color: var(--color-accent); font-weight: 700; }

/* ---- Topnav: zakładki na środku, CTA po prawej, MENU tylko mobile ---- */
.topnav .navtabs { flex: 1; justify-content: center; }
.nav-cta { flex: none; }
.nav-menu-mobile { display: none; min-height: 40px; padding: 0 var(--sp-4); flex: none; }
/* Panel rozwijanego menu (mobile) — lista zakładek pod topnavem (vanilla, w normalnym flow) */
.nav-menu-panel {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-surface); border-bottom: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-sm); padding: var(--sp-2);
}
.nav-menu-panel a {
  display: block; text-align: left; text-transform: uppercase; font-weight: 700;
  font-family: var(--font-body); font-size: 14px; letter-spacing: .04em; color: var(--color-text);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); text-decoration: none;
}
.nav-menu-panel a:hover { background: var(--color-bg); text-decoration: none; }
.nav-menu-panel a.navtab-active { color: var(--color-accent-hover); }
.nav-menu-panel .nav-cta-m { color: var(--color-accent-hover); }
/* S27: przełącz topnav na menu mobilne już przy 860px — desktopowy pasek (zakładki + CTA + chip)
   nie mieści się poniżej ~860px i między 721–860px dawał poziomy scroll (app 94px / admin 118px). */
@media (max-width: 860px) {
  .topnav .navtabs { display: none; }   /* wyższa specyficzność niż base .topnav nav */
  .topnav .nav-cta { display: none; }
  .nav-menu-mobile { display: inline-flex; }
}

/* ---- Nagłówek widoku (tytuł + licznik/akcja) ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.page-head h1 { font-size: clamp(26px, 4vw, 38px); }
.chip-count { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }

/* ---- Lupa (pole wyszukiwania z ikoną) ---- */
.search { position: relative; margin-bottom: var(--sp-4); }
/* TK-10: pola wyszukiwania stoją na tle strony (--color-bg) — jasne tło karty odcina je czytelnie. */
.search .input { padding-left: 44px; background: var(--color-surface); }
.search .lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); display: inline-flex; pointer-events: none; }

/* ---- Dopisek o stawce VAT ---- */
.vat-note { font-size: 12.5px; color: var(--color-text-muted); margin: 0 4px var(--sp-4); line-height: 1.5; }

/* ---- Pasek „Najczęściej używane" (chipy filtrujące) ---- */
.chips-recent { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); align-items: center; }
.chip-recent {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  padding: 6px var(--sp-3); border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1.5px solid var(--color-border); color: var(--color-text);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.chip-recent:hover { border-color: var(--color-accent); color: var(--color-accent-hover); }

/* ---- Pasek szybkiego skoku do działu (chipy nazwa+licznik) — poziomo przewijalny na mobile ---- */
.cennik-jump {
  display: flex; gap: var(--sp-2); align-items: center;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
  scrollbar-width: thin;
}
.jump-chip {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  padding: 6px var(--sp-3); border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1.5px solid var(--color-border); color: var(--color-text);
  cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s;
}
.jump-chip:hover { border-color: var(--color-accent); color: var(--color-accent-hover); }
.jump-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.jump-chip .jump-count {
  font-size: 11px; font-weight: 700; color: var(--color-text-muted);
  background: var(--color-bg); border-radius: var(--radius-pill); padding: 1px 7px;
}

/* ---- Dział cennika = sekcja (kotwica skoku) + sticky nagłówek w jej obrębie ---- */
.cennik-dept { margin-top: var(--sp-5); scroll-margin-top: var(--sp-3); }
.cennik-dept:first-child { margin-top: 0; }
/* Nagłówek grupy (dział): semantyczny h2 w stylu label-tech, przyklejony do góry podczas scrolla działu. */
.crow-group {
  display: block; margin: 0 0 var(--sp-1);
  position: sticky; top: 0; z-index: 5;
  padding: var(--sp-3) 4px var(--sp-2);
  background: var(--color-bg);
}

/* ---- Wiersz cennika (crow) — desktop grid, mobile karta 2-wierszowa ---- */
.crow { display: grid; grid-template-columns: 52px 1fr 118px 118px auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) 4px; border-bottom: var(--border-w) solid var(--color-border); }
.crow:last-child { border-bottom: 0; }
.crow .cico { width: 52px; height: 52px; border-radius: 12px; flex: none; background: var(--color-bg); border: var(--border-w) solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); }
.crow .cname { font-weight: 700; font-size: 15.5px; }
.crow .cunit { color: var(--color-text-muted); font-size: 13px; margin-top: 2px; }
.crow .price .plab { display: block; font: 700 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.crow .price .money { display: block; margin-top: 6px; font-size: 18px; white-space: nowrap; }
.crow .price-brutto .money { font-size: 15px; color: var(--color-text-muted); font-weight: 600; }
.crow .cactions { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: end; }
/* pola edycji inline (nazwa/cena) — klik w tekst zamienia go na input */
.crow .crow-edit { width: 100%; max-width: 240px; padding: 6px var(--sp-3); font-size: 15px; min-height: 0; }
.crow [role="button"] { border-radius: var(--radius-sm); }
.crow .cname[role="button"] { cursor: text; }
.crow .price .money[role="button"] { cursor: text; }
.crow .cname[role="button"]:hover, .crow .price .money[role="button"]:hover { box-shadow: inset 0 0 0 1.5px var(--color-border); }
@media (max-width: 720px) {
  .crow {
    grid-template-columns: 44px 1fr 1fr;
    grid-template-areas: "ico name name" "ico netto brutto" "act act act";
    row-gap: var(--sp-3); column-gap: var(--sp-3);
  }
  .crow .cico { grid-area: ico; width: 44px; height: 44px; align-self: start; }
  .crow .cmeta { grid-area: name; }
  .crow .price-netto { grid-area: netto; }
  .crow .price-brutto { grid-area: brutto; }
  .crow .cactions { grid-area: act; justify-self: stretch; }
  .crow .cactions .btn:first-child { flex: 1; }   /* „Użyj w ofercie" ciągnie się na szerokość */
  .crow .price .money { font-size: 16px; }
}

/* ---- Formularz dodawania pozycji ---- */
.add-form { margin-top: var(--sp-4); }
.add-grid { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 640px) { .add-grid { grid-template-columns: 1fr 1fr; } }
.add-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }
select.input { appearance: auto; }   /* natywny select korzysta z klasy .input (obrys/padding tokenów) */

/* ---- Sekcja-widok routera (pokazywanie/ukrywanie przez .hidden) ---- */
.view { animation: fm-fadein .18s ease-out; }
@keyframes fm-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   WARSZTAT — KREATOR (F2) + OFERTY + URZĄDZENIA   [BUILDLOG S10 / plan-sesji S4b]
   Klasy z makiety design-system/screen-kreator.html promowane do runtime.
   Wszystko na tokenach; tinty akcentu jak w bloku powyżej (rgba accent).
   ============================================================ */

/* ---- Drobne helpery tekstowe ---- */
.mini { font-size: 12.5px; }
.link-btn {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--color-accent-hover); text-align: left;
}
.link-btn:hover { text-decoration: underline; }
/* Kwadratowy przycisk ikonowy (kosz/edytuj/strzałki) — cel dotykowy 40px */
.btn-icon { min-height: 40px; width: 40px; padding: 0; flex: none; }
.input-narrow { max-width: 160px; }

/* ---- Nagłówek kreatora (D, S25): świadoma siatka 2-rzędowa zamiast jednego flex-wrap ---- */
.kr-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kr-head-row1 { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.kr-head-row2 { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.kr-head-numberbox { flex: 0 1 auto; min-width: 0; }
.kr-head-numberbox:empty { display: none; }
.kr-head-actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
/* Legacy .kr-head-left (reużywane gdzie indziej) — zostaje jako pomocnicza flex-row */
.kr-head-left { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
@media (max-width: 600px) {
  .kr-head-actions { margin-left: 0; width: 100%; }
  .kr-head-actions .btn { flex: 1; }
  .kr-head-numberbox { width: 100%; }
  .kr-head-numberbox .kr-manual { width: 100%; }
  .kr-head-numberbox .kr-manual input { flex: 1; max-width: none; }
}
.kr-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--color-success-text); font-weight: 700; font-size: 13px; opacity: 0; transition: opacity .2s; }
.kr-saved svg { color: var(--color-success); }
.kr-saved-show { opacity: 1; }

/* ---- Sekcja + nagłówek sekcji ---- */
.sec { margin-bottom: var(--sp-4); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.sec-head .titled { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sec-head .titled > svg { color: var(--color-accent); flex: none; }
.sec-note { font-size: 12px; color: var(--color-text-muted); }

/* ---- ROBOCIZNA: działy + wiersze ---- */
.dzial-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-1); }
.dzial-head:first-child { margin-top: 0; }
.reorder { display: inline-flex; gap: var(--sp-1); flex: none; }
.lrow-kwota { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lrow-unit-price { font-size: 11.5px; color: var(--color-text-muted); }
.lrow-ilosc[role="button"], .lrow-unit-price[role="button"] { cursor: text; border-radius: var(--radius-sm); padding: 1px 4px; }
.lrow-ilosc[role="button"]:hover, .lrow-unit-price[role="button"]:hover { box-shadow: inset 0 0 0 1.5px var(--color-border); color: var(--color-accent-hover); }
/* Z1: nazwa pozycji + zmienialny dział pod spodem (afordans inline I1) — tylko w kreatorze */
#kreator-root .lrow-nazwa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lrow-sec { font-weight: 400; font-size: 12px; color: var(--color-text-muted); }
.lrow-sec-val[role="button"] { cursor: pointer; border-radius: var(--radius-sm); padding: 1px 4px; }
.lrow-sec-val[role="button"]:hover { box-shadow: inset 0 0 0 1.5px var(--color-border); color: var(--color-accent-hover); }
.kr-inline { width: 100%; max-width: 150px; padding: 5px var(--sp-2); font-size: 14px; min-height: 0; }
.kr-inline-sec { max-width: 200px; }
.kr-foot { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); }
.kr-foot .lrow-add { width: auto; flex: 1; min-width: 220px; }
/* S36b — mobile ≤600px: świadomy stack stopki dodawania (wzorzec onboarding-stack S27) zamiast
   brzydkiego flex-wrap. Dashed CTA na pełną szerokość; „+ Pozycja jednorazowa" wyśrodkowana pod
   spodem jako akcja drugorzędna (min-height 44px = wygodny cel dotykowy). Desktop bez zmian. */
@media (max-width: 600px) {
  .kr-foot { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .kr-foot .lrow-add { width: 100%; flex: none; min-width: 0; }
  .kr-foot .link-btn {
    align-self: center; text-align: center;
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}
.kr-hint { margin: var(--sp-2) 0; font-size: 13.5px; }
.kr-subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1.5px solid var(--color-border); }
.kr-subtotal .money { font-size: 20px; }
.kr-subnote { font-size: 12px; color: var(--color-text-muted); margin-top: var(--sp-1); text-align: right; }

/* ---- Panel wyboru pozycji z cennika (picker) ---- */
.kr-picker { background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-4); }
.kr-picker-top { display: flex; align-items: center; gap: var(--sp-3); }
.kr-picker-top .search { flex: 1; margin-bottom: 0; }
.kr-picker-list { max-height: 320px; overflow-y: auto; margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.kr-pick-row { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--sp-3); align-items: center; text-align: left; width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s; }
.kr-pick-row:hover { border-color: var(--color-accent); }
.kr-pick-ico { width: 36px; height: 36px; border-radius: 10px; flex: none; background: rgba(224, 92, 24, .10); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; }
.kr-pick-name { font-weight: 700; font-size: 14.5px; }
.kr-pick-sub { color: var(--color-text-muted); font-size: 12px; margin-top: 1px; }
.kr-pick-price .money { font-size: 15px; }

/* ---- Formularz inline (pozycja jednorazowa / urządzenie ad hoc) ---- */
.kr-inline-form { background: var(--color-bg); border: 1.5px dashed var(--color-accent); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.kr-inline-form h3 { margin-bottom: var(--sp-1); }

/* ---- MATERIAŁY: kafelki (dodatki do .tile-dzial z bloku wyżej) ---- */
.tile-empty { border: 1.5px dashed var(--color-accent); box-shadow: none; align-items: center; justify-content: center; text-align: center; color: var(--color-accent-hover); background: transparent; min-height: 120px; }
.tile-empty:hover { background: rgba(224, 92, 24, .05); box-shadow: none; }
.tile-empty .tile-tytul { color: var(--color-accent-hover); }
.tile-form { grid-column: 1 / -1; gap: 0; }
.tile-form h3 { margin-bottom: var(--sp-3); }
.tile-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--color-text-muted); background: var(--color-bg); border-radius: var(--radius-sm); padding: 6px var(--sp-2); margin-top: var(--sp-2); }
.tile-note svg { flex: none; color: var(--color-text-muted); margin-top: 1px; }
.tile-actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--color-border); }
.tile-acts-spacer { flex: 1; }
.hint-link { font-size: 12.5px; }
.hint-panel { margin-top: var(--sp-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--sp-3); }
.kr-hints { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); list-style: disc; font-size: 13px; color: var(--color-text); }
.kr-hints li { margin-top: 4px; }

/* ---- Pole kwoty z mikro-helperem +5%/+10% ---- */
.kwota-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.kwota-row .input { flex: 1; min-width: 130px; }
.kwota-helper { display: inline-flex; gap: var(--sp-2); flex: none; }
.pct-btn { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; padding: 8px var(--sp-3); border-radius: var(--radius-pill); background: var(--color-surface); border: 1.5px solid var(--color-border); color: var(--color-accent-hover); cursor: pointer; }
.pct-btn:hover { border-color: var(--color-accent); background: rgba(224, 92, 24, .05); }

/* ---- Notatka wewnętrzna: etykieta z kłódką (label.lock-label bije .field label) ---- */
label.lock-label { display: inline-flex; align-items: center; gap: 6px; }
.lock-label svg { color: var(--color-text-muted); }
.kr-warranty { margin-bottom: var(--sp-4); }
.lock-hint { font-weight: 400; font-size: 11.5px; color: var(--color-text-muted); text-transform: none; letter-spacing: normal; margin-left: 4px; }

/* ---- Wiersz urządzenia (drow) — kreator + biblioteka ---- */
.drow { display: grid; grid-template-columns: 44px 1fr auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); }
.drow:last-child { border-bottom: 0; }
.drow .dico { width: 44px; height: 44px; border-radius: 50%; flex: none; background: rgba(224, 92, 24, .10); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; }
.drow .dname { font-weight: 700; font-size: 14.5px; }
.drow .dmeta { color: var(--color-text-muted); font-size: 12.5px; margin-top: 2px; }
.drow .dmeta.placeholder, .drow .dname.placeholder { color: var(--color-text-muted); font-style: italic; }
.drow-price .money { font-size: 16px; white-space: nowrap; }
.drow-meta [role="button"] { cursor: text; border-radius: var(--radius-sm); }
.drow-meta [role="button"]:hover { box-shadow: inset 0 0 0 1.5px var(--color-border); }
.drow-price .money[role="button"] { cursor: text; }
.drow-acts { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: end; }

/* ---- Lista ofert (#/oferty) — C (S25): STAŁE kolumny, żeby suma i akcje trzymały pion między
   wierszami (każdy wiersz to osobny grid — kolumny `auto` liczyły się per-wiersz i pływały wg
   szerokości przycisków). Kolumna sumy = stała 128px (wyrównana do prawej), akcje = 2 równe przyciski. ---- */
.offer-list { padding: var(--sp-2) var(--sp-5); }
/* STAŁE kolumny: sum 120px + akcje 300px → suma i akcje w tej samej pionowej linii we wszystkich wierszach. */
.offer-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 300px; column-gap: var(--sp-4); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); }
.offer-row:last-child { border-bottom: 0; }
.offer-row:hover { text-decoration: none; }
.offer-row:hover .offer-title { color: var(--color-accent-hover); }
.offer-title-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.offer-title { font-weight: 700; font-size: 16px; }
.offer-meta { color: var(--color-text-muted); font-size: 12.5px; margin-top: 3px; }
.offer-sum { grid-column: 2; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.offer-sum .money { font-size: 18px; }

/* ---- Biblioteka urządzeń (#/urzadzenia) ---- */
.device-card { padding: var(--sp-2) var(--sp-5); }
.kr-return-banner { display: flex; align-items: center; gap: var(--sp-3); background: rgba(224, 92, 24, .07); border: 1.5px solid var(--color-accent); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: 13.5px; flex-wrap: wrap; }
.kr-return-banner > svg { color: var(--color-accent); flex: none; }
.kr-return-banner > div { flex: 1; min-width: 180px; }
.kr-return-banner .link-btn { flex: none; }

/* ---- Mobile ≤720px: sekcje 1-kolumnowe, wiersze urządzeń/ofert stackują ---- */
@media (max-width: 720px) {
  .drow {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "ico meta price" "ico acts acts";
    row-gap: var(--sp-2);
  }
  .drow .dico { grid-area: ico; align-self: start; }
  .drow .drow-meta, .drow > div:not([class]) { grid-area: meta; }
  .drow .drow-price { grid-area: price; justify-self: end; }
  .drow-acts { grid-area: acts; justify-self: start; }
  .drow-acts .btn:first-child { flex: 1; }
  .offer-row { grid-template-columns: 1fr auto; }
  .offer-chev { display: none; }
  .kr-foot .lrow-add { min-width: 0; }
  .kr-picker-top { flex-wrap: wrap; }
}

/* ============================================================
   WARSZTAT — VAT I PREZENTACJA (F3) + PODSUMOWANIE   [BUILDLOG S11 / plan-sesji S4c]
   Nazwy łopatologiczne, mikro-wyjaśnienia. Wszystko na tokenach.
   ============================================================ */

/* ---- Mikro-wyjaśnienie pod kontrolką (1 zdanie, zawsze widoczne) ---- */
.vat-micro { font-size: 12.5px; color: var(--color-text-muted); margin-top: var(--sp-2); line-height: 1.45; }

/* ---- Bloki tematyczne w sekcji VAT (Materiały / Prezentacja) ---- */
.vat-block { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
.vat-block > .label-tech { margin-bottom: var(--sp-3); color: var(--color-text); font-size: 13.5px; }
.vat-block .field { margin-bottom: var(--sp-3); }
.vat-block select.input { max-width: 220px; }

/* ---- Robocizna: 3 kafelki radio (jeden wybór na całą ofertę) ---- */
.vat-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.vat-card {
  position: relative; display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); background: var(--color-surface);
  border: 1.5px solid var(--color-border); border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.vat-card:hover { border-color: var(--color-accent); }
.vat-card input { margin-top: 2px; flex: none; accent-color: var(--color-accent); width: 18px; height: 18px; cursor: pointer; }
.vat-card-body { display: flex; flex-direction: column; gap: 2px; }
.vat-card-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.vat-card-sub { font-size: 12px; color: var(--color-text-muted); line-height: 1.35; }
.vat-card-selected { border-color: var(--color-accent); background: rgba(224, 92, 24, .06); }
.vat-card-selected .vat-card-title { color: var(--color-accent-hover); }
@media (max-width: 720px) { .vat-choice { grid-template-columns: 1fr; } }

/* ---- Przełącznik (toggle switch) z etykietą i mikro-wyjaśnieniem ---- */
.switch-field { padding: var(--sp-3) 0; }
.switch-field + .switch-field { border-top: 1px solid var(--color-border); }
.switch-line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); cursor: pointer; }
.switch-txt { display: flex; flex-direction: column; gap: 2px; }
.switch-label { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.switch-micro { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; }
.switch { position: relative; flex: none; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 46px; height: 26px; border-radius: var(--radius-pill);
  background: var(--color-border); display: inline-flex; align-items: center;
  padding: 3px; transition: background .18s;
}
.switch-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform .18s;
}
.switch input:checked + .switch-track { background: var(--color-accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- Rozbicie netto/VAT pod kwotą działu materiałowego ---- */
.tile-vat-breakdown { font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.35; }

/* ---- Podsumowanie oferty (wg wzoru PDF) ---- */
.kr-summary { display: flex; flex-direction: column; }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; }
.sum-row .sum-label { color: var(--color-text-muted); font-size: 14.5px; }
.sum-note { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-left: 6px; }
.sum-row-vat .sum-label { padding-left: var(--sp-3); }
.sum-total { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1.5px solid var(--color-text); }
.sum-total .sum-label { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--color-text); }
.sum-total .money { color: var(--color-accent-hover); }

/* ============================================================
   WARSZTAT — CYKL ŻYCIA OFERTY (F4)   [BUILDLOG S13 / plan-sesji S4e]
   Lista: filtr + akcje + starsze wersje. Kreator: własny numer,
   baner zamrożenia, tryb tylko-do-odczytu. Wszystko na tokenach.
   ============================================================ */

/* ---- Filtr listy ofert (chipy przełączane) ---- */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filter-chip {
  font-family: var(--font-body); font-weight: 600; font-size: 13px; line-height: 1.4;
  padding: 5px 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.filter-chip:hover { border-color: var(--color-accent); color: var(--color-accent-hover); }
.filter-chip-active { border-color: var(--color-text); background: var(--color-text); color: #fff; }
.filter-chip-active:hover { color: #fff; }

/* ---- Lista ofert: wiersz z akcjami (main | suma | akcje). C (S25): STAŁE kolumny sum(120)+akcje(264)
   — bez tego kolumny `auto` liczyły się per-wiersz i suma/akcje pływały wg szerokości przycisków. ---- */
.offer-row { grid-template-columns: minmax(0, 1fr) 120px 300px; }
.offer-main { grid-column: 1; display: block; text-decoration: none; color: inherit; }
.offer-main:hover { text-decoration: none; }
.offer-main:hover .offer-title { color: var(--color-accent-hover); }
/* Akcje = kolumna 3 (stała 300px): dwa równe przyciski (btn-sm), zawsze tej samej szerokości. */
.offer-actions { grid-column: 3; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.offer-actions .btn { flex: none; width: 100%; min-width: 0; justify-content: center; }

/* ---- Starsze wersje rodziny (rozwijane) ---- */
.offer-older { padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); }
.offer-older:last-child { border-bottom: 0; }
.offer-older-toggle { font-size: 12.5px; }
.offer-older-list { margin-top: var(--sp-2); padding-left: var(--sp-4); border-left: 2px solid var(--color-border); }
.offer-older-list .offer-row { border-bottom: 1px solid var(--color-border); }
.offer-older-list .offer-row:last-child { border-bottom: 0; }
.offer-row-old { opacity: .82; }
.offer-row-old .offer-title { font-size: 14.5px; }

/* ---- Kreator: dyskretne pole „własny numer" w nagłówku ---- */
.kr-manual { display: inline-flex; align-items: center; gap: var(--sp-2); }
.kr-manual label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.kr-manual input { max-width: 150px; padding: 5px var(--sp-3); font-size: 13px; }

/* ---- Kreator: baner zamrożenia (reuse .kr-return-banner) + tryb read-only ---- */
.kr-frozen-banner strong { font-weight: 700; }
.kr-return-banner .btn { flex: none; }
.kr-frozen [role="button"] { pointer-events: none; box-shadow: none !important; cursor: default; }
.kr-frozen input:disabled, .kr-frozen textarea:disabled, .kr-frozen select:disabled { opacity: .72; cursor: default; }
.kr-frozen button:disabled { opacity: .5; cursor: default; }
.kr-frozen .switch input:disabled + .switch-track { opacity: .55; }
.kr-frozen .vat-card { opacity: .65; cursor: default; }
.kr-frozen .vat-card:hover { border-color: var(--color-border); }
.kr-frozen .vat-card-selected, .kr-frozen .vat-card-selected:hover { opacity: .82; border-color: var(--color-accent); }

/* ---- Mobile ≤720px: treść+suma w 1. rzędzie, akcje pełną szerokością w 2. (dwa równe przyciski) ---- */
@media (max-width: 720px) {
  .offer-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main sum" "actions actions";
    column-gap: var(--sp-3); row-gap: var(--sp-3);
  }
  .offer-main { grid-area: main; grid-column: auto; }
  .offer-row > .offer-sum { grid-area: sum; grid-column: auto; }
  .offer-actions { grid-area: actions; grid-column: auto; justify-self: stretch; grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   WARSZTAT — PULPIT (F5) + PROFIL FIRMY + ONBOARDING   [BUILDLOG S14 / plan-sesji S5]
   Klasy przeniesione z prototypu design-system/screen-pulpit.html
   (hero „kolejka wycen", statystyki tygodnia, wiersze ostatnich ofert)
   + onboarding auto-odhaczany + miniatura logo firmy + fix FAB↔sticky.
   Wszystko na tokenach (biel = #fff jak w reszcie base.css).
   ============================================================ */

/* ---- Hero „Do wysłania dzisiaj" (klikalny gdy są szkice) ---- */
.hero { display: flex; gap: 28px; align-items: stretch; }
.fm-hero { transition: box-shadow .15s, transform .15s; }
.fm-hero[role="link"] { cursor: pointer; }
.fm-hero[role="link"]:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fm-hero[role="link"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.hero-ico {
  width: 148px; flex: none; background: var(--color-accent); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.hero-main { flex: 1; min-width: 0; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.hero-title-wrap { min-width: 0; }
.hero-top h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.02; }
.hero-sub { color: var(--color-text-muted); font-size: 14px; margin-top: var(--sp-2); }
.hero-div { height: 1px; background: var(--color-border); margin: 18px 0; }
.chip-done { background: var(--color-surface); border-color: var(--color-success); color: var(--color-success-text); }

/* ---- Statystyki tygodnia (3 kolumny → 1 na mobile) ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { padding: 0 22px; }
.stat + .stat { border-left: 1px solid var(--color-border); }
.stat .val { margin-top: var(--sp-2); font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1; }
.stat .val .money { font-size: 30px; }
.stat .val-txt { margin-top: var(--sp-2); font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.1; }
.stat .val-sub { color: var(--color-text-muted); font-size: 12.5px; margin-top: 3px; }

/* ---- Nagłówek „Ostatnie oferty" + CTA ---- */
.pulpit-recent-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-5) 0 var(--sp-3); flex-wrap: wrap; }

/* ---- Wiersz ostatniej oferty (klik → kreator) ---- */
/* C (S25): STAŁE kolumny money/chip → kwoty i statusy trzymają pion między wierszami. */
.orow {
  display: grid; grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr) 128px 108px 20px; gap: var(--sp-4);
  align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--color-border);
  text-decoration: none; color: inherit;
}
.orow:last-child { border-bottom: 0; }
.orow:hover { text-decoration: none; }
.orow:hover .oname { color: var(--color-accent-hover); }
.orow .oico { color: var(--color-accent); display: inline-flex; }
.orow .oname { font-weight: 700; font-size: 15px; }
.orow .oaddr { color: var(--color-text-muted); font-size: 13px; margin-top: 2px; }
.orow .onum { font-size: 14px; font-weight: 600; }
.orow .odate { color: var(--color-text-muted); font-size: 13px; margin-top: 2px; }
.orow .money { font-size: 18px; white-space: nowrap; justify-self: end; text-align: right; }
.orow .ochip { justify-self: end; }
.orow .chev { color: var(--color-text-muted); display: inline-flex; }

/* ---- Empty-state nowego usera ---- */
.pulpit-empty-ico {
  width: 64px; height: 64px; margin: 0 auto var(--sp-3); border-radius: var(--radius);
  background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
.pulpit-empty-cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }

/* ---- Onboarding „Pierwsze kroki" (auto-odhaczany z realnego stanu) ---- */
/* A (S25): karta onboardingu dostaje standardowy oddech pod spodem — bez tego stykała się (sep=0/-1px)
   z kafelkiem hero „Do wysłania" (root cause: #pulpit-root nie ma rytmu pionowego między kartami). */
.onb-card { border-left: 4px solid var(--color-accent); margin-bottom: var(--sp-4); }
.onb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.onb-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.onb-step { display: flex; align-items: center; gap: var(--sp-3); }
.onb-check {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border); color: var(--color-text-muted);
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
}
.onb-done .onb-check { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.onb-body { flex: 1; min-width: 0; }
.onb-label { font-weight: 700; font-size: 14.5px; }
.onb-done .onb-label { color: var(--color-text-muted); text-decoration: line-through; }
.onb-step .btn { flex: none; }
/* §1.3 nagłówek oczekiwań — jedno zdanie wartości + czas, nad krokami. */
.onb-welcome { font-size: 13.5px; color: var(--color-text); margin: 2px 0 0; }
.onb-welcome-time { color: var(--color-text-muted); }
/* §1.4 przyszły krok = nieklikalny wyszarzony wskaźnik (nie <a>/<button>) — brak drugiego CTA rywalizującego o uwagę. */
.onb-cta-later { flex: none; align-self: center; color: var(--color-text-muted); font-size: 13px; font-weight: 600; opacity: .55; white-space: nowrap; }
/* Wiersz „Usuń dane przykładowe" (demo-seed, S21) — oddzielony od kroków cienką linią. */
.onb-demo { margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
/* S27: na wąskich ekranach (≤460px) krok układa się pionowo — przycisk pod tekstem. Bez tego
   przycisk (flex:none) ściskał kolumnę tekstu do ~29px → tekst zawijał się w kilkanaście linii,
   karta puchła w pionie i spychała hero pulpitu pod zagięcie (regresja I8). */
@media (max-width: 460px) {
  .onb-step { flex-wrap: wrap; }
  .onb-step .btn { flex-basis: 100%; width: 100%; margin-top: var(--sp-2); }
}

/* ---- Profil firmy: miniatura logo ---- */
.company-logo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.company-logo-img {
  max-width: 180px; max-height: 72px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff; padding: var(--sp-2); object-fit: contain;
}

/* ---- FAB „Zgłoś uwagę" podniesiony ponad sticky-sum w kreatorze (mobile) — zero zasłaniania CTA ---- */
@media (max-width: 720px) {
  body.kr-active .fab { bottom: calc(var(--kr-sticky-h, 140px) + var(--sp-3)); transition: bottom .2s ease; }
  /* Sticky-footer: kreator rozciągnięty na wysokość ekranu (min-height ustawia kreator.js),
     a sticky-sum dosunięty do dołu (margin-top:auto). Dzięki temu pasek jest ZAWSZE przy dolnej
     krawędzi viewportu — nawet przy prawie pustym szkicu — więc podniesiony FAB nigdy nie zasłania CTA. */
  body.kr-active #kreator-root { display: flex; flex-direction: column; }
  body.kr-active #kreator-root > .sticky-sum { margin-top: auto; }
  /* Stopka „Co nowego / Bezpieczeństwo" pod widokiem odklejałaby sticky przy scrollu do samego dołu
     (i wtedy FAB znów zasłaniał CTA). W kreatorze na mobile pasek ma być bottom-most → chowamy stopkę. */
  body.kr-active main footer { display: none; }
}

/* ---- Mobile ≤720px: hero pionowo, statystyki 1-kolumnowo, wiersz reflow ---- */
@media (max-width: 720px) {
  .hero { flex-direction: column; gap: var(--sp-3); }
  /* I8: dekoracyjna ikona mniejsza na mobile — nagłówek „Do wysłania dzisiaj" + liczba + CTA mieszczą się nad zagięciem */
  .hero-ico { width: 100%; height: 52px; }
  .hero-ico svg { width: 30px; height: 30px; }
  .stats { grid-template-columns: 1fr; gap: var(--sp-4); }
  .stat { padding: var(--sp-4) 0 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .stat:first-child { padding-top: 0; border-top: 0; }
  /* C: stała 3. kolumna (money/chip) → wyrównanie do prawej w pionie także na mobile */
  .orow {
    grid-template-columns: 32px minmax(0, 1fr) 96px;
    grid-template-areas: "ico cli money" "ico nums chip";
    row-gap: 6px; column-gap: var(--sp-3);
  }
  .orow .oico { grid-area: ico; align-self: start; }
  .orow .ocli { grid-area: cli; }
  .orow .onums { grid-area: nums; }
  .orow .money { grid-area: money; text-align: right; justify-self: end; }
  .orow .ochip { grid-area: chip; justify-self: end; }
  .orow .chev { display: none; }
  .pulpit-empty-cta .btn { flex: 1; }
}

/* ============================================================
   PAYWALL + CONTEXTUAL CAPTURE (S16 — gate 402 / monetyzacja)
   Modal planów (reuse .modal-backdrop/.modal/.card) + dyskretna
   karta „zabezpiecz dostęp" po 1. PDF w trialu. Wyłącznie tokeny.
   ============================================================ */
.paywall .modal { max-width: 560px; position: relative; }
.paywall-close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 34px; height: 34px; border: none; border-radius: var(--radius-pill);
  background: var(--color-bg); color: var(--color-text-muted);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.paywall-close:hover { background: var(--color-border); color: var(--color-text); }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.plan {
  display: flex; flex-direction: column; gap: var(--sp-1); text-align: left;
  padding: var(--sp-4); background: var(--color-surface);
  border: 2px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.plan:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.plan:disabled { opacity: .6; pointer-events: none; }
.plan-featured { border-color: var(--color-accent); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.plan-name {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; font-size: .85rem; color: var(--color-text-muted);
}
.plan-badge {
  background: var(--color-accent); color: var(--color-accent-text);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: 2px var(--sp-2); border-radius: var(--radius-pill); white-space: nowrap;
}
.plan-price {
  font-family: var(--font-head); font-variant-numeric: tabular-nums;
  font-size: 1.9rem; font-weight: 700; color: var(--color-text); line-height: 1.1;
}
.plan-per { font-size: .85rem; color: var(--color-text-muted); }
.plan-cta-hint {
  margin-top: var(--sp-2); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent-hover);
}
/* Polecenie (paywall): pasek nad planami + przekreślona cena bazowa + nota „potem cena standardowa” */
.paywall-ref {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  background: rgba(224, 92, 24, .08); border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; color: var(--color-accent-hover);
}
.paywall-ref svg { color: var(--color-accent); flex: none; }
.plan-was { color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 2px; font-size: 1.1rem; margin-right: 6px; }
.plan-ref-note { display: block; margin-top: 2px; font-size: .72rem; font-weight: 600; color: var(--color-text-muted); }
.paywall-err { margin-top: var(--sp-3); }
.paywall-foot { margin-top: var(--sp-4); }
@media (max-width: 560px) { .plan-grid { grid-template-columns: 1fr; } }

/* Dyskretna karta contextual capture (dół-lewo desktop; pełna szer. mobile) */
.aha-capture {
  position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-aha);
  max-width: 360px; display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-md);
  animation: fm-aha-in .3s ease;
}
.aha-capture-ico { color: var(--color-success); flex: none; margin-top: 2px; }
.aha-capture-body { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.aha-capture-body strong { color: var(--color-text); }
.aha-capture-body span { color: var(--color-text-muted); }
.aha-capture-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.aha-capture-x {
  background: none; border: none; font-size: 1.2rem; line-height: 1;
  color: var(--color-text-muted); cursor: pointer;
}
@keyframes fm-aha-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .aha-capture { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); max-width: none; }
}

/* ============================================================
   WARSZTAT — PANEL OPERATORA W TABACH + WEJŚCIE OPERATORA   [BUILDLOG S20]
   Reużycie kanonu nawigacji (topnav/navtabs/nav-menu-panel/plaq).
   Dokładany: link „Operator" w app, plakietka admina, pasek konta,
   fix overflow mobile tabel. Wszystko na tokenach; zero gołych hexów.
   ============================================================ */

/* ---- Link „Panel operatora" w topnav aplikacji (widoczny tylko dla roli operator) ----
   Wyróżniony: grafitowy obrys-pigułka z ikoną gauge (odróżnienie od zwykłych zakładek). */
.navtab-op {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--color-text); border-radius: var(--radius-pill);
  padding: 5px var(--sp-3); color: var(--color-text);
  transition: background .15s, color .15s, border-color .15s;
}
.navtab-op:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); text-decoration: none; }
.navtab-op svg { flex: none; }
/* Pozycja „Panel operatora" w rozwijanym menu mobilnym (akcent, odróżnienie od zakładek) */
.nav-menu-panel .nav-menu-op { color: var(--color-accent-hover); }

/* ---- Plakietka „PANEL OPERATORA" w topnav admina — grafitowa (plaq) z akcentową kropką ---- */
.plaq-op { flex: none; }
.plaq-op::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }

/* ---- Nagłówek sekcji w menu mobilnym (etykieta „Panel operatora") ---- */
.nav-menu-head {
  display: block; font: 700 11px/1 var(--font-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: var(--sp-2) var(--sp-4) var(--sp-1);
}

/* ---- Pasek konta operatora (Pulpit): kto zalogowany + Wyloguj ---- */
.admin-userbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5);
}

/* ---- Fix overflow poziomy na mobile (S15: scrollWidth 438 > 390) ----
   Karty gridu (grid-3/grid-4) domyślnie mają min-width:auto → nie schodzą poniżej
   min-content i rozpychają viewport. Zerujemy min-width, a szerokie tabele scrollują
   REALNIE wewnątrz .table-wrap (overflow-x:auto) zamiast rozciągać stronę. */
.grid > * { min-width: 0; }
[data-view] .table-wrap { max-width: 100%; }

/* ---- ≤860px (S27): topnav admina = brand + MENU (plakietkę chowamy, wzorzec app) ---- */
@media (max-width: 860px) {
  .topnav .plaq-op { display: none; }
}

/* ============================================================
   LANDING V2 (S23) — strona sprzedażowa „poziom topowego SaaS”
   w DNA warsztatowym. Research: landing-research.md (zmierzone
   px/czasy). Wszystko na tokenach + tinty accent rgba(224,92,24,…)
   jak w reszcie WARSZTATU. Zero gołych hexów marki. Hero-mock =
   DOM z komponentów design-systemu; motion w /js/landing.js.
   ============================================================ */

/* ---- Kontenery / rytm ----
   R2 #5: margines boczny mobile ≥20px. Padding boczny NIESIE .lp-wrap (--sp-5 = 24px);
   klasy sekcji ustawiają WYŁĄCZNIE padding pionowy (longhandy), żeby NIE zerować bocznego
   przez shorthand `padding: X 0` (to był bug — treść kleiła się do krawędzi na 390). */
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5); }
.lp-sec { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.lp-sec-tight { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.lp-sec--lg { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }   /* oddech dużych sekcji (KO3): hero/PDF/cennik/finał = 96px */
.lp-band { background: var(--color-surface); border-top: var(--border-w) solid var(--color-border); border-bottom: var(--border-w) solid var(--color-border); }
/* Sekcja na graficie (I2: rytm tonalny — PDF/finał ciemne, biały dokument „strzela”) */
.lp-dark { background: var(--color-text); color: #fff; }
.lp-dark .lp-head h2 { color: #fff; }
.lp-dark .lp-head p { color: rgba(255, 255, 255, .72); }
.lp-dark .label-tech { color: rgba(255, 255, 255, .72); }

/* ---- Nagłówek sekcji (etykieta + h2 + zajawka) ---- */
.lp-head { text-align: center; max-width: 46ch; margin: 0 auto var(--sp-7); }
.lp-head .label-tech { margin-bottom: var(--sp-3); }
.lp-head .label-tech::after { margin-left: auto; margin-right: auto; }
.lp-head h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); letter-spacing: -.01em; }
.lp-head p { color: var(--color-text-muted); margin-top: var(--sp-3); font-size: 1.05rem; }

/* ---- Motion: scroll-reveal (ONCE) + stagger. Bez JS = treść widoczna. ---- */
.lp-reveal-ready .rv { opacity: 0; transform: translateY(16px); }
.rv { transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }

/* ============================================================
   NAV — sticky, transparent na starcie, po scrollu tło+obrys
   ============================================================ */
.lp-nav { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.lp-nav.is-stuck { background: var(--color-bg); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); backdrop-filter: saturate(1.1) blur(8px); }
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.lp-nav-links { display: flex; gap: var(--sp-6); align-items: center; }
.lp-nav-links a { font-family: var(--font-body); text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--color-text-muted); }
.lp-nav-links a:hover { color: var(--color-text); text-decoration: none; }
.lp-nav-actions { display: flex; align-items: center; gap: var(--sp-4); }
.lp-nav-login { font-family: var(--font-body); text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--color-text); }
.lp-nav-login:hover { color: var(--color-accent-hover); text-decoration: none; }
/* I3: mobilne MENU (hamburger) — wzorzec app.html; panel z linkami + Zaloguj się */
.lp-nav-menu-btn { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-3); }
.lp-nav-panel { display: none; }
.lp-nav-panel.is-open {
  display: flex; flex-direction: column;
  background: var(--color-bg); border-top: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-sm); padding: var(--sp-2) var(--sp-5) var(--sp-3);
}
.lp-nav-panel a {
  display: block; text-transform: uppercase; font-weight: 700; font-family: var(--font-body);
  font-size: 14px; letter-spacing: .04em; color: var(--color-text);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); text-decoration: none;
}
.lp-nav-panel a:last-child { border-bottom: 0; color: var(--color-accent-hover); }
.lp-nav-panel a:hover { color: var(--color-accent-hover); text-decoration: none; }
@media (max-width: 860px) { .lp-nav-links { display: none; } .lp-nav-menu-btn { display: inline-flex; } }
@media (max-width: 560px) { .lp-nav-login { display: none; } }

/* ============================================================
   HERO — copy po lewej, hero-mock po prawej (desktop). Mobile: stack.
   ============================================================ */
.lp-hero { padding-top: var(--sp-7); padding-bottom: var(--sp-9); }   /* oddech (KO3); boczny z .lp-wrap */
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--sp-7); align-items: center; }
.lp-hero-copy { max-width: 34rem; }
.lp-eyebrow { margin-bottom: var(--sp-4); }
.lp-h1 { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; letter-spacing: -.01em; line-height: 1.02; font-size: clamp(2.5rem, 6vw, 4.25rem); margin: 0; }
.lp-h1 .em { color: var(--color-accent); }
.lp-sub { max-width: 52ch; margin: var(--sp-5) 0 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--color-text-muted); line-height: 1.55; }
.lp-sub b { color: var(--color-text); font-weight: 700; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.lp-btn-xl { min-height: 56px; font-size: 1.02rem; padding: var(--sp-3) var(--sp-6); }
.lp-cta-note { margin-top: var(--sp-3); font-size: 13px; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.lp-cta-note svg { color: var(--color-success); flex: none; }
@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .lp-hero-copy { max-width: none; }
  .lp-hero { text-align: center; }
  .lp-hero .label-tech::after { margin-left: auto; margin-right: auto; }
  .lp-sub { margin-left: auto; margin-right: auto; }
  .lp-cta-row { justify-content: center; }
  .lp-cta-note { justify-content: center; }
}

/* ============================================================
   HERO-MOCK — żywy pokaz produktu (DOM z komponentów design-systemu)
   Sekwencer /js/landing.js przełącza data-phase i klasy .is-in;
   CSS = przejścia. Reduced-motion: kadr F4 statyczny (globalny
   @media reduce zeruje animacje; landing.js ustawia phase=4 + is-in).
   ============================================================ */
.hero-mock { position: relative; margin: 0 auto; max-width: 460px; }
.hero-mock::before { /* delikatny radialny cień pod mockiem — ZERO koloru */
  content: ""; position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%);
  width: 86%; height: 60%; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(38, 41, 43, .16), transparent 70%);
  filter: blur(6px);
}
.hm-card { position: relative; overflow: hidden; padding: var(--sp-4) var(--sp-4) 0; box-shadow: var(--shadow-md); }
.hm-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-3); }
.hm-sec-label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--color-text-muted); font: 700 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.hm-sec-label svg { color: var(--color-accent); }

/* Wiersz-źródło z cennika (F1: „klikany”, potem wchodzi do tabeli) */
.hm-source { border: 1.5px dashed var(--color-accent); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); background: rgba(224, 92, 24, .05); transition: background .18s ease, border-color .18s ease, opacity .35s ease, transform .35s ease; }
.hm-source .hm-src-name { font-weight: 700; font-size: 13.5px; }
.hm-source .money { font-size: 15px; }
.hero-mock[data-phase="1"] .hm-source { background: rgba(224, 92, 24, .14); border-color: var(--color-accent-hover); }
.hero-mock[data-phase="3"] .hm-source, .hero-mock[data-phase="4"] .hm-source, .hero-mock[data-phase="5"] .hm-source { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* Kursor-dot (F1: dojeżdża do wiersza i „klika”) */
.hm-cursor { position: absolute; left: 62%; top: 30%; width: 18px; height: 18px; z-index: 6; color: var(--color-text); opacity: 0; transition: left .5s cubic-bezier(.16, 1, .3, 1), top .5s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, transform .12s ease; filter: drop-shadow(0 1px 2px rgba(38, 41, 43, .3)); }
.hero-mock[data-phase="1"] .hm-cursor { opacity: 1; left: 30%; top: 26%; }
.hero-mock[data-phase="1"] .hm-cursor.hm-press { transform: scale(.82); }
.hm-cursor svg { display: block; }

/* Tabela oferty — wiersze robocizny (lrow) wpadają po kolei */
.hm-table { display: flex; flex-direction: column; }
.hm-lrow { padding: var(--sp-2) 0; opacity: 0; transform: translateY(-10px); transition: opacity .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
.hm-lrow.is-in { opacity: 1; transform: none; }
.hm-lrow .lrow-nazwa { font-size: 13.5px; }
.hm-lrow .lrow-ilosc { font-size: 12px; }
.hm-lrow .lrow-kwota .money { font-size: 14px; }

/* Kafelek działu materiałów (F3: materializuje się scale .96→1) */
.hm-tile { margin-top: var(--sp-3); opacity: 0; transform: scale(.96); transition: opacity .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
.hm-tile.is-in { opacity: 1; transform: scale(1); }
.hm-tile .tile-tytul { font-size: 13.5px; }
.hm-tile .tile-opis { font-size: 12px; }
.hm-tile .tile-kwota .money-lg { font-size: 20px; }

/* Pasek sumy (F2 count-up; F4 przycisk PDF błyska) */
.hm-sum { margin: var(--sp-4) calc(-1 * var(--sp-4)) 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hm-sum .hm-total { font-size: 20px; }
.hm-pdf-btn { margin-left: auto; pointer-events: none; transition: box-shadow .2s ease, transform .12s ease, opacity .3s ease; }
.hero-mock[data-phase="3"] .hm-pdf-btn { box-shadow: 0 0 0 3px rgba(224, 92, 24, .35); }  /* błysk PRZED kulminacją */
/* K1: w kulminacji (4/5) przycisk WYGASA (opacity 0) ZANIM wysunie się PDF — zero kolizji. */
.hero-mock[data-phase="4"] .hm-pdf-btn, .hero-mock[data-phase="5"] .hm-pdf-btn { opacity: 0; }

/* Mini-kartka PDF (F4: wysuwa się OBOK sumy + „sztampnięcie” + plakietka WYSŁANO zakotwiczona w rogu) */
.hm-pdf { position: absolute; right: -18px; bottom: 6%; width: 50%; z-index: 5; opacity: 0; transform: translateY(18px) rotate(3deg) scale(.9); transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.hm-pdf.is-in { opacity: 1; transform: translateY(0) rotate(3deg) scale(1); }
.hm-pdf.is-stamped { animation: hm-stamp .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hm-stamp { 0% { transform: translateY(0) rotate(3deg) scale(1.06); } 60% { transform: translateY(0) rotate(3deg) scale(.97); } 100% { transform: translateY(0) rotate(3deg) scale(1); } }
.hm-pdf-doc { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--sp-3); }
.hm-pdf-rule { height: 3px; width: 34px; background: var(--color-accent); border-radius: var(--radius-pill); margin-bottom: var(--sp-2); }
.hm-pdf-line { height: 6px; border-radius: var(--radius-pill); background: var(--color-border); margin-bottom: 6px; }
.hm-pdf-line.w70 { width: 70%; } .hm-pdf-line.w90 { width: 90%; } .hm-pdf-line.w50 { width: 50%; }
.hm-pdf-line.strong { background: var(--color-text); height: 8px; width: 44%; margin-top: var(--sp-2); }
/* WYSŁANO zakotwiczona do górnego-prawego rogu dokumentu (nie „pływa”) */
.hm-sent { position: absolute; top: -11px; right: -8px; box-shadow: var(--shadow-sm); font-size: 10px; padding: 5px var(--sp-3); }
.hm-sent .dot-accent { margin-left: 4px; }
/* S23e: MOBILE — kulminacja (karta PDF + plakietka WYSŁANO) w CAŁOŚCI wewnątrz mocka.
   Desktop zostawia right:-18px (celowa „ucieczka” poza panel — fix kolizji przycisku);
   na wąskim ekranie ta ucieczka wypycha nagrodę w boczny margines/krawędź ekranu i czyta się
   jako przycięta. Wsuwamy kartę do środka (right:12px) — ale wtedy w całości nachodzi na pasek
   sumy (.hm-sum ma sticky z-index:50, na desktopie karta wystaje POZA pasek w prawo, więc nie jest
   przez niego kryta; po wsunięciu byłaby). Dlatego z-index:60 > 50 — karta maluje NAD paskiem, na
   jego pustej prawej połowie (przycisk F4/F5 wygaszony), nie zasłaniając kwoty „Razem brutto”. */
@media (max-width: 720px) {
  .hm-pdf { right: 12px; bottom: 4%; z-index: 60; }
}

/* Pasek hazard — JEDEN element „żywy” (drift ~30s), OFF w reduced-motion */
.hm-hazard { height: 6px; margin-top: var(--sp-4); background-size: 28.28px 28.28px; animation: hm-drift 30s linear infinite; }
@keyframes hm-drift { to { background-position: 200px 0; } }

@media (max-width: 900px) { .hero-mock { margin-top: var(--sp-7); } }

/* ============================================================
   PAS ZAUFANIA — branże (nasza nisza) + 3 liczby count-up
   ============================================================ */
.lp-branze { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.lp-branza { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); text-transform: uppercase; font-weight: 700; font-size: 12.5px; letter-spacing: .05em; color: var(--color-text); padding: 8px var(--sp-4); border-radius: var(--radius-pill); background: var(--color-surface); border: 1.5px solid var(--color-border); }
.lp-branza svg { color: var(--color-accent); flex: none; }
.lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); max-width: 900px; margin: 0 auto; }
.lp-stat { text-align: center; padding: 0 var(--sp-3); }
.lp-stat + .lp-stat { border-left: 1px solid var(--color-border); }
.lp-stat .lp-stat-num { font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; color: var(--color-text); }
.lp-stat .lp-stat-num .u { color: var(--color-accent); }
.lp-stat .lp-stat-txt { color: var(--color-text-muted); font-size: 14px; margin-top: var(--sp-2); }
.lp-trust-note { text-align: center; color: var(--color-text-muted); font-size: 13px; margin-top: var(--sp-6); }
@media (max-width: 640px) {
  .lp-stats { grid-template-columns: 1fr; gap: var(--sp-4); }
  .lp-stat + .lp-stat { border-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--sp-4); }
}

/* ============================================================
   PRZED / PO — lewa „Excel” surowa vs prawa żywy mini-kreator
   ============================================================ */
.lp-vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: stretch; }
.lp-vs-card { display: flex; flex-direction: column; height: 100%; }
.lp-vs-tag { display: inline-flex; align-items: center; gap: var(--sp-2); font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sp-3); }
.lp-vs-tag.bad { color: var(--color-text-muted); }
.lp-vs-tag.good { color: var(--color-success-text); }
/* Lewa: celowo surowa „arkuszowa” estetyka */
.lp-excel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; box-shadow: var(--shadow-sm); overflow: hidden; }
.lp-excel-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 6px var(--sp-3); font-size: 11px; color: var(--color-text-muted); }
.lp-excel-clock { font-variant-numeric: tabular-nums; }
.lp-xrow { display: grid; grid-template-columns: 1.6fr .8fr .6fr; font-size: 12px; }
.lp-xrow > span { padding: 6px var(--sp-3); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-xrow > span:last-child { border-right: 0; text-align: right; }
.lp-xrow.head > span { background: var(--color-bg); color: var(--color-text-muted); font-weight: 700; }
.lp-xrow.err > span { color: var(--color-error); }
.lp-excel-foot { padding: var(--sp-3); font-size: 11.5px; color: var(--color-text-muted); }
/* Prawa: żywy mini-kreator z sumą (komponenty warsztatu) */
.lp-live { border-color: var(--color-accent); }
.lp-live .lrow { padding: var(--sp-2) 0; }
.lp-live .lrow-nazwa { font-size: 13.5px; }
.lp-live-sum { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1.5px solid var(--color-text); }
.lp-live-sum .label-tech { margin: 0; }
.lp-live-sum .money { font-size: 20px; color: var(--color-accent-hover); }
@media (max-width: 760px) { .lp-vs { grid-template-columns: 1fr; } }

/* ============================================================
   JAK DZIAŁA — 3 kroki (poziomo → pionowo), stagger reveal
   ============================================================ */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
/* I1: 3 zrzuty ujednolicone — aspect 3/2, cover, top-left (świeże przycięte fragmenty, bez topnavu) */
.lp-step-fig { position: relative; border: var(--border-w) solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-surface); aspect-ratio: 3 / 2; }
.lp-step-fig img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lp-step-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); }
.lp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-text); font-family: var(--font-head); font-weight: 700; font-size: 15px; flex: none; }
.lp-step-head h3 { font-family: var(--font-head); text-transform: uppercase; font-size: 1.1rem; letter-spacing: .02em; }
.lp-step p { color: var(--color-text-muted); font-size: 14.5px; }
@media (max-width: 860px) { .lp-steps { grid-template-columns: 1fr; gap: var(--sp-7); max-width: 460px; margin: 0 auto; } }

/* ============================================================
   POKAZ PDF — duży wzór dokumentu + adnotacje-strzałki
   ============================================================ */
.lp-pdf { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-7); align-items: center; }
.lp-pdf-fig { position: relative; }
.lp-pdf-fig img { width: 100%; border-radius: var(--radius); box-shadow: 0 16px 44px rgba(0, 0, 0, .4); background: #fff; }
.lp-pdf-fig .plaq { position: absolute; top: calc(-1 * var(--sp-3)); left: var(--sp-5); box-shadow: var(--shadow-sm); }
.lp-annots { display: flex; flex-direction: column; gap: var(--sp-5); }
/* KO2: adnotacje align-items:start + cienkie poziome leadery (accent) do sekcji dokumentu */
.lp-annot { display: flex; align-items: flex-start; gap: var(--sp-4); }
.lp-annot-lead { flex: none; width: 34px; height: 2px; margin-top: 10px; background: var(--color-accent); border-radius: var(--radius-pill); }
.lp-annot h3 { font-family: var(--font-head); text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; margin-bottom: 3px; color: #fff; }
.lp-annot p { color: rgba(255, 255, 255, .72); font-size: 14px; }
.lp-pdf-cta { margin-top: var(--sp-6); }
@media (max-width: 860px) { .lp-pdf { grid-template-columns: 1fr; gap: var(--sp-6); } .lp-pdf-fig { order: -1; } }

/* ============================================================
   MOŻLIWOŚCI — bento 6 kafelków (hover-lift)
   ============================================================ */
.lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.lp-feat { display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.lp-feat:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-feat-ico { width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(224, 92, 24, .10); color: var(--color-accent); margin-bottom: var(--sp-1); }
.lp-feat h3 { font-family: var(--font-head); text-transform: uppercase; font-size: 1.02rem; letter-spacing: .02em; }
.lp-feat p { color: var(--color-text-muted); font-size: 14px; }
@media (max-width: 860px) { .lp-bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lp-bento { grid-template-columns: 1fr; } }

/* ============================================================
   CENNIK — 2 karty; ceny WYŁĄCZNIE z public_prices
   ============================================================ */
.lp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); max-width: 760px; margin: 0 auto; }
.lp-plan { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); }
.lp-plan-featured { border: 2px solid var(--color-accent); }
.lp-plan-badge { position: absolute; top: var(--sp-4); right: var(--sp-4); background: var(--color-accent); color: var(--color-accent-text); font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .03em; padding: 3px var(--sp-3); border-radius: var(--radius-pill); }
.lp-plan-name { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: .95rem; color: var(--color-text-muted); }
.lp-plan-price { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.lp-plan-price .money { font-size: 2.6rem; }
.lp-plan-per { color: var(--color-text-muted); font-size: 1rem; }
.lp-plan-sub { color: var(--color-text-muted); font-size: 13.5px; min-height: 1.3em; }
.lp-price-anchor { text-align: center; font-family: var(--font-head); text-transform: uppercase; font-weight: 700; letter-spacing: .01em; font-size: 1.15rem; margin-bottom: var(--sp-6); color: var(--color-text); }
.lp-price-note { text-align: center; color: var(--color-text-muted); font-size: 13px; margin-top: var(--sp-5); }
/* Polecenie (widoczność zniżki poleconego): pasek nad cennikiem + przekreślona cena bazowa */
.lp-ref-banner { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; flex-wrap: wrap; max-width: 620px; margin: 0 auto var(--sp-6); padding: var(--sp-3) var(--sp-4); background: rgba(224, 92, 24, .08); border: 1.5px solid var(--color-accent); border-radius: var(--radius); font-size: 14px; font-weight: 600; color: var(--color-accent-hover); }
/* `display:flex` powyżej nadpisałby domyślne [hidden]{display:none} (author > UA) → pusty box
   u niepoleconego gościa. Selektor z atrybutem (spec 0,2,0 > 0,1,0) przywraca ukrycie bez !important. */
.lp-ref-banner[hidden] { display: none; }
.lp-ref-banner svg { color: var(--color-accent); flex: none; }
.lp-ref-banner b { color: var(--color-text); }
.lp-plan-badge--ref { background: var(--color-accent-hover); }
.money-was { color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 2px; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; }
@media (max-width: 560px) { .lp-plans { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ — details/summary z chevronem
   ============================================================ */
.lp-faq { max-width: 760px; margin: 0 auto; }
.lp-faq details { border-bottom: var(--border-w) solid var(--color-border); padding: var(--sp-4) 0; }
.lp-faq details:first-child { border-top: var(--border-w) solid var(--color-border); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary .chev { flex: none; color: var(--color-accent); transition: transform .2s ease; }
.lp-faq details[open] summary .chev { transform: rotate(45deg); }
.lp-faq details p { color: var(--color-text-muted); margin-top: var(--sp-3); line-height: 1.6; max-width: 64ch; }

/* ============================================================
   CTA FINAŁ — pełna szerokość, grafit, plakietka + pasek hazard
   ============================================================ */
.lp-final { position: relative; overflow: hidden; background: var(--color-text); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-5); text-align: center; }
.lp-final .plaq { margin-bottom: var(--sp-4); }
.lp-final h2 { color: #fff; font-size: clamp(1.9rem, 5vw, 3rem); }
.lp-final p { color: rgba(255, 255, 255, .78); margin: var(--sp-4) auto 0; max-width: 46ch; }
.lp-final .lp-cta-row { margin-top: var(--sp-6); justify-content: center; }
.lp-final .lp-cta-note { color: rgba(255, 255, 255, .75); justify-content: center; width: 100%; }
.lp-final .hazard { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0; }

/* ============================================================
   STOPKA — 3 kolumny na desktop
   ============================================================ */
.lp-foot { padding: var(--sp-7) 0 var(--sp-6); border-top: var(--border-w) solid var(--color-border); }
.lp-foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); }
.lp-foot-col h4 { font-family: var(--font-body); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.lp-foot-col a { display: block; font-size: 14px; color: var(--color-text-muted); padding: 4px 0; }
.lp-foot-col a:hover { color: var(--color-text); text-decoration: none; }
.lp-foot-blurb { color: var(--color-text-muted); font-size: 13.5px; margin-top: var(--sp-3); max-width: 34ch; }
.lp-foot-copy { color: var(--color-text-muted); font-size: 13px; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
@media (max-width: 720px) { .lp-foot-cols { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .lp-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .lp-foot-cols { grid-template-columns: 1fr; } }

/* ============================================================
   S25 — PĘTLA POPRAWEK UX (K1-K2, I1-I11, KS1-KS7)
   Wyłącznie tokeny; sygnatura warsztatowa zachowana.
   ============================================================ */

/* ---- I1: afordans edycji inline (cennik + kreator) — kropkowane podkreślenie wartości
   edytowalnych + ikona ołówka (hover na desktopie, stale delikatnie na mobile). ---- */
.fm-edit {
  text-decoration: underline dotted var(--color-border-strong);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.fm-edit:focus-visible { text-decoration-color: var(--color-accent); }
.fm-pen {
  display: inline-flex; align-items: center; vertical-align: middle; margin-left: 5px;
  color: var(--color-text-muted); opacity: 0; transition: opacity .15s ease;
}
@media (hover: hover) {
  .fm-edit:hover { text-decoration-color: var(--color-accent); }
  .fm-edit:hover .fm-pen { opacity: .85; color: var(--color-accent-hover); }
}
/* Mobile / dotyk: brak hovera → ołówek stale, ale delikatnie */
@media (hover: none) { .fm-pen { opacity: .5; } }
/* Zamrożona oferta = read-only → bez afordansu edycji */
.kr-frozen .fm-edit { text-decoration: none; }
.kr-frozen .fm-pen { display: none; }
/* S36b — cel dotykowy komórek inline-edit ≥44px (WCAG 2.5.5) na urządzeniach dotykowych.
   Przezroczysty ::after rozszerza OBSZAR TAPNIĘCIA bez zmiany wyglądu; absolutny = poza flow,
   więc zero wpływu na wysokość wierszy/kart i poziomy scroll (detektor nachodzeń bloku 8 bez zmian).
   Klik w ::after trafia w element-host → odpala jego handler edycji. Desktop (hover) = bez zmian.
   Wspólny wzorzec .fm-edit → obejmuje WSZYSTKIE komórki kreatora i cennika (qty/cena/dział/nazwa). */
@media (hover: none) {
  .fm-edit[role="button"] { position: relative; }
  .fm-edit[role="button"]::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; min-width: 44px; height: 44px;
  }
  /* Zamrożona oferta = brak edycji → brak fantomowego celu dotykowego. */
  .kr-frozen .fm-edit::after { content: none; }
}

/* ---- I9: FAB „Zgłoś uwagę" — kolizje ze sticky-barem i treścią.
   Desktop kreator: podnieś nad sticky-sum (mobile już podniesiony w bloku „PULPIT"). ---- */
@media (min-width: 721px) {
  body.kr-active .fab { bottom: calc(var(--kr-sticky-h, 84px) + var(--sp-3)); transition: bottom .2s ease; }
}
/* Poza kreatorem na mobile: zapas na dole widoku, by FAB nie zasłaniał ostatniej ceny/wiersza. */
@media (max-width: 720px) {
  body:not(.kr-active) main.section { padding-bottom: calc(var(--sp-8) + var(--sp-4)); }
}

/* ---- I2: chip okresu próbnego w topnav (klik → paywall/plany). ---- */
.trial-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--sp-3); margin: 0 var(--sp-2); border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-text); font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  letter-spacing: .01em; cursor: pointer; white-space: nowrap; line-height: 1;
}
.trial-chip svg { color: var(--color-accent); flex: none; }
.trial-chip:hover { border-color: var(--color-accent); }
.trial-chip.trial-ended { border-color: var(--color-warning); color: var(--color-warning-text); }
.trial-chip.trial-ended svg { color: var(--color-warning); }
.trial-chip-mini { display: none; }
/* ≤860px (S27): w trybie menu mobilnego chip triala = wariant zwięzły „X dni". */
@media (max-width: 860px) {
  .trial-chip-full { display: none; }
  .trial-chip-mini { display: inline; }
  .trial-chip { font-size: 12px; padding: 4px var(--sp-2); }
}

/* ---- KS2/K2: modal potwierdzenia + modal nazwy firmy (design-systemowe, jak paywall) ---- */
.fm-modal-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-4); flex-wrap: wrap; }
@media (max-width: 480px) { .fm-modal-actions { flex-direction: column-reverse; } .fm-modal-actions .btn { width: 100%; } }

/* ============================================================
   MOBILE — sticky dolny pasek CTA (wzór .sticky-sum)
   Pojawia się po hero, znika przy widocznym CTA finału.
   ============================================================ */
.lp-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: none; padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-text); box-shadow: 0 -6px 20px rgba(38, 41, 43, .18); transform: translateY(110%); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.lp-sticky-cta.is-show { transform: translateY(0); }
.lp-sticky-cta .btn { width: 100%; }
@media (max-width: 760px) { .lp-sticky-cta { display: block; } }

/* ============================================================
   MODUŁ WIADOMOŚCI (panel operatora — tab „Wiadomości"): pod-zakładki, edytor szablonów,
   podgląd renderu w iframe. Wszystko na tokenach. */
.subtabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5);
  border-bottom: var(--border-w) solid var(--color-border); }
.subtab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: var(--sp-3) var(--sp-3); font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  color: var(--color-text-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.subtab:hover { color: var(--color-text); }
.subtab-active { color: var(--color-text); border-bottom-color: var(--color-accent); }

.msg-tpl-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .msg-tpl-grid { grid-template-columns: 260px 1fr; align-items: start; } }
.msg-tpl-editor { display: block; }
#tpl-list li { list-style: none; }
.tpl-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; text-align: left; background: transparent; border: var(--border-w) solid transparent;
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; color: var(--color-text);
}
.tpl-item:hover { background: var(--color-bg); }
.tpl-item-active { background: var(--color-bg); border-color: var(--color-border); font-weight: 600; }
.tpl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-text-muted); }
.tpl-dot.on { background: var(--color-success); }
.tpl-dot.off { background: var(--color-warning); }

.msg-preview-wrap { margin-top: var(--sp-4); }
.msg-preview {
  width: 100%; height: 420px; border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius); background: #f4f5f7;
}

/* ============================================================
   MODUŁ POLECENIA (S35) — prompt aha (pasek), licznik, panel operatora. Wszystko na tokenach. */
.aha-ref {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-left: 3px solid var(--color-accent); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); box-shadow: var(--shadow-sm);
}
.aha-ref #aha-referral-text { flex: 1 1 220px; font-size: .95rem; color: var(--color-text); }
.aha-ref-close {
  background: transparent; border: none; color: var(--color-text-muted); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 0 var(--sp-1);
}
.aha-ref-close:hover { color: var(--color-text); }
.ref-stats { color: var(--color-text-muted); }
.ref-stats b { color: var(--color-text); }

/* Panel operatora — statystyki poleceń (kafelki) + lista statusów (chipy). */
.ref-stat-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .ref-stat-grid { grid-template-columns: repeat(5, 1fr); } }
.ref-stat { background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.ref-stat .n { font-family: var(--font-head); font-size: 1.5rem; color: var(--color-text); }
.ref-stat .l { font-size: .8rem; color: var(--color-text-muted); }
.ref-chip { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 600; border: var(--border-w) solid var(--color-border); }
.ref-chip.invited  { color: var(--color-text-muted); }
.ref-chip.paid     { color: var(--color-warning-text); border-color: var(--color-warning); }
.ref-chip.rewarded { color: var(--color-success-text); border-color: var(--color-success); }
.ref-chip.refunded, .ref-chip.rejected { color: var(--color-error); border-color: var(--color-error); }

/* ============================================================
   DRUK (S31 #4) — Ctrl+P chowa CHROME aplikacji, treść widoku
   drukuje się czysto. Tylko ukrycie elementów sterujących/nakładek
   (topnav, FAB, sticky bary, pasek skoku cennika, onboarding,
   banery/overlaye/toasty) — BEZ przebudowy layoutu.
   ============================================================ */
@media print {
  .topnav,
  .nav-menu-panel,
  .nav-menu-mobile,
  .impersonation-banner,
  .fab,
  .aha-capture,
  .aha-ref,
  .toast,
  .sticky-sum,
  .cennik-jump,
  .onb-card,
  .overlay,
  .modal-backdrop,
  .lp-sticky-cta {
    display: none !important;
  }
}