/* © 2026 chmura.eu.og by Patrycja Talarska-Kulczyk. Demo copy — do not redistribute. */
/* ============================================================
   Korepetytor Maturalny — Biologia
   Motyw: soft neobrutalism — białe tło, gruba czarno-granatowa
   kreska (--ink), twarde przesunięte cienie (bez rozmycia) zamiast
   miękkich cieni, żywa paleta akcentów, zaokrąglone (nie ostre) rogi.
   ============================================================ */
:root{
  /* neutralna skala szarości (tekst/tło) */
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-400:#9ca3af;
  --gray-500:#6b7280;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --gray-900:#111827;

  /* kreska/cień neobrutalizmu — jeden mocny, ciemny ton */
  --ink:#4b4a57;

  /* powierzchnie i tekst — tło zawsze białe */
  --bg-main:#ffffff;
  --bg-card:#ffffff;
  --bg-subtle:#f6f3ec;
  --text-main:var(--gray-900);
  --text-body:var(--gray-700);
  --text-muted:var(--gray-500);
  --border-soft:var(--ink);
  --border-med:var(--ink);

  /* akcent + semantyczne kolory — żywsze, bardziej neobrutalistyczne odcienie */
  --accent-blue:#3d5afe;
  --accent-blue-hover:#2a3fd6;
  --accent-blue-light:#e3e8ff;
  --accent-green:#12b76a;
  --accent-green-light:#d8f9e8;
  --accent-red:#ff5470;
  --accent-red-light:#ffe1e7;
  --accent-amber:#ffb703;
  --accent-amber-light:#fff3d3;
  --accent-purple:#9b5de5;
  --accent-purple-light:#f1e3fc;

  /* zgodność wsteczna z nazwami użytymi gdzie indziej */
  --bg-blue-soft:var(--accent-blue-light);
  --bg-green-soft:var(--accent-green-light);
  --bg-yellow-soft:var(--accent-amber-light);
  --bg-purple-soft:var(--accent-purple-light);

  --radius-sm:10px;
  --radius:14px;
  --radius-lg:18px;
  /* twarde, przesunięte cienie (neobrutalizm) — rosną na hover, znikają na :active */
  --shadow-sm:3px 3px 0 var(--ink);
  --shadow:4px 4px 0 var(--ink);
  --shadow-md:6px 6px 0 var(--ink);
  --shadow-lg:8px 8px 0 var(--ink);
  --font-main:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg-main);color:var(--text-body);font-family:var(--font-main);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;}
body{min-height:100vh;}
a{color:var(--accent-blue);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{color:var(--text-main);line-height:1.25;margin:0 0 .4em;letter-spacing:-.01em;}
h1{font-size:1.75rem;font-weight:700;}
h2{font-size:1.25rem;font-weight:700;color:var(--text-main);}
h3{font-size:1.05rem;font-weight:600;}
p{margin:0 0 .8rem;}
small{color:var(--text-muted);}
[x-cloak]{display:none !important;}
:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px;border-radius:4px;}

