/* ================================================================
   CADLIFY DESIGN SYSTEM v1.0
   CSS Custom Properties — single source of truth for all UI tokens
   Source palette: Cadlify B-Light (warm beige / terracotta)
   ================================================================ */

:root {
  /* ── PALETTE ────────────────────────────────────────────────── */
  --c-bg: #f0eee9; /* page background */
  --c-panel: #fbfaf6; /* card / panel */
  --c-panel2: #ecebe4; /* secondary panel, segmented controls */
  --c-panel-hi: #e6e4dc; /* hover state for panels */
  --c-side-bg: #e8e6df; /* sidebar background */

  --c-fg: #1d1c19; /* primary text */
  --c-fg2: #605c54; /* secondary text */
  --c-muted: #8a857a; /* muted / disabled */
  --c-faint: #c8c4ba; /* subtle borders, dividers */

  --c-border: rgba(0, 0, 0, 0.07);
  --c-border-strong: rgba(0, 0, 0, 0.16);

  /* Accent — terracotta family */
  --c-accent: #c96442;
  --c-accent2: #e88a52;
  --c-warn: #a85f1c;
  --c-warn-soft: rgba(168, 95, 28, 0.1);
  --c-warn-border: rgba(168, 95, 28, 0.28);

  /* Status */
  --c-danger: #b34646;
  --c-danger-soft: rgba(179, 70, 70, 0.1);
  --c-danger-border: rgba(179, 70, 70, 0.3);
  --c-success: #3e7d4f;
  --c-success-soft: rgba(62, 125, 79, 0.1);

  /* Ink (dark sections) */
  --c-ink-bg: #1a1916;
  --c-ink-panel: #26241f;
  --c-ink-border: rgba(255, 255, 255, 0.1);
  --c-ink-fg2: rgba(255, 255, 255, 0.65);
  --c-ink-muted: rgba(255, 255, 255, 0.42);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */
  --font-sans:
    "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: clamp(28px, 3vw, 42px);
  --fs-4xl: clamp(36px, 5vw, 60px);

  /* ── SPACING (4px grid) ─────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── RADIUS ─────────────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-2xl: 12px;
  --r-full: 9999px;

  /* ── SHADOWS ────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:
    0 32px 64px -24px rgba(0, 0, 0, 0.18), 0 8px 24px -12px rgba(0, 0, 0, 0.1);

  /* ── SURFACES & OVERLAYS ────────────────────────────────────────
     Wartości wyciągnięte 1:1 z miejsc, w których wcześniej były wpisane
     na sztywno. W jasnym motywie NIC się przez to nie zmienia — token
     istnieje po to, żeby ciemny motyw miał co nadpisać. */
  --c-navbar-bg: rgba(240, 238, 233, 0.92);
  --c-surface-pure: #fff; /* powierzchnie czysto białe (dropdown, aktywny item) */
  --c-hover-faint: rgba(0, 0, 0, 0.04);
  --c-hover-weak: rgba(0, 0, 0, 0.035);
  --c-hover: rgba(0, 0, 0, 0.055);
  --c-hover-strong: rgba(0, 0, 0, 0.09);
  --c-scroll-thumb: rgba(0, 0, 0, 0.18);
  /* Kalendarz tygodnia. Karta jest niemal biała, więc godziny pracowni
     wyróżniamy PRZYGASZAJĄC resztę doby — rozjaśnianie na #fbfaf6 nie dałoby
     żadnego kontrastu. Weekend ma własny hover: tło kolumny zjada zwykły
     hover „dodaj wpis", więc sobota potrzebuje mocniejszego. */
  --c-weekend: rgba(29, 28, 25, 0.05);
  --c-weekend-hover: rgba(29, 28, 25, 0.11);
  --c-offhours: rgba(29, 28, 25, 0.05);
  --c-btn-dark-bg: #2e2c28; /* hover btn-primary / lp-btn-primary */
  --c-tooltip-bg: rgba(29, 28, 25, 0.95);
  --c-tooltip-fg: #f4f2ed;
  --c-on-accent: #fff; /* tekst na wypełnieniu akcentem/statusem */
  --c-logo-bg: var(--c-ink-bg);
  --c-logo-fg: #fff;
  --c-dropdown-hover-bg: #e2ded8;
  --c-dropdown-hover-fg: #1e1c18;
  /* Komponenty Bootstrapa wymuszane na biało w base.html */
  --c-surface-elevated: #fff; /* .table, .card, .list-group-item, .form-control */
  --c-surface-subtle: #f8f9fa; /* .card-header, .bg-light */
  /* Półprzezroczysta biel używana jako TŁO na panelach (ghost buttony, pola
     na hero). Nazwy niosą alfę z jasnego motywu, bo to ona je różnicuje —
     podmiana musi zachowywać wartość, więc 0.52 i 0.56 nie mogą się zlać. */
  /* Resztki z karty oferty — szarości i ciepłe jasne powierzchnie */
  --c-fg-n600: #333333;
  --c-fg-n620: #3f3b35;
  --c-fg-n550: #555555;
  --c-fg-n650: #495057;
  --c-line-warm: #d6d0c7;
  --c-line-warm2: #d6d0c4;
  --c-line-n200: #e0e0e0;
  --c-surface-warm: #ece9e0;
  --c-surface-warm2: #e2ded3;
  --c-accent-wash: #e5baab;
  --c-info-strong: #0a58ca;
  --c-panel-warm-98: rgba(247, 245, 239, 0.98);
  --c-panel2-26: rgba(236, 235, 228, 0.26);
  --c-panel2-94: rgba(236, 235, 228, 0.94);
  --c-glass-62: rgba(255, 255, 255, 0.62);
  /* Delikatny błękit odróżniający kartę szablonu SYSTEMOWEGO */
  --c-system-tint: rgba(224, 237, 255, 0.55);
  --c-system-fg: #1a56a0;
  --c-panel-84: rgba(251, 250, 246, 0.84);
  --c-panel2-52: rgba(236, 235, 228, 0.52);
  --c-glass-34: rgba(255, 255, 255, 0.34);
  --c-glass-38: rgba(255, 255, 255, 0.38);
  --c-glass-44: rgba(255, 255, 255, 0.44);
  --c-info-deep: #276987;
  --c-violet-deep: #6f4c94;
  --c-glass-52: rgba(255, 255, 255, 0.52);
  --c-glass-56: rgba(255, 255, 255, 0.56);
  --c-glass-72: rgba(255, 255, 255, 0.72);
  --c-glass-76: rgba(255, 255, 255, 0.76);

  /* Ekrany zarządzania ofertami (offers/_management_styles.html) — biel jako
     TŁO pól, chipów, kafli i drugorzędnych przycisków. Alfy siedzą w nazwach,
     bo to one te powierzchnie różnicują. */
  --c-glass-48: rgba(255, 255, 255, 0.48);
  --c-glass-54: rgba(255, 255, 255, 0.54);
  --c-glass-70: rgba(255, 255, 255, 0.7);
  --c-glass-78: rgba(255, 255, 255, 0.78);

  /* Hover wypełnionych przycisków. W jasnym motywie ciemnieją; w ciemnym muszą
     JAŚNIEĆ, bo samo wypełnienie jest już podniesioną terakotą / łososiem. */
  --c-accent-hover: #b75b3c;
  --c-danger-hover: #9a3b3b;
  /* Poświata w rogu hero na ekranach zarządzania — 0.14, nie 0.16 jak
     --c-accent-glow; scalenie ich byłoby cichą zmianą jasnego motywu. */
  --c-accent-glow-14: rgba(201, 100, 66, 0.14);

  /* Boksy statusów (.om-warning / .om-danger-soft / .om-success-soft) —
     ciemny tekst na miękkim wypełnieniu. Na ciemnym tle tekst musi się odwrócić,
     inaczej brąz na grafitcie jest nieczytelny. */
  --c-warn-deep: #7b4a18;
  --c-warn-wash-08: rgba(168, 95, 28, 0.08);
  --c-warn-line-18: rgba(168, 95, 28, 0.18);
  --c-success-deep: #2f6a41;
  --c-success-wash-08: rgba(62, 125, 79, 0.08);
  --c-success-line-18: rgba(62, 125, 79, 0.18);
  --c-error-fg: #a43f3f;
  --c-danger-wash-08: rgba(179, 70, 70, 0.08);
  --c-danger-line-18: rgba(179, 70, 70, 0.18);

  /* Pigułki kategorii i dopiski jednostek na formularzach pozycji oferty.
     Ciepłe kremy spoza palety — w ciemnym schodzą na --c-panel2, bo to
     przyciski i pola, a nie powierzchnie treści. */
  --c-chipbtn-bg: #f7f3eb;
  --c-chipbtn-fg: #5f564d;
  --c-chipbtn-border: rgba(59, 45, 32, 0.14);
  --c-addon-bg: #f2ede3;
  --c-addon-fg: #5d5247;
  --c-addon-border: rgba(59, 45, 32, 0.12);
  /* Drugi koniec gradientu na wybranej kategorii */
  --c-accent-deep: #b85635;

  /* Pasek stopera: powierzchnia odwrócona względem strony. Brał --c-fg jako
     TŁO, więc w ciemnym motywie robił się biały pod białym tekstem. Zostaje
     ciemny w obu motywach — to nakładka narzędziowa, nie treść. */
  --c-bar-inverse-bg: #1d1c19;

  /* Podświetlenie wiersza z biegnącym stoperem. Token był używany w
     projects/project_detail.css, ale nigdy nigdzie zadeklarowany — działał
     wyłącznie z fallbacku, więc w ciemnym motywie zostawał przy jasnej
     terakocie. Wartość jest ta sama co fallback, żeby jasny motyw nie drgnął. */
  --c-accent-soft: rgba(201, 100, 66, 0.08);

  /* Żarówka podpowiedzi (nieprzeczytana) — żółć spoza palety */
  --c-tip-fg: #ca8a04;
  --c-tip-border: #fbbf24;
  --c-tip-bg: rgba(254, 240, 138, 0.25);

  /* Półprzezroczyste warianty paneli — ten sam kolor bazowy co --c-panel /
     --c-panel2, tylko z alfą. Alfa musi zostać w nazwie, bo 0.92 i 0.96 to
     dwie różne wartości, a podmiana ma zachowywać wartość. */
  /* Poświata akcentu w rogu hero — radial-gradient na każdym nagłówku strony */
  --c-accent-glow: rgba(201, 100, 66, 0.16);

  /* Główne CTA w topbarze („Dodaj zapytanie"). Wcześniej brało --c-fg jako TŁO
     i --c-bg jako tekst — odwrócenie, które w ciemnym motywie dawało jasny
     przycisk z jasnym napisem. Własne tokeny mówią wprost, co jest czym. */
  --c-cta-bg: #1d1c19;
  --c-cta-fg: #f0eee9;
  --c-cta-glow: rgba(201, 100, 66, 0.14);
  --c-cta-glow-hover: rgba(201, 100, 66, 0.26);

  /* Pigułka użytkownika i avatar w topbarze */
  --c-userpill-bg: rgba(255, 255, 255, 0.85);
  --c-userpill-bg-hover: rgba(255, 255, 255, 1);
  --c-avatar-bg: #212529;
  --c-avatar-fg: #fff;

  /* Obrączka punktu na wykresie liniowym. Jej zadaniem jest odciąć punkt od
     tła karty, więc musi być tego samego koloru co karta — biel na ciemnym
     tle daje ostry pierścień zamiast separacji. */
  --c-chart-point-ring: #fff;
  /* Separator wycinków wykresu kołowego — Chart.js daje tu domyślnie biel */
  --c-chart-arc-border: #fff;
  /* Etykieta wartości rysowana NA wypełnieniu słupka */
  --c-chart-label-on-fill: #222;
  /* Suma w dziurze pierścienia (własna wtyczka rysująca po canvasie) */
  --c-chart-center-text: #555;

  /* Karta „Cel finansowy" — zielony gradient szałwiowy */
  --c-goal-grad-1: #eef2ee;
  --c-goal-grad-2: #b8c9bc;
  --c-goal-grad-3: #7a9982;
  --c-goal-border: #b8c9bc;
  --c-on-goal: rgba(0, 0, 0, 0.4);
  /* Osobny token, bo etykieta nad kwotą miała 0.45, nie 0.4 — scalenie ich
     byłoby cichą zmianą jasnego motywu. */
  --c-on-goal-soft: rgba(0, 0, 0, 0.45);
  --c-on-goal-line: rgba(0, 0, 0, 0.1);
  --c-on-goal-btn-bg: rgba(255, 255, 255, 0.35);
  --c-on-goal-btn-border: rgba(0, 0, 0, 0.2);

  /* Karta „Cel na pełny miesiąc" — wypełnienie w kolorze ostrzeżenia */
  --c-warn-wash: rgba(168, 95, 28, 0.04);

  /* Akcenty kart KPI: kropka, kreska po lewej, etykieta i delikatne
     wypełnienie. Nasycone ciemne barwy na jasnym tle — na ciemnym gasną. */
  --c-kpi-green: #1a7d50;
  --c-kpi-green-wash: rgba(26, 125, 80, 0.04);
  --c-kpi-green-wash2: rgba(26, 125, 80, 0.05);
  --c-kpi-blue: #3b5bdb;
  --c-kpi-blue-wash: rgba(59, 91, 219, 0.06);
  --c-kpi-grey: #6c757d;
  --c-kpi-grey-70: rgba(108, 117, 125, 0.7);
  --c-kpi-grey-75: rgba(108, 117, 125, 0.75);

  --c-panel-90: rgba(251, 250, 246, 0.9);
  --c-panel-96: rgba(251, 250, 246, 0.96);
  --c-panel-98: rgba(251, 250, 246, 0.98);
  --c-panel2-38: rgba(236, 235, 228, 0.38);
  --c-panel2-70: rgba(236, 235, 228, 0.7);
  --c-panel2-82: rgba(236, 235, 228, 0.82);
  --c-panel2-85: rgba(236, 235, 228, 0.85);
  --c-panel2-92: rgba(236, 235, 228, 0.92);
  --c-panel2-96: rgba(236, 235, 228, 0.96);

  /* Kolory spoza palety, wpisane kiedyś ręcznie (szarości Bootstrapa
     i Tailwinda). Token jest tu mostkiem: pozwala ciemnemu motywowi zadziałać
     bez ruszania jasnego. Docelowo warto je scalić z paletą — ale to zmienia
     jasny wygląd, więc wymaga osobnej decyzji. */
  --c-fg-bs: #212529; /* Bootstrap body color */
  --c-fg-n900: #111827;
  --c-fg-n800: #1e1e2e;
  --c-fg-n700: #374151;
  --c-surface-n50: #f9fafb;
  --c-surface-n100: #f1f3f5;
  --c-surface-n150: #f0f2f5;
  --c-surface-n200: #f0f0f0;
  --c-surface-n250: #e9ecef;
  --c-fg-n750: #343a40;
  --c-border-n300: #dee2e6;
  --c-fg-n500: #666666;
  --c-surface-n25: #fafbfc; /* pas sub-pozycji w edytorze struktury */
  --c-line-n250: #cccccc;
  --c-line-000: #000; /* ramka rysowana czernią, nie cieniem */
  /* Bootstrapowy alert-warning wpisany kiedyś w JS walidacji */
  --c-warn-tint-bs: #fff3cd;
  --c-warn-fg-bs: #856404;

  /* Ramki na czarnej alfie. Tylko RAMKI — cienie zostają na rgba(0,0,0,…),
     bo one w ciemnym motywie świadomie zmieniają rolę i nie muszą być widoczne;
     niewidzialna ramka natomiast gubi krawędź komponentu. */
  --c-line-035: rgba(0, 0, 0, 0.035);
  --c-line-04: rgba(0, 0, 0, 0.04);
  --c-line-045: rgba(0, 0, 0, 0.045);
  --c-line-05: rgba(0, 0, 0, 0.05);
  --c-line-06: rgba(0, 0, 0, 0.06);
  --c-line-08: rgba(0, 0, 0, 0.08);
  --c-line-10: rgba(0, 0, 0, 0.1);
  --c-line-12: rgba(0, 0, 0, 0.12);
  --c-line-14: rgba(0, 0, 0, 0.14);

  /* Miękkie tła statusów */
  --c-danger-tint: #fff0f0;
  --c-danger-deep: #8c2f2f;
  --c-accent-tint: #fbeee8;
  --c-info-tint: #e8edff;
  --c-input-border: #ced4da;
  --c-thead-dark-bg: var(--c-ink-bg);

  /* ── Bootstrap overrides ────────────────────────────────────── */
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-fg);
  --bs-body-font-family: var(--font-sans);
  --bs-link-color: var(--c-accent);
  --bs-link-hover-color: var(--c-accent2);
  --bs-border-color: var(--c-faint);

  /* Focus ring — nadpisanie błękitnego BS5 na terracottę */
  --bs-focus-ring-color: rgba(201, 100, 66, 0.25);
  --bs-focus-ring-width: 0.2rem;
  --bs-primary-rgb: 201, 100, 66;
  --bs-form-control-focus-border-color: var(--c-accent);
}

