/* mira-saas.css — AUTO-SKÓRA 'SaaS v3 lekko' dla panelu Kasi (kapsuła kasia).
   Źródło designu: outputs/panel-koncepty-2026-07-10/mira-saas.html (zaakceptowany).
   Cały arkusz scoped pod html.saas-skin => INERTNY dla klientek/demo (nie mają tej klasy).
   Wariant męski V2 = html.saas-skin.w-v2. NIE edytuj ręcznie sekcji poniżej bez powodu.
   Wygenerowane skryptem scope_css.py z designu. */

/* JEDEN system czcionek (Poppins), zero starego serifa — decyzja Kasi 2026-07-11.
   Nadpisujemy zmienną --serif (używaną przez czat, nagłówki reużytych zakładek, itd.) na Poppinsa
   WYŁĄCZNIE w skórze Kasi (html.saas-skin), więc klientki/prod bez zmiany. */
html.saas-skin { --serif: 'Poppins', system-ui, sans-serif; }
html.saas-skin .serif, html.saas-skin .landing-h, html.saas-skin .start-h1-compact,
html.saas-skin .topbar-title, html.saas-skin .empty-t { font-weight: 600; letter-spacing: -0.015em; }
/* Większy oddech między kartami na tablicach (Kasia 2026-07-11: „większy odstęp między zadaniami"). */
html.saas-skin .titem { margin-bottom: 15px; }
html.saas-skin .trow { padding-top: 12px; padding-bottom: 12px; }

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

html.saas-skin{
  --f:'Poppins',system-ui,sans-serif;
  --pill:999px;
  --ease:cubic-bezier(0.22,0.61,0.36,1);--ease-out:cubic-bezier(0.16,1,0.3,1);--spring:cubic-bezier(0.34,1.56,0.64,1);
  --up:#43a878;--hot:#e0705f;
  --sidew:242px;
}

/* ===== V1 — kobieca ===== */
/* KOLOR (Kasia 2026-07-15, runda 2): DOKŁADNIE czysty off-white jak panel Patryka (--bg #f7f6f4,
   białe karty, delikatne linie #efeff1) — tylko akcent zostaje fioletowy. Zamiast pastelowych plam:
   ultra-subtelna poświata akcentu 5%/3% (wzorzec --app-grad Patryka). Cel: „jeszcze jaśniejszy, czysty". */
/* JEDEN ton chromu panelu (Kasia 2026-07-15 r.4): rama = canvas = ten sam jasny off-white (jaśniejszy
   niż dawny beż, ale NIE tak biały jak karty/wiadomości). Karty i pole wiadomości zostają białe, żeby
   delikatnie wychodziły. Płaskie tło (bez plam), żeby było czysto. */
html.saas-skin{
  --acc:#8465dd;--acc-2:#a98ef2;--acc-dark:#5a41a8;--acc-soft:#f3f0fb;
  --canvas:#f8f8f6;
  --ink:#26272c;--ink-2:#5d5f67;--ink-3:#8f9199;--ink-4:#bfc1c7;
  --frame:#f8f8f6;--card:#ffffff;--card-soft:#f1f1ef;--line:#ededeb;
  --side-ink:#8f9199;--side-on:#ffffff;
  --sh:0 12px 40px rgba(30,30,45,.05);
  --sh-s:0 5px 20px rgba(30,30,45,.04);
}
html.saas-skin body{ background:var(--canvas); }
/* ===== V2 — męska ===== */
html.saas-skin.w-v2{
  --acc:#4a67b3;--acc-2:#7089cf;--acc-dark:#2c4485;--acc-soft:#eaeef8;
  --canvas:#e7e7e9;
  --ink:#26272c;--ink-2:#5d5f67;--ink-3:#8f9199;--ink-4:#bfc1c7;
  --frame:#f3f3f4;--card:#ffffff;--card-soft:#f7f7f8;--line:#efeff1;
  --side-ink:#9b9ba4;--side-on:#35353b;
  --sh:0 14px 44px rgba(30,30,45,.08);
  --sh-s:0 6px 22px rgba(30,30,45,.05);
}
html.saas-skin.w-v2 body{background:var(--canvas)}

/* MOST ZMIENNYCH — mini-czat Patryka (mira-minichat.jsx) i reużyte komponenty czatu (Bubble/InputBar
   z mira-shell/mira-chat) używają nazw --accent/--surface/--line z KLASYCZNEGO panelu. W ścieżce SaaS v3
   (Root → MiraSaasApp) app.jsx ich nie ustawia, więc mapujemy je na zmienne skóry. Dzięki temu ten sam
   komponent mini-czatu wygląda spójnie tu i u Patryka, bez forka. Działa dla obu wariantów (--acc różny). */
html.saas-skin{
  --accent:var(--acc);--accent-soft:var(--acc-soft);--accent-ink:var(--acc-dark);
  --surface:var(--card);--surface-2:var(--card-soft);
}

html.saas-skin *{box-sizing:border-box}
html.saas-skin, html.saas-skin body{margin:0;height:100%}
html.saas-skin body{font-family:var(--f);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55;font-size:13px;font-weight:400}
html.saas-skin button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
html.saas-skin h1, html.saas-skin h2, html.saas-skin h3{margin:0;font-weight:600}
html.saas-skin svg{stroke-width:1.7}

/* ---------- rama ---------- */
html.saas-skin .frame{max-width:1480px;height:calc(100vh - 72px);margin:36px auto;display:grid;
  grid-template-columns:var(--sidew) 1fr;transition:grid-template-columns .3s var(--ease);
  background:var(--frame);backdrop-filter:blur(34px) saturate(1.12);
  border:1.5px solid rgba(255,255,255,.9);border-radius:40px;overflow:hidden;
  box-shadow:0 40px 110px rgba(80,60,120,.13)}
html.saas-skin.w-v2 .frame{box-shadow:0 40px 110px rgba(25,25,40,.13)}
html.saas-skin .frame.mini{--sidew:88px}

