/* ProtocolSim – motyw modernistyczny: neutralna baza, jeden kolor akcentu (wybierany paletą), kolory stanów jak na panelu HMI.
   Motyw jasny/ciemny podąża za ustawieniem systemu (prefers-color-scheme). */
:root {
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #eeeeeb;
  --line: #e0e0dc;
  --text: #121417;
  --muted: #6b7078;
  /* Akcent: Turkus. */
  --accent: #0b7f75;
  --accent-ink: #0b7168;
  --on-accent: #ffffff;
  --accent-soft: #dcf3f0;
  --ok: #1f9d55;
  --warn: #c98a00;
  --bad: #d23f31;
  --info: #2f6fd6;
  --off: #9aa1a8;
  --liquid: #4f9fe0;
  --k-mbap: #e6e0f7; --k-mbap-ink: #5b3fb3;
  --k-addr: #dff0fb; --k-addr-ink: #1d6aa3;
  --k-fc: #fde9c8;   --k-fc-ink: #8f5600;
  --k-data: #e3f3e8; --k-data-ink: #22713f;
  --k-count: #eef0d6; --k-count-ink: #6a6d12;
  --k-value: #d8f1ee; --k-value-ink: #126b61;
  --k-crc: #f2e3f0;  --k-crc-ink: #8c2f7c;
  --k-error: #fde0dc; --k-error-ink: #b02a1d;
  --k-unknown: #eceae5; --k-unknown-ink: #646b73;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 2px 10px rgb(0 0 0 / 0.04);
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0e10; --surface: #15171a; --surface-2: #1e2125; --line: #2a2e33;
    --text: #eceef0; --muted: #8e959e; --accent: #2fd1bf; --accent-ink: #6ae3d5; --on-accent: #032421; --accent-soft: #0f2c29;
    --ok: #3cc479; --warn: #e5b33c; --bad: #f0685a; --info: #6a9ef0; --off: #5d656e; --liquid: #3d8fd1;
    --k-mbap: #2f2946; --k-mbap-ink: #c3b4f5; --k-addr: #1c3446; --k-addr-ink: #8cc8f2;
    --k-fc: #433219; --k-fc-ink: #f6c57a; --k-data: #1f3829; --k-data-ink: #8fdcaa;
    --k-count: #36371c; --k-count-ink: #d6d98a; --k-value: #183a36; --k-value-ink: #86dcd0;
    --k-crc: #3b2238; --k-crc-ink: #eaa5de; --k-error: #4a2420; --k-error-ink: #ffaa9f;
    --k-unknown: #2a2f36; --k-unknown-ink: #9aa3ad;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0d0e10; --surface: #15171a; --surface-2: #1e2125; --line: #2a2e33;
    --text: #eceef0; --muted: #8e959e; --accent: #2fd1bf; --accent-ink: #6ae3d5; --on-accent: #032421; --accent-soft: #0f2c29;
    --ok: #3cc479; --warn: #e5b33c; --bad: #f0685a; --info: #6a9ef0; --off: #5d656e; --liquid: #3d8fd1;
    --k-mbap: #2f2946; --k-mbap-ink: #c3b4f5; --k-addr: #1c3446; --k-addr-ink: #8cc8f2;
    --k-fc: #433219; --k-fc-ink: #f6c57a; --k-data: #1f3829; --k-data-ink: #8fdcaa;
    --k-count: #36371c; --k-count-ink: #d6d98a; --k-value: #183a36; --k-value-ink: #86dcd0;
    --k-crc: #3b2238; --k-crc-ink: #eaa5de; --k-error: #4a2420; --k-error-ink: #ffaa9f;
    --k-unknown: #2a2f36; --k-unknown-ink: #9aa3ad;
    --shadow: none;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent-ink); }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--surface-2); padding: 0.05em 0.25em; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0.2em 0 0.4em; }
h2 { font-size: 1.05rem; margin: 0 0 0.7rem; }
h3 { font-size: 1.1rem; margin: 1.6em 0 0.4em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.error { color: var(--bad); min-height: 1.2em; margin: 0.3rem 0; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); margin: 0; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 62ch; }
.accent { color: var(--accent-ink); }

/* ---------- Szkielet ---------- */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.6rem; padding: 0.75rem 1.5rem;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.05rem; }
.nav { display: flex; gap: 0.2rem; flex: 1; }
.nav a { color: var(--muted); text-decoration: none; padding: 0.35rem 0.7rem; border-radius: 6px; font-weight: 500; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.on { color: var(--text); background: var(--surface-2); }
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
main.wide { max-width: 1560px; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); }
.linklike { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.page.narrow { max-width: 820px; margin: 0 auto; }

/* ---------- Przyciski i formularze ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
  padding: 0.6rem 1.05rem; border-radius: 8px; font: 600 0.95rem var(--font); text-decoration: none; cursor: pointer; transition: filter 0.15s, transform 0.05s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.btn.wide { width: 100%; }
.btn:focus-visible, .nav a:focus-visible, .option:focus-visible, .seg button:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; min-width: 0; flex: 1; }
.field > span { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 0.45rem 0.6rem; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); border-color: var(--accent); }
textarea.mono { font-family: var(--mono); resize: vertical; }
.row { display: flex; gap: 0.6rem; }
.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin: 0.5rem 0; cursor: pointer; }
.check input { width: auto; accent-color: var(--accent); }
.seg { display: flex; background: var(--surface-2); border-radius: 8px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 0.38rem 0.5rem; border-radius: 6px; font: 500 0.88rem var(--font); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
.range { display: flex; gap: 0.6rem; align-items: center; }
.range input { padding: 0; accent-color: var(--accent); }
.range output { font-family: var(--mono); font-size: 0.85rem; min-width: 5ch; text-align: right; }
.pill { font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.live { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge { display: inline-block; font: 600 0.72rem var(--mono); padding: 0.15rem 0.45rem; border-radius: 5px; white-space: nowrap; }
.badge.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok-ink, var(--ok)); }
.badge.warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.badge.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad-ink, var(--bad)); }
.badge.info { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }

/* ---------- Strona główna ---------- */
.display { font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; margin: 0.35em 0 0.3em; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: center; min-height: min(72vh, 640px); padding: 2rem 0 3rem; }
.hero .eyebrow { color: var(--muted); letter-spacing: 0.18em; font-weight: 500; }
.hero .lead { font-size: 1.2rem; margin: 0; }
.cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 2rem; }

.ticker { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; min-width: 0; }
.tk-head { display: flex; align-items: center; gap: 0.55rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); margin-bottom: 0.4rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tk-tank { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.tk-fill { position: relative; width: 12px; height: 26px; border: 1.5px solid var(--text); border-radius: 3px; overflow: hidden; }
.tk-fill span { position: absolute; left: 0; right: 0; bottom: 0; background: var(--liquid); transition: height 0.6s; }
.tk-pump { width: 8px; height: 8px; border-radius: 50%; background: var(--off); }
.tk-pump.on { background: var(--ok); }
.tk-lines { display: grid; }
.tk-row { display: grid; gap: 0.35rem; padding: 0.75rem 0; border-bottom: 1px dashed var(--line); animation: rise 0.5s ease-out; }
.tk-row:last-child { border-bottom: 0; }
.tk-row:not(:first-child) { opacity: 0.45; }
.tk-row > div { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tk-dir { font: 600 0.9rem var(--mono); color: var(--accent-ink); width: 1rem; }
.tk-dir.in { color: var(--ok); }
.tk-val { margin-left: auto; font-size: 0.82rem; color: var(--muted); }
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 4rem; }
.step { display: flex; align-items: baseline; gap: 0.8rem; padding: 1.4rem 0.2rem; font-size: 1.35rem; letter-spacing: -0.01em; }
.step + .step { border-left: 1px solid var(--line); padding-left: 1.4rem; }
.step strong { font-weight: 600; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2rem; margin-bottom: 5rem; }
.feature h3 { margin: 0.9rem 0 0.2rem; font-size: 1.05rem; }
.feature p { margin: 0; font-size: 0.95rem; }
.f-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }

