/* Szkielet aplikacji: pasek górny, lewy panel, karta główna, prawy pasek. */
.app { height: 100%; display: flex; flex-direction: column; }
.topbar { height: var(--h-topbar); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 8px; }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tekst); min-width: 0; padding: 4px 12px 4px 4px; border-radius: 12px; width: calc(var(--w-nav) - 56px); }
.marka img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.marka-tekst { display: grid; line-height: 1.05; min-width: 0; }
.marka-tekst b { font: 600 21px/1.05 var(--font-display); letter-spacing: -0.01em; }
.marka-tekst small { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst3); font-weight: 600; }

.szukaj { flex: 1; max-width: 720px; position: relative; }
.szukaj-pole { display: flex; align-items: center; height: 48px; border-radius: var(--r-pole); background: var(--pole); transition: background .2s var(--ruch), box-shadow .2s var(--ruch); padding: 0 4px; }
.szukaj-pole:focus-within { background: var(--powierzchnia); box-shadow: var(--cien-2); outline: 2px solid var(--fokus); outline-offset: -2px; }
.szukaj-pole input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 8px; font-size: 15px; outline: none; }
.szukaj-pole input::placeholder { color: var(--tekst3); }
.szukaj-podp { position: absolute; left: 0; right: 0; top: 54px; background: var(--powierzchnia); border-radius: 16px; box-shadow: var(--cien-3); border: 1px solid var(--linia); padding: 14px 16px 16px; z-index: 60; }
.szukaj-podp h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst3); margin: 0 0 8px; }
.szukaj-chipy { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-filtr { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--linia2); background: var(--powierzchnia); font-weight: 500; }
.chip-filtr:hover { background: var(--hover); }
.szukaj-lista { display: grid; gap: 2px; }
.szukaj-lista button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; }
.szukaj-lista button:hover, .szukaj-lista button[aria-selected='true'] { background: var(--hover); }
.szukaj-lista code { background: var(--pole); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.szukaj-zaaw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 4px; }
.szukaj-zaaw .pole.szeroki { grid-column: 1 / -1; }

.topbar-prawa { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.znacznik-ai { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--akcent-tlo); color: var(--akcent-link); margin-right: 6px; }
.znacznik-ai.wylaczony { background: var(--pole); color: var(--tekst3); }
.znacznik-demo { height: 28px; padding: 0 10px; border-radius: 999px; background: var(--ostrzezenie-tlo); border: 1px solid var(--ostrzezenie-linia); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; margin-right: 6px; }
.konto-przycisk { margin-left: 6px; border-radius: 50%; }

.korpus { flex: 1; min-height: 0; display: flex; gap: 0; padding: 0 12px 12px 0; }
.nav { width: var(--w-nav); flex: none; overflow-y: auto; padding: 4px 8px 16px 8px; scrollbar-width: thin; }
.nav.zwinieta { width: 72px; }
.glowna { flex: 1; min-width: 0; display: flex; gap: 12px; outline: none; }
.karta { background: var(--karta); border-radius: var(--r-karta); box-shadow: var(--cien-1); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; flex: 1; border: 1px solid color-mix(in oklab, var(--linia) 60%, transparent); }
.rail { width: var(--w-rail); flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 6px; margin-left: 4px; }
.rail .btn-ikona { width: 44px; height: 44px; }
.rail .btn-ikona.aktywny { background: var(--akcent-tlo); color: var(--akcent-link); }
.panel-boczny { width: var(--w-panel); flex: none; }
.panel-boczny.karta { flex: none; }

/* lewy panel */
.napisz { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 22px 0 18px; margin: 4px 0 12px 4px; border-radius: var(--r-napisz); background: var(--akcent); color: var(--akcent-tekst); font: 600 15px var(--font-sans); box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--akcent) 75%, black); transition: box-shadow .2s var(--ruch), background .2s; }
.napisz:hover { box-shadow: 0 12px 26px -10px color-mix(in oklab, var(--akcent) 85%, black); background: color-mix(in oklab, var(--akcent) 92%, white); }
.napisz svg { width: 24px; height: 24px; }
.nav.zwinieta .napisz { width: 56px; padding: 0; justify-content: center; margin-left: 8px; } .nav.zwinieta .napisz span { display: none; }

.skrzynki { display: grid; gap: 2px; margin: 0 0 10px 4px; padding: 6px; background: var(--pole); border-radius: 14px; }
.skrzynka { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px 4px 6px; border-radius: 10px; text-align: left; width: 100%; color: var(--tekst2); }
.skrzynka:hover { background: color-mix(in oklab, var(--hover) 60%, transparent); }
.skrzynka.aktywna { background: var(--karta); color: var(--tekst); font-weight: 650; box-shadow: var(--cien-1); }
.skr-ikona { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.skr-nazwa { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.skr-nazwa small { color: var(--tekst3); font-weight: 500; font-size: 11.5px; }
.nav.zwinieta .skr-nazwa, .nav.zwinieta .licznik { display: none; }
.licznik { font-size: 12px; font-weight: 700; color: var(--tekst2); min-width: 20px; text-align: right; }
.licznik.pill { background: var(--akcent); color: var(--akcent-tekst); border-radius: 999px; padding: 0 7px; line-height: 20px; height: 20px; text-align: center; }
.nav-lista, .nav-sek ul { list-style: none; margin: 0; padding: 0; }
.nav-poz { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 14px 0 16px; border-radius: 999px; color: var(--tekst2); text-decoration: none; font-weight: 500; width: 100%; text-align: left; position: relative; }
.nav-poz:hover { background: var(--hover); }
.nav-poz.aktywna { background: var(--aktywna-nav); color: var(--tekst); font-weight: 700; }
.nav-poz .nazwa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-poz.ma-nieprzeczytane .nazwa, .nav-poz.ma-nieprzeczytane .licznik { color: var(--tekst); font-weight: 700; }
.nav.zwinieta .nav-poz { width: 48px; margin-left: 12px; padding: 0 13px; } .nav.zwinieta .nav-poz .nazwa, .nav.zwinieta .nav-sek h3 { display: none; }
.nav-sek { margin-top: 14px; }
.nav-sek h3 { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 18px; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst3); }
.nav-et { padding-left: 16px; }
.nav-et.poziom-1 { padding-left: 34px; } .nav-et.poziom-2 { padding-left: 52px; }
.nav-et .kropka { width: 12px; height: 12px; border-radius: 4px; background: var(--e-dot); flex: none; }
.nav-et .kropka.wiek { width: 12px; height: 12px; border-radius: 50%; }
.nav-et .strzalka { width: 20px; height: 20px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--tekst3); }
.nav-et .strzalka:hover { background: var(--hover); }