/* ---------- Layout ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);padding:.7rem 1.4rem;box-shadow:none;}
.topbar-row{display:flex;align-items:center;gap:1rem;}
.topbar .brand{font-weight:700;color:var(--text-main);font-size:1rem;display:flex;align-items:center;gap:.6rem;white-space:nowrap;flex-shrink:0;}
.topbar .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent-blue);display:inline-block;box-shadow:0 0 0 3px var(--accent-blue-light);}
.topbar .brand-icon{width:28px;height:28px;flex-shrink:0;color:var(--accent-blue);}
.topbar .brand-icon svg{width:100%;height:100%;stroke-width:1.8px;}
.topbar .brand-stack{display:flex;flex-direction:column;line-height:1.2;gap:1px;}
.topbar .brand-line1{font-size:.66rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;}
.topbar .brand-line2{font-size:1.08rem;font-weight:800;color:var(--text-main);}
.topbar .crumbs{color:var(--text-muted);font-size:.83rem;display:flex;gap:.35rem;align-items:center;flex-wrap:nowrap;
  min-width:0;overflow-x:auto;scrollbar-width:none;}
.topbar .crumbs::-webkit-scrollbar{display:none;}
.topbar .crumbs .crumb{display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0;white-space:nowrap;}
.topbar .crumbs .sep{color:var(--border-med);}
.topbar .crumbs a{color:var(--text-muted);white-space:nowrap;font-weight:500;display:inline-flex;align-items:center;gap:.3rem;}
.topbar .crumbs a:hover{color:var(--accent-blue);text-decoration:none;}
.topbar .crumbs b{color:var(--text-main);font-weight:600;}
.topbar .crumbs .crumb-kod{display:inline-block;font-size:.68rem;font-weight:700;color:var(--accent-blue);background:var(--accent-blue-light);border-radius:6px;padding:1px 6px;vertical-align:middle;}
.topbar .crumbs b .crumb-kod{color:var(--accent-green);background:var(--accent-green-light);}
.topbar .spacer{flex:1;}
.topbar-actions{display:flex;align-items:center;gap:.5rem;}
.nav-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);
  border:1.25px solid var(--border-soft);background:var(--bg-card);color:var(--text-body);cursor:pointer;flex-shrink:0;}
.nav-toggle:hover{background:var(--bg-subtle);border-color:var(--border-med);}
.container{max-width:1180px;margin:0 auto;padding:1.8rem 1.4rem 4rem;}

/* ---------- Buttons (soft neobrutalism: delikatne pastelowe tło, czarny
   tekst/ikony wszędzie, gruba kreska + twardy cień, który "wjeżdża" pod
   przycisk na kliknięcie - kolor sygnalizuje TYP akcji, nie krzyczy). ---------- */
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent-blue-light);color:var(--ink);border:1.5px solid var(--ink);
  padding:.5rem 1rem;border-radius:var(--radius-sm);font-family:inherit;font-size:.875rem;font-weight:700;cursor:pointer;
  white-space:nowrap;
  transition:background-color .12s,box-shadow .12s,transform .12s;box-shadow:var(--shadow-sm);}
.btn:hover{text-decoration:none;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(2px,2px);box-shadow:none;}
.btn.ghost{background:var(--bg-card);color:var(--ink);}
.btn.ghost:hover{background:var(--bg-subtle);}
.btn.green{background:var(--accent-green-light);}
.btn.danger{background:var(--accent-red-light);color:var(--ink);}
.btn.blue{background:var(--accent-blue-light);}
.btn.sm{padding:.35rem .75rem;font-size:.8rem;border-radius:var(--radius-sm);border-width:1.25px;}
.btn.xs{padding:.15rem .4rem;border-radius:8px;border-width:1px;box-shadow:2px 2px 0 var(--ink);}
.btn.xs:hover{box-shadow:3px 3px 0 var(--ink);}
.ic-xs{width:14px;height:14px;}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}
/* Wyjątek: "W lekcji" (disabled .btn.green) to potwierdzenie "już zrobione",
   nie błąd czy niedostępność - .45 opacity na już bladym, pastelowym tle
   robiło z niego prawie niewidoczny, wyblakły przycisk. Zostaje w pełni
   czytelny, tylko bez kursora/cienia sugerujących klikalność. */
.btn.green:disabled{opacity:1;cursor:default;}
/* Etykieta przycisku renderowana przez x-if (np. Dodaj/W lekcji/W arkuszu) trafia
   do buttona jako pojedynczy <span> - bez własnego flex ten span sam nie centruje
   ikony i tekstu w pionie (tekst siada na baseline, niżej niż ikona), przez co
   napis wyglądał, jakby "leżał na dole" przycisku. */
.btn-label{display:inline-flex;align-items:center;gap:.4rem;}

/* ---------- Ikony (Lucide, statyczne SVG) - animacja na hover to WŁASNE,
   proste transformacje CSS (bez biblioteki animacji) - jeden spójny czas
   trwania/easing dla wszystkich, typ ruchu dobrany do znaczenia ikony. ---------- */
.ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;line-height:0;}
.ic svg{width:100%;height:100%;overflow:visible;transition:transform .32s cubic-bezier(.34,1.56,.64,1);}
/* czarno-białe, grube ikony (soft neobrutalism) - zawsze --ink, niezależnie od
   tła przycisku, żeby były wyraźnie widoczne i spójne z grubą czarną kreską
   reszty interfejsu. */
.ic svg path,.ic svg line,.ic svg circle,.ic svg rect,.ic svg polyline{stroke:var(--ink) !important;stroke-width:2.4px !important;}
.comment-btn .ic{width:17px;height:17px;}

/* typy animacji hover - klasa na .ic, wyzwalana hoverem na najbliższym przycisku/linku */
button:hover .ic.rot svg,a:hover .ic.rot svg,label:hover .ic.rot svg{transform:rotate(-14deg);}
button:hover .ic.spin svg,a:hover .ic.spin svg{transform:rotate(180deg);}
button:hover .ic.spin-full svg,a:hover .ic.spin-full svg{transform:rotate(360deg);}
button:hover .ic.down svg,a:hover .ic.down svg{transform:translateY(3px);}
button:hover .ic.up svg,a:hover .ic.up svg{transform:translateY(-3px);}
button:hover .ic.pop svg,a:hover .ic.pop svg{transform:scale(1.22);}
button:hover .ic.shake svg,a:hover .ic.shake svg{animation:ic-shake .4s ease;}
@keyframes ic-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-11deg)}75%{transform:rotate(11deg)}}

/* ---------- Cards / panels ---------- */
.widget-panel{background:var(--bg-card);border-radius:var(--radius);padding:18px;border:1.25px solid var(--border-soft);box-shadow:var(--shadow-sm);}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}

/* lesson cards */
.lesson-card{background:var(--bg-card);border:1.25px solid var(--border-soft);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;
  transition:transform .12s,box-shadow .12s,border-color .12s;display:flex;flex-direction:column;gap:.35rem;box-shadow:var(--shadow-sm);}
.lesson-card:hover{box-shadow:var(--shadow-md);transform:translate(-2px,-2px);}
.lesson-card .kod{font-size:.7rem;font-weight:700;color:var(--accent-blue);background:var(--accent-blue-light);border-radius:6px;padding:2px 8px;align-self:flex-start;}
.lesson-card .tytul{font-weight:600;color:var(--text-main);}
.lesson-card .tresci{font-size:.8rem;color:var(--text-muted);}
.badge-soon{font-size:.66rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}
.badge-draft{font-size:.66rem;font-weight:700;color:var(--accent-amber);text-transform:uppercase;letter-spacing:.04em;}

/* ---------- Tabs (styl "underline", nie zakładkowy) ---------- */
.tabs{display:flex;gap:1.4rem;border-bottom:1.25px solid var(--border-soft);margin:1.2rem 0 1.5rem;flex-wrap:wrap;}
.tab{padding:.6rem .05rem;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  cursor:pointer;font-weight:600;color:var(--text-muted);font-size:.9rem;background:transparent;font-family:inherit;transition:color .12s,border-color .12s;}
.tab:hover{color:var(--text-main);}
.tab.active{color:var(--accent-blue);border-bottom-color:var(--accent-blue);}