/* ================================================================
   DARK THEME
   Źródłem palety są ciemne sekcje landingu (--c-ink-*) — ta sama,
   zatwierdzona estetyka, nie druga równoległa. Sześć wartości to
   dosłowne referencje do tokenów ink; dobudowane są tylko trzy
   poziomy, których landing nie potrzebuje (nagłówek karty, hover,
   sidebar), bo tam ciemne sekcje mają płaskie dwa poziomy.

   Akcent: landing od dawna podmienia terracottę na jaśniejszy wariant
   na ciemnym tle (.fn-feature-label.dark → --c-accent2 w funkcje.html).
   Ciemny motyw robi dokładnie to samo — #e88a52 wpisane wprost, bo
   --c-accent2 jest tu równocześnie przedefiniowany (referencja byłaby
   cykliczna).

   `:not(:has(body.lp-page))` zostawia landing, cennik i strony auth w
   jasnym motywie — są projektowane jako jasna wizytówka marki i mają
   własne ciemne sekcje. Gdy przeglądarka nie zna :has(), cały selektor
   jest nieważny i motyw po prostu się nie włącza — awaria w stronę
   jasną, czyli bezpieczną.
   ================================================================ */
:root[data-theme='dark']:not(:has(body.lp-page)) {
  color-scheme: dark;

  /* Powierzchnie */
  --c-bg: var(--c-ink-bg);
  --c-panel: var(--c-ink-panel);
  --c-panel2: #302d27; /* dobudowane — nagłówek karty, thead */
  --c-panel-hi: #3a3730; /* dobudowane — hover panelu */
  --c-side-bg: #201e1a; /* dobudowane — sidebar */

  /* Tekst */
  --c-fg: #fff; /* landing: color:#fff na sekcjach ink */
  --c-fg2: var(--c-ink-fg2);
  --c-muted: var(--c-ink-muted);
  --c-faint: var(--c-ink-border);

  --c-border: rgba(255, 255, 255, 0.07);
  --c-border-strong: rgba(255, 255, 255, 0.18);

  /* Akcent — terracotta podniesiona, jak na sekcjach ink */
  --c-accent: #e88a52;
  --c-accent2: #f2a677;
  --c-warn: #d69042;
  --c-warn-soft: rgba(214, 144, 66, 0.16);
  --c-warn-border: rgba(214, 144, 66, 0.34);

  /* Status — rozjaśnione, inaczej gasną na ciemnym tle */
  --c-danger: #e07b7b;
  --c-danger-soft: rgba(224, 123, 123, 0.16);
  --c-danger-border: rgba(224, 123, 123, 0.34);
  --c-success: #6fb583;
  --c-success-soft: rgba(111, 181, 131, 0.16);

  /* Powierzchnie i nakładki */
  --c-navbar-bg: rgba(26, 25, 22, 0.92);
  --c-surface-pure: #302d27;
  --c-hover-faint: rgba(255, 255, 255, 0.05);
  --c-hover-weak: rgba(255, 255, 255, 0.05);
  --c-hover: rgba(255, 255, 255, 0.07);
  --c-hover-strong: rgba(255, 255, 255, 0.11);
  --c-scroll-thumb: rgba(255, 255, 255, 0.22);
  /* Kalendarz tygodnia — semantyka ta sama co w jasnym (poza godzinami
     pracy ciemniej), tylko przygaszenie musi być mocniejsze: na #26241f
     nakładka 0.05 byłaby niewidoczna. */
  --c-weekend: rgba(0, 0, 0, 0.22);
  --c-weekend-hover: rgba(255, 255, 255, 0.11);
  --c-offhours: rgba(0, 0, 0, 0.22);
  /* Hover .btn-primary. Skoro sam przycisk jest w ciemnym terakotą, hover musi
     zostać w tej samej rodzinie — jasna pigułka wyglądałaby jak inny przycisk. */
  --c-btn-dark-bg: var(--c-accent2);
  --c-tooltip-bg: rgba(244, 242, 237, 0.96);
  --c-tooltip-fg: #1a1916;
  --c-on-accent: #1a1916; /* ciemny tekst na jasnej terakocie — biel ma tu 2.3:1 */
  --c-logo-bg: var(--c-accent);
  --c-logo-fg: var(--c-on-accent);
  --c-dropdown-hover-bg: #3a3730;
  --c-dropdown-hover-fg: #fff;
  --c-surface-elevated: var(--c-ink-panel);
  --c-surface-subtle: #302d27;
  /* Na ciemnym te same nakładki muszą zejść z ~0.5 do kilku procent —
     przy jasnym motywie rozjaśniały tło do bieli, tutaj rozjaśniają panel. */
  --c-fg-n600: #f2efe9;
  --c-fg-n620: #f2efe9;
  --c-fg-n550: rgba(255, 255, 255, 0.72);
  --c-fg-n650: rgba(255, 255, 255, 0.66);
  --c-line-warm: rgba(255, 255, 255, 0.16);
  --c-line-warm2: rgba(255, 255, 255, 0.16);
  --c-line-n200: rgba(255, 255, 255, 0.14);
  --c-surface-warm: #302d27;
  --c-surface-warm2: #3a3730;
  --c-accent-wash: rgba(232, 138, 82, 0.28);
  --c-info-strong: #85aaff;
  --c-panel-warm-98: rgba(38, 36, 31, 0.98);
  --c-panel2-26: rgba(48, 45, 39, 0.26);
  --c-panel2-94: rgba(48, 45, 39, 0.94);
  --c-glass-62: rgba(255, 255, 255, 0.06);
  /* Ten sam błękit przy 55% na ciemnym panelu robi srebrne zamglenie —
     na ciemnym potrzebny jest nasycony akcent o niskim kryciu. */
  --c-system-tint: rgba(122, 162, 224, 0.18);
  --c-system-fg: #9dbdf0;
  --c-panel-84: rgba(38, 36, 31, 0.84);
  --c-panel2-52: rgba(48, 45, 39, 0.52);
  --c-glass-34: rgba(255, 255, 255, 0.04);
  --c-glass-38: rgba(255, 255, 255, 0.05);
  --c-glass-44: rgba(255, 255, 255, 0.05);
  --c-info-deep: #7fc4e0;
  --c-violet-deep: #b79ad6;
  --c-glass-52: rgba(255, 255, 255, 0.04);
  --c-glass-56: rgba(255, 255, 255, 0.05);
  --c-glass-72: rgba(255, 255, 255, 0.07);
  --c-glass-76: rgba(255, 255, 255, 0.08);
  --c-glass-48: rgba(255, 255, 255, 0.05);
  --c-glass-54: rgba(255, 255, 255, 0.05);
  --c-glass-70: rgba(255, 255, 255, 0.07);
  --c-glass-78: rgba(255, 255, 255, 0.08);

  /* Barwa nakładki podnoszącej powierzchnie nad panel (pola, chipy, kafle,
     drugorzędne przyciski). Wystawiona w edytorze motywu: biel podnosi je
     neutralnie, ciepła kość słoniowa ociepla całą aplikację naraz. Rodzina
     --c-glass-* wywodzi się z niej w bloku @supports niżej. */
  --c-elevate: #ffffff;

  /* Hover idzie w jaśniejszą terakotę / łososia — przyciemnienie wypełnienia
     na ciemnym tle czyta się jak wygaszenie przycisku, nie jak reakcja. */
  --c-accent-hover: var(--c-accent2);
  --c-danger-hover: #e69595;
  --c-accent-glow-14: rgba(232, 138, 82, 0.2);

  --c-warn-deep: #e2b17b;
  --c-warn-wash-08: rgba(214, 144, 66, 0.14);
  --c-warn-line-18: rgba(214, 144, 66, 0.3);
  --c-success-deep: #93c8a2;
  --c-success-wash-08: rgba(111, 181, 131, 0.14);
  --c-success-line-18: rgba(111, 181, 131, 0.3);
  --c-error-fg: #e9a3a3;
  --c-danger-wash-08: rgba(224, 123, 123, 0.14);
  --c-danger-line-18: rgba(224, 123, 123, 0.3);

  --c-chipbtn-bg: var(--c-panel2);
  --c-chipbtn-fg: var(--c-fg2);
  --c-chipbtn-border: rgba(255, 255, 255, 0.17);
  --c-addon-bg: var(--c-panel2);
  --c-addon-fg: var(--c-fg2);
  --c-addon-border: rgba(255, 255, 255, 0.15);
  --c-accent-deep: #cc7948;
  --c-accent-soft: rgba(232, 138, 82, 0.14);

  /* Pasek stopera zostaje ciemny, ale musi odciąć się od tła strony (#1a1916)
     i od paneli — stąd --c-panel-hi zamiast --c-fg. */
  --c-bar-inverse-bg: #3a3730;

  --c-tip-fg: #fbbf24;
  --c-tip-border: rgba(251, 191, 36, 0.5);
  --c-tip-bg: rgba(250, 204, 21, 0.14);

  /* Poświata idzie za jaśniejszą terakotą i jest nieco mocniejsza — na ciemnym
     tle 0.16 ledwo widać, a to ona daje hero charakter. */
  --c-accent-glow: rgba(232, 138, 82, 0.22);

  /* CTA staje się terakotą — jak przyciski akcji w treści. Jasna pigułka
     zlewałaby się z resztą jasnych elementów topbaru. */
  --c-cta-bg: var(--c-accent);
  --c-cta-fg: var(--c-on-accent);
  /* Poświata mocniejsza — na ciemnym tle 0.14 nie daje żadnej głębi */
  --c-cta-glow: rgba(232, 138, 82, 0.26);
  --c-cta-glow-hover: rgba(232, 138, 82, 0.42);

  /* Biała pigułka z dziedziczonym (białym) tekstem znikała całkowicie —
     na ciemnym potrzebna jest subtelna szyba, nie biel. */
  --c-userpill-bg: rgba(255, 255, 255, 0.08);
  --c-userpill-bg-hover: rgba(255, 255, 255, 0.16);
  --c-avatar-bg: rgba(255, 255, 255, 0.16);
  --c-avatar-fg: #fff;

  /* Wartość wprost, nie referencja: ten token czyta JS przez getComputedStyle
     i maluje nim canvas, a nierozwinięte var() nie da się narysować.
     Trzymać zgodne z --c-ink-panel. */
  --c-chart-point-ring: #26241f;
  /* Biały separator wycinków daje na ciemnym ostrą kratę — ma być kolorem karty */
  --c-chart-arc-border: #26241f;
  --c-chart-label-on-fill: #f2efe9;
  --c-chart-center-text: #ffffff;

  /* Zielony gradient przygaszony do poziomu pozostałych kart — w jasnej wersji
     wyróżniał się delikatnie, na ciemnym tle świecił jak reflektor. */
  --c-goal-grad-1: #2a322c;
  --c-goal-grad-2: #35443a;
  --c-goal-grad-3: #41564a;
  --c-goal-border: #41564a;
  --c-on-goal: rgba(255, 255, 255, 0.55);
  --c-on-goal-soft: rgba(255, 255, 255, 0.6);
  --c-on-goal-line: rgba(255, 255, 255, 0.12);
  --c-on-goal-btn-bg: rgba(255, 255, 255, 0.1);
  --c-on-goal-btn-border: rgba(255, 255, 255, 0.24);

  /* Odwrotny problem: 4% terakoty na ciemnym tle jest niewidoczne */
  --c-warn-wash: rgba(214, 144, 66, 0.14);

  /* Akcenty KPI rozjaśnione — ciemna zieleń #1a7d50 na ciemnej karcie
     praktycznie znika, a to ona niesie znaczenie „cel finansowy". */
  --c-kpi-green: #5fc48d;
  --c-kpi-green-wash: rgba(95, 196, 141, 0.13);
  --c-kpi-green-wash2: rgba(95, 196, 141, 0.15);
  --c-kpi-blue: #8098ef;
  --c-kpi-blue-wash: rgba(128, 152, 239, 0.15);
  --c-kpi-grey: rgba(255, 255, 255, 0.55);
  --c-kpi-grey-70: rgba(255, 255, 255, 0.5);
  --c-kpi-grey-75: rgba(255, 255, 255, 0.55);

  /* Alfa zachowana — zmienia się tylko kolor bazowy, na ciemne odpowiedniki */
  --c-panel-90: rgba(38, 36, 31, 0.9);
  --c-panel-96: rgba(38, 36, 31, 0.96);
  --c-panel-98: rgba(38, 36, 31, 0.98);
  --c-panel2-38: rgba(48, 45, 39, 0.38);
  --c-panel2-70: rgba(48, 45, 39, 0.7);
  --c-panel2-82: rgba(48, 45, 39, 0.82);
  --c-panel2-85: rgba(48, 45, 39, 0.85);
  --c-panel2-92: rgba(48, 45, 39, 0.92);
  --c-panel2-96: rgba(48, 45, 39, 0.96);

  /* Szarości spoza palety — w ciemnym wracają do właściwych ról */
  --c-fg-bs: #f2efe9;
  --c-fg-n900: #f2efe9;
  --c-fg-n800: #f2efe9;
  --c-fg-n700: rgba(255, 255, 255, 0.72);
  --c-surface-n50: #2c2a25;
  --c-surface-n100: #302d27;
  --c-surface-n150: #302d27;
  --c-surface-n200: #302d27;
  --c-surface-n250: #3a3730;
  --c-fg-n750: #f2efe9;
  --c-border-n300: rgba(255, 255, 255, 0.16);
  --c-fg-n500: rgba(255, 255, 255, 0.68);
  /* Pas sub-pozycji: w jasnym prawie-biel na bieli, więc tu prawie-nic
     na panelu — wstęga ma tylko odróżnić poziom, nie rozjaśnić wiersza. */
  --c-surface-n25: rgba(255, 255, 255, 0.04);
  --c-line-n250: rgba(255, 255, 255, 0.18);
  --c-line-000: rgba(255, 255, 255, 0.22);
  --c-warn-tint-bs: rgba(214, 144, 66, 0.16);
  --c-warn-fg-bs: #e2b17b;

  /* Ramki — czarna alfa nie istnieje na ciemnym tle, więc odwracamy na białą */
  --c-line-035: rgba(255, 255, 255, 0.06);
  --c-line-04: rgba(255, 255, 255, 0.07);
  --c-line-045: rgba(255, 255, 255, 0.07);
  --c-line-05: rgba(255, 255, 255, 0.08);
  --c-line-06: rgba(255, 255, 255, 0.09);
  --c-line-08: rgba(255, 255, 255, 0.11);
  --c-line-10: rgba(255, 255, 255, 0.13);
  --c-line-12: rgba(255, 255, 255, 0.15);
  --c-line-14: rgba(255, 255, 255, 0.17);

  --c-danger-tint: rgba(224, 123, 123, 0.14);
  --c-danger-deep: #e89c9c;
  --c-accent-tint: rgba(232, 138, 82, 0.14);
  --c-info-tint: rgba(150, 168, 224, 0.16);
  --c-input-border: rgba(255, 255, 255, 0.18);
  --c-thead-dark-bg: #3a3730; /* w ciemnym ink-bg zlałby się z tłem strony */

  /* Cienie zmieniają rolę: na ciemnym tle nie separują, więc są głębsze,
     a właściwą robotę przejmują ramki --c-faint. */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:
    0 32px 64px -24px rgba(0, 0, 0, 0.6), 0 8px 24px -12px rgba(0, 0, 0, 0.4);

  /* Bootstrap — reszta zmiennych --bs-* dziedziczy po --c-* z :root */
  --bs-focus-ring-color: rgba(232, 138, 82, 0.3);
  --bs-primary-rgb: 232, 138, 82;
}

