/* Baza wiedzy — wspólny system wizualny.
   Kierunek: "Cold Graphite / Premium SaaS" — grafit + stalowe neutrale, jeden chłodny
   akcent (indygo, cyjan tylko jako stan), warstwowe cienie, powściągliwa głębia.
   Typografia dwurejestrowa: DISPLAY (Bricolage Grotesque, self-host) niesie treść i tożsamość;
   MONO niesie interfejs (brand, etykiety, liczby, chipy); SANS systemowy niesie długi tekst.
   Zero zależności zewnętrznych — font self-hostowany lokalnie (assets/fonts/*.woff2). */

/* ============================ FONT (self-host, offline) ============================ */
/* Bricolage Grotesque — wariacyjny (jeden plik pokrywa wagi 200–800). */
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/bricolage-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================ TOKENY ============================ */
:root {
  /* — kolor: LIGHT (chłodna stal, NIE beż) — */
  --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#EEF1F6; --surface-3:#E2E7EF;
  --ink:#0D1017; --muted:#495264; --faint:#8A93A6;
  --border:#E3E8F0; --border-strong:#CFD6E2;
  --accent:#5A54EE; --accent-ink:#4A43D8; --accent-2:#12B0D6;
  --accent-soft:#ECEBFE; --accent-line:#CBC8FB;
  --ok:#0E9F6E; --ok-ink:#087F57; --ok-soft:#E4F6EF;
  --bad:#E11D48; --bad-ink:#C11338; --bad-soft:#FCEAEE;

  --hl:none;
  --dot:rgba(13,16,23,.035);
  --shadow-sm:0 1px 2px rgba(16,20,30,.06);
  --shadow:0 2px 4px rgba(16,20,30,.05), 0 8px 24px -10px rgba(16,20,30,.14);
  --shadow-lg:0 4px 8px rgba(16,20,30,.06), 0 24px 50px -18px rgba(16,20,30,.22);
  --glow:0 10px 34px -10px color-mix(in srgb, var(--accent) 45%, transparent);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* — geometria — */
  --u:8px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --maxw:1080px; --measure:64ch; --statusline-h:34px;

  /* — typografia — */
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,"JetBrains Mono","Cascadia Code","Roboto Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,Helvetica,Arial,sans-serif;
  --display:"Bricolage Grotesque",var(--sans);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B0D12; --surface:#14171E; --surface-2:#1B1F28; --surface-3:#252A35;
  --ink:#EAECF1; --muted:#9BA3B4; --faint:#616B7D;
  --border:#232833; --border-strong:#333A48;
  --accent:#7D79FF; --accent-ink:#9D9AFF; --accent-2:#38DCF0;
  --accent-soft:#191933; --accent-line:#353465;
  --ok:#34D399; --ok-ink:#4ADCA6; --ok-soft:#0F251D;
  --bad:#FB7185; --bad-ink:#FF8A9B; --bad-soft:#2A1620;
  --hl:inset 0 1px 0 rgba(255,255,255,.045);
  --dot:rgba(255,255,255,.028);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 6px rgba(0,0,0,.45), 0 14px 34px -14px rgba(0,0,0,.65);
  --shadow-lg:0 4px 10px rgba(0,0,0,.5), 0 30px 60px -20px rgba(0,0,0,.75);
  --glow:0 12px 40px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}}
:root[data-theme="light"]{--bg:#F5F7FA;--surface:#FFFFFF;--surface-2:#EEF1F6;--surface-3:#E2E7EF;--ink:#0D1017;--muted:#495264;--faint:#8A93A6;--border:#E3E8F0;--border-strong:#CFD6E2;--accent:#5A54EE;--accent-ink:#4A43D8;--accent-2:#12B0D6;--accent-soft:#ECEBFE;--accent-line:#CBC8FB;--ok:#0E9F6E;--ok-ink:#087F57;--ok-soft:#E4F6EF;--bad:#E11D48;--bad-ink:#C11338;--bad-soft:#FCEAEE;--hl:none;--dot:rgba(13,16,23,.035);--shadow-sm:0 1px 2px rgba(16,20,30,.06);--shadow:0 2px 4px rgba(16,20,30,.05),0 8px 24px -10px rgba(16,20,30,.14);--shadow-lg:0 4px 8px rgba(16,20,30,.06),0 24px 50px -18px rgba(16,20,30,.22);--glow:0 10px 34px -10px color-mix(in srgb,var(--accent) 45%,transparent);--ring:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);}
:root[data-theme="dark"]{--bg:#0B0D12;--surface:#14171E;--surface-2:#1B1F28;--surface-3:#252A35;--ink:#EAECF1;--muted:#9BA3B4;--faint:#616B7D;--border:#232833;--border-strong:#333A48;--accent:#7D79FF;--accent-ink:#9D9AFF;--accent-2:#38DCF0;--accent-soft:#191933;--accent-line:#353465;--ok:#34D399;--ok-ink:#4ADCA6;--ok-soft:#0F251D;--bad:#FB7185;--bad-ink:#FF8A9B;--bad-soft:#2A1620;--hl:inset 0 1px 0 rgba(255,255,255,.045);--dot:rgba(255,255,255,.028);--shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow:0 2px 6px rgba(0,0,0,.45),0 14px 34px -14px rgba(0,0,0,.65);--shadow-lg:0 4px 10px rgba(0,0,0,.5),0 30px 60px -20px rgba(0,0,0,.75);--glow:0 12px 40px -10px color-mix(in srgb,var(--accent) 55%,transparent);--ring:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent);}

/* ============================ BAZA ============================ */
*{box-sizing:border-box;}
/* scroll-padding: natywne "przewiń do elementu" (klawiatura, Playwright, kotwice) ma
   zostawiać margines na sticky topbar (58px) i nowy fixed statusline — inaczej element
   ląduje POD nimi i staje się nieklikalny (real regression, złapany przez probe_dni.py). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:70px;scroll-padding-bottom:calc(var(--statusline-h) + 12px);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{transition:none !important;animation:none !important;}}
body{
  margin:0;color:var(--ink);
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:24px 24px;background-position:-12px -12px;
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1;
  padding-bottom:var(--statusline-h); /* miejsce na stały pasek statusu (patrz .statusline) */
}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink);}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:2px;}
.page{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm);}

/* ============================ TOP BAR ============================ */
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:58px;}
.brand{
  font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);transition:opacity .18s;
}
.brand:hover{opacity:.72;}
.brand .dollar{color:var(--accent);font-weight:700;}
.topbar-actions{display:flex;gap:10px;align-items:center;}
.btn{
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:8px 14px;min-height:36px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;box-shadow:var(--hl);
  transition:border-color .18s,color .18s,background .18s,box-shadow .18s,transform .1s;
}
.btn:hover{border-color:var(--border-strong);color:var(--ink);background:var(--surface-2);}
.btn:active{transform:translateY(.5px);}
.btn.primary{background:var(--accent);border-color:transparent;color:#fff;box-shadow:var(--glow);}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 90%,#fff);color:#fff;filter:saturate(1.05);}

/* ============================ HERO / NAGŁÓWKI ============================ */
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 18px;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
h1{
  font-family:var(--display);font-weight:700;font-size:clamp(34px,5.6vw,54px);
  line-height:1.02;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance;color:var(--ink);
}
.lede{font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:var(--muted);max-width:60ch;margin:0;}
.hero{position:relative;padding:56px 0 36px;}
/* jeden powściągliwy, ledwie widoczny akcent — NIE karnawał gradientów (Freya) */
.hero::before{
  content:"";position:absolute;z-index:-1;top:-40px;left:-4%;width:40%;height:280px;
  background:radial-gradient(50% 50% at 30% 30%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 70%);
  filter:blur(40px);opacity:.6;pointer-events:none;
}

/* ============================ PANEL DNIA (jeden ruch) ============================ */
/* Psychologia wejścia (Kora): zero decyzji — jedno dominujące „zrób to teraz".
   To najjaśniejszy element ekranu, reszta schodzi o poziom. */
#next-action{margin:8px 0 26px;}
.today{
  position:relative;overflow:hidden;
  display:flex;flex-wrap:wrap;align-items:center;gap:28px;
  padding:26px 28px;border-radius:var(--r-xl);
  border:1px solid var(--accent-line);
  background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%);
  box-shadow:var(--shadow),var(--hl);
}
.today::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--accent),var(--accent-2));}
.today.calm{border-color:var(--border);background:linear-gradient(135deg,var(--surface-2),var(--surface) 70%);}
.today.calm::before{background:var(--ok);}
.today{animation:rise-in .5s cubic-bezier(.2,.7,.3,1) both;}
@keyframes rise-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.today-main{flex:1 1 300px;min-width:0;}

