:root {
    /* Pan Bazyli — paleta "tusz na papierze" (jasny motyw, docs/BRAND.md) */
    color-scheme: light;
    --font-ui: 'Barlow', system-ui, sans-serif;
    --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --bg: #FAF8F4;
    --bg-input: #FFFFFF;
    --card: #FFFFFF;
    --line: #E4DDD1;
    --acc: #A63B2E;
    --acc2: #8C2F24;
    --acc-light: #7A2A20;
    --acc-muted: rgba(166, 59, 46, 0.10);
    --acc-glow: rgba(166, 59, 46, 0.20);
    --acc-border: rgba(166, 59, 46, 0.30);
    --ok: #15803D;
    --warn: #92600A;
    --bad: #B91C1C;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --bnav-bar-h: 48px; /* rząd ikon: równy padding góra/dół (bez home indicator) */
    --info: #1D4ED8;
    --txt: #211C18;
    --mut: #7A6F5F;
    --shadow: rgba(33, 28, 24, .08);
  }
  /* Tryb ciemny — jak Word Online: chłodny szary chrome, jasny tekst; kartka dokumentu zostaje biała */
  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1B1B1B;
    --bg-input: #2D2D2D;
    --card: #252525;
    --line: #404040;
    --acc: #D06B5C;
    --acc2: #C45A4A;
    --acc-light: #E8A090;
    --acc-muted: rgba(208, 107, 92, 0.20);
    --acc-glow: rgba(208, 107, 92, 0.32);
    --acc-border: rgba(208, 107, 92, 0.45);
    --ok: #6BCB8B;
    --warn: #E0B44E;
    --bad: #E88888;
    --info: #6CB8F6;
    --txt: #F3F3F3;
    --mut: #B0B0B0;
    --shadow: rgba(0, 0, 0, .45);
  }
  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
  html,body { height:100%; background:var(--bg); color:var(--txt);
              font-family:var(--font-ui); font-size:15px; line-height:1.5; }
  /* Form controls — bez tego UA (Segoe/system) rozjeżdża się z Barlow w treści */
  button, input, select, textarea {
    font-family: inherit;
  }
  *:focus-visible { outline:2px solid var(--acc-light); outline-offset:2px; }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }

  /* Przełącznik trybu ciemnego — duży, czytelny dla 50+ */
  .theme-toggle-row {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    cursor:pointer; margin:0;
  }
  .theme-toggle-row .theme-toggle-copy { min-width:0; flex:1; }
  .theme-toggle-row .theme-toggle-copy strong {
    display:block; font-size:15px; font-weight:700; color:var(--txt); margin-bottom:2px;
  }
  .theme-toggle-row .theme-toggle-copy .field-hint { margin:0; }
  .theme-switch {
    position:relative; width:52px; height:30px; flex-shrink:0;
  }
  .theme-switch input {
    position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2;
  }
  .theme-switch .theme-switch-track {
    display:block; width:100%; height:100%; border-radius:999px;
    background:var(--line); border:1px solid var(--line);
    transition:background .2s, border-color .2s;
  }
  .theme-switch .theme-switch-thumb {
    position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
    background:var(--card); border:1px solid var(--line);
    box-shadow:0 1px 4px var(--shadow); transition:transform .2s, background .2s;
    pointer-events:none;
  }
  .theme-switch input:checked + .theme-switch-track {
    background:var(--acc); border-color:var(--acc);
  }
  .theme-switch input:checked ~ .theme-switch-thumb {
    transform:translateX(22px); background:#fff; border-color:transparent;
  }
  .theme-switch input:focus-visible + .theme-switch-track {
    outline:2px solid var(--acc-light); outline-offset:2px;
  }
  /* Ciemne / jasne pola — niezależnie od motywu panelu (jak w Organizacjach) */
  html[data-input-surface="light"] {
    --bg-input:#ffffff; --input-ink:#211C18; --input-line:#7A6F5F;
  }
  html[data-input-surface="dark"] {
    --bg-input:#2d2d2d; --input-ink:#f3f3f3; --input-line:#b0b0b0;
  }
  html[data-input-surface="light"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  html[data-input-surface="light"] select,
  html[data-input-surface="light"] textarea {
    background:#fff !important;
    color:#211C18 !important;
    -webkit-text-fill-color:#211C18 !important;
    border-color:#7A6F5F !important;
    color-scheme:only light;
  }
  html[data-input-surface="light"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
  html[data-input-surface="light"] select:focus,
  html[data-input-surface="light"] textarea:focus {
    border-color:var(--acc) !important;
  }
  html[data-input-surface="light"] select option,
  html[data-input-surface="light"] select optgroup {
    background:#fff !important;
    color:#211C18 !important;
  }
  html[data-input-surface="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  html[data-input-surface="dark"] select,
  html[data-input-surface="dark"] textarea {
    background:#2d2d2d !important;
    color:#f3f3f3 !important;
    -webkit-text-fill-color:#f3f3f3 !important;
    border-color:#b0b0b0 !important;
    color-scheme:only dark;
  }
  html[data-input-surface="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
  html[data-input-surface="dark"] select:focus,
  html[data-input-surface="dark"] textarea:focus {
    border-color:var(--acc) !important;
  }
  html[data-input-surface="dark"] select option,
  html[data-input-surface="dark"] select optgroup {
    background:#2d2d2d !important;
    color:#f3f3f3 !important;
  }
  html[data-input-surface="light"] input::placeholder,
  html[data-input-surface="light"] textarea::placeholder {
    color:#7A6F5F; -webkit-text-fill-color:#7A6F5F;
  }
  html[data-input-surface="dark"] input::placeholder,
  html[data-input-surface="dark"] textarea::placeholder {
    color:#9a9a9a; -webkit-text-fill-color:#9a9a9a;
  }
  /* Ustawienia: contenteditable nagłówek/stopka jak pozostałe pola (nie papier dokumentu) */
  html[data-input-surface="light"] .settings-chrome-ce {
    background:#fff !important;
    color:#211C18 !important;
    border-color:#7A6F5F !important;
  }
  html[data-input-surface="dark"] .settings-chrome-ce {
    background:#2d2d2d !important;
    color:#f3f3f3 !important;
    border-color:#b0b0b0 !important;
  }
  /* UI-chrome: białe „papierowe” tła → tokeny; arkusz dokumentu (.doc-sheet) zostaje biały */
  html[data-theme="dark"] .office-fab-badge { border-color:var(--bg); }
  html[data-theme="dark"] .badge.MALA { color:var(--info); }
  html[data-theme="dark"] .badge.MIKRO,
  html[data-theme="dark"] .gap-badge.attention { color:var(--warn); }
  html[data-theme="dark"] .gap-badge.incomplete,
  html[data-theme="dark"] .val-banner.bad { color:var(--bad); }
  html[data-theme="dark"] .field-tile.is-selected {
    box-shadow:0 0 0 2px var(--bg), 0 0 0 4px rgba(208,107,92,.45), 0 0 0 0 transparent;
  }
  html[data-theme="dark"] .office-panel-head {
    background:var(--card);
  }
  html[data-theme="dark"] .office-msg.is-me .bubble {
    background:rgba(255,255,255,.08);
  }
  html[data-theme="dark"] .office-panel-mascot,
  html[data-theme="dark"] .office-panel-mascot video,
  html[data-theme="dark"] .office-panel-mascot img,
  html[data-theme="dark"] .support-hero video,
  html[data-theme="dark"] .support-chat .empty video {
    background:var(--bg-input);
  }
  html[data-theme="dark"] .help-sub-tabs button.is-on .nav-badge,
  html[data-theme="dark"] .rd-reality button.is-on .nav-badge {
    background:var(--card); color:var(--acc);
  }
  html[data-theme="dark"] .rd-manual-toggle .sw::after { background:var(--card); }

  /* ── LOGIN ── */
  #loginScreen { display:flex; align-items:center; justify-content:center;
                 min-height:100vh; padding:24px; }
  .login-box { background:var(--card); border:1px solid var(--line); border-radius:16px;
               padding:36px 28px; width:100%; max-width:380px; }
  .login-box h1 { margin:0 0 8px; text-align:center; }
  .login-box .sub { display:none !important; }
  .login-or {
    display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--mut); font-size:12px;
  }
  .login-or::before, .login-or::after { content:''; flex:1; height:1px; background:var(--line); }
  .btn-passkey, .login-passkey {
    width:100%; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:1px solid var(--line); background:var(--card); color:var(--txt); border-radius:10px;
    font:inherit; font-weight:600; cursor:pointer;
  }
  .btn-passkey:hover, .login-passkey:hover { border-color:var(--acc); color:var(--acc); }
  .login-passkey-hint { margin:8px 0 0; text-align:center; }
  .login-or.is-hidden, .btn-passkey.is-hidden, .login-passkey.is-hidden, .login-passkey-hint.is-hidden { display:none !important; }
  .passkey-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); }
  .passkey-row:first-child { border-top:0; padding-top:0; }
  .passkey-row .passkey-meta { flex:1; min-width:0; }
  .passkey-row .passkey-name { font-weight:600; font-size:13px; }
  .passkey-row .passkey-sub { font-size:12px; color:var(--mut); }
  /* Brand lockup (topbar = w poziomie; login = kolumna — niżej) */
  .brand-lockup { display:inline-flex; align-items:center; gap:12px; text-align:left;
    max-width:100%; text-decoration:none; color:inherit; }
  .brand-lockup .brand-mark { width:56px; height:56px; flex-shrink:0; display:block;
    border-radius:50%; object-fit:contain; transform-style:preserve-3d; position:relative; }
  .brand-lockup .brand-mark-wrap {
    position:relative; width:56px; height:56px; flex-shrink:0;
    perspective:400px; border-radius:50%;
  }
  .brand-lockup .brand-mark-live {
    position:absolute; inset:0; width:100%; height:100%;
    border-radius:50%; object-fit:cover; display:none; pointer-events:none;
    background:#fff;
  }
  .brand-lockup .brand-mark-wrap.is-live {
    overflow:hidden;
  }
  .brand-lockup .brand-mark-wrap.is-live .brand-mark { visibility:hidden; }
  .brand-lockup .brand-mark-wrap.is-live .brand-mark-live { display:block; }
  .topbar .brand-lockup .brand-mark-wrap { width:44px; height:44px; }
  .topbar .brand-lockup .brand-mark { width:100%; height:100%; }
  .brand-lockup .brand-mark-wrap::after {
    content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    background-size:220% 100%; background-position:180% 0; opacity:0;
  }
  .brand-lockup.is-flipping .brand-mark,
  .brand-lockup.is-flipping .brand-mark-live { animation: bazyliCoinFlip .55s cubic-bezier(.2,.8,.2,1); }
  .brand-lockup.is-flipping .brand-mark-wrap::after { opacity:1; animation: bazyliShine .55s ease-out; }
  .brand-lockup.is-flipping .brand-text { animation: bazyliTextNudge .55s cubic-bezier(.2,.8,.2,1); }
  .brand-lockup.is-flipping .brand-title { animation: bazyliTitleFlash .55s ease-out; }
  .brand-lockup.is-flipping .brand-sub { animation: bazyliSubFade .55s ease-out; }
  @keyframes bazyliCoinFlip {
    0%   { transform: rotateY(0deg) scale(1); }
    40%  { transform: rotateY(180deg) scale(1.08); }
    100% { transform: rotateY(360deg) scale(1); }
  }
  @keyframes bazyliShine {
    0%   { background-position:180% 0; opacity:0; }
    30%  { opacity:1; }
    100% { background-position:-40% 0; opacity:0; }
  }
  @keyframes bazyliTextNudge {
    0%   { transform: translateX(0); opacity:1; }
    35%  { transform: translateX(4px); opacity:.72; }
    100% { transform: translateX(0); opacity:1; }
  }
  @keyframes bazyliTitleFlash {
    0%, 100% { color: var(--acc); letter-spacing:.15px; }
    40% { color: var(--acc2); letter-spacing:.6px; }
  }
  @keyframes bazyliSubFade {
    0%, 100% { opacity:1; transform: translateY(0); }
    40% { opacity:.45; transform: translateY(1px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand-lockup.is-flipping .brand-mark,
    .brand-lockup.is-flipping .brand-mark-live,
    .brand-lockup.is-flipping .brand-mark-wrap::after,
    .brand-lockup.is-flipping .brand-text,
    .brand-lockup.is-flipping .brand-title,
    .brand-lockup.is-flipping .brand-sub { animation: none; }
  }
  .brand-lockup .brand-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .brand-lockup .brand-title { font-family:'Barlow Condensed',sans-serif; font-weight:700;
    font-size:28px; line-height:1.05; letter-spacing:.2px; color:var(--txt); }
  .brand-lockup .brand-sub { font-family:'Barlow',sans-serif; font-weight:500;
    font-size:12px; line-height:1.25; color:var(--mut); }
  /* Login: duże logo na środku → tytuł → podtytuł */
  .login-box .brand-lockup {
    display:flex !important; flex-direction:column !important; align-items:center;
    justify-content:center; text-align:center; gap:12px; margin:0 auto 28px; width:100%;
    cursor:pointer; border:0; background:transparent; padding:0; font:inherit;
  }
  .login-box .brand-lockup:focus-visible {
    outline:2px solid var(--acc); outline-offset:4px; border-radius:12px;
  }
  .login-box .brand-lockup .brand-mark-wrap {
    width:120px; height:120px; margin:0 auto;
  }
  .login-box .brand-lockup .brand-mark {
    width:100%; height:100%; margin:0; display:block; border-radius:50%;
    object-fit:cover; box-shadow:0 10px 32px rgba(166,59,46,.3); border:3px solid var(--acc);
  }
  .login-box .brand-lockup .brand-text {
    display:flex; flex-direction:column; align-items:center; gap:6px; width:100%;
  }
  .login-box .brand-lockup .brand-title {
    font-family:'Barlow Condensed',sans-serif; font-size:42px; font-weight:700;
    letter-spacing:.15px; color:var(--acc); line-height:1.05;
  }
  .login-box .brand-lockup .brand-sub {
    font-family:'Barlow',sans-serif; font-weight:500; font-size:14px;
    line-height:1.4; color:var(--mut); max-width:28ch;
  }
  .field { margin-bottom:16px; }
  .field label { display:block; font-size:12px; color:var(--mut); font-weight:600;
                 text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
  .field input { width:100%; background:var(--bg-input); border:1px solid var(--line);
                 border-radius:8px; padding:10px 12px; color:var(--txt);
                 font-family:'Barlow',sans-serif; font-size:15px; outline:none; }
  .field input:focus { border-color:var(--acc); }
  .btn-primary { width:100%; background:var(--acc); color:#fff; border:none;
                 border-radius:8px; padding:12px; font-family:'Barlow',sans-serif;
                 font-size:15px; font-weight:700; cursor:pointer; margin-top:4px; }
  .btn-primary:hover { background:var(--acc2); box-shadow:0 4px 14px var(--acc-glow); }
  .err-msg { color:var(--bad); font-size:13px; margin-top:10px; text-align:center; }
  .legal-checks { text-align:left; margin:12px 0 4px; font-size:12.5px; color:var(--txt); }
  .legal-checks label {
    display:flex; gap:8px; align-items:flex-start; margin:8px 0; cursor:pointer; line-height:1.4;
  }
  .legal-checks label:not(.legal-checks-all) {
    margin-left:22px;
  }
  .legal-checks input[type="checkbox"] { margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--acc); }
  .legal-checks a { color:var(--acc); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
  .legal-checks-all {
    margin-bottom:6px; margin-left:0; padding-bottom:8px; border-bottom:1px solid var(--line);
    font-weight:600;
  }
  .legal-checks-all span { color:var(--txt); }
  .legal-login-links { margin-top:12px; font-size:11px; color:var(--mut); text-align:center; line-height:1.5; }
  .legal-login-links a { color:var(--mut); text-decoration:underline; }
  .legal-accept-box .legal-checks { margin-top:4px; }

  /* Akceptacja konta — pod dokumentem prawnym */
  #modalLegalAccount { z-index:5100; }
  #modalLegalTemplate,
  #modalLegalStarter { z-index:5100; }
  /* Podgląd regulaminu / DPA — ZAWSZE nad modalem akceptacji */
  #modalLegalDoc.modal-bg {
    z-index:5400;
    align-items:center;
    justify-content:center;
    padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    overflow:auto;
  }
  .legal-doc-modal {
    width:min(920px, calc(100vw - 24px)) !important;
    max-width:min(920px, calc(100vw - 24px)) !important;
    max-height:none;
    margin:12px auto;
    border-radius:10px;
    padding:12px 12px 14px;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
  }
  .legal-doc-modal > h3 { margin:0 28px 4px 0; font-size:17px; }
  .legal-doc-sheet {
    margin-top:8px;
    background:#fff;
    color:#1a1614;
    width:100%;
    flex:1 1 auto;
    min-height:min(80vh, 900px);
    max-height:calc(100dvh - 120px);
    overflow:auto;
    padding:28px 36px 36px;
    box-sizing:border-box;
    border:1px solid #d4cdc3;
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 8px 28px rgba(0,0,0,.22);
    border-radius:4px;
  }
  .legal-doc-body {
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    border-radius:0;
    max-height:none;
    overflow:visible;
    white-space:pre-wrap;
    word-wrap:break-word;
    overflow-wrap:anywhere;
    text-align:left;
    font-family:"Times New Roman", Times, "Liberation Serif", Georgia, serif;
    font-size:12.5pt;
    line-height:1.5;
    color:#1a1614;
  }
  @media (max-width:640px) {
    .legal-doc-modal {
      width:calc(100vw - 16px) !important;
      max-width:calc(100vw - 16px) !important;
      margin:8px auto;
      padding:10px;
    }
    .legal-doc-sheet {
      padding:18px 16px 24px;
      min-height:60vh;
      max-height:calc(100dvh - 110px);
    }
    .legal-doc-body { font-size:11.5pt; }
  }

  /* ── APP SHELL ── */
  #app { display:none; flex-direction:column; height:100vh; height:100dvh;
         max-height:100dvh; }
  #app.is-active { display:flex; }
  /* Topbar: Pan Bazyli (lewo) · logo biura (środek) · akcje (prawo) */
  .topbar { background:var(--card); border-bottom:1px solid var(--line);
            padding:12px 16px; padding-top:max(12px, var(--safe-top));
            display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
            align-items:center; gap:12px; min-height:72px; }
  .topbar .logo { display:flex; align-items:center; justify-self:start; min-width:0; }
  .topbar .brand-lockup {
    gap:8px; opacity:.92; cursor:pointer; border:0; background:transparent;
    padding:0; font:inherit; text-align:left; max-width:100%;
  }
  .topbar .brand-lockup:hover { opacity:1; }
  .topbar .brand-lockup:focus-visible {
    outline:2px solid var(--acc); outline-offset:3px; border-radius:8px;
  }
  .topbar .brand-lockup .brand-mark { width:44px; height:44px;
    border:2px solid var(--acc); box-shadow:0 2px 10px rgba(166,59,46,.18); }
  .topbar .brand-lockup .brand-title {
    font-size:18px; font-weight:700; color:var(--acc); letter-spacing:.15px;
  }
  .topbar .brand-lockup .brand-sub {
    font-size:11px; line-height:1.25; color:var(--mut);
    white-space:normal; max-width:min(36ch, 42vw);
  }
  .topbar .tenant-context {
    justify-self:center; text-align:center; min-width:0; max-width:min(52vw, 420px);
    padding:4px 8px; border:0; background:transparent; cursor:pointer; font:inherit; color:inherit;
    display:flex; align-items:center; justify-content:center; gap:10px; border-radius:10px;
  }
  .topbar .tenant-context:hover { background:transparent; }
  .topbar .tenant-context:hover .tenant-logo,
  .topbar .tenant-context:hover .tenant-name {
    animation: officeLogoWiggle .45s ease-in-out;
  }
  .topbar .tenant-context:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
  .topbar .tenant-context.is-nudging .tenant-logo,
  .topbar .tenant-context.is-nudging .tenant-name {
    animation: officeLogoPulse .55s ease-in-out;
  }
  .topbar .tenant-context .tenant-logo {
    height:44px; width:auto; max-width:200px; object-fit:contain; display:none; flex-shrink:0;
    border-radius:6px; transform-origin:center center;
  }
  @keyframes officeLogoWiggle {
    0%   { transform: scale(1) rotate(0deg); }
    25%  { transform: scale(1.06) rotate(-1.5deg); }
    50%  { transform: scale(1.08) rotate(1.5deg); }
    75%  { transform: scale(1.05) rotate(-0.8deg); }
    100% { transform: scale(1.04) rotate(0deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .topbar .tenant-context:hover .tenant-logo,
    .topbar .tenant-context:hover .tenant-name,
    .topbar .tenant-context.is-nudging .tenant-logo,
    .topbar .tenant-context.is-nudging .tenant-name { animation: none; }
  }
  .topbar .tenant-context.has-logo .tenant-logo { display:block; }
  .topbar .tenant-context.has-logo { max-width:min(60vw, 280px); }
  .topbar .tenant-context .tenant-name {
    font-family:'Barlow Condensed',sans-serif; font-weight:700;
    font-size:22px; line-height:1.15; letter-spacing:.3px; color:var(--txt);
    overflow:hidden; min-width:0; text-align:center;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    white-space:normal; word-break:break-word;
  }
  .topbar .tenant-context .tenant-name.is-long { font-size:16px; line-height:1.2; }
  .topbar .tenant-context .tenant-name.is-xl { font-size:14px; line-height:1.2; }
  .topbar .topbar-actions {
    display:flex; align-items:center; justify-content:flex-end; gap:8px;
    justify-self:end; flex-shrink:0;
  }
  .topbar .user-btn {
    background:var(--bg); border:1px solid var(--line); border-radius:10px;
    color:var(--txt); font-family:'Barlow',sans-serif; font-size:13px; font-weight:600;
    min-height:44px; min-width:44px; padding:0 14px; cursor:pointer; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .topbar .user-btn:hover { border-color:var(--acc); background:var(--acc-muted); }
  .topbar .user-btn#btnLogout { color:var(--mut); }
  .topbar .user-btn .user-btn-ico { display:none; font-size:18px; line-height:1; }
  .topbar .pay-chip {
    border-color: rgba(166,59,46,.4);
    background: rgba(166,59,46,.1);
    color: var(--acc);
    gap: 6px;
    max-width: 170px;
  }
  .topbar .pay-chip .user-btn-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar .pay-chip.is-urgent {
    border-color: #991b1b;
    background: #7f1d1d;
    color: #fff;
  }
  .topbar .pay-chip .user-btn-ico { display: inline; font-size: 14px; }
  @keyframes officeLogoPulse { 0%,100% { transform:scale(1) rotate(0); } 50% { transform:scale(1.06) rotate(-2deg); } }

  /* ── Telefon (<640): zwarty nagłówek + ikonowe menu ── */
  @media (max-width:639.98px) {
    /* iOS Safari: fixed bottom nav chowa się przy scrollu / dynamicznym chrome —
       bnav w flow (flex), nie position:fixed */
    #app.is-active {
      height:100dvh; max-height:100dvh;
      overflow:hidden;
    }
    .topbar {
      grid-template-columns:auto 1fr;
      padding:8px 12px; min-height:56px; gap:8px;
      flex-shrink:0;
    }
    /* Logo biura / nazwa — za mało miejsca; wejście w ustawienia przez ⚙ */
    .topbar .tenant-context { display:none !important; }
    .topbar .brand-lockup .brand-text { display:none; }
    .topbar .brand-lockup .brand-mark { width:40px; height:40px; }
    .topbar .logo { grid-column:1; }
    .topbar .topbar-actions { grid-column:2; gap:6px; }
    .topbar .user-btn { padding:0 10px; min-height:40px; font-size:12px; }
    .topbar .user-btn#btnSettings { width:40px; min-width:40px; padding:0; }
    .topbar .user-btn#btnSettings .user-btn-lbl { display:none; }
    .topbar .user-btn#btnSettings .user-btn-ico { display:inline; }
    .topbar .pay-chip { max-width: 44px; min-width: 44px; padding: 0; }
    .topbar .pay-chip .user-btn-lbl { display: none; }
    .topbar .pay-chip .user-btn-ico { display: inline; }

    .main {
      flex:1 1 auto; min-height:0;
      overflow-y:auto; -webkit-overflow-scrolling:touch;
      padding-bottom:16px;
    }
    .bnav-wrap {
      position:relative; flex-shrink:0; width:100%;
      background:var(--card); border-top:1px solid var(--line);
      z-index:100;
    }
    .bnav {
      position:relative; /* NIE fixed — zawsze widoczne na iOS */
      bottom:auto; left:auto; right:auto;
      width:100%; border-top:none;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; justify-content:flex-start; align-items:center;
      padding:0 22px var(--safe-bottom) 4px;
      background:transparent;
      z-index:auto;
    }
    .bnav::-webkit-scrollbar { display:none; }
    .bnav button {
      flex:0 0 auto !important; min-width:52px !important; max-width:none !important;
      width:52px; height:var(--bnav-bar-h); min-height:var(--bnav-bar-h);
      padding:0; gap:0; box-sizing:border-box;
      justify-content:center; align-items:center;
    }
    .bnav button .nav-lbl { display:none; }
    .bnav button .ico { font-size:22px; line-height:1; }
    .bnav button .ico svg { width:22px; height:22px; }
  }
  /* Strzałki menu — fixed, poza flow; widoczność ustawia JS (inline style) */
  .bnav-edge {
    display:none; position:fixed; z-index:10050;
    width:26px; align-items:center; justify-content:center;
    pointer-events:none; color:#A63B2E;
    text-shadow:0 0 6px #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
  }
  .bnav-edge svg { width:16px; height:16px; display:block; filter:drop-shadow(0 0 2px #fff); }
  .bnav-edge.is-on { display:flex !important; }
  .bnav-edge.is-on svg { animation:bnavArrowPulse 1.5s ease-in-out infinite; }
  .bnav-edge-left.is-on svg { animation-name:bnavArrowPulseLeft; }
  @keyframes bnavArrowPulse {
    0%, 100% { transform:translateX(0); opacity:.5; }
    50% { transform:translateX(3px); opacity:1; }
  }
  @keyframes bnavArrowPulseLeft {
    0%, 100% { transform:translateX(0); opacity:.5; }
    50% { transform:translateX(-3px); opacity:1; }
  }
  @media (min-width:640px) {
    .bnav-wrap { display:contents; }
    .bnav-edge { display:none !important; }
  }
  @media (max-width:480px) {
    .topbar .user-btn#btnLogout { padding:0 8px; font-size:11px; }
  }
  .main { flex:1; overflow-y:auto; padding:16px; padding-bottom:calc(88px + var(--safe-bottom)); max-width:640px;
          margin:0 auto; width:100%; }
  @media (min-width:900px) {
    .main { max-width:720px; padding:20px 24px 88px; }
  }

  /* ── NAGŁÓWEK STRONY + SEGMENTY ── */
  .page-header { margin-bottom:16px; }
  .page-header-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .page-header h1 { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700;
    text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
  .page-header p { font-size:13px; color:var(--mut); line-height:1.45; }
  .seg-ctrl { display:flex; gap:0; margin-bottom:14px; background:var(--bg-input);
    border:1px solid var(--line); border-radius:10px; padding:3px; }
  .seg-ctrl button { flex:1; border:none; background:transparent; color:var(--mut);
    font-family:'Barlow',sans-serif; font-size:13px; font-weight:600; padding:10px 8px;
    border-radius:8px; cursor:pointer; transition:background .15s,color .15s; }
  .seg-ctrl button.active { background:var(--acc); color:#fff; box-shadow:0 2px 8px var(--acc-glow); }
  .quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .wystaw-hub { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:4px; }
  .wystaw-hub-tile {
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; min-height:148px; padding:18px 12px; text-align:center; cursor:pointer;
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 1px 0 rgba(33,28,24,.04); transition:border-color .15s, transform .15s, box-shadow .15s;
    font:inherit; color:inherit; width:100%;
  }
  .wystaw-hub-tile:hover, .wystaw-hub-tile:focus-visible {
    border-color:var(--acc-border); outline:none;
    box-shadow:0 4px 16px rgba(33,28,24,.08); transform:translateY(-1px);
  }
  .wystaw-hub-tile:active { transform:translateY(0); }
  .wystaw-hub-emoji { font-size:42px; line-height:1; }
  .wystaw-hub-title { font-family:var(--font-display, inherit); font-size:17px; font-weight:700; letter-spacing:-.01em; }
  .wystaw-hub-sub { font-size:13px; color:var(--mut); line-height:1.35; max-width:16em; }
  .wystaw-hub-badge {
    position:absolute; top:10px; right:10px; min-width:22px; height:22px; padding:0 6px;
    border-radius:999px; background:var(--acc); color:#fff; font-size:12px; font-weight:700;
    display:none; align-items:center; justify-content:center;
  }
  @media (max-width:640px) {
    .wystaw-hub { grid-template-columns:1fr; }
    .wystaw-hub-tile { min-height:120px; flex-direction:row; justify-content:flex-start; text-align:left; gap:14px; padding:16px 18px; }
    .wystaw-hub-emoji { font-size:36px; flex-shrink:0; }
    .wystaw-hub-sub { max-width:none; }
  }
  .qa { background:var(--bg-input); border:1px solid var(--line); border-radius:10px;
    padding:14px 12px; text-align:left; cursor:pointer; color:var(--txt);
    font-family:'Barlow',sans-serif; font-size:13px; font-weight:600; line-height:1.35;
    transition:border-color .15s,background .15s; }
  .qa:hover { border-color:var(--acc); background:var(--acc-muted); }
  .qa .qa-ico { font-size:22px; display:block; margin-bottom:6px; }
  .qa .qa-sub { display:block; font-size:11px; font-weight:400; color:var(--mut); margin-top:3px; }
  .panel-details { border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden; background:var(--card); }
  .panel-details summary { padding:12px 14px; font-family:var(--font-ui); font-weight:600; font-size:14px; cursor:pointer;
    background:var(--bg-input); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .panel-details summary::-webkit-details-marker { display:none; }
  .panel-details summary::after {
    content:'▼'; font-size:11px; color:var(--mut); transition:transform .2s ease;
    flex-shrink:0; margin-left:auto; line-height:1;
  }
  .panel-details[open] summary::after { transform:rotate(180deg); }
  .panel-details .panel-body { padding:14px; border-top:1px solid var(--line); }
  /* Wszystkie <details> (nie tylko .panel-details) — ten sam sygnał „rozwijalne” */
  details > summary { list-style:none; cursor:pointer; }
  details > summary::-webkit-details-marker { display:none; }
  details:not(.panel-details) > summary {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  details:not(.panel-details) > summary::after {
    content:'▼'; font-size:11px; color:var(--mut); transition:transform .2s ease;
    flex-shrink:0; margin-left:auto; line-height:1;
  }
  details:not(.panel-details)[open] > summary::after { transform:rotate(180deg); }
  .nb-office-details > summary::after { display:none !important; }
  .workflow-hint { font-size:12px; color:var(--mut); padding:10px 12px; background:var(--bg-input);
    border-radius:8px; margin-bottom:14px; line-height:1.5; border-left:3px solid var(--acc); }

  /* ── BOTTOM NAV ── */
  .bnav { position:fixed; bottom:0; left:0; right:0; background:var(--card);
          border-top:1px solid var(--line); display:flex; z-index:100;
          padding-bottom:var(--safe-bottom); }
  .bnav button { flex:1; background:none; border:none; color:var(--mut); font-family:'Barlow',sans-serif;
                 font-size:11px; font-weight:600; padding:8px 4px; cursor:pointer;
                 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
  .bnav button .ico { font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
  .bnav button .ico svg { width:22px; height:22px; display:block; }
  .bnav button.active { background:var(--acc); color:#fff; }
  .bnav button.active .ico { filter:none; }
  /* Separator pracy / pomocy — tylko sidebar desktop */
  .bnav-sep { display:none; }

  /* ── DESKTOP SHELL: sidebar zamiast dolnej nawigacji (od 640px) ── */
  @media (min-width:640px) {
    #app.is-active { display:grid; grid-template-columns:64px 1fr; grid-template-rows:76px 1fr;
                      height:100vh; overflow:hidden; }
    .topbar { grid-column:1/3; grid-row:1; border-bottom:1px solid var(--line); min-height:76px; }
    .topbar .brand-lockup .brand-mark { width:48px; height:48px; }
    .topbar .brand-lockup .brand-title { font-size:20px; }
    .topbar .brand-lockup .brand-sub { max-width:40ch; font-size:12px; }
    .topbar .tenant-context .tenant-name { font-size:26px; }
    .bnav { position:relative; grid-column:1; grid-row:2; height:100%; width:auto;
            display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
            gap:0; padding:10px; padding-bottom:10px; border-top:none; border-right:1px solid var(--line);
            overflow:visible; z-index:40; }
    /* padding 10px + kafelek 44px + 10px = 64px → kwadrat na środku szyny;
       align-items:flex-start → expand rośnie w PRAWO (nie od środka). */
    .bnav-sep {
      display:block; width:44px; height:1px; flex-shrink:0; align-self:flex-start;
      margin:10px 0 6px;
      background:var(--line); border:0; opacity:.85;
    }
    .bnav button {
      flex:none; flex-direction:row; justify-content:flex-start; align-items:center;
      gap:0; width:44px; height:44px; max-width:44px; min-height:44px;
      overflow:hidden; white-space:nowrap;
      padding:0; border-radius:10px;
      border:1px solid transparent;
      font-size:13.5px; font-weight:600; color:var(--mut);
      transition: background .2s ease, color .18s ease, border-color .18s ease;
    }
    /* Ikona wypełnia kwadrat → zawsze na środku złożonego kafelka */
    .bnav button .ico {
      flex:0 0 44px; width:44px; height:44px; max-width:44px;
      display:inline-flex; align-items:center; justify-content:center;
      font-size:20px; line-height:1; text-align:center;
    }
    .bnav button .ico svg { width:22px; height:22px; }
    .bnav button .nav-lbl {
      display:block; flex:0 0 auto; width:0; max-width:0; min-width:0;
      opacity:0; overflow:hidden; white-space:nowrap;
    }
    .bnav button.active { background:var(--acc); color:#fff; border-color:var(--acc); }
    .bnav button .nav-badge { top:4px; right:4px; }
    .bnav button.active:hover { background:var(--acc2); color:#fff; border-color:var(--acc2); }
    .main { grid-column:2; grid-row:2; height:100%; max-width:none; margin:0;
            padding:24px 28px 32px; }
  }
  /* Wąski desktop (640–1279): wysuwanie + uchylanie sąsiadów. ≥1280 — etykiety stale, bez ruchu. */
  @media (min-width:640px) and (max-width:1279.98px) {
    .bnav button {
      transition:
        width .26s ease-out,
        max-width .26s ease-out,
        background .2s ease,
        box-shadow .2s ease,
        color .18s ease,
        border-color .18s ease;
    }
    .bnav button .nav-lbl {
      transition: opacity .22s ease-out, max-width .26s ease-out, width .26s ease-out;
    }
    .bnav button:hover {
      width:200px; max-width:200px; height:44px;
      background:var(--card); color:var(--txt);
      box-shadow:0 2px 10px rgba(33,28,24,.08);
      border-color:var(--line); z-index:50;
    }
    .bnav button:hover .nav-lbl {
      opacity:1; width:auto; max-width:140px; padding-right:12px;
    }
    .bnav button:hover .nav-badge { position:static; margin-left:auto; margin-right:8px; }
    .bnav button:has(+ button:hover),
    .bnav button:hover + button {
      width:150px; max-width:150px; height:44px;
      background:rgba(255,255,255,.85); color:var(--mut);
      border-color:rgba(228,221,209,.8); z-index:45;
    }
    .bnav button:has(+ button:hover) .nav-lbl,
    .bnav button:hover + button .nav-lbl {
      opacity:.75; width:auto; max-width:100px; padding-right:10px;
    }
    .bnav button.active:has(+ button:hover),
    .bnav button:hover + button.active {
      background:var(--acc); color:#fff; border-color:var(--acc);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bnav button,
    .bnav button .nav-lbl { transition:none !important; }
  }
  @media (min-width:1280px) {
    #app.is-active { grid-template-columns:240px 1fr; }
    .bnav { padding:16px 10px; gap:4px; overflow:visible; z-index:auto; align-items:stretch; }
    .bnav-sep {
      width:auto; align-self:stretch; margin:12px 8px 6px;
      opacity:.9;
    }
    .bnav button {
      flex-direction:row; justify-content:flex-start; gap:10px;
      width:auto; max-width:none; height:auto; min-height:44px; overflow:visible;
      padding:9px 12px; font-size:13.5px; font-weight:600;
      border:none; box-shadow:none; border-radius:8px;
      transition: background .15s ease, color .15s ease;
    }
    .bnav button .ico {
      flex:none; width:auto; height:auto; max-width:none;
      display:inline-flex; align-items:center; justify-content:center;
      font-size:17px;
    }
    .bnav button .ico svg { width:18px; height:18px; }
    .bnav button .nav-lbl {
      opacity:1; max-width:none; width:auto; min-width:0; overflow:visible;
      transform:none; transition:none; padding:0;
    }
    .bnav button:hover {
      width:auto; max-width:none; height:auto;
      background:var(--acc-muted); box-shadow:none; border:none;
      gap:10px; padding:9px 12px; z-index:auto;
    }
    .bnav button.active:hover {
      background:var(--acc2); color:#fff; border:none;
    }
    /* Nie nadpisuj tła sąsiadów — inaczej aktywny kafelek „znika” przy hoverze obok */
    .bnav button.active {
      background:var(--acc); color:#fff;
    }
    .bnav button .nav-badge { position:static; margin-left:auto; margin-right:0; }
    /* .main wypełnia całą kolumnę — kółko / przeciąganie w bocznej „wolnej” przestrzeni
       też przewija główny scroll; treść trzymamy w ~1320px przez padding. */
    .main {
      max-width:none; margin:0; width:100%;
      padding:32px max(44px, calc(50% - 660px)) 44px;
    }

    /* Typografia — na dużym monitorze tekst skalowany z prototypu mobile wygląda drobno */
    html,body { font-size:16px; }
    .topbar { padding:14px 28px; min-height:84px; }
    .topbar .brand-lockup { gap:10px; }
    .topbar .brand-lockup .brand-mark { width:50px; height:50px; }
    .topbar .brand-lockup .brand-title { font-size:22px; }
    .topbar .tenant-context { max-width:480px; }
    .topbar .tenant-context .tenant-name { font-size:30px; }
    .topbar .user-btn { font-size:14px; padding:0 16px; }
    .page-header { margin-bottom:22px; }
    .page-header h1 { font-size:29px; }
    .page-header p { font-size:15px; }
    .card { padding:22px; margin-bottom:16px; }
    .card h2 { font-size:18px; margin-bottom:18px; }
    .kpi-grid { gap:14px; margin-bottom:16px; }
    .kpi { padding:18px 14px; }
    .kpi .val { font-size:40px; }
    .kpi .lbl { font-size:13px; }
    .seg-ctrl button { font-size:14.5px; padding:12px 10px; }
    .quick-grid { gap:14px; }
    .qa { padding:18px 16px; font-size:15px; }
    .qa .qa-ico { font-size:26px; margin-bottom:8px; }
    .qa .qa-sub { font-size:13px; }
    .search-row input { font-size:15px; padding:11px 14px; }
    .list-item { padding:16px 18px; margin-bottom:10px; }
    .list-item .name { font-size:17px; }
    .list-item .nip { font-size:13px; }
    .list-item .hint { font-size:12.5px; }
    .workflow-hint { font-size:13px; padding:12px 14px; }
    .panel-details summary { font-size:15px; padding:14px 16px; }
    .badge { font-size:11px; padding:3px 9px; }
    .gap-badge { font-size:11px; padding:3px 9px; }
    .profile-issue { font-size:14px; padding:12px 14px; }
    .modal h3 { font-size:20px; }
    .form-grid label { font-size:12px; }
    .form-grid input, .form-grid select { font-size:15px; padding:11px 12px; }
  }

  /* ── CARDS ── */
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px;
          padding:16px; margin-bottom:12px; }
  .card h2 { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700;
             text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; color:var(--mut); }
  .kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
  @media (min-width:640px) {
    .kpi-grid { grid-template-columns:repeat(4, 1fr); }
  }
  .kpi { background:var(--card); border:1px solid var(--line); border-radius:10px;
         padding:12px 10px; text-align:center; }
  .kpi .val { font-size:28px; font-weight:700; font-family:'Barlow Condensed',sans-serif; }
  .kpi .lbl { font-size:11px; color:var(--mut); margin-top:2px; }

  /* ── LISTA ── */
  .search-row { display:flex; gap:8px; margin-bottom:12px; }
  .search-row input { flex:1; background:var(--bg-input); border:1px solid var(--line); border-radius:8px;
                      padding:9px 12px; color:var(--txt); font-family:'Barlow',sans-serif;
                      font-size:14px; outline:none; }
  .search-row input:focus { border-color:var(--acc); }
  .fab { background:var(--acc); border:none; border-radius:8px; color:#fff; font-size:22px;
         width:40px; height:40px; cursor:pointer; display:flex; align-items:center;
         justify-content:center; flex-shrink:0; }
  .fab:hover { background:var(--acc2); box-shadow:0 4px 12px var(--acc-glow); }
  .fab.is-label {
    width:auto; height:40px; padding:0 14px; font-size:14px; font-weight:700;
    font-family:'Barlow',sans-serif; white-space:nowrap; gap:4px;
  }
  .list-item { background:var(--bg-input); border:1px solid var(--line); border-radius:10px;
               padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:border-color .2s, background .2s; }
  .list-item:hover { border-color:var(--acc); background:var(--acc-muted); }
  .list-item .row1 { display:flex; justify-content:space-between; align-items:center; }
  .list-item .name { font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px; min-width:0; }
  .list-item .name .co-name-txt {
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .list-item .name .co-cat-pills {
    display:inline-flex; align-items:center; gap:4px;
    flex:1 1 auto; min-width:0; max-width:58%;
    overflow:hidden; vertical-align:middle;
  }
  .list-item .name .co-cat-pill,
  .co-cat-pill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid #7d8a9a;
    background: #eef2f6;
    color: #3d4a5c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    max-width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .list-item .name .co-cat-pill[hidden],
  .co-cat-pill[hidden] { display: none !important; }
  .list-item .name .co-cat-pill.co-cat-more {
    font-variant-numeric: tabular-nums;
    background: #e8ecf1;
    color: #4a5568;
  }

  /* Zaległości checklisty — grupa tego samego dokumentu (wiersze w tabeli) */
  .cl-tbl-sec { margin: 14px 0 10px; }
  .cl-tbl-title {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mut);
    margin: 0 0 8px;
  }
  .cl-tbl-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
  }
  .cl-tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 13px;
  }
  .cl-tbl th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mut);
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-input);
    white-space: nowrap;
  }
  .cl-tbl td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--txt);
  }
  .cl-tbl tr:last-child td { border-bottom: none; }
  .cl-tbl-name { font-weight: 600; min-width: 7.5rem; }
  .cl-tbl-period { color: var(--mut); white-space: nowrap; font-size: 12px; }
  .cl-tbl-status { white-space: nowrap; font-size: 12px; font-weight: 600; }
  .cl-tbl-status.is-bad { color: var(--bad); }
  .cl-tbl-status.is-ok { color: var(--ok); }
  .cl-tbl-status.is-mut { color: var(--mut); }
  .cl-tbl-act { text-align: right; width: 1%; white-space: nowrap; }
  .cl-tbl-action { font-size: 12px !important; }
  .cl-tbl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-align: left;
  }
  .cl-tbl-toggle .cl-od-chevron {
    display: inline-block;
    width: 1em;
    color: var(--mut);
    font-size: 12px;
  }
  .cl-tbl-group.is-open { background: #f8f1f0; }
  .cl-tbl-sub { background: var(--bg); }
  .cl-tbl-sub-indent { font-weight: 400; color: var(--mut); font-size: 12px; padding-left: 22px !important; }
  .cl-tbl-row:hover td { background: var(--acc-muted); }
  .cl-tbl-sub:hover td { background: rgba(166, 59, 46, 0.06); }

  @media (max-width: 639.98px) {
    .cl-tbl { font-size: 12px; }
    .cl-tbl th, .cl-tbl td { padding: 8px 8px; }
    .cl-tbl-name { min-width: 6.5rem; }
    .cl-tbl-action { font-size: 11px !important; padding: 6px 8px !important; min-height: 34px !important; }
  }

  .cl-od-group {
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
  }
  .cl-od-group.is-open { border-color: rgba(185,28,28,.35); }
  .cl-od-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: #f8f1f0;
    color: var(--txt);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
  }
  .cl-od-head:hover { background: #f3e8e6; }
  .cl-od-head-main { flex: 1; min-width: 0; }
  .cl-od-head .co-name {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
  }
  .cl-od-head .co-meta {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 400;
    color: var(--mut);
    margin-top: 2px;
    line-height: 1.4;
  }
  .cl-od-head .co-meta b { font-weight: 700; color: var(--txt); }
  .cl-od-chevron {
    flex-shrink: 0;
    color: var(--mut);
    font-size: 14px;
    transition: transform .15s ease;
  }
  .cl-od-group.is-open .cl-od-chevron { transform: rotate(180deg); }
  .cl-od-body {
    padding: 6px 10px 10px;
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  .cl-od-period {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
  }
  .cl-od-period:last-child { border-bottom: none; }
  .cl-od-period-meta { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
  .cl-od-period-lbl { font-weight: 600; font-size: 13px; }
  .cl-od-period-st { font-size: 12px; color: var(--bad); }
  .list-item .nip  { font-size:12px; color:var(--mut); margin-top:2px; }
  .list-item .hint { font-size:11px; color:var(--mut); margin-top:6px; opacity:.85; }
  .list-item .edit-btn { background:transparent; border:1px solid var(--line); border-radius:6px;
    color:var(--mut); font-family:var(--font-ui); font-size:14px; padding:4px 8px; cursor:pointer; flex-shrink:0; }
  .list-item .edit-btn:hover { border-color:var(--acc); color:var(--acc); }
  .list-item .del-btn { background:transparent; border:1px solid rgba(214,69,69,.35); border-radius:6px;
    color:#B91C1C; font-family:var(--font-ui); font-size:14px; padding:4px 8px; cursor:pointer; flex-shrink:0; }
  .list-item .del-btn:hover { border-color:var(--bad); color:#fff; background:rgba(214,69,69,.25); }
  .list-item.is-selected { border-color:var(--acc); background:var(--acc-muted); }
  .list-item .cl-ring-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .list-item .cl-ring-lbl { font-size:11px; color:var(--mut); max-width:88px; line-height:1.2; }
  .firma-row-wrap { margin-bottom:8px; }
  .firma-row-wrap > .list-item { margin-bottom:0; }
  .firma-row-wrap > .list-item.is-selected {
    border-color:var(--acc); background:var(--acc-muted);
    border-bottom-left-radius:0; border-bottom-right-radius:0;
  }
  .firma-cl-panel {
    display:none; padding:12px 14px 14px;
    border:1px solid var(--acc); border-top:1px solid var(--line);
    border-radius:0 0 10px 10px; background:var(--card);
    animation:slideDown .2s ease-out;
  }
  .firma-cl-panel.is-open { display:block; }
  .list-item .co-check {
    width:18px; height:18px; flex-shrink:0; accent-color:var(--acc); cursor:pointer; margin:0;
  }
  .btn-del {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:rgba(214,69,69,.08); border:1px solid rgba(214,69,69,.5); border-radius:8px;
    color:#B91C1C; font-family:'Barlow',sans-serif; font-size:14px; font-weight:600;
    padding:10px 14px; cursor:pointer; text-decoration:none; text-align:center;
    box-sizing:border-box; line-height:1.2;
  }
  .btn-del:hover { background:rgba(214,69,69,.18); border-color:var(--bad); color:#991B1B; }
  .btn-del .btn-del-ico { flex-shrink:0; width:15px; height:15px; display:block; }
  .btn-row .btn-del { flex:1; }
  .stmt-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px; }
  .stmt-actions .del-btn { font-size:12px; padding:5px 10px; border-radius:6px; border:1px solid rgba(214,69,69,.35);
    background:transparent; color:#B91C1C; cursor:pointer; }
  .stmt-actions .del-btn:hover { background:rgba(214,69,69,.2); }
  .xml-preview-wrap { margin-top:12px; max-height:min(60vh,480px); overflow:auto;
    background:#0d0f0e; border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
  .xml-preview-wrap pre { margin:0; font-family:'Consolas','Courier New',monospace; font-size:11px;
    line-height:1.45; color:#c8e6d0; white-space:pre-wrap; word-break:break-word; }
  .xml-kpi { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; font-size:12px; }
  .xml-kpi span { padding:4px 10px; border-radius:6px; background:var(--bg-input); border:1px solid var(--line); }
  .xml-kpi .ok { color:var(--ok); border-color:rgba(91,140,74,.35); }
  .xml-kpi .bad { color:#B91C1C; border-color:rgba(214,69,69,.35); }
  .map-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
  .map-table th, .map-table td { border:1px solid var(--line); padding:6px 8px; text-align:left; }
  .map-table th { color:var(--mut); font-weight:600; }
  .map-table input, .map-table select { width:100%; background:var(--bg-input); border:1px solid var(--line);
    color:var(--txt); border-radius:6px; padding:6px; font-size:12px; }
  .map-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0; }
  .val-banner { font-size:12px; padding:8px 10px; border-radius:8px; margin:8px 0; line-height:1.5; }
  .val-banner.ok { background:rgba(91,140,74,.12); border:1px solid rgba(91,140,74,.35); color:var(--ok); }
  .val-banner.warn { background:rgba(212,160,23,.12); border:1px solid rgba(212,160,23,.35); color:var(--warn); }
  .val-banner.bad { background:rgba(214,69,69,.12); border:1px solid rgba(214,69,69,.35); color:#B91C1C; }
  .badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px;
           text-transform:uppercase; }
  .badge.INNA  { background:var(--acc-muted); color:var(--acc-light); border:1px solid var(--acc-border); }
  .badge.MALA  { background:rgba(59,130,246,.15); color:#1D4ED8; border:1px solid rgba(59,130,246,.3); }
  .badge.MIKRO { background:rgba(212,160,23,.15); color:#92600A; border:1px solid rgba(212,160,23,.3); }
  .gap-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px; white-space:nowrap; }
  .gap-badge.incomplete { background:rgba(214,69,69,.2); color:#B91C1C; border:1px solid rgba(214,69,69,.4); }
  .gap-badge.attention { background:rgba(212,160,23,.15); color:#92600A; border:1px solid rgba(212,160,23,.35); }
  .bnav button { position:relative; }
  .nav-badge { display:none; position:absolute; top:4px; right:calc(50% - 22px); min-width:16px; height:16px;
    line-height:16px; padding:0 4px; border-radius:8px; background:var(--bad); color:#fff;
    font-size:10px; font-weight:700; text-align:center; }
  .fg { margin-bottom:0; }
  .fg label { display:block; font-size:12px; color:var(--mut); margin-bottom:5px; font-weight:600; }
  .fg + .fg { margin-top:12px; }
  /* W siatce 2 kolumn margin-top na drugim .fg rozjeżdża wiersz (Kontrahent / Wzór) */
  .form-grid > .fg { display:flex; flex-direction:column; min-width:0; margin-top:0; }
  .form-grid > .fg + .fg { margin-top:0; }
  .fg-gap label { color:#B91C1C; }
  .fg-gap input, .fg-gap select { border-color:rgba(214,69,69,.55); }
  .fg-gap-rec label { color:var(--warn); }
  .fg-gap-rec input, .fg-gap-rec select { border-color:rgba(212,160,23,.45); }
  .profile-issue { list-style:none; padding:10px 12px; margin-bottom:8px; border-radius:8px; font-size:13px; line-height:1.45; }
  .profile-issue.required { background:rgba(214,69,69,.12); border:1px solid rgba(214,69,69,.35); }
  .profile-issue.recommended { background:rgba(212,160,23,.1); border:1px solid rgba(212,160,23,.3); }
  .profile-issue strong { display:block; margin-bottom:2px; }
  .profile-issue span { color:var(--mut); font-size:12px; }
  .gap-card { background:var(--bg-input); border:1px solid var(--line); border-radius:10px;
    padding:14px; margin-bottom:10px; }
  .gap-card h4 { margin:0 0 8px; font-size:15px; }
  .gap-card .meta { font-size:12px; color:var(--mut); margin-bottom:10px; }
  .gap-card ul { margin:0 0 12px; padding:0; }

  .support-hero {
    display:flex; align-items:center; gap:14px; margin-bottom:14px;
    padding:14px 16px; border:1px solid var(--line); border-radius:14px;
    background:var(--card);
  }
  .support-hero video {
    width:150px; height:150px; object-fit:contain; flex-shrink:0;
    background:var(--card); border-radius:16px;
  }
  .support-chat .empty video { background:var(--card); border-radius:12px; }
  .support-hero .sh-title {
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px;
    letter-spacing:.02em; color:var(--txt); line-height:1.1; margin:0 0 4px;
  }
  .support-hero .sh-sub { font-size:13px; color:var(--mut); line-height:1.4; margin:0; }
  .support-chat {
    max-height:48vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
    padding:4px 2px 8px; margin-bottom:4px;
  }
  .support-chat .empty { padding:28px 12px; text-align:center; }
  .support-chat .empty img, .support-chat .empty video { width:120px; margin-bottom:10px; opacity:.95; }
  .chat-bubble {
    max-width:92%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
    background:var(--bg-input);
  }
  .chat-bubble.mine {
    align-self:flex-end; background:var(--acc-muted); border-color:var(--acc-border);
  }
  .chat-bubble.theirs { align-self:flex-start; }
  .chat-bubble .cb-head {
    display:flex; justify-content:space-between; gap:10px; align-items:baseline;
    margin-bottom:4px; font-size:12px;
  }
  .chat-bubble .cb-name { font-weight:700; color:var(--txt); }
  .chat-bubble .cb-meta { color:var(--mut); white-space:nowrap; }
  .chat-bubble .cb-body { white-space:pre-wrap; line-height:1.5; font-size:14px; }

  /* ── MODAL ── */
  .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7);
              z-index:200; align-items:flex-end; justify-content:center; }
  .modal-bg.open { display:flex; }
  /* Ponad FAB czatu biura (4500) i panel (4501) — inaczej dialog „Przywróć” jest niewidoczny / nieklikalny */
  .modal-bg.modal-dialog-bg { z-index:5200; }
  .modal { background:var(--card); border:1px solid var(--line); border-radius:16px 16px 0 0;
           padding:24px 20px 32px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; }
  .modal.modal-dialog {
    max-width:420px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  .ui-dialog-msg {
    font-size:14px; color:var(--mut); line-height:1.55; margin:0 0 18px;
    white-space:pre-line;
  }
  .ui-dialog-msg strong { color:var(--txt); font-weight:600; }
  .modal-dialog .btn-row { margin-top:0; }
  .modal-dialog.is-danger h3 { color:#B91C1C; }
  /* Trzyprzyciskowy dialog (Zapisz / Nie zapisuj / Zostań przy wyjściu z edytora wzoru).
     Klasa .ui-confirm3-middle = drugorzędna akcja (jaśniejsza niż ok, widoczniejsza niż cancel). */
  .ui-confirm3-actions { display:flex; align-items:center; justify-content:flex-end; }
  .ui-confirm3-actions .ui-confirm3-middle {
    border-color:var(--line);
    color:var(--mut);
  }
  .ui-confirm3-actions .ui-confirm3-middle:hover {
    border-color:var(--acc-border);
    color:var(--acc);
  }
  @media (max-width:520px) {
    .ui-confirm3-actions { flex-direction:column-reverse; align-items:stretch; }
    .ui-confirm3-actions .btn-ghost,
    .ui-confirm3-actions .btn-save,
    .ui-confirm3-actions .btn-del { width:100%; }
  }
  .modal h3 { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700;
              margin-bottom:18px; }
  .modal .close { float:right; background:none; border:none; color:var(--mut);
                  font-size:22px; cursor:pointer; margin-top:-4px; }
  .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
  .form-grid .wide { grid-column:1/-1; }
  .form-grid .span-2 { grid-column:span 2; }
  .form-grid label { display:block; font-size:11px; color:var(--mut); font-weight:600;
                     text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
  .form-grid input, .form-grid select { width:100%; background:var(--bg-input); border:1px solid var(--line);
    border-radius:8px; padding:9px 11px; color:var(--txt);
    font-family:'Barlow',sans-serif; font-size:14px; outline:none; }
  .form-grid input:focus, .form-grid select:focus { border-color:var(--acc); }
  .modal.modal-wide { max-width:520px; }
  .modal.modal-firma { max-width:min(960px, 100%); }
  .modal-firma .firma-sec { margin:0 0 18px; }
  .modal-firma .firma-sec-quiet {
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(0,0,0,.015);
  }
  .modal-firma .firma-sec-label {
    font-size:11px; color:var(--mut); font-weight:600;
    text-transform:uppercase; letter-spacing:.45px; margin:0 0 8px;
  }
  .modal-firma .firma-more {
    margin:0 0 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--card);
  }
  .modal-firma .firma-more > summary {
    list-style:none;
    cursor:pointer;
    user-select:none;
    padding:12px 14px;
    font-size:14px;
    font-weight:600;
    color:var(--txt);
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .modal-firma .firma-more > summary::-webkit-details-marker { display:none; }
  .modal-firma .firma-more > summary::before {
    content:'›';
    display:inline-block;
    width:1em;
    color:var(--mut);
    transition:transform .15s ease;
  }
  .modal-firma .firma-more[open] > summary::before { transform:rotate(90deg); }
  .modal-firma .firma-more-hint {
    font-size:12px; font-weight:500; color:var(--mut);
  }
  .modal-firma .firma-more-grid {
    padding:4px 14px 14px;
    border-top:1px solid var(--line);
  }
  .firma-reps-list { display:flex; flex-direction:column; gap:8px; }
  .firma-rep-row {
    display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; align-items:center;
  }
  .firma-rep-row .firma-rep-dop { grid-column: span 2; font-size:12px; }
  .firma-rep-row .firma-rep-dop:last-of-type { grid-column: span 2; }
  @media (max-width:640px) {
    .firma-rep-row { grid-template-columns:1fr; }
    .firma-rep-row .firma-rep-dop { grid-column: auto; }
  }
  .doc-gen-choice { margin-top:8px; }
  .doc-gen-choice-lbl {
    display:block; font-size:11px; font-weight:600; color:var(--mut); margin-bottom:4px;
  }
  .doc-gen-fill-input {
    width:100%; box-sizing:border-box; font:inherit; font-size:13px;
    padding:8px 10px; border:1px solid var(--line); border-radius:8px;
    background:var(--bg-input); color:var(--txt);
  }
  .doc-gen-fill-input:focus {
    outline:2px solid var(--acc-border); outline-offset:1px; border-color:var(--acc);
  }
  .modal-firma .company-cat-chip {
    padding:6px 11px; min-height:32px; font-size:12px; font-weight:500;
  }
  .firma-custom-section {
    margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  }
  .firma-custom-section > .sec-label {
    font-size:11px; color:var(--mut); font-weight:600; text-transform:uppercase;
    letter-spacing:.5px; margin-bottom:10px;
  }
  .firma-custom-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px;
  }
  .firma-custom-tile {
    background:var(--bg-input); border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; min-width:0;
  }
  .firma-custom-tile label {
    display:block; font-size:11px; color:var(--mut); font-weight:600;
    text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .firma-custom-tile input {
    width:100%; background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:8px 10px; color:var(--txt); font-family:inherit; font-size:14px; outline:none;
  }
  .firma-custom-tile input:focus { border-color:var(--acc); }
  .modal-split { display:block; }
  .modal-side { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
  .modal-side h4 { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut); margin-bottom:10px; }
  @media (min-width:640px) {
    .modal-bg { align-items:center; padding:20px; }
    .modal { border-radius:16px; max-height:92vh; }
    .modal.modal-wide { max-width:820px; }
    .modal.modal-firma { max-width:min(1040px, 96vw); padding:28px 28px 24px; }
    .modal-firma .form-grid { grid-template-columns:1fr 1fr; gap:14px 16px; }
    .firma-custom-grid { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; }
    .modal-split { display:flex; gap:20px; align-items:flex-start; }
    .modal-main { flex:1; min-width:0; }
    .modal-side { width:260px; flex:none; margin-top:0; padding-top:0; border-top:none; border-left:1px solid var(--line); padding-left:20px; }
  }
  @media (min-width:1100px) {
    .modal.modal-firma { max-width:min(1180px, 94vw); }
    .modal-firma .form-grid { grid-template-columns:1fr 1fr 1fr; }
    .modal-firma .form-grid .wide { grid-column:1/-1; }
    .modal-firma .form-grid .span-2 { grid-column:span 2; }
    .firma-custom-grid { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
  }
  .page-split { display:block; }
  @media (min-width:900px) {
    .page-split { display:flex; gap:20px; align-items:flex-start; }
    .page-split .page-main { flex:1; min-width:0; }
    .page-split .page-side { width:280px; flex:none; }
  }
  .page-side h4 { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut); margin-bottom:10px; }
  /* Style bazowe .btn-ghost/.btn-save/select — działają wszędzie, nie tylko wewnątrz .btn-row/.form-grid
     (wcześniej te klasy poza tymi kontenerami renderowały się jako domyślne, brzydkie kontrolki przeglądarki) */
  .btn-ghost { background:transparent; border:1px solid var(--line); border-radius:8px; color:var(--txt);
               font-family:'Barlow',sans-serif; font-size:14px; font-weight:600; padding:10px 14px;
               cursor:pointer; display:inline-block; text-decoration:none; text-align:center; }
  .btn-ghost:hover { border-color:var(--acc); }
  .btn-save { background:var(--acc); border:none; border-radius:8px; color:#fff;
              font-family:'Barlow',sans-serif; font-size:14px; font-weight:700; padding:10px 14px;
              cursor:pointer; display:inline-block; text-decoration:none; text-align:center; }
  .btn-save:hover { background:var(--acc2); }
  select { width:100%; background:var(--bg-input); border:1px solid var(--line); border-radius:8px;
           padding:9px 11px; color:var(--txt); font-family:'Barlow',sans-serif; font-size:14px; outline:none; }
  select:focus { border-color:var(--acc); }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input:not([type]),
  textarea {
    width:100%; background:var(--bg-input); border:1px solid var(--line); border-radius:8px;
    padding:9px 11px; color:var(--txt); font-family:'Barlow',sans-serif; font-size:14px; outline:none;
    box-sizing:border-box;
  }
  textarea { min-height:96px; resize:vertical; line-height:1.45; display:block; }
  input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,
  input:not([type]):focus, textarea:focus { border-color:var(--acc); }
  .check-row { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--mut); cursor:pointer; }
  .check-row input { width:auto; }
  .btn-row { display:flex; gap:10px; margin-top:20px; }
  .btn-row .btn-ghost { flex:1; }
  .btn-row .btn-save  { flex:2; }
  /* Edytor wzoru: Zapisz lewo, Usuń prawo */
  .btn-row.doc-save-row { flex-wrap:wrap; align-items:center; }
  .btn-row.doc-save-row .btn-save { flex:0 0 auto; min-width:140px; }
  .btn-row.doc-save-row .btn-ghost { flex:0 0 auto; }
  .btn-row.doc-save-row .btn-del { flex:0 0 auto; margin-left:auto; }
  /* flex-wrap (nie grid) celowo — na siatce zawinięty tekst w jednej komórce rozciąga
     WSZYSTKIE komórki w wierszu do tej samej wysokości (efekt "olbrzymich przycisków");
     przy flex-wrap każdy wiersz ma niezależną wysokość, nawet gdy coś się zawinie. */
  .doc-select-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .doc-select-actions .btn-ghost {
    width:auto; flex:0 0 auto; white-space:nowrap; padding:6px 10px; font-size:12px;
  }
  .doc-gen-panel { border:none; border-radius:0; margin-bottom:0; overflow:visible; background:transparent; }
  .doc-page-frame.is-readonly {
    pointer-events: none;
  }
  .doc-page-frame.is-readonly .doc-page-body {
    cursor: default;
    user-select: text;
    outline: none;
  }
  .doc-gen-panel .doc-gen-head {
    padding:12px 14px; font-weight:600; font-size:14px;
    background:var(--bg-input); list-style:none;
  }
  .doc-gen-panel .panel-body { padding:0; border-top:none;
    display:flex; flex-direction:column; gap:12px; }
  .doc-gen-nav {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:8px 12px; margin-bottom:4px;
  }
  .doc-gen-nav .doc-gen-back {
    width:auto; flex:0 0 auto; padding:6px 10px; font-size:13px; margin:0;
  }
  .doc-gen-nav .doc-gen-edit {
    color:var(--acc); font-weight:600; font-size:13px; text-decoration:none;
  }
  .doc-gen-nav .doc-gen-edit:hover { text-decoration:underline; }
  .doc-gen-tools {
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  }
  .doc-gen-tools .year-row { margin:0; flex:0 0 auto; }
  .doc-gen-tools .year-row input { width:76px; }
  .doc-gen-tools .search-row { flex:1 1 180px; margin:0; min-width:0; }
  .doc-gen-opts {
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
    padding:10px 12px; background:var(--bg-input); border:1px solid var(--line); border-radius:10px;
  }
  .doc-gen-opts .year-row { margin:0; }
  .doc-gen-opts .year-row input { width:76px; }
  .doc-gen-check {
    display:flex; align-items:flex-start; gap:8px; font-size:13px; cursor:pointer;
    flex:1; min-width:min(100%, 200px); line-height:1.35; color:var(--txt);
  }
  .doc-gen-check input { width:auto; margin-top:2px; flex-shrink:0; accent-color:var(--acc); }
  .doc-gen-check .hint { display:block; font-size:11px; color:var(--mut); margin-top:2px; font-weight:400; }
  .doc-gen-filters { display:flex; flex-direction:column; gap:10px; }
  .doc-gen-filter-row { display:flex; flex-direction:column; gap:4px; }
  .doc-gen-filter-row .lbl {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.4px; font-weight:600;
  }
  .doc-gen-filter-row .doc-filter { margin-bottom:0; }
  .doc-info-btn {
    width:22px; height:22px; border-radius:50%; flex:none; padding:0; margin:0;
    border:1px solid var(--line); background:var(--card); color:var(--mut);
    font-size:12px; font-weight:700; font-family:Georgia, 'Times New Roman', serif; font-style:italic;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    line-height:1; text-transform:none; letter-spacing:0;
  }
  .doc-info-btn:hover { border-color:var(--acc); color:var(--acc); background:var(--acc-muted); }
  #docInfoTip {
    position:fixed; z-index:450; max-width:min(320px, calc(100vw - 24px));
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; font-size:13px; line-height:1.45; color:var(--txt);
    box-shadow:0 10px 28px rgba(33,28,24,.16);
  }
  #docInfoTip b { font-weight:700; }
  #docInfoTip p { margin:0 0 8px; }
  #docInfoTip p:last-child { margin:0; }
  .doc-gen-toolbar {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px 12px;
  }
  .doc-select-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .doc-select-actions .btn-ghost.is-on {
    border-color:var(--acc); background:var(--acc-muted); color:var(--acc); font-weight:700;
  }
  .doc-co-list {
    max-height:min(420px, 48vh); overflow-y:auto; margin:0;
    border:1px solid var(--line); border-radius:10px; padding:4px 12px 4px 8px;
    background:var(--card);
  }
  .doc-palette-head { margin:0 0 8px; }
  .doc-palette-title {
    font-size:13px; font-weight:700; color:var(--txt); margin:0 0 4px;
  }
  .doc-palette-head .field-hint { margin:0 0 8px; line-height:1.4; }
  .doc-palette-action {
    width:100%; margin:0 0 10px; padding:8px 12px; font-size:13px; font-weight:600;
  }
  .doc-editor-work {
    display:flex; align-items:flex-start; gap:12px; margin-top:4px;
  }
  .doc-field-rail {
    flex:0 0 232px; width:232px; max-height:calc(100vh - 120px);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    position:sticky; top:12px; align-self:flex-start;
    border:1px solid var(--line); border-radius:10px; padding:10px;
    background:var(--bg-input); box-sizing:border-box;
  }
  .doc-field-rail-close { display:none; }
  .doc-field-rail-backdrop { display:none; }
  .doc-editor-main { flex:1; min-width:0; }
  .doc-manage-panel { display:none; }
  .doc-editor-work.is-manage-fields .doc-manage-panel { display:block; }
  .doc-editor-work.is-manage-fields .doc-editor-doc { display:none; }
  .doc-editor-work.is-manage-fields .doc-palette-action { display:none; }
  .doc-editor-work.is-manage-fields .doc-field-rail-close { display:none; }
  #main.is-managing-fields .doc-editor-slim,
  #main.is-managing-fields .doc-editor-meta-extra,
  #main.is-managing-fields .doc-editor-meta-card,
  #main.is-managing-fields .doc-toolbar-sticky,
  #main.is-managing-fields .doc-editor-meta,
  #main.is-managing-fields .doc-save-row,
  #main.is-managing-fields .doc-history-panel { display:none; }
  #main.is-managing-fields .page-header p { display:none; }
  .doc-manage-bar {
    display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px;
  }
  .doc-manage-bar .doc-manage-back {
    width:auto; margin:0; padding:6px 12px; font-size:13px; font-weight:600;
  }
  .doc-manage-bar .doc-manage-reset {
    width:auto; margin:0 0 0 auto; padding:6px 10px; font-size:12px;
  }
  .doc-manage-host {
    border:none; border-radius:0; padding:0; background:transparent;
    max-height:calc(100vh - 140px); overflow-y:auto;
  }
  .doc-manage-host .field-group-card {
    background:var(--card); border:1px solid var(--line);
    box-shadow:none; margin-bottom:8px !important; padding:10px !important;
  }
  .doc-editor-work.is-manage-fields .doc-field-rail {
    background:var(--card); border-style:dashed;
  }
  .doc-editor-work.is-manage-fields .doc-palette-title { font-size:12px; color:var(--mut); font-weight:600; }
  .doc-toolbar .doc-fields-open-btn {
    display:none; background:var(--acc-muted); border:1px solid var(--acc-border);
    color:var(--acc); font-weight:700; border-radius:6px; padding:5px 10px;
  }
  .doc-toolbar .doc-detect-btn {
    display:inline-flex; align-items:center; font-size:12px; font-weight:600;
    background:var(--bg-input); border:1px solid var(--line); color:var(--txt);
    border-radius:6px; padding:5px 8px; white-space:nowrap;
  }
  .doc-toolbar .doc-detect-btn:hover { border-color:var(--acc-border); color:var(--acc); }
  .doc-detect-modal { max-width:min(640px, 96vw); }
  .doc-detect-list {
    max-height:min(50vh, 420px); overflow:auto; display:flex; flex-direction:column; gap:6px;
    margin-top:10px; padding:4px 2px;
  }
  .doc-detect-row {
    display:grid; grid-template-columns:auto 1fr auto minmax(0,1.2fr) auto;
    gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line);
    border-radius:10px; background:var(--bg-input); cursor:pointer; font-size:13px;
  }
  .doc-detect-row.is-create { border-color:rgba(21,128,61,.35); background:rgba(167,243,208,.25); }
  .doc-detect-row.is-map { border-color:rgba(29,78,216,.28); background:rgba(147,197,253,.2); }
  .doc-detect-match code, .doc-detect-key code {
    font-size:11px; word-break:break-word;
  }
  .doc-detect-status { font-size:11px; color:var(--mut); white-space:nowrap; }
  .doc-detect-arrow { color:var(--mut); }
  @media (max-width:560px) {
    .doc-detect-row {
      grid-template-columns:auto 1fr; grid-template-rows:auto auto;
    }
    .doc-detect-arrow { display:none; }
    .doc-detect-status { grid-column:2; }
  }

  .doc-table-props-modal { width: 360px; max-width: 92vw; }
  .doc-table-props-modal .form-row { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
  .doc-table-props-modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
  .doc-table-props-modal input[type="color"] { width: 100%; height: 32px; padding: 2px; }

  /* Tryb "Źródło" — pełnoekranowy edytor tekstu z tokenami {{...}} zamiast kafelków.
     Współdzielony z trybem wykrywania pól design language: jasne tło, akcent --acc. */
  .doc-source-modal {
    width:min(900px, 96vw);
    max-width:96vw;
    height:min(82vh, 760px);
    max-height:82vh;
    display:flex; flex-direction:column;
    padding:0;
    overflow:hidden;
  }
  .doc-source-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px 6px;
  }
  .doc-source-head h3 { margin:0; font-size:16px; }
  .doc-source-close {
    border:none; background:transparent; cursor:pointer;
    font-size:18px; line-height:1; color:var(--mut); padding:4px 6px;
    border-radius:6px;
  }
  .doc-source-close:hover { background:var(--acc-muted); color:var(--acc); }
  .doc-source-hint {
    margin:0 18px 10px;
    font-size:12.5px; line-height:1.5; color:var(--mut);
  }
  .doc-source-hint code {
    background:var(--acc-muted); color:var(--acc);
    padding:1px 5px; border-radius:4px; font-size:11.5px;
  }
  .doc-source-area {
    flex:1; min-height:0;
    margin:0 18px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--bg-input);
    color:#1A1F1C;
    font-family:'SF Mono', 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
    font-size:13px; line-height:1.6;
    tab-size:2; resize:none; white-space:pre-wrap; word-break:break-word;
    outline:none;
  }
  .doc-source-area:focus { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-muted); }
  .doc-source-foot {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 18px 14px;
  }
  .doc-source-counter {
    font-size:11.5px; color:var(--mut);
  }
  @media (max-width:560px) {
    .doc-source-modal { height:90vh; max-height:90vh; }
    .doc-source-foot { flex-direction:column; align-items:stretch; }
    .doc-source-counter { text-align:center; }
  }

  /* Modal pytania o nieznane tokeny przy „Zastosuj" w trybie Źródło. */
  .doc-src-modal { max-width:min(760px, 96vw); }
  .doc-src-list {
    max-height:min(55vh, 520px); overflow:auto;
    display:flex; flex-direction:column; gap:8px;
    margin-top:10px; padding:2px;
  }
  .doc-src-row {
    border:1px solid var(--line); border-radius:10px;
    background:var(--bg-input); padding:10px 12px;
    display:flex; flex-direction:column; gap:8px;
  }
  .doc-src-token {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:13px;
  }
  .doc-src-token code {
    background:var(--acc-muted); color:var(--acc);
    padding:2px 6px; border-radius:5px; font-size:12px;
  }
  .doc-src-arrow { color:var(--mut); }
  .doc-src-label { color:var(--txt); }
  .doc-src-actions {
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;
  }
  .doc-src-opt {
    display:flex; align-items:flex-start; gap:7px; cursor:pointer;
    padding:7px 9px; border:1px solid var(--line); border-radius:8px;
    background:var(--bg); font-size:11.5px; line-height:1.35;
    transition:border-color .12s, background .12s;
  }
  .doc-src-opt:hover { border-color:var(--acc-border); }
  .doc-src-opt input[type="radio"] {
    margin-top:2px; flex:none; accent-color:var(--acc);
  }
  .doc-src-opt:has(input:checked) {
    border-color:var(--acc); background:var(--acc-muted);
  }
  .doc-src-opt small { color:var(--mut); display:block; margin-top:2px; }
  @media (max-width:620px) {
    .doc-src-actions { grid-template-columns:1fr; }
  }
  #docFieldPalette { min-height:40px; }
  #docFieldPalette.is-preview .doc-chip {
    cursor:default; opacity:.95; pointer-events:none;
  }
  @media (max-width:719.98px) {
    .doc-editor-work { display:block; margin-top:0; }
    .doc-field-rail {
      position:fixed; left:0; top:0; bottom:0; width:min(300px, 88vw);
      max-height:none; z-index:480; margin:0; border-radius:0; border:none;
      border-right:1px solid var(--line); padding:12px 12px calc(12px + var(--safe-bottom, 0px));
      transform:translateX(-105%); transition:transform .2s ease;
      box-shadow:8px 0 28px rgba(33,28,24,.18); background:var(--card);
    }
    .doc-field-rail.is-open { transform:translateX(0); }
    .doc-field-rail-close {
      display:flex; align-items:center; justify-content:center;
      width:36px; height:36px; margin:0 0 8px auto; padding:0;
      border:1px solid var(--line); border-radius:8px; background:var(--bg-input);
      color:var(--txt); font-size:16px; cursor:pointer;
    }
    .doc-field-rail-backdrop {
      display:none; position:fixed; inset:0; z-index:470;
      background:rgba(33,28,24,.4); border:none; padding:0; cursor:pointer;
    }
    .doc-field-rail-backdrop.is-on { display:block; }
    .doc-toolbar .doc-fields-open-btn { display:inline-flex; }
    .doc-editor-work.is-manage-fields {
      display:flex; flex-direction:column; gap:10px;
    }
    .doc-editor-work.is-manage-fields .doc-field-rail {
      position:static; transform:none; width:100%; max-height:30vh;
      border:1px solid var(--line); border-radius:10px; box-shadow:none;
      order:-1; z-index:auto;
    }
    .doc-editor-work.is-manage-fields .doc-field-rail-close { display:none; }
    .doc-editor-work.is-manage-fields .doc-field-rail-backdrop { display:none !important; }
    .doc-editor-work.is-manage-fields .doc-manage-host { max-height:none; }
  }
  @media (min-width:720px) {
    .doc-toolbar .doc-fields-open-btn { display:none !important; }
  }
  .doc-gen-sticky {
    position:sticky; bottom:0; z-index:45;
    margin:8px -16px 0; padding:12px 16px calc(8px + var(--safe-bottom, 0px));
    background:var(--bg); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(33,28,24,.08);
    display:flex; flex-direction:column; gap:8px;
  }
  @media (min-width:640px) {
    .doc-gen-sticky {
      margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px;
      bottom:0;
    }
  }
  .doc-gen-sticky .doc-gen-preview {
    width:100%; margin:0; font-size:13px; padding:8px 12px;
  }
  .doc-gen-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .doc-gen-actions .zip-btn { margin:0; }
  .doc-gen-actions .zip-btn.docx {
    background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.35); color:#1D4ED8;
  }
  .doc-gen-actions .zip-btn.docx:hover { background:rgba(59,130,246,.18); }
  @media (max-width:420px) {
    .doc-gen-actions { grid-template-columns:1fr; }
  }

  /* ── IMPORT ── */
  .dz { border:2px dashed var(--line); border-radius:12px; padding:32px 20px;
        text-align:center; cursor:pointer; transition:.2s; margin-bottom:12px; }
  .dz:hover, .dz.over { border-color:var(--acc); background:var(--acc-muted); }
  .dz .ico { font-size:36px; margin-bottom:8px; }
  .dz .t   { font-weight:600; margin-bottom:4px; }
  .dz .s   { font-size:13px; color:var(--mut); }
  .dz.has  { border-color:var(--ok); }
  .file-list { margin-bottom:12px; }
  .file-chip { display:inline-flex; align-items:center; gap:6px; background:var(--bg-input);
               border:1px solid var(--line); border-radius:6px; padding:4px 10px;
               font-size:12px; margin:3px; }
  .file-chip.ok  { border-color:var(--ok); color:var(--ok); }
  .file-chip.err { border-color:var(--bad); color:var(--bad); }
  .year-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .year-row label { font-size:12px; color:var(--mut); font-weight:600;
                    text-transform:uppercase; flex-shrink:0; }
  .year-row input { width:90px; background:var(--bg-input); border:1px solid var(--line);
                    border-radius:8px; padding:8px 10px; color:var(--txt);
                    font-family:'Barlow',sans-serif; font-size:14px; outline:none; }
  .progress-bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden;
                  margin:10px 0; }
  .progress-bar .fill { height:100%; background:var(--acc); border-radius:3px;
                        transition:width .3s; }

  /* ── SUBSKRYPCJA — karta „Twój plan” (spec 2026-07-21) ── */
  .sub-plan-hero {
    display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
    gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line);
  }
  .sub-plan-name {
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:28px;
    letter-spacing:.02em; line-height:1.1; margin:0 0 6px; color:var(--txt);
  }
  .sub-plan-meta { font-size:13px; color:var(--mut); line-height:1.45; margin:0; }
  .sub-badge {
    display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; padding:4px 10px; border-radius:999px; color:#fff;
    vertical-align:middle; margin-left:8px;
  }
  .sub-price {
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px;
    color:var(--acc); line-height:1.1; text-align:right;
  }
  .sub-price small { display:block; font-family:'Barlow',sans-serif; font-size:12px;
    font-weight:500; color:var(--mut); margin-top:2px; }
  .sub-usage { margin-top:4px; }
  .sub-usage-row { margin-top:12px; }
  .sub-usage-row .lab {
    display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px;
  }
  .sub-usage-row .lab span:last-child { color:var(--mut); font-variant-numeric:tabular-nums; }
  .sub-usage-track {
    height:8px; border-radius:4px; background:var(--bg-input);
    border:1px solid var(--line); overflow:hidden;
  }
  .sub-usage-fill { height:100%; border-radius:3px; background:var(--acc); transition:width .25s; }
  .sub-usage-fill.is-warn { background:#d97706; }
  .sub-usage-fill.is-full { background:var(--bad); }
  .sub-usage-unlimited {
    font-size:12px; color:var(--mut); margin-top:4px;
  }
  .sub-plans-compare {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:18px 0 14px;
  }
  .sub-plan-chip {
    border:1px solid var(--line); border-radius:12px; padding:12px 10px;
    background:var(--bg-input); text-align:center;
  }
  .sub-plan-chip.is-current {
    border-color:var(--acc); background:var(--acc-muted);
    box-shadow:0 0 0 1px var(--acc-border);
  }
  .sub-plan-chip .chip-name {
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16px;
    letter-spacing:.03em; margin:0 0 4px;
  }
  .sub-plan-chip .chip-price { font-size:12px; color:var(--mut); margin:0 0 6px; }
  .sub-plan-chip .chip-feat { font-size:11px; color:var(--mut); line-height:1.35; margin:0; }
  .sub-plan-chip.is-current .chip-name { color:var(--acc); }
  .sub-plan-cta { margin-top: 4px; }
  /* Cennik „jak Claude” — toggle + karty planów */
  .pricing-mod { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .pricing-mod-head { text-align: center; margin-bottom: 14px; }
  .pricing-mod-head h3 {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px;
    margin: 0 0 6px; letter-spacing: .02em;
  }
  .pricing-mod-head p { margin: 0; font-size: 13px; color: var(--mut); }
  .pricing-toggle {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 14px 0 18px; font-size: 13px; color: var(--mut);
  }
  .pricing-toggle button {
    border: 1px solid var(--line); background: var(--bg-input); color: var(--txt);
    border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; font-weight: 600;
  }
  .pricing-toggle button.is-on {
    background: var(--acc); color: #fff; border-color: var(--acc);
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px);
    justify-content: center;
    gap: 10px;
  }
  .pricing-card {
    position: relative; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 14px 14px; background: var(--bg-input); text-align: left;
    transition: border-color .15s, box-shadow .15s;
  }
  .pricing-card:hover { border-color: rgba(178,58,46,.35); }
  .pricing-card.is-rec {
    border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc-border);
    background: var(--acc-muted);
  }
  .pricing-card.is-current { outline: 2px solid var(--acc); }
  .pricing-card.is-disabled { opacity: .72; }
  .pricing-card.is-disabled .btn-pay { cursor: not-allowed; }
  .pricing-rec {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--acc); color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
    white-space: nowrap;
  }
  .pricing-card .pn {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; margin: 4px 0 2px;
  }
  .pricing-card .pd { font-size: 12px; color: var(--mut); margin: 0 0 10px; line-height: 1.35; min-height: 2.6em; }
  .pricing-card .pp {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px;
    color: var(--acc); line-height: 1; margin: 0 0 2px;
  }
  .pricing-card .pp small {
    display: block; font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 500;
    color: var(--mut); margin-top: 4px;
  }
  .pricing-card ul { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12px; color: var(--mut); }
  .pricing-card li { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 6px; line-height: 1.35; }
  .pricing-card li .mark { color: var(--acc); font-weight: 700; flex-shrink: 0; }
  .pricing-card li.is-no { opacity: .45; text-decoration: line-through; }
  .pricing-card .btn-pay {
    width: 100%; margin-top: 12px; padding: 10px; border-radius: 8px; border: none;
    font: inherit; font-weight: 700; cursor: pointer;
    background: var(--acc); color: #fff;
  }
  .pricing-card:not(.is-rec) .btn-pay {
    background: transparent; color: var(--acc); border: 1px solid var(--acc-border);
  }
  .pricing-card .btn-pay:disabled { opacity: .5; cursor: not-allowed; }
  .billing-gate {
    margin-top: 14px; padding: 12px; border: 1px dashed var(--acc-border);
    border-radius: 12px; background: var(--acc-muted);
  }
  .billing-gate h4 { margin: 0 0 8px; font-size: 14px; }
  @media (max-width: 720px) {
    .pricing-grid { grid-template-columns: minmax(0, 380px); justify-content: center; }
  }
  @media (max-width:480px) {
    .sub-plans-compare { grid-template-columns:1fr; }
    .sub-price { text-align:left; width:100%; }
  }

  /* ── SPRAWOZDANIA ── */
  .stmt-item { background:var(--bg-input); border:1px solid var(--line); border-radius:10px;
               padding:12px 14px; margin-bottom:8px; }
  .stmt-item .row1 { display:flex; justify-content:space-between; align-items:flex-start; }
  .stmt-item .info { font-size:12px; color:var(--mut); margin-top:4px; }
  .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
  .status-dot.READY     { background:var(--ok); }
  .status-dot.DRAFT     { background:var(--warn); }
  .status-dot.SUBMITTED { background:var(--info); }
  .dl-btn:hover { border-color:var(--acc); color:var(--acc-light); }
  .zip-btn { width:100%; background:var(--acc-muted); border:1px solid var(--acc-border); border-radius:8px;
             color:var(--acc-light); font-family:'Barlow',sans-serif; font-size:14px; font-weight:700;
             padding:11px; cursor:pointer; margin-bottom:12px; }
  .zip-btn:hover { background:rgba(178,58,46,.22); }
  .doc-lib-refresh {
    width:auto; margin:0 0 10px; padding:4px 0; border:none; background:transparent;
    color:var(--mut); font-size:12px; font-weight:500; text-decoration:underline;
    text-underline-offset:2px; cursor:pointer; font-family:inherit;
  }
  .doc-lib-refresh:hover { color:var(--acc); }
  .firms-adv-filters {
    margin:0 0 12px; border:none; background:transparent;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .firms-adv-filters > summary {
    display:inline-flex; align-items:center; gap:6px;
    color:var(--acc); font-size:13px; font-weight:700; cursor:pointer;
    padding:0; list-style:none;
  }
  .firms-adv-filters > summary:hover { color:var(--acc-light); }
  .firms-adv-filters[open] > summary { color:var(--acc-light); }
  .firms-adv-filters > summary::-webkit-details-marker { display:none; }
  .firms-adv-filters > summary::after {
    content:'▶' !important; font-size:11px; color:var(--mut);
    transform:rotate(180deg) !important;
    transition:transform .2s ease;
    flex-shrink:0; line-height:1;
  }
  .firms-adv-filters[open] > summary::after { transform:rotate(0deg) !important; }
  .firms-adv-filters .doc-filter { margin-top:0; margin-bottom:0; }
  /* Żeby kliknięcie nie przesuwało reszty strony: rezerwujemy miejsce i tylko „przygaszamy”. */
  .firms-adv-filters #firmsProfileFilter {
    display:flex !important;
    flex-wrap:wrap;
    gap:6px;
    min-height:70px;
    max-height:70px;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  .firms-adv-filters[open] #firmsProfileFilter {
    opacity:1;
    pointer-events:auto;
  }
  .firms-filter-on {
    margin:0 0 12px; padding:12px 14px; border-radius:10px;
    background:var(--acc-muted); border:1px solid var(--acc-border);
  }
  .firms-filter-on-hint {
    font-size:13px; line-height:1.45; color:var(--txt); margin-bottom:10px;
  }
  .firms-filter-on-hint strong { color:var(--acc); font-weight:700; }
  .firms-filter-on .doc-filter { margin:0; }
  .firms-cat-label { font-size:12px; color:var(--mut); margin:4px 0 6px; }
  .firms-tools-quiet {
    margin:16px 0 8px; display:flex; flex-direction:column; gap:8px;
  }
  .firms-tools-quiet .btn-ghost { width:100%; }

  .empty { text-align:center; padding:40px 20px; color:var(--mut); font-size:14px; }
  .empty.empty-spin { padding:28px 20px; }
  .boot-splash {
    display:none; position:fixed; inset:0; z-index:400;
    flex-direction:column; align-items:center; justify-content:center;
    background:var(--bg);
  }
  html.is-booting .boot-splash,
  .boot-splash.is-on { display:flex; }
  html.is-booting #loginScreen { display:none !important; }
  .core-spin-loader {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:200px; gap:32px;
  }
  .core-spin-loader.is-compact { min-height:88px; gap:14px; }
  .csl-stage {
    position:relative; width:80px; height:80px;
    display:flex; align-items:center; justify-content:center;
  }
  .core-spin-loader.is-compact .csl-stage { width:48px; height:48px; }
  .csl-glow {
    position:absolute; inset:0; border-radius:50%;
    background:var(--acc-glow); filter:blur(20px);
    animation:csl-pulse 2s ease-in-out infinite;
  }
  .csl-ring { position:absolute; border-radius:50%; box-sizing:border-box; }
  .csl-dashed {
    inset:0; border:1px dashed var(--acc-border);
    animation:csl-spin 10s linear infinite;
  }
  .csl-arc {
    inset:4px; border:2px solid transparent; border-top-color:var(--acc);
    box-shadow:0 0 6px var(--acc-glow);
    animation:csl-spin 2s linear infinite;
  }
  .csl-arc-rev {
    inset:12px; border:2px solid transparent; border-bottom-color:var(--acc2);
    box-shadow:0 0 6px var(--acc-muted);
    animation:csl-spin 3s linear infinite reverse;
  }
  .csl-fast {
    inset:20px; border:1px solid transparent; border-left-color:var(--acc-light);
    animation:csl-spin 1s ease-in-out infinite;
  }
  .csl-orbit { position:absolute; inset:0; animation:csl-spin 4s linear infinite; }
  .csl-dot {
    position:absolute; top:0; left:50%; width:4px; height:4px; margin-left:-2px;
    border-radius:50%; background:var(--acc2); box-shadow:0 0 4px var(--acc);
  }
  .csl-core {
    position:absolute; width:8px; height:8px; border-radius:50%;
    background:var(--acc-light); box-shadow:0 0 6px var(--acc-glow);
    animation:csl-pulse 2s ease-in-out infinite;
  }
  .core-spin-loader.is-compact .csl-core { width:6px; height:6px; }
  .csl-caption {
    font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
    color:var(--acc); min-height:1.2em;
  }
  .csl-caption.csl-caption-in { animation:csl-fade-up .45s ease; }
  @keyframes csl-spin { to { transform:rotate(360deg); } }
  @keyframes csl-pulse { 0%,100% { opacity:1; } 50% { opacity:.42; } }
  @keyframes csl-fade-up {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .csl-glow, .csl-ring, .csl-orbit, .csl-core, .csl-caption { animation:none !important; }
  }
  .tag { font-size:11px; color:var(--mut); }
  @keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
  /* Dokumenty cykliczne — tryb nowa vs edycja reguły */
  .rd-reality {
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    margin:0 0 14px; border:1px solid var(--line); border-radius:12px;
    overflow:hidden; background:var(--card);
  }
  .rd-reality button {
    appearance:none; border:none; margin:0; cursor:pointer;
    font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700;
    letter-spacing:.02em; padding:16px 12px; line-height:1.15;
    background:transparent; color:var(--mut);
    transition:background .18s ease, color .18s ease;
  }
  .rd-reality button + button { border-left:1px solid var(--line); }
  .rd-reality button .rd-reality-sub {
    display:block; margin-top:4px;
    font-family:'Barlow',sans-serif; font-size:11px; font-weight:500;
    letter-spacing:0; opacity:.85;
  }
  .rd-reality button.is-on {
    background:var(--acc); color:#fff;
  }
  .rd-reality button.is-on .rd-reality-sub { opacity:.92; }
  .rd-reality button:not(.is-on):hover { background:rgba(178,58,46,.08); color:var(--txt); }

  /* Pomoc — Przewodnik / Wsparcie: dwa duże przyciski obok siebie (pełna szerokość razem) */
  .help-sub-tabs {
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    margin:0 0 14px; width:100%;
    border:1px solid var(--line); border-radius:12px;
    overflow:hidden; background:var(--card);
  }
  .help-sub-tabs button {
    appearance:none; width:100%; margin:0; cursor:pointer; border:none;
    font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700;
    letter-spacing:.02em; padding:18px 12px; line-height:1.2;
    background:transparent; color:var(--mut); text-align:center;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .18s ease, color .18s ease;
  }
  .help-sub-tabs button + button { border-left:1px solid var(--line); }
  .help-sub-tabs button.is-on {
    background:var(--acc); color:#fff;
  }
  .help-sub-tabs button:not(.is-on):hover {
    background:rgba(178,58,46,.08); color:var(--txt);
  }
  .help-sub-tabs button .nav-badge {
    position:static; margin:0;
  }
  .help-sub-tabs button.is-on .nav-badge {
    background:#fff; color:var(--acc);
  }
  .rd-count-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; margin-left:6px;
    border-radius:999px; font-family:'Barlow',sans-serif;
    font-size:11px; font-weight:700; letter-spacing:0; line-height:1;
    background:var(--bad); color:#fff; vertical-align:middle;
  }
  .rd-count-badge.is-warn { background:var(--warn); color:#1A1F1C; }
  .rd-count-badge.is-muted { background:var(--line); color:var(--mut); }
  .rd-reality button .rd-count-badge {
    position:relative; top:-1px;
  }
  .rd-reality button.is-on .rd-count-badge {
    background:#fff; color:var(--acc);
  }
  .rd-reality button.is-on .rd-count-badge.is-warn {
    background:#fff; color:#92600A;
  }
  .rd-folder-title .rd-count-badge { margin-left:8px; }
  .rd-form-card { transition:border-color .28s ease, box-shadow .28s ease, background .28s ease; }
  .rd-form-card.is-edit {
    border-color:var(--acc-border);
    background:linear-gradient(180deg, rgba(178,58,46,.07) 0%, var(--card) 52%);
    box-shadow:0 0 0 1px rgba(178,58,46,.12);
  }
  .rd-form-card .rd-mode-badge {
    display:none; align-items:center; gap:4px;
    font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    padding:3px 8px; border-radius:999px;
    background:var(--acc-muted); border:1px solid var(--acc-border); color:var(--acc-light);
  }
  .rd-form-card.is-edit .rd-mode-badge { display:inline-flex; }
  @keyframes rdFormModeIn {
    0%   { opacity:.55; transform:translateY(6px) scale(.992); }
    55%  { opacity:1; transform:translateY(-1px) scale(1.002); }
    100% { opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes rdFormRing {
    0%   { box-shadow:0 0 0 0 rgba(178,58,46,.38), 0 0 0 1px rgba(178,58,46,.12); }
    100% { box-shadow:0 0 0 8px rgba(178,58,46,0), 0 0 0 1px rgba(178,58,46,.12); }
  }
  .rd-form-card.rd-form-anim { animation:rdFormModeIn .38s ease-out, rdFormRing .55s ease-out; }
  .rd-rule-row { transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; border-radius:10px; }
  .rd-rule-row.is-active-edit {
    background:var(--acc-muted); border:1px solid var(--acc-border);
    box-shadow:inset 3px 0 0 var(--acc);
  }
  .rd-dl-btn {
    display:inline-flex; align-items:center; gap:4px;
    background:var(--acc-muted); border:1px solid var(--acc-border); border-radius:8px;
    color:var(--acc-light); font-family:inherit; font-size:12px; font-weight:700;
    padding:5px 10px; cursor:pointer;
  }
  .rd-dl-btn:hover { background:var(--acc); color:#fff; border-color:var(--acc); }
  .rd-dl-btn:disabled { opacity:.65; cursor:wait; }
  .rd-dl-group { display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .rd-dl-btn-docx { background:rgba(91,140,74,.12); border-color:rgba(91,140,74,.35); color:var(--ok); }
  .rd-dl-btn-docx:hover { background:var(--ok); color:#fff; border-color:var(--ok); }
  .rd-dl-btn-early { background:rgba(51,110,168,.12); border-color:rgba(51,110,168,.35); color:#3b7bd5; margin-left:4px; }
  .rd-dl-btn-early:hover { background:#3b7bd5; color:#fff; border-color:#3b7bd5; }
  /* Sekcje formularza reguły */
  .rd-section-title {
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--mut); margin:14px 0 8px; padding-top:10px; border-top:1px dashed var(--line);
  }
  .rd-section-title:first-child { border-top:none; padding-top:0; margin-top:0; }
  .rd-sec-ico { font-size:13px; }
  .rd-options-grid { display:grid; gap:8px; margin-bottom:14px; }
  .rd-opt {
    display:flex; align-items:flex-start; gap:10px; cursor:pointer;
    padding:10px 12px; border:1px solid var(--line); border-radius:10px;
    background:var(--bg-input); transition:border-color .18s ease, background .18s ease;
  }
  .rd-opt:hover { border-color:var(--acc-border); }
  .rd-opt input[type="checkbox"] {
    margin-top:2px; flex:none; width:18px; height:18px; accent-color:var(--acc);
  }
  .rd-opt:has(input:checked) { border-color:var(--acc); background:var(--acc-muted); }
  .rd-opt-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .rd-opt-title { font-size:13px; font-weight:600; color:var(--txt); }
  .rd-opt-desc { font-size:11px; color:var(--mut); line-height:1.4; }
  .rd-opt-badge {
    display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em;
    padding:1px 6px; border-radius:999px; margin-left:4px;
    background:rgba(51,110,168,.14); color:#3b7bd5; border:1px solid rgba(51,110,168,.3);
    vertical-align:middle;
  }
  /* Przełącznik na liście: ręczne oznaczanie pobrania */
  .rd-manual-toggle {
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:600; color:var(--mut);
    cursor:pointer; user-select:none; margin-left:8px;
  }
  .rd-manual-toggle input { display:none; }
  .rd-manual-toggle .sw {
    position:relative; width:32px; height:18px; flex:none;
    background:var(--line); border-radius:999px; transition:background .18s ease;
  }
  .rd-manual-toggle .sw::after {
    content:''; position:absolute; top:2px; left:2px;
    width:14px; height:14px; border-radius:50%; background:#fff;
    transition:transform .18s ease; box-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  .rd-manual-toggle input:checked + .sw { background:var(--ok); }
  .rd-manual-toggle input:checked + .sw::after { transform:translateX(14px); }
  .rd-manual-toggle input:checked ~ .sw-lbl { color:var(--ok); }
  .rd-cycle-done { font-size:11px; color:var(--ok); font-weight:600; }
  .rd-reset-btn {
    display:inline-flex; align-items:center; gap:4px;
    background:transparent; border:1px solid var(--line); border-radius:8px;
    color:var(--mut); font-family:inherit; font-size:11px; font-weight:600;
    padding:4px 8px; cursor:pointer; margin-left:6px;
  }
  .rd-reset-btn:hover { border-color:var(--warn); color:var(--warn); background:rgba(214,160,69,.08); }
  /* Foldery + przeciąganie kolejności reguł */
  .rd-folders { display:flex; flex-direction:column; gap:10px; }
  .rd-folder { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .rd-folder-title {
    padding:10px 12px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-size:13px; font-weight:800;
    background:rgba(0,0,0,.02);
  }
  .rd-folder-body { padding:10px; display:flex; flex-direction:column; gap:10px; }
  .rd-drag-handle {
    flex:none;
    font-size:16px;
    padding:2px 6px;
    color:var(--mut);
    cursor:grab;
    user-select:none;
  }
  .rd-drag-handle:active { cursor:grabbing; }
  .rd-rule-row.is-rd-drop-target { outline:2px dashed var(--acc); outline-offset:3px; }
  .banner { padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:12px;
            animation:slideDown .2s; }
  .banner.ok  { background:rgba(91,140,74,.15); color:var(--ok); border:1px solid rgba(91,140,74,.35); }
  .banner.err { background:rgba(214,69,69,.12); color:var(--bad); border:1px solid rgba(214,69,69,.35); }
  .dl-btn { background:transparent; border:1px solid var(--line); border-radius:6px;
            color:var(--txt); font-size:12px; padding:4px 10px; cursor:pointer; }

  /* ── DOKUMENTY / WZORY ── */
  .doc-chip { display:inline-block; font-size:11px; padding:4px 8px; margin:2px;
    background:var(--acc-muted); border:1px solid var(--acc-border); border-radius:6px;
    color:var(--acc-light); cursor:pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease; }
  .doc-chip:hover { background:rgba(178,58,46,.22); }
  /* Adres i inne chipy z menu części — strzałka = „jest więcej niż jedna wartość” */
  .doc-chip--parts {
    display:inline-flex; align-items:center; gap:3px; padding-right:6px;
  }
  .doc-chip-caret {
    font-size:9px; line-height:1; opacity:.7; margin-top:1px;
  }
  .doc-chip.has-color {
    background:var(--chip-bg); border-color:var(--chip-bd); color:#1A1F1C;
  }
  /* Ten sam hover co chipy podstawowe — nie ciemny cień */
  .doc-chip.has-color:hover {
    background:rgba(178,58,46,.22); border-color:var(--acc-border); color:var(--acc-light);
  }
  .doc-chip.active:hover { background:var(--acc); color:#fff; border-color:var(--acc); }
  .field-add-tile {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; min-height:34px; padding:4px 10px;
    border:1.5px dashed var(--line); border-radius:8px;
    background:transparent; color:var(--mut); cursor:pointer;
    font-size:18px; font-weight:600; font-family:inherit; line-height:1;
  }
  .field-add-tile:hover { border-color:var(--acc); color:var(--acc); background:var(--acc-muted); }
  .field-group-card.drop-hover,
  .field-chips-row.drop-hover {
    outline:2px dashed var(--acc); outline-offset:2px; border-radius:10px;
    background:var(--acc-muted);
  }
  .field-group-card.is-dragging {
    opacity:0;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    border-width:0 !important;
    overflow:hidden;
    pointer-events:none;
  }
  .field-chip-drag.is-dragging {
    opacity:0;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin:0 !important;
    border-width:0 !important;
    overflow:hidden;
    pointer-events:none;
  }
  .field-chip-drag:active { cursor:grabbing; }
  .field-drop-gap {
    flex:0 0 auto;
    width:var(--gap-w, 88px);
    height:34px;
    border:1.5px dashed var(--acc);
    border-radius:8px;
    background:var(--acc-muted);
    box-sizing:border-box;
    pointer-events:none;
    transition:width .12s ease;
  }
  .group-drop-gap {
    height:var(--gap-h, 64px);
    margin-bottom:10px;
    border:1.5px dashed var(--acc);
    border-radius:10px;
    background:var(--acc-muted);
    box-sizing:border-box;
    pointer-events:none;
    transition:height .12s ease;
  }
  .field-chip-drag.is-hidden {
    opacity:.48;
    filter:grayscale(1);
    border-style:dashed;
    background:rgba(0,0,0,.04);
  }
  .field-chip-drag.is-hidden .doc-chip {
    text-decoration:line-through;
    opacity:.85;
  }
  .field-chip-drag .chip-hidden-badge {
    font-size:10px;
    color:var(--mut);
    font-weight:600;
    letter-spacing:.02em;
    text-transform:uppercase;
  }
  /* Akcje (podgląd/edycja/usuń) domyślnie schowane — pokazują się dopiero po kliknięciu
     kafelka, żeby rubryki z wieloma polami nie tonęły w rzędach identycznych ikon.
     display:none/inline-flex zamiast animowanego max-width — jako flex-item wewnątrz
     .field-chip-drag (samo display:flex) transition na max-width potrafił się nie
     wyrenderować (chip-actions kurczył się do 0 zamiast rosnąć), bo overflow:hidden
     nadaje takiemu elementowi automatyczne min-width:0 i shrink algorytm flexboksa
     bierze górę nad zadeklarowanym max-width. display:none/flex nie ma tej dwuznaczności. */
  .field-chip-drag .chip-actions {
    display:none; align-items:center; gap:2px;
    opacity:0; animation:chipActionsIn .15s ease forwards;
  }
  .field-chip-drag.is-open .chip-actions {
    display:inline-flex;
  }
  @keyframes chipActionsIn { from { opacity:0; } to { opacity:1; } }
  .group-add-tile {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:16px; margin-top:6px;
    border:1.5px dashed var(--line); border-radius:10px;
    background:transparent; color:var(--mut); cursor:pointer;
    font-size:15px; font-weight:600; font-family:inherit;
  }
  .group-add-tile:hover { border-color:var(--acc); color:var(--acc); background:var(--acc-muted); }
  .group-add-form {
    margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:10px;
    background:var(--bg-input); display:none;
  }
  .group-add-form.is-open { display:block; }
  .field-add-form {
    display:none; margin-top:12px; padding:14px; border:1px solid var(--line);
    border-radius:10px; background:var(--bg-input);
  }
  .field-add-form.is-open { display:block; }
  .field-group-head {
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
  }
  .field-group-head .field-group-handle {
    flex:1; min-width:0; font-weight:700; font-size:13px; text-transform:uppercase;
    color:var(--mut); cursor:grab; user-select:none;
  }
  .field-group-head .btn-icon {
    flex-shrink:0; background:transparent; border:1px solid var(--line); border-radius:8px;
    color:var(--mut); font-size:13px; min-width:36px; min-height:36px; padding:0;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  }
  .field-group-head .btn-icon:hover { border-color:var(--acc); color:var(--acc); }
  .group-edit-form {
    display:none; margin-bottom:10px; padding:12px; border:1px solid var(--line);
    border-radius:10px; background:var(--bg-input);
  }
  .group-edit-form.is-open { display:block; }
  .group-edit-form input {
    width:100%; background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:10px 12px; color:var(--txt); font-family:inherit; font-size:15px; outline:none;
  }
  .group-edit-form input:focus { border-color:var(--acc); }
  .field-add-form .form-grid { margin-top:4px; }
  .field-add-form textarea {
    width:100%; background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:10px 12px; color:var(--txt); font-family:inherit; font-size:14px; outline:none; resize:vertical;
  }
  .field-add-form textarea:focus { border-color:var(--acc); }
  .field-add-form .cf-group-label {
    font-size:13px; color:var(--txt); font-weight:600; margin-bottom:12px;
  }
  .field-add-form .cf-group-label span { color:var(--acc); }
  .field-add-form .cf-form-head {
    display:flex; align-items:flex-start; gap:10px; margin-bottom:12px;
  }
  .field-add-form .cf-form-head .cf-group-label { flex:1; min-width:0; margin-bottom:0; }
  .field-add-form .cf-form-close {
    flex-shrink:0; width:32px; height:32px; padding:0; margin:-4px -4px 0 0;
    border:1px solid var(--line); border-radius:8px; background:transparent;
    color:var(--mut); font-size:18px; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:inherit;
  }
  .field-add-form .cf-form-close:hover { border-color:var(--acc); color:var(--acc); }
  .group-add-form input {
    width:100%; background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:10px 12px; color:var(--txt); font-family:inherit; font-size:15px; outline:none;
  }
  .group-add-form input:focus { border-color:var(--acc); }
  .field-hint { font-size:12px; color:var(--mut); margin-top:6px; line-height:1.4; }
  .field-err { font-size:12px; color:var(--bad); margin-top:6px; line-height:1.35; min-height:0; }
  .doc-editor { min-height:200px; background:var(--bg-input);
    border-radius:8px; padding:12px; font-size:14px; line-height:1.55; outline:none; }
  .doc-editor mark.doc-missing { background:rgba(214,69,69,.25); color:#B91C1C; padding:0 2px; }
  /* user-select celowo NIE ustawione na none — to blokowałoby przeglądarce włączanie kafelka
     do zaznaczenia, gdy zaznaczasz tekst, który przez niego przechodzi (kafelek traktowany
     jako pojedynczy, nieedytowalny węzeł — contenteditable="false" już to zapewnia, bez
     potrzeby dodatkowego user-select). Bez tego wcięcia/justowanie/kopiowanie zaznaczenia
     obejmującego kafelek urywały się dokładnie na jego granicy. */
  .field-tile { display:inline-block; position:relative; padding:1px 6px; margin:0 1px;
    /* Chip ma być rozpoznawalny, ale font/kolor/waga jak w dokumencie (inherit + inline style). */
    font-family:inherit; font-size:inherit; font-weight:inherit; font-style:inherit;
    line-height:inherit; color:inherit; text-decoration:inherit; letter-spacing:inherit;
    background:color-mix(in srgb, var(--acc-muted) 70%, transparent);
    border:1px solid var(--acc-border); border-radius:5px;
    white-space:nowrap;
    cursor:pointer; vertical-align:baseline;
    transition: box-shadow .15s ease, outline-color .15s ease, filter .15s ease, border-color .15s ease; }
  /* Hover: lekke rozjaśnienie + obwódka (jak wcześniej — działa z półprzezroczystymi kolorami) */
  .field-tile:hover:not(.is-selected):not(.is-grabbed) {
    filter: brightness(1.06);
    box-shadow:0 0 0 2px rgba(166,59,46,.35), 0 2px 8px rgba(33,28,24,.1);
    outline:1px solid rgba(166,59,46,.4); outline-offset:1px;
  }
  .field-tile.is-selected {
    outline:2px solid var(--acc); outline-offset:1px;
    animation: fieldTilePulse 1.6s ease-in-out infinite;
  }
  /* Zaznaczenie tekstem (przeciągnięcie myszką przez kafelek) — przeglądarka nie maluje
     natywnego podświetlenia zaznaczenia na elementach z własnym tłem tak niezawodnie jak na
     zwykłym tekście, więc pilnujemy tego sami (patrz updateFieldTileSelectionVisual). Kolory
     systemowe Highlight/HighlightText — ten sam odcień, jakiego przeglądarka i tak używa do
     zaznaczania zwykłego tekstu, więc wygląda spójnie. */
  .field-tile.is-in-selection { background:Highlight; color:HighlightText; border-color:Highlight; }
  @keyframes fieldTilePulse {
    0%, 100% {
      box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px rgba(166,59,46,.35), 0 0 0 0 rgba(166,59,46,0);
    }
    50% {
      box-shadow:0 0 0 3px #fff, 0 0 0 7px rgba(166,59,46,.5), 0 0 18px 4px rgba(166,59,46,.4);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .field-tile.is-selected { animation:none; box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(166,59,46,.4); }
  }
  .field-tile.is-grabbed { opacity:.72; box-shadow:0 2px 8px rgba(33,28,24,.14); animation:none; }
  .field-tile-drag-ghost {
    position:fixed; top:-1000px; left:0; pointer-events:none; z-index:99999;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
  }
  /* Dymek z × do usunięcia kafelka pola w treści */
  #fieldTileTip {
    position:fixed; z-index:400; display:none;
    transform: translate(-50%, -100%);
    margin-top:-6px;
  }
  #fieldTileTip.is-on { display:block; }
  #fieldTileTip .field-tile-tip-x {
    width:22px; height:22px; border-radius:50%;
    background:#EDE9E2; color:#5A544A; border:1px solid #C9C2B6;
    box-shadow:0 2px 8px rgba(33,28,24,.12);
    cursor:pointer; display:inline-grid; place-items:center;
    padding:0; margin:0; line-height:0;
    font-size:0; /* bez tekstu — sama ikona SVG */
  }
  #fieldTileTip .field-tile-tip-x svg {
    display:block; width:10px; height:10px;
  }
  #fieldTileTip .field-tile-tip-x:hover {
    background:#E0D9CE; color:#3F3A32; border-color:#AFA89C;
  }

  /* ── Instrukcja edytora (tour) ── */
  .tour-overlay {
    position:fixed; inset:0; z-index:100000; pointer-events:none;
    background:rgba(33,28,24,.52);
  }
  .tour-spotlight-el {
    position:relative !important; z-index:100001 !important;
    box-shadow:0 0 0 3px var(--acc), 0 0 0 10px rgba(201,89,67,.22) !important;
    border-radius:10px;
    animation:tourPulse 1.4s ease-in-out infinite;
  }
  @keyframes tourPulse {
    0%,100% { box-shadow:0 0 0 3px var(--acc), 0 0 0 8px rgba(201,89,67,.18); }
    50% { box-shadow:0 0 0 3px var(--acc), 0 0 0 14px rgba(201,89,67,.28); }
  }
  .tour-card {
    position:fixed; z-index:100002; left:50%; bottom:max(20px, env(safe-area-inset-bottom));
    transform:translateX(-50%); width:min(520px, calc(100vw - 20px));
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:18px 20px; box-shadow:0 18px 48px rgba(0,0,0,.3);
    pointer-events:auto; display:flex; gap:16px; align-items:flex-start;
  }
  .tour-card img, .tour-card video { width:88px; height:88px; object-fit:contain; flex-shrink:0; border-radius:8px; }
  .tour-card .tour-step { font-size:13px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; margin:0 0 6px; font-weight:600; }
  .tour-card .tour-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:28px; margin:0 0 8px; line-height:1.1; }
  .tour-card .tour-body { font-size:16px; color:var(--mut); line-height:1.5; margin:0 0 16px; }
  .tour-card .btn-row { margin:0; gap:10px; flex-wrap:wrap; }
  .tour-card .btn-row .btn-ghost,
  .tour-card .btn-row .btn-save {
    width:auto; min-height:44px; padding:12px 18px; font-size:15px; font-weight:700;
  }
  @media (max-width:420px) {
    .tour-card { flex-direction:column; align-items:center; text-align:center; }
    .tour-card .btn-row { justify-content:center; width:100%; }
    .tour-card .btn-row .btn-ghost,
    .tour-card .btn-row .btn-save { flex:1; }
  }
  .tour-drag-ghost {
    position:fixed; z-index:100003; pointer-events:none;
    font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
    background:var(--acc-muted); border:1px solid var(--acc); color:var(--acc);
    box-shadow:0 10px 24px rgba(0,0,0,.2);
    animation:tourDragFly 1.6s ease-in-out forwards;
  }
  @keyframes tourDragFly {
    0% { transform:translate(0,0) scale(1); opacity:0; }
    12% { opacity:1; }
    75% { transform:translate(var(--tour-dx), var(--tour-dy)) scale(1.05); opacity:1; }
    100% { transform:translate(var(--tour-dx), var(--tour-dy)) scale(.85); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tour-spotlight-el { animation:none; }
    .tour-drag-ghost { animation:none; opacity:0; }
  }

  /* ── Kontakt mobilny (tel: / sms:) ── */
  .co-contact-actions { display:inline-flex; gap:6px; align-items:center; }
  .co-contact-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
    background:var(--card); color:var(--txt); text-decoration:none; cursor:pointer;
    font-size:16px; padding:0; font-family:inherit;
  }
  .co-contact-btn:active { border-color:var(--acc); }
  .co-contact-hint { font-size:11px; color:var(--mut); }
  .sms-sheet-list { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
  .sms-sheet-item {
    text-align:left; width:100%; padding:12px 14px; border-radius:12px;
    border:1px solid var(--line); background:var(--card); cursor:pointer;
    font-family:inherit; color:var(--txt);
  }
  .sms-sheet-item:hover { border-color:var(--acc); }
  .sms-sheet-item .sms-name { font-weight:700; font-size:15px; margin:0 0 4px; }
  .sms-sheet-item .sms-preview { font-size:12px; color:var(--mut); line-height:1.4; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sms-tpl-row { border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; }
  .sms-tpl-row label { display:block; font-size:12px; color:var(--mut); margin:0 0 4px; }
  .sms-tpl-row input, .sms-tpl-row textarea, .sms-tpl-row .sms-body-editor {
    width:100%; font-family:inherit; font-size:14px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--bg-input); color:var(--txt);
    box-sizing:border-box;
  }
  .sms-tpl-row textarea { min-height:72px; resize:vertical; }
  .sms-tpl-row .sms-body-editor {
    min-height:88px; max-height:220px; overflow:auto; resize:vertical;
    line-height:1.55; white-space:pre-wrap; word-break:break-word;
  }
  .sms-tpl-row .sms-body-editor:focus {
    outline:none; border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-muted);
  }
  .sms-tpl-row .sms-body-editor.sms-drop-target,
  .sms-tpl-row textarea.sms-drop-target,
  .sms-tpl-row input.sms-drop-target {
    border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-muted);
  }
  .sms-tpl-row .sms-body-editor .field-tile {
    vertical-align:baseline; cursor:pointer;
  }
  .sms-tpl-row .sms-subject-editor {
    min-height:0; max-height:none; white-space:nowrap; overflow-x:auto; overflow-y:hidden;
    resize:none;
  }
  .sms-field-palette { margin-bottom:4px; }
  .sms-ph-group { margin-bottom:10px; }
  .sms-ph-group-title {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--mut); margin:0 0 6px;
  }
  .sms-ph-tiles {
    display:flex; flex-wrap:wrap; gap:6px; margin:0;
  }
  .sms-field-chip {
    cursor: grab;
    user-select: none;
    margin: 0 !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: normal;
    text-transform: none;
    -webkit-appearance: none;
    appearance: none;
    /* Jak .doc-chip / .field-tile w Dokumentach — nie szary --bg-input */
    border: 1px solid var(--acc-border);
    background: var(--acc-muted);
    color: var(--acc-light);
    border-radius: 6px;
    padding: 4px 8px;
  }
  .sms-field-chip:hover:not(.is-grabbed) {
    background: rgba(178,58,46,.22);
  }
  .sms-field-chip:active, .sms-field-chip.is-grabbed { cursor: grabbing; opacity: .85; }

/* OFFICE CHAT BUBBLE + NOTEBOOK (injected into panel.html) */

  .nb-card { margin: 14px 0; }
  .nb-section { margin-bottom: 12px; }
  .nb-section:last-child { margin-bottom: 0; }
  .nb-section-h {
    display:flex; align-items:center; gap:8px; margin:0 0 6px;
    font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700;
  }
  .nb-section-h .rd-count-badge { margin-left:2px; }
  .nb-pad-tools { display:none; gap:6px; margin:0 0 6px; flex-wrap:wrap; }
  .nb-pad-tools.is-show { display:flex; }
  .nb-pad-tools .btn-ghost {
    width:auto;
    padding:5px 10px;
    font-size:12px;
    min-width:32px;
    border-radius:8px;
  }
  .nb-pad-tools .btn-ghost b, .nb-pad-tools .btn-ghost i, .nb-pad-tools .btn-ghost u { font-size:13px; }
  .nb-pad {
    width:100%; min-height:88px; max-height:280px; overflow:auto; resize:vertical; box-sizing:border-box;
    font:inherit; font-size:14px; line-height:1.5; padding:10px 12px;
    border:1px solid var(--line); border-radius:12px;
    background:var(--bg-input); color:var(--txt);
    white-space:pre-wrap; word-break:break-word;
  }
  .nb-pad:focus { border-color:var(--acc); outline:none; }
  .nb-pad:empty:before {
    content:attr(data-placeholder); color:var(--mut); pointer-events:none;
  }
  .nb-pad b, .nb-pad strong { font-weight:700; }
  .nb-pad i, .nb-pad em { font-style:italic; }
  .nb-pad u { text-decoration:underline; }
  .nb-meta {
    margin:4px 0 0; font-size:11px; color:var(--mut); line-height:1.35;
    min-height:1.2em;
  }
  .nb-meta.is-saving { color:var(--acc); }
  /* Notatki biura — bez ramki, bez tła, bez strzałki; wygląd jak "Moje notatki" */
  .nb-office-details {
    border:none; background:transparent; padding:0; margin-top:14px;
  }
  .nb-office-details > summary {
    list-style:none; display:flex; align-items:center; gap:8px; padding:0 0 6px;
    font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700;
    user-select:none; cursor:default; pointer-events:none;
  }
  .nb-office-details > summary::-webkit-details-marker { display:none !important; }
  .nb-office-details > summary::-moz-list-bullet { display:none !important; }
  .nb-office-details > summary::before {
    content:'' !important;
    display:none !important;
    transform:none !important;
    transition:none !important;
  }
  .nb-office-body { padding:0; }
  .nb-office-details .nb-pad { background:var(--bg-input); }
  .nb-stable-section { margin-top:10px; }
  .nb-stable-h {
    font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700;
    color:var(--mut); margin:0 0 6px;
  }
  .nb-stable-body { padding:0; }
  .nb-stable-actions { display:flex; flex-direction:column; gap:6px; }
  .nb-stable-actions-row { display:flex; gap:6px; }
  .nb-stable-actions-row .btn-ghost,
  .nb-stable-actions-row .btn-del { flex:1; }
  .nb-stable-actions .btn-ghost,
  .nb-stable-actions .btn-del,
  .nb-stable-actions .btn-save {
    padding:5px 10px; font-size:12px; font-weight:600; border-radius:7px;
  }
  .nb-stable-actions .btn-save { margin-top:4px; }
  .nb-pin-btn {
    display:inline-block; background:none; border:none; padding:0;
    font-size:11px; color:var(--txt3, #999); cursor:pointer; font-family:inherit;
    text-decoration:none; margin-top:6px; opacity:.7;
    transition:opacity .15s, color .15s;
  }
  .nb-pin-btn:hover { opacity:1; color:var(--acc); }
  .nb-stable-list {
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px; margin-bottom:8px; align-items:stretch;
  }
  @media (max-width:959.98px) {
    .nb-stable-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width:639.98px) {
    .nb-stable-list { grid-template-columns:1fr; }
  }
  /* Dla 50+ — gdy brak przypiętych notatek nie pokazujemy “pustego” komunikatu (za dużo miejsca). */
  .nb-stable-list .empty { padding:0 !important; font-size:0 !important; line-height:0 !important; min-height:0 !important; }
  .nb-item {
    border:1px solid var(--line); border-radius:10px; padding:10px 12px;
    background:var(--card); cursor:pointer; min-width:0;
    display:flex; flex-direction:column; gap:6px;
    box-shadow:0 1px 0 rgba(40,30,20,.04);
    transition:border-color .12s, background .12s;
  }
  .nb-item:hover { border-color:rgba(166,59,46,.35); }
  .nb-item.is-on { border-color:var(--acc); background:var(--acc-muted); }
  .nb-item-body {
    margin:0; font-size:13px; line-height:1.4; color:var(--txt);
    white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  }
  .nb-item-body.is-empty { color:var(--mut); white-space:normal; }
  .nb-item-title { font-weight:700; font-size:14px; margin:0 0 4px; }
  .nb-item-meta { font-size:11px; color:var(--mut); }
  .nb-editor { margin-top:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-input); display:none; }
  .nb-editor.is-open { display:block; }
  .nb-editor-hd { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700; margin-bottom:14px; }
  .nb-check { display:flex; align-items:flex-start; gap:8px; margin:6px 0; }
  .nb-check input { margin-top:3px; }
  .nb-check input[type="text"] { flex:1; font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--txt); }
  .home-alert {
    display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:10px;
    border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer;
    font-size:13px; line-height:1.35;
  }
  .home-alert.is-warn { border-color:rgba(146,96,10,.35); background:rgba(146,96,10,.08); }
  .home-alert .ha-ico { font-size:18px; flex:none; }
  .home-alert .ha-go { margin-left:auto; color:var(--mut); font-size:12px; flex:none; }

  /* ── Pulpit: plan tygodnia — spokojny blotnik, bez kolorowego szumu ── */
  .tl-card {
    margin-bottom:14px; padding:14px 12px 16px;
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:none;
    overflow:hidden;
  }
  html.dark .tl-card { background:var(--card); box-shadow:none; }
  .tl-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .tl-hd h2 {
    margin:0; font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700;
    text-transform:none; letter-spacing:.2px;
  }
  .tl-hd .tl-range {
    display:block; font-size:12px; color:var(--mut); font-weight:500; text-transform:none;
    letter-spacing:0; margin-top:2px; font-family:'Barlow',sans-serif;
  }
  .tl-add { flex:none; padding:6px 12px; font-size:12px; font-weight:600; border-radius:8px; }
  .tl-overdue {
    margin-bottom:12px; padding:10px 12px; border-radius:10px;
    border:1px solid var(--line); background:transparent;
  }
  .tl-overdue-h {
    font-size:13px; font-weight:600; margin-bottom:8px; color:var(--mut);
    text-transform:none; letter-spacing:0; font-family:inherit;
  }
  .tl-overdue-list { display:flex; flex-direction:column; gap:6px; }

  .tl-blotter {
    display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; padding:2px 2px 6px; margin:0 -2px;
  }
  .tl-col {
    flex:1 0 min(108px, 28vw); max-width:160px; min-height:140px;
    scroll-snap-align:start;
    background:transparent; border:0; border-radius:0;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:none;
  }
  @media (min-width:960px) {
    .tl-blotter { overflow:visible; }
    .tl-col { flex:1 1 0; min-width:0; max-width:none; }
  }
  html.dark .tl-col { background:transparent; }
  .tl-col.is-today { border:0; box-shadow:none; background:transparent; }
  .tl-col.is-empty { opacity:.55; }
  .tl-col-hd {
    text-align:center; padding:6px 4px 8px;
    border-bottom:1px solid var(--line);
    background:transparent;
  }
  html.dark .tl-col-hd { background:transparent; }
  .tl-col.is-today .tl-col-hd {
    background:transparent; border-bottom-color:var(--acc); color:inherit;
  }
  .tl-col-dow {
    font-size:11px; font-weight:600; letter-spacing:.02em;
    text-transform:uppercase; color:var(--mut); margin:0 0 2px;
    font-family:inherit;
  }
  .tl-col.is-today .tl-col-dow { color:var(--acc); }
  .tl-col-num {
    font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700;
    line-height:1; color:var(--txt); margin:0;
  }
  .tl-col.is-today .tl-col-num { color:var(--acc); }
  .tl-col-tag { display:none; }
  .tl-col-body {
    flex:1; padding:6px 2px; display:flex; flex-direction:column; gap:4px;
    overflow-y:auto; max-height:200px;
  }
  .tl-quiet {
    font-size:11px; color:var(--mut); text-align:center; padding:10px 4px; line-height:1.35;
    opacity:.6;
  }

  /* Karta: sam tytuł */
  .tl-item {
    position:relative; border:0; border-radius:6px; padding:6px 8px;
    background:var(--bg-input); cursor:pointer; text-align:left; width:100%;
    font:inherit; color:inherit; display:block;
    box-shadow:none; border-top:0;
    transition:background .12s;
  }
  html.dark .tl-item { background:var(--bg-input); }
  .tl-item.kind-recurring,
  .tl-item.kind-inbound,
  .tl-item.kind-office { border-top-color:transparent; }
  .tl-item:hover { transform:none; box-shadow:none; background:rgba(0,0,0,.06); }
  html[data-theme="dark"] .tl-item:hover { background:rgba(255,255,255,.08); }
  .tl-item:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
  .tl-kind { display:none; }
  .tl-item-title {
    font-weight:600; font-size:12px; margin:0; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .tl-item-sub { display:none; }
  .tl-item-top { display:none; }
  .tl-meta {
    display:block; margin-top:2px; font-size:10px; color:var(--mut); font-weight:500;
  }
  .tl-item.is-overdue .tl-meta { color:var(--mut); }
  .tl-chip { display:none; }

  /* Miesiąc: lista pasm */
  .tl-month { display:flex; flex-direction:column; gap:8px; }
  .tl-band {
    border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent;
    overflow:hidden; padding-bottom:8px;
  }
  html.dark .tl-band { background:transparent; }
  .tl-band.is-today { border-color:var(--line); box-shadow:none; }
  .tl-band-hd {
    display:flex; align-items:baseline; gap:8px; padding:6px 2px 8px;
    border-bottom:0; background:transparent;
    font-weight:600; text-transform:none; letter-spacing:0;
    font-size:13px; color:var(--mut); font-family:inherit;
  }
  .tl-band.is-today .tl-band-hd { color:var(--acc); background:transparent; }
  .tl-band-body { padding:0 0 0; display:flex; flex-direction:column; gap:4px; }
  .tl-band-body .tl-item { border-radius:6px; padding:8px 10px; }
  .tl-band-body .tl-item-title { font-size:13px; -webkit-line-clamp:2; }
  .tl-band-body .tl-item-sub { display:none; }
  .tl-band-body .tl-kind { display:none; }

  .tl-empty { font-size:13px; color:var(--mut); padding:8px 0 4px; }
  .tl-more-wrap { text-align:center; margin-top:12px; }
  .tl-more { padding:6px 14px; font-size:12px; font-weight:600; border-radius:8px; }
  .tl-sheet-bg {
    position:fixed; inset:0; z-index:6000; background:rgba(20,16,14,.45);
    display:flex; align-items:flex-end; justify-content:center; padding:16px;
  }
  @media (min-width:640px) { .tl-sheet-bg { align-items:center; } }
  .tl-sheet {
    width:100%; max-width:400px; background:var(--card); border:1px solid var(--line);
    border-radius:14px; padding:16px; box-shadow:0 12px 40px rgba(0,0,0,.18);
  }
  .tl-sheet h3 { margin:0 0 12px; font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; }
  .tl-sheet .tl-sheet-actions { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
  .tl-sheet .tl-sheet-actions .btn-ghost,
  .tl-sheet .tl-sheet-actions .btn-save {
    padding:5px 10px; font-size:12px; font-weight:600; border-radius:7px; width:100%;
  }

  .office-fab {
    position:fixed; z-index:4500; right:16px; bottom:calc(var(--bnav-bar-h, 48px) + 20px + env(safe-area-inset-bottom, 0px));
    width:56px; height:56px; border-radius:50%; border:2px solid #fff; cursor:pointer;
    background:var(--acc); color:#fff; box-shadow:0 6px 20px rgba(166,59,46,.32);
    font-size:22px; display:none; align-items:center; justify-content:center;
    padding:0; overflow:visible; /* badge wystaje poza kółko — nie obcinać */
  }
  html.esf-in-app .office-fab { display:flex; }
  .office-fab:hover { filter:brightness(1.06); transform:translateY(-1px); }
  .office-fab-icon {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
  }
  .office-fab-icon svg {
    width:26px; height:26px; display:block;
  }
  .office-fab.is-open {
    background:var(--card);
    border-color:var(--acc-border);
    box-shadow:0 8px 24px rgba(166,59,46,.28);
  }
  .office-fab.is-open .office-fab-icon svg path { fill:var(--acc); }
  .office-fab.is-open .office-fab-icon svg circle { fill:#FFFCFA; }
  .office-fab-badge {
    position:absolute; top:-4px; right:-4px; z-index:2; min-width:20px; height:20px; padding:0 5px;
    border-radius:999px; background:var(--bad); color:#fff; font-size:11px; font-weight:700;
    display:none; align-items:center; justify-content:center; border:2px solid #fff;
    box-sizing:border-box; line-height:1; pointer-events:none;
  }
  .office-fab-badge.is-on { display:flex; }
  .office-panel {
    position:fixed; z-index:4501; right:16px; bottom:calc(var(--bnav-bar-h, 48px) + 84px + env(safe-area-inset-bottom, 0px));
    width:min(360px, calc(100vw - 24px)); height:min(520px, calc(100vh - 140px));
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,.28); display:none; flex-direction:column; overflow:hidden;
  }
  .office-panel.is-open { display:flex; animation:officePanelIn .22s ease-out; }
  @keyframes officePanelIn {
    from { opacity:0; transform:translateY(10px) scale(.98); }
    to { opacity:1; transform:translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .office-panel.is-open { animation:none; }
    .office-fab:hover { transform:none; }
  }
  .office-panel-head {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border-bottom:1px solid var(--line);
    background:var(--card);
  }
  .office-panel-mascot {
    width:40px; height:40px; border-radius:10px; overflow:hidden; flex:none;
    border:1px solid var(--line); background:#fff;
  }
  .office-panel-mascot video, .office-panel-mascot img {
    width:100%; height:100%; object-fit:cover; display:block; background:#fff;
  }
  .office-panel-head-text { flex:1; min-width:0; }
  .office-panel-head h3 {
    margin:0; font-family:'Barlow Condensed',sans-serif; font-weight:700;
    font-size:17px; letter-spacing:.02em; line-height:1.1;
  }
  .office-panel-head .oph-sub {
    margin:2px 0 0; font-size:11px; color:var(--mut); font-weight:500;
  }
  .office-tabs { display:flex; gap:0; padding:0 8px; border-bottom:1px solid var(--line); }
  .office-tabs .office-tab {
    margin:0; padding:9px 12px; border:0; background:transparent; cursor:pointer;
    font:inherit; font-size:13px; font-weight:600; color:var(--mut);
    border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0;
  }
  .office-tabs .office-tab:hover { color:var(--txt); }
  .office-tabs .office-tab.active {
    color:var(--txt); border-bottom-color:var(--acc);
    background:transparent;
  }
  /* kompat: stare chipy w panelu */
  .office-tabs .doc-chip { margin:0; }
  .office-body {
    flex:1; overflow:auto; padding:10px 12px;
    background:var(--bg);
  }
  /* Separatory dni — spokojne, bez pieczątek */
  .office-day-sep {
    display:flex; align-items:center; gap:10px;
    margin:12px 0 10px; user-select:none;
  }
  .office-day-sep:first-child { margin-top:2px; }
  .office-day-sep::before,
  .office-day-sep::after {
    content:''; flex:1; height:1px; background:var(--line);
  }
  .office-day-sep span {
    flex:none; font-size:11px; font-weight:500; letter-spacing:.02em;
    text-transform:none; color:var(--mut); padding:0 2px;
    border:0; border-radius:0; background:transparent; box-shadow:none;
    font-family:inherit;
  }
  .office-new-sep {
    display:flex; align-items:center; gap:10px;
    margin:8px 0 10px; user-select:none;
  }
  .office-new-sep::before,
  .office-new-sep::after {
    content:''; flex:1; height:1px; background:var(--line);
  }
  .office-new-sep span {
    flex:none; font-size:11px; font-weight:600; letter-spacing:.02em;
    text-transform:none; color:var(--mut); background:transparent;
    padding:0 2px; border-radius:0; box-shadow:none;
    font-family:inherit;
  }
  .office-msg.is-rem { cursor:pointer; }
  .office-msg.is-rem:hover .bubble { filter:brightness(0.99); }
  .office-rem-group-title {
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--mut);
    margin:12px 0 8px;
  }
  .office-rem-group-title:first-child { margin-top:0; }
  .office-rem-group-title.is-overdue { color:var(--bad); }
  .office-msg {
    display:flex; gap:8px; align-items:flex-end; margin-bottom:10px;
    animation:officeMsgIn .2s ease-out;
  }
  .office-msg.is-quiet { animation:none; }
  .office-msg.is-continued {
    margin-top:-4px; margin-bottom:6px;
  }
  .office-msg.is-continued .om-avatar { visibility:hidden; }
  .office-msg.is-continued .who { display:none; }
  .office-msg.is-me .who { display:none; }
  @keyframes officeMsgIn {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .office-msg { animation:none; }
  }
  .office-msg.is-me { flex-direction:row-reverse; }
  .office-msg .om-avatar {
    width:26px; height:26px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:.02em; color:var(--mut);
    background:transparent; border:1px solid var(--line);
  }
  .office-msg.is-me .om-avatar { display:none; }
  .office-msg.is-rem .om-avatar {
    color:var(--warn); border-color:rgba(146,96,10,.35);
  }
  .office-msg .om-col { max-width:min(88%, 280px); min-width:0; }
  .office-msg.is-me .om-col { max-width:min(88%, 280px); }
  .office-msg .who {
    font-size:11px; color:var(--mut); margin:0 0 2px 2px; font-weight:500;
  }
  .office-msg .bubble {
    position:relative; display:block; padding:8px 11px 6px;
    border-radius:12px 12px 12px 4px;
    background:var(--card); border:1px solid var(--line);
    font-size:13.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word;
    box-shadow:none;
  }
  .office-msg.is-me .bubble {
    border-radius:12px 12px 4px 12px;
    background:rgba(0,0,0,.04); border-color:transparent; text-align:left;
  }
  .office-msg.is-rem .bubble {
    border-color:rgba(146,96,10,.28);
    background:rgba(146,96,10,.06);
  }
  .office-msg .bubble .om-time {
    display:inline; margin-left:8px; font-size:10px; color:var(--mut);
    font-weight:500; white-space:nowrap; float:right; margin-top:4px;
  }
  .office-chat-empty {
    text-align:center; padding:28px 16px 20px; color:var(--mut); font-size:13px;
  }
  .office-chat-empty video {
    width:96px; height:96px; object-fit:cover; border-radius:14px;
    border:1px solid var(--line); background:#fff; margin:0 auto 12px; display:block;
  }
  .office-compose {
    display:flex; gap:6px; padding:10px; border-top:1px solid var(--line);
    background:var(--card);
    align-items:flex-end;
  }
  .office-compose input, .office-compose textarea {
    flex:1; font:inherit; font-size:13px; padding:10px 12px; border:1px solid var(--line);
    border-radius:12px; background:var(--bg-input); color:var(--txt); resize:none;
    min-height:42px; max-height:100px;
  }
  .office-compose .btn-save {
    border-radius:12px; min-width:42px;
  }

  /* Termin — czat biura (stempel jak pieczątka na papierze) */
  .office-rem-form {
    margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:12px;
    background:linear-gradient(180deg, #FFFCFA 0%, var(--card) 100%);
  }
  .office-rem-form > .office-rem-form-title {
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16px;
    letter-spacing:.02em; margin:0 0 10px; color:var(--txt);
  }
  .office-due {
    margin:10px 0 12px; padding:10px; border-radius:10px;
    border:1px dashed var(--acc-border); background:var(--acc-muted);
  }
  .office-due > label {
    display:block; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--acc-light); margin:0 0 8px;
  }
  .office-due-stamp {
    display:flex; align-items:baseline; justify-content:space-between; gap:8px;
    margin:0 0 10px; padding:6px 10px; border-radius:8px;
    background:var(--bg-input); border:1.5px solid var(--acc-border);
    box-shadow:inset 0 0 0 1px rgba(166,59,46,.06);
  }
  .office-due-stamp .ods-when {
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px;
    letter-spacing:.03em; color:var(--acc); line-height:1.1;
  }
  .office-due-stamp .ods-rel {
    font-size:11px; font-weight:600; color:var(--mut); white-space:nowrap;
  }
  .office-due-stamp.is-soon .ods-when { color:var(--warn); }
  .office-due-stamp.is-soon { border-color:rgba(146,96,10,.35); }
  .office-due-grid {
    display:grid; grid-template-columns:1.35fr 1fr; gap:8px;
  }
  .office-due-grid .fg { margin:0; }
  .office-due-grid .fg label {
    font-size:11px; font-weight:600; color:var(--mut); margin-bottom:4px;
    text-transform:none; letter-spacing:0;
  }
  .office-due-grid input[type="date"],
  .office-due-grid input[type="time"] {
    width:100%; font:inherit; font-size:14px; font-weight:600;
    padding:9px 10px; border:1px solid var(--line); border-radius:8px;
    background:var(--bg-input); color:var(--txt);
    color-scheme:light;
  }
  .office-due-grid input[type="date"]:focus,
  .office-due-grid input[type="time"]:focus {
    outline:none; border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-muted);
  }
  .office-rem-card {
    margin-bottom:8px; padding:10px 12px; border-radius:12px;
    background:var(--bg-input); border:1px solid var(--line);
  }
  .office-rem-card.is-overdue {
    border-color:rgba(185,28,28,.45);
    background:linear-gradient(135deg, rgba(185,28,28,.06), var(--bg-input));
  }
  .office-rem-card .orc-body { font-weight:600; font-size:14px; margin:0 0 8px; line-height:1.35; }
  .office-rem-card .orc-foot {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:8px;
  }
  .office-rem-card .orc-from { font-size:11px; color:var(--mut); }
  .office-rem-badge {
    display:inline-flex; align-items:baseline; gap:5px; padding:3px 8px;
    border-radius:6px; border:1.5px solid var(--acc-border); background:var(--acc-muted);
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px;
    letter-spacing:.02em; color:var(--acc-light); line-height:1.2;
  }
  .office-rem-badge .orb-rel { font-family:'Barlow',sans-serif; font-size:10px; font-weight:600; color:var(--mut); letter-spacing:0; }
  .office-rem-badge.is-overdue {
    border-color:rgba(185,28,28,.4); background:rgba(185,28,28,.08); color:var(--bad);
  }
  .office-rem-badge.is-overdue .orb-rel { color:var(--bad); }

  @media (min-width:900px) {
    .office-fab { bottom:24px; }
    .office-panel { bottom:92px; }
  }

  .help-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; flex:none;
    background:var(--card); color:var(--acc); font-family:inherit;
    font-size:14px; font-weight:700; line-height:1;
    border:1px solid var(--acc-border); cursor:pointer; padding:0;
    box-shadow:0 1px 3px rgba(0,0,0,.12);
  }
  .help-btn:hover { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-muted); }
  .help-pop {
    position:fixed; z-index:5000; width:min(320px, calc(100vw - 32px));
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; box-shadow:0 12px 32px rgba(0,0,0,.18);
  }
  .help-pop h4 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px; margin:0 0 6px; }
  .help-pop p { font-size:13px; color:var(--mut); line-height:1.5; margin:0 0 10px; }
  .help-pop a { font-size:12px; font-weight:600; color:var(--acc); text-decoration:none; }
  .help-pop a:hover { text-decoration:underline; }

  .doc-drop-gap {
    display:inline-block;
    width:var(--doc-gap-w, 76px);
    height:1.2em;
    vertical-align:text-bottom;
    margin:0 2px;
    border:1.5px dashed var(--acc);
    border-radius:5px;
    background:var(--acc-muted);
    box-sizing:border-box;
    pointer-events:none;
    user-select:none;
  }
  /* Edytor: maksymalnie dużo miejsca na kartkę — wąski chrome + JEDEN scroll dokumentu. */
  #main.is-doc-editing {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* bez tego flex/grid nie ściska → drugi scroll na #app/body */
    overflow: hidden !important;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
  }
  /* Po wyjściu z edytora bez leaveDocEditorChrome treść nie miała scrolla — fallback. */
  #main.is-doc-editing:not(:has(.doc-editor-scroll)) {
    overflow-y: auto !important;
    display: block;
    height: auto;
    max-height: none;
  }
  #main.is-doc-editing > .page-header { display: none; }
  .doc-editor-slim {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
  }
  .doc-editor-slim .doc-name-inline {
    flex: 1 1 140px;
    min-width: 100px;
    width: auto;
    margin: 0;
    font-weight: 600;
    font-size: 14px;
  }
  .doc-editor-slim .btn-save,
  .doc-editor-slim .btn-ghost,
  .doc-editor-slim .btn-del {
    width: auto;
    flex: none;
    min-height: 36px;
    margin: 0;
    padding: 6px 12px;
  }
  .doc-editor-slim .doc-slim-icon {
    min-width: 36px;
    padding: 6px 8px;
  }
  .doc-editor-slim .doc-meta-toggle[aria-expanded="true"] {
    border-color: var(--acc);
    color: var(--acc);
    background: var(--acc-muted);
  }
  .doc-editor-meta-extra {
    flex: 0 0 auto;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
  }
  #main.is-doc-editing > .doc-toolbar-sticky {
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    margin: 0 0 4px;
    padding: 0;
    background: var(--bg);
    box-shadow: none;
    border-bottom: 1px solid var(--line);
    max-width: 100%;
    min-width: 0;
  }
  #main.is-doc-editing > .doc-editor-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  #main.is-doc-editing .doc-editor-body-card {
    margin-bottom: 12px;
    overflow: visible;
  }
/* Szyna pól: sticky + własny scroll — długą listę kafelków da się przejechać
   bez ucinania dołu (wcześniej overflow:visible + max-height:none). */
#main.is-doc-editing .doc-field-rail {
  position: sticky;
  top: 8px;
  align-self: flex-start;
  max-height: calc(100dvh - 120px);
  max-height: calc(100vh - 120px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
  #main.is-doc-editing .doc-zoom-rail {
    top: 8px;
  }
  #main.is-doc-editing .doc-page-wrap {
    /* Obie osie hidden — sam overflow-x:hidden przy zmniejszonej height → overflow-y:auto (2. scroll). */
    overflow: hidden;
  }
  #main.is-doc-editing .doc-page-zoom-area {
    overflow: hidden;
    max-width: 100%;
  }
  #main.is-doc-editing .doc-manage-host {
    max-height: none;
    overflow: visible;
  }
  #main.is-doc-scrolled .doc-editor-meta-extra {
    display: none !important;
  }

  .doc-toolbar-sticky {
    position: relative;
    z-index: 5;
    margin: 0 0 12px;
    padding: 8px 0 10px;
    background: var(--bg);
    box-sizing: border-box;
  }
  .doc-toolbar-label {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--mut);
  }
  .doc-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:4px; row-gap:6px; margin:0; padding:6px;
    background:var(--bg-input); border:1px solid var(--line); border-radius:8px; }

  /* Ribbon jak Word — zwarty, 1 rząd grup + poziomy scroll przy overflow */
  .doc-ribbon {
    border:1px solid var(--line); border-radius:6px; background:var(--bg-input);
    overflow:hidden; max-width:100%;
  }
  .doc-ribbon-tabs {
    display:flex; flex-wrap:nowrap; gap:0; padding:0 4px; min-height:28px;
    background:var(--card); border-bottom:1px solid var(--line);
    overflow-x:auto; scrollbar-width:thin;
  }
  .doc-ribbon-tab {
    border:0; background:transparent; color:var(--mut); font:inherit; font-size:12px;
    padding:6px 10px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
    white-space:nowrap; flex:none;
  }
  .doc-ribbon-tab:hover { color:var(--txt); }
  .doc-ribbon-tab.is-on {
    color:var(--acc, #A63B2E); font-weight:600;
    border-bottom-color:var(--acc, #A63B2E);
  }
  .doc-ribbon-panel[hidden] { display:none !important; }
  .doc-ribbon-panel.is-on {
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#8a8580 transparent;
  }
  .doc-ribbon-panel.is-on::-webkit-scrollbar { height:9px; }
  .doc-ribbon-panel.is-on::-webkit-scrollbar-track { background:rgba(0,0,0,.04); }
  .doc-ribbon-panel.is-on::-webkit-scrollbar-thumb {
    background:#9a9590; border-radius:5px; border:2px solid transparent; background-clip:padding-box;
  }
  .doc-ribbon-panel.is-on::-webkit-scrollbar-thumb:hover { background:#6e6a66; }
  .doc-toolbar.doc-ribbon-row {
    display:flex; flex-wrap:nowrap; align-items:stretch; gap:0;
    width:max-content; min-width:100%;
    padding:3px 2px 0; margin:0;
    background:transparent; border:0; border-radius:0;
    overflow:visible;
  }
  .doc-ribbon-group {
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:1px 6px 2px; border-right:1px solid var(--line); flex:0 0 auto;
  }
  .doc-ribbon-group:last-child { border-right:0; }
  .doc-ribbon-group-tools {
    display:flex; flex-wrap:nowrap; align-items:center; align-content:center;
    gap:1px; min-height:44px; justify-content:flex-start;
  }
  .doc-ribbon-group[data-ribbon-g="font"] .doc-ribbon-group-tools {
    flex-direction:column; align-items:flex-start; gap:2px; min-height:0;
  }
  .doc-ribbon-font-row {
    display:flex; flex-wrap:nowrap; align-items:center; gap:2px;
  }
  .doc-ribbon-group-label {
    font-size:10px; color:var(--mut); margin-top:1px; line-height:1.15;
    text-align:center; white-space:nowrap; flex:none; padding-bottom:1px;
  }
  .doc-ribbon .doc-toolbar button {
    min-width:26px; min-height:26px; padding:3px 5px; border-radius:3px;
  }
  .doc-ribbon .doc-toolbar select {
    min-width:56px; max-width:110px; height:26px; padding:1px 4px; font-size:12px;
    margin:0;
  }
  #docFontFamilySelect { min-width:100px; max-width:130px; }
  #docFontSizeSelect { min-width:48px; max-width:56px; }
  .doc-ribbon-break { display:none; }
  .doc-ribbon-stack { display:flex; flex-direction:column; gap:0; }
  .doc-ribbon-stack button { min-height:22px; padding:1px 5px; }
  .doc-ribbon-paste {
    flex-direction:column; min-width:40px; min-height:44px; padding:2px 4px; gap:1px;
    font-size:10px; font-weight:600;
  }
  .doc-ribbon-paste .doc-ico { width:18px; height:18px; }
  .doc-ribbon-style {
    flex-direction:column; min-width:68px; min-height:48px; padding:4px 6px;
    font-size:10px; font-weight:500; gap:2px; border:1px solid var(--line); background:var(--card);
  }
  .doc-ribbon-style-ex { font-family:Georgia, serif; font-size:15px; line-height:1.1; color:var(--txt); }
  .doc-ribbon-check {
    display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--txt);
    cursor:pointer; padding:2px 4px; user-select:none; white-space:nowrap;
  }
  .doc-ribbon .doc-list-split { display:inline-flex; align-items:center; gap:0; }
  .doc-font-color-btn, .doc-highlight-btn {
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; min-width:28px; min-height:26px; padding:2px 5px 1px; line-height:1;
  }
  .doc-font-color-a {
    font-family:Georgia, 'Times New Roman', serif; font-size:14px; font-weight:700;
    color:var(--txt); line-height:1;
  }
  .doc-font-color-bar {
    display:block; width:14px; height:3px; border-radius:1px; margin-top:1px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  }
  .doc-font-color-bar.is-none {
    background:repeating-linear-gradient(-45deg, #fff, #fff 2px, #e11 2px, #e11 3.5px) !important;
  }
  .doc-case-btn { font-family:Georgia, 'Times New Roman', serif; font-size:13px; font-weight:600; letter-spacing:.2px; }
  .doc-color-palette, .doc-case-menu {
    position:fixed; z-index:12000; min-width:196px; max-width:240px;
    padding:8px; background:var(--card, #fff); border:1px solid var(--line);
    border-radius:6px; box-shadow:0 8px 28px rgba(0,0,0,.18);
  }
  .doc-color-lbl {
    font-size:11px; color:var(--mut); margin:8px 0 4px; font-weight:600;
  }
  .doc-color-lbl:first-child { margin-top:0; }
  .doc-color-auto {
    display:block; width:100%; text-align:left; padding:6px 8px; margin:0 0 2px;
    border:0; background:transparent; border-radius:4px; cursor:pointer;
    font:inherit; font-size:12px; color:var(--txt);
  }
  .doc-color-auto:hover { background:rgba(178,58,46,.08); }
  .doc-color-grid {
    display:grid; grid-template-columns:repeat(10, 16px); gap:2px;
    justify-content:start;
  }
  .doc-color-grid--std { margin-bottom:2px; }
  .doc-color-grid--hi { grid-template-columns:repeat(8, 18px); gap:3px; }
  .doc-color-swatch {
    width:16px; height:16px; padding:0; border:1px solid rgba(0,0,0,.18);
    border-radius:2px; cursor:pointer; box-sizing:border-box;
  }
  .doc-color-grid--hi .doc-color-swatch { width:18px; height:18px; }
  .doc-color-swatch:hover { outline:2px solid var(--acc); outline-offset:1px; }
  .doc-color-swatch.is-light { border-color:rgba(0,0,0,.28); }
  .doc-color-swatch.is-none {
    background:repeating-linear-gradient(-45deg, #fff, #fff 2px, #e11 2px, #e11 3.5px) !important;
  }
  .doc-case-menu { min-width:180px; padding:4px; }
  .doc-case-menu button {
    display:block; width:100%; text-align:left; padding:8px 10px; margin:0;
    border:0; background:transparent; border-radius:4px; cursor:pointer;
    font:inherit; font-size:13px; color:var(--txt);
  }
  .doc-case-menu button:hover { background:rgba(178,58,46,.08); }
  html[data-theme="dark"] .doc-color-palette,
  html[data-theme="dark"] .doc-case-menu {
    background:#2B2B2B; border-color:#505050; box-shadow:0 8px 28px rgba(0,0,0,.45);
  }
  html[data-theme="dark"] .doc-color-swatch { border-color:rgba(255,255,255,.22); }
  html[data-theme="dark"] .doc-font-color-a { color:#E8E8E8; }
  .doc-ribbon .doc-list-caret { min-width:16px; padding:3px 2px; font-size:10px; }
  /* Na desktopie rail jest zawsze — w ribbonie zostaw „Pola” widoczne */
  .doc-ribbon .doc-fields-open-btn { display:inline-flex !important; }
  .doc-ribbon .doc-detect-btn { padding:3px 7px; font-size:11px; min-height:26px; }
  #docZoomLabelRibbon {
    display:inline-flex; align-items:center; min-width:36px; justify-content:center;
    font-size:11px; font-weight:600; color:var(--txt);
  }

  /* Dark mode — jak Word: ciemny chrome wokół, BIAŁA kartka z czarnym tekstem */
  html[data-theme="dark"] #main.is-doc-editing > .doc-toolbar-sticky {
    background:#252525; border-bottom-color:#404040;
  }
  html[data-theme="dark"] #main.is-doc-editing > .doc-editor-scroll,
  html[data-theme="dark"] #main.is-doc-editing .doc-page-zoom-area,
  html[data-theme="dark"] #main.is-doc-editing .doc-editor-work {
    background:#1B1B1B;
  }
  html[data-theme="dark"] #main.is-doc-editing .doc-editor-body-card {
    background:transparent; border-color:transparent; box-shadow:none;
  }
  html[data-theme="dark"] .doc-ribbon {
    background:#2D2D2D; border-color:#404040;
  }
  html[data-theme="dark"] .doc-ribbon-tabs { background:#252525; border-bottom-color:#404040; }
  html[data-theme="dark"] .doc-ribbon-tab { color:#B0B0B0; }
  html[data-theme="dark"] .doc-ribbon-tab.is-on { color:#6CB8F6; border-bottom-color:#6CB8F6; }
  html[data-theme="dark"] .doc-ribbon-group { border-right-color:#404040; }
  html[data-theme="dark"] .doc-ribbon-group-label { color:#9A9A9A; }
  html[data-theme="dark"] .doc-ribbon-style { background:#333; border-color:#505050; }
  html[data-theme="dark"] .doc-ribbon .doc-toolbar button,
  html[data-theme="dark"] .doc-ribbon .doc-toolbar select { color:#F3F3F3; }
  html[data-theme="dark"] .doc-ribbon .doc-toolbar select {
    background:#1B1B1B; border-color:#505050;
  }
  /* Kartka A4 w trybie ciemnym — jak w Word Online: kartka też ciemna, nie biały papier. */
  html[data-theme="dark"] #main.is-doc-editing .doc-page-sheet,
  html[data-theme="dark"] #main.is-doc-editing .doc-sheet,
  html[data-theme="dark"] #main.is-doc-editing .doc-page-body,
  html[data-theme="dark"] #main.is-doc-editing .doc-sheet-body,
  html[data-theme="dark"] #main.is-doc-editing .doc-letterhead,
  html[data-theme="dark"] #main.is-doc-editing .doc-page-footer-band,
  html[data-theme="dark"] #main.is-doc-editing .doc-page-footer-content {
    background:#1F1F1F !important;
    color:#E8E8E8 !important;
  }
  html[data-theme="dark"] #main.is-doc-editing .doc-page-body.doc-editor {
    background:#1F1F1F !important;
    color:#E8E8E8 !important;
  }
  html[data-theme="dark"] #main.is-doc-editing .doc-page-break::after {
    background:#1F1F1F; color:var(--acc);
  }
  html[data-theme="dark"] #main.is-doc-editing .doc-field-rail {
    background:var(--card); border-color:var(--line);
  }
  html[data-theme="dark"] #main.is-doc-editing .doc-zoom-rail {
    background:var(--card); border-color:var(--line); color:var(--txt);
  }
  html[data-theme="dark"] #main.is-doc-editing .doc-editor-slim {
    background:var(--bg); border-color:var(--line);
  }
  .doc-back-to-top {
    position: fixed;
    right: 14px;
    bottom: calc(72px + var(--safe-bottom, 0px));
    z-index: 95;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--txt);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(33, 28, 24, 0.16);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .doc-back-to-top.is-on {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .doc-back-to-top:hover { border-color: var(--acc); color: var(--acc); }
  .doc-back-to-top-lbl { font-size: 12px; }
  @media (min-width: 640px) {
    .doc-back-to-top { bottom: 24px; right: 20px; }
  }
  @media (max-width: 480px) {
    .doc-back-to-top-lbl { display: none; }
    .doc-back-to-top { min-width: 40px; justify-content: center; padding: 8px 10px; }
  }
  .doc-toolbar button { background:transparent; border:1px solid transparent; border-radius:5px;
    color:var(--txt); font-size:13px; font-weight:600; padding:5px 8px; cursor:pointer;
    font-family:inherit; flex:none; min-width:30px; min-height:30px;
    display:inline-flex; align-items:center; justify-content:center; gap:4px; line-height:1; }
  .doc-toolbar button:hover { background:var(--bg); border-color:var(--line); }
  .doc-toolbar button.is-on {
    background: rgba(166,59,46,.14);
    border-color: rgba(166,59,46,.45);
    color: var(--acc, #A63B2E);
  }
  .doc-toolbar button.is-on .doc-ico { opacity: 1; }

  /* Znajdź/zamień — wąski panel nad dokumentem (nie modal zasłaniający treść) */
  .doc-editor-scroll { position: relative; }
  .doc-find-panel {
    position: sticky; top: 8px; z-index: 40;
    width: min(360px, calc(100% - 24px));
    margin: 8px 12px 0 auto;
    padding: 8px 10px;
    background: var(--card, #fff);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
  }
  .doc-find-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  }
  .doc-find-row input {
    flex: 1; min-width: 0; margin: 0; height: 32px; font-size: 13px;
  }
  .doc-find-btn {
    flex: none; width: auto; min-height: 32px; padding: 4px 10px; font-size: 12px;
  }
  .doc-find-meta {
    display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mut);
  }
  .doc-find-case { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  .doc-find-status { flex: 1; min-width: 0; }
  .doc-find-expand { width: auto; min-height: auto; padding: 2px 6px; font-size: 12px; }
  .doc-toolbar button .doc-ico {
    display:block; width:16px; height:16px; flex:none;
    fill:currentColor; stroke:currentColor;
  }
  .doc-toolbar button.doc-ico-lbl { font-size:13px; font-weight:700; font-family: 'Times New Roman', Times, serif;
    min-width:28px; letter-spacing:.02em; }
  .doc-toolbar button.doc-ico-lbl i { font-style:italic; font-weight:700; }
  .doc-toolbar button.doc-ico-lbl u { text-decoration:underline; text-underline-offset:2px; }
  .doc-toolbar button.doc-ico-lbl s { text-decoration:line-through; }
  /* Nadpisuje globalne select{width:100%} (formularze) — w pasku edytora selecty mają
     dopasować się do treści, nie rozciągać na całą szerokość i łamać do osobnych wierszy. */
  .doc-toolbar select { width:auto; flex:none; min-width:64px; max-width:118px; border:1px solid var(--line);
    border-radius:6px; background:var(--bg-input); font-family:inherit; font-size:12px;
    padding:5px 6px; cursor:pointer; color:var(--txt); }
  .doc-toolbar .doc-toolbar-sep { width:1px; background:var(--line); margin:2px 4px; }
  .doc-list-split {
    display:inline-flex; align-items:stretch; border:1px solid transparent; border-radius:5px;
  }
  .doc-list-split:hover { border-color:var(--line); background:var(--bg); }
  .doc-list-split > button {
    border-radius:0; border:0 !important; background:transparent !important;
  }
  .doc-list-split > button:first-child { border-radius:4px 0 0 4px !important; }
  .doc-list-caret {
    padding:0 4px !important; min-width:18px; font-size:10px; line-height:1;
    color:var(--mut); border-left:1px solid var(--line) !important;
    border-radius:0 4px 4px 0 !important;
  }
  .doc-list-caret:hover { color:var(--acc); }
  .doc-list-style-menu {
    position:fixed; z-index:12000; min-width:168px; max-width:220px;
    background:var(--card,#fff); border:1px solid var(--line); border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px; display:flex; flex-direction:column; gap:2px;
  }
  .doc-list-style-menu button {
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    background:transparent; border:1px solid transparent; border-radius:6px;
    padding:8px 10px; cursor:pointer; color:inherit; font:inherit;
  }
  .doc-list-style-menu button:hover { background:rgba(178,58,46,.1); border-color:var(--acc-border, rgba(178,58,46,.25)); }
  .doc-list-style-sample {
    flex:0 0 72px; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink,#1a1f1c);
  }
  .doc-list-style-lbl { font-size:12px; color:var(--mut); }
  .doc-list-style-sep { height:1px; background:var(--line); margin:4px 2px; }
  .doc-ctx-menu {
    position:fixed; z-index:13000; min-width:220px; max-width:280px;
    background:var(--card,#fff); border:1px solid var(--line); border-radius:8px;
    box-shadow:0 10px 28px rgba(0,0,0,.14); padding:4px; display:flex; flex-direction:column; gap:1px;
  }
  .doc-ctx-menu button {
    display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
    text-align:left; background:transparent; border:1px solid transparent; border-radius:6px;
    padding:7px 10px; cursor:pointer; color:inherit; font:inherit; font-size:13px;
  }
  .doc-ctx-menu button:hover { background:rgba(178,58,46,.1); border-color:var(--acc-border, rgba(178,58,46,.25)); }
  .doc-ctx-menu kbd {
    font-size:11px; color:var(--mut); font-family:inherit; font-weight:500;
  }
  .doc-ctx-sep { height:1px; background:var(--line); margin:3px 4px; }
  .doc-table-resize-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 40;
  }
  .doc-table-resize-col-handle {
    position: absolute;
    top: 0; bottom: 0;
    width: 6px;
    margin-left: -3px;
    cursor: col-resize;
    pointer-events: auto;
  }
  .doc-table-resize-col-handle:hover { background: rgba(178,58,46,.2); }
  .doc-table-col-insert-btn {
    position: absolute;
    top: -20px;
    width: 16px; height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    border: 1px solid var(--acc-border, rgba(178,58,46,.4));
    background: var(--card, #fff);
    color: var(--acc, #b23a2e);
    font-size: 12px;
    line-height: 14px;
    padding: 0;
    cursor: pointer;
    opacity: .35;
    transition: opacity .12s, transform .12s;
    pointer-events: auto;
    z-index: 42;
  }
  .doc-table-col-insert-btn::before { content: '+'; }
  .doc-table-col-insert-btn:hover {
    opacity: 1;
    transform: scale(1.15);
    background: var(--acc, #b23a2e);
    color: #fff;
  }
  .doc-table-resize-table-handle {
    position: absolute;
    top: 0; bottom: 0; right: -3px;
    width: 6px;
    cursor: col-resize;
    pointer-events: auto;
  }
  .doc-table-resize-table-handle:hover { background: rgba(178,58,46,.3); }
  .doc-table-resize-row-handle {
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    margin-top: -3px;
    cursor: row-resize;
    pointer-events: auto;
  }
  .doc-table-resize-row-handle:hover { background: rgba(178,58,46,.2); }
  .doc-table-cell-selected {
    background: rgba(178,58,46,.12) !important;
    outline: 1px solid var(--acc-border, rgba(178,58,46,.4));
    outline-offset: -1px;
  }
  .doc-row-cursor-overlay {
    position: absolute;
    z-index: 41;
    pointer-events: none;
  }
  .doc-row-cursor-zone {
    position: absolute;
    left: 0;
    width: 100%;
    cursor: text;
    pointer-events: auto;
  }
  .doc-row-cursor-zone::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 15%;
    bottom: 15%;
    width: 2px;
    background: transparent;
  }
  .doc-row-cursor-zone:hover::before { background: rgba(178,58,46,.35); }
  .doc-row-cursor-zone.is-active::before {
    background: var(--acc, #b23a2e);
    animation: docRowCursorBlink 1s step-end infinite;
  }
  @keyframes docRowCursorBlink { 50% { opacity: 0; } }
  /* Prawdziwy karet przeglądarki chowany na czas aktywności pseudo-karetu obok tabeli —
     zaznaczenie zostaje nietknięte (ArrowLeft do niego wraca), tylko wizualnie niewidoczne,
     żeby nie migały dwa kursory naraz. */
  .doc-page-body.doc-row-cursor-active { caret-color: transparent; }
  .doc-page-body ul, .doc-page-body ol,
  .doc-chrome-ce ul, .doc-chrome-ce ol {
    margin:0 0 .65em; padding-left:1.6em;
  }
  .doc-page-body li, .doc-chrome-ce li { margin:0 0 .2em; }
  .doc-sheet-body .doc-section-num { margin-right:6px; user-select:none; }
  .calib-wrap { display:flex; gap:16px; align-items:flex-start; }
  .calib-canvas-wrap { position:relative; border:1px solid var(--line); border-radius:8px; overflow:auto;
    max-height:80vh; background:#fff; }
  .calib-marker { position:absolute; background:var(--acc); color:#fff; font-size:10px; font-weight:700;
    padding:2px 5px; border-radius:4px; transform:translate(-2px,-100%); white-space:nowrap; cursor:grab;
    touch-action:none; user-select:none; max-width:220px; z-index:2; }
  .calib-marker.is-dragging { cursor:grabbing; opacity:.92; z-index:5; box-shadow:0 4px 12px rgba(0,0,0,.25); }
  .calib-marker .calib-marker-x {
    margin-left:6px; opacity:.85; font-weight:700; cursor:pointer; padding:0 2px;
  }
  .calib-marker .calib-marker-x:hover { opacity:1; }
  .calib-inline-input {
    position:absolute; z-index:6; transform:translate(-2px,-100%);
    min-width:120px; max-width:260px; font:inherit; font-size:12px; font-weight:600;
    padding:4px 8px; border:2px solid var(--acc); border-radius:6px;
    background:#fff; color:#1A1F1C; outline:none; box-shadow:0 4px 14px rgba(0,0,0,.18);
  }
  .calib-fields { width:240px; flex:none; max-height:80vh; overflow:auto; padding-right:4px; }
  .calib-fields .doc-chip.armed { background:var(--acc); color:#fff; border-color:var(--acc); }
  .calib-fields .doc-chip.is-snippet { border-style:dashed; }
  .calib-fields .doc-chip.is-form-chip { background:rgba(29,78,216,.12); border-color:rgba(29,78,216,.35); }
  .calib-page-nav { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13px; }
  .calib-page-nav button { width:auto; padding:6px 10px; }
  .calib-marker-candidate { position:absolute; background:rgba(120,120,120,.55); color:#fff; font-size:9px;
    font-weight:600; padding:1px 4px; border-radius:3px; transform:translate(-2px,-100%); white-space:nowrap;
    cursor:pointer; border:1px dashed rgba(255,255,255,.6); }
  .doc-page-wrap { padding:24px 0; box-sizing:border-box; transition:transform .12s ease; overflow:hidden; }
  /* Przybliżenie/oddalenie podglądu — czysto wizualne (CSS transform na już-złożonych
     stronach), nie rusza logiki paginacji (reflowDocPages liczy wysokości PRZED skalowaniem)
     ani treści wysyłanej do zapisu/PDF-a. Domyślne 100% to ta sama proporcja punkt→piksel
     (96dpi), jakiej używa realny eksport PDF/DOCX — przybliżanie/oddalanie jest więc tylko
     wygodą podglądu, nie próbą "poprawienia" rozmiaru bazowego.
     Scale: transform-origin top left + margin (scale-1)*size w JS — bez drugiego scrolla.
     Tło (var(--bg)) siedzi na .doc-page-zoom-area, NIE na .doc-page-wrap. */
  .doc-page-zoom-area { display:flex; align-items:flex-start; gap:10px; background:var(--bg); border-radius:10px; }
  .doc-page-zoom-area .doc-page-wrap { flex:1; min-width:0; }
  .doc-zoom-rail { position:sticky; top:108px; flex:0 0 auto; display:flex; flex-direction:column;
    align-items:center; gap:4px; background:var(--card); border:1px solid var(--line);
    border-radius:10px; padding:8px 6px; }
  .doc-zoom-rail button { width:28px; height:28px; border-radius:6px; border:1px solid var(--line);
    background:var(--bg-input); color:var(--txt); font-size:15px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-family:inherit; padding:0; }
  .doc-zoom-rail button:hover { border-color:var(--acc); color:var(--acc); }
  .doc-zoom-rail .doc-zoom-label { font-size:10px; color:var(--mut); font-weight:600;
    padding:2px 0; white-space:nowrap; }
  .doc-zoom-rail .doc-zoom-reset { font-size:11px; }
  @media (max-width:900px) {
    .doc-page-zoom-area { flex-direction:column-reverse; }
    .doc-zoom-rail { position:static; flex-direction:row; align-self:center; }
  }
  /* Szerokość ZAWSZE 800px (≈210mm/A4 przy 96dpi) — NIE "width:100%; max-width:800px". Kartka
     A4 ma stały fizyczny rozmiar niezależnie od okna/urządzenia; gdyby szerokość kurczyła się
     razem z oknem przy stałym rozmiarze czcionki, w linii mieściłoby się mniej znaków na wąskim
     ekranie niż na szerokim — ten sam dokument paginowałby się inaczej zależnie od sprzętu.
     Dopasowanie do wąskiego ekranu robi WIZUALNY zoom (docZoomStep/applyDocZoom,
     transform:scale — patrz autoFitDocZoom), liczony PO tym, jak reflowDocPages() już
     ułożył treść na tej stałej geometrii, więc nie wpływa na paginację. */
  .doc-page-frame { width:800px; margin:0 auto 20px; }
  .doc-page-frame:last-child { margin-bottom:0; }
  /* overflow:hidden tylko wizualnie przy dopasowanej wysokości; JS przy przepełnieniu
     ustawia overflow:visible + height:auto — treść nigdy nie jest ucinana w DOM/edytorze. */
  .doc-page-sheet { width:100%; box-sizing:border-box; overflow:hidden; }
  /* Fallback typografii kartki — MUSI się zgadzać z DOC_TYPO_DEFAULTS w core/doc-typography.js
     (Times New Roman 11pt / 1.15). Używamy go w ułamku sekundy między createDocPageFrame
     (reflowDocPages dodaje nową stronę) a applyDocTypographyCss (aplikuje inline styl).
     Dawniej był tu Barlow inherit → pierwsza strona dostawała Times (z inline), kolejne
     dziedziczyły Barlow z UI — wizualny rozjazd. Patrz reflowDocPages w panel-app.js. */
  .doc-page-body {
    font-family: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
    font-size: 11pt;
    line-height: 1.15;
    color: #1a1f1c;
  }
  .doc-page-body h3 { font-size: 14pt; font-weight: 700; margin: 1.1em 0 .45em; line-height: 1.35; }
  .doc-page-body h4 { font-size: 12.5pt; font-weight: 700; margin: 1em 0 .4em; line-height: 1.35; }
  .doc-page-body p { margin: 0 0 var(--doc-p-after, .65em); }
  /* Inline font-size z paska ma wygrywać z h3/h4 — bez !important (rozrywało się przy zagnieżdżeniu). */
  .doc-page-body [style*="font-size"] { line-height: 1.35; }
  /* Bez tego przeglądarka domyślnie rysuje kolorową ramkę fokusu wokół pola edycji po
     kliknięciu w treść — pole i tak jest wyraźnie oddzielone jako biała kartka na szarym tle.
     Celujemy w :focus-visible (nie samo outline:none) — globalne `*:focus-visible` (blisko
     :root) ma tę samą specyficzność co zwykła reguła klasy, więc same "outline:none" na
     .doc-page-body nie zawsze wygrywało; łącząc klasę z tym samym pseudo-selektorem
     specyficzność jest jednoznacznie wyższa. */
  .doc-page-body:focus-visible,
  .doc-page-sheet:focus-visible,
  .doc-page-frame:focus-visible { outline:none; }
  .doc-page-footer { text-align:center; font-size:9px; line-height:14px; color:#9ca3af; font-family:inherit;
    border-top:0; padding-top:4px; flex:none; }
  .doc-page-break {
    display:block; height:0; margin:10px 0; padding:0; border:0;
    border-top:2px dashed rgba(166,59,46,.45);
    position:relative; user-select:none; pointer-events:none;
  }
  .doc-page-break::after {
    content:'podział strony'; position:absolute; top:-0.7em; left:50%; transform:translateX(-50%);
    font-size:10px; color:var(--acc); background:var(--card,#fff); padding:0 8px;
    font-weight:600; letter-spacing:.02em;
  }
  .co-row { display:flex; align-items:flex-start; gap:8px; padding:8px 0;
    border-bottom:1px solid var(--line); font-size:13px; }
  .co-row:last-child { border-bottom:none; }
  .co-row input[type="checkbox"] { margin-top:3px; accent-color:var(--acc); flex:none; width:auto; }
  /* Generowanie: zaznaczanie firm jest kluczowe — duży checkbox (50+) */
  .doc-co-list .co-row {
    align-items:center; gap:12px; padding:12px 4px;
    min-height:48px;
  }
  .doc-co-list .co-row input[type="checkbox"] {
    width:24px; height:24px; min-width:24px; margin:0;
    accent-color:var(--acc); cursor:pointer;
    transform:scale(1.05); transform-origin:center;
  }
  .co-row .co-name { font-weight:600; }
  .co-row .co-gap { font-size:11px; color:var(--bad); }
  .co-row .co-meta { font-size:11px; color:var(--mut); margin-top:2px; }
  .co-row .co-edit-btn {
    flex:none; width:auto; min-height:auto; padding:5px 10px; font-size:12px;
    margin:0; align-self:center; white-space:nowrap;
  }
  .doc-co-summary { font-size:13px; color:var(--mut); margin:0; line-height:1.4; }
  .doc-co-summary b { color:var(--txt); font-weight:700; }

  /* Katalogi — przeciąganie firm (dziecinnie proste) */
  .co-cat-modal { max-width:min(520px, 96vw); }
  .co-cat-step {
    font-size:12px; font-weight:700; color:var(--mut); text-transform:uppercase;
    letter-spacing:.04em; margin:0 0 8px;
  }
  .co-cat-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
  .co-cat-chip {
    appearance:none; border:2px solid var(--line); background:var(--bg-input);
    color:var(--txt); border-radius:12px; padding:10px 14px; font:inherit;
    font-weight:700; font-size:14px; cursor:pointer; min-height:44px;
  }
  .co-cat-chip.is-on {
    border-color:var(--acc); background:var(--acc-muted); color:var(--acc);
    box-shadow:0 0 0 1px var(--acc-border);
  }
  .co-cat-chip.is-drop-over {
    border-style:dashed; border-color:var(--acc); background:var(--acc-muted);
    transform:scale(1.03);
  }
  .co-cat-drop {
    border:2px dashed var(--line); border-radius:14px; padding:18px 14px;
    text-align:center; background:var(--bg-input); margin:0 0 12px;
    min-height:72px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; transition:border-color .15s, background .15s;
  }
  .co-cat-drop.is-ready { border-color:var(--acc-border); }
  .co-cat-drop.is-over {
    border-color:var(--acc); background:var(--acc-muted);
  }
  .co-cat-drop .co-cat-drop-title { font-weight:700; font-size:15px; color:var(--txt); }
  .co-cat-drop .co-cat-drop-sub { font-size:12px; color:var(--mut); }
  .co-cat-firms {
    max-height:min(42vh, 360px); overflow-y:auto; border:1px solid var(--line);
    border-radius:12px; background:var(--card); margin:0 0 10px;
  }
  .co-cat-sec {
    position:sticky; top:0; z-index:1;
    padding:8px 12px; font-size:12px; font-weight:700; color:var(--mut);
    background:var(--bg-input); border-bottom:1px solid var(--line);
    letter-spacing:.02em;
  }
  .co-cat-sec span { font-weight:500; opacity:.8; }
  .co-cat-sec-in {
    border-top:2px solid var(--acc-border);
    color:var(--acc); background:var(--acc-muted);
  }
  .co-cat-sec-empty {
    padding:14px 12px; font-size:12px; color:var(--mut); line-height:1.4;
    border-bottom:1px solid var(--line);
  }
  .co-cat-firm {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border-bottom:1px solid var(--line); cursor:grab; touch-action:none;
    background:var(--card); user-select:none;
  }
  .co-cat-firm:last-child { border-bottom:none; }
  .co-cat-firm:active { cursor:grabbing; }
  .co-cat-firm.is-dragging { opacity:.45; }
  .co-cat-firm .co-cat-grip {
    color:var(--mut); font-size:16px; line-height:1; flex:none; letter-spacing:-1px;
  }
  .co-cat-firm .co-cat-firm-main { flex:1; min-width:0; }
  .co-cat-firm .co-name { font-weight:700; font-size:14px; }
  .co-cat-firm .co-meta { font-size:11px; color:var(--mut); margin-top:2px; }
  .co-cat-firm .co-cat-badge {
    font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
    background:var(--bg-input); border:1px solid var(--line); color:var(--mut);
    flex:none; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .co-cat-firm .co-cat-badge.is-here {
    background:var(--acc-muted); border-color:var(--acc-border); color:var(--acc);
  }
  .co-cat-firm .co-cat-add {
    flex:none; width:auto; padding:6px 10px; font-size:12px; font-weight:700;
  }
  .co-cat-rename { margin:0 0 14px; }
  .co-cat-rename label {
    display:block; font-size:12px; font-weight:600; color:var(--mut); margin:0 0 6px;
  }
  .co-cat-rename-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .co-cat-rename-row input { flex:1; min-width:140px; margin:0; }
  .co-cat-rename-meta {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:6px; min-height:18px;
  }
  .co-cat-rename-hint { font-size:11px; color:var(--mut); }
  .co-cat-rename-hint.is-ok { color:var(--ok); }
  .co-cat-rename-hint.is-err { color:var(--bad); }
  .co-cat-del-link {
    appearance:none; border:none; background:transparent; padding:0;
    font:inherit; font-size:11px; color:var(--mut); cursor:pointer;
    text-decoration:underline; text-underline-offset:2px; opacity:.7;
  }
  .co-cat-del-link:hover { color:var(--bad); opacity:1; }

  /* ── PAKIETY ── */
  /* Listy pakietów/kontrahentów — własne, krótkie scrolle (nie usuwamy). */
  .packs-pick-list.doc-co-list { max-height:min(260px, 36vh); margin-bottom:0; }
  .packs-row {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:10px 8px; border:none; border-bottom:1px solid var(--line);
    background:transparent; text-align:left; cursor:pointer; color:var(--txt);
    font-family:inherit; border-radius:0;
  }
  .packs-row:last-child { border-bottom:none; }
  .packs-row:hover { background:var(--acc-muted); }
  .packs-row.is-active { background:var(--acc-muted); }
  .packs-row .packs-main { flex:1; min-width:0; }
  .packs-row .packs-title {
    font-weight:700; font-size:15px; line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .packs-row .packs-meta { font-size:12px; color:var(--mut); margin-top:2px; }
  .packs-badge {
    flex-shrink:0; font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.3px; padding:3px 7px; border-radius:999px;
    background:var(--bg-input); border:1px solid var(--line); color:var(--mut);
  }
  .packs-badge.purpose-onboarding { background:var(--acc-muted); border-color:var(--acc-border); color:var(--acc); }
  .packs-badge.purpose-monthly { background:rgba(29,78,216,.1); border-color:rgba(29,78,216,.3); color:#1D4ED8; }
  .packs-badge.purpose-closure { background:rgba(180,83,9,.1); border-color:rgba(180,83,9,.3); color:#b45309; }
  .packs-lib-row {
    display:flex; align-items:center; gap:8px; padding:10px 12px;
    border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
    background:var(--bg-input);
  }
  .packs-lib-row .packs-main { flex:1; min-width:0; }
  .packs-lib-row .packs-title { font-weight:700; font-size:15px; margin:0 0 2px; }
  .packs-lib-row .packs-meta { font-size:12px; color:var(--mut); }
  .packs-lib-actions { display:flex; gap:4px; flex-shrink:0; }
  .packs-lib-actions .btn-ghost { width:auto; padding:6px 8px; font-size:13px; }
  .packs-step {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    color:var(--mut); margin:0 0 6px;
  }
  .tpl-item { background:var(--bg-input); border:1px solid var(--line); border-radius:10px;
    padding:12px 14px; margin-bottom:8px; cursor:pointer; }
  .tpl-item:hover { border-color:var(--acc); }
  .tpl-item .cat { font-size:10px; text-transform:uppercase; color:var(--mut); }
  .doc-filter { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
  .doc-chip.active { background:var(--acc); color:#fff; border-color:var(--acc); }

  /* ── PODGLĄD DOKUMENTU (arkusz A4) ── */
  /* Marginesy 94px ≈ 25mm/2,5cm ze wszystkich stron — standard Word/LibreOffice i typowych
     pism urzędowych, ten sam fizyczny rozmiar co w eksporcie PDF/DOCX (docExport.js). */
  .doc-sheet { background:#fff; color:#1a1f1c; border-radius:8px; padding:94px;
    box-shadow:0 4px 24px rgba(0,0,0,.35); font-size:14px; line-height:1.55;
    --doc-header-h: 88px; --doc-footer-h: 100px; }
  .doc-letterhead {
    display:flex; justify-content:space-between; align-items:flex-start;
    height: var(--doc-header-h); max-height: var(--doc-header-h);
    overflow:hidden; margin-bottom:10px; cursor:default;
    width:100%; max-width:100%; box-sizing:border-box; min-width:0;
  }
  .doc-letterhead.is-empty { align-items:center; opacity:.85; }
  .doc-letterhead.is-off { opacity:.55; }

  /* Edycja nagłówka/stopki na stronie (jak Word) */
  #main.is-doc-chrome-editing .doc-page-body {
    opacity: .4;
    /* Klik w treść musi działać → wyjście z edycji nagłówka/stopki + zapis */
    pointer-events: auto;
    cursor: text;
    user-select: none;
  }
  /* flex na contenteditable psuje spacje/kursor — w edycji block + pre-wrap */
  #main.is-doc-chrome-header .doc-letterhead.is-chrome-live,
  #main.is-doc-chrome-header .doc-letterhead.is-chrome-editing {
    display: block;
    white-space: normal; /* pre-wrap + float/grid psuło Prawo poza pasem */
    word-break: break-word;
    overflow: hidden;
    line-height: 1.35;
    font-size: 11pt;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #main.is-doc-chrome-footer .doc-page-footer-content.is-chrome-editing,
  #main.is-doc-chrome-footer .doc-page-footer-band.is-chrome-live .doc-page-footer-content {
    display: block;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    line-height: 1.3;
    font-size: 9pt;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #main.is-doc-chrome-header .doc-letterhead.is-chrome-live,
  #main.is-doc-chrome-footer .doc-page-footer-band.is-chrome-live {
    outline: 2px solid var(--acc, #A63B2E);
    outline-offset: 2px;
    background: #fff;
    z-index: 2;
    position: relative;
  }
  .doc-letterhead.is-chrome-editing,
  .doc-page-footer-content.is-chrome-editing {
    cursor: text;
    caret-color: var(--acc, #A63B2E);
  }
  .doc-letterhead.is-chrome-editing:empty::before,
  .doc-page-footer-content.is-chrome-editing:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
    white-space: nowrap;
  }
  .doc-chrome-tb-group {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px;
    margin-right: 4px;
  }
  .doc-chrome-tb-group .doc-chrome-edit-label {
    font-size: 11px; font-weight: 600; color: var(--acc, #A63B2E);
    margin-right: 2px; white-space: nowrap;
  }
  .doc-chrome-tb-group .btn-ghost,
  .doc-chrome-tb-group .btn-save {
    width: auto; min-height: 28px; padding: 3px 8px; font-size: 11px;
  }
  /* Przy edycji nagłówka/stopki ukryj narzędzia tylko-dla-treści */
  #main.is-doc-chrome-editing .doc-fields-open-btn,
  #main.is-doc-chrome-editing .doc-detect-btn,
  #main.is-doc-chrome-editing [onclick*="insertDocPageBreak"],
  #main.is-doc-chrome-editing [onclick*="insertDocSection"],
  #main.is-doc-chrome-editing [onclick*="insertSignatureBlock"],
  #main.is-doc-chrome-editing [onclick*="toggleDocSymbolPanel"],
  #main.is-doc-chrome-editing [onclick*="insertDocChar"] {
    display: none !important;
  }
  .doc-page-footer-band {
    height: var(--doc-footer-h); max-height: var(--doc-footer-h);
    overflow:hidden; margin-top:12px; display:flex; flex-direction:column;
    justify-content:flex-start; cursor:default;
    border-top:1px solid #d1d5db;
    padding-top:10px;
    box-sizing:border-box;
  }
  .doc-page-footer-content {
    flex:1 1 auto; overflow:hidden; font-size:9px; line-height:1.4; color:#1A1F1C;
    min-height:0;
    text-align:left;
  }
  /* Justowanie w stopce rozjeżdża krótkie linie (np. „Biuro Rachunkowe SafeTax”) na całą szerokość */
  .doc-page-footer-content [style*="justify"],
  .doc-page-footer-content [align="justify"],
  .doc-letterhead [style*="justify"],
  .doc-letterhead [align="justify"],
  .doc-chrome-ce [style*="justify"],
  .doc-chrome-ce [align="justify"] {
    text-align:left !important;
  }
  .doc-page-footer-content strong,
  .doc-page-footer-content b { font-weight:700; }
  .doc-page-footer-content .doc-chrome-layout {
    height:auto; min-height:0; width:100%;
  }
  .doc-page-footer-content .doc-chrome-layout .doc-chrome-text-cell {
    font-size:9px; line-height:1.4; color:#1A1F1C; min-width:0;
  }
  .doc-page-footer {
    text-align:center; font-size:9px; line-height:14px; color:#9ca3af; font-family:inherit;
    border-top:0; padding-top:4px; flex:none; margin-top:auto;
  }
  .doc-chrome-ce img,
  .doc-letterhead img,
  .doc-page-footer-content img.doc-chrome-logo { max-height:none; }
  /* Grid zamiast float — logo zawsze w 100% szerokości pasa.
     Kolumny po data-layout (nie kolejność DOM) — stary float HTML też OK. */
  .doc-chrome-layout {
    display:grid;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow:hidden;
    align-items:start;
    gap:12px;
  }
  .doc-chrome-layout[data-layout="left"] {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .doc-chrome-layout[data-layout="left"] > .doc-chrome-logo,
  .doc-chrome-layout[data-layout="left"] > img {
    grid-column:1; justify-self:start;
  }
  .doc-chrome-layout[data-layout="left"] > .doc-chrome-text-cell {
    grid-column:2;
  }
  .doc-chrome-layout[data-layout="right"] {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .doc-chrome-layout[data-layout="right"] > .doc-chrome-logo,
  .doc-chrome-layout[data-layout="right"] > img {
    grid-column:2; justify-self:end;
  }
  .doc-chrome-layout[data-layout="right"] > .doc-chrome-text-cell {
    grid-column:1;
  }
  .doc-chrome-layout[data-layout="center"] {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
  }
  .doc-chrome-layout .doc-chrome-text-cell {
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .doc-chrome-layout .doc-chrome-logo,
  .doc-chrome-layout > img {
    display:block;
    float:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:min(42%, 280px);
    height:auto;
    object-fit:contain;
    box-sizing:border-box;
  }
  .doc-chrome-layout[data-layout="center"] .doc-chrome-logo,
  .doc-chrome-layout[data-layout="center"] > img {
    margin:0 auto;
    max-width:min(50%, 280px);
  }
  .doc-chrome-logo {
    cursor:pointer;
    object-fit:contain;
  }
  .doc-chrome-logo.is-chrome-img-selected {
    outline:none;
  }
  .doc-img-sel-box {
    position:fixed; z-index:11050; pointer-events:auto;
    border:1.5px solid #2b579a; box-sizing:border-box;
    cursor:default;
  }
  .doc-img-sel-box.is-moving { opacity:.85; }
  .doc-img-handle {
    position:absolute; width:9px; height:9px; background:#fff;
    border:1.5px solid #2b579a; box-sizing:border-box;
    pointer-events:auto; border-radius:1px;
  }
  .doc-img-handle-nw { left:-5px; top:-5px; cursor:nwse-resize; }
  .doc-img-handle-ne { right:-5px; top:-5px; cursor:nesw-resize; }
  .doc-img-handle-sw { left:-5px; bottom:-5px; cursor:nesw-resize; }
  .doc-img-handle-se { right:-5px; bottom:-5px; cursor:nwse-resize; }
  .doc-img-float-bar {
    position:fixed; z-index:11060; display:flex; align-items:center; gap:2px;
    background:var(--card,#fff); border:1px solid var(--line);
    border-radius:8px; padding:4px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  }
  .doc-img-float-bar button {
    background:transparent; border:1px solid transparent; border-radius:5px;
    padding:5px 10px; font-size:12px; cursor:pointer; color:inherit;
  }
  .doc-img-float-bar button:hover { background:rgba(43,87,154,.08); border-color:rgba(43,87,154,.25); }
  .doc-img-float-bar button.is-on { background:rgba(43,87,154,.14); color:#2b579a; font-weight:600; }
  .doc-img-float-bar button.is-danger:hover { background:rgba(178,58,46,.1); color:var(--acc); }
  .doc-addr-part-menu {
    position:fixed; z-index:12000; background:#fff; border:1px solid var(--line);
    border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.14); padding:6px;
    display:flex; flex-direction:column; gap:2px; min-width:200px;
  }
  .doc-addr-part-menu button {
    border:0; background:transparent; text-align:left; padding:8px 10px;
    font:inherit; font-size:13px; border-radius:6px; cursor:pointer; color:var(--txt);
  }
  .doc-addr-part-menu button:hover { background:rgba(178,58,46,.08); }
  .doc-gen-choice-modal-sec { margin-bottom:14px; }
  .doc-gen-choice-modal-sec .doc-chip {
    cursor:pointer; border:1px solid var(--line); background:#fff;
  }
  .doc-gen-choice-modal-sec .doc-chip.active {
    background:rgba(178,58,46,.12); border-color:var(--acc); color:var(--acc); font-weight:600;
  }
  .doc-img-float-sep { width:1px; height:18px; background:var(--line); margin:0 4px; }
  .doc-page-body,
  .doc-chrome-ce,
  .doc-letterhead.is-chrome-editing,
  .doc-page-footer-content.is-chrome-editing {
    white-space:pre-wrap;
    tab-size:4;
    -moz-tab-size:4;
  }
  .doc-chrome-logo-controls .btn-ghost.is-on,
  .doc-chrome-tb-group .btn-ghost.is-on {
    background:rgba(178,58,46,.14);
    color:var(--acc);
    font-weight:600;
  }
  .doc-chrome-logo-sep { color:var(--mut); font-size:12px; user-select:none; }
  .doc-brand-name { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700;
    color:#A63B2E; letter-spacing:.3px; }
  .doc-brand-sub { font-size:11px; color:#6b7280; margin-top:2px; }
  .doc-brand-badge { font-size:11px; font-weight:700; color:#6b7280; padding-top:4px; }
  .doc-accent-rule { display:none !important; height:0 !important; margin:0 !important; border:0 !important; padding:0 !important; background:none !important; }
  /* Odstępy jak w polskim piśmie urzędowym: miejsce/data → tytuł → treść → podpis */
  .doc-sheet-body { padding-top:18px; }
  .doc-sheet-body .doc-meta { text-align:right; margin:0 0 22px; line-height:1.45; }
  .doc-sheet-body > .doc-meta:first-child { margin-top:4px; }
  .doc-sheet-body .doc-title { text-align:center; font-family:'Barlow Condensed',sans-serif;
    font-size:15px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
    margin:12px 0 22px; color:#1a1f1c; line-height:1.35; }
  /* Stare wzory z tytułem na początku — nie kleić do paska firmowego */
  .doc-sheet-body > .doc-title:first-child { margin-top:28px; }
  .doc-sheet-body .doc-body { text-align:justify; margin:0 0 14px; line-height:1.65; }
  .doc-sheet-body .doc-body strong { font-weight:700; }
  .doc-sheet-body .doc-section { font-weight:700; font-size:15px; margin:22px 0 10px; color:#1a1f1c; }
  .doc-sheet-body .doc-spacer { display:block; height:2.4em; margin:8px 0 0; padding:0;
    border:0; line-height:0; font-size:0; overflow:hidden; }
  .doc-sheet-body .doc-sig-line { margin-top:36px; letter-spacing:1px; }
  .doc-sheet-body .doc-spacer + .doc-sig-line { margin-top:4px; }
  .doc-sheet-body .doc-sig-name { margin-top:6px; line-height:1.45; }
  .doc-sheet-body .doc-sig-role { }
  .doc-sheet-body mark.doc-missing { background:#fee2e2; color:#d64545; padding:1px 4px;
    border-radius:3px; font-size:12px; }
  .doc-footer-rule { height:1px; background:#e5e7eb; margin:24px 0 8px; }
  .doc-footer { text-align:center; font-size:10px; color:#9ca3af; font-style:italic; }

  /* ── HISTORIA EDYCJI WZORU ── */
  /* Szyna czasu wersji — linia łącząca kropki, każda kropka to jeden zapis wzoru. */
  .doc-history-rail { overflow-x:auto; padding:22px 8px 6px; }
  .doc-history-rail-items { position:relative; display:flex; gap:30px; width:max-content;
    min-width:100%; padding:0 4px; }
  .doc-history-rail-line { position:absolute; left:36px; right:36px; top:7px; height:3px;
    background:var(--line); border-radius:2px; z-index:0; }
  .doc-history-dot-wrap { position:relative; z-index:1; display:flex; flex-direction:column;
    align-items:center; gap:6px; background:none; border:0; padding:0; margin:0;
    cursor:pointer; font-family:inherit; flex:0 0 auto; width:84px; }
  .doc-history-dot { width:14px; height:14px; border-radius:50%; background:var(--card);
    border:3px solid var(--line); box-sizing:border-box;
    transition:border-color .15s, background-color .15s, box-shadow .15s, transform .15s; }
  .doc-history-dot-wrap:hover .doc-history-dot { border-color:var(--acc); transform:scale(1.15); }
  .doc-history-dot-wrap.is-current .doc-history-dot { background:var(--acc); border-color:var(--acc);
    box-shadow:0 0 0 4px var(--acc-muted); }
  .doc-history-dot-label { font-size:11px; font-weight:600; color:var(--txt); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:84px; }
  .doc-history-dot-caption { font-size:10px; color:var(--mut); white-space:nowrap; }
  .doc-history-dot-tag { font-size:9px; font-weight:700; color:var(--acc); text-transform:uppercase;
    letter-spacing:.4px; white-space:nowrap; }
  /* Mała miniaturka PDF-u pod kropką — prawdziwy .doc-sheet przeskalowany CSS-em, nie ikona. */
  .doc-history-thumb { width:80px; height:64px; overflow:hidden; position:relative;
    background:#fff; border:1px solid var(--line); border-radius:5px; }
  .doc-history-dot-wrap:hover .doc-history-thumb,
  .doc-history-dot-wrap.is-current .doc-history-thumb { border-color:var(--acc); }
  .doc-history-thumb .doc-sheet { width:620px; padding:20px 24px 16px; transform:scale(.129);
    transform-origin:top left; pointer-events:none; }
  /* Podgląd wersji = ten sam arkusz co w edytorze (pełna szerokość), nie „miniaturka w ramce” */
  .modal.doc-history-modal {
    max-width:min(860px, 96vw); width:100%;
  }
  .doc-history-modal .doc-sheet {
    width:100%; max-width:800px; margin:0 auto;
    box-shadow:0 4px 24px rgba(0,0,0,.35);
  }
  .doc-history-modal-preview {
    max-height:72vh; overflow-y:auto; background:var(--bg);
    border-radius:10px; padding:24px 16px; margin:12px 0;
  }
  .doc-history-modal-label { font-size:12px; color:var(--mut); margin-bottom:2px; }
  .doc-history-modal h3 .doc-history-modal-current {
    font-weight:600; color:var(--acc); letter-spacing:.2px;
  }
  .doc-pdf-preview-modal { max-width:min(860px, 96vw); position:relative; }
  .doc-pdf-preview-modal > .close {
    float:none; position:absolute; top:14px; right:14px; z-index:6;
    margin:0; padding:8px 10px; line-height:1;
    background:var(--card); border-radius:8px;
  }
  .doc-pdf-preview-modal > h3 { padding-right:44px; }
  .doc-pdf-preview-body { max-height:75vh; overflow:auto; background:#3a3530;
    border-radius:8px; padding:16px; margin-top:12px; text-align:center; }
  /* Nie ustawiać max-width:100% przy stałym style.height — przeglądarka ściska tylko
     szerokość i rozciąga stronę w pionie (wysokie, wąskie litery). */
  .doc-pdf-preview-page {
    display:block; margin:0 auto 16px;
    box-shadow:0 4px 18px rgba(0,0,0,.4); border-radius:2px;
    image-rendering:auto;
  }
  .doc-pdf-preview-page:last-child { margin-bottom:0; }

  /* Multi-katalogi w formularzu edycji firmy (zamiast selectu). */
  .company-cat-chips {
    display:flex; flex-wrap:wrap; gap:8px; padding:4px 0;
    min-height:44px; align-items:center;
  }
  .company-cat-chips:empty::before {
    content: 'Brak katalogów — utwórz je w Kontrahenci → Katalogi ⚙';
    color: var(--mut); font-size:13px;
  }
  .company-cat-chip {
    cursor:pointer; user-select:none;
    padding:8px 14px; min-height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; border:1px solid var(--line);
    background:var(--card); color:var(--ink);
    font-size:13px; font-weight:600;
    transition: background .15s, border-color .15s, color .15s;
  }
  .company-cat-chip:hover { border-color: var(--acc); }
  .company-cat-chip.active {
    background: rgba(166,59,46,.12);
    border-color: var(--acc);
    color: var(--acc);
  }
  .company-cat-chip:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
  }


  .login-2fa-nudge{
    margin:14px 0 0;padding:12px 14px;border-radius:10px;text-align:left;line-height:1.45;
    border:1px solid color-mix(in srgb, var(--acc) 28%, var(--line, #cfc8bc));
    background:color-mix(in srgb, var(--acc-muted) 65%, var(--card, #fff));
  }
  .login-2fa-nudge-title{display:block;font-size:13px;font-weight:700;color:var(--acc);margin:0 0 4px}
  .login-2fa-nudge p{margin:0;font-size:12.5px;color:var(--mut)}
  .login-2fa-nudge.is-hidden{display:none}

  .totp-primary{margin:0 0 14px;padding:14px 14px 12px;border-radius:14px;border:2px solid color-mix(in srgb, var(--acc) 40%, var(--line));background:color-mix(in srgb, var(--acc-muted, rgba(166,59,46,.08)) 70%, var(--card, #fff))}
  .totp-primary-head{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:700;color:var(--ink)}
  .totp-badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--acc);color:#fff}
  .totp-steps{margin:0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--mut)}
  .totp-steps li{margin:4px 0}
  .totp-qr-wrap{display:flex;justify-content:center;margin:10px 0 4px;padding:16px;border-radius:12px;background:#fff;border:1px solid var(--line)}
  .totp-qr-wrap img{display:block;border-radius:8px}
  .totp-apps{margin:0 0 12px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
  .totp-apps h4{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--ink)}
  .totp-app-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:7px 0;border-top:1px solid var(--line)}
  .totp-app-row:first-of-type{border-top:0;padding-top:0}
  .totp-app-name{flex:1 1 140px;font-size:13px;font-weight:600;color:var(--ink)}
  .totp-app-links{display:flex;flex-wrap:wrap;gap:6px}
  .totp-alt{margin:0 0 12px}
  .totp-alt summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--acc);padding:6px 0}
  .totp-manual{margin-top:8px;padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--bg);word-break:break-all;font-size:12px;line-height:1.45}
  .totp-manual code.totp-secret{font-family:ui-monospace,Consolas,monospace;font-size:14px;letter-spacing:.06em}
  .totp-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}