/* BitEdu — lekcje w formacie blokowym (lesson-pro). Jeden system, kolor akcentu ustawia lekcja. */
.canvas-public.lp-public { max-width: 1240px; }

.lp {
    --lp-accent: #5eb0ff;
    --lp-accent-2: #9d8cff;
    --lp-ink: var(--text, #f5f7fb);
    --lp-muted: var(--muted, #9ba6b8);
    --lp-line: color-mix(in srgb, var(--line, #293244) 85%, transparent);
    --lp-card: color-mix(in srgb, var(--panel, #111722) 92%, white 3%);
    --lp-card-2: color-mix(in srgb, var(--panel, #111722) 70%, black);
    --lp-soft: color-mix(in srgb, var(--lp-accent) 14%, transparent);
    --lp-ok: #5fd3a0;
    --lp-warn: #f2b45f;
    --lp-bad: #ff7d8d;
    --lp-radius: 20px;
    color: var(--lp-ink);
    position: relative;
    padding-bottom: 80px;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; background: color-mix(in srgb, var(--lp-accent) 14%, transparent); padding: .12em .42em; border-radius: 6px; color: var(--lp-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pasek postępu czytania */
.lp-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.lp-progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--lp-accent), var(--lp-accent-2)); }

/* Nagłówek lekcji */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin: 12px 0 44px; padding: clamp(26px, 4.5vw, 56px); border: 1px solid var(--lp-line); border-radius: 28px; overflow: hidden; position: relative; isolation: isolate;
    background: radial-gradient(900px 400px at 100% 0, color-mix(in srgb, var(--lp-accent) 24%, transparent), transparent 70%), radial-gradient(700px 360px at 0 100%, color-mix(in srgb, var(--lp-accent-2) 18%, transparent), transparent 70%), var(--lp-card-2); }
.lp-kicker { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-accent); }
.lp-hero h1 { margin: 0; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.lp-lead { margin: 20px 0 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: color-mix(in srgb, var(--lp-ink) 82%, transparent); max-width: 60ch; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 22px 0 0; }
.lp-chips li { padding: 6px 12px; font-size: 12.5px; border: 1px solid var(--lp-line); border-radius: 999px; color: var(--lp-muted); background: color-mix(in srgb, var(--lp-card) 70%, transparent); }
.lp-outcome { margin: 26px 0 0; padding: 14px 18px; border-left: 3px solid var(--lp-accent); background: var(--lp-soft); border-radius: 0 14px 14px 0; font-size: 15px; line-height: 1.6; max-width: 60ch; }
.lp-outcome strong { color: var(--lp-accent); }
.lp-hero-art { min-height: 260px; display: grid; place-items: center; }

/* Układ: spis treści + treść */
.lp-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.lp-toc { position: sticky; top: 92px; font-size: 14px; }
.lp-toc-title { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-muted); font-weight: 700; }
.lp-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--lp-line); }
.lp-toc a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--lp-muted); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s; }
.lp-toc a span { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7; min-width: 20px; flex-shrink: 0; white-space: nowrap; }
.lp-toc a:hover { color: var(--lp-ink); }
.lp-toc a.is-active { color: var(--lp-ink); border-left-color: var(--lp-accent); font-weight: 600; }
.lp-flow { min-width: 0; display: grid; gap: clamp(44px, 6vw, 76px); max-width: 860px; }
.lp-section { scroll-margin-top: 96px; min-width: 0; }
.lp-section h2 { margin: 0 0 18px; font-size: clamp(25px, 3vw, 36px); line-height: 1.15; letter-spacing: -.028em; font-weight: 750; text-wrap: balance; }
.lp-section h3 { font-size: 17px; margin: 0 0 8px; }
.lp-prose { max-width: 68ch; }
.lp-prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.78; color: color-mix(in srgb, var(--lp-ink) 88%, transparent); }
.lp-prose strong { color: var(--lp-ink); }
.lp-inner { margin-top: 22px; }
.lp-takeaway { margin: 18px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--lp-soft); font-size: 15px; line-height: 1.65; }

/* Pojawianie się sekcji (tylko gdy JS działa i nie ma ograniczenia ruchu) */
@media (prefers-reduced-motion: no-preference) {
    .lp-js [data-lp-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
    .lp-js [data-lp-reveal].is-in { opacity: 1; transform: none; }
}

/* Kafle pojęć */
.lp-concepts { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.lp-concept { --tone: var(--lp-accent); padding: 22px; border-radius: var(--lp-radius); background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 16%, var(--lp-card)), var(--lp-card) 70%); border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--lp-line)); position: relative; overflow: hidden; }
.lp-concept[data-tone="a"] { --tone: #5eb0ff; } .lp-concept[data-tone="b"] { --tone: #a592ff; } .lp-concept[data-tone="c"] { --tone: #f2b45f; } .lp-concept[data-tone="d"] { --tone: #5fd3a0; } .lp-concept[data-tone="e"] { --tone: #ff8fb1; }
.lp-concept h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.01em; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.lp-concept h3 small { font-size: 13px; font-weight: 500; color: var(--tone); }
.lp-concept p { margin: 0; font-size: 15.5px; line-height: 1.7; color: color-mix(in srgb, var(--lp-ink) 84%, transparent); }
.lp-concept .lp-concept-example { margin-top: 12px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--tone) 40%, transparent); font-size: 14.5px; }
.lp-concept-example span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tone); font-weight: 700; margin-right: 6px; }

/* Tabela */
.lp-table { margin: 22px 0 0; border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden; background: var(--lp-card); }
.lp-table-scroll { overflow-x: auto; }
.lp-table table, .ql table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.lp-table th, .lp-table td, .ql th, .ql td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--lp-line); white-space: nowrap; }
.lp-table th, .ql th { font-size: 12px; text-transform: none; letter-spacing: .02em; color: var(--lp-muted); font-weight: 600; background: color-mix(in srgb, var(--lp-card-2) 70%, transparent); font-family: ui-monospace, Menlo, monospace; }
.lp-table th small { display: block; font-size: 10.5px; opacity: .7; font-weight: 400; }
.lp-table tr:last-child td, .ql tr:last-child td { border-bottom: 0; }
.lp-table td:not(:first-child) { white-space: normal; }
.lp-table figcaption { padding: 11px 16px; font-size: 13px; color: var(--lp-muted); border-top: 1px solid var(--lp-line); }

