/* ---------- Przejscia miedzy podstronami + fade-in ladowania ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes cm-page-in { from { opacity: 0; } to { opacity: 1; } }
  body { animation: cm-page-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
}

:root{
  --bg:#F1E9D8; --bg-soft:#E8DDC4; --surface:#FFFCF5; --surface-2:#ECE1C9; --surface-hover:#E2D5B6;
  --ink:#1B160F; --muted:#6B6151; --muted-2:#8D8267; --line:#D2C09B; --line-soft:#E1D3AC;
  --radius-sm:6px; --radius:9px; --radius-lg:13px;
  --shadow-sm: none;
  --shadow: 0 1px 0 rgba(27,22,15,.05);
  --shadow-lg: 0 18px 44px -20px rgba(20,15,6,.5);
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  --header-bg:#1B160F; --header-ink:#F3EADA; --header-muted:#A99A78; --header-line:#372E1F; --header-hover:#282115; --header-active:#2E2517;

  --sw-slate:#57503E;  --sw-slate-soft:#E4D9BB;
  --sw-blue:#2C5490;   --sw-blue-soft:#D8E1EF;
  --sw-teal:#146357;   --sw-teal-soft:#D2E5DD;
  --sw-green:#3B6E3A;  --sw-green-soft:#DCE8D5;
  --sw-amber:#8E6015;  --sw-amber-soft:#EFDDAF;
  --sw-orange:#9C4E19; --sw-orange-soft:#EED8B6;
  --sw-red:#93262A;    --sw-red-soft:#EAD2CC;
  --sw-pink:#8C3255;   --sw-pink-soft:#E9D4DC;
  --sw-violet:#523A85; --sw-violet-soft:#DDD6EA;
  --sw-indigo:#2B3B70; --sw-indigo-soft:#D6D9E8;
}
:root[data-accent="teal"]{ --accent:#AE431B; --accent-ink:#FFF6E9; --accent-soft:#EDDAC3; --accent-2:#2C5490; --accent-2-soft:#D8E1EF; }
:root[data-accent="coral"]{ --accent:#872828; --accent-ink:#FCEDE7; --accent-soft:#E8D3CC; --accent-2:#146357; --accent-2-soft:#D2E5DD; }
:root[data-accent="indigo"]{ --accent:#2B3B70; --accent-ink:#EEF0F8; --accent-soft:#D6D9E8; --accent-2:#AE431B; --accent-2-soft:#EDDAC3; }
:root[data-accent="forest"]{ --accent:#3A5730; --accent-ink:#F0F4EA; --accent-soft:#DCE5D2; --accent-2:#872828; --accent-2-soft:#E8D3CC; }
:root[data-accent="berry"]{ --accent:#652F63; --accent-ink:#F7ECF4; --accent-soft:#E4D5E3; --accent-2:#146357; --accent-2-soft:#D2E5DD; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14110B; --bg-soft:#1A1610; --surface:#1D1811; --surface-2:#241E15; --surface-hover:#2B241A;
    --ink:#EFE6D2; --muted:#A79979; --muted-2:#8A7E62; --line:#38301F; --line-soft:#2A2417;
    --shadow-lg: 0 24px 52px -22px rgba(0,0,0,.65);
    --header-bg:#0F0C08; --header-ink:#F0E6D2; --header-muted:#8C8062; --header-line:#241E14; --header-hover:#1B160F; --header-active:#211B12;
    --sw-slate:#B6AA88; --sw-slate-soft:#2C2718;
    --sw-blue:#82A6DD; --sw-blue-soft:#1D2A3E;
    --sw-teal:#57B79D; --sw-teal-soft:#16332C;
    --sw-green:#83BE7E; --sw-green-soft:#1E3220;
    --sw-amber:#DDAB57; --sw-amber-soft:#392C15;
    --sw-orange:#DD9257; --sw-orange-soft:#392417;
    --sw-red:#D6837F; --sw-red-soft:#38201D;
    --sw-pink:#D383A4; --sw-pink-soft:#361E28;
    --sw-violet:#A796DD; --sw-violet-soft:#282139;
    --sw-indigo:#8B9AD1; --sw-indigo-soft:#1F2438;
  }
  :root[data-accent="teal"]:not([data-theme="light"]){ --accent:#E28C4F; --accent-ink:#251405; --accent-soft:#3A2716; --accent-2:#82A6DD; --accent-2-soft:#1D2A3E; }
  :root[data-accent="coral"]:not([data-theme="light"]){ --accent:#DA8A85; --accent-ink:#2A1210; --accent-soft:#38211D; --accent-2:#57B79D; --accent-2-soft:#16332C; }
  :root[data-accent="indigo"]:not([data-theme="light"]){ --accent:#8B9AD1; --accent-ink:#12162A; --accent-soft:#1F2438; --accent-2:#E28C4F; --accent-2-soft:#3A2716; }
  :root[data-accent="forest"]:not([data-theme="light"]){ --accent:#83BE7E; --accent-ink:#0F1E10; --accent-soft:#1E3220; --accent-2:#DA8A85; --accent-2-soft:#38211D; }
  :root[data-accent="berry"]:not([data-theme="light"]){ --accent:#CC8CC4; --accent-ink:#271221; --accent-soft:#392536; --accent-2:#57B79D; --accent-2-soft:#16332C; }
}
:root[data-theme="dark"]{
  --bg:#14110B; --bg-soft:#1A1610; --surface:#1D1811; --surface-2:#241E15; --surface-hover:#2B241A;
  --ink:#EFE6D2; --muted:#A79979; --muted-2:#8A7E62; --line:#38301F; --line-soft:#2A2417;
  --shadow-lg: 0 24px 52px -22px rgba(0,0,0,.65);
  --header-bg:#0F0C08; --header-ink:#F0E6D2; --header-muted:#8C8062; --header-line:#241E14; --header-hover:#1B160F; --header-active:#211B12;
  --sw-slate:#B6AA88; --sw-slate-soft:#2C2718;
  --sw-blue:#82A6DD; --sw-blue-soft:#1D2A3E;
  --sw-teal:#57B79D; --sw-teal-soft:#16332C;
  --sw-green:#83BE7E; --sw-green-soft:#1E3220;
  --sw-amber:#DDAB57; --sw-amber-soft:#392C15;
  --sw-orange:#DD9257; --sw-orange-soft:#392417;
  --sw-red:#D6837F; --sw-red-soft:#38201D;
  --sw-pink:#D383A4; --sw-pink-soft:#361E28;
  --sw-violet:#A796DD; --sw-violet-soft:#282139;
  --sw-indigo:#8B9AD1; --sw-indigo-soft:#1F2438;
}
:root[data-theme="dark"][data-accent="teal"]{ --accent:#E28C4F; --accent-ink:#251405; --accent-soft:#3A2716; --accent-2:#82A6DD; --accent-2-soft:#1D2A3E; }
:root[data-theme="dark"][data-accent="coral"]{ --accent:#DA8A85; --accent-ink:#2A1210; --accent-soft:#38211D; --accent-2:#57B79D; --accent-2-soft:#16332C; }
:root[data-theme="dark"][data-accent="indigo"]{ --accent:#8B9AD1; --accent-ink:#12162A; --accent-soft:#1F2438; --accent-2:#E28C4F; --accent-2-soft:#3A2716; }
:root[data-theme="dark"][data-accent="forest"]{ --accent:#83BE7E; --accent-ink:#0F1E10; --accent-soft:#1E3220; --accent-2:#DA8A85; --accent-2-soft:#38211D; }
:root[data-theme="dark"][data-accent="berry"]{ --accent:#CC8CC4; --accent-ink:#271221; --accent-soft:#392536; --accent-2:#57B79D; --accent-2-soft:#16332C; }

*{ box-sizing:border-box; }
html{ color-scheme:light dark; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:13.5px; line-height:1.5; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
img{ max-width:100%; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; text-wrap:balance; letter-spacing:-.01em; margin:0; }
button{ font-family:inherit; }
table{ border-collapse:collapse; width:100%; }
.tnum{ font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
.hidden{ display:none !important; }

/* ---------- app shell ---------- */
.appbar{ position:sticky; top:0; z-index:20; }
.appbar-row{ display:flex; align-items:center; gap:20px; padding:11px 24px; background:var(--header-bg); color:var(--header-ink); }
.appbar-row.appbar-sub{ background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); padding:9px 24px; flex-wrap:wrap; row-gap:8px; }

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ width:30px; height:30px; border-radius:4px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-display); font-weight:600; font-size:1.05rem; font-style:italic; }
.brand-name{ font-family:var(--font-display); font-size:1.14rem; font-weight:600; line-height:1.1; letter-spacing:-.01em; }
.brand-sub{ font-family:var(--font-mono); font-size:.62rem; color:var(--header-muted); margin-top:2px; text-transform:uppercase; letter-spacing:.08em; }

