/* AI-filmówka — styl lekki, w palecie Szkoły Filmowej w Łodzi (grafit #404142, turkus #00b5cc).
   Turkus #00b5cc ma na bieli tylko ok. 2,4:1, więc służy do ikon, obramowań i podkreśleń;
   tekst akcentowy i linki: #00788a (5,2:1 na bieli). Bez inline CSS (CSP), czcionki systemowe. */
:root { color-scheme: light dark; }
:root {
  --tlo: #f4f7f8; --karta: #ffffff; --tekst: #404142; --stonowany: #5b6468; --linia: #dfe5e8; --linia-mocna: #ced6db;
  --turkus: #00b5cc; --akcent: #00788a; --akcent-tlo: #e3f4f7; --przycisk: #404142; --przycisk-tekst: #ffffff;
  --pole: #ffffff; --pole-linia: #9aa6ac; --cien: 0 1px 2px rgba(64,65,66,.06), 0 2px 8px rgba(64,65,66,.05);
  --ok: #00695b; --ok-tlo: #e0f5f1; --uwaga: #7a5600; --uwaga-tlo: #fff3d1;
  --zle: #b53a15; --zle-tlo: #fde8e1; --info: #373abf; --info-tlo: #e8e9fb; --szare-tlo: #eef2f4;
  --kropka-ok: #00aa95; --kropka-uwaga: #ffb900; --kropka-zle: #e24c24; --kropka-info: #373abf;
  --baner-tlo: #fff8e1; --baner-tekst: #6b4c00; --promien: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--tlo); color: var(--tekst); }
.pomin { position: absolute; left: -999px; } .pomin:focus { left: 8px; top: 8px; background: var(--karta); padding: 6px 10px; z-index: 10; }
.ukryte { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ikona { width: 18px; height: 18px; flex: none; vertical-align: -3px; margin-right: 6px; stroke: currentColor; }
.ikona.duza { width: 24px; height: 24px; vertical-align: -5px; color: var(--turkus); }
a { color: var(--akcent); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--turkus); outline-offset: 2px; border-radius: 4px; }

/* baner prototypu: cienki, spokojny pasek */
.baner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px; background: var(--baner-tlo); color: var(--baner-tekst); font-size: .86rem; border-bottom: 1px solid var(--linia); }
.baner .ikona { margin: 0; width: 16px; height: 16px; color: #c98a00; }

/* nagłówek */
.gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 10px 24px; background: var(--karta); border-bottom: 1px solid var(--linia); }
.marka { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tekst); min-width: 0; }
.marka-logo { display: block; height: 38px; width: auto; } .marka-znak { color: var(--tekst); flex: none; }
.marka-kreska { width: 1px; height: 30px; background: var(--linia-mocna); }
.marka-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.marka-nazwa { font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.marka-opis { font-size: .78rem; color: var(--stonowany); }
.gora nav { display: flex; gap: 6px 18px; align-items: center; }
.gora nav a { color: var(--tekst); text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; } .gora nav a:hover { border-bottom-color: var(--turkus); }
.kto { display: flex; align-items: center; gap: 10px; color: var(--stonowany); font-size: .9rem; min-width: 0; }
.kto-mail { overflow-wrap: anywhere; }
.awatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--akcent-tlo); color: var(--akcent); border: 1.5px solid var(--turkus); font-weight: 700; font-size: .9rem; }

/* układ */
main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 56px; }
.uklad { display: flex; align-items: flex-start; }
.uklad main { flex: 1; min-width: 0; margin: 0; max-width: none; }
.uklad main > * { max-width: 1060px; }
.menu { width: 240px; flex: none; padding: 16px 12px; background: var(--karta); border-right: 1px solid var(--linia); align-self: stretch; }
.menu nav { display: block; }
.menu .poz { display: flex; align-items: center; gap: 0; width: 100%; padding: 8px 10px 8px 12px; margin: 1px 0; border: 0; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; background: none; font: inherit; text-align: left; text-decoration: none; color: var(--tekst); cursor: pointer; }
.menu .poz .ikona { color: var(--stonowany); margin-right: 10px; }
.menu .poz-nazwa { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.menu .poz:hover { background: var(--szare-tlo); }
.menu .poz.biezaca { background: var(--akcent-tlo); border-left-color: var(--turkus); font-weight: 600; } .menu .poz.biezaca .ikona { color: var(--akcent); }
.menu-naglowek { margin: 16px 12px 4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--stonowany); }
.menu-lista { list-style: none; margin: 0 0 8px; padding: 0; }
.licz { color: var(--stonowany); font-size: .8rem; margin-left: 8px; font-variant-numeric: tabular-nums; }
.menu-wyloguj { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--linia); }