/* Okno z kodem */
.lp-code { margin: 22px 0 0; border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden; background: #0a0f18; }
.lp-code-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 12.5px; color: #8b97ad; border-bottom: 1px solid #1c2636; font-family: ui-monospace, Menlo, monospace; }
.lp-dots { display: inline-flex; gap: 6px; } .lp-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a364b; }
.lp-code-lang { margin-left: auto; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--lp-accent); }
.lp-code pre, .ql-sql, .lp-mistake pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.75; color: #dbe5f5; tab-size: 4; }
.lp-code pre code, .lp-mistake pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; }
.lp-code-output { border-top: 1px solid #1c2636; background: #0d1522; }
.lp-code-output span { display: block; padding: 8px 20px 0; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #6f7d95; }
.lp-code-output pre { color: #a9d9c1; padding-top: 6px; }
.tk-k { color: #c3a6ff; font-weight: 600; } .tk-s { color: #8fdca8; } .tk-n { color: #f2b980; } .tk-c { color: #6c7b94; font-style: italic; } .tk-f { color: #7ec3ff; }
.lp-notes { list-style: none; counter-reset: note; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.lp-notes li { counter-increment: note; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 15.5px; line-height: 1.65; color: color-mix(in srgb, var(--lp-ink) 86%, transparent); }
.lp-notes li::before { content: counter(note); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lp-soft); color: var(--lp-accent); font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.lp-notes li strong { display: inline; }

/* Ramki informacyjne */
.lp-callout { --kc: var(--lp-accent); padding: 22px 24px; border-radius: var(--lp-radius); border: 1px solid color-mix(in srgb, var(--kc) 35%, var(--lp-line)); background: linear-gradient(135deg, color-mix(in srgb, var(--kc) 13%, var(--lp-card)), var(--lp-card) 75%); max-width: 100%; }
.lp-callout[data-kind="trap"] { --kc: var(--lp-warn); } .lp-callout[data-kind="exam"] { --kc: #a592ff; } .lp-callout[data-kind="life"] { --kc: var(--lp-ok); } .lp-callout[data-kind="tip"] { --kc: var(--lp-accent); }
.lp-callout-label { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--kc); }
.lp-callout h3 { margin: 0 0 8px; font-size: 19px; }
.lp-callout .lp-prose p:last-child { margin-bottom: 0; }
.lp-callout .lp-prose p { font-size: 16px; line-height: 1.7; }

/* Anatomia zapytania */
.lp-anatomy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 24px; }
.lp-anatomy-lines { display: grid; gap: 8px; align-content: start; }
.lp-anatomy-lines button { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--lp-line); background: #0a0f18; color: #dbe5f5; text-align: left; cursor: pointer; font: inherit; transition: border-color .2s, transform .2s, background .2s; }
.lp-anatomy-lines button code { background: none; padding: 0; font-size: 15px; white-space: pre-wrap; color: inherit; }
.lp-anatomy-lines button:hover { border-color: color-mix(in srgb, var(--lp-accent) 60%, transparent); }
.lp-anatomy-lines button[aria-selected="true"] { border-color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 14%, #0a0f18); transform: translateX(4px); }
.lp-anat-num { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--lp-accent) 20%, transparent); color: var(--lp-accent); font-size: 12px; font-weight: 700; }
.lp-anatomy-panel { padding: 22px 24px; border-radius: var(--lp-radius); background: var(--lp-card); border: 1px solid var(--lp-line); align-self: stretch; }
.lp-anatomy-panel p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; }
.lp-anat-question { font-size: 20px !important; font-weight: 700; letter-spacing: -.01em; color: var(--lp-accent); }
.lp-anat-effect { padding: 10px 14px; border-radius: 12px; background: var(--lp-soft); font-size: 14.5px !important; margin-bottom: 0 !important; }

/* Typowe błędy */
.lp-mistakes { display: grid; gap: 10px; margin-top: 22px; }
.lp-mistake { border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-card); overflow: hidden; }
.lp-mistake summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 650; font-size: 16.5px; }
.lp-mistake summary::-webkit-details-marker { display: none; }
.lp-mistake-toggle { font-size: 12px; font-weight: 600; color: var(--lp-accent); padding: 4px 12px; border-radius: 999px; background: var(--lp-soft); }
.lp-mistake[open] .lp-mistake-toggle::after { content: ""; }
.lp-mistake[open] .lp-mistake-toggle { background: var(--lp-line); color: var(--lp-muted); }
.lp-mistake-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--lp-line); border-top: 1px solid var(--lp-line); }
.lp-mistake-body > div { background: var(--lp-card); padding: 16px 18px; min-width: 0; }
.lp-mistake-body > div > span { display: inline-block; margin-bottom: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.lp-mistake-wrong > span { color: var(--lp-bad); } .lp-mistake-right > span { color: var(--lp-ok); }
.lp-mistake pre { background: #0a0f18; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.lp-mistake-body p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--lp-ink) 84%, transparent); }

/* Lista kontrolna */
.lp-checklist { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.lp-checklist label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); cursor: pointer; font-size: 15.5px; line-height: 1.6; transition: border-color .2s, background .2s; }
/* Globalne input {width:100%; min-height:44px; padding} z platform.css nie może rozpychać pól wyboru. */
.lp input[type=checkbox], .lp input[type=radio] { min-height: 0; padding: 0; }
.lp :where(input[type=checkbox], input[type=radio]) { width: auto; }
.lp-checklist input { appearance: none; width: 22px; height: 22px; margin: 2px 0 0; min-height: 0; padding: 0; flex: none; border-radius: 7px; border: 2px solid var(--lp-muted); display: grid; place-items: center; cursor: pointer; }
.lp-checklist input:checked { background: var(--lp-ok); border-color: var(--lp-ok); }
.lp-checklist input:checked::after { content: "✓"; color: #08231a; font-size: 14px; font-weight: 800; }
.lp-checklist label:has(input:checked) { border-color: color-mix(in srgb, var(--lp-ok) 50%, var(--lp-line)); background: color-mix(in srgb, var(--lp-ok) 8%, var(--lp-card)); }
.lp-checklist input:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* Podsumowanie */
.lp-recap { padding: clamp(24px, 3vw, 36px); border-radius: 24px; border: 1px solid var(--lp-line); background: radial-gradient(600px 240px at 100% 0, color-mix(in srgb, var(--lp-accent) 16%, transparent), transparent 70%), var(--lp-card); }
.lp-recap ol { margin: 0; padding: 0; list-style: none; counter-reset: rc; display: grid; gap: 12px; }
.lp-recap li { counter-increment: rc; position: relative; display: block; padding-left: 48px; min-height: 30px; font-size: 16.5px; line-height: 1.65; }
.lp-recap li::before { content: counter(rc); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--lp-soft); color: var(--lp-accent); font-weight: 800; font-size: 14px; }

/* Praktyka */
.lp-practice { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--lp-line); border-radius: 24px; background: var(--lp-card); }
.lp-warmups { display: grid; gap: 14px; margin: 20px 0; }
.lp-warmup { padding: 20px 22px; border-radius: 16px; border: 1px solid var(--lp-line); background: var(--lp-card-2); }
.lp-warmup h3 { margin: 8px 0 10px; font-size: 18px; }
.lp-warmup p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.7; color: color-mix(in srgb, var(--lp-ink) 86%, transparent); }
.lp-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--lp-soft); color: var(--lp-accent); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.lp-gateway { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: 20px 22px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--lp-accent) 18%, transparent), color-mix(in srgb, var(--lp-accent-2) 14%, transparent)); border: 1px solid color-mix(in srgb, var(--lp-accent) 35%, var(--lp-line)); }
.lp-gateway h3 { margin: 0 0 4px; } .lp-gateway p { margin: 0; color: var(--lp-muted); font-size: 15px; }
.lp-button, .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 12px; border: 0; background: linear-gradient(120deg, var(--lp-accent), var(--lp-accent-2)); color: #07101c; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .15s, filter .2s, opacity .2s; }
.lp-button:hover, .lp-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lp-btn.ghost { background: transparent; color: var(--lp-ink); border: 1px solid var(--lp-line); font-weight: 600; }
.lp-btn.ghost:hover { border-color: var(--lp-accent); }
.lp-btn[disabled] { opacity: .35; cursor: default; transform: none; filter: none; }
.lp-sources { margin-top: 10px; color: var(--lp-muted); font-size: 14px; }
.lp-sources summary { cursor: pointer; } .lp-sources a { color: var(--lp-accent); }
.lp :focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* ===== Scena z interakcją ===== */
.lp-stage { padding: clamp(20px, 3vw, 34px); border-radius: 26px; border: 1px solid color-mix(in srgb, var(--lp-accent) 28%, var(--lp-line)); background: radial-gradient(700px 300px at 0 0, color-mix(in srgb, var(--lp-accent) 10%, transparent), transparent 70%), var(--lp-card-2); margin-inline: calc(-1 * clamp(0px, 1.5vw, 18px)); }
.lp-widget { margin-top: 22px; }
.lp-noscript { color: var(--lp-muted); font-size: 14px; }
.lp-widget.is-ready .lp-noscript { display: none; }
.lp-widget fieldset { border: 1px solid var(--lp-line); border-radius: 14px; padding: 14px 16px 16px; margin: 0; min-width: 0; background: color-mix(in srgb, var(--lp-card) 60%, transparent); }
.lp-widget legend { padding: 0 8px; font-size: 13.5px; color: var(--lp-muted); }
.lp-widget select, .lp-widget input[type=text], .lp-widget input[type=number] { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--lp-line); background: #0a0f18; color: var(--lp-ink); min-width: 0; }
.lp-widget input[type=range] { accent-color: var(--lp-accent); width: 100%; }
.lp-widget h3 { margin: 0 0 8px; font-size: 14px; color: var(--lp-muted); font-weight: 600; }

