/* ============================================================
   Brutalny Kalendarz — styl w duchu cal.com + marka Brutalny Podnośnik
   ============================================================ */

/* ── fonty marki ── */
@font-face { font-family: 'adineue PRO'; src: url('../fonts/adineue-PRO.ttf') format('truetype');          font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'adineue PRO'; src: url('../fonts/adineue-PRO-Cyr-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Druk Cyr';   src: url('../fonts/DrukCyr-Super.ttf') format('truetype');         font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Druk Cyr';   src: url('../fonts/DrukCyr-SuperItalic.ttf') format('truetype');   font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Druk Cyr';   src: url('../fonts/DrukCyr-BoldItalic.ttf') format('truetype');    font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Druk Cyr';   src: url('../fonts/DrukCyr-Heavy.ttf') format('truetype');         font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Druk Cyr';   src: url('../fonts/DrukCyr-Bold.ttf') format('truetype');          font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ── kolory z Figma (variables.json) — jeden ciemny motyw ── */
  --bg-0:      #000000;                  /* Dark/1100 */
  --bg:        #0F0F0F;                  /* Dark/1000 */
  --bg-2:      #1a1a1a;                  /* subtelne wypełnienia */
  --card:      #141414;                  /* karty / panele */
  --border:    rgba(255,255,255,.10);    /* Light/100 */
  --border-2:  rgba(255,255,255,.20);    /* Light/200 */
  --hairline:  rgba(255,255,255,.04);    /* Light/40 — delikatne ramki kart */
  --ink:       #FFFFFF;                  /* Light/1000 */
  --ink-2:     rgba(255,255,255,.60);    /* Light/600 */
  --ink-3:     rgba(255,255,255,.40);    /* Light/400 */
  --brand:     #FFFFFF;                  /* przyciski / aktywne = białe */
  --brand-ink: #0F0F0F;
  --accent:    #FFFFFF;                  /* akcent chrome = biały (bez żółtego) */
  --amber:     #FFBE00;                  /* Primary/Yellow — tylko statusy/dekoracje */
  --accent-red:   #E21313;               /* Primary/Red */
  --accent-green: #209715;               /* Primary/Green */
  --ok:        #209715;
  --ok-bg:     rgba(32,151,21,.16);
  --warn:      #FFBE00;
  --danger:    #E21313;
  --danger-bg: rgba(226,19,19,.14);
  --ring:      rgba(255,255,255,.55);
  --pill-on:   #2a2a2a;
  --page-glow: rgba(255,255,255,.03);
  --edge: linear-gradient(180deg, rgba(255,255,255,.048) 0%, rgba(255,255,255,.017) 42%, rgba(255,255,255,.008) 100%);
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sh-sm: 0 1px 2px rgba(0,0,0,.5);
  --sh:    0 6px 16px -4px rgba(0,0,0,.55);
  --sh-lg: 0 14px 34px -6px rgba(0,0,0,.65);
  --font:  'adineue PRO', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Druk Cyr', 'adineue PRO', 'Arial Black', Impact, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
/* czytelne natywne elementy na ciemnym tle (strzałki number, uchwyt resize, scrollbary) */
.input, .textarea, .select { color-scheme: dark; }
.textarea::-webkit-resizer { background: transparent; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: rgba(255,255,255,.22); color: #fff; }

.hidden { display: none !important; }
.muted { color: var(--ink-2); }
.tiny { font-size: 12px; }

/* ───────────── przyciski ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: transform .04s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { filter: brightness(.92); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-2); }
.btn--ghost:hover { background: var(--bg-2); }
.btn--back svg { transition: transform .15s ease; }
.btn--back:hover svg { transform: translateX(-2px); }
.btn--soft { background: var(--bg-2); color: var(--ink); }
.btn--soft:hover { background: #e7ebf0; }
.btn--danger { background: transparent; color: var(--danger); border-color: #fecdca; }
.btn--danger:hover { background: var(--danger-bg); }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; }

/* ───────────── pola formularzy ───────────── */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field > label { font-weight: 500; font-size: 14px; color: var(--ink); }
.field > label .req { color: #f15757; margin-left: 3px; }
.field .hint { font-size: 13px; color: var(--ink-3); }
.field .hint--error { color: #f15757; }
.input, .textarea, .select {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  background: var(--card); color: var(--ink); font-size: 14px; font-family: inherit;
  box-shadow: 0 1px 1px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 88px; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: #818181; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: #8a8a8a;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.input--error, .input.is-error { border-color: #f15757; }
.input--error:focus { box-shadow: 0 0 0 3px rgba(241,87,87,.22); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23818181' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

/* ── niestandardowy select (styl COSS.COM) ── */
.csel { position: relative; width: 100%; }
.csel__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; bottom: 0; }
.csel__trigger {
  width: 100%; height: 42px; padding: 0 36px 0 12px;
  display: flex; align-items: center; text-align: left; position: relative;
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
  box-shadow: 0 1px 1px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .15s, box-shadow .15s;
}
.csel__trigger:disabled { opacity: .55; cursor: default; }
.csel.open .csel__trigger, .csel__trigger:focus-visible {
  outline: none; border-color: #8a8a8a;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.csel__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel__trigger.is-placeholder .csel__value { color: #818181; }
.csel__chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #818181; transition: transform .15s; }
.csel.open .csel__chev { transform: translateY(-50%) rotate(180deg); }
.csel__menu {
  position: fixed; z-index: 80; display: none;
  background: #1d1d1d; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 4px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.6), 0 4px 8px -4px rgba(0,0,0,.5);
  max-height: 288px; overflow-y: auto;
}
.csel.open .csel__menu, .csel__menu.open { display: block; animation: csel-in .12s ease; }
@keyframes csel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.csel__opt {
  display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 8px 4px 2px;
  border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer;
  letter-spacing: .12px;
}
.csel__opt:hover { background: rgba(255,255,255,.05); }
.csel__opt.is-selected { background: rgba(255,255,255,.06); }
.csel__opt.is-disabled { color: var(--ink-3); cursor: default; }
.csel__opt.is-disabled:hover { background: transparent; }
.csel__check { width: 24px; height: 22px; display: grid; place-items: center; flex: none; color: var(--ink); opacity: 0; }
.csel__check svg { width: 15px; height: 15px; }
.csel__opt.is-selected .csel__check { opacity: 1; }
.csel__lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════════ date-picker (kalendarz, styl COSS.COM) ════════════ */
.cdate { position: relative; width: 100%; }
.cdate__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; bottom: 0; }
.cdate__trigger {
  width: 100%; height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: var(--card); color: var(--ink);
  font-size: 14px; font-family: inherit; cursor: pointer; text-align: left;
  box-shadow: 0 1px 1px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .15s, box-shadow .15s;
}
.cdate__trigger:hover { border-color: rgba(255,255,255,.18); }
.cdate.open .cdate__trigger { border-color: #8a8a8a; box-shadow: 0 0 0 3px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.05); }
.cdate__trigger:disabled { opacity: .55; cursor: default; }
.cdate__val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdate__trigger.is-placeholder .cdate__val { color: #818181; }
.cdate__ic { width: 17px; height: 17px; color: #818181; flex: none; }

.cdate__pop {
  position: fixed; z-index: 90; width: 268px; padding: 8px;
  background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  box-shadow: 0 24px 70px -22px rgba(0,0,0,.85), 0 6px 16px -8px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .14s ease, transform .14s ease;
}
.cdate.open .cdate__pop, .cdate__pop.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cdate__head { display: flex; align-items: center; gap: 4px; padding: 2px 0 6px; }
.cdate__title { flex: 1; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: 0; }
.cdate__nav { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: transparent; border: 0; color: var(--ink-2); cursor: pointer; opacity: .8; transition: background .12s, opacity .12s, color .12s; }
.cdate__nav:hover { background: rgba(255,255,255,.07); opacity: 1; color: #fff; }
.cdate__nav .icon { width: 16px; height: 16px; }
.cdate__dow { display: grid; grid-template-columns: repeat(7, 36px); justify-content: center; margin-bottom: 1px; }
.cdate__dow span { height: 32px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: .03em; opacity: .8; }
.cdate__grid { display: grid; grid-template-columns: repeat(7, 36px); justify-content: center; row-gap: 1px; }
.cdate__day {
  height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink); font-size: 14px; font-family: inherit; cursor: pointer; position: relative;
  transition: background .12s, color .12s;
}
.cdate__day:hover { background: rgba(255,255,255,.08); }
.cdate__day.is-out { color: var(--ink-3); opacity: .55; }
.cdate__day.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.cdate__day.is-sel { background: #f5f5f5; color: #141414; font-weight: 600; }
.cdate__day.is-sel.is-today::after { background: #141414; }
.cdate__day:disabled { opacity: .28; cursor: not-allowed; }
.cdate__day:disabled:hover { background: transparent; }

/* ───────────── badge / chip ───────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1;
}
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--demo { background: #fff7ed; color: var(--accent); }
.badge--live { background: #eff8ff; color: #175cd3; }
.badge--cancel { background: var(--danger-bg); color: var(--danger); }
.badge--off { background: var(--bg-2); color: var(--ink-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ============================================================
   STRONA REZERWACJI (public)
   ============================================================ */
.page {
  min-height: 100vh;
  /* tło strony kalendarza: zdjęcie warsztatu (fixed) + przyciemnienie dla czytelności kart */
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--page-glow) 0%, transparent 55%),
    linear-gradient(180deg, rgba(15,15,15,.50) 0%, rgba(15,15,15,.86) 100%),
    url("../assets/calendar-bg.png") center top / cover no-repeat fixed,
    var(--bg);
  display: flex; flex-direction: column;
}
@media (max-width: 760px) {
  /* mobile: pionowe tło + bez fixed (iOS) */
  .page {
    background:
      linear-gradient(180deg, rgba(15,15,15,.42) 0%, rgba(15,15,15,.86) 100%),
      url("../assets/calendar-bg-mob.png") center top / cover no-repeat,
      var(--bg);
  }
}

.topbar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 24px 0; max-width: 1080px; margin: 0 auto; width: 100%;
}
.topbar .btn { position: absolute; right: 24px; top: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-weight: 700; font-size: 16px; letter-spacing: 0; }
.brand__logo { width: 96px; height: 144px; object-fit: contain; display: block; }   /* как на лендинге (hero__logo 96×144) */
.brand__mark {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: var(--accent); color: #0F0F0F; display: grid; place-items: center;
  font-weight: 900; font-size: 16px;
}
.brand small { display: block; font-family: var(--font); font-weight: 500; font-size: 11px; color: var(--ink-3); letter-spacing: 0; }

.page__body { flex: 1; width: 100%; }

/* widoki rezerwacji / potwierdzenia — wyśrodkowane z marginesem */
.pad-view { max-width: 1100px; margin: 0 auto; padding: 4px 32px 80px; }

/* na stronie głównej hero ma własny (wyśrodkowany) nagłówek — chowamy górny pasek */
.page:has(.home-hero) .topbar { display: none; }

/* mobile: logo jak na lendingu (64×96) + ciaśniejszy pasek */
@media (max-width: 760px) {
  .topbar { padding: 10px 16px 0; }
  .topbar .btn { right: 16px; top: 12px; }
  .brand__logo { width: 64px; height: 96px; }
}

/* ── strona główna: HERO ── */
.home-hero {
  position: relative; overflow: hidden; text-align: center;
  margin: 0; padding: 28px 24px 56px; border-radius: 0;
  /* tło PNG (Figma export @3x) — pełny blok hero: czerń + poświata + siatka */
  background: #000 url("../assets/hero-bg.png") center top / 100% 100% no-repeat;
}
/* (winieta usunięta — wzór Figma to czysta czerń + pionowa poświata) */
.home-hero__admin {
  position: absolute; top: 22px; right: 26px; z-index: 2;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--border); padding: 8px 14px; border-radius: 8px;
  background: rgba(255,255,255,.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.home-hero__admin:hover { color: var(--ink); background: rgba(255,255,255,.07); }
/* logo: Figma 96×144 (proporcja 2:3) wyśrodkowane na górze */
.home-hero__logo { position: relative; z-index: 1; height: clamp(112px, 11vw, 144px); width: auto; margin: 0 auto 40px; display: block; }
.lead { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.lead h1 {
  font-family: var(--font-display);
  font-style: italic; font-weight: 700;
  font-size: clamp(40px, 6.2vw, 72px);
  line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 38.834%, #787674 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.lead p { color: rgba(255,255,255,.6); margin: 0; font-size: 20px; line-height: 28px; max-width: 695px; letter-spacing: .4px; }

/* ── strona główna: sekcja usług ── */
/* tło PNG (Figma export @3x) — kontynuacja poświaty, rozciągnięta na wysokość sekcji */
.home-services { background: #000 url("../assets/services-bg.png") center top / 100% 100% no-repeat; padding: 44px 0 72px; }
.home-services__inner { max-width: 1320px; margin: 0 auto; padding: 0 88px; }
@media (max-width: 1100px) { .home-services__inner { padding: 0 32px; } }

/* ── strona główna: stopka (tło z autem + elementy na wierzchu) ── */
.home-footer { position: relative; width: 100%; background: #000; overflow: hidden; }
.home-footer__bg { display: block; width: 100%; height: auto; }
.home-footer__brand { position: absolute; left: 0; right: 0; top: 14%; z-index: 2; text-align: center; }
.home-footer__logo { height: clamp(56px, 7vw, 92px); width: auto; margin: 0 auto; display: block; }
.home-footer__copy { margin-top: 16px; color: var(--ink-3); font-size: 14px; }
.home-footer__top {
  position: absolute; top: 17%; right: 4%; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 8px;
  background: rgba(255,255,255,.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); color: var(--ink-2);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.home-footer__top:hover { color: var(--ink); background: rgba(255,255,255,.09); }
.home-footer__top svg { width: 16px; height: 16px; transform: rotate(-90deg); }
@media (max-width: 760px) {
  .home-footer__copy { display: none; }
  .home-footer__top { top: 9%; padding: 8px 11px; font-size: 11px; }
  /* na wąskim ekranie tło bez rozciągania (cover), żeby siatka się nie spłaszczała */
  .home-hero { margin: 0; padding: 24px 16px 40px; background-size: cover; }
  .home-hero__logo { margin-bottom: 28px; }
  .lead { gap: 16px; }
  .lead h1 { white-space: normal; }
  .lead p { font-size: 16px; line-height: 24px; }
  .home-services__inner { padding: 0 16px; }
}

/* — karty usług (Figma: Service card) — */
.et-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; grid-auto-rows: 1fr; }
@media (max-width: 980px) { .et-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .et-grid { grid-template-columns: 1fr; } }
.et-card {
  background: var(--bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 8px; display: flex; flex-direction: column; overflow: hidden;
  cursor: pointer; position: relative; transition: border-color .15s ease, transform .15s ease;
}
.et-card:hover { transform: translateY(-4px); }
.et-card:hover .et-card__text,
.et-card:hover .et-card__arrow { background: #1b1b1b; }
.et-card__media { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 388 / 223; background: var(--bg-0); }
.et-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-card__info { display: flex; align-items: stretch; flex: 1; margin-top: 8px; border-radius: 8px; overflow: hidden; }
.et-card__text {
  flex: 1; min-width: 0; background: var(--card); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--hairline);
}
.et-card__title { font-family: var(--font); font-weight: 700; font-size: 22px; line-height: 1.16; text-transform: uppercase; color: var(--ink); }
.et-card__desc { font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--ink-2); letter-spacing: .02em; }
.et-card__arrow {
  width: 48px; flex: none; background: var(--card); display: flex; align-items: center; justify-content: center;
  color: var(--ink); transition: color .15s ease;
}
.et-card__arrow svg { width: 18px; height: 18px; }
.et-card:hover .et-card__arrow { color: var(--brand); }

/* — karta rezerwacji (booking) — */
.booking-card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
  display: grid; grid-template-columns: 320px 1fr; gap: 16px; max-width: 1000px; margin: 0 auto;
  align-items: stretch;
}
.booking-card.is-form { grid-template-columns: 320px 1fr; }

/* lewa część — pływający, zaokrąglony panel (jak sidebar) */
.bk-meta {
  background: #0a0a0a; border: 1px solid rgba(255,255,255,.07); border-radius: 24px;
  padding: 22px 22px; display: flex; flex-direction: column; gap: 13px;
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.6);
}
.bk-back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2);
  font-weight: 600; font-size: 13px; align-self: flex-start;
}
.bk-back:hover { color: var(--ink); }
.bk-host { display: flex; align-items: center; gap: 10px; }
.bk-host__av { width: 40px; height: 40px; border-radius: 13px; background: var(--c, #111); color: #fff; display: grid; place-items: center; font-weight: 800; }
.bk-host__name { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.bk-title { font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
.bk-facts { display: flex; flex-direction: column; gap: 9px; margin-top: 1px; }
.bk-fact { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.bk-fact .icon { margin-top: 1px; width: 17px; height: 17px; color: var(--ink-3); }
.bk-desc { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; border-top: 1px solid rgba(255,255,255,.07); padding-top: 13px; }
/* kalkulator podusług w formularzu (mechanika/opony): dropdown checkboxów → szacunek */
/* kalkulator podusług = zwykłe pole (label + rozwijana lista z checkboxami). Minimalistycznie, bez żółtego. */
.bk-est { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.bk-est__label { font-weight: 500; font-size: 14px; color: var(--ink); }
.bk-est__label span { color: var(--ink-3); font-weight: 400; }
.bk-est__dd { position: relative; }
.bk-est__toggle { width: 100%; height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px; border-radius: 10px; background: var(--card); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 1px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--ink); font-size: 14px; font-weight: 400; cursor: pointer; text-align: left; transition: border-color .15s ease; }
.bk-est__toggle:hover, .bk-est__toggle.is-open { border-color: #8a8a8a; }
.bk-est__count { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-est__chev { display: inline-flex; color: #818181; flex: none; transition: transform .18s ease; }
.bk-est__toggle.is-open .bk-est__chev { transform: rotate(180deg); }
.bk-est__panel { margin-top: 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: var(--card); max-height: 320px; overflow: auto; padding: 4px; }
.bk-est__item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 8px; cursor: pointer; transition: background .12s ease; }
.bk-est__item + .bk-est__item { border-top: 1px solid rgba(255,255,255,.05); }
.bk-est__item:hover { background: rgba(255,255,255,.03); }
/* biały minimalistyczny checkbox (styl COSS): biały fill + ciemny ptaszek, wszędzie jednakowy */
.bk-est__cb { appearance: none; -webkit-appearance: none; margin: 2px 0 0; width: 18px; height: 18px; flex: none;
  border: 1px solid rgba(255,255,255,.24); border-radius: 4px; background: rgba(255,255,255,.02); cursor: pointer; position: relative;
  transition: background .12s ease, border-color .12s ease; }
.bk-est__cb:hover { border-color: rgba(255,255,255,.5); }
.bk-est__cb:checked { background: #fff; border-color: #fff; }
.bk-est__cb:checked::after { content: ''; position: absolute; left: 5.5px; top: 2px; width: 4.5px; height: 8.5px;
  border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bk-est__cb:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }
.bk-est__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.bk-est__name { color: var(--ink); font-size: 14px; font-weight: 500; }
.bk-est__note { color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.bk-est__price { color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; text-align: right; padding-top: 1px; }
.bk-est__unit, .bk-cennik__unit { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.bk-est__price--text { white-space: normal; flex: 0 1 auto; max-width: 44%; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.bk-est__price--muted { color: var(--ink-3); font-weight: 500; font-size: 11.5px; }
/* szacunkowy koszt: przezroczysta plakietka z białą obwódką */
.bk-est__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;
  padding: 12px 14px; border-radius: 10px; background: transparent; border: 1px solid rgba(255,255,255,.18); }
.bk-est__total span { color: var(--ink-2); font-size: 13px; font-weight: 400; }
.bk-est__total b { color: var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; }
.bk-est__disc { display: flex; gap: 8px; align-items: flex-start; margin: 10px 2px 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.bk-est__disc-ic { flex: none; color: var(--ink-3); margin-top: 1px; }
.confirm__hint { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.kv2--wrap { align-items: flex-start; }
.kv2--wrap b { text-align: right; }

/* ── newsletter: checkbox zgody w formularzu ── */
.bk-sub { display: flex; align-items: center; gap: 10px; margin: -4px 0 16px; cursor: pointer; }
.bk-sub input[type=checkbox] { appearance: none; -webkit-appearance: none; margin: 0; width: 18px; height: 18px; flex: none;
  border: 1px solid rgba(255,255,255,.24); border-radius: 4px; background: rgba(255,255,255,.02); cursor: pointer; position: relative; transition: background .12s, border-color .12s; }
.bk-sub input[type=checkbox]:hover { border-color: rgba(255,255,255,.5); }
.bk-sub input[type=checkbox]:checked { background: #fff; border-color: #fff; }
.bk-sub input[type=checkbox]:checked::after { content: ''; position: absolute; left: 5.5px; top: 2px; width: 4.5px; height: 8.5px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bk-sub__txt { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.bk-sub__txt b { color: #FFBE00; }
.bk-sub__txt a { color: var(--ink-3); text-decoration: underline; }
.bk-sub--done { color: #fff; font-size: 13px; font-weight: 500; cursor: default; }
.bk-sub__ok { display: inline-flex; width: 16px; height: 16px; border-radius: 100px; background: rgba(70,209,96,.16); color: #46d160; align-items: center; justify-content: center; font-size: 10px; flex: none; }

/* ── karnet: rozliczenie wjazdem (zwijana sekcja w formularzu) ── */
.bk-karnet { margin: -4px 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.bk-karnet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bk-karnet__card { width: 66px; height: auto; flex: none; border-radius: 6px; align-self: center; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); pointer-events: none; }
.bk-karnet__toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1 1 auto; }
.bk-karnet__cb { appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 18px; height: 18px; flex: none;
  border: 1px solid rgba(255,255,255,.24); border-radius: 4px; background: rgba(255,255,255,.02); cursor: pointer; position: relative; transition: background .12s, border-color .12s; }
.bk-karnet__cb:hover { border-color: rgba(255,255,255,.5); }
.bk-karnet__cb:checked { background: #fff; border-color: #fff; }
.bk-karnet__cb:checked::after { content: ''; position: absolute; left: 5.5px; top: 2px; width: 4.5px; height: 8.5px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bk-karnet__txt { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.bk-karnet__txt b { color: var(--ink); font-weight: 600; }
.bk-karnet__body { margin-top: 12px; }
.bk-karnet__row { display: flex; gap: 8px; }
.bk-karnet__row .input { flex: 1 1 auto; }
.bk-karnet__row .btn { flex: none; }
.bk-karnet__status { margin-top: 10px; font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); }
.bk-karnet__status.is-ok { color: #46d160; border-color: rgba(70,209,96,.35); background: rgba(70,209,96,.08); }
.bk-karnet__status.is-ok b { color: #6ee089; }
.bk-karnet__status.is-bad { color: #ff8f8f; border-color: rgba(255,90,90,.35); background: rgba(255,90,90,.07); }
.confirm__karnet { margin: 14px 0 0; padding: 13px 16px; border: 1px solid rgba(70,209,96,.35); border-radius: 12px; background: rgba(70,209,96,.08); color: var(--ink); font-size: 13.5px; line-height: 1.5; text-align: center; }
.confirm__karnet b { color: #6ee089; }

/* ── newsletter: baner promo (-20%) nakładany na kartę rezerwacji ── */
.bk-promo { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8,8,8,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: 24px; animation: bkPromoIn .25s ease; }
.bk-promo.is-hidden { display: none; }
@keyframes bkPromoIn { from { opacity: 0; } to { opacity: 1; } }
/* redesign (Figma 1103:1746): pełne tło z obrazu (plakietka −20% + poświata), tekst w dolnej strefie */
.bk-promo__card { position: relative; width: 100%; max-width: 560px; overflow: hidden; text-align: center;
  background: #0e0e0e url('/public/assets/promo/promo-bg.webp') top center / cover no-repeat;
  aspect-ratio: 1860 / 1894; border-radius: 16px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.85);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 40px 34px; }
.bk-promo__x { position: absolute; top: 16px; left: 16px; width: 32px; height: 32px; border-radius: 100px; background: rgba(255,255,255,.08); border: 0; color: #fff; font-size: 13px; cursor: pointer; z-index: 2; transition: background .15s ease; }
.bk-promo__x:hover { background: rgba(255,255,255,.18); }
.bk-promo__title { margin: 0 0 12px; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 30px; line-height: 34px; letter-spacing: -.5px;
  background: linear-gradient(180deg, #fff 42%, #ffe9b0); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
.bk-promo__sub { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.bk-promo__sub b { color: #fff; text-transform: uppercase; }
.bk-promo__btn { display: flex; align-items: center; width: 100%; height: 64px; border: 0; border-radius: 12px; background: #fff; cursor: pointer; overflow: hidden; padding: 0; transition: transform .15s ease; }
.bk-promo__btn:hover { transform: translateY(-1px); }
.bk-promo__btn-txt { flex: 1; padding: 0 24px; text-align: center; color: #0f0f0f; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .01em; }
.bk-promo__btn-ic { width: 48px; height: 100%; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(1,1,1,.06); color: #0f0f0f; }
.bk-promo__btn-ic svg { width: 15px; height: 15px; }
.bk-promo__no { display: block; width: 100%; margin-top: 14px; background: none; border: 0; color: var(--ink-3); font-size: 13px; cursor: pointer; text-decoration: underline; }
@media (max-width: 600px) {
  .bk-promo__card { max-width: 340px; padding: 0 22px 22px;
    background-image: url('/public/assets/promo/promo-bg-mob.webp'); aspect-ratio: 1053 / 1684; }
  .bk-promo__title { font-size: 24px; line-height: 28px; }
  .bk-promo__sub { font-size: 14px; margin-bottom: 18px; }
}

/* ── newsletter: kod w potwierdzeniu ── */
.confirm__promo { margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; text-align: center;
  background: rgba(245,184,79,.1); border: 1px dashed rgba(245,184,79,.45); color: var(--ink); font-size: 14px; line-height: 1.5; }
.confirm__promo .confirm__code { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: 2px; color: #f5b84f; }

/* ══════════ ADMIN: Klienci / Newsletter ══════════ */
.card-block { background: var(--card, #141414); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.sub-stats { display: flex; gap: 12px; margin-bottom: 16px; }
.stat-mini { background: var(--card, #141414); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 18px; font-size: 13px; color: var(--ink-3, #8a8a8a); }
.stat-mini b { color: #fff; font-size: 20px; font-weight: 800; margin-right: 5px; }
.sub-search { margin-bottom: 14px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--ink-3, #8a8a8a); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tbl td { padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; color: var(--ink-2, #cfcfcf); }
.sub-row--off { opacity: .5; }
.sub-code { font-family: monospace; font-size: 12.5px; color: #f5b84f; background: rgba(245,184,79,.1); padding: 2px 7px; border-radius: 6px; }
.sub-code.is-used { color: var(--ink-3, #8a8a8a); background: rgba(255,255,255,.05); text-decoration: line-through; }
.sub-actions { white-space: nowrap; text-align: right; }
/* karnety — saldo wjazdów w tabeli */
.kar-name { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.kar-bal { font-size: 13px; color: var(--ink); white-space: nowrap; }
.kar-bal b { font-size: 15px; font-weight: 800; }
.kar-bar { margin-top: 5px; height: 5px; width: 120px; max-width: 100%; border-radius: 100px; background: rgba(255,255,255,.08); overflow: hidden; }
.kar-bar span { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #f5b84f, #ffbe00); }
.btn--xs { padding: 4px 9px; font-size: 11.5px; border-radius: 8px; }
.promo-badge { display: inline-block; background: rgba(245,184,79,.14); color: #f5b84f; font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 7px; }
/* kompozytor kampanii */
.nl-composer__h { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 15px; }
.nl-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.nl-form .fld { display: block; margin-bottom: 12px; }
.nl-form .fld > span { display: block; font-size: 12px; color: var(--ink-3, #8a8a8a); margin-bottom: 5px; }
.nl-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nl-img { display: flex; align-items: center; gap: 10px; }
.nl-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.nl-preview { position: sticky; top: 12px; }
.nl-preview__lbl { font-size: 12px; color: var(--ink-3, #8a8a8a); margin-bottom: 6px; }
.nl-iframe { width: 100%; height: 460px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #0a0a0a; }
.nl-history { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; }
.nl-history h4 { margin: 0 0 10px; font-size: 13px; color: var(--ink-2, #cfcfcf); }
.nl-hist-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.nl-hist-row span { color: var(--ink-3, #8a8a8a); font-size: 12px; white-space: nowrap; }
@media (max-width: 900px) { .nl-grid { grid-template-columns: 1fr; } .nl-preview { position: static; } }
/* kompozytor w szufladzie (Drawer): jedna kolumna, bez podwójnej karty */
.nl-drawer .nl-composer { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
.nl-drawer .nl-grid { grid-template-columns: 1fr; }
.nl-drawer .nl-preview { position: static; }
.nl-composer__hint { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2, #cfcfcf); }

/* prawa część — osobny pływający, zaokrąglony panel */
.bk-main {
  display: grid; grid-template-columns: 1fr; min-width: 0;
  background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 24px;
  overflow: hidden; box-shadow: 0 18px 44px -22px rgba(0,0,0,.6);
}
.booking-card.has-slots .bk-main { grid-template-columns: 1fr 268px; }

/* kalendarz */
.bk-cal { padding: 28px 30px; min-width: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-month { font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: capitalize; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  width: 34px; height: 34px; border-radius: 11px; border: 1px solid rgba(255,255,255,.08);
  background: var(--card); display: grid; place-items: center; color: var(--ink-2);
  transition: background .12s, color .12s, border-color .12s;
}
.cal-nav button:hover:not(:disabled) { background: rgba(255,255,255,.06); color: var(--ink); border-color: rgba(255,255,255,.16); }
.cal-nav button:disabled { opacity: .35; cursor: not-allowed; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; padding-bottom: 8px; letter-spacing: .06em; }
.cal-day {
  aspect-ratio: 1; border: none; background: transparent; border-radius: 13px;
  font-size: 14px; font-weight: 600; color: var(--ink); position: relative;
  display: grid; place-items: center; transition: background .12s;
}
.cal-day:disabled { color: var(--ink-3); opacity: .4; cursor: default; }
.cal-day.is-free { background: rgba(255,255,255,.045); color: var(--ink); }
.cal-day.is-free:hover { background: rgba(255,255,255,.10); }
.cal-day.is-today::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.cal-day.is-selected { background: var(--brand) !important; color: var(--brand-ink) !important; box-shadow: 0 6px 16px -6px rgba(255,255,255,.45); }
.cal-day.is-empty { visibility: hidden; }

/* sloty */
.bk-slots { border-left: 1px solid rgba(255,255,255,.07); padding: 28px 18px; display: flex; flex-direction: column; min-width: 0; }
.slots-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; }
.slots-date { font-weight: 700; font-size: 14px; }
.slots-date small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; }
.fmt-toggle { display: inline-flex; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 2px; }
.fmt-toggle button { border: none; background: transparent; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.fmt-toggle button.on { background: var(--pill-on); color: var(--ink); box-shadow: var(--sh-sm); }
.slots-list { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; max-height: 446px; padding-right: 4px; }
.slot {
  height: 52px; border: 1px solid rgba(255,255,255,.10); border-radius: 13px;
  background: var(--card); font-weight: 700; font-size: 15px; color: var(--ink);
  transition: border-color .12s, background .12s;
}
.slot:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.04); }
.slot.is-picked { border-color: var(--accent, #fff); background: var(--accent, #fff); color: #0F0F0F; }
.slots-empty { color: var(--ink-3); font-size: 13px; text-align: center; padding: 32px 8px; }

/* multi-slot (strefa samoobsługowa) — podpowiedź + pasek podsumowania */
.slots-hint { margin: -4px 0 12px; font-size: 12.5px; line-height: 18px; color: var(--ink-3); }
.slots-multi {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
}
.slots-multi__info { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink); margin-right: auto; }
.slots-multi__info svg { vertical-align: -2px; }
.slots-multi__info span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.slots-multi__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 18px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.slots-multi__price span { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.slots-multi .btn { flex: none; min-width: 120px; }
.bk-summary__dur { color: var(--ink-3); font-weight: 600; }
.bk-summary__price { color: #fff; font-weight: 800; }

/* formularz rezerwacji */
.bk-form { padding: 30px 32px; background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 24px; box-shadow: 0 18px 44px -22px rgba(0,0,0,.6); }
.bk-summary {
  background: #0d0d0d; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 15px 17px; margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.bk-summary div { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13.5px; }
.bk-summary .icon { color: var(--ink-3); }
.bk-summary div.bk-summary__svc { font-size: 16.5px; gap: 11px; margin-bottom: 2px; }
.bk-summary div.bk-summary__svc .dot { width: 11px; height: 11px; }
.bk-summary div.bk-summary__svc b { font-weight: 700; }
.bk-form h3 { font-size: 18px; font-weight: 700; margin-bottom: 18px; letter-spacing: 0; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* potwierdzenie */
.confirm { max-width: 520px; margin: 40px auto 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: 40px; text-align: center; }
.confirm__check { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 20px; }
.confirm h2 { font-family: var(--font); font-size: 26px; font-weight: 700; letter-spacing: 0; }
.confirm p.sub { color: var(--ink-2); margin-top: 6px; }
.confirm__box { text-align: left; background: var(--bg-2); border-radius: var(--r); padding: 18px 20px; margin: 24px 0; display: flex; flex-direction: column; gap: 10px; }
.confirm__row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.confirm__row .icon { color: var(--ink-3); margin-top: 2px; }
.confirm__row b { font-weight: 700; }

/* ============================================================
   PANEL ADMINISTRATORA
   ============================================================ */
.admin { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }
.side {
  background: #0a0a0a; color: var(--ink-2); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 12px; align-self: start;
  height: calc(100vh - 24px); margin: 12px 0 12px 12px;
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,.07); border-radius: 22px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
}
.side__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-family: var(--font); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: 0; }
.side__brand img { height: 42px; width: auto; }
.side__brand .brand__mark { background: var(--accent); }
.side__brand small { display: block; font-family: var(--font); color: var(--ink-3); font-weight: 500; font-size: 11px; letter-spacing: 0; }
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.side__link {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px;
  color: var(--ink-2); font-weight: 600; font-size: 14px; transition: background .12s, color .12s;
}
.side__link:hover { background: rgba(255,255,255,.05); color: #fff; }
.side__link.active { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.side__link .icon { color: currentColor; }
.navic { display: inline-flex; align-items: center; }
.navic .ic-a { display: none; }
.side__link.active .navic .ic-d { display: none; }
.side__link.active .navic .ic-a { display: inline-flex; }
.side__foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hairline); position: relative; }
.side__user {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 12px;
  background: none; cursor: pointer; font-family: inherit; text-align: left; transition: background .12s;
}
.side__user:hover { background: rgba(255,255,255,.05); }
.side__user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.side__user-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__user-role { font-size: 11.5px; font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.side__user-caret { width: 16px; height: 16px; color: var(--ink-3); flex: none; transition: transform .15s; }
.side__foot.open .side__user-caret { transform: rotate(180deg); }
/* awatar (pierwsza litera imienia) */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--c, #6b7280); flex: none; }
.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
/* menu pod użytkownikiem */
.side__menu {
  position: absolute; left: 4px; right: 4px; bottom: calc(100% - 4px); margin-bottom: 6px;
  background: #1d1d1d; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 5px;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,.8); display: none; z-index: 30;
}
.side__foot.open .side__menu { display: block; }
.side__menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: left; transition: background .12s, color .12s;
}
.side__menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.side__menu-item--danger:hover { color: #fda29b; background: rgba(249,112,102,.10); }
.side__menu-item .icon { width: 16px; height: 16px; }

/* chip roli — wyraziste kolory per rola */
.rolechip { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; border: 1px solid transparent; white-space: nowrap; }
.rolechip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.rolechip--admin     { background: rgba(168,85,247,.15); border-color: rgba(168,85,247,.32); color: #c79bff; }
.rolechip--manager   { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.32); color: #f4bf63; }
.rolechip--pracownik { background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.32); color: #80b1ff; }
.rolechip--klient    { background: rgba(20,184,166,.15); border-color: rgba(20,184,166,.34); color: #4fd6c4; }

/* chip statusu konta */
.schip { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; border: 1px solid transparent; white-space: nowrap; }
.schip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.schip--on  { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.30); color: #5fd58a; }
.schip--off { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--ink-3); }

/* ───────────── logowanie ───────────── */
.login-bg {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(130% 120% at 50% -10%, #1a1a1a 0%, #0c0c0c 55%, #000 100%);
}
.login-bg[hidden] { display: none; }
.login {
  position: relative; width: 100%; max-width: 384px; background: var(--card);
  border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 30px 28px 28px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85); display: flex; flex-direction: column;
}
.login__brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 24px; }
.login__brand img { height: 40px; width: auto; }
.login__brand small { display: block; color: var(--ink-3); font-weight: 500; font-size: 11px; }
.login__title { font-size: 19px; font-weight: 700; margin-bottom: 20px; letter-spacing: 0; }
.login .field { margin-bottom: 16px; }
.login__err { font-size: 13px; color: #fda29b; margin: -4px 0 14px; }
.login__err[hidden] { display: none; }
.login .btn { margin-top: 4px; }

/* ostrzeżenie o domyślnym haśle */
.pw-warn {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(245,184,0,.10); border: 1px solid rgba(245,184,0,.28); color: #f4d06a;
  font-size: 13.5px; font-weight: 500;
}
.pw-warn .icon { width: 18px; height: 18px; flex: none; color: var(--amber); }
.pw-warn button {
  margin-left: auto; flex: none; background: var(--amber); color: #1a1300; border: 0;
  font-weight: 700; font-size: 13px; padding: 7px 13px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.pw-warn button:hover { filter: brightness(1.06); }

.main { padding: 0; min-width: 0; background: var(--bg); }
.main__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 12px 12px 0; padding: 17px 22px;
  border: 1px solid rgba(255,255,255,.07); border-radius: 18px;
  background: var(--card); position: sticky; top: 12px; z-index: 5;
  box-shadow: 0 12px 28px -16px rgba(0,0,0,.65);
}
.main__top h1 { font-family: var(--font); font-size: 23px; font-weight: 700; letter-spacing: 0; }
.main__top p { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.main__inner { padding: 32px 34px 48px; max-width: 1120px; }
.main__top-right { display: flex; align-items: center; gap: 14px; }
#page-action { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.main__top-title { min-width: 0; flex: 1; }
.burger { display: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,.08); background: var(--card); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
.burger .icon { width: 20px; height: 20px; }
.side-backdrop { display: none; }

/* dzwonek powiadomień */
.bell { position: relative; }
.bell__btn { width: 40px; height: 40px; border-radius: 11px; }
.bell__btn .icon { width: 18px; height: 18px; }
.bell__badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent-red, #E21313); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; pointer-events: none; box-shadow: 0 0 0 2px var(--bg); }
.bell__badge--empty { top: -3px; right: -3px; min-width: 9px; width: 9px; height: 9px; padding: 0; background: #6b7280; }
.bell-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 350px; max-width: 86vw; max-height: 440px; overflow-y: auto; background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); padding: 6px; z-index: 70; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .14s, transform .14s; }
.bell-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.bell-item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; }
.bell-item.is-unread { background: rgba(255,255,255,.045); }
.bell-item__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; background: #818181; }
.bell-item__dot--new { background: #22c55e; }
.bell-item__dot--cancel { background: #f15757; }
.bell-item__dot--assign { background: #f59e0b; }
.bell-item__dot--usterka { background: #e11d48; }
.bell-item__dot--kosztorys { background: #6366f1; }

/* ── Usterki (zdjęcia) + Kosztorys w szczegółach rezerwacji ── */
.bk-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.bk-sec__head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.bk-sec__head::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: #fff; flex: none; }
.bk-sec__n { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.usterki { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ust { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #0d0d0d; border: 1px solid rgba(255,255,255,.08); }
.ust img { display: block; width: 100%; height: 96px; object-fit: cover; cursor: zoom-in; }
.ust__del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 100px; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ust__del:hover { background: var(--accent-red, #e11d48); }
.ust figcaption { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; }
.ust__note { font-size: 12px; color: var(--ink); line-height: 1.3; }
.ust__by { font-size: 10.5px; color: var(--ink-3); }
.ust-empty { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); padding: 10px 2px; }
.ust-add { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ust-add__btn { align-self: flex-start; cursor: pointer; }
.ust-add__btn.is-busy { opacity: .6; }

/* Kosztorys — аккордеон + читабельная stacked-вёрстка (без широкой таблицы) */
.bk-acc { padding-top: 0; }
.bk-acc[open] { padding-top: 0; }
.bk-acc__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 16px 0 4px; }
.bk-acc__sum::-webkit-details-marker { display: none; }
.bk-acc__sum::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: #fff; flex: none; }
.bk-acc__t { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.bk-acc__chev { margin-left: auto; flex: none; color: var(--ink-3); transition: transform .2s ease; }
.bk-acc[open] .bk-acc__chev { transform: rotate(180deg); }
.bk-acc__body { padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }

.ki-field { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); }
.ki-field > span { flex: none; min-width: 56px; }
.ki-field .input, .ki-field .select { flex: 1; height: 38px; }

.ki-items { display: flex; flex-direction: column; gap: 10px; }
.ki-item { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: #0d0d0d; border: 1px solid rgba(255,255,255,.07); }
.ki-item .ki-name { width: 100%; height: 38px; }
.ki-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ki-line .input { height: 36px; width: 78px; text-align: right; }
.ki-x, .ki-eq { color: var(--ink-3); font-size: 13px; flex: none; }
.ki-val { margin-left: auto; font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; }
.ki-del { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--ink-3); font-size: 17px; line-height: 1; cursor: pointer; }
.ki-del:hover { background: rgba(225,29,72,.18); color: #fb7185; }
#ki-add { align-self: flex-start; }

.ki-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ki-vat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ki-vat .input { width: 66px; height: 38px; text-align: right; }
.ki-tot { min-width: 220px; flex: 1; margin-left: auto; font-size: 13.5px; }
.ki-tot > div { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ki-tot span { color: var(--ink-3); }
.ki-tot .ki-grand { font-weight: 800; font-size: 16px; color: #fff; border-bottom: 0; border-top: 2px solid rgba(255,255,255,.18); margin-top: 4px; padding-top: 10px; }
.ki-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ki-actions #ki-save { margin-left: auto; }
.bell-item__body { min-width: 0; }
.bell-item__txt { font-size: 13px; font-weight: 500; line-height: 1.35; }
.bell-item__at { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.bell-empty { padding: 28px 10px; text-align: center; color: var(--ink-3); font-size: 13px; }
.bell-assign { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(245,158,11,.40); background: rgba(245,158,11,.12); color: #f4bf63; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .12s; }
.bell-assign:hover { background: rgba(245,158,11,.22); }
.bell-assign .icon { width: 15px; height: 15px; }
/* podświetlenie selecta pracownika po wejściu z powiadomienia */
.bk-assign-wrap.is-highlight { border-radius: 11px; animation: assign-pulse 1.8s ease 1; }
@keyframes assign-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } 18% { box-shadow: 0 0 0 3px rgba(245,158,11,.55); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
.bk-sec.is-highlight { border-radius: 11px; animation: assign-pulse 1.8s ease 1; }

.view { display: none; }
.view.active { display: block; }

/* statystyki */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }

/* analityka na pulpicie — dwa bloki w jednym UI (tytuł nad kartą, równe wysokości) */
.analytics { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 32px; align-items: stretch; }
@media (max-width: 920px) { .analytics { grid-template-columns: 1fr; } }
.ablock { display: flex; flex-direction: column; min-width: 0; }
.ablock__title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; margin: 0 2px 14px; }
.ablock__card {
  flex: 1; display: flex; padding: 4px;
  background: rgba(255,255,255,.04); border-radius: 16px;
}
.ablock__inner {
  flex: 1; min-height: 226px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 13px;
}

/* wykres słupkowy (lewy) */
.bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; padding: 26px 20px 16px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; min-width: 0; }
.bars__track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bars__bar { width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.16); position: relative; transition: background .15s; }
.bars__col:hover .bars__bar { background: rgba(255,255,255,.30); }
.bars__col.is-today .bars__bar { background: var(--brand); }
.bars__cnt { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.bars__lab { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.bars__col.is-today .bars__lab { color: var(--ink); }

/* najczęstsze usługi (prawy) — wiersze wypełniają kartę równomiernie */
.ranktab { flex: 1; display: flex; flex-direction: column; }
.ranktab__row { flex: 1; min-height: 48px; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1.05fr) 44px; align-items: center; gap: 14px; padding: 6px 18px; border-top: 1px solid rgba(255,255,255,.06); }
.ranktab__row:first-child { border-top: 0; }
.ranktab__name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ranktab__name .t { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.ranktab__n { text-align: right; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.ranktab--earn .ranktab__row { grid-template-columns: minmax(0,1.3fr) minmax(0,0.7fr) auto; }
.ranktab--earn .ranktab__n { min-width: 130px; white-space: nowrap; font-size: 13px; }
.rank__track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.rank__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.85)); }

/* ── analityka strony ── */
.stat__hint { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.ana-live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 2px 16px; padding: 11px 16px; border-radius: 12px; background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.20); font-size: 13.5px; color: var(--ink-2); }
.ana-live b { color: var(--ink); }
.ana-live__note { color: var(--ink-3); font-size: 12px; }
.ana-dot { width: 9px; height: 9px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: anaPulse 1.8s infinite; flex: none; }
@keyframes anaPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.bars--dense { gap: 2px; padding-left: 14px; padding-right: 14px; }
.bars--dense .bars__bar { border-radius: 3px 3px 1px 1px; }
.goalgrid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 18px; }
.goalgrid__it { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #0d0d0d; border: 1px solid rgba(255,255,255,.07); }
.goalgrid__ic { color: var(--ink-3); margin-bottom: 4px; }
.goalgrid__ic .icon { width: 18px; height: 18px; }
.goalgrid__n { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.goalgrid__l { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.devbar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; margin: 22px 18px 14px; background: rgba(255,255,255,.06); }
.devbar__seg { display: block; height: 100%; }
.devbar__seg--m { background: #0ea5e9; }
.devbar__seg--d { background: #a855f7; }
.devleg { display: flex; flex-wrap: wrap; gap: 18px; padding: 0 18px 18px; font-size: 13px; color: var(--ink-2); }
.devleg span { display: inline-flex; align-items: center; gap: 7px; }
.devleg b { color: var(--ink); }
.devleg .dot, .ranktab .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* kliknięcie w dzień kalendarza */
.acal__cell[data-day] { cursor: pointer; transition: background .12s, border-color .12s; }
.acal__cell[data-day]:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* lista rezerwacji dnia (drawer) */
.daylist { display: flex; flex-direction: column; gap: 8px; }
.dayrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px 12px 16px; border-radius: 12px; background: #0d0d0d; border: 1px solid rgba(255,255,255,.07); cursor: pointer; position: relative; overflow: hidden; transition: background .12s; }
.dayrow::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, #888); }
.dayrow:hover { background: rgba(255,255,255,.05); }
.dayrow__time { display: flex; flex-direction: column; min-width: 46px; font-size: 13px; font-weight: 700; flex: none; }
.dayrow__time small { color: var(--ink-3); font-weight: 600; font-size: 11px; }
.dayrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dayrow__title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dayrow__sub { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dayrow.is-cancelled { opacity: .6; }
.dayrow.is-cancelled .dayrow__title { text-decoration: line-through; }

/* lista zespołu */
.stafflist { display: flex; flex-direction: column; }
.staffrow { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid rgba(255,255,255,.06); }
.staffrow:first-child { border-top: 0; }
.staffrow__info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.staffrow__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staffrow__pos { font-size: 12.5px; color: var(--ink-3); }
.staffrow__act { display: flex; gap: 6px; flex: none; }
.stat { background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.stat__head { display: flex; align-items: center; gap: 9px; padding: 16px 18px 12px; }
.stat__ic { display: inline-flex; color: var(--ink-3); }
.stat__ic .icon { width: 18px; height: 18px; }
.stat__label { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
/* ikona „i" z opisem metryki (tooltip natywny on hover/focus) */
.stat__info { margin-left: auto; display: inline-flex; align-items: center; color: var(--ink-3); cursor: help; transition: color .15s ease; }
.stat__info:hover, .stat__info:focus-visible { color: var(--ink); outline: none; }
/* kastomowy dymek podpowiedzi dla [data-tip] (opis metryk itp.) */
.tip-pop {
  position: fixed; z-index: 300; max-width: 300px; padding: 10px 12px;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  color: var(--ink, #ececec); font-size: 12.5px; line-height: 1.55;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.tip-pop.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.stat__canvas { margin: 0 10px 10px; flex: 1; display: flex; align-items: center; background: #0d0d0d; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px 18px; min-height: 72px; }
.stat__value { font-family: var(--font); font-size: 34px; font-weight: 700; letter-spacing: 0; line-height: 1; }

/* tabela */
.panel { background: #fff; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; overflow: hidden; margin-bottom: 24px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel__head h2 { font-size: 16px; font-weight: 700; }

/* segmentowany przełącznik (Aktywni / Archiwum) */
.seg { display: inline-flex; gap: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 3px; flex: none; }
.seg__b { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 700; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; }
.seg__b:hover { color: var(--ink); }
.seg__b.is-on { background: rgba(255,255,255,.10); color: var(--ink); }
.seg__n { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.10); font-size: 11px; font-weight: 800; }
.seg__b.is-on .seg__n { background: rgba(255,255,255,.18); }

/* tekst w modalce potwierdzenia */
.confirm-msg { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 11px 20px; background: var(--bg); border-bottom: 1px solid var(--border); }
.table td { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fcfcfd; }
.table__strong { font-weight: 700; }
.table__sub { color: var(--ink-3); font-size: 12.5px; }
.cell-flex { display: flex; align-items: center; gap: 10px; }
.empty-row { text-align: center; color: var(--ink-3); padding: 48px 20px; }

/* ── tabela w stylu UI (COSS.COM / shadcn) ── */
.dtable { width: 100%; background: rgba(255,255,255,.04); border-radius: 16px; padding: 4px; }
.dtable__scroll { width: 100%; overflow-x: auto; }
.dtable__head, .dtable__row {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 1.7fr 1fr 1fr 52px;
  align-items: stretch; min-width: 720px;
}
.dtable--et .dtable__head, .dtable--et .dtable__row { grid-template-columns: minmax(0,1.8fr) minmax(0,2.6fr) minmax(0,1fr) 104px; min-width: 660px; }
.dtable--integ .dtable__head, .dtable--integ .dtable__row { grid-template-columns: minmax(0,1.7fr) minmax(0,1.1fr) minmax(0,0.95fr) minmax(0,1.1fr) 166px; min-width: 800px; }
.dtable--users .dtable__head, .dtable--users .dtable__row { grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 92px; min-width: 580px; }
.dtable--inv .dtable__head, .dtable--inv .dtable__row { grid-template-columns: minmax(0,1fr) minmax(0,1.7fr) minmax(0,0.9fr) minmax(0,0.9fr) minmax(0,1fr) 132px; min-width: 780px; }
.dtable--staff .dtable__head, .dtable--staff .dtable__row { grid-template-columns: var(--cols); min-width: var(--minw, 700px); }
/* KLUCZOWE: body musi mieć tę samą min-width co wiersze. Bez tego przy scrollu
   poziomym (ekran węższy niż tabela) body kurczy się do szerokości viewportu,
   a overflow:hidden ucina wiersze → nagłówek i dane się rozjeżdżają. */
.dtable__body { min-width: 720px; }
.dtable--et .dtable__body { min-width: 660px; }
.dtable--integ .dtable__body { min-width: 800px; }
.dtable--users .dtable__body { min-width: 580px; }
.dtable--inv .dtable__body { min-width: 780px; }
.dtable--staff .dtable__body { min-width: var(--minw, 700px); }
.dtable--bk .dtable__head, .dtable--bk .dtable__row { grid-template-columns: 1fr 1.5fr 1fr 1.6fr 0.9fr 1fr 52px; min-width: 880px; }
.dtable--bk .dtable__body { min-width: 880px; }
.dtable--sub .dtable__head, .dtable--sub .dtable__row { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) minmax(0,0.8fr) minmax(0,0.9fr) minmax(0,0.9fr) minmax(0,0.9fr) 168px; min-width: 860px; }
.dtable--sub .dtable__body { min-width: 860px; }
.dtable--kar .dtable__head, .dtable--kar .dtable__row { grid-template-columns: minmax(0,0.9fr) minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,0.9fr) minmax(0,0.9fr) 232px; min-width: 900px; }
.dtable--kar .dtable__body { min-width: 900px; }
.dtable__row.sub-row--off { opacity: .5; }
.dtable__cell.sub-actions { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.stat__unit { font-size: 20px; font-weight: 600; color: var(--ink-3); }
/* faktury: podgląd przykładowych wierszy */
.dtable--demo { opacity: .5; pointer-events: none; -webkit-user-select: none; user-select: none; }
.inv-demo-note { display: flex; align-items: center; gap: 9px; padding: 11px 14px; margin-bottom: 10px; border: 1px dashed rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.02); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.inv-demo-note .icon { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
/* zespół: liczba wizyt, lista usług, wiersz podsumowania */
.staffnum { font-family: var(--font); font-size: 19px; font-weight: 700; line-height: 1; color: var(--ink); }
.svc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink); cursor: help; outline: none; transition: background .12s, border-color .12s; }
.svc-count:hover, .svc-count:focus-visible { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
/* drawer: szczegóły pracownika */
.staffdt__head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.staffdt__name { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.staffdt__pos { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
/* nagłówek sekcji „Wykonane usługi” + karty usług */
.svc-block__head { display: flex; align-items: center; gap: 9px; margin: 22px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.svc-block__head::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: #fff; flex: none; }
.svc-block__per { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.svc-block__total { margin-left: auto; min-width: 26px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.svc-cards { display: flex; flex-direction: column; gap: 8px; }
.svc-card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; background: #0d0d0d; border: 1px solid rgba(255,255,255,.08); }
.svc-card__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.svc-card__name { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.svc-card__n { flex: none; min-width: 38px; text-align: center; padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; font-weight: 800; font-size: 14px; }
.svc-card__n small { font-weight: 600; color: var(--ink-3); }
.dtable__row--total { background: rgba(255,255,255,.03); }
.dtable__row--total .dtable__cell { border-top: 1px solid rgba(255,255,255,.10); }
.dtable__body .dtable__row--total:hover { background: rgba(255,255,255,.03); }
.field__opt { color: var(--ink-3); font-weight: 500; }
.rthumb { width: 46px; height: 30px; border-radius: 7px; overflow: hidden; flex: none; background: var(--bg-0); }
.rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rlogo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; color: #fff; flex: none; font-size: 14px; }
.cellcol { display: flex; flex-direction: column; min-width: 0; }
.dtable__wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dtable__head { padding: 2px 0; }
.dtable__head .dtable__cell { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.dtable__body { background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 13px; overflow: hidden; }
.dtable__cell {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 44px; padding: 9px 14px; font-size: 14px; font-weight: 500;
  color: var(--ink); min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.dtable__cell--right { align-items: flex-end; text-align: right; }
.dtable__body .dtable__row .dtable__cell { border-bottom: 1px solid rgba(255,255,255,.07); }
.dtable__body .dtable__row:last-child .dtable__cell { border-bottom: none; }
.dtable__row { transition: background .12s ease; }
.dtable__body .dtable__row:hover { background: rgba(255,255,255,.025); }
.dtable__strong { font-weight: 600; color: var(--ink); }
.dtable__sub { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.dtable__muted { color: var(--ink-3); }

/* odznaka statusu z kropką */
.sbadge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; background: var(--card);
  font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: .12px; white-space: nowrap;
}
.sbadge__dot { width: 6px; height: 6px; border-radius: 50%; background: #818181; flex: none; }
.sbadge--ok     { background: rgba(16,185,129,.12);  border-color: rgba(16,185,129,.28);  color: #4ade9f; }
.sbadge--warn   { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.30);  color: #f5b84f; }
.sbadge--danger { background: rgba(241,87,87,.12);   border-color: rgba(241,87,87,.30);   color: #f58b8b; }
.sbadge--muted  { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: var(--ink-2); }
.sbadge--ok .sbadge__dot     { background: #10b981; }
.sbadge--warn .sbadge__dot   { background: #f59e0b; }
.sbadge--danger .sbadge__dot { background: #f15757; }
.sbadge--muted .sbadge__dot  { background: #818181; }
/* status-bejdż w drawerze (.kv2 > span tłumiło tekst na --ink-2) — przywróć żywy kolor jak w tabeli */
.kv2 > .sbadge.sbadge--ok     { color: #4ade9f; }
.kv2 > .sbadge.sbadge--warn   { color: #f5b84f; }
.kv2 > .sbadge.sbadge--danger { color: #f58b8b; }

/* panel z tabelą = bez własnego pudełka (tabela ma własny styl karty) */
.panel:has(.dtable) { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.panel:has(.dtable) .panel__head { border-bottom: none; padding: 2px 4px 14px; }

/* przełącznik Lista / Kalendarz */
.seg { display: inline-flex; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 13.5px; line-height: 1; border-radius: 9px; cursor: pointer; transition: background .12s, color .12s; }
.seg button .icon { width: 16px; height: 16px; display: block; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: rgba(255,255,255,.10); color: var(--ink); }

/* kalendarz miesięczny (admin) */
.acal { background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; overflow: hidden; }
.acal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; }
.acal__title { font-family: var(--font); font-size: 20px; font-weight: 700; }
.acal__title span { color: var(--ink-3); font-weight: 600; }
.acal__nav { display: flex; align-items: center; gap: 8px; }
.acal__dow { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 8px; }
.acal__dow div { padding: 4px 10px 8px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.acal__grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(116px, 1fr); gap: 6px; padding: 0 8px 8px; }
.acal__cell { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 12px; padding: 7px 8px; min-width: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.acal__cell.is-out { opacity: .4; }
.acal__num { font-size: 13px; font-weight: 700; color: var(--ink-2); align-self: flex-end; min-width: 22px; height: 22px; display: grid; place-items: center; }
.acal__cell.is-today .acal__num { background: var(--brand); color: var(--brand-ink); border-radius: 8px; }
.acal__events { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
.cal-ev { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 4px 7px; border-radius: 7px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--ink); font-size: 12px; min-width: 0; transition: background .12s; }
.cal-ev::before { content: ""; width: 3px; align-self: stretch; min-height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }
.cal-ev__t { font-weight: 700; flex: none; }
.cal-ev__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cal-ev.is-cancelled { opacity: .5; }
.cal-ev.is-cancelled .cal-ev__n { text-decoration: line-through; }
/* oczekujące (pending) — widoczne, ale oznaczone: przerywana ramka + amber, czeka na potwierdzenie */
.cal-ev.is-pending { background: rgba(245,158,11,.12); border: 1px dashed rgba(245,158,11,.5); padding: 3px 6px; }
.cal-ev.is-pending::before { background: #f59e0b; }
.cal-ev.is-pending .cal-ev__n { color: #f5b84f; }
.cal-more { font-size: 11px; color: var(--ink-3); font-weight: 600; padding: 1px 7px; }

/* wiersz klucz–wartość (modal szczegółów) */
.kv2 { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13.5px; }
.kv2 > span { color: var(--ink-2); }
.kv2 > b { color: var(--ink); font-weight: 600; text-align: right; }
.kv2 .bk-assign-wrap { width: 210px; max-width: 62%; }
.kv2 { align-items: center; }
@media (max-width: 720px) { .acal__grid { grid-auto-rows: minmax(96px, 1fr); } .cal-ev__t { display: none; } }

/* karty event-type w adminie */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; grid-auto-rows: 1fr; }
.ecard {
  background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 0;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
}
.ecard__head { padding: 18px 18px 14px; }
.ecard__top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.ecard__top .dot { margin-top: 7px; }
.ecard__title { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.ecard__desc { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
/* wewnętrzna strefa podglądu (jak w bibliotece UI) */
.ecard__canvas {
  position: relative; flex: 1; min-height: 156px; margin: 0 10px 10px;
  border-radius: 14px; overflow: hidden; background: #0d0d0d; border: 1px solid rgba(255,255,255,.06);
}
.ecard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecard__ph { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); }
.ecard__dur {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: rgba(8,8,8,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 12.5px; font-weight: 600;
}
.ecard__dur .icon { width: 15px; height: 15px; }
.ecard__actions { position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; gap: 7px; }
.ecard__actions .iconbtn { background: rgba(8,8,8,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,.16); color: #fff; }
.ecard__actions .iconbtn:hover { background: rgba(255,255,255,.14); }
/* przełącznik widoczności usługi (kalendarz + strona) */
.etoggle { display: inline-flex; align-items: center; cursor: pointer; }
.etoggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
/* kolory jak na stronie „Dostępność” (.switch): off = szary, on = #34c759 */
.etoggle__tr { width: 40px; height: 24px; border-radius: 999px; background: rgba(120,120,128,.40);
  display: flex; align-items: center; padding: 2px; transition: background .25s ease; }
.etoggle__th { width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.etoggle input:checked + .etoggle__tr { background: #34c759; }
.etoggle input:checked + .etoggle__tr .etoggle__th { transform: translateX(16px); }
.etoggle input:focus-visible + .etoggle__tr { box-shadow: 0 0 0 3px rgba(52,199,89,.35); }
/* karta wyłączonej usługi */
.ecard--off .ecard__head { opacity: .55; }
.ecard--off .ecard__img, .ecard--off .ecard__ph { opacity: .4; filter: grayscale(.4); }
.ecard__badge { position: absolute; left: 10px; top: 10px; z-index: 3; padding: 4px 10px; border-radius: 999px;
  background: rgba(8,8,8,.78); border: 1px solid rgba(255,255,255,.18); color: #f5b84f; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.iconbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: var(--card); display: grid; place-items: center; color: var(--ink-2); transition: background .12s, color .12s, border-color .12s; }
.iconbtn:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.iconbtn--danger:hover { color: var(--danger); border-color: rgba(241,87,87,.4); background: var(--danger-bg); }

/* dostępność */
.avail-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.avail-row:last-child { border-bottom: none; }
.avail-day { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.avail-times { display: flex; align-items: center; gap: 10px; }
.avail-times .input { width: 110px; }
.avail-times .sep { color: var(--ink-3); }
.avail-row.off .avail-times { opacity: .4; pointer-events: none; }

/* dni wolne / urlopy */
.blk-empty { color: var(--ink-3); font-size: 13.5px; padding: 6px 0 14px; }
.blk-row { display: grid; grid-template-columns: 22px 150px 1fr 34px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.blk-row:first-child { border-top: 1px solid var(--border); }
.blk-row__ic { color: var(--ink-3); display: inline-flex; }
.blk-row__ic .icon { width: 16px; height: 16px; }
.blk-row__date { font-weight: 600; font-size: 13.5px; }
.blk-row__label { color: var(--ink-2); font-size: 13.5px; }
.blk-add { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; }
.blk-add__fields { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 0 12px; flex: 1; }
.blk-add__fields .field { margin-bottom: 0; }
.blk-add > .btn { flex: none; margin-bottom: 1px; }

/* ustawienia powiadomień */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: none; }
.set-row__txt { display: flex; flex-direction: column; gap: 2px; }
.set-row__txt > span { font-weight: 600; font-size: 14px; }
.set-row__txt > small { color: var(--ink-3); font-size: 12.5px; }
.set-sub { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 8px; }
/* edytor opcji usługi — karta listy wyboru */
.opt-card { background: #0d0d0d; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 13px 13px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 11px; }
.opt-card__head { display: flex; align-items: center; justify-content: space-between; }
.opt-card__tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.opt-field { display: flex; flex-direction: column; gap: 5px; }
.opt-field__lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.opt-field__lbl em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.opt-card__flags { display: flex; flex-wrap: wrap; gap: 9px 18px; padding-top: 1px; }
.opt-card__flags .bf-check { margin: 0; white-space: nowrap; font-size: 13px; }
/* repeater wariantów z ceną */
.opt-choices-list { display: flex; flex-direction: column; gap: 7px; }
.opt-choice { display: flex; flex-direction: column; gap: 7px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.opt-choice:last-child { border-bottom: 0; }
.opt-choice__main { display: grid; grid-template-columns: 1fr 176px 34px; gap: 8px; align-items: center; }
.ch-note { font-size: 12.5px; }
.ch-price { display: flex; align-items: center; gap: 5px; }
.ch-price-i, .ch-price-to { width: 100%; min-width: 0; text-align: center; padding-left: 6px; padding-right: 6px; }
.ch-price__dash { color: var(--ink-3); flex: none; }
.ch-price__u { color: var(--ink-3); font-size: 13px; font-weight: 600; flex: none; }
/* edytor cennika orientacyjnego (pozycje od–do) */
.price-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); margin-bottom: 8px; }
.price-row__main { display: flex; gap: 8px; align-items: center; }
.price-row .pr-name { flex: 1 1 auto; min-width: 0; }
.pr-range { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.pr-range .input { width: 62px; text-align: center; padding-left: 6px; padding-right: 6px; }
.pr-dash { color: var(--ink-3); }
.pr-u { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.pr-range .pr-unit { width: 74px; text-align: left; }
.pr-note, .pr-text { font-size: 12.5px; }
.pr-text { color: var(--ink-2); }
.opt-ch-add { margin-top: 8px; align-self: flex-start; }
.kv2__add { color: var(--ink-3); font-weight: 600; font-size: 12.5px; margin-left: 4px; }

.set-field { padding-top: 18px; }
.set-field .field { margin-bottom: 0; }
.rem-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.set-actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: 720px; }
.copy-row { display: flex; gap: 8px; }
.copy-row .input { flex: 1; }
.copy-row .btn { flex: none; }

/* filtry listy rezerwacji */
.bk-head { flex-wrap: wrap; gap: 12px; }
.bk-filters { display: flex; gap: 10px; align-items: center; }
.bk-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: var(--card); }
.bk-search .icon { width: 16px; height: 16px; color: var(--ink-3); flex: none; transform: scaleX(-1); }
.bk-search input { background: none; border: 0; outline: none; color: var(--ink); font-size: 14px; font-family: inherit; width: 230px; max-width: 46vw; }
.bk-search input::placeholder { color: #818181; }
@media (max-width: 600px) { .bk-filters { width: 100%; flex-direction: column; align-items: stretch; } .bk-search input { width: 100%; max-width: none; } }

/* przełącznik */
/* przełącznik w stylu iOS, czarna gałka */
.switch { position: relative; width: 52px; height: 31px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: rgba(120,120,128,.40); border-radius: 999px; transition: background .25s ease; }
.switch span::before {
  content: ""; position: absolute; width: 27px; height: 27px; left: 2px; top: 2px;
  background: #ffffff; border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.16);
  transition: transform .25s cubic-bezier(.4,.1,.3,1);
}
.switch input:checked + span { background: #34c759; }
.switch input:checked + span::before { transform: translateX(21px); }

/* integracje */
.integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.integrations { grid-auto-rows: 1fr; }
.icard { background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.icard__head { display: flex; align-items: center; gap: 12px; }
.icard__logo { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-weight: 900; color: #fff; flex: none; font-size: 17px; }
.icard__name { font-weight: 700; font-size: 16px; }
.icard__url { color: var(--ink-3); font-size: 12.5px; word-break: break-all; }
.icard__badges { display: flex; gap: 7px; flex-wrap: wrap; }
.icard__body { display: flex; flex-direction: column; background: #0d0d0d; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 4px 14px; }
.icard__foot { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 10px 0; }
.kv + .kv { border-top: 1px dashed rgba(255,255,255,.09); }
.kv span:first-child { color: var(--ink-2); }
.kv span:last-child { font-weight: 600; }

.veh-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.veh { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; }
.veh__plate { font-weight: 800; font-family: 'Inter', monospace; letter-spacing: .02em; background: var(--bg-2); padding: 2px 7px; border-radius: 5px; }

/* ───────────── modal ───────────── */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; place-items: center; z-index: 50; padding: 20px; }
.modal-bg.open { display: grid; }
.modal {
  background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 24px;
  box-shadow: 0 32px 80px -28px rgba(0,0,0,.8); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.07); position: sticky; top: 0; background: var(--card); z-index: 1; }
.modal__head h3 { font-size: 18px; font-weight: 700; letter-spacing: 0; }
.modal__body { padding: 24px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.07); position: sticky; bottom: 0; background: var(--card); }

/* ── panel rezerwacji wysuwany z prawej (drawer) ── */
.drawer-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 60;
}
.drawer-bg.open { opacity: 1; visibility: visible; }
.drawer {
  position: absolute; top: 14px; right: 14px; bottom: 14px; height: auto; width: 460px; max-width: calc(100vw - 28px);
  background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; overflow: hidden;
  box-shadow: -28px 0 90px -24px rgba(0,0,0,.85);
  display: flex; flex-direction: column;
  transform: translateX(calc(100% + 28px)); transition: transform .34s cubic-bezier(.4,0,.2,1);
}
.drawer-bg.open .drawer { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.07); flex: none; }
.drawer__head h3 { font-size: 18px; font-weight: 700; letter-spacing: 0; }
.drawer__body { padding: 24px; overflow: auto; flex: 1; }
.drawer__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.07); flex: none; }
.drawer__foot:empty { display: none; }

/* klikalne wiersze rezerwacji */
.dtable__body .dtable__row[data-row] { cursor: pointer; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* pasek akcji na stronie (segment + przycisk) */
.pa-row { display: flex; align-items: center; gap: 10px; }

/* formularz rezerwacji — podpowiedź slotów + zgoda */
.bf-slots { margin: -6px 0 16px; }
.bf-slots__label { font-size: 12.5px; color: var(--ink-3); display: block; margin-bottom: 8px; }
.bf-slots__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-slot {
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit;
  padding: 6px 11px; border-radius: 8px; background: var(--bg-2, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10); transition: background .12s, color .12s, border-color .12s;
}
.bf-slot:hover { color: #fff; background: rgba(255,255,255,.09); }
.bf-slot.on { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.bf-check {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; user-select: none; margin: 2px 0 4px;
}
.bf-check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: none; cursor: pointer; position: relative;
  border: 1px solid rgba(255,255,255,.24); border-radius: 4px; background: rgba(255,255,255,.02); transition: background .12s, border-color .12s; }
.bf-check input:hover { border-color: rgba(255,255,255,.5); }
.bf-check input:checked { background: #fff; border-color: #fff; }
.bf-check input:checked::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* upload zdjęcia usługi */
.up { display: flex; gap: 14px; align-items: stretch; }
.up__preview {
  width: 168px; aspect-ratio: 388 / 223; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--bg-0); border: 1px solid var(--border); display: grid; place-items: center;
}
.up__preview img { width: 100%; height: 100%; object-fit: cover; }
.up__ph { color: var(--ink-3); }
.up__ph svg { width: 30px; height: 30px; }
.up__side { display: flex; flex-direction: column; gap: 8px; justify-content: center; }

/* ───────────── toast ───────────── */
.toasts { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { background: #1a1a1a; color: #fff; border: 1px solid var(--border); padding: 13px 16px; border-radius: var(--r); box-shadow: var(--sh-lg); font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 10px; min-width: 240px; animation: toast-in .2s ease; }
.toast--ok .icon { color: #4ade80; }
.toast--err { background: #7a271a; }
.toast--err .icon { color: #fda29b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ───────────── spinner ───────────── */
.spinner { width: 18px; height: 18px; border: 2px solid var(--border-2); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-wrap { display: grid; place-items: center; padding: 40px; }

/* ───────────── responsywność ───────────── */
@media (max-width: 860px) {
  .booking-card, .booking-card.has-slots .bk-main, .booking-card.is-form { grid-template-columns: 1fr; }
  .bk-meta { border-right: none; border-bottom: 1px solid var(--border); }
  .booking-card.has-slots .bk-main { grid-template-columns: 1fr; }
  .bk-slots { border-left: none; border-top: 1px solid var(--border); }
  .slots-list { max-height: 260px; }

  /* компактный блок деталей на мобиле → календарь виден сразу, без лишнего скролла */
  .pad-view { padding: 4px 16px 60px; }
  .booking-card { gap: 12px; margin-top: 0; }
  .bk-meta { padding: 16px 18px; gap: 10px; border-radius: 18px; }
  .bk-host__av { width: 34px; height: 34px; border-radius: 11px; font-size: 13px; }
  .bk-title { font-size: 19px; }
  .bk-facts { gap: 7px; }
  .bk-fact { font-size: 13px; }
  .bk-desc { font-size: 13px; line-height: 1.5; padding-top: 11px; }
}
@media (max-width: 860px) {
  /* off-canvas sidebar + burger */
  .admin { display: block; }
  .side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 268px; max-width: 84vw; height: 100%;
    margin: 0; border-radius: 0 20px 20px 0; transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 80;
  }
  .side.open { transform: translateX(0); }
  .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 78; }
  .side-backdrop.open { opacity: 1; visibility: visible; }
  .burger { display: inline-flex; order: 0; }

  /* header: rząd 1 = burger + tytuł + dzwonek (wyrównane do środka); rząd 2 = akcje pełna szerokość */
  .main__top { position: static; margin: 10px; padding: 12px 14px; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .main__top-title { order: 1; flex: 1 1 auto; align-self: center; }
  .burger, .bell { align-self: center; }
  .bell { order: 2; }
  #page-action { order: 3; flex: 1 1 100%; width: 100%; }
  #page-action:empty { display: none; }
  #page-action > .btn { width: 100%; }
  .main__top h1 { font-size: 19px; }
  .main__top p { display: none; }

  /* akcje strony — pełna szerokość, przełącznik osobno */
  .pa-row { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .pa-row .seg { display: flex; width: 100%; }
  .pa-row .seg > button { flex: 1; justify-content: center; }
  .pa-row .btn { width: 100%; }
  .bk-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .bk-head .seg { display: flex; width: 100%; }
  .bk-head .seg > button { flex: 1; justify-content: center; }

  /* drawer z dołu; przyciski w stopce zawijają się do 2 rzędów */
  .drawer { top: auto; right: 0; left: 0; bottom: 0; width: auto; max-width: none; height: auto; max-height: 88vh; border-radius: 22px 22px 0 0; transform: translateY(100%); box-shadow: 0 -24px 60px -20px rgba(0,0,0,.85); }
  .drawer-bg.open .drawer { transform: translateY(0); }
  .drawer__foot, .modal__foot { flex-wrap: wrap; }
  .drawer__foot .btn, .modal__foot .btn { flex: 1 1 calc(50% - 5px); justify-content: center; }

  /* kalendarz — zwarcie, rezerwacje jako kolorowe kropki */
  .acal__head { padding: 12px 12px 8px; flex-wrap: wrap; gap: 8px; }
  .acal__title { font-size: 18px; }
  .acal__dow div { padding: 4px 2px 6px; font-size: 9px; letter-spacing: 0; }
  .acal__grid { grid-auto-rows: minmax(56px, auto); gap: 4px; padding: 0 6px 8px; }
  .acal__cell { padding: 5px; gap: 4px; border-radius: 9px; }
  .acal__num { font-size: 12px; min-width: 18px; height: 18px; }
  .acal__events { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .cal-ev { width: 7px; height: 7px; min-height: 0; padding: 0; border-radius: 50%; background: var(--c); }
  .cal-ev::before, .cal-ev__t, .cal-ev__n { display: none; }
  .cal-more { font-size: 9px; padding: 0; white-space: nowrap; }

  /* formularze bez poziomego scrolla */
  .main__inner { padding: 18px 14px 40px; }
  .grid-2 { grid-template-columns: 1fr; }
  .analytics { grid-template-columns: 1fr; }
  .avail-row { grid-template-columns: 1fr; gap: 8px; }
  .avail-times { flex-wrap: wrap; }
  .blk-add { flex-direction: column; align-items: stretch; }
  .blk-add__fields { grid-template-columns: 1fr; }
  .set-row { flex-wrap: wrap; }

  /* statystyki — kompaktowe, 2 w rzędzie */
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
  .stat__head { padding: 12px 12px 6px; gap: 7px; }
  .stat__ic .icon { width: 16px; height: 16px; }
  .stat__label { font-size: 11.5px; line-height: 1.2; }
  .stat__canvas { margin: 0 8px 8px; padding: 9px 12px; min-height: 0; border-radius: 12px; }
  .stat__value { font-size: 21px; }

  /* tabele zostają tabelami — płynny scroll w poziomie z momentum */
  .dtable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
}

/* ============================================================
   POPRAWKI DLA CIEMNEGO MOTYWU
   (powierzchnie zakodowane na biało → tokeny motywu)
   ============================================================ */
.input,
.textarea,
.select,
.slot,
.cal-nav button,
.iconbtn,
.stat,
.panel,
.ecard,
.icard,
.modal,
.main__top { background: var(--card); }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-3); }

.btn--soft:hover { background: #2a2a2a; }
.cal-day.is-free:hover { background: #2a2a2a; }
.table tr:hover td { background: rgba(255,255,255,.035); }
.btn--danger,
.iconbtn--danger:hover { border-color: rgba(249,112,102,.45); }

.badge--demo { background: rgba(245,184,0,.15); color: var(--amber); }
.badge--live { background: rgba(56,139,253,.18); color: #6cb6ff; }
.badge--off  { background: rgba(255,255,255,.08); color: var(--ink-3); }

/* ============================================================
   ODSTĘP MIĘDZYLITEROWY 1% (Body / Label) — lepsza czytelność
   (nagłówki Druk Cyr pozostają 0%, dlatego nie ma tu .lead h1)
   ============================================================ */
.btn, .side__link, .field > label, .input, .textarea, .select,
.et-card__title, .et-card__desc, .lead p,
.bk-title, .bk-desc, .bk-fact, .bk-host__name, .bk-summary div,
.slot, .slots-date, .badge, .stat__label, .stat__value,
.panel__head h2, .table td, .table th, .ecard__title, .ecard__desc,
.icard__name, .icard__url, .kv, .confirm h2, .confirm p.sub, .confirm__row,
.main__top h1, .main__top p, .bk-form h3, .modal__head h3, .et-card__meta {
  letter-spacing: 0.01em;
}

/* ============================================================
   GRADIENTOWE OBRYSY (jasne u góry → ciemne na dole)
   maska na pseudo-elemencie — działa na każdym tle i zaokrągleniu
   ============================================================ */
/* .side ma własne position (sticky/fixed) — nie nadpisujemy go tutaj, bo psuło layout */
.main__top,
.bk-meta, .bk-main, .bk-form, .bk-summary,
.ecard, .icard, .stat, .acal, .modal,
.dtable__body, .panel,
.stat__canvas, .ecard__canvas, .icard__body {
  position: relative;
  border: 0;
}
.side { border: 0; }
.side::after, .main__top::after,
.bk-meta::after, .bk-main::after, .bk-form::after, .bk-summary::after,
.ecard::after, .icard::after, .stat::after, .acal::after, .modal::after,
.dtable__body::after, .panel:not(:has(.dtable))::after,
.stat__canvas::after, .ecard__canvas::after, .icard__body::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--edge); pointer-events: none; z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* CMS — edytor treści: blok logo */
.cg-logo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cg-logo__prev {
  width: 96px; height: 96px; flex: none; border-radius: 14px;
  background: repeating-conic-gradient(#0000000a 0% 25%, transparent 0% 50%) 0 / 16px 16px, #fff;
  border: 1px solid var(--line, #e5e7eb); display: grid; place-items: center; overflow: hidden;
}
.cg-logo__prev img { max-width: 80%; max-height: 80%; object-fit: contain; display: block; }
.cg-logo__act { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* CMS — strony usług: lista + edytor */
.svc-list { display: flex; flex-direction: column; padding: 8px; gap: 4px; }
.svc-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 10px; padding: 14px 16px; cursor: pointer;
  transition: background .15s ease; }
.svc-row:hover { background: var(--hover, rgba(0,0,0,.04)); }
.svc-row__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.svc-row__name { font-weight: 600; font-size: 15px; }
.svc-row__slug { font-size: 12px; color: var(--muted, #9aa0aa); }
.svc-row__arr { transform: rotate(-90deg); opacity: .5; flex: none; }
/* (usunięto zduplikowane .svc-card z jasnego motywu — kolidowało z czytelnym ciemnym
   stylem wyżej (767–776) i wypychało licznik w dół przez margin-top:26px) */
.faq-edit { padding: 12px 0; border-bottom: 1px dashed var(--line, #e5e7eb); }
.faq-edit:last-child { border-bottom: 0; }
.faq-edit__row { display: flex; gap: 10px; align-items: flex-end; }
.faq-edit__row .field { flex: 1; }
.faq-edit__del { flex: none; margin-bottom: 4px; }

/* CMS — wizualny edytor usługi (iframe) */
.svc-edit { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 132px); }
.svc-edit__hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted, #9aa0aa); padding: 0 4px; }
.svc-edit__hint > span { min-width: 0; }
.bl-langs { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-2, rgba(255,255,255,.05)); border: 1px solid var(--border-2, rgba(255,255,255,.12)); }
.bl-lang { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted, #9aa0aa); padding: 5px 10px; border-radius: 7px; transition: background .12s, color .12s; }
.bl-lang:hover { color: var(--ink, #fff); }
.bl-lang.is-active { background: var(--accent, #0ea5e9); color: #0a0a0a; }   /* --accent = biały → tekst aktywnej ciemny, by był widoczny */

/* Logi serwera (admin) */
.log-list { display: flex; flex-direction: column; padding: 8px; }
.logrow { padding: 12px 14px; border-bottom: 1px solid var(--line, rgba(255,255,255,.06)); }
.logrow:last-child { border-bottom: 0; }
.logrow__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.logrow__when { color: var(--muted, #9aa0aa); font-variant-numeric: tabular-nums; }
.logrow__tag { font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--bg-2, rgba(255,255,255,.06)); color: var(--ink-2, #c7ccd4); }
.logrow__path { color: var(--ink-2, #c7ccd4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.logrow__user { margin-left: auto; color: var(--muted, #9aa0aa); }
.logrow--err .logrow__tag { background: rgba(239,68,68,.16); color: #f87171; }
.logrow--front .logrow__tag { background: rgba(245,158,11,.16); color: #fbbf24; }
.logrow__copy { margin-left: auto; all: unset; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--ink-2, #c7ccd4);
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line, rgba(255,255,255,.12)); }
.logrow__copy:hover { background: var(--bg-2, rgba(255,255,255,.06)); color: var(--ink, #fff); }
.logrow__user { margin-left: 4px; }
.logs-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2, #c7ccd4); cursor: pointer; user-select: none; }
.logrow__msg { margin-top: 6px; font-size: 13.5px; color: var(--ink, #fff); }
.logrow__det { margin-top: 8px; }
.logrow__det summary { cursor: pointer; font-size: 12px; color: var(--accent, #0ea5e9); }
.logrow__det pre { margin-top: 8px; padding: 12px; border-radius: 10px; background: #0a0e13; border: 1px solid var(--line, rgba(255,255,255,.08));
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #cdd6e0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.log-empty { padding: 24px; text-align: center; color: var(--muted, #9aa0aa); }

/* Toolbar wyszukiwania w listach (blog / usługi) */
.list-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 4px; flex-wrap: wrap; position: relative; }
.list-toolbar .input { flex: 1 1 220px; min-width: 160px; padding-left: 34px; }
.list-toolbar__ic { position: absolute; left: 22px; width: 16px; height: 16px; color: var(--muted, #9aa0aa); pointer-events: none; }
.list-toolbar .select { flex: 0 0 auto; }
.list-empty { padding: 22px; text-align: center; color: var(--muted, #9aa0aa); font-size: 14px; }
/* wskaźnik niezapisanych zmian na przycisku Zapisz */
.btn--dirty { box-shadow: 0 0 0 2px rgba(14,165,233,.55), 0 4px 14px -4px rgba(14,165,233,.5); }
.svc-edit__frame { flex: 1; min-height: 360px; border: 1px solid var(--line, #e5e7eb); border-radius: 14px; overflow: hidden; background: #0a0a0a; }
.svc-edit__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* CMS — blog: lista + edytor bloków */
.bl-badge { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .01em; }
.bl-badge--on { background: rgba(16,185,129,.14); color: #059669; }
.bl-badge--off { background: rgba(148,163,184,.18); color: #64748b; }
.cg-logo__prev--wide { width: 180px; height: 108px; }
.cg-logo__prev--wide img { max-width: 100%; max-height: 100%; }
.blk { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; margin-bottom: 12px; background: var(--card, #fff); overflow: hidden; }
.blk__head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: var(--hover, rgba(0,0,0,.03)); border-bottom: 1px solid var(--line, #e5e7eb); }
.blk__type { font-weight: 700; font-size: 13px; }
.blk__tools { display: flex; gap: 4px; }
.blk__tools .iconbtn { font-size: 15px; line-height: 1; }
.blk__body { padding: 14px 14px 4px; }
.blk__body .field { margin-bottom: 12px; }
.bk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin: 2px 0 12px; cursor: pointer; }
.bk-img { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.bk-img__prev { width: 140px; height: 90px; flex: none; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line, #e5e7eb); display: grid; place-items: center;
  background: repeating-conic-gradient(#0000000a 0% 25%, transparent 0% 50%) 0 / 16px 16px, #fff; }
.bk-img__prev--av { width: 90px; height: 90px; border-radius: 50%; }
.bk-img__prev img { max-width: 100%; max-height: 100%; object-fit: cover; display: block; }
.bl-add { display: flex; gap: 10px; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line, #e5e7eb); }
.bl-add .select { max-width: 220px; }
/* live-editor: panel ustawień/SEO nad podglądem */
.bl-meta { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; margin-bottom: 12px; background: var(--card, #fff); overflow: hidden; }
.bl-meta > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px; list-style: none; }
.bl-meta > summary::-webkit-details-marker { display: none; }
.bl-meta > summary::before { content: '⚙'; opacity: .6; }
.bl-meta[open] > summary { border-bottom: 1px solid var(--line, #e5e7eb); }
.bl-meta__hint { font-weight: 400; }
.bl-meta__body { padding: 16px; }
.bl-meta .svc-edit { height: auto; }

/* ── 2FA (TOTP) modal ── */
.tf-qr { display: flex; justify-content: center; margin: 4px 0 16px; }
.tf-qr svg { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 12px; box-sizing: content-box; }
.tf-secret { display: flex; align-items: center; gap: 10px; }
.tf-secret code { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 16px; letter-spacing: 2px;
  background: var(--card-2, #0f0f0f); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; color: var(--ink); word-break: break-all; }
.tf-link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--accent, #7aa2ff); word-break: break-all; }
.tf-backup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tf-backup code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 1px; text-align: center;
  background: var(--card-2, #0f0f0f); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; color: var(--ink); }