/* =====================================================================
vcms Admin — system designu
VDE Media · panel administracyjny
Czysty CSS, zmienne CSS, motyw jasny/ciemny. Zero zależności.
===================================================================== */
/* ------------------------------------------------------------------ */
/* 1. Reset i baza */
/* ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,h5,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
[hidden]{display:none !important}
/* ------------------------------------------------------------------ */
/* 2. Tokeny motywu */
/* ------------------------------------------------------------------ */
:root{
/* marka */
--brand:#005EB0;
--brand-700:#004a8c;
--brand-600:#0a68bd;
--brand-100:#d6e6f6;
--brand-50:#eaf2fb;
--brand-contrast:#ffffff;
/* powierzchnie */
--bg:#f4f7fb;
--surface:#ffffff;
--surface-2:#f7f9fc;
--surface-3:#eef2f7;
--sidebar-bg:#0f2438;
--sidebar-fg:#c7d4e2;
--sidebar-muted:#7f93a8;
--sidebar-active-bg:#173553;
--sidebar-active-fg:#ffffff;
/* tekst */
--text:#111a26;
--text-body:#28323f;
--muted:#667487;
--muted-2:#94a1b2;
/* linie */
--border:#e4e9f0;
--border-strong:#d2dae5;
/* stany */
--success:#0f7a48; --success-bg:#e6f6ee; --success-bd:#b8e6cd;
--warning:#9a5b06; --warning-bg:#fdf1e1; --warning-bd:#f4d9b3;
--danger:#c22a2a; --danger-bg:#fdecec; --danger-bd:#f4c9c9;
--info:#005EB0; --info-bg:#eaf2fb; --info-bd:#c6dcf3;
--purple:#6b3fb5; --purple-bg:#f0eafb;
/* cienie */
--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
--shadow-md:0 4px 12px rgba(16,24,40,.10);
--shadow-lg:0 12px 32px rgba(16,24,40,.16);
--shadow-focus:0 0 0 3px rgba(0,94,176,.22);
/* promienie */
--r-sm:7px; --r:10px; --r-lg:14px; --r-pill:999px;
/* wymiary */
--sidebar-w:266px; --sidebar-w-collapsed:74px; --topbar-h:60px;
/* typografia */
--font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:"Cascadia Code",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
color-scheme:light;
}
:root[data-theme="dark"]{
--brand:#4a9ae6;
--brand-700:#2e7bc4;
--brand-600:#3f8cd8;
--brand-100:#1b3a55;
--brand-50:#15293b;
--brand-contrast:#06121d;
--bg:#0d131c;
--surface:#141c27;
--surface-2:#101823;
--surface-3:#1b2530;
--sidebar-bg:#0a121c;
--sidebar-fg:#b7c6d6;
--sidebar-muted:#63788d;
--sidebar-active-bg:#16273a;
--sidebar-active-fg:#ffffff;
--text:#eaf0f7;
--text-body:#cdd8e5;
--muted:#8b9bad;
--muted-2:#697889;
--border:#243040;
--border-strong:#324256;
--success:#43c489; --success-bg:#0f2a1f; --success-bd:#1c4634;
--warning:#e0a24a; --warning-bg:#2c2113; --warning-bd:#4a3820;
--danger:#ef6b6b; --danger-bg:#2c1717; --danger-bd:#4a2626;
--info:#4a9ae6; --info-bg:#13293c; --info-bd:#234a6b;
--purple:#a887e6; --purple-bg:#211a33;
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow-md:0 6px 16px rgba(0,0,0,.45);
--shadow-lg:0 16px 40px rgba(0,0,0,.55);
--shadow-focus:0 0 0 3px rgba(74,154,230,.30);
color-scheme:dark;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--brand:#4a9ae6; --brand-700:#2e7bc4; --brand-600:#3f8cd8; --brand-100:#1b3a55; --brand-50:#15293b; --brand-contrast:#06121d;
--bg:#0d131c; --surface:#141c27; --surface-2:#101823; --surface-3:#1b2530;
--sidebar-bg:#0a121c; --sidebar-fg:#b7c6d6; --sidebar-muted:#63788d; --sidebar-active-bg:#16273a; --sidebar-active-fg:#fff;
--text:#eaf0f7; --text-body:#cdd8e5; --muted:#8b9bad; --muted-2:#697889;
--border:#243040; --border-strong:#324256;
--success:#43c489; --success-bg:#0f2a1f; --success-bd:#1c4634;
--warning:#e0a24a; --warning-bg:#2c2113; --warning-bd:#4a3820;
--danger:#ef6b6b; --danger-bg:#2c1717; --danger-bd:#4a2626;
--info:#4a9ae6; --info-bg:#13293c; --info-bd:#234a6b;
--shadow-focus:0 0 0 3px rgba(74,154,230,.30);
color-scheme:dark;
}
}
/* ------------------------------------------------------------------ */
/* 3. Baza dokumentu */
/* ------------------------------------------------------------------ */
body{
font-family:var(--font);
background:var(--bg);
color:var(--text-body);
font-size:14px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--brand-100);color:var(--text)}
/* pasek przewijania */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}
/* ------------------------------------------------------------------ */
/* 4. App shell */
/* ------------------------------------------------------------------ */
.app{
display:grid;
grid-template-columns:var(--sidebar-w) 1fr;
grid-template-rows:100vh;
min-height:100vh;
}
.app.is-collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
/* sidebar */
.sidebar{
grid-row:1;
background:var(--sidebar-bg);
color:var(--sidebar-fg);
display:flex;flex-direction:column;
height:100vh;position:sticky;top:0;
border-right:1px solid rgba(255,255,255,.05);
overflow:hidden;
}
.sidebar__brand{
display:flex;align-items:center;gap:11px;
padding:0 18px;height:var(--topbar-h);flex:0 0 auto;
border-bottom:1px solid rgba(255,255,255,.06);
color:#fff;
}
.sidebar__logo{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;flex:0 0 auto;box-shadow:0 2px 8px rgba(0,94,176,.5)}
.sidebar__logo svg{width:20px;height:20px}
.sidebar__title{font-weight:700;font-size:15px;letter-spacing:.2px;white-space:nowrap;line-height:1.1}
.sidebar__title small{display:block;font-weight:500;font-size:11px;color:var(--sidebar-muted);letter-spacing:.3px}
.sidebar__nav{flex:1 1 auto;overflow-y:auto;padding:10px 12px 18px}
.sidebar__foot{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.06);padding:10px 12px}
.nav-group{margin-top:14px}
.nav-group:first-child{margin-top:4px}
.nav-group__label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sidebar-muted);padding:6px 12px;white-space:nowrap}
.nav-item{
display:flex;align-items:center;gap:11px;
padding:8px 12px;border-radius:9px;color:var(--sidebar-fg);
font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;
transition:background .12s,color .12s;position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.is-active{background:var(--sidebar-active-bg);color:var(--sidebar-active-fg);font-weight:600}
.nav-item.is-active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--brand)}
.nav-item__icon{width:19px;height:19px;flex:0 0 auto;opacity:.9}
.nav-item__icon svg{width:19px;height:19px}
.nav-item__text{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.nav-item__lock{width:14px;height:14px;flex:0 0 auto;opacity:.6}
.nav-item__badge{font-size:10px;font-weight:700;background:var(--brand);color:#fff;border-radius:var(--r-pill);padding:1px 7px;flex:0 0 auto}
/* collapsed sidebar */
.app.is-collapsed .sidebar__title,
.app.is-collapsed .nav-group__label,
.app.is-collapsed .nav-item__text,
.app.is-collapsed .nav-item__lock,
.app.is-collapsed .nav-item__badge,
.app.is-collapsed .sidebar__foot .nav-item__text{display:none}
.app.is-collapsed .nav-item{justify-content:center;padding:9px}
.app.is-collapsed .sidebar__brand{justify-content:center;padding:0}
.app.is-collapsed .nav-group__label{height:8px;padding:0}
/* content column */
.content{grid-row:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden}
/* topbar */
.topbar{
height:var(--topbar-h);flex:0 0 auto;
background:color-mix(in srgb,var(--surface) 88%,transparent);
backdrop-filter:saturate(140%) blur(6px);
border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:20;
}
.topbar__toggle{background:none;border:none;cursor:pointer;color:var(--muted);padding:8px;border-radius:8px;display:grid;place-items:center}
.topbar__toggle:hover{background:var(--surface-3);color:var(--text)}
/* Główna nawigacja (4 rozwijane menu) */
.topbar__nav{display:flex;align-items:center;gap:2px;min-width:0}
.topbar__menu{flex:0 0 auto}
.topbar__menu-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid transparent;cursor:pointer;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:7px 10px;border-radius:9px;white-space:nowrap}
.topbar__menu-btn:hover{background:var(--surface-3);color:var(--text)}
.topbar__menu-btn svg:last-child{color:var(--muted-2)}
.topbar__menu.is-active .topbar__menu-btn{color:var(--text);background:var(--surface-3)}
.dropdown.is-open .topbar__menu-btn{color:var(--text);background:var(--surface-3)}
.topbar__nav .dropdown__menu{min-width:210px}
/* Pasek okruszków (breadcrumbs) — osobny, cienki pasek pod nawigacją */
.crumbbar{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:8px 20px;font-size:12.5px;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--border)}
.crumbbar .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbbar .crumb:last-child{color:var(--text);font-weight:600}
.crumbbar .sep{opacity:.5}
.menu-item.is-active{background:var(--surface-3);color:var(--text);font-weight:600}
.menu-empty{font-size:12px;color:var(--muted-2);padding:6px 10px}
.icon-btn.is-planned{opacity:.55}
.icon-btn.is-planned:hover{opacity:1}
.topbar__crumbs{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);min-width:0}
.topbar__crumbs .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__crumbs .crumb:last-child{color:var(--text);font-weight:600}
.topbar__crumbs .sep{opacity:.5}
.topbar__spacer{flex:1 1 auto}
.topbar__search{position:relative;display:flex;align-items:center;max-width:260px;width:24vw;min-width:0}
.topbar__search svg{position:absolute;left:11px;width:16px;height:16px;color:var(--muted-2);pointer-events:none}
.topbar__search input{width:100%;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-pill);padding:8px 12px 8px 34px;font-size:13px;color:var(--text)}
.topbar__search input:focus{outline:none;border-color:var(--brand);box-shadow:var(--shadow-focus);background:var(--surface)}
.topbar__actions{display:flex;align-items:center;gap:6px}
.icon-btn{background:none;border:1px solid transparent;cursor:pointer;color:var(--muted);width:38px;height:38px;border-radius:9px;display:grid;place-items:center;position:relative}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.topbar__env{font-size:11px;font-weight:700;color:var(--success);background:var(--success-bg);border:1px solid var(--success-bd);padding:3px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.topbar__env::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
.topbar__user{display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px 8px 5px 5px;border-radius:var(--r-pill);border:1px solid var(--border)}
.topbar__user:hover{background:var(--surface-3)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 auto;overflow:hidden}
.avatar.lg{width:44px;height:44px;font-size:16px}
img.avatar{display:block;object-fit:cover;background:var(--surface-3)}
.topbar__user .u-meta{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;text-align:left}
.topbar__user .u-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.15}
.topbar__user .u-role{font-size:11px;color:var(--muted);line-height:1.1}
/* main scroll area.
Padding i szerokość widoku trzymamy w zmiennych NA .main (nie na .view), bo elementy
pełnej szerokości (pasek zapisu) bywają siostrami .view — muszą widzieć te same wartości. */
/* overflow-anchor:none: w środku jest nagłówek, który sam zmienia własną wysokość w reakcji na
IntersectionObserver (patrz .editor-head--sticky niżej + vcms-admin.js mountStickyHead). Bez tego
przeglądarkowy scroll anchoring "poprawia" scrollTop przy każdej takiej zmianie wysokości, co przy
konkretnej pozycji scrolla wywołuje pętlę: koryguje → cofa sentinel przez próg obserwatora →
klasa .is-stuck przełącza się z powrotem → nagłówek znów zmienia wysokość → migotanie ("dyskoteka").
Wcześniejsza wersja fixu wyłączała anchoring tylko na samym nagłówku/sentinelu — za wąsko: przeglądarka
nadal mogła wybrać jako "anchor" element ZARAZ PO nagłówku (ten też przesuwa się przy jego zwijaniu).
Wyłączenie na całym .main usuwa całą klasę tego bugu, nie tylko jeden przypadek. */
.main{flex:1 1 auto;overflow-y:auto;overflow-anchor:none;scroll-behavior:smooth;--view-px:28px;--view-pt:24px;--view-pb:60px;--view-max:1360px}
/* Stopka wydajności: SQL / cache / pamięć / czasy TTFB·render·total */
.app-foot{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:5px 14px;padding:6px 20px;font-size:11.5px;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--border);line-height:1.5}
.app-foot__grp{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.app-foot__grp svg{width:14px;height:14px;color:var(--muted-2);flex:0 0 auto}
.app-foot__grp b{font-weight:600;color:var(--text-body);font-variant-numeric:tabular-nums}
.app-foot__sep{flex:1 1 auto}
@media (max-width:640px){.app-foot{gap:4px 10px;font-size:11px;padding:6px 12px}.app-foot__sep{flex-basis:100%;height:0}}
/* Padding/szerokość ze zmiennych .main = JEDNO źródło prawdy. Elementy pełnej szerokości
wychodzą poza padding przez calc(-1 * --view-px) i nie przepisują wartości u siebie
(dwa źródła prawdy były powodem rozjazdu paska zapisu — T-0068). */
.view{padding:var(--view-pt) var(--view-px) var(--view-pb);max-width:var(--view-max);margin:0 auto;width:100%}
.view--wide{max-width:1600px}
.view--narrow{max-width:900px}
/* page header */
.page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head__main{min-width:0;flex:1 1 auto}
.page-title{font-size:23px;font-weight:700;color:var(--text);letter-spacing:-.2px;display:flex;align-items:center;gap:10px}
.page-sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.page-head__actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* Wiersz metadanych dokumentu w nagłówku edytora (id/adres/szablon/edycja) — ikony zamiast
etykiet tekstowych; standardowa czcionka UI (bez mono) dla spójności z resztą panelu. */
.doc-meta{display:flex;align-items:center;flex-wrap:wrap;column-gap:20px;row-gap:6px;font-size:14px;margin-top:14px}
.doc-meta__item{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.doc-meta__item [data-icon]{display:inline-flex;align-items:center;justify-content:center;color:var(--muted-2);flex:0 0 auto}
.doc-meta__item [data-doc-id],.doc-meta__item [data-doc-slug],.doc-meta__item [data-doc-template]{font-weight:500;color:var(--muted)}
/* ------------------------------------------------------------------ */
/* 5. Przyciski */
/* ------------------------------------------------------------------ */
.btn{
--_bg:var(--surface);--_fg:var(--text);--_bd:var(--border-strong);
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:var(--_bg);color:var(--_fg);border:1px solid var(--_bd);
padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;
transition:filter .12s,background .12s,border-color .12s,box-shadow .12s;white-space:nowrap;
}
.btn:hover{filter:brightness(.98);background:var(--surface-3)}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn:active{transform:translateY(.5px)}
.btn svg{width:17px;height:17px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn--primary{--_bg:var(--brand);--_fg:var(--brand-contrast);--_bd:var(--brand)}
.btn--primary:hover{background:var(--brand-700);border-color:var(--brand-700);filter:none}
.btn--danger{--_bg:var(--danger);--_fg:#fff;--_bd:var(--danger)}
.btn--danger:hover{filter:brightness(.94);background:var(--danger)}
.btn--ghost{--_bg:transparent;--_bd:transparent}
.btn--ghost:hover{background:var(--surface-3)}
.btn--subtle{--_bg:var(--brand-50);--_fg:var(--brand);--_bd:transparent}
.btn--subtle:hover{background:var(--brand-100)}
.btn--sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn--sm svg{width:15px;height:15px}
.btn--lg{padding:12px 20px;font-size:15px}
.btn--icon{padding:9px;width:38px;height:38px}
.btn--block{width:100%}
.btn-group{display:inline-flex}
.btn-group .btn{border-radius:0;border-right-width:0}
.btn-group .btn:first-child{border-radius:9px 0 0 9px}
.btn-group .btn:last-child{border-radius:0 9px 9px 0;border-right-width:1px}
/* ------------------------------------------------------------------ */
/* 6. Karty i panele */
/* ------------------------------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card__head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.card__head h3{font-size:15px;font-weight:700;color:var(--text)}
.card__head .page-sub{margin-top:2px}
.card__head-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.card__body{padding:18px}
.card__body--flush{padding:0}
.card__foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.card--pad{padding:18px}
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--sidebar{grid-template-columns:1fr 320px}
.grid--sidebar-l{grid-template-columns:300px 1fr}
@media (max-width:1100px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}.grid--sidebar,.grid--sidebar-l{grid-template-columns:1fr}}
@media (max-width:720px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
/* stat tiles */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat__label{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px}
.stat__val{font-size:28px;font-weight:800;color:var(--text);margin-top:8px;letter-spacing:-.5px}
.stat__delta{font-size:12px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:4px}
.stat__delta.up{color:var(--success)} .stat__delta.down{color:var(--danger)}
.stat__ic{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand)}
.stat__ic svg{width:21px;height:21px}
.stat.locked{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 12px,var(--surface-2) 12px,var(--surface-2) 24px)}
.stat.locked .stat__val{color:var(--muted-2);font-size:18px;display:flex;align-items:center;gap:8px}
/* ------------------------------------------------------------------ */
/* 7. Formularze */
/* ------------------------------------------------------------------ */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text);margin-bottom:7px}
.label .req{color:var(--danger)}
.label .hint-ic{color:var(--muted-2);cursor:help}
.help{font-size:12px;color:var(--muted);margin-top:6px}
.help--warn{color:var(--warning)}
.input,.textarea,.select{
width:100%;background:var(--surface);border:1px solid var(--border-strong);
border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--text);transition:border-color .12s,box-shadow .12s;
}
.input,.select{height:var(--ctl-h,36px)}
/* [T-0250] Pola opisowe (textarea) MUSZĄ być wyższe — min. ~4 wiersze. NIE wymuszać --ctl-h (36px):
to spłaszczało wszystkie textarea do jednej linii niezależnie od atrybutu rows. Reguła twarda usera. */
.textarea{resize:vertical;line-height:1.55;height:auto;min-height:96px}
/* [T-0151] pola treści wielolinijkowej (opisy) — wysokie; zwykłe textarea zostają kompaktowe (kanon 2026-08-21) */
.textarea--tall{height:auto;min-height:120px}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:var(--shadow-focus)}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input[readonly],.textarea[readonly]{background:var(--surface-2);color:var(--muted)}
.select{appearance:none;line-height:1.2;padding-top:6px;padding-bottom:6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667487' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:34px}
/* grupa pól = JEDNO bezszwowe pole: wspólna ramka na wrapperze, elementy
w środku bez własnej obwódki i tła (jak zawartość pola multi-select). */
.input-group{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--ctl-r,9px);transition:border-color .12s,box-shadow .12s}
.input-group:focus-within{border-color:var(--brand);box-shadow:var(--shadow-focus)}
.input-group>*{margin:0;border:none;background:transparent;box-shadow:none;border-radius:0;min-width:0}
.input-group .input,.input-group .select,.input-group .textarea,.input-group .ctl{background:transparent;border:none;box-shadow:none;border-radius:0}
.input-group .input:focus,.input-group .select:focus,.input-group .textarea:focus{box-shadow:none;border:none}
/* elementy „token/chip” wewnątrz grupy — wszystko poza głównym polem tekstowym
wygląda tak samo jak chip w polu multi-select (spójność UI). */
.input-group__addon,
.input-group>.select,
.input-group .vselect__trigger,
.input-group .vcolor__trigger,
.input-group .vpick__trigger,
.input-group .vdate__trigger{
display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
margin:4px;padding:3px 9px;min-height:0;height:auto;width:auto;
background:var(--surface-3);border:1px solid var(--border);border-radius:6px;
color:var(--text-body);font-size:12.5px;white-space:nowrap;box-shadow:none}
.input-group>.select{padding-right:28px;background-position:right 8px center}
.input-group .vselect__trigger:focus,.input-group .vcolor__trigger:focus,
.input-group .vpick__trigger:focus,.input-group .vdate__trigger:focus,
.input-group .vpop.is-open>.ctl{border-color:var(--brand);box-shadow:none}
.input-group__addon.input-group__addon{border:1px solid var(--border);background:var(--surface-3);color:var(--muted)}
/* chip: stała (maks) szerokość + elipsa, nie zasłania tekstu pola.
Hover / otwarty popover płynnie rozszerza; lewy chip rośnie w prawo,
prawy (suffix) rośnie w lewo (bo główny input to flex:1 min-width:0). */
.input-group__addon,
.input-group>.select,
.input-group .vselect__trigger,
.input-group .vcolor__trigger,
.input-group .vpick__trigger,
.input-group .vdate__trigger{max-width:118px;overflow:hidden;transition:max-width .2s ease,border-color .12s}
.input-group__addon:hover,
.input-group>.select:hover,.input-group>.select:focus,
.input-group .vselect__trigger:hover,.input-group .vpop.is-open .vselect__trigger,
.input-group .vcolor__trigger:hover,
.input-group .vpick__trigger:hover,
.input-group .vdate__trigger:hover,.input-group .vpop.is-open .vdate__trigger{max-width:340px}
.input-group .vselect__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* główne pole tekstowe wypełnia resztę i może się kurczyć; tokeny/chipy trzymają
stałą szerokość (nie wypychają się poza pole, nie nachodzą na tekst) */
.input-group>.input,.input-group>.textarea{flex:1 1 auto;width:auto;min-width:0}
.input-group>.vpop,.input-group>.select,.input-group>.input-group__addon{flex:0 0 auto}
.input--right{text-align:right}
.field-row{display:flex;gap:14px}
.field-row>*{flex:1}
.char-count{font-size:11px;color:var(--muted-2);text-align:right;margin-top:4px}
.char-count.over{color:var(--danger)}
/* switch */
.switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:10px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__track{width:40px;height:22px;background:var(--border-strong);border-radius:var(--r-pill);transition:background .15s;flex:0 0 auto;position:relative}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.switch input:checked+.switch__track{background:var(--brand)}
.switch input:checked+.switch__track::after{transform:translateX(18px)}
.switch input:focus-visible+.switch__track{box-shadow:var(--shadow-focus)}
.switch__label{font-size:13px;font-weight:500}
/* checkbox / radio */
.check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px}
.check input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
/* segmented */
.segment{display:inline-flex;background:var(--surface-3);border-radius:9px;padding:3px;gap:2px}
.segment button{border:none;background:none;padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.segment button.is-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
/* ------------------------------------------------------------------ */
/* 8. Tabele */
/* ------------------------------------------------------------------ */
/* Panel admina: BEZ suwaków w tabelach (decyzja usera) — tabele mają się mieścić,
nie przewijać. Szerokie tabele zawijają/kurczą kolumny zamiast dawać pasek. */
.table-wrap{overflow:visible;border-radius:var(--r-lg)}
.table{font-size:13.5px}
.table thead th{
text-align:left;font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1;
}
.table thead th.sortable{cursor:pointer;user-select:none}
.table thead th.sortable:hover{color:var(--text)}
.table thead th .sort-ic{display:inline-block;margin-left:5px;opacity:.4;vertical-align:middle}
.table thead th.sorted .sort-ic{opacity:1;color:var(--brand)}
.table tbody td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-body);vertical-align:middle}
.table tbody tr{transition:background .1s}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody tr.is-selected{background:var(--brand-50)}
.table tbody tr:last-child td{border-bottom:none}
.table td .t-main{font-weight:600;color:var(--text)}
.table td .t-sub{font-size:12px;color:var(--muted)}
.table .col-check{width:20px}
.table .col-actions{width:44px;text-align:right}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table--card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.table--compact tbody td{padding:8px 12px}
.cell-img{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--surface-3);border:1px solid var(--border);flex:0 0 auto}
.cell-flex{display:flex;align-items:center;gap:11px;min-width:0}
/* toolbar / filters */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:0;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.toolbar--top{border-radius:var(--r-lg) var(--r-lg) 0 0}
.toolbar__search{position:relative;flex:1 1 240px;max-width:360px}
.toolbar__search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted-2)}
.toolbar__search input{width:100%;border:1px solid var(--border-strong);background:var(--surface-2);border-radius:9px;padding:8px 12px 8px 34px;font-size:13px}
.toolbar__search input:focus{outline:none;border-color:var(--brand);box-shadow:var(--shadow-focus);background:var(--surface)}
.toolbar__spacer{flex:1 1 auto}
.filter-select{border:1px solid var(--border-strong);background:var(--surface);border-radius:9px;padding:8px 30px 8px 12px;font-size:13px;font-weight:500;color:var(--text-body);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667487' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
/* chips */
.chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-50);color:var(--brand);border:1px solid var(--brand-100);border-radius:var(--r-pill);padding:4px 10px;font-size:12px;font-weight:600}
.chip button{background:none;border:none;cursor:pointer;color:inherit;display:grid;place-items:center;opacity:.7;padding:0}
.chip button:hover{opacity:1}
/* bulk bar */
.bulkbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--brand-700);color:#fff;border-radius:var(--r);margin-bottom:14px;box-shadow:var(--shadow-md)}
.bulkbar strong{font-weight:700}
.bulkbar .btn{--_bg:rgba(255,255,255,.14);--_fg:#fff;--_bd:rgba(255,255,255,.25)}
.bulkbar .btn:hover{background:rgba(255,255,255,.24)}
.bulkbar__spacer{flex:1}
/* pagination */
.pagination{display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap}
.pagination__info{font-size:13px;color:var(--muted)}
.pagination__pages{display:flex;gap:4px;margin-left:auto}
.page-btn{min-width:34px;height:34px;padding:0 8px;border:1px solid var(--border-strong);background:var(--surface);border-radius:8px;font-size:13px;font-weight:600;color:var(--text-body);cursor:pointer;display:grid;place-items:center}
.page-btn:hover{background:var(--surface-3)}
.page-btn.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.page-btn[disabled]{opacity:.4;cursor:not-allowed}
/* comparison table */
.compare{font-size:13.5px}
.compare th,.compare td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.compare thead th{background:var(--surface-2);position:sticky;top:0}
.compare thead th.prod{min-width:180px}
.compare .param{font-weight:600;color:var(--text);background:var(--surface-2);position:sticky;left:0}
.compare .sekcja td{background:var(--brand-50);color:var(--brand);font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.05em}
.compare td.diff{background:var(--warning-bg)}
.compare .prod-head{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
/* [T-0050] liniowy diff treści (historia zmian dokumentu) */
.difftext{border:1px solid var(--border);border-radius:var(--r);overflow:auto;max-height:340px;background:var(--surface-2);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55}
.difftext__line{display:flex;white-space:pre-wrap;word-break:break-word;padding:0 10px;border-left:3px solid transparent}
.difftext__line .op{flex:0 0 16px;color:var(--muted);user-select:none}
.difftext__line--add{background:var(--success-bg);border-left-color:var(--success)}
.difftext__line--del{background:var(--danger-bg);border-left-color:var(--danger)}
.difftext__line--add .op{color:var(--success)}
.difftext__line--del .op{color:var(--danger)}
.difftext__line--ctx{color:var(--muted)}
/* obszar diffa o STAŁEJ wysokości w modalu (konwencja: modal nie zmienia rozmiaru) */
.diffbox{min-height:120px}
/* przełącznik MIN/MAX; w szufladzie treść płynie, a scroll obsługuje .drawer__body (bez zagnieżdżenia) */
.difftext--full{max-height:none}
/* szeroki wariant szuflady — mieści dwukolumnowy side-by-side diff (przed/po); mobile = pełna szer. (reguła niżej).
UWAGA: podwójny selektor `.drawer.drawer--wide` — bazowe `.drawer{width:440px}` jest DALEJ w arkuszu i przy
równej specyficzności nadpisywało szerokość; wyższa specyficzność wygrywa niezależnie od kolejności. */
.drawer.drawer--wide{width:92vw;max-width:1400px}
/* średni wariant — szuflada edycji komponentu treści (karty/kroki/split/band/…): dość szeroka na
rowcard z ikoną+polami obok siebie, ale bez rozciągania pól na prawie cały ekran (feedback usera). */
.drawer.drawer--md{width:640px;max-width:92vw}
/* pasek kontekstowy tabeli (unosi się nad tabelą, gdy kursor jest w komórce) — dopracowanie po
feedbacku usera, patrz komentarz przy tableFloatToolbar() w vcms-editor.js */
/* Przycisk dzielony paska RTE (nagłówki/formatowanie/semantyczne/wyrównanie/cytaty/listy) — główny
przycisk aplikuje BIEŻĄCĄ opcję, wąska strzałka obok otwiera listę wariantów (dopracowanie po
feedbacku usera, patrz TB_GROUPS w vcms-editor.js). Dwa .tb-btn stykają się wizualnie (0 odstępu,
wspólne zaokrąglenie po zewnętrznych rogach) — czytelne jako JEDNA kontrolka, nie dwa osobne przyciski. */
.tb-split{display:inline-flex;align-items:stretch;gap:0}
.tb-split .tb-split__main{border-radius:7px 0 0 7px;padding:0 8px}
.tb-split .tb-split__arrow{border-radius:0 7px 7px 0;min-width:18px;width:18px;padding:0;border-left:1px solid var(--border)}
.tb-split__optlabel{font-size:12px;color:var(--muted);font-weight:400}
.rte-table-float{position:absolute;top:0;left:0;z-index:120;display:none;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:4px}
.rte-table-float.is-visible{display:flex}
.rte-table-float .tb-btn{white-space:nowrap}
.rte-table-float__sep{width:1px;align-self:stretch;background:var(--border);margin:0 4px}
/* w szufladzie diffa nagłówki NIE są przyklejone (jeden scroll całości — inaczej „pływają" nad treścią) */
.drawer--wide .table thead th,
.drawer--wide .diffsplit__head{position:static;top:auto}
/* przyciemnienie tła pod otwartą szufladą (klik w scrim zamyka) */
.drawer-scrim{position:fixed;inset:0;background:rgba(15,23,42,.38);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-scrim.is-open{opacity:1;pointer-events:auto}
/* side-by-side diff treści (MAX): dwie kolumny „przed" / „po", jak w narzędziach diff */
.diffsplit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6}
.diffsplit__head{background:var(--surface-3);color:var(--muted);font-weight:600;padding:6px 10px;position:sticky;top:0;z-index:1}
.diffsplit__cell{background:var(--surface-2);padding:1px 10px;white-space:pre-wrap;word-break:break-word;min-height:1.6em;border-left:3px solid transparent}
.diffsplit__cell--del{background:var(--danger-bg);border-left-color:var(--danger)}
.diffsplit__cell--add{background:var(--success-bg);border-left-color:var(--success)}
.diffsplit__cell--empty{background:var(--surface-3);opacity:.45}
/* permission matrix */
.matrix{font-size:13px}
.matrix th,.matrix td{border:1px solid var(--border);padding:9px 12px;text-align:center}
.matrix thead th{background:var(--surface-2);font-weight:600}
.matrix tbody th{text-align:left;background:var(--surface-2);font-weight:600;position:sticky;left:0}
.matrix td .check{justify-content:center}
/* ------------------------------------------------------------------ */
/* 9. Badge / status */
/* ------------------------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--muted);border:1px solid transparent;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.badge--none::before{display:none}
.badge--success{background:var(--success-bg);color:var(--success);border-color:var(--success-bd)}
.badge--warning{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-bd)}
.badge--danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.badge--info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.badge--brand{background:var(--brand-50);color:var(--brand);border-color:var(--brand-100)}
.badge--purple{background:var(--purple-bg);color:var(--purple)}
.badge--muted{background:var(--surface-3);color:var(--muted)}
.badge--lock{background:var(--surface-3);color:var(--muted)}
.badge--lock::before{display:none}
/* Kompaktowy wariant plakietki (typ przy nazwie, flaga widoczności na listach) */
.badge--xs{font-size:10px;padding:2px 7px;gap:4px;font-weight:600}
.badge--xs::before{width:5px;height:5px}
.badge svg{width:12px;height:12px}
.dot-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500}
.dot-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted-2)}
.dot-status.on::before{background:var(--success)} .dot-status.off::before{background:var(--muted-2)}
/* ------------------------------------------------------------------ */
/* 10. Zakładki */
/* ------------------------------------------------------------------ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto}
.tabs__tab{
padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:none;
border:none;background:none;border-bottom:2px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:color .12s
}
.tabs__tab:hover{color:var(--text)}
.tabs__tab.is-active{color:var(--brand);border-bottom-color:var(--brand)}
.tabs__tab .count{background:var(--surface-3);color:var(--muted);border-radius:var(--r-pill);font-size:11px;padding:1px 7px;font-weight:700}
.tabs__tab.is-active .count{background:var(--brand-50);color:var(--brand)}
.tab-panel{display:none;animation:fade .2s ease}
.tab-panel.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{padding:6px 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface-3);cursor:pointer;border:1px solid transparent}
.pill.is-active{background:var(--brand);color:#fff}
/* ------------------------------------------------------------------ */
/* 11. Modal / drawer / toast / dropdown */
/* ------------------------------------------------------------------ */
.overlay{position:fixed;inset:0;background:rgba(16,24,40,.5);backdrop-filter:blur(2px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
.overlay.is-open{opacity:1;visibility:visible}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:480px;max-height:90vh;overflow:auto;transform:scale(.97);transition:transform .18s}
.overlay.is-open .modal{transform:none}
.modal--lg{max-width:720px}
.modal__head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}
.modal__head h3{font-size:16px;font-weight:700;color:var(--text)}
.modal__head .modal-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.modal__head .modal-ic.danger{background:var(--danger-bg);color:var(--danger)}
.modal__head .modal-ic.warn{background:var(--warning-bg);color:var(--warning)}
.modal__head .modal-ic.brand{background:var(--brand-50);color:var(--brand)}
.modal__close{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);padding:5px;border-radius:7px}
.modal__close:hover{background:var(--surface-3);color:var(--text)}
.modal__body{padding:20px}
.modal__foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--surface);box-shadow:var(--shadow-lg);z-index:100;transform:translateX(100%);transition:transform .22s;display:flex;flex-direction:column}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}
.drawer__head h3{font-size:16px;font-weight:700;color:var(--text)}
.drawer__body{flex:1;overflow-y:auto;padding:20px}
.drawer__foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px}
/* toasts */
.toast-stack{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:380px}
.toast{display:flex;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--muted-2);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:13px 15px;animation:toastIn .25s ease}
.toast--success{border-left-color:var(--success)} .toast--success .toast__ic{color:var(--success)}
.toast--danger{border-left-color:var(--danger)} .toast--danger .toast__ic{color:var(--danger)}
.toast--warning{border-left-color:var(--warning)} .toast--warning .toast__ic{color:var(--warning)}
.toast--info{border-left-color:var(--brand)} .toast--info .toast__ic{color:var(--brand)}
.toast__ic{flex:0 0 auto;margin-top:1px}
.toast__body{flex:1;min-width:0}
.toast__title{font-weight:700;font-size:13.5px;color:var(--text)}
.toast__msg{font-size:12.5px;color:var(--muted);margin-top:2px}
.toast__close{background:none;border:none;cursor:pointer;color:var(--muted-2);padding:2px}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
/* dropdown */
.dropdown{position:relative;display:inline-block}
.dropdown__menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);min-width:190px;padding:6px;z-index:50;display:none}
.dropdown.is-open .dropdown__menu{display:block;animation:fade .14s ease}
.dropdown__menu.left{right:auto;left:0}
.menu-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--text-body);cursor:pointer;white-space:nowrap;width:100%;border:none;background:none;text-align:left}
.menu-item:hover{background:var(--surface-3)}
.menu-item svg{width:16px;height:16px;color:var(--muted)}
.menu-item.danger{color:var(--danger)} .menu-item.danger svg{color:var(--danger)}
.menu-sep{height:1px;background:var(--border);margin:6px 4px}
.menu-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);padding:6px 10px 4px}
/* ------------------------------------------------------------------ */
/* 12. Drzewo */
/* ------------------------------------------------------------------ */
.tree{font-size:13.5px}
.tree__node{}
.tree__row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;color:var(--text-body)}
.tree__row:hover{background:var(--surface-3)}
.tree__row.is-active{background:var(--brand-50);color:var(--brand);font-weight:600}
.tree__toggle{width:18px;height:18px;display:grid;place-items:center;flex:0 0 auto;color:var(--muted);transition:transform .15s}
.tree__toggle.collapsed{transform:rotate(-90deg)}
.tree__toggle.leaf{visibility:hidden}
.tree__ic{width:17px;height:17px;flex:0 0 auto;color:var(--muted)}
.tree__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree__row.is-active .tree__ic{color:var(--brand)}
.tree__meta{font-size:11px;color:var(--muted-2)}
.tree__children{margin-left:16px;border-left:1px solid var(--border);padding-left:6px}
.tree__children.collapsed{display:none}
/* ------------------------------------------------------------------ */
/* 13. Edytor dokumentu */
/* ------------------------------------------------------------------ */
.editor-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.editor-head .badge{flex:0 0 auto}
/* Strefa akcji ekranu — JEDYNA (status + akcje poboczne + zapis). Nie dublujemy jej paskiem
na dole: panel ma jeden slot na akcje ekranu (.page-head__actions / .editor-head__actions).
`.head-status`/`--sticky`/`.is-stuck` są dzielone między edytorem dokumentu (.editor-head)
i zwykłym nagłówkiem strony (.page-head) — ten sam wzorzec, dwa konteksty (T-0068 etap 2). */
.editor-head__actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-left:auto}
.head-status{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap;margin-right:3px}
.head-status.dirty{color:var(--warning);font-weight:600}
.head-status .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
/* Grupa zapisu chowana/pokazywana jako całość (np. Ustawienia: tylko grupy generyczne mają zapis) */
.head-actions__group{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
/* Wariant przyklejony: na długim formularzu przyciski zostają w zasięgu ręki.
Pełny bleed do paddingu .view (ze zmiennych) + KRYTE tło — treść przewija się pod spodem,
nie prześwituje. Sentinel nad nagłówkiem przełącza .is-stuck (wariant cienki).
overflow-anchor:none na obu — nagłówek zmienia własną wysokość (padding) w reakcji na
IntersectionObserver; bez wyłączenia scroll anchoringu przeglądarka po każdej zmianie
wysokości koryguje scrollTop, co cofa sentinel przez próg obserwatora i wywołuje pętlę
sprzężenia zwrotnego (migotanie „dyskoteka" przy konkretnej pozycji scrolla). */
.editor-head--sticky,.page-head--sticky{
position:sticky;top:0;z-index:16;background:var(--bg);
margin:calc(var(--view-pt,24px) * -1) calc(var(--view-px,28px) * -1) 18px;
padding:var(--view-pt,24px) var(--view-px,28px) 14px;
border-bottom:1px solid transparent;
transition:padding .15s,box-shadow .15s,border-color .15s;
overflow-anchor:none;
}
.page-head--sticky{margin-bottom:22px}
.editor-head--sticky.is-stuck,.page-head--sticky.is-stuck{padding-top:10px;padding-bottom:10px;border-bottom-color:var(--border);box-shadow:0 6px 16px rgba(16,24,40,.06)}
.editor-head--sticky.is-stuck .page-sub,.page-head--sticky.is-stuck .page-sub{display:none}
.head-sentinel{height:1px;margin:0;padding:0;overflow-anchor:none}
/* content editor + toolbar */
.rte{border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.rte__toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:7px 8px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.rte__group{display:flex;gap:2px;padding-right:6px;margin-right:4px;border-right:1px solid var(--border)}
.rte__group:last-child{border-right:none}
.tb-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid transparent;background:none;border-radius:7px;cursor:pointer;color:var(--text-body);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.tb-btn:hover{background:var(--surface-3);border-color:var(--border)}
.tb-btn svg{width:16px;height:16px}
.tb-btn code{font-family:var(--mono);font-size:11px;color:var(--brand)}
.rte__area{display:block;width:100%;box-sizing:border-box;min-height:300px;padding:16px 18px;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--text-body);white-space:pre-wrap;outline:none;overflow:auto;tab-size:2;border:none;resize:none}
.rte__area:focus{background:var(--surface)}
.rte__foot{display:flex;align-items:center;gap:12px;padding:8px 12px;border-top:1px solid var(--border);background:var(--surface-2);font-size:11.5px;color:var(--muted)}
.rte__foot .spacer{flex:1}
/* SEO preview (SERP) */
.serp{border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;background:var(--surface)}
.serp__title{color:#1a0dab;font-size:18px;line-height:1.3;margin-bottom:3px}
:root[data-theme="dark"] .serp__title{color:#8ab4f8}
.serp__url{color:var(--success);font-size:13px;margin-bottom:5px}
.serp__desc{color:var(--muted);font-size:13px;line-height:1.5}
/* CTA preview */
.cta-prev{border-radius:var(--r);padding:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--brand);color:#fff}
.cta-prev.antracyt{background:#2f3640} .cta-prev.jasny{background:var(--brand-50);color:var(--brand)} .cta-prev.ramka{background:var(--surface);color:var(--brand);border:2px solid var(--brand)}
.cta-prev__h{font-size:19px;font-weight:600;flex:1 1 260px;text-align:center}
/* ------------------------------------------------------------------ */
/* 14. Media */
/* ------------------------------------------------------------------ */
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--r-lg);padding:34px;text-align:center;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--brand);background:var(--brand-50)}
.dropzone__ic{width:52px;height:52px;border-radius:14px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;margin:0 auto 12px}
.dropzone h4{font-size:15px;font-weight:700;color:var(--text)}
.dropzone p{font-size:12.5px;color:var(--muted);margin-top:5px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.media-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface);cursor:pointer;position:relative;transition:box-shadow .15s,border-color .15s}
.media-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.media-card.is-selected{border-color:var(--brand);box-shadow:var(--shadow-focus)}
.media-card__thumb{aspect-ratio:4/3;background:var(--surface-3);display:grid;place-items:center;position:relative;overflow:hidden}
.media-card__thumb img{width:100%;height:100%;object-fit:cover}
.media-card__badge{position:absolute;top:7px;left:7px}
.media-card__body{padding:9px 11px}
.media-card__name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-card__meta{font-size:11px;color:var(--muted);margin-top:2px}
.ph-img{color:var(--muted-2);display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(135deg,var(--surface-3),var(--surface-2))}
.ph-img svg{width:34px;height:34px;opacity:.5}
/* thumb variants */
.thumb-variants{display:flex;gap:8px;flex-wrap:wrap}
.thumb-variant{border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:11.5px;text-align:center;background:var(--surface-2)}
.thumb-variant code{font-family:var(--mono);color:var(--brand);display:block;margin-bottom:3px}
.thumb-variant span{color:var(--muted)}
/* ------------------------------------------------------------------ */
/* 15. Stany: pusty / bramka / skeleton / alert */
/* ------------------------------------------------------------------ */
.empty{text-align:center;padding:48px 24px;max-width:440px;margin:0 auto}
.empty__ic{width:64px;height:64px;border-radius:18px;background:var(--surface-3);color:var(--muted-2);display:grid;place-items:center;margin:0 auto 16px}
.empty__ic svg{width:30px;height:30px}
.empty h3{font-size:16px;font-weight:700;color:var(--text)}
.empty p{color:var(--muted);font-size:13.5px;margin-top:6px;margin-bottom:16px}
.gate{border:1px solid var(--warning-bd);background:var(--warning-bg);border-radius:var(--r-lg);padding:18px 20px;display:flex;gap:15px;align-items:flex-start}
.gate__ic{width:44px;height:44px;border-radius:12px;background:var(--warning);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.gate h3{font-size:15px;font-weight:700;color:var(--text)}
.gate p{font-size:13px;color:var(--text-body);margin-top:5px}
.gate code{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.06);padding:1px 6px;border-radius:5px}
:root[data-theme="dark"] .gate code{background:rgba(255,255,255,.08)}
.alert{border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;display:flex;gap:11px;align-items:flex-start;font-size:13px}
.alert__ic{flex:0 0 auto;margin-top:1px}
.alert--info{background:var(--info-bg);border-color:var(--info-bd);color:var(--text-body)} .alert--info .alert__ic{color:var(--brand)}
.alert--warn{background:var(--warning-bg);border-color:var(--warning-bd)} .alert--warn .alert__ic{color:var(--warning)}
.alert--danger{background:var(--danger-bg);border-color:var(--danger-bd)} .alert--danger .alert__ic{color:var(--danger)}
.alert--success{background:var(--success-bg);border-color:var(--success-bd)} .alert--success .alert__ic{color:var(--success)}
.alert strong{color:var(--text)}
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:6px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* ------------------------------------------------------------------ */
/* 16. Login */
/* ------------------------------------------------------------------ */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth__aside{background:linear-gradient(150deg,var(--brand-700),#0f2438 90%);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth__aside::after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.05)}
.auth__brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px}
.auth__aside h1{font-size:32px;font-weight:800;line-height:1.2;margin-top:auto;max-width:440px;letter-spacing:-.5px}
.auth__aside p{color:rgba(255,255,255,.7);margin-top:14px;max-width:420px;font-size:14.5px}
.auth__feats{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
.auth__feat{font-size:12.5px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:8px}
.auth__main{display:grid;place-items:center;padding:40px;background:var(--bg)}
.auth__card{width:100%;max-width:380px}
.auth__card h2{font-size:22px;font-weight:700;color:var(--text)}
.auth__card>p{color:var(--muted);font-size:13.5px;margin-top:6px;margin-bottom:24px}
/* Blok „ostatnio zalogowane konto" (gravatar + dane) na ekranie logowania */
.auth__me{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2)}
.auth__me .avatar{width:44px;height:44px;font-size:16px}
.auth__me-info{min-width:0;flex:1 1 auto}
.auth__me-name{font-weight:700;font-size:14px;color:var(--text);line-height:1.25}
.auth__me-mail{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth__me-switch{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--brand);background:none;border:none;cursor:pointer;padding:4px;white-space:nowrap}
.auth__me-switch:hover{text-decoration:underline}
/* [T-0111] Lista kont do wyboru na wspólnym stanowisku — te same karty .auth__me, klikalne */
.auth__me-list{margin-bottom:20px}
.auth__me-list .auth__me{margin-bottom:8px;width:100%;text-align:left;cursor:pointer;transition:border-color .12s,background-color .12s;appearance:none;-webkit-appearance:none;font:inherit;color:inherit}
.auth__me-list .auth__me:hover,.auth__me-list .auth__me:focus-visible{border-color:var(--brand);background:var(--surface-3)}
.auth__me-list-other{display:block;width:100%;text-align:center;font-size:12.5px;font-weight:600;color:var(--brand);background:none;border:none;cursor:pointer;padding:6px}
.auth__me-list-other:hover{text-decoration:underline}
@media (max-width:860px){.auth{grid-template-columns:1fr}.auth__aside{display:none}}
/* ------------------------------------------------------------------ */
/* 17. Pomocnicze */
/* ------------------------------------------------------------------ */
.stack{display:flex;flex-direction:column}
.stack-8{gap:8px}.stack-12{gap:12px}.stack-16{gap:16px}.stack-20{gap:20px}.stack-24{gap:24px}
.row{display:flex;align-items:center}
.row-gap-8{gap:8px}.row-gap-12{gap:12px}.row-gap-16{gap:16px}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.center{justify-content:center}
.items-start{align-items:flex-start}
.grow{flex:1 1 auto}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.muted{color:var(--muted)}
.text-sm{font-size:12.5px}.text-xs{font-size:11.5px}
.strong{font-weight:700;color:var(--text)}
.mono{font-family:var(--mono);font-size:12.5px}
.nowrap{white-space:nowrap}
.divider{height:1px;background:var(--border);margin:18px 0;border:none}
.kbd{font-family:var(--mono);font-size:11px;background:var(--surface-3);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--muted)}
.tag-code{font-family:var(--mono);font-size:12px;background:var(--brand-50);color:var(--brand);padding:2px 7px;border-radius:6px;border:1px solid var(--brand-100)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.hr-label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:6px 0}
.hr-label::before,.hr-label::after{content:"";flex:1;height:1px;background:var(--border)}
/* definition list */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px}
.dl dt{color:var(--muted);white-space:nowrap}
.dl dd{color:var(--text);font-weight:500}
/* code block */
.codeblock{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;font-family:var(--mono);font-size:12px;color:var(--text-body);overflow-x:auto;line-height:1.6;white-space:pre}
/* progress */
.progress{height:8px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden}
.progress__bar{height:100%;background:var(--brand);border-radius:var(--r-pill)}
/* ------------------------------------------------------------------ */
/* 18. Responsywność */
/* ------------------------------------------------------------------ */
.sidebar__scrim{display:none}
@media (max-width:1024px){
.app{grid-template-columns:1fr}
.sidebar{position:fixed;left:0;top:0;z-index:120;width:var(--sidebar-w);transform:translateX(-100%);transition:transform .22s}
.app.is-mobile-open .sidebar{transform:none}
.app.is-collapsed{grid-template-columns:1fr}
.app.is-collapsed .sidebar .nav-item__text,.app.is-collapsed .sidebar .sidebar__title,.app.is-collapsed .sidebar .nav-group__label{display:block}
.sidebar__scrim{display:block;position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:110;opacity:0;visibility:hidden;transition:.2s}
.app.is-mobile-open .sidebar__scrim{opacity:1;visibility:visible}
.topbar__env,.topbar__user .u-meta{display:none}
/* Główna nawigacja: na wąskich ekranach zwijamy do samych ikon */
.topbar__menu-btn .lbl,.topbar__menu-btn svg:last-child{display:none}
.topbar__menu-btn{padding:8px}
.topbar__nav{gap:0}
.crumbbar{padding:7px 12px}
}
@media (max-width:640px){
.main{--view-px:15px;--view-pt:16px;--view-pb:50px}
.topbar{padding:0 12px;gap:8px}
.topbar__search{display:none}
.page-title{font-size:20px}
/* Nagłówek edytora: na wąskim ekranie akcje schodzą pod tytuł i nie przyklejamy go do góry
(zjadałby połowę ekranu przy zawiniętych przyciskach). */
.editor-head--sticky,.page-head--sticky{position:static;margin:calc(var(--view-pt) * -1) calc(var(--view-px) * -1) 14px;box-shadow:none}
.editor-head__actions{margin-left:0;width:100%}
.drawer{width:100%}
.field-row{flex-direction:column;gap:0}
}
/* ------------------------------------------------------------------ */
/* 19. Edytor WYSIWYG (upgrade .rte) */
/* ------------------------------------------------------------------ */
.rte__modes{display:flex;align-items:center;gap:12px;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
.rte__modes .segment{background:var(--surface-3)}
.rte__mode-hint{margin-left:auto}
.rte__visual,.rte__preview{min-height:300px;padding:16px 20px;font-family:var(--font);font-size:14.5px;line-height:1.7;color:var(--text-body);outline:none;overflow:auto}
.rte__visual:focus{background:var(--surface)}
.rte__visual:empty::before{content:"Zacznij pisać…";color:var(--muted-2)}
.rte__visual h2,.rte__preview h2{font-size:22px;font-weight:700;color:var(--text);margin:18px 0 10px}
.rte__visual h3,.rte__preview h3{font-size:18px;font-weight:700;color:var(--text);margin:16px 0 8px}
.rte__visual h4,.rte__preview h4{font-size:15.5px;font-weight:700;color:var(--text);margin:14px 0 6px}
.rte__visual h2:first-child,.rte__preview h2:first-child{margin-top:0}
.rte__visual p,.rte__preview p{margin:0 0 12px}
.rte__visual ul,.rte__preview ul,.rte__visual ol,.rte__preview ol{margin:0 0 12px;padding-left:24px}
.rte__visual ul,.rte__preview ul{list-style:disc}
.rte__visual ol,.rte__preview ol{list-style:decimal}
.rte__visual ul.checklist,.rte__preview ul.checklist{list-style:none;padding-left:6px}
.rte__visual ul.checklist li,.rte__preview ul.checklist li{position:relative;padding-left:26px;margin-bottom:5px}
.rte__visual ul.checklist li::before,.rte__preview ul.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--success);font-weight:800}
.rte__visual a,.rte__preview a{color:var(--brand);text-decoration:underline}
.rte__visual img,.rte__preview img{max-width:100%;border-radius:8px;margin:6px 0}
.rte__visual blockquote,.rte__preview blockquote,.rte__visual .cytat,.rte__preview .cytat{border-left:3px solid var(--brand);background:var(--brand-50);margin:12px 0;padding:10px 16px;color:var(--text-body);font-style:italic;border-radius:0 8px 8px 0}
.rte__visual table,.rte__preview table{margin:12px 0;font-size:13.5px;border:1px solid var(--border)}
.rte__visual table th,.rte__preview table th,.rte__visual table td,.rte__preview table td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.rte__visual table th,.rte__preview table th{background:var(--surface-2);font-weight:600}
.rte__visual details,.rte__preview details{border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin:12px 0;background:var(--surface-2)}
.rte__visual summary,.rte__preview summary{cursor:pointer;font-weight:600;color:var(--brand)}
.rte__visual .cta-prev,.rte__preview .cta-prev{margin:14px 0}
/* --- karty komponentów treści v2 (karty/kroki/split/callout/band) w edytorze [T-0075] ---
Jeden spójny wygląd dla WSZYSTKICH typów — [band] wcześniej miał osobne, niebieskawe tło+ramkę
(wyróżniało się na tle reszty jako "inny rodzaj karty", user poprosił o ujednolicenie). --- */
.rte__visual .rte-block,.rte__preview .rte-block{display:flex;align-items:stretch;margin:14px 0;border:1px dashed var(--border-strong);border-radius:var(--r);background:var(--surface-2);user-select:none}
.rte-block__body{flex:1 1 auto;min-width:0;padding:10px 14px;border-radius:0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0}
.rte-block__head{display:flex;align-items:center;gap:8px}
.rte-block__ic{color:var(--brand);display:inline-flex;flex:0 0 auto}
.rte-block__label{font-weight:600;font-size:13.5px;color:var(--text);flex:1 1 auto}
.rte-block__tag{font-size:11px;color:var(--muted)}
.rte-block__actions{display:flex;gap:4px;flex:0 0 auto}
.rte-block__btn{border:none;background:transparent;color:var(--muted);padding:3px;border-radius:6px;cursor:pointer;display:inline-flex}
.rte-block__btn:hover{background:var(--surface-3);color:var(--text)}
.rte-block.is-dragging{opacity:.4}
.rte-drop-indicator{position:fixed;display:none;height:3px;background:var(--brand);border-radius:2px;box-shadow:0 0 0 3px var(--brand-50);pointer-events:none;z-index:9999}
.rte-block__list{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.rte-block__list li{margin-bottom:2px}
/* --- picker ikon [karty] w wierszu tabeli szuflady — .ctl spójny z resztą pól, szerszy dropdown
(domyślne .dropdown__menu ma min-width:190px — za wąsko na siatkę 6 kolumn .vpick__grid,
ta sama, dla której docelowa szerokość to .vpick__panel 326px) --- */
.ikonpick{width:100%}
.ikonpick__trigger{width:100%;height:40px}
.ikonpick__trigger .thumb{width:22px;height:22px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;background:var(--surface-3);color:var(--text-body)}
.ikonpick__menu{min-width:236px;left:0;right:auto}
.ikonpick__grid{grid-template-columns:repeat(6,1fr)}
.ikonpick__grid .vpick__cell{aspect-ratio:1;padding:6px}
.ikonpick__grid .vpick__cell svg{width:100%;height:100%}
/* --- Zakładka "Ustawienia" w szufladzie komponentu (wszystkie taga, dopracowanie po T-0075) —
układ tabelaryczny: etykieta + WĄSKA kontrolka w jednym wierszu (feedback usera — pola typu
"Styl"/"Rozmiar" nie muszą zajmować pełnej szerokości szuflady jak pole treści). --- */
.sc-settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border)}
.sc-settings-row:last-child{border-bottom:none}
.sc-settings-row__label{font-size:13px;color:var(--text-body);flex:1 1 auto;min-width:0}
.sc-settings-row__ctl{flex:0 0 auto;width:220px;max-width:55%}
.sc-settings-row__ctl .select,.sc-settings-row__ctl .input{width:100%}
/* --- [band] w szufladzie: segmenty (rozpoznane komponenty jako pod-formularz, reszta jako pole
tekstowe) — T-0075 dopracowanie, żeby nie trzeba było edytować [karty]/[kroki] wewnątrz band
jako surowego kodu --- */
.sc-band-seg{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:14px;background:var(--surface-2)}
.sc-band-seg--raw{border-style:dashed;background:transparent}
.sc-band-seg__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sc-band-seg__ic{color:var(--brand);display:inline-flex;flex:0 0 auto}
.sc-band-seg__label{font-weight:600;font-size:13.5px;color:var(--text);flex:1 1 auto}
.sc-band-seg .form-group:last-child{margin-bottom:0}
/* --- wiersze iteratora w szufladzie (karty/kroki/faq): karta pionowa zamiast kolumn tabeli.
Margines z LEWEJ (.sc-rowcard__gutter) — stale widoczny (nie hover-reveal), tło o ton ciemniejsze
niż karta (a karta sama jest o ton ciemniejsza niż tło szuflady — surface-2 na surface), uchwyt DnD
+ usuń w środku. Ten sam wzorzec co .rte-block__gutter niżej — kolejność WYŁĄCZNIE przez
przeciąganie, bez ▲/▼. Strefa upuszczenia (.is-drop-before/-after) — patrz niżej przy indicator.
UWAGA: zaokrąglenie rogów przez border-radius na gutter/body osobno, NIE przez overflow:hidden na
.sc-rowcard — overflow:hidden obcinałoby dropdown podpowiedzi href / pickera ikon (realny bug,
zgłoszony przez usera: "nie działa funkcja podpowiadająca odnośnik"). */
.sc-rowcard-list{display:flex;flex-direction:column;gap:8px}
.sc-rowcard{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.sc-rowcard.is-dragging{opacity:.4}
.sc-rowcard.is-drop-before{box-shadow:inset 0 3px 0 0 var(--brand)}
.sc-rowcard.is-drop-after{box-shadow:inset 0 -3px 0 0 var(--brand)}
.sc-rowcard__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0}
.sc-rowcard__line{display:flex;gap:8px}
.sc-rowcard__line--icon{align-items:flex-end}
.sc-rowcard__field{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.sc-rowcard__field--icon{flex:0 0 auto}
.sc-rowcard__flabel{font-size:11px;color:var(--muted);padding-left:1px}
.sc-rowcard__field .input{height:32px}
.sc-rowcard__field .href-suggest{flex:1 1 auto}
.sc-rowcard__field .href-suggest .input{height:32px}
.sc-rowcard__field .mini-rte{width:100%}
.sc-rowcard__icon .ikonpick__trigger{width:32px;height:32px;padding:0;justify-content:center}
.sc-rowcard__icon .thumb{width:20px;height:20px}
.sc-rowcard__gutter{flex:0 0 42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--surface-3);color:var(--muted);border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px)}
.sc-rowcard__gutter-btn{width:28px;height:28px;border:none;background:transparent;border-radius:7px;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sc-rowcard__gutter-btn:hover{background:var(--surface);color:var(--text)}
.sc-rowcard__gutter-btn--danger:hover{background:var(--danger-bg);color:var(--danger)}
.sc-rowcard__gutter-btn[data-row-drag]{cursor:grab}
.sc-rowcard__gutter-btn[data-row-drag]:active{cursor:grabbing}
/* Zagnieżdżone w segmencie [band] (.sc-band-seg jest TEŻ surface-2) — bez tego kafelek zlewa się z
tłem segmentu pod spodem (realny bug zgłoszony przez usera). Karta staje się jaśniejsza niż
otoczenie zamiast ciemniejszej — dalej wyraźnie odróżnialna. */
.sc-band-seg .sc-rowcard{background:var(--surface)}
/* --- podpowiedzi stron wewnętrznych na polu adresu (href) — wolny tekst + nakładka, reużywa
.vpop/.vpop__panel/.vselect__* (już wystylowane, dziś backing vselect/vpages). Wrapper .vpop jest
zwykłym divem — w kontekście flex (.sc-rowcard__line) potrzebuje własnego flex-grow, inaczej kurczy
się do treści inputu zamiast wypełniać wiersz (stąd reguła wyżej, nie tylko .input). --- */
.href-suggest .vpop__panel{max-height:240px;overflow:auto}
.href-suggest .vselect__opt .t-sub{margin-left:4px}
/* --- mini-WYSIWYG (pola „blob" w szufladzie komponentów: split/callout, segmenty [band], opis w
[karty]) — węższy odpowiednik .rte, bez trybu kod/podgląd, reużywa .rte__toolbar/.rte__group/.tb-btn.
Wariant --compact (wiersze iteratora) — niższy canvas, żeby lista kilku kart nie rozpychała szuflady. */
.mini-rte{border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.mini-rte__toolbar{padding:5px 6px}
.mini-rte__visual{min-height:90px;max-height:280px;padding:10px 12px;font-family:var(--font);font-size:13.5px;line-height:1.6;color:var(--text-body);outline:none;overflow:auto}
.mini-rte__visual:focus{background:var(--surface)}
.mini-rte--compact .mini-rte__toolbar{padding:3px 4px}
.mini-rte--compact .mini-rte__visual{min-height:48px;max-height:160px;padding:7px 9px;font-size:13px}
/* --- karta komponentu treści v2 (.rte-block, główny edytor): margines z LEWEJ (.rte-block__gutter),
stale widoczny, tło o ton ciemniejsze — uchwyt DnD. Akcje edycji/usuwania zostają w nagłówku. Strefa
upuszczenia: już istniejąca .rte-drop-indicator (scDnDInit) — bez zmian, ta karta ją dziedziczy. --- */
.rte-block__gutter{flex:0 0 34px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--muted);cursor:grab;border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px)}
.rte-block__gutter:hover{color:var(--text)}
.rte-block__gutter:active{cursor:grabbing}
/* ------------------------------------------------------------------ */
/* 20. Drag & drop — kolejność */
/* ------------------------------------------------------------------ */
.drag-handle{cursor:grab;color:var(--muted-2);display:inline-grid;place-items:center;padding:2px;border-radius:6px;touch-action:none}
.drag-handle:hover{color:var(--text);background:var(--surface-3)}
.drag-handle:active{cursor:grabbing}
[data-sortable]>.is-dragging,tr.is-dragging{opacity:.4}
[data-sortable]>.drag-over{outline:2px dashed var(--brand);outline-offset:-2px}
tr.drag-over td{box-shadow:inset 0 2px 0 var(--brand)}
.sortable-order{display:inline-flex;align-items:center;gap:2px}
.sortable-order .ord-num{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;min-width:18px;text-align:center}
.reorder-badge{font-size:11px;color:var(--success);font-weight:600;display:inline-flex;align-items:center;gap:4px}
/* ------------------------------------------------------------------ */
/* 21. Log zapytań API (drawer) */
/* ------------------------------------------------------------------ */
.apilog{display:flex;flex-direction:column;gap:8px}
.apilog__item{border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--surface-2);font-size:12px}
.apilog__head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.apilog__verb{font-size:10px;font-weight:800;padding:1px 7px;border-radius:5px}
.apilog__verb.R{background:var(--info-bg);color:var(--info)}
.apilog__verb.W{background:var(--warning-bg);color:var(--warning)}
.apilog__action{font-family:var(--mono);font-weight:700;color:var(--text)}
.apilog__time{margin-left:auto;color:var(--muted-2);font-size:11px}
.apilog__body{font-family:var(--mono);font-size:11.5px;color:var(--text-body);white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:8px}
.apilog__note{color:var(--muted);margin-top:5px;font-style:italic}
.apilog-empty{color:var(--muted);text-align:center;padding:30px 10px}
/* moduły / marketplace */
.mod-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.mod-card__head{display:flex;align-items:flex-start;gap:12px;padding:16px}
.mod-card__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:var(--brand-50);color:var(--brand)}
.mod-card__ic svg{width:24px;height:24px}
.mod-card__title{font-weight:700;color:var(--text);font-size:15px}
.mod-card__meta{font-size:12px;color:var(--muted);margin-top:2px}
.mod-card__body{padding:0 16px 12px;font-size:13px;color:var(--muted);flex:1}
.mod-card__foot{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--surface-2)}
.mod-card__foot .switch{margin-right:auto}
/* ==================================================================== */
/* 20. Zestaw kontrolek zarządzania treścią (v9) */
/* widgety, form-group (Bootstrap-like), selecty CSS, pickery. */
/* Reużywalne. Skala rozmiarów: [data-ui-size="sm|md|lg"]. */
/* ==================================================================== */
/* --- skala kontrolek (globalny default + warianty rozmiaru) --------- */
:root{--ctl-h:36px; --ctl-fs:13.5px; --ctl-px:12px; --ctl-r:8px; --ctl-gap:12px}
[data-ui-size="sm"]{--ctl-h:30px; --ctl-fs:12.5px; --ctl-px:10px; --ctl-r:7px; --ctl-gap:10px}
[data-ui-size="md"]{--ctl-h:36px; --ctl-fs:13.5px; --ctl-px:12px; --ctl-r:8px; --ctl-gap:12px}
[data-ui-size="lg"]{--ctl-h:44px; --ctl-fs:15px; --ctl-px:15px; --ctl-r:9px; --ctl-gap:14px}
/* natywne pola też skalują się w kontenerze z ustawioną wielkością
(bez border-radius — żeby nie rozbić .input-group) */
[data-ui-size] .input,[data-ui-size] .select{height:var(--ctl-h);font-size:var(--ctl-fs)}
[data-ui-size] .btn{height:var(--ctl-h);font-size:var(--ctl-fs)}
/* --- grupy pól formularza (konwencja jak w Bootstrapie) ------------- */
.form-group{margin-bottom:16px}
.form-group:last-child{margin-bottom:0}
.form-label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-label .req{color:var(--danger);margin-left:2px}
.form-hint{font-size:12px;color:var(--muted);margin-top:6px}
.form-hint.is-error{color:var(--danger)}
.form-row{display:grid;gap:var(--ctl-gap);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--ctl-gap)}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--ctl-gap)}
@media(max-width:720px){.form-grid-2,.form-grid-3{grid-template-columns:1fr}}
.radio{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px}
.radio input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
/* --- baza wyzwalacza kontrolek (wspólny wygląd „input-a”) ----------- */
.ctl{height:var(--ctl-h);font-size:var(--ctl-fs);padding:0 var(--ctl-px);width:100%;
display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:var(--text);text-align:left;
background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--ctl-r);
transition:border-color .12s,box-shadow .12s}
.ctl:hover{border-color:var(--muted-2)}
.ctl:focus,.ctl:focus-visible{outline:none;border-color:var(--brand);box-shadow:var(--shadow-focus)}
.vpop.is-open>.ctl{border-color:var(--brand);box-shadow:var(--shadow-focus)}
.ctl .caret{margin-left:auto;color:var(--muted);display:inline-flex;flex:0 0 auto}
/* --- popover (baza dla wszystkich selectów/pickerów) --------------- */
.vpop{position:relative}
.vpop__panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
box-shadow:var(--shadow-lg);padding:8px;display:none}
.vpop.is-open>.vpop__panel{display:block;animation:fade .14s ease}
.vpop__panel--right{left:auto;right:0}
/* --- select (zwykły + z wyszukiwaniem) ----------------------------- */
.vselect__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vselect__value.is-placeholder{color:var(--muted-2)}
.vselect__value .lead{display:inline-flex;align-items:center;color:var(--muted);margin-right:2px}
.vselect__search{margin-bottom:6px}
.vselect__search .input{height:32px;font-size:13px}
.vselect__list{max-height:264px;overflow:auto}
.vselect__opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:var(--ctl-fs);color:var(--text-body)}
.vselect__opt:hover,.vselect__opt.is-active{background:var(--surface-3)}
.vselect__opt.is-selected{color:var(--brand);font-weight:600}
.vselect__opt .ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vselect__opt .tick{color:var(--brand);opacity:0;display:inline-flex}
.vselect__opt.is-selected .tick{opacity:1}
.vselect__opt--create{border-top:1px solid var(--border);margin-top:4px;padding-top:10px;font-weight:600}
.vselect__opt--create[aria-busy="true"]{opacity:.6;pointer-events:none}
.vselect__empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
/* --- select koloru (20 wariantów, siatka w konwencji ikon) ---------- */
.vcolor__trigger .sw{width:18px;height:18px;border-radius:5px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.vcolor__trigger .lbl{flex:1;text-transform:capitalize}
.vcolor__grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;padding:2px}
.vcolor__sw{width:24px;height:24px;border-radius:6px;cursor:pointer;border:none;padding:0;position:relative;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.vcolor__sw:hover{transform:scale(1.08)}
.vcolor__sw.is-selected{outline:2px solid var(--brand);outline-offset:2px}
/* --- picker: ikona / obraz / biblioteka (zunifikowany) ------------- */
.vpick__trigger .thumb{width:26px;height:26px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;
background:var(--surface-3);color:var(--text-body);overflow:hidden}
.vpick__trigger .thumb img{width:100%;height:100%;object-fit:cover}
.vpick__trigger .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpick__panel{width:326px}
.vpick__tabs{display:flex;gap:2px;background:var(--surface-3);border-radius:8px;padding:3px;margin-bottom:8px}
.vpick__tabs button{flex:1;border:none;background:none;padding:6px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.vpick__tabs button.is-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.vpick__search{margin-bottom:8px}
.vpick__search .input{height:32px;font-size:13px}
.vpick__pane{display:none}
.vpick__pane.is-active{display:block}
.vpick__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:224px;overflow:auto}
.vpick__grid--media{grid-template-columns:repeat(3,1fr)}
.vpick__cell{aspect-ratio:1;border:1px solid var(--border);border-radius:8px;display:grid;place-items:center;
cursor:pointer;color:var(--text-body);background:var(--surface);padding:0;position:relative;overflow:hidden}
.vpick__cell:hover{border-color:var(--brand);background:var(--brand-50)}
.vpick__cell.is-selected{border-color:var(--brand);box-shadow:var(--shadow-focus)}
.vpick__cell--media .ph{width:100%;height:100%;display:grid;place-items:end start;padding:4px;font-size:9px;color:#fff;font-weight:600}
.vpick__cell--media img{width:100%;height:100%;object-fit:cover}
.vpick__drop{border:2px dashed var(--border-strong);border-radius:10px;padding:26px;text-align:center;color:var(--muted);cursor:pointer}
.vpick__drop:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.vpick__empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
/* --- select daty / czasu / data+czas ------------------------------- */
.vdate__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdate__value.is-placeholder{color:var(--muted-2)}
.vdate__lead{color:var(--muted);display:inline-flex;flex:0 0 auto}
.vdate__panel{width:260px}
.cal__nav{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.cal__title{flex:1;text-align:center;font-weight:700;font-size:13.5px;text-transform:capitalize}
.cal__navbtn{width:28px;height:28px;border:none;background:none;border-radius:7px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cal__navbtn:hover{background:var(--surface-3);color:var(--text)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__dow{font-size:11px;color:var(--muted);text-align:center;padding:4px 0;font-weight:600}
.cal__day{aspect-ratio:1;border:none;background:none;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--text-body)}
.cal__day:hover{background:var(--surface-3)}
.cal__day.is-out{color:var(--muted-2)}
.cal__day.is-today{box-shadow:inset 0 0 0 1.5px var(--brand-100)}
.cal__day.is-selected{background:var(--brand);color:#fff;font-weight:600}
.cal__time{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px;padding-top:10px;border-top:1px solid var(--border)}
.cal__time .input{width:120px;height:32px;text-align:center}
.cal__foot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
/* --- widget: boks z paskiem narzędziowym --------------------------- */
.widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:14px}
.widget__bar{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 6px;border-bottom:1px solid var(--border)}
.widget.is-collapsed .widget__bar{border-bottom:none}
.widget__grip{cursor:grab;color:var(--muted-2);display:inline-flex;padding:4px;border-radius:6px;flex:0 0 auto;touch-action:none}
.widget__grip:hover{color:var(--muted);background:var(--surface-3)}
.widget__grip:active{cursor:grabbing}
.widget__title{font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;min-width:0}
.widget__title .w-ic{color:var(--muted);display:inline-flex;flex:0 0 auto}
.widget__title .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.widget__tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface-3);border-radius:5px;padding:2px 6px}
.widget__tools{margin-left:auto;display:flex;align-items:center;gap:1px;flex:0 0 auto}
.widget__body{padding:14px}
.widget.is-collapsed .widget__body{display:none}
.widget.is-hidden{opacity:.6}
.widget.is-hidden .widget__body{background:repeating-linear-gradient(135deg,transparent,transparent 8px,var(--surface-2) 8px,var(--surface-2) 16px)}
.widget.is-dragging{opacity:.45;box-shadow:var(--shadow-lg)}
/* drzewo menu (vcms-menu-editor.js): jednostka DnD to (belka .widget + rozwinięty formularz
razem), nie sam .widget — stąd osobna reguła zamiast .widget.is-dragging. Strefa upuszczenia
(.is-drop-before/-after) rysowana na .widget (widoczny box), nie na (sam nie ma tła). */
.menu-tree li.is-dragging{opacity:.45}
.menu-tree li.is-drop-before>.widget{box-shadow:inset 0 3px 0 0 var(--brand)}
.menu-tree li.is-drop-after>.widget{box-shadow:inset 0 -3px 0 0 var(--brand)}
/* przyciski na belce widgetu (edycja / ustawienia / widoczność / usuń) */
.wtool{width:30px;height:30px;border:none;background:none;border-radius:7px;color:var(--muted);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.wtool:hover{background:var(--surface-3);color:var(--text)}
.wtool.is-on{color:var(--brand);background:var(--brand-50)}
.wtool--danger:hover{background:var(--danger-bg);color:var(--danger)}
.wtool svg{width:16px;height:16px}
.wtool-sep{width:1px;height:18px;background:var(--border);margin:0 3px}
/* --- segment „solid” (aktywny wypełniony marką — jak przełącznik widoku) */
.segment--solid button.is-active{background:var(--brand);color:var(--brand-contrast);box-shadow:none}
/* --- warianty wąskie / osadzanie kontrolek w grupie pól ------------ */
.ctl--auto{width:auto}
.vpop.is-auto,.vpop.is-auto>.ctl{width:auto}
.input-group .vpop{display:flex;position:relative;z-index:1}
.input-group .vpop.is-open{z-index:5}
.input-group .vpop .ctl{width:auto}
.input-group .vselect__value{flex:0 1 auto}
.input-group .vdate__value{max-width:120px}
/* zwarty token w grupie: picker/kolor pokazują tylko ikonę/próbkę + strzałkę
(etykieta jest już w sąsiednim polu tekstowym) */
.input-group .vpick__trigger .lbl,.input-group .vcolor__trigger .lbl{display:none}
.input-group .vpick__trigger .thumb{width:20px;height:20px;background:transparent}
.input-group .vpick__trigger .caret,.input-group .vcolor__trigger .caret,
.input-group .vselect__trigger .caret,.input-group .vdate__trigger .caret{margin-left:2px;color:var(--muted)}
/* --- select wielokrotnego wyboru (chipy) --------------------------- */
.vselect--multi .vselect__trigger{height:auto;min-height:var(--ctl-h);padding:4px 8px 4px 6px;align-items:center;flex-wrap:wrap;gap:5px}
.vselect__chips{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:40px;align-items:center}
.vselect__chips .ph{color:var(--muted-2);padding-left:6px}
.vselect__chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-3);border:1px solid var(--border);border-radius:6px;padding:2px 3px 2px 8px;font-size:12.5px;line-height:1.4;color:var(--text-body)}
.vselect__chip button{border:none;background:none;color:var(--muted);cursor:pointer;display:inline-flex;padding:1px;border-radius:4px}
.vselect__chip button:hover{background:var(--danger-bg);color:var(--danger)}
.vselect__clear{border:none;background:none;color:var(--muted-2);cursor:pointer;display:inline-flex;padding:2px;border-radius:5px;flex:0 0 auto;margin-left:auto}
.vselect__clear:hover{color:var(--danger);background:var(--danger-bg)}
.vselect__opt .box{width:16px;height:16px;border:1.5px solid var(--border-strong);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.vselect__opt .box svg{opacity:0}
.vselect__opt.is-selected .box{background:var(--brand);border-color:var(--brand)}
.vselect__opt.is-selected .box svg{opacity:1}
/* --- picker wyboru strony CMS (miniatura + tytuł + adres, wyszukiwarka) */
.vpages__val{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden}
.vpages__val .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.vpages__val .p{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.vpages__val.is-placeholder{color:var(--muted-2)}
.vpages__panel{left:0;right:0;min-width:0} /* lista na całą szerokość pola */
.vpages__opt{align-items:center;gap:10px}
.vpages__txt{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.vpages__txt .t{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpages__txt .p{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* miniatura strony (atrapa: gradient + „karta"; docelowo screenshot/OG) */
.vpages__thumb{flex:0 0 auto;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative;overflow:hidden}
.vpages__thumb--row{width:46px;height:34px}
.vpages__thumb--val{width:26px;height:20px}
.vpages__thumb::after{content:"";position:absolute;left:14%;right:14%;top:22%;height:12%;background:rgba(255,255,255,.75);border-radius:1px;box-shadow:0 5px 0 rgba(255,255,255,.55),0 9px 0 rgba(255,255,255,.4)}
/* --- popover kontrolki osadzonej wyrównany do prawej krawędzi pola -- */
.input-group--pop-right{position:relative}
.input-group--pop-right .vpop{position:static}
.input-group--pop-right .vpop__panel{right:0;left:auto}
/* --- stan „wczytywanie" siatki biblioteki mediów (emulacja) -------- */
.vpick__loading{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
min-height:180px;color:var(--muted);font-size:12.5px;font-weight:600}
/* --- modal biblioteki mediów w edytorze (wstaw obraz, WP-like) ----- */
.modal--wide{max-width:880px;width:calc(100vw - 40px)}
.editor-img{display:grid;grid-template-columns:1fr 300px;gap:0;padding:0}
.editor-img__lib{padding:16px;border-right:1px solid var(--border);min-width:0}
.editor-img__search{margin-bottom:12px}
.editor-img__grid{grid-template-columns:repeat(4,1fr);max-height:360px;overflow:auto;padding:2px}
.editor-img__settings{padding:16px;overflow:auto;max-height:440px;background:var(--surface-2)}
.editor-img .vpick__cell.is-selected{border-color:var(--brand);box-shadow:var(--shadow-focus)}
/* Modal biblioteki obrazów: większy + zawsze nad trybem pełnoekranowym edytora (.rte.is-fullscreen=z-index:200). */
.overlay--editor-img{z-index:250}
.modal--editor-img{max-width:1180px;width:calc(100vw - 40px)}
.modal--editor-img .editor-img{grid-template-columns:1fr 360px}
.modal--editor-img .editor-img__grid{grid-template-columns:repeat(5,1fr);max-height:min(62vh,600px)}
.modal--editor-img .editor-img__settings{max-height:min(66vh,640px)}
@media(max-width:720px){.editor-img{grid-template-columns:1fr}.editor-img__lib{border-right:none;border-bottom:1px solid var(--border)}.editor-img__grid{grid-template-columns:repeat(3,1fr)}
.modal--editor-img .editor-img{grid-template-columns:1fr}.modal--editor-img .editor-img__grid{grid-template-columns:repeat(3,1fr)}}
/* obrazy z wyrównaniem/rozmiarem w edytorze i podglądzie */
.rte__visual img.align-left,.rte__preview img.align-left,.rte__visual .fig.align-left,.rte__preview .fig.align-left{float:left;margin:4px 16px 10px 0;max-width:50%}
.rte__visual img.align-right,.rte__preview img.align-right,.rte__visual .fig.align-right,.rte__preview .fig.align-right{float:right;margin:4px 0 10px 16px;max-width:50%}
.rte__visual img.align-center,.rte__preview img.align-center{display:block;margin:10px auto}
.rte__visual .fig,.rte__preview .fig{margin:10px 0;display:table}
.rte__visual .fig.align-center,.rte__preview .fig.align-center{margin:10px auto}
.rte__visual figcaption,.rte__preview figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:5px}
.rte__visual img.size-thumbnail,.rte__preview img.size-thumbnail{max-width:150px}
.rte__visual img.size-medium,.rte__preview img.size-medium{max-width:300px}
.rte__visual img.size-large,.rte__preview img.size-large{max-width:min(100%,768px)}
/* --- prawy blok paska edytora: powiększ + przełącznik trybów ------- */
.rte__group--right{margin-left:auto;border-right:none;padding-right:0;margin-right:0;gap:6px;align-items:center}
.rte__modeseg{background:var(--surface-3)}
.rte__modeseg button{padding:6px 12px;display:inline-flex;align-items:center;justify-content:center}
.rte__modeseg button svg{width:15px;height:15px}
/* [T-0069] Przełącznik trybu SG (edytor strony głównej) — te same wymiary ikon-w-pigułce co rte__modeseg. */
.hpw-modeseg{background:var(--surface-3)}
.hpw-modeseg button{padding:6px 12px;display:inline-flex;align-items:center;justify-content:center}
.hpw-modeseg button svg{width:15px;height:15px}
/* w podglądzie chowamy narzędzia formatowania, ale przełącznik (grupa prawa) zostaje */
.rte__toolbar.is-preview .rte__group:not(.rte__group--right){display:none}
/* tryb pełnoekranowy edytora (większy obszar pracy) */
.rte-backdrop{position:fixed;inset:0;z-index:199;background:rgba(16,24,40,.5);animation:fade .15s ease}
body.rte-noscroll{overflow:hidden}
.rte.is-fullscreen{position:fixed;inset:28px;z-index:200;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);max-height:none}
.rte.is-fullscreen .rte__toolbar{flex:0 0 auto}
.rte.is-fullscreen .rte__visual,.rte.is-fullscreen .rte__area,.rte.is-fullscreen .rte__preview{flex:1 1 auto;min-height:0;max-height:none}
.rte.is-fullscreen .rte__foot{flex:0 0 auto}
@media(max-width:640px){.rte.is-fullscreen{inset:0}}
/* --- podpisy kafli biblioteki mediów ------------------------------- */
.vpick__grid--media .vpick__cell{aspect-ratio:4/3}
.vpick__cell--media .ph{position:absolute;inset:0}
.vpick__cell--media .cap{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:9.5px;line-height:1.25;
color:#fff;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
background:linear-gradient(transparent,rgba(0,0,0,.6))}
/* =====================================================================
Spinner „siatka 3×3 w wirującej ramce" — sygnaturowy wskaźnik pracy
Animowane wyłącznie transform + opacity (kompozytor GPU): brak reflow/
paintu na klatkę. Kolor z currentColor → auto-inwersja z motywem.
Markup spinnera generuje VCMS.spinner() (9× ).
===================================================================== */
.vspin{
position:relative;display:inline-grid;place-items:center;
width:var(--vw,44px);height:var(--vw,44px);flex:0 0 auto;
color:var(--text);
}
.vspin::before{ /* wirująca ramka (klasyczny spinner) */
content:"";position:absolute;inset:0;border-radius:50%;
border:2px solid color-mix(in srgb, currentColor 18%, transparent);
border-top-color:currentColor;
animation:vspin-rot 1s linear infinite;
}
.vspin .vgrid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:var(--vg,4px);width:var(--vs,24px);height:var(--vs,24px);
}
.vspin .vgrid > i{display:block;animation:vgrid-turn 20s ease-in-out infinite}
.vspin .vgrid > i > b{
display:block;width:100%;height:100%;
border:1.5px solid currentColor;border-radius:2px;
transform:scale(.4);opacity:.22;
animation:vgrid-pulse 2.6s ease-in-out infinite;
}
/* rzadki, powolny obrót pojedynczych kwadratów — różne cykle + starty */
.vspin .vgrid > i:nth-child(1){animation-duration:18s;animation-delay:-3s}
.vspin .vgrid > i:nth-child(2){animation-duration:24s;animation-delay:-14s}
.vspin .vgrid > i:nth-child(3){animation-duration:20s;animation-delay:-8s}
.vspin .vgrid > i:nth-child(4){animation-duration:26s;animation-delay:-21s}
.vspin .vgrid > i:nth-child(5){animation-duration:22s;animation-delay:-11s}
.vspin .vgrid > i:nth-child(6){animation-duration:25s;animation-delay:-17s}
.vspin .vgrid > i:nth-child(7){animation-duration:19s;animation-delay:-25s}
.vspin .vgrid > i:nth-child(8){animation-duration:27s;animation-delay:-6s}
.vspin .vgrid > i:nth-child(9){animation-duration:23s;animation-delay:-19s}
/* wolny puls (skala + jasność) — różne okresy → rozjazd faz */
.vspin .vgrid > i:nth-child(1) > b{animation-duration:2.4s;animation-delay:-.3s}
.vspin .vgrid > i:nth-child(2) > b{animation-duration:2.8s;animation-delay:-1.5s}
.vspin .vgrid > i:nth-child(3) > b{animation-duration:2.0s;animation-delay:-.7s}
.vspin .vgrid > i:nth-child(4) > b{animation-duration:3.0s;animation-delay:-1.9s}
.vspin .vgrid > i:nth-child(5) > b{animation-duration:2.6s;animation-delay:-1.0s}
.vspin .vgrid > i:nth-child(6) > b{animation-duration:2.2s;animation-delay:-.5s}
.vspin .vgrid > i:nth-child(7) > b{animation-duration:3.2s;animation-delay:-2.3s}
.vspin .vgrid > i:nth-child(8) > b{animation-duration:2.4s;animation-delay:-1.2s}
.vspin .vgrid > i:nth-child(9) > b{animation-duration:2.9s;animation-delay:-1.7s}
@keyframes vgrid-pulse{0%,100%{transform:scale(.4);opacity:.22}45%{transform:scale(1);opacity:1}}
@keyframes vgrid-turn{0%,85%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes vspin-rot{to{transform:rotate(360deg)}}
/* rozmiary */
.vspin--sm{--vw:28px;--vs:16px;--vg:2px}
.vspin--sm .vgrid > i > b{border-width:1px}
.vspin--lg{--vw:88px;--vs:48px;--vg:6px}
/* --- nakładka „ładowanie" na kartę / tabelę / sekcję (VCMS.loading) --- */
.vloading{
position:absolute;inset:0;z-index:20;border-radius:inherit;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
background:color-mix(in srgb, var(--surface) 62%, transparent);
animation:fade .15s ease;
}
.vloading__label{font-size:12.5px;color:var(--muted);font-weight:600}
/* --- stan zajętości przycisku: leveruje istniejące aria-busy="true" --- */
.btn[aria-busy="true"]{pointer-events:none;position:relative}
.btn[aria-busy="true"] > svg,
.btn[aria-busy="true"] [data-icon]{display:none} /* schowaj własną ikonę */
.btn[aria-busy="true"]::before{
content:"";flex:0 0 auto;width:15px;height:15px;border-radius:50%;
border:2px solid color-mix(in srgb, currentColor 30%, transparent);
border-top-color:currentColor;
animation:vspin-rot .7s linear infinite;
}
.btn--sm[aria-busy="true"]::before{width:13px;height:13px}
/* szacunek dla prefers-reduced-motion: mniej ruchu, nie zero */
@media(prefers-reduced-motion:reduce){
.vspin::before{animation-duration:2s}
.vspin .vgrid > i{animation:none}
.vspin .vgrid > i > b{animation-duration:3.4s!important}
.btn[aria-busy="true"]::before{animation-duration:1.4s}
}
/* === Pomoc kontekstowa przy opcjach (ikonka „?" + dymek) — komponent reużywalny (T-0224) === */
.hlp{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;padding:0;
border:1px solid var(--line,#d7e0ea);border-radius:50%;background:var(--surface-2,#f4f8fc);color:var(--muted,#5f7082);
font:700 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;cursor:help;vertical-align:middle;flex:0 0 auto}
.hlp:hover,.hlp:focus{background:var(--accent,#0e76bc);color:#fff;border-color:var(--accent,#0e76bc);outline:none}
.switch .hlp{margin-left:8px}
.hlp-pop{position:fixed;z-index:99999;max-width:340px;background:#0a2540;color:#eaf2fa;padding:10px 13px;border-radius:7px;
box-shadow:0 12px 34px rgba(10,37,64,.32);font:400 12.5px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
white-space:pre-line;pointer-events:none}
/* === Zgody → Wygląd banera: 2 kolumny (lewo szablon+treści, prawo podgląd sticky) — T-0221/feedback === */
.zgody-wyglad-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.zgody-wyglad-preview{position:sticky;top:16px}
@media(max-width:900px){.zgody-wyglad-grid{grid-template-columns:1fr}.zgody-wyglad-preview{position:static}}
/* === Token techniczny (nazwa opcji/parametru) — NIE monospace (user: bez czcionek monotypicznych) === */
.tok{font-family:inherit;font-size:.92em;padding:1px 6px;border-radius:4px;background:var(--surface-2,#eef3f8);
color:var(--muted,#5f7082);border:1px solid var(--line,#e2ecf5);white-space:nowrap}
/* === Szuflada pomocy „?": czytelne linki + sekcja Źródła jako klikalne chipy === */
#vcms-help-drawer .drawer__body{line-height:1.6}
#vcms-help-drawer .drawer__body p{margin:0 0 10px}
#vcms-help-drawer .drawer__body ul{margin:0 0 10px;padding-left:20px}
#vcms-help-drawer .drawer__body li{margin:3px 0}
#vcms-help-drawer a{color:var(--brand,#0e76bc);text-decoration:underline;font-weight:600}
#vcms-help-drawer a:hover{text-decoration:none}
.help-src{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.help-src a{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line,#e2ecf5);
border-radius:8px;background:var(--surface-2,#f4f8fc);text-decoration:none;font-weight:600;color:var(--brand,#0e76bc)}
.help-src a:hover{border-color:var(--brand,#0e76bc);background:#fff}
.help-src a::before{content:"🔗";font-size:14px;filter:grayscale(.2)}
.help-src a::after{content:"↗";margin-left:auto;opacity:.6}
.help-sec{margin:16px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#5f7082);font-weight:700}
/* === Podgląd banera: scena + ramka urządzenia w skali + kompaktowy przełącznik (feedback 2026-09-04) === */
.bnr-toolbar{display:flex;align-items:center;gap:10px}
.segment--icons{display:inline-flex;gap:2px;flex:0 0 auto;width:auto}
.segment--icons button{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;line-height:1}
.segment--icons svg{flex:0 0 auto;display:block}
.bnr-prev-stage{position:relative;width:100%;min-height:300px;overflow:auto;background:
linear-gradient(0deg,rgba(10,37,64,.04),rgba(10,37,64,.04)),#f4f8fc;
border:1px solid var(--line,#e2ecf5);border-radius:10px;display:flex;align-items:flex-start;justify-content:center;padding:16px}
/* Ramka „urządzenia": realny (zeskalowany) rozmiar → widać różnicę szerokości desktop/tablet/mobile */
.bnr-device{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line,#d7e0ea);
border-radius:10px;box-shadow:0 10px 30px rgba(10,37,64,.16);flex:0 0 auto}
.bnr-device iframe{border:0;background:#fff;transform-origin:top left;display:block}
/* === Statystyki zgód: równe kafelki KPI (grid) === */
.stat-kpi{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.stat-kpi .card{margin:0}
.stat-kpi .card__body{min-height:74px}
@media(max-width:1100px){.stat-kpi{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.stat-kpi{grid-template-columns:repeat(2,1fr)}}
/* === Boks wyboru (.optcard) — klikalna karta radio/checkbox z tytułem + opisem ===
Reużywalny wzorzec doboru opcji (typ kopii, tryb, ustawienia). Grupa = .optcards (odstęp między
boksami). Aktywny = .is-sel (obwódka brand). Zob. 11-konwencje-ui.md §2. */
.optcards{display:flex;flex-direction:column;gap:12px}
.optcard{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;background:var(--surface)}
.optcard:hover{border-color:var(--brand)}
.optcard.is-sel{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.optcard__t{font-weight:600;font-size:14px}
.optcard__d{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
/* [T-0283] Oś czasu „Historia zmian z synchronizacji" (dziennik zdarzeń VOX). Komponent reużywany
przez stronę globalną (modul-dev-dziennik.php) oraz zakładki historii w szufladach lokalu/inwestycji.
Trzymany w arkuszu, a nie wstrzykiwany przez JS — layout nie zależy od cache modułu vcms-dev.js. */
.vdev-raw__hd{margin:0 0 16px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.vdev-raw__hd .vdev-raw__badge{font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.vdev-raw__hdrow{font-size:12.5px;color:var(--text);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 14px}
.vdev-raw__hdrow b{font-weight:700}
.vdev-tl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.vdev-tl__i{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.vdev-tl__i:last-child{border-bottom:0}
.vdev-tl__ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted)}
.vdev-tl__i--add .vdev-tl__ic{background:#16a34a1a;color:#16a34a}
.vdev-tl__i--del .vdev-tl__ic{background:#dc26261a;color:#dc2626}
.vdev-tl__i--price .vdev-tl__ic{background:#2563eb1a;color:#2563eb}
.vdev-tl__bd{flex:1;min-width:0}
.vdev-tl__hd{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.vdev-tl__t{font-weight:600;font-size:13px;color:var(--text)}
.vdev-tl__when{font-size:11.5px;color:var(--muted);white-space:nowrap}
.vdev-tl__desc{font-size:12.5px;color:var(--text);margin-top:3px}
.vdev-tl__src{margin-top:5px;font-size:11px;color:var(--muted)}
.vdev-tl__src .badge{background:#2563eb18;color:#2563eb;border:1px solid #2563eb44;border-radius:5px;padding:1px 6px;margin-right:6px}
/* [T-0283] Zestawienie „było → jest" (dziennik zdarzeń + zakładka Rewizje) i porównywarka wersji. */
.vdev-chg{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.vdev-chg__r{display:flex;gap:10px;font-size:12.5px;line-height:1.45}
.vdev-chg__k{flex:0 0 auto;min-width:104px;color:var(--muted);font-weight:600}
.vdev-chg__v{color:var(--text)}
.vdev-chg__arr{color:var(--muted);padding:0 2px}
.vdev-rev__cmp{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.vdev-rev__res{margin:0 0 14px;padding:10px 12px;border:1px solid var(--border);border-radius:10px}