/* Query lab */
.ql { display: grid; gap: 16px; }
.ql-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ql-controls fieldset:first-child { grid-column: 1 / -1; }
.ql-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ql-chip { position: relative; cursor: pointer; }
.ql-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ql-chip span { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--lp-line); font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--lp-muted); transition: .2s; }
.ql-chip input:checked + span { background: var(--lp-soft); border-color: var(--lp-accent); color: var(--lp-ink); }
.ql-chip input:focus-visible + span { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.ql-chip input:disabled + span { opacity: .55; }
.ql-cond { display: grid; grid-template-columns: auto minmax(80px, 1fr) 64px; gap: 12px; align-items: center; margin-top: 8px; }
.ql-switch { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; cursor: pointer; }
.ql-switch input { accent-color: var(--lp-accent); width: 17px; height: 17px; }
.ql-cond output { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--lp-accent); font-weight: 600; text-align: right; }
.ql-join { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 8px 12px; background: var(--lp-soft); border-radius: 10px; font-size: 13.5px; }
.ql-join label { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .ql-join input { accent-color: var(--lp-accent); }
.ql-row2 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ql-row2 label { display: grid; gap: 6px; font-size: 13px; color: var(--lp-muted); } .ql-row2 code { justify-self: start; }
.ql-output { display: grid; gap: 12px; }
.ql-sql { border-radius: 14px; background: #0a0f18; border: 1px solid #1c2636; min-height: 4.2em; white-space: pre-wrap; }
.ql-error { color: var(--lp-bad); font-style: italic; }
.ql-warning { margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.55; background: color-mix(in srgb, var(--lp-warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lp-warn) 40%, transparent); }
.ql-tables { display: grid; gap: 16px; }
.ql table { border: 1px solid var(--lp-line); border-radius: 12px; overflow: hidden; display: table; }
.ql .lp-table-scroll { border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-card); }
.ql .lp-table-scroll table { border: 0; }
.ql-source td, .ql-result td { font-size: 14px; }
.ql-source tr { transition: opacity .35s, background .35s; }
.ql-source tr.is-dropped { opacity: .55; }
.ql-source tr.is-kept { background: color-mix(in srgb, var(--lp-ok) 8%, transparent); }
.ql-fate { font-size: 13px; } .ql-fate.is-out { color: var(--lp-bad); } .ql-fate.is-cut { color: var(--lp-warn); } .ql-fate.is-in { color: var(--lp-ok); font-weight: 600; }
.ql-source td:last-child { white-space: normal; min-width: 210px; }
.ql-empty { color: var(--lp-muted); font-style: italic; white-space: normal !important; }
.ql-count { color: var(--lp-accent); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .ql-result tr { animation: lp-row-in .4s ease both; animation-delay: calc(var(--i, 0) * 60ms); } }
@keyframes lp-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ql-challenge { padding: 16px 18px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--lp-accent) 45%, var(--lp-line)); background: var(--lp-soft); }
.ql-challenge-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--lp-accent); }
.ql-challenge-tabs { display: flex; gap: 8px; }
.ql-challenge-tabs button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lp-line); background: transparent; color: var(--lp-ink); font: inherit; font-weight: 700; cursor: pointer; }
.ql-challenge-tabs button[aria-pressed="true"] { background: var(--lp-accent); color: #07101c; border-color: var(--lp-accent); }
.ql-challenge-text { margin: 12px 0 6px; font-size: 16px; line-height: 1.6; font-weight: 550; }
.ql-challenge-status { margin: 0; font-size: 14.5px; color: var(--lp-muted); }
.ql-challenge-status[data-state="ok"] { color: var(--lp-ok); font-weight: 650; }

/* Like lab */
.ll { display: grid; gap: 14px; }
.ll-input { display: grid; gap: 6px; font-size: 13.5px; color: var(--lp-muted); }
.ll-input input { font-family: ui-monospace, Menlo, monospace; font-size: 17px; }
.ll-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.ll-presets button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--lp-line); background: transparent; color: var(--lp-ink); cursor: pointer; font: inherit; }
.ll-presets button:hover { border-color: var(--lp-accent); }
.ll-explain { margin: 0; font-size: 15.5px; line-height: 1.6; padding: 10px 14px; border-radius: 12px; background: var(--lp-soft); }
.ll-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ll-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lp-line); font-family: ui-monospace, Menlo, monospace; font-size: 14px; transition: .25s; }
.ll-list li.is-hit { border-color: color-mix(in srgb, var(--lp-ok) 55%, transparent); background: color-mix(in srgb, var(--lp-ok) 9%, transparent); }
.ll-list li.is-miss { opacity: .5; }
.ll-badge { font-weight: 800; } .is-hit .ll-badge { color: var(--lp-ok); } .is-miss .ll-badge { color: var(--lp-bad); }
.ll-list mark { background: color-mix(in srgb, var(--lp-accent) 40%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }

/* Von Neumann */
.vn { display: grid; gap: 16px; }
.vn-inputs { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.vn-inputs label { display: grid; gap: 6px; font-size: 13px; color: var(--lp-muted); } .vn-inputs input[type=number] { width: 110px; }
.vn-program { margin: 0 0 0 auto; font-size: 14px; color: var(--lp-muted); }
.vn-board { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; padding: 22px; border-radius: 20px; border: 1px solid var(--lp-line); background: repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--lp-line) 40%, transparent) 23px 24px), #0a0f18; }
.vn-node { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); transition: border-color .3s, box-shadow .3s, transform .3s; }
.vn-node.is-active { border-color: var(--lp-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-accent) 18%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--lp-accent) 50%, transparent); }
.vn-node h4, .vn-node h5, .vn-cpu > h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-accent); }
.vn-node p { margin: 0; font-size: 14px; line-height: 1.55; font-family: ui-monospace, Menlo, monospace; }
.vn-ram ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vn-cell { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--lp-card-2) 80%, transparent); font-size: 12px; color: var(--lp-muted); }
.vn-cell b { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; color: var(--lp-ink); font-weight: 600; }
.vn-result b { color: var(--lp-ok); }
.vn-cpu { padding: 16px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--lp-accent) 45%, var(--lp-line)); display: grid; gap: 10px; align-content: start; }
.vn-packet { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--lp-accent) 45%, var(--lp-accent-2)); box-shadow: 0 0 22px var(--lp-accent); pointer-events: none; z-index: 3; }
.vn-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vn-dots { display: flex; gap: 8px; } .vn-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--lp-line); transition: .3s; } .vn-dots i.is-done { background: var(--lp-accent); transform: scale(1.2); }
.vn-caption { padding: 14px 18px; border-radius: 14px; background: var(--lp-soft); min-height: 5.4em; }
.vn-caption strong { display: block; margin-bottom: 4px; font-size: 16px; } .vn-caption p { margin: 0; font-size: 15.5px; line-height: 1.65; }