/* ---------- Alerts (pułapki CKE) ---------- */
.alert-box{background:var(--accent-red-light);border-left:3px solid var(--accent-red);padding:12px 15px;margin:12px 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.alert-title{font-size:.78rem;color:var(--accent-red);font-weight:700;margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em;}
.alert-box.ok{background:var(--accent-green-light);border-left-color:var(--accent-green);}
.alert-box.ok .alert-title{color:var(--accent-green);}
.alert-box.warn{background:var(--accent-amber-light);border-left-color:var(--accent-amber);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.alert-box.warn .alert-title{color:var(--accent-amber);}
/* Ryciny (schematy) w skrypcie */
.skrypt-fig{margin:1.1rem 0;text-align:center;}
.skrypt-fig img{max-width:min(100%,560px);border:1.25px solid var(--border-soft);border-radius:var(--radius-sm);background:#fff;cursor:zoom-in;}
.skrypt-fig figcaption{font-size:.86rem;color:var(--text-muted);margin-top:.4rem;text-align:left;line-height:1.4;}

/* ---------- Tables ---------- */
table.data{width:100%;border-collapse:collapse;margin:10px 0;background:#fff;border-radius:var(--radius-sm);overflow:hidden;border:1.25px solid var(--border-soft);}
table.data th,table.data td{border:1.25px solid var(--border-soft);padding:8px 10px;text-align:left;font-size:.9rem;}
table.data th{background:var(--gray-800);color:#fff;font-weight:600;}
table.data tbody tr:nth-child(even){background:var(--bg-subtle);}

/* ---------- Prereading / skrypt ---------- */
.pr-section{margin-bottom:1.2rem;}
.pr-section h3{color:var(--text-main);border-bottom:1.25px solid var(--border-soft);padding-bottom:.3rem;}
.pr-section ul{margin:.4rem 0 0;padding-left:1.3rem;}
.pr-section li{margin:.25rem 0;}
.skrypt-block p{max-width:70ch;}

/* ---------- Generator: checkbox options ---------- */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5rem 1.2rem;margin:.6rem 0 1rem;}
.opt{display:flex;align-items:flex-start;gap:.5rem;font-size:.9rem;cursor:pointer;padding:.25rem 0;}
.opt .desc{color:var(--text-muted);font-size:.78rem;}
.task-pick{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .7rem;border:1.25px solid var(--border-soft);border-radius:var(--radius-sm);
  background:#fff;margin-bottom:.4rem;transition:transform .12s,box-shadow .12s;}
.task-pick:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sm);}

/* Niestandardowy checkbox: kwadrat z grubą kreską + "pop" animacja ptaszka na
   zaznaczenie (czysty CSS, więc działa zar. na klik, jak i na "Zaznacz wszystkie"). */
.opt input[type=checkbox],.task-pick input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:.1rem;flex-shrink:0;
  border:1.5px solid var(--ink);border-radius:6px;background:#fff;cursor:pointer;
  display:inline-grid;place-content:center;box-shadow:2px 2px 0 var(--ink);
  transition:transform .1s,box-shadow .1s,background-color .15s;}
.opt input[type=checkbox]:hover,.task-pick input[type=checkbox]:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}
.opt input[type=checkbox]:active,.task-pick input[type=checkbox]:active{transform:translate(1px,1px);box-shadow:none;}
.opt input[type=checkbox]::before,.task-pick input[type=checkbox]::before{
  content:"";width:11px;height:11px;transform:scale(0);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
  background:var(--ink);transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
.opt input[type=checkbox]:checked,.task-pick input[type=checkbox]:checked{background:var(--accent-amber);}
.opt input[type=checkbox]:checked::before,.task-pick input[type=checkbox]:checked::before{transform:scale(1);}
.task-pick .verb{display:inline-block;font-size:.66rem;font-weight:700;color:var(--ink);background:var(--accent-purple-light);border-radius:6px;padding:2px 7px;flex-shrink:0;margin-bottom:.3rem;}
.task-pick .verb.origin{background:var(--accent-green-light);}
.task-pick-name{flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;font:inherit;color:var(--text-main);cursor:pointer;border-radius:var(--radius-sm);
  display:flex;flex-direction:column;align-items:flex-start;}
.task-pick-name:hover{color:var(--accent-blue);}
.task-pick-name:hover b{color:var(--accent-blue);}
.task-pick-title{width:100%;}
.task-pick-excerpt{display:block;width:100%;color:var(--text-muted);font-size:.78rem;margin-top:.15rem;white-space:normal;}
.task-pick-actions{display:flex;gap:.5rem;flex-shrink:0;margin-top:.1rem;}
/* Podgląd (neutralny) nad, mniejszy czerwony "usuń" pod spodem - żeby nie dało
   się ich pomylić jednym rzutem oka. */
/* align-self:stretch - żeby ta kolumna zajęła całą wysokość wiersza .task-pick
   (który domyślnie wyrównuje dzieci do góry), a "margin-top:auto" na czerwonym
   przycisku spycha go na sam dół okienka, zamiast zostawiać go tuż pod lupą. */
.task-pick-actions-stack{flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:.3rem;align-self:stretch;}
.task-pick-actions-stack .btn.danger{margin-top:auto;}

/* ---------- Generator: layout dwukolumnowy (ustawienia+zadania | podgląd) ---------- */
.karty-layout{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:1.2rem;align-items:start;}
.karty-col-left{display:flex;flex-direction:column;gap:1rem;}
.karty-col-right{position:sticky;top:96px;max-height:calc(100vh - 116px);overflow-y:auto;}
@media(max-width:900px){
  .karty-layout{grid-template-columns:1fr;}
  .karty-col-right{position:static;max-height:none;}
}

/* preview pane */
.preview{background:#fff;border:1.25px solid var(--border-soft);border-radius:var(--radius);padding:20px 24px;min-height:200px;box-shadow:var(--shadow-sm);}
.preview img{max-width:100%;display:block;margin:.5rem 0;}
.preview h2{color:var(--text-main);font-size:1.1rem;border-bottom:1.25px solid var(--border-soft);padding-bottom:.3rem;margin-top:1.4rem;}
.preview .answer-fields div{border-bottom:1px dotted var(--border-med);height:1.6rem;margin:.3rem 0;}
.gen-task{scroll-margin-top:12px;}
.gen-task.flash{animation:gen-task-flash 1.1s ease;}
@keyframes gen-task-flash{
  0%{background:var(--bg-yellow-soft);box-shadow:0 0 0 3px var(--accent-amber) inset;}
  100%{background:transparent;box-shadow:0 0 0 0 transparent inset;}
}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem;}
.copy-status{color:var(--accent-green);font-weight:600;font-size:.85rem;}

/* ---------- Bank browser ---------- */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-bottom:1rem;}
.filters input,.filters select{padding:.5rem .65rem;border:1.25px solid var(--border-med);border-radius:var(--radius-sm);font-family:inherit;font-size:.88rem;background:#fff;color:var(--text-body);transition:border-color .12s,box-shadow .12s;}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px var(--accent-blue-light);}
.q-card{background:var(--bg-card);border:1.25px solid var(--border-soft);border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;gap:.4rem;
  box-shadow:var(--shadow-sm);transition:box-shadow .12s,border-color .12s;}
.q-card:hover{box-shadow:var(--shadow);border-color:var(--border-med);}
.q-card img{width:100%;max-height:260px;object-fit:contain;background:#fff;border-radius:6px;cursor:zoom-in;}
.q-meta{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text-muted);}
.tag{font-size:.68rem;background:var(--accent-blue-light);color:var(--accent-blue);border-radius:999px;padding:2px 8px;font-weight:500;}

.q-card{cursor:default;}
.q-card.in-arkusz{border-color:var(--accent-green);box-shadow:0 0 0 1px var(--accent-green) inset;}
.q-actions{display:flex;gap:.4rem;margin-top:auto;padding-top:.2rem;}
.q-actions .btn{flex:1;justify-content:center;}

/* ---------- Modal podglądu zadania / lightbox ---------- */
.modal-box{background:var(--bg-card);border:1.25px solid var(--border-soft);border-radius:var(--radius-lg);
  width:min(860px,96vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow:hidden;}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.3rem;border-bottom:1.25px solid var(--border-soft);background:var(--bg-card);}
.modal-head b{color:var(--text-main);}
.modal-x{background:var(--bg-subtle);border:1.25px solid var(--border-soft);color:var(--text-body);
  width:32px;height:32px;border-radius:50%;cursor:pointer;font-weight:600;font-size:.95rem;line-height:1;flex:none;transition:.12s;
  display:inline-flex;align-items:center;justify-content:center;padding:0;}
.modal-x:hover{border-color:var(--accent-red);color:var(--accent-red);background:var(--accent-red-light);}
.modal-body{padding:1.2rem 1.4rem;overflow-y:auto;}
.modal-body .mb-img{max-width:100%;display:block;margin:.6rem auto;background:#fff;border:1.25px solid var(--border-soft);
  border-radius:var(--radius-sm);cursor:zoom-in;}
.modal-answer{margin-top:1rem;padding:1rem 1.1rem;background:var(--accent-amber-light);
  border-left:3px solid var(--accent-amber);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.modal-answer h4{color:var(--accent-amber);margin-bottom:.4rem;}
.modal-answer p{margin:.35rem 0;}
.ans-wrap{background:#ffe97a;border-radius:var(--radius-sm);margin:.5rem 0;overflow:hidden;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;}
.ans-wrap .mb-img{margin:0;border:none;mix-blend-mode:multiply;cursor:zoom-in;}
.modal-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.9rem 1.3rem;border-top:1.25px solid var(--border-soft);background:var(--bg-subtle);}

/* podgląd prezentacji (iframe = ten sam plik co generowany) */
.prez-frame{width:100%;aspect-ratio:16/9;border:1.25px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;}
.prez-frame iframe{width:100%;height:100%;border:none;display:block;}

.empty{color:var(--text-muted);text-align:center;padding:3rem 1rem;font-size:.95rem;}
.pill{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 10px;border-radius:999px;}
.pill.blue{background:var(--accent-blue-light);color:var(--accent-blue);}
.pill.green{background:var(--accent-green-light);color:var(--accent-green);}
.pill.amber{background:var(--accent-amber-light);color:var(--accent-amber);}

/* ---------- Print ---------- */
@media print{
  .topbar,.tabs,.toolbar,.no-print{display:none !important;}
  .container{max-width:100%;padding:0;}
  .karty-layout{display:block;}
  .karty-col-right{position:static;max-height:none;overflow:visible;}
  .preview{border:none;padding:0;box-shadow:none;}
  body{font-size:12pt;}
}

/* ---------- Responsywność: nawigacja i układy ---------- */
@media(max-width:768px){
  .nav-toggle{display:inline-flex;}
  .topbar-row{flex-wrap:wrap;}
  .topbar .crumbs{flex-basis:100%;margin-top:.4rem;}
  .topbar-actions{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:.4rem;background:var(--bg-card);border-bottom:1.25px solid var(--border-soft);box-shadow:var(--shadow-md);padding:.8rem 1.1rem 1rem;}
  .topbar-actions.open{display:flex;}
  .topbar-actions .btn,.topbar-actions a.btn{width:100%;justify-content:center;}
  .topbar-actions .copy-status{text-align:center;}
  .topbar{padding:.65rem 1rem;}
  .container{padding:1.2rem 1rem 3rem;}
  h1{font-size:1.4rem;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .filters{grid-template-columns:1fr 1fr;}
  .modal-body,.modal-head,.modal-foot{padding-left:1rem;padding-right:1rem;}
}
@media(max-width:480px){
  .filters{grid-template-columns:1fr;}
  .q-actions{flex-direction:column;}
}

/* Comment Feature */
.commentable-wrapper { position: relative; border-radius: 4px; padding-right: 30px; }
.commentable-wrapper:hover { background: rgba(0,0,0,0.02); }
.commentable-wrapper:hover > .comment-btn, .comment-btn.has-comment { display: flex !important; }
.comment-btn {
    position: absolute; right: 0px; top: 4px; width: 26px; height: 26px; 
    border-radius: 50%; background: var(--bg-card); border: 1.25px solid var(--border-soft); 
    cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-size: 12px;
}
.comment-btn:hover { background: var(--accent-blue-light); color: var(--ink); border-color: var(--ink); }
.comment-btn.has-comment { background: var(--accent-amber-light); border-color: var(--ink); color: var(--ink); }

@media print {
    .comment-btn { display: none !important; }
}

.commentable-wrapper.has-active-comment {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-left: 3px solid var(--accent-amber);
    padding-left: 10px;
    border-radius: 0 4px 4px 0;
}
.commentable-wrapper.has-resolved-comment {
    background-color: rgba(76, 175, 80, 0.1) !important;
    border-left: 3px solid #4CAF50;
    padding-left: 10px;
    border-radius: 0 4px 4px 0;
}
.comment-btn.has-resolved-comment {
    background: var(--accent-green-light) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
}