/* dolna nawigacja i przycisk Napisz (telefon) */
.dolna-nav, .fab-napisz { display: none; }
.zaslona { position: fixed; inset: 0; background: #0008; z-index: 70; opacity: 0; pointer-events: none; transition: opacity .25s var(--ruch); }
.zaslona.otwarta { opacity: 1; pointer-events: auto; }

.baner-offline { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 350; background: var(--ostrzezenie-tlo); border: 1px solid var(--ostrzezenie-linia); border-radius: 12px; padding: 8px 16px; font-weight: 600; box-shadow: var(--cien-2); }

/* ekran logowania */
.logowanie { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: var(--tlo); padding: 20px; overflow: auto; }
.logowanie-karta { width: min(440px, 100%); background: var(--karta); border-radius: 24px; box-shadow: var(--cien-3); padding: 36px 32px 28px; border: 1px solid var(--linia); display: grid; gap: 18px; }
.logowanie-karta h1 { font: 600 30px/1.1 var(--font-display); letter-spacing: -0.01em; }
.logowanie-karta .marka-duza { display: flex; align-items: center; gap: 14px; }
.logowanie-karta .marka-duza img { width: 56px; height: 56px; border-radius: 14px; }
.logowanie-karta .opis { color: var(--tekst2); }
.logowanie-blad { background: #fbdada; color: #8c1111; padding: 10px 14px; border-radius: 10px; font-weight: 500; }
:root[data-motyw='ciemny'] .logowanie-blad { background: #4c1d1d; color: #fecaca; }

/* ---------- tablet i telefon ---------- */
@media (max-width: 1099px) {
  .rail, .panel-boczny.karta { display: none; }
  .nav { position: fixed; left: 0; top: 0; bottom: 0; width: 304px; max-width: 86vw; z-index: 80; background: var(--tlo); padding: 12px 8px 24px; transform: translateX(-102%); transition: transform .28s var(--ruch); box-shadow: var(--cien-3); }
  .nav.otwarta { transform: none; }
  .nav.zwinieta { width: 304px; } .nav.zwinieta .napisz span, .nav.zwinieta .skr-nazwa, .nav.zwinieta .licznik, .nav.zwinieta .nav-poz .nazwa, .nav.zwinieta .nav-sek h3 { display: revert; }
  .nav.zwinieta .napisz { width: auto; padding: 0 22px 0 18px; justify-content: flex-start; margin-left: 4px; } .nav.zwinieta .nav-poz { width: 100%; margin-left: 0; padding: 0 14px 0 16px; }
  .korpus { padding: 0 12px 12px 12px; }
  .marka { width: auto; }
}
@media (max-width: 719px) {
  :root { --h-topbar: 60px; }
  .topbar { padding: 0 8px; gap: 4px; }
  .marka { display: none; }
  .szukaj-pole { height: 44px; }
  .topbar-prawa .skryj-tel { display: none; }
  .korpus { padding: 0; }
  .karta { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .dolna-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--karta); border-top: 1px solid var(--linia); z-index: 40; }
  .dolna-nav button { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 56px; color: var(--tekst2); font-size: 11.5px; font-weight: 600; position: relative; }
  .dolna-nav button.aktywny { color: var(--tekst); }
  .dolna-nav button.aktywny .pigulka { background: var(--aktywna-nav); }
  .dolna-nav .pigulka { display: grid; place-items: center; width: 60px; height: 30px; border-radius: 999px; transition: background .2s; }
  .dolna-nav .licznik-dol { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 999px; background: var(--akcent); color: var(--akcent-tekst); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
  .fab-napisz { display: flex; position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 45; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-radius: var(--r-napisz); background: var(--akcent); color: var(--akcent-tekst); font: 600 15px var(--font-sans); box-shadow: 0 10px 24px -8px #0006; transition: padding .25s var(--ruch), gap .25s var(--ruch); }
  .fab-napisz svg { width: 24px; height: 24px; }
  .fab-napisz.zwiniety { padding: 0 16px; gap: 0; } .fab-napisz.zwiniety span { display: none; }
  .glowna { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .logowanie-karta { padding: 28px 22px 22px; border-radius: 20px; }
}

/* poprawki układu telefonu: nic nie może poszerzać strony */
.szukaj { min-width: 0; }
.szukaj-pole input { width: 100%; }
.topbar-prawa { flex: none; }
.korpus, .glowna, .karta, .watek-przewijany, .lista-przewijana { min-width: 0; }
@media (max-width: 719px) {
  .topbar-prawa .tylko-pc { display: none; }
}

@media (max-width: 1099px) {
  .znacznik-ai { display: none; }
  .marka-tekst { display: none; }
  .marka { width: auto; padding: 4px; }
  .szukaj { min-width: 180px; }
}
@media (max-width: 900px) { .topbar-prawa .skryj-tel { display: none; } }