/* Bity */
.bl { display: grid; gap: 16px; }
.bl-switches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(4px, 1vw, 10px); }
.bl-bit { display: grid; gap: 4px; justify-items: center; padding: 14px 0 10px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-muted); cursor: pointer; font: inherit; transition: transform .15s, background .2s, border-color .2s; }
.bl-bit b { font-family: ui-monospace, Menlo, monospace; font-size: clamp(22px, 4vw, 34px); line-height: 1; }
.bl-bit small { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.bl-bit[aria-pressed="true"] { background: linear-gradient(160deg, var(--lp-accent), var(--lp-accent-2)); color: #07101c; border-color: transparent; transform: translateY(-3px); box-shadow: 0 12px 24px -12px var(--lp-accent); }
.bl-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bl-readout div { padding: 12px 14px; border-radius: 14px; background: var(--lp-card); border: 1px solid var(--lp-line); display: grid; gap: 4px; }
.bl-readout span { font-size: 11.5px; color: var(--lp-muted); } .bl-readout b { font-family: ui-monospace, Menlo, monospace; font-size: 19px; word-break: break-word; }
.bl-explain p { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-size: 15px; line-height: 1.65; }
.bl-presets { display: flex; flex-wrap: wrap; gap: 8px; } .bl-presets button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--lp-line); background: transparent; color: var(--lp-ink); cursor: pointer; font: inherit; } .bl-presets button:hover { border-color: var(--lp-accent); }

/* Skala czasu */
.ls { display: grid; gap: 14px; } .ls > .lp-btn { justify-self: start; }
.ls-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ls-row { width: 100%; display: grid; grid-template-columns: minmax(120px, 190px) 1fr 110px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-ink); font: inherit; cursor: pointer; text-align: left; }
.ls-row[aria-pressed="true"] { border-color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 9%, var(--lp-card)); }
.ls-name { display: grid; font-weight: 650; font-size: 15px; } .ls-name small { font-weight: 400; font-size: 12px; color: var(--lp-muted); }
.ls-bar { height: 10px; border-radius: 99px; background: var(--lp-line); overflow: hidden; } .ls-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lp-accent), var(--lp-accent-2)); transition: width .6s; }
.ls-time { text-align: right; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.ls-detail { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--lp-soft); font-size: 15.5px; line-height: 1.65; }

/* RAM i dysk */
.rs { display: grid; gap: 16px; }
.rs-controls { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: end; } .rs-controls label { display: grid; gap: 6px; font-size: 13px; color: var(--lp-muted); } .rs-controls output { color: var(--lp-accent); font-weight: 700; }
.rs-bars { display: grid; gap: 10px; } .rs-bar { display: grid; grid-template-columns: 150px 1fr 190px; gap: 12px; align-items: center; font-size: 13.5px; } .rs-bar span { color: var(--lp-muted); } .rs-bar b { font-variant-numeric: tabular-nums; font-size: 13px; }
.rs-track { height: 18px; border-radius: 99px; background: var(--lp-line); overflow: hidden; } .rs-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--lp-accent), var(--lp-accent-2)); transition: width .45s; } .rs-track i.is-disk { background: linear-gradient(90deg, var(--lp-warn), var(--lp-bad)); }
.rs-verdict { margin: 0; padding: 14px 18px; border-radius: 14px; font-size: 16px; line-height: 1.6; border: 1px solid var(--lp-line); font-weight: 550; }
.rs-verdict[data-level="ok"] { background: color-mix(in srgb, var(--lp-ok) 10%, transparent); border-color: color-mix(in srgb, var(--lp-ok) 45%, transparent); }
.rs-verdict[data-level="warn"] { background: color-mix(in srgb, var(--lp-warn) 11%, transparent); border-color: color-mix(in srgb, var(--lp-warn) 45%, transparent); }
.rs-verdict[data-level="bad"] { background: color-mix(in srgb, var(--lp-bad) 11%, transparent); border-color: color-mix(in srgb, var(--lp-bad) 45%, transparent); }
.rs-actions { display: flex; flex-wrap: wrap; gap: 10px; } .rs-note { margin: 0; min-height: 3em; font-size: 15px; line-height: 1.6; color: var(--lp-muted); }