/* Pierścień opanowania — „endowed progress": widzisz, ile już masz, nie ile brakuje (Kora).
   Powiększony (78→92px) i z większym odstępem od CTA (gap .today 22→28px) — przy węższych
   szerokościach (~768–1024px) stał ciasno przyklejony do przycisku. */
.today-ring{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;}
.ring{position:relative;width:92px;height:92px;}
.ring svg{width:92px;height:92px;transform:rotate(-90deg);}
.ring .track{fill:none;stroke:var(--surface-3);stroke-width:7;}
.ring .fill{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1);}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;}
.today-ring .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:center;line-height:1.3;}
@media (max-width:640px){.today-ring{order:-1;flex-direction:row;gap:12px;align-items:center;}.today-ring .cap{text-align:left;}}

/* Mikro-feedback zaliczenia lekcji — dopamina na właściwą akcję, powściągliwie. */
@keyframes pop-check{0%{transform:scale(1);}45%{transform:scale(1.012);}100%{transform:scale(1);}}
@keyframes ok-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 42%,transparent);}100%{box-shadow:0 0 0 12px transparent;}}
.lesson-done.justchecked{animation:pop-check .45s ease, ok-pulse .65s ease-out;}
.today-eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.today-eyebrow .streak{color:var(--accent-ink);font-weight:600;}
.today-eyebrow .streak.cold{color:var(--faint);}
.today-h{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(24px,3.4vw,34px);margin:0 0 8px;color:var(--ink);text-wrap:balance;
}
.today-sub{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:56ch;}

/* Nudge o serii (Zeigarnik) + milestone — ciche podpowiedzi, nie alarmy (Kora). */
.today-nudges{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;}
.nudge{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.005em;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:6px 12px;display:inline-flex;align-items:center;gap:8px;
}
.nudge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none;}
.nudge.warn{color:var(--accent-ink);border-color:var(--accent-line);background:color-mix(in srgb,var(--accent-soft) 70%,var(--surface));}
.nudge.warn::before{background:var(--accent);}
.nudge.ok{color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok) 30%,var(--border));background:var(--ok-soft);}
.nudge.ok::before{background:var(--ok);}
.nudge.accent::before{background:var(--accent-2);}
.today-cta{flex:none;display:flex;flex-direction:column;gap:9px;align-items:stretch;}
.today .btn.primary{font-family:var(--display);font-size:14px;font-weight:600;padding:12px 22px;min-height:46px;justify-content:center;letter-spacing:-.01em;}
.today .btn.ghost{background:transparent;border-color:transparent;color:var(--muted);font-size:12px;min-height:0;padding:4px 8px;justify-content:center;}
.today .btn.ghost:hover{color:var(--accent-ink);background:transparent;}
@media (max-width:640px){.today{padding:22px 20px;}.today-cta{width:100%;}}

/* #stats / .stat USUNIĘTE (test przejrzystości, komentarz przy initStats w app.js) —
   cztery kafle bez nowej informacji względem panelu dnia. */

/* ============================ KAFLE SZKOLEŃ ============================ */
.cat-section{margin-bottom:42px;}
.cat-title{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 18px;padding-bottom:12px;
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;
}
.cat-title::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--accent),var(--accent-2));flex:none;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;padding:2px 0 8px;}
.card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm),var(--hl);
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:14px;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s;
  overflow:hidden;will-change:transform;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%);
  transition:opacity .25s;
}
.card:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:var(--shadow-lg),var(--glow),var(--hl);}
.card:hover::after{opacity:1;}
.card:focus-visible{box-shadow:var(--ring),var(--shadow);}
.card .ic{
  width:46px;height:46px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--border);display:grid;place-items:center;font-size:22px;line-height:1;
  transition:border-color .2s,background .2s,transform .2s;
}
.card:hover .ic{border-color:var(--accent-line);background:var(--accent-soft);transform:scale(1.05);}
/* Ikony monoline SVG — jedna rodzina, currentColor (Freya): koniec z karnawałem emoji. */
.card .ic svg{width:24px;height:24px;fill:none;stroke:var(--accent-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;}
.card:hover .ic svg{stroke:var(--accent);}
.rq-item svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:6px;}
.card h3{margin:0;font-size:17.5px;font-weight:680;line-height:1.28;letter-spacing:-.02em;}
.card p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);flex:1;}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;}
.card.soon{opacity:.6;cursor:default;box-shadow:none;}
.card.soon:hover{transform:none;border-color:var(--border);box-shadow:none;}
.card.soon:hover::after{opacity:0;}
.card.soon:hover .ic{border-color:var(--border);background:var(--surface-2);transform:none;}

.badge{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--border-strong);color:var(--muted);white-space:nowrap;
}
.badge.done{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 34%,var(--border));color:var(--ok-ink);}
.badge.prog{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink);}

/* ============================ PASEK POSTĘPU ============================ */
.bar{height:6px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden;}
.bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:var(--r-pill);box-shadow:0 0 12px -2px color-mix(in srgb,var(--accent) 60%,transparent);transition:width .5s cubic-bezier(.2,.7,.3,1);}
.bar.full > span{background:linear-gradient(90deg,var(--ok),var(--accent-2));box-shadow:0 0 12px -2px color-mix(in srgb,var(--ok) 55%,transparent);}

/* ============================ KOLEJKA POWTÓREK ============================ */
#review-queue{display:none;margin:0 0 30px;padding:20px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm),var(--hl);}
#review-queue.due{border-color:var(--accent-line);background:linear-gradient(135deg,var(--accent-soft),var(--surface) 78%);box-shadow:var(--shadow),var(--hl);}
.rq-head{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent-ink);margin-bottom:14px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:9px;}
.rq-head.ok{color:var(--ok-ink);margin-bottom:0;}
.rq-list{display:flex;flex-wrap:wrap;gap:10px;}
.rq-item{font-family:var(--mono);font-size:13px;text-decoration:none;color:var(--ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-pill);padding:8px 15px;transition:transform .16s,box-shadow .16s;}
.rq-item:hover{transform:translateY(-1px);box-shadow:var(--glow);}
.due{font-family:var(--mono);font-size:11.5px;color:var(--faint);}
.due.now{color:var(--accent-ink);font-weight:600;}

/* ============================ STRONA SZKOLENIA ============================ */
.tr-head{position:relative;padding:52px 0 32px;border-bottom:1px solid var(--border);}
.tr-head::before{
  content:"";position:absolute;z-index:-1;top:-10px;left:-6%;width:44%;height:280px;
  background:radial-gradient(50% 50% at 30% 30%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 72%);
  filter:blur(30px);opacity:.7;pointer-events:none;
}
.tr-head .crumb{font-family:var(--mono);font-size:12px;color:var(--faint);margin-bottom:18px;display:flex;gap:8px;align-items:center;}
.tr-head .crumb a{color:var(--faint);text-decoration:none;transition:color .16s;}
.tr-head .crumb a:hover{color:var(--accent-ink);}

