/* ===================================================================
       Design tokens — 0Trust CRM (mobile-first, "premium app" feel)
       =================================================================== */
    :root {
      /* Spójna paleta z chłodnym fioletowym podtonem — wszystkie szarości
         są zharmonizowane z --bg (zamiast neutralnych #f8f9fb/#e5e7eb) */
      --bg:           #eceef4;   /* spokojny chłodny róż-fiolet */
      --bg-elev:      #f2f4f8;
      --surface:      #ffffff;
      --surface-2:    #f4f6fa;
      --surface-3:    #eaeef3;
      --border:       #dde2e8;
      --border-strong:#c6ced8;
      --text:         #131b2e;
      --text-muted:   #455060;   /* ciemniejsze niż wczesniej (#55606f) — WCAG AA na --bg */
      --text-soft:    #647184;   /* znacznie ciemniejsze niz #8f99a8 — czytelne dla slabowidzacych */

      --primary:      #2563eb;
      --primary-dark: #1d4ed8;
      --warning:      #b45309;
      --warning-bg:   #fef7e0;
      --success:      #15803d;
      --success-bg:   #dcfce7;
      --danger:       #b91c1c;
      --danger-bg:    #fee2e2;
      --info:         #0e7490;
      --info-bg:      #cffafe;
      --purple:       #6d28d9;
      --purple-bg:    #e6eaf3;

      /* Brand */
      --brand-purple-deep: #131b2e;
      --brand-purple-mid:  #1a2332;
      --brand-purple:      #2b3a5c;
      --brand-purple-soft: #e6eaf3;
      --brand-gold:        #c9a86a;
      --brand-gold-soft:   #ecdcb8;

      /* Status colors */
      --st-to_contact:    #a16207;
      --st-outbound_only: #2563eb;
      --st-inbound_only:  #15803d;
      --st-two_way:       #6d28d9;
      --st-system:        #6b7280;
      --st-spam:          #b91c1c;

      --radius:      14px;
      --radius-sm:   10px;
      --radius-lg:   20px;
      --radius-pill: 999px;

      --shadow-xs:   0 1px 2px rgba(40,28,70,.05);
      --shadow-sm:   0 1px 2px rgba(40,28,70,.05), 0 1px 1px rgba(40,28,70,.04);
      --shadow:      0 4px 14px rgba(40,28,70,.08);
      --shadow-lg:   0 10px 30px rgba(40,28,70,.14);
      --shadow-fab:  0 8px 20px rgba(43, 58, 92,.35), 0 2px 6px rgba(19, 27, 46,.25);

      --nav-h:        48px;
      --bottom-nav-h: 64px;
      --sticky-search-h: 56px;

      --ease:        cubic-bezier(.2,.8,.2,1);

      --sat: env(safe-area-inset-top, 0px);
      --sab: env(safe-area-inset-bottom, 0px);
    }

    /* ===== Dark mode ===== */
    html[data-theme="dark"] {
      /* Tło zostawione ciemne, ale kafelki (surface) podniesione
         żeby były wyraźnie czytelne na tle --bg */
      --bg:           #131b2e;
      --bg-elev:      #1a2332;
      --surface:      #23304c;
      --surface-2:    #273b57;
      --surface-3:    #314868;
      --border:       #334c70;
      --border-strong:#486185;
      --text:         #ecf4ff;
      --text-muted:   #cfd9e8;   /* jasniejsze dla lepszego kontrastu na ciemnym tle */
      --text-soft:    #a2afc2;   /* podbite z #8996a8 — czytelne dla slabowidzacych */

      --primary:      #60a5fa;
      --primary-dark: #2b3a5c;
      --warning:      #fbbf24;
      --warning-bg:   #3a2e0d;
      --success:      #4ade80;
      --success-bg:   #0e2a18;
      --danger:       #f87171;
      --danger-bg:    #3a1414;
      --info:         #22d3ee;
      --info-bg:      #0c2a30;
      --purple:       #a78bfa;
      --purple-bg:    #2a1f4d;

      --brand-purple-soft: #2b3a5c;

      /* statusy w dark - jasniejsze warianty */
      --st-to_contact:    #d97706;
      --st-outbound_only: #60a5fa;
      --st-inbound_only:  #4ade80;
      --st-two_way:       #a78bfa;
      --st-system:        #9ca3af;
      --st-spam:          #f87171;

      --shadow-xs:   0 1px 2px rgba(0,0,0,.35);
      --shadow-sm:   0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
      --shadow:      0 4px 14px rgba(0,0,0,.45);
      --shadow-lg:   0 10px 30px rgba(0,0,0,.55);
      --shadow-fab:  0 8px 24px rgba(43, 58, 92,.55), 0 2px 6px rgba(0,0,0,.6);

      /* Bootstrap vars — żeby nagłówki/tekst Bootstrapowych komponentów
         (card-title, modal-title, offcanvas-title, alert-heading, accordion...)
         dziedziczyły jasny kolor zamiast domyślnego ciemnego. */
      --bs-body-color:        var(--text);
      --bs-body-color-rgb:    241, 236, 255;
      --bs-body-bg:           var(--bg);
      --bs-heading-color:     var(--text);
      --bs-emphasis-color:    var(--text);
      --bs-emphasis-color-rgb:241, 236, 255;
      --bs-secondary-color:   var(--text-muted);
      --bs-tertiary-color:    var(--text-soft);
      --bs-border-color:      var(--border);
    }
    html[data-theme="dark"] body { color-scheme: dark; }
    html[data-theme="dark"] .navbar-dark { background: var(--bg-elev) !important; }
    /* Bootstrap reset w dark — table, form, list-group, badge contrast */
    html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text); }
    html[data-theme="dark"] .table-light, html[data-theme="dark"] .table > thead {
      --bs-table-bg: var(--surface-2); color: var(--text-muted);
    }
    html[data-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--surface-3); --bs-table-hover-color: var(--text); }
    html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
      background: var(--surface-2); color: var(--text); border-color: var(--border-strong);
    }
    html[data-theme="dark"] .form-control::placeholder { color: var(--text-soft); }
    html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] {
      background: var(--surface-3); color: var(--text-muted);
    }
    html[data-theme="dark"] .list-group-item {
      background: var(--surface); color: var(--text); border-color: var(--border);
    }
    html[data-theme="dark"] .btn-outline-secondary {
      color: var(--text); border-color: var(--border-strong); background: var(--surface-2);
    }
    html[data-theme="dark"] .btn-outline-secondary:hover {
      background: var(--surface-3); border-color: var(--text-soft); color: var(--text);
    }
    html[data-theme="dark"] .btn-soft { background: var(--surface-3); color: var(--text); }
    html[data-theme="dark"] .btn-soft:hover { background: var(--surface-2); color: var(--text); }
    html[data-theme="dark"] .text-dark { color: var(--text) !important; }
    html[data-theme="dark"] .alert-warning { background: var(--warning-bg); color: var(--warning); border-color: #5a4a16; }
    html[data-theme="dark"] .alert-success { background: var(--success-bg); color: var(--success); border-color: #1d4d2f; }
    html[data-theme="dark"] .alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: #5a1f1f; }
    html[data-theme="dark"] .alert-info    { background: var(--info-bg);    color: var(--info);    border-color: #134f5c; }
    html[data-theme="dark"] .bottom-nav { background: rgba(29,23,64,.92); border-top-color: var(--border); }
    html[data-theme="dark"] .sticky-search { background: var(--bg); }
    html[data-theme="dark"] fieldset.border { background: var(--surface-2); }
    html[data-theme="dark"] .ptr { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
    html[data-theme="dark"] .toast-item { background: #314868; }
    html[data-theme="dark"] .sheet { background: var(--surface); }
    html[data-theme="dark"] .sheet-backdrop { background: rgba(0,0,0,.65); }
    html[data-theme="dark"] .chip.is-warning { color: var(--warning); border-color: #6b5418; background: #3a2e0d; }
    html[data-theme="dark"] .chip.is-warning.is-active { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--brand-purple-deep); }
    html[data-theme="dark"] .cc-meta .cc-meeting { background: #4a3a0e; color: #fbbf24; }
    html[data-theme="dark"] .sheet-actions .sa-item.is-warning .sa-ic { background: #3a2e0d; color: var(--warning); }
    html[data-theme="dark"] .sheet-actions .sa-item.is-danger .sa-ic { background: #3a1414; color: var(--danger); }
    html[data-theme="dark"] .btn-dark { background: var(--surface-3); border-color: var(--surface-3); color: var(--text); }
    html[data-theme="dark"] .btn-dark:hover { background: var(--border-strong); border-color: var(--border-strong); color: var(--text); }
    html[data-theme="dark"] .card { --bs-card-color: var(--text); --bs-card-title-color: var(--text); --bs-heading-color: var(--text); color: var(--text); }
    html[data-theme="dark"] .card .card-title,
    html[data-theme="dark"] .card h1, html[data-theme="dark"] .card h2, html[data-theme="dark"] .card h3,
    html[data-theme="dark"] .card h4, html[data-theme="dark"] .card h5, html[data-theme="dark"] .card h6 { color: var(--text); }

    /* View transitions (Chrome) — gładkie nawigacje między stronami */
    @view-transition { navigation: auto; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .22s; }

    /* ===== Reset / Base ===== */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      padding-top: calc(var(--nav-h) + var(--sat));
      padding-bottom: calc(var(--bottom-nav-h) + var(--sab) + 12px);
      overscroll-behavior-y: contain;
    }
    /* >= md: bez bottom-nav, lżejszy padding */
    @media (min-width: 768px) {
      body { padding-bottom: 24px; }
    }
    main.app-main { max-width: 1240px; margin: 0 auto; padding: 0 12px; }
    @media (min-width: 768px) { main.app-main { padding: 0 20px; } }

    input, textarea, select { font-size: 16px !important; }

    h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; color: var(--text); margin: 0; }
    .text-muted { color: var(--text-muted) !important; }
    a { color: var(--primary); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ===== Sync progress bar (2px linia pod navbarem) ===== */
    .sync-bar {
      position: fixed; left: 0; right: 0;
      top: calc(var(--nav-h) + var(--sat));
      height: 2px; z-index: 1050;
      background: transparent;
      pointer-events: none;
      overflow: hidden;
    }
    .sync-bar.is-loading::before {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent, var(--brand-gold) 50%, transparent);
      animation: syncSlide 1.4s linear infinite;
    }
    .sync-bar.is-error::after {
      content: "";
      position: absolute; inset: 0;
      background: var(--danger);
      opacity: .85;
    }
    @keyframes syncSlide {
      from { transform: translateX(-100%); }
      to   { transform: translateX(100%); }
    }

    /* ===== Slim navbar ===== */
    .app-nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 1040;
      min-height: calc(var(--nav-h) + var(--sat));
      padding-top: var(--sat);
      background:
        radial-gradient(60% 140% at 18% 50%, rgba(43, 58, 92,.22) 0%, rgba(43, 58, 92,0) 60%),
        radial-gradient(40% 120% at 95% 0%, rgba(246,201,118,.10) 0%, rgba(246,201,118,0) 70%),
        linear-gradient(180deg, var(--brand-purple-deep) 0%, var(--brand-purple-mid) 100%);
      border-bottom: 1px solid rgba(246,201,118,.18);
      box-shadow: 0 1px 0 rgba(43, 58, 92,.18), 0 6px 20px rgba(19, 27, 46,.18);
      color: #fff;
    }
    .app-nav-inner {
      display: flex; align-items: center;
      height: var(--nav-h);
      max-width: 1240px; margin: 0 auto;
      padding: 0 12px;
      gap: .6rem;
    }
    @media (min-width: 768px) { .app-nav-inner { padding: 0 20px; } }

    .app-brand {
      display: inline-flex; align-items: center; gap: .5rem;
      color: #fff !important; text-decoration: none;
      flex-shrink: 0;
    }
    .app-brand:hover { text-decoration: none; }
    .app-brand .brand-logo {
      width: 26px; height: 26px;
      border-radius: 7px;
      box-shadow: 0 0 0 1px rgba(246,201,118,.22), 0 4px 12px rgba(43, 58, 92,.45);
      background: #040911;
    }
    .app-brand .brand-name {
      font-size: .92rem; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      background: linear-gradient(180deg, #ffffff 0%, var(--brand-gold-soft) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    @media (max-width: 380px) { .app-brand .brand-name { letter-spacing: .14em; font-size: .85rem; } }

    /* Wypełniacz — dosuwa akcje do prawej krawędzi (zastąpił dawną
       nazwę bieżącej zakładki w pasku, którą usunięto jako zbędną). */
    .app-nav-spacer { flex: 1; min-width: 0; }

    .app-nav-actions {
      display: flex; align-items: center; gap: .35rem;
      flex-shrink: 0;
      margin-left: auto;
    }
    .nav-tabs-d { display: none; }
    @media (min-width: 768px) {
      .nav-tabs-d {
        display: inline-flex; gap: .15rem;
        margin-left: 1.2rem;
        flex: 1;
      }
      .nav-tabs-d a {
        color: rgba(255,255,255,.7);
        font-size: .85rem; font-weight: 500;
        padding: .35rem .75rem;
        border-radius: var(--radius-pill);
        text-decoration: none;
        transition: background .15s var(--ease), color .15s var(--ease);
      }
      .nav-tabs-d a:hover { color: #fff; background: rgba(255,255,255,.08); }
      .nav-tabs-d a.is-active {
        background: var(--brand-gold);
        color: var(--brand-purple-deep);
        font-weight: 600;
      }
      .nav-tabs-d a .badge { background: rgba(0,0,0,.15) !important; color: inherit; font-weight: 600; }
    }
    .nav-icon-btn {
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.88); text-decoration: none;
      font-size: .95rem;
      transition: background .15s var(--ease), border-color .15s var(--ease), transform .04s;
    }
    .nav-icon-btn:hover {
      background: rgba(43, 58, 92,.25);
      border-color: rgba(246,201,118,.35);
      color: #fff; text-decoration: none;
    }
    .nav-icon-btn:active { transform: scale(.96); }
    .nav-icon-btn svg { width: 16px; height: 16px; display: block; }

    .sync-dot {
      width: 8px; height: 8px; border-radius: 999px;
      background: var(--brand-gold);
      box-shadow: 0 0 0 0 rgba(246,201,118,.45);
      margin-right: .15rem;
      transition: background .2s;
    }
    .sync-dot.is-loading { animation: syncPulse 1.2s ease-out infinite; }
    .sync-dot.is-error   { background: #ef4444; }
    @keyframes syncPulse {
      0%   { box-shadow: 0 0 0 0 rgba(246,201,118,.55); }
      80%  { box-shadow: 0 0 0 8px rgba(246,201,118,0); }
      100% { box-shadow: 0 0 0 0 rgba(246,201,118,0); }
    }

    .user-pill {
      color: rgba(255,255,255,.78);
      font-size: .82rem; font-weight: 500;
      padding: .2rem .55rem;
      border-radius: var(--radius-pill);
      background: rgba(255,255,255,.06);
    }

    /* ===== Kanał pozyskania (źródło leada) =====
       Kropka w kolorze kanału + nazwa. Celowo lżejsze wizualnie niż odznaki etapu
       i statusu: źródło mówi SKĄD lead przyszedł (kontekst), a nie co się z nim
       dzieje (stan). Kolor wstrzykiwany inline jako --src-color z SOURCE_COLORS. */
    .src-tag {
      --src-color: var(--text-soft);
      display: inline-flex; align-items: center; gap: .3rem;
      font-size: .76rem; font-weight: 600; color: var(--src-color);
    }
    .src-tag .src-dot,
    .cc-src .src-dot { border-radius: 50%; background: var(--src-color); flex-shrink: 0; }
    .src-tag .src-dot { width: 7px; height: 7px; }
    .cc-src .src-dot { width: 6px; height: 6px; }
    /* Wariant do karty mobilnej — siedzi w rzędzie odznak, więc dostaje obwódkę. */
    .cc-src {
      --src-color: var(--text-soft);
      display: inline-flex; align-items: center; gap: .28rem;
      padding: .1rem .45rem; border-radius: var(--radius-pill);
      border: 1px solid color-mix(in srgb, var(--src-color) 45%, transparent);
      color: var(--src-color); font-size: .7rem; font-weight: 700;
    }

    /* Przejscie do drugiego systemu (Jarvis). Celowo INNY ksztalt niz zakladki CRM-u —
       to nie jest kolejna sekcja tej aplikacji, tylko wyjscie do sasiedniego panelu. */
    .system-switch {
      display: inline-flex; align-items: center; gap: .38rem;
      color: rgba(255,255,255,.86);
      font-size: .82rem; font-weight: 600; text-decoration: none;
      padding: .28rem .68rem;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.05);
      transition: background .15s, border-color .15s;
      white-space: nowrap;
    }
    .system-switch svg { width: 15px; height: 15px; }
    .system-switch:hover,
    .system-switch:focus-visible {
      color: #fff;
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.42);
    }

    /* ===== Large title (in-page header) ===== */
    .page-hero {
      padding: 14px 4px 6px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .page-hero h1 {
      font-size: 1.95rem; font-weight: 700; letter-spacing: -.02em;
      line-height: 1.15;
    }
    .page-hero .page-sub {
      color: var(--text-muted); font-size: 1rem; line-height: 1.45;
    }
    .page-hero .page-sub strong, .page-hero .page-sub a { font-size: 1.02rem; }
    .page-hero .page-sub .ps-pill {
      display: inline-flex; align-items: baseline; gap: 5px;
      padding: 1px 10px; border-radius: 999px;
      text-decoration: none; font-weight: 500;
      transition: filter .12s ease;
    }
    .page-hero .page-sub .ps-pill:hover { filter: brightness(.96); }
    .page-hero .page-sub .ps-pill-warning {
      background: var(--warning-bg); color: var(--warning);
      border: 1px solid #f7d77e;
    }
    .page-hero .page-sub .ps-pill-warning strong { color: var(--warning); font-weight: 600; }
    html[data-theme="dark"] .page-hero .page-sub .ps-pill-warning { border-color: #6b5418; }
    .page-hero .page-actions {
      display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 4px;
    }
    @media (min-width: 768px) {
      .page-hero { padding: 22px 4px 10px; }
      .page-hero h1 { font-size: 2.2rem; }
    }

    /* ===== Sticky search ===== */
    .sticky-search {
      position: sticky;
      top: calc(var(--nav-h) + var(--sat));
      z-index: 30;
      background: var(--bg);
      padding: 6px 0 10px;
      margin: 0 -4px;
      padding-left: 4px; padding-right: 4px;
    }
    .search-input {
      display: flex; align-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      padding: 0 .5rem 0 .9rem;
      box-shadow: var(--shadow-xs);
      transition: border-color .15s, box-shadow .15s;
    }
    .search-input:focus-within {
      border-color: var(--brand-purple);
      box-shadow: 0 0 0 4px rgba(43, 58, 92,.12);
    }
    .search-input .si-icon {
      color: var(--text-muted); margin-right: .5rem;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .search-input .si-icon svg { width: 20px; height: 20px; display: block; }
    .search-input .si-clear svg,
    .search-input .si-submit svg { width: 18px; height: 18px; display: block; }
    .search-input input {
      border: 0; outline: 0; background: transparent;
      flex: 1; padding: 12px 0;
      font-size: 17px !important;
      color: var(--text);
    }
    .search-input input::placeholder { color: var(--text-muted); opacity: 1; }
    .search-input .si-clear,
    .search-input .si-submit {
      background: transparent; border: 0;
      color: var(--text-muted); font-size: 1rem;
      padding: 6px 10px; border-radius: 999px; cursor: pointer;
    }
    .search-input .si-clear:active,
    .search-input .si-submit:active { background: var(--surface-3); }

    /* ===== Segment control / chip filters ===== */
    .seg-wrap {
      display: flex; align-items: center;
      gap: .4rem;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      margin: 0 -4px;
      padding: 2px 4px 10px;
      /* Fade na prawej krawedzi = wizualna podpowiedz "scrolluj" dla slabowidzacych */
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
              mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .seg-wrap::-webkit-scrollbar { display: none; }
    .chip {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; gap: .4rem;
      background: var(--surface);
      border: 1.5px solid var(--border-strong);
      color: var(--text);
      font-size: .92rem; font-weight: 600;
      padding: .5rem .95rem;
      border-radius: var(--radius-pill);
      text-decoration: none;
      transition: background .12s var(--ease), border-color .12s, transform .04s, color .12s, box-shadow .12s;
      white-space: nowrap;
    }
    .chip:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
    .chip:active { transform: scale(.97); }
    .chip .chip-count {
      background: var(--surface-3);
      font-size: .82rem; font-weight: 700;
      padding: 1px 8px; border-radius: 999px;
      color: var(--text-muted);
    }
    .chip.is-active {
      background: var(--brand-purple-deep);
      border-color: var(--brand-purple-deep);
      color: #fff; font-weight: 700;
      box-shadow: 0 0 0 3px rgba(43, 58, 92,.22);
    }
    .chip.is-active .chip-count { background: rgba(255,255,255,.18); color: #fff; }
    .chip.is-warning { color: var(--warning); border-color: #f7d77e; background: #fff8e6; }
    .chip.is-warning.is-active { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--brand-purple-deep); }
    .chip.is-danger { color: var(--danger); border-color: #fca5a5; background: var(--danger-bg); }
    .chip.is-danger.is-active { background: var(--danger); border-color: var(--danger); color: #fff; }
    .chip.is-danger.is-active .chip-count { background: rgba(255,255,255,.22); }

    /* ===== Filter bar with dropdown menus (filtry pochodne) ===== */
    .filter-bar {
      display: flex; align-items: center; gap: .35rem;
      flex-wrap: wrap;
      padding: 2px 4px 6px;
      margin: 0 -4px;
    }
    .filter-bar .fb-spacer { flex: 1 1 auto; }
    .fb-menu { position: static; }
    .fb-menu > summary {
      list-style: none;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: .4rem;
      background: var(--surface);
      border: 1.5px solid var(--border-strong);
      color: var(--text);
      font-size: .92rem; font-weight: 600;
      padding: .5rem .8rem .5rem .95rem;
      border-radius: var(--radius-pill);
      white-space: nowrap;
      user-select: none;
      transition: background .12s var(--ease), border-color .12s, color .12s;
    }
    .fb-menu > summary::-webkit-details-marker { display: none; }
    .fb-menu > summary:hover { background: var(--surface-2); }
    .fb-menu > summary .fb-caret {
      width: 12px; height: 12px; opacity: .55;
      transition: transform .15s var(--ease);
    }
    .fb-menu[open] > summary { background: var(--surface-2); border-color: var(--border-strong, var(--border)); }
    .fb-menu[open] > summary .fb-caret { transform: rotate(180deg); }
    .fb-menu > summary .fb-label { color: var(--text-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
    .fb-menu > summary .fb-value { font-weight: 600; }
    .fb-menu > summary.is-set { border-color: var(--brand-purple-deep); color: var(--brand-purple-deep); }
    .fb-menu > summary.is-set .fb-label { color: var(--brand-purple-deep); }
    html[data-theme="dark"] .fb-menu > summary.is-set { color: var(--brand-gold); border-color: var(--brand-gold); }
    html[data-theme="dark"] .fb-menu > summary.is-set .fb-label { color: var(--brand-gold); }

    .fb-pop {
      position: fixed; top: 0; left: 0; z-index: 9999;
      min-width: 220px; max-width: min(92vw, 320px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
      padding: .35rem;
      display: flex; flex-direction: column; gap: 2px;
      max-height: 70vh; overflow-y: auto;
    }
    .fb-pop a {
      display: flex; align-items: center; gap: .5rem;
      padding: .55rem .65rem;
      border-radius: var(--radius-sm);
      color: var(--text); text-decoration: none;
      font-size: .9rem;
    }
    .fb-pop a:hover { background: var(--surface-2); }
    .fb-pop a.is-active { background: var(--brand-purple-deep); color: #fff; }
    .fb-pop a.is-active .fb-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
    .fb-pop .fb-dot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
    .fb-pop .fb-count { margin-left: auto; font-size: .72rem; color: var(--text-muted); }
    .fb-pop a.is-active .fb-count { color: rgba(255,255,255,.85); }
    .fb-icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: var(--radius-pill);
      text-decoration: none;
      transition: background .12s var(--ease);
    }
    .fb-icon-btn:hover { background: var(--surface-2); color: var(--text); }
    .fb-icon-btn svg { width: 16px; height: 16px; }

    @media (max-width: 575.98px) {
      .fb-pop { min-width: 200px; }
    }

    /* ===== KPI bar ===== */
    .kpi-bar {
      display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
      padding: .65rem .9rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-xs);
    }
    .kpi-bar > div { display: flex; flex-direction: column; line-height: 1.15; }
    .kpi-num { font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
    .kpi-lbl { color: var(--text-muted); font-size: .72rem;
               text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
    @media (max-width: 575.98px) {
      .kpi-bar { gap: 1rem; padding: .55rem .75rem; border-radius: var(--radius-sm); }
      .kpi-num { font-size: 1.05rem; }
      .kpi-lbl { font-size: .66rem; }
      .kpi-bar .ms-auto { margin-left: 0 !important; width: 100%; margin-top: .25rem; }
      .kpi-bar .ms-auto .btn { width: 100%; border-radius: var(--radius-sm); }
    }

    /* ===== Cards (generic) ===== */
    .card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-xs);
      background: var(--surface);
    }
    .card .card-body { padding: 1rem 1.1rem; }
    .card .card-title { font-weight: 600; letter-spacing: -0.01em; }

    /* ===== Buttons ===== */
    .btn {
      border-radius: var(--radius-sm);
      font-weight: 500;
      letter-spacing: -.005em;
      transition: transform .04s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--primary); border-color: var(--primary); }
    .btn-primary:hover, .btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); }
    .btn-purple {
      background: var(--brand-purple); border-color: var(--brand-purple); color: #fff;
    }
    .btn-purple:hover { background: #6d28d9; border-color: #6d28d9; color: #fff; }
    .btn-outline-purple {
      background: transparent; border-color: var(--brand-purple); color: var(--brand-purple);
    }
    .btn-outline-purple:hover { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }
    .btn-check:checked + .btn-outline-purple {
      background: var(--brand-purple); border-color: var(--brand-purple); color: #fff;
    }
    .btn-dark { background:#111827; border-color:#111827; }
    .btn-dark:hover { background:#1f2937; border-color:#1f2937; }
    .btn-outline-secondary {
      color: var(--text); border-color: var(--border-strong); background: var(--surface);
    }
    .btn-outline-secondary:hover {
      background: var(--surface-2); border-color: var(--text-soft); color: var(--text);
    }
    .btn-link { text-decoration: none; }
    .btn-link:hover { text-decoration: underline; }
    .btn-soft {
      background: var(--surface-3);
      border-color: transparent;
      color: var(--text);
    }
    .btn-soft:hover { background: var(--surface-2); color: var(--text); }

    /* ===== Badges ===== */
    .badge {
      font-weight: 500;
      font-size: 0.74rem;
      padding: .35em .65em;
      border-radius: var(--radius-pill);
      letter-spacing: 0;
    }
    .badge.bg-info { background: var(--info) !important; color:#fff !important; }
    .badge.bg-success { background: var(--success) !important; }
    .badge.bg-warning { background: #f59e0b !important; }
    .badge.bg-danger { background: var(--danger) !important; }
    .badge.bg-secondary { background:#6b7280 !important; }
    .badge.bg-primary { background: var(--primary) !important; }
    .badge-to_contact    { background: var(--st-to_contact); color:#fff; }
    .badge-outbound_only { background: var(--st-outbound_only); color:#fff; }
    .badge-inbound_only  { background: var(--st-inbound_only); color:#fff; }
    .badge-two_way       { background: var(--st-two_way); color:#fff; }
    .badge-system        { background: var(--st-system); color:#fff; }
    .badge-spam          { background: var(--st-spam); color:#fff; }
    .badge-stage-new_lead    { background:#0e7490; color:#fff; }
    .badge-stage-in_progress { background:#ea580c; color:#fff; }
    .badge-stage-closed      { background:#15803d; color:#fff; }

    /* ===== Contact card v2 (inbox-like) ===== */
    .contact-card {
      display: block;
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-xs);
      padding: 12px 12px 12px 14px;
      margin-bottom: 8px;
      text-decoration: none; color: inherit;
      transition: box-shadow .15s var(--ease), transform .06s var(--ease), border-color .15s;
    }
    .contact-card:hover { box-shadow: var(--shadow); text-decoration: none; color: inherit; border-color: var(--border-strong); }
    .contact-card:active { transform: scale(.997); }
    .contact-card .cc-row { display: flex; align-items: flex-start; gap: 12px; }
    .cc-avatar {
      width: 48px; height: 48px; flex-shrink: 0;
      border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 1.15rem;
      letter-spacing: 0;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
    }
    /* Light mode: pastelowy kafelek + saturated litera — spójne
       wizualnie z dark mode, gdzie też jest "miękki" pastelowy feel */
    .cc-av-to_contact    { background: #fef3c7; color: #a16207; }
    .cc-av-outbound_only { background: #dbeafe; color: #2563eb; }
    .cc-av-inbound_only  { background: #dcfce7; color: #15803d; }
    .cc-av-two_way       { background: #e6eaf3; color: #6d28d9; }
    .cc-av-system        { background: #e5e7eb; color: #4b5563; }
    .cc-av-spam          { background: #fee2e2; color: #b91c1c; }
    /* Dark mode: pastelowe --st-* już są jasne, łatwy odczyt z białą literą */
    html[data-theme="dark"] .cc-av-to_contact    { background: var(--st-to_contact); color: #fff; }
    html[data-theme="dark"] .cc-av-outbound_only { background: var(--st-outbound_only); color: #fff; }
    html[data-theme="dark"] .cc-av-inbound_only  { background: var(--st-inbound_only); color: #fff; }
    html[data-theme="dark"] .cc-av-two_way       { background: var(--st-two_way); color: #fff; }
    html[data-theme="dark"] .cc-av-system        { background: var(--st-system); color: #fff; }
    html[data-theme="dark"] .cc-av-spam          { background: var(--st-spam); color: #fff; }

    .cc-body { flex: 1; min-width: 0; }
    .cc-line1 {
      display: flex; align-items: baseline; gap: 8px;
      justify-content: space-between;
    }
    .cc-name {
      font-size: 1.08rem; font-weight: 700; color: var(--text);
      line-height: 1.25;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      min-width: 0;
    }
    .cc-time {
      font-size: .82rem; color: var(--text-muted); font-weight: 500;
      flex-shrink: 0; white-space: nowrap;
    }
    .cc-activity {
      font-size: .95rem; color: var(--text-muted);
      margin-top: 3px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      display: flex; align-items: center; gap: 7px;
      font-weight: 500;
    }
    .cc-activity .ic {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; flex-shrink: 0;
    }
    .cc-activity .ic svg { width: 100%; height: 100%; display: block; }
    .cc-time .ic {
      display: inline-flex; align-items: center; justify-content: center;
      width: 13px; height: 13px; vertical-align: -2px;
    }
    .cc-time .ic svg { width: 100%; height: 100%; display: block; }
    .cc-meta .cc-meeting svg {
      width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px;
    }
    .cc-activity.is-inbound  { color: var(--st-inbound_only); font-weight: 600; }
    .cc-activity.is-outbound { color: var(--st-outbound_only); font-weight: 600; }
    .cc-activity.is-nocontact { color: var(--st-to_contact); font-weight: 600; }
    .cc-followup-pill {
      display: inline-flex; align-items: center; gap: 4px;
      background: #fef3c7; color: #92400e;
      padding: 1px 8px; border-radius: 999px;
      font-size: .72rem; font-weight: 700; line-height: 1.5;
      flex-shrink: 0; white-space: nowrap;
      text-transform: uppercase; letter-spacing: .02em;
    }
    .cc-followup-pill svg { display: block; }
    html[data-theme="dark"] .cc-followup-pill { background: #4a3a0e; color: #fbbf24; }
    .cc-meta {
      display: flex; flex-wrap: wrap; gap: 7px 10px;
      margin-top: 10px;
      font-size: .85rem; color: var(--text-muted);
      align-items: center;
    }
    .cc-meta .badge { font-size: .78rem; padding: .32em .65em; font-weight: 600; }
    .cc-meta .cc-amount { color: var(--success); font-weight: 700; font-size: .92rem; }
    .cc-meta .cc-meeting {
      background: #fef3c7; color: #92400e;
      padding: 2px 9px; border-radius: 999px; font-weight: 600; font-size: .82rem;
    }
    .cc-stage-dot {
      width: 7px; height: 7px; border-radius: 999px;
      display: inline-block; flex-shrink: 0;
    }
    .cc-stage-new_lead    { background:#0e7490; }
    .cc-stage-in_progress { background:#ea580c; }
    .cc-stage-closed      { background:#15803d; }

    /* ===== Tabele (desktop) ===== */
    table.fixed td, table.fixed th { vertical-align: middle; }
    .table { border-color: var(--border); }
    .table > :not(caption) > * > * { border-bottom-color: var(--border); }
    .table-light, .table > thead {
      --bs-table-bg: var(--surface-2);
      color: var(--text-muted);
      font-weight: 500;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--surface-3); }

    /* ===== Formy ===== */
    .form-control, .form-select {
      border-radius: var(--radius-sm);
      border-color: var(--border-strong);
      color: var(--text);
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--brand-purple);
      box-shadow: 0 0 0 .2rem rgba(43, 58, 92, 0.18);
    }
    .form-label { font-weight: 500; color: var(--text); }
    .form-label.small { color: var(--text-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
    fieldset.border { border-color: var(--border) !important; border-radius: var(--radius-sm); background: var(--surface-2); }
    fieldset.border legend { font-weight: 500; }

    /* ===== Alerty ===== */
    .alert { border-radius: var(--radius-sm); border: 1px solid transparent; }
    .alert-warning { background: var(--warning-bg); color: var(--warning); border-color: #fde68a; }
    .alert-success { background: var(--success-bg); color: var(--success); border-color: #86efac; }
    .alert-danger { background: var(--danger-bg); color: var(--danger); border-color: #fca5a5; }
    .alert-info { background: var(--info-bg); color: var(--info); border-color: #a5f3fc; }

    /* ===== Bottom navigation z FAB ===== */
    .bottom-nav { display: none; }
    @media (max-width: 767.98px) {
      .bottom-nav {
        display: grid;
        grid-template-columns: 1fr 1fr 88px 1fr 1fr;
        align-items: stretch;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: rgba(255,255,255,.94);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 14px rgba(15,23,42,.06);
        padding-bottom: var(--sab);
        z-index: 1030;
        height: calc(var(--bottom-nav-h) + var(--sab));
      }
      .bn-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 4px;
        background: transparent; border: 0;
        color: var(--text-muted); text-decoration: none;
        font-size: .78rem; font-weight: 600; line-height: 1.1;
        padding: 6px 2px 0;
        position: relative;
      }
      .bn-item .bn-ic {
        width: 26px; height: 26px;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--text-muted);
        transition: color .12s var(--ease);
      }
      .bn-item .bn-ic svg { width: 26px; height: 26px; display: block; }
      .bn-item.is-active { color: var(--brand-purple); }
      .bn-item.is-active .bn-ic { color: var(--brand-purple); }
      .bn-item.is-active::before {
        content: "";
        position: absolute; top: 0; left: 50%;
        width: 24px; height: 3px; transform: translateX(-50%);
        background: var(--brand-purple); border-radius: 0 0 4px 4px;
      }
      .bn-item .bn-badge {
        position: absolute; top: 4px; right: calc(50% - 18px);
        background: var(--danger); color: #fff;
        font-size: .62rem; font-weight: 700;
        padding: 1px 5px; border-radius: 999px;
        min-width: 16px; text-align: center;
        line-height: 1.2;
      }
      .bn-fab-wrap {
        display: flex; align-items: center; justify-content: center;
        position: relative;
      }
      .bn-fab {
        width: 56px; height: 56px;
        border-radius: 999px;
        border: 0;
        background: linear-gradient(180deg, var(--brand-purple) 0%, var(--brand-purple-mid) 100%);
        color: #fff;
        font-size: 1.7rem; font-weight: 300; line-height: 1;
        box-shadow: var(--shadow-fab);
        position: relative;
        top: -18px;
        display: inline-flex; align-items: center; justify-content: center;
        transition: transform .12s var(--ease), box-shadow .15s var(--ease);
      }
      .bn-fab svg { width: 26px; height: 26px; display: block; }
      .bn-fab:active { transform: scale(.94); }
      .bn-fab::before {
        content: "";
        position: absolute; inset: -3px;
        border-radius: 999px;
        background: rgba(246,201,118,.4);
        z-index: -1;
        filter: blur(8px);
        opacity: .6;
      }
    }

    /* ===== Bottom sheet ===== */
    .sheet-backdrop {
      position: fixed; inset: 0;
      background: rgba(15,23,42,.45);
      z-index: 1050;
      opacity: 0; pointer-events: none;
      transition: opacity .22s var(--ease);
    }
    .sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
    .sheet {
      position: fixed; left: 0; right: 0; bottom: 0;
      z-index: 1051;
      background: var(--surface);
      border-top-left-radius: var(--radius-lg);
      border-top-right-radius: var(--radius-lg);
      padding: 8px 0 calc(var(--sab) + 14px);
      transform: translateY(100%);
      transition: transform .28s var(--ease);
      box-shadow: 0 -10px 30px rgba(15,23,42,.22);
      max-height: 84vh; overflow-y: auto;
    }
    .sheet.is-open { transform: translateY(0); }
    .sheet-handle {
      width: 38px; height: 4px; border-radius: 999px;
      background: var(--border-strong);
      margin: 6px auto 12px;
    }
    .sheet-title {
      font-size: .78rem; font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase; letter-spacing: .06em;
      padding: 4px 20px 8px;
    }
    .sheet-actions { padding: 0 12px; }
    .sheet-actions .sa-item,
    .sheet-actions form button.sa-item {
      display: flex; align-items: center; gap: 14px;
      width: 100%;
      background: transparent; border: 0;
      color: var(--text); text-decoration: none;
      padding: 14px 12px;
      border-radius: var(--radius-sm);
      font-size: .98rem; font-weight: 500;
      text-align: left;
      cursor: pointer;
      transition: background .12s var(--ease);
    }
    .sheet-actions .sa-item:hover { background: var(--surface-3); text-decoration: none; color: var(--text); }
    .sheet-actions .sa-item .sa-ic {
      width: 38px; height: 38px;
      border-radius: 10px;
      background: var(--brand-purple-soft);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--brand-purple);
      font-size: 1.15rem;
      flex-shrink: 0;
    }
    .sheet-actions .sa-item .sa-ic svg { width: 20px; height: 20px; display: block; }
    .sheet-actions .sa-item.is-danger .sa-ic { background: #fee2e2; color: var(--danger); }
    .sheet-actions .sa-item.is-danger { color: var(--danger); }
    .sheet-actions .sa-item.is-warning .sa-ic { background: #fef3c7; color: var(--warning); }
    .sheet-actions .sa-item .sa-text { display:flex; flex-direction:column; line-height:1.2; }
    .sheet-actions .sa-item .sa-sub { color: var(--text-muted); font-size: .78rem; font-weight: 400; margin-top: 2px; }
    .sheet-divider {
      height: 1px; background: var(--border);
      margin: 6px 20px;
    }

    /* ===== Toasts ===== */
    .toasts {
      position: fixed; left: 12px; right: 12px;
      bottom: calc(var(--bottom-nav-h) + var(--sab) + 12px);
      z-index: 1080;
      display: flex; flex-direction: column-reverse; gap: 8px;
      pointer-events: none;
    }
    @media (min-width: 768px) {
      .toasts { left: auto; right: 20px; bottom: 20px; max-width: 360px; }
    }
    .toast-item {
      background: var(--brand-purple-deep);
      color: #fff;
      padding: 12px 16px;
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      font-size: .9rem;
      pointer-events: auto;
      transform: translateY(8px); opacity: 0;
      transition: opacity .2s var(--ease), transform .22s var(--ease);
      display: flex; align-items: center; gap: 10px;
    }
    .toast-item.is-in { transform: translateY(0); opacity: 1; }
    .toast-item.is-success { background: #166534; }
    .toast-item.is-error   { background: #991b1b; }
    .toast-item .toast-action {
      margin-left: auto;
      background: rgba(255,255,255,.18);
      color: #fff; border: 0;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: .82rem; font-weight: 600;
      cursor: pointer;
    }
    .toast-item .toast-action:hover { background: rgba(255,255,255,.28); }

    /* ===== Pull to refresh ===== */
    .ptr {
      position: fixed; top: calc(var(--nav-h) + var(--sat));
      left: 50%; transform: translateX(-50%) translateY(-100%);
      z-index: 35;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 8px 14px;
      box-shadow: var(--shadow);
      font-size: .8rem; color: var(--text-muted);
      transition: transform .15s var(--ease), opacity .15s;
      opacity: 0; pointer-events: none;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .ptr.is-shown { opacity: 1; transform: translateX(-50%) translateY(12px); }
    .ptr.is-refreshing .ptr-arrow { animation: spin .9s linear infinite; }
    .ptr-arrow { display: inline-block; font-size: 1rem; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ===== Page transitions (fallback dla Safari) ===== */
    main.app-main { animation: pageIn .2s var(--ease); }
    @keyframes pageIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      main.app-main { animation: none; }
      .sheet, .toast-item, .ptr { transition: none; }
    }

    /* ===== Filtry kompaktowe (legacy support) ===== */
    .filter-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

    /* ===== Page header (legacy, lekkie) ===== */
    .page-header { display: flex; justify-content: space-between; align-items: center;
                   gap: .75rem; flex-wrap: wrap; margin: .75rem 0 1rem; }
    .page-header h3 { margin: 0; }
    .page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

    /* Touch targets na mobile */
    @media (max-width: 575.98px) {
      .btn { padding: .55rem .9rem; }
      .btn-sm { padding: .42rem .75rem; }
      h3 { font-size: 1.2rem; }
      h4 { font-size: 1.05rem; }
      h5 { font-size: 1rem; }
      .card .card-body { padding: .9rem .95rem; }
    }

    /* Empty state */
    .empty-state {
      text-align: center; padding: 2.2rem 1rem;
      color: var(--text-muted); font-size: .95rem;
    }
    .empty-state .es-emoji { font-size: 2.4rem; margin-bottom: 10px; display: block; }
    .empty-state .es-title {
      display: block; color: var(--text);
      font-size: 1.08rem; font-weight: 700; margin-bottom: 4px;
    }
    .empty-state .es-sub {
      display: block; max-width: 30rem; margin: 0 auto;
      color: var(--text-muted); font-size: .92rem; line-height: 1.5;
    }

    /* ===== Notatki — czytelne "dymki" (karta klienta + podgląd w sheecie) ===== */
    .notes-list { display: flex; flex-direction: column; gap: 8px; }
    .note-item {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
    }
    .note-head {
      display: flex; justify-content: space-between; align-items: center;
      gap: 8px; margin-bottom: 6px;
    }
    .note-author {
      display: inline-flex; align-items: center; gap: 7px;
      font-weight: 600; font-size: .85rem; color: var(--text);
      min-width: 0;
    }
    .note-author .note-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .note-avatar {
      width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
      background: var(--brand-purple-soft); color: var(--brand-purple);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .72rem; font-weight: 700;
    }
    .note-meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .note-date { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
    .note-del {
      background: transparent; border: 0; color: var(--text-soft);
      font-size: 1.15rem; line-height: 1; cursor: pointer;
      padding: 0 5px; border-radius: 6px;
    }
    .note-del:hover { color: var(--danger); background: var(--danger-bg); }
    .note-body {
      white-space: pre-wrap; word-break: break-word;
      font-size: .95rem; line-height: 1.5; color: var(--text);
    }
    /* Podgląd notatek w bottom-sheecie */
    .notes-sheet-scroll { padding: 2px 16px 4px; }
    .notes-sheet-foot { padding: 12px 16px 0; }

    /* List-group */
    .list-group-item { border-color: var(--border); }

    /* Akcji rzędem (np. quick actions w karcie klienta) */
    .quick-actions {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 4px 4px;
      flex-wrap: wrap;
    }
    .qa-btn {
      display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
      background: transparent; border: 0;
      color: var(--text); text-decoration: none;
      cursor: pointer;
      font-size: .76rem; font-weight: 500;
    }
    .qa-btn .qa-ic {
      width: 50px; height: 50px;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--border);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.25rem;
      color: var(--brand-purple);
      box-shadow: var(--shadow-xs);
      transition: transform .08s, background .12s, border-color .12s;
    }
    .qa-btn .qa-ic svg { width: 22px; height: 22px; display: block; }
    .qa-btn:hover .qa-ic { background: var(--brand-purple-soft); border-color: var(--brand-purple-soft); text-decoration: none; }
    .qa-btn:active .qa-ic { transform: scale(.94); }
    .qa-btn.qa-primary .qa-ic { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }

    /* Tab segmenty wewnątrz strony */
    .in-tabs {
      display: inline-flex;
      background: var(--surface-3);
      padding: 4px;
      border-radius: var(--radius-pill);
      gap: 2px;
      font-size: .85rem;
    }
    .in-tabs button, .in-tabs a {
      background: transparent; border: 0;
      color: var(--text-muted);
      padding: 6px 14px;
      border-radius: var(--radius-pill);
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
    }
    .in-tabs button.is-active, .in-tabs a.is-active {
      background: var(--surface); color: var(--text);
      box-shadow: var(--shadow-xs);
    }

    /* ===== Skeleton shimmer ===== */
    @keyframes shimmer {
      0%   { background-position: -240px 0; }
      100% { background-position: 240px 0; }
    }
    .skeleton, .sk-line, .sk-circle, .sk-block {
      background: linear-gradient(90deg,
        var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
      background-size: 480px 100%;
      animation: shimmer 1.2s linear infinite;
      border-radius: 6px;
      color: transparent !important;
      user-select: none; pointer-events: none;
    }
    .sk-line { height: 10px; margin: 6px 0; border-radius: 999px; }
    .sk-line.w-60 { width: 60%; }
    .sk-line.w-40 { width: 40%; }
    .sk-line.w-75 { width: 75%; }
    .sk-circle { border-radius: 999px; }
    .sk-block { min-height: 14px; }
    .sk-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-xs);
      padding: 12px 12px 12px 14px;
      margin-bottom: 8px;
      display: flex; gap: 12px; align-items: flex-start;
    }
    .sk-card .sk-circle { width: 44px; height: 44px; flex-shrink: 0; }
    .sk-card .sk-lines { flex: 1; min-width: 0; }

    /* content-visibility na liscie kontaktow (długie listy szybciej paintują) */
    .contact-card { content-visibility: auto; contain-intrinsic-size: auto 110px; }

    /* Stan "is-navigating" - krótki dim podczas nawigacji (Safari/FF fallback dla view-transitions) */
    body.is-navigating main.app-main { opacity: .35; transition: opacity .15s var(--ease); }
    body.is-navigating .ptr.is-loading-soft {
      opacity: 1; pointer-events: none;
      transform: translateX(-50%) translateY(12px);
    }