/* Porównanie procesorów */
.cc { display: grid; gap: 14px; } .cc-slider { display: grid; gap: 8px; font-size: 15px; } .cc-slider output { color: var(--lp-accent); font-weight: 700; }
.cc-hint { margin: 0; font-size: 14.5px; color: var(--lp-muted); }
.cc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cc-card { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--lp-line); background: var(--lp-card); display: grid; gap: 8px; transition: border-color .3s, box-shadow .3s; } .cc-card h4 { margin: 0; font-size: 18px; } .cc-card p { margin: 0; color: var(--lp-muted); font-size: 14.5px; }
.cc-card.is-winner { border-color: var(--lp-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-ok) 14%, transparent); }
.cc-bar { height: 12px; border-radius: 99px; background: var(--lp-line); overflow: hidden; } .cc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lp-accent), var(--lp-accent-2)); transition: width .45s; }
.cc-card b { font-variant-numeric: tabular-nums; }
.cc-verdict { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-weight: 600; font-size: 15.5px; } .cc-model { margin: 0; font-size: 13px; color: var(--lp-muted); line-height: 1.55; }

/* Ilustracje nagłówka */
.art-sql { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.art-query { padding: 14px 16px; border-radius: 14px; background: #0a0f18; border: 1px solid #1c2636; font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.7; color: #dbe5f5; box-shadow: 0 24px 40px -24px #000; }
.art-table { border-radius: 14px; overflow: hidden; border: 1px solid var(--lp-line); background: var(--lp-card); }
.art-head, .art-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 9px 14px; font-size: 12.5px; font-family: ui-monospace, Menlo, monospace; }
.art-head { background: color-mix(in srgb, var(--lp-card-2) 75%, transparent); color: var(--lp-muted); }
.art-row { border-top: 1px solid var(--lp-line); }
.art-row.is-out span:first-child { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
    .art-row.is-out { animation: art-out 6s ease-in-out infinite; animation-delay: calc(var(--i) * 140ms); }
    .art-row.is-kept { animation: art-keep 6s ease-in-out infinite; animation-delay: calc(var(--i) * 140ms); }
    .art-query, .art-bus { animation: art-float 7s ease-in-out infinite; }
    .art-lines path { stroke-dasharray: 6 8; animation: art-flow 1.6s linear infinite; }
    .art-cpu { animation: art-pulse 2.4s ease-in-out infinite; }
}
@keyframes art-out { 0%, 30% { opacity: 1; background: transparent; } 50%, 85% { opacity: .22; background: color-mix(in srgb, var(--lp-bad) 12%, transparent); } 100% { opacity: 1; background: transparent; } }
@keyframes art-keep { 0%, 30% { background: transparent; } 50%, 85% { background: color-mix(in srgb, var(--lp-ok) 14%, transparent); } 100% { background: transparent; } }
@keyframes art-float { 50% { transform: translateY(-6px); } }
@keyframes art-flow { to { stroke-dashoffset: -28; } }
@keyframes art-pulse { 50% { fill: color-mix(in srgb, var(--lp-accent) 28%, #0a0f18); } }
.art-bus { width: 100%; max-width: 400px; height: auto; }
.art-nodes rect { fill: #0a0f18; stroke: color-mix(in srgb, var(--lp-accent) 55%, transparent); stroke-width: 1.5; }
.art-nodes text { fill: #dbe5f5; font-weight: 600; letter-spacing: .06em; }

/* Telefon i tablet */
@media (max-width: 980px) {
    .lp-layout { grid-template-columns: 1fr; }
    .lp-toc { position: static; }
    .lp-toc ol { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
    .lp-toc a { padding: 6px 12px; margin: 0; border: 1px solid var(--lp-line); border-radius: 999px; font-size: 13px; }
    .lp-toc a.is-active { border-color: var(--lp-accent); }
    .lp-hero { grid-template-columns: 1fr; }
    .lp-hero-art { min-height: 0; order: -1; }
    .lp-flow { max-width: none; }
}
@media (max-width: 720px) {
    .lp-concepts, .lp-anatomy, .lp-mistake-body, .ql-controls, .ql-row2, .cc-cards, .rs-controls { grid-template-columns: 1fr; }
    .lp-stage { margin-inline: 0; padding: 18px 14px; border-radius: 20px; }
    .ls-row { grid-template-columns: 1fr 90px; } .ls-bar { grid-column: 1 / -1; order: 3; }
    .rs-bar { grid-template-columns: 1fr; gap: 4px; }
    .vn-board { grid-template-columns: 1fr; }
    .vn-program { margin-left: 0; }
    .ql-cond { grid-template-columns: 1fr 64px; } .ql-cond .ql-switch { grid-column: 1 / -1; }
}

/* Poprawki układu: elementy siatki mogą się zwężać, nic nie wypycha strony */
.lp-widget > *, .ql-controls > *, .ql-row2 > *, .ql-output > *, .vn > *, .bl > *, .rs > *, .cc > *, .ll > * { min-width: 0; }
.lp-widget select, .lp-widget input[type=text] { width: 100%; max-width: 100%; }
.lp-widget input[type=number] { max-width: 100%; }
.lp-layout, .lp-flow { overflow-wrap: anywhere; }
.lp { overflow-x: clip; }

.lp-mistake[open] .lp-mistake-toggle { font-size: 0; }
.lp-mistake[open] .lp-mistake-toggle::after { content: "Zwiń"; font-size: 12px; }
.lp-kicker:empty { display: none; }

/* ===== Interakcje do lekcji o bazach danych ===== */
.cl-progress { margin: 0 0 6px; font-size: 13px; color: var(--lp-muted); }
.cl-prompt { margin: 0 0 14px; font-size: 18px; line-height: 1.6; font-weight: 550; }
.cl-options { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-options button { flex: 1 1 140px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-ink); font: inherit; font-weight: 650; cursor: pointer; transition: .2s; }
.cl-options button:hover:not([disabled]) { border-color: var(--lp-accent); transform: translateY(-2px); }
.cl-options button.is-right { border-color: var(--lp-ok); background: color-mix(in srgb, var(--lp-ok) 14%, var(--lp-card)); }
.cl-options button.is-wrong { border-color: var(--lp-bad); background: color-mix(in srgb, var(--lp-bad) 12%, var(--lp-card)); }
.cl-options button[disabled] { cursor: default; }
.cl-feedback { margin-top: 14px; padding: 14px 18px; border-radius: 14px; font-size: 15.5px; line-height: 1.65; border: 1px solid var(--lp-line); background: var(--lp-soft); display: grid; gap: 10px; }
.cl-feedback[data-ok="true"] { border-color: color-mix(in srgb, var(--lp-ok) 50%, transparent); background: color-mix(in srgb, var(--lp-ok) 9%, transparent); }
.cl-feedback[data-ok="false"] { border-color: color-mix(in srgb, var(--lp-bad) 45%, transparent); background: color-mix(in srgb, var(--lp-bad) 8%, transparent); }
.cl-feedback .lp-btn { justify-self: start; }
.cl-feedback pre { margin: 0; padding: 12px 14px; border-radius: 12px; background: #0a0f18; font-size: 13.5px; overflow-x: auto; }
.cl-structure, .nl-tables { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cl-table { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lp-line); background: #0a0f18; font-family: ui-monospace, Menlo, monospace; font-size: 13px; min-width: 140px; }
.cl-table b { display: block; margin-bottom: 4px; color: var(--lp-accent); }
.cl-table ul { list-style: none; margin: 0; padding: 0; line-height: 1.7; }
.cl-key { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.cl-key[data-k="PK"] { background: color-mix(in srgb, var(--lp-warn) 30%, transparent); color: var(--lp-warn); }
.cl-key[data-k="FK"] { background: color-mix(in srgb, var(--lp-accent) 28%, transparent); color: var(--lp-accent); }
.cl-arrow { color: var(--lp-muted); font-size: 20px; }
.cl-summary { text-align: center; padding: 20px; display: grid; gap: 10px; justify-items: center; }
.cl-score { margin: 0; font-size: 44px; font-weight: 800; color: var(--lp-accent); }
.kl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kl-table th, .kl-table td { padding: 10px 14px; border-bottom: 1px solid var(--lp-line); text-align: left; white-space: nowrap; }
.kl-pick { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.kl-pick input { accent-color: var(--lp-accent); width: 17px; height: 17px; }
.kl-table tr.is-dup td { background: color-mix(in srgb, var(--lp-bad) 14%, transparent); }
.kl-table td.is-null { background: color-mix(in srgb, var(--lp-warn) 22%, transparent); }
.kl-table td i { color: var(--lp-muted); }
.kl-verdict { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-size: 15.5px; line-height: 1.6; }
.kl-verdict[data-ok="true"] { background: color-mix(in srgb, var(--lp-ok) 12%, transparent); font-weight: 600; }
.kl-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ol-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ol-bank { display: grid; gap: 8px; }
.ol-bank button { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-ink); font: inherit; cursor: pointer; line-height: 1.5; }
.ol-bank button:hover { border-color: var(--lp-accent); }
.ol-console { margin: 0; min-height: 200px; padding: 14px 16px; border-radius: 14px; background: #0a0f18; border: 1px solid #1c2636; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-x: auto; font-family: ui-monospace, Menlo, monospace; color: #dbe5f5; }
.ol-hint, .ol-empty { color: var(--lp-muted); }
.ol-error { margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--lp-bad) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lp-bad) 45%, transparent); font-size: 15px; line-height: 1.6; }
.ol-done { margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--lp-ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lp-ok) 45%, transparent); font-weight: 600; }
.ol .lp-btn { margin-top: 12px; }
.jl { display: grid; gap: 14px; }
.jl-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jl-controls fieldset { display: grid; gap: 8px; }
.jl-controls label { display: flex; gap: 8px; align-items: center; cursor: pointer; font-size: 14.5px; flex-wrap: wrap; }
.jl-controls input { accent-color: var(--lp-accent); }
.jl-missing { grid-column: 1 / -1; padding: 10px 14px; border-radius: 12px; background: var(--lp-soft); }
.jl-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jl-small { max-height: 220px; overflow: auto; border: 1px solid var(--lp-line); border-radius: 12px; }
.jl table, .nl table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jl th, .jl td, .nl th, .nl td { padding: 7px 12px; border-bottom: 1px solid var(--lp-line); text-align: left; white-space: nowrap; }
.jl th, .nl th { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--lp-muted); background: color-mix(in srgb, var(--lp-card-2) 70%, transparent); position: sticky; top: 0; }
.jl-count { margin: 0; font-size: 16px; }
.jl-result tr.is-miss td { background: color-mix(in srgb, var(--lp-warn) 14%, transparent); }
.jl-result td i { color: var(--lp-warn); }
.jl-note { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-size: 15px; line-height: 1.65; }
.nl { display: grid; gap: 14px; }
.nl h3 { color: var(--lp-ink); font-size: 16px; }
.nl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-msg { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-size: 15px; line-height: 1.6; }
.nl-msg[data-state="bad"] { background: color-mix(in srgb, var(--lp-bad) 12%, transparent); } .nl-msg[data-state="ok"] { background: color-mix(in srgb, var(--lp-ok) 10%, transparent); }
.nl-flat td.is-changed { background: color-mix(in srgb, var(--lp-warn) 24%, transparent); font-weight: 700; } .nl-flat td.is-focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-accent) 60%, transparent); }
.nl-assign { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.nl-assign label { display: grid; gap: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--lp-muted); }
.nl-result { font-size: 15.5px; line-height: 1.7; } .nl-result[data-ok="false"] { color: var(--lp-ink); } .nl-keys { color: var(--lp-muted); border-top: 1px dashed var(--lp-line); margin-top: 4px; padding-top: 4px; }
@media (max-width: 720px) { .ol-cols, .jl-controls, .jl-tables { grid-template-columns: 1fr; } }

.lp-files { margin: 0 0 18px; padding: 18px 20px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--lp-accent) 45%, var(--lp-line)); background: var(--lp-soft); }
.lp-files h3 { margin: 0 0 8px; }
.lp-files ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-files a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-ink); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.lp-files a:hover { border-color: var(--lp-accent); }
.lp-files p { margin: 0; font-size: 13.5px; color: var(--lp-muted); }