.topnav{ display:flex; align-items:stretch; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1; align-self:stretch; }
.topnav::-webkit-scrollbar{ display:none; }
.topnav-item{ display:flex; align-items:center; gap:7px; padding:0 13px; border:none; background:none; color:var(--header-muted); font-size:.83rem; font-weight:500; white-space:nowrap; cursor:pointer; flex-shrink:0; border-bottom:2px solid transparent; }
.topnav-item svg{ width:15px; height:15px; opacity:.85; flex-shrink:0; }
.topnav-item:hover{ color:var(--header-ink); background:var(--header-hover); }
.topnav-item.active{ color:var(--header-ink); border-bottom-color:var(--accent); background:var(--header-active); font-weight:600; }
.topnav-item.active svg{ opacity:1; }
.topnav-cta{ color:var(--accent); margin-left:2px; }
.topnav-cta svg{ opacity:1; }
.topnav-cta:hover{ color:var(--accent); background:var(--accent-soft); }

.appbar-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.icon-btn{ width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid transparent; background:none; color:var(--header-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; position:relative; }
.icon-btn svg{ width:16px; height:16px; }
.icon-btn:hover{ background:var(--header-hover); color:var(--header-ink); }
.icon-btn.active{ background:var(--header-active); color:var(--accent); }
.icon-btn .dot-badge{ position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--sw-red); border:1.5px solid var(--header-bg); }

