:root {
  /* białe tło, akcent magentowy */
  --tlo: #ffffff; --karta: #fff; --tekst: #1d2330; --szary: #6b7280; --linia: #e3d5de;
  --glowny: #c4007a; --glowny-ciemny: #96005d; --ok: #1e7f4f; --blad: #b3261e; --uwaga: #b26a00;
  --sekcja: #fbe4f2; --grupa: #c4007a; --suma: #f6f0f4; --total: #fff2cc; --pochodna: #e2efda; --pods: #eadfe6;
  --capex: #7a4a00; --opex: #1c5c2f;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: var(--tlo); }
a { color: var(--glowny); }
main { padding: 16px 20px 40px; }
main.szeroki { padding: 10px 12px 40px; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
small, .szary { color: var(--szary); }

.naglowek { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 48px; background: #fff; border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 30; }
.naglowek .logo { font-weight: 700; text-decoration: none; color: var(--glowny); font-size: 16px; }
.naglowek nav { display: flex; gap: 4px; }
.naglowek nav a { padding: 6px 12px; border-radius: 6px; text-decoration: none; color: var(--tekst); }
.naglowek nav a.aktywny, .naglowek nav a:hover { background: var(--sekcja); color: var(--glowny-ciemny); }
.uzytkownik { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.uzytkownik form { display: inline; }
button.link { background: none; border: 0; color: var(--glowny); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }

.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.alert.ok { background: #e3f3ea; color: var(--ok); border: 1px solid #b9dfc8; }
.alert.blad { background: #fbe9e7; color: var(--blad); border: 1px solid #f0c0bb; }
.alert ul { margin: 0; padding-left: 18px; }

.karta { background: var(--karta); border: 1px solid var(--linia); box-shadow: 0 1px 3px rgba(196,0,122,.08); border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; }
.karta.logowanie { max-width: 380px; margin: 60px auto; }
label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--szary); }
label.inline { display: flex; align-items: center; gap: 6px; color: var(--tekst); }
input[type=text], input[type=password], input[type=number], input:not([type]), input[type=email], select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--linia); border-radius: 6px; font: inherit; color: var(--tekst); background: #fff; margin-top: 3px;
}
.btn { display: inline-block; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--linia); background: #fff; color: var(--tekst); font: inherit; cursor: pointer; text-decoration: none; }
.btn:hover { background: #faf3f8; }
.btn.glowny { background: var(--glowny); border-color: var(--glowny); color: #fff; }
.btn.glowny:hover { background: var(--glowny-ciemny); }
.btn.zatwierdz { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.maly { padding: 3px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.niebezpieczny { color: var(--blad); }

table.lista { width: 100%; border-collapse: collapse; background: #fff; }
table.lista th, table.lista td { padding: 7px 10px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
table.lista th { background: #faf3f8; color: var(--glowny-ciemny); font-weight: 600; font-size: 13px; }
table.lista td.num, table.lista th.num { text-align: right; font-variant-numeric: tabular-nums; }

.odznaka { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--suma); color: var(--tekst); white-space: nowrap; }
.odznaka.zatwierdzona { background: #e3f3ea; color: var(--ok); }
.odznaka.robocza { background: #fff4e0; color: var(--uwaga); }
.odznaka.zamknieta { background: #ececec; color: var(--szary); }
.odznaka.otwarta { background: var(--sekcja); color: var(--glowny); }

/* ---- pasek narzędzi arkusza ---- */
.pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; background: #fff; border: 1px solid var(--linia); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; position: sticky; top: 52px; z-index: 20; }
.pasek h1 { margin: 0; font-size: 17px; }
.pasek .grupa-pol { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pasek .oddzialy label { display: inline-flex; align-items: center; gap: 3px; margin: 0 4px 0 0; color: var(--tekst); font-size: 13px; }
.pasek .przelacznik a { padding: 4px 10px; border: 1px solid var(--linia); text-decoration: none; color: var(--tekst); }
.pasek .przelacznik a:first-child { border-radius: 6px 0 0 6px; }
.pasek .przelacznik a:last-child { border-radius: 0 6px 6px 0; }
.pasek .przelacznik a.aktywny { background: var(--glowny); color: #fff; border-color: var(--glowny); }
.pasek .status { font-size: 13px; color: var(--szary); }
.pasek .status.zmiany { color: var(--uwaga); font-weight: 600; }
.pasek .status.blad { color: var(--blad); font-weight: 600; }
.pasek .prawa { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---- arkusz ---- */
.arkusz-obszar { overflow: auto; max-height: calc(100vh - 130px); border: 1px solid var(--linia); background: #fff; border-radius: 8px; }
table.arkusz { border-collapse: separate; border-spacing: 0; font-size: 12.5px; table-layout: fixed; }
table.arkusz th, table.arkusz td { border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.arkusz thead th { position: sticky; top: 0; background: #faf3f8; color: var(--glowny-ciemny); z-index: 5; text-align: center; font-weight: 600; }
table.arkusz thead th.lewa { z-index: 6; }
table.arkusz td.rodzaj, table.arkusz th.rodzaj { font-size: 11px; color: var(--szary); position: sticky; left: 0; background: inherit; z-index: 2; }
table.arkusz td.kt, table.arkusz th.kt { text-align: center; position: sticky; left: 88px; background: inherit; z-index: 2; }
table.arkusz td.nazwa, table.arkusz th.nazwa { white-space: normal; position: sticky; left: 132px; background: inherit; z-index: 2; border-right: 2px solid #b9c2cf; }
table.arkusz td.rok, table.arkusz th.rok { position: sticky; left: 562px; background: inherit; z-index: 2; font-weight: 600; border-right: 2px solid #b9c2cf; }
table.arkusz td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.arkusz td.kw { text-align: right; color: var(--szary); }
table.arkusz tr { background: #fff; }
table.arkusz tr.grupa td { background: var(--grupa); color: #fff; font-weight: 700; font-size: 14px; padding: 6px 8px; white-space: normal; }
table.arkusz tr.sekcja td { background: var(--sekcja); font-weight: 700; }
table.arkusz tr.naglowek-tab td { background: #faf3f8; font-weight: 600; text-align: center; font-size: 11.5px; color: var(--szary); }
table.arkusz tr.suma td { background: var(--suma); font-weight: 600; }
table.arkusz tr.dziecko td.nazwa { padding-left: 22px; font-style: italic; color: #3b4250; }
table.arkusz tr.total td { background: var(--total); font-weight: 700; }
table.arkusz tr.pochodna td { background: var(--pochodna); }
table.arkusz tr.pochodna.naglowek td { font-weight: 700; }
table.arkusz tr.pods td { background: var(--pods); }
table.arkusz tr.pods.wazny td { font-weight: 700; }
table.arkusz tr.info td { background: #fafafa; color: var(--szary); font-size: 12px; white-space: normal; }
table.arkusz td.rodzaj.CAPEX { color: var(--capex); font-weight: 600; }
table.arkusz td.rodzaj.OPEX { color: var(--opex); font-weight: 600; }
table.arkusz td.rodzaj.CAPEX_OPEX { color: var(--szary); }
table.arkusz input { width: 68px; padding: 2px 4px; border: 1px solid #c7ced8; border-radius: 4px; text-align: right; font: inherit; margin: 0; background: #fffdf3; }
table.arkusz input:focus { outline: 2px solid var(--glowny); background: #fff; }
table.arkusz input.zmieniony { background: #ffe9b3; }
table.arkusz tr:hover td { filter: brightness(.97); }

/* ---- podział ---- */
table.podzial { border-collapse: collapse; background: #fff; font-size: 13px; width: 100%; max-width: 1100px; }
table.podzial th, table.podzial td { border: 1px solid var(--linia); padding: 5px 9px; }
table.podzial th { background: #faf3f8; color: var(--glowny-ciemny); }
table.podzial td.num, table.podzial th.num { text-align: right; font-variant-numeric: tabular-nums; width: 130px; }
table.podzial tr.blok td { background: var(--sekcja); font-weight: 700; }
table.podzial tr.suma-bloku td { background: var(--suma); font-weight: 600; }
table.podzial tr.razem td { background: var(--total); font-weight: 700; }
table.podzial tr.kontrola td { background: var(--pochodna); }
.kontrola-ok { color: var(--ok); font-weight: 600; }
.kontrola-blad { color: var(--blad); font-weight: 600; }

.siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.formularz-waski { max-width: 560px; }
.pola-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.chipy { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.chipy label { display: inline-flex; gap: 4px; align-items: center; color: var(--tekst); margin: 0; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--szary); margin: 8px 0; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda i { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--linia); border-radius: 3px; }
@media (max-width: 800px) { .naglowek { gap: 10px; padding: 0 10px; } main { padding: 10px; } }