/* ── POCHODNE PALETY CIEMNEJ ─────────────────────────────────────────
   Powyżej każdy z tych tokenów stoi jako literał — to wartość domyślna
   ORAZ fallback. Tutaj te same tokeny liczą się z palety, żeby pokrętła
   w /admin-settings/motyw/ ruszały całą rodzinę: zmiana „Akcent" ma
   pociągnąć poświaty, tinty i focus ring, a nie zostawić po sobie
   pomarańczowe resztki.

   Dlaczego @supports, a nie dwie deklaracje pod rząd: własne właściwości
   przyjmują DOWOLNY ciąg tokenów, więc w przeglądarce bez color-mix()
   druga deklaracja i tak by wygrała, a `var()` unieważniłby się dopiero
   przy użyciu — tło zniknęłoby zamiast wrócić do literału. @supports
   wycina cały blok, więc stary silnik zostaje przy wartościach wyżej.

   `color-mix(in srgb, X P%, transparent)` to dokładnie X z alfą P% —
   dlatego procenty są jeden do jednego ze starymi rgba().

   --bs-primary-rgb zostaje literałem: Bootstrap potrzebuje samych kanałów
   („232, 138, 82"), a tego color-mix() nie potrafi zwrócić. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root[data-theme='dark']:not(:has(body.lp-page)) {
    /* Akcent */
    --c-accent-tint: color-mix(in srgb, var(--c-accent) 14%, transparent);
    --c-accent-glow-14: color-mix(in srgb, var(--c-accent) 20%, transparent);
    --c-accent-glow: color-mix(in srgb, var(--c-accent) 22%, transparent);
    --c-accent-wash: color-mix(in srgb, var(--c-accent) 28%, transparent);
    --c-cta-glow: color-mix(in srgb, var(--c-accent) 26%, transparent);
    --c-cta-glow-hover: color-mix(in srgb, var(--c-accent) 42%, transparent);
    --bs-focus-ring-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
    --c-accent-deep: color-mix(in srgb, var(--c-accent) 88%, #000);
    --c-accent-soft: color-mix(in srgb, var(--c-accent) 14%, transparent);

    /* Błąd — wypełnienia, ramki i tekst na miękkim tle */
    --c-danger-wash-08: color-mix(in srgb, var(--c-danger) 14%, transparent);
    --c-danger-tint: color-mix(in srgb, var(--c-danger) 14%, transparent);
    --c-danger-soft: color-mix(in srgb, var(--c-danger) 16%, transparent);
    --c-danger-line-18: color-mix(in srgb, var(--c-danger) 30%, transparent);
    --c-danger-border: color-mix(in srgb, var(--c-danger) 34%, transparent);
    --c-danger-hover: color-mix(in srgb, var(--c-danger) 80%, #fff);
    --c-danger-deep: color-mix(in srgb, var(--c-danger) 75%, #fff);
    --c-error-fg: color-mix(in srgb, var(--c-danger) 70%, #fff);

    /* Ostrzeżenie */
    --c-warn-wash: color-mix(in srgb, var(--c-warn) 14%, transparent);
    --c-warn-wash-08: color-mix(in srgb, var(--c-warn) 14%, transparent);
    --c-warn-soft: color-mix(in srgb, var(--c-warn) 16%, transparent);
    --c-warn-line-18: color-mix(in srgb, var(--c-warn) 30%, transparent);
    --c-warn-border: color-mix(in srgb, var(--c-warn) 34%, transparent);
    --c-warn-deep: color-mix(in srgb, var(--c-warn) 70%, #fff);
    --c-warn-tint-bs: color-mix(in srgb, var(--c-warn) 16%, transparent);
    --c-warn-fg-bs: color-mix(in srgb, var(--c-warn) 70%, #fff);

    /* Sukces */
    --c-success-wash-08: color-mix(in srgb, var(--c-success) 14%, transparent);
    --c-success-soft: color-mix(in srgb, var(--c-success) 16%, transparent);
    --c-success-line-18: color-mix(in srgb, var(--c-success) 30%, transparent);
    --c-success-deep: color-mix(in srgb, var(--c-success) 75%, #fff);

    /* Nakładka podnosząca powierzchnie — cała rodzina --c-glass-* z jednego
       koloru. Alfy zostają zróżnicowane, bo to one budują hierarchię: pole
       formularza ma odstawać od panelu mocniej niż chip. */
    --c-glass-34: color-mix(in srgb, var(--c-elevate) 4%, transparent);
    --c-glass-38: color-mix(in srgb, var(--c-elevate) 5%, transparent);
    --c-glass-44: color-mix(in srgb, var(--c-elevate) 5%, transparent);
    --c-glass-48: color-mix(in srgb, var(--c-elevate) 5%, transparent);
    --c-glass-52: color-mix(in srgb, var(--c-elevate) 4%, transparent);
    --c-glass-54: color-mix(in srgb, var(--c-elevate) 5%, transparent);
    --c-glass-56: color-mix(in srgb, var(--c-elevate) 5%, transparent);
    --c-glass-62: color-mix(in srgb, var(--c-elevate) 6%, transparent);
    --c-glass-70: color-mix(in srgb, var(--c-elevate) 7%, transparent);
    --c-glass-72: color-mix(in srgb, var(--c-elevate) 7%, transparent);
    --c-glass-76: color-mix(in srgb, var(--c-elevate) 8%, transparent);
    --c-glass-78: color-mix(in srgb, var(--c-elevate) 8%, transparent);
  }
}

/* Rysunki kreskowe (SVG/PNG z przezroczystym tłem) rysowane ciemnym tuszem —
   na ciemnym tle znikają. Filtr odwraca jasność, a hue-rotate przywraca
   odcienie, które samo invert() przekręciłoby na dopełniające: pomarańcz w
   ilustracjach stałby się niebieski.

   Dla grafiki czysto szarej wystarczyłoby `invert(1)`; hue-rotate jest tu, bo
   rysunki mają akcent w kolorze marki. Nie stosować do zdjęć ani logotypów
   klientów — tam odwrócenie zniekształca obraz zamiast go ratować. */
:root[data-theme='dark']:not(:has(body.lp-page)) .ds-invert-on-dark {
  filter: invert(1) hue-rotate(180deg);
}

/* Dopisek input-group nigdy nie przeszedł przez tokeny — zostaje przy
   bootstrapowym #e9ecef, czyli jasnoszarym polu na ciemnym tle. Reguła jest
   celowo tylko dla ciemnego motywu: nie ma tu czego „zachować", bo w jasnym
   maluje sam Bootstrap, a przepisanie jego wartości do tego pliku znaczyłoby,
   że przy jego aktualizacji obie strony zaczną się rozjeżdżać po cichu. */
:root[data-theme='dark']:not(:has(body.lp-page)) .input-group-text {
  background-color: var(--c-surface-n250);
  border-color: var(--c-faint);
  color: var(--c-fg-bs);
}

/* ── BASE ────────────────────────────────────────────────────────── */
body {
  background-color: var(--c-bg) !important;
  font-family: var(--font-sans);
  color: var(--c-fg);
}

/* ── UTILITY ─────────────────────────────────────────────────────── */

/* Escape Bootstrap container for full-bleed sections */
.c-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Constrained content inside full-bleed sections */
.c-inner {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-8);
  padding-right: var(--sp-8);
}

/* Section kicker (label above headings) */
.c-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: 500 var(--fs-xs) var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--c-accent);
  text-transform: uppercase;
}

/* Mono utility label */
.c-mono-label {
  font: 500 var(--fs-xs) var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Card primitive */
.c-card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

/* Pill badge */
.c-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font: 500 var(--fs-xs) var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── NAVBAR ─────────────────────────────────────────────────────── */
.navbar.bg-body-tertiary {
  background-color: var(--c-navbar-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}

/* Przełącznik motywu — pozycja w menu użytkownika w topbarze */
.theme-switch-item {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  cursor: pointer;
}
.theme-switch-item > span:first-of-type {
  flex: 1;
}
.theme-switch {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}
.theme-switch .form-check-input {
  width: 34px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  background-color: var(--c-faint);
  border-color: var(--c-faint);
}
.theme-switch .form-check-input:checked {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}
.theme-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
/* Na landingu motyw jest zawsze jasny — przełącznik nie miałby czego zmieniać */
.lp-page .theme-switch-item {
  display: none;
}

.navbar-brand {
  font: 700 17px var(--font-sans) !important;
  letter-spacing: -0.02em;
  color: var(--c-fg) !important;
}

/* ── SIDEBAR (Menu D — collapsible card sections) ───────────────── */
/* Positioning/layout integration (fixed, widths, mobile slide) lives in
   main/templates/main/base.html; visual design lives here. */
.sidebar {
  --sb-violet: #7a5d9c; /* EXPERT/locked accent — component-scoped */
  background-color: var(--c-side-bg) !important;
  border-right: 1px solid var(--c-border-strong);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
}

.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0; /* critical: allows flex child to shrink below content height */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) transparent;
}
.sidebar-scroll::-webkit-scrollbar {
  width: 2px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: 2px;
}

/* Elements that fade out in rail (collapsed) mode */
.sb-fade {
  transition: opacity 0.16s ease;
}

/* Head: logo + brand + plan pill */
.sidebar-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 15px 8px;
  min-height: 54px;
}
.sb-logo {
  width: 25px;
  height: 25px;
  background: var(--c-logo-bg);
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--c-logo-fg) !important;
  font: 700 13px var(--font-sans);
  text-decoration: none !important;
  flex: none;
  transition: width 0.3s ease, height 0.3s ease;
}
.sb-brand {
  font: 600 15px var(--font-sans);
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--c-fg) !important;
  text-decoration: none !important;
}
.plan-pill {
  font: 600 9px var(--font-mono);
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--c-accent);
  background: rgba(201, 100, 66, 0.1);
  white-space: nowrap;
}