.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.section-head h2 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0; }
.more { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text); text-decoration: none; font-weight: 500; }
.more:hover { color: var(--accent-ink); }
.home-courses { margin-bottom: 2rem; }
.home-courses .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .home-courses .course-grid { grid-template-columns: minmax(0, 1fr); } }
.ticker .byte { font-size: 0.9rem; }

/* ---------- Kursy ---------- */
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.8rem; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.03em; margin: 0; }
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 0.4rem 0.9rem; border-radius: 99px; font: 500 0.88rem var(--font); cursor: pointer; }
.chips button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.course-card { position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 1.3rem 1.3rem 1.2rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; min-height: 230px; overflow: hidden; }
.course-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.course-card h3 { margin: 0.2rem 0 0; font-size: 1.15rem; position: relative; }
.course-card p { margin: 0.2rem 0 0; font-size: 0.92rem; position: relative; }
.course-card.s-planned .cc-icon { opacity: 0.7; }
.cc-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.4rem; position: relative; }
.cc-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.cc-code { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.04em; color: var(--line); line-height: 1; transition: color 0.15s; }
.course-card:hover .cc-code { color: var(--accent); }
.cc-meta { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; padding-top: 1.2rem; flex-wrap: wrap; }
.cc-meta .status { margin-left: auto; }
.course-card .meter { position: relative; margin-top: 0.6rem; }
.status { font: 500 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.5rem; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.status.available { border-color: transparent; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.status.soon { border-color: var(--accent); color: var(--accent-ink); }
.meter.thin { height: 4px; margin-top: 0.5rem; }

.back { display: inline-flex; align-items: center; min-height: 40px; margin: 0.3rem 0 0.8rem; text-decoration: none; }
.course-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 2.5rem; align-items: end; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.course-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); letter-spacing: -0.035em; line-height: 1; margin: 1rem 0 0.5rem; }
.course-hero .lead { font-size: 1.2rem; margin: 0; }
.course-badges { display: flex; align-items: center; gap: 0.8rem; }
.facts { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.fact { display: grid; grid-template-columns: 22px 90px 1fr; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.fact dt { font-size: 0.82rem; }
.fact dd { margin: 0; color: var(--text); font-weight: 500; font-size: 0.92rem; }
.fact:last-child { border-bottom: 0; }
.fact-progress { padding: 0.7rem 1rem; display: grid; gap: 0.3rem; }
.fact-progress .meter { margin: 0; }
.course-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 2.5rem; padding-top: 2rem; }
.course-main h2 { font-size: 1.3rem; letter-spacing: -0.01em; margin: 2.2rem 0 0.8rem; }
.about { font-size: 1.08rem; max-width: 60ch; margin: 0; }
.outcomes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1.4rem; }
.outcomes li { display: flex; gap: 0.6rem; align-items: start; }
.outcomes .icon { flex: none; color: var(--accent-ink); margin-top: 0.15rem; }
.course-side { display: grid; gap: 1rem; align-content: start; }
.side-block { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; }
.side-block h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 0.95rem; }
.side-block p { margin: 0; font-size: 0.92rem; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; font-size: 0.92rem; }
.planned-row { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.1rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.planned-row .num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font: 600 0.8rem var(--mono); }