.lesson{padding:44px 0;border-bottom:1px solid var(--border);scroll-margin-top:126px;}
.lesson h2{font-family:var(--display);font-weight:700;font-size:clamp(23px,3.2vw,30px);margin:0 0 8px;letter-spacing:-.02em;line-height:1.16;}
.lesson .sub{color:var(--muted);margin:0 0 24px;max-width:var(--measure);font-size:16px;}
.lesson h3{font-size:16px;font-weight:680;margin:34px 0 10px;letter-spacing:-.015em;}
.lesson p,.lesson li{max-width:var(--measure);line-height:1.72;}
.lesson ul,.lesson ol{padding-left:1.3em;}
.lesson li{margin:7px 0;}
.lesson-num{font-family:var(--mono);color:var(--accent-ink);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.lesson-done{
  display:flex;align-items:center;gap:12px;margin-top:26px;padding:14px 18px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  font-size:14px;cursor:pointer;user-select:none;max-width:var(--measure);box-shadow:var(--hl);
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.lesson-done:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm),var(--hl);}
.lesson-done input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex:none;}
.lesson-done.checked{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 32%,var(--border));color:var(--ok-ink);}

/* ============================ KOD / TERMINAL ============================ */
code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);padding:2px 6px;border-radius:6px;border:1px solid var(--border);color:var(--ink);}
.term{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow),var(--hl);overflow:hidden;margin:20px 0;}
.term-bar{display:flex;gap:8px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--border);background:var(--surface-2);}
/* Atrapa okna Maca (3 kropki) niosła zero informacji — usunięta. .title już ma prawdziwy
   kontekst wpisany w treść (patrz 44 pliki szkoleń), zostaje jedynym elementem po lewej. */
.term-bar .dot{display:none;}
.term-bar .title{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-left:0;letter-spacing:.02em;}
/* Przycisk kopiuj — dokładany przez JS (initTermBars), bez edycji 44 plików treści. */
.term-copy{
  margin-left:auto;flex:none;font-family:var(--mono);font-size:11px;color:var(--faint);
  background:transparent;border:1px solid var(--border-strong);border-radius:6px;
  padding:3px 10px;cursor:pointer;transition:color .15s,border-color .15s;
}
.term-copy:hover{color:var(--ink);border-color:var(--accent);}
.term-copy.copied{color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok) 45%,var(--border));}
.term pre{margin:0;padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.75;}
.term pre code{background:none;border:none;padding:0;white-space:pre;font-size:1em;}
.cm{color:var(--accent-ink);}
.cmt{color:var(--faint);font-style:italic;}
.ok{color:var(--ok-ink);}
.bad-t{color:var(--bad-ink);}

/* ============================ CALLOUTY ============================ */
.callout{display:flex;gap:14px;padding:16px 18px;border-radius:var(--r);margin:22px 0;border:1px solid var(--border);background:var(--surface);max-width:var(--measure);box-shadow:var(--shadow-sm),var(--hl);}
.callout .ci{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:13px;color:#fff;}
.callout p{margin:0;font-size:14.5px;line-height:1.6;}
.callout.warn{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 28%,var(--border));}
.callout.warn .ci{background:var(--bad);}
/* .bad = alias wizualny .warn. initJednostka() (app.js) renderuje objaw incydentu jako
   "callout bad" — bez tej reguły ikona "!" była białym tekstem na przezroczystym tle. */
.callout.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 28%,var(--border));}
.callout.bad .ci{background:var(--bad);}
.callout.tip{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 28%,var(--border));}
.callout.tip .ci{background:var(--ok);}
.callout.note{background:var(--accent-soft);border-color:var(--accent-line);}
/* Diagramy inline SVG w lekcjach — theme-aware przez zmienne motywu (light/dark) */
.diagram{margin:22px 0;padding:18px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;box-shadow:var(--shadow-sm),var(--hl);}
.diagram svg{display:block;max-width:100%;height:auto;margin:0 auto;}
.diagram text{font-family:var(--sans);}
.diagram figcaption{margin:12px 4px 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center;}
.diagram .d-t{fill:var(--ink);font-size:13px;font-weight:600;}
.diagram .d-s{fill:var(--muted);font-size:11px;}
.diagram .d-mono{font-family:var(--mono);font-size:11.5px;fill:var(--ink);}
.diagram .d-box{fill:var(--surface);stroke:var(--border-strong);stroke-width:1.5;}
.diagram .d-ok{fill:var(--ok-soft);stroke:var(--ok);stroke-width:1.5;}
.diagram .d-bad{fill:var(--bad-soft);stroke:var(--bad);stroke-width:1.5;}
.diagram .d-ac{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5;}
.diagram .d-ln{stroke:var(--border-strong);stroke-width:1.5;fill:none;}
.diagram .d-lnok{stroke:var(--ok);stroke-width:2;fill:none;}
.diagram .d-lnbad{stroke:var(--bad);stroke-width:2;fill:none;stroke-dasharray:5 4;}
.diagram .d-okt{fill:var(--ok-ink);font-size:12px;font-weight:700;}
.diagram .d-badt{fill:var(--bad-ink);font-size:12px;font-weight:700;}
.diagram .d-fill-ln{fill:var(--border-strong);}
.diagram .d-fill-ok{fill:var(--ok);}
.diagram .d-fill-bad{fill:var(--bad);}
.callout.note .ci{background:linear-gradient(135deg,var(--accent),var(--accent-2));}

/* ============================ QUIZ ============================ */
.quiz-wrap{padding:50px 0 84px;scroll-margin-top:126px;}
.quiz-intro{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:28px;margin-bottom:26px;box-shadow:var(--shadow),var(--hl);}
.quiz-intro::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.quiz-intro h2{font-family:var(--display);margin:0 0 10px;font-size:24px;font-weight:700;letter-spacing:-.02em;}
.quiz-intro p{margin:0;color:var(--muted);max-width:64ch;}
.q{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;margin-bottom:16px;box-shadow:var(--shadow-sm),var(--hl);transition:box-shadow .18s,border-color .18s;}
.q:hover{box-shadow:var(--shadow),var(--hl);}
.q .qn{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;}
.q .qt{font-weight:640;margin:0 0 4px;font-size:16.5px;line-height:1.5;letter-spacing:-.01em;}
.q .qhint{font-size:12.5px;color:var(--faint);margin:6px 0 16px;font-family:var(--mono);}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.opt{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .14s,background .14s,box-shadow .14s;font-size:14.5px;line-height:1.5;}
.opt:hover{border-color:var(--border-strong);background:var(--surface-2);}
.opt:not(.locked):has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);}
.opt input{margin-top:2px;accent-color:var(--accent);flex:none;}
.opt.correct{background:var(--ok-soft);border-color:var(--ok);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 55%,transparent);}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 55%,transparent);}
.opt.locked{cursor:default;}
.q-explain{margin-top:16px;padding:14px 16px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);font-size:14px;line-height:1.6;display:none;}
.q-explain.show{display:block;animation:fade-in .25s ease;}
.q-explain .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:6px;font-weight:600;}
@keyframes fade-in{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}
.quiz-actions{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap;}
.result{font-family:var(--display);font-size:15px;padding:16px 22px;border-radius:var(--r);display:none;align-items:center;gap:14px;line-height:1.5;box-shadow:var(--hl);}
.result.show{display:flex;animation:fade-in .3s ease;}
.result.pass{background:var(--ok-soft);border:1px solid var(--ok);color:var(--ok-ink);}
.result.fail{background:var(--bad-soft);border:1px solid var(--bad);color:var(--bad-ink);}
.result .big{font-size:26px;font-weight:770;font-variant-numeric:tabular-nums;letter-spacing:-.03em;}
.result small{color:var(--muted);}

/* ============================ PASEK CZYTANIA ============================ */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;background:transparent;pointer-events:none;}
.scroll-progress > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent);transition:width .05s linear;}

/* ============================ NAWIGACJA LEKCJI ============================ */
.lesson-nav{position:sticky;top:58px;z-index:15;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--border);}
.lesson-nav .chips{display:flex;gap:8px;overflow-x:auto;padding:11px 0;scrollbar-width:none;}
.lesson-nav .chips::-webkit-scrollbar{display:none;}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--muted);text-decoration:none;white-space:nowrap;transition:border-color .14s,color .14s,background .14s;}
.chip:hover{border-color:var(--border-strong);color:var(--ink);background:var(--surface-2);}
.chip .tick{display:none;color:var(--ok-ink);font-weight:700;}
.chip.done{color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok) 38%,var(--border));}
.chip.done .tick{display:inline;}
.chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);}

