/* /learn — the reading register of the xDoctor design system.
   References tokens.css values with hard fallbacks so pages render standalone.
   Accent --accent-learn (#82a7ff) appears in exactly four roles:
   hero left border, links, badges, verified stamp. Nothing else glows.
   LEARN_CSS_v1 */

.lrn {
    margin: 0;
    background: var(--bg-base, #08090d);
    background-image: radial-gradient(ellipse at 100% 100%, var(--bg-gradient-warm, #0c0d12) 0%, var(--bg-base, #08090d) 60%);
    color: var(--text-primary, #e8eaed);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.lrn-wrap {
    max-width: 68ch;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

/* ---- breadcrumbs ---- */
.lrn-crumbs {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary, #6c7080);
    margin-bottom: 28px;
}
.lrn-crumbs a { color: var(--text-secondary, #a8acb5); text-decoration: none; }
.lrn-crumbs a:hover { color: var(--accent-learn, #82a7ff); }
.lrn-crumbs__sep { margin: 0 8px; }
.lrn-crumbs__here { color: var(--text-tertiary, #6c7080); }

/* ---- question + answer hero ---- */
.lrn-q {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
}

.lrn-answer {
    background: rgba(130, 167, 255, 0.07);          /* flat tint — design law: heros never gradient */
    border-left: 3px solid var(--accent-learn, #82a7ff);
    border-radius: 0 8px 8px 0;
    padding: 22px 24px;
    margin: 0 0 14px;
}
.lrn-answer p {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
}

/* ---- source-strength badges + verified stamp ---- */
.lrn-stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 36px;
}
.lrn-stamp__date {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--accent-learn, #82a7ff);
}

.lrn-badge {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}
.lrn-badge--current    { color: #7ce895; border-color: rgba(124, 232, 149, 0.45); background: rgba(124, 232, 149, 0.08); }
.lrn-badge--historical { color: var(--text-secondary, #a8acb5); border-color: var(--border-emphasized, #2a2f3a); background: rgba(168, 172, 181, 0.06); }
.lrn-badge--official   { color: #5ee5d1; border-color: rgba(94, 229, 209, 0.45); background: rgba(94, 229, 209, 0.08); }
.lrn-badge--empirical  { color: #f5d76b; border-color: rgba(245, 215, 107, 0.45); background: rgba(245, 215, 107, 0.08); }
.lrn-badge--unknown    { color: #ff7a85; border-color: rgba(255, 122, 133, 0.55); background: transparent; }

/* ---- body prose ---- */
.lrn-body h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 44px 0 14px;
}
.lrn-body p { margin: 0 0 18px; color: var(--text-primary, #e8eaed); }
.lrn-body a, .lrn-related a, .lrn-up a, .lrn-cta a, .lrn-index a, .lrn-pillar-block a, .lrn-footer a {
    color: var(--accent-learn, #82a7ff);
    text-decoration: none;
}
.lrn-body a:hover, .lrn-related a:hover, .lrn-index a:hover { text-decoration: underline; }
.lrn-body code {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--bg-recessed, #06070a);
    border: 1px solid var(--border-subtle, #1a1d24);
    border-radius: 4px;
    padding: 1px 6px;
}
.lrn-body em { color: var(--text-primary, #e8eaed); }

/* ---- citation blocks (recessed mono — the visual signature) ---- */
.lrn-cite {
    margin: 22px 0 26px;
    padding: 16px 18px;
    background: var(--bg-recessed, #06070a);
    border: 1px solid var(--border-subtle, #1a1d24);
    border-radius: 8px;
}
.lrn-cite__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.lrn-cite__sha, .lrn-cite__verified {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-tertiary, #6c7080);
}
.lrn-cite__text {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary, #a8acb5);
    border: 0;
    padding: 0;
}
.lrn-cite__src {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
}
.lrn-cite__src a { color: var(--accent-learn, #82a7ff); text-decoration: none; word-break: break-word; }
.lrn-cite__src a:hover { text-decoration: underline; }
.lrn-cite__scope {
    display: block;
    color: var(--text-tertiary, #6c7080);
    margin-top: 2px;
}

/* ---- CTA card (one per page, standard card pattern: L→R gradient) ---- */
.lrn-cta {
    margin: 40px 0;
    padding: 18px 22px;
    background: linear-gradient(90deg, rgba(130, 167, 255, 0.08) 0%, rgba(130, 167, 255, 0) 100%);
    border-left: 4px solid var(--accent-learn, #82a7ff);
    border-radius: 0 8px 8px 0;
}
.lrn-cta p { margin: 0; color: var(--text-secondary, #a8acb5); }

/* ---- related / indexes ---- */
.lrn-related h2, .lrn-pillar-block h2 { font-size: 18px; margin: 40px 0 10px; }
.lrn-pillar-block h2 a { color: var(--text-primary, #e8eaed); }
.lrn-pillar-block h2 a:hover { color: var(--accent-learn, #82a7ff); }
.lrn-index, .lrn-related ul { list-style: none; margin: 0; padding: 0; }
.lrn-index li, .lrn-related li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle, #1a1d24);
}
.lrn-sub { color: var(--text-secondary, #a8acb5); font-size: 18px; margin: 0 0 34px; }
.lrn-up { margin-top: 44px; }

/* ---- footer ---- */
.lrn-footer {
    margin-top: 72px;
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle, #1a1d24);
    font-size: 13px;
    color: var(--text-tertiary, #6c7080);
}
.lrn-footer p { margin: 0 0 6px; }

@media (max-width: 600px) {
    .lrn { font-size: 16px; }
    .lrn-q { font-size: 26px; }
    .lrn-answer p { font-size: 17px; }
}

/* PATCH:learn_fresh_css v1 — re-verification notice (system warning register,
   flat tint per design law; sits between the badge row and the body) */
.lrn-fresh {
    margin: 0 0 30px;
    padding: 14px 18px;
    background: rgba(245, 215, 107, 0.07);
    border-left: 3px solid var(--accent-warning, #f5d76b);
    border-radius: 0 8px 8px 0;
}
.lrn-fresh p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, #a8acb5);
}

/* PATCH:learn_release_css v1 — release timeline, tracking strip, raw-diff
   link, prev/next nav. Mono register throughout; accent stays in its four
   roles (links + current-release pill counts as a link state). */
.lrn-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 26px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.lrn-timeline a { color: var(--text-tertiary, #6c7080); text-decoration: none; }
.lrn-timeline a:hover { color: var(--accent-learn, #82a7ff); }
.lrn-timeline__now {
    color: var(--accent-learn, #82a7ff);
    border: 1px solid rgba(130, 167, 255, 0.45);
    border-radius: 4px;
    padding: 1px 8px;
}

.lrn-track {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-tertiary, #6c7080);
    background: var(--bg-recessed, #06070a);
    border: 1px solid var(--border-subtle, #1a1d24);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 0 22px;
}
.lrn-track span { color: var(--accent-learn, #82a7ff); }

.lrn-rawdiff {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    margin: 0 0 30px;
}
.lrn-rawdiff span { color: var(--text-tertiary, #6c7080); margin-left: 10px; }

.lrn-relnav {
    display: flex;
    justify-content: space-between;
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle, #1a1d24);
}

/* PATCH:learn_nav_css v1 — minimal learn header. Brand mono matches the
   landing nav register; sign-in keeps the product action cyan (action
   colors are action-themed, not surface-themed). */
.lrn-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 68ch;
    margin: 0 auto;
    padding: 22px 24px 0;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
}
.lrn-nav__left { display: flex; align-items: baseline; gap: 18px; }
.lrn-nav__brand {
    color: var(--text-primary, #e8eaed);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.lrn-nav__brand span { color: var(--accent-learn, #82a7ff); font-weight: 400; }
.lrn-nav__root {
    color: var(--text-tertiary, #6c7080);
    text-decoration: none;
    text-transform: lowercase;
}
.lrn-nav__root:hover { color: var(--accent-learn, #82a7ff); }
.lrn-nav__signin {
    color: #5ee5d1;
    border: 1px solid rgba(94, 229, 209, 0.45);
    border-radius: 6px;
    padding: 6px 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 160ms ease;
}
.lrn-nav__signin:hover { background: rgba(94, 229, 209, 0.08); }
@media (max-width: 480px) {
    .lrn-nav { font-size: 12px; }
    .lrn-nav__root { display: none; }
}

/* PATCH:learn_app_css v1 — .lrn as a scoped div inside the app layout:
   no page background of its own, tighter top spacing under the app header. */
.lrn--app { background: none; background-image: none; }
.lrn--app .lrn-wrap { padding-top: 16px; }

/* PATCH:learn_app_portal_skin v1 — app-mode reskin to the portal card
   language. RECIPE SOURCE OF TRUTH: inline styles in checkup_*.php
   (.ckp-banner hero + .ckp-row item patterns); update here if those change.
   ACCENT slot = periwinkle (knowledge register). Scoped to .lrn--app only —
   logged-out reading pages keep the 68ch standalone design. */

/* Width: .app-main already constrains to 1080px with its own padding;
   the wrap stops imposing the reading measure and fills the portal body. */
.lrn--app .lrn-wrap {
    max-width: none;
    padding: 8px 0 40px;
}

/* PATCH:learn_app_portal_skin v2 — body text runs the full page width
   like the cards beside it (v1's 78ch cap on free paragraphs read as a
   mismatch next to full-width cards). Taller line-height compensates
   for the longer measure. */
.lrn--app .lrn-body p,
.lrn--app .lrn-body ul,
.lrn--app .lrn-body ol,
.lrn--app .lrn-sub {
    max-width: none;
    line-height: 1.7;
}

/* Hero → .ckp-banner recipe (dim accent tint, 3px accent left, full 8px
   radius, 22x24 padding; heading/typography scale to match). */
.lrn--app .lrn-answer {
    padding: 22px 24px;
    margin: 0 0 32px;
    background: rgba(130, 167, 255, 0.07);
    border-left: 3px solid var(--accent-learn, #82a7ff);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: #c7cdd1;
}
.lrn--app .lrn-q {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #f1f5f9;
}

/* Cards (citations, freshness notice, CTA, prev/next release nav)
   → .ckp-row recipe. The accent stripe is preserved on hover
   (deliberate deviation: checkup's shorthand hover momentarily drops
   its stripe; the stripe is the learn pages' provenance marker). */
.lrn--app .lrn-cite,
.lrn--app .lrn-fresh,
.lrn--app .lrn-cta,
.lrn--app .lrn-relnav {
    padding: 18px 20px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--accent-learn, #82a7ff);
    border-radius: 8px;
    transition: border-color 0.2s;
}
.lrn--app .lrn-cite:hover,
.lrn--app .lrn-relnav:hover {
    border-color: rgba(255, 255, 255, 0.12);
    border-left-color: var(--accent-learn, #82a7ff);
}

/* Meta lines inside cards → .ckp-row__meta register (mono, 11px, dim,
   tabular numerals). */
.lrn--app .lrn-cite .lrn-stamp,
.lrn--app .lrn-rawdiff span {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}

/* LEARN_ELITE_LEAF_v1 — elite leaf blocks: SHA-pinned code excerpts, the
   signal table (code → plain english → product surface), and the UNKNOWN
   box. Used by spam-classifier and every Grox leaf after it. */
.lrn-code {
    background: var(--bg-recessed, #06070a);
    border: 1px solid var(--border-subtle, #1a1d24);
    border-radius: 8px;
    margin: 18px 0;
    overflow: hidden;
}
.lrn-code__head {
    display: flex;
    justify-content: space-between;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border-subtle, #1a1d24);
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-tertiary, #6c7080);
}
.lrn-code__sha {
    color: var(--accent-learn, #82a7ff);
    background: rgba(130, 167, 255, 0.07);
    border-radius: 4px;
    padding: 1px 7px;
}
.lrn-code pre {
    margin: 0;
    padding: 16px 18px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #c7cdd1;
    overflow-x: auto;
}
.lrn-ln {
    color: #3a3f4d;
    user-select: none;
    margin-right: 18px;
}
.lrn-sig {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 14px;
}
.lrn-sig th {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary, #6c7080);
    text-align: left;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-emphasized, #2a2f3a);
}
.lrn-sig td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-subtle, #1a1d24);
    color: var(--text-secondary, #a8acb5);
    vertical-align: top;
}
.lrn-sig td:first-child {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--text-primary, #e8eaed);
    white-space: nowrap;
}
.lrn-unknown {
    border: 1px dashed rgba(255, 122, 133, 0.45);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 22px 0;
}
.lrn-unknown__k {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ff7a85;
    margin-bottom: 6px;
}
.lrn-unknown p { margin: 0; color: var(--text-secondary, #a8acb5); font-size: 14.5px; }
@media (max-width: 600px) {
    .lrn-sig td:first-child { white-space: normal; }
}

/* ============================================================
   LEARN_SURFACES_v1 — Claim Explorer (/learn/claims) +
   Verification Board (/learn/status). Extends the lrn- system;
   reuses .lrn-badge, .lrn-cite, accent tokens. No new palette.
   ============================================================ */

/* ---- Claim Explorer ---- */
.lrn-xpl__bar {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 28px 0 16px;
}
.lrn-xpl__chip {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 12px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    letter-spacing: 0.04em;
    color: var(--text-secondary, #a8acb5);
    background: transparent;
    border: 1px solid var(--border-default, #1d2128);
    border-radius: 999px;
    padding: 7px 12px; cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.lrn-xpl__chip:hover { border-color: var(--accent-learn, #82a7ff); color: var(--text-primary, #e8eaed); }
.lrn-xpl__chip.is-on {
    border-color: var(--accent-learn, #82a7ff);
    color: var(--accent-learn, #82a7ff);
    background: rgba(130, 167, 255, 0.07);
}
.lrn-xpl__chip .lrn-badge { pointer-events: none; }
.lrn-xpl__n { font-size: 11px; color: var(--text-tertiary, #6c7080); }
.lrn-xpl__chip.is-on .lrn-xpl__n { color: var(--accent-learn, #82a7ff); }

.lrn-xpl__search { margin: 0 0 10px; }
.lrn-xpl__search input {
    width: 100%; box-sizing: border-box;
    font: 400 14px/1.4 var(--font-sans, system-ui, sans-serif);
    color: var(--text-primary, #e8eaed);
    background: var(--bg-elevated, #0c0d12);
    border: 1px solid var(--border-default, #1d2128);
    border-radius: 10px; padding: 12px 14px;
}
.lrn-xpl__search input:focus {
    outline: none; border-color: var(--accent-learn, #82a7ff);
    box-shadow: 0 0 0 3px rgba(130, 167, 255, 0.12);
}
.lrn-xpl__search input::placeholder { color: var(--text-tertiary, #6c7080); }

.lrn-xpl__count {
    font: 500 11px/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary, #6c7080);
    margin: 0 0 18px;
}

.lrn-xpl__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.lrn-xpl__card {
    border: 1px solid var(--border-default, #1d2128);
    border-radius: 12px;
    background: var(--bg-elevated, #0c0d12);
    padding: 16px 16px 14px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color 120ms ease;
}
.lrn-xpl__card:hover { border-color: var(--border-emphasized, #2a2f3a); }
.lrn-xpl__key {
    font: 500 11px/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.03em;
    color: var(--accent-learn, #82a7ff);
    word-break: break-all;
}
.lrn-xpl__card .lrn-cite { margin: 0; border: none; padding: 0; background: transparent; }
.lrn-xpl__files {
    font: 400 11px/1.5 var(--font-mono, ui-monospace, monospace);
    color: var(--text-tertiary, #6c7080);
    border-top: 1px solid var(--border-default, #1d2128);
    padding-top: 10px; word-break: break-all;
}
.lrn-xpl__empty {
    text-align: center; color: var(--text-secondary, #a8acb5);
    padding: 40px 0; font-size: 14px;
}
.lrn-xpl__reset, .lrn-xpl__chip.lrn-xpl__reset {
    background: none; border: none; cursor: pointer;
    color: var(--accent-learn, #82a7ff); text-decoration: underline; font: inherit;
}

/* ---- Verification Board ---- */
.lrn-vb__strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin: 28px 0 20px;
    border: 1px solid var(--border-default, #1d2128);
    border-radius: 12px; padding: 16px 18px;
    background: var(--bg-elevated, #0c0d12);
}
.lrn-vb__strip.is-fresh { border-color: rgba(124, 232, 149, 0.35); }
.lrn-vb__strip.is-drift { border-color: rgba(245, 215, 107, 0.45); }
.lrn-vb__state {
    display: inline-flex; align-items: center; gap: 9px;
    font: 600 13px/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.08em;
    color: var(--text-primary, #e8eaed);
}
.lrn-vb__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.is-fresh .lrn-vb__dot { background: #7ce895; box-shadow: 0 0 8px rgba(124, 232, 149, 0.6); }
.is-drift .lrn-vb__dot { background: #f5d76b; box-shadow: 0 0 8px rgba(245, 215, 107, 0.6); }
.lrn-vb__pin {
    font: 400 12px/1 var(--font-mono, ui-monospace, monospace);
    color: var(--text-secondary, #a8acb5);
}
.lrn-vb__pin code { color: var(--accent-learn, #82a7ff); }
.lrn-vb__pindate { color: var(--text-tertiary, #6c7080); }

.lrn-vb__tiles {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin: 0 0 28px;
}
.lrn-vb__tile {
    border: 1px solid var(--border-default, #1d2128);
    border-radius: 12px; padding: 18px 16px;
    background: var(--bg-elevated, #0c0d12);
}
.lrn-vb__num {
    font: 600 34px/1 var(--font-sans, system-ui, sans-serif);
    color: var(--text-primary, #e8eaed);
}
.lrn-vb__tile--fresh .lrn-vb__num { color: #7ce895; }
.lrn-vb__tile--verify_pending .lrn-vb__num { color: #f5d76b; }
.lrn-vb__lbl {
    font: 500 12px/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-secondary, #a8acb5); margin: 8px 0 6px;
}
.lrn-vb__desc { font-size: 12px; line-height: 1.45; color: var(--text-tertiary, #6c7080); }

.lrn-vb__h2 {
    font: 600 16px/1.2 var(--font-sans, system-ui, sans-serif);
    color: var(--text-primary, #e8eaed); margin: 0 0 12px;
}
.lrn-vb__rows { display: flex; flex-direction: column; gap: 8px; }
.lrn-vb__row {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "key state" "files files";
    gap: 4px 12px; align-items: center;
    border: 1px solid var(--border-default, #1d2128);
    border-radius: 10px; padding: 12px 14px;
    background: var(--bg-elevated, #0c0d12);
}
.lrn-vb__rowkey {
    grid-area: key;
    font: 500 12px/1.3 var(--font-mono, ui-monospace, monospace);
    color: var(--accent-learn, #82a7ff); word-break: break-all;
}
.lrn-vb__rowstate {
    grid-area: state;
    font: 500 11px/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.04em; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.lrn-vb__rowstate--verify_pending { color: #f5d76b; border: 1px solid rgba(245, 215, 107, 0.45); }
.lrn-vb__rowstate--repin_ready { color: #5ee5d1; border: 1px solid rgba(94, 229, 209, 0.45); }
.lrn-vb__rowfiles {
    grid-area: files;
    font: 400 11px/1.5 var(--font-mono, ui-monospace, monospace);
    color: var(--text-tertiary, #6c7080); word-break: break-all;
}
.lrn-vb__clear {
    border: 1px solid rgba(124, 232, 149, 0.3); border-radius: 12px;
    padding: 18px; color: var(--text-secondary, #a8acb5); line-height: 1.5;
    background: rgba(124, 232, 149, 0.04);
}
.lrn-vb__gen {
    margin: 24px 0 0; font: 400 12px/1 var(--font-mono, ui-monospace, monospace);
    color: var(--text-tertiary, #6c7080);
}
.lrn-vb__gen a { color: var(--accent-learn, #82a7ff); }

@media (max-width: 560px) {
    .lrn-vb__tiles { grid-template-columns: 1fr; }
    .lrn-xpl__grid { grid-template-columns: 1fr; }
}