.appbar-sub .icon-btn{ color:var(--muted); }
.appbar-sub .icon-btn:hover{ background:var(--surface-hover); color:var(--ink); }

.search-wrap{ position:relative; display:flex; align-items:center; }
.search-wrap svg{ position:absolute; left:10px; width:14px; height:14px; color:var(--header-muted); pointer-events:none; }
.search-input{ width:190px; padding:6px 10px 6px 30px; border-radius:var(--radius-sm); border:1px solid var(--header-line); background:var(--header-hover); color:var(--header-ink); font-size:.8rem; font-family:inherit; outline:none; transition:width .15s ease; }
.search-input::placeholder{ color:var(--header-muted); }
.search-input:focus{ width:250px; border-color:var(--accent); background:var(--header-active); }
.search-wrap-local svg{ color:var(--muted); }
.search-wrap-local .search-input{ border-color:var(--line); background:var(--surface); color:var(--ink); }
.search-wrap-local .search-input::placeholder{ color:var(--muted-2); }
.search-wrap-local .search-input:focus{ background:var(--surface); }

.avatar-menu{ display:flex; align-items:center; gap:7px; padding:3px 9px 3px 3px; border-radius:var(--radius-sm); border:1px solid var(--header-line); background:var(--header-hover); cursor:pointer; }
.avatar-menu .name{ font-size:.76rem; font-weight:600; color:var(--header-ink); }

.main{ min-width:0; }
#content{ padding:20px 24px 60px; max-width:1400px; margin:0 auto; }

/* ---------- buttons ---------- */
.btn{ font-size:.81rem; font-weight:600; padding:7px 13px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.btn svg{ width:14px; height:14px; }
.btn:hover{ background:var(--surface-hover); border-color:var(--line-soft); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-danger{ color:var(--sw-red); border-color:var(--sw-red); background:transparent; }
.btn-danger:hover{ background:var(--sw-red); color:#fff; }
.btn-sm{ padding:5px 9px; font-size:.74rem; border-radius:5px; }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-hover); }
.btn-block{ width:100%; justify-content:center; }

select, .input{ font-family:inherit; font-size:.81rem; padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); outline:none; }
select:focus, .input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.input{ resize:vertical; font-family:inherit; }
label.check{ display:flex; align-items:center; gap:7px; font-size:.81rem; cursor:pointer; }
label.check.check-consent{ align-items:flex-start; line-height:1.45; gap:8px; }
label.check.check-consent input{ margin-top:2px; flex-shrink:0; }
label.check.check-consent a{ color:var(--accent); }

/* ---------- switch ---------- */
.switch{ position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s; cursor:pointer; }
.switch .track::after{ content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:var(--surface); border-radius:50%; transition:transform .15s; }
.switch input:checked + .track{ background:var(--accent); }
.switch input:checked + .track::after{ transform:translateX(16px); }
.switch input:disabled + .track{ opacity:.5; cursor:not-allowed; }

