:root {
    --bg: #fafaf7;
    --fg: #1f1f1f;
    --muted: #6b6b6b;
    --accent: #7a2b2b;
    --code-bg: #2b2b2b;
    --code-fg: #f4f4f4;
    --border: #e3e1d8;
    --table-stripe: #f4f2eb;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main {
    max-width: 880px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

header { margin-bottom: 2.5rem; }

h1 {
    font-size: 2rem;
    margin: 0 0 .5rem;
    color: var(--accent);
}

h2 {
    font-size: 1.2rem;
    margin: 2.5rem 0 .8rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--border);
}

.lede {
    font-size: 1.05rem;
    color: var(--muted);
    margin: 0;
}

p { margin: .6rem 0; }

a { color: var(--accent); }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    background: #efece2;
    padding: 1px 5px;
    border-radius: 3px;
}

pre {
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 1rem 1.1rem;
    border-radius: 5px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
}

pre code { background: none; padding: 0; color: inherit; }

table {
    width: 100%;
    border-collapse: collapse;
    margin: .8rem 0 1.4rem;
    font-size: 14px;
}

th, td {
    padding: .55rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

th {
    background: var(--table-stripe);
    font-weight: 600;
}

tbody tr:nth-child(even) { background: var(--table-stripe); }

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

footer {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}

/* ── installer ── */

.installer dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: .25rem 1rem;
    margin: .5rem 0 1rem;
}
.installer dt { color: var(--muted); }
.installer dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.installer form {
    margin: .6rem 0 1.4rem;
}

.installer button {
    background: var(--accent);
    color: white;
    border: none;
    padding: .55rem 1.1rem;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.installer button.danger { background: #8a1a1a; }

.installer form.nuke {
    margin-top: 1.4rem;
    padding: .8rem 1rem;
    border: 1px dashed #8a1a1a;
    border-radius: 4px;
    background: #fff7f7;
}
.installer form.nuke label {
    display: block;
    margin-bottom: .55rem;
    font-size: 13px;
    color: var(--fg);
}
.installer form.nuke input[type="text"] {
    margin-left: .4rem;
    padding: .35rem .55rem;
    font: inherit;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 110px;
}

.installer button.ghost-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: .45rem .9rem;
    font: inherit;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}
.installer button.ghost-btn:hover { background: var(--accent); color: white; }

.files-table {
    width: 100%;
    font-size: 13px;
}
.files-table th, .files-table td {
    vertical-align: top;
    padding: .55rem .75rem;
}
.files-table tr.disabled td {
    color: var(--muted);
    background: #f7f6f1;
}
.files-table tr.disabled strong { color: var(--muted); }
.files-table button {
    background: var(--accent);
    color: white;
    border: 0;
    padding: .4rem .9rem;
    font: inherit;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
}
.files-table button:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
}
.files-table form { margin: 0; }

.badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.badge.ok       { background: #d8ecd0; color: #2a6a1c; }
.badge.off      { background: #eaeaea; color: #888; }
.badge.missing  { background: #f7d4d4; color: #8a1a1a; }
.badge.fmt-json { background: #d6e4f5; color: #2a4a7a; }
.badge.fmt-md   { background: #f0e3d4; color: #7a522a; }

.installer button:hover { opacity: .9; }

.installer .error pre {
    background: #4a1f1f;
    color: #ffd4d4;
}

.installer .log pre { white-space: pre-wrap; }

/* ── browser (ecosystem dark theme) ── */

/* Kill base-stylesheet leaks: cream `--table-stripe` from the installer
   theme was bleeding through every-other browser row. */
body.browser tbody tr:nth-child(even) { background: transparent; }
body.browser th                       { background: transparent; }

body.browser {
    /* Scoped variables, won't leak to installer */
    --b-bg:          #07070d;
    --b-panel:       #131321;
    --b-panel-top:   #1a1a2d;
    --b-border:      #2a2842;
    --b-text:        #f1edff;
    --b-muted:       #9b92bc;
    --b-faint:       #625b81;
    --b-gold:        #d6b257;
    --b-gold-hi:     #f0d97a;
    --b-gold-soft:   #e2c983;
    --b-violet:      #8b70ff;
    --b-violet-soft: #b29cff;

    /* Re-map the installer/light-theme tokens so generic rules at the top
       of this file pick up the dark palette instead of leaking cream. */
    --border:        var(--b-border);
    --table-stripe:  transparent;
    --bg:            var(--b-bg);
    --fg:            var(--b-text);
    --muted:         var(--b-muted);
    --accent:        var(--b-gold);

    margin: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(110,84,220,0.16), transparent 32%),
        linear-gradient(180deg, #090910 0%, #06060b 100%);
    color: var(--b-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    color-scheme: dark;
}
body.browser main { max-width: none; padding: 0; }

/* Neutralize the generic-table & code styles from the installer light theme
   so they don't paint cream stripes / pale borders inside the browser. */
body.browser table { margin: 0; }
body.browser th, body.browser td {
    background: transparent;
    border-bottom-color: var(--b-border);
}
body.browser tbody tr:nth-child(even) { background: transparent; }
body.browser code {
    background: rgba(139,112,255,0.10);
    border: 1px solid rgba(139,112,255,0.22);
    color: #d3c4ff;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.b-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 14px 28px 0;
    background: linear-gradient(180deg, rgba(13,13,22,.96), rgba(7,7,13,.92));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--b-border);
}

/* Library-specific header accents — a clearly visible top stripe + tinted
   background so you can tell at a glance whether you're browsing the
   2024 SRD or the legacy library, even without reading the chip. */
body.b-ns-2024 .b-header {
    background:
        linear-gradient(180deg, rgba(214,178,87,.10), rgba(13,13,22,.94) 60%, rgba(7,7,13,.92));
    border-top: 3px solid rgba(214,178,87,.7);
    box-shadow: inset 0 12px 28px -16px rgba(214,178,87,.25);
}
body.b-ns-legacy .b-header {
    background:
        linear-gradient(180deg, rgba(139,112,255,.12), rgba(13,13,22,.94) 60%, rgba(7,7,13,.92));
    border-top: 3px solid rgba(139,112,255,.65);
    box-shadow: inset 0 12px 28px -16px rgba(139,112,255,.28);
}
.b-header h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--b-text);
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.b-header h1 a {
    color: var(--b-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.b-header h1 a:hover { color: var(--b-violet-soft); }
.b-brand-logo {
    height: 28px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
.b-sep { color: var(--b-faint); margin: 0 .15rem; font-weight: 600; }

.b-ns-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: middle;
}
.b-ns-chip.b-ns-2024 {
    color: var(--b-gold-soft);
    background: rgba(214,178,87,.12);
    border: 1px solid rgba(214,178,87,.4);
}
.b-ns-chip.b-ns-legacy {
    color: var(--b-violet-soft);
    background: rgba(139,112,255,.14);
    border: 1px solid rgba(139,112,255,.42);
}
.b-ns-chip.b-ns-expanded-chip {
    color: #9be4e3;
    background: rgba(44,124,123,.16);
    border: 1px solid rgba(44,124,123,.5);
}

.b-ns-switch-group {
    display: flex;
    gap: .55rem;
    position: absolute;
    right: 28px;
    top: 14px;
}
.b-ns-switch-group .b-ns-switch { position: static; }

.b-ns-switch {
    position: absolute;
    top: 14px;
    right: 28px;
    color: var(--b-muted);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--b-border);
    padding: .42rem .9rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .02em;
    transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.b-ns-switch:hover {
    color: var(--b-text);
    background: rgba(139,112,255,.1);
    border-color: var(--b-violet);
    transform: translateY(-1px);
}

/* ── Resource tabs ───────────────────────────────────────────────────── */
.b-tabs {
    display: flex;
    gap: 4px;
    margin-top: .85rem;
}
.b-tabs button {
    background: transparent;
    color: var(--b-muted);
    border: 1px solid transparent;
    border-bottom-color: var(--b-border);
    padding: .55rem 1rem;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: lowercase;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all .15s;
}
.b-tabs button:hover {
    color: var(--b-text);
    background: rgba(255,255,255,.04);
}
.b-tabs button.active {
    background: linear-gradient(180deg, rgba(139,112,255,.14), rgba(139,112,255,.04));
    color: var(--b-violet-soft);
    border-color: rgba(139,112,255,.4);
    border-bottom-color: transparent;
}

/* ── Filter bar ─────────────────────────────────────────────────────── */
.b-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .85rem 1.4rem;
    background: rgba(19,19,33,.5);
    border-bottom: 1px solid var(--b-border);
    align-items: center;
}
.b-filters input[type="text"] {
    padding: .48rem .75rem;
    font: inherit;
    font-size: .8rem;
    color: var(--b-text);
    background: rgba(10,10,20,.65);
    border: 1px solid var(--b-border);
    border-radius: 8px;
    min-width: 200px;
    transition: border-color .15s, background .15s;
}
.b-filters input[type="text"]:focus {
    outline: none;
    border-color: var(--b-violet);
    background: rgba(10,10,20,.85);
}
.b-filters input[type="text"]::placeholder { color: var(--b-faint); }
.b-filters button {
    background: linear-gradient(135deg, var(--b-gold-hi) 0%, var(--b-gold) 55%, #b89845 100%);
    color: #1a1208;
    border: 1px solid rgba(214,178,87,.55);
    padding: .48rem 1.05rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.b-filters button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(214,178,87,.3); }
.b-filters button.ghost {
    background: transparent;
    color: var(--b-muted);
    border: 1px solid var(--b-border);
    box-shadow: none;
}
.b-filters button.ghost:hover {
    color: var(--b-text);
    background: rgba(255,255,255,.04);
    border-color: var(--b-violet);
    transform: none;
}
.b-count {
    margin-left: auto;
    color: var(--b-muted);
    font-size: .8rem;
    font-weight: 600;
}

/* ── Main split ─────────────────────────────────────────────────────── */
.b-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    height: calc(100vh - 144px);
}

/* List */
.b-list {
    overflow: auto;
    background: rgba(13,13,22,.35);
    border-right: 1px solid var(--b-border);
}
.b-list table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: .8rem;
}
.b-list thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(26,26,45,.96), rgba(19,19,33,.96));
    color: var(--b-muted);
    cursor: pointer;
    user-select: none;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--b-border);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: left;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: color .15s;
}
.b-list thead th:hover { color: var(--b-text); }
.b-list thead th.sorted { color: var(--b-gold-soft); }
.b-list thead th.sorted::after { content: " ▲"; font-size: 9px; }
.b-list thead th.sorted.desc::after { content: " ▼"; }

.b-list tbody td {
    padding: .5rem .85rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--b-text);
}
.b-list tbody tr {
    cursor: pointer;
    transition: background .12s;
}
.b-list tbody tr:hover { background: rgba(139,112,255,.07); }
.b-list tbody tr.selected {
    background: linear-gradient(90deg, rgba(214,178,87,.14), rgba(214,178,87,.04));
    box-shadow: inset 3px 0 var(--b-gold);
}
.b-list tbody tr.selected td { color: var(--b-text); }