/* Section cards */
.menu-sec {
  flex: none;
  margin: 7px 8px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: 11px;
  overflow: hidden;
}
.menu-sec.locked {
  background: rgba(122, 93, 156, 0.05);
  border-color: rgba(122, 93, 156, 0.22);
}
.menu-sec-dash {
  margin-top: 12px;
}
.menu-sec-dash .sec-body {
  padding: 5px 0;
}

.sechead {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px 10px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.menu-sec.locked .sechead {
  border-bottom-color: rgba(122, 93, 156, 0.18);
}
.sechead .sec-ic {
  font-size: 15px;
  color: var(--c-accent);
  flex: none;
  width: 16px;
  text-align: center;
}
.menu-sec.locked .sechead .sec-ic {
  color: var(--sb-violet);
}
.sechead .sn {
  font: 600 13.5px var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--c-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.menu-sec.locked .sechead .sn {
  color: var(--c-fg2);
}
.plan-tag {
  font: 600 8px var(--font-mono);
  letter-spacing: 0.07em;
  padding: 2px 6px;
  border-radius: 4px;
  flex: none;
  white-space: nowrap;
}
.plan-tag.starter {
  color: var(--c-success);
  background: var(--c-success-soft);
}
.plan-tag.pro {
  color: var(--c-accent);
  background: rgba(201, 100, 66, 0.1);
}
/* .locked — tag modułu niedostępnego w planie. Zawsze fiolet, niezależnie od
   tego, w którym planie moduł się odblokowuje (PRO czy EXPERT): kolor niesie
   informację „zablokowane", nie nazwę planu. */
.plan-tag.exp,
.plan-tag.locked {
  color: var(--sb-violet);
  background: rgba(122, 93, 156, 0.14);
}
/* .beta — funkcja w testach zamkniętych, widoczna tylko dla superusera
   i grupy „Feature Testers". Terracotta jak akcent: to nie blokada planu,
   tylko sygnał „wersja robocza, może się zmienić". */
.plan-tag.beta {
  color: var(--c-accent);
  background: rgba(201, 100, 66, 0.14);
  border: 1px dashed rgba(201, 100, 66, 0.45);
}
.sec-chev {
  font-size: 11px;
  color: var(--c-muted);
  flex: none;
  transition: transform 0.34s cubic-bezier(0.45, 0.02, 0.18, 1);
}
.menu-sec.closed .sec-chev {
  transform: rotate(-90deg);
}

.sec-body {
  max-height: 520px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.45, 0.02, 0.18, 1),
    opacity 0.28s ease;
  padding: 3px 0 5px;
}
/* No open/close animation until the initial (persisted) state is applied —
   prevents sections flashing open and animating shut on every page load */
.sidebar.sidebar-preload .sec-body,
.sidebar.sidebar-preload .sec-chev {
  transition: none !important;
}
.menu-sec.closed .sec-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Menu items (links inside section cards, admin links, bottom) */
.sidebar .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  margin: 1px 6px;
  border-radius: 7px;
  font: 500 12.5px var(--font-sans);
  color: var(--c-fg2);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  background: none;
  width: calc(100% - 12px);
  text-align: left;
  position: relative;
}
.sidebar .menu-item i {
  font-size: 14px;
  color: var(--c-muted);
  flex: none;
  width: 15px;
  text-align: center;
}
.sidebar .menu-item .mi-lbl {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .menu-item:hover {
  background: var(--c-hover-weak);
  color: var(--c-fg);
}
.sidebar .menu-item.active {
  background: rgba(201, 100, 66, 0.1);
  color: var(--c-fg);
}
.sidebar .menu-item.active i {
  color: var(--c-accent);
}
.sidebar .menu-item.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--c-accent);
  border-radius: 0 2px 2px 0;
}