/* ---------- cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.card-pad{ padding:16px 18px; }

.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:28px 0 12px; flex-wrap:wrap; }
.section-head:first-child{ margin-top:0; }
.section-head h2{ font-size:1.08rem; }
.hint{ color:var(--muted); font-size:.78rem; }

.chip-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip{ padding:5px 11px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); font-size:.78rem; font-weight:600; cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.chip svg{ width:12px; height:12px; flex-shrink:0; }
.edit-banner svg{ width:15px; height:15px; flex-shrink:0; }
.chip:hover{ background:var(--surface-hover); color:var(--ink); }
.chip.sw-violet{ background:var(--sw-violet-soft); color:var(--sw-violet); border-color:transparent; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:880px){ .grid-2{ grid-template-columns:1fr; } }
.sms-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:16px; align-items:start; }
@media (max-width:960px){ .sms-grid{ grid-template-columns:1fr; } }
.sms-var-block{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 11px; margin-bottom:8px; font-size:.82rem; }
.sms-var-block-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.sms-var-row-item{ padding:2px 0; }
.sms-preview-item{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 11px; margin-bottom:8px; font-size:.85rem; background:var(--surface-2); }
.sms-preview-item:last-child{ margin-bottom:0; }
.sms-rule-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:7px 0; border-bottom:1px solid var(--line-soft); }
.sms-rule-row:last-child{ border-bottom:none; }
.sms-rule-row .input{ flex:1 1 110px; min-width:0; }
.sms-rule-row .icon-btn{ flex:0 0 auto; }
.chip.active{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.chip.tag-chip.active{ background:var(--pill-bg,var(--accent-soft)); color:var(--pill-fg,var(--accent)); border-color:var(--pill-fg,var(--accent)); }
.chip-remove{ background:none; border:none; color:inherit; cursor:pointer; padding:0; margin-left:-2px; opacity:.7; font-size:.9em; }

.segmented{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); flex-shrink:0; }
.segmented button{ border:none; background:none; padding:6px 11px; font-size:.78rem; font-weight:600; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:6px; }
.segmented button svg{ width:13px; height:13px; }
.segmented button + button{ border-left:1px solid var(--line); }
.segmented button.active{ background:var(--ink); color:var(--bg); }

/* ---------- pills / tags / swatches ---------- */
.pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:3px; font-size:.71rem; font-weight:600; font-family:var(--font-mono); white-space:nowrap; background:var(--pill-bg); color:var(--pill-fg); border-left:3px solid var(--pill-fg); }
.pill svg{ width:11px; height:11px; flex-shrink:0; }
.pill .dot{ display:none; }
.sw-slate{ --pill-bg:var(--sw-slate-soft); --pill-fg:var(--sw-slate); }
.sw-blue{ --pill-bg:var(--sw-blue-soft); --pill-fg:var(--sw-blue); }
.sw-teal{ --pill-bg:var(--sw-teal-soft); --pill-fg:var(--sw-teal); }
.sw-green{ --pill-bg:var(--sw-green-soft); --pill-fg:var(--sw-green); }
.sw-amber{ --pill-bg:var(--sw-amber-soft); --pill-fg:var(--sw-amber); }
.sw-orange{ --pill-bg:var(--sw-orange-soft); --pill-fg:var(--sw-orange); }
.sw-red{ --pill-bg:var(--sw-red-soft); --pill-fg:var(--sw-red); }
.sw-pink{ --pill-bg:var(--sw-pink-soft); --pill-fg:var(--sw-pink); }
.sw-violet{ --pill-bg:var(--sw-violet-soft); --pill-fg:var(--sw-violet); }
.sw-indigo{ --pill-bg:var(--sw-indigo-soft); --pill-fg:var(--sw-indigo); }
.zr-pill{ display:inline-flex; align-items:center; gap:5px; font-size:.71rem; font-weight:500; color:var(--muted); white-space:nowrap; font-family:var(--font-mono); }
.zr-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }

.swatch-pick{ display:flex; flex-wrap:wrap; gap:6px; }
.swatch-dot{ width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; background:var(--pill-fg); }
.swatch-dot.selected{ border-color:var(--ink); box-shadow:0 0 0 2px var(--surface); }