/* offset pod przyklejoną belkę (pasek chipów zastąpiony sidebarem) */
.lesson,.quiz-wrap{scroll-margin-top:78px;}

/* ============================ SIDEBAR: MAPA KURSU ============================ */
/* Stały panel po lewej na stronie szkolenia. Odpowiada bez pytania na cztery rzeczy:
   gdzie jestem, ile zostało, co dalej, jak mi idzie. Generowany w całości przez JS. */
:root{--cnav-w:272px;}
body.has-cnav{padding-left:var(--cnav-w);}
body.has-cnav .scroll-progress{left:var(--cnav-w);}
/* Sidebar to jedyne źródło „ile zostało" / „jak mi idzie", gdy istnieje: per-krokowe
   ✓ w mapie kursu + pasek Skill Score robią to samo, co pasek+etykieta w nagłówku
   („0/5 lekcji · quiz 0% · razem 0%"), tylko dokładniej. Eyebrow powtarzał z kolei
   okruszki i tytuł kursu z sidebara, innym zestawem emoji na każdej z 44 stron.
   Węzły #tr-progress / #tr-progress-label / .eyebrow zostają w DOM (JS wciąż je
   aktualizuje, sonda dnia wciąż czyta ich tekst) — ukryty jest tylko widok, i tylko
   gdy sidebar realnie istnieje (strony bez niego nie mają skąd wziąć tych informacji).*/
body.has-cnav .tr-head .eyebrow,
body.has-cnav .tr-progress-row{display:none;}

.cnav{
  position:fixed;left:0;top:0;bottom:var(--statusline-h);width:var(--cnav-w);z-index:30;
  background:var(--surface);border-right:1px solid var(--border);
  overflow-y:auto;overscroll-behavior:contain;
}
.cn-inner{padding:18px 18px 34px;display:flex;flex-direction:column;gap:16px;}
.cn-back{font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .16s;}
.cn-back:hover{color:var(--ink);}
.cn-course{font-family:var(--display);font-weight:680;font-size:16px;line-height:1.25;color:var(--ink);}
.cn-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);}

.cn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.cn-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:12.5px;color:var(--muted);text-decoration:none;
  border:1px solid transparent;transition:background .14s,color .14s,border-color .14s;
}
.cn-item:hover{background:var(--surface-2);color:var(--ink);}
.cn-mark{
  width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;line-height:1;
  transition:background .16s,border-color .16s;
}
.cn-item.done{color:var(--ok-ink);}
.cn-item.done .cn-mark{border-color:var(--ok);background:var(--ok);color:#fff;}
.cn-item.done .cn-mark::after{content:"✓";font-weight:700;}
.cn-item.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink);font-weight:600;}
.cn-item.active .cn-mark{border-color:var(--accent);}
.cn-item.active.done .cn-mark{border-color:var(--ok);}
.cn-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cn-count{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none;}

/* Skill Score to NIE nowy widżet — to przeniesiony tu istniejący panel, złożony w pion. */
.cn-skill .skill-panel{flex-direction:column;align-items:stretch;gap:12px;margin-top:0;padding:14px;border-left-width:1px;border-left-color:var(--border);}
.cn-skill .skill-ring{align-self:center;}
.cn-skill .skill-lvl{font-size:11.5px;text-align:center;margin-bottom:2px;}
.cn-skill .skill-bars{grid-template-columns:1fr;gap:5px;}
.cn-skill .sb-l{width:50px;}

/* Szuflada — tylko na wąskim ekranie. */
.cn-toggle{display:none;}
.cn-backdrop{display:none;}
@media (max-width:900px){
  body.has-cnav{padding-left:0;}
  body.has-cnav .scroll-progress{left:0;}
  .cnav{transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.7,.2,1);box-shadow:var(--shadow-lg);}
  body.cnav-open .cnav{transform:none;}
  .cn-toggle{display:inline-flex;}
  .cn-backdrop{display:block;position:fixed;inset:0;z-index:25;background:rgba(8,10,16,.45);}
  .cn-backdrop[hidden]{display:none;}
  /* przy otwartej szufladzie tło nie może się przewijać pod palcem */
  body.cnav-open{overflow:hidden;}
  /* pasek czytania (z-index:40) przecinałby wizualnie górną krawędź szuflady */
  body.cnav-open .scroll-progress{display:none;}
  /* Trzeci przycisk w belce nie mieści się na wąskim ekranie. „← panel" jest tu
     zbędny — sidebar ma własny powrót do dziedziny, wyżej w hierarchii. */
  body.has-cnav .topbar-actions{flex-wrap:wrap;justify-content:flex-end;}
  body.has-cnav .topbar-actions a.btn{display:none;}
  /* Pozycje mapy kursu w szufladzie mierzyły ~39px wysokości — pod progiem 44px
     dla celu dotykowego. Sama szuflada istnieje tylko na tej szerokości. */
  .cn-item{padding:12px 10px;}
}
/* ============================ INCYDENT (realna nauka) ============================ */
.inc-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0;}
.inc-cols h3{margin:0 0 8px;font-size:13px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}
.inc-masz,.inc-niemasz{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.inc-masz li,.inc-niemasz li{font-size:14.5px;padding-left:20px;position:relative;color:var(--muted);}
.inc-masz li::before{content:"✓";position:absolute;left:0;color:var(--ok-ink);font-weight:700;}
.inc-niemasz li::before{content:"✕";position:absolute;left:0;color:var(--bad);font-weight:700;}
.inc-pulapki{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.inc-pulapki li{font-size:14.5px;padding-left:22px;position:relative;color:var(--muted);}
.inc-pulapki li::before{content:"⚠";position:absolute;left:0;color:var(--bad);}

.inc-timer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0;padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--hl);}
.inc-clock{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.inc-clock.koniec{color:var(--bad);}
.inc-note{font-family:var(--mono);font-size:11.5px;color:var(--faint);}

#inc-log{width:100%;min-height:200px;resize:vertical;font-family:var(--mono);font-size:13.5px;line-height:1.6;
  padding:14px 16px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);color:var(--ink);}
#inc-log:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}
.inc-logstat{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:6px;text-align:right;}

.inc-q{margin:16px 0;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);}
.inc-q.ans-ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--border));}
.inc-q.ans-bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--border));}
.inc-q .q-input{display:flex;gap:8px;align-items:center;margin-top:10px;}
.inc-q .ans{flex:1;font-family:var(--mono);font-size:13.5px;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg);color:var(--ink);}
.inc-q .ans:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}
.inc-q .ans-mark{width:18px;font-weight:700;}
.inc-q.ans-ok .ans-mark{color:var(--ok-ink);}
.inc-q.ans-bad .ans-mark{color:var(--bad);}

/* Bramka: ścieżki wzorcowej nie da się odsłonić bez własnego logu. */
.inc-reveal-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 0;}
#inc-reveal:disabled{opacity:.45;cursor:not-allowed;}
.inc-wzorcowa{margin-top:26px;padding-top:22px;border-top:2px solid var(--accent-line);}
.wz-lista{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:14px;}
.wz-lista .wz-krok{font-family:var(--mono);font-size:14px;color:var(--ink);}
.wz-lista .wz-czemu{font-size:14.5px;color:var(--muted);margin-top:4px;}

.inc-pm{display:flex;flex-direction:column;gap:14px;}
.pm-q label{display:block;font-size:14.5px;color:var(--ink);margin-bottom:6px;}
.pm-q textarea{width:100%;resize:vertical;font-family:var(--sans);font-size:14.5px;line-height:1.6;
  padding:12px 14px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);color:var(--ink);}
.pm-q textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}

@media (max-width:640px){.inc-cols{grid-template-columns:1fr;}}

/* Na wydruku nawigacja jest szumem — liczy się treść lekcji. */
@media print{
  .cnav,.cn-backdrop,.cn-toggle,.step-nav,.scroll-progress{display:none !important;}
  body.has-cnav{padding-left:0;}
}