.lp-widget input[type=radio], .lp-widget input[type=checkbox] { width: 18px; height: 18px; min-width: 18px; flex: none; padding: 0; margin: 0; accent-color: var(--lp-accent); }
.jl-controls label { gap: 10px; }

/* ===== sandbox, group, subquery ===== */
.sb { display: grid; gap: 14px; }
.sb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.sb-cmds { display: grid; gap: 8px; }
.sb-cmds button { display: grid; gap: 4px; text-align: left; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-ink); font: inherit; cursor: pointer; }
.sb-cmds button:hover { border-color: var(--lp-accent); }
.sb-cmds code { background: transparent; padding: 0; font-size: 12.5px; white-space: pre-wrap; line-height: 1.55; }
.sb-cmds small { color: var(--lp-muted); font-size: 12.5px; line-height: 1.45; }
.sb-tag { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--lp-accent); }
.sb-tables { display: grid; gap: 12px; }
.sb-table b { font-family: ui-monospace, Menlo, monospace; color: var(--lp-accent); } .sb-table small { color: var(--lp-muted); }
.sb table, .gl table, .sq table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb th, .sb td { padding: 6px 10px; border-bottom: 1px solid var(--lp-line); text-align: left; white-space: nowrap; }
.sb th { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--lp-muted); background: color-mix(in srgb, var(--lp-card-2) 70%, transparent); }
.sb .lp-table-scroll { border: 1px solid var(--lp-line); border-radius: 10px; background: var(--lp-card); max-height: 230px; overflow: auto; }
.sb tr.is-new td { background: color-mix(in srgb, var(--lp-ok) 18%, transparent); }
.sb td i { color: var(--lp-warn); }
.sb-log { display: grid; gap: 8px; max-height: 340px; overflow: auto; }
.sb-entry { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lp-line); background: #0a0f18; }
.sb-entry code { background: transparent; padding: 0; font-size: 12.5px; white-space: pre-wrap; }
.sb-entry p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.sb-entry[data-ok="true"] p { color: var(--lp-ok); } .sb-entry[data-ok="false"] { border-color: color-mix(in srgb, var(--lp-bad) 50%, transparent); } .sb-entry[data-ok="false"] p { color: var(--lp-bad); }
.gl { display: grid; gap: 14px; }
.gl-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.gl-controls label { display: grid; gap: 6px; font-size: 13px; color: var(--lp-muted); }
.gl-check { display: flex !important; align-items: center; gap: 8px; color: var(--lp-ink) !important; font-size: 14px !important; }
.gl-cond { display: grid; grid-template-columns: auto minmax(60px, 1fr) 70px; gap: 10px; align-items: center; } .gl-cond output { color: var(--lp-accent); font-weight: 700; font-size: 13.5px; text-align: right; }
.gl-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.gl-rows, .gl-groups { display: grid; gap: 6px; }
.gl-row, .gl-group { --tone: var(--lp-accent); display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--lp-line)); background: color-mix(in srgb, var(--tone) 9%, var(--lp-card)); font-size: 13.5px; transition: opacity .3s; }
.gl-row[data-tone="a"], .gl-group[data-tone="a"] { --tone: #5eb0ff; } .gl-row[data-tone="b"], .gl-group[data-tone="b"] { --tone: #a592ff; } .gl-row[data-tone="c"], .gl-group[data-tone="c"] { --tone: #f2b45f; } .gl-row[data-tone="d"], .gl-group[data-tone="d"] { --tone: #5fd3a0; }
.gl-row i { font-style: normal; color: var(--lp-muted); font-size: 12px; } .gl-row b, .gl-group b { font-variant-numeric: tabular-nums; }
.gl-group { grid-template-columns: 1fr auto; } .gl-group b { font-size: 18px; } .gl-group small { color: var(--lp-muted); }
.gl-row.is-out, .gl-group.is-out { opacity: .4; } .gl-row em, .gl-group em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--lp-bad); }
.gl-final { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-size: 15px; line-height: 1.6; }
.sq { display: grid; gap: 14px; }
.sq-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-tabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--lp-line); background: transparent; color: var(--lp-ink); font: inherit; cursor: pointer; }
.sq-tabs button[aria-selected="true"] { background: var(--lp-accent); color: #07101c; border-color: var(--lp-accent); font-weight: 700; }
.sq-controls { display: flex; flex-wrap: wrap; gap: 12px; } .sq-controls label { display: grid; gap: 4px; font-size: 13px; color: var(--lp-muted); min-width: 160px; }
.sq-steps { display: grid; gap: 10px; } .sq-step { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); }
.sq-step > span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-accent); font-weight: 700; } .sq-step p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; }
.sq-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; }
.sq-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--lp-line); font-size: 13.5px; }
.sq-list li.is-hit { border-color: color-mix(in srgb, var(--lp-ok) 55%, transparent); background: color-mix(in srgb, var(--lp-ok) 10%, transparent); } .sq-list li.is-miss { opacity: .45; }
@media (max-width: 720px) { .sb-grid, .gl-controls, .gl-steps { grid-template-columns: 1fr; } }