/* ---------- avatars ---------- */
.avatar{ width:24px; height:24px; border-radius:5px; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:600; font-family:var(--font-mono); flex-shrink:0; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.lg{ width:52px; height:52px; font-size:1.05rem; border-radius:8px; }
.owner-row{ display:flex; align-items:center; gap:8px; }

/* ---------- table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.table-wrap.scroll{ max-height:600px; overflow-y:auto; }
table.data th{ text-align:left; font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:500; padding:9px 13px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2); cursor:default; }
table.data th.sortable{ cursor:pointer; user-select:none; }
table.data th.sortable:hover{ color:var(--ink); }
table.data td{ padding:8px 13px; border-bottom:1px solid var(--line-soft); font-size:.82rem; vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background:var(--surface-hover); }
table.data tr.row-selected td{ background:var(--accent-soft); }
table.data tr.row-click{ cursor:pointer; }
.num{ text-align:right; }
.empty-row{ text-align:center; color:var(--muted); padding:28px; }

/* ---------- dashboard tiles ---------- */
.dash-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.edit-banner{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:var(--radius-sm); background:var(--ink); color:var(--bg); font-size:.8rem; font-weight:500; margin-bottom:14px; }
.dashboard-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.tile{ grid-column:span 1; background:var(--surface); display:flex; flex-direction:column; min-width:0; }
.tile-w1{ grid-column:span 1; } .tile-w2{ grid-column:span 2; } .tile-w4{ grid-column:span 4; }
.tile-head{ display:flex; align-items:center; gap:8px; padding:13px 15px 0; }
.tile-title{ font-family:var(--font-mono); font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); flex:1; min-width:0; }
.tile-drag{ cursor:grab; color:var(--muted-2); display:flex; }
.tile-drag svg{ width:14px; height:14px; }
.tile-remove{ background:none; border:none; color:var(--muted-2); cursor:pointer; padding:2px; display:flex; }
.tile-remove:hover{ color:var(--sw-red); }
.tile-remove svg{ width:13px; height:13px; }
.tile-body{ padding:9px 15px 15px; flex:1; min-width:0; }
.tile.sortable-ghost{ opacity:.35; }
.tile.sortable-drag{ box-shadow:var(--shadow-lg); position:relative; z-index:2; }

.kpi-icon{ display:none; }
.kpi-value{ font-family:var(--font-display); font-size:2.1rem; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.kpi-label{ color:var(--muted); font-size:.76rem; margin-top:6px; }
.kpi-delta{ font-size:.72rem; font-weight:700; margin-top:4px; }

.chart-box{ position:relative; height:200px; }
.list-widget{ display:flex; flex-direction:column; gap:2px; }
.list-row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:.81rem; }
.list-row:last-child{ border-bottom:none; }
.list-row .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-row .d{ color:var(--muted); font-size:.71rem; flex-shrink:0; font-family:var(--font-mono); }
.note-tile textarea{ width:100%; min-height:120px; border:none; background:none; resize:vertical; font-family:var(--font-display); font-size:.95rem; color:var(--ink); outline:none; }
.quicklinks-tile{ display:flex; flex-direction:column; gap:6px; }
.quicklink-btn{ display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.81rem; font-weight:500; }
.quicklink-btn:hover{ background:var(--surface-hover); }
.quicklink-btn svg{ width:12px; height:12px; flex-shrink:0; }