h1 { font-size: 1.55rem; font-weight: 600; margin: .2em 0 .6em; letter-spacing: -.005em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .6em; } h3 { font-size: 1rem; }
h2 .ikona { color: var(--turkus); } .h-plik { display: flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; } .h-plik .ikona { margin-top: 5px; }
.wstecz { text-decoration: none; display: inline-flex; align-items: center; }

/* karty */
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: var(--cien); padding: 20px 24px; margin: 20px 0; }
.waska { max-width: 480px; margin: 40px auto; }
.dwie-kolumny { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: 32px 56px; align-items: center; max-width: 1000px; margin: 24px auto; }
.dwie-kolumny .karta { margin: 0; } .ilustracja img { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; }

/* pola */
label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: .92rem; }
input[type=email], input[type=password], input[type=file], input[type=text], input[type=date], textarea, select { width: 100%; padding: 9px 12px; border: 1px solid var(--pole-linia); border-radius: 8px; font: inherit; background: var(--pole); color: var(--tekst); }
input:hover, select:hover, textarea:hover { border-color: var(--akcent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--turkus); outline-offset: 0; border-color: var(--akcent); }
input[type=checkbox], input[type=radio] { accent-color: var(--akcent); width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; flex: none; }
.opcja { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; } .opcja label { margin: 0; font-weight: 400; }
.pomoc { color: var(--stonowany); font-size: .9rem; }
.pusto-tekst { color: var(--stonowany); }

/* przyciski */
.przycisk, button.przycisk { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 9px 18px; background: var(--przycisk); color: var(--przycisk-tekst); border: 1px solid var(--przycisk); border-radius: 8px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.przycisk:hover { background: var(--akcent); border-color: var(--akcent); }
.przycisk .ikona { color: inherit; } .przycisk.maly { margin-top: 0; padding: 6px 12px; font-size: .9rem; }
.przycisk.wtorny, .przycisk.wtorny:hover { background: transparent; color: var(--tekst); border-color: var(--linia-mocna); } .przycisk.wtorny:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
.przycisk.niebezpieczny, .przycisk.wtorny.niebezpieczny { color: var(--zle); border-color: #e9b4a4; background: transparent; } .przycisk.niebezpieczny:hover { background: var(--zle-tlo); border-color: var(--zle); }
.przycisk-ikona { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--stonowany); cursor: pointer; text-decoration: none; list-style: none; }
.przycisk-ikona::-webkit-details-marker { display: none; }
.przycisk-ikona .ikona { margin: 0; } .przycisk-ikona:hover { background: var(--akcent-tlo); color: var(--akcent); border-color: var(--linia-mocna); }
.przycisk-ikona.wypelniony { background: var(--przycisk); color: var(--przycisk-tekst); } .przycisk-ikona.wypelniony:hover { background: var(--akcent); color: #fff; border-color: var(--akcent); }
.akcje-wiersz { display: flex; flex-wrap: wrap; gap: 8px 12px; }

/* foldery */
.naglowek-sekcji { display: flex; align-items: center; gap: 8px; position: relative; } .naglowek-sekcji h2 { margin: 0; }
.rozwin { position: relative; } .rozwin[open] > summary { background: var(--akcent-tlo); color: var(--akcent); }
.wysuniete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0; padding: 10px 12px; background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: 8px; box-shadow: var(--cien); }
.rozwin .wysuniete { position: absolute; z-index: 5; left: 0; top: 38px; width: min(420px, 86vw); }
.wysuniete label { margin: 0; } .wysuniete input[type=text] { flex: 1 1 180px; width: auto; }
.wiersz-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; } .wiersz-form label { margin: 0; }
.wiersz-form input[type=text], .wiersz-form select { width: auto; min-width: 180px; flex: 1 1 200px; }
.kafelki { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kafel-wrap { position: relative; }
.kafel { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 14px; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); text-decoration: none; color: var(--tekst); }
.kafel:hover { border-color: var(--turkus); }
.kafel.aktywny { border-color: var(--turkus); box-shadow: 0 0 0 1px var(--turkus); background: var(--akcent-tlo); }
.kafel .kafel-ikona { width: 24px; height: 24px; margin: 0; color: var(--turkus); }
.kafel-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.kafel-nazwa { font-weight: 600; overflow-wrap: anywhere; } .kafel-licz { color: var(--stonowany); font-size: .84rem; }
.z-akcjami .kafel { padding-right: 46px; }
.akcje-folderu { position: absolute; right: 6px; top: 8px; } .akcje-folderu .wysuniete { position: absolute; right: 0; top: 38px; z-index: 5; width: min(380px, 80vw); flex-direction: column; align-items: stretch; }
.akcje-folderu .wiersz-form { margin: 2px 0; }