/* ---------- sidebar (chowany) ---------- */
html.saas-skin .side{padding:30px 16px 22px;display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
/* nawigacja scrolluje przy niskim viewporcie (laptop/projektor); logo + user/Wyloguj przypięte.
   Pasek przewijania ukryty dla premium look (treść i tak dostępna gestem/kółkiem). */
html.saas-skin .side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
html.saas-skin .side-nav::-webkit-scrollbar{width:0;height:0}
html.saas-skin.w-v2 .side{background:#28282d;margin:14px;border-radius:28px;padding:26px 14px 18px}
html.saas-skin .logo{display:flex;align-items:center;gap:11px;padding:0 10px 2px}
html.saas-skin .logo-orb{width:32px;height:32px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#fff,var(--acc-2) 46%,var(--acc-dark));
  box-shadow:0 8px 22px rgba(120,90,210,.35);animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
html.saas-skin .logo b{font-family:'Space Grotesk',var(--f);font-size:19px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
html.saas-skin.w-v2 .logo b{color:#fff}
html.saas-skin .fold{margin-left:auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3);flex:none}
html.saas-skin .fold:hover{background:rgba(255,255,255,.5);color:var(--ink)}
html.saas-skin.w-v2 .fold:hover{background:var(--side-on);color:#fff}
html.saas-skin .fold svg{width:15px;height:15px;transition:transform .3s var(--ease)}
html.saas-skin .mini .fold svg{transform:rotate(180deg)}
html.saas-skin .side-sec{font-size:9.5px;font-weight:500;letter-spacing:.22em;color:var(--ink-4);padding:24px 12px 8px;white-space:nowrap}
html.saas-skin.w-v2 .side-sec{color:#6b6b74}
html.saas-skin .mini .side-sec{visibility:hidden;height:14px;padding-top:18px}
html.saas-skin .sitem{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
  font-size:13px;font-weight:500;color:var(--side-ink);transition:all .16s var(--ease);text-align:left;width:100%;white-space:nowrap}
html.saas-skin .sitem:hover{color:var(--ink);background:rgba(255,255,255,.5)}
html.saas-skin.w-v2 .sitem:hover{color:#fff;background:var(--side-on)}
html.saas-skin .sitem.on{background:var(--side-on);color:var(--ink);box-shadow:var(--sh-s);font-weight:500}
html.saas-skin.w-v2 .sitem.on{color:#fff;box-shadow:none}
html.saas-skin .sitem.on svg{color:var(--acc)}
html.saas-skin .sitem svg{width:18px;height:18px;flex:none}
html.saas-skin .sitem .n{margin-left:auto;font-size:10px;font-weight:600;background:var(--acc);color:#fff;border-radius:var(--pill);padding:1px 7px}
html.saas-skin .mini .sitem{justify-content:center;padding:12px 0}
html.saas-skin .mini .sitem .t, html.saas-skin .mini .sitem .n, html.saas-skin .mini .logo b, html.saas-skin .mini .user .ut{display:none}
html.saas-skin .side-bottom{margin-top:auto}
html.saas-skin .user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.6)}
html.saas-skin.w-v2 .user{background:var(--side-on)}
html.saas-skin .mini .user{justify-content:center;padding:8px}
html.saas-skin .user-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--acc-dark),var(--acc-2));
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
html.saas-skin .user b{font-size:12.5px;font-weight:600;display:block;line-height:1.2;white-space:nowrap}
html.saas-skin.w-v2 .user b{color:#fff}
html.saas-skin .user i{font-size:10.5px;color:var(--ink-3);font-style:normal;white-space:nowrap}
html.saas-skin.w-v2 .user i{color:#8e8e97}

/* ---------- main ---------- */
html.saas-skin .main{overflow-y:auto;padding:36px 42px 60px;min-width:0;background-image:none}
html.saas-skin.w-v2 .main{
  background-image:radial-gradient(55% 34% at 78% 0%, rgba(100,130,200,.06), transparent 70%),
                   radial-gradient(40% 30% at 6% 100%, rgba(140,160,210,.05), transparent 70%)}
html.saas-skin .mtop{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px}
html.saas-skin .h1{font-size:40px;font-weight:600;letter-spacing:-.025em;line-height:1.05}
html.saas-skin .h1 small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;letter-spacing:0;margin-top:8px}
html.saas-skin .mtop-r{margin-left:auto;display:flex;align-items:center;gap:10px;padding-top:4px}
html.saas-skin .search{display:flex;align-items:center;gap:9px;background:var(--card);border-radius:var(--pill);
  padding:10px 17px;min-width:190px;color:var(--ink-3);font-size:12.5px;font-weight:400;box-shadow:var(--sh-s)}
html.saas-skin .search svg{width:14px;height:14px}
html.saas-skin .icbtn{width:40px;height:40px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--ink-2);
  transition:transform .15s var(--spring);box-shadow:var(--sh-s)}
html.saas-skin .icbtn:hover{transform:translateY(-2px)}
html.saas-skin .icbtn svg{width:16px;height:16px}
html.saas-skin .vswitch{display:flex;gap:2px;background:var(--card);border-radius:var(--pill);padding:3px;box-shadow:var(--sh-s)}
html.saas-skin .vswitch button{font-size:11px;font-weight:500;padding:7px 13px;border-radius:var(--pill);color:var(--ink-3)}
html.saas-skin .vswitch button.on{background:var(--ink);color:#fff}

/* ROZMOWA: duży czysty czat (Kasia 2026-07-15). Generyczne chipy-podpowiedzi trybu solo ukryte —
   Kasia nie chce „dodatków". Pod czatem pasek: info o pliku + „Ustaw automatyzację". */
html.saas-skin .start-solo-chip{display:none!important}
/* czat wypełnia wysokość, pasek automatyzacji = stopka na dole (zawsze widoczna, nie spycha jej pusty
   stan czatu centrujący input). */
html.saas-skin .saas-chat-wrap{display:flex;flex-direction:column;height:100%;min-height:0;position:relative}
html.saas-skin .slash-ov{position:fixed;inset:0;z-index:29}
html.saas-skin .sca-btn.on{color:var(--acc-dark);border-color:var(--acc-soft);background:var(--acc-soft)}
/* paleta komend (slash /) — pływa nad paskiem przycisków, blisko pola czatu */
@keyframes slashIn{from{opacity:0}to{opacity:1}}
html.saas-skin .slash-pal{position:absolute;left:50%;transform:translateX(-50%);bottom:62px;z-index:30;
  width:min(540px,92%);background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 50px rgba(30,30,45,.16);padding:7px;max-height:min(40vh,300px);overflow-y:auto;
  animation:slashIn .14s ease both}
html.saas-skin .slash-pal-h{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);padding:8px 12px 6px}
html.saas-skin .slash-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 12px;border-radius:11px;transition:background .12s}
html.saas-skin .slash-item:hover{background:var(--acc-soft)}
html.saas-skin .slash-ic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-dark)}
html.saas-skin .slash-txt{display:flex;flex-direction:column;min-width:0}
html.saas-skin .slash-txt b{font-size:13px;font-weight:600;color:var(--ink);font-family:var(--f)}
html.saas-skin .slash-txt i{font-size:11.5px;font-style:normal;color:var(--ink-3)}
html.saas-skin .saas-chat-wrap .rozmowy{flex:1 1 auto;min-height:0}
/* pusty stan czatu: WYŻEJ (Kasia 2026-07-15 r.2) — powitanie+pole w górnej części, nie wyśrodkowane
   pionowo. min-height:auto (nie wymusza 460px), wyrównanie do góry z oddechem od paska. */
html.saas-skin .saas-chat-wrap .start-intro-solo{min-height:auto;justify-content:flex-start;padding-top:6vh}
html.saas-skin .saas-chat-actions{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px auto 0;max-width:760px}
html.saas-skin .sca-btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--card);border:1px solid var(--line);padding:8px 15px;border-radius:var(--pill);box-shadow:var(--sh-s);transition:transform .15s var(--ease),box-shadow .15s,color .15s,border-color .15s}
html.saas-skin .sca-btn:hover{transform:translateY(-1px);color:var(--acc-dark);border-color:var(--acc-soft)}
html.saas-skin .sca-btn svg{color:var(--acc)}

/* PAMIĘĆ = dokument, nie „notatka z telefonu" (Kasia 2026-07-15). Renderowany markdown + czyste karty. */
html.saas-skin .mem{gap:18px}
html.saas-skin .mem-list{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-s);padding:10px}
html.saas-skin .mem-list-head{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);padding:10px 12px 8px}
html.saas-skin .mem-group-head,html.saas-skin .mem-item{border-radius:12px}
html.saas-skin .mem-item.on,html.saas-skin .mem-item:hover{background:var(--acc-soft)}
html.saas-skin .mem-item.on .mem-item-txt b{color:var(--acc-dark)}
html.saas-skin .mem-edit{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-s);padding:0;overflow:hidden}
html.saas-skin .mem-edit-head{padding:20px 28px 14px;border-bottom:1px solid var(--line)}
html.saas-skin .mem-title{font-size:19px;font-weight:600;color:var(--ink)}
html.saas-skin .mem-meta{font-size:11px;color:var(--ink-4)}
html.saas-skin .mem-doc{padding:22px 30px 34px;overflow-y:auto;font-size:14px;line-height:1.72;color:var(--ink-2)}
html.saas-skin .mem-doc>*:first-child{margin-top:0}
html.saas-skin .mem-doc h1,html.saas-skin .mem-doc h2,html.saas-skin .mem-doc h3{color:var(--ink);font-weight:600;line-height:1.3;margin:22px 0 8px}
html.saas-skin .mem-doc h1{font-size:20px}
html.saas-skin .mem-doc h2{font-size:16.5px}
html.saas-skin .mem-doc h3{font-size:14.5px}
html.saas-skin .mem-doc p{margin:0 0 12px}
html.saas-skin .mem-doc ul,html.saas-skin .mem-doc ol{margin:0 0 14px;padding-left:20px}
html.saas-skin .mem-doc li{margin:5px 0}
html.saas-skin .mem-doc strong{color:var(--ink);font-weight:600}
html.saas-skin .mem-doc code{background:var(--acc-soft);color:var(--acc-dark);padding:1px 6px;border-radius:6px;font-size:12.5px}
html.saas-skin .mem-doc hr{border:none;border-top:1px solid var(--line);margin:18px 0}
html.saas-skin .mem-doc a{color:var(--acc);text-decoration:none}
html.saas-skin .mem-doc blockquote{margin:0 0 12px;padding:2px 0 2px 14px;border-left:3px solid var(--acc-soft);color:var(--ink-3)}
html.saas-skin .mem-area{font-family:var(--f)!important;font-size:14px;line-height:1.7;color:var(--ink-2);padding:22px 30px;border:none;background:transparent;width:100%;resize:none}

/* LISTA ROZMÓW — wyrównanie kolorów (Kasia 2026-07-15 r.4): lawendowe karty gryzły się z czystym
   tłem. Panel biały, karty neutralne, aktywna = subtelny akcent (pasek + tekst), nie pełna lawenda. */
html.saas-skin .ses-list{background:transparent;border-right:1px solid var(--line)}
html.saas-skin .ses-item{border:1px solid transparent}
html.saas-skin .ses-item:hover{background:var(--card-soft)}
html.saas-skin .ses-item.on{background:var(--card-soft);border-color:var(--line);position:relative}
html.saas-skin .ses-item.on:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--acc)}
html.saas-skin .ses-item.on .ses-title{color:var(--acc-dark)}