@media (max-width: 1240px) {
    .sb-grid { grid-template-columns: 1fr; }
    .sb-cmds { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .sb-cmds h3 { grid-column: 1 / -1; }
    .gl-steps { grid-template-columns: 1fr; }
}

/* ===== tag, flow, grant, view ===== */
.cl-code { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #0a0f18; border: 1px solid #1c2636; font-size: 13.5px; line-height: 1.65; overflow-x: auto; font-family: ui-monospace, Menlo, monospace; color: #dbe5f5; }
.tg { display: grid; gap: 12px; }
.tg-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-tools button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-ink); font: inherit; font-weight: 600; cursor: pointer; }
.tg-tools button[aria-checked="true"] { background: var(--lp-accent); color: #07101c; border-color: transparent; }
.tg-hint { margin: 0; font-size: 13.5px; color: var(--lp-muted); }
.tg-text { margin: 0; font-size: 17px; line-height: 2.5; padding: 16px 18px; border-radius: 16px; background: var(--lp-card); border: 1px solid var(--lp-line); }
.tg-seg { --tone: var(--lp-muted); display: inline-flex; flex-direction: column; align-items: flex-start; vertical-align: middle; margin: 0 1px; padding: 1px 9px 2px; border-radius: 9px; border: 1px dashed var(--lp-line); background: transparent; color: inherit; font: inherit; line-height: 1.5; cursor: pointer; }
.tg-seg small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tone); }
.tg-seg[data-tone="a"] { --tone: #5eb0ff; } .tg-seg[data-tone="b"] { --tone: #a592ff; } .tg-seg[data-tone="c"] { --tone: #f2b45f; } .tg-seg[data-tone="d"] { --tone: #5fd3a0; }
.tg-seg[data-tone] { border: 1px solid var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
.tg-seg[data-ok="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lp-ok) 60%, transparent); } .tg-seg[data-ok="false"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lp-bad) 70%, transparent); }
.tg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tg-result { font-size: 15.5px; line-height: 1.7; } .tg-result[data-ok="true"] { color: var(--lp-ok); }
.fl { display: grid; gap: 14px; }
.fl-board { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; padding: 22px; border-radius: 20px; border: 1px solid var(--lp-line); background: repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--lp-line) 40%, transparent) 23px 24px), #0a0f18; }
.fl-node { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); transition: .3s; }
.fl-node b { color: var(--lp-accent); font-size: 14px; } .fl-node small { color: var(--lp-muted); font-size: 12.5px; line-height: 1.45; }
.fl-node.is-active { border-color: var(--lp-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-accent) 18%, transparent); }
.gr { display: grid; gap: 14px; } .gr-users { display: flex; gap: 8px; flex-wrap: wrap; }
.gr-users button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--lp-line); background: transparent; color: var(--lp-ink); font: inherit; cursor: pointer; }
.gr-users button[aria-selected="true"] { background: var(--lp-accent); color: #07101c; font-weight: 700; border-color: transparent; }
.gr-matrix { overflow-x: auto; border: 1px solid var(--lp-line); border-radius: 14px; background: var(--lp-card); }
.gr-matrix table { width: 100%; border-collapse: collapse; font-size: 14px; } .gr-matrix th, .gr-matrix td { padding: 9px 14px; border-bottom: 1px solid var(--lp-line); text-align: center; } .gr-matrix th:first-child { text-align: left; font-family: ui-monospace, Menlo, monospace; } .gr-matrix thead th { color: var(--lp-muted); font-size: 12.5px; font-family: ui-monospace, Menlo, monospace; }
.gr-cell input { width: 20px; height: 20px; accent-color: var(--lp-accent); }
.gr-tests { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-tests li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lp-line); background: var(--lp-card); }
.gr-tests li[data-ok="true"] { border-color: color-mix(in srgb, var(--lp-ok) 50%, transparent); } .gr-tests li[data-ok="false"] { border-color: color-mix(in srgb, var(--lp-bad) 50%, transparent); }
.gr-tests li[data-ok="true"] .gr-mark { color: var(--lp-ok); } .gr-tests li[data-ok="false"] .gr-mark { color: var(--lp-bad); } .gr-mark { font-weight: 800; }
.gr-tests code { background: transparent; padding: 0; font-size: 13px; display: block; white-space: pre-wrap; } .gr-tests small { color: var(--lp-muted); font-size: 12.5px; }
.gr-score { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-size: 15px; line-height: 1.6; }
.vw { display: grid; gap: 12px; } .vw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vw-msg { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-size: 15px; line-height: 1.6; } .vw-msg[data-state="bad"] { background: color-mix(in srgb, var(--lp-bad) 12%, transparent); }
.vw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .vw-scroll { max-height: 300px; overflow: auto; border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-card); }
.vw table { width: 100%; border-collapse: collapse; font-size: 13px; } .vw th, .vw td { padding: 6px 10px; border-bottom: 1px solid var(--lp-line); text-align: left; white-space: nowrap; } .vw th { position: sticky; top: 0; background: color-mix(in srgb, var(--lp-card-2) 80%, transparent); font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--lp-muted); } .vw tr.is-new td { background: color-mix(in srgb, var(--lp-ok) 18%, transparent); }
@media (max-width: 880px) { .vw-cols { grid-template-columns: 1fr; } }

