:root {
  --bg: #f5f6f8; --panel: #ffffff; --panel-2: #f0f2f5; --line: #e2e5ea; --text: #1a1d23; --muted: #6b7280;
  --accent: #2563eb; --accent-2: #dbe7ff; --ok: #15803d; --ok-bg: #dcfce7; --warn: #b45309; --warn-bg: #fef3c7;
  --bad: #b91c1c; --bad-bg: #fee2e2; --info-bg: #e0f2fe; --info: #0369a1; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  --r: 10px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --panel: #171a21; --panel-2: #1e222b; --line: #2a2f3a; --text: #e6e8ec; --muted: #9aa3b2;
    --accent: #60a5fa; --accent-2: #1e3a5f; --ok: #4ade80; --ok-bg: #14301f; --warn: #fbbf24; --warn-bg: #3a2c0a;
    --bad: #f87171; --bad-bg: #3b1515; --info-bg: #0c2a3d; --info: #7dd3fc; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --panel: #171a21; --panel-2: #1e222b; --line: #2a2f3a; --text: #e6e8ec; --muted: #9aa3b2;
  --accent: #60a5fa; --accent-2: #1e3a5f; --ok: #4ade80; --ok-bg: #14301f; --warn: #fbbf24; --warn-bg: #3a2c0a;
  --bad: #f87171; --bad-bg: #3b1515; --info-bg: #0c2a3d; --info: #7dd3fc; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
nav.side { background: var(--panel); border-right: 1px solid var(--line); padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; }
.logo { font-weight: 700; font-size: 17px; padding: 4px 10px 16px; letter-spacing: -.01em; }
.logo span { color: var(--accent); }
nav.side button.tab { all: unset; cursor: pointer; padding: 9px 12px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-weight: 500; }
nav.side button.tab:hover { background: var(--panel-2); color: var(--text); }
nav.side button.tab.on { background: var(--accent-2); color: var(--accent); }
nav.side .cnt { font-size: 12px; background: var(--panel-2); border-radius: 99px; padding: 1px 8px; color: var(--muted); }
.side-foot { margin-top: auto; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; padding: 8px; }
main { padding: 22px 26px 60px; min-width: 0; }
h1 { font-size: 21px; margin: 0 0 4px; letter-spacing: -.01em; } h2 { font-size: 16px; margin: 0 0 10px; } h3 { font-size: 14px; margin: 14px 0 8px; }
.sub { color: var(--muted); margin: 0 0 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); background: var(--panel); padding: 7px 13px; border-radius: 8px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--panel-2); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.pri:hover { filter: brightness(1.08); }
.btn.bad { color: var(--bad); } .btn.sm { padding: 4px 9px; font-size: 13px; } .btn:disabled { opacity: .45; cursor: default; }
input[type=text], input[type=number], input[type=date], select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }
input[type=number] { width: 84px; } textarea { width: 100%; min-height: 60px; resize: vertical; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
details.sec { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 10px; background: var(--panel); }
details.sec > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
details.sec > summary::after { content: "▾"; color: var(--muted); } details.sec:not([open]) > summary::after { content: "▸"; }
details.sec > .in { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; cursor: pointer; user-select: none; background: var(--panel); font-size: 13px; }
.chip input { display: none; } .chip.on { background: var(--accent-2); border-color: var(--accent); color: var(--accent); }
.tri { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: 13px; }
.tri select { padding: 3px 6px; font-size: 12.5px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-brak { background: var(--panel-2); color: var(--muted); } .b-social { background: var(--info-bg); color: var(--info); }
.b-nie { background: var(--bad-bg); color: var(--bad); } .b-slaba { background: var(--warn-bg); color: var(--warn); } .b-ok { background: var(--ok-bg); color: var(--ok); }
.alert { padding: 10px 14px; border-radius: 9px; margin-bottom: 12px; font-weight: 500; }
.alert.bad { background: var(--bad-bg); color: var(--bad); } .alert.warn { background: var(--warn-bg); color: var(--warn); } .alert.info { background: var(--info-bg); color: var(--info); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.stat { background: var(--panel-2); border-radius: 9px; padding: 10px 12px; } .stat b { display: block; font-size: 20px; } .stat span { font-size: 12px; color: var(--muted); }
.bar { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.minibar { display: grid; grid-template-columns: 160px 1fr 50px; gap: 8px; align-items: center; font-size: 12.5px; margin: 4px 0; }
.log { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel-2); border-radius: 9px; padding: 10px; height: 300px; overflow: auto; white-space: pre-wrap; }
.log .ok { color: var(--ok); } .log .odrz { color: var(--muted); } .log .blokada { color: var(--bad); font-weight: 700; } .log .czeka { color: var(--warn); }
.limits { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .limits b { color: var(--text); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type=text].search { width: 260px; }
.layout-leady { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.layout-leady.nofilters { grid-template-columns: minmax(0, 1fr); } .layout-leady.nofilters .filters { display: none; }
.filters { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); max-height: calc(100vh - 150px); }
table.t { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
table.t th { position: sticky; top: 0; background: var(--panel-2); text-align: left; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; z-index: 2; user-select: none; }
table.t th.nosort { cursor: default; } table.t th .ar { color: var(--accent); }
table.t td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:hover td { background: color-mix(in srgb, var(--accent-2) 35%, transparent); }
table.t tr.sel td { background: color-mix(in srgb, var(--accent-2) 70%, transparent); }
.nm { font-weight: 600; cursor: pointer; } .nm:hover { color: var(--accent); } .muted { color: var(--muted); } .small { font-size: 12px; }
.prev { display: flex; gap: 6px; align-items: flex-start; cursor: zoom-in; }
.prev img { border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); display: block; object-fit: cover; object-position: top; }
.prev .d { width: 150px; height: 98px; } .prev .m { width: 46px; height: 98px; }
.prev .s { width: 150px; height: 98px; } .prev .lab { font-size: 11px; color: var(--muted); }
.nosite { width: 150px; height: 98px; border: 1.5px dashed var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.soc { display: flex; gap: 5px; flex-wrap: wrap; } .soc a { display: inline-flex; width: 24px; height: 24px; border-radius: 6px; align-items: center; justify-content: center; background: var(--panel-2); font-size: 10.5px; font-weight: 700; color: var(--text); text-decoration: none; }
.soc a:hover { background: var(--accent-2); color: var(--accent); }
.crm select, .crm input { font-size: 12px; padding: 3px 6px; } .crm input[type=text] { width: 150px; }
.reasons { max-width: 260px; font-size: 12px; color: var(--muted); }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--panel); border-radius: 14px; max-width: 1200px; width: 100%; max-height: 94vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 3; gap: 10px; }
.modal-b { padding: 16px 18px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .seg button { all: unset; cursor: pointer; padding: 6px 12px; font-size: 13px; } .seg button.on { background: var(--accent); color: #fff; }
.shot-big { text-align: center; background: var(--panel-2); border-radius: 10px; padding: 12px; } .shot-big img { max-width: 100%; max-height: 72vh; border-radius: 8px; border: 1px solid var(--line); }
.shot-big.tel img { max-width: 390px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; font-size: 13px; } .kv > div:nth-child(odd) { color: var(--muted); }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 9px; z-index: 99; box-shadow: var(--shadow); max-width: 420px; }
.empty { text-align: center; padding: 40px; color: var(--muted); }
.hide { display: none !important; }
@media (max-width: 1100px) { .grid2, .layout-leady { grid-template-columns: 1fr; } .filters { position: static; max-height: none; } }
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } nav.side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; } .side-foot { display: none; } main { padding: 16px; } .stats { grid-template-columns: repeat(2, 1fr); } }
.nosite.portal { flex-direction: column; gap: 3px; border-style: solid; background: var(--info-bg); color: var(--info); text-decoration: none; border-color: transparent; }
.nosite.portal:hover { filter: brightness(1.05); text-decoration: none; }
.pico { display: inline-flex; width: 26px; height: 26px; border-radius: 7px; background: var(--info); color: var(--panel); align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
/* --- wersja internetowa --- */
.login { max-width: 400px; margin: 10vh auto; }
.login h1 { margin-bottom: 14px; }
.login .f { margin-bottom: 10px; } .login input { width: 100%; }
.qr { background: #fff; padding: 10px; border-radius: 10px; display: inline-block; } .qr img { width: 200px; height: 200px; display: block; }
.secret { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; background: var(--panel-2); padding: 6px 8px; border-radius: 6px; }
.demo-bar { background: var(--warn-bg); color: var(--warn); padding: 6px 14px; font-size: 13px; text-align: center; }
.kto { font-size: 12px; color: var(--muted); padding: 0 10px 10px; word-break: break-all; }
.limit-box b { font-size: 18px; }
.alert-dot { display: inline-block; min-width: 18px; padding: 0 5px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; text-align: center; line-height: 18px; }

.lista-leadow { display: flex; flex-direction: column; gap: 8px; }
.lw { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: border-color .15s; }
.lw:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.lw.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent-2) 35%, var(--panel)); }
.lw-glowny { display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; }
.lw-check { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lw-prev .prev .d, .lw-prev .prev .s, .lw-prev .nosite { width: 132px; height: 82px; }
.lw-prev .prev .m { width: 38px; height: 82px; }
.lw-prev .nosite { font-size: 11.5px; }
.lw-tresc { min-width: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.lw-l1, .lw-l2, .lw-l3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lw-l1 .nm { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lw-l2 { font-size: 13px; } .lw-l2 .tel { font-weight: 600; } .kropka { color: var(--muted); }
.lw-l3 { font-size: 12.5px; color: var(--text); } .lw-l3 .soc a { width: 22px; height: 22px; }
.chip-mini { font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.ocena-lead { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 8px; font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -.02em; }
.o-swietny { background: #15803d; } .o-dobry { background: #2563eb; } .o-sredni { background: #b45309; } .o-slaby { background: #6b7280; }
.lw-crm { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: 150px; }
.lw-crm select, .lw-crm input { font-size: 12.5px; padding: 4px 6px; width: 100%; }
.lw-btn { align-self: flex-end; }
.lw-szczeg { border-top: 1px solid var(--line); padding: 12px 14px 14px 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lw-szczeg h4 { margin: 0 0 8px; font-size: 13px; }
.pkt { display: grid; grid-template-columns: minmax(0, 1fr) 70px 44px; gap: 8px; align-items: center; font-size: 12.5px; margin: 3px 0; }
.pkt-bar { height: 6px; background: var(--panel-2); border-radius: 99px; overflow: hidden; } .pkt-bar i { display: block; height: 100%; background: var(--accent); }
.kv-mini { grid-template-columns: 120px 1fr; font-size: 12.5px; }
.linki div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* gęstość */
.g-kompakt .lw-glowny { padding: 7px 10px; gap: 10px; }
.g-kompakt .lw-prev .prev .d, .g-kompakt .lw-prev .prev .s, .g-kompakt .lw-prev .nosite { width: 104px; height: 64px; }
.g-kompakt .lw-prev .prev .m { width: 30px; height: 64px; }
.g-kompakt .lw-tresc { gap: 2px; } .g-kompakt .lw-l1 .nm { font-size: 14px; }
.g-kompakt .ocena-lead { height: 24px; min-width: 34px; font-size: 13.5px; }
.g-kompakt .lw-crm { gap: 4px; }
/* węższe ekrany */
@media (max-width: 1100px) { .lw-szczeg { grid-template-columns: 1fr 1fr; padding-left: 14px; } }
@media (max-width: 760px) {
  .lw-glowny { grid-template-columns: 24px auto minmax(0, 1fr); }
  .lw-crm { grid-column: 1 / -1; flex-direction: row; width: auto; } .lw-crm select, .lw-crm input { width: auto; flex: 1; }
  .lw-prev .prev .d, .lw-prev .prev .s, .lw-prev .nosite { width: 84px !important; height: 56px !important; } .lw-prev .prev .m { display: none; }
  .lw-szczeg { grid-template-columns: 1fr; }
}
.lw-crm2 { display: flex; gap: 6px; } .lw-crm2 input { flex: 1; min-width: 0; }
.lw-l3 .soc:empty { display: none; }
/* średnie szerokości: wszystko w jednej linii na wiersz informacji */
@media (max-width: 1200px) {
  .lw-l1 { flex-wrap: nowrap; } .lw-l1 .chip-mini { display: none; }
  .lw-l1 .nm { min-width: 0; }
  .lw-l2 .tel + .small, .lw-l3 > span.muted { display: none; }
  .lw-crm { width: 124px; }
  .lw-prev .prev .d, .lw-prev .prev .s, .lw-prev .nosite { width: 88px !important; height: 58px !important; } .lw-prev .prev .m { display: none; }
  .lw-glowny { gap: 10px; }
}

/* ===== System projektowy: odstępy, fokus, animacje (wspólne dla Maca i panelu www) ===== */
:root { --t-szybko: 150ms; --t-norm: 220ms; --easing: cubic-bezier(.2, .7, .2, 1); --fokus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 6px; }
.btn, .chip, .seg button, nav.side button.tab, .lw, input, select, textarea { transition: background-color var(--t-szybko) var(--easing), border-color var(--t-szybko) var(--easing), box-shadow var(--t-szybko) var(--easing), transform var(--t-szybko) var(--easing), color var(--t-szybko); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.pri:focus-visible { box-shadow: var(--fokus); }
/* przejście między zakładkami */
main > section:not(.hide) { animation: wejscie var(--t-norm) var(--easing); }
@keyframes wejscie { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* pojawianie się kart (lekko schodkowo) */
.lw { animation: karta var(--t-norm) var(--easing) both; animation-delay: calc(min(var(--i, 0), 12) * 18ms); }
@keyframes karta { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lw:focus-visible { box-shadow: var(--fokus), var(--shadow); }
.lw.aktywny { border-color: var(--accent); }
/* rozwijanie wiersza */
.lw-szczeg { animation: rozwin var(--t-norm) var(--easing); transform-origin: top; }
@keyframes rozwin { from { opacity: 0; transform: translateY(-4px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.pkt-bar i { animation: pasek 480ms var(--easing) both; }
@keyframes pasek { from { width: 0 !important; } }
/* toasty */
.toast { animation: toast-in var(--t-norm) var(--easing); }
.toast.wyjscie { animation: toast-out var(--t-szybko) var(--easing) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
.toast { display: flex; gap: 10px; align-items: flex-start; } .toast.blad { background: var(--bad); color: #fff; }
/* modal */
.modal-bg { animation: tlo var(--t-szybko) ease-out; } .modal { animation: okno var(--t-norm) var(--easing); }
@keyframes tlo { from { opacity: 0; } } @keyframes okno { from { opacity: 0; transform: translateY(10px) scale(.985); } }
/* szkielety ładowania */
.szkielet { background: linear-gradient(90deg, var(--panel-2) 25%, color-mix(in srgb, var(--panel-2) 60%, var(--panel)) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: blysk 1.3s ease infinite; border-radius: 8px; }
@keyframes blysk { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.lw-szkielet { height: 86px; border-radius: 12px; }
/* stany: pusty / błąd */
.stan { text-align: center; padding: 42px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; background: var(--panel); }
.stan .ikona { font-size: 30px; display: block; margin-bottom: 8px; } .stan b { color: var(--text); display: block; margin-bottom: 4px; font-size: 15px; }
.stan.blad { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); } .stan.blad b { color: var(--bad); }
/* skróty klawiszowe */
kbd { font: 600 11.5px ui-monospace, Menlo, monospace; background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--text); }
.skroty { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13.5px; align-items: center; }
/* ruch ograniczony w systemie – bez animacji */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}