/* ============================ NOTATKI (Feynman) ============================ */
.notes-block{margin-top:18px;max-width:var(--measure);}
.notes-head{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:9px;display:flex;gap:10px;align-items:center;}
.note-status{color:var(--ok-ink);font-size:11px;}
.note-area{width:100%;min-height:92px;resize:vertical;font-family:var(--sans);font-size:14.5px;line-height:1.6;padding:14px 16px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);color:var(--ink);box-shadow:var(--hl);transition:border-color .16s,box-shadow .16s;}
.note-area:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}
.note-area::placeholder{color:var(--faint);}

/* ============================ PASEK POSTĘPU W NAGŁÓWKU ============================ */
.tr-progress-row{display:flex;align-items:center;gap:16px;margin-top:24px;max-width:var(--measure);}
.tr-progress-row .bar{flex:1;}
.tr-progress-row .lbl{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ============================ STOPKA (fallback, przed JS) ============================ */
/* initStatusline() (app.js) dokleja klasę .statusline i podmienia treść na sygnaturę
   tmux/lazygit-style — ta reguła to tylko chwila przed wykonaniem JS / stan bez JS. */
footer{text-align:center;padding:44px 0 60px;color:var(--faint);font-family:var(--mono);font-size:12px;letter-spacing:.02em;}

/* ============================ STATUS LINE (sygnatura na dole) ============================ */
/* Cichy, stały pasek zamiast statycznej stopki (44 różne, nieinformacyjne teksty).
   Chrome, nie treść: mono 11px, bez kart, bez dużych liczb — nie konkuruje o uwagę
   z niczym na stronie. Dziedzina + pasmo są też widoczne wyżej (eyebrow panelu, okruszki
   szkolenia) — to nie duplikat treści, tylko trwała sygnatura widoczna WSZĘDZIE, także
   na stronach, które nigdzie indziej pasma/powtórek nie pokazują (huby, lekcje, dni). */
footer.statusline{
  text-align:left;padding:0;letter-spacing:normal;
  position:fixed;left:0;right:0;bottom:0;z-index:35;height:var(--statusline-h);
  border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
}
body.has-cnav footer.statusline{left:var(--cnav-w);}
@media (max-width:900px){ body.has-cnav footer.statusline{left:0;} }
.statusline-in{
  max-width:var(--maxw);height:100%;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:18px;overflow-x:auto;
  font-family:var(--mono);font-size:11.5px;color:var(--faint);
}
.sl-seg{white-space:nowrap;}
.sl-domain{color:var(--accent-ink);}
.sl-due.is-due{color:var(--bad-ink);}
.sl-done{margin-left:auto;}

/* ============================ RESPONSYWNOŚĆ ============================ */
@media (max-width:640px){
  .page{padding:0 18px;}
  .hero{padding:52px 0 34px;}
  .grid{grid-template-columns:1fr;}
  .lesson{padding:36px 0;}
  .skill-panel{flex-direction:column;align-items:flex-start;gap:14px;}
  .task-foot{flex-direction:column;align-items:stretch;gap:12px;}

  /* Pasek górny: mono-brand + do trzech przycisków (manual/panel, motyw, wyloguj —
     ten trzeci dokłada initLogout() z JS na KAŻDEJ stronie, patrz app.js) razem nie
     mieszczą się w jednym rzędzie < ~460px — bez tego akcje wypychały cały dokument
     w poziomy scroll zamiast się złamać (złapane sondą: scrollWidth > innerWidth na
     /, /hub.html, /manual.html, /dni/). Wysokość paska przechodzi z ustalonej na
     minimalną, żeby drugi rząd miał gdzie się zmieścić bez obcinania. */
  .topbar-inner{height:auto;min-height:58px;flex-wrap:wrap;row-gap:8px;padding:10px 0;}
  .topbar-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;}

  /* Cele dotykowe < 44px (przyciski, gwiazdki oceny) — na palcu, nie na kursorze.
     .btn pokrywa też mapę kursu (.cn-toggle), kontrolę incydentu (.inc-check),
     dowód wykonania (.dw-check) i bramkę (#inc-reveal) — to jeden wspólny wariant. */
  .btn{min-height:44px;padding:10px 14px;}

  /* Przycisk „kopiuj" na bloku kodu mierzył 21px wysokości — pod progiem 44px na palec.
     Pełne 44px rozpycha .term-bar (nagłówek terminala), więc 36px: realnie większa
     strefa dotyku bez ruszania wysokości paska — ten sam kompromis co przy .sl-btn. */
  .term-copy{min-height:36px;padding:8px 12px;}
}

/* ============================ SKILL PANEL (ocena umiejętności) ============================ */
.skill-panel{
  display:flex;align-items:center;gap:20px;margin-top:22px;padding:16px 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);border-left:3px solid var(--accent);
}
.skill-panel.t1{border-left-color:var(--faint);}
.skill-panel.t2{border-left-color:var(--accent);}
.skill-panel.t3{border-left-color:var(--ok);}
.skill-ring{position:relative;width:60px;height:60px;flex:none;}
.skill-ring svg{width:60px;height:60px;transform:rotate(-90deg);}
.skill-ring .track{fill:none;stroke:var(--surface-3);stroke-width:6;}
.skill-ring .fill{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1);}
.skill-panel.t3 .skill-ring .fill{stroke:var(--ok);}
/* .sv-box centruje w pierścieniu; .sv zostaje CZYSTYMI cyframi (patrz app.js) —
   jednostka „%" jest osobnym elementem, nie ozdobnikiem w tym samym węźle. */
.skill-ring .sv-box{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:1px;}
.skill-ring .sv{font-family:var(--mono);font-weight:600;font-size:16px;color:var(--ink);}
.skill-ring .sv-unit{font-family:var(--mono);font-weight:500;font-size:10px;color:var(--faint);}
.skill-body{flex:1;min-width:0;}
.skill-lvl{font-size:14px;color:var(--muted);margin-bottom:8px;}
.skill-lvl b{color:var(--ink);font-family:var(--display);font-weight:680;}
.skill-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;}
.sb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted);}
.sb-l{width:58px;flex:none;}
.sb-t{flex:1;height:5px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden;}
.sb-t>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:inherit;transition:width .5s;}
.sb-v{width:34px;text-align:right;flex:none;color:var(--ink);}