.widget-picker{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.widget-opt{ display:flex; gap:10px; align-items:flex-start; padding:12px; border:none; background:var(--surface); cursor:pointer; text-align:left; }
.widget-opt:hover{ background:var(--surface-hover); }
.widget-opt-icon{ width:auto; height:auto; background:none; color:var(--muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; padding-top:2px; }
.widget-opt-icon svg{ width:16px; height:16px; }
.widget-opt-title{ font-size:.82rem; font-weight:600; }
.widget-opt-desc{ font-size:.73rem; color:var(--muted); margin-top:2px; }

/* ---------- kanban ---------- */
.kanban-wrap{ display:flex; gap:1px; overflow-x:auto; padding-bottom:12px; align-items:flex-start; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); }
.kanban-col{ background:var(--bg-soft); min-width:258px; max-width:258px; flex-shrink:0; display:flex; flex-direction:column; max-height:calc(100vh - 250px); }
.kanban-col-head{ padding:12px 13px 9px; display:flex; align-items:center; gap:8px; }
.kanban-col-head .dot{ width:8px; height:8px; border-radius:2px; }
.kanban-col-head h3{ font-family:var(--font-display); font-size:.87rem; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-col-count{ font-family:var(--font-mono); font-size:.68rem; font-weight:500; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:1px 6px; flex-shrink:0; }
.kanban-col-sum{ padding:0 13px 9px; font-family:var(--font-mono); font-size:.71rem; color:var(--muted); }
.kanban-col-body{ padding:0 9px 9px; display:flex; flex-direction:column; gap:7px; overflow-y:auto; min-height:40px; }
.lead-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 11px; cursor:pointer; display:flex; flex-direction:column; gap:6px; text-align:left; font-family:inherit; color:inherit; width:100%; }
.lead-card:hover{ border-color:var(--accent); }
.lead-card.sortable-ghost{ opacity:.3; }
.lead-card.sortable-drag{ box-shadow:var(--shadow-lg); }
.lead-card-top{ display:flex; align-items:center; gap:8px; }
.lead-card-name{ font-weight:600; font-size:.84rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lead-card-firma{ font-size:.73rem; color:var(--muted); margin-top:-3px; }
.lead-card-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.lead-card-tags .pill{ padding:1px 6px; font-size:.63rem; }
.lead-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:1px; }
.lead-card-kontakt{ font-size:.7rem; color:var(--muted); }
.lead-card-value{ font-size:.74rem; font-weight:600; color:var(--ink); font-family:var(--font-mono); }
.kanban-empty{ color:var(--muted); font-size:.75rem; padding:18px 4px; text-align:center; }

/* ---------- modal ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(20,16,9,.55); display:flex; align-items:flex-start; justify-content:center; padding:6vh 20px; overflow-y:auto; z-index:50; }
.modal{ background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-lg); width:100%; max-width:540px; padding:20px 22px 22px; }
.modal.wide{ max-width:820px; }
.modal.narrow{ max-width:380px; }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:15px; gap:10px; }
.modal-head h3{ font-size:1.2rem; font-weight:600; }
.modal-close{ background:none; border:none; cursor:pointer; color:var(--muted); font-size:1.3rem; line-height:1; padding:2px 6px; flex-shrink:0; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.form-grid.full{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-family:var(--font-mono); font-size:.68rem; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.form-section-title{ font-family:var(--font-mono); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin:17px 0 4px; border-bottom:1px solid var(--line-soft); padding-bottom:6px; }
.form-section-title:first-child{ margin-top:0; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* ---------- promo popup ---------- */
.promo-modal{ max-width:460px; position:relative; padding:24px 26px 22px; }
.promo-close{ position:absolute; top:14px; right:14px; }
.promo-kicker{ background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent); margin-bottom:12px; }
.promo-kicker svg{ width:12px; height:12px; }
.promo-title{ font-size:1.38rem; line-height:1.2; padding-right:20px; margin-bottom:8px; }
.promo-sub{ font-size:.84rem; line-height:1.45; margin-bottom:16px; }
.promo-feat{ display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-top:1px solid var(--line-soft); }
.promo-feat:first-of-type{ border-top:1px solid var(--line-soft); }
.promo-feat-icon{ width:32px; height:32px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.promo-feat-icon svg{ width:16px; height:16px; }
.promo-feat-title{ font-size:.84rem; font-weight:600; }
.promo-feat-desc{ font-size:.78rem; color:var(--muted); margin-top:2px; line-height:1.4; }
.promo-actions{ margin-top:19px; padding-top:16px; border-top:1px solid var(--line-soft); }
.file-drop{ display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px dashed var(--line); border-radius:var(--radius-sm); cursor:pointer; font-size:.79rem; color:var(--muted); background:var(--surface-2); }
.file-drop:hover{ border-color:var(--accent); color:var(--accent); }
.file-drop svg{ width:14px; height:14px; flex-shrink:0; }
.file-preview{ margin-top:8px; max-width:180px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); }