.b-status {
    padding: .9rem 1.2rem;
    color: var(--b-muted);
    font-size: .82rem;
}

/* ── Detail panel ───────────────────────────────────────────────────── */
.b-detail {
    overflow: auto;
    padding: 1.6rem 1.8rem 3rem;
    background: rgba(10,10,20,.25);
}
.b-empty {
    color: var(--b-faint);
    text-align: center;
    margin-top: 4rem;
    font-style: italic;
}
.b-d-head h2 {
    margin: 0 0 .55rem;
    font-family: 'Faculty Glyphic', serif;
    font-size: 1.9rem;
    line-height: 1.05;
    background: linear-gradient(135deg, #ffffff 18%, #d3c4ff 56%, #f0cf7d 92%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border: 0;
    padding: 0;
}
.b-d-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1.4rem;
    font-size: .78rem;
    color: var(--b-muted);
    margin-bottom: 1.3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--b-border);
}
.b-d-meta strong { color: var(--b-faint); font-weight: 600; margin-right: .3rem; }

/* Top row of the detail header: entry name on the left, license chip on
   the right. The chip used to sit inline with the h2 but it crowds long
   names; pinning it top-right keeps the eye on the name first. */
.b-d-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.b-d-head-row > h2 { margin: 0; }
.b-d-head-row > .b-d-license {
    flex-shrink: 0;
    margin-top: .4rem; /* visually align with the baseline of the h2 */
}