/* ===== glossary, check ===== */
.gs { display: grid; gap: 12px; } .gs-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gs-search { flex: 1 1 260px; } .gs-search input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--lp-line); background: #0a0f18; color: var(--lp-ink); font: inherit; }
.gs-drill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lp-muted); cursor: pointer; }
.gs-cats { display: flex; flex-wrap: wrap; gap: 8px; } .gs-cats button { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--lp-line); background: transparent; color: var(--lp-ink); font: inherit; font-size: 13.5px; cursor: pointer; text-transform: capitalize; }
.gs-cats button[aria-pressed="true"] { background: var(--lp-accent); color: #07101c; border-color: transparent; font-weight: 700; }
.gs-count { margin: 0; font-size: 13px; color: var(--lp-muted); } .gs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.gs-card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); display: grid; gap: 8px; align-content: start; }
.gs-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .gs-head code { background: transparent; padding: 0; font-weight: 700; font-size: 15px; } .gs-head span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-accent); font-weight: 700; }
.gs-card p { margin: 0; font-size: 14.5px; line-height: 1.55; } .gs-card pre { margin: 0; padding: 8px 10px; border-radius: 9px; background: #0a0f18; font-size: 12.5px; white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; color: #dbe5f5; }
.ck { display: grid; gap: 12px; } .ck-intro { margin: 0; font-size: 15px; color: var(--lp-muted); line-height: 1.6; }
.ck-list { list-style: none; counter-reset: ck; margin: 0; padding: 0; display: grid; gap: 10px; }
.ck-list li { counter-increment: ck; display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-card); }
.ck-text { font-size: 15.5px; line-height: 1.6; } .ck-text::before { content: counter(ck) ". "; color: var(--lp-accent); font-weight: 800; }
.ck-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; } .ck-row label { display: grid; gap: 4px; font-size: 12.5px; color: var(--lp-muted); } .ck-row input { width: 160px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--lp-line); background: #0a0f18; color: var(--lp-ink); font: inherit; }
.ck-mark { font-size: 14px; font-weight: 650; padding-bottom: 8px; } .ck-mark[data-state="ok"] { color: var(--lp-ok); } .ck-mark[data-state="bad"] { color: var(--lp-bad); } .ck-mark[data-state="warn"] { color: var(--lp-warn); }
.ck-score { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lp-soft); font-size: 15px; font-weight: 600; }
.tg-seg[data-tone="e"] { --tone: #ff8fb1; } .tg-seg[data-tone="f"] { --tone: #7fe0e8; } .tg-seg[data-tone="g"] { --tone: #c9d27a; }

/* ===== lista zadań (warsztaty) ===== */
.lp-tasks { list-style: none; counter-reset: task; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-task { counter-increment: task; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 18px; align-items: start; padding: 16px 18px 16px 62px; border-radius: 16px; border: 1px solid var(--lp-line); background: var(--lp-card); position: relative; }
.lp-task::before { content: counter(task); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--lp-soft); color: var(--lp-accent); font-weight: 800; }
.lp-task-body { min-width: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.65; } .lp-task-body small { display: block; margin-top: 6px; color: var(--lp-muted); font-size: 13.5px; line-height: 1.5; }
.lp-task-body:last-child { grid-column: 1 / -1; }
.lp-task-expect { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 2px; justify-items: end; text-align: right; } .lp-task-expect span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); } .lp-task-expect b { color: var(--lp-ok); font-size: 14.5px; white-space: normal; } .lp-task-expect em { font-style: normal; color: var(--lp-muted); font-size: 12.5px; max-width: 24ch; }
@media (max-width: 720px) { .lp-task { grid-template-columns: 1fr; } .lp-task-expect { justify-items: start; text-align: left; } }

/* blok „obraz” */
.lp-figure { margin: 22px 0; display: grid; gap: 10px; justify-items: center; }
.lp-figure img { display: block; max-width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--lp-line); box-shadow: 0 24px 60px -30px rgba(0,0,0,.7); }
.lp-figure[data-width="medium"] img { max-width: 70%; }
.lp-figure[data-width="small"] img { max-width: 42%; }
.lp-figure figcaption { color: var(--lp-muted, #8fa0bd); font-size: 14px; text-align: center; }
@media (max-width: 700px) { .lp-figure[data-width] img { max-width: 100%; } }