/* ---------- lead detail ---------- */
.lead-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.lead-head-info{ display:flex; gap:12px; align-items:center; }
.lead-head-info h3{ font-size:1.25rem; }
.avatar-upload{ position:relative; flex-shrink:0; }
.avatar-upload-btn{ position:absolute; right:-4px; bottom:-4px; width:19px; height:19px; border-radius:4px; background:var(--accent); color:var(--accent-ink); border:2px solid var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.avatar-upload-btn svg{ width:9px; height:9px; }
.lead-head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px 18px; margin:16px 0; font-size:.82rem; font-family:var(--font-mono); }
.contact-grid div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.contact-grid .l{ color:var(--muted); font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
.contact-grid .v{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contact-grid a{ color:var(--ink); text-decoration:none; }
.contact-grid a:hover{ color:var(--accent); text-decoration:underline; }

.timeline{ display:flex; flex-direction:column; gap:0; margin-top:6px; }
.tl-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.tl-item:last-child{ border-bottom:none; }
.tl-icon{ width:26px; height:26px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.tl-icon svg{ width:14px; height:14px; }
.tl-body{ flex:1; min-width:0; }
.tl-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.tl-title{ font-weight:600; font-size:.84rem; }
.tl-date{ color:var(--muted); font-size:.71rem; white-space:nowrap; font-family:var(--font-mono); }
.tl-note{ font-size:.83rem; color:var(--ink); margin-top:4px; }
.tl-insight{ margin-top:8px; padding:8px 10px; border-radius:var(--radius-sm); background:var(--surface-2); font-size:.76rem; display:flex; gap:8px; align-items:flex-start; border-left:2px solid var(--accent); }
.tl-insight svg{ width:14px; height:14px; flex-shrink:0; margin-top:1px; color:var(--accent); }
.tl-photo{ margin-top:8px; max-width:220px; border-radius:var(--radius-sm); cursor:zoom-in; border:1px solid var(--line); display:block; }
.tl-transcript{ margin-top:8px; padding:9px 11px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:.74rem; line-height:1.6; white-space:pre-wrap; max-height:160px; overflow-y:auto; color:var(--ink); }
.tl-recording{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:.78rem; font-weight:600; color:var(--accent); text-decoration:none; }
.tl-recording svg{ width:12px; height:12px; }
.tl-recording:hover{ text-decoration:underline; }

.stackbar{ display:flex; height:8px; border-radius:2px; overflow:hidden; background:var(--surface-2); min-width:120px; }
.stackbar span{ display:block; height:100%; }

/* ---------- tasks ---------- */
.task-group-title{ font-family:var(--font-mono); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:20px 0 8px; }
.task-group-title:first-child{ margin-top:0; }
.task-row{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:6px; }
.task-row.done{ opacity:.5; }
.task-row.done .task-title{ text-decoration:line-through; }
.task-check{ width:18px; height:18px; border-radius:4px; border:1.5px solid var(--line); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; background:none; color:transparent; }
.task-check.checked{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.task-check svg{ width:11px; height:11px; }
.task-body{ flex:1; min-width:0; }
.task-title{ font-size:.85rem; font-weight:600; }
.task-meta{ font-size:.72rem; color:var(--muted); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-family:var(--font-mono); }
.task-meta svg{ width:11px; height:11px; vertical-align:-1px; }
.task-prio{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.task-row.overdue .task-due{ color:var(--sw-red); font-weight:700; }

/* ---------- settings ---------- */
.settings-panel{ max-width:760px; }
.settings-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.settings-row:last-child{ border-bottom:none; }
.settings-row-icon{ width:auto; height:auto; border-radius:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:none; color:var(--muted); }
.settings-row-icon svg{ width:17px; height:17px; }
.settings-row-text{ flex:1; min-width:0; }
.settings-row-title{ font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:7px; }
.settings-row-desc{ font-size:.76rem; color:var(--muted); margin-top:1px; }
.lock-badge{ font-family:var(--font-mono); font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:3px; background:var(--sw-amber-soft); color:var(--sw-amber); display:inline-flex; align-items:center; gap:3px; }
.lock-badge svg{ width:9px; height:9px; }
.empty-state svg{ margin-left:auto; margin-right:auto; }

.stage-row{ display:flex; align-items:center; gap:10px; padding:8px 9px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:7px; background:var(--surface); }
.stage-drag{ cursor:grab; color:var(--muted-2); flex-shrink:0; display:flex; }
.stage-drag svg{ width:14px; height:14px; }
.stage-row input.input{ flex:1; min-width:0; }

.team-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.team-row:last-child{ border-bottom:none; }
.team-row .name{ flex:1; font-size:.84rem; font-weight:600; }

.accent-pick{ display:flex; gap:10px; flex-wrap:wrap; }
.accent-swatch{ width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; }
.accent-swatch.selected{ border-color:var(--ink); }
.accent-swatch svg{ width:14px; height:14px; }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--header-bg); color:var(--header-ink); padding:9px 16px; border-radius:var(--radius-sm); font-size:.8rem; font-weight:500; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:8px; animation:toast-in .18s ease; border:1px solid var(--header-line); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- empty state ---------- */
.empty-state{ text-align:center; padding:46px 20px; color:var(--muted); }
.empty-state svg{ width:34px; height:34px; margin-bottom:10px; opacity:.4; }
.empty-state-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:4px; }

@media (max-width:980px){
  .dashboard-grid{ grid-template-columns:repeat(2,1fr); }
  .tile-w1{ grid-column:span 1; } .tile-w2{ grid-column:span 2; } .tile-w4{ grid-column:span 2; }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .appbar-row{ padding:9px 16px; }
  .search-input, .search-input:focus{ width:130px; }
  .avatar-menu .name{ display:none; }
  #content{ padding:16px 16px 50px; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .appbar-row:not(.appbar-sub){ flex-wrap:wrap; row-gap:8px; }
  .topnav{ order:3; flex:1 1 100%; }
  .appbar-actions{ margin-left:auto; }
  .search-input, .search-input:focus{ width:110px; }
}
@media (max-width:600px){
  .dashboard-grid{ grid-template-columns:1fr; }
  .tile-w1,.tile-w2,.tile-w4{ grid-column:span 1; }
  .brand-sub{ display:none; }
  .kpi-value{ font-size:1.6rem; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .widget-picker{ grid-template-columns:1fr; }
}

/* ---------- stopka: Designed & Powered by Code-Made ---------- */
.app-credit{ padding:14px 16px 22px; border-top:1px solid var(--line); text-align:center; font-size:.72rem; color:var(--muted); }
.app-credit a{ color:inherit; font-weight:600; text-decoration:none; }
.app-credit a:hover{ color:var(--accent); text-decoration:underline; }

/* ===========================================================================
   Widok mobilny (telefon, <= 680px). Wszystko ponizej dotyczy WYLACZNIE waskich ekranow - desktop bez zmian.
   Naglowek: przyklejony tylko pasek glowny (logo + hamburger + akcje), podtytul strony przewija sie z trescia.
   Tabele .table-wrap > table.data staja sie kartami (etykiety dokleja skrypt w index.html).
   =========================================================================== */
.nav-toggle{ display:none; align-items:center; justify-content:center; flex:none; width:40px; height:40px; padding:0; border-radius:8px; cursor:pointer; border:1px solid var(--header-line); background:var(--header-hover); color:var(--header-ink); }
.nav-toggle-close{ display:none; }
.appbar.nav-open .nav-toggle-bars{ display:none; }
.appbar.nav-open .nav-toggle-close{ display:inline; }
.btn-more{ display:none; }
@media (max-width:680px){
  .appbar{ display:contents; }
  .appbar-row:not(.appbar-sub){ position:sticky; top:0; z-index:30; gap:8px; }
  .appbar-row.appbar-sub{ position:static; }
  .nav-toggle{ display:inline-flex; order:2; margin-left:auto; }
  .appbar-actions{ order:3; flex:1 1 100%; margin-left:0; }
  .appbar-actions .search-wrap{ flex:1; min-width:0; }
  .appbar-actions .search-input, .appbar-actions .search-input:focus{ width:100%; }
  .search-wrap-local{ flex:1 1 100%; }   /* lokalna wyszukiwarka w pasku filtrow strony (Leady) */
  .search-wrap-local .search-input, .search-wrap-local .search-input:focus{ width:100%; }
  .topnav{ display:none; order:4; flex:1 1 100%; flex-direction:column; overflow:visible; gap:2px; }
  .appbar.nav-open .topnav{ display:flex; }
  .topnav-item{ padding:12px 14px; border-bottom:none; border-left:3px solid transparent; }
  .topnav-item.active{ border-left-color:var(--accent); }
  .appbar-row.appbar-sub{ padding:10px 16px; }

  /* formularze / siatki: kolumna moze sie zwezic (min-width:0), inaczej pola wystaja poza karte */
  .sms-grid, .form-grid{ grid-template-columns:minmax(0,1fr); }
  .sms-grid > *, .form-grid > *, .field, .card{ min-width:0; }
  .field div[style*="display:flex"] > .input{ min-width:0; flex:1 1 0 !important; width:auto; }  /* wiersze "select + pole" z inline flex:0 0 auto */

  /* Ustawienia > Etapy lejka: nazwa w jednym rzedzie z uchwytem i kosza, kolory pod spodem */
  .stage-row{ flex-wrap:wrap; row-gap:8px; }
  .stage-row .stage-drag{ order:1; }
  .stage-row input.input[data-action="rename-stage"]{ order:2; flex:1 1 0; min-width:120px; }
  .stage-row .icon-btn[data-action="delete-stage"]{ order:3; }
  .stage-row .swatch-pick{ order:4; flex:1 1 100%; }
  .stage-row .check{ order:5; }
  .stage-row select.input{ order:6; flex:1; }

  /* tabele jako karty */
  .table-wrap.cards-m{ overflow:visible; max-height:none; border:none; background:transparent; box-shadow:none !important; }
  .cards-m table.data, .cards-m table.data tbody{ display:block; }
  .cards-m table.data thead{ display:none; }
  .cards-m table.data tr{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 12px; margin-bottom:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
  .cards-m table.data tr.row-hidden{ display:none; }
  .cards-m table.data td{ display:block; padding:4px 0; border:none; min-width:0; overflow-wrap:anywhere; text-align:left; width:auto !important; }
  .cards-m table.data td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:1px; font-family:var(--font-mono); font-size:.62rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .cards-m table.data td.card-title, .cards-m table.data td[colspan]{ grid-column:1 / -1; }
  .cards-m table.data td.card-title::before{ display:none; }
  .cards-m table.data td:not([data-label]):not([colspan]){ display:none; }   /* np. kolumna z polem zaznaczania */
  .btn-more{ display:block; width:100%; margin:0 0 14px; padding:11px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; cursor:pointer; }
  .btn-more[hidden]{ display:none; }
}