/* NOCLO panel: skora 2026 (ladowana na koncu, po panel-v4/growth/pms/kanaly). Paleta Noc jak noclo.pl i ekrany logowania:
   indygo #17152B, fiolet #5846C7, lawenda #C4B5FD, mgla #EFEDFA. Tekst Inter, naglowki i liczby Plus Jakarta Sans.
   Nie zmienia ukladu ani logiki: tylko kolory, kroje, promienie, cienie, stany. Kolory statusow wplat zostaja semantyczne. */
:root {
  --bg: #F6F5FB; --w: #FFFFFF; --t: #17152B; --t2: #3F3C55; --m: #6E6A85; --m2: #A5A2B8; --l: #E9E7F2; --l2: #DCD9E8;
  --p: #5846C7; --pd: #4938AF; --ps: #EFEDFA; --pl: #D6CFF7; --lav: #C4B5FD; --navy: #17152B;
  --blue: #17152B; --blue-s: #F1F0F7;
  --r: 16px; --sh: 0 1px 2px rgba(23, 21, 43, .04), 0 10px 28px -22px rgba(23, 21, 43, .28);
  --f: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fh: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}
body { font-family: var(--f); font-size: 13.5px; color: var(--t); background: var(--bg); letter-spacing: -.003em; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, .ph h2, .ch h3, .big { font-family: var(--fh); letter-spacing: -.02em; }
.num, .big { font-variant-numeric: tabular-nums; }

/* ---------- pasek ikon (rail): jak panel onboardingu ---------- */
.rail { background-color: #17152B; background-image: radial-gradient(120% 40% at 50% 0%, rgba(88, 70, 199, .45), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 100% 100%, 18px 18px; border-right: 0; color: #C9C6DA; }
.rail .rb { color: rgba(255, 255, 255, .55); font-family: var(--f); font-weight: 600; letter-spacing: 0; }
.rail .rb:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rail .rb.on { background: rgba(196, 181, 253, .16); color: #fff; }
.rail .rb.on .ms { color: var(--lav); }
.rail .rb.on::before { background: var(--lav); }

/* ---------- menu sekcji (hub) ---------- */
.hub { background: #fff; border-right: 1px solid var(--l); }
.hub .hlogo { border-bottom-color: var(--l); }
.hub .hwho { color: var(--m2); letter-spacing: .06em; }
.hub .hh b, .hub .hh h2, .hub .hh h3 { font-family: var(--fh); letter-spacing: -.02em; }
.hub .hsec { color: var(--m2); letter-spacing: .1em; font-weight: 700; }
.hub .hp { border-radius: 12px; color: var(--t2); font-weight: 500; transition: background .15s, color .15s; }
.hub .hp:hover { background: var(--bg); color: var(--t); }
.hub .hp.on { background: var(--ps); color: var(--p); font-weight: 600; box-shadow: inset 3px 0 0 var(--p); }
.hub .ver { border-top-color: var(--l); color: var(--m2); }

/* ---------- gorny pasek ---------- */
.top { height: 60px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--l); }
.top h1, .top .tt, .top b { font-family: var(--fh); letter-spacing: -.02em; }
.top input[type=search], .top .search input, .top input[placeholder*="Szukaj"] { border-radius: 999px !important; background: var(--bg) !important; border: 1px solid transparent !important; }
.top input[type=search]:focus, .top .search input:focus, .top input[placeholder*="Szukaj"]:focus { background: #fff !important; border-color: var(--p) !important; box-shadow: 0 0 0 4px rgba(88, 70, 199, .12) !important; outline: none; }

/* ---------- tresc ---------- */
.ph h2 { font-size: 24px; font-weight: 700; }
.card { border-radius: var(--r); border-color: var(--l); box-shadow: var(--sh); }
.ch { border-bottom-color: var(--l); padding: 1rem 1.2rem; }
.ch h3 { font-size: 15px; font-weight: 700; }
.cb { padding: 1.1rem 1.2rem; }
.big { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }

/* przyciski */
.btn { border-radius: 999px; border-color: var(--l2); font-weight: 600; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.btn:hover { border-color: #C9C4DE; background: #FBFAFF; }
.btn.p { background: var(--p); border-color: var(--p); color: #fff; box-shadow: 0 10px 22px -14px rgba(88, 70, 199, .9), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn.p:hover { background: var(--pd); border-color: var(--pd); color: #fff; }

/* pola formularzy */
.view input[type=text], .view input[type=email], .view input[type=tel], .view input[type=number], .view input[type=search], .view input[type=date], .view input[type=url], .view input:not([type]), .view select, .view textarea { border-radius: 12px; border-color: var(--l2); background-color: #FCFBFF; }
.view input:focus, .view select:focus, .view textarea:focus { border-color: var(--p); box-shadow: 0 0 0 4px rgba(88, 70, 199, .12); outline: none; background-color: #fff; }

/* statusy wplat: miekkie pigulki z kropka (kolory jak w legendzie kalendarza) */
.pill { border-radius: 999px; font-weight: 600; padding: 4px 10px 4px 9px; }
.pill.none, .pill.dep, .pill.paid, .pill.can, .pill.blk { gap: .4rem; }
.pill.none::before, .pill.dep::before, .pill.paid::before, .pill.can::before, .pill.blk::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.none { background: #FDECEE; color: #B42330; }
.pill.dep { background: #FFF1E6; color: #B4531C; }
.pill.paid { background: #E6F6EE; color: #17804A; }
.pill.can { background: #F1EDFF; color: #5846C7; }
.pill.blk { background: #F0EFF5; color: #6E6A85; }
.pill.soft { background: var(--bg); color: var(--t2); }
.pill.amber { background: #FFF4E0; color: #9A5B00; }
.pill.ok { background: #E6F6EE; color: #17804A; }

/* przelaczniki, zakladki, male akcenty */
.tabs button.on, .seg button.on, .segm button.on { color: var(--p); }
a { color: var(--p); }
::selection { background: rgba(196, 181, 253, .45); }

/* ekran ladowania */
.splash { background-color: #17152B; background-image: radial-gradient(60% 45% at 50% 0%, rgba(88, 70, 199, .45), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 100% 100%, 26px 26px; }
.splash .sfail { font-family: var(--f); }
.splash .sfail button { font-family: var(--f); border-radius: 999px; background: var(--p); }
.splash .sfail a { border-radius: 999px; }

/* ---------- pulpit: powitanie w karcie marki ---------- */
.dhero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: center; margin-bottom: 1rem; padding: 26px 28px; border-radius: 22px; color: #fff; background-color: #17152B; background-image: radial-gradient(55% 90% at 100% 0%, rgba(88, 70, 199, .55), transparent 70%), radial-gradient(40% 80% at 0% 100%, rgba(196, 181, 253, .14), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 22px 22px; box-shadow: 0 30px 60px -40px rgba(23, 21, 43, .8); }
.dh-ey { font: 600 12.5px/1 var(--f); color: var(--lav); }
.dhero h2 { margin: 10px 0 6px; font: 700 30px/1.1 var(--fh); letter-spacing: -.03em; color: #fff; }
.dhero p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; }
.dh-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dhero .btn { min-height: 40px; padding: 0 16px; border: 0; }
.dhero .btn.dh-p { background: var(--lav); color: #17152B; }
.dhero .btn.dh-p:hover { background: #D6CCFE; }
.dhero .btn.dh-g { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.dhero .btn.dh-g:hover { background: rgba(255, 255, 255, .16); }
.dh-ks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dh-k { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px 14px 13px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; text-align: left; cursor: pointer; transition: background .2s, transform .2s; }
.dh-k:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.dh-k .ms { font-size: 20px; color: var(--lav); margin-bottom: 6px; }
.dh-k b { font: 800 24px/1.1 var(--fh); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dh-k small { font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .65); }
@media (max-width: 1280px) { .dhero { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .dhero { padding: 20px 18px; border-radius: 18px; gap: 18px; }
  .dhero h2 { font-size: 24px; }
  .dh-ks { grid-template-columns: 1fr 1fr; }
  .dh-k b { font-size: 21px; }
  .dh-a .btn { flex: 1; justify-content: center; }
}
/* telefon: siatki kart z ukladem w stylu inline (np. 4 kolumny na pulpicie) ukladaja sie w jedna kolumne, bez poziomego scrolla */
@media (max-width: 760px) { .view .grid2, .view .cols { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- Dzisiaj (konto obiektu, insights.js) w stylu 2026 ---------- */
.view:has(.td-hero) { max-width: 1560px; margin-left: auto; margin-right: auto; }
.td-hero { border-radius: 22px !important; background-color: #17152B !important; background-image: radial-gradient(50% 120% at 100% 0%, rgba(88, 70, 199, .55), transparent 70%), radial-gradient(35% 90% at 0% 100%, rgba(196, 181, 253, .14), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) !important; background-size: 100% 100%, 100% 100%, 22px 22px !important; box-shadow: 0 30px 60px -40px rgba(23, 21, 43, .8); }
.td-hero::before, .td-hero::after { display: none !important; }
.td-hero h2 { font-family: var(--fh); font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important; letter-spacing: -.03em; }
.td-hero h2 b { color: var(--lav) !important; }
.td-stan.robi { background: rgba(196, 181, 253, .16) !important; color: #DCD2FE !important; }
.td-stan.ok { background: rgba(31, 157, 107, .18) !important; color: #9BE7C4 !important; }
.td-hero b { font-family: var(--fh); }
.th-ring .seg { stroke: var(--lav) !important; }
.tw-d.dzis i { background: linear-gradient(180deg, var(--lav), #5846C7) !important; }
.tw-d.dzis em { color: var(--lav) !important; }
/* kafelki */
.td-tiles { gap: .8rem; }
.td-tile { border: 1px solid var(--l) !important; border-radius: 18px !important; padding: 1rem 1.05rem !important; box-shadow: var(--sh); overflow: hidden; position: relative; }
.td-tile .kr { display: none !important; }
.td-tile .ic { width: 36px !important; height: 36px !important; border-radius: 12px !important; margin-bottom: .55rem !important; background: var(--ps) !important; color: var(--p) !important; }
.td-tile b { font-family: var(--fh); font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.03em; }
.td-tile .l { font-size: 13px !important; color: var(--t) !important; }
.td-tile:hover { border-color: #D6D0F5 !important; box-shadow: 0 18px 36px -24px rgba(23, 21, 43, .35) !important; }
.td-tile.on { background: #fff; }
.td-tile.on::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: currentColor; opacity: .9; }
.td-tile.on.t-przyj, .td-tile.on.t-wyj { color: var(--p) !important; }
.td-tile.on.t-kasa { color: #B4531C !important; }
.td-tile.on.t-kasa .ic { background: #FFF1E6 !important; color: #B4531C !important; }
.td-tile.on.t-sprz .ic { background: #FDF3DC !important; color: #9A6B00 !important; }
.td-tile.on.t-wiad .ic { background: #E2F6F8 !important; color: #0B7C88 !important; }
.td-tile.on.t-inte .ic { background: #FDECEE !important; color: #B42330 !important; }
.td-tile.pusto .ic { background: var(--bg) !important; color: var(--m2) !important; }
.td-tile.pusto b { color: var(--m2) !important; }
/* sekcje i wiersze */
.td-sec .ch .si { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
.td-sec.s-przyj .si, .td-sec.s-wyj .si { background: var(--ps) !important; color: var(--p) !important; }
.td-sec .ch .cnt { background: var(--ps) !important; color: var(--p) !important; }
.td-row { padding: .75rem 0 !important; }
.td-row .av { background: var(--ps) !important; color: var(--p) !important; font-family: var(--fh); }
.td-row .av.rm { background: var(--bg) !important; color: var(--t2) !important; }
.td-row .tx > b { font-size: 14px !important; }
.td-row .sel { border-radius: 999px !important; border-color: var(--l2) !important; padding: .4rem .8rem !important; }
.td-head h2 { font-family: var(--fh); }

/* ---------- KALENDARZ 2026 ---------- */
.calbar.mc { gap: .5rem; flex-wrap: wrap; }
.calbar.mc .zoom { display: inline-flex; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--l2); }
.calbar.mc .zoom button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: 600 12.5px/1 var(--f); color: var(--t2); cursor: pointer; transition: background .2s, color .2s; }
.calbar.mc .zoom button:hover { color: var(--t); background: var(--bg); }
.calbar.mc .zoom button.on { background: var(--t); color: #fff; }
.calbar.mc .today { border-radius: 999px !important; }
.calbar.mc .add { border-radius: 999px !important; }
.cal.mc { border-color: var(--l) !important; border-radius: 18px !important; }
/* naglowek dni: dzis, weekend, pasek oblozenia */
.cal.mc .h { position: sticky; }
.cal.mc .h b { font-family: var(--fh); font-size: 14px; }
.cal.mc .h .occ { display: block; width: 62%; max-width: 40px; height: 3px; margin-top: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--p) var(--o), #E9E7F2 var(--o)); }
.cal.mc .h.full .occ { background: #1F9D6B; }
.cal.mc .h.we { background: #FAF9FD; }
.cal.mc .h.td { background: var(--ps); }
.cal.mc .h.td b { color: #fff !important; background: var(--p) !important; border-radius: 8px !important; }
.cal.mc .c.we { background: #FBFAFE; }
.cal.mc .c.td { background: rgba(88, 70, 199, .05); }
/* wolne pole: plus po najechaniu = klik dodaje rezerwacje */
.cal.mc .c { position: relative; cursor: pointer; }
.cal.mc .c:hover::after { content: "+"; position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 8px; background: var(--ps); color: var(--p); font: 600 18px/1 var(--f); }
/* pokoje */
.cal.mc .rm b { font-family: var(--f); font-weight: 600; }
/* paski rezerwacji: jasne tlo statusu, mocny pasek z lewej, ciemny tekst */
.cal.mc .b { border-radius: 10px !important; border: 0 !important; box-shadow: 0 1px 2px rgba(23, 21, 43, .06) !important; background-image: none !important; padding: 0 10px 0 13px !important; }
.cal.mc .b::before { width: 4px !important; border-radius: 10px 0 0 10px !important; opacity: 1; }
.cal.mc .b > span { text-align: left !important; font-weight: 700; font-family: var(--f); letter-spacing: -.005em; }
.cal.mc .b .bm { font-style: normal; font-weight: 500; opacity: .75; margin-left: 6px; }
.cal.mc .b.paid { background-color: #E2F5EA !important; color: #125A33 !important; }
.cal.mc .b.paid::before { background: #1F9D6B !important; }
.cal.mc .b.dep { background-color: #FFEBDC !important; color: #87400F !important; }
.cal.mc .b.dep::before { background: #E8823F !important; }
.cal.mc .b.none { background-color: #FDE6E8 !important; color: #8F1F19 !important; }
.cal.mc .b.none::before { background: #D93A3A !important; }
.cal.mc .b.blk { background-color: #EFEEF4 !important; color: #5E5B71 !important; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(23, 21, 43, .05) 6px 12px) !important; }
.cal.mc .b.blk::before { background: #A5A2B8 !important; }
.cal.mc .b.conflict { box-shadow: 0 0 0 2px #D93A3A !important; }
.cal.mc .b:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(23, 21, 43, .35) !important; filter: none !important; }
.cal.mc .b .src { box-shadow: 0 0 0 1px rgba(23, 21, 43, .12) !important; }
/* legenda: kropki w tych samych kolorach co paski */
.calfoot .legend .dot.none { background: #D93A3A; }
.calfoot .legend .dot.dep { background: #E8823F; }
.calfoot .legend .dot.paid { background: #1F9D6B; }
.calfoot .legend .dot.blk { background: #A5A2B8; }
@media (max-width: 760px) {
  .calbar.mc .zoom { order: 5; width: 100%; justify-content: space-between; }
  .calbar.mc .zoom button { flex: 1; min-height: 36px; }
  .cal.mc .rm b { font-size: 12.5px; white-space: normal; line-height: 1.2; }
  .cal.mc .rm small { display: none; }
}

/* ---------- wspolny naglowek ekranow 2026 ---------- */
.lr-top { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.lr-top h2 { margin: 0; font: 700 26px/1.15 var(--fh); letter-spacing: -.03em; }
.lr-top p { margin: 4px 0 0; color: var(--m); font-size: 13.5px; }
.lr-top p b { color: var(--t); font-weight: 700; }
.lr-top p b.due { color: #B4531C; }
.lr-top .sp { flex: 1; }
.lr-top .btn { min-height: 40px; }

/* ---------- LISTA REZERWACJI ---------- */
.lr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.lr-q { position: relative; flex: 1 1 320px; max-width: 460px; }
.lr-q .ms { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--m2); font-size: 20px; pointer-events: none; }
.lr-q input { width: 100%; min-height: 44px; padding: 0 16px 0 44px !important; border-radius: 999px !important; border: 1px solid var(--l2) !important; background: #fff !important; font-size: 14px; }
.lr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--l2); background: #fff; font: 600 13px/1 var(--f); color: var(--t2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lr-chips button b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--m); font-size: 11.5px; }
.lr-chips button:hover { border-color: #C9C4DE; color: var(--t); }
.lr-chips button.on { background: var(--t); border-color: var(--t); color: #fff; }
.lr-chips button.on b { background: rgba(255, 255, 255, .16); color: #fff; }
.lr-f { display: flex; gap: 8px; margin-left: auto; }
.lr-f input, .lr-f select { min-height: 38px; border-radius: 999px !important; padding: 0 14px !important; background: #fff !important; }
.lr-t { background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: var(--sh); overflow: hidden; }
.lr-h, .lr-r { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(150px, 1fr) minmax(130px, 1fr) minmax(150px, .9fr) minmax(130px, .9fr) minmax(120px, .9fr); gap: 14px; align-items: center; padding: 12px 18px; }
.lr-h { padding-top: 11px; padding-bottom: 11px; background: #FBFAFE; border-bottom: 1px solid var(--l); font: 600 11.5px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--m2); }
.lr-h .n, .lr-r .n { text-align: right; justify-self: end; }
.lr-r { border-bottom: 1px solid #F0EEF6; cursor: pointer; transition: background .15s; }
.lr-r:last-child { border-bottom: 0; }
.lr-r:hover, .lr-r:focus-visible { background: #FAF9FE; outline: none; }
.lr-r.can { opacity: .6; }
.lr-r small { display: block; margin-top: 2px; color: var(--m); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-g { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lr-g > span { min-width: 0; }
.lr-g b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ps); color: var(--p); font: 700 13px/1 var(--fh); font-style: normal; }
.lr-d b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lr-dz { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--p); color: #fff; font: 700 10.5px/1.4 var(--f); font-style: normal; vertical-align: 1px; }
.lr-p { color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-k { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.lr-k b { font-weight: 700; font-variant-numeric: tabular-nums; }
.lr-pb { display: block; width: 90px; height: 4px; margin-top: 5px; border-radius: 4px; background: #EFEDF5; overflow: hidden; }
.lr-pb > i { display: block; height: 100%; border-radius: 4px; background: #1F9D6B; }
.lr-r.dep .lr-pb > i { background: #E8823F; }
.lr-z { min-width: 0; }
.lz { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 8px; font: 600 11.5px/1.2 var(--f); background: var(--bg); color: var(--t2); }
.lz.bk { background: #E8EEFA; color: #003580; }
.lz.ab { background: #FFECEC; color: #D9383F; }
.lz.st { background: var(--ps); color: var(--p); }
.lr-u { display: flex !important; align-items: center; gap: 4px; }
.lr-u .ms { font-size: 14px; color: var(--m2); }
.lr-pusto { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 20px; background: #fff; border: 1px dashed var(--l2); border-radius: 18px; text-align: center; color: var(--m); }
.lr-pusto .ms { font-size: 34px; color: var(--p); background: var(--ps); padding: 12px; border-radius: 16px; margin-bottom: 6px; }
.lr-pusto b { color: var(--t); font-size: 15px; }
@media (max-width: 1100px) {
  .lr-h { display: none; }
  .lr-t { background: none; border: 0; box-shadow: none; display: grid; gap: 10px; overflow: visible; }
  .lr-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "g k" "d s" "p z"; gap: 8px 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--l) !important; border-radius: 16px; box-shadow: var(--sh); }
  .lr-g { grid-area: g; } .lr-k { grid-area: k; } .lr-d { grid-area: d; } .lr-s { grid-area: s; justify-self: end; } .lr-p { grid-area: p; font-size: 12.5px; } .lr-z { grid-area: z; justify-self: end; }
  .lr-z .lr-u { display: none !important; }
  .lr-f { margin-left: 0; }
}
@media (max-width: 640px) {
  .lr-top h2 { font-size: 22px; }
  .lr-top .btn { flex: 1; justify-content: center; }
  .lr-q { max-width: none; flex-basis: 100%; }
  .lr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .lr-chips::-webkit-scrollbar { display: none; }
  .lr-chips button { flex: none; }
  .lr-f { width: 100%; } .lr-f select, .lr-f input { flex: 1; min-width: 0; }
}

/* ---------- SZABLONY WIADOMOSCI ---------- */
.sz-g { display: grid; grid-template-columns: 250px minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sz-l { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: var(--sh); position: sticky; top: 76px; }
.sz-l button { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; color: var(--t); transition: background .15s; }
.sz-l button:hover { background: var(--bg); }
.sz-l button.on { background: var(--ps); box-shadow: inset 3px 0 0 var(--p); }
.sz-l button > .ms { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--m); font-size: 18px; }
.sz-l button.on > .ms { background: var(--p); color: #fff; }
.sz-l b { display: block; font-size: 13.5px; font-weight: 600; }
.sz-l small { display: block; font-size: 11.5px; color: var(--m); margin-top: 1px; }
.sz-l em { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: #E6F6EE; color: #17804A; font: 700 10px/1.4 var(--f); font-style: normal; }
.sz-e textarea { font: 400 14px/1.6 var(--f) !important; min-height: 280px; }
.sz-pola { display: grid; gap: 10px; margin-top: 6px; }
.sz-pola b { display: block; margin-bottom: 6px; font: 600 11.5px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--m2); }
.sz-pola button { margin: 0 6px 6px 0; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px dashed #CFC8F3; background: #FBFAFF; color: var(--p); font: 600 12px/1 var(--f); cursor: pointer; }
.sz-pola button:hover { background: var(--ps); border-style: solid; }
.sz-pv { position: sticky; top: 76px; }
.sz-pvl { display: block; margin: 2px 0 8px; font: 600 11.5px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--m2); }
.sz-mail { padding: 18px 20px 22px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: 0 30px 60px -44px rgba(23, 21, 43, .5); }
.sz-mh { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--l); }
.sz-mh b { display: block; font-size: 13.5px; }
.sz-mh small { color: var(--m); font-size: 12px; }
.sz-subj { display: block; margin-bottom: 10px; font: 700 16px/1.3 var(--fh); }
.sz-body { font-size: 14px; line-height: 1.65; color: var(--t2); word-wrap: break-word; }
.sz-body mark, .sz-subj mark { padding: 0 3px; border-radius: 4px; background: #FDECEE; color: #B42330; }
.sz-body mark.ok, .sz-subj mark.ok { background: var(--ps); color: var(--p); }
@media (max-width: 1200px) { .sz-g { grid-template-columns: 230px minmax(0, 1fr); } .sz-pv { grid-column: 2; position: static; } }
@media (max-width: 760px) {
  .sz-g { grid-template-columns: minmax(0, 1fr); }
  .sz-l { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .sz-l button { flex: none; }
  .sz-l small, .sz-l em { display: none; }
  .sz-pv { grid-column: auto; }
}

/* ---------- GOSCIE I CRM (growth.js): nowy wyglad bez zmian logiki ---------- */
.kp4 { gap: 12px !important; }
.kp4 .stat { background: #fff; border: 1px solid var(--l); border-radius: 18px; padding: 16px !important; box-shadow: var(--sh); }
.kp4 .stat b { font-family: var(--fh); font-size: 22px; letter-spacing: -.02em; }
.bar2 { gap: 10px !important; }
.bar2 .q { border-radius: 999px !important; background: #fff !important; border: 1px solid var(--l2) !important; }
.bar2 .q input { font-size: 14px; }
.chips2 button { border-radius: 999px !important; min-height: 36px; font-weight: 600 !important; }
.chips2 button.on { background: var(--t) !important; border-color: var(--t) !important; color: #fff !important; }
.chips2 button.on b { color: var(--lav) !important; }
.bar2 select { border-radius: 999px !important; }
table.t.crm tbody tr { cursor: pointer; transition: background .15s; }
table.t.crm tbody tr:hover { background: #FAF9FE; }
table.t.crm td b { font-weight: 600; }
table.t th { font: 600 11.5px/1 var(--f) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--m2) !important; background: #FBFAFE; }
@media (max-width: 760px) { .sz-e textarea { font-size: 16px !important; } }

/* ---------- KLIENCI ---------- */
.kl-t .lr-h, .kl-t .lr-r { grid-template-columns: minmax(220px, 1.6fr) minmax(200px, 1.4fr) 80px 120px 130px 130px; }
.kl-ret { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #E6F6EE; color: #17804A; font: 700 10.5px/1.4 var(--f); font-style: normal; vertical-align: 1px; }
.kl-k { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kl-k a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--t2); font-size: 13px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-k a:hover { color: var(--p); }
.kl-k .ms { font-size: 15px; color: var(--m2); }
.kl-n b, .kl-v b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kl-l { color: var(--t2); font-variant-numeric: tabular-nums; }
.kl-wiecej { display: flex; justify-content: center; margin-top: 14px; }
@media (max-width: 1100px) {
  .kl-t .lr-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "g v" "k n" "l x"; }
  .kl-t .lr-g { grid-area: g; } .kl-t .kl-v { grid-area: v; } .kl-t .kl-k { grid-area: k; } .kl-t .kl-n { grid-area: n; }
  .kl-t .kl-l { grid-area: l; font-size: 12.5px; } .kl-t .kl-x { grid-area: x; justify-self: end; }
  .kl-t .kl-n b::after { content: " pob."; font-weight: 500; color: var(--m); }
  .kl-t .kl-l::before { content: "Ostatni: "; color: var(--m); }
}

/* ---------- banery konta (okres testowy, RODO): kompaktowe, w palecie ---------- */
.trial { margin: .8rem 1.4rem 0 !important; padding: .6rem .8rem .6rem 1rem !important; border-radius: 14px !important; background: #fff !important; border: 1px solid var(--l) !important; color: var(--t2) !important; box-shadow: var(--sh); font-size: 13px !important; }
.trial > .ms { color: var(--p) !important; }
.trial span { text-align: left; }
.trial.dpa { background: var(--ps) !important; border-color: #DCD5FA !important; }
.trial .btn.sm, .trial a.btn, .trial button:not(.x) { border-radius: 999px !important; }

/* ---------- SILNIK NA STRONIE ---------- */
.ewh { margin-bottom: 1.2rem; }
.ewh-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #F59E9E; box-shadow: 0 0 0 4px rgba(245, 158, 158, .18); vertical-align: 1px; }
.ewh-dot.on { background: #6EE7B7; box-shadow: 0 0 0 4px rgba(110, 231, 183, .2); animation: ewhPuls 2s infinite; }
@keyframes ewhPuls { 50% { box-shadow: 0 0 0 7px rgba(110, 231, 183, .05); } }
.ewh-url { display: flex; align-items: center; gap: 8px; max-width: 560px; margin-top: 16px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ewh-url > .ms { color: var(--lav); font-size: 18px; }
.ewh-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; color: #fff; }
.ewh-url button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--lav); color: #17152B; font: 600 12.5px/1 var(--f); cursor: pointer; }
.ewh-url button .ms { font-size: 16px; }
.ewh .dh-k { cursor: default; }
.ewh .dh-k:hover { transform: none; }
/* podglad: przelacznik tla i ramka */
.wg-tlo { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--l2); }
.wg-tlo button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 600 12px/1 var(--f); color: var(--t2); cursor: pointer; }
.wg-tlo button.on { background: var(--t); color: #fff; }
.wg-frame { border-radius: 18px !important; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(23, 21, 43, .45) !important; border: 1px solid var(--l) !important; }
.wg-chrome { background: #F4F3FA !important; }
.wg-cfg { border-radius: 18px !important; }
.wg-cfg .seg2 button.on, .wg-dev button.on { background: var(--t) !important; color: #fff !important; }
.funnel > div i { background: linear-gradient(90deg, var(--p), var(--lav)) !important; border-radius: 6px !important; height: 8px !important; }
@media (max-width: 760px) {
  .ewh-url { max-width: none; }
  .ewh .dh-a .btn { flex: 1 1 100%; }
  .wg-tlo { width: 100%; } .wg-tlo button { flex: 1; }
}
.ewh-url code { background: none !important; padding: 0 !important; border: 0 !important; color: #fff !important; }
.trial > span, .trial span:not(.ms) { text-align: left !important; }

/* ---------- OFERTY I PLANY CENOWE: karty ---------- */
#rtZap.pulse { animation: rtPuls 1.6s infinite; }
@keyframes rtPuls { 50% { box-shadow: 0 0 0 6px rgba(88, 70, 199, .18); } }
.of-szb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.of-szb > span { font: 600 12.5px/1 var(--f); color: var(--m); margin-right: 4px; }
.of-szb button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px dashed #CFC8F3; background: #fff; font: 600 13px/1 var(--f); color: var(--t); cursor: pointer; transition: background .2s, border-color .2s; }
.of-szb button .ms { font-size: 16px; color: var(--p); }
.of-szb button b { color: var(--p); font-weight: 700; }
.of-szb button:hover { background: var(--ps); border-style: solid; }
.of-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px; }
.of-k { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: var(--sh); overflow: hidden; transition: opacity .2s, border-color .2s; }
.of-k.pol { border-color: var(--p); box-shadow: 0 0 0 3px rgba(88, 70, 199, .12), var(--sh); }
.of-k.off { opacity: .6; }
.of-k header { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 12px; border-bottom: 1px solid var(--l); }
.of-n { flex: 1; min-width: 0; display: grid; gap: 4px; }
.of-n input { width: 100%; border: 0 !important; background: none !important; padding: 2px 0 !important; box-shadow: none !important; font: 700 17px/1.3 var(--fh) !important; color: var(--t); border-radius: 0 !important; }
.of-n input.d { font: 400 13px/1.4 var(--f) !important; color: var(--m); }
.of-n input:focus { background: var(--bg) !important; border-radius: 8px !important; padding: 2px 6px !important; }
.of-a { display: flex; align-items: center; gap: 8px; }
.of-pol, .of-del { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--bg); color: var(--m2); cursor: pointer; }
.of-pol.on { background: #FFF4DA; color: #D89A00; }
.of-pol.on .ms { font-variation-settings: 'FILL' 1; }
.of-del:hover { background: #FDECEE; color: #B42330; }
.of-b { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 16px; }
.of-f { display: grid; gap: 7px; align-content: start; min-width: 0; }
.of-f.w { grid-column: 1 / -1; }
.of-f > label { font: 600 11.5px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--m2); }
.of-f small { color: var(--m); font-size: 12.5px; }
.of-f small b { color: var(--t); }
.of-st { display: inline-flex; align-items: center; width: max-content; border: 1px solid var(--l2); border-radius: 999px; background: #fff; overflow: hidden; }
.of-st button { width: 36px; height: 36px; border: 0; background: none; font: 600 18px/1 var(--f); color: var(--p); cursor: pointer; }
.of-st button:hover { background: var(--ps); }
.of-st input { width: 54px !important; border: 0 !important; background: none !important; text-align: center; font: 700 15px/1 var(--fh) !important; padding: 0 !important; box-shadow: none !important; -moz-appearance: textfield; }
.of-st input::-webkit-inner-spin-button { -webkit-appearance: none; }
.of-st span { color: var(--m); margin-right: 4px; font-weight: 600; }
.of-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--bg); width: max-content; max-width: 100%; }
.of-seg button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: none; font: 600 12.5px/1 var(--f); color: var(--t2); cursor: pointer; }
.of-seg button.on { background: #fff; color: var(--p); box-shadow: 0 1px 3px rgba(23, 21, 43, .12); }
.of-dni { width: 52px !important; min-height: 28px !important; padding: 0 6px !important; text-align: center; border-radius: 8px !important; }
.of-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.of-ch button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--l2); background: #fff; font: 600 12.5px/1 var(--f); color: var(--t2); cursor: pointer; }
.of-ch button.on { background: var(--p); border-color: var(--p); color: #fff; }
.of-k footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding: 12px 16px; background: #FBFAFE; border-top: 1px solid var(--l); font-size: 12.5px; }
.of-gl { color: var(--m2); font-weight: 600; }
.of-pv { color: var(--t2); }
.of-pv b { color: var(--t); }
.of-pv em { margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--p); color: #fff; font: 700 10.5px/1.5 var(--f); font-style: normal; }
@media (max-width: 760px) { .of-g { grid-template-columns: minmax(0, 1fr); } .of-b { grid-template-columns: 1fr; } .of-seg { width: 100%; } .of-seg button { flex: 1; } }

/* ---------- PRZELEWY24: oficjalny partner ---------- */
.p24k { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 20px 22px; border-radius: 20px; background: linear-gradient(135deg, #fff 0%, #FFF5F5 100%); border: 1px solid #F6D3D6; box-shadow: var(--sh); }
.p24-l { display: flex; gap: 16px; align-items: flex-start; flex: 1 1 420px; }
.p24-logo { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; background: #D13239; color: #fff; font: 800 16px/1 var(--fh); letter-spacing: -.02em; }
.p24-ey { display: inline-block; margin-bottom: 4px; padding: 3px 9px; border-radius: 999px; background: #D13239; color: #fff; font: 700 10.5px/1.4 var(--f); letter-spacing: .03em; }
.p24k h3 { margin: 2px 0 4px; font: 700 20px/1.2 var(--fh); }
.p24k p { margin: 0; color: var(--t2); font-size: 13.5px; line-height: 1.55; max-width: 620px; }
.p24-a { display: flex; flex-wrap: wrap; gap: 8px; }
.p24-a .btn.p { background: #D13239; border-color: #D13239; box-shadow: 0 10px 22px -14px rgba(209, 50, 57, .9); }
.p24-a .btn.p:hover { background: #B42330; border-color: #B42330; }
.paygrid .card { border-radius: 18px; }

/* ---------- KODY PROMOCYJNE ---------- */
.pmo-karta, .pmo-k { border-radius: 20px !important; }
.trial > span:not(.ms) { display: block !important; flex: 1 1 auto !important; margin: 0 !important; min-width: 0; }
.of-seg { display: inline-flex !important; width: auto !important; }

/* ---------- CENY: cennik ---------- */
.pgrid .pcell input { border-radius: 10px !important; font: 700 14px/1 var(--fh) !important; transition: background .15s, border-color .15s, box-shadow .15s; }
.pgrid .pcell.up input { background: #F1EDFF !important; color: #4938AF !important; border-color: #DCD5FA !important; }
.pgrid .pcell.dn input { background: #E8F7EF !important; color: #17804A !important; border-color: #C9ECD9 !important; }
.pgrid .pcell.bk { position: relative; }
.pgrid .pcell.bk::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 3px; margin-left: -7px; border-radius: 3px; background: var(--p); opacity: .55; pointer-events: none; }
.pgrid .pcell input:focus { background: #fff !important; border-color: var(--p) !important; box-shadow: 0 0 0 4px rgba(88, 70, 199, .14) !important; }
.pgrid .ph2.td b { color: #fff; background: var(--p); border-radius: 8px; padding: 1px 6px; }
.pgrid .prm { font-weight: 600; }
.pgrid .prm small { font-weight: 500; }
.view .card:has(.pgrid) { border-radius: 18px; }
.view .card:has(.pgrid)::after { content: "Fiolet: cena wyższa od bazowej · zieleń: niższa · kreska pod ceną: dzień zajęty"; display: block; padding: 10px 18px 14px; color: var(--m); font-size: 12px; }

/* ---------- CENY: uslugi dodatkowe w siatce kart ---------- */
.view .card:has(.svcard) { max-width: none !important; }
.view .card:has(.svcard) > .cb { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.view .card:has(.svcard) > .cb > :not(.svcard) { grid-column: 1 / -1; }
.svcard { margin: 0 !important; border-radius: 18px !important; border: 1px solid var(--l) !important; background: #fff; box-shadow: var(--sh); transition: border-color .2s, box-shadow .2s; }
.svcard:hover { border-color: #D6D0F5 !important; box-shadow: 0 18px 36px -26px rgba(23, 21, 43, .35); }
.svcard .hd input { font: 700 15px/1.3 var(--fh) !important; }
.svcimg { border-radius: 14px !important; }
@media (max-width: 760px) { .view .card:has(.svcard) > .cb { grid-template-columns: minmax(0, 1fr); } }
.view .card:has(.svcard) > .cb > .btn.p:last-child, .view .card:has(.svcard) > .cb > .btn.w:last-child { position: sticky; bottom: 14px; z-index: 5; box-shadow: 0 16px 34px -14px rgba(88, 70, 199, .7); }
.au-sel { width: auto !important; flex: none !important; min-width: 140px; max-width: 200px; }
.row > .lbl { flex: 1 1 auto; min-width: 0; }
/* marketing: kafelki integracji i automatow */
.au-grid > *, .kx-card, .mk-st > * { border-radius: 16px !important; }
.btn, a.btn, .btn:hover, .trial a.btn, .p24-a a { text-decoration: none !important; }

/* ---------- MARKETING: SLEDZENIE I KONWERSJE ---------- */
.mk2 .lr-top p { max-width: 720px; }
.mk-pas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: var(--sh); }
.mk-prog { display: flex; align-items: center; gap: 16px; flex: 1 1 320px; }
.mk-prog b { display: block; font: 800 22px/1 var(--fh); letter-spacing: -.02em; }
.mk-prog small { display: block; margin-top: 3px; color: var(--m); font-size: 12.5px; white-space: nowrap; }
.mk-bar { display: block; flex: 1; max-width: 280px; height: 8px; border-radius: 8px; background: var(--ps); overflow: hidden; }
.mk-bar > i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--p), var(--lav)); transition: width .4s; }
.mk-akc { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-akc .btn.ic { width: 40px; padding: 0; justify-content: center; }
/* kafelki narzedzi = zakladki */
.mk-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.mk-t { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--l); border-radius: 18px; background: #fff; text-align: left; cursor: pointer; box-shadow: var(--sh); transition: border-color .2s, box-shadow .2s, transform .2s; font-family: var(--f); }
.mk-t:hover { transform: translateY(-2px); border-color: #D6D0F5; }
.mk-t.on { border-color: var(--p); box-shadow: 0 0 0 3px rgba(88, 70, 199, .14), var(--sh); }
.mk-tt { min-width: 0; }
.mk-tt b { display: block; font: 700 13.5px/1.25 var(--f); color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tt small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--m); }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; background: #CFCBE0; flex: none; }
.mk-dot.paid { background: #1F9D6B; box-shadow: 0 0 0 3px rgba(31, 157, 107, .15); }
.mk-dot.dep { background: #E8A13A; }
.mk-dot.none { background: #D93A3A; }
.mk-lg { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
.mk-lg svg { width: 22px; height: 22px; }
.mk-lg.big { width: 54px; height: 54px; border-radius: 16px; }
.mk-lg.big svg { width: 28px; height: 28px; }
/* panel wybranego narzedzia */
.mk-p { display: none; margin-bottom: 16px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: var(--sh); overflow: hidden; }
.mk-p.on { display: block; animation: mkIn .3s ease both; }
@keyframes mkIn { from { opacity: 0; transform: translateY(6px); } }
.mk-ph { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--l); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 60%); }
.mk-ph > div { flex: 1; min-width: 0; }
.mk-ph h3 { margin: 0; font: 700 18px/1.25 var(--fh); }
.mk-ph p { margin: 3px 0 0; color: var(--m); font-size: 13px; line-height: 1.5; max-width: 760px; }
.mk-pg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mk-pf, .mk-pk { position: relative; padding: 18px 20px 20px 58px; }
.mk-pk { border-left: 1px solid var(--l); background: #FCFBFE; }
.mk-kr { position: absolute; left: 20px; top: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--p); color: #fff; font: 800 12px/1 var(--fh); }
.mk-pk .mk-kr { background: var(--ps); color: var(--p); }
.mk-p h4 { margin: 2px 0 12px; font: 700 14px/1.3 var(--fh); }
.mk-pf .f { margin-bottom: 10px; }
.mk-pk .tp-guide { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.mk-pk .tp-guide > b { display: none; }
.mk-pk .tp-guide ol { margin: 0 !important; padding-left: 18px !important; display: grid; gap: 8px; font-size: 13px; line-height: 1.55; color: var(--t2); }
.mk-srv { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg); color: var(--t2); font-size: 12.5px; }
.mk-srv .ms { color: var(--p); }
.mk-csv { margin-top: 6px; }
.mk-pe { padding: 16px 20px 20px; border-top: 1px solid var(--l); }
.mk-pe h4 { margin-bottom: 10px; }
.mk-pe ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; counter-reset: mke; }
.mk-pe li { counter-increment: mke; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 12.5px; color: var(--t2); }
.mk-pe li span::before { content: counter(mke) ". "; color: var(--m2); font-weight: 700; }
.mk-pe code { align-self: flex-start; padding: 2px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--l); color: var(--c); font: 600 11.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
/* dol: zrodla, zgoda, dziennik */
.mk-dol { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mk-src { display: grid; gap: 10px; }
.mk-sr { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.2fr) auto; gap: 14px; align-items: center; }
.mk-sr b { display: block; font-size: 13.5px; }
.mk-sr small { display: block; color: var(--m); font-size: 12px; }
.mk-sb { height: 8px; border-radius: 8px; background: var(--ps); overflow: hidden; }
.mk-sb > i { display: block; height: 100%; border-radius: 8px; background: var(--p); }
.mk-sr > span { text-align: right; font: 700 13.5px/1.2 var(--fh); }
.mk-sr > span small { font: 500 11.5px var(--f); }
.mk-pusto { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px; text-align: center; color: var(--m); font-size: 13px; }
.mk-pusto .ms { font-size: 28px; color: var(--p); background: var(--ps); padding: 10px; border-radius: 14px; }
.mk-pusto b { color: var(--t); }
.mk-mapa { margin-top: 16px; }
.mk-mapa summary { display: flex; align-items: center; gap: 8px; padding: 16px 20px; cursor: pointer; font: 700 14px/1.3 var(--fh); list-style: none; }
.mk-mapa summary::-webkit-details-marker { display: none; }
.mk-mapa summary::after { content: "expand_more"; font-family: "Material Symbols Outlined"; margin-left: auto; color: var(--m); font-size: 22px; transition: transform .2s; }
.mk-mapa[open] summary::after { transform: rotate(180deg); }
.mk-mapa summary .ms { color: var(--p); }
.mk-mapa .tw { padding: 0 16px 16px; }
@media (max-width: 1200px) { .mk-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-dol { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .mk-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem 14px; padding: 2px 1rem; }
  .mk-tabs::-webkit-scrollbar { display: none; }
  .mk-t { flex: 0 0 200px; }
  .mk-pg { grid-template-columns: minmax(0, 1fr); }
  .mk-pk { border-left: 0; border-top: 1px solid var(--l); }
  .mk-pf, .mk-pk { padding: 16px 16px 18px 52px; }
  .mk-kr { left: 16px; }
  .mk-ph { flex-wrap: wrap; padding: 16px; }
  .mk-sr { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-sb { grid-column: 1 / -1; grid-row: 2; }
  .mk-akc .btn:not(.ic) { flex: 1; justify-content: center; }
}
@media (max-width: 760px) { .mk-ph { justify-content: space-between; } .mk-ph > div { flex: 1 1 100%; order: 3; } .mk-ph h3 { font-size: 17px; } }

/* ---------- MARKETING: PORZUCONE REZERWACJE I AUTOMATY ---------- */
.au-st { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--l2); font: 600 13px/1 var(--f); color: var(--m); }
.au-st i { width: 8px; height: 8px; border-radius: 50%; background: #CFCBE0; }
.au-st.on { background: #E6F6EE; border-color: #C9ECD9; color: #17804A; }
.au-st.on i { background: #1F9D6B; box-shadow: 0 0 0 3px rgba(31, 157, 107, .18); }
.au2 .lr-top .btn[disabled] { opacity: .55; }
.au-w2 { border-radius: 16px !important; margin-bottom: 14px !important; font-size: 13px; }
.au-ks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.au-k { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: var(--sh); }
.au-k b { display: block; font: 800 22px/1.1 var(--fh); letter-spacing: -.02em; }
.au-k small { display: block; margin-top: 2px; color: var(--m); font-size: 12px; }
.au-ki { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.au-ki .ms { font-size: 22px; }
.au-ki.big { width: 54px; height: 54px; border-radius: 16px; }
.au-ki.big .ms { font-size: 28px; }
.au-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.au-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--l2); background: #fff; font: 600 13px/1 var(--f); color: var(--t2); cursor: pointer; }
.au-tabs button .ms { font-size: 18px; color: var(--m2); }
.au-tabs button b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--m); font-size: 11.5px; }
.au-tabs button.on { background: var(--t); border-color: var(--t); color: #fff; }
.au-tabs button.on .ms { color: var(--lav); }
.au-tabs button.on b { background: rgba(255, 255, 255, .16); color: #fff; }
.au-p { margin-bottom: 16px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: var(--sh); overflow: hidden; }
.au-pad { padding: 18px 20px; }
.au-p .tw { padding: 6px 12px 12px; }
/* os czasu odzyskiwania */
.au-os { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 18px; }
.au-os.off { opacity: .6; }
.au-kr { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0 8px; padding: 16px; border: 1px solid var(--l); border-radius: 16px; background: #FCFBFE; }
.au-kr::after { content: ""; position: absolute; right: -17px; top: 34px; width: 18px; height: 2px; background: var(--l2); }
.au-kr:last-child::after { display: none; }
.au-kr header { display: flex; align-items: center; gap: 10px; }
.au-kr h4 { margin: 0; font: 700 14.5px/1.25 var(--fh); }
.au-n0 { position: absolute; top: -9px; left: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font: 800 11px/1 var(--fh); box-shadow: 0 0 0 3px #fff; }
.au-kr > p { margin: 0; color: var(--m); font-size: 12.5px; line-height: 1.5; }
.au-kb { display: grid; gap: 8px; margin-top: 2px; }
.au-rw { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 600 13px/1.3 var(--f); color: var(--t); }
.au-sm { color: var(--m); font-size: 12px; line-height: 1.45; }
.au-kns { display: flex; flex-wrap: wrap; gap: 6px; }
.au-kn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--l2); font: 600 12.5px/1 var(--f); color: var(--m); cursor: pointer; }
.au-kn.on { border-color: color-mix(in srgb, var(--c, #5846C7) 40%, #fff); color: var(--t); }
.au-kn.st { padding-right: 10px; cursor: default; }
.au-kn .ms { font-size: 16px; }
.au-kn .sw { transform: scale(.8); }
.au-pv { align-self: flex-start; margin-top: auto; }
.au2 .au-num { display: inline-flex; align-items: center; gap: 4px; }
.au2 .au-n { width: 62px !important; min-height: 34px; text-align: center; padding: 0 6px !important; border-radius: 10px !important; }
.au2 .au-sel { min-height: 34px; border-radius: 10px !important; }
.au-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px; border-top: 1px solid var(--l); background: #FBFAFE; color: var(--t2); font-size: 12.5px; }
.au-pf .ms { color: var(--p); }
.au-pf .btn { margin-left: auto; }
.au-run { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 18px; color: var(--m); font-size: 12px; }
.mk-pas .au-run { padding: 0; }
.au-2k { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* droga goscia (automaty) */
.au-droga { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.au-dt { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--l); border-radius: 18px; background: #fff; text-align: left; cursor: pointer; box-shadow: var(--sh); font-family: var(--f); transition: border-color .2s, box-shadow .2s, transform .2s; }
.au-dt:hover { transform: translateY(-2px); border-color: #D6D0F5; }
.au-dt.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent), var(--sh); }
.au-dt:not(.wl) .au-ki { filter: grayscale(.6); opacity: .75; }
.au-dtt { min-width: 0; }
.au-dtt b { display: block; font: 700 13.5px/1.25 var(--f); color: var(--t); }
.au-dtt small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--m); font-size: 12px; }
.au-str { position: absolute; right: -15px; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--m2); font-size: 20px !important; background: var(--bg); border-radius: 50%; }
.au-ap .mk-ph { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 8%, #fff), #fff 60%); }
.au-ap .mk-ph .sw { margin-left: auto; }
.au-info { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--m); font-size: 12.5px; }
.au-info .ms { color: var(--c); }
.au-ap .mk-pk .btn { margin-bottom: 10px; }
@media (max-width: 1200px) { .au-os { grid-template-columns: 1fr 1fr; gap: 16px 0; } .au-kr:nth-child(2)::after { display: none; } .au-droga { grid-template-columns: 1fr 1fr; } .au-str { display: none; } }
@media (max-width: 760px) {
  .au-ks { grid-template-columns: 1fr 1fr; }
  .au-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .au-tabs button { flex: none; }
  .au-os { grid-template-columns: minmax(0, 1fr); padding: 14px 10px; gap: 16px; }
  .au-kr::after { display: none; }
  .au-2k { grid-template-columns: 1fr; }
  .au-droga { grid-template-columns: minmax(0, 1fr); }
  .au2 .lr-top .btn { flex: 1; justify-content: center; }
  .au-pf .btn { margin-left: 0; }
}
.au2 .lr-top > div:first-child { flex: 1 1 420px; min-width: 0; }
.au-ap .au-rw { justify-content: flex-start; gap: 6px 8px; }

/* ---------- FINANSE: STATYSTYKI I RAPORTY ---------- */
.stt-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--l2); }
.stt-seg button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: none; font: 600 12.5px/1 var(--f); color: var(--t2); cursor: pointer; }
.stt-seg button.on { background: var(--t); color: #fff; }
.stt-wl { display: flex; gap: 10px; margin: -4px 0 14px; }
.stt-wl label { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--f); color: var(--m); }
.stt-wl input { width: auto !important; min-height: 38px; }
.stt-ks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.au-k.st6 { align-items: flex-start; }
.au-k.st6 em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--m2); }
.stt-ch .cb { padding-top: 6px; }
.stt-bars { display: flex; align-items: flex-end; gap: 10px; height: 230px; padding-top: 22px; }
.stt-b { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.stt-b i { display: block; width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: #DCD5FA; transition: background .2s; }
.stt-b:hover i { background: #B9ADF4; }
.stt-b.on i { background: linear-gradient(180deg, var(--p), #7C6AE0); }
.stt-b small { margin-top: 8px; font-size: 11px; color: var(--m); white-space: nowrap; }
.stt-v { margin-bottom: 4px; font: 700 11px/1 var(--fh); color: var(--t2); min-height: 11px; }
.stt-d { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--c); vertical-align: 0; }
.stt-w { display: grid; gap: 0; }
.stt-wr { display: grid; grid-template-columns: 36px auto 1fr; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--l); }
.stt-wr:last-child { border-bottom: 0; }
.stt-wr .ms { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ps); color: var(--p); font-size: 19px; }
.stt-wr b { font: 700 16px/1.2 var(--fh); white-space: nowrap; }
.stt-wr small { color: var(--m); font-size: 12.5px; }
/* szybkie zakresy dat w raportach */
.rp-szyb { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.rp-szyb button { min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--l2); background: #fff; font: 600 12.5px/1 var(--f); color: var(--t2); cursor: pointer; }
.rp-szyb button.on { background: var(--t); border-color: var(--t); color: #fff; }
@media (max-width: 1280px) { .stt-ks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .stt-ks { grid-template-columns: 1fr 1fr; }
  .stt-seg { width: 100%; overflow-x: auto; } .stt-seg button { flex: 1; padding: 0 8px; }
  .stt-bars { gap: 4px; height: 180px; } .stt-b small { font-size: 9.5px; transform: rotate(-35deg); transform-origin: top center; margin-top: 12px; } .stt-v { display: none; }
  .stt-wl { flex-wrap: wrap; }
  .rp-szyb { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .rp-szyb button { flex: none; }
}
.au-k.st6 b { font-size: clamp(17px, 1.45vw, 21px); white-space: nowrap; }
.au-k.st6 { padding: 14px 12px; gap: 10px; }

/* ---------- OBIEKT: POKOJE (zwijane karty) ---------- */
.rm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--m); font-size: 13px; }
.rm-bar > span { margin-right: auto; }
.rm-bar b { color: var(--t); }
.rmlist > .rmcard { position: relative; padding: 0 0 18px; border-radius: 20px; border: 1px solid var(--l); box-shadow: var(--sh); overflow: hidden; margin-bottom: 12px; }
.rmlist > .rmcard > :not(.rm-sum) { margin-left: 18px; margin-right: 18px; }
.rmlist > .rmcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rc, var(--p)); }
.rm-sum { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 36px; align-items: center; gap: 14px; width: 100%; padding: 14px 18px 14px 22px; margin-bottom: 14px; border: 0; border-bottom: 1px solid var(--l); background: linear-gradient(90deg, color-mix(in srgb, var(--rc, #5846C7) 8%, #fff), #fff 55%); text-align: left; font-family: var(--f); cursor: pointer; }
.rm-sf { display: grid; place-items: center; width: 64px; height: 48px; border-radius: 12px; background: var(--bg) center / cover no-repeat; color: var(--m2); }
.rm-st { min-width: 0; }
.rm-st b { display: block; font: 700 15.5px/1.25 var(--fh); color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-st small, .rm-sc small { display: block; margin-top: 3px; color: var(--m); font-size: 12.5px; }
.rm-sc { text-align: right; }
.rm-sc b { font: 800 16px/1.1 var(--fh); color: var(--t); white-space: nowrap; }
.rm-sx { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--l2); color: var(--m); transform: rotate(180deg); transition: transform .2s; }
.rmcard.zw { padding-bottom: 0; }
.rmcard.zw > :not(.rm-sum) { display: none !important; }
.rmcard.zw .rm-sum { margin-bottom: 0; border-bottom: 0; }
.rmcard.zw .rm-sx { transform: none; }
.rmcard.zw:hover { border-color: #D6D0F5; }
@media (max-width: 760px) {
  .rm-sum { grid-template-columns: 52px minmax(0, 1fr) 32px; gap: 10px; padding: 12px 12px 12px 16px; }
  .rm-sf { width: 52px; height: 42px; }
  .rm-sc { grid-column: 2; grid-row: 2; text-align: left; margin-top: -6px; }
  .rm-sc b { font-size: 14px; } .rm-sc small { display: inline; margin-left: 4px; }
  .rm-sx { grid-column: 3; grid-row: 1 / 3; width: 32px; height: 32px; }
  .rmlist > .rmcard > :not(.rm-sum) { margin-left: 12px; margin-right: 12px; }
  .rm-bar > span { flex: 1 1 100%; }
  .rm-bar .btn { flex: 1; justify-content: center; }
}

/* ---------- OBIEKT: UDOGODNIENIA ---------- */
.fc-szuk { position: relative; display: flex; align-items: center; flex: 0 1 300px; }
.fc-szuk .ms { position: absolute; left: 12px; color: var(--m2); font-size: 20px; pointer-events: none; }
.fc-szuk input { width: 100%; min-height: 42px; padding: 0 14px 0 40px !important; border-radius: 999px !important; font-size: 16px; }
.fc-gr { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.fc-g { padding: 16px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: var(--sh); }
.fc-g header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fc-g header b { font: 700 15px/1.25 var(--fh); }
.fc-gc { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--bg); color: var(--m); font: 600 11.5px/1 var(--f); white-space: nowrap; }
.fc-l { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-i { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--l2); background: #fff; font: 600 13px/1.2 var(--f); color: var(--t2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.fc-i > .ms { font-size: 19px; color: var(--m2); }
.fc-i .fc-ok { display: none; font-size: 16px; }
.fc-i:hover { border-color: color-mix(in srgb, var(--c) 45%, #fff); }
.fc-i.on { background: color-mix(in srgb, var(--c) 10%, #fff); border-color: color-mix(in srgb, var(--c) 45%, #fff); color: var(--t); }
.fc-i.on > .ms { color: var(--c); }
.fc-i.on .fc-ok { display: inline; }
@media (max-width: 760px) {
  .fc-gr { grid-template-columns: minmax(0, 1fr); }
  .fc-szuk { flex: 1 1 100%; }
  .fc-g { padding: 14px; }
}

/* ---------- OBIEKT: POWIADOMIENIA ---------- */
.nt2, .em2 { max-width: 1040px; }
.nt-off { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 14px 16px; border-radius: 16px; background: #FFF7EA; border: 1px solid #F5DFB5; color: #7A5212; font-size: 13px; line-height: 1.5; }
.nt-off .ms { color: #C98518; }
.nt-off b { display: block; color: #5E3F0C; }
.nt-off a { color: inherit; font-weight: 700; }
.nt-gr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.nt-k { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: var(--sh); transition: border-color .2s; }
.nt-k.on { border-color: color-mix(in srgb, var(--c) 35%, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 6%, #fff), #fff 60%); }
.nt-k:not(.on) .au-ki { filter: grayscale(.7); opacity: .7; }
.nt-t { flex: 1; min-width: 0; }
.nt-t small { display: block; color: var(--c); font: 700 11px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; }
.nt-t b { display: block; margin-top: 6px; font: 700 16px/1.25 var(--fh); }
.nt-t p { margin: 5px 0 0; color: var(--m); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.nt-t p b { display: inline; margin: 0; font: 600 13px var(--f); color: var(--t2); }
.nt-link { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: var(--sh); text-align: left; font-family: var(--f); cursor: pointer; transition: border-color .2s, transform .2s; }
.nt-link:hover { border-color: #D6D0F5; transform: translateY(-1px); }
.nt-link > span:nth-child(2) { flex: 1; min-width: 0; }
.nt-link b { display: block; font: 700 14px/1.3 var(--f); color: var(--t); }
.nt-link small { display: block; margin-top: 2px; color: var(--m); font-size: 12.5px; line-height: 1.45; }
.nt-link > .ms { color: var(--m2); }
/* ---------- OBIEKT: PRACOWNICY ---------- */
.em-ks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.em-l { display: grid; }
.em-r { display: grid; grid-template-columns: 42px minmax(0, 1.2fr) minmax(0, 1.4fr) auto 22px; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--l); background: #fff; text-align: left; font-family: var(--f); cursor: pointer; }
.em-r:last-child { border-bottom: 0; }
.em-r:hover { background: #FBFAFE; }
.em-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ps); color: var(--p); font: 700 14px/1 var(--fh); }
.em-t b { display: block; font: 700 14px/1.3 var(--f); color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-t small { display: block; margin-top: 2px; color: var(--m); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-p { display: flex; flex-wrap: wrap; gap: 5px; }
.em-p i { padding: 4px 9px; border-radius: 999px; background: var(--bg); color: var(--t2); font: 600 11.5px/1.2 var(--f); font-style: normal; }
.em-s { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); font: 600 12.5px/1 var(--f); white-space: nowrap; }
.em-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.em-r > .ms { color: var(--m2); }
.em-h { margin: 22px 0 10px; font: 700 16px/1.3 var(--fh); }
.em-ro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.em-rk { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: var(--sh); }
.em-rk b { margin-top: 6px; font: 700 15px/1.25 var(--fh); }
.em-rk small { color: var(--m); font-size: 12.5px; }
.em-rk .em-p { margin-top: 6px; }
.em-rk .em-p i { background: color-mix(in srgb, var(--c) 9%, #fff); color: var(--c); }
@media (max-width: 900px) { .em-r { grid-template-columns: 42px minmax(0, 1fr) auto; } .em-r .em-p { grid-column: 2 / -1; grid-row: 2; } .em-r > .ms { display: none; } }
@media (max-width: 760px) {
  .nt-gr, .em-ro { grid-template-columns: minmax(0, 1fr); }
  .em-ks { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .em-ks .au-k { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .em-ks .au-k small { font-size: 11.5px; }
  .em-r { padding: 12px 14px; gap: 10px; }
  .nt-k { padding: 16px; gap: 12px; }
  .nt-k .au-ki.big { width: 44px; height: 44px; border-radius: 13px; }
}
.em2 .lr-top > div:first-child, .nt2 .lr-top > div:first-child { flex: 1 1 360px; }
.mk-pusto .btn .ms { padding: 0; background: none; font-size: 18px; color: inherit; border-radius: 0; }

/* ---------- OBIEKT: PROFIL I USTAWIENIA ---------- */
.ob2 { max-width: 920px; }
.ob2 > .card { max-width: none !important; border-radius: 20px; overflow: hidden; }
.ob2 > .card > .ch { display: none; }
.ob2 > .card > .tabs { display: flex; gap: 4px; margin: 16px 20px 0; padding: 4px; border: 1px solid var(--l2); border-radius: 999px; background: var(--bg); width: max-content; max-width: calc(100% - 40px); overflow-x: auto; scrollbar-width: none; }
.ob2 > .card > .tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px; border: 0 !important; border-radius: 999px; background: none; font: 600 13px/1 var(--f); color: var(--t2); box-shadow: none !important; }
.ob2 > .card > .tabs button::after { display: none !important; }
.ob2 > .card > .tabs button.on { background: #fff; color: var(--t); box-shadow: 0 1px 3px rgba(23, 21, 43, .12) !important; }
.ob2 > .card > .tabs button.on .ms { color: var(--p); }
.ob2 > .card > .cb { padding: 8px 20px 20px; }
.ob2 .sec { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; padding: 0; border: 0; font: 700 15px/1.3 var(--fh); color: var(--t); }
.ob2 .sec::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--p); }
.ob2 .stl { display: flex; flex-wrap: wrap; gap: 8px; }
.ob2 .stl button { flex: none; width: auto; min-height: 42px; padding: 0 14px 0 10px; border: 1px solid var(--l2); border-radius: 999px; background: #fff; }
.ob2 .stl button.on { border-color: var(--p); background: var(--ps); box-shadow: 0 0 0 3px rgba(88, 70, 199, .12); }
.ob2 > .card > .cf { padding: 14px 20px; background: #FBFAFE; border-top: 1px solid var(--l); }
@media (max-width: 760px) {
  .ob2 > .card > .tabs { margin: 12px 12px 0; max-width: calc(100% - 24px); }
  .ob2 > .card > .tabs button { padding: 0 12px; }
  .ob2 > .card > .cb { padding: 4px 14px 16px; }
  .ob2 > .card > .cf { padding: 12px 14px; }
}
.ob2 .stl { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px; margin-bottom: 14px !important; }
.ob2 .stl button { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; flex: 0 0 auto !important; }

/* ---------- SPRZEDAZ: iCALENDAR ---------- */
.ic2 { align-items: start; }
.ic-pt { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--t); }
.ic-pt i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ic-u { color: var(--m); word-break: break-all; }
.ic-xl { display: grid; gap: 8px; margin-bottom: 10px; }
.ic-x { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--l); border-radius: 14px; background: #FCFBFE; min-width: 0; }
.ic-xi { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ps); color: var(--p); }
.ic-xi .ms { font-size: 19px; }
.ic-xt { flex: 1; min-width: 0; }
.ic-xt b { display: block; font: 700 13.5px/1.3 var(--f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-xt code { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--m); font-size: 11.5px; background: none; padding: 0; }
.ic-x .btn { flex: none; }

/* ---------- SPRZEDAZ: GOOGLE ---------- */
.gg2 { max-width: 1040px; }
.gg-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 18px 20px; background: linear-gradient(100deg, #EEF4FE, #fff 65%); border: 1px solid #D6E4FB; border-radius: 20px; box-shadow: var(--sh); }
.gg-lg { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(26, 115, 232, .15); }
.gg-lg svg { width: 30px; height: 30px; }
.gg-ht { flex: 1; min-width: 0; }
.gg-ht small { display: block; color: var(--m); font: 600 12px/1 var(--f); }
.gg-ht code { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.3 ui-monospace, Consolas, monospace; color: var(--t); background: none; padding: 0; }
.gg-ks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.gg-k { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: var(--sh); }
.gg-k b { margin-top: 6px; font: 700 15px/1.3 var(--fh); }
.gg-k p { margin: 0; color: var(--m); font-size: 13px; line-height: 1.5; }
.gg-k .btn { margin-top: 6px; }
.gg-n { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1A73E8; color: #fff; font: 800 12px/1 var(--fh); }
@media (max-width: 760px) {
  .gg-hero { flex-wrap: wrap; padding: 16px; }
  .gg-hero .btn { flex: 1 1 100%; justify-content: center; }
  .gg-ks { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- CENY: USLUGI DODATKOWE ---------- */
.sv-top { margin-bottom: 12px; }
.card.sv2 { max-width: 1040px !important; background: none; border: 0; box-shadow: none; }
.card.sv2 > .ch { display: none; }
.card.sv2 > .cb { padding: 0; display: grid; gap: 10px; }
.card.sv2 > .cb > div[style*="height"] { display: none; }
.card.sv2 > .cb > .btn.o.w { justify-self: start; width: auto; }
.card.sv2 > .cf { position: sticky; bottom: 0; z-index: 3; margin-top: 12px; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 35%); border: 0; }
.card.sv2 > .cf .btn.w { width: auto; margin-left: auto; display: flex; }
.card.sv2 .svcard { position: relative; margin: 0; padding: 0 18px 18px; border-radius: 18px; border: 1px solid var(--l); background: #fff; box-shadow: var(--sh); overflow: hidden; }
.card.sv2 .svcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--p)); }
.sv-sum { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 36px; align-items: center; gap: 14px; width: calc(100% + 36px); margin: 0 -18px 14px; padding: 12px 18px 12px 22px; border: 0; border-bottom: 1px solid var(--l); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 55%); text-align: left; font-family: var(--f); cursor: pointer; }
.sv-f { display: grid; place-items: center; width: 56px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff) center / cover no-repeat; color: var(--c); }
.sv-t { min-width: 0; }
.sv-t b { display: block; font: 700 14.5px/1.3 var(--fh); color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-t small { display: block; margin-top: 3px; color: var(--m); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-k { margin-right: 6px; color: var(--c); font-weight: 700; }
.sv-fl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.sv-fl i { padding: 4px 9px; border-radius: 999px; background: var(--bg); color: var(--t2); font: 600 11.5px/1.2 var(--f); font-style: normal; white-space: nowrap; }
.sv-fl i.po { background: #EEEBFD; color: var(--p); }
.sv-fl i.rq { background: #FFF1E0; color: #B25E00; }
.sv-c { font: 800 15.5px/1 var(--fh); color: var(--t); white-space: nowrap; }
.svcard.zw { padding-bottom: 0; }
.svcard.zw > :not(.sv-sum) { display: none !important; }
.svcard.zw .sv-sum { margin-bottom: 0; border-bottom: 0; }
.svcard.zw .rm-sx { transform: none; }
@media (max-width: 760px) {
  .card.sv2 .svcard { padding: 0 12px 14px; }
  .sv-sum { grid-template-columns: 46px minmax(0, 1fr) auto 30px; gap: 10px; width: calc(100% + 24px); margin: 0 -12px 12px; padding: 10px 12px 10px 16px; }
  .sv-f { width: 46px; height: 40px; }
  .sv-fl { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; margin-top: -4px; }
  .sv-fl:empty { display: none; }
  .sv-sum .rm-sx { width: 30px; height: 30px; }
  .card.sv2 > .cf .btn.w { width: 100%; justify-content: center; }
}
.card.sv2 .svcard.zw { padding-bottom: 0; }
@media (max-width: 760px) {
  .sv-f { grid-column: 1; grid-row: 1; } .sv-t { grid-column: 2; grid-row: 1; }
  .sv-c { grid-column: 3; grid-row: 1; font-size: 14px; } .sv-sum .rm-sx { grid-column: 4; grid-row: 1; }
}
.ob2 > .card > .cb > .row:first-child { border-top: 0; }
.ob2 > .card > .cb { padding-top: 14px; }

/* ---------- FINANSE: naglowki, pasek dat, kafle rownan ---------- */
.ob2.fi2 { max-width: 1120px; }
.ob2 > .card > .ch:not(:has(> :nth-child(2))) { display: none; }
.ob2 > .card > .ch:has(> :nth-child(2)) { display: flex; }
.ob2 > .card > .ch:has(> :nth-child(2)) > h3 { display: none; }
.ob2 > .card + .card, .ob2 > .cols { margin-top: 14px; }
.rp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 16px; padding: 12px 14px; border-radius: 16px; background: var(--bg); }
.rp-bar .rp-szyb { margin: 0; }
.rp-d { display: flex; align-items: center; gap: 8px; }
.rp-d label { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 12.5px/1 var(--f); color: var(--m); }
.rp-d input { width: 150px !important; min-height: 38px; padding: 0 10px !important; border-radius: 10px !important; background: #fff; font-size: 16px; }
.rp-d .btn { min-height: 38px; }
.ob2 .eq { gap: 10px; }
.ob2 .eq .bx { border-radius: 16px; background: #fff; border: 1px solid var(--l); box-shadow: var(--sh); }
.ob2 .eq .bx b { font: 800 19px/1.2 var(--fh); letter-spacing: -.01em; }
.ob2 .eq .op { color: var(--m2); font-weight: 700; }
@media (max-width: 760px) {
  .rp-bar { padding: 10px; }
  .rp-bar .rp-szyb { width: 100%; }
  .rp-d { width: 100%; flex-wrap: wrap; }
  .rp-d label { flex: 1 1 40%; }
  .rp-d input { width: 100% !important; }
  .rp-d .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- PLAN: SUBSKRYPCJA ---------- */
.bctl { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.bterms { flex-direction: row !important; display: inline-flex !important; gap: 2px !important; padding: 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--l2); align-self: center; }
.bterms button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 600 13px/1 var(--f); color: var(--t2); cursor: pointer; }
.bterms button i { font-style: normal; padding: 3px 7px; border-radius: 999px; background: #E6F6EE; color: #17804A; font-size: 11px; font-weight: 700; }
.bterms button.on { background: #fff; color: var(--t); box-shadow: 0 1px 3px rgba(23, 21, 43, .12); }
.bmods { display: grid; gap: 8px; }
.bmod { border: 1px solid var(--l2) !important; border-radius: 16px !important; padding: 14px 16px !important; cursor: pointer; transition: border-color .15s, background .15s; }
.bmod:hover { border-color: #D6D0F5 !important; }
.bmod.on { background: #F7F5FE; border-color: var(--p) !important; }
.bmod input { width: 20px !important; height: 20px !important; accent-color: var(--p); }
.bsec { margin: 10px 0 2px !important; }
.bmeth { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.bmeth label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border: 1px solid var(--l2); border-radius: 999px; background: #fff; font: 600 13px/1 var(--f); color: var(--t2); cursor: pointer; }
.bmeth label:has(input:checked) { border-color: var(--p); background: var(--ps); color: var(--t); }
.bmeth input { accent-color: var(--p); width: 18px; height: 18px; margin: 0; }
@media (max-width: 760px) {
  .bterms { width: 100%; } .bterms button { flex: 1; justify-content: center; padding: 0 8px; }
  #bOrder { width: 100%; justify-content: center; }
}
@media (max-width: 760px) { .card:has(.bctl) > .ch { flex-wrap: wrap; } .card:has(.bctl) > .ch h3 { flex: 1 1 100%; } }

/* ---------- SZEROKIE EKRANY: kazdy widok wywazony jak Dzisiaj (kalendarz dalej na cala szerokosc) ---------- */
.view:not(:has(.calbar)) { max-width: 1560px; margin-left: auto; margin-right: auto; }

/* ---------- SILNIK: glowna karta = kod na strone ---------- */
.ewk { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 24px; margin-bottom: 16px; padding: 26px; border-radius: 24px; background: radial-gradient(120% 140% at 100% 0%, #3A2E8F 0%, #1E1B3F 45%, #17152B 100%); color: #fff; overflow: hidden; }
.ewk-h h2 { margin: 8px 0 6px; font: 800 26px/1.15 var(--fh); letter-spacing: -.02em; color: #fff; }
.ewk-h p { margin: 0; max-width: 620px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.55; }
.ewk-st { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f); color: #F5C77E; }
.ewk-st i { width: 8px; height: 8px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 3px rgba(245, 165, 36, .2); }
.ewk-st.on { color: #8EE3B8; } .ewk-st.on i { background: #34C27F; box-shadow: 0 0 0 3px rgba(52, 194, 127, .22); }
.ewk-pl { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 10px; }
.ewk-pl button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); font: 600 13px/1 var(--f); cursor: pointer; }
.ewk-pl button .ms { font-size: 18px; opacity: .8; }
.ewk-pl button.on { background: #fff; border-color: #fff; color: var(--t); }
.ewk-pl button.on .ms { color: var(--p); opacity: 1; }
.ewk-code { display: flex; align-items: stretch; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 16px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ewk-code code { flex: 1; min-width: 0; align-self: center; max-height: 140px; overflow: auto; white-space: pre-wrap; word-break: break-all; background: none; padding: 6px 0; color: #D9D2FF; font: 500 12.5px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ewk-code .btn { flex: none; align-self: center; min-height: 46px; padding: 0 18px; }
.ewk-kr { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: ek; display: grid; gap: 8px; }
.ewk-kr li { counter-increment: ek; display: flex; gap: 10px; color: rgba(255, 255, 255, .8); font-size: 13px; line-height: 1.5; }
.ewk-kr li::before { content: counter(ek); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(196, 181, 253, .2); color: #C4B5FD; font: 800 11px/1 var(--fh); }
.ewk-kr b { color: #fff; } .ewk-kr code { background: rgba(255, 255, 255, .1); color: #D9D2FF; padding: 1px 5px; border-radius: 5px; }
.ewk-r { display: flex; flex-direction: column; gap: 14px; }
.ewk-r .dh-ks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ewk-link { margin-top: auto; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ewk-link small { display: block; color: rgba(255, 255, 255, .65); font-size: 12.5px; }
.ewk-link .ewh-url { max-width: none; margin-top: 8px; }
.ewk-link .dh-a { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1200px) { .ewk { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ewk { padding: 18px 16px; border-radius: 20px; }
  .ewk-h h2 { font-size: 22px; }
  .ewk-pl { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 10px; padding: 0 16px; scrollbar-width: none; }
  .ewk-pl button { flex: none; }
  .ewk-code { flex-direction: column; padding: 12px; }
  .ewk-code .btn { width: 100%; justify-content: center; }
  .ewk-link .dh-a .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- PLAN 2: dwie kolumny, kafelki modulow, przyklejone podsumowanie ---------- */
.bill { max-width: 1280px; }
.bill .bstat { margin-bottom: 14px; border-radius: 18px; }
.bp2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.bp-l { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bp-l > .bctl { padding: 16px 18px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: var(--sh); }
.bp-l > .bbase { margin: 0; padding: 18px; background: linear-gradient(120deg, #F3F0FE, #fff 70%); border: 1px solid #E2DCFB; border-radius: 18px; }
.bp-l .bsec { margin: 8px 0 -2px !important; font: 700 12px/1 var(--f) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--m) !important; }
.bp-l .bmods { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.bp-l .bmod { position: relative; display: grid !important; grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "i t" "i p"; align-items: start; gap: 4px 12px; padding: 16px !important; background: #fff; box-shadow: var(--sh); }
.bp-l .bmod input { position: absolute; opacity: 0; pointer-events: none; }
.bmi { grid-area: i; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.bp-l .bmt { grid-area: t; padding-right: 26px; }
.bp-l .bmt b { display: block; font: 700 14px/1.3 var(--f); }
.bp-l .bmt small { display: block; margin-top: 3px; color: var(--m); font-size: 12.5px; line-height: 1.45; }
.bp-l .bmp { grid-area: p; margin-top: 6px; text-align: left; font: 800 16px/1 var(--fh); color: var(--t); }
.bp-l .bmp small { margin-left: 4px; font: 500 12px var(--f); color: var(--m); }
.bmc { position: absolute; top: 14px; right: 14px; font-size: 22px !important; color: var(--m2); }
.bp-l .bmod.on { background: color-mix(in srgb, var(--c) 5%, #fff); border-color: var(--c) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent), var(--sh); }
.bp-l .bmod.on .bmc { color: var(--c); font-variation-settings: 'FILL' 1; }
.bp-r { position: sticky; top: 76px; padding: 18px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: 0 10px 30px rgba(23, 21, 43, .08); }
.bp-rh { margin-bottom: 10px; font: 700 15px/1.3 var(--fh); }
.bp-r .bsum { margin: 0; padding: 0; background: none; border: 0; }
.bp-r .btot { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--l2); }
.bp-r .btot b { font: 800 26px/1 var(--fh); letter-spacing: -.02em; }
.bp-r .bmeth { flex-direction: column; margin: 14px 0 12px; }
.bp-r .bmeth label { width: 100%; border-radius: 12px; }
.bp-r #bOrder { width: 100%; justify-content: center; }
.bp-tr { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.bp-tr li { display: flex; align-items: center; gap: 8px; color: var(--m); font-size: 12.5px; }
.bp-tr .ms { font-size: 17px; color: var(--p); }
@media (max-width: 1100px) { .bp2 { grid-template-columns: minmax(0, 1fr); } .bp-r { position: static; } }
@media (max-width: 760px) { .bp-l .bmods { grid-template-columns: minmax(0, 1fr); } .bp-l > .bctl { flex-direction: column; align-items: stretch; } }
.bp-l .bmp small { display: inline !important; }
.bp-l .bmods { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 0 !important; }
.bp-l .bmod { margin: 0 !important; }
.bp-l .bmods { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.bp-r .bline b { white-space: nowrap; flex: none; }

/* ---------- SILNIK v2: tylko adres + kod, czytelnie ---------- */
.ewk2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; margin-bottom: 16px; }
.ewk-a, .ewk-b { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: var(--sh); min-width: 0; }
.ewk-lb { display: flex; align-items: center; gap: 8px; font: 700 15px/1.3 var(--fh); color: var(--t); }
.ewk-a small, .ewk-b small { color: var(--m); font-size: 12.5px; line-height: 1.5; }
.ewk-b small code { background: var(--bg); padding: 1px 5px; border-radius: 5px; }
.ewk-url { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--l2); border-radius: 14px; background: #FCFBFE; }
.ewk-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0; font: 600 14px/1.3 ui-monospace, Consolas, monospace; color: var(--t); }
.ewk-url .btn { flex: none; min-height: 40px; }
.ewk2 .ewk-pl { margin: 0; }
.ewk2 .ewk-pl button { border-color: var(--l2); background: #fff; color: var(--t2); min-height: 34px; padding: 0 13px; }
.ewk2 .ewk-pl button.on { background: var(--t); border-color: var(--t); color: #fff; }
.ewk2 .ewk-code { background: #17152B; box-shadow: none; padding: 8px 8px 8px 14px; }
.ewk2 .ewk-code code { max-height: 90px; font-size: 12px; }
.ewk2 .ewk-code .btn { min-height: 40px; background: #fff; }
@media (max-width: 1100px) { .ewk2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ewk-a, .ewk-b { padding: 16px; }
  .ewk-url { flex-wrap: wrap; padding: 10px; }
  .ewk-url code { flex: 1 1 100%; }
  .ewk-url .btn { flex: 1; justify-content: center; }
  .ewk2 .ewk-pl { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
}

/* ---------- SILNIK v3: generator w 3 krokach + prawdziwy widget jako podglad ---------- */
.w2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.w2-l { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.w2-sec { padding: 20px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: var(--sh); }
.w2-sec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 16px/1.3 var(--fh); }
.w2-sec h3 i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--t); color: #fff; font: 800 12px/1 var(--fh); font-style: normal; }
.w2-typy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.w2-typy button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid var(--l2); border-radius: 16px; background: #fff; text-align: left; font-family: var(--f); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.w2-typy button .ms { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bg); color: var(--m); font-size: 24px; }
.w2-typy button b { font: 700 14.5px/1.25 var(--f); color: var(--t); }
.w2-typy button small { color: var(--m); font-size: 12.5px; line-height: 1.45; }
.w2-typy button:hover { border-color: #D6D0F5; }
.w2-typy button.on { border-color: var(--p); box-shadow: 0 0 0 3px rgba(88, 70, 199, .14); }
.w2-typy button.on .ms { background: var(--ps); color: var(--p); }
.w2-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--l); }
.w2-typy + .w2-row { margin-top: 14px; }
.w2-lb { flex: 1 1 200px; min-width: 0; font: 600 13.5px/1.35 var(--f); color: var(--t); }
.w2-lb small { display: block; margin-top: 3px; font-weight: 400; color: var(--m); font-size: 12.5px; line-height: 1.45; }
.w2-ctl { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.w2-ctl > input, .w2-ctl > select { width: 280px; max-width: 100%; min-height: 40px; font-size: 16px; }
.w2-col { flex-direction: column; align-items: stretch; }
.w2-slug { display: flex; align-items: center; border: 1px solid var(--l2); border-radius: 12px; background: #fff; overflow: hidden; }
.w2-slug input { width: 180px !important; min-height: 40px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 16px; text-align: right; padding-right: 2px !important; }
.w2-slug span { padding: 0 12px 0 2px; color: var(--m); font: 600 14px/1 var(--f); white-space: nowrap; }
.w2-now { display: flex; align-items: center; gap: 6px; }
.w2-now code { flex: 1; min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0; color: var(--m); font-size: 12px; }
.w2-pl { margin: 0 0 10px !important; }
.w2-pl button { border-color: var(--l2) !important; background: #fff !important; color: var(--t2) !important; min-height: 34px !important; padding: 0 13px !important; }
.w2-pl button.on { background: var(--t) !important; border-color: var(--t) !important; color: #fff !important; }
.w2-code { padding: 14px 16px; border-radius: 14px; background: #17152B; }
.w2-code code { display: block; max-height: 120px; overflow: auto; white-space: pre-wrap; word-break: break-all; background: none; padding: 0; color: #D9D2FF; font: 500 12.5px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.w2-cb { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.w2-cb small { color: var(--m); font-size: 12.5px; line-height: 1.45; }
.w2-cb small code { background: var(--bg); padding: 1px 5px; border-radius: 5px; }
.w2-cb .btn { flex: none; }
.w2-more { margin-top: 6px; border-top: 1px solid var(--l); }
.w2-more summary { display: flex; align-items: center; gap: 8px; padding: 14px 0 4px; cursor: pointer; list-style: none; font: 600 13.5px/1.3 var(--f); color: var(--p); }
.w2-more summary::-webkit-details-marker { display: none; }
.w2-more .wg-types, .w2-more .wg-tabs button:first-child { display: none !important; }
.w2-r { position: sticky; top: 76px; }
.w2-prev { padding: 16px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: var(--sh); }
.w2-ph { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.w2-ph b { font: 700 15px/1.3 var(--fh); } .w2-ph small { color: var(--m); font-size: 12.5px; }
.w2-live { min-height: 140px; padding: 18px 14px; border-radius: 16px; background: repeating-linear-gradient(45deg, #F7F6FB 0 12px, #F2F0F9 12px 24px); overflow: hidden; }
.w2-live.dark { background: #1B1930; }
.w2-pa { margin-top: 12px; } .w2-pa .btn { width: 100%; justify-content: center; }
@media (max-width: 1200px) { .w2 { grid-template-columns: minmax(0, 1fr); } .w2-r { position: static; order: -1; } }
@media (max-width: 760px) {
  .w2-sec { padding: 16px; }
  .w2-typy { grid-template-columns: minmax(0, 1fr); }
  .w2-typy button { flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 12px; }
  .w2-typy button small { flex: 1 1 100%; padding-left: 54px; margin-top: -8px; }
  .w2-row { flex-direction: column; align-items: stretch; }
  .w2-ctl { flex-wrap: wrap; } .w2-ctl > input, .w2-ctl > select { width: 100%; }
  .w2-slug { width: 100%; } .w2-slug input { width: 100% !important; flex: 1; }
  .w2-now { flex-wrap: wrap; } .w2-now code { max-width: none; flex: 1 1 100%; }
  .w2-cb { flex-direction: column; align-items: stretch; } .w2-cb .btn { justify-content: center; }
  .w2-pl { flex-wrap: nowrap !important; overflow-x: auto; }
}
.w2 { display: block; max-width: 1180px; }
.w2-ph { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.w2-ph > div { display: flex; flex-direction: column; gap: 2px; }
.w2-live { padding: 26px 22px; min-height: 120px; }
@media (max-width: 760px) { .w2-live { padding: 14px 10px; } .w2-ph .btn { width: 100%; justify-content: center; } }
.w2-live { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
.w2 ~ .ewgrid, .view:has(.w2) .ewgrid { grid-template-columns: 1fr 1fr; max-width: 1180px; }
@media (max-width: 900px) { .view:has(.w2) .ewgrid { grid-template-columns: minmax(0, 1fr); } }
.w2-conv { margin: 0 0 12px; color: var(--m); font-size: 13px; } .w2-conv b { font: 800 22px/1 var(--fh); color: var(--t); margin-right: 4px; }
@media (max-width: 760px) { .w2-lb { flex: none; } .w2-ctl { width: 100%; } }
.main > .view { min-width: 0; }
.view:not(:has(.calbar)) { width: 100%; box-sizing: border-box; }
[hidden] { display: none !important; }