/* Panel Główny / Asystent AI — standalone highlighted item.
   Item wypełnia całą kartę (margines i własny radius wyzerowane, przycina go
   overflow:hidden karty) — inaczej podświetlenie hovera zostawia dookoła
   widoczną obwódkę tła panelu. */
.menu-sec-dash .sec-body {
  padding: 0;
}
.sidebar .menu-sec-dash .menu-item {
  width: 100%;
  margin: 0;
  /* radius karty (11px) minus jej ramka (1px) — item wpisuje się w nią
     dokładnie, więc ramka stanu aktywnego jest zaokrąglona jak button,
     a nie ścięta w narożnikach przez overflow:hidden karty */
  border-radius: 10px;
  padding: 11px 12px;
}
.sidebar .menu-item-dash {
  font-weight: 600;
  color: var(--c-fg);
  transition: background 0.16s, color 0.16s;
}
/* Stan aktywny: białe wnętrze + wyraźna ramka akcentu. Domyślne podświetlenie
   .menu-item.active (10% terracotty) na karcie panelu zlewa się z tłem —
   ramka rysowana inset shadow, żeby nie zmieniać wymiarów itemu. */
.sidebar .menu-sec-dash .menu-item.active {
  background: var(--c-surface-pure);
  box-shadow: inset 0 0 0 2px var(--c-accent);
}
.sidebar .menu-sec-dash .menu-item.active::before {
  display: none;
}
.sidebar .menu-sec-dash .menu-item.active:hover {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.sidebar .menu-sec-dash .menu-item.active:hover i {
  color: var(--c-on-accent);
}
.sidebar .menu-item-dash i {
  color: var(--c-accent);
}
.sidebar .menu-item-dash:hover {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.sidebar .menu-item-dash:hover i {
  color: var(--c-on-accent);
}
/* Wariant zablokowany (Asystent AI bez planu) — fiolet jak w sekcjach
   Projekty/Analityka; karta niesie .locked, więc tło i ramka są już fioletowe. */
.sidebar .menu-sec-dash.locked .menu-item-dash,
.sidebar .menu-sec-dash.locked .menu-item-dash i {
  color: var(--sb-violet);
}
.sidebar .menu-sec-dash.locked .menu-item-dash:hover {
  background: var(--sb-violet);
}
.sidebar .menu-sec-dash.locked .menu-item-dash:hover,
.sidebar .menu-sec-dash.locked .menu-item-dash:hover i {
  color: #fff;
}

/* Locked module body (Analityka below EXPERT) */
.menu-sec .ghost {
  opacity: 0.4;
  pointer-events: none;
}
.lockmsg {
  padding: 6px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lockmsg p {
  margin: 0;
  font: 400 11px/1.5 var(--font-sans);
  color: var(--c-muted);
}
.lockmsg .btn-unlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 600 10px var(--font-mono);
  letter-spacing: 0.06em;
  color: #fff !important;
  background: var(--sb-violet);
  border: none;
  border-radius: 7px;
  padding: 9px 0;
  cursor: pointer;
  text-decoration: none !important;
}
.lockmsg .btn-unlock:hover {
  filter: brightness(1.08);
}

/* Admin role pills (Editors / Superuser) */
.admin-sec {
  flex: none;
  margin: 5px 10px;
}
.admin-pill {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--c-hover);
  border: 1px solid var(--c-border);
  font: 600 10px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--c-fg2);
  cursor: pointer;
  transition: background 0.15s;
}
.admin-pill:hover {
  background: var(--c-hover-strong);
}
.admin-pill i {
  font-size: 12px;
  flex: none;
}
.admin-pill .albl {
  flex: 1;
  white-space: nowrap;
  text-align: left;
}
.admin-pill .achev {
  transition: transform 0.2s;
}
.admin-pill:not(.collapsed) .achev {
  transform: rotate(180deg);
}
.admin-links {
  padding: 4px 0 2px;
}