/* ============================ ZADANIA (hands-on) ============================ */
.tasks-wrap{padding:44px 0 8px;border-top:1px solid var(--border);}
.tasks-intro{margin-bottom:24px;}
.tasks-intro h2{font-family:var(--display);font-weight:700;font-size:clamp(23px,3.2vw,30px);margin:6px 0 8px;letter-spacing:-.02em;}
.tasks-intro .sub{color:var(--muted);margin:0;max-width:var(--measure);font-size:15px;}
.task{
  position:relative;margin:0 0 18px;padding:20px 22px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  border-left:3px solid var(--accent);transition:box-shadow .2s,border-color .2s;
}
.task[data-diff="easy"]{border-left-color:var(--ok);}
.task[data-diff="medium"]{border-left-color:var(--accent);}
.task[data-diff="hard"]{border-left-color:var(--bad);}
.task.done{background:color-mix(in srgb,var(--ok-soft) 60%,var(--surface));border-color:color-mix(in srgb,var(--ok) 30%,var(--border));}
.task.justchecked{animation:taskpop .55s cubic-bezier(.2,.7,.2,1);}
@keyframes taskpop{0%{transform:scale(1);}40%{transform:scale(1.012);box-shadow:var(--glow);}100%{transform:scale(1);}}
.task-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.task-ix{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);font-weight:600;}
.task-diff{font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);border:1px solid;}
.task-diff[data-diff="easy"]{color:var(--ok-ink);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent);}
.task-diff[data-diff="medium"]{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line);}
.task-diff[data-diff="hard"]{color:var(--bad-ink);background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent);}
.task-title{font-family:var(--display);font-weight:680;font-size:18px;margin:0 0 12px;letter-spacing:-.01em;line-height:1.25;}
.task-why{background:var(--surface-2);border-radius:var(--r);padding:10px 14px;margin:0 0 14px;font-size:14px;color:var(--muted);}
.task-why .lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:3px;}
.task-steps{margin:0 0 14px;padding-left:0;list-style:none;counter-reset:step;}
.task-step{position:relative;padding:8px 0;border-bottom:1px dashed var(--border);}
.task-step:last-child{border-bottom:0;}
.task-step label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;}
.task-step input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer;}
.task-step .st-i{flex:1;}
.task-step .st-chk{display:block;margin:4px 0 0 27px;font-family:var(--mono);font-size:12px;color:var(--ok-ink);}
.task-hint{margin:0 0 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);}
.task-hint summary{cursor:pointer;padding:9px 14px;font-family:var(--mono);font-size:12px;color:var(--accent-ink);font-weight:500;list-style:none;}
.task-hint summary::-webkit-details-marker{display:none;}
.task-hint summary::before{content:"💡 ";}
.task-hint[open] summary{border-bottom:1px solid var(--border);}
.task-hint>div{padding:12px 14px;font-size:14px;color:var(--muted);}
.task-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.task-rate{display:flex;align-items:center;gap:6px;}
.task-rate .tr-l{font-family:var(--mono);font-size:11px;color:var(--faint);margin-right:2px;}
.tr-b{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--muted);font-family:var(--mono);font-size:12px;cursor:pointer;transition:all .15s;}
.tr-b:hover{border-color:var(--accent-line);color:var(--ink);}
.tr-b.on{background:var(--accent);border-color:transparent;color:#fff;box-shadow:var(--glow);}
/* Cel dotykowy < 44px (gwiazdki oceny trudności) — na palcu, nie na kursorze. */
@media (max-width:640px){
  .tr-b{width:36px;height:36px;}
  .task-rate{flex-wrap:wrap;row-gap:8px;}
}
.task-done-btn{white-space:nowrap;}
.task.done .task-done-btn{color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:var(--ok-soft);}

/* ============================ HUBY (dziedziny) ============================ */
#hubs{margin-top:8px;}
/* Ścieżka dzienna — drugi tor nauki, równorzędny wobec Dziedzin, nie dopisek pod spodem. */
#dni-track{margin-top:42px;}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:14px;}
.hub-card{
  --domain:var(--accent);
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .16s,box-shadow .2s,border-color .2s;
}
/* Usunięte: gradientowy „wash" na górze karty ORAZ kolorowa belka border-top:3px.
   Test przejrzystości: hierarchia ma stać na typografii i odstępie, nie na paskach
   koloru — sygnał dziedziny zostaje w jednym, kontenerowanym miejscu: ikonie. */
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--domain) 40%,var(--border));}
.hub-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative;z-index:1;}
/* Ikona dziedziny — ten sam boxed-monoline motyw co .card .ic (karty lekcji), barwiony
   akcentem dziedziny zamiast domyślnym --accent, żeby nie było już gołego emoji obok SVG. */
.hub-ic{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:color-mix(in srgb,var(--domain) 12%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--domain) 28%,var(--border));
  display:grid;place-items:center;
}
.hub-ic svg{width:23px;height:23px;fill:none;stroke:var(--domain);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.hub-ring{position:relative;width:52px;height:52px;flex:none;}
.hub-ring svg{width:52px;height:52px;transform:rotate(-90deg);display:block;}
.hub-ring .hv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);}
.hub-title{font-family:var(--display);font-weight:700;font-size:21px;margin:0 0 6px;letter-spacing:-.02em;}
.hub-blurb{color:var(--muted);font-size:14px;margin:0 0 16px;flex:1;line-height:1.5;}
.hub-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--muted);border-top:1px solid var(--border);padding-top:12px;}
.hub-soon{color:var(--accent-ink);margin-left:auto;}
/* Następny konkretny ruch („zacznij: Linux 01") — karta odpowiada, nie zostawia z decyzją.
   Sygnał, nie zamek: cała karta zostaje klikalna zawsze, to tylko podpowiedź. */
.hub-next{display:inline-flex;align-items:center;gap:6px;color:var(--domain);}
.hub-next .dot{width:5px;height:5px;border-radius:50%;background:var(--domain);flex:none;}
/* wspólne kółka postępu (hub-ring / hub-hero-ring) */
.hub-ring .track,.hub-hero-ring .track{fill:none;stroke:var(--surface-3);stroke-width:5;}
.hub-ring .fill,.hub-hero-ring .fill{fill:none;stroke:var(--domain,var(--accent));stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1);}

/* Wariant poziomy — jedna karta na całą szerokość, dla drugiego toru nauki (ścieżka
   dzienna) na panelu. Ta sama tożsamość co .hub-card (belka, ikona, ring, hover),
   tylko treść płynie w wierszu zamiast w kolumnie. Waga podniesiona względem pierwszej
   wersji (większa ikona/ring, jawne CTA) — to drugi z DWÓCH torów nauki, nie dopisek
   pod pięcioma kartami dziedzin, więc nie może wyglądać jak mniej ważny. */
.hub-card.wide{flex-direction:row;align-items:center;gap:26px;padding:26px 28px;}
/* .hub-top zwykle rozpycha ikonę i ring na krańce karty przez justify-content:space-between —
   przy flex:none (szerokość dopasowana do treści) nie ma czego rozpychać, więc trzeba
   własnego gap, inaczej ikona i ring zlepiają się bez odstępu. */
.hub-card.wide .hub-top{flex:none;margin-bottom:0;gap:18px;}
.hub-card.wide .hub-ic{width:52px;height:52px;}
.hub-card.wide .hub-ic svg{width:26px;height:26px;}
.hub-card.wide .hub-ring,.hub-card.wide .hub-ring svg{width:60px;height:60px;}
.hub-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.hub-card.wide .hub-title{font-size:23px;}
.hub-card.wide .hub-blurb{margin:0;}
.hub-card.wide .hub-meta{border-top:none;padding-top:0;justify-content:flex-start;gap:18px;}
.hub-card.wide .track-cta{flex:none;font-family:var(--display);font-size:14px;font-weight:600;padding:12px 22px;min-height:46px;}
@media (max-width:640px){
  .hub-card.wide{flex-direction:column;align-items:stretch;}
  .hub-card.wide .hub-top{align-self:flex-start;}
  .hub-card.wide .hub-meta{flex-wrap:wrap;}
  .hub-card.wide .track-cta{justify-content:center;}
}

/* ============================ HERO DZIEDZINY ============================ */
.hub-hero{--domain:var(--accent);border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--domain) 7%,transparent),transparent);}
.hub-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:44px 24px 38px;}
.hub-hero-icon{
  width:60px;height:60px;border-radius:14px;flex:none;
  background:color-mix(in srgb,var(--domain) 12%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--domain) 28%,var(--border));
  display:grid;place-items:center;
}
.hub-hero-icon svg{width:30px;height:30px;fill:none;stroke:var(--domain);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.hub-hero-txt{flex:1;min-width:0;}
.hub-hero .eyebrow{color:var(--domain);}
.hub-hero .eyebrow::before{background:var(--domain);}
.hub-hero h1{font-size:clamp(30px,5vw,46px);margin:0 0 14px;}
.hub-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--muted);}
.hub-hero-ring{position:relative;width:104px;height:104px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hub-hero-ring svg{position:absolute;inset:0;width:104px;height:104px;transform:rotate(-90deg);}
.hub-hero-ring .hv{font-family:var(--mono);font-weight:700;font-size:22px;color:var(--ink);}
.hub-hero-ring small{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.05em;}
@media (max-width:640px){.hub-hero-icon{width:48px;height:48px;}.hub-hero-icon svg{width:24px;height:24px;}}

/* ============================ DRABINA POZIOMÓW ============================ */
.tier-sec{padding:34px 0 8px;}
.tier-sec:not(:first-child){border-top:1px solid var(--border);}
.tier-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;}
.tier-dot{font-size:18px;line-height:1.4;}
.tier-head h2{font-family:var(--display);font-weight:700;font-size:22px;margin:0;letter-spacing:-.02em;}
.tier-head p{margin:2px 0 0;color:var(--muted);font-size:14px;}
.hub-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}

