/* ════════════════════════════════════════════════════════════════
   ЛЕКЦИЈЕ / МАТЕРИЈАЛИ ЗА УЧЕНИКЕ
   Учитава се преко $extraCss у странице лекције (app/templates/header.php).
   Све класе почињу са  l-  да се не би сударале са остатком сајта.
   Боје и фонт долазе из варијабли сајта (--color-*, --font-main).
   ════════════════════════════════════════════════════════════════ */

:root {
    --l-accent-soft: rgba(217, 166, 83, 0.14);
    --l-ok:        #5CC98A;
    --l-ok-soft:   rgba(92, 201, 138, 0.13);
    --l-bad:       #EF7B7B;
    --l-bad-soft:  rgba(239, 123, 123, 0.13);
    --l-warn:      #F0B54A;
    --l-warn-soft: rgba(240, 181, 74, 0.13);
    --l-info:      #7AA5EE;
    --l-info-soft: rgba(122, 165, 238, 0.13);
    --l-code-bg:   #0B0D15;
    --l-code-text: #E6E9F0;
    --l-code-line: #262A3A;
    --l-font-zh:   "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
    --l-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
    --l-wrap:      920px;
    /* боје за canvas анимације (морају бити hex) */
    --l-viz-stage:  #0E131B;
    --l-viz-core:   #123A4A;
    --l-viz-clad:   #1A2230;
    --l-viz-jacket: #3E505B;
    --l-viz-hot-lo: #FFC23D;
    --l-viz-hot-hi: #FF4F7B;
    --l-viz-lost:   #5E6D77;
    --l-viz-accent: #4FB6D6;
}

[data-theme="light"] {
    --l-accent-soft: rgba(185, 133, 48, 0.12);
    --l-ok:        #1E8A4C;
    --l-ok-soft:   #E3F3E9;
    --l-bad:       #C03A3A;
    --l-bad-soft:  #FBE7E7;
    --l-warn:      #9A6200;
    --l-warn-soft: #FFF3DA;
    --l-info:      #2F62B8;
    --l-info-soft: #E6EEFB;
    --l-code-bg:   #1B1F2C;
    --l-code-line: #2E3446;
    --l-viz-stage:  #F4F7F8;
    --l-viz-core:   #CBE4EE;
    --l-viz-clad:   #E2E8EB;
    --l-viz-jacket: #8FA2AD;
    --l-viz-hot-lo: #E09B00;
    --l-viz-hot-hi: #D11F4C;
    --l-viz-lost:   #8E9AA3;
    --l-viz-accent: #0E6E8C;
}

/* ── Основа странице ─────────────────────────── */
.l-page {
    flex: 1 0 auto;
    width: 100%;
}
.l-page *,
.l-page *::before,
.l-page *::after { box-sizing: border-box; }

.l-wrap {
    max-width: var(--l-wrap);
    margin: 0 auto;
    padding: 0 16px;
}

.l-wrap--wide { max-width: 1180px; }

.l-page button:focus-visible,
.l-page input:focus-visible,
.l-page select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.l-page h2 { font-size: 1.6rem; line-height: 1.25; margin: 0.1em 0 0.55em; }
.l-page h3 { font-size: 1.15rem; line-height: 1.3; margin: 1.6em 0 0.5em; }
.l-page p  { margin: 0 0 0.9em; }
.l-page ul, .l-page ol { margin: 0 0 1em; padding-left: 1.3em; }
.l-page a  { color: var(--color-accent-light); }
.l-page code,
.l-page pre,
.l-page textarea.l-code,
.l-mono { font-family: var(--l-font-mono); }
.l-page :not(pre) > code {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 0.05em 0.4em;
    border-radius: 5px;
    font-size: 0.88em;
}

