/* css/app.css - nowy wygląd panelu klienta (styl zaakceptowany w prototypie).
   Klasy z przedrostkiem ds- nie kolidują z Bulmą, która zostaje dla stron jeszcze nieprzeniesionych. */

:root {
  --ds-bg: #EFEFF2;
  --ds-surface: #FFFFFF;
  --ds-surface-2: #F2F2F5;
  --ds-track: #E6E6EA;
  --ds-ink: #16171A;
  --ds-ink-2: #3D4046;
  --ds-muted: #6B6E75;
  --ds-line: #EDEDF0;
  --ds-accent: #F43A09;         /* Brightly Orange - akcent */
  --ds-accent-strong: #D93206;  /* przyciski z białym tekstem (kontrast 4.8:1) */
  --ds-accent-soft: #FFE8DF;
  --ds-accent-ink: #B22A04;
  --ds-warm: #FFB766;           /* Grandpa Orange */
  --ds-warm-soft: #FFE4C2;
  --ds-warm-ink: #4A2600;
  --ds-mint: #C2EDDA;           /* Grey Blue Green */
  --ds-green: #68D388;          /* Live Green */
  --ds-green-ink: #1E7A45;
  --ds-green-deep: #14532D;
  --ds-danger-soft: #FDE3E0;
  --ds-danger-ink: #8F1D14;
  --ds-radius-card: 28px;
  --ds-radius-row: 20px;
  --ds-shadow-float: 0 10px 30px rgba(22, 23, 26, .14);
  --ds-font: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-display: "Bricolage Grotesque", Figtree, system-ui, sans-serif;
  --ds-sidebar-w: 248px;
}

/* ------------------------------------------------------------------ Baza */
html { background-color: var(--ds-bg) !important; }  /* Bulma ustawia białe tło na <html> */
body.ds-app {
  min-height: 100vh;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  padding-top: 0 !important;
  -webkit-font-smoothing: antialiased;
}
body.ds-app a { color: var(--ds-accent-ink); }
body.ds-app a:hover { color: #9A2503; }
.ds-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ds-icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-icon--sm { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ Logo */
.ds-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--ds-ink) !important; }
.ds-logo__mark {
  width: 36px; height: 36px; border-radius: 11px; background: var(--ds-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ds-logo__mark .ds-icon { width: 20px; height: 20px; stroke-width: 2.2; }
.ds-logo__text { font-family: var(--ds-font-display); font-weight: 700; font-size: 22px; letter-spacing: -.3px; line-height: 1; }
.ds-logo__text span { color: var(--ds-accent); }

/* ------------------------------------------------------------------ Boczne menu (komputer) i szuflada (telefon) */
.ds-sidebar {
  position: fixed; z-index: 40; top: 16px; left: 16px; bottom: 16px; width: var(--ds-sidebar-w);
  box-sizing: border-box; padding: 20px 14px 14px; border-radius: var(--ds-radius-card);
  background: var(--ds-surface); display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
}
.ds-sidebar__logo { padding: 0 8px; }
.ds-nav { display: flex; flex-direction: column; gap: 2px; }
.ds-nav__label { margin: 12px 14px 4px; font-size: 12px; font-weight: 700; color: var(--ds-muted); text-transform: uppercase; letter-spacing: .6px; }
.ds-nav__link {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--ds-ink-2) !important; text-decoration: none !important; font-weight: 600; font-size: 15px;
}
.ds-nav__link:hover { background: var(--ds-surface-2); color: var(--ds-ink) !important; }
.ds-nav__link.is-active { background: var(--ds-bg); color: var(--ds-ink) !important; font-weight: 700; }
.ds-nav__link.is-active .ds-icon { stroke-width: 2.2; color: var(--ds-accent); }
.ds-nav__link span.ds-grow { flex-grow: 1; }
.ds-sidebar__account { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 22px; background: var(--ds-bg); }
.ds-sidebar__account-row { display: flex; align-items: center; gap: 10px; }
.ds-avatar {
  width: 38px; height: 38px; border-radius: 999px; background: #1F5F8B; color: #fff; flex-shrink: 0;
  font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.ds-sidebar__who { flex-grow: 1; min-width: 0; line-height: 1.25; }
.ds-sidebar__who strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-sidebar__who small { font-size: 12px; color: var(--ds-muted); }
.ds-credits { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--ds-surface); }
.ds-credits__value { font-size: 20px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.ds-credits__value small { font-size: 13px; font-weight: 700; color: var(--ds-muted); }
.ds-backdrop { display: none; }

/* ------------------------------------------------------------------ Górny pasek i dolna nawigacja (telefon) */
.ds-topbar, .ds-bottomnav { display: none; }
.ds-chip-credits {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--ds-accent-soft); color: var(--ds-accent-ink) !important; font-weight: 800; font-size: 14px; text-decoration: none !important;
}

/* ------------------------------------------------------------------ Obszar treści */
.ds-main { margin-left: calc(var(--ds-sidebar-w) + 32px); padding: 16px 16px 24px 0; min-height: calc(100vh - 80px); box-sizing: border-box; }
/* Stare strony (Bulma): ta sama rama */
body.ds-user .container_main { margin: 0 0 0 calc(var(--ds-sidebar-w) + 32px) !important; width: auto !important; padding: 16px 16px 24px 0 !important; }
body.ds-guest .container_main, body.ds-guest .container_main_no_sidebar { margin: 0 auto !important; width: auto !important; max-width: 1100px; padding: 8px 16px 24px !important; }
body.ds-app .menu-sidebar { display: none; }
.ds-footer { margin-left: calc(var(--ds-sidebar-w) + 32px); padding: 8px 16px 24px 8px; font-size: 13px; color: var(--ds-muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ds-footer a { color: var(--ds-muted) !important; font-weight: 600; }
body.ds-guest .ds-footer, body.ds-guest .ds-main { margin-left: 0; }
body.ds-guest .ds-footer { justify-content: center; }

/* Pasek dla niezalogowanych */
.ds-guestbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.ds-guestbar__actions { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ Typografia i nagłówki stron */
.ds-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 8px 8px 16px; flex-wrap: wrap; }
.ds-h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; color: var(--ds-ink); }
.ds-sub { margin: 2px 0 0; color: var(--ds-muted); font-size: 15px; }
.ds-h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ds-ink); }
.ds-section-label { display: block; padding: 4px 6px 6px; font-size: 14px; color: var(--ds-muted); }