/* ============================ KARTA LEKCJI (stany) ============================ */
.lcard{padding-top:16px;}
.lc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.lc-head .ic{margin:0;}
.lc-tier{font-size:15px;line-height:1;}
.lcard[data-state="in-progress"]{border-left:3px solid var(--accent);}
.lcard[data-state="completed"]{border-left:3px solid var(--ok);}
.lcard[data-state="completed"] .lc-head::after{content:"✓";margin-left:auto;color:var(--ok-ink);font-weight:700;}
.card.lcard.soon{opacity:.72;}
.card.lcard.soon:hover{transform:none;}
.badge.done{color:var(--ok-ink);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent);}

@media (max-width:640px){
  .hub-hero-inner{flex-direction:column;align-items:flex-start;gap:18px;}
  .hub-grid,.hub-cards{grid-template-columns:1fr;}
}

/* ───────────────────────────────────────────────────────────
   Jedna lekcja = jedna strona: stopka nawigacji krokami
   ─────────────────────────────────────────────────────────── */
.step-nav{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:38px 0 8px;padding:16px 18px;border-radius:var(--r-lg,14px);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.step-nav .step-count{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  text-align:center;flex:1;min-width:0;
}
.step-nav .step-spacer{flex:0 0 auto;width:1px;}
.step-nav .btn{white-space:nowrap;}
@media (max-width:640px){
  .step-nav{flex-wrap:wrap;gap:10px;padding:14px;}
  .step-nav .step-count{order:-1;flex-basis:100%;text-align:left;}
  .step-nav .btn{flex:1;justify-content:center;}
}

/* ───────────────────────────────────────────────────────────
   Odpowiedzi wpisywane z palca (quiz + kroki zadań)
   Rozpoznanie wariantu ABCD ≠ umiejętność. Tu trzeba wytworzyć składnię.
   ─────────────────────────────────────────────────────────── */
.qhint.typed{color:var(--accent-ink);}
.q-input{display:flex;align-items:center;gap:10px;margin-top:4px;}
.q-input .ans,.st-answer .st-ans{
  flex:1;min-width:0;font-family:var(--mono);font-size:14px;
  padding:11px 14px;border-radius:10px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--border);
  transition:border-color .14s,box-shadow .14s;
}
.q-input .ans:focus,.st-answer .st-ans:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--ring);
}
.q-input .ans:disabled,.st-answer .st-ans:disabled{opacity:.75;cursor:not-allowed;}
.ans-mark,.st-mark{font-weight:700;font-size:17px;width:18px;flex:none;text-align:center;}
.q.ans-ok .ans,.task-step.typed.ok .st-ans{
  border-color:color-mix(in srgb,var(--ok) 55%,var(--border));background:var(--ok-soft);
}
.q.ans-ok .ans-mark,.task-step.typed.ok .st-mark{color:var(--ok-ink);}
.q.ans-bad .ans,.task-step.typed.bad .st-ans{
  border-color:color-mix(in srgb,var(--bad) 55%,var(--border));background:var(--bad-soft);
}
.q.ans-bad .ans-mark,.task-step.typed.bad .st-mark{color:var(--bad-ink);}
.ans-correct{
  font-family:var(--mono);font-size:13px;margin-bottom:10px;
  padding:9px 12px;border-radius:8px;color:var(--ok-ink);
  background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 30%,var(--border));
}
.ans-correct code{background:none;padding:0;color:inherit;font-weight:600;}
.q-hint,.st-hint{margin-top:10px;}
.q-hint summary,.st-hint summary{
  font-size:12.5px;color:var(--faint);cursor:pointer;user-select:none;
}
.q-hint summary:hover,.st-hint summary:hover{color:var(--accent-ink);}
.q-hint>div,.st-hint>div{
  margin-top:8px;padding:11px 13px;border-radius:8px;font-size:13.5px;line-height:1.6;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
}

/* Krok zadania z wpisywaniem — nie da się go odklikać, trzeba wpisać poprawnie */
.task-step.typed{padding:14px 0;}
.task-step.typed .st-i{display:block;margin-bottom:10px;line-height:1.6;}
.st-answer{display:flex;align-items:center;gap:10px;}
.st-answer .st-check{flex:none;}
.st-feedback:empty{display:none;}
.st-feedback{
  margin-top:9px;font-size:13px;line-height:1.55;color:var(--bad-ink);
}
.task-step.typed.ok .st-feedback{color:var(--ok-ink);}
@media (max-width:640px){
  .st-answer{flex-wrap:wrap;}
  .st-answer .st-ans{flex-basis:100%;}
}

/* ============================ ŚWIEŻOŚĆ / LEECH / KOPIA ============================ */
/* „Ukończone ✓" nie może świecić wiecznie — po przekroczeniu terminu powtórki znaczek
   ustępuje miejsca wskaźnikowi świeżości. Metryka, która nie gaśnie, kłamie. */
.badge.blaknie{
  background:color-mix(in srgb,var(--bad) 12%,transparent);
  border-color:color-mix(in srgb,var(--bad) 34%,var(--border));
  color:var(--bad-ink);
}
/* Materiał oblewany w kółko to defekt materiału, nie pamięci. */
small.leech{display:block;margin-top:8px;color:var(--bad-ink);}

.sl-kopia{display:inline-flex;gap:6px;}
.sl-btn{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:3px 8px;cursor:pointer;transition:border-color .16s,color .16s;
}
.sl-btn:hover{border-color:var(--border-strong);color:var(--ink);}
/* .sl-kopia mierzył 58x21px na dotyk. Pasek statusu ma stałą wysokość --statusline-h
   (34px) na WSZYSTKICH stronach (patrz .cnav/.footer.statusline) — pełne 44px
   rozsadziłoby ten pasek wszędzie, więc tu tylko powiększamy strefę dotyku, ile się
   mieści bez ruszania --statusline-h. */
@media (max-width:640px){ .sl-btn{padding:7px 10px;} }
/* Podpowiedź o materiale do przepisania jest najpilniejsza — to defekt treści, nie postępu. */
.nudge.pilne{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 34%,var(--border));color:var(--bad-ink);}
.nudge.pilne::before{background:var(--bad);}

/* ============================ DOWÓD WYKONANIA ============================ */
/* Uruchamiasz komendę u siebie i wklejasz wyjście. Jedyny krok, którego nie da się
   wypełnić bez postawienia środowiska — twardszy niż wpisanie komendy z pamięci. */
.inc-dowod{margin:16px 0;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);}
.inc-dowod.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--border));}
.inc-dowod.bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--border));}
.dw-opis{margin:0 0 10px;font-size:14.5px;color:var(--muted);}
.inc-dowod .term.dw-cmd{margin:0 0 10px;}
.dw-out{width:100%;resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.55;
  padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--ink);}
.dw-out:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}
.dw-akcje{display:flex;align-items:center;gap:10px;margin-top:10px;}
.dw-mark{font-weight:700;width:18px;}
.inc-dowod.ok .dw-mark{color:var(--ok-ink);}
.inc-dowod.bad .dw-mark{color:var(--bad);}
.dw-feedback{margin-top:8px;font-size:13.5px;color:var(--bad-ink);}

/* ============================ DOLNY TAB BAR (mobile) ============================ */
/* Aplikacja na telefonie dostaje natywną nawigację kciukiem zamiast desktopowego paska
   akcji. Cztery cele: Dziś (jedna akcja + streak), Nauka (katalog: dziedziny + dni),
   Powtórki (silnik pamięci, z licznikiem zaległych), Profil. Renderowany przez JS
   (initTabbar) na stronach-kontenerach; NIE na stronach lekcji/dni (widok „detal" —
   tam zostaje mapa kursu + kroki). Pokazuje się tylko na wąskim ekranie; na desktopie
   zostaje statyczny statusline. Klasa .bw-has-tabbar (dokładana przez JS) przełącza dół
   strony ze statusline na tab bar — tylko gdy tab bar realnie istnieje. */