/* ── Заглавље лекције ────────────────────────── */
.l-hero {
    background:
        radial-gradient(120% 140% at 100% 0%, var(--l-accent-soft) 0%, transparent 55%),
        var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    padding: 28px 0 30px;
}
.l-hero .l-wrap {
    max-width: none;
    padding: 0 clamp(16px, 4vw, 40px);
}
.l-hero__top {
    display: flex;
    gap: 18px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--color-border);
}
.l-hero__logo {
    flex: none;
    width: 76px;
    height: 76px;
    object-fit: contain;
    background: #fff;
    border-radius: 14px;
    padding: 7px;
    box-shadow: var(--shadow-card);
}
.l-hero__school { min-width: 0; flex: 1; }
.l-hero__school-name {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 8px;
}
.l-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 6px 20px;
    margin: 0;
}
.l-meta > div { min-width: 0; }
.l-meta dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.l-meta dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
}
.l-hero__kicker {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.l-hero h1 {
    font-size: clamp(1.9rem, 5.5vw, 2.8rem);
    line-height: 1.1;
    margin: 0.15em 0 0.35em;
    font-weight: 800;
}
.l-hero h1 span { color: var(--color-accent); }
.l-hero h1 .sr,
.l-hero h1 .zh { color: inherit; }
.l-hero h1,
.l-hero__school-name,
.l-meta dd,
.l-page h2 { overflow-wrap: break-word; hyphens: auto; }
.l-hero__lead {
    color: var(--color-text);
    opacity: 0.92;
    margin: 0;
}
/* Аватар лево, опис лекције десно као облачић са репом ка глави */
.l-hero__intro {
    --l-av: clamp(110px, 30vw, 160px);
    display: flex;
    align-items: flex-start;
    margin-top: 6px;
}
.l-hero__intro .l-hero__avatar {
    flex: 0 0 var(--l-av);
    width: var(--l-av);
    max-width: none;
    margin: 0;
}
.l-hero__intro .l-hero__lead {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    /* цртеж има празан простор око лика, па облачић мало улази у њега */
    margin: calc(var(--l-av) * 0.12) 0 0 calc(var(--l-av) * -0.14);
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    opacity: 1;
}
.l-hero__intro .l-hero__lead::before {
    content: "";
    position: absolute;
    left: -7px;
    top: calc(var(--l-av) * 0.18);
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transform: rotate(45deg);
}
.l-hero__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.l-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.86rem;
}
.l-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-muted); flex: none; }
.l-dot.is-loading { background: var(--l-warn); animation: l-pulse 1s infinite; }
.l-dot.is-ready   { background: var(--l-ok); }
.l-dot.is-error   { background: var(--l-bad); }
@keyframes l-pulse { 50% { opacity: 0.35; } }
.l-progress { flex: 1; min-width: 220px; }
.l-progress__track {
    flex: 1;
    height: 7px;
    background: var(--color-border);
    border-radius: 99px;
    overflow: hidden;
}
.l-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-accent);
    transition: width 0.4s;
}

/* ── Садржај (навигација кроз лекцију) ───────── */
.l-toc {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}
.l-toc__inner {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 9px clamp(16px, 4vw, 40px);
    scrollbar-width: thin;
}
.l-toc a {
    flex: none;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.84rem;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid transparent;
    white-space: nowrap;
}
.l-toc a:hover { border-color: var(--color-accent); text-decoration: none; }
.l-toc a b { color: var(--color-accent); margin-right: 5px; }
.l-toc a.is-task { background: var(--l-accent-soft); }

/* ── Целине ──────────────────────────────────── */
.l-section { padding: 34px 0 8px; scroll-margin-top: 56px; }
.l-section__num {
    font-family: var(--l-font-mono);
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.88rem;
}

.l-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px;
    margin: 16px 0;
}
.l-card > :last-child { margin-bottom: 0; }
.l-card > h3:first-child { margin-top: 0; }