/* License chip — appears in the top right of the detail header for rows
   that carry an explicit license string. Color-coded by permissiveness:
   green for CC0 / CC-BY, amber for restrictive (ARR / Custom), neutral for
   the middle ground (CC-BY-SA / OGL / ORC). */
.b-d-license {
    display: inline-block;
    padding: 3px 11px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    vertical-align: middle;
    border: 1px solid var(--b-border);
    background: rgba(255,255,255,.05);
    color: var(--b-text);
}
.b-d-license a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.b-d-license i { margin-right: .35rem; opacity: .8; }
.b-d-license-cc0,
.b-d-license-cc-by-4-0          { color: #9be4ad; background: rgba(111,211,164,.14);  border-color: rgba(111,211,164,.5); }
.b-d-license-cc-by-sa-4-0,
.b-d-license-cc-by-nc-4-0,
.b-d-license-cc-by-nc-sa-4-0,
.b-d-license-ogl-1-0a,
.b-d-license-orc                { color: #ffd57a; background: rgba(255,170,40,.14);   border-color: rgba(255,170,40,.5); }
.b-d-license-custom,
.b-d-license-arr                { color: #ff9aa6; background: rgba(255,120,140,.16);  border-color: rgba(255,120,140,.5); }
.b-d-meta code {
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(139,112,255,.18);
    color: #d3c4ff;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
}

/* Display-mode toggle row (All | Properties | JSON | MD). Picks up the
   library accent color so it visually ties back to the header stripe. */
.b-d-view {
    display: inline-flex;
    gap: 2px;
    margin: 1rem 0 .25rem;
    border: 1px solid var(--b-border);
    border-radius: 7px;
    padding: 2px;
    background: rgba(0,0,0,.22);
}
.b-d-view button {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 14px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--b-muted);
    cursor: pointer;
    transition: background .14s, color .14s;
}
.b-d-view button:hover { color: var(--b-text); background: rgba(255,255,255,.04); }
body.b-ns-2024  .b-d-view button.active { background: rgba(214,178,87,.18); color: var(--b-gold-soft);   box-shadow: inset 0 0 0 1px rgba(214,178,87,.45); }
body.b-ns-legacy .b-d-view button.active { background: rgba(139,112,255,.18); color: var(--b-violet-soft); box-shadow: inset 0 0 0 1px rgba(139,112,255,.45); }

/* Rendered markdown body in detail pane. */
.b-d-md {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--b-text);
}
.b-d-md > * { margin: 0; }
.b-d-md > * + * { margin-top: .7em; }
.b-detail .b-d-md h1,
.b-detail .b-d-md h2,
.b-detail .b-d-md h3,
.b-detail .b-d-md h4 {
    font-weight: 700;
    line-height: 1.25;
    margin-top: 1em;
    color: var(--b-text);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 0;
    padding-bottom: 0;
}
.b-detail .b-d-md h1 { font-size: 1.5rem; font-family: 'Faculty Glyphic', serif; }
.b-detail .b-d-md h2 { font-size: 1.2rem; font-family: 'Faculty Glyphic', serif; }
.b-detail .b-d-md h3 { font-size: 1.02rem; }
.b-d-md ul, .b-d-md ol { padding-left: 1.4em; }
.b-d-md table {
    border-collapse: collapse;
    font-size: .85em;
    margin: .5em 0;
}
.b-d-md th, .b-d-md td {
    border: 1px solid var(--b-border);
    padding: 4px 9px;
    text-align: left;
}
.b-d-md th { background: rgba(255,255,255,.04); font-weight: 700; }
.b-d-md code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    background: rgba(0,0,0,.32);
    padding: 1px 5px;
    border-radius: 3px;
}
.b-d-md blockquote {
    border-left: 3px solid rgba(214,178,87,.4);
    margin-left: 0;
    padding-left: .9em;
    color: var(--b-muted);
}
.b-d-md-fallback { opacity: .92; }
.b-d-md-fallback .muted { color: var(--b-muted); font-size: .8rem; margin-bottom: .4rem; }