.bw-tabbar{display:none;}
.bw-burger{display:none;}
.bw-menu-logo{display:none;}   /* globalnie ukryte; pokazywane tylko w szufladzie ≤640px (jak .bw-burger) */
@media (max-width:640px){
  /* na stronach z tab barem statusline schodzi — jego info (pasmo/powtórki/done) niesie
     teraz badge Powtórek + ekrany; nie dublujemy dwóch pasków na dole naraz. */
  body.bw-has-tabbar footer.statusline{display:none;}
  body.bw-has-tabbar{padding-bottom:calc(58px + env(safe-area-inset-bottom));}
  /* scroll-padding do kotwic (#hubs/#review-queue z tab bara) musi znać wysokość tab bara,
     inaczej cel ląduje pod nim (bazowa reguła html liczy tylko starą 34px statusline). */
  html:has(body.bw-has-tabbar){scroll-padding-bottom:calc(58px + env(safe-area-inset-bottom) + 12px);}
  /* Z tab barem na dole desktopowy pasek akcji (manual/motyw/wyloguj/terminal) zagracał wąski
     topbar (zawijał się na 2 rzędy). Zamiast go chować — ląduje w SZUFLADZIE z prawej,
     otwieranej burgerem. Reużywamy realny .topbar-actions (przyciski z listenerami) jako
     szufladę. Strony lekcji/dni nie mają tab bara → ich topbar zostaje nietknięty. */
  body.bw-has-burger .bw-burger{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:40px;height:40px;border-radius:10px;border:1px solid var(--border);
    background:var(--surface);color:var(--muted);cursor:pointer;
  }
  body.bw-has-burger .bw-burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
  /* Marka + burger w jednym rzędzie, z oddechem od krawędzi (bazowa reguła responsywna
     zerowała padding poziomy pod stare zawijanie akcji). */
  body.bw-has-burger .topbar-inner{padding:10px 18px;flex-wrap:nowrap;}
  body.bw-has-burger .topbar-actions{
    position:fixed;top:0;right:0;bottom:0;z-index:46;width:75vw;
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:10px;
    padding:calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 20px);
    background:var(--surface);border-left:1px solid var(--border-strong);box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.7,.2,1);overflow-y:auto;overscroll-behavior:contain;
  }
  body.bw-menu-open .topbar-actions{transform:none;}
  body.bw-has-burger .topbar-actions .btn{
    width:100%;justify-content:flex-start;min-height:48px;font-size:14px;
    background:var(--surface-2);border-color:var(--border-strong);color:var(--ink);
  }
  body.bw-has-burger .topbar-actions .btn:active{background:var(--surface-3);}
  /* Na lekcjach `body.has-cnav .topbar-actions a.btn{display:none}` chowało „← panel"
     w starym topbarze — w szufladzie chcemy linki (terminal, panel) widoczne. Nadpisujemy
     (ta sama specyficzność, późniejsza reguła wygrywa). */
  body.bw-has-burger .topbar-actions a.btn{display:flex;}
  /* Logo na górze szuflady (wstrzykiwane przez initBurger; globalnie ukryte — reguła przy .bw-burger). */
  body.bw-has-burger .topbar-actions .bw-menu-logo{
    display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:600;font-size:14px;
    color:var(--ink);text-decoration:none;padding:2px 4px 16px;margin-bottom:4px;border-bottom:1px solid var(--border);
    order:-1;   /* zawsze pierwszy w szufladzie, nawet gdy lekcje dokładają „mapa" na firstChild */
  }
  .bw-menu-logo .dollar{color:var(--accent);font-weight:700;}
  .bw-menu-backdrop{display:none;position:fixed;inset:0;z-index:45;background:rgba(8,10,16,.45);}
  body.bw-menu-open .bw-menu-backdrop{display:block;}
  body.bw-menu-open{overflow:hidden;}
  /* Link „profil" pozostaje ukryty na mobile (jest zakładka w tab barze), także w szufladzie. */
  .bw-profil-link{display:none;}
  .bw-tabbar{
    display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:38;
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid var(--border);
    background:color-mix(in srgb,var(--bg) 90%,transparent);
    backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);
  }
  .bw-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:52px;padding:8px 4px 7px;background:none;border:none;cursor:pointer;
    color:var(--faint);font-family:var(--mono);font-size:10px;letter-spacing:.02em;
    text-decoration:none;position:relative;transition:color .16s;
  }
  .bw-tab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .16s;}
  .bw-tab.on{color:var(--accent-ink);}
  .bw-tab.on svg{stroke-width:2.1;}
  .bw-tab:active{background:var(--surface-2);}
  .bw-badge{
    position:absolute;top:5px;left:calc(50% + 7px);min-width:16px;height:16px;padding:0 4px;
    border-radius:9px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;
    display:grid;place-items:center;font-family:var(--mono);line-height:1;
  }
  /* display:grid wyżej nadpisuje UA [hidden]{display:none} (niższa specyficzność) — bez tego
     pusty badge świeci na czerwono, gdy 0 zaległych powtórek. Przywracamy ukrywanie. */
  .bw-badge[hidden]{display:none;}
}
/* Panel labu (KodeKloud) w incydencie dnia — initLabPanel() */
.lab-panel{border:1px solid var(--border);border-radius:var(--r);background:var(--panel,var(--surface));margin:18px 0;overflow:hidden;}
.lab-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--border);}
.lab-title{font-weight:600;font-size:14px;}
.lab-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.lab-msg{padding:10px 14px;font-size:13.5px;line-height:1.55;border-bottom:1px solid var(--border);}
.lab-msg.ok{color:var(--good-ink,#3fb950);}
.lab-msg.warn{color:#d98a20;}
.lab-msg.err{color:var(--bad-ink,#e5484d);}
.lab-term{height:50vh;min-height:280px;background:#0b0b0d;}
.lab-term-frame{width:100%;height:100%;border:0;display:block;}
@media (max-width:640px){.lab-term{height:62vh;}.lab-actions{width:100%;}}

/* ============================ ZMIANA HASŁA (Profil) ============================ */
.pwd-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;max-width:420px;box-shadow:var(--shadow-sm),var(--hl);margin-top:12px;}
.pwd-note{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--muted);padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);}
.pwd-form{display:flex;flex-direction:column;gap:14px;}
.pwd-field{display:flex;flex-direction:column;gap:6px;}
.pwd-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);}
.pwd-input{position:relative;display:flex;}
.pwd-input input{flex:1;width:100%;font-family:var(--mono);font-size:15px;letter-spacing:.06em;padding:11px 44px 11px 14px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg);color:var(--ink);}
.pwd-input input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}
.pwd-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;background:none;border:none;color:var(--faint);cursor:pointer;border-radius:7px;transition:color .15s;}
.pwd-eye:hover{color:var(--muted);}
.pwd-eye.on{color:var(--accent-ink);}
.pwd-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.pwd-meter{height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin-top:-4px;}
.pwd-meter span{display:block;height:100%;width:0;border-radius:2px;transition:width .25s,background .25s;}
.pwd-meter[data-level="1"] span{width:25%;background:var(--bad);}
.pwd-meter[data-level="2"] span{width:50%;background:#d98a20;}
.pwd-meter[data-level="3"] span{width:75%;background:var(--accent);}
.pwd-meter[data-level="4"] span{width:100%;background:var(--ok);}
.pwd-req{margin:-6px 0 0;font-family:var(--mono);font-size:12px;color:var(--faint);display:flex;align-items:center;gap:6px;}
.pwd-req.ok{color:var(--ok-ink);}
.pwd-req.ok::before{content:"✓";font-weight:700;}
.pwd-req.err{color:var(--bad-ink);}
.pwd-req.err::before{content:"✕";font-weight:700;}
.pwd-msg{font-size:13.5px;line-height:1.5;padding:9px 12px;border-radius:8px;}
.pwd-msg.err{color:var(--bad-ink);background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 30%,var(--border));}
.pwd-msg.ok{color:var(--ok-ink);background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 30%,var(--border));}
.pwd-form button[type="submit"]{align-self:flex-start;min-height:46px;}
.pwd-form button[type="submit"]:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.pwd-ok{text-align:center;padding:14px 8px;animation:fade-in .3s ease;}
.pwd-ok-badge{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 40%,var(--border));display:grid;place-items:center;}
.pwd-ok-badge svg{width:28px;height:28px;fill:none;stroke:var(--ok-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.pwd-ok h3{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;}
.pwd-ok p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;}
.pwd-count{color:var(--accent-ink);font-variant-numeric:tabular-nums;font-weight:600;}