.l-note {
    border-left: 4px solid var(--l-info);
    background: var(--l-info-soft);
    padding: 12px 16px;
    border-radius: 0 10px 10px 0;
    margin: 14px 0;
}
.l-note > b:first-child,
.l-note > strong:first-child { display: block; margin-bottom: 2px; }
.l-note--warn { border-color: var(--l-warn); background: var(--l-warn-soft); }
.l-note--ok   { border-color: var(--l-ok);   background: var(--l-ok-soft); }
.l-note--accent { border-color: var(--color-accent); background: var(--l-accent-soft); }

/* ── Ситнице ─────────────────────────────────── */
.l-intro { margin-top: 26px; }
.l-small { font-size: 0.9rem; color: var(--color-text-muted); }
.l-page [hidden] { display: none !important; }

/* ── Табеле ──────────────────────────────────── */
.l-table {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-secondary);
    margin: 12px 0 16px;
}
.l-table table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.l-table th,
.l-table td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.l-table tr:last-child td { border-bottom: 0; }
.l-table th { background: var(--color-surface); font-weight: 600; }

/* ── Блокови кода и бојење синтаксе ──────────── */
.l-page pre.l-pre {
    background: var(--l-code-bg);
    color: var(--l-code-text);
    padding: 14px 16px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 10px 0 14px;
    border: 1px solid var(--l-code-line);
}
.l-t-com { color: #8491AB; font-style: italic; }
.l-t-str { color: #A8D8A0; }
.l-t-kw  { color: #D7A0F0; }
.l-t-fn  { color: #89B4FF; }
.l-t-me  { color: #FFD580; }
.l-t-num { color: #F7A072; }

/* ── Анатомија записа (нпр. позив методе) ────── */
.l-anatomy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px;
    font-family: var(--l-font-mono);
    font-size: 1.3rem;
    margin: 18px 0 8px;
}
.l-anatomy__part { display: flex; flex-direction: column; align-items: center; }
.l-anatomy__part > span { padding: 4px 7px; border-radius: 6px; background: var(--color-surface); }
.l-anatomy__part > small {
    font-family: var(--font-main);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 5px;
    text-align: center;
    max-width: 120px;
    line-height: 1.2;
}
.l-anatomy__part.is-a > span { background: var(--l-info-soft); }
.l-anatomy__part.is-b > span { background: var(--l-accent-soft); }
.l-anatomy__part.is-c > span { background: var(--l-ok-soft); }

/* ── Кућице са карактерима/позицијама ────────── */
.l-cells { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0; }
.l-cell { width: 42px; text-align: center; cursor: pointer; user-select: none; }
.l-cell__ch {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--l-font-mono);
    font-size: 1.2rem;
    font-weight: 600;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    transition: 0.15s;
}
.l-cell__ix { font-family: var(--l-font-mono); font-size: 0.76rem; color: var(--color-text-muted); margin-top: 3px; }
.l-cell.is-space .l-cell__ch { color: var(--color-text-muted); font-weight: 400; }
.l-cell.is-on .l-cell__ch { background: var(--l-accent-soft); border-color: var(--color-accent); }
.l-cell.is-on .l-cell__ix { color: var(--color-text); font-weight: 700; }

/* мање кућице у бојама (датум, ЈМБГ…) */
.l-digits { display: flex; flex-wrap: wrap; gap: 3px; margin: 12px 0; }
.l-digit { text-align: center; }
.l-digit__ch {
    width: 34px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--l-font-mono);
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 6px;
    background: var(--color-surface);
}
.l-digit__ix { font-size: 0.7rem; color: var(--color-text-muted); font-family: var(--l-font-mono); }
.l-g1 .l-digit__ch { background: #DBE8FF; color: #1A3A7A; }
.l-g2 .l-digit__ch { background: #DFF5E5; color: #1C5A33; }
.l-g3 .l-digit__ch { background: #FDF0C8; color: #6B4D00; }
.l-g4 .l-digit__ch { background: #EEE6FB; color: #4B2A80; }
.l-g5 .l-digit__ch { background: #E4E7EE; color: #444C5C; }
.l-g6 .l-digit__ch { background: #FDE3E0; color: #7A2A20; }
.l-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.84rem; color: var(--color-text-muted); margin-bottom: 10px; }
.l-legend span::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -1px;
    background: var(--color-surface);
}
.l-legend .l-g1::before { background: #9FBCF0; }
.l-legend .l-g2::before { background: #9AD9AD; }
.l-legend .l-g3::before { background: #F0D27C; }
.l-legend .l-g4::before { background: #C9B3F0; }
.l-legend .l-g5::before { background: #C7CCD6; }
.l-legend .l-g6::before { background: #F3AEA4; }

/* ── Контроле интерактивних приказа ─────────── */
.l-controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 8px 0; }
.l-controls label { font-size: 0.9rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 8px; }
.l-input {
    font-family: var(--l-font-mono);
    font-size: 1rem;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    width: 220px;
    max-width: 100%;
}
.l-input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.l-controls input[type="range"] { width: 170px; accent-color: var(--color-accent); }
.l-controls input[type="checkbox"] { accent-color: var(--color-accent); }
.l-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; background: var(--color-surface); border-radius: 10px; padding: 3px; }
.l-seg button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
}
.l-seg button.is-active,
.l-seg button[aria-pressed="true"] { background: var(--color-bg-secondary); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-card); }
.l-expr {
    font-family: var(--l-font-mono);
    font-size: 1rem;
    background: var(--l-code-bg);
    color: var(--l-code-text);
    padding: 12px 16px;
    border-radius: 10px;
    margin-top: 10px;
    overflow-x: auto;
    white-space: pre;
    border: 1px solid var(--l-code-line);
}
.l-expr .is-res { color: #A8D8A0; }
.l-expr .is-cm  { color: #8491AB; }

/* ── Вежбе са покретањем кода ────────────────── */
.l-ex {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    margin: 18px 0;
    overflow: hidden;
}
.l-ex.is-solved { border-color: var(--l-ok); }
.l-ex__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.l-ex__tag { font-weight: 700; font-size: 0.9rem; color: var(--color-accent-light); }
.l-ex--task .l-ex__head { background: var(--l-accent-soft); }
.l-ex__status { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.l-ex.is-solved .l-ex__status { color: var(--l-ok); }
.l-ex__body { padding: 16px 18px; }
.l-ex__task { margin: 0 0 10px; }
.l-ex__sub { font-size: 0.88rem; color: var(--color-text-muted); margin: 0 0 10px; }
.l-given {
    font-family: var(--l-font-mono);
    font-size: 0.88rem;
    background: var(--l-code-bg);
    color: var(--l-code-text);
    padding: 8px 14px;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--l-code-line);
    border-bottom: 1px dashed var(--l-code-line);
    white-space: pre-wrap;
}
.l-given em {
    font-style: normal;
    color: #8491AB;
    font-family: var(--font-main);
    font-size: 0.76rem;
    display: block;
}
.l-page textarea.l-code {
    display: block;
    width: 100%;
    min-height: 110px;
    resize: vertical;
    background: var(--l-code-bg);
    color: var(--l-code-text);
    border: 1px solid var(--l-code-line);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.92rem;
    line-height: 1.55;
    outline: none;
    tab-size: 4;
    caret-color: var(--color-accent);
}
.l-given + textarea.l-code { border-radius: 0 0 10px 10px; border-top: 0; }
.l-page textarea.l-code:focus { box-shadow: 0 0 0 2px var(--color-accent) inset; }
.l-stdin { margin-top: 10px; }
.l-stdin label { font-size: 0.84rem; color: var(--color-text-muted); display: block; margin-bottom: 4px; }
.l-stdin textarea {
    width: 100%;
    min-height: 44px;
    resize: vertical;
    font-family: var(--l-font-mono);
    font-size: 0.9rem;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
}
.l-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.l-btn {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s;
}
.l-btn:hover { border-color: var(--color-accent); }
.l-btn:disabled { opacity: 0.6; cursor: wait; }
.l-btn--run,
.l-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #14161F; }
.l-btn--check { background: var(--l-ok); border-color: var(--l-ok); color: #0E1A13; }
[data-theme="light"] .l-btn--run,
[data-theme="light"] .l-btn--primary,
[data-theme="light"] .l-btn--check { color: #fff; }
.l-out {
    margin: 12px 0 0;
    background: #07090F;
    color: #DFE6F0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    white-space: pre-wrap;
    display: none;
}
.l-out.is-shown { display: block; }
.l-out__label { color: #7F8AA3; font-size: 0.74rem; display: block; margin-bottom: 4px; font-family: var(--font-main); }
.l-out__err { color: #FF9A9A; }
.l-fb { margin-top: 10px; padding: 10px 14px; border-radius: 10px; display: none; font-size: 0.94rem; border: 1px solid; }
.l-fb.is-shown { display: block; }
.l-fb--ok   { background: var(--l-ok-soft);   color: var(--l-ok);   border-color: var(--l-ok); }
.l-fb--bad  { background: var(--l-bad-soft);  color: var(--l-bad);  border-color: var(--l-bad); }
.l-fb--info { background: var(--l-warn-soft); color: var(--l-warn); border-color: var(--l-warn); }
.l-fb pre {
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    padding: 6px 10px;
    border-radius: 6px;
    margin: 6px 0 0;
    white-space: pre-wrap;
    font-size: 0.85rem;
}
.l-reveal { display: none; margin-top: 12px; }
.l-reveal.is-shown { display: block; }
.l-hint { background: var(--l-warn-soft); border-left: 4px solid var(--l-warn); padding: 10px 14px; border-radius: 0 8px 8px 0; }
.l-sol h4 { margin: 14px 0 4px; font-size: 1rem; }
.l-sol p { margin: 6px 0; }

/* ── Интерактивне анимације (canvas) ─────────── */
.l-viz {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    margin: 16px 0;
}
.l-viz__canvas {
    display: block;
    width: 100%;
    height: clamp(250px, 34vw, 340px);
    background: var(--l-viz-stage);
}
.l-viz__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}
.l-viz__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    font-size: 0.84rem;
    color: var(--color-text-muted);
}
.l-viz__grad {
    display: inline-block;
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--l-viz-hot-lo), var(--l-viz-hot-hi));
    vertical-align: middle;
    margin-inline: 6px;
}
.l-viz__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--l-viz-lost);
    vertical-align: -1px;
    margin-right: 6px;
}
.l-viz__dot--hot { background: var(--l-viz-hot-hi); }
.l-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* панел са контролама */
.l-stack { display: grid; gap: 18px; }
.l-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
}
.l-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.84rem;
    color: var(--color-text-muted);
}
.l-ctl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px 24px;
}
.l-ctl { display: grid; gap: 4px; }
.l-ctl label,
.l-ctl__lbl {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--color-text-muted);
}
.l-ctl output {
    font-family: var(--l-font-mono);
    font-size: 0.84rem;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.l-ctl input[type="range"] { width: 100%; accent-color: var(--color-accent); }
.l-ctl__info { font-family: var(--l-font-mono); font-size: 0.84rem; padding-block: 6px; }
.l-select {
    font: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px 8px;
}
.l-check { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.l-check input { accent-color: var(--color-accent); width: 16px; height: 16px; }

/* израчунате величине */
.l-readouts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    margin: 16px 0;
}
.l-ro {
    background: var(--color-bg-secondary);
    padding: 14px 16px;
    display: grid;
    gap: 2px;
    align-content: start;
}
.l-ro__k { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.l-ro__v { font-family: var(--l-font-mono); font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.l-ro__f { font-family: var(--l-font-mono); font-size: 0.72rem; color: var(--color-text-muted); }

/* графикони */
.l-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 16px 0; }
.l-figure {
    margin: 0;
    padding: 16px;
    display: grid;
    gap: 8px;
    align-content: start;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}
.l-figure figcaption { display: grid; gap: 2px; }
.l-figure figcaption b { font-size: 1rem; }
.l-figure figcaption span { font-size: 0.84rem; color: var(--color-text-muted); }
.l-figure canvas { display: block; width: 100%; height: 230px; }
.l-figure__note { font-size: 0.84rem; color: var(--color-text-muted); font-family: var(--l-font-mono); }

/* мрежа картица (објашњења, појмови) */
.l-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.l-grid > .l-card { margin: 0; }

@media (max-width: 800px) {
    .l-charts { grid-template-columns: 1fr; }
    .l-readouts { grid-template-columns: repeat(2, 1fr); }
}

/* ── Провера знања (квиз) ────────────────────── */
.l-quiz__q { border-top: 1px solid var(--color-border); padding: 16px 0; }
.l-quiz__q:first-child { border-top: 0; padding-top: 0; }
.l-quiz__q > p { margin: 0 0 8px; font-weight: 600; }
.l-quiz__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.l-quiz__opt {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    padding: 7px 13px;
    border-radius: 9px;
    cursor: pointer;
}
.l-quiz__opt.is-code { font-family: var(--l-font-mono); }
.l-quiz__opt:hover:not(:disabled) { border-color: var(--color-accent); }
.l-quiz__opt:disabled { cursor: default; }
.l-quiz__opt.is-right { background: var(--l-ok-soft); border-color: var(--l-ok); color: var(--l-ok); font-weight: 600; }
.l-quiz__opt.is-wrong { background: var(--l-bad-soft); border-color: var(--l-bad); color: var(--l-bad); }
.l-quiz__why { display: none; font-size: 0.9rem; color: var(--color-text-muted); margin-top: 8px; }
.l-quiz__q.is-done .l-quiz__why { display: block; }
.l-quiz__score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-weight: 700;
}

/* ── Двојезичне странице (опционо) ───────────────
   Укључује се са  <div class="l-page" data-lang="sr">  и паровима
   <span class="sr">…</span><span class="zh" lang="zh-CN">…</span>.
   Прекидач: <div class="l-seg" data-l-lang> са дугмадима data-l="sr" / data-l="zh".
   Странице без data-lang не мењају ништа.                              */
.l-page[data-lang] .zh { font-family: var(--l-font-zh); }
.l-page[data-lang="sr"] .zh { display: none !important; }
.l-page[data-lang="zh"] .sr { display: none !important; }
.l-lang {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-top: 18px;
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

/* ── Предфутер: израда, датум, напомене ──────── */
.l-prefooter {
    margin-top: 48px;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding: 28px 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}
.l-prefooter__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 28px;
}
.l-prefooter h2 {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-accent);
    margin: 0 0 6px;
    font-weight: 700;
}
.l-prefooter p { margin: 0 0 6px; }
.l-prefooter strong { color: var(--color-text); }

/* ── Мобилни ─────────────────────────────────── */
@media (max-width: 600px) {
    .l-hero__top { align-items: flex-start; }
    .l-hero__logo { width: 58px; height: 58px; border-radius: 11px; padding: 5px; }
    .l-meta { grid-template-columns: 1fr 1fr; }
    .l-card, .l-ex__body { padding: 14px; }
    .l-cell { width: 34px; }
    .l-cell__ch { height: 40px; font-size: 1.02rem; }
    .l-anatomy { font-size: 1.02rem; }
    .l-digit__ch { width: 26px; height: 34px; font-size: 0.92rem; }
}

@media print {
    .l-toc, .l-actions, .l-hero__bar { display: none; }
    .l-section { padding-top: 16px; }
}