:root {
  --bg: #faf7f0; --panel: #fffdf8; --ink: #23201b; --muted: #6f6a5e;
  --accent: #7a1f1f; --accent2: #1f4d7a; --line: #ddd5c3; --chip: #efe8d8;
}
body.dark {
  --bg: #17181c; --panel: #1f2126; --ink: #e8e4da; --muted: #a49c8c;
  --accent: #e08a8a; --accent2: #8ab6e0; --line: #3a3d44; --chip: #2b2e35;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; line-height: 1.55; }
.topbar { position: sticky; top: 0; background: var(--panel); border-bottom: 2px solid var(--accent); z-index: 10; }
.topbar-inner { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: .55rem 1rem; max-width: 1200px; margin: 0 auto; }
.brand { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.badge { background: var(--accent); color: #fff; border-radius: 999px; padding: .05rem .55rem; font-size: .72rem; vertical-align: middle; }
body.dark .badge { color: #17181c; }
.topbar-tools { display: flex; gap: .4rem; align-items: center; }
input, select, button { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: .4rem; padding: .35rem .55rem; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
#global-search { min-width: min(320px, 55vw); }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; padding: 0 1rem .5rem; max-width: 1200px; margin: 0 auto; }
.tab { border: none; background: transparent; padding: .35rem .7rem; border-radius: .5rem .5rem 0 0; }
.tab.active { background: var(--chip); font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); }
main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.tabpage { display: none; } .tabpage.active { display: block; }
.muted { color: var(--muted); font-size: .92rem; }
.hidden { display: none !important; }
.compendium-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 820px) { .compendium-layout, .grid2 { grid-template-columns: 1fr !important; } }
.side { background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; padding: .7rem; position: sticky; top: 118px; max-height: calc(100vh - 135px); display: flex; flex-direction: column; }
.cats { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.cat { font-size: .88rem; } .cat.active { background: var(--accent); color: #fff; border-color: var(--accent); }
body.dark .cat.active { color: #17181c; }
.filters { display: grid; gap: .35rem; }
.count { margin: .45rem 0; }
.entry-list { overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.entry-list li { padding: .32rem .45rem; border-radius: .35rem; cursor: pointer; display: flex; justify-content: space-between; gap: .5rem; }
.entry-list li:hover { background: var(--chip); }
.entry-list li.active { background: var(--chip); box-shadow: inset 3px 0 0 var(--accent); }
.entry-list .tag { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.detail { background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; padding: 1rem 1.2rem; min-height: 300px; }
.detail h2 { margin-top: .2rem; color: var(--accent); }
.statline { font-style: italic; color: var(--muted); }
.statgrid { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; border-block: 1px solid var(--line); padding: .4rem 0; margin: .6rem 0; }
.statgrid b { display: block; font-size: .78rem; letter-spacing: .05em; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: .12rem .6rem; font-size: .88rem; }
button.chip:hover { border-color: var(--accent2); color: var(--accent2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; padding: 1rem; display: grid; gap: .55rem; align-content: start; }
.card h3, .card h4 { margin: .35rem 0 0; color: var(--accent); }
label { display: grid; gap: .2rem; font-size: .92rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; } .row > * { flex: 1; min-width: 120px; }
.abilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ability { border: 1px solid var(--line); border-radius: .5rem; padding: .45rem; text-align: center; }
.ability b { font-size: .8rem; letter-spacing: .06em; }
.ability input { width: 100%; text-align: center; font-size: 1.1rem; }
.ability .mod { font-size: 1.25rem; font-weight: 700; }
.ability .bonus { color: var(--muted); font-size: .8rem; min-height: 1em; }
.pointbuy.ok { color: #2e7d32; } .pointbuy.over { color: var(--accent); font-weight: 700; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .45rem; }
.kv .cell { border: 1px solid var(--line); border-radius: .5rem; padding: .4rem; text-align: center; }
.kv .cell b { display: block; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kv .cell span { font-size: 1.2rem; font-weight: 700; }
table { border-collapse: collapse; width: 100%; } th, td { border-bottom: 1px solid var(--line); padding: .3rem .45rem; text-align: left; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .8rem; }
.skill { display: flex; justify-content: space-between; gap: .5rem; padding: .18rem .3rem; border-radius: .3rem; cursor: pointer; }
.skill:hover { background: var(--chip); } .skill .p { color: var(--accent); width: 1em; }
.enc-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .35rem; flex-wrap: wrap; }
.enc-row input[type=number] { width: 5.2rem; } .enc-row .grow { flex: 1; min-width: 110px; }
.verdict { font-size: 1.3rem; font-weight: 700; }
.verdict.deadly, .lazy-bad { color: var(--accent); } .lazy-ok { color: #2e7d32; }
body.dark .lazy-ok, body.dark .pointbuy.ok { color: #8fd18f; }
.import-label input { display: none; }
.import-label { border: 1px solid var(--line); border-radius: .4rem; padding: .35rem .55rem; cursor: pointer; text-align: center; }
footer { max-width: 1200px; margin: 0 auto; padding: 0 1rem 2rem; }
@media print { .topbar, .side, .tabs { display: none; } .detail, .card { border: none; } }