/* filtry */
.filtry { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 6px 0 4px; }
.pole-ikona { position: relative; } .pole-ikona > .ikona { position: absolute; left: 11px; top: 11px; margin: 0; width: 16px; height: 16px; color: var(--stonowany); pointer-events: none; }
.pole-ikona input, .pole-ikona select { padding-left: 34px; }
.pole-szukaj { flex: 1 1 240px; } .pole-szukaj input { width: 100%; }
.filtry input[type=date] { width: 168px; } .filtry select { width: auto; max-width: 210px; } .filtry-akcje { display: flex; gap: 4px; align-items: center; }
input[type=date] { min-height: 40px; }

/* lista */
.lista-dok { max-height: 26rem; overflow: auto; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); margin-top: 6px; }
.lista-dok td.plik { white-space: normal; overflow-wrap: break-word; width: 40%; min-width: 14rem; }
.lista-dok th { position: sticky; top: 0; z-index: 1; background: var(--karta); box-shadow: 0 1px 0 var(--linia-mocna); }
.lista-dok td { white-space: nowrap; }
.lista-dok:focus-visible { outline: 3px solid var(--turkus); outline-offset: 2px; }
.lista-dok tbody tr:hover { background: var(--akcent-tlo); }
.lista-dok td.plik a:not(.przycisk-ikona) { text-decoration: none; } .lista-dok td.plik a:not(.przycisk-ikona):hover { text-decoration: underline; }
.przycisk-ikona.mini { width: 26px; height: 26px; margin-left: 4px; vertical-align: middle; } .przycisk-ikona.mini .ikona { width: 16px; height: 16px; color: var(--akcent); }
.lista-dok td.akcja { text-align: right; padding: 3px 6px; }
.wyciszone { color: var(--stonowany); font-size: .9rem; } a.bez-linii { color: inherit; text-decoration: none; } a.bez-linii:hover { color: var(--akcent); text-decoration: underline; }
.wyciszone .ikona { color: var(--turkus); } .przed-nazwa { color: var(--stonowany); }
.tabela-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linia); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--stonowany); background: transparent; }
code { font-size: .85rem; word-break: break-all; }
.pusto { text-align: center; padding: 24px 8px 12px; color: var(--stonowany); } .pusto img { width: 140px; height: auto; opacity: .95; } .pusto p { margin: 8px 0 0; }

/* strefa wgrywania */
.strefa { position: relative; margin: 8px 0 12px; border: 2px dashed var(--linia-mocna); border-radius: var(--promien); background: var(--tlo); transition: border-color .15s, background .15s; }
.strefa:hover, .strefa.nad { border-color: var(--turkus); background: var(--akcent-tlo); }
.strefa:focus-within { outline: 3px solid var(--turkus); outline-offset: 2px; }
.strefa-pole { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.strefa-etykieta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 26px 16px; text-align: center; font-weight: 400; cursor: pointer; }
.strefa-etykieta strong { font-weight: 600; } .strefa .strefa-ikona { width: 40px; height: 40px; margin: 0 0 4px; color: var(--turkus); stroke-width: 1.5; }
.rzad-wgrywania { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; } .rzad-wgrywania .pole-ikona { flex: 0 1 280px; }
.rzad-wgrywania .opcja { margin: 0; }
fieldset.obiegi { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .obiegi legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.obieg { position: relative; flex: 1 1 200px; } .obieg input { position: absolute; left: 12px; top: 13px; }
.obieg label { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px 10px 38px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); font-weight: 400; cursor: pointer; height: 100%; }
.obieg label strong { font-weight: 600; } .obieg label .pomoc { font-size: .82rem; line-height: 1.35; }
.obieg input:checked + label { border-color: var(--turkus); box-shadow: 0 0 0 1px var(--turkus); background: var(--akcent-tlo); }
.obieg input:focus-visible + label { outline: 3px solid var(--turkus); outline-offset: 2px; }
fieldset { border: 1px solid var(--linia); border-radius: 8px; margin: 16px 0; } legend { font-weight: 600; padding: 0 6px; }