.sb-spacer {
  flex: 1;
  min-height: 8px;
}

/* Bottom: settings + logout (pinned under scroll area) */
.sidebar-bottom {
  flex: none;
  border-top: 1px solid var(--c-border);
  padding: 6px 0;
}
.sidebar-logout-form {
  margin: 0;
}
.sidebar .sidebar-logout-btn,
.sidebar .sidebar-logout-btn i {
  color: var(--c-danger);
}
.sidebar .sidebar-logout-btn:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

/* Circular rail toggle */
.sidebar-toggle-btn {
  background-color: var(--c-panel) !important;
  border: 1px solid var(--c-border-strong) !important;
  box-shadow: 0 2px 8px rgba(30, 28, 25, 0.14);
  color: var(--c-fg2);
}
.sidebar-toggle-btn:hover {
  background-color: var(--c-surface-pure) !important;
  color: var(--c-fg);
}

/* JS tooltip shown next to rail */
.sidebar-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--c-tooltip-bg);
  color: var(--c-tooltip-fg);
  font: 500 11.5px var(--font-sans);
  padding: 6px 11px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: opacity 0.13s ease;
}
.sidebar-tooltip.visible {
  opacity: 1;
}

/* ── Rail (collapsed) overrides — desktop only ── */
@media (min-width: 769px) {
  .sidebar.collapsed .sb-fade,
  html.sidebar-collapsed-init .sidebar .sb-fade {
    opacity: 0;
    pointer-events: none;
  }
  .sidebar.collapsed .sidebar-head,
  html.sidebar-collapsed-init .sidebar .sidebar-head {
    padding: 15px 0 10px;
    justify-content: center;
  }
  .sidebar.collapsed .sb-brand,
  html.sidebar-collapsed-init .sidebar .sb-brand,
  .sidebar.collapsed .plan-pill,
  html.sidebar-collapsed-init .sidebar .plan-pill {
    display: none;
  }
  .sidebar.collapsed .sb-logo,
  html.sidebar-collapsed-init .sidebar .sb-logo {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    font-size: 17px;
  }
  .sidebar.collapsed .sechead,
  html.sidebar-collapsed-init .sidebar .sechead {
    flex-direction: column;
    gap: 0;
    justify-content: center;
    align-items: center;
    padding: 9px 2px 0;
    border-bottom: none;
    cursor: default;
  }
  .sidebar.collapsed .sechead .sn,
  html.sidebar-collapsed-init .sidebar .sechead .sn,
  .sidebar.collapsed .sechead .plan-tag,
  html.sidebar-collapsed-init .sidebar .sechead .plan-tag,
  .sidebar.collapsed .sechead .sec-chev,
  html.sidebar-collapsed-init .sidebar .sechead .sec-chev {
    display: none;
  }
  .sidebar.collapsed .sec-ic,
  html.sidebar-collapsed-init .sidebar .sec-ic {
    font-size: 17px;
  }
  .sidebar.collapsed .sec-body,
  html.sidebar-collapsed-init .sidebar .sec-body {
    max-height: 520px !important;
    opacity: 1 !important;
    padding: 0 0 2px !important;
  }
  .sidebar.collapsed .menu-item,
  html.sidebar-collapsed-init .sidebar .menu-item {
    justify-content: center;
    margin: 1px 0;
    padding: 8px 0;
    border-radius: 0;
    width: 100%;
  }
  .sidebar.collapsed .menu-item .mi-lbl,
  html.sidebar-collapsed-init .sidebar .menu-item .mi-lbl,
  .sidebar.collapsed .menu-item .plan-tag,
  html.sidebar-collapsed-init .sidebar .menu-item .plan-tag {
    display: none;
  }
  .sidebar.collapsed .menu-item i,
  html.sidebar-collapsed-init .sidebar .menu-item i {
    font-size: 17px;
    width: auto;
  }
  .sidebar.collapsed .menu-item.active,
  html.sidebar-collapsed-init .sidebar .menu-item.active {
    border-radius: 9px;
    margin: 1px 13px;
    width: auto;
  }
  .sidebar.collapsed .menu-item.active::before,
  html.sidebar-collapsed-init .sidebar .menu-item.active::before {
    display: none;
  }
  .sidebar.collapsed .ghost,
  html.sidebar-collapsed-init .sidebar .ghost {
    opacity: 0.42;
  }
  .sidebar.collapsed .lockmsg,
  html.sidebar-collapsed-init .sidebar .lockmsg {
    display: none;
  }
  .sidebar.collapsed .admin-sec,
  html.sidebar-collapsed-init .sidebar .admin-sec {
    margin: 4px 9px;
  }
  .sidebar.collapsed .admin-pill,
  html.sidebar-collapsed-init .sidebar .admin-pill {
    justify-content: center;
    padding: 9px 0;
    gap: 0;
  }
  .sidebar.collapsed .admin-pill .albl,
  html.sidebar-collapsed-init .sidebar .admin-pill .albl,
  .sidebar.collapsed .admin-pill .achev,
  html.sidebar-collapsed-init .sidebar .admin-pill .achev {
    display: none;
  }
  .sidebar.collapsed .sb-spacer,
  html.sidebar-collapsed-init .sidebar .sb-spacer {
    min-height: 4px;
  }
}