/* ------------------------------------------------------------------ Karty i wiersze */
.ds-card { background: var(--ds-surface); border-radius: var(--ds-radius-card); padding: 20px; box-sizing: border-box; }
.ds-card--flush { padding: 0; overflow: hidden; }
.ds-stack { display: flex; flex-direction: column; gap: 12px; }
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ds-row {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 14px; box-sizing: border-box;
  border-radius: var(--ds-radius-row); background: var(--ds-surface);
}
.ds-row__icon {
  width: 38px; height: 38px; border-radius: 12px; background: var(--ds-surface-2); color: var(--ds-ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ds-row__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-row__label { font-size: 12px; color: var(--ds-muted); }
.ds-row__input {
  width: 100%; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 600 17px/1.3 var(--ds-font); color: var(--ds-ink);
}
.ds-row__input:focus { outline: none; }
.ds-row:focus-within { box-shadow: inset 0 0 0 2px var(--ds-accent); }
.ds-row__aside { font-size: 13px; color: var(--ds-muted); }
.ds-error { margin: 6px 8px 0; font-size: 13px; font-weight: 600; color: #B42318; }

/* ------------------------------------------------------------------ Przyciski */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; font: 700 15px/1 var(--ds-font); cursor: pointer; text-decoration: none !important; white-space: nowrap;
}
.ds-btn--primary { background: var(--ds-accent-strong); color: #fff !important; box-shadow: 0 3px 8px rgba(244, 58, 9, .16); }
.ds-btn--primary:hover { background: #C22D05; }
.ds-btn--dark { background: var(--ds-ink); color: #fff !important; }
.ds-btn--soft { background: var(--ds-surface-2); color: var(--ds-ink) !important; }
.ds-btn--accent-soft { background: var(--ds-accent-soft); color: var(--ds-accent-ink) !important; }
.ds-btn--white { background: var(--ds-surface); color: var(--ds-ink) !important; }
.ds-btn--lg { min-height: 58px; font-size: 17px; font-weight: 800; }
.ds-btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.ds-btn--block { width: 100%; }
.ds-btn[disabled], .ds-btn.is-loading { opacity: .6; cursor: progress; }
.ds-btn:focus-visible, .ds-nav__link:focus-visible, .ds-chip:focus-within, .ds-seg a:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds-icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--ds-surface); color: var(--ds-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ------------------------------------------------------------------ Przełącznik (segmented) */
.ds-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #E4E4E9; }
.ds-seg a, .ds-seg button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important;
  font: 600 15px/1 var(--ds-font); color: #4A4D53 !important; cursor: pointer;
}
.ds-seg .is-active { background: var(--ds-surface); color: var(--ds-ink) !important; font-weight: 700; box-shadow: 0 1px 3px rgba(22, 23, 26, .12); }

/* ------------------------------------------------------------------ Chipy wyboru (np. nadawca) */
.ds-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ds-chip { position: relative; }
.ds-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ds-chip span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px;
  background: var(--ds-surface-2); color: var(--ds-ink); font-weight: 600; font-size: 14px;
}
.ds-chip input:checked + span { background: var(--ds-ink); color: #fff; font-weight: 700; }

/* ------------------------------------------------------------------ Pole treści + miernik długości */
.ds-compose__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 20px 0; }
.ds-compose__label { font-size: 15px; font-weight: 700; }
.ds-textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 150px; padding: 12px 20px 16px; border: 0 !important;
  box-shadow: none !important; resize: vertical; font: 400 17px/1.5 var(--ds-font); color: var(--ds-ink); background: transparent;
}
.ds-textarea:focus { outline: none; }
.ds-compose:focus-within { box-shadow: inset 0 0 0 2px var(--ds-accent); }
.ds-meter { display: flex; align-items: center; gap: 18px; padding: 14px 20px 18px; border-top: 1px solid var(--ds-line); }
.ds-meter__count { flex-shrink: 0; font-size: 15px; color: var(--ds-muted); }
.ds-meter__count strong { font-size: 30px; font-weight: 800; letter-spacing: -.6px; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.ds-meter__ticks { flex-grow: 1; display: flex; gap: 3px; height: 30px; }
.ds-meter__ticks i { flex-grow: 1; border-radius: 2px; background: var(--ds-track); }
.ds-meter__ticks i.on-1 { background: var(--ds-green); }
.ds-meter__ticks i.on-2 { background: var(--ds-warm); }
.ds-meter__ticks i.on-3 { background: var(--ds-accent); }
.ds-meter__parts { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--ds-ink-2); }

/* ------------------------------------------------------------------ Ramki z podpowiedzią */
.ds-insight { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 22px; font-size: 14px; line-height: 1.45; }
.ds-insight p { margin: 0; flex-grow: 1; }
.ds-insight--ok { background: linear-gradient(135deg, #D5F3E3 0%, #EEF9F3 55%, #FFFFFF 100%); color: var(--ds-ink-2); }
.ds-insight--ok .ds-icon { color: var(--ds-green-ink); }
.ds-insight--warn { background: linear-gradient(135deg, var(--ds-warm-soft) 0%, #FFF3E4 60%, #FFFFFF 100%); color: var(--ds-warm-ink); }
.ds-insight--warn .ds-icon { color: #8A4300; }
.ds-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ds-surface); font-size: 14px; font-weight: 700; flex-shrink: 0; cursor: pointer; }
.ds-toggle input { width: 18px; height: 18px; accent-color: var(--ds-accent); margin: 0; }

/* ------------------------------------------------------------------ Podgląd SMS i podsumowanie */
.ds-phone { border-radius: 24px; background: var(--ds-bg); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.ds-phone__who { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; }
.ds-bubble {
  align-self: flex-start; max-width: 92%; background: var(--ds-surface); border-radius: 20px 20px 20px 6px;
  padding: 12px 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-sizing: border-box;
}
.ds-bubble.is-empty { color: var(--ds-muted); font-style: italic; }
.ds-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.ds-sum span:first-child { color: #4A4D53; }
.ds-sum--total { padding-top: 10px; border-top: 1px solid var(--ds-line); }
.ds-sum--total span:first-child { font-weight: 700; color: var(--ds-ink); }
.ds-sum--total strong { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.ds-pill-status { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 16px; font-size: 14px; font-weight: 700; }
.ds-pill-status--ok { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-pill-status--bad { background: var(--ds-danger-soft); color: var(--ds-danger-ink); }

/* ------------------------------------------------------------------ Układ ekranu wysyłki */
.ds-send { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.ds-send__aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }

/* Historia (tabela z endpointu - styl Bulmy złagodzony) */
.ds-history .table { background: transparent; font-size: 14px; margin: 0; }
.ds-history .table td, .ds-history .table th { border-color: var(--ds-line); }
.ds-history__foot { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-top: 1px solid var(--ds-line); font-size: 13px; color: var(--ds-muted); }
.ds-search { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 999px; background: var(--ds-surface-2); }
.ds-search input { flex-grow: 1; border: 0; outline: 0; background: transparent; font: 400 15px var(--ds-font); color: var(--ds-ink); }

/* Powiadomienia (showNotification z Bulmy) */
#notification-container.ds-toasts { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; }
#notification-container.ds-toasts .notification { margin: 0; border-radius: 18px; padding: 14px 18px; font-weight: 600; box-shadow: var(--ds-shadow-float); }

/* ------------------------------------------------------------------ Telefon i tablet */
@media (max-width: 900px) {
  .ds-sidebar {
    top: 0; left: 0; bottom: 0; width: min(320px, 86vw); border-radius: 0 28px 28px 0;
    transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--ds-shadow-float);
  }
  body.ds-menu-open .ds-sidebar { transform: none; }
  body.ds-menu-open .ds-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(22, 23, 26, .35); }

  .ds-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 12px 12px 0; padding: 8px 8px 8px 12px; border-radius: 22px; background: rgba(255, 255, 255, .8);
  }
  .ds-topbar .ds-logo__mark { width: 32px; height: 32px; border-radius: 10px; }
  .ds-topbar .ds-logo__text { font-size: 19px; }

  .ds-bottomnav {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    position: fixed; z-index: 30; left: 12px; right: 12px; bottom: 12px; height: 66px; padding: 6px; box-sizing: border-box;
    border-radius: 34px; background: rgba(255, 255, 255, .95); box-shadow: var(--ds-shadow-float);
  }
  .ds-bottomnav a, .ds-bottomnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent;
    border-radius: 28px; color: #3D4046 !important; text-decoration: none !important; font: 600 11px/1.1 var(--ds-font); cursor: pointer;
  }
  .ds-bottomnav .is-active { background: var(--ds-bg); color: var(--ds-ink) !important; font-weight: 700; }
  .ds-bottomnav .is-active .ds-icon { stroke-width: 2.2; color: var(--ds-accent); }

  .ds-main, body.ds-user .container_main { margin-left: 0 !important; padding: 12px 12px 100px !important; }
  body.ds-guest .ds-footer { padding-bottom: 24px; }
  .ds-footer { margin-left: 0; padding: 0 16px 100px; justify-content: center; }
  .ds-page-head { padding: 4px 6px 12px; }
  .ds-h1 { font-size: 28px; }
  .ds-send { grid-template-columns: minmax(0, 1fr); }
  .ds-send__aside { position: static; }
  .ds-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ds-seg { width: 100%; box-sizing: border-box; }
  .ds-seg a, .ds-seg button { flex: 1; padding: 0 10px; }
  .ds-card { border-radius: 24px; padding: 16px; }
  .ds-card--flush { padding: 0; }
  .ds-meter { flex-wrap: wrap; gap: 10px 14px; }
  .ds-meter__ticks { order: 3; flex-basis: 100%; height: 26px; }
  .ds-insight { flex-wrap: wrap; }
  #notification-container.ds-toasts { bottom: 92px; }
  /* Przycisk wysyłki przyklejony nad dolnym paskiem */
  .ds-sticky-cta { position: sticky; bottom: 88px; z-index: 5; }
}

/* Liczniki z js/sms_preview.js mają w starym style.css własne odstępy - w nowym mierniku je zerujemy */
.ds-meter #char_count, .ds-meter #chars_left, .ds-meter #sms_count { margin: 0; padding: 0; min-width: 0; font-weight: inherit; }
.ds-meter #sms_count { font-weight: 800; }

/* Wybór nadawcy: nazwy w osobnym wierszu na całą szerokość, żeby żadna się nie chowała */
.ds-row--senders { flex-wrap: wrap; align-content: center; row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.ds-row--senders .ds-row__label { flex-grow: 1; }
.ds-row--senders .ds-chips { flex-basis: 100%; justify-content: flex-start; }

/* Laptopy / węższe okna: pola odbiorcy i nadawcy jedno pod drugim, węższa prawa kolumna */
@media (min-width: 901px) and (max-width: 1320px) {
  .ds-send { grid-template-columns: minmax(0, 1fr) 340px; }
  .ds-send .ds-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Pasek trybu bezpiecznego (tylko localhost) */
.ds-safe-banner { position: relative; z-index: 50; margin: 8px 16px 0 calc(var(--ds-sidebar-w) + 32px); padding: 8px 14px; border-radius: 14px; background: var(--ds-warm); color: var(--ds-warm-ink); font-size: 13px; font-weight: 700; text-align: center; }
body.ds-guest .ds-safe-banner { margin-left: 16px; }
@media (max-width: 900px) { .ds-safe-banner { margin: 8px 12px 0; } }
.ds-pill-status--warn { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }

/* ------------------------------------------------------------------ Wysyłka grupowa */
.ds-count-pill { padding: 6px 12px; border-radius: 999px; background: var(--ds-accent-soft); color: var(--ds-accent-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ds-count-pill strong { font-weight: 800; }
.ds-muted-text { margin: 0; color: var(--ds-muted); font-size: 14px; }
/* Przyciski grup generowane przez js/send_group_sms.js (klasy Bulmy nadpisane wyglądem chipów) */
.ds-groups .group-section + hr { margin: 10px 0 !important; background: var(--ds-line); height: 1px; border: 0; }
.ds-groups .group-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-groups .group-btn.button {
  height: auto; min-height: 40px; padding: 0 14px; margin: 0; border: 0; border-radius: 999px; box-shadow: none;
  background: var(--ds-surface-2); color: var(--ds-ink); font: 600 14px/1 var(--ds-font);
}
.ds-groups .group-btn.button:hover { background: #E4E4E9; }
.ds-groups .group-btn.button.is-primary { background: var(--ds-ink); color: #fff; font-weight: 700; }
.ds-groups .group-btn.button:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
#insertNameBtn.is-active { background: var(--ds-accent-strong); color: #fff !important; }
/* Podgląd odbiorców */
.ds-contact-preview { max-height: 320px; overflow-y: auto; padding: 0 12px 12px; font-size: 14px; }
.ds-contact-preview p { margin: 4px 8px 8px; color: var(--ds-muted); }
.ds-contact-preview .podglad-kontaktow-item.contact-link {
  display: flex !important; align-items: center; min-height: 40px; padding: 0 10px !important; border-radius: 12px !important;
  color: var(--ds-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-contact-preview .podglad-kontaktow-item.contact-link:hover { background: var(--ds-surface-2) !important; }
/* Status wysyłek */
.ds-queue #progressContainer { padding: 4px 8px 12px; }
.ds-queue #progressContainer > p { margin: 8px 12px; color: var(--ds-muted); font-size: 14px; }
.ds-queue .table { background: transparent; font-size: 14px; margin: 0; }
.ds-queue .table thead td { color: var(--ds-muted); font-weight: 600; border-color: var(--ds-line); }
.ds-queue .table td { border-color: var(--ds-line); vertical-align: middle; padding: 10px 12px; }
.ds-queue .cancelQueueBtn.button { border: 0; border-radius: 999px; background: var(--ds-danger-soft); color: var(--ds-danger-ink); font-weight: 700; }
.ds-queue .has-text-success { color: var(--ds-green-ink) !important; font-weight: 700; }
.ds-queue .has-text-danger { color: #B42318 !important; font-weight: 700; }

/* ------------------------------------------------------------------ Okna dialogowe (mechanika Bulmy .modal.is-active) */
.ds-modal .modal-background { background: rgba(22, 23, 26, .45); }
.ds-modal__panel {
  position: relative; z-index: 1; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box;
  background: var(--ds-surface); border-radius: var(--ds-radius-card); padding: 24px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--ds-shadow-float); font-family: var(--ds-font); color: var(--ds-ink);
}
.ds-modal__panel--wide { width: min(760px, calc(100vw - 24px)); }
.ds-modal__text { font-size: 16px; line-height: 1.5; }
.ds-modal__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ds-modal__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ds-modal #modal-credits-error { display: block; }
.ds-modal #modal-credits-error[style*="none"] { display: none !important; }
@media (max-width: 900px) {
  .ds-modal__grid { grid-template-columns: minmax(0, 1fr); }
  .ds-modal__actions .ds-btn { flex: 1; }
}
/* Bulma 1.0 nadaje .button.is-primary kolor przez własne zmienne - wymuszamy wygląd zaznaczonego chipa */
.ds-groups .group-btn.button.is-primary, .ds-groups .group-btn.button.is-primary:hover { background: var(--ds-ink) !important; color: #fff !important; border-color: transparent !important; }
.ds-groups .group-btn.button.is-light { background: var(--ds-surface-2) !important; color: var(--ds-ink) !important; }
.ds-queue .has-text-info { color: #1F5F8B !important; font-weight: 700; }
/* Wpisy historii wysyłek pojedynczych (HTML z actions/get_single_sms_history.php) */
.ds-history .history-list { padding: 0 12px 8px; }
.ds-history .history-entry { margin: 0 !important; padding: 10px 8px; border-top: 1px solid var(--ds-line); align-items: center; }
.ds-history .history-entry:first-child { border-top: 0; }
.ds-history .history-recipient { font-weight: 700; font-size: 15px; }
.ds-history .history-message { margin: 2px 0 0 !important; color: var(--ds-ink-2); font-size: 14px; }
.ds-history .history-status { font-weight: 700; font-size: 13px; }
.ds-history .history-time, .ds-history .history-cost { font-size: 12px; color: var(--ds-muted); }
.ds-history .has-text-info, .ds-history .has-text-link { color: #1F5F8B !important; }
.ds-history .has-text-success { color: var(--ds-green-ink) !important; }
.ds-history .has-text-danger { color: #B42318 !important; }

/* ------------------------------------------------------------------ Pulpit (dashboard.php) - wersja kompaktowa */
.ds-dash__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-empty { margin: 0; font-size: 14px; color: var(--ds-muted); }
.ds-link-more { font-size: 13px; font-weight: 700; }

/* Pasek wskaźników: jedna karta, 4 komórki z cienkimi separatorami */
.ds-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px; border-radius: 22px; }
.ds-kpi {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-radius: 16px; position: relative;
  color: var(--ds-ink) !important; text-decoration: none !important; transition: background .12s ease;
}
.ds-kpi + .ds-kpi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--ds-track); }
.ds-kpi:hover { background: var(--ds-surface-2); }
.ds-kpi:hover::before, .ds-kpi:hover + .ds-kpi::before { opacity: 0; }
.ds-kpi__label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ds-muted); }
.ds-kpi__label i { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.ds-kpi__label .is-ok { background: var(--ds-green); }
.ds-kpi__label .is-accent { background: var(--ds-accent); }
.ds-kpi__label .is-wait { background: var(--ds-warm); }
.ds-kpi__label .is-bad { background: var(--ds-danger-ink); }
.ds-kpi__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-kpi__value { font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-delta { padding: 2px 7px; border-radius: 999px; background: var(--ds-surface-2); font-size: 11.5px; font-weight: 700; color: var(--ds-muted); white-space: nowrap; }
.ds-delta.is-good { background: #E3F6EA; color: var(--ds-green-ink); }
.ds-delta.is-bad { background: var(--ds-danger-soft); color: var(--ds-danger-ink); }

/* Podpowiedź: jedna linijka */
.ds-dash__tip { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; padding: 9px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.ds-dash__tip p { margin: 0; }
.ds-dash__tip .ds-icon { flex-shrink: 0; margin-top: 2px; }

.ds-dash__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 10px; align-items: start; }
.ds-dash__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ds-dash .ds-card { border-radius: 22px; padding: 16px 18px; }
.ds-dash__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ds-dash__title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.ds-dash__title small { margin-left: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ds-muted); }

/* Wykres słupkowy z 14 dni: niski, cienkie słupki */
.ds-chart__legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ds-muted); }
.ds-chart__legend span { display: inline-flex; align-items: center; gap: 5px; }
.ds-chart__legend i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.ds-chart__bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 130px; }
.ds-chart__bars.is-empty { height: 60px; opacity: .6; margin-top: 8px; }
.ds-chart__col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; border-radius: 8px; }
.ds-chart__col:hover { background: var(--ds-surface-2); }
.ds-chart__stack {
  flex-grow: 1; width: 100%; max-width: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  border-bottom: 2px solid var(--ds-track);
}
.ds-chart__stack span { display: block; min-height: 3px; border-radius: 5px; }
.ds-chart__day { text-align: center; font-size: 11px; font-weight: 600; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ds-chart__col.is-today .ds-chart__day { color: var(--ds-ink); font-weight: 800; }
.ds-chart__stack .is-ok, .ds-chart__legend .is-ok, .ds-row__dot.is-ok { background: var(--ds-green); }
.ds-chart__stack .is-wait, .ds-chart__legend .is-wait, .ds-row__dot.is-wait { background: var(--ds-warm); }
.ds-chart__stack .is-bad, .ds-chart__legend .is-bad, .ds-row__dot.is-bad { background: var(--ds-accent); }

/* Listy: ostatnie wysyłki i „Na start” - wiersze bez tła, rozdzielone linią */
.ds-dash__list { display: flex; flex-direction: column; }
.ds-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 8px; margin: 0 -8px; border-radius: 12px;
  color: var(--ds-ink) !important; text-decoration: none !important; position: relative;
}
.ds-row + .ds-row::before { content: ""; position: absolute; left: 30px; right: 8px; top: 0; height: 1px; background: var(--ds-track); }
.ds-row:hover { background: var(--ds-surface-2); }
.ds-row:hover::before, .ds-row:hover + .ds-row::before { opacity: 0; }
.ds-row__dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; margin: 0 5px; }
.ds-row__todo { width: 18px; height: 18px; border-radius: 999px; border: 2px dashed #D58A3A; flex-shrink: 0; box-sizing: border-box; }
.ds-row__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ds-row__body strong { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-row__body small { font-size: 12.5px; color: var(--ds-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-row__status { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.ds-row__status.is-ok { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-row__status.is-wait { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.ds-row__status.is-bad { background: var(--ds-danger-soft); color: var(--ds-danger-ink); }
.ds-row__cta { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--ds-accent-ink); }
.ds-progress { flex: 1 1 80px; max-width: 160px; height: 6px; border-radius: 999px; background: var(--ds-track); overflow: hidden; }
.ds-progress i { display: block; height: 100%; border-radius: 999px; background: var(--ds-green); }
.ds-dash__list .ds-empty + .ds-btn { align-self: flex-start; margin-top: 10px; }

@media (min-width: 901px) and (max-width: 1180px) {
  .ds-dash__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ds-dash .ds-page-head { flex-direction: column; align-items: stretch; }
  .ds-dash__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ds-dash__actions .ds-btn--primary { grid-column: 1 / -1; order: -1; }
  .ds-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-kpi { padding: 10px 12px; }
  .ds-kpi:nth-child(3)::before { display: none; }
  .ds-kpi:nth-child(n+3)::after { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--ds-track); }
  .ds-kpi__value { font-size: 24px; }
  .ds-dash__grid { grid-template-columns: minmax(0, 1fr); }
  .ds-dash .ds-card { padding: 14px; }
  .ds-chart__bars { height: 110px; gap: 2px; }
  .ds-chart__col.is-odd .ds-chart__day { visibility: hidden; }
  .ds-chart__legend { gap: 8px; }
}

/* Elementy współdzielone z innymi stronami (saldo w płatnościach, .ds-todo w kontakcie, nagłówek karty) */
.ds-balance { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(150deg, #FFFFFF 0%, #FFF1EA 100%); }
.ds-balance__label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ds-muted); }
.ds-balance__value { font-size: 46px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ds-balance__value small { font-size: 18px; letter-spacing: 0; color: var(--ds-muted); }
.ds-balance__note { margin: 0; font-size: 14px; color: var(--ds-ink-2); }
.ds-balance__cta { margin-top: auto; align-self: flex-start; }
.ds-chart__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ds-sendrow, .ds-todo {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--ds-surface-2);
  color: var(--ds-ink) !important; text-decoration: none !important; min-height: 56px; box-sizing: border-box;
}
.ds-sendrow:hover, .ds-todo:hover { background: var(--ds-track); }
.ds-sendrow__dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.ds-sendrow__body, .ds-todo__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ds-sendrow__body strong, .ds-todo__body strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-sendrow__body small, .ds-todo__body small { font-size: 13px; color: var(--ds-muted); }
.ds-sendrow__status { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ds-sendrow__status.is-ok { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-sendrow__status.is-wait { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.ds-sendrow__status.is-bad { background: var(--ds-danger-soft); color: var(--ds-danger-ink); }
.ds-todo { background: linear-gradient(120deg, var(--ds-warm-soft) 0%, #FFF6EC 70%); }
.ds-todo:hover { background: var(--ds-warm-soft); }
.ds-todo__body strong { white-space: normal; }
.ds-todo__dot { width: 22px; height: 22px; border-radius: 999px; border: 2px dashed #C77A2A; flex-shrink: 0; box-sizing: border-box; }
.ds-todo__cta { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--ds-accent-ink); }
.ds-sendrow__dot.is-ok { background: var(--ds-green); }
.ds-sendrow__dot.is-wait { background: var(--ds-warm); }
.ds-sendrow__dot.is-bad { background: var(--ds-accent); }
@media (max-width: 900px) {
  .ds-balance { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; }
  .ds-balance__label, .ds-balance__note { grid-column: 1 / -1; }
  .ds-balance__value { font-size: 42px; }
  .ds-balance__cta { grid-row: 2; grid-column: 2; margin: 0; }
}

/* ------------------------------------------------------------------ Raporty (sms_reports.php) */
.ds-rep-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ds-rep-toolbar .ds-search { flex: 1 1 280px; background: var(--ds-surface); }
.ds-rep-toolbar .ds-chips { justify-content: flex-start; }
.ds-rep-toolbar .ds-chip span { background: var(--ds-surface); }
.ds-reports { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 12px; align-items: start; }
.ds-reports.is-single { grid-template-columns: minmax(0, 1fr); }
.ds-reports.is-single .ds-rep-detail { display: none; }
.ds-rep-empty { margin: 0; padding: 28px 20px; text-align: center; color: var(--ds-muted); font-size: 15px; }
.ds-rep-empty.is-error { color: var(--ds-danger-ink); }
#rep-list[aria-busy="true"] { opacity: .55; transition: opacity .15s; }

.ds-rep-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 20px; box-sizing: border-box; text-align: left;
  border: 0; border-bottom: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); font: inherit; cursor: pointer;
}
.ds-rep-row:hover { background: #FAFAFB; }
.ds-rep-row.is-selected { background: var(--ds-accent-soft); box-shadow: inset 4px 0 0 var(--ds-accent); }
.ds-rep-row--static { cursor: default; }
.ds-rep-row--static:hover { background: transparent; }
.ds-rep-row:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
.ds-rep-row > .ds-icon { color: var(--ds-muted); flex-shrink: 0; }
.ds-rep-row__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-rep-row__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ds-rep-row__title strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-rep-row__title strong small { font-weight: 500; color: var(--ds-muted); font-size: 13px; margin-left: 4px; }
.ds-rep-row__title .ds-rep-pill { margin-left: auto; }
.ds-rep-row small { font-size: 13px; color: var(--ds-muted); }
.ds-rep-row__sum { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 700; }
.ds-rep-row__pct { flex-shrink: 0; width: 84px; text-align: right; font-size: 22px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.ds-rep-row__pct small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.ds-rep-text { font-size: 14px; color: var(--ds-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ds-rep-text.is-purged, .ds-rep-template.is-purged { font-style: italic; color: var(--ds-muted); }
.t-ok { color: var(--ds-green-ink); }
.t-wait { color: #8A4300; }
.t-bad { color: var(--ds-danger-ink); }
.t-cancel { color: var(--ds-muted); }

.ds-rep-bar { display: flex; height: 8px; border-radius: 999px; background: var(--ds-track); overflow: hidden; margin: 2px 0; }
.ds-rep-bar i { display: block; height: 100%; }
.ds-rep-bar .is-ok { background: var(--ds-green); }
.ds-rep-bar .is-wait { background: var(--ds-warm); }
.ds-rep-bar .is-bad { background: var(--ds-accent); }
.ds-rep-bar .is-cancel { background: #B9BBC1; }

.ds-rep-pill { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ds-rep-pill.is-ok { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-rep-pill.is-wait { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.ds-rep-pill.is-bad { background: var(--ds-danger-soft); color: var(--ds-danger-ink); }
.ds-rep-pill.is-cancel { background: var(--ds-surface-2); color: var(--ds-muted); }
.ds-rep-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; background: #B9BBC1; }
.ds-rep-dot.is-ok { background: var(--ds-green); }
.ds-rep-dot.is-wait { background: var(--ds-warm); }
.ds-rep-dot.is-bad { background: var(--ds-accent); }

.ds-rep-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--ds-muted); }
.ds-rep-pager[hidden] { display: none; }

/* Panel szczegółów */
.ds-rep-detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; outline: none; }
.ds-rep-detail__placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; color: var(--ds-muted); }
.ds-rep-detail__placeholder .ds-icon { width: 32px; height: 32px; color: var(--ds-accent); }
.ds-rep-detail__placeholder p { margin: 0; max-width: 260px; }
#rep-detail-body { display: flex; flex-direction: column; gap: 14px; }
#rep-detail-body[hidden], .ds-rep-detail__placeholder[hidden] { display: none; }
.ds-rep-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ds-rep-detail__head .ds-h2 { overflow-wrap: anywhere; }
.ds-rep-detail__close { display: none; background: var(--ds-surface-2); }
.ds-rep-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.ds-rep-tile { display: flex; flex-direction: column; padding: 10px 12px; border: 0; border-radius: 18px; text-align: left; font: inherit; cursor: pointer; color: var(--ds-ink); }
.ds-rep-tile strong { font-size: 24px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.ds-rep-tile span { font-size: 12px; font-weight: 600; color: var(--ds-ink-2); }
.ds-rep-tile.is-ok { background: var(--ds-mint); }
.ds-rep-tile.is-wait { background: var(--ds-warm-soft); }
.ds-rep-tile.is-bad { background: var(--ds-danger-soft); }
.ds-rep-tile.is-cancel { background: var(--ds-surface-2); }
.ds-rep-template { padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--ds-surface-2); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow-y: auto; }
.ds-rep-detail__tools { display: flex; flex-direction: column; gap: 8px; }
.ds-rep-detail__tools .ds-chips { justify-content: flex-start; }
.ds-rep-detail__tools .ds-chip span { min-height: 32px; padding: 0 12px; font-size: 13px; }
.ds-search--sm { min-height: 40px; }
.ds-search--sm input { font-size: 14px; }
.ds-rep-recipients { display: flex; flex-direction: column; }
.ds-rep-recipient { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--ds-line); }
.ds-rep-recipient__who { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ds-rep-recipient__who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-rep-recipient small { font-size: 12px; color: var(--ds-muted); }
.ds-rep-recipient__status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; }
.ds-rep-recipients .ds-btn { margin-top: 10px; }
.ds-rep-detail__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ds-muted); }

@media (min-width: 901px) and (max-width: 1320px) {
  .ds-reports { grid-template-columns: minmax(0, 1fr) 380px; }
  .ds-rep-row__pct { display: none; }
}
@media (max-width: 900px) {
  .ds-reports { grid-template-columns: minmax(0, 1fr); }
  .ds-rep-row { padding: 14px 16px; gap: 10px; }
  .ds-rep-row__pct { width: auto; font-size: 18px; }
  .ds-rep-row__title { flex-wrap: wrap; }
  .ds-rep-row__title strong { white-space: normal; }
  .ds-rep-row__title .ds-rep-pill { margin-left: 0; }
  .ds-rep-row > .ds-icon { display: none; }
  /* Szczegóły jako pełnoekranowy arkusz */
  .ds-rep-detail { display: none; }
  body.ds-rep-open .ds-rep-detail {
    display: flex; position: fixed; z-index: 91; inset: 12px; max-height: none; border-radius: 26px; box-shadow: var(--ds-shadow-float);
  }
  .ds-rep-toolbar .ds-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; width: calc(100% + 24px); }
  .ds-rep-toolbar .ds-chip span { white-space: nowrap; }
  body.ds-rep-open { overflow: hidden; }
  body.ds-rep-open .ds-page::after { content: ''; position: fixed; inset: 0; z-index: 90; background: rgba(22, 23, 26, .35); }
  .ds-rep-detail__close { display: inline-flex; flex-shrink: 0; }
}

/* ------------------------------------------------------------------ Kontakty (contacts_list.php) */
.ds-muted { color: var(--ds-muted); font-size: 14px; margin: 0; }
.ds-chip span b { margin-left: 4px; font-weight: 700; opacity: .6; }
.ds-chip input:checked + span b { opacity: .8; }
.ds-ct-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--ds-line); font-size: 14px; font-weight: 700; color: var(--ds-muted); }
.ds-ct-head #ct-head-info { flex-grow: 1; }

/* Pole wyboru */
.ds-check { position: relative; display: inline-flex; width: 24px; height: 24px; flex-shrink: 0; cursor: pointer; }
.ds-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ds-check span { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #C9CBD1; background: var(--ds-surface); box-sizing: border-box; transition: background .12s, border-color .12s; }
.ds-check input:checked + span, .ds-check input:indeterminate + span { background: var(--ds-ink); border-color: var(--ds-ink); }
.ds-check input:checked + span::after { content: ''; display: block; width: 6px; height: 11px; margin: 2px 0 0 6px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ds-check input:indeterminate + span::after { content: ''; display: block; width: 10px; height: 2.5px; margin: 8px 0 0 4px; background: #fff; border-radius: 2px; }
.ds-check input:focus-visible + span { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* Wiersz kontaktu */
.ds-ct-row { display: flex; align-items: center; gap: 12px; padding: 0 0 0 20px; border-bottom: 1px solid var(--ds-line); }
.ds-ct-row:hover { background: #FAFAFB; }
.ds-ct-row.is-checked { background: #F6F6F8; }
.ds-ct-row.is-selected { background: var(--ds-accent-soft); box-shadow: inset 4px 0 0 var(--ds-accent); }
.ds-ct-row__open { flex-grow: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 0; border: 0; background: transparent; text-align: left; font: inherit; color: var(--ds-ink); cursor: pointer; min-height: 60px; }
.ds-ct-row__open:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; border-radius: 12px; }
.ds-ct-row__who { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ds-ct-row__who strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ct-row__who small { font-size: 13px; color: var(--ds-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ct-row__tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 45%; }
.ds-avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.ds-avatar.is-mint { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-avatar.is-warm { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.ds-avatar.is-accent { background: var(--ds-accent-soft); color: var(--ds-accent-ink); }
.ds-avatar.is-blue { background: #DCEBF7; color: #1F5F8B; }
.ds-avatar.is-grey { background: var(--ds-surface-2); color: var(--ds-ink-2); }
.ds-tag { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ds-tag.is-mint { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-tag.is-warm { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.ds-tag.is-accent { background: var(--ds-accent-soft); color: var(--ds-accent-ink); }
.ds-tag.is-blue { background: #DCEBF7; color: #1F5F8B; }
.ds-tag.is-grey { background: var(--ds-surface-2); color: var(--ds-ink-2); }
#ct-list[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
#ct-limit { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }

/* Formularz kontaktu */
.ds-ct-form { display: flex; flex-direction: column; gap: 14px; }
.ds-ct-form[hidden] { display: none; }
.ds-ct-form__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ds-ct-form__title .ds-avatar { width: 48px; height: 48px; font-size: 16px; }
.ds-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds-field > span { font-size: 13px; font-weight: 700; color: var(--ds-ink-2); }
.ds-field > span em { font-style: normal; font-weight: 500; color: var(--ds-muted); }
.ds-field input:not([type=radio]):not([type=checkbox]), .ds-ct-newgroup input, .ds-menu__new input {
  min-height: 46px; padding: 0 14px; border: 2px solid transparent; border-radius: 14px; background: var(--ds-surface-2);
  font: 500 16px var(--ds-font); color: var(--ds-ink); box-sizing: border-box; width: 100%; outline: none;
}
.ds-field input:focus, .ds-ct-newgroup input:focus, .ds-menu__new input:focus { border-color: var(--ds-ink); background: var(--ds-surface); }
.ds-field input[aria-invalid="true"] { border-color: var(--ds-accent); background: #FFF6F3; }
.ds-field__err { color: var(--ds-danger-ink); font-size: 13px; font-weight: 600; }
.ds-field__err:empty { display: none; }
.ds-ct-grid { gap: 12px; }
.ds-seg--block { display: flex; width: 100%; box-sizing: border-box; }
.ds-seg--block label { flex: 1; position: relative; }
.ds-seg--block input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ds-seg--block span { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 8px; border-radius: 999px; font: 600 14px var(--ds-font); color: #4A4D53; text-align: center; }
.ds-seg--block input:checked + span { background: var(--ds-surface); color: var(--ds-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(22, 23, 26, .12); }
.ds-seg--block input:focus-visible + span { outline: 2px solid var(--ds-accent); }
.ds-ct-groups { justify-content: flex-start; }
.ds-chip--check input:checked + span::before { content: '✓'; margin-right: 6px; }
.ds-ct-newgroup { display: flex; gap: 8px; }
.ds-ct-newgroup input { min-height: 38px; font-size: 14px; }
.ds-ct-newgroup .ds-btn { flex-shrink: 0; }
.ds-ct-form__actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.ds-ct-form__actions .ds-btn[hidden] { display: none; }
.ds-ct-form__actions #ct-f-delete { margin-left: auto; }
.ds-btn--danger-soft { background: var(--ds-danger-soft); color: var(--ds-danger-ink) !important; }
.ds-btn--danger-soft:hover { background: #FBD3CE; }
.ds-ct-recent { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--ds-line); }
.ds-ct-recent[hidden] { display: none; }
.ds-ct-sms { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.ds-ct-sms .ds-rep-dot { margin-top: 6px; }
.ds-ct-sms__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.ds-ct-sms__body small { font-size: 12px; color: var(--ds-muted); }
.ds-ct-sms__body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pasek zaznaczonych */
.ds-bulk {
  position: fixed; z-index: 50; left: calc(50% + (var(--ds-sidebar-w) + 32px) / 2); bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px;
  background: var(--ds-ink); color: #fff; box-shadow: var(--ds-shadow-float); max-width: calc(100vw - 24px); box-sizing: border-box;
}
.ds-bulk[hidden] { display: none; }
.ds-bulk__count { font-weight: 700; font-size: 14px; white-space: nowrap; margin-right: 6px; }
.ds-bulk__menu { position: relative; }
.ds-bulk__close { width: 34px; height: 34px; background: rgba(255, 255, 255, .12); color: #fff; }
.ds-menu {
  position: absolute; bottom: calc(100% + 10px); left: 0; min-width: 240px; max-height: 320px; overflow-y: auto; padding: 6px;
  border-radius: 18px; background: var(--ds-surface); color: var(--ds-ink); box-shadow: var(--ds-shadow-float); display: flex; flex-direction: column;
}
.ds-menu[hidden] { display: none; }
.ds-menu button:not(.ds-btn) { border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: 12px; font: 600 14px var(--ds-font); color: var(--ds-ink); cursor: pointer; }
.ds-menu button:not(.ds-btn):hover { background: var(--ds-surface-2); }
.ds-menu button.is-danger { color: var(--ds-danger-ink); }
.ds-menu__new { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--ds-line); margin-top: 4px; }
.ds-menu__new input { min-height: 36px; font-size: 14px; }
body.ds-bulk-open .ds-main { padding-bottom: 90px; }

@media (max-width: 900px) {
  .ds-ct-row { padding-left: 14px; gap: 10px; }
  .ds-ct-row__open { padding-right: 14px; }
  .ds-ct-row__tags { display: none; }
  .ds-ct-head { padding: 12px 14px; }
  .ds-bulk { left: 12px; right: 12px; bottom: 88px; transform: none; justify-content: space-between; padding-left: 14px; flex-wrap: wrap; border-radius: 26px; }
  .ds-bulk__count { flex-basis: 100%; margin: 2px 0 0; }
  .ds-menu { left: 0; min-width: min(280px, calc(100vw - 48px)); }
  .ds-bulk__menu:nth-of-type(2) .ds-menu { left: auto; right: -60px; }
  body.ds-bulk-open .ds-main { padding-bottom: 200px !important; }
  .ds-ct-form__actions .ds-btn { flex: 1; }
  .ds-ct-form__actions #ct-f-delete { margin-left: 0; }
}
.ds-contacts-page .ds-rep-toolbar .ds-search { flex-basis: 100%; }

/* ------------------------------------------------------------------ Grupy (contacts_groups.php) */
.ds-gr-new { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-gr-new input { min-height: 46px; padding: 0 16px; border: 2px solid transparent; border-radius: 999px; background: var(--ds-surface); font: 500 15px var(--ds-font); min-width: 240px; outline: none; }
.ds-gr-new input:focus { border-color: var(--ds-ink); }
.ds-groups-page section { margin-bottom: 18px; }
.ds-groups-page .ds-section-label { margin: 0; font-weight: 700; }
.ds-gr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ds-gr-card { display: flex; flex-direction: column; gap: 12px; }
.ds-gr-card.is-auto { background: linear-gradient(150deg, #FFFFFF 0%, #F4F4F7 100%); }
.ds-gr-card.is-new { box-shadow: 0 0 0 3px var(--ds-green); }
.ds-gr-card.is-flash { animation: ds-gr-flash 1.2s ease-out; }
@keyframes ds-gr-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--ds-green); background: #EAF8F0; } 100% { box-shadow: 0 0 0 3px rgba(104, 211, 136, 0); background: var(--ds-surface); } }
.ds-gr-card__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-gr-card__head[hidden] { display: none; }
.ds-gr-card__head h3 { margin: 0; flex-grow: 1; min-width: 0; font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.ds-gr-count { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: var(--ds-surface-2); font-size: 13px; font-weight: 700; color: var(--ds-ink-2); }
.ds-gr-dot { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
.ds-gr-dot.is-mint { background: var(--ds-green); }
.ds-gr-dot.is-warm { background: var(--ds-warm); }
.ds-gr-dot.is-accent { background: var(--ds-accent); }
.ds-gr-dot.is-blue { background: #4F8FC0; }
.ds-gr-dot.is-grey { background: #9A9CA3; }
.ds-gr-card__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ds-gr-card__more { margin-left: auto; display: flex; gap: 4px; }
.ds-icon-btn--sm { width: 36px; height: 36px; background: var(--ds-surface-2); }
.ds-icon-btn.is-danger { color: var(--ds-danger-ink); }
.ds-icon-btn--sm:hover { background: var(--ds-track); }
.ds-gr-rename { display: flex; gap: 6px; }
.ds-gr-rename[hidden] { display: none; }
.ds-gr-rename input { flex-grow: 1; min-width: 0; min-height: 36px; padding: 0 12px; border: 2px solid var(--ds-ink); border-radius: 12px; font: 600 15px var(--ds-font); outline: none; }
.ds-gr-empty p { margin: 0; color: var(--ds-ink-2); }
@media (max-width: 900px) {
  .ds-gr-new { width: 100%; }
  .ds-gr-new input { flex: 1; min-width: 0; }
  .ds-gr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { .ds-dash__actions { width: 100%; } }

/* ------------------------------------------------------------------ Import kontaktów (import_contacts.php) */
.ds-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.ds-steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #E4E4E9; font-size: 14px; font-weight: 700; color: var(--ds-muted); }
.ds-steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 999px; background: var(--ds-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.ds-steps li.is-active { background: var(--ds-ink); color: #fff; }
.ds-steps li.is-active::before { background: var(--ds-accent); color: #fff; }
.ds-steps li.is-done { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-steps li.is-done::before { content: '✓'; }
.ds-imp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.ds-imp-grid[hidden] { display: none; }
.ds-imp-grid--preview { grid-template-columns: minmax(0, 1fr) 340px; }
#imp-step-preview[hidden], #imp-step-done[hidden] { display: none; }
.ds-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 340px; text-align: center; cursor: pointer;
  border: 3px dashed #D5D6DB; background: linear-gradient(160deg, #FFFFFF 0%, #FFF4EF 100%); transition: border-color .15s, background .15s;
}
.ds-drop:hover, .ds-drop.is-over { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-drop:focus-within { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds-drop.is-busy { opacity: .7; pointer-events: none; }
.ds-drop__icon { width: 64px; height: 64px; border-radius: 20px; background: var(--ds-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ds-drop__icon .ds-icon { width: 30px; height: 30px; }
.ds-drop strong { font-size: 18px; }
.ds-drop small { color: var(--ds-muted); font-size: 14px; }
.ds-drop__busy { font-weight: 700; color: var(--ds-accent-ink); }
.ds-drop__busy[hidden] { display: none; }
.ds-imp-help p { margin: 0; color: var(--ds-ink-2); font-size: 15px; line-height: 1.5; }
.ds-imp-sample { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--ds-line); font-size: 13px; }
.ds-imp-sample > div { display: grid; grid-template-columns: .8fr 1fr 1.2fr 1fr; }
.ds-imp-sample b, .ds-imp-sample span { padding: 7px 8px; border-right: 1px solid var(--ds-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-imp-sample b { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-imp-sample > div + div { border-top: 1px solid var(--ds-line); }
.ds-imp-tips { margin: 0; padding-left: 18px; color: var(--ds-ink-2); font-size: 14px; line-height: 1.6; }
.ds-imp-help__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ds-imp-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ds-imp-tiles .ds-rep-tile { cursor: default; }
.ds-imp-columns { margin: 0; font-size: 14px; color: var(--ds-ink-2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ds-imp-columns em { color: var(--ds-muted); }
.ds-imp-file { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink); }
.ds-imp-table-wrap { max-height: 60vh; overflow: auto; }
.ds-imp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ds-imp-table th { position: sticky; top: 0; background: var(--ds-surface); text-align: left; padding: 10px 12px; font-size: 12px; color: var(--ds-muted); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--ds-line); }
.ds-imp-table td { padding: 9px 12px; border-bottom: 1px solid var(--ds-line); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.ds-imp-table td:first-child { color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ds-imp-table tr.is-duplicate td, .ds-imp-table tr.is-in_file td { color: var(--ds-muted); }
.ds-imp-table tr.is-invalid td:nth-child(4) { color: var(--ds-danger-ink); font-weight: 700; }
.ds-imp-table tfoot td { color: var(--ds-muted); font-size: 13px; white-space: normal; }
.ds-imp-none { text-align: center; color: var(--ds-muted); }
.ds-imp-save { position: sticky; top: 16px; }
.ds-imp-options { display: flex; flex-direction: column; gap: 8px; }
.ds-imp-options label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 16px; background: var(--ds-surface-2); font-weight: 600; cursor: pointer; }
.ds-imp-options label[hidden] { display: none; }
.ds-imp-options label:has(input[type=radio]:checked) { background: var(--ds-accent-soft); box-shadow: inset 0 0 0 2px var(--ds-accent); }
.ds-imp-options input[type=radio] { accent-color: var(--ds-accent); width: 18px; height: 18px; margin: 0; }
.ds-imp-options input[type=text], .ds-imp-options select { flex-basis: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--ds-surface); font: 500 15px var(--ds-font); color: var(--ds-ink); }
.ds-imp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; cursor: pointer; }
.ds-imp-check[hidden] { display: none; }
.ds-imp-check input { accent-color: var(--ds-accent); width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; }
.ds-imp-save__cta { margin-top: 4px; }
.ds-imp-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; text-align: center; }
.ds-imp-done__icon { width: 72px; height: 72px; border-radius: 999px; background: var(--ds-mint); color: var(--ds-green-deep); display: inline-flex; align-items: center; justify-content: center; }
.ds-imp-done__icon .ds-icon { width: 36px; height: 36px; stroke-width: 2.4; }
.ds-imp-done .ds-dash__actions { justify-content: center; margin-top: 8px; }
.ds-imp-dpa { display: flex; gap: 18px; max-width: 760px; }
.ds-imp-dpa p { margin: 0; color: var(--ds-ink-2); line-height: 1.5; }
.ds-imp-dpa__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--ds-warm-soft); color: var(--ds-warm-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (min-width: 901px) and (max-width: 1320px) {
  .ds-imp-grid, .ds-imp-grid--preview { grid-template-columns: minmax(0, 1fr); }
  .ds-imp-save { position: static; }
}
@media (max-width: 900px) {
  .ds-steps { width: 100%; }
  .ds-steps li { flex: 1; justify-content: center; padding-right: 10px; font-size: 13px; }
  .ds-imp-grid, .ds-imp-grid--preview { grid-template-columns: minmax(0, 1fr); }
  .ds-drop { min-height: 240px; }
  .ds-imp-save { position: static; }
  .ds-imp-table-wrap { max-height: none; }
  .ds-imp-dpa { flex-direction: column; }
  .ds-imp-done .ds-dash__actions { display: flex; flex-direction: column; }
}

/* ------------------------------------------------------------------ Nazwy nadawców (sender_names.php) */
.ds-sn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
.ds-sn-list { display: flex; flex-direction: column; gap: 10px; }
.ds-sn-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; }
.ds-sn-card.is-default { box-shadow: inset 0 0 0 3px var(--ds-green); background: linear-gradient(120deg, #DDF5E8 0%, #F1FBF5 55%, #FFFFFF 100%); }
.ds-sn-card.is-flash { animation: ds-sn-flash 1.1s ease-out; }
@keyframes ds-sn-flash { 0% { transform: scale(1); box-shadow: inset 0 0 0 3px var(--ds-green), 0 0 0 0 rgba(104, 211, 136, .7); } 30% { transform: scale(1.015); box-shadow: inset 0 0 0 3px var(--ds-green), 0 0 0 10px rgba(104, 211, 136, .35); } 100% { transform: scale(1); box-shadow: inset 0 0 0 3px var(--ds-green), 0 0 0 18px rgba(104, 211, 136, 0); } }
.ds-sn-card__name { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; }
.ds-sn-card__name strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.ds-sn-card__name small { display: block; font-size: 13px; color: var(--ds-muted); }
.ds-sn-card__avatar { width: 44px; height: 44px; border-radius: 14px; background: var(--ds-accent-soft); color: var(--ds-accent-ink); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-sn-card.is-default .ds-sn-card__avatar { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-sn-card__side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.ds-sn-card__note { flex-basis: 100%; order: 3; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--ds-danger-soft); color: var(--ds-danger-ink); font-size: 14px; }
.ds-sn-default { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--ds-mint); color: var(--ds-green-deep); font-size: 13px; font-weight: 800; }
.ds-sn-add { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: center; }
.ds-sn-add__form { display: flex; flex-direction: column; gap: 10px; }
.ds-sn-add__form form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ds-sn-add__form .ds-field { width: 100%; }
.ds-sn-input { position: relative; display: block; }
.ds-sn-input input { padding-right: 60px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: .2px; }
.ds-sn-input b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ds-sn-rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ds-muted); }
.ds-sn-rules li::before { content: '○'; display: inline-block; width: 18px; font-weight: 800; }
.ds-sn-rules li.is-ok { color: var(--ds-green-ink); }
.ds-sn-rules li.is-ok::before { content: '✓'; }
.ds-sn-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ds-sn-preview .ds-phone { width: 100%; }
.ds-sn-preview small { color: var(--ds-muted); font-size: 12px; }
.ds-sn-help p, .ds-sn-help li { font-size: 14px; line-height: 1.5; color: var(--ds-ink-2); }
.ds-sn-help p { margin: 0; }
.ds-sn-help h3 { margin: 4px 0 0; font-size: 15px; font-weight: 800; }
.ds-sn-help ul, .ds-sn-help ol { margin: 0; padding-left: 20px; }
@media (min-width: 901px) and (max-width: 1320px) {
  .ds-sn-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ds-sn-layout, .ds-sn-add { grid-template-columns: minmax(0, 1fr); }
  .ds-sn-card { padding: 14px 16px; }
  .ds-sn-card__side { margin-left: 0; }
  .ds-sn-add__form form .ds-btn { width: 100%; }
}
.ds-sn-help ul, .ds-imp-tips { list-style: disc; }
.ds-sn-help ol { list-style: decimal; }

/* ------------------------------------------------------------------ Doładowanie i płatności (platnosci.php, historia_platnosci.php, platnosci_status_ok.php) */
.ds-pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
.ds-pay-balance { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.ds-pay-balance .ds-balance__label { flex-basis: 100%; }
.ds-pay-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ds-pay-preset { position: relative; }
.ds-pay-preset input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ds-pay-preset span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px; border-radius: 20px; background: var(--ds-surface-2); border: 2px solid transparent; }
.ds-pay-preset strong { font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.ds-pay-preset small { font-size: 13px; color: var(--ds-muted); font-weight: 600; }
.ds-pay-preset input:checked + span { background: var(--ds-accent-soft); border-color: var(--ds-accent); }
.ds-pay-preset input:checked + span small { color: var(--ds-accent-ink); }
.ds-pay-preset input:focus-visible + span { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds-pay-custom__input { position: relative; display: block; max-width: 420px; }
.ds-pay-custom__input input { min-height: 68px !important; padding: 0 120px 0 22px !important; border-radius: 20px !important; font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.5px; }
.ds-pay-custom__input b { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--ds-muted); pointer-events: none; }
.ds-pay-suggest { border: 0; text-align: left; font: inherit; cursor: pointer; width: 100%; }
.ds-pay-summary { position: sticky; top: 16px; }
.ds-pay-secure { margin: 0; font-size: 13px; color: var(--ds-muted); text-align: center; line-height: 1.45; }
.ds-pay-terms { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--ds-line); }
.ds-pay-terms .ds-imp-check { font-size: 13px; font-weight: 500; line-height: 1.45; }
/* Baner metod płatności Autopay (img/autopay) - grafika ma własne białe tło */
.ds-paybanner { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }
.ds-paybanner--doc { margin: 12px 0 4px; }
.lp-price__pay { margin: 22px 0 0; }
.ds-pay-billing { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--ds-surface-2); font-size: 13px; }
.ds-pay-billing > span { display: flex; gap: 8px; align-items: flex-start; color: var(--ds-ink-2); }
.ds-pay-billing a { font-weight: 800; flex-shrink: 0; }
.ds-btn.is-loading { opacity: .7; pointer-events: none; }

.ds-pay-result { max-width: 640px; margin: 24px auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; text-align: center; }
.ds-pay-result .ds-sub { max-width: 480px; line-height: 1.55; }
.ds-pay-result__icon { width: 76px; height: 76px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.ds-pay-result__icon .ds-icon { width: 36px; height: 36px; stroke-width: 2.4; }
.ds-pay-result.is-ok .ds-pay-result__icon { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-pay-result.is-wait .ds-pay-result__icon { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.ds-pay-result.is-bad .ds-pay-result__icon { background: var(--ds-danger-soft); color: var(--ds-danger-ink); }
.ds-pay-result__balance { padding: 10px 18px; border-radius: 999px; background: var(--ds-surface-2); font-size: 16px; }
.ds-pay-result__spinner { width: 28px; height: 28px; border-radius: 999px; border: 3px solid var(--ds-track); border-top-color: var(--ds-accent); animation: ds-spin 1s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-pay-result .ds-dash__actions { justify-content: center; margin-top: 6px; }

.ds-inv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
.ds-inv-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--ds-line); }
.ds-inv-row__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ds-inv-row__main strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.ds-inv-row__main small { font-size: 13px; color: var(--ds-muted); }
.ds-inv-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ds-inv-pdf { font-size: 13px; font-weight: 700; }
.ds-inv-files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ds-inv-files a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--ds-surface-2); color: var(--ds-ink) !important; text-decoration: none !important; }
.ds-inv-files a:hover { background: var(--ds-track); }
.ds-inv-files span { flex-grow: 1; display: flex; flex-direction: column; line-height: 1.3; }
.ds-inv-files small { color: var(--ds-muted); font-size: 12px; }
.ds-inv-files em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--ds-danger-soft); color: var(--ds-danger-ink); }
.ds-inv-address { margin: 0; line-height: 1.6; color: var(--ds-ink-2); }
.ds-inv-address small { color: var(--ds-muted); }
.ds-inv-city { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
#inv-billing-form[hidden], #inv-billing-view[hidden], #inv-edit[hidden] { display: none; }
@media (min-width: 901px) and (max-width: 1320px) {
  .ds-pay-grid, .ds-inv-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-pay-summary { position: static; }
}
@media (max-width: 900px) {
  .ds-pay-grid, .ds-inv-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-pay-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-pay-summary { position: static; }
  .ds-pay-custom__input { max-width: none; }
  .ds-inv-row { padding: 12px 16px; }
  .ds-pay-result { margin: 8px 0; padding: 28px 16px; }
  .ds-pay-result .ds-dash__actions { display: flex; flex-direction: column; width: 100%; }
}
@media (max-width: 900px) {
  .ds-inv-row { flex-wrap: wrap; }
  .ds-inv-row__side { flex-direction: row; align-items: center; justify-content: space-between; flex-basis: 100%; padding-left: 22px; }
}

/* ------------------------------------------------------------------ Ustawienia konta (konto.php) */
.ds-acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ds-acc-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ds-acc-profile__avatar { width: 56px; height: 56px; font-size: 18px; }
.ds-acc-profile__who { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-acc-profile__who strong { font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.ds-acc-profile__who small { color: var(--ds-muted); font-size: 13px; }
.ds-acc-facts { flex-basis: 100%; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-acc-facts div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--ds-surface-2); }
.ds-acc-facts dt { font-size: 13px; font-weight: 700; color: var(--ds-muted); }
.ds-acc-facts dd { margin: 0; font-weight: 700; text-align: right; }
.ds-acc-facts dd a { margin-left: 6px; font-size: 13px; }
.ds-acc-note { flex-basis: 100%; }
.ds-acc-docs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ds-acc-docs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ds-line); }
.ds-acc-docs li:last-child { border-bottom: 0; }
.ds-acc-docs a { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ds-acc-close p a { font-weight: 700; }
@media (max-width: 1320px) { .ds-acc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ds-acc-facts dd { text-align: left; }
  .ds-acc-docs li { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ Napisz do nas (kontakt.php) */
.ds-cf-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 12px; align-items: start; max-width: 1200px; }
.ds-cf-topics { justify-content: flex-start; }
.ds-contact-page textarea { min-height: 150px; padding: 12px 14px; border: 2px solid transparent; border-radius: 16px; background: var(--ds-surface-2); font: 500 16px/1.5 var(--ds-font); color: var(--ds-ink); resize: vertical; outline: none; }
.ds-contact-page textarea:focus { border-color: var(--ds-ink); background: var(--ds-surface); }
.ds-contact-page textarea[aria-invalid="true"] { border-color: var(--ds-accent); background: #FFF6F3; }
.ds-cf-count { align-self: flex-end; color: var(--ds-muted); font-size: 12px; margin-top: -4px; }
.ds-cf-hint { margin-top: -6px; }
.ds-cf-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#contactForm[hidden], .ds-cf-sent[hidden] { display: none; }
.ds-cf-sent { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 12px; text-align: center; }
.ds-cf-sent .ds-pay-result__icon { background: var(--ds-mint); color: var(--ds-green-deep); }
.ds-cf-company { gap: 4px; font-size: 14px; }
.ds-cf-company a { font-weight: 700; }
body.ds-guest .ds-contact-page { max-width: 1100px; margin: 0 auto; }
@media (max-width: 1100px) { .ds-cf-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Logowanie, rejestracja, nowe hasło (includes/auth_view.php) */
.ds-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; max-width: 1100px; margin: 8px auto 24px; padding: 0 16px; box-sizing: border-box; min-height: calc(100vh - 200px); }
.ds-auth__brand {
  display: flex; flex-direction: column; gap: 28px; padding: 36px; border-radius: var(--ds-radius-card);
  background: linear-gradient(155deg, var(--ds-accent) 0%, #FF6B3D 45%, var(--ds-warm) 100%); color: #fff;
}
.ds-auth__brand .ds-logo { color: #fff !important; }
.ds-auth__brand .ds-logo__mark { background: #fff; color: var(--ds-accent); }
.ds-auth__brand .ds-logo__text span { color: #fff; opacity: .85; }
.ds-auth__pitch h2 { margin: 0 0 14px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.6px; color: #fff; }
.ds-auth__pitch ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; font-weight: 600; }
.ds-auth__pitch li { display: flex; gap: 10px; align-items: flex-start; }
.ds-auth__pitch .ds-icon { flex-shrink: 0; margin-top: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .25); stroke-width: 3; }
.ds-auth__phone { margin-top: auto; max-width: 340px; background: rgba(255, 255, 255, .92); color: var(--ds-ink); min-height: 0; }
.ds-auth__panel { display: flex; align-items: center; justify-content: center; }
.ds-auth__card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--ds-radius-card); background: var(--ds-surface); box-sizing: border-box; }
.ds-auth__card .ds-h1 { font-size: 30px; }
.ds-auth__card .ds-sub { margin-top: -6px; line-height: 1.5; }
.ds-auth__card .ds-sub a, .ds-auth__row a, .ds-auth__resend a, .ds-auth__consents a { font-weight: 700; }
.ds-auth__steps { width: 100%; }
.ds-auth__steps li { flex: 1; justify-content: center; font-size: 13px; padding-right: 10px; }
.ds-auth__alert { margin: 0; }
.ds-auth__pass { position: relative; display: block; }
.ds-auth__pass input { padding-right: 76px !important; }
.ds-auth__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; padding: 8px 10px; border-radius: 10px; font: 700 13px var(--ds-font); color: var(--ds-accent-ink); cursor: pointer; }
.ds-auth__eye:hover { background: var(--ds-track); }
.ds-auth__row { text-align: right; font-size: 14px; margin-top: -4px; }
.ds-auth__consents { display: flex; flex-direction: column; gap: 10px; }
.ds-auth__consents .ds-imp-check { font-weight: 500; line-height: 1.45; }
.ds-auth__code { text-align: center; font-size: 28px !important; font-weight: 800 !important; letter-spacing: 10px; min-height: 60px !important; }
.ds-auth__resend { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 14px; padding-top: 6px; border-top: 1px solid var(--ds-line); }
.ds-auth [data-form-error][hidden] { display: none; }
body.ds-guest:has(.ds-auth) .ds-guestbar { display: none; }
@media (max-width: 900px) {
  .ds-auth { grid-template-columns: minmax(0, 1fr); padding: 0 12px; min-height: 0; margin-top: 12px; }
  .ds-auth__brand { padding: 18px 20px; gap: 0; border-radius: 22px; }
  .ds-auth__pitch, .ds-auth__phone { display: none; }
  .ds-auth__card { padding: 22px 18px; border-radius: 24px; }
  .ds-auth__card .ds-h1 { font-size: 26px; }
}

/* ------------------------------------------------------------------ Dokumenty (dokumenty/*.php): pełna szerokość, pasek powrotu */
.ds-doc-page { display: flex; flex-direction: column; gap: 12px; }
.ds-doc-bar { position: sticky; top: 8px; z-index: 20; display: flex; justify-content: space-between; gap: 8px; }
.ds-doc-bar .ds-btn { box-shadow: 0 4px 14px rgba(22, 23, 26, .08); }
.ds-doc { padding: 32px 40px; }
.ds-doc .content { max-width: none; font-size: 15px; line-height: 1.65; color: var(--ds-ink-2); }
.ds-doc .content h3 { color: var(--ds-ink); font-weight: 800; letter-spacing: -.3px; }
.ds-doc .content h4, .ds-doc .content h5 { color: var(--ds-ink); font-weight: 800; }
.ds-doc .content a { font-weight: 700; }
.ds-doc .card-footer { border-top: 1px solid var(--ds-line); margin-top: 20px; padding-top: 16px; }
body.ds-guest .ds-doc-page { padding: 8px 16px 24px; }
@media (max-width: 900px) {
  .ds-doc { padding: 20px 16px; }
  .ds-doc-bar { top: 4px; }
}
@media print {
  .ds-sidebar, .ds-topbar, .ds-bottomnav, .ds-guestbar, .ds-footer, .ds-doc-bar, .ds-safe-banner, .ds-backdrop { display: none !important; }
  .ds-main { margin: 0 !important; padding: 0 !important; }
  html, body.ds-app { background: #fff !important; }
  .ds-doc { padding: 0; border-radius: 0; }
}
@media (max-width: 520px) {
  .ds-guestbar { padding: 12px 12px; gap: 8px; }
  .ds-guestbar .ds-logo__mark { width: 32px; height: 32px; border-radius: 10px; }
  .ds-guestbar .ds-logo__text { font-size: 18px; }
  .ds-guestbar__actions { gap: 6px; }
  .ds-guestbar__actions .ds-btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
}
/* Własna kwota: podświetlenie jak wybrany kafelek - przy kliknięciu i gdy wpisana kwota nie jest gotowym kafelkiem */
.ds-pay-custom__input input, .ds-pay-custom__input input:focus { border: 2px solid transparent !important; background: var(--ds-surface-2) !important; box-shadow: none !important; }
.ds-pay-custom__input.is-custom input, .ds-pay-custom__input.is-custom input:focus { border-color: var(--ds-accent) !important; background: var(--ds-accent-soft) !important; }
.ds-pay-custom__input.is-custom b { color: var(--ds-accent-ink); }
/* Grupy: ikonki edycji/usuwania w nagłówku karty (obok liczby osób), żeby przyciski nie przeskakiwały do nowej linii */
.ds-gr-card__head .ds-gr-card__more { margin-left: 2px; flex-shrink: 0; }
.ds-gr-card__head { align-items: flex-start; }
.ds-gr-card__head .ds-gr-dot { margin-top: 6px; }
.ds-gr-card__title { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-gr-card__title .ds-gr-name { overflow-wrap: anywhere; line-height: 1.25; }
.ds-gr-card__title small { font-size: 13px; font-weight: 700; color: var(--ds-muted); }
.ds-gr-card__actions .ds-btn { flex: 1 1 auto; }

/* Podpowiedzi w polach (placeholder) - jaśniejsze w całym panelu, także w polach ze starego stylu Bulmy */
body.ds-app input::placeholder,
body.ds-app textarea::placeholder,
body.ds-app .input::placeholder,
body.ds-app .textarea::placeholder { color: #B3B5BB !important; opacity: 1; }
/* Kontakty: świeżo dodany kontakt - zielone podświetlenie, plakietka „nowy” i krótkie mignięcie */
.ds-ct-row.is-new, .ds-ct-row.is-new.is-selected { background: #E6F7EE; box-shadow: inset 4px 0 0 var(--ds-green); animation: ds-ct-new 1.6s ease-out; }
.ds-ct-row.is-new .ds-ct-row__who strong::after { content: 'nowy'; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--ds-green); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 2px; }
@keyframes ds-ct-new { 0%, 35% { background: #BDEBD0; } 100% { background: #E6F7EE; } }

/* ------------------------------------------------------------------ Wyślij SMS: jeden formularz z 3 krokami (send_sms.php) */
.ds-compose-card { display: flex; flex-direction: column; padding: 8px 24px; }
.ds-step { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--ds-line); align-items: start; }
.ds-step:last-child { border-bottom: 0; }
.ds-step__label { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding-top: 12px; font-size: 16px; font-weight: 800; color: var(--ds-ink); }
.ds-step__label small { flex-basis: 100%; padding-left: 36px; margin-top: -6px; font-size: 12px; font-weight: 600; color: var(--ds-muted); }
.ds-step__no { width: 26px; height: 26px; border-radius: 999px; background: var(--ds-ink); color: #fff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: -2px; }
.ds-step__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ds-input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; border: 2px solid #DCDDE2; border-radius: 16px; background: var(--ds-surface); font: 600 17px var(--ds-font); color: var(--ds-ink); outline: none; }
.ds-input:hover { border-color: #C6C8CE; }
.ds-input:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 4px rgba(244, 58, 9, .12); }
.ds-input--area { min-height: 170px; padding: 14px 16px; font-weight: 500; line-height: 1.5; resize: vertical; }
.ds-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ds-pick__opt { position: relative; cursor: pointer; }
.ds-pick__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ds-pick__opt span { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border: 2px solid #DCDDE2; border-radius: 16px; background: var(--ds-surface); font-weight: 700; font-size: 15px; }
.ds-pick__opt span::before { content: ''; width: 18px; height: 18px; border-radius: 999px; border: 2px solid #B9BBC1; box-sizing: border-box; flex-shrink: 0; }
.ds-pick__opt:hover span { border-color: #C6C8CE; }
.ds-pick__opt input:checked + span { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-pick__opt input:checked + span::before { border: 5px solid var(--ds-accent); background: #fff; }
.ds-pick__opt input:focus-visible + span { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds-pick__add { font-size: 13px; font-weight: 700; padding: 0 6px; }
.ds-meter--compact { padding: 0 2px; border-top: 0; gap: 12px; }
.ds-meter--compact .ds-meter__count { font-size: 13px; }
.ds-meter--compact .ds-meter__count strong { font-size: 15px; letter-spacing: 0; }
.ds-meter--compact .ds-meter__ticks { height: 8px; gap: 2px; }
.ds-meter--compact .ds-meter__parts { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--ds-surface-2); }
.ds-polish { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--ds-surface-2); cursor: pointer; position: relative; }
.ds-polish input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-polish__switch { flex-shrink: 0; width: 40px; height: 24px; border-radius: 999px; background: #C9CBD1; position: relative; transition: background .15s; margin-top: 1px; }
.ds-polish__switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ds-polish input:checked + .ds-polish__switch { background: var(--ds-green); }
.ds-polish input:checked + .ds-polish__switch::after { transform: translateX(16px); }
.ds-polish input:focus-visible + .ds-polish__switch { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds-polish > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ds-polish small { font-size: 13px; color: var(--ds-muted); line-height: 1.4; }
.ds-polish.ds-insight--warn { background: var(--ds-warm-soft); }
.ds-polish.ds-insight--warn small { color: var(--ds-warm-ink); }
.ds-send__summary .ds-phone { min-height: 0; }
@media (min-width: 901px) and (max-width: 1320px) { .ds-step { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ds-step__label { padding-top: 0; } }
@media (max-width: 900px) {
  .ds-compose-card { padding: 4px 16px; }
  .ds-step { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0; }
  .ds-step__label { padding-top: 0; }
  .ds-meter--compact .ds-meter__ticks { order: 0; flex-basis: auto; height: 8px; }
  .ds-meter--compact { flex-wrap: nowrap; }
  .ds-meter--compact .ds-meter__ticks { min-width: 40px; }
}
/* Wyślij SMS: prawa kolumna tej samej wysokości co formularz i przewijana razem ze stroną (bez przyklejania) */
.ds-send--even { align-items: stretch; }
.ds-send--even .ds-send__aside { position: static; }
.ds-send--even .ds-send__summary { flex: 1; }
.ds-send--even .ds-send__summary > .ds-btn { margin-top: auto; }
/* Wyślij do wielu: grupy jak opcje wyboru (kwadrat = można wybrać kilka), lista odbiorców w ramce */
.ds-send--even .ds-groups .group-btn.button {
  min-height: 46px !important; padding: 0 16px 0 12px !important; border: 2px solid #DCDDE2 !important; border-radius: 16px !important;
  background: var(--ds-surface) !important; color: var(--ds-ink) !important; font-weight: 700 !important; font-size: 14px !important; gap: 10px; display: inline-flex; align-items: center;
}
.ds-send--even .ds-groups .group-btn.button::before { content: ''; width: 18px; height: 18px; border-radius: 6px; border: 2px solid #B9BBC1; box-sizing: border-box; flex-shrink: 0; }
.ds-send--even .ds-groups .group-btn.button:hover { border-color: #C6C8CE !important; }
.ds-send--even .ds-groups .group-btn.button.is-primary { border-color: var(--ds-accent) !important; background: var(--ds-accent-soft) !important; color: var(--ds-ink) !important; }
.ds-send--even .ds-groups .group-btn.button.is-primary::before { background: var(--ds-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--ds-accent); }
.ds-recipients { border: 2px solid #EDEDF0; border-radius: 16px; overflow: hidden; }
.ds-recipients__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--ds-surface-2); font-size: 14px; font-weight: 800; }
.ds-recipients .ds-contact-preview { max-height: 190px; padding: 6px 8px 8px; }
.ds-step__label label { cursor: pointer; }
.ds-meter--compact { flex-wrap: wrap; row-gap: 8px; }
.ds-meter--compact .ds-meter__ticks { flex: 1 1 80px; min-width: 60px; }
/* Wyślij do wielu: lista odbiorców zwinięta - rozwijana na żądanie */
details.ds-recipients { border: 0; border-radius: 0; overflow: visible; }
details.ds-recipients > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; padding: 0; background: none; font-size: 14px; font-weight: 700; color: var(--ds-ink-2); }
details.ds-recipients > summary::-webkit-details-marker { display: none; }
.ds-recipients__toggle { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--ds-accent-ink); }
.ds-recipients__toggle::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -3px 0 0 4px; transition: transform .15s; }
details.ds-recipients[open] .ds-recipients__toggle::after { transform: rotate(-135deg); margin-top: 3px; }
details.ds-recipients .is-open, details.ds-recipients[open] .is-closed { display: none; }
details.ds-recipients[open] .is-open { display: inline; }
details.ds-recipients > summary:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 4px; border-radius: 8px; }
details.ds-recipients .ds-contact-preview { margin-top: 10px; max-height: 220px; padding: 6px 8px; border: 2px solid #EDEDF0; border-radius: 16px; }
/* Wyślij do wielu: linia „Wybrano: X os. · Pokaż listę” i okno odbiorców z wyszukiwarką */
.ds-send--even .ds-recipients { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 0; border-radius: 0; overflow: visible; font-size: 14px; font-weight: 700; color: var(--ds-ink-2); }
.ds-recipients__toggle { border: 0; background: none; padding: 0; cursor: pointer; font: 800 14px var(--ds-font); color: var(--ds-accent-ink); }
.ds-recipients__toggle::after { content: '' !important; display: none !important; }
.ds-recipients__toggle:hover { text-decoration: underline; }
.ds-rcp { width: min(560px, calc(100vw - 24px)); max-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.ds-rcp__head { display: flex; align-items: center; gap: 10px; }
.ds-rcp__head .ds-h2 { flex-grow: 1; }
.ds-rcp__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 120px; border-top: 1px solid var(--ds-line); }
.ds-rcp__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--ds-line); font-size: 15px; cursor: default; }
.ds-rcp__list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ds-rcp__list li small { flex-shrink: 0; color: var(--ds-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ds-rcp__list li.is-more { justify-content: center; color: var(--ds-muted); font-size: 14px; border-bottom: 0; }

/* ------------------------------------------------------------------ Pasek konta w prawym górnym rogu (komputer) */
.ds-accountbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 12px 16px -4px calc(var(--ds-sidebar-w) + 32px); position: relative; z-index: 30; }
.ds-accountbar__credits { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--ds-surface); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ds-accountbar__credits > .ds-icon { color: var(--ds-muted); }
.ds-accountbar.is-low .ds-accountbar__credits { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.ds-accountbar.is-low .ds-accountbar__credits > .ds-icon { color: var(--ds-warm-ink); }
.ds-accountbar__menu { position: relative; }
.ds-accountbar__me { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border: 0; border-radius: 999px; background: var(--ds-surface); cursor: pointer; color: var(--ds-ink-2); }
.ds-accountbar__me .ds-avatar { width: 36px; height: 36px; }
.ds-accountbar__me:hover, .ds-accountbar__me[aria-expanded="true"] { background: var(--ds-track); }
.ds-accountbar__me:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds-accountbar__dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; padding: 6px; border-radius: 18px; background: var(--ds-surface); box-shadow: var(--ds-shadow-float); display: flex; flex-direction: column; }
.ds-accountbar__dropdown[hidden] { display: none; }
.ds-accountbar__who { display: flex; flex-direction: column; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ds-line); line-height: 1.3; }
.ds-accountbar__who strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ds-accountbar__who small { font-size: 13px; color: var(--ds-muted); }
.ds-accountbar__dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--ds-ink) !important; text-decoration: none !important; font-weight: 600; font-size: 14px; }
.ds-accountbar__dropdown a:hover { background: var(--ds-surface-2); }
.ds-accountbar__dropdown a .ds-icon { color: var(--ds-muted); }
.ds-accountbar__dropdown a.is-danger, .ds-accountbar__dropdown a.is-danger .ds-icon { color: var(--ds-danger-ink) !important; }
/* Na komputerze konto jest w pasku u góry - w bocznym menu zostaje sama nawigacja */
@media (min-width: 901px) { .ds-sidebar__account { display: none; } }
/* Na telefonie saldo jest w górnym pasku, a konto w menu „Więcej” */
@media (max-width: 900px) { .ds-accountbar { display: none; } }
/* Pozycje dostępne na komputerze w menu konta - w lewym menu tylko na telefonie */
@media (min-width: 901px) { .ds-nav__link--mobile { display: none; } }

/* ------------------------------------------------------------------ Strona główna (index.php) */
body.ds-guest:has(.lp) .ds-guestbar { display: none; }
.lp { max-width: 1180px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.lp-nav { display: flex; align-items: center; gap: 24px; padding: 18px 0; }
.lp-nav__links { display: flex; gap: 22px; margin-left: 24px; flex-grow: 1; }
.lp-nav__links a { color: var(--ds-ink-2) !important; font-weight: 700; font-size: 15px; text-decoration: none !important; }
.lp-nav__links a:hover { color: var(--ds-accent-ink) !important; }
.lp-nav__actions { display: flex; gap: 8px; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; padding: 40px 0 72px; }
.lp-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--ds-accent-soft); color: var(--ds-accent-ink); font-weight: 800; font-size: 14px; }
.lp-hero h1 { margin: 18px 0 16px; font-family: var(--ds-font); font-size: clamp(36px, 5vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -1.6px; color: var(--ds-ink); }
.lp-hero h1 span { color: var(--ds-accent); }
.lp-lead { margin: 0 0 26px; font-size: 19px; line-height: 1.55; color: var(--ds-ink-2); max-width: 560px; }
.lp-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-checks { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; font-weight: 600; color: var(--ds-ink-2); }
.lp-checks li { display: inline-flex; align-items: center; gap: 8px; }
.lp-checks .ds-icon { color: var(--ds-green-ink); stroke-width: 3; }
.lp-checks--col { flex-direction: column; margin: 18px 0 26px; }
.lp-hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 460px; }
.lp-hero__visual::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 48px; background: linear-gradient(150deg, var(--ds-accent) 0%, #FF7A4D 45%, var(--ds-warm) 100%); transform: rotate(-4deg); }
.lp-hero__img { position: relative; width: 100%; max-width: 560px; height: auto; border-radius: 32px; }
.lp-phone { position: relative; width: 300px; padding: 18px; border-radius: 40px; background: #fff; box-shadow: 0 30px 60px rgba(22, 23, 26, .22); border: 8px solid #16171A; }
.lp-phone__bar { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; border-bottom: 1px solid var(--ds-line); }
.lp-phone__bar strong { display: block; font-size: 15px; }
.lp-phone__bar small { font-size: 12px; color: var(--ds-muted); }
.lp-phone__msgs { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 90px; }
.lp-phone .ds-bubble { background: var(--ds-surface-2); font-size: 14px; }
.lp-float { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--ds-shadow-float); font-size: 14px; color: var(--ds-ink-2); }
.lp-float .ds-icon { padding: 6px; border-radius: 10px; width: 16px; height: 16px; }
.lp-float--a { left: 0; bottom: 70px; }
.lp-float--a .ds-icon { background: var(--ds-mint); color: var(--ds-green-deep); stroke-width: 3; }
.lp-float--b { right: 0; top: 60px; }
.lp-float--b .ds-icon { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.lp-section { padding: 64px 0; }
.lp-head { text-align: center; margin-bottom: 34px; }
.lp-kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ds-accent-ink); }
.lp-head h2, .lp-price h2, .lp-final h2 { margin: 8px 0 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -1px; color: var(--ds-ink); }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-steps li { padding: 28px; border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.lp-steps__no { display: inline-flex; width: 40px; height: 40px; border-radius: 14px; align-items: center; justify-content: center; background: var(--ds-ink); color: #fff; font-weight: 800; font-size: 18px; }
.lp-steps h3, .lp-features h3, .lp-uses h3 { margin: 16px 0 8px; font-size: 19px; font-weight: 800; color: var(--ds-ink); }
.lp-steps p, .lp-features p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ds-ink-2); }
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-features article { padding: 26px; border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.lp-ico { display: inline-flex; width: 48px; height: 48px; border-radius: 16px; align-items: center; justify-content: center; }
.lp-ico.is-accent { background: var(--ds-accent-soft); color: var(--ds-accent-ink); }
.lp-ico.is-warm { background: var(--ds-warm-soft); color: var(--ds-warm-ink); }
.lp-ico.is-mint { background: var(--ds-mint); color: var(--ds-green-deep); }
.lp-ico.is-blue { background: #DCEBF7; color: #1F5F8B; }
.lp-uses__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-uses__grid article { padding: 24px; border-radius: var(--ds-radius-card); background: linear-gradient(160deg, #FFFFFF 0%, #FFF3EC 100%); }
.lp-uses__grid h3 { margin-top: 0; }
.lp-uses__grid .ds-bubble { background: #fff; box-shadow: 0 6px 18px rgba(22, 23, 26, .06); font-size: 15px; line-height: 1.5; }
.lp-price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; padding: 40px; border-radius: 36px; background: var(--ds-surface); }
.lp-price__value { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.lp-price__value strong { font-size: 64px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--ds-accent); }
.lp-price__value span { font-size: 18px; font-weight: 700; color: var(--ds-ink-2); }
.lp-price__gross { margin: 6px 0 0; color: var(--ds-muted); font-size: 15px; }
.lp-price__table { border-radius: 24px; overflow: hidden; background: var(--ds-surface-2); }
.lp-price__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; padding: 14px 20px; border-bottom: 1px solid #E4E4E9; font-size: 15px; font-variant-numeric: tabular-nums; }
.lp-price__row:last-child { border-bottom: 0; }
.lp-price__row span:not(:first-child) { text-align: right; }
.lp-price__row b { font-weight: 800; color: var(--ds-ink); }
.lp-price__row--head { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ds-muted); background: #E9E9EE; }
.lp-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.lp-faq details { border-radius: 20px; background: var(--ds-surface); padding: 0 22px; }
.lp-faq summary { list-style: none; cursor: pointer; padding: 18px 30px 18px 0; font-weight: 800; font-size: 17px; color: var(--ds-ink); position: relative; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 600; color: var(--ds-accent); }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq details p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--ds-ink-2); }
.lp-final { margin: 40px 0 56px; padding: 56px 32px; border-radius: 40px; text-align: center; background: linear-gradient(150deg, var(--ds-accent) 0%, #FF6B3D 50%, var(--ds-warm) 100%); color: #fff; }
.lp-final h2 { color: #fff; }
.lp-final p { margin: 12px auto 26px; max-width: 560px; font-size: 18px; opacity: .95; }
.lp-final .lp-hero__cta { justify-content: center; }
.lp-final .ds-btn--white { color: var(--ds-accent-ink) !important; }
.lp-final__ghost { background: rgba(255, 255, 255, .18); color: #fff !important; border: 2px solid rgba(255, 255, 255, .6); }
.lp-final__ghost:hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 1000px) {
  .lp-nav__links { display: none; }
  .lp-hero { grid-template-columns: minmax(0, 1fr); padding: 16px 0 48px; gap: 28px; }
  .lp-hero__visual { min-height: 400px; }
  .lp-steps, .lp-features, .lp-uses__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-price { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; }
}
@media (max-width: 560px) {
  .lp { padding: 0 14px; }
  .lp-nav { gap: 10px; }
  .lp-nav .ds-logo__text { font-size: 19px; }
  .lp-nav__actions .ds-btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
  .lp-nav__actions .ds-btn--white { display: none; }
  .lp-lead { font-size: 17px; }
  .lp-hero__cta .ds-btn { flex: 1 1 100%; }
  .lp-phone { width: 250px; }
  .lp-float--a { left: -4px; bottom: 30px; }
  .lp-float--b { right: -4px; top: 20px; }
  .lp-section { padding: 44px 0; }
  .lp-price__value strong { font-size: 52px; }
  .lp-final { padding: 40px 20px; border-radius: 28px; }
}
.lp-nav__actions { margin-left: auto; }
@media (max-width: 560px) {
  .lp-nav__actions .ds-btn--white { display: inline-flex; background: transparent; box-shadow: none; padding: 0 8px; }
  .lp-float--b { top: auto; bottom: 150px; right: -4px; }
  .lp-float--a { bottom: 24px; }
}
@media (max-width: 560px) { .lp-float--b { display: none; } }
/* Strona główna: grafika hero.png/webp z przezroczystym tłem - telefon wystaje poza pomarańczową kartę */
.lp-hero__img { border-radius: 0; max-width: 600px; filter: drop-shadow(0 28px 36px rgba(22, 23, 26, .22)); }
.lp-hero__visual:has(.lp-hero__img)::before { inset: 14% 12% 8% 12%; }
/* Strona główna: mniejsza karta, większy telefon; dół grafiki (ucięty nadgarstek) wygaszony */
.lp-hero__visual:has(.lp-hero__img)::before { inset: 22% 20% 14% 20%; border-radius: 40px; }
.lp-hero__img { max-width: 680px; width: 112%; margin: -30px -6% -40px; filter: drop-shadow(0 24px 30px rgba(22, 23, 26, .2));
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 97%); mask-image: linear-gradient(to bottom, #000 78%, transparent 97%); }
@media (max-width: 1000px) { .lp-hero__img { width: 100%; max-width: 520px; margin: -20px auto -30px; } }
/* Strona główna (poprawka): karta do dołu obrazka, dłoń „wchodzi” od dołu - bez wygaszania */
.lp-hero__visual:has(.lp-hero__img) { align-items: flex-end; min-height: 0; clip-path: inset(-200px -200px 0 -200px); }
.lp-hero__visual:has(.lp-hero__img)::before { inset: 20% 13% 0 13%; border-radius: 40px 40px 0 0; transform: none; }
.lp-hero__img { -webkit-mask-image: none; mask-image: none; display: block; width: 108%; max-width: 660px; margin: -40px -4% 0; }
@media (max-width: 1000px) { .lp-hero__img { width: 100%; max-width: 500px; margin: 0 auto; } }
.lp-hero__img { filter: drop-shadow(0 14px 18px rgba(22, 23, 26, .14)); }
/* Strona główna: grafika w zaokrąglonej karcie - telefon wystaje tylko górą, dłoń przycięta do krawędzi karty */
.lp-hero__visual:has(.lp-hero__stage) { clip-path: none; align-items: center; min-height: 0; padding-top: 70px; }
.lp-hero__visual:has(.lp-hero__stage)::before { display: none; }
.lp-hero__stage { position: relative; width: min(440px, 82%); aspect-ratio: 1 / 1.05; border-radius: 44px;
  background: linear-gradient(150deg, var(--ds-accent) 0%, #FF7A4D 45%, var(--ds-warm) 100%);
  clip-path: inset(-600px 0 0 0 round 44px); }
.lp-hero__stage .lp-hero__img { position: absolute; width: 130%; max-width: none; left: -15%; bottom: -4%; margin: 0; border-radius: 0;
  -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 16px 22px rgba(22, 23, 26, .18)); }
@media (max-width: 1000px) { .lp-hero__visual:has(.lp-hero__stage) { padding-top: 60px; } .lp-hero__stage { width: min(360px, 78%); } }
/* Karta lekko obrócona, telefon prosto (obrót kompensowany na obrazku) */
.lp-hero__stage { transform: rotate(-7deg); }
.lp-hero__stage .lp-hero__img { transform: rotate(7deg); transform-origin: 50% 90%; }
/* Logowanie / rejestracja: biała karta tej samej wielkości co pomarańczowy panel, formularz wyśrodkowany w pionie */
.ds-auth__panel { align-items: stretch; }
.ds-auth__card { max-width: none; justify-content: center; padding: 40px clamp(24px, 5vw, 64px); }
.ds-auth__card > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
@media (max-width: 900px) { .ds-auth__card { padding: 22px 18px; } }
/* Kontakty: znaczek płci zamiast inicjałów */
.ds-gender { width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.ds-gender svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ds-gender.is-K { background: #FDE8E1; color: #C2410C; }
.ds-gender.is-M { background: #DCEBF7; color: #1F5F8B; }
.ds-gender.is-x { background: var(--ds-surface-2); color: var(--ds-muted); }
.ds-gender--lg { width: 48px; height: 48px; font-size: 18px; }
.ds-gender--lg svg { width: 22px; height: 22px; }