.b-detail h3 {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--b-muted);
    margin: 1.6rem 0 .6rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--b-border);
    font-weight: 800;
}

/* Properties */
.b-d-props {
    width: auto;
    font-size: .82rem;
    border-collapse: collapse;
}
.b-d-props th {
    text-align: left;
    background: transparent;
    color: var(--b-muted);
    font-weight: 600;
    padding: .35rem 1.4rem .35rem 0;
    border: 0;
    white-space: nowrap;
    vertical-align: top;
}
.b-d-props td { padding: .35rem 0; border: 0; color: var(--b-text); }

/* Description */
.b-d-desc {
    background: linear-gradient(180deg, rgba(27,27,45,.55), rgba(17,17,29,.65));
    border: 1px solid var(--b-border);
    padding: 1rem 1.25rem;
    border-radius: 11px;
    white-space: pre-wrap;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--b-text);
}

/* Raw JSON */
.b-d-json {
    font-size: .72rem;
    background: transparent;
    border: 0;
    color: #e3dbff;
    padding: 0;
    border-radius: 0;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Detail image */
.b-d-image img {
    max-width: 100%;
    max-height: 480px;
    height: auto;
    border: 1px solid var(--b-border);
    border-radius: 10px;
    background: rgba(0,0,0,.4);
}
.b-d-image .muted {
    margin-top: .55rem;
    word-break: break-all;
    font-size: .68rem;
    color: var(--b-faint);
}
.b-d-image code {
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(139,112,255,.18);
    color: #d3c4ff;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
}

/* Scrollbars (dark) */
body.browser ::-webkit-scrollbar { width: 10px; height: 10px; }
body.browser ::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
body.browser ::-webkit-scrollbar-thumb {
    background: rgba(139,112,255,.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
body.browser ::-webkit-scrollbar-thumb:hover { background: rgba(139,112,255,.32); background-clip: padding-box; }

/* ── SRD 5.2 theme override ───────────────────────────────────────────────
   The browser shell was originally built around a violet palette. For the
   2024 SRD library we re-tint everything — ambient page background, panel
   borders, interactive states — to gold so the UI reads as a cohesive gold
   theme instead of "gold header + violet body". The Legacy library keeps
   the violet baseline untouched. */
body.b-ns-2024 {
    --b-violet:      var(--b-gold);
    --b-violet-soft: var(--b-gold-soft);
    /* Warm-tinted border replaces the violet-cast `#2a2842` so every divider
       (table headers, panel splits, focus rings) carries the gold accent. */
    --b-border:      #3a3320;
    /* Warm-tinted faint replaces the violet-cast `#625b81` — used by input
       placeholders, breadcrumb separators, and the meta strong labels. */
    --b-faint:       #7a6b3d;
    /* Warm muted replaces the violet-cast `#9b92bc` — used by inactive tab
       labels, the Clear button, status text, column header text. */
    --b-muted:       #b9a974;
    /* Ambient page background: warm radial bleed from top + slight panel
       tint so the gold theme is felt before any single element is focused. */
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(214,178,87,0.16), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(214,178,87,0.05), transparent 40%),
        linear-gradient(180deg, #0d0a06 0%, #0a0805 100%) !important;
}
body.b-ns-2024 .b-panel-top                    { background: #1f1a10; }
body.b-ns-2024 .b-filters                      { background: rgba(33,28,16,.55); border-bottom-color: rgba(214,178,87,.22); }
body.b-ns-2024 .b-filters input                { background: rgba(20,16,8,.7); border-color: rgba(214,178,87,.22); }
body.b-ns-2024 .b-filters input:focus          { background: rgba(20,16,8,.9); border-color: var(--b-gold); box-shadow: 0 0 0 3px rgba(214,178,87,.16); }
body.b-ns-2024 .b-list                         { background: rgba(22,18,10,.45); border-right-color: rgba(214,178,87,.18); }
body.b-ns-2024 .b-list thead th                {
    background: linear-gradient(180deg, rgba(45,38,20,.96), rgba(33,28,16,.96));
    color: var(--b-gold-soft);
    border-bottom-color: rgba(214,178,87,.32);
}
body.b-ns-2024 .b-header h1 a:hover            { color: var(--b-gold-soft); }
body.b-ns-2024 .b-ns-switch                    { border-color: rgba(214,178,87,.4); color: var(--b-gold-soft); }
body.b-ns-2024 .b-ns-switch:hover              { border-color: rgba(214,178,87,.7); background: rgba(214,178,87,.08); }
body.b-ns-2024 .b-tabs button:hover            { color: var(--b-gold-soft); background: rgba(214,178,87,.08); }
body.b-ns-2024 .b-tabs button.active           {
    background: linear-gradient(180deg, rgba(214,178,87,.22), rgba(214,178,87,.08));
    border-color: rgba(214,178,87,.55);
    color: var(--b-gold-soft);
}
body.b-ns-2024 .b-list tbody tr                { border-bottom-color: rgba(214,178,87,.08); }
body.b-ns-2024 .b-list tbody tr:hover          { background: rgba(214,178,87,.10); }
body.b-ns-2024 .b-list tbody tr.selected       { background: linear-gradient(90deg, rgba(214,178,87,.22), rgba(214,178,87,.06)); }
body.b-ns-2024 .b-d-meta code                  { border-color: rgba(214,178,87,.28); color: var(--b-gold-soft); }
body.b-ns-2024 thead th.sorted                 { color: var(--b-gold-soft); }
body.b-ns-2024 .b-d-md blockquote              { border-left-color: rgba(214,178,87,.5); }
body.b-ns-2024 code                            { background: rgba(214,178,87,.10); border-color: rgba(214,178,87,.28); color: var(--b-gold-soft); }
body.b-ns-2024 ::-webkit-scrollbar-thumb       { background: rgba(214,178,87,.22); }
body.b-ns-2024 ::-webkit-scrollbar-thumb:hover { background: rgba(214,178,87,.36); }

/* ── 2024 Expanded theme override ─────────────────────────────────────────
   Third library (SRD baseline + approved homebrew) gets a teal accent so
   it reads as visually distinct from the gold SRD 5.2 and violet Legacy
   browsers. Same approach as the gold override above: variable swap +
   targeted overrides for hardcoded rgba rules. */
body.b-ns-expanded {
    --b-violet:      #2c7c7b;
    --b-violet-soft: #9be4e3;
    --b-border:      #1c3331;
    --b-faint:       #4d7574;
    --b-muted:       #8ebab8;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(44,124,123,0.20), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(44,124,123,0.05), transparent 40%),
        linear-gradient(180deg, #06100f 0%, #050a0a 100%) !important;
}
body.b-ns-expanded .b-header {
    background:
        linear-gradient(180deg, rgba(44,124,123,.14), rgba(13,13,22,.94) 60%, rgba(7,7,13,.92));
    border-top: 3px solid rgba(44,124,123,.7);
    box-shadow: inset 0 12px 28px -16px rgba(44,124,123,.28);
}
body.b-ns-expanded .b-filters                      { background: rgba(16,28,28,.55); border-bottom-color: rgba(44,124,123,.22); }
body.b-ns-expanded .b-filters input                { background: rgba(8,16,16,.7); border-color: rgba(44,124,123,.22); }
body.b-ns-expanded .b-filters input:focus          { background: rgba(8,16,16,.9); border-color: var(--b-violet); box-shadow: 0 0 0 3px rgba(44,124,123,.18); }
body.b-ns-expanded .b-list                         { background: rgba(10,20,20,.45); border-right-color: rgba(44,124,123,.18); }
body.b-ns-expanded .b-list thead th                {
    background: linear-gradient(180deg, rgba(20,40,40,.96), rgba(16,28,28,.96));
    color: var(--b-violet-soft);
    border-bottom-color: rgba(44,124,123,.32);
}
body.b-ns-expanded .b-ns-switch                    { border-color: rgba(44,124,123,.4); color: var(--b-violet-soft); }
body.b-ns-expanded .b-ns-switch:hover              { border-color: rgba(44,124,123,.7); background: rgba(44,124,123,.08); }
body.b-ns-expanded .b-tabs button:hover            { color: var(--b-violet-soft); background: rgba(44,124,123,.08); }
body.b-ns-expanded .b-tabs button.active           {
    background: linear-gradient(180deg, rgba(44,124,123,.22), rgba(44,124,123,.08));
    border-color: rgba(44,124,123,.55);
    color: var(--b-violet-soft);
}
body.b-ns-expanded .b-list tbody tr                { border-bottom-color: rgba(44,124,123,.08); }
body.b-ns-expanded .b-list tbody tr:hover          { background: rgba(44,124,123,.10); }
body.b-ns-expanded .b-list tbody tr.selected       { background: linear-gradient(90deg, rgba(44,124,123,.22), rgba(44,124,123,.06)); box-shadow: inset 3px 0 var(--b-violet); }
body.b-ns-expanded .b-d-meta code                  { border-color: rgba(44,124,123,.28); color: var(--b-violet-soft); }
body.b-ns-expanded .b-d-md blockquote              { border-left-color: rgba(44,124,123,.5); }
body.b-ns-expanded code                            { background: rgba(44,124,123,.10); border-color: rgba(44,124,123,.28); color: var(--b-violet-soft); }
body.b-ns-expanded ::-webkit-scrollbar-thumb       { background: rgba(44,124,123,.22); }
body.b-ns-expanded ::-webkit-scrollbar-thumb:hover { background: rgba(44,124,123,.36); }
body.b-ns-expanded .b-filters button               {
    background: linear-gradient(135deg, #9be4e3 0%, #2c7c7b 60%, #1f5a59 100%);
    color: #08201f;
    border-color: rgba(44,124,123,.55);
}
body.b-ns-expanded .b-filters button:hover         { box-shadow: 0 4px 14px rgba(44,124,123,.3); }
body.b-ns-expanded .b-d-view button.active         { background: rgba(44,124,123,.22); color: var(--b-violet-soft); box-shadow: inset 0 0 0 1px rgba(44,124,123,.55); }

@media (max-width: 900px) {
    .b-main { grid-template-columns: 1fr; height: auto; }
    .b-list { max-height: 50vh; }
    .b-ns-switch { position: static; display: inline-block; margin-top: .55rem; }
}