:root {
  --tlo: #0a0c0b; --karta: #121614; --karta2: #171c19; --linia: rgba(229,239,216,.13);
  --tekst: #f2f5ef; --mute: #a5aca3; --lim: #c5fa62; --lim2: #9fd63e; --blad: #ff8f8f; --ok: #7fe0a0; --info: #6fb7ff;
  --mono: "DM Mono", ui-monospace, Menlo, monospace; --sans: Manrope, system-ui, -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 15px/1.55 var(--sans); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--lim); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 10px; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 800; } h2 { font-size: 19px; font-weight: 800; } h3 { font-size: 16px; font-weight: 700; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--mute); }
.small { font-size: 13px; }

/* nagłówek + nawigacja */
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 14px 20px; border-bottom: 1px solid var(--linia); position: sticky; top: 0; background: rgba(10,12,11,.92); backdrop-filter: blur(8px); z-index: 10; }
.logo { text-decoration: none; color: var(--tekst); font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.logo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lim); box-shadow: 0 0 12px var(--lim); }
nav { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 2px; }
nav::-webkit-scrollbar { display: none; }
nav a { text-decoration: none; color: var(--mute); border: 1px solid var(--linia); border-radius: 999px; padding: 6px 12px; white-space: nowrap; font-size: 14px; }
nav a.on, nav a:hover { color: var(--tlo); background: var(--lim); border-color: var(--lim); }
nav a.out { margin-left: auto; border-style: dashed; }
main { padding: 20px; max-width: 1100px; width: 100%; margin: 0 auto; flex: 1; }
.stopka { padding: 16px 20px; color: var(--mute); font-size: 12px; border-top: 1px solid var(--linia); font-family: var(--mono); }

/* komunikaty */
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--linia); background: var(--karta); }
.flash.ok { border-color: rgba(127,224,160,.4); } .flash.blad { border-color: rgba(255,143,143,.5); color: var(--blad); } .flash.info { border-color: rgba(111,183,255,.4); }

/* karty / siatka */
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 16px; padding: 18px; }
.karta + .karta { margin-top: 14px; }
.siatka { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.siatka-2 { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .siatka-2 { grid-template-columns: minmax(0, 1fr); } }
.liczniki { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 18px; }
.licznik { background: var(--karta); border: 1px solid var(--linia); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--tekst); }
.licznik b { display: block; font-size: 30px; font-weight: 800; color: var(--lim); line-height: 1.1; }
.licznik span { color: var(--mute); font-size: 13px; }
.naglowek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }

/* formularze */
form.panel { display: grid; gap: 12px; }
label { display: grid; gap: 5px; font-size: 13px; color: var(--mute); }
label > span b { color: var(--tekst); }
input[type=text], input[type=password], input[type=number], input[type=url], textarea, select {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(229,239,216,.2); background: #0e1210; color: var(--tekst); font: inherit; font-size: 15px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(197,250,98,.5); outline-offset: 1px; border-color: var(--lim); }
.rzad { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta2); color: var(--tekst); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; font-size: 14px; }
.btn:hover { border-color: var(--lim); }
.btn.glowny { background: var(--lim); color: var(--tlo); border-color: var(--lim); }
.btn.glowny:hover { background: var(--lim2); }
.btn.maly { padding: 6px 10px; font-size: 13px; }
.btn.niebezp { color: var(--blad); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }
.akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.radio { display: flex; flex-wrap: wrap; gap: 8px; }
.radio label { display: flex; flex-direction: row; align-items: center; gap: 6px; border: 1px solid var(--linia); border-radius: 999px; padding: 7px 12px; cursor: pointer; color: var(--tekst); }
.radio label:has(input:checked) { background: var(--lim); color: var(--tlo); border-color: var(--lim); }
.radio input { accent-color: var(--lim); margin: 0; }