.sidebar-tooltip {
  background-color: var(--c-panel);
  color: var(--c-fg);
  border-color: var(--c-border);
  box-shadow: var(--shadow-md);
}

/* ── MAIN CONTENT ───────────────────────────────────────────────── */
.main-content {
  background-color: var(--c-bg);
}

/* ── BOOTSTRAP COMPONENT OVERRIDES ─────────────────────────────── */
.card {
  background-color: var(--c-panel) !important;
  border-color: var(--c-border) !important;
}

.card-header {
  background-color: var(--c-panel2) !important;
  border-bottom-color: var(--c-border) !important;
  font-family: var(--font-sans);
}

.table > :not(caption) > * > * {
  background-color: var(--c-panel) !important;
  color: var(--c-fg);
}

.table > :not(caption) > .table-success > * {
  background-color: var(--bs-table-success-bg) !important;
}
.table > :not(caption) > .table-primary > * {
  background-color: var(--bs-table-primary-bg) !important;
}
.table > :not(caption) > .table-light > * {
  background-color: var(--c-panel2) !important;
}

.list-group-item {
  background-color: var(--c-panel) !important;
  border-color: var(--c-border) !important;
  color: var(--c-fg);
}

.form-control,
.form-select {
  background-color: var(--c-panel) !important;
  border-color: var(--c-faint) !important;
  color: var(--c-fg) !important;
  font-family: var(--font-sans);
  border-radius: var(--r-lg) !important;
}

.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 100, 66, 0.15) !important;
  background-color: var(--c-panel) !important;
  outline: none !important;
}

.btn {
  font-family: var(--font-sans);
  border-radius: var(--r-lg) !important;
}

/* Przycisk akcji głównej. Wcześniej brał --c-fg jako TŁO i --c-bg jako tekst —
   w jasnym motywie daje to czarną pigułkę i wygląda dobrze, ale w ciemnym
   zamienia się w biały klawisz, który czyta się jak zapomniany element z
   jasnego motywu. --c-cta-* ma identyczne wartości jasne, więc podmiana nic tu
   nie zmienia, a w ciemnym przycisk staje się terakotą — tak jak CTA w
   topbarze i przyciski akcji w treści. */
.btn-primary {
  background-color: var(--c-cta-bg) !important;
  border-color: var(--c-cta-bg) !important;
  color: var(--c-cta-fg) !important;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: var(--c-btn-dark-bg) !important;
  border-color: var(--c-btn-dark-bg) !important;
}

.btn-outline-primary {
  color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}

.btn-outline-primary:hover {
  background-color: var(--c-accent) !important;
  color: var(--c-on-accent) !important;
}

.btn-outline-secondary {
  color: var(--c-fg2) !important;
  border-color: var(--c-faint) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
  background-color: var(--c-faint) !important;
  border-color: var(--c-faint) !important;
  color: var(--c-fg) !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:active {
  background-color: var(--c-faint) !important;
  border-color: var(--c-faint) !important;
  color: var(--c-fg) !important;
}

.btn-accent {
  background-color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-on-accent) !important;
}

.btn-accent:hover,
.btn-accent:active {
  background-color: var(--c-warn) !important;
  border-color: var(--c-warn) !important;
  color: var(--c-on-accent) !important;
}

.alert {
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  border: 1px solid;
}

.alert-danger {
  background-color: var(--c-danger-soft);
  border-color: var(--c-danger-border);
  color: var(--c-danger);
}

.alert-warning {
  background-color: rgba(168, 95, 28, 0.08);
  border-color: rgba(168, 95, 28, 0.25);
  color: var(--c-warn);
}

.alert-success {
  background-color: var(--c-success-soft);
  border-color: rgba(62, 125, 79, 0.25);
  color: var(--c-success);
}

.alert-info {
  background-color: rgba(201, 100, 66, 0.08);
  border-color: rgba(201, 100, 66, 0.25);
  color: var(--c-accent);
}

/* Toast — komunikaty Django messages (main/base.html #messages) */
.ds-toast {
  position: fixed;
  top: calc(70px + 14px); /* 70px = wysokość .navbar.fixed-top (patrz .main-content padding-top) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  min-width: 260px;
  max-width: min(90vw, 480px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));
  backdrop-filter: blur(12px); /* jak .navbar.bg-body-tertiary */
}

/* Toast pływa nad dowolną treścią strony — nasycone, lekko półprzezroczyste
   tło (0.85) zamiast "miękkich" 0.08 tonów alertów w kartach */
.ds-toast.alert-success {
  background-color: rgba(62, 125, 79, 0.85);
  border-color: var(--c-success);
  color: #fff;
}
.ds-toast.alert-danger {
  background-color: rgba(179, 70, 70, 0.85);
  border-color: var(--c-danger);
  color: #fff;
}
.ds-toast.alert-warning {
  background-color: rgba(168, 95, 28, 0.85);
  border-color: var(--c-warn);
  color: #fff;
}
.ds-toast.alert-info {
  background-color: rgba(201, 100, 66, 0.85);
  border-color: var(--c-accent);
  color: #fff;
}
.ds-toast .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.badge.bg-danger {
  background-color: var(--c-danger) !important;
}
.badge.bg-success {
  background-color: var(--c-success) !important;
}
.badge.bg-primary {
  background-color: var(--c-accent) !important;
}

/* ── LANDING PAGE ────────────────────────────────────────────────── */

/* Landing sections that need full-bleed */
.lp-section {
  padding: 90px 0;
}

.lp-section-sm {
  padding: 56px 0;
}

/* Hero */
.lp-hero {
  padding: 80px 0 96px;
  border-bottom: 1px solid var(--c-border);
}

/* Dark / ink sections */
.lp-dark {
  background: var(--c-ink-bg);
  color: #fff;
}

/* Alternating feature blocks */
.lp-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--c-border);
}

/* Section heading style */
.lp-h2 {
  font: 600 var(--fs-3xl) var(--font-sans);
  color: var(--c-fg);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}

.lp-h3 {
  font: 600 28px var(--font-sans);
  color: var(--c-fg);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
}

.lp-body {
  font: 400 16px var(--font-sans);
  color: var(--c-fg2);
  line-height: 1.6;
  margin: 0 0 22px;
}

/* CTA buttons */
.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--c-fg);
  color: var(--c-bg) !important;
  border: none;
  border-radius: var(--r-lg);
  font: 500 13px var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s;
}

.lp-btn-primary:hover {
  background: #2e2c28;
  color: var(--c-bg) !important;
}

.lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  color: var(--c-fg) !important;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  font: 500 13px var(--font-sans);
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.lp-btn-ghost:hover {
  background: var(--c-panel-hi);
  border-color: var(--c-muted);
}