/* MIRA BASIC — persony / umiejętności / system (stałe w każdej Mirze, Kasia 2026-07-15 r.2) */
html.saas-skin .mb-badge{align-self:center;font-size:11px;font-weight:600;color:var(--acc-dark);background:var(--acc-soft);padding:7px 14px;border-radius:var(--pill);white-space:nowrap}
html.saas-skin .mb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1080px){html.saas-skin .mb-grid{grid-template-columns:repeat(2,1fr)}}
html.saas-skin .mb-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--sh-s);display:flex;flex-direction:column;gap:10px}
html.saas-skin .mb-card-top{display:flex;align-items:center;gap:12px}
html.saas-skin .mb-av{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;font-weight:600;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--acc-2),var(--acc-dark))}
html.saas-skin .mb-id b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
html.saas-skin .mb-id i{font-size:12px;font-style:normal;color:var(--ink-3)}
html.saas-skin .mb-desc{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0}
html.saas-skin .mb-cmd{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
html.saas-skin .mb-cmd-l{font-size:11px;color:var(--ink-4)}
html.saas-skin .mb-cmd code{font-size:12px;color:var(--acc-dark);background:var(--acc-soft);padding:4px 10px;border-radius:8px;font-family:var(--f)}
html.saas-skin .mb-skill{gap:8px}
html.saas-skin .mb-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-dark)}
html.saas-skin .mb-skill b{font-size:14px;font-weight:600;color:var(--ink)}
html.saas-skin .mb-skill i{font-size:12.5px;font-style:normal;line-height:1.55;color:var(--ink-3)}
html.saas-skin .mb-note{font-size:12.5px;line-height:1.6;color:var(--ink-3);background:var(--card-soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:14px}
html.saas-skin .mb-note b{color:var(--ink-2)}
html.saas-skin .mb-addfn{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--acc-soft);border-radius:18px;padding:20px 22px;margin-top:24px}
html.saas-skin .mb-addfn>div b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
html.saas-skin .mb-addfn>div i{font-size:12.5px;font-style:normal;color:var(--ink-2);line-height:1.55;max-width:540px;display:block;margin-top:3px}
html.saas-skin .mb-auto{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px;box-shadow:var(--sh-s)}
html.saas-skin .mb-auto-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-4)}
html.saas-skin .mb-auto-dot.on{background:var(--up);box-shadow:0 0 0 4px color-mix(in srgb,var(--up) 18%,transparent)}
html.saas-skin .mb-auto-b{flex:1;min-width:0}
html.saas-skin .mb-auto-b b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
html.saas-skin .mb-auto-b i{font-size:12.5px;font-style:normal;color:var(--ink-3)}
html.saas-skin .mb-auto-when{font-size:11.5px;color:var(--ink-4);white-space:nowrap}
html.saas-skin .mb-auto-st{font-size:11px;font-weight:600;color:var(--up);background:color-mix(in srgb,var(--up) 12%,transparent);padding:4px 11px;border-radius:var(--pill);white-space:nowrap}

html.saas-skin .chips{display:flex;gap:8px;margin-bottom:20px}
html.saas-skin .fchip{font-size:12px;font-weight:500;padding:9px 19px;border-radius:var(--pill);background:var(--card);
  color:var(--ink-2);box-shadow:var(--sh-s);transition:all .15s}