/* listy */
.lista { display: grid; gap: 10px; }
.wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; background: var(--karta); border: 1px solid var(--linia); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--tekst); }
.wiersz:hover { border-color: rgba(197,250,98,.5); }
.wiersz .tyt { font-weight: 700; font-size: 16px; }
.wiersz .meta { color: var(--mute); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wiersz .meta .gw { color: var(--lim); }
.status { font-family: var(--mono); font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linia); color: var(--mute); white-space: nowrap; }
.s-do_nagrania { color: var(--lim); border-color: rgba(197,250,98,.5); }
.s-nagrane { color: var(--info); border-color: rgba(111,183,255,.5); }
.s-opublikowane, .s-gotowa, .s-opublikowana { color: var(--ok); border-color: rgba(127,224,160,.5); }
.s-generuje { color: var(--lim); animation: puls 1.4s infinite; }
.s-blad { color: var(--blad); border-color: rgba(255,143,143,.5); }
@keyframes puls { 50% { opacity: .45; } }
.filtry { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filtry a { text-decoration: none; color: var(--mute); border: 1px solid var(--linia); border-radius: 999px; padding: 5px 11px; font-size: 13px; }
.filtry a.on { color: var(--tlo); background: var(--lim); border-color: var(--lim); }

/* postęp zadania */
.postep { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(197,250,98,.5); background: rgba(197,250,98,.05); font-family: var(--mono); font-size: 13px; }
.postep .kolo { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(197,250,98,.3); border-top-color: var(--lim); animation: obrot 1s linear infinite; flex: none; }
@keyframes obrot { to { transform: rotate(360deg); } }

/* skrypt (markdown) */
.skrypt { background: var(--karta); border: 1px solid var(--linia); border-radius: 16px; padding: 20px 22px; }
.skrypt h2 { font-size: 20px; margin: 0 0 14px; }
.skrypt h3 { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--lim); margin: 22px 0 8px; }
.skrypt blockquote { margin: 0 0 10px; padding: 12px 16px; border-left: 3px solid var(--lim); background: #0e1210; border-radius: 0 10px 10px 0; font-size: 17px; line-height: 1.5; }
.skrypt p { margin: 0 0 10px; }
.skrypt hr { border: 0; border-top: 1px solid var(--linia); margin: 18px 0; }
.skrypt ul, .skrypt ol { margin: 0 0 10px; padding-left: 22px; }
.skrypt [class^=tag-] { display: inline-block; font-family: var(--mono); font-size: 13px; color: var(--mute); background: rgba(229,239,216,.06); border-radius: 8px; padding: 4px 10px; }
.skrypt [class^=tag-] b { color: var(--info); font-weight: 500; }
.skrypt .tag-uzupełnij { color: #ffd166; } .skrypt .tag-uzupełnij b { color: #ffd166; }
.skrypt code { background: rgba(229,239,216,.08); padding: 1px 5px; border-radius: 5px; }
.zrodlo { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 13px; color: var(--mute); max-height: 200px; overflow: auto; background: #0e1210; padding: 10px 12px; border-radius: 10px; }

/* discovery */
.filmy { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.film { background: var(--karta); border: 1px solid var(--linia); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.film .mini { aspect-ratio: 9 / 13; background: #0e1210 center / cover no-repeat; position: relative; display: block; }
.film .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film .mini .brak { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-family: var(--mono); font-size: 12px; }
.film .tresc { padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; }
.film .autor { font-weight: 700; }
.film .opis { color: var(--mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.film .stat { display: flex; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.film .stat b { color: var(--lim); font-weight: 500; }
.film .akcje { padding: 0 12px 12px; margin-top: auto; }

/* karuzela */
.slajdy { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.slajd-pod { background: var(--karta); border: 1px solid var(--linia); border-radius: 12px; padding: 8px; display: grid; gap: 8px; }
.slajd-pod canvas { width: 100%; height: auto; border-radius: 8px; display: block; background: #0b1430; }
.slajd-edycja { display: grid; gap: 8px; }
.slajd-edycja input, .slajd-edycja textarea { font-size: 13px; padding: 8px 10px; }
.slajd-edycja textarea { min-height: 70px; }

/* logowanie */
.login { max-width: 340px; margin: 14vh auto 0; display: grid; gap: 12px; }
.login h1 { font-size: 24px; }
.login .btn { justify-content: center; }
.err { color: var(--blad); }

/* dashboard */
.szybkie { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.worker { font-family: var(--mono); font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 8px; }
.worker i { width: 8px; height: 8px; border-radius: 50%; background: var(--blad); display: inline-block; }
.worker.ok i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tab th, table.tab td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linia); vertical-align: top; }
table.tab th { color: var(--mute); font-weight: 600; }

@media (max-width: 600px) {
  main { padding: 14px 16px; }
  .top { padding: 10px 16px; }
  .wiersz { grid-template-columns: minmax(0, 1fr); }
  .skrypt { padding: 16px; }
  .skrypt blockquote { font-size: 16px; }
  h1 { font-size: 22px; }
}

/* ---------- Rolki: foldery z materiałami (v1.3) ---------- */
.miejsce{display:grid;gap:6px;min-width:220px;font-size:13px;color:var(--mute)}
.miejsce i{display:block;height:6px;border-radius:99px;background:var(--linia);position:relative;overflow:hidden}
.miejsce i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--lim);border-radius:99px}
.nowy-folder{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:16px}
.foldery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:18px}
.folder{display:flex;gap:12px;align-items:center;background:var(--karta);border:1px solid var(--linia);border-radius:14px;padding:12px;color:inherit;text-decoration:none;transition:border-color .2s}
.folder:hover{border-color:rgba(197,250,98,.5)}
.folder-okladka{width:72px;height:72px;flex:none;border-radius:10px;background:var(--karta2);display:grid;place-items:center;overflow:hidden;font-size:28px}
.folder-okladka img{width:100%;height:100%;object-fit:cover}
.folder-opis{display:grid;gap:3px;min-width:0}
.folder-opis b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nazwa-folderu{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nazwa-folderu input{font:800 24px/1.2 var(--sans);background:transparent;border:1px solid transparent;color:var(--tekst);padding:4px 6px;border-radius:8px;min-width:240px}
.nazwa-folderu input:hover,.nazwa-folderu input:focus{border-color:var(--linia)}
.szablony{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
#pole-opisu{min-height:140px;width:100%}
.wrzut{border:2px dashed var(--linia);border-radius:14px;padding:22px;text-align:center;transition:border-color .2s,background .2s}
.wrzut.nad{border-color:var(--lim);background:rgba(197,250,98,.06)}
.wrzut p{margin:6px 0}
.kolejka{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.kolejka li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px}
.kolejka-nazwa{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kolejka-pasek{grid-column:1/-1;height:5px;border-radius:99px;background:var(--linia);overflow:hidden}
.kolejka-pasek i{display:block;height:100%;width:0;background:var(--lim);transition:width .3s}
.kolejka li.blad .stan{color:var(--blad)}
.kolejka li.blad .kolejka-pasek i{background:var(--blad)}
.pliki{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px;align-items:start}
.plik{margin:0;background:var(--karta2);border:1px solid var(--linia);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.plik-podglad{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border:0;padding:0;background:#000;cursor:pointer;display:grid;place-items:center;color:var(--mute)}
.plik-podglad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plik-ikona{font-size:34px}
.plik-czas{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.7);color:#fff;font:500 12px var(--mono);padding:2px 6px;border-radius:6px}
.plik figcaption{display:grid;gap:3px;padding:8px 10px;min-width:0}
.plik figcaption .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plik-nazwa{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plik-akcje{display:flex;gap:10px}
.link-usun{background:none;border:0;padding:0;color:var(--blad);cursor:pointer;font:inherit}
dialog.podglad{max-width:min(92vw,900px);background:var(--karta);color:var(--tekst);border:1px solid var(--linia);border-radius:14px;padding:16px}
dialog.podglad::backdrop{background:rgba(0,0,0,.75)}
dialog.podglad video,dialog.podglad img{max-width:100%;max-height:75vh;display:block;margin:auto;border-radius:8px}
dialog.podglad audio{width:min(80vw,520px)}
.podglad-x{float:right;background:none;border:0;color:var(--tekst);font-size:20px;cursor:pointer}
@media (max-width:640px){.pliki{grid-template-columns:repeat(2,minmax(0,1fr))}.nazwa-folderu input{font-size:20px;min-width:0;width:100%}}
/* Rolki: agent i wersje (v1.4) */
.agent-stan{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:var(--mute)}
.agent-stan i{width:9px;height:9px;border-radius:50%;background:var(--blad);flex:none}
.agent-stan.ok i{background:var(--ok)}
.agent-stan code{font-family:var(--mono);color:var(--tekst)}
.wersja{border-top:1px solid var(--linia);padding:14px 0}
.wersja:first-of-type{border-top:0}
.wersja header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.wersja header b{font:800 20px var(--sans)}
.wynik{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:18px;align-items:start}
.wynik video{width:100%;max-height:70vh;background:#000;border-radius:12px;aspect-ratio:9/16}
.wynik-txt{white-space:pre-wrap;font:13px/1.5 var(--mono);background:var(--karta2);border:1px solid var(--linia);border-radius:10px;padding:12px;max-height:260px;overflow:auto}
.kroki{margin:8px 0 0;padding-left:20px;font-size:13px;color:var(--mute);display:grid;gap:3px}
.kroki li:last-child{color:var(--tekst)}
.wersja-trwa .kroki li:last-child::after{content:" …";animation:mig 1.2s infinite}
@keyframes mig{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.wersja-trwa .kroki li:last-child::after{animation:none}}
@media (max-width:640px){.wynik{grid-template-columns:1fr}.wynik video{max-height:60vh}}