/* Planerka 2.0 – wersja jasna. Wartości z Figmy (sekcja 2164:1697, system J-S). */
:root {
  --marka: #DB0A5F;
  --marka-ciemna: #B0084C;
  --marka-08: rgba(219, 10, 95, .08);
  --marka-roz: #FCE7EF;
  --na-marce: #FFFFFF;
  --tekst: #171717;
  --tekst2: rgba(23, 23, 23, .7);
  --szary: #5F6A73;
  --mgla: #E2EDF3;
  --piasek: #F1ECE5;
  --piasek50: rgba(241, 236, 229, .5);
  --maslo: #FFF4CC;
  --roz-pastel: #FDECEA;
  --lupek: #8FA9B9;
  --obrys: rgba(23, 23, 23, .45);
  --linia: #E4DED6;
  --zielony: #1E7A4C;
  --tlo: #FFFFFF;
  --tekst-tla: #171717;
  --pow: #FFFFFF;
  --cien: 0 6px 20px rgba(23, 23, 23, .05), 0 1px 2px rgba(23, 23, 23, .03);
  --cien-duzy: 0 12px 40px rgba(23, 23, 23, .08), 0 1px 2px rgba(23, 23, 23, .03);
  --r: 20px;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --skrypt: 'Great Vibes', cursive;
  --logo: 'Merienda', Georgia, serif;
}
html[data-motyw="ciemny"] { --tlo: #171717; --tekst-tla: #FFFFFF; }
html[data-motyw="niebieski"] { --marka: #0A49DB; --marka-ciemna: #08399F; --marka-08: rgba(10, 73, 219, .08); --marka-roz: #E4ECFC; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--tekst); background: var(--tlo); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }
.ikona { flex: none; }

/* --- Typografia (style Planerka/…) --- */
.nadtytul { font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .08em; color: var(--tekst2); text-transform: uppercase; }
.h1 { font-size: 30px; font-weight: 600; line-height: 38px; letter-spacing: -.005em; color: var(--tekst-tla); }
.h2 { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.002em; }
.h3 { font-size: 16px; font-weight: 600; line-height: 24px; }
.h-reg { font-size: 16px; font-weight: 400; }
.h-lekki { font-weight: 300; font-size: 22px; color: var(--marka); line-height: 1.2; }
.skrypt { font-family: var(--skrypt); font-weight: 400; color: var(--marka); }
.podpis { font-size: 12px; color: var(--tekst2); }
.podpis-r { font-size: 12px; color: var(--tekst2); }
.podpis-duzy { font-size: 14px; color: var(--tekst2); }
.pusto { color: var(--tekst2); font-size: 13px; padding: 12px 0; }
.mob-tylko { display: none !important; }

/* --- Logo – Planerka --- */
.logo { display: inline-flex; flex-direction: column; align-items: center; color: #fff; line-height: 1; }
.logo-napis { font-family: var(--logo); font-size: 34px; line-height: 1.1; }
.logo-pod { font-family: 'Nunito', sans-serif; font-size: 9.7px; letter-spacing: .15em; margin-top: -2px; }
.logo-duze .logo-napis { font-size: 39px; }
.logo-duze .logo-pod { font-size: 11.2px; }
.logo-roz { color: var(--marka); }
.logo-roz .logo-napis { font-size: 30.5px; }
.logo-roz .logo-pod { font-size: 8.7px; }

/* --- Karty, chipy, przyciski --- */
.karta { background: var(--pow); border-radius: var(--r); box-shadow: var(--cien); color: var(--tekst); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 40px; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; background: var(--piasek50); color: var(--marka); }
.chip.aktywny { background: var(--marka); color: #fff; }
.chip.mini { padding: 4px 10px; font-size: 11px; }
.chip-piasek { background: var(--piasek); color: var(--tekst); }
.chip-mgla { background: var(--mgla); color: var(--tekst); }
.chip-roz { background: var(--roz-pastel); color: var(--tekst); }
.chip-maslo { background: var(--maslo); color: var(--tekst); }
.chip-roz-jasny { background: var(--marka-08); color: var(--tekst); }
.chip-maly { display: inline-block; padding: 3px 10px; border-radius: 40px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.chip-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 10px; border-radius: 40px; font-size: 11px; font-weight: 500; color: var(--tekst2); white-space: nowrap; }
.chip-status.chip-roz { color: var(--tekst); }
.chip-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.2px solid currentColor; flex: none; }
.chip-status.chip-roz::before { border-color: var(--marka); }

.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 20px; border-radius: 40px; background: var(--marka); color: #fff; font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; box-shadow: var(--cien); transition: filter .15s, transform .1s; text-align: center; }
.przycisk:hover { filter: brightness(1.06); }
.przycisk:active { transform: translateY(1px); }
.przycisk:disabled, .przycisk[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.przycisk.pelny { width: 100%; }
.przycisk.maly { min-height: 34px; padding: 8px 16px; font-size: 12px; box-shadow: none; }
.przycisk.mini { min-height: 28px; padding: 6px 12px; font-size: 11px; box-shadow: none; }
.przycisk-jasny { background: var(--piasek); color: var(--tekst); box-shadow: none; }
.przycisk-bialy { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--marka); border-radius: 40px; padding: 9px 18px; font-size: 12px; font-weight: 500; }
.przycisk-obrys { border: 1px solid var(--marka); color: var(--marka); background: #fff; border-radius: 40px; padding: 8px 14px; font-size: 12px; font-weight: 500; }
.przycisk-czarny { background: var(--tekst); color: #fff; border-radius: 40px; padding: 8px 14px; font-size: 11px; font-weight: 500; }
.ikona-przycisk { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--marka); flex: none; position: relative; }
.ikona-przycisk:hover { background: var(--piasek50); }
.ikona-przycisk.okragly { width: 36px; height: 36px; }
.ikona-przycisk.jasny { background: #FAF8F5; }
.link-mocny { color: var(--marka); font-weight: 600; font-size: 13px; }
.link-mocny.maly { font-size: 12px; font-weight: 500; }
.link-przycisk { color: var(--marka); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.link-przycisk:disabled { color: var(--szary); text-decoration: none; cursor: default; }
.link-lamany { word-break: break-all; color: var(--marka); }
.wiersz-przyciskow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.otworz { width: 40px; height: 40px; border-radius: 50%; background: var(--marka); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.otworz-bialy { background: #fff; color: var(--marka); }
.okragly-duzy { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.okragly-duzy.roz { background: var(--marka); }
.okragly-duzy.czarny { background: var(--tekst); }

.pasek-postepu { height: 6px; border-radius: 3px; background: var(--piasek); overflow: hidden; }
.pasek-postepu > i { display: block; height: 100%; border-radius: inherit; background: var(--lupek); transition: width .3s; }
.pasek-postepu.gruby { height: 8px; border-radius: 4px; }
.pasek-postepu.gruby > i { background: var(--marka); }
.pasek-postepu.lupek > i { background: var(--lupek); }
.pasek-postepu.bialy { background: rgba(23, 23, 23, .15); }
.pasek-postepu.bialy > i { background: #fff; }
.pasek-postepu.cienki { height: 6px; }
.pasek-postepu.bialy-tlo { background: #fff; height: 5px; }

.awatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; color: var(--tekst2); flex: none; letter-spacing: .01em; }
.awatar.pusty { background: var(--piasek50); }
.awatar-ola { color: var(--tekst); }

.komunikat { border-radius: 12px; padding: 10px 14px; font-size: 13px; }
.komunikat.ok { background: var(--mgla); }
.komunikat.blad { background: var(--roz-pastel); color: #7d0636; }
.komunikat.info { background: var(--maslo); }
.komunikat.maly { font-size: 11px; padding: 8px 10px; }
.toast { position: fixed; z-index: 200; left: 50%; top: 20px; transform: translateX(-50%); padding: 12px 20px; border-radius: 40px; box-shadow: var(--cien-duzy); font-size: 13px; font-weight: 500; max-width: min(560px, calc(100vw - 32px)); animation: toast 4.5s forwards; }
.toast.ok { background: var(--tekst); color: #fff; }
.toast.blad { background: var(--marka); color: #fff; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 6%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; visibility: hidden; } }
.linia { border: 0; height: 1px; background: var(--linia); margin: 0; width: 100%; }
.info-box { display: flex; gap: 10px; align-items: flex-start; background: var(--mgla); border-radius: 16px; padding: 14px 16px; font-size: 11px; line-height: 16px; }
.info-box .ikona { color: var(--tekst); margin-top: -1px; }

/* ===================== LOGOWANIE (J-L1…J-L5, J-ML1…J-ML5) ===================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 560px 1fr; }
.panel-marki { position: relative; background: var(--marka); color: #fff; overflow: hidden; padding: 56px 64px 0; min-height: 100vh; }
.panel-marki .dekor { position: absolute; left: -160px; top: 700px; width: 460px; height: 460px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.pm-tresc { position: relative; margin-top: 109px; width: 432px; max-width: 100%; display: flex; flex-direction: column; gap: 22px; }
.pm-h { font-size: 38px; font-weight: 600; line-height: 45px; display: flex; flex-direction: column; color: #fff; }
.pm-h .skrypt { color: #fff; font-size: 58px; line-height: 64px; }
.pm-p { font-size: 16px; line-height: 23px; color: rgba(255, 255, 255, .9); }
.pm-lista { display: flex; flex-direction: column; gap: 12px; }
.pm-lista li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.pm-ok { width: 28px; height: 28px; border-radius: 14px; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.kpi { display: flex; flex-direction: column; padding: 19px 18px 12px; min-height: 124px; position: relative; }
.kpi-et { font-size: 12px; line-height: 16px; }
.kpi-et-mob, .kpi-w-mob { display: none; }
.kpi-w { font-size: 28px; font-weight: 600; line-height: 34px; letter-spacing: -.005em; margin-top: 17px; }
.kpi-pod { font-size: 11px; line-height: 16px; color: var(--tekst2); margin-top: auto; }
.panel-marki .kpi { position: absolute; width: 224px; color: var(--tekst); }
.pm-kpi1 { left: 64px; top: 730px; }
.pm-kpi2 { left: 282px; top: 800px; }
.pm-stopka { position: absolute; left: 64px; top: 970px; font-size: 12px; color: rgba(255, 255, 255, .7); }
@media (max-height: 1000px) and (min-width: 901px) { .pm-kpi1 { top: auto; bottom: 170px; } .pm-kpi2 { top: auto; bottom: 100px; } .pm-stopka { top: auto; bottom: 37px; } .panel-marki .dekor { top: auto; bottom: -136px; } }

.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 40px 72px; position: relative; }
.auth-mob-head { display: none; }
.karta-auth { width: 520px; max-width: 100%; padding: 40px 48px; box-shadow: var(--cien-duzy); }
.auth-linki { position: absolute; bottom: 27px; font-size: 12px; color: var(--szary); white-space: pre; }
.auth-linki a:hover { color: var(--marka); }
.kolumna-auth { display: flex; flex-direction: column; gap: 20px; }
.auth-naglowek { display: flex; flex-direction: column; gap: 10px; }
.auth-naglowek .nadtytul { color: var(--tekst); }
.auth-naglowek h1 { font-size: 30px; font-weight: 600; line-height: 36px; }
.auth-naglowek p { font-size: 14px; line-height: 20px; color: var(--szary); }
.karta-auth .przycisk { min-height: 48px; font-weight: 600; box-shadow: none; padding: 0 20px; }
.separator { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; color: var(--szary); }
.separator::before, .separator::after { content: ''; flex: 1; height: 1px; background: var(--linia); }
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole-et { font-size: 12px; font-weight: 500; line-height: 16px; }
.pole input, .pole-haslo { height: 46px; border: 1px solid var(--obrys); border-radius: 12px; padding: 0 16px; font-size: 13px; background: #fff; width: 100%; outline: none; transition: border-color .15s, box-shadow .15s; }
.pole input::placeholder { color: var(--tekst2); }
.pole input:focus, .pole-haslo:focus-within { border-color: var(--tekst); box-shadow: 0 0 0 1px var(--tekst); }
.pole-haslo { display: flex; align-items: center; padding: 0 6px 0 0; }
.pole-haslo input { border: 0; box-shadow: none !important; height: 44px; flex: 1; }
.pokaz-haslo { width: 34px; height: 34px; border-radius: 50%; color: var(--szary); display: inline-flex; align-items: center; justify-content: center; }
.pole.zle input { border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka); }
.pole-blad { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--marka); }
.wiersz-miedzy { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wybor { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; position: relative; }
.wybor input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.wybor a { color: var(--marka); font-weight: 500; }
.kwadrat { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #8A8F94; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: transparent; flex: none; }
.wybor input:checked + .kwadrat { background: var(--marka); border-color: var(--marka); color: #fff; }
.wybor input:focus-visible + .kwadrat { outline: 2px solid var(--marka); outline-offset: 2px; }
.zgody { display: flex; flex-direction: column; gap: 10px; }
.link-dol { text-align: center; font-size: 13px; color: var(--szary); }
.przycisk-wroc { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: #171717; color: #fff; border-radius: 999px; padding: 10px 18px 10px 14px; font-size: 13px; font-weight: 600; line-height: 19px; box-shadow: var(--cien); }
.kroki { display: flex; flex-direction: column; gap: 8px; }
.kroki-paski, .kroki-opisy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kroki-paski i { height: 4px; border-radius: 2px; background: var(--piasek); }
.kroki-paski i.tak { background: var(--marka); }
.kroki-opisy span { font-size: 11px; color: var(--szary); }
.kroki-opisy .biezacy { color: var(--tekst); font-weight: 600; }
.wskazowka { border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.wskazowka ul { display: flex; flex-direction: column; gap: 6px; }
.wskazowka li, ul.wskazowka li { position: relative; padding-left: 13px; }
.wskazowka li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--tekst); }
.wskazowka.mgla { background: var(--mgla); }
.wskazowka.maslo { background: var(--maslo); }
.adres-email { display: flex; justify-content: space-between; align-items: center; background: var(--piasek); border-radius: 999px; padding: 12px 16px; font-size: 14px; gap: 10px; }
.adres-email strong { overflow: hidden; text-overflow: ellipsis; }
.podglad-maila { border: 1px solid var(--linia); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--cien); }
.pm-gora { display: flex; align-items: center; gap: 12px; }
.pm-nadawca { width: 36px; height: 36px; border-radius: 18px; background: var(--marka); color: #fff; font-family: var(--skrypt); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.pm-od { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.pm-od small { font-size: 11px; color: var(--szary); }
.pm-nowa { background: var(--marka-roz); color: var(--marka); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.pm-temat { font-size: 14px; }
.pm-tresc-maila { font-size: 12px; color: var(--szary); line-height: 17px; }
.pm-przycisk { align-self: flex-start; background: var(--marka); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; }
.sila-hasla { display: flex; flex-direction: column; gap: 6px; margin-top: -6px; }
.sila-paski { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sila-paski i { height: 5px; border-radius: 3px; background: var(--piasek); transition: background .2s; }
.sila-paski i.tak { background: var(--marka); }
.sila-opis { font-size: 11px; font-weight: 500; color: var(--szary); }
.wymagania { display: flex; flex-direction: column; gap: 8px; }
.wymagania li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--szary); }
.wymagania li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #8A8F94; flex: none; box-sizing: border-box; }
.wymagania li.ok { color: var(--tekst); font-weight: 500; }
.wymagania li.ok::before { background: var(--zielony) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--zielony); }
.tekst-prawny h1 { font-size: 24px; } .tekst-prawny p { color: var(--szary); }

/* ===================== UKŁAD APLIKACJI (J-D1) ===================== */
.pasek-boczny { position: fixed; inset: 0 auto 0 0; width: 248px; background: var(--marka); color: #fff; z-index: 50; display: flex; flex-direction: column; padding: 32px 0 24px; overflow-y: auto; scrollbar-width: none; }
.pb-logo { margin: 0 0 20px 34px; align-self: flex-start; }
.pb-zamknij { display: none; }
.pb-nav { display: flex; flex-direction: column; }
.pb-link { position: relative; display: flex; align-items: center; gap: 12px; height: 50px; padding-left: 34px; font-size: 16px; line-height: 20px; color: #fff; }
.pb-link .ikona { color: #fff; }
.pb-link span:not(.pb-chip):not(.pb-licznik) { position: relative; z-index: 1; }
.pb-link:hover:not(.aktywny) { background: rgba(255, 255, 255, .08); }
.pb-link.aktywny { color: var(--marka); font-weight: 500; }
.pb-link.aktywny .ikona { color: var(--marka); position: relative; z-index: 1; }
.pb-link.aktywny::before { content: ''; position: absolute; left: 19px; top: -15.5px; width: 229px; height: 81px; background: var(--tlo); z-index: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='229' height='81' viewBox='0 0 229 81'%3E%3Cpath d='M21.5 18H211C220.941 18 229 9.94112 229 0V81C229 69.9543 220.046 61 209 61H21.5C9.62588 61 0 51.3741 0 39.5C0 27.6259 9.62587 18 21.5 18Z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='229' height='81' viewBox='0 0 229 81'%3E%3Cpath d='M21.5 18H211C220.941 18 229 9.94112 229 0V81C229 69.9543 220.046 61 209 61H21.5C9.62588 61 0 51.3741 0 39.5C0 27.6259 9.62587 18 21.5 18Z'/%3E%3C/svg%3E") no-repeat; }
.pb-chip { position: relative; z-index: 1; background: #fff; opacity: .85; color: var(--tekst); font-size: 9px; font-weight: 500; padding: 3px 7px; border-radius: 40px; margin-left: -2px; }
.pb-licznik { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--marka); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-left: -2px; }
.pb-portal { margin: auto 16px 0; min-height: 140px; border-radius: 16px; padding: 14px 18px; background: linear-gradient(rgba(23, 23, 23, .15), rgba(23, 23, 23, .15)), var(--marka); display: flex; flex-direction: column; gap: 10px; }
.pb-portal strong { font-size: 16px; font-weight: 400; letter-spacing: -.01em; }
.pb-portal p { font-size: 12px; line-height: 16px; width: 180px; max-width: 100%; }
.pb-portal-btn { align-self: flex-start; background: #fff; color: var(--marka); border-radius: 40px; height: 28px; padding: 0 22px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; margin-top: auto; }
.pb-profil { display: flex; align-items: center; gap: 12px; padding: 38px 16px 0 24px; }
.pb-profil div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pb-profil strong { font-size: 14px; font-weight: 500; line-height: 22px; }
.pb-profil small { font-size: 11px; line-height: 16px; }
.pb-profil .awatar { background: var(--roz-pastel); color: var(--tekst); }
.pb-wyloguj button { color: #fff; opacity: .75; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.pb-wyloguj button:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.pb-wyloguj span { display: none; }
.przyciemnienie { display: none; }

.glowna { margin-left: 248px; padding: 44px 40px 40px; min-height: 100vh; }
.naglowek { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; min-height: 94px; }
.mob-gora { display: none; }
.nag-tytuly { display: flex; flex-direction: column; }
.nag-tytuly .h1 { margin-top: 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.h1-skrypt { font-size: 64px; line-height: 50px; position: relative; top: 4px; }
.nag-akcje { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.szukaj { position: relative; display: flex; align-items: center; gap: 10px; width: 300px; height: 44px; padding: 0 16px; border: 1px solid var(--obrys); border-radius: 22px; background: #fff; color: var(--tekst); }
.szukaj input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 13px; background: transparent; }
.szukaj input::placeholder { color: var(--tekst2); }
.szukaj:focus-within { border-color: var(--tekst); }
.szukaj-wyniki { position: absolute; top: 50px; left: 0; right: 0; z-index: 60; background: #fff; border-radius: 16px; box-shadow: var(--cien-duzy); padding: 8px; max-height: 420px; overflow: auto; }
.szukaj-wyniki a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; }
.szukaj-wyniki a:hover, .szukaj-wyniki a.zazn { background: var(--piasek50); }
.szukaj-wyniki small { color: var(--tekst2); font-size: 11px; }
.szukaj-wyniki em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--marka); text-transform: uppercase; letter-spacing: .06em; }
.dzwonek { width: 44px; height: 44px; }
.dzwonek .kropka { position: absolute; top: 11px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--lupek); display: none; }
.dzwonek.ma .kropka { display: block; }
.powiadomienia-lista { position: absolute; right: 170px; top: 56px; width: 340px; z-index: 60; padding: 10px; box-shadow: var(--cien-duzy); max-height: 460px; overflow: auto; }
.powiadomienia-lista a { display: flex; gap: 10px; padding: 10px; border-radius: 12px; align-items: flex-start; }
.powiadomienia-lista a:hover { background: var(--piasek50); }
.powiadomienia-lista .ikona { color: var(--marka); margin-top: 2px; }
.powiadomienia-lista span { display: flex; flex-direction: column; font-size: 13px; }
.powiadomienia-lista small { color: var(--tekst2); font-size: 11px; }
.tresc { margin-top: 0; }
.dolna-nawigacja { display: none; }
.sekcja-gora { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chipy-filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chipy-filtry .chip { background: var(--piasek); color: var(--tekst); }
.chipy-filtry .chip.aktywny { background: var(--marka); color: #fff; }
.chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.rozwijane { position: relative; }
.rozwijane-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; padding: 6px; display: flex; flex-direction: column; box-shadow: var(--cien-duzy); }
.rozwijane-menu > a, .rozwijane-menu > button, .rozwijane-menu form button { text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 13px; width: 100%; display: block; }
.rozwijane-menu > a:hover, .rozwijane-menu > button:hover, .rozwijane-menu form button:hover { background: var(--piasek50); }

/* --- Pulpit --- */
.pulpit { display: grid; grid-template-columns: minmax(0, 712fr) minmax(300px, 368fr); gap: 32px; align-items: start; }
.pulpit-lewa, .pulpit-prawa { display: flex; flex-direction: column; min-width: 0; }
.pulpit-prawa { gap: 34px; }
.mob-tydzien { display: none; }
.pulpit-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.pulpit-kpi .kpi { transition: transform .15s; }
.pulpit-kpi .kpi:hover { transform: translateY(-2px); }
.kpi-ikona { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--tekst); }
.kpi-ikona .ikona { width: 27px; height: 27px; }
.kpi-roz { background: var(--marka); color: #fff; }
.kpi-roz .kpi-pod { color: #fff; }
.kpi-spotkania { min-height: 81px; flex-direction: row; align-items: center; padding: 20px 14px 20px 8px; border-radius: 22px; gap: 22px; }
.kpi-spotkania .kpi-ikona { position: static; color: #fff; }
.kpi-teksty { display: flex; flex-direction: column; flex: 1; gap: 4px; }
.kpi-spotkania .kpi-et { font-size: 12px; }
.kpi-spotkania .kpi-pod { margin: 0; }
.pulpit-projekty { margin-top: 30px; }
.pulpit-projekty .sekcja-gora { margin-bottom: 18px; }
.pulpit-projekty .chip { padding: 7px 14px; }
.lista-projektow { display: flex; flex-direction: column; gap: 14px; }
.projekt-karta { display: grid; grid-template-columns: 68px minmax(0, 1fr) 62px 70px 34px 40px; align-items: center; gap: 18px; padding: 20px 20px 20px 20px; min-height: 108px; }
.monogram { width: 68px; height: 68px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--piasek); display: flex; align-items: center; justify-content: center; }
.monogram .skrypt { font-size: 24px; }
.pk-opis h3 { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.002em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-opis p { font-size: 12px; line-height: 16px; color: var(--tekst2); margin: 6px 0 12px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-postep { display: flex; align-items: center; gap: 10px; margin-left: 2px; }
.pk-postep .pasek-postepu { width: 260px; max-width: 100%; }
.pk-postep b { font-size: 11px; font-weight: 500; }
.pk-dane { display: flex; flex-direction: column; align-items: center; }
.pk-dane b { font-size: 14px; font-weight: 500; line-height: 22px; white-space: nowrap; }
.pulpit-dol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.pulpit-notatnik, .pulpit-finanse { min-height: 262px; padding: 16px 22px 22px; display: block; position: relative; overflow: hidden; }
.pulpit-notatnik .podpis { font-size: 11px; font-weight: 500; }
.linie { position: absolute; left: 22px; right: 22px; top: 70px; height: 157px; background: repeating-linear-gradient(to bottom, var(--piasek) 0 1px, transparent 1px 26px); }
.pinezka { position: absolute; left: 150px; top: 64px; width: 18px; height: 18px; border-radius: 50%; background: var(--lupek); z-index: 2; box-shadow: 0 2px 4px rgba(23, 23, 23, .15); }
.karteczka { position: relative; margin: 30px 0 0 14px; width: 236px; max-width: calc(100% - 20px); min-height: 150px; background: var(--maslo); border-radius: 12px; padding: 18px 16px 14px; transform: rotate(3deg); box-shadow: 0 6px 14px rgba(23, 23, 23, .06); }
.karteczka-nr { font-size: 16px; font-weight: 600; line-height: 24px; display: block; }
.karteczka strong { display: block; font-size: 14px; font-weight: 500; line-height: 22px; margin-top: 6px; }
.karteczka p { font-size: 11px; line-height: 16px; margin-top: 4px; }
.oznaczenie { position: absolute; right: 12px; top: 16px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 40px; background: var(--lupek); color: #fff; font-size: 10px; font-weight: 500; }
.oznaczenie i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.pulpit-finanse .et { display: block; font-size: 12px; margin-top: 2px; }
.fin-wiersz { display: flex; justify-content: space-between; align-items: flex-end; margin: 17px 0 22px; }
.fin-wiersz .kpi-w { margin: 0; }
.fin-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.fin-lista li { display: grid; grid-template-columns: 1fr 80px 82px; align-items: center; font-size: 13px; gap: 8px; }
.fin-lista li b { font-weight: 500; }
.fin-lista li .chip-maly { justify-self: end; }
.pulpit-kalendarz { padding: 22px 16px 20px; min-height: 356px; }
.mk-gora { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; }
.mk-gora button { width: 32px; height: 32px; border-radius: 50%; color: var(--marka); display: inline-flex; align-items: center; justify-content: center; }
.mk-gora button:hover { background: var(--piasek50); }
.mk-tytul { text-align: center; display: flex; flex-direction: column; }
.mk-tytul small { font-size: 11px; font-weight: 500; color: var(--tekst2); line-height: 16px; }
.mk-siatka { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 8px; }
.mk-siatka .mk-dn { font-size: 10px; font-weight: 500; color: var(--tekst2); text-align: center; height: 32px; line-height: 32px; }
.mk-siatka .mk-dn.nd { color: var(--marka); }
.mk-tydz { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); height: 50px; align-items: center; border-radius: 16px; position: relative; }
.mk-tydz.biezacy::before { content: ''; position: absolute; left: 4px; right: 4px; top: 9px; height: 32px; border-radius: 16px; background: var(--piasek50); }
.mk-dzien { position: relative; height: 32px; width: 32px; justify-self: center; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }
.mk-dzien:hover { background: var(--piasek); }
.mk-dzien.nd { color: var(--marka); }
.mk-dzien.dzis { background: var(--marka); color: #fff; box-shadow: 0 0 0 1px var(--tekst); }
.mk-dzien.ma::after { content: ''; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--lupek); }
.mk-dzien.dzis.ma::after { background: #fff; }

.plan-dnia { padding: 20px 26px 24px 26px; min-height: 456px; }
.plan-dnia .sekcja-gora .h2 { margin-left: -2px; }
.plan-podpis { margin: 12px 0 8px; }
.os-czasu { position: relative; margin-top: 28px; display: flex; flex-direction: column; gap: 6px; }
.os-czasu::before { content: ''; position: absolute; left: 15px; top: 12px; bottom: 22px; width: 1px; background: var(--piasek); }
.etap { position: relative; display: flex; align-items: flex-start; gap: 18px; min-height: 46px; }
.etap-kolko { position: relative; width: 24px; height: 24px; margin: 1px 0 0 4px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: transparent; background: #fff; border: 1px solid var(--obrys); flex: none; transition: background .15s; }
.etap.zrobione .etap-kolko { background: var(--marka); border-color: var(--marka); color: #fff; }
.etap.biezace .etap-kolko { background: var(--lupek); border-color: var(--lupek); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--tekst); }
.etap.prywatne .etap-kolko { border: 1px dashed var(--lupek); }
.etap-kolko:hover { border-color: var(--marka); }
.etap-tekst { flex: 1; display: flex; flex-direction: column; cursor: pointer; min-width: 0; }
.etap-tekst strong { font-size: 14px; font-weight: 400; line-height: 22px; }
.etap.biezace .etap-tekst strong { font-weight: 500; }
.etap.zrobione .etap-tekst strong { color: var(--tekst); }
.etap-tekst small { font-size: 12px; line-height: 16px; color: var(--tekst2); }
.etap .chip { padding: 5px 12px; font-size: 11px; }
.pusty-stan { padding: 32px; margin-bottom: 24px; text-align: left; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pusty-stan .skrypt { font-size: 44px; line-height: 1; }
.pusty-stan p { color: var(--tekst2); max-width: 640px; }

/* --- Modale --- */
.modal { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: visible; color: var(--tekst); }
.modal::backdrop { background: rgba(23, 23, 23, .45); backdrop-filter: blur(2px); }
.modal[open] { animation: wejdz .18s ease-out; }
@keyframes wejdz { from { opacity: 0; transform: translateY(8px); } }
.modal-tresc { width: 420px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 20px; box-shadow: var(--cien-duzy); padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-gora { display: flex; justify-content: space-between; align-items: center; }
.modal-gora h2 { font-size: 20px; font-weight: 600; }
.modal-gora .ikona-przycisk { width: 32px; height: 32px; }
.modal-stopka { display: flex; gap: 8px; }
.modal-stopka .pelny { flex: 1; }
.pole-m { display: flex; flex-direction: column; gap: 4px; }
.pole-m > span { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--tekst2); }
.pole-m input, .pole-m select, .pole-m textarea, .ew-tagi-pole { width: 100%; min-height: 44px; border: 1px solid var(--obrys); border-radius: 14px; padding: 10px 16px; font-size: 13px; background: #fff; outline: none; }
.pole-m textarea { resize: vertical; min-height: 60px; line-height: 20px; }
.pole-m input:focus, .pole-m select:focus, .pole-m textarea:focus { border-color: var(--tekst); box-shadow: 0 0 0 1px var(--tekst); }
.pole-m.maly input { min-height: 38px; padding: 6px 10px; text-align: center; }
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chipy-wybor { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-radio span { display: inline-flex; padding: 7px 12px; border-radius: 40px; background: var(--piasek50); color: var(--marka); font-size: 11px; font-weight: 500; line-height: 16px; transition: background .15s; }
.chip-radio input:checked + span { background: var(--marka); color: #fff; }
.chip-radio.mgla input:checked + span { background: var(--mgla); color: var(--tekst); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--marka); outline-offset: 2px; }
.przelacznik-wiersz { display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 12px; position: relative; cursor: pointer; min-height: 32px; }
.przelacznik-wiersz small { color: var(--tekst2); font-size: 11px; margin-left: auto; margin-right: 8px; }
.przelacznik-wiersz input, .przelacznik input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.przelacznik-wiersz i, .przelacznik i { width: 44px; height: 24px; border-radius: 12px; background: var(--piasek); position: relative; flex: none; transition: background .2s; }
.przelacznik-wiersz i::after, .przelacznik i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 23, .2); transition: left .2s; }
.przelacznik-wiersz input:checked + i, .przelacznik input:checked + i { background: var(--marka); }
.przelacznik-wiersz input:checked + i::after, .przelacznik input:checked + i::after { left: 22px; }
.przelacznik-wiersz input:focus-visible + i { outline: 2px solid var(--marka); outline-offset: 2px; }
.przelacznik-wiersz input:disabled + i { opacity: .4; }
.przelacznik { position: relative; display: inline-flex; cursor: pointer; }
.wybor-maly { font-size: 12px; color: var(--tekst2); display: flex; gap: 8px; align-items: center; margin-top: -8px; }
.uczestnicy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.uczestnik { display: inline-flex; align-items: center; gap: 6px; background: var(--piasek); border-radius: 20px; height: 40px; padding: 0 10px 0 6px; font-size: 12px; }
.uczestnik button { color: var(--marka); }
.nowy-klient { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; background: var(--piasek50); }
.szybkie-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.szybkie-lista > * { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: 16px; background: var(--piasek50); color: var(--marka); font-weight: 500; font-size: 13px; }
.szybkie-lista > *:hover { background: var(--piasek); }

/* --- Kalendarz (J-D2) --- */
.kal-pasek { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.przelacznik-widoku { display: inline-flex; gap: 4px; padding: 4px; border-radius: 40px; background: var(--piasek); box-shadow: var(--cien); }
.przelacznik-widoku > * { padding: 9px 22px; border-radius: 40px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tekst); white-space: nowrap; }
.przelacznik-widoku .aktywny { background: var(--marka); color: #fff; }
.przelacznik-widoku.maly { background: var(--piasek50); box-shadow: none; }
.przelacznik-widoku.maly > * { padding: 5px 12px; font-size: 11px; color: var(--tekst2); }
.przelacznik-widoku.maly .aktywny { color: #fff; }
.kal-tytul { justify-self: center; display: flex; align-items: baseline; gap: 25px; }
.kal-rok { font-size: 14px; font-weight: 500; color: var(--tekst2); }
.nawigacja-miesiaca { display: inline-flex; align-items: center; background: var(--piasek); border-radius: 40px; box-shadow: var(--cien); height: 44px; }
.nawigacja-miesiaca > a:first-child, .nawigacja-miesiaca > a:last-child { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--marka); border-radius: 50%; }
.nm-dzis { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 500; color: var(--tekst); }
.nm-dzis .ikona { color: var(--marka); }
.kal-filtry { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 18px 4px 8px; }
.filtr-kat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.filtr-kat[aria-pressed="false"] { opacity: .4; }
.kropka-kat { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.kat-spotkanie.kropka-kat { background: var(--marka); }
.kat-oddanie.kropka-kat { background: var(--lupek); }
.kat-zadanie.kropka-kat { background: var(--maslo); box-shadow: inset 0 0 0 1px var(--lupek); }
.kat-tworcza.kropka-kat { background: var(--mgla); box-shadow: inset 0 0 0 1px var(--lupek); }
.kat-prywatne.kropka-kat { background: #fff; box-shadow: inset 0 0 0 1.5px var(--lupek); }
.kal-sync { margin-left: auto; }
.kal-sync .chip { cursor: pointer; }
.siatka-miesiaca { overflow: hidden; }
.sm-dni-tyg { display: grid; grid-template-columns: repeat(7, 1fr); height: 46px; align-items: center; border-bottom: 1px solid var(--piasek); }
.sm-dni-tyg span { text-align: center; font-size: 13px; font-weight: 500; color: var(--tekst2); }
.sm-dni-tyg span.nd { color: var(--marka); }
.sm-tydzien { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 44px repeat(3, 31px) 31px; min-height: 141px; border-bottom: 1px solid var(--piasek); }
.sm-tydzien:last-child { border-bottom: 0; }
.sm-dzien { grid-row: 1 / -1; border-right: 1px solid var(--piasek); padding: 12px 14px 0 0; text-align: right; position: relative; transition: background .15s; }
.sm-dzien:nth-child(7) { border-right: 0; }
.sm-dzien:hover { background: var(--piasek50); }
.sm-dzien b { font-size: 16px; font-weight: 600; line-height: 24px; display: inline-flex; justify-content: center; min-width: 34px; }
.sm-dzien.poza { background: var(--piasek50); }
.sm-dzien.poza b { color: var(--tekst2); }
.sm-dzien.nd b { color: var(--marka); }
.sm-dzien.dzis { background: var(--marka-08); }
.sm-dzien.dzis b { background: var(--marka); color: #fff; border-radius: 50%; width: 34px; height: 34px; align-items: center; margin-top: -5px; margin-right: 6px; }
.sm-kropki { display: none; }
.wydarzenie { position: relative; z-index: 2; margin: 2.5px 6px; height: 26px; border-radius: 6px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 500; text-align: left; overflow: hidden; min-width: 0; }
.wydarzenie span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wydarzenie time { font-weight: 400; flex: none; }
.kat-spotkanie.wydarzenie, .kat-spotkanie .blok-karta { background: var(--marka); color: #fff; }
.kat-oddanie.wydarzenie, .kat-oddanie .blok-karta { background: var(--lupek); color: var(--tekst); }
.kat-zadanie.wydarzenie, .kat-zadanie .blok-karta { background: var(--maslo); color: var(--tekst); }
.kat-tworcza.wydarzenie, .kat-tworcza .blok-karta { background: var(--mgla); color: var(--tekst); }
.kat-prywatne.wydarzenie, .kat-prywatne .blok-karta { background: #fff; color: var(--tekst); box-shadow: inset 0 0 0 1.2px var(--lupek); }
.wydarzenie.wyrozniony, .blok.wyrozniony .blok-karta { box-shadow: inset 0 0 0 2px var(--tekst); }
.wydarzenie.ukryte, .blok.ukryte, .nad-wiersz.ukryte { display: none; }
.wiecej { z-index: 2; align-self: center; justify-self: start; margin-left: 6px; background: var(--marka); color: #fff; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 500; line-height: 16px; }
.widok-lista { padding: 8px 24px 24px; display: grid; gap: 0 20px; }
.widok-tydzien { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wl-dzien { padding: 16px 0; border-bottom: 1px solid var(--piasek); display: flex; flex-direction: column; gap: 10px; }
.wl-dzien h3 { font-size: 14px; font-weight: 600; }
.wl-dzien.dzis h3 { color: var(--marka); }
.blok { display: grid; grid-template-columns: 44px 1fr 32px; gap: 10px; align-items: center; }
.blok time { font-size: 11px; color: var(--tekst2); }
.blok-karta { border-radius: 16px; padding: 12px 18px; min-height: 66px; display: flex; flex-direction: column; justify-content: center; text-align: left; position: relative; overflow: hidden; }
.blok-karta strong { font-size: 14px; font-weight: 500; line-height: 22px; }
.blok-karta small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; opacity: .85; }
.blok-ok { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--obrys); color: transparent; display: inline-flex; align-items: center; justify-content: center; }
.blok-ok.tak { background: var(--marka); border-color: var(--marka); color: #fff; }
.nadchodzace { display: none; }
.szczegoly-wydarzenia { position: fixed; z-index: 70; width: 312px; overflow: hidden; box-shadow: var(--cien-duzy); }
.sw-naroznik { position: absolute; left: 0; top: 0; width: 26px; height: 26px; background: var(--lupek); clip-path: polygon(0 0, 100% 0, 0 100%); }
.sw-naroznik.kat-spotkanie { background: var(--marka); }
.sw-tresc { padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 18px; }
.sw-gora { display: flex; gap: 16px; align-items: center; }
.sw-gora > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw-gora strong { font-size: 16px; font-weight: 600; line-height: 24px; }
.sw-gora small { font-size: 14px; color: var(--tekst2); }
.sw-zamknij { align-self: flex-start; width: 28px; height: 28px; margin: -14px -12px 0 0; }
.sw-data { width: 55px; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--cien); text-align: center; flex: none; }
.sw-data span { display: block; background: var(--lupek); font-size: 11px; font-weight: 600; padding: 3px 0; }
.sw-data b { display: block; font-size: 28px; font-weight: 600; line-height: 34px; padding: 4px 0 6px; }
.sw-notatka b, .sw-termin b { font-size: 13px; font-weight: 500; display: block; margin-bottom: 6px; }
.sw-notatka p, .sw-termin p { font-size: 13px; color: var(--tekst2); line-height: 20px; }
.sw-termin { background: var(--piasek50); border-top: 1px solid var(--piasek); padding: 16px 24px 20px; }

/* --- Notatnik i mapa myśli (J-D3) --- */
.notatnik-edytor { min-height: 846px; display: flex; flex-direction: column; overflow: hidden; }
.zakladki { display: flex; align-items: center; gap: 28px; padding: 0 28px; height: 52px; border-bottom: 1px solid var(--piasek); flex: none; }
.zakladki a { height: 100%; display: inline-flex; align-items: center; font-size: 13px; color: var(--tekst2); position: relative; }
.zakladki a.aktywna { color: var(--tekst); font-weight: 600; }
.zakladki a.aktywna::after { content: ''; position: absolute; left: -8px; right: -8px; bottom: 0; height: 2px; background: var(--marka); }
.zapisano { margin-left: auto; font-size: 12px; color: var(--tekst2); }
.notatki-wrap { padding: 24px 28px; }
.siatka-notatek { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.notatka { border-radius: 12px; background: #fff; box-shadow: var(--cien); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform .15s; border: 1px solid transparent; }
.notatka:hover { transform: translateY(-2px); }
.notatka header { padding: 6px 12px; font-size: 11px; font-weight: 500; display: flex; justify-content: space-between; }
.notatka h3 { font-size: 16px; font-weight: 600; padding: 10px 12px 0; }
.notatka p { font-size: 12px; color: var(--tekst2); padding: 4px 12px 0; flex: 1; }
.notatka small { font-size: 11px; color: var(--tekst2); padding: 8px 12px 12px; }
.notatka.oz-spotkanie header { background: var(--marka); color: #fff; }
.notatka.oz-pomysl header { background: var(--mgla); }
.notatka.oz-oddanie header { background: var(--lupek); }
.notatka.oz-prywatne { border: 1px dashed var(--obrys); box-shadow: none; }
.notatka.oz-prywatne header { background: var(--piasek); }
.notatka.ukryta { display: none; }
.notatka-nowa { border: 1px dashed var(--lupek); box-shadow: none; align-items: center; justify-content: center; gap: 8px; color: var(--marka); font-weight: 500; min-height: 140px; flex-direction: row; }
.mapa-uklad { display: grid; grid-template-columns: 248px minmax(0, 1fr) 270px; flex: 1; min-height: 793px; }
.struktura { padding: 22px 24px; border-right: 1px solid var(--piasek); display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.wybor-mapy { display: inline-flex; gap: 8px; align-items: center; background: var(--piasek50); border-radius: 12px; padding: 9px 12px; font-size: 12px; font-weight: 500; }
.struktura .rozwijane-menu { left: 0; right: auto; }
.drzewo { display: flex; flex-direction: column; gap: 7px; }
.galaz { display: flex; align-items: center; gap: 8px; min-height: 36px; border: 1px solid var(--piasek); border-radius: 8px; padding: 9px 12px; font-size: 12px; background: #fff; text-align: left; position: relative; width: 100%; }
.galaz.poziom-0 { font-weight: 500; }
.galaz.aktywna { background: var(--marka-08); border: 1.5px solid var(--marka); font-weight: 500; }
.galaz.aktywna::after { content: ''; width: 10px; height: 12px; background: var(--marka); clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%); margin-left: auto; }
.galaz.prywatna { border-color: var(--lupek); }
.galaz-wrap { position: relative; }
.galaz-wrap[data-poziom="1"] { padding-left: 18px; }
.galaz-wrap[data-poziom="2"] { padding-left: 36px; }
.galaz-wrap[data-poziom="3"] { padding-left: 54px; }
.galaz-wrap:not([data-poziom="0"])::before { content: ''; position: absolute; left: calc(var(--p, 1) * 18px - 10px); top: -7px; width: 10px; height: 25px; border-left: 1px solid var(--piasek); border-bottom: 1px solid var(--piasek); }
.galaz-wrap[data-poziom="1"] { --p: 1; } .galaz-wrap[data-poziom="2"] { --p: 2; } .galaz-wrap[data-poziom="3"] { --p: 3; }
.plotno { position: relative; background: var(--piasek50); overflow: hidden; cursor: grab; }
.plotno.ciagniecie { cursor: grabbing; }
.plotno::before { content: ''; position: absolute; inset: 10px; background-image: radial-gradient(circle, #D8D2CA 1px, transparent 1.2px); background-size: 20px 20px; pointer-events: none; }
.plotno-wnetrze { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.polaczenia { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.polaczenia path { fill: none; stroke: #E5DFD7; stroke-width: 2; }
.wezel { position: absolute; width: 160px; min-height: 124px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--cien); cursor: pointer; display: flex; flex-direction: column; user-select: none; }
.wezel.zaznaczony { box-shadow: 0 0 0 2px var(--marka), var(--cien); }
.wezel header { height: 28px; padding: 0 12px; display: flex; align-items: center; font-size: 11px; font-weight: 500; background: var(--mgla); flex: none; }
.wezel.oz-projekt header { background: linear-gradient(rgba(23, 23, 23, .15), rgba(23, 23, 23, .15)), var(--marka); color: #fff; }
.wezel.oz-spotkanie header { background: var(--marka); color: #fff; }
.wezel.oz-oddanie header { background: var(--lupek); }
.wezel.oz-zadanie header { background: var(--maslo); }
.wezel.oz-prywatne { box-shadow: inset 0 0 0 1.2px var(--lupek); }
.wezel p { padding: 10px 12px; font-size: 12px; font-weight: 500; text-align: center; flex: 1; min-height: 48px; }
.wezel p.pusty { color: var(--tekst2); font-weight: 400; }
.wezel footer { background: var(--piasek50); border-top: 1px solid var(--piasek); padding: 11px 12px; font-size: 11px; color: var(--tekst2); text-align: center; }
.dodaj-galaz { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--lupek); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; z-index: 3; box-shadow: 0 0 0 2px #fff; }
.dodaj-galaz:hover { background: var(--marka); }
.plotno-narzedzia { position: absolute; left: 24px; bottom: 7px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; z-index: 5; }
.powiekszenie { display: inline-flex; align-items: center; gap: 12px; background: var(--piasek); border-radius: 40px; padding: 7px 12px; }
.powiekszenie button { font-size: 14px; font-weight: 500; width: 16px; }
.powiekszenie span { font-size: 12px; font-weight: 500; color: var(--tekst2); min-width: 32px; text-align: center; }
.edycja-wezla { padding: 22px 24px; border-left: 1px solid var(--piasek); display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.ew-gora { display: flex; align-items: center; gap: 8px; }
.ew-tytul { flex: 1; min-width: 0; font-size: 20px; font-weight: 600; border: 0; border-bottom: 1px dashed transparent; outline: none; padding: 0; }
.ew-tytul:focus { border-bottom-color: var(--obrys); }
.ew-etykieta { border: 0; padding: 4px 10px; font-size: 11px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ew-et { font-size: 13px; font-weight: 500; display: block; }
.kolory { display: flex; flex-direction: column; gap: 7px; counter-reset: kol; }
.kolory li { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 2px; counter-increment: kol; }
.kolory li::before { content: counter(kol, decimal-leading-zero); font-size: 11px; color: var(--tekst2); }
.kolor { display: flex; align-items: center; gap: 8px; height: 34px; border: 1px solid var(--piasek); border-radius: 10px; padding: 0 8px 0 10px; }
.kolor:focus-within { border: 1.5px solid var(--marka); }
.kolor input[type="color"] { width: 16px; height: 16px; border: 0; padding: 0; border-radius: 50%; overflow: hidden; background: none; cursor: pointer; flex: none; }
.kolor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.kolor input[type="color"]::-webkit-color-swatch { border: 1px solid var(--piasek); border-radius: 50%; }
.kolor input[type="text"] { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 12px; }
.kolor small { font-size: 11px; color: var(--tekst2); }
.kolor button { color: var(--marka); width: 14px; }
.edycja-wezla textarea { width: 100%; border: 1px solid var(--piasek); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: var(--tekst2); resize: vertical; outline: none; line-height: 16px; }
.edycja-wezla textarea:focus { border-color: var(--tekst); color: var(--tekst); }
.ew-tagi-pole { min-height: 34px; padding: 6px 12px; font-size: 12px; border-color: var(--piasek); }
.tagi { display: flex; flex-wrap: wrap; gap: 4px; }
.tagi span { background: var(--marka-08); border-radius: 40px; padding: 5px 10px; font-size: 11px; font-weight: 500; }
.lista-zadan, .lista-komentarzy { display: flex; flex-direction: column; gap: 8px; }
.lista-zadan label { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.lista-zadan .zrobione { text-decoration: line-through; color: var(--tekst2); }
.lista-komentarzy li { background: var(--piasek50); border-radius: 12px; padding: 8px 12px; font-size: 12px; }
.lista-komentarzy small { display: block; color: var(--tekst2); font-size: 10px; }
.nowe-zadanie { display: flex; gap: 8px; margin-top: 8px; }
.nowe-zadanie input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--obrys); border-radius: 12px; padding: 0 12px; font-size: 12px; outline: none; }
.mapa-uklad.prezentacja { position: fixed; inset: 0; z-index: 90; background: #fff; grid-template-columns: 1fr; }
.mapa-uklad.prezentacja .struktura, .mapa-uklad.prezentacja .edycja-wezla { display: none; }
.tagi-widok, .udostepnianie { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.tag-grupa h3 { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.tag-grupa small { color: var(--tekst2); font-weight: 400; font-size: 12px; }
.tag-grupa ul { margin: 8px 0 0 4px; display: flex; flex-direction: column; gap: 4px; }
.tag-grupa a { color: var(--marka); font-weight: 500; }
.tag-grupa li small { color: var(--tekst2); font-size: 11px; }

/* --- Finanse (J-D5) --- */
.finanse { display: grid; grid-template-columns: minmax(0, 680fr) minmax(0, 64fr) minmax(0, 352fr); gap: 16px; }
.fin-kpi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fin-kpi .kpi { padding: 18px; text-align: left; }
.kpi-gora { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tekst2); }
.kpi-roz .kpi-gora { color: #fff; }
.kolko, .kolko-ciemne { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--marka); flex: none; }
.kolko-ciemne { background: rgba(23, 23, 23, .15); color: #fff; }
.fin-kpi .kpi-w { margin-top: 6px; }
.fin-kpi .chip, .fin-kpi .chip-ciemny { position: absolute; right: 8px; top: 66px; padding: 3px 8px; font-size: 11px; }
.chip-ciemny { background: rgba(23, 23, 23, .15); color: #fff; border-radius: 40px; font-weight: 500; }
.fin-kpi .kpi-pod { margin-top: 6px; }
.kpi-duze .pasek-postepu { margin-top: 8px; }
.fin-wykres { grid-column: 1 / 3; padding: 20px 24px 16px; min-height: 330px; }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--tekst2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; }
.lg-przychod { background: rgba(219, 10, 95, .32); }
.lg-biezacy { background: var(--marka); }
.lg-koszty { background: var(--lupek); }
.wykres { position: relative; height: 230px; margin: 14px 0 0 0; }
.wykres-os { position: absolute; left: 44px; right: 0; height: 1px; background: var(--piasek); }
.wykres-os span { position: absolute; right: calc(100% + 8px); top: -7px; font-size: 10px; color: var(--tekst2); white-space: nowrap; }
.wykres-cel { position: absolute; left: 44px; right: 0; border-top: 2px solid var(--marka); z-index: 1; }
.wykres-cel span { position: absolute; left: 0; top: -9px; background: #fff; color: var(--marka); border-radius: 40px; padding: 2px 8px; font-size: 10px; font-weight: 500; }
.wykres-kolumny { position: absolute; left: 44px; right: 0; top: 0; bottom: 24px; display: flex; justify-content: space-around; align-items: flex-end; }
.wykres-mies { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 100%; cursor: pointer; }
.wykres-mies .s-p { width: 30px; border-radius: 8px 8px 0 0; background: var(--marka); opacity: .32; transition: opacity .15s; }
.wykres-mies.biezacy .s-p, .wykres-mies:hover .s-p { opacity: 1; }
.wykres-mies .s-k { width: 10px; border-radius: 4px 4px 0 0; background: var(--lupek); }
.wykres-mies b { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--tekst2); }
.wykres-mies.biezacy b { color: var(--tekst); }
.wykres-mies em { position: absolute; left: 0; width: 30px; text-align: center; font-style: normal; font-size: 11px; font-weight: 500; color: var(--tekst2); }
.wykres-mies.biezacy em { color: var(--marka); font-weight: 600; }
.dymek-wykresu { position: absolute; z-index: 4; background: #fff; border-radius: 12px; box-shadow: var(--cien-duzy); padding: 10px 12px; font-size: 11px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; min-width: 130px; }
.dymek-wykresu div { display: flex; justify-content: space-between; gap: 12px; color: var(--tekst2); }
.dymek-wykresu b { font-weight: 500; }
.fin-oferty { grid-column: 3; padding: 20px 24px; min-height: 330px; }
.wartosc-ofert { display: flex; justify-content: space-between; align-items: center; background: var(--piasek50); border-radius: 12px; padding: 8px 12px; margin: 14px 0 6px; font-size: 12px; color: var(--tekst2); }
.wartosc-ofert b { font-size: 13px; color: var(--tekst); }
.lista-ofert li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--piasek); }
.lista-ofert li:last-child { border-bottom: 0; }
.lista-ofert li.ukryta { display: none; }
.lista-ofert.wszystkie li.ukryta { display: flex; }
.of-otworz { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.of-otworz strong { font-size: 14px; font-weight: 500; }
.of-otworz span { font-size: 12px; color: var(--tekst2); }
.of-otworz small { font-size: 11px; color: var(--tekst2); }
.of-prawa { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.of-prawa b { font-size: 16px; font-weight: 500; white-space: nowrap; }
.fin-faktury { grid-column: 1 / 3; padding: 20px 24px; min-height: 360px; }
.filtry-faktur { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filtr-pigulka { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 40px; background: var(--piasek50); font-size: 11px; font-weight: 500; }
.filtr-pigulka i { font-style: normal; background: #fff; color: var(--tekst2); border-radius: 40px; padding: 1px 6px; font-size: 10px; font-weight: 600; }
.filtr-pigulka.aktywny { background: var(--marka); color: #fff; }
.filtr-pigulka.aktywny i { background: rgba(23, 23, 23, .15); color: #fff; }
.maly-plus { width: 26px; height: 26px; background: var(--piasek50); }
.tabela-faktur { margin-top: 22px; }
.tf-naglowek, .tf-wiersz { display: grid; grid-template-columns: 86px minmax(0, 1fr) 90px 92px minmax(0, 200px) 28px; gap: 8px; align-items: center; padding: 0 12px; }
.tf-naglowek { background: var(--piasek50); border-radius: 10px; height: 32px; font-size: 11px; font-weight: 600; color: var(--tekst2); letter-spacing: .02em; }
.tf-naglowek .pr { text-align: right; }
.tf-wiersz { min-height: 56px; border-bottom: 1px solid var(--piasek); }
.tf-wiersz.alarm { background: var(--marka-08); border-radius: 12px; border-bottom-color: transparent; }
.tf-wiersz.ukryty { display: none; }
.tf-nr { font-size: 12px; font-weight: 500; }
.tf-klient, .tf-termin { display: flex; flex-direction: column; min-width: 0; }
.tf-klient strong { font-size: 13px; font-weight: 500; }
.tf-klient small, .tf-termin small { font-size: 11px; color: var(--tekst2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-termin b { font-size: 12px; font-weight: 400; }
.tf-kwota { font-size: 13px; font-weight: 600; text-align: right; }
.tf-status { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wiecej-akcji { width: 28px; height: 28px; border-radius: 50%; background: var(--piasek50); font-size: 12px; color: var(--tekst2); letter-spacing: 1px; }
.tf-suma { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 12px 0; font-size: 12px; }
.tf-suma b { font-weight: 500; }
.tf-suma span { color: var(--tekst2); }
.fin-terminy { grid-column: 3; padding: 20px 24px 24px; min-height: 360px; display: flex; flex-direction: column; }
.lista-terminow { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; flex: 1; }
.lista-terminow li { display: flex; gap: 12px; align-items: center; }
.lista-terminow li > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lista-terminow strong { font-size: 13px; font-weight: 500; }
.lista-terminow small { font-size: 11px; color: var(--tekst2); }
.lista-terminow .ikona-przycisk { width: 28px; height: 28px; }
.data-kafel { width: 44px; height: 48px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; color: var(--tekst2); }
.data-kafel b { font-size: 16px; font-weight: 600; line-height: 24px; }
.data-kafel small { font-size: 11px; font-weight: 600; line-height: 16px; }
.k-mgla { background: var(--mgla); } .k-maslo { background: var(--maslo); } .k-roz { background: var(--roz-pastel); color: var(--tekst); } .k-piasek { background: var(--piasek); }
.przypomnienia { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--piasek50); border-radius: 12px; padding: 10px 14px; font-size: 12px; margin-top: 16px; }
.przypomnienia .przelacznik i { width: 36px; height: 20px; border-radius: 10px; }
.przypomnienia .przelacznik i::after { width: 16px; height: 16px; }
.przypomnienia .przelacznik input:checked + i::after { left: 18px; }
.pozycje { display: flex; flex-direction: column; gap: 6px; }
.pozycja { display: grid; grid-template-columns: 1fr 100px 28px; gap: 6px; }
.pozycja input { min-height: 38px; border: 1px solid var(--obrys); border-radius: 12px; padding: 6px 12px; font-size: 13px; outline: none; }
.pozycja button { color: var(--marka); }
.suma-ofert { font-size: 13px; text-align: right; }

/* --- Pliki (J-D7 / J-D7b) --- */
.pliki { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 16px; }
.drzewo-dysku { padding: 22px 16px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 846px; }
.drzewo-dysku .h2 { padding-left: 6px; margin-bottom: 8px; }
.szukaj-maly { display: flex; align-items: center; gap: 8px; height: 36px; border: 1px solid var(--obrys); border-radius: 12px; padding: 0 12px; font-size: 12px; color: var(--tekst); margin-bottom: 10px; }
.szukaj-maly input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 12px; }
.dd-glowny { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 500; }
.dd-glowny span { flex: 1; }
.dd-glowny.aktywny { background: var(--marka); color: #fff; }
.dd-galezie { display: flex; flex-direction: column; gap: 6px; margin-left: 14px; padding-left: 16px; border-left: 1px solid var(--piasek); }
.dd-galezie a { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border-radius: 10px; font-size: 12px; }
.dd-galezie a.aktywny { background: var(--marka-08); font-weight: 500; }
.dd-galezie i { font-style: normal; background: #fff; color: var(--marka); font-size: 10px; font-weight: 500; border-radius: 40px; padding: 2px 7px; }
.drzewo-dysku .linia { margin: 10px 0; }
.drzewo-dysku .nadtytul { padding: 8px 6px 2px; }
.dd-folder { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px; border-radius: 10px; font-size: 13px; font-weight: 500; }
.dd-folder:hover { background: var(--piasek50); }
.dd-folder span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-folder i { font-style: normal; font-size: 10px; color: var(--tekst2); font-weight: 400; }
.dd-folder .ikona { color: var(--marka); }
.nowy-folder { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--lupek); font-size: 13px; font-weight: 500; margin-top: 12px; }
.nowy-folder span { width: 20px; height: 20px; border-radius: 50%; background: var(--marka); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.miejsce-na-dysku { margin-top: auto; background: var(--marka); color: #fff; border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.miejsce-na-dysku strong { font-size: 16px; font-weight: 600; margin-top: 4px; }
.miejsce-na-dysku p { font-size: 11px; line-height: 16px; }
.miejsce-na-dysku .przycisk-bialy { margin-top: 6px; }
.dysk-przeglad { padding: 20px 24px 24px; min-width: 0; }
.dp-gora { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dp-ikona { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--marka); }
.dp-konto { display: grid; grid-template-columns: auto auto; gap: 4px 6px; align-items: center; margin-right: auto; }
.dp-konto strong { font-size: 14px; font-weight: 500; }
.dp-gb { font-size: 11px; font-weight: 500; color: var(--tekst2); }
.dp-konto .pasek-postepu { grid-column: 1 / -1; width: 240px; }
.dp-konto .pasek-postepu i { background: var(--marka); }
.dp-konto > small:last-child { grid-column: 1 / -1; font-size: 11px; color: var(--tekst2); }
.okruszki { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; padding-bottom: 12px; font-size: 13px; color: var(--tekst2); flex-wrap: wrap; border-bottom: 1px solid var(--piasek); margin-left: -24px; margin-right: -24px; padding-left: 24px; }
.okruszki i { font-style: normal; color: var(--tekst); }
.okruszki b { color: var(--tekst); font-weight: 500; }
.dysk-przeglad .h3 { margin: 18px 0 8px; }
.podglady { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.podglad-kartka { display: block; position: relative; height: 112px; border-radius: 12px; background: var(--piasek50); overflow: hidden; padding: 20px 30px 0; }
.podglad.wyrozniony .podglad-kartka { box-shadow: inset 0 0 0 1.5px var(--marka); }
.podglad-kartka::before { content: ''; position: absolute; left: 30px; right: 30px; top: 20px; height: 100px; border-radius: 12px; background: #fff; }
.podglad-kartka .ext { position: absolute; left: 46px; top: 34px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; }
.ext-pdf { background: var(--marka); color: #fff; } .ext-jpg { background: var(--mgla); }
.podglad-kartka i { position: absolute; height: 6px; border-radius: 3px; background: var(--piasek); left: 46px; }
.podglad-kartka i:nth-of-type(1) { left: 90px; top: 42px; width: 90px; } .podglad-kartka i:nth-of-type(2) { top: 72px; width: 60%; } .podglad-kartka i:nth-of-type(3) { top: 84px; width: 45%; } .podglad-kartka i:nth-of-type(4) { top: 96px; width: 55%; }
.podglad-kartka .przycisk-czarny { position: absolute; right: 38px; top: 34px; opacity: 0; transition: opacity .15s; }
.podglad-kartka:hover .przycisk-czarny, .podglad.wyrozniony .przycisk-czarny { opacity: 1; }
.podglad-opis { display: flex; flex-direction: column; padding: 10px 2px 0; }
.podglad-opis strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podglad-opis small { font-size: 11px; color: var(--tekst2); }
.dysk-przeglad > .sekcja-gora { justify-content: flex-start; margin-top: 18px; }
.dysk-przeglad > .sekcja-gora .h3 { margin: 0; }
.teczki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 10px 0 22px; }
.teczka { position: relative; min-height: 146px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: var(--cien); padding: 42px 14px 12px; display: flex; flex-direction: column; margin-top: 20px; }
.teczka::before { content: ''; position: absolute; left: 0; top: -14px; width: 70px; height: 22px; border-radius: 12px 12px 0 0; background: inherit; }
.teczka::after { content: ''; position: absolute; left: 43px; right: 10px; top: -20px; height: 22px; border-radius: 10px; background: var(--piasek); z-index: -1; }
.teczka.roz { background: var(--marka); color: #fff; }
.teczka.roz::after { background: var(--marka-08); }
.teczka-ikona { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--marka); position: absolute; top: 42px; left: 14px; }
.teczka.roz .teczka-ikona { background: rgba(23, 23, 23, .15); color: #fff; }
.teczka strong { margin-top: 40px; font-size: 14px; font-weight: 500; }
.teczka small { font-size: 11px; opacity: .75; }
.teczka-osoby { display: flex; align-items: center; margin-top: 4px; }
.teczka-osoby .awatar + .awatar { margin-left: -6px; }
.teczka-osoby em { font-style: normal; font-size: 10px; font-weight: 500; margin-left: 6px; }
.pliki-filtry { margin-bottom: 14px; flex-wrap: wrap; background: var(--piasek50); box-shadow: none; }
.pliki-filtry > * { padding: 7px 14px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--tekst2); }
.pliki-filtry .aktywny { background: #fff; color: var(--tekst); font-weight: 500; }
.kolko-roz { width: 16px; height: 16px; border-radius: 50%; background: var(--marka); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.tabela-plikow { display: flex; flex-direction: column; }
.tp-naglowek, .tp-wiersz { display: grid; grid-template-columns: 30px minmax(0, 1fr) 120px 92px 90px 130px; gap: 8px; align-items: center; padding: 0 12px; }
.tp-naglowek { background: var(--piasek50); border-radius: 10px; height: 36px; font-size: 11px; font-weight: 600; color: var(--tekst2); }
.tp-wiersz { min-height: 48px; padding-top: 7px; padding-bottom: 7px; font-size: 12px; }
.tp-wiersz.zaznaczony { background: var(--marka-08); border-radius: 12px; }
.tp-wiersz.ukryty { display: none; }
.kwadracik { position: relative; display: inline-flex; }
.kwadracik input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.kwadracik i { width: 18px; height: 18px; border-radius: 5px; border: 1.2px solid var(--piasek); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.tp-naglowek .kwadracik { width: 18px; height: 18px; border-radius: 5px; border: 1.2px solid var(--piasek); background: #fff; }
.kwadracik input:checked + i { background: var(--marka); border-color: var(--marka); color: #fff; }
.tp-nazwa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-nazwa > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tp-nazwa strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-nazwa small { font-size: 11px; color: var(--tekst2); }
.ext-kafel { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--piasek); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex: none; background: #fff; }
.tp-osoby { display: flex; }
.tp-akcje { display: flex; align-items: center; gap: 4px; }
.tp-akcje .chip { cursor: pointer; }
.tp-akcje .ikona-przycisk { width: 30px; height: 30px; opacity: .5; }
.tp-wiersz:hover .tp-akcje .ikona-przycisk { opacity: 1; }
.sciezka { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 20px; height: 56px; color: var(--marka); flex-wrap: wrap; }
.sciezka .podpis { color: var(--tekst2); font-size: 13px; }
.sciezka b { color: var(--tekst); font-weight: 500; font-size: 13px; }
.sciezka-prawa { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--tekst); font-size: 12px; }
.etapy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.etap-kolumna { padding: 18px 16px 16px; min-height: 774px; display: flex; flex-direction: column; position: relative; }
.etap-kolumna:not(:last-child)::after { content: ''; position: absolute; right: -26px; top: 350px; width: 32px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M7.125 4.5L11.625 9L7.125 13.5' fill='none' stroke='%23DB0A5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; z-index: 2; }
.etap-w_trakcie { background: var(--maslo); }
.etap-finalny { background: var(--mgla); }
.etap-kolumna header { position: relative; padding: 0 6px 16px; display: flex; flex-direction: column; }
.etap-nr { font-size: 28px; font-weight: 600; line-height: 34px; color: var(--tekst2); }
.etap-licznik { position: absolute; right: 6px; top: 4px; width: 46px; height: 26px; border-radius: 40px; background: #fff; color: var(--marka); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.etap-finalny .etap-licznik { background: var(--marka); color: #fff; }
.etap-kolumna h2 { margin-top: 8px; }
.etap-kolumna header small { font-size: 12px; color: var(--tekst2); }
.oznaczenie-nowe { display: inline-flex; align-items: center; gap: 4px; background: var(--mgla); border-radius: 40px; padding: 3px 8px; font-size: 9px; font-weight: 600; position: absolute; right: 0; bottom: 18px; }
.oznaczenie-nowe i { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.oznaczenie-nowe.maly { right: 40px; top: 10px; bottom: auto; }
.etap-postep { display: flex; align-items: center; gap: 12px; padding: 0 6px 12px; font-size: 11px; }
.etap-postep b { font-weight: 500; white-space: nowrap; }
.etap-postep .pasek-postepu { flex: 1; }
.pliki-etapu { display: flex; flex-direction: column; gap: 10px; }
.plik-karta { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; background: #fff; border-radius: 12px; padding: 12px 36px 8px 12px; min-height: 76px; }
.plik-ikona { grid-row: 1 / 4; width: 52px; height: 52px; border-radius: 12px; background: var(--piasek50); display: flex; align-items: center; justify-content: center; }
.plik-ikona.obraz { background: var(--piasek); }
.plik-karta strong { font-size: 12px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.plik-karta.zablokowany strong { color: var(--tekst2); }
.plik-karta small { font-size: 11px; color: var(--tekst2); }
.plik-autor { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--tekst2); }
.plik-menu { position: absolute; right: 4px; top: 22px; }
.plik-menu .ikona-przycisk { width: 30px; height: 30px; }
.strefa { display: flex; align-items: center; gap: 14px; text-align: left; border: 1px dashed var(--piasek); border-radius: 12px; padding: 16px; margin-top: 16px; color: var(--marka); width: 100%; }
.strefa span { display: flex; flex-direction: column; }
.strefa strong { font-size: 12px; font-weight: 500; }
.strefa small { font-size: 11px; color: var(--tekst2); }
.etap-w_trakcie .strefa, .etap-od_klienta .strefa { border-color: #E7DFD2; }
.strefa-lupek { border: 1px solid var(--lupek); color: var(--tekst); }
.strefa-lupek strong { color: var(--tekst); }
.etap-dol { margin-top: auto; padding-top: 16px; }
.etap-dol .przycisk { min-height: 46px; border-radius: 24px; }
.strefa-upuszczania { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 1.5px dashed var(--lupek); border-radius: 16px; color: var(--marka); cursor: pointer; text-align: center; }
.strefa-upuszczania.nad { background: var(--marka-08); border-color: var(--marka); }
.strefa-upuszczania small { color: var(--tekst2); }
.strefa-upuszczania input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wybrane-pliki { font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.wybrane-pliki li { background: var(--piasek50); border-radius: 8px; padding: 6px 10px; }

/* --- Wiadomości (J-D8) – Outfit jak w makiecie --- */
.wiadomosci { display: grid; grid-template-columns: 240px 320px minmax(0, 1fr); gap: 16px; font-family: 'Outfit', var(--font); align-items: start; }
.wiadomosci .karta { border-radius: 22px; box-shadow: none; border: 1px solid #F1F1F1; }
.lista-rozmow { min-height: 846px; padding: 20px 0; overflow: hidden; }
.nowa-rozmowa { display: inline-flex; align-items: center; gap: 12px; margin: 0 20px; padding: 10px 20px 10px 12px; border-radius: 16px; background: #fff; box-shadow: var(--cien); font-size: 13px; font-weight: 500; }
.nowa-rozmowa span { width: 32px; height: 32px; border-radius: 50%; background: #FDE4EE; color: var(--marka); display: inline-flex; align-items: center; justify-content: center; }
.lista-rozmow .h-lekki { margin: 18px 24px 12px; }
.szukaj-rozmow { display: flex; align-items: center; gap: 8px; margin: 0 20px 20px; background: #FAF8F5; border-radius: 40px; padding: 10px 14px; color: var(--szary); }
.szukaj-rozmow input { border: 0; outline: 0; background: transparent; font-size: 12px; flex: 1; min-width: 0; font-family: inherit; }
.rozmowa { display: flex; gap: 12px; align-items: flex-start; padding: 14px 20px 14px 18px; min-height: 64px; position: relative; }
.rozmowa:hover { background: #FFF5F9; }
.rozmowa.aktywna { background: #FFF5F9; }
.rozmowa.aktywna::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--marka); }
.rozmowa .awatar { font-family: var(--font); }
.r-teksty { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.r-teksty strong { font-size: 13px; font-weight: 500; }
.rozmowa.nieprzeczytana strong { font-weight: 600; }
.r-teksty small { font-size: 12px; color: var(--szary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-ostatnia { display: none; }
.r-prawa { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.r-prawa time { font-size: 11px; color: var(--szary); }
.rozmowa.nieprzeczytana time { color: var(--marka); }
.r-prawa i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--marka); color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.rozmowa.ukryta { display: none; }
.kolumna-klienta { display: flex; flex-direction: column; gap: 16px; }
.o-kliencie { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.o-kliencie .h-lekki { font-size: 26px; }
.nadtytul-lekki { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--szary); margin-top: 16px; }
.o-tekst { font-size: 12px; line-height: 1.3; }
.chip-o { background: var(--piasek); color: var(--marka-ciemna); border-radius: 40px; padding: 6px 12px; font-size: 11px; font-weight: 500; }
.chip-o.mgla { background: var(--mgla); }
.o-kliencie .chipy { margin-top: 14px; }
.harmonogram { padding: 20px 24px 24px; min-height: 595px; display: flex; flex-direction: column; gap: 10px; }
.harmonogram .pasek-postepu { margin-bottom: 20px; }
.os-harmonogram { gap: 24px; margin-top: 8px; }
.os-harmonogram::before { top: 12px; bottom: 40px; background: #E5DFD7; }
.os-harmonogram .etap-tekst strong { color: var(--marka); font-size: 15px; }
.os-harmonogram .etap-tekst small { color: var(--szary); }
.czat { padding: 24px 20px 20px; min-height: 846px; display: flex; flex-direction: column; position: relative; }
.czat-gora { display: flex; align-items: center; gap: 10px; }
.czat-gora strong { font-size: 16px; font-weight: 600; }
.czat-gora small { display: block; font-size: 12px; color: var(--szary); }
.online { font-size: 12px; color: var(--szary); margin-left: 6px; }
.online::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2E6B3F; margin-right: 4px; }
.online.off::before { background: #C9CFD4; }
.czat-akcje { margin-left: auto; display: flex; gap: 6px; }
.tematy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 18px; max-width: calc(100% - 230px); }
.tematy .nadtytul-lekki { width: 100%; margin: 0; }
.temat { display: inline-flex; align-items: center; gap: 6px; background: #FDE4EE; color: var(--marka-ciemna); border-radius: 40px; padding: 6px 12px; font-size: 11px; font-weight: 500; }
.temat.aktywny { background: var(--marka); color: #fff; }
.temat i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: var(--marka-ciemna); color: #fff; font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }
.temat.dodaj { background: #fff; border: 1px solid #C9CFD4; color: var(--szary); }
.wideo-panel { position: absolute; right: 16px; top: 16px; width: 214px; height: 212px; border-radius: 18px; background: #4A545C; color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 16px; text-align: center; }
.wideo-panel strong { font-size: 14px; font-weight: 500; margin-top: 10px; }
.wideo-panel small { font-size: 11px; margin-top: 4px; }
.sterowanie { margin-top: auto; margin-bottom: 19px; display: flex; align-items: center; gap: 2px; background: #5D6870; border-radius: 40px; padding: 4px 4px 4px 6px; }
.sterowanie span { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.sterowanie .ikona { width: 16px; height: 16px; }
.dolacz { background: #557487; border-radius: 40px; padding: 8px 16px; font-size: 12px; font-weight: 500; }
.czat-wiadomosci { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 30px 0 16px; overflow-y: auto; max-height: 560px; min-height: 260px; }
.wiad { display: flex; align-items: flex-end; gap: 12px; }
.wiad.moja { justify-content: flex-end; }
.wiad .awatar { font-family: var(--font); }
.dymek { max-width: 352px; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 23, .06), 0 4px 14px rgba(23, 23, 23, .05); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.wiad.moja .dymek { background: var(--marka); color: #fff; border-radius: 18px 18px 4px 18px; }
.dymek p { font-size: 13px; line-height: 16px; white-space: pre-wrap; word-wrap: break-word; }
.dymek time { font-size: 10px; color: var(--szary); }
.wiad.moja .dymek time { color: #fff; }
.wiad-plik { margin-left: 44px; display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: center; background: var(--mgla); border: 1px solid #D5DADD; border-radius: 16px; padding: 16px 14px; }
.wp-ikona { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--tekst); }
.wiad-plik strong { font-size: 13px; font-weight: 500; color: var(--marka-ciemna); display: block; }
.wiad-plik small { font-size: 11px; color: var(--szary); }
.wiad-plik time { grid-column: 3; font-size: 10px; color: var(--szary); text-align: right; }
.wiad.ukryta, .wiad-plik.ukryta { display: none; }
.notatki-rozmowy { background: var(--mgla); border-radius: 16px; padding: 12px 16px 14px; margin-bottom: 12px; }
.nr-gora { display: flex; align-items: center; gap: 8px; color: var(--marka-ciemna); font-size: 13px; flex-wrap: wrap; }
.nr-gora b { font-weight: 500; }
.nr-gora small { font-size: 11px; color: #4A545C; }
.nr-gora .przycisk-obrys { margin-left: auto; }
.notatki-rozmowy textarea { width: 100%; border: 0; background: transparent; resize: vertical; font-size: 12px; font-family: inherit; outline: none; margin-top: 6px; line-height: 1.3; min-height: 34px; }
.pole-wiadomosci { display: flex; align-items: center; gap: 10px; background: #FAF8F5; border-radius: 40px; padding: 8px 8px 8px 12px; }
.pole-wiadomosci input:not([type="file"]) { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; font-family: inherit; }
.pole-wiadomosci .ikona-przycisk { color: var(--szary); width: 30px; height: 30px; cursor: pointer; }
.wyslij { width: 40px; height: 40px; border-radius: 50%; background: var(--marka); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.czat-pusty { display: flex; align-items: center; justify-content: center; }
.lista-wyboru { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.lista-wyboru a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.lista-wyboru a:hover { background: var(--piasek50); }
.lista-wyboru span { display: flex; flex-direction: column; font-size: 13px; }
.lista-wyboru small { color: var(--tekst2); font-size: 11px; }

/* --- Projekty, klienci, ustawienia --- */
.lista-projektow.szeroka { max-width: 1112px; }
.projekt-szczegoly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ps-dane, .ps-etapy, .ps-finanse { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.ps-dane { grid-row: span 2; }
.formularz-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formularz-siatka .wiersz-przyciskow, .formularz-siatka .sila-hasla { grid-column: 1 / -1; }
.lista-etapow { display: flex; flex-direction: column; gap: 8px; }
.lista-etapow li { display: grid; grid-template-columns: 130px 1fr 150px 36px; gap: 8px; align-items: center; }
.lista-etapow input, .lista-etapow select, .nowe-zadanie input[type="date"] { height: 38px; border: 1px solid var(--obrys); border-radius: 12px; padding: 0 10px; font-size: 13px; background: #fff; min-width: 0; }
.lista-etapow li.st-done select { background: var(--marka); color: #fff; border-color: var(--marka); }
.lista-etapow li.st-current select { background: var(--lupek); border-color: var(--lupek); }
.zapytania { padding: 24px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 16px; }
.zapytanie { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: start; padding-top: 14px; border-top: 1px solid var(--piasek); }
.zapytanie p { font-size: 13px; margin: 4px 0; }
.zapytanie small { color: var(--tekst2); font-size: 11px; }
.siatka-klientow { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.klient-karta { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.klient-karta header { display: flex; gap: 12px; align-items: center; }
.klient-karta header div { flex: 1; min-width: 0; }
.klient-karta h3 { font-size: 16px; font-weight: 600; }
.klient-karta header small { font-size: 12px; color: var(--tekst2); }
.kk-kontakt { font-size: 12px; word-break: break-all; }
.kk-kontakt a { color: var(--marka); }
.kk-portal { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: var(--piasek50); border-radius: 14px; padding: 12px; }
.klient-karta footer { margin-top: auto; }
.klient-karta.nowy { align-items: center; justify-content: center; flex-direction: row; gap: 8px; color: var(--marka); font-weight: 500; border: 1px dashed var(--lupek); box-shadow: none; min-height: 200px; }
.ustawienia { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 20px; align-items: start; }
.ustawienia > .karta { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.ustawienia code { background: var(--piasek); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.dostepnosc-form { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.dostepnosc-form > .pole-m:not(.maly) { grid-column: 1 / 5; }
.dostepnosc-form > .przycisk { grid-column: 5 / -1; }

/* --- Portal klienta (J-D6 / J-M6) --- */
body.portal { background: #fff; overflow-x: hidden; }
.portal-dekor { position: fixed; right: -160px; bottom: -96px; width: 420px; height: 420px; border-radius: 50%; background: var(--piasek); z-index: -1; }
.portal-nawigacja { margin: 28px 40px 0; height: 72px; border-radius: 36px; background: #fff; box-shadow: var(--cien); display: flex; align-items: center; padding: 0 20px 0 29px; gap: 14px; }
.portal-nawigacja nav { display: flex; gap: 10px; margin-left: auto; margin-right: auto; }
.portal-nawigacja nav a { padding: 10px 18px; border-radius: 20px; font-size: 13px; }
.portal-nawigacja nav a.aktywny { background: var(--piasek50); font-weight: 500; }
.portal-nawigacja .licznik { font-style: normal; background: var(--marka); color: #fff; border-radius: 40px; padding: 1px 6px; font-size: 10px; }
.portal-profil > button { display: flex; align-items: center; gap: 12px; text-align: right; }
.portal-profil span { display: flex; flex-direction: column; }
.portal-profil strong { font-size: 13px; font-weight: 500; }
.portal-profil small { font-size: 11px; color: var(--tekst2); }
.portal-tresc { padding: 34px 72px 40px; max-width: 1440px; }
.portal-powitanie { position: relative; margin-bottom: 26px; }
.portal-powitanie .h1 { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.portal-powitanie .skrypt { font-size: 70px; line-height: 60px; }
.status-dostepnosci { display: inline-flex; align-items: center; gap: 7px; background: var(--piasek); border-radius: 20px; padding: 6px 14px 6px 10px; font-size: 12px; font-weight: 500; margin-top: 10px; }
.status-dostepnosci i { width: 8px; height: 8px; border-radius: 50%; background: #7FAE8E; }
.status-dostepnosci i.off { background: var(--lupek); }
.portal-siatka { display: grid; grid-template-columns: minmax(0, 820fr) minmax(0, 460fr); gap: 16px; align-items: start; }
.status-projektu { padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 22px; }
.sp-gora { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sp-gora .h1 { font-size: 30px; color: var(--tekst); }
.kroki-projektu { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.kroki-projektu li { display: flex; flex-direction: column; gap: 4px; position: relative; }
.kroki-projektu li:not(:last-child)::after { content: ''; position: absolute; left: 38px; right: 8px; top: 14px; height: 1px; background: var(--piasek); }
.kroki-projektu li.kp-done:not(:last-child)::after { background: var(--marka); }
.kp-kolko { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.2px solid var(--piasek); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 8px; }
.kp-done .kp-kolko { background: var(--marka); border-color: var(--marka); }
.kp-current .kp-kolko { background: var(--lupek); border-color: var(--lupek); }
.kroki-projektu strong { font-size: 14px; font-weight: 400; color: var(--marka); }
.kp-current strong { font-weight: 500; }
.kroki-projektu small { font-size: 12px; color: var(--tekst2); }
.najblizsze-spotkanie { display: flex; align-items: center; gap: 14px; background: var(--marka); color: #fff; border-radius: 12px; padding: 14px 16px; }
.ns-ikona { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.najblizsze-spotkanie div { flex: 1; display: flex; flex-direction: column; }
.najblizsze-spotkanie strong { font-size: 14px; font-weight: 500; }
.najblizsze-spotkanie small { font-size: 12px; }
.najblizsze-spotkanie .przycisk-bialy { min-width: 108px; height: 36px; font-size: 13px; }
.godziny-dostepnosci { padding: 14px 20px 16px; grid-column: 2; grid-row: 1; }
.dni-dostepnosci { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.dd { background: var(--mgla); border-radius: 14px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dd small { font-size: 11px; font-weight: 500; color: var(--tekst2); }
.dd b { font-size: 13px; font-weight: 600; }
.dd.dzis { background: var(--marka); color: #fff; }
.dd.dzis small { color: #fff; }
.dd.wolne { background: var(--piasek50); }
.dd.wolne b { color: var(--tekst2); }
.oferta-akceptacja { padding: 26px 28px 20px; display: flex; flex-direction: column; gap: 6px; grid-column: 2; grid-row: 2 / span 2; }
.oferta-akceptacja .h2 { margin-top: 2px; }
.pozycje-oferty { margin: 22px 0 10px; border-top: 1px solid var(--piasek); }
.pozycje-oferty li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--piasek); font-size: 14px; }
.pozycje-oferty li b { font-weight: 500; white-space: nowrap; }
.pozycje-oferty li.razem { border-bottom: 0; border-top: 1px solid var(--marka); margin-top: -1px; align-items: baseline; }
.pozycje-oferty li.razem span { color: var(--tekst2); }
.pozycje-oferty li.razem b { font-size: 28px; font-weight: 600; }
.cytat { display: flex; gap: 10px; background: var(--piasek50); border-radius: 12px; padding: 12px 14px; font-size: 12px; margin-bottom: 12px; }
.cytat .ikona { color: var(--marka); }
.zmiany summary { text-align: center; font-size: 13px; font-weight: 500; color: var(--tekst2); cursor: pointer; padding: 10px; list-style: none; }
.zmiany summary::-webkit-details-marker { display: none; }
.zmiany form { display: flex; flex-direction: column; gap: 8px; }
.zmiany textarea { border: 1px solid var(--obrys); border-radius: 12px; padding: 10px; font-size: 13px; }
.nowe-zlecenie-portal { padding: 24px 28px 30px; grid-column: 1; }
.nz-form { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 256fr); gap: 20px 28px; margin-top: 18px; }
.nz-lewa, .nz-prawa { display: flex; flex-direction: column; gap: 8px; }
.nz-lewa .nadtytul:not(:first-child), .nz-prawa .nadtytul:not(:first-child) { margin-top: 16px; }
.nz-form .chip-radio span { font-size: 12px; padding: 7px 14px; }
.nz-form textarea { background: var(--piasek50); border: 0; border-radius: 12px; padding: 14px 16px; font-size: 13px; min-height: 96px; resize: vertical; outline: none; }
.nz-form textarea:focus { box-shadow: 0 0 0 1px var(--tekst); }
.pole-ikona { display: flex; align-items: center; gap: 10px; height: 44px; border: 1px solid var(--obrys); border-radius: 12px; padding: 0 14px; color: var(--marka); cursor: pointer; }
.pole-ikona input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 13px; color: var(--tekst); background: transparent; }
.pole-ikona.wgraj { border-color: var(--piasek); font-size: 12px; }
.pole-ikona.wgraj span { color: var(--tekst2); }
.nz-form > .przycisk { justify-self: start; }
.wiadomosci-skrot { padding: 20px 28px 16px; grid-column: 2; display: flex; flex-direction: column; gap: 16px; }
.ws-wiad { display: flex; gap: 10px; align-items: flex-start; }
.ws-wiad > div { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.ws-wiad strong { font-size: 14px; font-weight: 500; }
.ws-wiad time { font-size: 11px; color: var(--tekst2); }
.dymek-szary { grid-column: 1 / -1; background: var(--piasek50); border-radius: 6px 16px 16px 16px; padding: 8px 14px; font-size: 12px; }
.ws-pole { display: flex; align-items: center; background: var(--piasek50); border: 1px solid var(--piasek); border-radius: 22px; height: 44px; padding: 0 6px 0 18px; }
.ws-pole input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; min-width: 0; }
.ws-pole button { width: 32px; height: 32px; border-radius: 50%; background: var(--marka); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wspolne-pomysly { padding: 24px 28px; grid-column: 1 / -1; }
.wspolne-pomysly ul { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.wspolne-pomysly a { display: inline-flex; gap: 8px; align-items: center; }
.portal-h { margin-bottom: 20px; color: var(--tekst); }
.portal-lista { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.portal-lista .oferta-akceptacja { grid-column: auto; }
.portal-lista > .karta:not(.oferta-akceptacja) { padding: 20px 24px; }
.plik-wiersz { display: flex; align-items: center; gap: 14px; padding: 14px 18px !important; color: var(--tekst); }
.plik-wiersz span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.plik-wiersz small { font-size: 11px; color: var(--tekst2); }
.plik-wiersz .ikona { color: var(--marka); }
.portal-czat { max-width: 820px; min-height: 70vh; }
.portal-dolna { display: none; }
.mapa-lista { padding-left: 24px; border-left: 1px solid var(--piasek); display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.wezel-ro { padding: 12px 16px; max-width: 420px; }
.wezel-ro p { font-size: 12px; color: var(--tekst2); }
.kolory-ro { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; }
.kolory-ro span { display: inline-flex; gap: 4px; align-items: center; }
.kolory-ro i { width: 12px; height: 12px; border-radius: 50%; }

/* ===================== SZEROKOŚCI POŚREDNIE ===================== */
@media (max-width: 1280px) {
  .projekt-karta { grid-template-columns: 68px minmax(0, 1fr) 62px 70px 40px; }
  .projekt-karta > .awatar { display: none; }
  .pk-postep .pasek-postepu { width: 100%; }
  .finanse { grid-template-columns: 1fr 1fr; }
  .fin-wykres, .fin-faktury { grid-column: 1 / -1; }
  .fin-oferty, .fin-terminy { grid-column: auto; }
  .wiadomosci { grid-template-columns: 240px minmax(0, 1fr); }
  .kolumna-klienta { grid-column: 2; grid-row: 2; }
  .czat { grid-column: 2; grid-row: 1; }
  .mapa-uklad { grid-template-columns: 220px minmax(0, 1fr) 250px; }
  .teczki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-tresc { padding: 30px 40px; }
  .portal-nawigacja nav a { padding: 10px 10px; }
}
@media (max-width: 1100px) {
  .pulpit { grid-template-columns: 1fr; }
  .pulpit-prawa { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .naglowek { flex-wrap: wrap; }
  .szukaj { width: 240px; }
  .etapy { grid-template-columns: 1fr; }
  .etap-kolumna { min-height: 0; }
  .etap-kolumna::after { display: none; }
  .portal-siatka { grid-template-columns: 1fr; }
  .godziny-dostepnosci, .oferta-akceptacja, .wiadomosci-skrot, .nowe-zlecenie-portal { grid-column: auto; grid-row: auto; }
  .projekt-szczegoly { grid-template-columns: 1fr; }
  .mapa-uklad { grid-template-columns: 1fr; }
  .struktura { display: none; }
  .plotno { min-height: 560px; }
  .edycja-wezla { border-left: 0; border-top: 1px solid var(--piasek); }
}

/* ===================== TELEFON (390 – J-M0…J-M10, J-ML1…J-ML5) ===================== */
@media (max-width: 900px) {
  body { font-size: 13px; }
  .mob-tylko { display: flex !important; }
  /* logowanie */
  .auth-wrap { display: block; }
  .panel-marki { display: none; }
  .auth-main { padding: 0 0 40px; justify-content: flex-start; min-height: 100vh; }
  .auth-mob-head { display: block; position: absolute; left: 0; right: 0; top: 0; height: 250px; background: var(--marka); border-radius: 0 0 36px 36px; overflow: hidden; padding: calc(64px + env(safe-area-inset-top, 0px) - 20px) 24px 0; color: #fff; }
  .auth-mob-head .dekor { position: absolute; left: 220px; top: -110px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
  .auth-mob-head .logo { align-items: center; }
  .auth-slowo { display: block; color: #fff; font-size: 40px; line-height: 44px; margin-top: 16px; }
  .karta-auth { position: relative; margin: 176px 16px 0; width: auto; padding: 24px 22px; }
  .kolumna-auth { gap: 14px; }
  .auth-naglowek h1 { font-size: 24px; line-height: 29px; }
  .auth-naglowek p { font-size: 13px; line-height: 19px; }
  .wybor { font-size: 12px; }
  .wiersz-miedzy .link-mocny { font-size: 12px; }
  .auth-linki { position: static; margin-top: 24px; text-align: center; white-space: normal; }

  /* układ */
  .pasek-boczny { width: 300px; border-radius: 0 28px 28px 0; transform: translateX(-102%); transition: transform .25s ease; padding: calc(56px + env(safe-area-inset-top, 0px) - 20px) 16px 24px; }
  body.menu-otwarte .pasek-boczny { transform: none; }
  .przyciemnienie { display: block; position: fixed; inset: 0; background: rgba(23, 23, 23, .45); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.menu-otwarte .przyciemnienie { opacity: 1; pointer-events: auto; }
  .pb-logo { margin: 0 0 24px 8px; }
  .pb-logo .logo-napis { font-size: 37px; }
  .pb-zamknij { display: inline-flex; position: absolute; right: 16px; top: calc(58px + env(safe-area-inset-top, 0px) - 20px); color: #fff; }
  .pb-nav { gap: 4px; }
  .pb-link { height: 46px; padding-left: 16px; border-radius: 999px; font-size: 14px; font-weight: 500; gap: 14px; }
  .pb-link.aktywny { background: #fff; }
  .pb-link.aktywny::before { display: none; }
  .pb-licznik { margin-left: auto; margin-right: 16px; width: 21px; height: 20px; font-size: 11px; font-weight: 500; }
  .pb-portal { display: none; }
  .pb-profil { padding: 30px 8px 0; flex-wrap: wrap; }
  .pb-profil strong { font-size: 13px; font-weight: 600; }
  .pb-profil small { opacity: .7; }
  .pb-wyloguj { flex-basis: 100%; margin-top: 18px; }
  .pb-wyloguj button { width: auto; height: 38px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--piasek); color: var(--marka); opacity: 1; gap: 10px; font-size: 13px; font-weight: 600; }
  .pb-wyloguj span { display: inline; }

  .glowna { margin-left: 0; padding: calc(58px + env(safe-area-inset-top, 0px) - 20px) 16px 120px; }
  .naglowek { flex-direction: column; min-height: 0; gap: 0; margin-bottom: 16px; }
  .mob-gora { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 8px; }
  .mob-gora-tytul { flex: 1; font-size: 15px; font-weight: 600; opacity: 0; }
  .mob-gora .ikona-przycisk { color: var(--marka); }
  .nag-akcje { display: none; }
  body.szukaj-otwarte .nag-akcje { display: flex; position: fixed; left: 12px; right: 12px; top: 12px; z-index: 80; }
  body.szukaj-otwarte .nag-akcje .szukaj { width: 100%; box-shadow: var(--cien-duzy); }
  body.szukaj-otwarte .nag-akcje > :not(.szukaj) { display: none; }
  .nag-tytuly { padding: 14px 8px 0; }
  .nag-tytuly .nadtytul { order: 2; margin-top: 4px; }
  .nag-tytuly { display: flex; flex-direction: column; }
  .nag-tytuly .h1 { font-size: 20px; line-height: 28px; order: 1; }
  .h1-skrypt { font-size: 44px; line-height: 40px; top: 6px; }
  .strona-pulpit .nag-tytuly .nadtytul { display: none; }
  .powiadomienia-lista { position: fixed; left: 12px; right: 12px; top: 100px; width: auto; }
  .dolna-nawigacja { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; left: 20px; right: 20px; bottom: calc(32px + env(safe-area-inset-bottom, 0px) - 20px); height: 68px; background: #fff; border-radius: 34px; box-shadow: 0 8px 30px rgba(23, 23, 23, .12); z-index: 40; max-width: 420px; margin: 0 auto; }
  .dolna-nawigacja > a, .dolna-nawigacja > button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; color: var(--tekst2); position: relative; height: 100%; justify-content: center; }
  .dolna-nawigacja .ikona { color: var(--tekst); }
  .dolna-nawigacja .aktywny { color: var(--marka); }
  .dolna-nawigacja .aktywny .ikona { color: var(--marka); }
  .dolna-nawigacja .aktywny::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--marka); }
  .dn-dodaj { width: 48px !important; height: 48px !important; border-radius: 50%; background: var(--marka); justify-self: center; margin-top: -42px; box-shadow: 0 6px 16px rgba(219, 10, 95, .35); }
  .dn-dodaj .ikona { color: #fff !important; }
  .dn-licznik { position: absolute; top: 8px; right: calc(50% - 18px); font-style: normal; background: var(--marka); color: #fff; font-size: 9px; border-radius: 40px; padding: 0 5px; }
  .toast { top: 12px; }

  /* pulpit (J-M1) */
  .pulpit, .pulpit-lewa, .pulpit-prawa, .pulpit-dol { display: flex; flex-direction: column; gap: 16px; }
  .pulpit { display: flex; align-items: stretch; }
  .pulpit-lewa, .pulpit-prawa { display: contents; }
  .mob-tydzien { display: flex; flex-direction: column; gap: 6px; order: 1; }
  .mob-tydzien .nadtytul { padding-left: 10px; }
  .tydzien { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 12px 10px; }
  .tydzien-dzien { position: relative; height: 68px; border-radius: 14px; background: var(--piasek50); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .tydzien-dzien small { font-size: 11px; font-weight: 500; color: var(--tekst2); }
  .tydzien-dzien b { font-size: 16px; font-weight: 400; color: var(--marka); }
  .tydzien-dzien i { position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--lupek); }
  .tydzien-dzien.dzis { background: var(--marka); box-shadow: inset 0 0 0 1px var(--tekst); }
  .tydzien-dzien.dzis small, .tydzien-dzien.dzis b { color: #fff; }
  .tydzien-dzien.dzis i { background: #fff; }
  .pulpit-kpi { order: 2; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pulpit-kpi .kpi { min-height: 80px; padding: 10px 12px; border-radius: 16px; }
  .pulpit-kpi .kpi-ikona, .pulpit-kpi .kpi-et { display: none; }
  .pulpit-kpi .kpi-et-mob { display: block; font-size: 11px; color: var(--tekst2); }
  .pulpit-kpi .kpi-w { font-size: 13px; line-height: 20px; margin: 2px 0 0; font-weight: 600; }
  .pulpit-kpi .kpi:first-child .kpi-w { font-size: 20px; line-height: 28px; }
  .pulpit-kpi .kpi-pod { font-size: 11px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kpi-spotkania { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 12px; }
  .kpi-spotkania .otworz { display: none; }
  .kpi-spotkania .kpi-teksty { gap: 0; }
  .kpi-spotkania .kpi-et-mob { color: #fff !important; }
  .kpi-spotkania .kpi-w-mob { display: block; font-size: 20px; font-weight: 600; line-height: 28px; }
  .kpi-spotkania .kpi-pod { color: #fff; }
  .plan-dnia { order: 3; box-shadow: none; padding: 8px 8px 0; min-height: 0; background: transparent; }
  .plan-dnia .sekcja-gora .ikona-przycisk { display: none; }
  .plan-podpis { margin: 4px 0 0; font-size: 11px; }
  .plan-dnia { position: relative; }
  .plan-dnia .pasek-postepu { margin-top: 10px; }
  .os-czasu { margin-top: 22px; gap: 2px; }
  .os-czasu::before { left: 10px; }
  .etap-kolko { width: 22px; height: 22px; margin-left: 0; }
  .etap-tekst strong { font-size: 13px; font-weight: 500; line-height: 20px; }
  .pulpit-projekty { order: 4; margin-top: 8px; }
  .pulpit-dol { order: 5; margin-top: 0; }
  .pulpit-kalendarz { order: 6; }
  .projekt-karta { grid-template-columns: 52px minmax(0, 1fr) 40px; gap: 12px; padding: 14px; min-height: 0; }
  .projekt-karta .pk-dane { display: none; }
  .monogram { width: 52px; height: 52px; }
  .pk-opis h3 { font-size: 16px; line-height: 22px; }
  .pk-opis p { margin: 2px 0 8px; }
  .pulpit-notatnik, .pulpit-finanse { min-height: 0; }
  .pulpit-notatnik { min-height: 250px; }

  /* modale */
  .modal { margin: auto 0 0; max-width: 100vw; width: 100%; max-height: 92vh; }
  .modal-tresc { width: 100%; border-radius: 24px 24px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; }
  .dwie-kolumny { gap: 10px; }

  /* kalendarz (J-M2) */
  .strona-kalendarz .glowna { padding-top: 0; }
  .strona-kalendarz .naglowek { margin: 0 -16px; padding: calc(58px + env(safe-area-inset-top, 0px) - 20px) 16px 0; background: var(--marka); }
  .strona-kalendarz .mob-gora .ikona-przycisk { color: #fff; }
  .strona-kalendarz .mob-gora-tytul { opacity: 1; color: #fff; }
  .strona-kalendarz .nag-tytuly { display: none; }
  .kal-pasek { grid-template-columns: 1fr; gap: 12px; background: var(--marka); margin: 0 -16px; padding: 14px 16px 60px; }
  .przelacznik-widoku { background: transparent; box-shadow: none; width: 100%; padding: 0; }
  .kal-pasek .przelacznik-widoku > * { flex: 1; text-align: center; background: rgba(23, 23, 23, .15); color: #fff; padding: 8px 10px; }
  .kal-pasek .przelacznik-widoku .aktywny { background: #fff; color: var(--marka); }
  .kal-tytul { flex-direction: column; align-items: center; gap: 0; color: #fff; order: 2; }
  .kal-tytul .h2 { font-size: 28px; line-height: 34px; }
  .kal-rok { color: #fff; font-size: 11px; }
  .nawigacja-miesiaca { position: absolute; left: 16px; right: 16px; justify-content: space-between; background: transparent; box-shadow: none; margin-top: 64px; pointer-events: none; }
  .nawigacja-miesiaca > a { pointer-events: auto; background: rgba(23, 23, 23, .15); color: #fff !important; width: 32px !important; height: 32px !important; }
  .nm-dzis { display: none; }
  .kal-pasek { position: relative; }
  .kal-filtry { margin: 12px 0; gap: 10px 14px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .kal-filtry .nadtytul { display: none; }
  .filtr-kat { white-space: nowrap; font-size: 12px; }
  .siatka-miesiaca { margin-top: -54px; position: relative; }
  .sm-dni-tyg { height: 32px; border: 0; }
  .sm-dni-tyg span { font-size: 0; }
  .sm-dni-tyg span::first-letter { font-size: 10px; }
  .sm-dni-tyg span::before { font-size: 10px; }
  .sm-tydzien { min-height: 0; grid-template-rows: 44px; border: 0; }
  .sm-dzien { border: 0; padding: 6px 0 0; text-align: center; background: transparent !important; }
  .sm-dzien b { font-size: 12px; font-weight: 500; }
  .sm-dzien.poza b { opacity: .4; }
  .sm-dzien.dzis b { width: 30px; height: 30px; margin: -3px auto 0; font-size: 12px; }
  .sm-kropki { display: flex; justify-content: center; gap: 2px; margin-top: 1px; }
  .sm-kropki .kropka-kat { width: 4px; height: 4px; }
  .sm-tydzien .wydarzenie, .sm-tydzien .wiecej { display: none; }
  .nadchodzace { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 4px 0; box-shadow: none; background: transparent; }
  .nad-wiersz { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px 10px 18px; border-radius: 14px; background: #fff; box-shadow: var(--cien); text-align: left; position: relative; }
  .nad-wiersz::before { content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--marka); }
  .nad-wiersz.kat-oddanie::before { background: var(--lupek); } .nad-wiersz.kat-zadanie::before { background: #E9D78A; } .nad-wiersz.kat-prywatne::before { background: var(--lupek); opacity: .5; }
  .nad-wiersz span { display: flex; flex-direction: column; }
  .nad-wiersz strong { font-size: 13px; font-weight: 500; color: var(--marka); }
  .nad-wiersz small { font-size: 10px; color: var(--tekst2); }
  .nad-wiersz em { font-style: normal; font-size: 12px; white-space: nowrap; }
  .widok-lista { padding: 4px 14px 14px; margin-top: -54px; position: relative; }
  .blok { grid-template-columns: 38px 1fr 28px; }
  .szczegoly-wydarzenia { left: 12px !important; right: 12px; bottom: 100px; top: auto !important; width: auto; }

  /* notatnik (J-M4) i mapa (J-M9) */
  .notatnik-edytor { background: transparent; box-shadow: none; min-height: 0; overflow: visible; }
  .zakladki { padding: 0 4px; gap: 18px; overflow-x: auto; }
  .zakladki a { white-space: nowrap; }
  .zapisano { display: none; }
  .notatki-wrap { padding: 14px 0; }
  .siatka-notatek { grid-template-columns: 1fr; gap: 10px; }
  .mapa-uklad { display: flex; flex-direction: column; min-height: 0; }
  .plotno { min-height: 480px; border-radius: 16px; margin-top: 12px; }
  .edycja-wezla { background: #fff; border-radius: 16px; margin-top: 12px; box-shadow: var(--cien); border: 0; }
  .tagi-widok, .udostepnianie { padding: 14px 4px; }

  /* finanse (J-M8) */
  .finanse { display: flex; flex-direction: column; gap: 12px; }
  .fin-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fin-kpi .kpi-duze { grid-column: 1 / -1; }
  .fin-kpi .kpi:not(.kpi-duze) .chip { position: static; align-self: flex-start; margin-top: 4px; }
  .fin-kpi .kpi { min-height: 0; }
  .fin-kpi .kpi:not(.kpi-duze) .kolko { display: none; }
  .fin-kpi .kpi:not(.kpi-duze) .kpi-w { font-size: 20px; line-height: 28px; }
  .fin-kpi .kpi:last-child { display: none; }
  .fin-wykres, .fin-oferty, .fin-faktury, .fin-terminy { padding: 16px; min-height: 0; }
  .fin-wykres .sekcja-gora { flex-direction: column; align-items: flex-start; }
  .wykres-mies .s-p { width: 22px; }
  .wykres-mies em { width: 22px; }
  .tf-naglowek { display: none; }
  .tf-wiersz { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k kw" "t s"; padding: 10px 12px; gap: 4px 8px; }
  .tf-nr { display: none; }
  .tf-klient { grid-area: k; } .tf-kwota { grid-area: kw; } .tf-termin { grid-area: t; flex-direction: row; gap: 6px; } .tf-status { grid-area: s; justify-content: flex-end; }
  .tf-menu { display: none; }
  .filtry-faktur { overflow-x: auto; flex-wrap: nowrap; }
  .fin-faktury .sekcja-gora { flex-direction: column; align-items: flex-start; }

  /* pliki (J-M7) */
  .pliki { display: flex; flex-direction: column; }
  .drzewo-dysku { min-height: 0; order: 2; }
  .drzewo-dysku .miejsce-na-dysku { margin-top: 12px; }
  .dysk-przeglad { padding: 16px; }
  .podglady { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; }
  .podglad { flex: 0 0 62%; scroll-snap-align: start; }
  .teczki { display: flex; overflow-x: auto; gap: 12px; }
  .teczka { flex: 0 0 46%; }
  .tp-naglowek { display: none; }
  .tp-wiersz { grid-template-columns: minmax(0, 1fr) auto; }
  .tp-wiersz > :nth-child(1), .tp-wiersz > :nth-child(3), .tp-wiersz > :nth-child(4), .tp-wiersz > :nth-child(5) { display: none; }
  .dp-konto .pasek-postepu { width: 160px; }
  .sciezka { height: auto; padding: 12px 16px; }
  .sciezka-prawa { margin-left: 0; width: 100%; }

  /* wiadomości (J-M5 / J-M10) */
  .wiadomosci { display: block; }
  .lista-rozmow { min-height: 0; border: 0 !important; padding-top: 8px; }
  .wiadomosci.ma-rozmowe .lista-rozmow, .wiadomosci.ma-rozmowe .kolumna-klienta { display: none; }
  .wiadomosci:not(.ma-rozmowe) .czat, .wiadomosci:not(.ma-rozmowe) .kolumna-klienta { display: none; }
  .strona-wiadomosci .nag-tytuly { display: none; }
  .r-ostatnia { display: block; color: var(--tekst) !important; }
  .rozmowa { border-bottom: 1px solid var(--piasek); }
  .chipy-filtry.mob-tylko { padding: 0 20px; }
  .chipy-filtry .chip { background: #FDE4EE; color: var(--marka-ciemna); font-size: 11px; padding: 5px 12px; }
  .chipy-filtry .chip.aktywny { background: var(--marka); color: #fff; }
  .czat { min-height: calc(100vh - 160px); padding: 12px 12px 12px; border: 0 !important; }
  .tematy { max-width: none; }
  .wideo-panel { position: static; width: auto; height: auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px; margin-top: 12px; text-align: left; flex-wrap: wrap; }
  .wideo-panel .awatar { width: 44px !important; height: 44px !important; }
  .wideo-panel strong { margin: 0; }
  .wideo-panel small { flex-basis: 100%; order: 3; margin: -8px 0 0 56px; }
  .sterowanie { margin: 0 0 0 auto; background: transparent; padding: 0; }
  .sterowanie span { display: none; }
  .czat-wiadomosci { max-height: none; }
  .dymek { max-width: 80%; }
  .wiad-plik { margin-left: 0; grid-template-columns: 40px 1fr; }
  .wiad-plik .przycisk { grid-column: 2; justify-self: start; }
  .wiad-plik time { display: none; }
  .pole-wiadomosci { position: sticky; bottom: 100px; }

  /* pozostałe */
  .projekt-szczegoly, .formularz-siatka, .ustawienia, .siatka-klientow { grid-template-columns: 1fr; }
  .lista-etapow li { grid-template-columns: 1fr 36px; }
  .lista-etapow li select { grid-column: 1 / -1; }
  .zapytanie { grid-template-columns: 36px 1fr; }
  .zapytanie .wiersz-przyciskow { grid-column: 1 / -1; }
  .dostepnosc-form { grid-template-columns: repeat(4, 1fr); }
  .dostepnosc-form > .pole-m:not(.maly), .dostepnosc-form > .przycisk { grid-column: 1 / -1; }

  /* portal (J-M6) */
  .portal-nawigacja { margin: 0; border-radius: 0; box-shadow: none; padding: calc(20px + env(safe-area-inset-top, 0px)) 16px 0; height: auto; }
  .portal-nawigacja nav { display: none; }
  .portal-nawigacja .nadtytul { margin-left: 8px; }
  .portal-profil { margin-left: auto; }
  .portal-profil span { display: none; }
  .portal-tresc { padding: 18px 16px 120px; }
  .portal-powitanie .h1 { font-size: 20px; }
  .portal-powitanie .skrypt { font-size: 50px; line-height: 44px; }
  .podpis-duzy { display: none; }
  .status-projektu, .oferta-akceptacja, .nowe-zlecenie-portal, .wiadomosci-skrot, .godziny-dostepnosci { padding: 18px 16px; }
  .sp-gora { flex-direction: column; }
  .sp-gora .h1 { font-size: 20px; line-height: 28px; }
  .kroki-projektu strong { font-size: 11px; }
  .kroki-projektu small { display: none; }
  .najblizsze-spotkanie small { display: none; }
  .nz-form { grid-template-columns: 1fr; }
  .portal-dolna { display: grid; }
  .portal-dekor { display: none; }
}