:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c2230; --line:#2a3140;
  --txt:#e6edf3; --muted:#8b98a9; --acc:#7c5cff; --acc2:#00d1b2;
  --good:#3fb950; --warn:#d29922; --bad:#f85149; --chip:#232a36;
}
*{box-sizing:border-box}
/* Grube, wyraziste paski przewijania - latwe do zlapania gladzikiem */
*{scrollbar-width:auto;scrollbar-color:#7c5cff #161b22}
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:#11151c}
::-webkit-scrollbar-thumb{background:#7c5cff;border-radius:8px;border:3px solid #11151c;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:#00d1b2}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--acc)}
html,body{height:auto;overflow-x:hidden}
.app{display:flex;align-items:flex-start;min-height:100vh}
.side{position:sticky;top:0;height:100vh;width:230px;flex:0 0 230px;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);padding:18px 14px;z-index:5}
.brand{font-weight:700;font-size:18px;margin:4px 6px 20px;display:flex;gap:8px;align-items:center}
.brand small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.nav button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;color:var(--muted);
  padding:10px 12px;border-radius:9px;cursor:pointer;font-size:14px;margin-bottom:2px}
.nav button:hover{background:var(--panel2);color:var(--txt)}
.nav button.active{background:var(--acc);color:#fff}
.main{flex:1;padding:26px 30px;min-height:100vh}
.main>*{max-width:1200px}
h1{font-size:22px;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.card .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.card .v{font-size:26px;font-weight:700;margin-top:6px}
.card .v small{font-size:13px;color:var(--muted);font-weight:400}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:20px}
.panel h2{font-size:15px;margin:0 0 14px;color:var(--txt)}
.bar{display:flex;align-items:center;gap:10px;margin:7px 0}
.bar .lbl{width:180px;font-size:13px;color:var(--muted)}
.bar .track{flex:1;background:var(--panel2);border-radius:6px;height:16px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.bar .num{width:96px;text-align:right;font-size:12px;color:var(--muted)}
.post{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:10px}
.post .meta{display:flex;gap:12px;color:var(--muted);font-size:12px;margin-bottom:6px;flex-wrap:wrap;align-items:center}
.post .txt{white-space:pre-wrap}
.chip{background:var(--chip);color:var(--muted);border-radius:999px;padding:2px 9px;font-size:11px;border:1px solid var(--line)}
.chip.theme{color:var(--acc2)}
.stat{color:var(--txt)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
select,input,textarea,button.btn{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:14px}
textarea{width:100%;min-height:120px;resize:vertical;font-family:inherit}
textarea.editor{min-height:140px;font-size:16px;line-height:1.7;padding:14px 16px;background:#0b0e13;border:1px solid var(--line);border-radius:10px;overflow:hidden}
textarea.editor:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(124,92,255,.25)}
button.btn{cursor:pointer}
button.btn:hover{border-color:var(--acc)}
button.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
button.btn.good{background:var(--good);border-color:var(--good);color:#04210c}
button.btn.bad{background:transparent;border-color:var(--bad);color:var(--bad)}
button.btn.sm{padding:5px 10px;font-size:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.score{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.dot{width:10px;height:10px;border-radius:50%}
.dot.g{background:var(--good)} .dot.w{background:var(--warn)} .dot.b{background:var(--bad)}
.flags{margin:8px 0 0;padding-left:18px;color:var(--warn);font-size:12px}
.flags li{margin:2px 0}
.grid2{display:grid;grid-template-columns:1fr 320px;gap:18px}
.muted{color:var(--muted)}
.tag{display:inline-block;background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:2px 8px;margin:2px;font-size:12px}
.do{color:var(--good)} .dont{color:var(--bad)}
.pill{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.pill.pending{background:#3a2f00;color:var(--warn)}
.pill.approved{background:#0d2b14;color:var(--good)}
.pill.rejected{background:#2b0d0d;color:var(--bad)}
.pill.published{background:#0d1f2b;color:var(--acc2)}
.pill.draft{background:var(--chip);color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:40px}
/* Warianty recyklingu - inline pod postem w Bibliotece */
.variants{margin-top:12px;padding-left:14px;border-left:3px solid var(--acc);display:flex;flex-direction:column;gap:10px}
.variant{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.variant.published{border-color:var(--good);background:rgba(63,185,80,.08)}
.variant.published .editor{border-color:rgba(63,185,80,.5)}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.kbd{font-family:ui-monospace,Menlo,monospace;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12px}

/* ---------- strona logowania ---------- */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background:radial-gradient(1100px 520px at 50% -10%,rgba(124,92,255,.20),transparent 60%),var(--bg)}
.login-box{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:30px 28px 26px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.login-logo{font-size:34px;line-height:1;margin-bottom:12px}
.login-box h1{font-size:20px;margin:0 0 2px}
.login-sub{color:var(--muted);font-size:13px;margin:0 0 24px}
.login-box label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px;text-transform:uppercase;letter-spacing:.04em}
.login-box input[type=text],.login-box input[type=password],.login-box input:not([type]){width:100%;margin-bottom:16px}
.login-box input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(124,92,255,.25)}
.login-pass{position:relative}
.login-eye{position:absolute;top:9px;right:8px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:2px 4px}
.login-eye:hover{color:var(--txt)}
.login-box label.login-check{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;
  color:var(--muted);margin:2px 0 20px;cursor:pointer}
.login-check input{width:15px;height:15px;accent-color:var(--acc);margin:0}
.login-submit{width:100%;padding:11px;font-size:15px;font-weight:600}
.login-submit:disabled{opacity:.6;cursor:default}
.login-err{background:rgba(248,81,73,.12);border:1px solid rgba(248,81,73,.45);color:#ffb4ae;
  border-radius:9px;padding:10px 12px;margin:16px 0 0;font-size:13px}
@keyframes login-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:login-shake .3s}

/* stopka menu bocznego: kto zalogowany + wylogowanie */
.side-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.side-foot #whoami{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ================= TELEFON ================= */
/* Zona ma korzystac z panelu glownie na telefonie: nawigacja idzie na dol pod kciuk,
   dotykalne przyciski, pola 16px (iOS nie przybliza), tresc na pelna szerokosc. */
.nav button .ico { font-size: 15px }
.nav button .lbl { white-space: nowrap }
.nav button .lbl-short { display: none }

@media (max-width: 860px) {
  html, body { overflow-x: hidden }
  ::-webkit-scrollbar { width: 6px; height: 6px }

  .app { display: block }

  /* gorny pasek: kto zalogowany + wylogowanie */
  .side {
    position: sticky; top: 0; width: auto; height: auto; flex: none;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); z-index: 40;
  }
  .side .brand { margin: 0; font-size: 16px; gap: 6px }
  .side .brand small { font-size: 11px }
  .side #sideStats { display: none }
  .side .side-foot { margin: 0; padding: 0; border: 0; gap: 10px }

  /* dolna nawigacja - kciukiem, bez przewijania strony */
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 0;
    background: var(--panel); border-top: 1px solid var(--line); z-index: 60;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0,0,0,.35);
  }
  .nav button {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; margin: 0;
    padding: 7px 2px; border-radius: 10px; font-size: 9px; line-height: 1.15;
  }
  .nav button .lbl-short { display: inline }
  .nav button .lbl-short + .lbl { display: none }
  .nav button .lbl, .nav button .lbl-short { overflow: hidden; text-overflow: ellipsis; max-width: 100% }
  .nav button.active { background: var(--acc) }

  .main { padding: 16px 13px calc(84px + env(safe-area-inset-bottom)); min-height: auto }
  .main > * { max-width: 100% }
  h1 { font-size: 20px }
  .sub { font-size: 13px; margin-bottom: 16px }

  /* karty KPI po dwie w rzedzie */
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px }
  .card { padding: 12px }
  .card .v { font-size: 21px }
  .card .v small { display: block; margin-top: 2px }

  .panel { padding: 14px 12px }
  .grid2 { grid-template-columns: 1fr }

  /* wykresy tematow czytelne na waskim ekranie */
  .bar { flex-wrap: wrap; gap: 6px }
  .bar .lbl { width: 100%; font-size: 12px }
  .bar .track { height: 12px }
  .bar .num { width: auto; font-size: 11px }

  /* dotyk: nic mniejszego niz ~40 px */
  select, input, textarea, button.btn { font-size: 16px; padding: 11px 12px }
  button.btn { min-height: 42px }
  button.btn.sm { min-height: 38px; font-size: 13px; padding: 8px 12px }
  .toolbar { gap: 8px }
  .toolbar select, .toolbar input { flex: 1 1 140px; min-width: 0 }

  /* posty i warianty */
  .post { padding: 12px }
  .post .txt { font-size: 15px }
  .variants { padding-left: 8px; border-left-width: 2px }
  .variant { padding: 11px 10px }
  textarea.editor { font-size: 16px; padding: 12px }
  .variant .row { gap: 6px }
  .variant .row button.btn { flex: 1 1 auto }

  /* na telefonie kopiowanie to glowna akcja: idzie na pelna szerokosc */
  button.btn.copy { width: 100%; margin-top: 6px; background: var(--acc); border-color: var(--acc); color: #fff }

  .login-box { max-width: 100%; padding: 26px 20px }
}

/* bardzo waskie telefony */
@media (max-width: 380px) {
  .nav button { font-size: 8px; padding: 6px 1px }
  .nav button .ico { font-size: 14px }
  .cards { grid-template-columns: 1fr }
}

/* podswietlenie wariantu, na ktory wskazujemy po powtornym kliknieciu kanalu */
@keyframes variant-flash { from { box-shadow: 0 0 0 3px rgba(124,92,255,.7) } to { box-shadow: 0 0 0 3px rgba(124,92,255,0) } }
.variant.flash { animation: variant-flash 1.2s ease-out }

/* planowanie terminu w kolejce */
.plan-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px }
.plan-row input[type=date] { color-scheme: dark }
.panel.late { border-color: rgba(248,81,73,.55) }
@media (max-width: 860px) {
  .plan-row { gap: 6px }
  .plan-row label { width: 100% }
  .plan-row input[type=date] { flex: 1 1 140px }
  .plan-row button.btn { flex: 1 1 auto }
}

.savemark { color: var(--good); font-size: 12px }