.lp-btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--c-accent);
  color: #fff !important;
  border: none;
  border-radius: var(--r-lg);
  font: 500 13px var(--font-sans);
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s;
}

.lp-btn-accent:hover {
  background: var(--c-accent2);
}

/* Feature bullet list */
.lp-bullets {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 500 14px var(--font-sans);
  color: var(--c-fg);
}

.lp-bullets li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c96442' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/contain no-repeat;
  flex-shrink: 0;
  margin-top: 4px;
}

/* Product mock card used in hero + feature visuals */
.lp-mock {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.lp-mock-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--c-panel2);
  border-bottom: 1px solid var(--c-border);
}

.lp-mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.lp-mock-url {
  flex: 1;
  text-align: center;
  font: 500 10px var(--font-mono);
  color: var(--c-muted);
  letter-spacing: 0.06em;
}

/* Pricing card */
.lp-plan {
  padding: 36px 32px 32px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lp-plan.featured {
  background: var(--c-fg);
  color: var(--c-bg);
  border-color: transparent;
}

/* FAQ item */
.lp-faq-item {
  padding-bottom: 24px;
}

.lp-faq-q {
  font: 600 17px var(--font-sans);
  color: var(--c-fg);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 8px;
}

.lp-faq-a {
  font: 400 14px var(--font-sans);
  color: var(--c-fg2);
  line-height: 1.6;
  margin: 0;
}

/* ── DASHBOARD ───────────────────────────────────────────────────── */

/* KPI tile */
.db-kpi {
  flex: 1;
  min-width: 0;
  padding: 36px 16px 12px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.db-kpi-label {
  font: 500 var(--fs-xs) var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.db-kpi-value {
  font: 700 clamp(36px, 4.5vw, 48px) var(--font-mono);
  color: var(--c-fg);
  letter-spacing: -0.03em;
  line-height: 1;
  padding-right: 88px;
}

.db-kpi-sub {
  font: 500 var(--fs-xs) var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

/* Card section header */
.db-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-card-num {
  font: 500 var(--fs-xs) var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--c-muted);
}

.db-card-title {
  font: 600 14px var(--font-sans);
  color: var(--c-fg);
  letter-spacing: -0.01em;
}

/* Notification banner */
.db-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(
    90deg,
    var(--c-danger-soft),
    rgba(232, 138, 82, 0.04)
  );
  border: 1px solid var(--c-danger-border);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}

.db-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-lg);
  background: var(--c-danger-soft);
  display: grid;
  place-items: center;
  color: var(--c-danger);
  flex-shrink: 0;
  font-size: 1rem;
}

/* Task row */
.db-task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-border);
}

.db-task-row:last-child {
  border-bottom: none;
}

.db-task-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--c-hover-faint);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 0.75rem;
}

/* Quick action tile */
.db-quick-tile {
  flex: 1;
  padding: 14px 16px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none !important;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.db-quick-tile:hover {
  background: var(--c-panel-hi);
  border-color: var(--c-border-strong);
}

.db-quick-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

/* Progress bar */
.db-progress-track {
  position: relative;
  height: 10px;
  background: var(--c-panel2);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  overflow: hidden;
}

.db-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent2), var(--c-accent));
  border-radius: 3px;
}

/* Prevent grid-item content blowout (e.g. wide mockups) from pushing feature
   rows off-screen — a grid item's default min-width:auto sizes its 1fr track to
   its content's intrinsic width, regardless of viewport, even when a descendant
   further down has its own overflow:hidden/auto. Applies at any width, not just
   the mobile breakpoint, since the same blowout can happen on a narrow desktop
   window before the row has stacked to one column. */
.lp-feature-row > * {
  min-width: 0;
}

/* Kanban/funnel mockup: fluid 4 equal columns when there's room, but never
   shrinks a column below a readable width — if the row (still side-by-side on a
   narrow desktop, or stacked on mobile) doesn't have enough space, it becomes its
   own quiet horizontal scroll area instead of overflowing the page. */
.lp-kanban-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.lp-kanban-grid::-webkit-scrollbar {
  height: 6px;
}
.lp-kanban-grid::-webkit-scrollbar-track {
  background: transparent;
}
.lp-kanban-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.lp-kanban-grid::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .c-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .lp-hero-grid,
  .lp-feature-row {
    grid-template-columns: 1fr !important;
  }
  /* Reset order on feature rows so DOM order is used (text above visual) */
  .lp-feature-row > * {
    order: unset !important;
  }
  /* Hide all purely decorative illustration images on mobile */
  .lp-deco {
    display: none !important;
  }
  .lp-plan-grid {
    grid-template-columns: 1fr !important;
  }
  /* Section header decorative grids (1fr 1.6fr layouts) */
  .lp-section-header {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 24px !important;
  }
  /* Hide decorative illustration images inside section headers */
  .lp-section-header > img {
    display: none !important;
  }
  /* Hide hero product mockup panel on mobile */
  .lp-hero-right {
    display: none !important;
  }
  /* FAQ content layout */
  .lp-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Hide FAQ decorative image on mobile */
  .lp-faq-grid > img {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .lp-3col {
    grid-template-columns: 1fr !important;
  }
  .lp-2col {
    grid-template-columns: 1fr !important;
  }
  .lp-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Problem section cards: reduce the extreme top margin on mobile */
  .lp-problem-cards {
    margin-top: 40px !important;
  }
  .db-kpi-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Trial banner card: stacking is handled by .lp-feature-row, just tighten padding */
  .lp-trial-card {
    padding: 32px 22px !important;
  }
  /* Horizontally-scrolling why-tabs row: visible overflow + edge fade hint
     (kanban mockup's own scroll/fluid sizing is handled unconditionally above) */
  .lp-scroll-fade {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
  }
}

/* ─── Landing page: navbar constrained to content width ─────────── */
/* Only for public (non-auth) navbar — auth navbar with sidebar stays full-width */
.lp-page .navbar:not(.navbar-with-sidebar) > .container-fluid {
  max-width: 1288px; /* c-inner 1240px + 24px*2 padding */
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ─── Scrolling logos marquee ───────────────────────────────────── */
.lp-logos-outer {
  /* base — nic specjalnego */
}

.lp-logos-outer--carousel {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 88%,
    transparent 100%
  );
}

.lp-logos-outer--static {
  display: flex;
  justify-content: center;
}

.lp-logos-track {
  display: flex;
  gap: 48px;
  align-items: center;
  padding: 4px 0;
}

.lp-logos-track--carousel {
  width: max-content;
  animation: lp-logos-scroll 32s linear infinite;
}

.lp-logos-track--carousel:hover {
  animation-play-state: paused;
}

.lp-logos-track--static {
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 48px;
}

.lp-logos-track span {
  font: 500 13px var(--font-sans);
  color: var(--c-fg2);
  opacity: 0.55;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}

.lp-logos-placeholder {
  font: 400 12px var(--font-sans);
  color: var(--c-muted);
  opacity: 0.5;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px dashed currentColor;
  border-radius: 6px;
  padding: 20px 28px;
}

/* Image-based logos — jednolity rozmiar + wyszarzenie */
.lp-logos-track img {
  width: 140px;
  height: 48px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  /* grayscale + lekkie rozjaśnienie tła JPG → multiply usuwa biel */
  filter: grayscale(1) brightness(1.3) contrast(1.2);
  opacity: 0.75;
  mix-blend-mode: multiply;
  transition:
    opacity 0.25s ease,
    filter 0.25s ease;
}

.lp-logos-track img:hover {
  opacity: 1;
  filter: grayscale(1) brightness(1.3) contrast(1.2);
}

@keyframes lp-logos-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ─── FAQ accordion (details/summary) ──────────────────────────── */
.lp-faq-accordion {
  display: flex;
  flex-direction: column;
}

.lp-faq-details {
  border-top: 1px solid var(--c-border);
}

.lp-faq-details:last-child {
  border-bottom: 1px solid var(--c-border);
}

.lp-faq-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lp-faq-summary::-webkit-details-marker {
  display: none;
}

.lp-faq-num {
  font: 500 11px var(--font-mono);
  color: var(--c-accent);
  letter-spacing: 0.12em;
  flex-shrink: 0;
  width: 22px;
}

.lp-faq-question {
  flex: 1;
  font: 500 16px var(--font-sans);
  color: var(--c-fg);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.lp-faq-chevron {
  width: 18px;
  height: 18px;
  color: var(--c-muted);
  flex-shrink: 0;
  transition:
    transform 0.25s ease,
    color 0.2s;
}

.lp-faq-details[open] .lp-faq-chevron {
  transform: rotate(180deg);
  color: var(--c-accent);
}

.lp-faq-details[open] .lp-faq-summary {
  padding-bottom: 8px;
}

.lp-faq-body {
  padding: 0 0 22px 38px;
  font: 400 14px var(--font-sans);
  color: var(--c-fg2);
  line-height: 1.65;
}