/* BTOVEN tester theme — SHARED (shared_identical: theme_css). Pilot: securityheaders.
   Unified tokens + component library for every tester page (one-page philosophy). */
            .grade-chip { display: inline-block; padding: 2px 9px; border-radius: 5px; font-weight: 700; font-size: 12px; color: #fff; letter-spacing: 0.3px; }
            .grade-A { background: #16a34a; }
            .grade-B { background: #65a30d; }
            .grade-C { background: #d97706; }
            .grade-D { background: #ea580c; }
            .grade-F { background: #dc2626; }
            .grade-n\/a { background: #64748b; }
            .sev-critical { color: #ef4444; font-weight: 700; }
            .sev-high { color: #fb923c; font-weight: 700; }
            .sev-medium { color: #f59e0b; font-weight: 700; }
            .sev-info { color: #3b82f6; font-weight: 700; }
            .sev-recommended { color: #f59e0b; font-weight: 600; }
            .sev-contextual { color: var(--muted, #94a3b8); font-style: italic; }
            .st-pass { color: var(--ok, #22c55e); font-weight: 600; }
            .st-contextual { color: var(--muted, #94a3b8); }
            .st-missing { color: #f59e0b; font-weight: 600; }
            .st-fail { color: #ef4444; font-weight: 700; }
            :root {
                --bg: #0b0c10;
                --panel: #111317;
                --muted: #8b95a7;
                --text: #e6edf3;
                --accent: #6ee7b7;
                --accent-2: #60a5fa;
                --warn: #f59e0b;
                --ok: #22c55e;
                --border: #1f2430;
                --code: #0d1117;
                --shadow: rgba(0, 0, 0, 0.25);
            }

            html.light-mode {
                --bg: #f7f9fc;
                --panel: #ffffff;
                --muted: #5a6579;
                --text: #0b1220;
                --accent: #059669;
                --accent-2: #2563eb;
                --warn: #b45309;
                --ok: #047857;
                --border: #e5e7eb;
                --code: #f3f4f6;
                --shadow: rgba(0, 0, 0, 0.08);
            }

            * {
                box-sizing: border-box;
            }

            html,
            body {
                height: 100%;
            }

            body {
                margin: 0;
                font-family: monospace;
                line-height: 1.45;
                color: var(--text);
                background: var(--bg);
            }

            .wrap {
                max-width: 1200px;
                margin: 0 auto;
                padding: 24px;
            }

            header {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 16px;
                align-items: start;
                margin-bottom: 24px;
            }

            .title {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .title h1 {
                margin: 0;
                font-size: clamp(22px, 3.2vw, 34px);
                letter-spacing: -0.02em;
            }

            .subtitle {
                color: var(--muted);
                font-size: 14px;
            }

            .badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 8px 12px;
                border-radius: 999px;
                border: 1px solid var(--border);
                background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.04),
                    rgba(0, 0, 0, 0.04)
                );
                font-size: 12px;
                color: var(--muted);
            }
            /* Header right cluster: theme toggle + version badge */
            .header-actions {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 16px;
            }
            /* Lucide icons inlined in index.hbs (ISC) — stroke inherits color */
            .lucide {
                stroke: currentColor;
                fill: none;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                vertical-align: -2px;
                flex: none;
            }
            .night-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--muted); user-select: none; }
            .night-toggle input { display: none; }
            .toggle-track { width: 42px; height: 22px; background: var(--border); border-radius: 11px; position: relative; transition: background 0.3s; }
            .toggle-thumb { width: 18px; height: 18px; background: var(--text); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s, background 0.3s; }
            .night-toggle input:checked + .toggle-track { background: var(--accent); }
            .night-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }

            .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--ok);
                box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
            }

            .panel {
                background: var(--panel);
                border: 1px solid var(--border);
                border-radius: 16px;
                padding: 18px;
                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
            }

            .grid {
                display: grid;
                gap: 16px;
            }

            @media (min-width: 820px) {
                .grid {
                    grid-template-columns: 1fr;
                }
            }

            .section-title {
                font-size: 13px;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: var(--muted);
                margin: 8px 0 14px;
            }

            .kv {
                display: grid;
                grid-template-columns: 180px 1fr;
                gap: 10px 14px;
                align-items: start;
            }

            .k {
                color: var(--muted);
                font-size: 13px;
            }

            .v {
                background: var(--code);
                border: 1px dashed var(--border);
                padding: 8px 10px;
                border-radius: 10px;
                overflow: auto;
            }

            .errors {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }

            .pill {
                font-size: 12px;
                padding: 6px 10px;
                border-radius: 999px;
                border: 1px solid var(--border);
                color: var(--muted);
                background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.04),
                    rgba(0, 0, 0, 0.04)
                );
            }

            footer {
                margin-top: 20px;
                color: var(--muted);
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                gap: 12px;
                flex-wrap: wrap;
            }

            .note {
                max-width: 780px;
            }

            form.lookup {
                display: flex;
                gap: 10px;
                align-items: center;
                flex-wrap: wrap;
            }

            input[type="text"] {
                height: 38px;
                font-size: 16px;
                border-radius: 10px;
                padding: 0 12px;
                border: 1px solid var(--border);
                background: var(--panel);
                color: var(--text);
                min-width: 300px;
            }

            input[type="text"]::placeholder {
                color: var(--muted);
            }

            input[type="submit"] {
                height: 38px;
                font-size: 15px;
                font-weight: 600;
                border-radius: 999px;
                padding: 0 16px;
                border: 1px solid var(--border);
                background: linear-gradient(
                    180deg,
                    rgba(110, 231, 183, 0.18),
                    rgba(96, 165, 250, 0.18)
                );
                color: var(--text);
                cursor: pointer;
            }

            input[type="submit"]:hover {
                filter: brightness(1.08);
            }

            .location-tag {
                font-size: 11px;
                padding: 4px 8px;
                border-radius: 4px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            .status-found {
                background: rgba(34, 197, 94, 0.15);
                color: var(--ok);
            }

            .status-not-found {
                background: rgba(239, 68, 68, 0.15);
                color: #ef4444;
            }

            .score-badge {
                font-size: 24px;
                font-weight: bold;
                text-align: center;
                padding: 12px;
                border-radius: 12px;
                margin: 8px 0;
            }

            .score-high {
                background: rgba(34, 197, 94, 0.1);
                color: var(--ok);
                border: 1px solid rgba(34, 197, 94, 0.2);
            }

            .score-mid {
                background: rgba(245, 158, 11, 0.1);
                color: var(--warn);
                border: 1px solid rgba(245, 158, 11, 0.2);
            }

            .score-low {
                background: rgba(239, 68, 68, 0.1);
                color: #ef4444;
                border: 1px solid rgba(239, 68, 68, 0.2);
            }

            .https-yes {
                background: rgba(34, 197, 94, 0.15);
                color: var(--ok);
            }

            .https-no {
                background: rgba(239, 68, 68, 0.15);
                color: #ef4444;
            }

            details {
                margin-top: 8px;
            }

             details summary {
                 cursor: pointer;
                 color: var(--muted);
                 font-size: 12px;
             }

             .tester-tools-section {
                 margin-top: 16px;
                 padding-top: 16px;
                 border-top: 1px solid var(--border);
             }

             .tester-tools-label {
                 margin: 0 0 8px 0;
                 color: var(--muted);
                 font-size: 12px;
                 text-transform: uppercase;
                 letter-spacing: 0.08em;
             }

             .tester-tools-links {
                 margin: 0;
                 font-size: 12px;
                 color: var(--text);
                 display: flex;
                 flex-wrap: wrap;
                 gap: 12px;
             }

             .tester-tools-link {
                 color: var(--accent-2);
                 text-decoration: none;
             }

             .ai-btn {
                font-family: monospace;
                font-size: 12px;
                padding: 6px 12px;
                border-radius: 999px;
                border: 1px solid var(--border);
                background: linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(110, 231, 183, 0.12));
                color: var(--text);
                cursor: pointer;
                transition: filter 0.15s;
            }

            .ai-btn:hover {
                filter: brightness(1.12);
            }

            .result-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
            }

            .mt-lg {
                margin-top: 16px;
            }

            .text-accent-2 {
                color: var(--accent-2);
            }


/* ===== Version badge → info modal (Changelog · llms.txt · About) ===== */
.badge-btn {
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: filter 0.15s, border-color 0.15s;
}
.badge-btn:hover { filter: brightness(1.15); border-color: var(--accent, #6ee7b7); }
.badge-btn:focus-visible { outline: 2px solid var(--accent, #6ee7b7); outline-offset: 2px; }

dialog.info-modal {
    margin: auto;
    padding: 0;
    border: 1px solid var(--border, #2a2f36);
    border-radius: 14px;
    background: var(--panel, #111317);
    color: var(--text, #e6edf3);
    width: min(780px, calc(100vw - 28px));
    height: min(84vh, 860px);
    max-height: min(84vh, 860px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    font-family: monospace;
}
dialog.info-modal[open] { display: flex; flex-direction: column; }
dialog.info-modal::backdrop {
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(2px);
}
html.modal-open { overflow: hidden; }

.info-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border, #2a2f36);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.03));
    flex: none;
}
.info-modal-head h2 { margin: 0; font-size: 14.5px; letter-spacing: -0.01em; font-weight: 700; }
.info-modal-close {
    background: transparent;
    border: 1px solid var(--border, #2a2f36);
    border-radius: 8px;
    color: var(--muted, #8b95a7);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
}
.info-modal-close:hover { color: var(--text, #e6edf3); border-color: var(--accent, #6ee7b7); }

.info-modal-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--border, #2a2f36);
    flex: none;
}
.info-modal-tab {
    background: transparent;
    border: none;
    border-radius: 8px 8px 0 0;
    color: var(--muted, #8b95a7);
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.info-modal-tab:hover { color: var(--text, #e6edf3); background: rgba(255, 255, 255, 0.04); }
.info-modal-tab[aria-selected="true"] {
    color: var(--accent, #6ee7b7);
    font-weight: 700;
    background: var(--code, #0d1117);
    box-shadow: inset 0 -2px 0 var(--accent, #6ee7b7);
}
.info-modal-body {
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    font-size: 13px;
}
.info-modal-panel:focus { outline: none; }

/* --- Safe markdown rendering (theme.js mdRender output) --- */
.md { line-height: 1.62; word-break: break-word; }
.md-loading { color: var(--muted, #8b95a7); font-style: italic; margin: 0; }
.md-loading.md-error { color: var(--warn, #f59e0b); }
.md h1 { font-size: 19px; margin: 2px 0 10px; letter-spacing: -0.01em; }
.md h2 {
    font-size: 15.5px;
    margin: 20px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #2a2f36);
}
.md h2.md-ver { color: var(--accent, #6ee7b7); }
.md h2.md-ver-unreleased {
    color: var(--warn, #f59e0b);
    border-left: 3px solid var(--warn, #f59e0b);
    padding-left: 9px;
}
.md h3 {
    font-size: 13px;
    margin: 16px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.md h3.md-h-added { color: var(--ok, #22c55e); }
.md h3.md-h-changed { color: var(--accent-2, #60a5fa); }
.md h3.md-h-fixed { color: var(--warn, #f59e0b); }
.md h3.md-h-removed, .md h3.md-h-security { color: var(--fail, #ef4444); }
.md h3.md-h { color: var(--muted, #8b95a7); }
.md h4, .md h5, .md h6 { font-size: 13px; margin: 14px 0 6px; color: var(--muted, #8b95a7); }
.md p { margin: 8px 0; }
.md a { color: var(--accent-2, #60a5fa); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 4px 0; }
.md li::marker { color: var(--accent, #6ee7b7); }
.md li p { margin: 2px 0; }
.md blockquote {
    margin: 10px 0;
    padding: 8px 13px;
    border-left: 3px solid var(--accent-2, #60a5fa);
    background: rgba(96, 165, 250, 0.07);
    border-radius: 0 8px 8px 0;
    color: var(--muted, #8b95a7);
}
.md blockquote p { margin: 4px 0; }
.md code {
    background: var(--code, #0d1117);
    border: 1px solid var(--border, #2a2f36);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 12px;
    color: var(--accent, #6ee7b7);
}
.md pre {
    background: var(--code, #0d1117);
    border: 1px solid var(--border, #2a2f36);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 10px 0;
}
.md pre code { background: none; border: none; padding: 0; color: var(--text, #e6edf3); font-size: 12px; }
.md hr { border: none; border-top: 1px solid var(--border, #2a2f36); margin: 16px 0; }
.md strong { color: var(--text, #e6edf3); }

/* --- About tab --- */
.about-desc { margin: 0 0 12px; color: var(--muted, #8b95a7); }
.about-desc strong { color: var(--text, #e6edf3); }
.about-grid {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 7px 14px;
    font-size: 12.5px;
    align-items: baseline;
}
.about-k { color: var(--muted, #8b95a7); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
.about-v { word-break: break-word; }
.about-v a { color: var(--accent-2, #60a5fa); text-decoration: none; }
.about-v a:hover { text-decoration: underline; }
.about-health-ok { color: var(--ok, #22c55e); }
.about-health-warn { color: var(--warn, #f59e0b); }
.about-health-fail { color: var(--fail, #ef4444); }

/* ===== Mobile (TEMPLATE-002 first slice) ===== */
@media (max-width: 560px) {
    .wrap { padding: 16px; }
    header { grid-template-columns: 1fr; gap: 12px; }
    .header-actions { justify-content: flex-start; }
    dialog.info-modal { width: calc(100vw - 16px); max-height: 92vh; }
    .info-modal-head { padding: 11px 12px; }
    .info-modal-head h2 { font-size: 13px; }
    .info-modal-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 8px 12px 0;
    }
    .info-modal-tabs::-webkit-scrollbar { display: none; }
    .info-modal-tab { padding: 8px 10px; font-size: 12px; }
    .info-modal-body { padding: 12px; }
    .about-grid { grid-template-columns: 1fr; gap: 0; }
    .about-k { margin-top: 10px; }
    .about-v { margin-top: 2px; }
    .md h1 { font-size: 17px; }
    .md h2 { font-size: 14.5px; }
}

/* ===== Shared boxes & layout primitives (TEMPLATE-003) =====
   Promoted from adblock-tester's inline <style> so every tester keeps the
   same general design: warning note, collapsible category/group/host boxes,
   3-column category grid, side-by-side section picker, list toolbar. */

/* Warning note — informational, deliberately low priority (bottom of page) */
.warning-box {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--warn, #f59e0b);
    line-height: 1.6;
}
.warning-box a { color: var(--warn, #f59e0b); }

/* Side-by-side section picker — the chosen section's info deploys below.
   Without JS both panes stay visible (static); theme JS marks html.has-js. */
.section-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
}
.section-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 6px 24px var(--shadow);
    transition: border-color 0.15s;
}
html.has-js .section-card { cursor: pointer; }
html.has-js .section-card:hover { border-color: var(--accent, #6ee7b7); }
.section-card.active { border-color: var(--accent, #6ee7b7); }
.section-card h2 { font-size: 16px; margin: 0 0 4px; }
.picker-sub { font-size: 12px; color: var(--muted); margin: 0; max-width: 60ch; }
.section-desc {
    font-size: 12px;
    color: var(--muted);
    max-width: 760px;
    margin: 16px 0 12px;
    line-height: 1.5;
}
.section-desc strong, .section-desc b { color: var(--text); }
.section-pane { margin-bottom: 8px; }
.section-num { color: var(--accent); line-height: 1.2; display: inline-flex; flex: none; }
@media (min-width: 820px) {
    .section-picker { grid-template-columns: 1fr 1fr; }
}

/* Textual result cards (TEXT-001): plain HTML, no disclosure widgets — long
   lists must never hang navigation; scale comes from content, not toggles. */
.category-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}
.category-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: bold;
}
.cat-count { font-weight: 400; opacity: 0.75; }
.category-score { font-weight: bold; color: var(--text); }
.group-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.group-list li { padding: 6px 0; border-top: 1px solid var(--border); line-height: 1.6; }
.group-list li:first-child { border-top: none; padding-top: 2px; }
.group-name { color: var(--text); font-weight: bold; }
.host-list { color: var(--muted); word-break: break-word; }
.host-sep { margin: 0 6px; opacity: 0.45; }
.host-mark { display: inline-flex; align-items: center; margin-left: 5px; vertical-align: -2px; color: var(--muted); }
.host-mark.host-blocked { color: var(--ok, #22c55e); }
.host-mark.host-accessible { color: var(--fail, #ef4444); }

/* Pinterest-style masonry (LAYOUT-003): cards pack column by column, so
   unequal heights never leave holes (the old grid aligned each row to the
   tallest card). Pure CSS columns — no JS, no-JS friendly, DOM order kept;
   visual flow runs down each column like any masonry feed.
   Column ladder: 1 (mobile) → 2 (tablet) → 3 (desktop) → 4 (wide). */
.categories-grid {
    column-count: 1;
    column-gap: 12px;
    margin-top: 12px;
}
.category-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: inline-block; /* Safari only honors break-inside on inline-block */
    width: 100%;
    vertical-align: top;
    margin-bottom: 12px;
}
@media (min-width: 640px) {
    .categories-grid { column-count: 2; }
}
@media (min-width: 900px) {
    .categories-grid { column-count: 3; }
}
@media (min-width: 1400px) {
    /* desktop wide: open the container so the 4th column breathes */
    .wrap { max-width: 1400px; }
    .categories-grid { column-count: 4; }
}

/* Public lists announcement — download + adblocker subscription (LISTS-001) */
.pub-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0 0 6px;
}
.pub-lists-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 820px) {
    .pub-lists-grid { grid-template-columns: 1fr 1fr; }
}
.pub-list {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    background: var(--code);
}
.pub-list a {
    color: var(--accent-2, #60a5fa);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pub-list a:hover { text-decoration: underline; }
.pub-list code {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 11px;
    color: var(--accent, #6ee7b7);
}
.pub-tip { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.55; }

/* ===== Generic docs/list block — vertical tabs (DOCS-001) =====
   Anything publishable: export/list files, per-tool instructions, API promo.
   Tabs are JS-enhanced (html.has-js): vertical on desktop, scroll row on
   mobile; without JS every panel stays visible with its own heading. */
.docs-tabs { display: none; }
html.has-js .docs-split { display: grid; grid-template-columns: 1fr; gap: 14px; }
html.has-js .docs-tabs {
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
html.has-js .docs-tabs::-webkit-scrollbar { display: none; }
.docs-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted, #8b95a7);
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
html.has-js .docs-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
html.has-js .docs-tab[aria-selected="true"] {
    color: var(--accent, #6ee7b7);
    font-weight: 700;
    background: var(--code, #0d1117);
    box-shadow: inset 0 -2px 0 var(--accent, #6ee7b7);
}
html.has-js .doc-panel { display: none; }
html.has-js .doc-panel.active { display: block; }
html.has-js .doc-panel-title { display: none; } /* the tab already carries the title */
.doc-panel-title { font-size: 13px; margin: 14px 0 6px; color: var(--text); }
.doc-example {
    background: var(--code, #0d1117);
    border: 1px solid var(--border, #2a2f36);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 11.5px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
    color: var(--muted, #8b95a7);
    margin: 8px 0;
}
.doc-dl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1px solid var(--border, #2a2f36);
    background: var(--panel, #111317);
    color: var(--accent-2, #60a5fa);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s;
}
.doc-dl:hover { border-color: var(--accent, #6ee7b7); }
.doc-steps { margin: 8px 0; padding-left: 20px; font-size: 12.5px; color: var(--muted, #8b95a7); line-height: 1.65; }
.doc-steps li { margin: 3px 0; }
.doc-steps b, .doc-steps strong { color: var(--text); }
.doc-count { color: var(--accent, #6ee7b7); font-weight: 700; }
.doc-meta { font-size: 11.5px; color: var(--muted, #8b95a7); margin-top: 6px; line-height: 1.55; }
@media (min-width: 820px) {
    html.has-js .docs-split { grid-template-columns: 232px 1fr; }
    html.has-js .docs-tabs { flex-direction: column; overflow: visible; }
    html.has-js .docs-tab { justify-content: flex-start; text-align: left; }
    html.has-js .docs-tab[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent, #6ee7b7); }
}