/* statusy */
.etykieta { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--szare-tlo); color: var(--tekst); }
.kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--stonowany); flex: none; }
.st-gotowy, .st-scalony, .poziom-niskie { background: var(--ok-tlo); color: var(--ok); } .st-gotowy .kropka, .st-scalony .kropka { background: var(--kropka-ok); }
.st-wymaga_akceptacji, .poziom-srednie { background: var(--uwaga-tlo); color: var(--uwaga); } .st-wymaga_akceptacji .kropka { background: var(--kropka-uwaga); }
.st-zablokowany, .st-blad, .poziom-wysokie { background: var(--zle-tlo); color: var(--zle); } .st-zablokowany .kropka, .st-blad .kropka { background: var(--kropka-zle); }
.st-przyjety, .st-ekstrakcja, .st-wykrywanie, .st-pseudonimizacja, .st-straznik, .st-jakosc, .st-powrot_przyjety, .st-scalanie { background: var(--info-tlo); color: var(--info); }
.st-przyjety .kropka, .st-ekstrakcja .kropka, .st-wykrywanie .kropka, .st-pseudonimizacja .kropka, .st-straznik .kropka, .st-jakosc .kropka, .st-powrot_przyjety .kropka, .st-scalanie .kropka { background: var(--kropka-info); }
.blad { display: flex; align-items: flex-start; gap: 8px; background: var(--zle-tlo); color: var(--zle); border: 1px solid #f0bcab; border-radius: 8px; padding: 10px 12px; } .blad .ikona { margin: 3px 0 0; }
.ostrzezenie { background: var(--uwaga-tlo); color: var(--uwaga); border-radius: 8px; padding: 8px 12px; }
.os { list-style: none; padding: 0; margin: 0; } .os li { padding: 8px 0; border-bottom: 1px solid var(--linia); } .os li:last-child { border-bottom: 0; } .czas { color: var(--stonowany); font-size: .86rem; margin-right: 8px; }
.stopka { text-align: center; color: var(--stonowany); font-size: .82rem; padding: 16px; }

@media (max-width: 800px) {
  .uklad { flex-direction: column; } .menu { width: 100%; border-right: 0; border-bottom: 1px solid var(--linia); padding: 8px 10px; align-self: auto; }
  .menu nav { display: flex; flex-wrap: wrap; gap: 0 4px; align-items: center; } .menu .poz { width: auto; display: inline-flex; border-radius: 8px; border-left: 0; border-bottom: 3px solid transparent; }
  .menu .poz.biezaca { border-bottom-color: var(--turkus); border-left: 0; } .menu-lista { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; }
  .menu-naglowek { display: none; } .menu-wyloguj { margin: 0; padding: 0; border: 0; } .uklad main { width: 100%; }
  .dwie-kolumny { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 12px auto; } .ilustracja { order: -1; } .ilustracja img { max-width: 300px; }
}
@media (max-width: 640px) {
  .gora { padding: 8px 12px; } main { padding: 14px 12px 40px; } .karta { padding: 16px; } th, td { padding: 8px 6px; }
  .marka-opis { display: none; } .marka { gap: 10px; } .kto-mail { font-size: .8rem; } .gora nav { flex-basis: 100%; }
  .filtry .pole-ikona { flex: 1 1 140px; } .filtry input[type=date], .filtry select { width: 100%; max-width: none; } .filtry > div:not(.pole-ikona):not(.filtry-akcje) { flex: 1 1 140px; }
  .rozwin .wysuniete { position: static; width: auto; }
  h1 { font-size: 1.35rem; }
}
@media (prefers-color-scheme: dark) {
  :root { --tlo: #16191d; --karta: #1e2227; --tekst: #e8edf0; --stonowany: #a3b0b6; --linia: #2d343b; --linia-mocna: #3f4851;
    --akcent: #00b5cc; --akcent-tlo: #14333a; --przycisk: #00b5cc; --przycisk-tekst: #0b1d21; --pole: #16191d; --pole-linia: #5d6a72;
    --cien: 0 1px 2px rgba(0,0,0,.4); --ok: #8fe3d6; --ok-tlo: #12382f; --uwaga: #ffd77a; --uwaga-tlo: #4a3606;
    --zle: #ffb4a0; --zle-tlo: #4a1f14; --info: #aab0ff; --info-tlo: #23265a; --szare-tlo: #2a3138; --baner-tlo: #2b2410; --baner-tekst: #ffe9a0; }
  .baner .ikona { color: #ffb900; } .przycisk:hover { background: #33c9de; border-color: #33c9de; color: #0b1d21; }
  .przycisk.niebezpieczny, .przycisk.wtorny.niebezpieczny { border-color: #7a3a28; } .blad { border-color: #7a3a28; }
  .przycisk-ikona.wypelniony:hover { color: #0b1d21; }
  .kropka { background: var(--stonowany); }
}

/* telefon: w tabeli najważniejsze są plik, status i wynik */
@media (max-width: 640px) { .kol-folder { display: none; } }

/* Pole-pułapka dla botów: poza ekranem (nie display:none, bo część botów takie pomija). */
.pulapka { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.zapamietaj { display: flex; align-items: center; gap: .5rem; margin: .75rem 0; font-weight: 400; }

.lista-dok td.czas-przetw { font-variant-numeric: tabular-nums; }
.lista-dok td.blad-czas { color: var(--zle); }