html.saas-skin .fchip.on{background:var(--ink);color:#fff}
html.saas-skin .fchip:hover:not(.on){transform:translateY(-1px)}

/* ---------- galeria ---------- */
html.saas-skin .gal{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:18px}
html.saas-skin .art{position:relative;border-radius:26px;overflow:hidden;min-height:148px;cursor:pointer;
  box-shadow:var(--sh);transition:transform .2s var(--ease);border:1.5px solid rgba(255,255,255,.95)}
html.saas-skin .art:hover{transform:translateY(-3px)}
html.saas-skin .art .lab{position:absolute;left:22px;bottom:17px;z-index:2}
html.saas-skin .art .lab i{display:block;font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(60,50,85,.5);font-style:normal;margin-bottom:2px}
html.saas-skin .art .lab b{font-size:20px;font-weight:600;letter-spacing:-.015em;color:#453c5c}
html.saas-skin .art .go{position:absolute;right:18px;bottom:16px;width:46px;height:46px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(90,70,130,.18);transition:transform .18s var(--spring);z-index:2}
html.saas-skin .art .go:hover{transform:scale(1.1)}
html.saas-skin .art .go svg{width:17px;height:17px;color:var(--acc-dark)}
html.saas-skin .art .mini2{position:absolute;right:16px;bottom:14px;width:36px;height:36px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 8px 20px rgba(90,70,130,.16);z-index:2}
html.saas-skin .art .mini2 svg{width:13px;height:13px;color:var(--acc-dark)}
html.saas-skin .a-hero{min-height:308px;background:
  radial-gradient(55% 70% at 78% 16%, #d3bcf7, transparent 62%),
  radial-gradient(50% 62% at 12% 84%, #f8d2e2, transparent 60%),
  radial-gradient(46% 55% at 50% 50%, #ecdffa, transparent 72%),
  linear-gradient(130deg,#f7f0fc,#fdf1f5)}
html.saas-skin .a-hero:after{content:"";position:absolute;inset:0;
  background:radial-gradient(42% 38% at 62% 32%, rgba(255,255,255,.8), transparent 70%);filter:blur(5px);
  animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-40px,18px) scale(1.08)}}

/* przeciąganie okienek */
html.saas-skin [draggable="true"]{cursor:grab}
html.saas-skin .dragging{opacity:.45;transform:scale(.98)}
html.saas-skin .dropzone{outline:2px dashed var(--acc-2);outline-offset:4px;border-radius:26px}
html.saas-skin .a-focus{background:
  radial-gradient(60% 75% at 25% 25%, #f8dfcb, transparent 65%),
  radial-gradient(55% 60% at 80% 80%, #efdcf4, transparent 62%),
  linear-gradient(130deg,#fcf3ea,#f8ecf4)}
html.saas-skin .a-rytual{background:
  radial-gradient(60% 75% at 75% 20%, #d5e8dd, transparent 62%),
  radial-gradient(50% 65% at 20% 85%, #dcd5f2, transparent 62%),
  linear-gradient(130deg,#f0f7f1,#efecf9)}
html.saas-skin.w-v2 .a-hero{background:
  radial-gradient(55% 70% at 78% 16%, #b6c6ea, transparent 62%),
  radial-gradient(50% 62% at 12% 84%, #d3dcee, transparent 62%),
  linear-gradient(130deg,#f0f3f9,#eaeef6)}
html.saas-skin.w-v2 .a-focus{background:
  radial-gradient(60% 75% at 25% 25%, #ccd4e1, transparent 65%),
  radial-gradient(55% 60% at 80% 80%, #bdcbe7, transparent 62%),
  linear-gradient(130deg,#f0f3f7,#ebeff5)}
html.saas-skin.w-v2 .a-rytual{background:
  radial-gradient(60% 75% at 75% 20%, #cadcd3, transparent 62%),
  radial-gradient(50% 65% at 20% 85%, #becae5, transparent 62%),
  linear-gradient(130deg,#eef4f0,#eaeef5)}
html.saas-skin.w-v2 .art .lab b{color:#2e3442}
html.saas-skin.w-v2 .art .lab i{color:rgba(45,52,70,.45)}
html.saas-skin .gal-side{display:flex;flex-direction:column;gap:18px}
html.saas-skin .gal-side .art{flex:1}

/* malarski nagłówek karty — vibe strony „Dziś" w całym panelu */
html.saas-skin .art-head{position:relative;min-height:92px;margin:-22px -24px 18px;overflow:hidden;border-radius:24px 24px 0 0}
html.saas-skin .art-head .lab{position:absolute;left:22px;bottom:12px}
html.saas-skin .art-head .lab i{display:block;font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(60,50,85,.5);font-style:normal;margin-bottom:1px}
html.saas-skin .art-head .lab b{font-size:17px;font-weight:600;letter-spacing:-.01em;color:#453c5c}
html.saas-skin.w-v2 .art-head .lab b{color:#2e3442}
html.saas-skin.w-v2 .art-head .lab i{color:rgba(45,52,70,.45)}

/* ---------- karty ---------- */
html.saas-skin .row3{display:grid;grid-template-columns:1.25fr 1fr .95fr;gap:18px;align-items:start}
html.saas-skin .card{background:var(--card);border-radius:24px;padding:22px 24px;box-shadow:var(--sh);
  animation:rise .5s var(--ease-out) both;min-width:0}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.saas-skin .chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
html.saas-skin .chead h2{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
html.saas-skin .chead .sub{font-size:10px;font-weight:500;color:var(--ink-4);letter-spacing:.14em;text-transform:uppercase}
html.saas-skin .trow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer}
html.saas-skin .trow:last-child{border:none;padding-bottom:2px}
html.saas-skin .tchk{width:21px;height:21px;border-radius:8px;border:1.5px solid var(--ink-4);flex:none;display:grid;place-items:center;
  transition:all .2s var(--spring);background:#fff}
html.saas-skin .tchk svg{width:11px;height:11px;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.4);transition:all .2s var(--spring)}
html.saas-skin .trow.done .tchk{background:var(--acc);border-color:var(--acc)}
html.saas-skin .trow.done .tchk svg{opacity:1;transform:scale(1)}
html.saas-skin .trow b{font-size:12.5px;font-weight:500;flex:1;min-width:0;color:var(--ink)}
html.saas-skin .trow.done b{color:var(--ink-4);text-decoration:line-through}
html.saas-skin .trow .when{font-size:10.5px;font-weight:500;color:var(--ink-4)}
html.saas-skin .pbar{height:7px;border-radius:var(--pill);background:var(--card-soft);overflow:hidden;margin:2px 0 6px}
html.saas-skin .pbar i{display:block;height:100%;width:33%;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--acc-2),var(--acc));transition:width .6s var(--ease-out)}
html.saas-skin .pnum{font-size:11px;font-weight:400;color:var(--ink-3);margin-bottom:8px}
html.saas-skin .stats-col{display:flex;flex-direction:column;gap:18px}
html.saas-skin .ringc{display:flex;align-items:center;gap:14px}
html.saas-skin .ringc .big{font-size:21px;font-weight:600;letter-spacing:-.02em}
html.saas-skin .ringc .lab{font-size:11px;font-weight:400;color:var(--ink-3)}
html.saas-skin .dark{background:#2b2833;color:#fff}
html.saas-skin.w-v2 .dark{background:#28282d}
html.saas-skin .dark .chead .sub{color:#928d9e}
html.saas-skin .dark .dt-v{font-size:25px;font-weight:600;letter-spacing:-.02em}
html.saas-skin .dark .dt-s{font-size:11px;font-weight:400;color:#a8ecc6;margin-top:2px}

/* ---------- ROZMOWA Z MIRĄ (główny widok) ---------- */
html.saas-skin .talk{max-width:680px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100vh - 300px)}
html.saas-skin .talk-hero{text-align:center;padding:26px 20px 6px}
html.saas-skin .talk-orbwrap{position:relative;width:104px;height:104px;margin:0 auto 16px}
html.saas-skin .talk-orbwrap:before{content:"";position:absolute;inset:-18px;border-radius:50%;
  background:radial-gradient(circle, var(--acc-soft) 1.5px, transparent 1.8px);background-size:12px 12px;opacity:.9}
html.saas-skin .talk-orb{position:absolute;inset:14px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,var(--acc-2) 46%,var(--acc-dark));
  box-shadow:0 20px 50px rgba(120,90,210,.35);animation:breathe 4.8s ease-in-out infinite}
html.saas-skin .talk-hi{font-size:26px;font-weight:600;letter-spacing:-.02em}
html.saas-skin .talk-hi .soft{display:block;color:var(--ink-3);font-weight:400;font-size:15px;margin-top:2px}
html.saas-skin .talk-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;padding:20px 0 6px}
html.saas-skin .tchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--card);border-radius:16px;padding:12px 16px;box-shadow:var(--sh-s);transition:all .18s var(--ease)}
html.saas-skin .tchip:hover{transform:translateY(-2px)}
html.saas-skin .tchip b{font-size:12.5px;font-weight:600}
html.saas-skin .tchip i{font-size:11px;color:var(--ink-3);font-style:normal}
html.saas-skin .talk-feed{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 4px}
html.saas-skin .cmsg{max-width:82%;font-size:13px;font-weight:400;line-height:1.55;padding:12px 16px;border-radius:16px}
html.saas-skin .cmsg.me{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:5px}
html.saas-skin .cmsg.mira{align-self:flex-start;background:var(--card);border-bottom-left-radius:5px;box-shadow:var(--sh-s)}
html.saas-skin .talk-in{position:sticky;bottom:8px;display:flex;align-items:center;gap:8px;background:var(--card);
  border-radius:var(--pill);padding:7px 7px 7px 20px;box-shadow:0 16px 46px rgba(90,70,130,.14)}
html.saas-skin .talk-in input{flex:1;border:none;outline:none;background:none;font-family:var(--f);font-size:13.5px;font-weight:400;color:var(--ink);min-width:0}
html.saas-skin .talk-in input::placeholder{color:var(--ink-4)}
html.saas-skin .micbtn{width:40px;height:40px;border-radius:50%;background:var(--card-soft);color:var(--ink-2);display:grid;place-items:center;flex:none;
  transition:all .15s var(--spring)}
html.saas-skin .micbtn:hover{transform:scale(1.06);color:var(--acc-dark);background:var(--acc-soft)}
html.saas-skin .micbtn.rec{background:var(--hot);color:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,112,95,.4)}50%{box-shadow:0 0 0 9px rgba(224,112,95,0)}}
html.saas-skin .micbtn svg{width:16px;height:16px}
html.saas-skin .sendbtn{width:40px;height:40px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;flex:none;
  transition:transform .15s var(--spring)}
html.saas-skin .sendbtn:hover{transform:scale(1.07)}
html.saas-skin .sendbtn svg{width:15px;height:15px}

/* ---------- MINI-CZAT (chowany, róg) ---------- */
html.saas-skin .miniwrap{position:fixed;right:26px;bottom:24px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
html.saas-skin .minichat{width:316px;background:var(--card);border-radius:22px;box-shadow:0 24px 70px rgba(70,50,110,.22);
  overflow:hidden;display:none;flex-direction:column;border:1.5px solid rgba(255,255,255,.9)}
html.saas-skin .minichat.on{display:flex;animation:rise .25s var(--ease-out) both}
html.saas-skin .mc-h{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line)}
html.saas-skin .mc-orb{width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,var(--acc-2) 46%,var(--acc-dark))}
html.saas-skin .mc-h b{font-size:12.5px;font-weight:600}
html.saas-skin .mc-h i{font-size:10.5px;color:var(--up);font-style:normal;font-weight:500}
html.saas-skin .mc-x{margin-left:auto;color:var(--ink-3);padding:2px 8px;border-radius:8px;font-size:16px}
html.saas-skin .mc-x:hover{background:var(--card-soft)}
html.saas-skin .mc-feed{max-height:240px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
html.saas-skin .mc-feed .cmsg{font-size:12px;padding:9px 12px;max-width:90%}
html.saas-skin .mc-in{display:flex;align-items:center;gap:6px;padding:8px;border-top:1px solid var(--line)}
html.saas-skin .mc-in input{flex:1;border:none;outline:none;background:var(--card-soft);border-radius:var(--pill);
  padding:9px 14px;font-family:var(--f);font-size:12px;color:var(--ink);min-width:0}
html.saas-skin .mc-in .micbtn, html.saas-skin .mc-in .sendbtn{width:34px;height:34px}
html.saas-skin .mc-in .micbtn svg, html.saas-skin .mc-in .sendbtn svg{width:13px;height:13px}
html.saas-skin .fab{width:56px;height:56px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 34% 30%,#fff,var(--acc-2) 46%,var(--acc-dark));
  box-shadow:0 16px 40px rgba(110,80,200,.4);transition:transform .18s var(--spring);animation:breathe 4.5s ease-in-out infinite}
html.saas-skin .fab:hover{transform:scale(1.08)}
html.saas-skin .fab svg{position:absolute;inset:0;margin:auto;width:19px;height:19px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}

/* ---------- Klienci — tabela (lżejsza) ---------- */
html.saas-skin .tbl-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
html.saas-skin .tbl-tabs{display:flex;gap:2px}
html.saas-skin .ttab{font-size:12.5px;font-weight:500;color:var(--ink-3);padding:8px 13px;border-bottom:2px solid transparent}
html.saas-skin .ttab.on{color:var(--acc-dark);border-bottom-color:var(--acc)}
html.saas-skin .newbtn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;
  background:var(--card);border-radius:14px;padding:10px 16px;box-shadow:var(--sh-s)}
html.saas-skin .newbtn:hover{color:var(--acc-dark)}
html.saas-skin .tbl{background:var(--card);border-radius:24px;overflow:hidden;box-shadow:var(--sh)}
html.saas-skin .tsec{display:flex;align-items:center;gap:9px;padding:11px 20px;background:var(--card-soft);
  border-top:1px solid var(--line);font-size:12.5px;font-weight:600}
html.saas-skin .tsec:first-child{border-top:none}
html.saas-skin .tsec .tdot{width:8px;height:8px;border-radius:3px;flex:none}
html.saas-skin .tsec .cnt{font-size:10px;font-weight:500;color:var(--ink-3);background:#fff;border-radius:var(--pill);padding:1px 8px}
html.saas-skin .tsec .sum{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--ink-3)}
html.saas-skin .thd{display:grid;grid-template-columns:2fr 1fr 1.6fr 1fr .9fr;gap:10px;padding:9px 20px;
  font-size:10px;font-weight:500;color:var(--ink-4);letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--line)}
html.saas-skin .tr{display:grid;grid-template-columns:2fr 1fr 1.6fr 1fr .9fr;gap:10px;padding:13px 20px;align-items:center;
  border-top:1px solid var(--line);cursor:pointer;transition:background .12s;position:relative}
html.saas-skin .tr:hover{background:var(--card-soft)}
html.saas-skin .tr.hl{background:var(--acc-soft)}
html.saas-skin .tr.hl:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
html.saas-skin .tr .who{display:flex;align-items:center;gap:10px;min-width:0}
html.saas-skin .tr .av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10.5px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--acc-dark),var(--acc-2))}
html.saas-skin .tr .who b{font-size:13px;font-weight:600;display:block;line-height:1.2}
html.saas-skin .tr .who i{font-size:10.5px;color:var(--ink-3);font-style:normal;font-weight:400}
html.saas-skin .tr .val{font-size:13px;font-weight:600}
html.saas-skin .tr .next{font-size:12px;font-weight:400;color:var(--ink-2)}
html.saas-skin .tr .due{font-size:12px;font-weight:400;color:var(--ink-3)}
html.saas-skin .pchip{font-size:9.5px;font-weight:600;letter-spacing:.06em;padding:5px 11px;border-radius:var(--pill);
  text-transform:uppercase;justify-self:start}
html.saas-skin .pchip.hot{background:#fdece9;color:var(--hot)}
html.saas-skin .pchip.mid{background:#fdf4e3;color:#b98a24}
html.saas-skin .pchip.low{background:#edeffb;color:#6572cc}
html.saas-skin .pchip.mira{background:var(--acc-soft);color:var(--acc-dark)}

/* tablica: osobne karty przenoszone między kolumnami */
html.saas-skin .dboard{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
html.saas-skin .dcol{background:rgba(255,255,255,.42);border-radius:24px;padding:14px;min-height:120px}
html.saas-skin.w-v2 .dcol{background:rgba(255,255,255,.55)}
html.saas-skin .dcol-h{display:flex;align-items:center;gap:8px;padding:4px 8px 12px}
html.saas-skin .dcol-h .bdot2{width:8px;height:8px;border-radius:50%;flex:none}
html.saas-skin .dcol-h b{font-size:12.5px;font-weight:600}
html.saas-skin .dcol-h .n2{margin-left:auto;font-size:10.5px;font-weight:500;color:var(--ink-3);background:var(--card);border-radius:var(--pill);padding:1px 8px}
html.saas-skin .dcol-body{min-height:60px}
html.saas-skin .dcol-body.over{outline:2px dashed var(--acc-2);outline-offset:4px;border-radius:18px}
html.saas-skin .titem{background:var(--card);border-radius:18px;padding:13px 14px;box-shadow:var(--sh-s);margin-bottom:11px;cursor:grab;
  transition:transform .15s var(--ease),box-shadow .15s}
html.saas-skin .titem:hover{transform:translateY(-2px);box-shadow:var(--sh)}
html.saas-skin .titem:last-child{margin-bottom:0}
html.saas-skin .titem .trowi{display:flex;gap:12px;align-items:flex-start}
/* okładka-media dla kart treści (miejsce na zdjęcie) */
html.saas-skin .tcover{height:104px;border-radius:14px;margin-bottom:11px;position:relative;overflow:hidden;display:grid;place-items:center}
html.saas-skin .tcover .ph{display:flex;flex-direction:column;align-items:center;gap:5px;color:rgba(70,55,95,.55)}
html.saas-skin .tcover .ph svg{width:22px;height:22px}
html.saas-skin .tcover .ph span{font-size:10px;font-weight:500}
html.saas-skin .tcover .play{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 8px 18px rgba(60,40,90,.22)}
html.saas-skin .tcover .play svg{width:15px;height:15px;color:var(--acc-dark)}
html.saas-skin .tcover .tag{position:absolute;top:9px;left:9px;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:rgba(45,35,60,.42);backdrop-filter:blur(4px);padding:3px 9px;border-radius:var(--pill)}
html.saas-skin .tcover .stat{position:absolute;bottom:9px;right:9px;font-size:10px;font-weight:600;color:#fff;background:rgba(45,35,60,.42);
  backdrop-filter:blur(4px);padding:3px 9px;border-radius:var(--pill)}
html.saas-skin .thumb{width:42px;height:42px;border-radius:13px;flex:none}
html.saas-skin .th-1{background:radial-gradient(circle at 30% 30%,#f8ddc6,#eecfe9 75%)}
html.saas-skin .th-2{background:radial-gradient(circle at 30% 30%,#e3d3f9,#f4cede 75%)}
html.saas-skin .th-3{background:radial-gradient(circle at 30% 30%,#d7ead9,#cfd1f0 75%)}
html.saas-skin .th-4{background:radial-gradient(circle at 30% 30%,#cfe0f2,#dfd7f2 75%)}
html.saas-skin .titem b{font-size:12.5px;font-weight:600;display:block;line-height:1.35}
html.saas-skin .titem i{font-size:11px;color:var(--ink-3);font-style:normal;font-weight:400}
html.saas-skin .titem .tacts{display:flex;gap:7px;margin-top:11px}
html.saas-skin .titem .abtn{padding:7px 14px;font-size:11px}
html.saas-skin .titem .kchip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;color:var(--ink-2);
  background:var(--card-soft);border-radius:var(--pill);padding:3px 10px 3px 4px;margin-top:10px}
html.saas-skin .titem .kchip .ka{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--acc-dark),var(--acc-2))}
html.saas-skin .titem .by{font-size:10px;font-weight:500;color:var(--acc-dark);display:inline-flex;align-items:center;gap:5px;margin-top:10px;margin-left:8px}
html.saas-skin .titem .by .bo{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--acc-2) 50%,var(--acc-dark))}

/* karty leadów w pipeline sprzedaży */
html.saas-skin .dcol-sum{font-size:11px;font-weight:600;color:var(--acc-dark);padding:0 8px 10px}
html.saas-skin .titem.lead .lead-top{display:flex;align-items:flex-start;gap:8px}
html.saas-skin .titem.lead .lead-av{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:10px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--acc-dark),var(--acc-2))}
html.saas-skin .titem.lead .lead-nm{flex:1;min-width:0}
html.saas-skin .titem.lead .lead-nm b{font-size:12.5px;font-weight:600;display:block;line-height:1.2}
html.saas-skin .titem.lead .lead-nm i{font-size:10.5px;color:var(--ink-3);font-style:normal}
html.saas-skin .titem.lead .lead-val{font-size:12.5px;font-weight:600;color:var(--acc-dark);white-space:nowrap}
html.saas-skin .titem.lead .lead-next{font-size:10.5px;color:var(--ink-3);margin-top:8px}
html.saas-skin .titem.lead .lead-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}

/* oś czasu klientów */
html.saas-skin .osx{position:relative;padding-left:6px}
html.saas-skin .osx-day{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);padding:16px 0 8px 34px}
html.saas-skin .osx-day:first-child{padding-top:2px}
html.saas-skin .osx-row{position:relative;display:flex;gap:13px;padding:9px 0 9px 34px;align-items:flex-start}
html.saas-skin .osx-row:before{content:"";position:absolute;left:13px;top:0;bottom:0;width:1.5px;background:var(--line)}
html.saas-skin .osx-row:after{content:"";position:absolute;left:9px;top:15px;width:9px;height:9px;border-radius:50%;
  background:var(--card);border:2.5px solid var(--acc-2)}
html.saas-skin .osx-row.mira:after{background:var(--acc);border-color:var(--acc-soft)}
html.saas-skin .osx-t{font-size:10.5px;font-weight:500;color:var(--ink-4);min-width:44px;padding-top:2px;font-variant-numeric:tabular-nums}
html.saas-skin .osx-b{flex:1;min-width:0}
html.saas-skin .osx-b b{font-size:12.5px;font-weight:600;display:block}
html.saas-skin .osx-b i{font-size:11px;color:var(--ink-3);font-style:normal;font-weight:400}

/* Oś dnia — żywa oś PIONOWA (spine + kropki + znacznik TERAZ z zegara) */
html.saas-skin .osd{position:relative;height:326px;margin-top:2px}
html.saas-skin .osd:before{content:"";position:absolute;left:57px;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(var(--line-2,var(--line)),color-mix(in srgb,var(--acc) 24%,transparent));z-index:0}
html.saas-skin .osd-hour{position:absolute;left:0;width:40px;text-align:right}
html.saas-skin .osd-hour span{font-size:10px;font-weight:500;color:var(--ink-4);font-variant-numeric:tabular-nums}
html.saas-skin .osd-ev{position:absolute;left:52px;right:0;display:flex;gap:12px;align-items:flex-start;z-index:2}
html.saas-skin .osd-dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:2px;background:var(--card);border:2.5px solid var(--acc-2);box-shadow:0 0 0 3px var(--card)}
html.saas-skin .osd-ev.past{opacity:.42}
html.saas-skin .osd-ev.past .osd-dot{border-color:var(--ink-4)}
html.saas-skin .osd-ev.now .osd-dot{background:var(--acc);border-color:var(--acc);box-shadow:0 0 0 3px var(--card),0 0 0 6px color-mix(in srgb,var(--acc) 20%,transparent)}
html.saas-skin .osd-b b{font-size:12.5px;font-weight:600;display:block;line-height:1.3}
html.saas-skin .osd-b i{font-size:10.5px;color:var(--ink-3);font-style:normal;font-weight:400}
html.saas-skin .osd-ev.now .osd-b b{color:var(--acc-dark)}
html.saas-skin .osd-block{position:absolute;left:48px;right:0;border-radius:12px;background:color-mix(in srgb,var(--acc) 8%,transparent);z-index:1}
html.saas-skin .osd-now{position:absolute;left:44px;right:-4px;z-index:3;display:flex;align-items:center;gap:6px;transition:top .8s var(--ease-out);pointer-events:none}
html.saas-skin .osd-now .lab{font-size:10px;font-weight:600;color:#fff;background:var(--hot);padding:2px 7px;border-radius:var(--pill);flex:none;min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
html.saas-skin .osd-now .ln{flex:1;border-top:2px solid var(--hot);opacity:.6}
html.saas-skin .statsrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;max-width:520px}

/* Kalendarz tygodnia — sync z Google Calendar */
html.saas-skin .wk{background:var(--card);border-radius:24px;box-shadow:var(--sh);overflow:hidden;margin-top:18px}
html.saas-skin .wk-top{display:flex;align-items:center;gap:12px;padding:18px 22px 4px;flex-wrap:wrap}
html.saas-skin .wk-top h2{font-size:15px;font-weight:600}
html.saas-skin .wk-gcal{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;color:var(--up);
  background:color-mix(in srgb,var(--up) 12%,transparent);padding:4px 11px;border-radius:var(--pill)}
html.saas-skin .wk-gcal i{width:7px;height:7px;border-radius:50%;background:var(--up)}
html.saas-skin .wk-legend{margin-left:auto;display:flex;gap:14px;font-size:10.5px;color:var(--ink-3)}
html.saas-skin .wk-legend span{display:inline-flex;align-items:center;gap:6px}
html.saas-skin .wk-legend i{width:9px;height:9px;border-radius:3px}
html.saas-skin .wk-days{display:grid;grid-template-columns:42px repeat(7,1fr);padding:12px 18px 0}
html.saas-skin .wk-dh{text-align:center;padding-bottom:8px}
html.saas-skin .wk-dh b{font-size:11px;font-weight:600;color:var(--ink-2);display:block}
html.saas-skin .wk-dh i{font-size:13px;font-weight:600;font-style:normal;color:var(--ink-3)}
html.saas-skin .wk-dh.today b{color:var(--acc-dark)}
html.saas-skin .wk-dh.today i{color:#fff;background:var(--acc);width:24px;height:24px;line-height:24px;border-radius:50%;display:inline-block;margin-top:2px}
html.saas-skin .wk-dh.we b, html.saas-skin .wk-dh.we i{color:var(--ink-4)}
html.saas-skin .wk-body{display:grid;grid-template-columns:42px repeat(7,1fr);padding:0 18px 16px;position:relative}
html.saas-skin .wk-times{position:relative}
html.saas-skin .wk-times span{position:absolute;right:8px;font-size:9.5px;color:var(--ink-4);transform:translateY(-6px);font-variant-numeric:tabular-nums}
html.saas-skin .wk-col{position:relative;border-left:1px solid var(--line)}
html.saas-skin .wk-col.today{background:color-mix(in srgb,var(--acc) 4%,transparent)}
html.saas-skin .wk-col.we{background:color-mix(in srgb,var(--ink-4) 4%,transparent)}
html.saas-skin .wk-line{position:absolute;left:42px;right:18px;border-top:1px solid var(--line-soft);pointer-events:none}
html.saas-skin .wk-ev{position:absolute;left:3px;right:3px;border-radius:9px;padding:4px 7px;overflow:hidden;cursor:pointer;
  border-left:3px solid;transition:transform .12s var(--ease),box-shadow .12s;min-height:16px}
html.saas-skin .wk-ev:hover{transform:scale(1.03);z-index:4;box-shadow:var(--sh)}
html.saas-skin .wk-ev b{font-weight:600;display:block;font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.saas-skin .wk-ev i{font-style:normal;font-size:9px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
html.saas-skin .wk-ev.work{background:color-mix(in srgb,var(--acc) 13%,var(--card));border-color:var(--acc);color:var(--acc-dark)}
html.saas-skin .wk-ev.korki{background:#e2f2f0;border-color:#38a89d;color:#1f6b64}
html.saas-skin .wk-ev.tresci{background:#fbeee2;border-color:#d98a5e;color:#9c5a34}
html.saas-skin .wk-ev.priv{background:#edecf1;border-color:#9a94a6;color:#5d5766}
html.saas-skin .wk-now{position:absolute;left:0;right:3px;height:0;border-top:2px solid var(--hot);z-index:5;pointer-events:none}
html.saas-skin .wk-now:before{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--hot)}

/* PAGE HERO — malarski nagłówek na każdej zakładce (vibe strony Dziś wszędzie) */
html.saas-skin .pagehero{position:relative;border-radius:26px;overflow:hidden;padding:26px 30px;margin-bottom:22px;min-height:120px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;box-shadow:var(--sh);
  border:1.5px solid rgba(255,255,255,.9);animation:rise .5s var(--ease-out) both}
html.saas-skin .pagehero:after{content:"";position:absolute;inset:0;background:radial-gradient(44% 62% at 80% 18%,rgba(255,255,255,.6),transparent 70%);pointer-events:none}
html.saas-skin .ph-in{position:relative;z-index:2;min-width:0}
html.saas-skin .ph-eyebrow{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(70,55,95,.55);display:flex;align-items:center;gap:7px}
html.saas-skin .ph-eyebrow .od{width:7px;height:7px;border-radius:50%;background:var(--up)}
html.saas-skin .ph-title{font-size:32px;font-weight:600;letter-spacing:-.025em;color:#3b3357;margin:5px 0 4px;line-height:1}
html.saas-skin .ph-sub{font-size:13px;color:rgba(70,55,95,.72);max-width:560px;margin:0}
html.saas-skin .ph-cta{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.85);color:var(--acc-dark);padding:11px 18px;border-radius:var(--pill);box-shadow:0 8px 22px rgba(90,70,130,.14)}
html.saas-skin .ph-cta:hover{transform:translateY(-2px)}
html.saas-skin.w-v2 .ph-title{color:#2c3348}
html.saas-skin.w-v2 .ph-eyebrow, html.saas-skin.w-v2 .ph-sub{color:rgba(45,52,70,.6)}
html.saas-skin.w-v2 .ph-cta{color:var(--acc-dark)}
html.saas-skin .ph-1{background:radial-gradient(55% 80% at 82% 12%,#d3bcf7,transparent 62%),radial-gradient(50% 70% at 12% 90%,#f8d2e2,transparent 60%),linear-gradient(120deg,#f7f0fc,#fdf1f5)}
html.saas-skin .ph-2{background:radial-gradient(58% 78% at 22% 20%,#f8dfcb,transparent 65%),radial-gradient(52% 62% at 82% 82%,#efdcf4,transparent 62%),linear-gradient(120deg,#fcf3ea,#f8ecf4)}
html.saas-skin .ph-3{background:radial-gradient(58% 78% at 78% 18%,#d5e8dd,transparent 62%),radial-gradient(50% 66% at 18% 86%,#dcd5f2,transparent 62%),linear-gradient(120deg,#f0f7f1,#efecf9)}
html.saas-skin .ph-4{background:radial-gradient(56% 78% at 80% 16%,#c6d7f2,transparent 62%),radial-gradient(50% 64% at 16% 86%,#d9e4f4,transparent 62%),linear-gradient(120deg,#eef3fb,#eaeef6)}
html.saas-skin .ph-5{background:radial-gradient(56% 80% at 80% 14%,#c6e7da,transparent 62%),radial-gradient(52% 66% at 16% 88%,#dcd6f4,transparent 62%),linear-gradient(120deg,#edf6f1,#f2eff9)}
html.saas-skin.w-v2 .ph-1, html.saas-skin.w-v2 .ph-2, html.saas-skin.w-v2 .ph-3, html.saas-skin.w-v2 .ph-4, html.saas-skin.w-v2 .ph-5{
  background:radial-gradient(56% 78% at 80% 16%,#b9c8ec,transparent 62%),radial-gradient(50% 64% at 16% 86%,#d3dcee,transparent 62%),linear-gradient(120deg,#eef1f8,#e9edf6)}

/* Rozmowa z Mirą — historia rozmów (lewy rail) */
html.saas-skin .talkwrap{display:grid;grid-template-columns:246px 1fr;gap:20px;align-items:start}
html.saas-skin .chist{background:var(--card);border-radius:22px;box-shadow:var(--sh-s);padding:14px;position:sticky;top:8px}
html.saas-skin .chist-h{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px}
html.saas-skin .chist-h b{font-size:13px;font-weight:600}
html.saas-skin .chist-new{font-size:11px;font-weight:600;color:var(--acc-dark);background:var(--acc-soft);padding:5px 11px;border-radius:var(--pill)}
html.saas-skin .chist-day{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:12px 6px 6px}
html.saas-skin .chist-i{display:flex;flex-direction:column;gap:1px;padding:9px 11px;border-radius:12px;cursor:pointer;transition:background .14s}
html.saas-skin .chist-i:hover{background:var(--card-soft)}
html.saas-skin .chist-i.on{background:var(--acc-soft)}
html.saas-skin .chist-i b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.saas-skin .chist-i i{font-size:10.5px;color:var(--ink-3);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* CRM — karty klientów + szuflada dossier (jak żywy panel, pod design) */
html.saas-skin .crm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
html.saas-skin .crmc{background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--sh-s);cursor:pointer;
  transition:transform .15s var(--ease),box-shadow .15s;position:relative;overflow:hidden}
html.saas-skin .crmc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
html.saas-skin .crmc-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
html.saas-skin .crmc-av{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--acc-dark),var(--acc-2));box-shadow:0 6px 16px rgba(90,70,130,.24)}
html.saas-skin .crmc-id{min-width:0}
html.saas-skin .crmc-id b{font-size:14px;font-weight:600;display:block;line-height:1.2}
html.saas-skin .crmc-id i{font-size:11px;color:var(--ink-3);font-style:normal}
html.saas-skin .crmc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
html.saas-skin .crmc-chip{font-size:10px;font-weight:500;padding:4px 9px;border-radius:var(--pill);background:var(--card-soft);color:var(--ink-2)}
html.saas-skin .crmc-chip.hot{background:#fdece9;color:var(--hot)}
html.saas-skin .crmc-chip.mira{background:var(--acc-soft);color:var(--acc-dark)}
html.saas-skin .crmc-foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:11px}
html.saas-skin .crmc-foot .tmp{margin-right:auto}
html.saas-skin .crmc-next{font-size:10.5px;color:var(--ink-3);text-align:right}

html.saas-skin .drw-ov{position:fixed;inset:0;background:rgba(45,35,60,.3);backdrop-filter:blur(3px);z-index:120;opacity:0;pointer-events:none;transition:opacity .25s}
html.saas-skin .drw-ov.on{opacity:1;pointer-events:auto}
html.saas-skin .drw{position:fixed;top:0;right:0;height:100%;width:min(432px,96vw);background:#fbf9fc;
  border-left:1px solid var(--line);z-index:121;transform:translateX(100%);transition:transform .3s var(--ease-out);
  display:flex;flex-direction:column;box-shadow:-24px 0 70px rgba(60,40,90,.18)}
html.saas-skin .drw.on{transform:translateX(0)}
html.saas-skin.w-v2 .drw{background:#f7f7f9}
html.saas-skin .drw-band{height:52px;min-height:0;position:relative}
html.saas-skin .drw-x{position:absolute;top:12px;right:16px;width:30px;height:30px;border-radius:50%;background:var(--card);display:grid;place-items:center;
  color:var(--ink-2);font-size:16px;box-shadow:var(--sh-s);z-index:3}
html.saas-skin .drw-x:hover{transform:scale(1.06)}
html.saas-skin .drw-idrow{display:flex;align-items:flex-end;gap:13px;padding:0 22px;margin-top:-24px;position:relative;z-index:2}
html.saas-skin .drw-id b{padding-right:14px}
html.saas-skin .drw-av{width:54px;height:54px;border-radius:16px;flex:none;display:grid;place-items:center;font-size:18px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--acc-dark),var(--acc-2));box-shadow:0 10px 24px rgba(90,70,130,.3);border:3px solid #fbf9fc}
html.saas-skin .drw-id{padding-bottom:2px;min-width:0}
html.saas-skin .drw-id b{font-size:20px;font-weight:600;display:block;line-height:1.15}
html.saas-skin .drw-id i{font-size:12px;color:var(--ink-3);font-style:normal}
html.saas-skin .drw-chips{display:flex;gap:7px;flex-wrap:wrap;padding:14px 24px 4px}
html.saas-skin .drw-chip{font-size:11px;font-weight:500;padding:5px 12px;border-radius:var(--pill);background:var(--card);box-shadow:var(--sh-s)}
html.saas-skin .drw-body{flex:1;overflow-y:auto;padding:16px 22px 40px}
html.saas-skin .drw-sec{margin-bottom:20px}
html.saas-skin .drw-sh{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
html.saas-skin .drw-field{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
html.saas-skin .drw-field:last-child{border:none}
html.saas-skin .drw-field .l{color:var(--ink-3)}html.saas-skin .drw-field .v{font-weight:600;text-align:right}
html.saas-skin .drw-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-bottom:8px}
html.saas-skin .drw-hist{display:none;margin-top:10px}
html.saas-skin .drw-hist.on{display:block;animation:fadev .3s var(--ease-out) both}
html.saas-skin .drw-msg{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:12px;line-height:1.5;color:var(--ink-2)}
html.saas-skin .drw-msg .mh{display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:var(--ink-4);margin-bottom:3px}
html.saas-skin .drw-msg .mh b{color:var(--acc-dark);font-weight:600}
html.saas-skin .drw-box .bl{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-dark);margin-bottom:5px}
html.saas-skin .drw-list{margin:0;padding-left:16px;font-size:12.5px;color:var(--ink-2);line-height:1.7}
html.saas-skin .drw-tl div{padding:8px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-3);line-height:1.4}
html.saas-skin .drw-tl div:last-child{border:none}
html.saas-skin .drw-tl b{color:var(--ink);display:block;font-weight:600;font-size:12.5px}

/* Pomysły — rozwijanie po kliknięciu */
html.saas-skin .titem.pom{cursor:pointer}
html.saas-skin .titem.pom .pm-chev{float:right;color:var(--ink-4);transition:transform .2s var(--ease)}
html.saas-skin .titem.pom.open .pm-chev{transform:rotate(180deg)}
html.saas-skin .pom-more{display:none;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-2);line-height:1.55}
html.saas-skin .titem.pom.open .pom-more{display:block;animation:fadev .25s var(--ease-out) both}
html.saas-skin .pom-more .pm-row{display:flex;gap:8px;padding:3px 0}
html.saas-skin .pom-more .pm-row b{color:var(--ink);font-weight:600;min-width:64px;flex:none}
html.saas-skin .pom-acts{display:flex;gap:7px;margin-top:10px}
html.saas-skin .pom-acts .abtn{padding:7px 14px;font-size:11px}
/* Pomysły — dodawanie */
html.saas-skin .pomadd{display:flex;gap:9px;margin-top:16px;max-width:520px}
html.saas-skin .pomadd input{flex:1;border:none;outline:none;background:var(--card);border-radius:var(--pill);padding:12px 18px;font-family:var(--f);font-size:12.5px;color:var(--ink);box-shadow:var(--sh-s)}
html.saas-skin .pomadd input::placeholder{color:var(--ink-4)}

/* temperatura — kropki jak w żywym panelu, zero pigułek */
html.saas-skin .tmp{display:inline-flex;align-items:center;gap:3px;justify-self:start}
html.saas-skin .tmp i{width:6px;height:6px;border-radius:50%;background:var(--card-soft);border:1px solid var(--line)}
html.saas-skin .tmp i.on{background:linear-gradient(135deg,#ecac48,#e0705f);border-color:transparent}
html.saas-skin .tmp em{font-style:normal;font-size:11px;font-weight:400;color:var(--ink-3);margin-left:6px}
html.saas-skin .st{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:400;color:var(--ink-2);justify-self:start}
html.saas-skin .st i{width:7px;height:7px;border-radius:50%;flex:none}

/* skrzynka */
html.saas-skin .mrow{display:flex;align-items:center;gap:13px;padding:12px 8px;border-bottom:1px solid var(--line);cursor:pointer}
html.saas-skin .mrow:hover{background:var(--card-soft)}
html.saas-skin .mrow-av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;font-size:11.5px;
  background:linear-gradient(135deg,var(--acc-dark),var(--acc-2));color:#fff}
html.saas-skin .mrow-av.dim{background:var(--card-soft);color:var(--ink-3)}
html.saas-skin .mrow-b{flex:1;min-width:0}
html.saas-skin .mrow-b b{font-size:13px;font-weight:600;display:block}
html.saas-skin .mrow-b i{font-size:11.5px;color:var(--ink-3);font-style:normal;font-weight:400}
html.saas-skin .mx{display:none;padding:8px 8px 18px 57px}
html.saas-skin .mx.on{display:block;animation:fadev .3s var(--ease-out) both}
html.saas-skin .mx-q{border-left:2px solid var(--line);padding:8px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.6;
  background:var(--card-soft);border-radius:0 12px 12px 0;margin-bottom:10px;white-space:pre-line}
html.saas-skin .mx-d{background:var(--acc-soft);border-radius:14px;padding:12px 15px;font-size:12.5px;line-height:1.6;color:var(--ink);white-space:pre-line}
html.saas-skin .mx-d .dh{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-dark);margin-bottom:6px}
html.saas-skin .mx-act{display:flex;gap:8px;margin-top:10px}
html.saas-skin .abtn{font-size:11.5px;font-weight:500;padding:8px 16px;border-radius:var(--pill);background:var(--acc);color:#fff}
html.saas-skin .abtn:hover{background:var(--acc-dark)}
html.saas-skin .abtn.gh{background:var(--card);color:var(--ink-2);box-shadow:var(--sh-s)}

/* statystyki */
html.saas-skin .kbar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-radius:24px;box-shadow:var(--sh);margin-bottom:18px;overflow:hidden}
html.saas-skin .kbar .k{padding:18px 22px;border-right:1px solid var(--line)}
html.saas-skin .kbar .k:last-child{border-right:none}
html.saas-skin .k .kl{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
html.saas-skin .k .kv{font-size:23px;font-weight:600;letter-spacing:-.02em;margin-top:3px}
html.saas-skin .k .ks{font-size:11px;color:var(--ink-3);margin-top:1px}
html.saas-skin .k .ks.up{color:var(--up)}
html.saas-skin .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start}
html.saas-skin .mrowx{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:12.5px}
html.saas-skin .mrowx:last-child{border:none}
html.saas-skin .mrowx .b{flex:1;min-width:0}
html.saas-skin .mrowx .b b{font-weight:600;display:block;font-size:12.5px}
html.saas-skin .mrowx .b i{font-style:normal;font-size:11px;color:var(--ink-3)}
html.saas-skin .mrowx .v{font-weight:600;font-size:14px}
html.saas-skin .chart-x{display:flex;justify-content:space-between;margin-top:6px}
html.saas-skin .chart-x span{font-size:10px;color:var(--ink-4)}

html.saas-skin .view{display:none}
html.saas-skin .view.on{display:block;animation:fadev .3s var(--ease)}
@keyframes fadev{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

html.saas-skin #toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:90;
  background:#2b2833;color:#fff;font-size:12px;font-weight:400;padding:11px 22px;border-radius:var(--pill);
  box-shadow:0 14px 40px rgba(0,0,0,.3);transition:all .3s var(--ease-out);pointer-events:none}
html.saas-skin .pager{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:4px;
  background:rgba(40,36,50,.92);color:#fff;border-radius:var(--pill);padding:6px 9px;backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(20,15,35,.5);font-size:11.5px;font-weight:500}
html.saas-skin .pager b{padding:5px 12px;border-radius:var(--pill);background:rgba(255,255,255,.16);font-weight:500}
html.saas-skin .pager a{color:#cfc7de;text-decoration:none;padding:5px 12px;border-radius:var(--pill)}
html.saas-skin .pager a:hover{background:rgba(255,255,255,.12)}

@media (prefers-reduced-motion: reduce){html.saas-skin *,html.saas-skin *:before,html.saas-skin *:after{animation:none!important;transition:none!important}}

/* ================= CIEMNY WIDOK („black view") — decyzja Kasi 2026-07-11 =================
   Aktywny klasą html.saas-skin.sdark (przełącznik jasny/ciemny w topbarze). Scoped => zero wpływu
   na klientki i stary panel. Nadpisuje tokeny (dziedziczą też reużyte stare komponenty). */
html.saas-skin.sdark{
  --canvas:#100c17;
  --ink:#ece8f4;--ink-2:#b6b0c6;--ink-3:#867f9a;--ink-4:#5b556b;
  --frame:rgba(32,26,46,.62);--card:#1d1826;--card-soft:#251f32;--line:rgba(255,255,255,.075);
  --side-ink:#a49ebb;--side-on:#2c2540;--acc-soft:#2a2342;
  --surface:#1d1826;--surface-2:#251f32;--bg:#100c17;--bg-2:#0b0812;
  --sh:0 18px 50px rgba(0,0,0,.5);--sh-s:0 8px 26px rgba(0,0,0,.4);
}
html.saas-skin.sdark body{background:#0b0812;
  background-image:radial-gradient(40% 34% at 4% 2%,#3a1f4a55,transparent 70%),radial-gradient(36% 30% at 98% 4%,#4a2a5e55,transparent 70%),radial-gradient(42% 36% at 98% 98%,#241d5544,transparent 72%),radial-gradient(34% 30% at 2% 96%,#3a234a44,transparent 70%)}
html.saas-skin.sdark .frame{border-color:rgba(255,255,255,.06);box-shadow:0 40px 110px rgba(0,0,0,.6)}
html.saas-skin.sdark .main{background-image:radial-gradient(55% 34% at 78% 0%,rgba(150,120,230,.10),transparent 70%),radial-gradient(40% 30% at 6% 100%,rgba(120,90,180,.08),transparent 70%)}
html.saas-skin.sdark .side-sec{color:#6a6480}
html.saas-skin.sdark .sitem:hover{color:#fff;background:rgba(255,255,255,.05)}
html.saas-skin.sdark .sitem.on{background:var(--side-on);color:#fff;box-shadow:none}
html.saas-skin.sdark .sitem.on svg{color:var(--acc-2)}
html.saas-skin.sdark .search,html.saas-skin.sdark .icbtn,html.saas-skin.sdark .vswitch{background:var(--card);color:var(--ink-3)}
html.saas-skin.sdark .user{background:var(--side-on)}html.saas-skin.sdark .user b{color:#fff}
html.saas-skin.sdark .card,html.saas-skin.sdark .tbl,html.saas-skin.sdark .titem,html.saas-skin.sdark .crmc,
html.saas-skin.sdark .kbar,html.saas-skin.sdark .wk,html.saas-skin.sdark .minichat,html.saas-skin.sdark .chist{background:var(--card)}
html.saas-skin.sdark .tsec{background:var(--card-soft)}
html.saas-skin.sdark .tr:hover,html.saas-skin.sdark .mrow:hover,html.saas-skin.sdark .crmc:hover,html.saas-skin.sdark .titem:hover{background:var(--card-soft)}
html.saas-skin.sdark .dcol{background:rgba(255,255,255,.03)}
html.saas-skin.sdark .drw{background:#17131f}
html.saas-skin.sdark .drw-box,html.saas-skin.sdark .drw-msg{background:var(--card-soft);border-color:var(--line);color:var(--ink-2)}
html.saas-skin.sdark .cmsg.mira{background:var(--card-soft)}
html.saas-skin.sdark .mc-in input,html.saas-skin.sdark .talk-in{background:var(--card-soft)}
html.saas-skin.sdark .pbar{background:var(--card-soft)}
html.saas-skin.sdark .dark{background:#2a2440;border:1px solid rgba(255,255,255,.06)}
/* malarskie hero + kafle: ciemniejsze gradienty, jasny tekst */
html.saas-skin.sdark .ph-title,html.saas-skin.sdark .art .lab b,html.saas-skin.sdark .art-head .lab b,
html.saas-skin.sdark .landing-h,html.saas-skin.sdark .start-h1-compact{color:#f1ecf8}
html.saas-skin.sdark .ph-eyebrow,html.saas-skin.sdark .ph-sub,html.saas-skin.sdark .art .lab i,html.saas-skin.sdark .art-head .lab i{color:rgba(220,214,235,.55)}
html.saas-skin.sdark .ph-cta{background:rgba(255,255,255,.12);color:#e9e2f6}
html.saas-skin.sdark .pagehero:after{background:radial-gradient(44% 62% at 80% 18%,rgba(255,255,255,.12),transparent 70%)}
html.saas-skin.sdark .ph-1,html.saas-skin.sdark .a-hero{background:radial-gradient(55% 80% at 82% 12%,#4a2f6e,transparent 62%),radial-gradient(50% 70% at 12% 90%,#5e2a52,transparent 60%),linear-gradient(120deg,#221830,#2a1c2e)}
html.saas-skin.sdark .ph-2,html.saas-skin.sdark .a-focus{background:radial-gradient(58% 78% at 22% 20%,#5e3f5a,transparent 65%),radial-gradient(52% 62% at 82% 82%,#43305e,transparent 62%),linear-gradient(120deg,#2a2030,#281c2c)}
html.saas-skin.sdark .ph-3,html.saas-skin.sdark .a-rytual{background:radial-gradient(58% 78% at 78% 18%,#2f5e48,transparent 62%),radial-gradient(50% 66% at 18% 86%,#3a2f6e,transparent 62%),linear-gradient(120deg,#1c2a22,#20203a)}
html.saas-skin.sdark .ph-4{background:radial-gradient(56% 78% at 80% 16%,#2f4a7e,transparent 62%),radial-gradient(50% 64% at 16% 86%,#3a3f6e,transparent 62%),linear-gradient(120deg,#1a2036,#1e2240)}
html.saas-skin.sdark .ph-5{background:radial-gradient(56% 80% at 80% 14%,#2f6e5a,transparent 62%),radial-gradient(52% 66% at 16% 88%,#3a2f6e,transparent 62%),linear-gradient(120deg,#182a24,#20203a)}