/* ---------- Lekcje ---------- */
.meter { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 1rem; }
.meter span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.lesson-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.6rem; }
.lesson-list a { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.lesson-list a:hover { border-color: var(--accent); }
.lesson-list .num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font: 600 0.9rem var(--mono); }
.lesson-list a.done .num { background: var(--ok); color: #fff; }
.lesson-list .body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.prose p, .prose li { max-width: 68ch; }
table.doc { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.9rem; margin: 0.8rem 0; background: var(--surface); border-radius: 8px; overflow: hidden; }
table.doc th, table.doc td { text-align: left; padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.doc th { background: var(--surface-2); font-weight: 600; font-size: 0.8rem; }
.prose { overflow-x: visible; } /* szerokie tabele mają własne przewijanie (.table-scroll, .datasheet); dymki słowniczka nie mogą być obcinane */
.callout { border-left: 4px solid var(--info); background: color-mix(in srgb, var(--info) 9%, var(--surface)); padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; }
.callout.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.example { display: grid; gap: 0.8rem; margin: 1rem 0 1.4rem; }
.btn.try { margin: 0.6rem 0 1rem; text-align: left; }
.try-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.try-row .btn.try { margin: 0; }
.table-scroll { overflow-x: auto; margin: 0.8rem 0; }
.table-scroll > table.doc { margin: 0; min-width: 480px; }
.quiz { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.question { margin-bottom: 1.3rem; }
.options { display: grid; gap: 0.4rem; }
.option { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.9rem; font: inherit; color: var(--text); cursor: pointer; }
.option:hover { border-color: var(--accent); }
.option.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.option.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.explain { font-size: 0.9rem; margin: 0.5rem 0 0; }
.explain.right { color: var(--ok); }
.explain.wrong { color: var(--bad); }
.lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

/* ---------- Ramki ---------- */
.frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 0.9rem; min-width: 0; }
.frame.compact { padding: 0.6rem 0.7rem; background: var(--bg); }
.frame-title { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.5rem; }
.frame-empty { color: var(--muted); font-size: 0.85rem; }
.bytes { display: flex; flex-wrap: wrap; gap: 3px; font-family: var(--mono); }
.byte { padding: 0.18rem 0.34rem; border-radius: 4px; font-size: 0.86rem; font-weight: 600; cursor: default; transition: transform 0.1s, box-shadow 0.1s; }
.bytes.big .byte { font-size: 1.05rem; padding: 0.35rem 0.55rem; }
.byte.first { margin-left: 5px; }
.byte.first:first-child { margin-left: 0; }
.byte.hl, tr.hl { box-shadow: 0 0 0 2px var(--text); }
.byte.hl { transform: translateY(-1px); }
.k-mbap { background: var(--k-mbap); color: var(--k-mbap-ink); }
.k-addr { background: var(--k-addr); color: var(--k-addr-ink); }
.k-fc { background: var(--k-fc); color: var(--k-fc-ink); }
.k-data { background: var(--k-data); color: var(--k-data-ink); }
.k-count { background: var(--k-count); color: var(--k-count-ink); }
.k-value { background: var(--k-value); color: var(--k-value-ink); }
.k-crc { background: var(--k-crc); color: var(--k-crc-ink); }
.k-error { background: var(--k-error); color: var(--k-error-ink); }
.k-unknown { background: var(--k-unknown); color: var(--k-unknown-ink); }
.swatch.k-mbap { background: var(--k-mbap-ink); } .swatch.k-addr { background: var(--k-addr-ink); } .swatch.k-fc { background: var(--k-fc-ink); }
.swatch.k-data { background: var(--k-data-ink); } .swatch.k-count { background: var(--k-count-ink); } .swatch.k-value { background: var(--k-value-ink); }
.swatch.k-crc { background: var(--k-crc-ink); } .swatch.k-error { background: var(--k-error-ink); } .swatch.k-unknown { background: var(--k-unknown-ink); }
.swatch { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 3px; margin-right: 0.45em; vertical-align: -0.05em; }
table.fields { width: 100%; border-collapse: collapse; margin-top: 0.7rem; font-size: 0.86rem; }
table.fields td { padding: 0.35rem 0.5rem; border-top: 1px solid var(--line); vertical-align: top; }
table.fields td:first-child { white-space: nowrap; width: 1%; }
table.fields td.val { text-align: right; white-space: nowrap; }
@media (max-width: 560px) { table.fields td.val { white-space: normal; overflow-wrap: anywhere; } .frame { overflow-x: auto; } }
@media (min-width: 561px) { .prose table.doc td:first-child, .prose table.doc th:first-child { white-space: nowrap; } }
table.fields tr.hl { box-shadow: none; background: var(--surface-2); }

/* ---------- Laboratorium ---------- */
.lab { display: grid; gap: 1rem; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(260px, 320px);
  grid-template-areas: "client plant ex" "client memory ex" "log log log"; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: var(--shadow); min-width: 0; }
.panel.client { grid-area: client; }
.panel.plant { grid-area: plant; }
.panel.memory { grid-area: memory; }
.panel.exercises { grid-area: ex; }
.panel.log { grid-area: log; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.panel-head .muted { white-space: nowrap; }
.panel-head h2, .panel-head h3 { margin: 0; }
.preview { margin: 0.3rem 0 0.2rem; }
.fault-box { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.fault-box summary, .regmap summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.faults { padding-top: 0.4rem; }

.link { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0.2rem 0.7rem; align-items: center; margin-bottom: 0.6rem; }
.link .node { font: 600 0.78rem var(--mono); padding: 0.25rem 0.55rem; border-radius: 6px; background: var(--surface-2); }
.link-meta { grid-column: 1 / 3; }
.link-status { text-align: right; }
.wire { position: relative; height: 3px; background: var(--off); border-radius: 2px; }
.wire.noisy { background: repeating-linear-gradient(90deg, var(--warn) 0 6px, transparent 6px 9px); }
.wire.broken { background: linear-gradient(90deg, var(--bad) 0 44%, transparent 44% 56%, var(--bad) 56%); }
.packet { position: absolute; top: -4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); opacity: 0; }
.link.tx .packet { animation: go 0.5s ease-in forwards; }
.link.rx .packet { background: var(--ok); animation: back 0.5s ease-out forwards; }
.link.fail .packet { background: var(--bad); animation: blink 0.6s; }
@keyframes go { from { left: 0; opacity: 1; } to { left: calc(100% - 11px); opacity: 1; } }
@keyframes back { from { left: calc(100% - 11px); opacity: 1; } to { left: 0; opacity: 0.2; } }
@keyframes blink { 0%, 100% { opacity: 0; left: 50%; } 30% { opacity: 1; left: 50%; } }

.plant-svg { width: 100%; height: auto; max-height: 340px; display: block; }
.plant-svg .tank { fill: none; stroke: var(--text); stroke-width: 2.5; }
.plant-svg .liquid { fill: var(--liquid); opacity: 0.85; transition: y 0.1s linear, height 0.1s linear; }
.plant-svg .band { fill: var(--ok); opacity: 0.12; }
.plant-svg .sp-line { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 5 4; }
.plant-svg .pipe { fill: none; stroke: var(--off); stroke-width: 6; stroke-linejoin: round; }
.plant-svg .pipe.thin { stroke-width: 1.5; }
.plant-svg .flow { fill: none; stroke: var(--liquid); stroke-width: 2.5; stroke-dasharray: 6 10; opacity: 0; stroke-linejoin: round; }
.plant-svg .flow.active { opacity: 1; animation: flow 0.8s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.plant-svg .pump { fill: var(--surface-2); stroke: var(--text); stroke-width: 2; transition: fill 0.2s; }
.plant-svg .pump.on { fill: var(--ok); }
.plant-svg .pump.alarm { fill: var(--bad); }
.plant-svg .pump-mark { fill: var(--text); opacity: 0.7; }
.plant-svg .valve { fill: var(--surface-2); stroke: var(--text); stroke-width: 2; }
.plant-svg .valve.on { fill: var(--ok); }
.plant-svg .lamp { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.5; }
.plant-svg .lamp.on { fill: var(--warn); }
.plant-svg text { fill: var(--text); font-family: var(--font); }
.plant-svg .svg-small { font-size: 11px; font-weight: 500; }
.plant-svg .svg-big { font: 700 22px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.plant-svg .svg-badge { font: 700 12px var(--mono); fill: var(--accent-ink); }
.plant-svg .svg-alarm { font: 700 12px var(--font); fill: var(--bad); }
.plant-svg .muted { fill: var(--muted); }

.tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tabs button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; padding: 0.3rem 0.6rem; font: 500 0.82rem var(--font); cursor: pointer; }
.tabs button.on { background: var(--surface-2); color: var(--text); border-color: var(--text); }
table.mem, table.log-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.mem th, table.log-table th { text-align: left; font-size: 0.75rem; color: var(--muted); font-weight: 600; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); }
table.mem td, table.log-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
table.mem tr { cursor: pointer; }
table.mem tbody tr:hover { background: var(--surface-2); }
table.mem td.val { font-weight: 600; text-align: right; }
.flash-r { animation: flash-r 0.9s ease-out; }
.flash-w { animation: flash-w 1.1s ease-out; }
@keyframes flash-r { from { background: color-mix(in srgb, var(--info) 30%, transparent); } }
@keyframes flash-w { from { background: color-mix(in srgb, var(--accent) 45%, transparent); } }
.regmap { margin-top: 0.8rem; }
.regmap table.doc { font-size: 0.8rem; }
.regmap > table { display: block; overflow-x: auto; }

.ex-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.ex-list li { border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.6rem; }
.ex-list li.done { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.ex-list summary { cursor: pointer; display: flex; gap: 0.5rem; align-items: center; list-style: none; font-size: 0.9rem; }
.ex-list summary::-webkit-details-marker { display: none; }
.ex-list summary > span:last-child { display: flex; justify-content: space-between; gap: 0.5rem; flex: 1; }
.ex-list .tick { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 0.7rem; color: #fff; }
.ex-list li.done .tick { background: var(--ok); border-color: var(--ok); }
.ex-list .lvl { color: var(--accent); font-size: 0.6rem; letter-spacing: 1px; }
.ex-list p { margin: 0.45rem 0 0.2rem; font-size: 0.88rem; }

.log-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.log-table thead th { position: sticky; top: 0; background: var(--surface); }
.log-table tbody tr { cursor: pointer; }
.log-table tbody tr:hover { background: var(--surface-2); }
.log-table tr.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.log-table td { white-space: nowrap; }
.log-table td.msg { white-space: normal; min-width: 240px; }
.insp-title { margin-top: 1.2rem; }
.insp-head { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.insp-frames { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

/* ---------- Powiadomienia ---------- */
.toasts { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: 0.5rem; z-index: 50; max-width: min(380px, calc(100vw - 2rem)); }
.toast { background: var(--text); color: var(--bg); padding: 0.7rem 1rem; border-radius: 8px; font-weight: 500; box-shadow: 0 6px 24px rgb(0 0 0 / 0.2); transition: opacity 0.4s, transform 0.4s; }
.toast.ok { border-left: 4px solid var(--ok); }
.toast.info { border-left: 4px solid var(--info); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- Responsywność ---------- */
@media (max-width: 1180px) {
  .lab { grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); grid-template-areas: "client plant" "client memory" "ex ex" "log log"; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 2rem; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-hero, .course-body { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 820px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(3) { border-left: 0; padding-left: 0.2rem; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .outcomes { grid-template-columns: minmax(0, 1fr); }
  .lab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plant" "client" "memory" "ex" "log"; }
  .panel.client { position: static; }
  .insp-frames { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  main { padding: 1rem 16px 2rem; }
  .topbar { gap: 0.6rem; padding: 0.5rem 16px; }
  .brand span { display: none; }
  #pro-btn { display: none; }
  .features { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .step { font-size: 1.1rem; }
  .footer { flex-wrap: wrap; }
  .row { flex-direction: column; gap: 0; }
  table.mem td:nth-child(2), table.mem th:nth-child(2) { display: none; }
  table.fields td:nth-child(2) .muted { display: none; }
}

/* ================= Kurs: uproszczona strona, filmik, ścieżki ================= */
[hidden] { display: none !important; }
.c2-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1.1rem; align-items: center; margin-bottom: 1.4rem; }
.c2-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.c2-head .lead { margin: 0.35rem 0 0; }
.c2-head .cc-icon { align-self: start; width: 54px; height: 54px; }
.c2-facts { grid-column: 2; list-style: none; padding: 0; margin: 0.3rem 0 0; display: flex; gap: 0.5rem 1.3rem; flex-wrap: wrap; color: var(--muted); }
.c2-facts li { display: inline-flex; align-items: center; gap: 0.4rem; }
.c2-h2 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 2.6rem 0 1rem; }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.path-card { position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.path-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.path-card.featured { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 65%); }
.path-card h3 { margin: 0.8rem 0 0; font-size: 1.4rem; letter-spacing: -0.02em; }
.path-card p { margin: 0; }
.path-art { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--surface-2); color: var(--accent-ink); }
.featured .path-art { background: transparent; }
.path-badge { position: absolute; top: 1.2rem; right: 1.2rem; font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); }
.path-meta { display: flex; gap: 0.4rem 1rem; flex-wrap: wrap; margin-top: 0.6rem; }
.path-meta span + span::before { content: '·'; margin-right: 1rem; opacity: 0.6; }
@media (min-width: 1000px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 821px) and (max-width: 999px) { .paths .path-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.path-foot { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.3rem; }
.path-foot .meter { flex: 1; margin: 0; }
.path-cta { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.c2-more { margin-top: 2.4rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.c2-more summary { cursor: pointer; display: flex; align-items: baseline; gap: 0.8rem; padding: 1rem 0; font-weight: 600; list-style: none; }
.c2-more summary::-webkit-details-marker { display: none; }
.c2-more summary::before { content: '+'; font: 500 1.1rem var(--mono); color: var(--accent-ink); width: 1rem; }
.c2-more[open] summary::before { content: '−'; }
.c2-more-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 2rem; padding: 0 0 1.6rem; }
.c2-more-body h3 { margin: 0.6rem 0 0.8rem; font-size: 1rem; }
.c2-more-body .lesson-list { margin-top: 0; }
.c2-more-body .lesson-list a { padding: 0.6rem 0.9rem; }

/* ---------- Filmik ---------- */
.xp { margin: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.xp-frame-box { position: relative; }
.xp-stage { container-type: inline-size; position: relative; aspect-ratio: 16 / 6; max-height: 380px; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), var(--surface) 70%); }
.xp-stage.paused * { animation-play-state: paused !important; }
.xp-stage.mini { aspect-ratio: 16 / 6; border-radius: 14px; border: 1px solid var(--line); cursor: default; }
.xp-big { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; align-content: center; cursor: pointer; box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform 0.15s; }
.xp-big:hover { transform: scale(1.06); }
.xp-big span { font-size: 1.7rem; line-height: 1; margin-left: 4px; }
.xp-big em { font: 600 0.7rem var(--mono); font-style: normal; opacity: 0.85; margin-top: 2px; }
.xp-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.35rem 0.8rem; align-items: center; padding: 0.7rem 1rem 0.85rem; border-top: 1px solid var(--line); }
.xp-play { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; font-size: 0.85rem; }
.xp-segs { display: flex; gap: 4px; }
.xp-seg { height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.xp-seg::before { content: ''; display: block; height: 4px; border-radius: 2px; background: var(--surface-2); }
.xp-seg span { display: block; height: 4px; border-radius: 2px; background: var(--accent); margin-top: -4px; width: 0; }
.xp-caption { margin: 0; font-weight: 600; font-size: 1rem; }
.xp-scene { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 3cqw; padding: 4cqw; }
.xp-node { display: grid; justify-items: center; gap: 0.6cqw; font-weight: 600; font-size: 2.1cqw; animation: xp-in 0.5s both; }
.xp-node-ic { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 2.6cqw; background: var(--surface); border: 1px solid var(--line); color: var(--accent-ink); }
.xp-node-ic .icon { width: 5.5cqw; height: 5.5cqw; }
.xp-srv .xp-node-ic { animation: xp-ping 0.6s 2.4s both; }
.xp-wire { position: relative; flex: 0 1 44cqw; height: 3px; background: var(--off); border-radius: 2px; }
.xp-pk { position: absolute; top: 50%; padding: 0.5cqw 1.2cqw; border-radius: 99px; font: 600 clamp(0.8rem, 1.9cqw, 1.1rem) var(--mono); white-space: nowrap; transform: translate(0, -50%); opacity: 0; }
.xp-pk.go { background: var(--accent); color: var(--on-accent); animation: xp-go 1.6s ease-in-out both; }
.xp-pk.back { background: var(--ok); color: #fff; animation: xp-back 1.6s ease-in-out both; }
@keyframes xp-go { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; transform: translate(-100%, -50%); opacity: 0; } }
@keyframes xp-back { 0% { left: 100%; transform: translate(-100%, -50%); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; transform: translate(0, -50%); opacity: 1; } }
@keyframes xp-in { from { opacity: 0; transform: translateY(1.5cqw); } }
@keyframes xp-ping { 50% { box-shadow: 0 0 0 1.2cqw color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); } }
.xp-tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; max-width: 86cqw; }
.xp-tile { position: relative; display: grid; gap: 0.4cqw; padding: 2cqw; border-radius: 2cqw; background: var(--surface); border: 1px solid var(--line); animation: xp-in 0.5s both; }
.xp-tile strong { font-size: 2cqw; }
.xp-tile span { font-size: 1.5cqw; color: var(--muted); }
.xp-tile.focus { animation: xp-in 0.5s both, xp-focus 0.6s 3s both; }
@keyframes xp-focus { to { border-color: var(--accent); box-shadow: 0 0 0 0.4cqw color-mix(in srgb, var(--accent) 25%, transparent); } }
.xp-val { position: absolute; top: -2.4cqw; right: 1cqw; font: 700 2.4cqw var(--mono); font-style: normal; background: var(--accent); color: var(--on-accent); padding: 0.3cqw 1cqw; border-radius: 1cqw; animation: xp-in 0.4s both; }
.xp-groups { display: flex; gap: 1.4cqw; align-items: start; }
.xp-group { display: grid; gap: 1cqw; justify-items: center; }
.xp-bytes { display: flex; gap: 0.6cqw; }
.xp-byte { font: 700 3.4cqw var(--mono); padding: 0.8cqw 1.1cqw; border-radius: 1cqw; animation: xp-in 0.35s both; }
.xp-lbl { font-size: 1.6cqw; font-weight: 600; padding: 0.2cqw 1cqw; border-radius: 99px; animation: xp-in 0.4s both; }
.xp-noise { position: relative; flex-direction: column; gap: 3cqw; }
.xp-bytes.travel { animation: xp-travel 5s ease-in-out both; }
@keyframes xp-travel { from { transform: translateX(-22cqw); opacity: 0; } 15% { opacity: 1; } 55%, to { transform: translateX(0); opacity: 1; } }
.xp-byte.flip { position: relative; background: var(--k-unknown); color: var(--k-unknown-ink); }
.xp-byte.flip .now { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 1cqw; background: var(--k-error); color: var(--k-error-ink); animation: xp-flip 0.3s 2.1s both; }
@keyframes xp-flip { from { opacity: 0; transform: scale(1.4); } }
.xp-bolt { position: absolute; top: 10%; left: 40%; color: var(--warn); opacity: 0; animation: xp-bolt 0.8s both; }
.xp-bolt .icon { width: 6cqw; height: 6cqw; }
@keyframes xp-bolt { 0% { opacity: 0; transform: translateY(-3cqw) scale(0.6); } 40% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.xp-verdict { font-size: 2.2cqw; font-weight: 600; display: flex; align-items: center; gap: 1cqw; animation: xp-in 0.4s both; }
.xp-verdict .badge { font-size: 1.8cqw; }
.xp-tank { position: relative; width: 14cqw; height: 22cqw; border: 0.5cqw solid var(--text); border-radius: 2cqw; overflow: hidden; animation: xp-in 0.5s both; }
.xp-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; background: var(--liquid); animation: xp-fill 4s 0.4s ease-in-out both; }
@keyframes xp-fill { from { height: 15%; } }
.xp-bit { animation: xp-in 0.5s 0.6s both, bit-bob 2s 1.2s ease-in-out infinite; }
.xp-bit svg { width: 16cqw; height: 16cqw; }

/* ---------- Bit (maskotka) ---------- */
.bit { display: block; overflow: visible; }
.bit-body { fill: var(--accent); }
.bit-screen { fill: #08201e; }
.bit-ant { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.bit-led { fill: var(--warn); animation: bit-led 2.4s infinite; }
.bit-oops .bit-led { fill: var(--bad); }
.bit-happy .bit-led { fill: var(--ok); }
.bit-fill { fill: #7af0e2; }
.bit-stroke { fill: none; stroke: #7af0e2; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bit-idle .bit-eyes, .bit-talk .bit-eyes { transform-origin: 32px 28px; animation: bit-blink 4s infinite; }
.bit-mouth-talk { transform-origin: 32px 37px; animation: bit-talk 0.32s 6 alternate; }
.bit-think .bit-eyes { animation: bit-look 2.4s ease-in-out infinite; }
.bit-happy { animation: bit-hop 0.5s ease-out; }
.bit-oops { animation: bit-shake 0.4s; }
@keyframes bit-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes bit-talk { to { transform: scaleY(2.2); } }
@keyframes bit-look { 50% { transform: translateX(-3px); } }
@keyframes bit-hop { 40% { transform: translateY(-6px); } }
@keyframes bit-shake { 25% { transform: translateX(-3px) rotate(-4deg); } 75% { transform: translateX(3px) rotate(4deg); } }
@keyframes bit-led { 50% { opacity: 0.35; } }
@keyframes bit-bob { 50% { transform: translateY(-1.2cqw); } }

.bit-says { display: flex; align-items: flex-end; gap: 0.9rem; margin: 0.6rem 0 1.4rem; }
.bit-avatar { flex: none; }
.bubble { position: relative; flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 0.9rem 1.15rem; font-size: 1.12rem; line-height: 1.45; box-shadow: var(--shadow); }
.bubble b { color: var(--accent-ink); }
.bubble.pop { animation: pop 0.3s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

.bit-pop, .rate-pop { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; display: flex; gap: 0.8rem; align-items: flex-end; max-width: min(400px, calc(100vw - 2rem));
  animation: bit-pop-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.bit-pop.out, .rate-pop.out { opacity: 0; transform: translateY(20px); transition: 0.3s; }
.bit-pop-face, .rate-pop .bit-pop-face { flex: none; animation: bit-bob-px 2s ease-in-out infinite; }
.bit-pop-body, .rate-pop .bit-pop-body { background: var(--text); color: var(--bg); border-radius: 16px 16px 4px 16px; padding: 0.9rem 1rem; box-shadow: 0 12px 40px rgb(0 0 0 / 0.25); order: -1; }
.bit-pop-body strong, .rate-pop .bit-pop-body strong { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.bit-pop-body p, .rate-pop .bit-pop-body p { margin: 0.3rem 0 0.7rem; font-size: 0.98rem; }
.bit-pop-body b, .rate-pop .bit-pop-body b { color: var(--accent); }
.bit-pop-body .btn.ghost, .rate-pop .bit-pop-body .btn.ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); }
.bit-pop-body .btn.ghost:hover, .rate-pop .bit-pop-body .btn.ghost:hover { background: color-mix(in srgb, var(--bg) 12%, transparent); }
@keyframes bit-pop-in { from { opacity: 0; transform: translateY(60px) scale(0.9); } }
@keyframes bit-bob-px { 50% { transform: translateY(-4px); } }

/* ---------- Mapa misji ---------- */
.m-path { list-style: none; padding: 0; margin: 0.5rem 0 2rem; display: grid; gap: 0; position: relative; }
.m-path::before { content: ''; position: absolute; left: 1.75rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--line); }
.m-path a { position: relative; display: flex; align-items: center; gap: 1.1rem; padding: 0.75rem 0.6rem; border-radius: 14px; color: var(--text); text-decoration: none; }
.m-path a:hover { background: var(--surface); }
.m-node { flex: none; width: 2.3rem; height: 2.3rem; margin-left: 0.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); font-weight: 600; font-size: 0.85rem; }
.m-path li.done .m-node { background: var(--ok); border-color: var(--ok); color: #fff; }
.m-path li.next .m-node { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 5px var(--accent-soft); }
.m-txt { flex: 1; min-width: 0; display: grid; }
.m-txt strong { font-size: 1.05rem; }

/* ---------- Misja ---------- */
.mission { max-width: 1040px; margin: 0 auto; }
.mission.cheer .bit-avatar { animation: bit-hop 0.5s 2; }
.m-head { display: flex; align-items: center; gap: 1rem; }
.m-head .back { margin: 0.5rem 0; }
.m-head strong { flex: 1; text-align: center; font-size: 0.95rem; }
.m-dots { display: flex; gap: 4px; margin: 0.4rem 0 0.6rem; }
.m-dots span, .m-dots button { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 30%, transparent); transition: background 0.3s; border: 0; padding: 0; }
.m-dots .task { flex: 1.6; }
.m-dots .done { background: var(--ok); cursor: pointer; }
.m-dots button.done:hover, .m-dots button.done:focus-visible { background: var(--accent); outline: none; height: 8px; margin-top: -1px; }
.m-dots .on { background: var(--accent); }
.m-nav { display: flex; justify-content: flex-start; min-height: 1.2rem; margin: -0.2rem 0 0.4rem; }
.m-back[hidden] { display: none; }
.m-stage { animation: pop 0.35s ease-out; }
.m-stage:empty { display: none; }
.m-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; margin: 1.4rem 0 2rem; }
.m-stage.t-do + .m-actions { justify-content: flex-start; }
.m-actions .btn { min-width: 8rem; }
.m-actions .btn.ghost .bit { margin: -4px 0; }
.m-options { width: 100%; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; }
.option.big { padding: 1rem 1.1rem; font-size: 1.02rem; font-weight: 500; border-radius: 12px; transition: border-color 0.15s, transform 0.1s; }
.option.big:not(:disabled):hover { transform: translateY(-1px); }
.option:disabled { cursor: default; }
.option.wrong { animation: bit-shake 0.35s; opacity: 0.7; }
.option.right { font-weight: 600; }
.m-beats { display: flex; gap: 5px; margin-right: auto; }
.m-beats i { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-2); }
.m-beats i.on { background: var(--accent); }

/* obrazy w misjach */
.mv-frame { display: grid; justify-items: center; gap: 0.8rem; padding: 2.2rem 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.mv-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
.mv-group { display: grid; justify-items: center; gap: 0.5rem; padding: 0.4rem; border: 2px solid transparent; border-radius: 12px; background: none; font: inherit; color: inherit; transition: opacity 0.25s, border-color 0.2s, transform 0.2s; }
.mv-bytes { display: flex; gap: 5px; }
.mv-byte { font: 700 clamp(1.3rem, 3.4vw, 2rem) var(--mono); padding: 0.4rem 0.6rem; border-radius: 9px; animation: pop 0.3s both; }
.mv-lbl { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.mv-frame.has-hl .mv-group:not(.hl) { opacity: 0.25; }
.mv-group.hl .mv-lbl { color: var(--text); }
.mv-group.pulse { animation: mv-pulse 0.6s ease-out; }
@keyframes mv-pulse { 40% { transform: translateY(-5px) scale(1.04); } }
.mv-frame.picking .mv-group { cursor: pointer; }
.mv-frame.picking .mv-group:hover { border-color: var(--accent); transform: translateY(-2px); }
.mv-group.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.mv-group.wrong { animation: bit-shake 0.35s; border-color: var(--bad); }

.mv-exchange { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 2.6rem 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.mv-node { display: grid; justify-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; }
.mv-node .icon { width: 64px; height: 64px; padding: 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); color: var(--accent-ink); box-sizing: border-box; transition: box-shadow 0.3s, border-color 0.3s; }
.mv-node.hl .icon { border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.mv-wire { position: relative; flex: 0 1 320px; height: 3px; background: var(--off); border-radius: 2px; }
.mv-pk { position: absolute; top: 50%; padding: 0.3rem 0.7rem; border-radius: 99px; font: 600 0.85rem var(--mono); white-space: nowrap; opacity: 0; transform: translateY(-50%); }
.mv-pk.go { background: var(--accent); color: var(--on-accent); animation: xp-go 1.5s ease-in-out both; }
.mv-pk.back { background: var(--ok); color: #fff; animation: xp-back 1.5s ease-in-out both; }
.mv-tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.mv-tile { position: relative; display: grid; gap: 0.2rem; padding: 1.3rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: opacity 0.3s, border-color 0.3s, transform 0.3s; animation: pop 0.35s both; }
.mv-tile:nth-child(2) { animation-delay: 0.08s; }
.mv-tile:nth-child(3) { animation-delay: 0.16s; }
.mv-tile:nth-child(4) { animation-delay: 0.24s; }
.mv-tables.has-hl .mv-tile:not(.hl) { opacity: 0.3; }
.mv-tables.has-hl .mv-tile.hl { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 0 0 5px var(--accent-soft); }
.mv-tag { position: absolute; top: -0.7rem; right: 0.8rem; font-style: normal; font-weight: 700; font-size: 0.8rem; background: var(--accent); color: var(--on-accent); padding: 0.1rem 0.5rem; border-radius: 6px; }
.mv-tag:empty { display: none; }
.mv-doc { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 1rem 1.1rem; }
.mv-doc-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.mv-doc table.doc { margin: 0; font-size: 0.95rem; }
.mv-codes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.mv-code { display: grid; gap: 0.15rem; padding: 1.2rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); animation: pop 0.35s both; }
.mv-code .mono { font-size: 1.8rem; font-weight: 700; color: var(--warn); }
.mv-plant { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0.6rem; }
.mv-plant .plant-svg { max-height: 260px; margin: 0 auto; }

/* zadanie „zrób sam” */
.m-do { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.m-client { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.m-side { display: grid; gap: 0.8rem; min-width: 0; }
.m-result { border: 1px dashed var(--line); border-radius: 12px; padding: 0.8rem 0.9rem; min-height: 2.5rem; }
.mc-result { display: grid; gap: 0.6rem; animation: pop 0.3s; }
.mc-preview { margin-bottom: 0.4rem; }
.m-goal { display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: 0.88rem; }
.m-finish { display: grid; justify-items: center; gap: 0.4rem; padding: 2.4rem 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.m-finish strong { font-size: 1.3rem; }
.m-medal { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: var(--on-accent); animation: bit-hop 0.6s 2; }

@media (max-width: 820px) {
  .paths, .c2-more-body, .m-do { grid-template-columns: minmax(0, 1fr); }
  .mv-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-codes { grid-template-columns: minmax(0, 1fr); }
  .xp-stage { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .c2-head { grid-template-columns: minmax(0, 1fr); }
  .c2-head .cc-icon { display: none; }
  .c2-facts { grid-column: 1; }
  .bubble { font-size: 1rem; }
  .bit-avatar svg { width: 44px; height: 44px; }
  .mv-exchange { gap: 0.7rem; padding: 2rem 0.8rem; }
  .mv-node .icon { width: 52px; height: 52px; padding: 12px; }
  .xp-bar { padding: 0.6rem 0.8rem; }
  .xp-caption { font-size: 0.92rem; }
  .path-badge { position: static; order: -1; margin-bottom: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Konto, Pro, dokumenty ---------- */
.topbar .btn.acct { margin-left: 0.4rem; min-width: 5rem; }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--accent); color: var(--on-accent); display: inline-grid; place-items: center; font-weight: 700; font-size: 1.3rem; flex: none; }
.avatar.tiny { width: 24px; height: 24px; font-size: 0.75rem; margin: -4px 0; }
.foot-nav { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.foot-nav a { color: var(--muted); }
.auth-hero { display: flex; align-items: center; gap: 1.2rem; margin: 0.5rem 0 1.5rem; }
.auth-hero h1 { margin: 0 0 0.2rem; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.auth-hero .lead, .auth-hero p { margin: 0; }
.auth-card { max-width: 420px; padding: 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.auth-form { display: grid; gap: 0.8rem; }
.auth-form.busy { opacity: 0.6; pointer-events: none; }
.auth-form form { display: grid; gap: 0.2rem; }
.auth-form .btn.google { gap: 0.6rem; }
.auth-form .linklike { justify-self: start; padding: 0.2rem 0; }
.auth-form .legal { margin: 0.4rem 0 0; }
.or { display: flex; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 0.8rem; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0 1.5rem; }
.stat { display: grid; gap: 0.1rem; justify-items: start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--accent-ink); }
.stat strong { font-size: 1.5rem; color: var(--text); letter-spacing: -0.02em; }
.account-actions { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.account-actions .linklike { margin-left: auto; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.8rem 0 1rem; }
.plan-card { display: grid; gap: 0.8rem; align-content: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.plan-card.featured { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 60%); }
.plan-card h3 { margin: 0; font-size: 1.1rem; }
.price { display: flex; align-items: baseline; gap: 0.4rem; }
.price strong { font-size: 2.2rem; letter-spacing: -0.03em; }
ul.ticks li { display: flex; gap: 0.5rem; align-items: start; }
ul.ticks .icon { flex: none; color: var(--accent-ink); margin-top: 0.2rem; }
.pro-ctas { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.pro-login { margin-top: 0.4rem; }
.legal .prose h3 { font-size: 1rem; margin: 1.4em 0 0.3em; }
@media (max-width: 560px) {
  .plans, .stats { grid-template-columns: minmax(0, 1fr); }
  .topbar .btn.acct { min-width: 0; }
}
.check.consent { align-items: flex-start; font-size: 0.85rem; color: var(--muted); margin: 0.2rem 0 0.4rem; }
.check.consent input { margin-top: 0.2rem; flex: none; }

/* ---------- Laboratorium: tryb prosty / zaawansowany, intro, język ---------- */
.lab-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.4rem 0 1rem; flex-wrap: wrap; }
.lab-head h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -0.02em; }
.mode-switch { margin: 0; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-weight: 500; }
.lab-intro { margin-bottom: 1.2rem; flex-wrap: wrap; }
.lab-intro .linklike { margin-left: auto; }
.lab.simple { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-areas: "client plant" "ex memory" "log log"; }
.lab.simple .panel.exercises { padding: 1.2rem 1.4rem; }
.ex-current { display: grid; gap: 0.3rem; }
.ex-current strong { font-size: 1.15rem; }
.ex-current p { margin: 0; }
.ex-current details summary { cursor: pointer; color: var(--accent-ink); font-size: 0.9rem; }
.ex-box > .linklike { margin-top: 0.6rem; padding: 0; }
.lab.simple .insp-frames { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.linklike.lang { font: 600 0.8rem var(--mono); text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.5rem; }
.linklike.lang:hover { color: var(--text); border-color: var(--text); }
@media (max-width: 820px) {
  .lab.simple { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plant" "client" "ex" "log" "memory"; }
}

/* ---------- Jak to działa? ---------- */
.home-courses { margin: 1rem 0 4rem; }
.how { margin-bottom: 3rem; }
.how-steps { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.how-step { position: relative; display: grid; gap: 0.3rem; align-content: start; padding: 1.4rem 1.3rem 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.how-num { position: absolute; top: 1.1rem; right: 1.2rem; font-size: 0.8rem; color: var(--muted); }
.how-step h3 { margin: 0.9rem 0 0.1rem; font-size: 1.05rem; }
.how-step p { margin: 0; font-size: 0.95rem; }
.how .cta { margin-top: 0; }
@media (max-width: 960px) { .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Piaskownica ---------- */
.lab.advanced { grid-template-areas: "client plant ex" "client memory ex" "sandbox sandbox sandbox" "log log log"; }
.panel.sandbox { grid-area: sandbox; }
.panel.sandbox-hint { grid-area: log; padding: 0.7rem 1.1rem; }
.panel.sandbox-hint p { margin: 0; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.lab.simple { grid-template-areas: "client plant" "ex memory" "log log" "hint hint"; }
.lab.simple .panel.sandbox-hint { grid-area: hint; }
.sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.sb-block { display: grid; gap: 0.5rem; align-content: start; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.sb-block h3 { margin: 0; font-size: 0.95rem; }
.sb-block .row { gap: 0.5rem; }
.sb-block .field { margin-bottom: 0; }
.sb-block .btn { justify-self: start; }
.sb-block .check { margin: 0.1rem 0; }
.sb-desc { margin: 0; min-height: 1.2em; }
.sb-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.sb-devs li { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; }
.sb-devs li.on > .linklike { color: var(--accent-ink); font-weight: 600; }
.sb-devs .linklike { text-decoration: none; }
.linklike.danger { color: var(--bad); }
.sb-docs { max-height: 180px; overflow: auto; }
.sb-docs li { display: flex; gap: 0.3rem; align-items: center; padding: 0.15rem 0; border-bottom: 1px dashed var(--line); }
.sb-docs li .danger { margin-left: auto; }
.sb-words { margin: 0; color: var(--muted); }
.dev-select { margin-bottom: 0.4rem; }
.field.inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.field.inline select { width: auto; }
.no-plant { display: grid; justify-items: center; gap: 0.4rem; padding: 2.4rem 1rem; text-align: center; }
.no-plant p { margin: 0; max-width: 42ch; }
@media (max-width: 1180px) {
  .lab.advanced { grid-template-areas: "client plant" "client memory" "ex ex" "sandbox sandbox" "log log"; }
  .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .lab.advanced { grid-template-areas: "plant" "client" "memory" "ex" "sandbox" "log"; }
  .lab.simple { grid-template-areas: "plant" "client" "ex" "log" "hint" "memory"; }
  .sb-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Poziomowanie ---------- */
.placement { margin: 2.2rem 0 0; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.placement-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.placement-head h2 { margin: 0; font-size: 1.15rem; }
.placement .bit-says { margin: 0.2rem 0 1rem; }
.placement .cta { margin-top: 0.4rem; }
.placement .m-options { margin-bottom: 0.6rem; }

.m-path li.m-sep { position: relative; z-index: 1; margin: 0.8rem 0 0.2rem 1.2rem; padding: 0.3rem 0.6rem; width: max-content; max-width: calc(100% - 1.2rem); background: var(--bg); border-radius: 8px; }
.m-path li.adv .m-node { border-style: dashed; }

/* ---------- Egzamin i certyfikat ---------- */
.exam-head h1 { margin: 0.2rem 0 0.4rem; }
.exam-progress { display: grid; gap: 0.4rem; margin: 1rem 0 1.4rem; }
.exam-progress .meter { margin: 0; }
.exam-q { font-size: 1.35rem; letter-spacing: -0.01em; margin: 0 0 1rem; }
.exam .m-options { margin-bottom: 1rem; }
.exam .m-do { margin: 1rem 0; }
.exam-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.weak { margin: 0.6rem 0 1.4rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; }
.weak h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.path-card.passed { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.cert-tools { margin-bottom: 1.4rem; }
.cert-tools .field { max-width: 420px; }
.cert { position: relative; aspect-ratio: 297 / 210; padding: 7% 8%; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); display: grid; align-content: center; justify-items: center; text-align: center; gap: 0.6rem; overflow: hidden; }
.cert::before { content: ''; position: absolute; inset: 14px; border: 2px solid var(--accent); border-radius: 4px; opacity: 0.6; pointer-events: none; }
.cert-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; }
.cert-eyebrow { margin: 0; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: var(--muted); }
.cert-name { margin: 0.2rem 0; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.02em; }
.cert-text { margin: 0; max-width: 60ch; font-size: 1rem; }
.cert-score { margin: 0; color: var(--muted); font-size: 0.9rem; }
.cert-foot { display: flex; gap: 2rem; justify-content: center; margin-top: 1.4rem; font-size: 0.85rem; color: var(--muted); flex-wrap: wrap; }
.cert.locked > :not(.cert-lock) { filter: blur(2px); opacity: 0.55; }
.cert-lock { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.5rem; background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--accent-ink); }
@media print {
  .topbar, .footer, .cert-tools, .toasts { display: none !important; }
  main { max-width: none; padding: 0; }
  .cert-page { max-width: none; }
  .cert { border: 0; box-shadow: none; border-radius: 0; width: 100%; height: 100vh; aspect-ratio: auto; page-break-after: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] { --bg: #fff; --surface: #fff; --surface-2: #f3f3f1; --text: #121417; --muted: #6b7078; --line: #e0e0dc; --accent: #0b7f75; --accent-ink: #0b7168; --on-accent: #fff; color-scheme: light; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* ---------- Poprawki po recenzji UI ---------- */
.linklike.small { padding: 0.45rem 0.3rem; min-height: 40px; display: inline-flex; align-items: center; }
.ex-list .lvl { font-size: 0.7rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mv-frame.has-hl .mv-group:not(.hl) { opacity: 0.45; }
  :root:not([data-theme="light"]) .mv-tables.has-hl .mv-tile:not(.hl) { opacity: 0.5; }
  :root:not([data-theme="light"]) .bubble { border-color: color-mix(in srgb, var(--line) 50%, var(--accent)); }
}
@media (max-width: 820px) {
  .lab.advanced { grid-template-areas: "client" "plant" "ex" "memory" "sandbox" "log"; }
}
@media (max-width: 560px) {
  .lab-intro { flex-wrap: wrap; }
  .lab-intro .bubble { flex-basis: 0; }
  .lab-intro .linklike { flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
  .cert { aspect-ratio: auto; padding: 2rem 1.2rem; }
  input, select, .mode-switch { min-height: 40px; }
  .xp-play { width: 32px; height: 32px; }
  .m-path li.m-sep { margin-left: 0; width: auto; }
}
.cert-logo { display: inline-flex; align-items: center; }
.weak .plain { gap: 0; }
.weak .plain a { display: inline-block; padding: 0.45rem 0; }
@media (max-width: 820px) { .cert { aspect-ratio: auto; } }
.path-card:focus-visible, .m-path a:focus-visible, .linklike:focus-visible, .back:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
:root { --ok-ink: #176f3d; --bad-ink: #a8281d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok-ink: var(--ok); --bad-ink: var(--bad); } }
:root[data-theme="dark"] { --ok-ink: var(--ok); --bad-ink: var(--bad); }
/* Karta katalogowa w lekcji 11 */
.datasheet { border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; background: var(--surface); margin: 1rem 0; overflow-x: auto; }
.datasheet .ds-head { margin: 0 0 0.6rem; font: 500 0.8rem var(--mono); color: var(--muted); letter-spacing: 0.01em; }
.datasheet table.doc { margin: 0; min-width: 560px; }
.datasheet table.doc td:first-child { white-space: nowrap; }
.datasheet, .table-scroll { background: linear-gradient(to right, var(--surface) 30%, transparent) 0 0, linear-gradient(to left, var(--surface) 30%, transparent) 100% 0, linear-gradient(to right, rgb(0 0 0 / 0.14), transparent) 0 0, linear-gradient(to left, rgb(0 0 0 / 0.14), transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
.datasheet table.doc, .table-scroll > table.doc { background: transparent; }
.scroll-hint { display: none; margin: 0.3rem 0 0; }
@media (max-width: 560px) { .scroll-hint { display: block; } .ds-head span { white-space: nowrap; } }
.quiz h2 { font-size: 1.25rem; }
/* Panel administratora */
.admin .adm-sec { margin: 1.6rem 0 2rem; }
.admin .adm-sec h2 { display: flex; align-items: center; gap: 0.4rem; font-size: 1.2rem; margin: 0 0 0.3rem; }
.adm-table td:first-child { max-width: 32rem; }
.adm-bar { display: inline-block; vertical-align: middle; width: 7rem; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; margin-right: 0.4rem; }
.adm-bar > span { display: block; height: 100%; background: var(--accent); }
.adm-bar.bad > span { background: var(--bad); }
.adm-bar.ok > span { background: var(--ok); }
.adm-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.adm-missions { display: grid; gap: 0.8rem; }
.adm-mission { border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; background: var(--surface); }
.adm-mhead { display: flex; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.adm-funnel { display: flex; gap: 4px; align-items: flex-end; height: 96px; }
.adm-step { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; padding-bottom: 1.9rem; box-sizing: border-box; }
.adm-step .adm-col { flex: none; width: 100%; background: color-mix(in srgb, var(--accent) 55%, var(--surface-2)); border-radius: 3px 3px 0 0; min-height: 2px; }
.adm-step.task .adm-col { background: var(--accent); }
.adm-step b { position: absolute; bottom: 0.95rem; left: 0; right: 0; text-align: center; font: 500 0.7rem var(--mono); color: var(--text); opacity: 0.75; }
.adm-step i { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: 500 0.62rem var(--mono); color: var(--muted); font-style: normal; }
.adm-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.2rem 0 0.8rem; font-size: 0.8rem; color: var(--muted); }
.adm-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; background: color-mix(in srgb, var(--accent) 55%, var(--surface-2)); }
.adm-legend span.task::before { background: var(--accent); }
.adm-list li .mono { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.admin .stats .stat strong { white-space: nowrap; font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
@media (max-width: 560px) {
  .adm-list li { grid-template-columns: 1fr auto; } .adm-list li .adm-bar { grid-column: 1 / -1; grid-row: 2; width: 100%; } .adm-list li .mono { grid-column: 2; grid-row: 1; }
  .adm-step i { display: none; }
  .adm-table thead { display: none; }
  .adm-table tr { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  .adm-table td { display: block; border: 0; padding: 0; max-width: none; }
  .adm-table td:first-child, .adm-table td:nth-child(2) { grid-column: 1 / -1; }
  .adm-table td:nth-child(3) { grid-column: 1; }
  .adm-table td:nth-child(4) { grid-column: 2; text-align: right; }
}
/* Słowniczek: dymki przy terminach */
.gloss { position: relative; white-space: nowrap; text-decoration: underline dotted; text-decoration-color: var(--accent); text-underline-offset: 3px; cursor: help; outline: none; }
.gloss-tip { display: none; position: absolute; left: var(--tip-dx, 0); bottom: calc(100% + 6px); font-style: normal; user-select: none; z-index: 20; width: max-content; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 0.82rem; line-height: 1.4; font-weight: 400; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); pointer-events: none; white-space: normal; }
.gloss.below .gloss-tip { bottom: auto; top: calc(100% + 6px); }
.gloss:hover .gloss-tip, .gloss:focus-visible .gloss-tip, .gloss.open .gloss-tip { display: block; animation: gloss-in 0.15s ease-out; }
@keyframes gloss-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.gloss:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 3px; }
@media (hover: none) { .gloss:hover .gloss-tip { display: none; } .gloss.open .gloss-tip { display: block; } }
.replay-badge { font-size: 0.7rem; }
.replay-badge[hidden] { display: none; }
@media (max-width: 560px) {
  .m-stage.t-finish + .m-actions { display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .m-stage.t-finish + .m-actions .btn:not(.ghost) { grid-column: 1 / -1; }
}
.callout.tip { border-color: var(--line); background: var(--surface-2); }
/* Panel: na żywo i odwiedziny */
.adm-live-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0 0.8rem; }
.adm-live-head strong { font-size: 2rem; letter-spacing: -0.02em; }
.adm-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); animation: adm-pulse 2s ease-out infinite; align-self: center; }
@keyframes adm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.adm-live-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; }
.adm-live-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }
.adm-live-item strong { font-size: 1.2rem; color: var(--text); min-width: 1.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.adm-live-item.on { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); color: var(--text); }
.adm-days { display: flex; gap: 4px; align-items: flex-end; height: 120px; }
.adm-day { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 2rem; box-sizing: border-box; }
.adm-day .adm-day-col { flex: none; width: 100%; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; }
.adm-day b { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; font: 500 0.6rem var(--mono); color: var(--muted); }
.adm-day i { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: 500 0.65rem var(--mono); color: var(--text); font-style: normal; }
@media (max-width: 560px) { .adm-day b { display: none; } .adm-day:nth-child(odd) i { display: none; } }
.nav a[hidden] { display: none; }
/* Panel administratora – układ kart i wykres trendu */
.adm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.adm-head h1 { margin: 0; }
.adm-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 1rem 1.2rem; margin: 0 0 1rem; }
.adm-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.adm-card-head h2 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.2rem; font-size: 1.1rem; }
.adm-card-head p { margin: 0; }
.adm-card-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.adm-big { font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.adm-live-row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0 0.8rem; }
.adm-live-label { color: var(--muted); }
.adm-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; }
.adm-chip { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.adm-chip b { color: var(--text); }
.adm-chart-box { min-height: 120px; }
.adm-chart { width: 100%; height: auto; display: block; }
.adm-area { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.adm-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.adm-grid { stroke: var(--line); stroke-width: 1; }
.adm-tick { font: 500 10px var(--mono); fill: var(--muted); text-anchor: middle; }
.adm-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.adm-empty { padding: 2rem 0; text-align: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn { border: 0; background: transparent; color: var(--muted); padding: 0.35rem 0.7rem; font: inherit; font-size: 0.85rem; cursor: pointer; }
.seg-btn.on { background: var(--surface-2); color: var(--text); }
.adm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.adm-two .adm-card { margin: 0; }
.adm-two + div { margin-top: 1rem; }
.adm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0.4rem 0 0.8rem; }
.adm-kpi { display: grid; gap: 0.1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.adm-kpi strong { font-size: 1.25rem; white-space: nowrap; letter-spacing: -0.02em; }
.adm-kpi span { color: var(--muted); font-size: 0.78rem; }
.adm-select { font: inherit; font-size: 0.9rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.adm-block h3 { margin: 0.2rem 0 0.2rem; font-size: 1rem; }
.adm-block > p { margin: 0 0 0.5rem; }
.adm-span { grid-column: 1 / -1; }
.adm-cols { columns: 2; column-gap: 1.5rem; }
.adm-cols li { break-inside: avoid; }
.admin .adm-sec { display: none; }
@media (max-width: 900px) { .adm-two, .adm-grid { grid-template-columns: 1fr; } .adm-cols { columns: 1; } .adm-kpis { grid-template-columns: 1fr; } }
.bit-pop-text p { margin: 0 0 0.5rem; }
.bit-pop-text ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.bit-pop-text li { margin: 0.2rem 0; font-size: 0.86rem; }
.bit-pop-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.m-goal[hidden] { display: none; }
.support-box { margin-top: 1rem; padding: 0.8rem 1rem; border: 1px dashed var(--line); border-radius: 10px; display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.support-box p { margin: 0; flex: 1; min-width: 12rem; }
.foot-nav .support-link { text-decoration: none; }
.support-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Ocena kursu z Bitem */
.rate-pop .bit-pop-body > p { margin: 0.3rem 0 0.5rem; }
.rate-pop .rate-lead { font-size: 0.85rem; opacity: 0.75; }
.rate-stars { display: flex; gap: 0.15rem; margin: 0.2rem 0 0.7rem; }
.rate-star { border: 0; background: none; padding: 0.1rem 0.15rem; font-size: 2rem; line-height: 1; cursor: pointer; color: color-mix(in srgb, var(--bg) 35%, transparent); transition: transform 0.12s, color 0.12s; min-width: 40px; min-height: 40px; }
.rate-star.on { color: #f5b301; transform: scale(1.1); }
.rate-star:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.rate-text { width: 100%; box-sizing: border-box; margin: 0 0 0.6rem; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); background: color-mix(in srgb, var(--bg) 8%, transparent); color: var(--bg); font: inherit; font-size: 0.9rem; resize: vertical; }
.rate-text::placeholder { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.rate-pop .support-link.btn { color: var(--on-accent); }
.rate-remind { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.rate-remind p { margin: 0; flex: 1; min-width: 14rem; }
.adm-rating-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.5rem; align-items: center; margin-bottom: 0.8rem; }
.adm-rating-avg { display: grid; gap: 0.1rem; }
.adm-rating-avg strong { font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em; }
.adm-stars { color: #f5b301; letter-spacing: 0.1em; }
.adm-feedback li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: baseline; }
.adm-feedback p { margin: 0; }
.adm-fb-stars { color: #f5b301; font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 700px) { .adm-rating-row { grid-template-columns: 1fr; } .adm-feedback li { grid-template-columns: 1fr; gap: 0.2rem; } }