:root {
    --bg:        #0e0d13;
    --bg-raise:  #17151f;
    --panel:     #1d1a27;
    --ink:       #e8e2d4;
    --ink-soft:  #b3aa97;
    --gold:      #c8a04f;
    --gold-soft: #e3c889;
    --ember:     #b5471f;
    --line:      #322c40;
    --good:      #6fae6a;
    --shadow:    0 14px 40px rgba(0,0,0,.55);
    --radius:    14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(1200px 700px at 50% -10%, #1c1830 0%, var(--bg) 60%);
    color: var(--ink);
    font-family: 'Spectral', Georgia, serif;
    font-size: 17px;
    line-height: 1.6;
}

.aurora {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(600px 300px at 15% 0%, rgba(200,160,79,.10), transparent 70%),
        radial-gradient(500px 300px at 85% 10%, rgba(181,71,31,.10), transparent 70%);
}

.site-header, .stepper, .site-footer { position: relative; z-index: 1; }
/* Above the footer so the fixed detail drawer + scrim (which live inside
   .content's stacking context) overlay it instead of being covered by it. */
.content { position: relative; z-index: 2; }

/* ---------- Header ---------- */
.site-header { text-align: center; padding: 2.4rem 1rem .6rem; }
.brand {
    font-family: 'Cinzel', serif; font-weight: 700;
    font-size: 2rem; letter-spacing: .06em;
    color: var(--gold-soft); text-decoration: none;
    text-shadow: 0 2px 18px rgba(200,160,79,.25);
}
.brand-mark { color: var(--gold); }
.tagline { margin: .35rem 0 0; color: var(--ink-soft); font-style: italic; letter-spacing: .03em; }

/* ---------- Stepper ---------- */
.wizard-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    max-width: 1000px; margin: 1.2rem auto 0; padding: 0 1rem;
}
.wizard-leave {
    color: var(--ink-soft); text-decoration: none; font-size: .85rem; letter-spacing: .02em;
    padding: .3rem .6rem; border: 1px solid var(--line); border-radius: .5rem; transition: all .15s;
}
.wizard-leave:hover { color: var(--gold-soft); border-color: var(--gold); }
.wizard-saved { color: var(--ink-soft); font-size: .76rem; font-style: italic; opacity: .8; }
@media print { .wizard-bar { display: none; } }

.stepper {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem;
    max-width: 1000px; margin: 1.4rem auto 0; padding: 0 1rem;
}
.stepper-node {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .8rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg-raise);
    color: var(--ink-soft); text-decoration: none; font-size: .82rem;
    transition: border-color .2s, color .2s, transform .2s;
}
a.stepper-node:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--ink); }
.stepper-num {
    display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
    border-radius: 50%; background: #0000003a; font-family: 'Cinzel', serif; font-size: .8rem;
}
.stepper-node.active { border-color: var(--gold); color: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold) inset; }
.stepper-node.active .stepper-num { background: var(--gold); color: #1b1505; }
.stepper-node.done { color: var(--ink); }
.stepper-node.done .stepper-num { background: var(--good); color: #0c1a0b; }
.stepper-node.todo { opacity: .6; }
.stepper-label { letter-spacing: .02em; }

/* ---------- Content ---------- */
.content { max-width: 75vw; margin: 2.2rem auto; padding: 0 1.2rem; }
.step-intro h1 { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.9rem; margin: 0 0 .5rem; }
.step-intro p { color: var(--ink-soft); max-width: 64ch; }

.alert {
    background: rgba(181,71,31,.14); border: 1px solid var(--ember);
    color: var(--gold-soft); padding: .7rem 1rem; border-radius: 10px;
}

/* ---------- Source banners (Core open, supplements/settings/UA collapsed) ---------- */
.source-banner { border: 1px solid var(--line); border-radius: var(--radius); margin: 1rem 0; background: var(--bg-raise); overflow: hidden; }
.source-banner > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem;
    padding: .8rem 1.1rem; font-family: 'Cinzel', serif; color: var(--gold-soft); letter-spacing: .03em;
}
.source-banner > summary::-webkit-details-marker { display: none; }
.source-banner > summary::before { content: '\25B8'; color: var(--gold); transition: transform .18s; }
.source-banner[open] > summary::before { transform: rotate(90deg); }
.banner-title { flex: 1; }
.banner-count {
    font-family: 'Spectral', serif; font-size: .8rem; color: var(--ink-soft);
    background: #0000002e; border: 1px solid var(--line); border-radius: 999px; padding: .05rem .55rem;
}
.source-banner .card-grid { margin: 0; padding: 0 1rem 1.1rem; }

/* ---------- Class cards ---------- */
.card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem; margin: 1.6rem 0;
}
.pick-card {
    position: relative; display: block; cursor: pointer;
    background: linear-gradient(180deg, var(--bg-raise), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.1rem 1.2rem; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.pick-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow); }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card.is-selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold) inset, 0 12px 30px rgba(200,160,79,.18);
}
.pick-card.is-selected::after {
    content: '\2713'; position: absolute; top: .7rem; right: .8rem;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--gold); color: #1b1505; display: grid; place-items: center; font-size: .9rem;
}
.pick-card h3 {
    font-family: 'Cinzel', serif; margin: 0 0 .7rem; font-size: 1.25rem;
    color: var(--gold-soft); letter-spacing: .03em;
}
.stat-row { display: grid; gap: .3rem; margin: 0; }
.stat-row > div { display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px dotted var(--line); padding-bottom: .25rem; }
.stat-row dt { color: var(--ink-soft); font-size: .82rem; margin: 0; flex: 0 0 auto; }
.stat-row dd { margin: 0; font-weight: 600; min-width: 0; text-align: right; overflow-wrap: break-word; word-break: break-word; }
.complexity {
    display: inline-block; margin-top: .8rem; padding: .2rem .6rem;
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft);
}
.complexity-low    { border-color: #3f6f3a; color: #9fd09a; }
.complexity-average{ border-color: #6f5f2f; color: var(--gold-soft); }
.complexity-high   { border-color: #6f3a2f; color: #e0a08a; }

/* ---------- Controls ---------- */
.step-controls {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem;
    border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.level-field { display: flex; flex-direction: column; gap: .35rem; color: var(--ink-soft); font-size: .9rem; }
.level-field input {
    width: 6rem; padding: .55rem .7rem; font-size: 1.1rem; font-family: 'Cinzel', serif;
    background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
}
.level-field input:focus { outline: none; border-color: var(--gold); }
.btn-primary {
    font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: .04em; cursor: pointer;
    color: #1b1505; text-decoration: none; padding: .7rem 1.5rem; border: none; border-radius: 10px;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    box-shadow: 0 8px 22px rgba(200,160,79,.28); transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,160,79,.4); }
.btn-ghost {
    font-family: 'Cinzel', serif; font-size: .9rem; letter-spacing: .03em; cursor: pointer;
    color: var(--ink-soft); text-decoration: none; padding: .7rem 1.2rem; border-radius: 10px;
    border: 1px solid var(--line); background: transparent; transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--ink); }

/* Species card tags */
.card-tags { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; flex-wrap: wrap; }
.src-badge {
    font-size: .68rem; letter-spacing: .06em; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem;
}
.subrace-badge {
    font-size: .68rem; letter-spacing: .04em; color: var(--gold-soft);
    border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; background: rgba(200,160,79,.08);
}

.saved-note { color: var(--ink); }
.saved-note strong { color: var(--gold-soft); }

/* ---------- Inline tag styling (from TagRenderer) ---------- */
.tag-ref { color: var(--gold-soft); border-bottom: 1px dotted var(--gold); cursor: pointer; }
.tag-ref:hover { border-bottom-style: solid; background: rgba(200,160,79,.1); }
.tag-nav { color: inherit; } /* filter/book/location link — plain, not clickable */

/* Reference popover (global; opened from any .tag-ref, stackable, X to close) */
.ref-pop {
    position: absolute; z-index: 1000; width: 22rem; max-width: calc(100vw - 1rem); max-height: 22rem;
    overflow-y: auto; background: var(--bg-raise); border: 1px solid var(--gold);
    border-radius: 10px; padding: .8rem .9rem; box-shadow: 0 14px 38px rgba(0,0,0,.55);
    font-size: .88rem; color: var(--ink);
}
.ref-close {
    position: absolute; top: .35rem; right: .45rem; background: none; border: none;
    color: var(--ink-soft); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .1rem .25rem;
}
.ref-close:hover { color: var(--gold-soft); }
.ref-pop-head { border-bottom: 1px solid var(--line); padding-bottom: .35rem; margin-bottom: .4rem; padding-right: 1.2rem; }
.ref-pop-head strong { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1rem; }
.ref-sub { display: block; color: var(--ink-soft); font-size: .76rem; font-style: italic; margin-top: .1rem; }
.ref-meta { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: 0 0 .5rem; }
.ref-meta div { display: contents; }
.ref-meta dt { color: var(--gold); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.ref-meta dd { margin: 0; color: var(--ink); font-size: .82rem; }
.ref-body p { margin: .3rem 0; }
.ref-body p:first-child { margin-top: 0; }
.ref-body .entry-table { font-size: .8rem; }
.ref-list { columns: 2; column-gap: 1.2rem; margin: .2rem 0 0; padding-left: 1.1rem; }
.ref-list li { font-size: .85rem; padding: .08rem 0; break-inside: avoid; }
.ref-abils { color: var(--ink-soft); font-size: .8rem; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.entry-img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: .5rem 0; border: 1px solid var(--line); }
.tag-dice, .tag-bonus, .tag-dc { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.tag-note { color: var(--ink-soft); font-style: italic; }
/* Fail-loud markers for unhandled data shapes (see EntryRenderer/TagRenderer) */
.tag-unknown { border-bottom: 1px dotted var(--ember); cursor: help; }
.entry-unhandled {
    display: inline-block; margin: .3rem 0; padding: .2rem .55rem; border-radius: 6px;
    background: rgba(181,71,31,.14); border: 1px solid var(--ember); color: var(--gold-soft);
    font-size: .82rem;
}
.entry-unhandled code { color: #e0a08a; }
.entry-ref { color: var(--gold-soft); font-style: italic; margin: .3rem 0; }
.entry-ref::before { content: '\25B8 '; color: var(--gold); }

/* ---------- Card cue ---------- */
.card-cue {
    display: block; margin-top: .8rem; font-size: .78rem; letter-spacing: .04em;
    color: var(--gold); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s;
}
.pick-card:hover .card-cue, .pick-card.is-selected .card-cue { opacity: 1; transform: none; }

/* ---------- Detail drawer ---------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(6,5,10,.6); backdrop-filter: blur(2px); }
.drawer {
    position: fixed; top: 0; right: 0; z-index: 50; height: 100vh; width: min(560px, 94vw);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #161320, #100e17);
    border-left: 1px solid var(--gold); box-shadow: -20px 0 60px rgba(0,0,0,.6);
    transform: translateX(102%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
    transition: transform .28s cubic-bezier(.22,.61,.36,1), width .25s ease;
}
.drawer.open { transform: none; }
.drawer-close {
    position: absolute; top: .7rem; right: 2rem; z-index: 2;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer;
    background: #0000003a; border: 1px solid var(--line); color: var(--ink); font-size: 1.4rem; line-height: 1;
}
.drawer-close:hover { border-color: var(--gold); color: var(--gold-soft); }
.drawer-body { overflow-y: auto; padding: 2rem 2rem 1rem; flex: 1; }
.drawer-foot { padding: 1rem 2rem; border-top: 1px solid var(--line); background: #0000002e; }
.drawer-loading { color: var(--ink-soft); font-style: italic; }

/* Expand / collapse tab on the drawer's left edge */
.drawer.is-expanded { width: 100vw; }
.drawer.is-expanded .drawer-body { padding-left: max(2rem, 4vw); padding-right: max(2rem, 4vw); }
.drawer.is-expanded .detail-facts { grid-template-columns: repeat(4, 1fr); }
.drawer.is-expanded .drawer-foot { text-align: center; }

.drawer-expand {
    position: absolute; left: .5rem; top: 50%; z-index: 2;
    transform: translate(-100%, -50%);          /* hangs off the left edge */
    width: 1.7rem; height: 3.6rem; cursor: pointer;
    background: var(--bg-raise); color: var(--gold-soft);
    border: 1px solid var(--gold); border-right: 0; border-radius: 10px 0 0 10px;
    font-size: 1.4rem; line-height: 1;
    transition: background .15s, color .15s;
}
.drawer-expand:hover { background: var(--panel); color: var(--gold); }
.drawer:not(.open) .drawer-expand { visibility: hidden; }   /* no sliver while closed */

.drawer.is-expanded .drawer-expand {
    transform: translate(0, -50%);              /* tuck inside when full width */
    border-right: 1px solid var(--gold); border-left: 0; border-radius: 0 10px 10px 0;
}

@media (max-width: 700px) { .drawer-expand { display: none; } }  /* already ~full width */
.detail-head { display: flex; align-items: baseline; gap: .8rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.detail-head h2 { font-family: 'Cinzel', serif; color: var(--gold-soft); margin: 0; font-size: 1.7rem; }
.detail-source { color: var(--ink-soft); font-size: .8rem; letter-spacing: .08em; }
.detail-description { color: var(--ink-soft); margin: 1rem 0; }
.detail-description p { margin: 0 0 .7rem; }

.detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; }
.detail-facts .fact {
    display: flex; flex-direction: column; gap: .15rem; padding: .55rem .7rem;
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px;
}
.fact-k { color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.fact-v { color: var(--ink); font-weight: 600; }

.detail-profs { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 1rem 0; }
.detail-profs dt { color: var(--gold-soft); font-weight: 600; }
.detail-profs dd { margin: 0; color: var(--ink); }
.muted { color: var(--ink-soft); }

.detail-subclass {
    background: rgba(200,160,79,.08); border: 1px solid var(--line);
    border-left: 3px solid var(--gold); padding: .6rem .9rem; border-radius: 8px; color: var(--ink);
}
.detail-features h3, .detail-subclasses h3 {
    font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.1rem;
    border-bottom: 1px solid var(--line); padding-bottom: .4rem; margin: 1.6rem 0 1rem;
}
.detail-features h3 .count, .detail-subclasses h3 .count { color: var(--ink-soft); font-family: 'Spectral', serif; font-size: .8rem; }
.feature { margin: .4rem 0 1rem; }
.feature h4 { font-family: 'Cinzel', serif; color: var(--gold); margin: 0 0 .4rem; font-size: 1.05rem; }
.feature-body p { margin: 0 0 .6rem; }

/* ---------- Collapsible per-level blocks ---------- */
.lvl-block { border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; background: var(--bg-raise); overflow: hidden; }
.lvl-block > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
    padding: .6rem .8rem; user-select: none;
}
.lvl-block > summary::-webkit-details-marker { display: none; }
.lvl-block > summary::before {
    content: '\25B8'; color: var(--gold); transition: transform .18s; flex: 0 0 auto;
}
.lvl-block[open] > summary::before { transform: rotate(90deg); }
.lvl-badge {
    flex: 0 0 auto; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .04em;
    background: var(--gold); color: #1b1505; padding: .12rem .5rem; border-radius: 999px;
}
.lvl-badge.sm { background: #0000003a; color: var(--gold-soft); border: 1px solid var(--line); }
.lvl-names { color: var(--ink); font-size: .9rem; flex: 1; }
.lock-note { color: var(--ink-soft); font-size: .72rem; font-style: italic; flex: 0 0 auto; }
.lvl-block > .feature { padding: 0 .9rem; }
.lvl-block > .feature:last-child { padding-bottom: .8rem; }
.lvl-block.locked { opacity: .58; }
.lvl-block.locked .lvl-badge { background: #4a4456; color: var(--ink-soft); }
.lvl-block.locked:hover { opacity: .85; }
/* The subclass-choice level: always prominent, never dimmed. */
.lvl-block.choice { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 10px 26px rgba(200,160,79,.12); }
.lvl-block.choice > summary { background: rgba(200,160,79,.08); }
.choose-note { color: var(--gold-soft); font-size: .72rem; font-style: italic; letter-spacing: .03em; flex: 0 0 auto; }

/* Nested subclass picker inside the choice block */
.lvl-block > .subclass-picker { padding: .2rem .9rem 1rem; }
.subclass-picker-head {
    font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .98rem;
    margin: .6rem 0 .2rem; padding-top: .8rem; border-top: 1px solid var(--line);
}
.subclass-picker-head .count { color: var(--ink-soft); font-family: 'Spectral', serif; font-size: .8rem; }
.sc-tag {
    font-family: 'Spectral', serif; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--gold-soft); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem; margin-left: .4rem; vertical-align: middle;
}

/* ---------- Subclass list ---------- */
.subclass-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.subclass-toggle {
    width: 100%; display: flex; align-items: center; gap: .6rem; cursor: pointer; text-align: left;
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .8rem; color: var(--ink);
    transition: border-color .15s, background .15s;
}
.subclass-toggle:hover { border-color: var(--gold); }
.subclass-item.open > .subclass-toggle { border-color: var(--gold); background: rgba(200,160,79,.08); }
.sc-name { flex: 1; font-weight: 600; }
.sc-src { color: var(--ink-soft); font-size: .72rem; letter-spacing: .06em; }
.sc-caret { color: var(--gold); transition: transform .18s; }
.subclass-item.open .sc-caret { transform: rotate(90deg); }
.subclass-body { padding: .4rem .2rem .6rem; }
.sc-level { display: flex; gap: .6rem; margin: .5rem 0; }
.sc-level-body { flex: 1; }
.sc-level-body h5 { font-family: 'Cinzel', serif; color: var(--gold); margin: .2rem 0 .3rem; font-size: .95rem; }

/* ---------- Subrace picker (Step 2 drawer) ---------- */
.fact-wide { grid-column: 1 / -1; }
.subrace-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.subrace-item { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise); overflow: hidden; }
.subrace-item:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.subrace-pick { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; cursor: pointer; }
.subrace-pick input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.subrace-name { flex: 1; font-weight: 600; font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .98rem; }
.subrace-ability { color: var(--ink-soft); font-size: .8rem; }
.subrace-more { border-top: 1px solid var(--line); }
.subrace-more > summary {
    list-style: none; cursor: pointer; padding: .4rem .8rem; color: var(--ink-soft); font-size: .82rem;
}
.subrace-more > summary::-webkit-details-marker { display: none; }
.subrace-more > summary::before { content: '\25B8 '; color: var(--gold); }
.subrace-more[open] > summary::before { content: '\25BE '; }
.subrace-more .feature-body { padding: 0 .8rem .7rem; }
.ancestry-select {
    width: 100%; padding: .6rem .7rem; font-family: 'Spectral', serif; font-size: 1rem;
    color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
.ancestry-select:focus { outline: none; border-color: var(--gold); }
.ability-note {
    display: flex; gap: .5rem; align-items: flex-start;
    background: rgba(200,160,79,.08); border: 1px solid var(--line); border-left: 3px solid var(--gold);
    border-radius: 8px; padding: .6rem .8rem; margin: 0 0 1rem; color: var(--ink-soft); font-size: .9rem;
}
.ability-note-icon { color: var(--gold); flex: 0 0 auto; }
.entry-head { color: var(--gold-soft); margin: .8rem 0 .3rem; font-size: .98rem; }
.entry-list { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.entry-list li { margin: .2rem 0; }
.opt-label { color: var(--ink-soft); font-style: italic; margin: .4rem 0 .2rem; }
.entry-inset { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem; margin: .6rem 0; }
.entry-table { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .9rem; }
.entry-table th, .entry-table td { border: 1px solid var(--line); padding: .3rem .5rem; text-align: left; }
.entry-table th { color: var(--gold-soft); }

/* ---------- Step 4: Ability scores ---------- */
.method-tabs { display: flex; gap: .5rem; margin: 1.4rem 0; flex-wrap: wrap; }
.method-tab {
    font-family: 'Cinzel', serif; font-size: .9rem; letter-spacing: .03em; cursor: pointer;
    padding: .55rem 1.1rem; border-radius: 999px; color: var(--ink-soft);
    background: var(--bg-raise); border: 1px solid var(--line); transition: all .15s;
}
.method-tab:hover { border-color: var(--gold); color: var(--ink); }
.method-tab.active { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #1b1505; border-color: var(--gold); }

.abil-grid { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-raise); }
.abil-head, .abil-row {
    display: grid; grid-template-columns: 1.4fr 1.1fr .8fr .8fr .7fr; align-items: center;
    gap: .6rem; padding: .6rem 1rem;
}
.abil-head { background: #0000002e; color: var(--ink-soft); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.abil-head span:not(:first-child), .abil-row > span:not(.abil-name) { text-align: center; }
.abil-row { border-top: 1px solid var(--line); }
.abil-name { font-family: 'Cinzel', serif; color: var(--gold-soft); }
.abil-base .b-array, .abil-base .b-num {
    width: 100%; max-width: 6rem; padding: .4rem .5rem; font-size: 1.05rem; text-align: center;
    font-family: 'Cinzel', serif; background: var(--bg); color: var(--ink);
    border: 1px solid var(--line); border-radius: 8px;
}
.abil-base .b-array:focus, .abil-base .b-num:focus { outline: none; border-color: var(--gold); }
.abil-racial { color: var(--good); font-weight: 600; }
.abil-total { font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--ink); }
.abil-mod { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold-soft); }

.abil-status {
    margin: 1rem 0; padding: .6rem .9rem; border-radius: 10px; font-size: .9rem;
    border: 1px solid var(--line); background: var(--bg-raise);
}
.abil-status.is-ok { color: var(--good); border-color: #3f6f3a; }
.abil-status.is-warn { color: var(--gold-soft); border-color: var(--ember); background: rgba(181,71,31,.12); }

.species-bonus { margin: 1.4rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--gold); border-radius: var(--radius); background: rgba(200,160,79,.06); }
.species-bonus h3 { font-family: 'Cinzel', serif; color: var(--gold-soft); margin: 0 0 .3rem; font-size: 1.1rem; }
.floating-modes { display: flex; gap: 1.2rem; margin: .6rem 0; color: var(--ink); }
.floating-modes input { accent-color: var(--gold); }
.assign-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .7rem 0; color: var(--ink-soft); }
.assign-select {
    padding: .45rem .6rem; font-family: 'Cinzel', serif; font-size: .95rem;
    background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
}
.assign-select:focus { outline: none; border-color: var(--gold); }
.species-bonus .abil-status { margin-bottom: 0; }

@media (max-width: 560px) {
    .abil-head, .abil-row { grid-template-columns: 1.1fr 1fr .6fr .6fr .6fr; padding: .5rem .6rem; font-size: .9rem; }
    .abil-name { font-size: .85rem; }
}

/* ---------- Step 5: Proficiencies & Skills ---------- */
.mods-strip { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.2rem 0; }
.mod-chip {
    display: flex; flex-direction: column; align-items: center; min-width: 3.4rem;
    padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise);
}
.mod-chip span { font-size: .68rem; color: var(--ink-soft); letter-spacing: .06em; }
.mod-chip strong { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.1rem; }

.prof-block { margin: 1.6rem 0; }
.prof-block h3 { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.prof-block h3 .count { color: var(--ink-soft); font-family: 'Spectral', serif; font-size: .82rem; }

.save-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.save-chip {
    display: flex; flex-direction: column; align-items: center; min-width: 4.2rem;
    padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise);
}
.save-chip span { font-size: .68rem; color: var(--ink-soft); letter-spacing: .06em; }
.save-chip strong { font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--ink); }
.save-chip em { font-size: .6rem; color: var(--ink-soft); font-style: normal; text-transform: uppercase; }
.save-chip.is-prof { border-color: var(--gold); background: rgba(200,160,79,.08); }
.save-chip.is-prof strong { color: var(--gold-soft); }
.save-chip.is-prof em { color: var(--gold); }

.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; margin: .6rem 0; }
.skill-toggle {
    display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .55rem .8rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise); transition: border-color .15s, background .15s;
}
.skill-toggle:hover { border-color: var(--gold); }
.skill-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.skill-toggle.is-on { border-color: var(--gold); background: rgba(200,160,79,.1); }
.skill-toggle.is-on::before { content: '\2713'; color: var(--gold); font-weight: 700; }
.skill-toggle.is-granted { border-style: dashed; opacity: .85; cursor: default; }
.skill-toggle.is-granted::before { content: '\25C6'; color: var(--good); }
.sk-name { flex: 1; font-weight: 600; }
.sk-have { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--good); }
.sk-abil { font-size: .68rem; color: var(--ink-soft); letter-spacing: .05em; }
.sk-mod { font-family: 'Cinzel', serif; color: var(--gold-soft); min-width: 2rem; text-align: right; }

/* Exotic/rare languages collapsible (spans the language grid) */
.lang-exotic { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 10px; padding: .2rem .6rem; background: #0000001f; }
.lang-exotic > summary { cursor: pointer; color: var(--ink-soft); font-size: .85rem; padding: .35rem 0; list-style: none; }
.lang-exotic > summary::-webkit-details-marker { display: none; }
.lang-exotic > summary::before { content: '\25B8 '; color: var(--gold); }
.lang-exotic[open] > summary::before { content: '\25BE '; }
.exotic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; padding: .3rem 0 .6rem; }

/* ---------- Step 6: Features ---------- */
.feat-block { margin: 1.8rem 0; }
.feat-level {
    font-family: 'Spectral', serif; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--gold); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; margin-right: .6rem; vertical-align: middle;
}
.feat-subtag {
    font-family: 'Spectral', serif; font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--gold-soft); border: 1px solid var(--gold); border-radius: 999px; padding: .05rem .5rem;
    margin-left: .5rem; vertical-align: middle;
}
.feat-desc { color: var(--ink-soft); font-size: .92rem; margin: .6rem 0; }
.feat-desc p { margin: .4rem 0; }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; margin: .6rem 0; }
.mastery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; }
.mastery-option { display: grid !important; grid-template-columns: auto 1fr; gap: .15rem .5rem; align-items: center; padding: .55rem .7rem !important; }
.mastery-option input { grid-row: span 2; }
.mastery-option .feat-option-name { font-weight: 600; }
.mastery-tag {
    justify-self: end; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .03em;
    color: #1b1505; background: var(--gold-soft); padding: .08rem .45rem; border-radius: .4rem;
}
.mastery-meta { grid-column: 2; color: var(--ink-soft); font-size: .74rem; }
.mastery-option.is-on { border-color: var(--gold); }

.cs-mastery-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cs-mastery-list li { display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; align-items: baseline; }
.cs-mastery-weapon { font-weight: 600; }
.cs-mastery-desc { color: var(--ink-soft); font-size: .82rem; }

.feat-option {
    display: block; cursor: pointer; padding: .7rem .9rem; border: 1px solid var(--line);
    border-radius: 10px; background: var(--bg-raise); transition: border-color .15s, background .15s;
}
.feat-option:hover { border-color: var(--gold); }
.feat-option input { position: absolute; opacity: 0; pointer-events: none; }
.feat-option.is-on { border-color: var(--gold); background: rgba(200,160,79,.1); }
.feat-option-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; cursor: pointer; }
.feat-option-name { font-family: 'Cinzel', serif; font-weight: 600; color: var(--gold-soft); flex: 1; }
.feat-option.is-on .feat-option-name::after { content: ' \2713'; color: var(--gold); }
.feat-option-body { display: block; color: var(--ink-soft); font-size: .85rem; }
.feat-option-body p { margin: .3rem 0; }

.subclass-list { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; }
.subclass-card { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise); }
.subclass-card.is-selected { border-color: var(--gold); background: rgba(200,160,79,.08); }
.subclass-card > summary {
    list-style: none; cursor: pointer; padding: .6rem .8rem;
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.subclass-card > summary::-webkit-details-marker { display: none; }
.subclass-pick { display: inline-flex; align-items: center; gap: .6rem; }
.subclass-pick input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.subclass-name { font-family: 'Cinzel', serif; font-weight: 600; color: var(--gold-soft); }
.subclass-lvl { color: var(--ink-soft); font-size: .75rem; }
.subclass-cue { color: var(--gold); font-size: .78rem; opacity: .7; white-space: nowrap; }
.subclass-card[open] .subclass-cue { opacity: 1; }
.subclass-body { padding: .4rem .9rem .9rem; border-top: 1px solid var(--line); }

.feat-pending {
    display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-soft); font-size: .88rem;
    background: rgba(181,71,31,.1); border: 1px solid var(--ember); border-radius: 8px; padding: .55rem .8rem; margin: .6rem 0 0;
}

/* ASI-or-feat choice — mode options styled like the other selectable cards */
.asi-modes { display: flex; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 .9rem; }
.asi-mode {
    display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .6rem .9rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise);
    color: var(--ink); font-size: .92rem; transition: border-color .15s, background .15s;
}
.asi-mode:hover { border-color: var(--gold); }
.asi-mode input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.asi-mode.is-on { border-color: var(--gold); background: rgba(200,160,79,.1); }
.asi-panel { margin: .2rem 0; }

/* Optional class-feature variants (TCE) */
.variant-modes { display: flex; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 .9rem; }
.variant-mode {
    display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .55rem .85rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise);
    color: var(--ink); font-size: .92rem; transition: border-color .15s, background .15s;
}
.variant-mode:hover { border-color: var(--gold); }
.variant-mode input { accent-color: var(--gold); }
.variant-mode.is-on { border-color: var(--gold); background: rgba(200,160,79,.1); }
.variant-branch { border-left: 2px solid var(--line); padding-left: .9rem; margin: .3rem 0; }
.variant-optin {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .5rem .8rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise); color: var(--ink); font-size: .92rem;
}
.variant-optin:hover { border-color: var(--gold); }
.variant-optin.is-on { border-color: var(--gold); background: rgba(200,160,79,.1); }

/* Feat picker (species/background feats, ASI-or-feat) */
.feat-filter {
    width: 100%; max-width: 22rem; margin: .2rem 0 .6rem; padding: .5rem .7rem;
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .9rem;
}
.feat-filter:focus { outline: none; border-color: var(--gold); }
.feat-pick { cursor: default; display: flex; flex-direction: column; gap: .3rem; }
.feat-pick .feat-option-head { cursor: pointer; margin-bottom: 0; }
.feat-tag {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--good);
    border: 1px solid #3f6f3a; border-radius: 999px; padding: .05rem .4rem;
}
.feat-prereq { color: var(--ink-soft); font-size: .76rem; font-style: italic; }
/* Half-feat ASI choice — only shown once the feat is selected. */
.feat-asi-pick { display: none; align-items: center; gap: .35rem; font-size: .8rem; color: var(--gold-soft); }
.feat-option.is-on .feat-asi-pick { display: inline-flex; }
.feat-asi-pick select {
    background: var(--bg-raise); border: 1px solid var(--gold); border-radius: 6px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .8rem; padding: .15rem .3rem;
}
.feat-asi-pick.feat-asi-shown { display: inline-flex; } /* granted feats: always show the ASI choice */
/* Background-granted feat (not chosen) */
.feat-granted { border-style: dashed; cursor: default; }
.feat-granted-mark { color: var(--good); }

/* Prose-choice dropdowns (Favored Enemy, Natural Explorer) */
.prose-pick-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.prose-pick { display: flex; flex-direction: column; gap: .3rem; color: var(--ink-soft); font-size: .9rem; margin: .4rem 0; }
.prose-pick select {
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .92rem; padding: .4rem .6rem; min-width: 12rem;
}
.prose-pick select:focus { outline: none; border-color: var(--gold); }
.prose-pick input[type="text"] {
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .92rem; padding: .4rem .6rem; min-width: 16rem;
}
.prose-pick input[type="text"]:focus { outline: none; border-color: var(--gold); }
.is-hidden { display: none !important; }
.feat-more { font-size: .82rem; }
.feat-more > summary { cursor: pointer; color: var(--gold); list-style: none; width: max-content; }
.feat-more > summary::-webkit-details-marker { display: none; }
.feat-more > summary::before { content: '\25B8 '; }
.feat-more[open] > summary::before { content: '\25BE '; }
.feat-more-body { color: var(--ink-soft); margin-top: .3rem; }
.feat-more-body p { margin: .3rem 0; }
.feat-prereq-line { color: var(--gold-soft); font-size: .85rem; margin: 0 0 .4rem; }
.feat-detail-body { color: var(--ink-soft); font-size: .88rem; }

/* ---------- Step 7: Equipment ---------- */
.equip-fixed {
    display: flex; align-items: center; gap: .5rem; margin: .5rem 0; padding: .55rem .8rem;
    border: 1px dashed var(--line); border-radius: 10px; background: var(--bg-raise); color: var(--ink-soft);
}
.equip-mark { color: var(--good); flex: 0 0 auto; }
.equip-group { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0 1.1rem; }
.equip-option {
    display: flex; align-items: center; gap: .7rem; cursor: pointer; padding: .55rem .85rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise);
    transition: border-color .15s, background .15s;
}
.equip-option:hover { border-color: var(--gold); }
.equip-option input { position: absolute; opacity: 0; pointer-events: none; }
.equip-option.is-on { border-color: var(--gold); background: rgba(200,160,79,.1); }
.equip-radio { display: inline-flex; cursor: pointer; flex: 0 0 auto; }
.equip-letter {
    width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase;
    font-family: 'Cinzel', serif; font-size: .75rem; color: var(--ink-soft);
}
.equip-option.is-on .equip-letter { border-color: var(--gold); color: var(--gold); background: rgba(200,160,79,.12); }
.equip-items { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; color: var(--ink); }
.equip-plus { color: var(--ink-soft); }
.equip-name { white-space: nowrap; }
.equip-cat {
    background: var(--bg-raise); border: 1px solid var(--gold); border-radius: 6px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .85rem; padding: .2rem .4rem; max-width: 14rem;
}
.equip-cat:focus { outline: none; border-color: var(--gold-soft); }
/* Class gold-alternative toggle (package vs starting gold) */
.equip-modes { display: flex; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.equip-mode {
    display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .6rem .9rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise);
    color: var(--ink); font-size: .92rem; transition: border-color .15s, background .15s;
}
.equip-mode:hover { border-color: var(--gold); }
.equip-mode input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.equip-mode.is-on { border-color: var(--gold); background: rgba(200,160,79,.1); }
.equip-gold input[type="number"] {
    background: var(--bg-raise); border: 1px solid var(--gold); border-radius: 8px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .95rem; padding: .4rem .6rem; width: 8rem;
}
.equip-gold input[type="number"]:focus { outline: none; border-color: var(--gold-soft); }

/* ---------- Step 8: Spells ---------- */
.spell-level-head {
    font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .9rem; letter-spacing: .03em;
    margin: .9rem 0 .3rem; padding-top: .5rem; border-top: 1px solid var(--line);
}
.spell-level-head:first-child { border-top: none; padding-top: 0; }
.sp-school { font-size: .68rem; color: var(--ink-soft); letter-spacing: .04em; }
/* On a spell card only the name row selects; the description area isn't a target. */
.spell-option { cursor: default; }
.spell-option .feat-option-name { cursor: pointer; }
.spell-level-school { font-style: italic; color: var(--gold-soft); font-size: .85rem; margin: 0 0 .4rem; }
.spell-meta { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: 0 0 .5rem; font-size: .82rem; }
.spell-meta dt { color: var(--gold-soft); }
.spell-meta dd { margin: 0; color: var(--ink-soft); }
.spell-desc { color: var(--ink-soft); font-size: .85rem; }
.spell-desc p { margin: .3rem 0; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; color: var(--ink-soft); font-size: .8rem; padding: 2rem 1rem 3rem; }

/* Step 9 — Identity */
#identity-form textarea,
.identity-name {
    width: 100%; box-sizing: border-box; background: var(--bg-raise);
    border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .95rem; padding: .55rem .7rem;
}
#identity-form textarea { resize: vertical; line-height: 1.5; }
#identity-form textarea:focus,
.identity-name:focus { outline: none; border-color: var(--gold); }
.identity-name { font-size: 1.15rem; }

.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; max-width: 34rem; }
.align-card {
    position: relative; display: flex; flex-direction: column; gap: .15rem; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; background: var(--bg-raise);
    text-align: center; transition: border-color .15s, background .15s;
}
.align-card:hover { border-color: var(--gold); }
.align-card input { position: absolute; opacity: 0; pointer-events: none; }
.align-card.is-on { border-color: var(--gold); background: rgba(200,160,79,.1); box-shadow: 0 0 0 1px var(--gold) inset; }
.align-code { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1rem; }
.align-name { color: var(--ink-soft); font-size: .72rem; }
.align-clear { color: var(--ink-soft); font-size: .82rem; }

.identity-field { margin: 1rem 0; }
.identity-sub { display: block; font-family: 'Cinzel', serif; color: var(--ink); font-size: .95rem; margin-bottom: .35rem; }
.identity-sub .muted { font-family: 'Spectral', serif; font-size: .78rem; }
.suggestion-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.chip-suggest {
    text-align: left; cursor: pointer; background: rgba(200,160,79,.06);
    border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft);
    font-family: 'Spectral', serif; font-size: .8rem; padding: .25rem .65rem; line-height: 1.35;
    transition: border-color .15s, color .15s; max-width: 100%;
}
.chip-suggest:hover { border-color: var(--gold); color: var(--ink); }
.chip-suggest.is-used { opacity: .45; border-style: dashed; }

.appearance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 40rem; }
.appearance-field { display: flex; flex-direction: column; gap: .25rem; color: var(--ink-soft); font-size: .82rem; }
.appearance-field input {
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .9rem; padding: .4rem .55rem;
}
.appearance-field input:focus { outline: none; border-color: var(--gold); }

/* Step 10 — Review */
.sheet-head { margin: 1rem 0 1.4rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.sheet-titles h1 { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 2rem; margin: 0; }
.sheet-sub { font-family: 'Cinzel', serif; color: var(--ink); font-size: 1.05rem; margin: .25rem 0 .5rem; }
.sheet-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--ink-soft); font-size: .9rem; margin: 0; }
.sheet-meta .meta-k { color: var(--gold); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-right: .25rem; }

.sheet-core { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin: 1.2rem 0 1.6rem; }
.core-stat {
    display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center;
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .4rem;
}
.core-k { color: var(--gold); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.core-v { font-family: 'Cinzel', serif; color: var(--ink); font-size: 1.6rem; line-height: 1.1; }
.core-sub { color: var(--ink-soft); font-size: .68rem; }

.ability-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin-top: .8rem; }
.ability-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .3rem .55rem;
}
.ab-name { color: var(--gold); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; }
.ab-mod { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.7rem; line-height: 1; }
.ab-score {
    margin-top: .15rem; min-width: 2.1rem; text-align: center; color: var(--ink); font-size: .92rem;
    background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 999px; padding: .05rem 0;
}
.ab-asi { color: var(--ink-soft); font-size: .66rem; margin-top: .15rem; }

.save-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; max-width: 34rem; }
.save-row {
    display: flex; align-items: center; gap: .5rem; background: var(--bg-raise);
    border: 1px solid var(--line); border-radius: 8px; padding: .45rem .65rem;
}
.save-dot { width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--ink-soft); flex: none; }
.save-row.is-prof .save-dot { background: var(--gold); border-color: var(--gold); }
.save-name { flex: 1; color: var(--ink); font-size: .9rem; }
.save-row.is-prof .save-name { color: var(--gold-soft); }
.save-mod { font-family: 'Cinzel', serif; color: var(--ink); font-size: 1.05rem; }

.hp-levels { display: flex; flex-direction: column; gap: .35rem; margin: .6rem 0; max-width: 34rem; }
.hp-row { display: flex; align-items: center; gap: .6rem; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .65rem; }
.hp-row.hp-fixed { border-style: dashed; }
.hp-lvl { min-width: 4.5rem; color: var(--ink); font-size: .9rem; }
.hp-detail { flex: 1; color: var(--ink-soft); font-size: .82rem; }
.hp-mode { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-family: 'Spectral', serif; font-size: .82rem; padding: .2rem .3rem; }
.hp-roll-val { width: 3.4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-family: 'Spectral', serif; padding: .2rem .3rem; }
.hp-roll-val:disabled { opacity: .5; }
.hp-roll-val:focus { outline: none; border-color: var(--gold); }
.hp-roll-btn { background: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1; padding: .15rem .4rem; }
.hp-roll-btn:hover { border-color: var(--gold); }
.hp-gain { min-width: 4.5rem; text-align: right; color: var(--gold-soft); font-size: .85rem; }
.hp-foot { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; }
.hp-foot strong { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.1rem; }

.skill-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; }
.skill-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-bottom: 1px dotted var(--line); }
.skill-row .save-dot { background: none; }
.skill-row.is-prof .save-dot { background: var(--gold); border-color: var(--gold); }
.skill-row.is-exp .save-dot { background: var(--gold-soft); border-color: var(--gold-soft); transform: rotate(45deg); border-radius: 2px; }
.skill-nm { flex: 1; color: var(--ink); font-size: .9rem; }
.skill-row.is-prof .skill-nm, .skill-row.is-exp .skill-nm { color: var(--gold-soft); }
.skill-ab { color: var(--ink-soft); font-size: .74rem; }
.skill-row .save-mod { font-size: .95rem; }

.prof-list { margin: .5rem 0 0; }
.prof-line { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; padding: .4rem 0; border-bottom: 1px dotted var(--line); }
.prof-line dt { color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding-top: .1rem; }
.prof-line dd { margin: 0; color: var(--ink); font-size: .92rem; }
.spell-lvl-row { margin: .1rem 0; }
.spell-lvl { display: inline-block; min-width: 3.6rem; color: var(--gold); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.equip-final { display: grid; grid-template-columns: repeat(2, 1fr); gap: .15rem 1.2rem; margin: .5rem 0 0; padding-left: 1.1rem; }
.equip-final li { color: var(--ink); font-size: .9rem; padding: .15rem 0; }
.inv-grp-head { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .95rem; margin: .8rem 0 .1rem; }
.inv-grp-items { margin-left: .8rem; border-left: 1px solid var(--line); padding-left: 1.4rem; }
.equip-final li.inv-eqd { color: var(--gold-soft); }
.inv-eq-tag { color: var(--gold); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; border: 1px solid var(--line); border-radius: 4px; padding: 0 .25rem; margin-left: .25rem; }

.sheet-actions { display: flex; gap: .6rem; margin-top: .8rem; }
.sheet-actions .btn-ghost { font-size: .85rem; padding: .35rem .8rem; }
.review-warn {
    background: rgba(200,80,60,.08); border: 1px solid rgba(200,120,90,.5); border-radius: 12px;
    padding: .9rem 1.1rem; margin: 1rem 0; color: var(--ink);
}
.review-warn strong { color: #e6a07a; font-family: 'Cinzel', serif; }
.review-warn ul { margin: .5rem 0 .3rem; padding-left: 1.2rem; }
.review-warn li { font-size: .9rem; padding: .12rem 0; }
.review-ok { color: var(--gold-soft); font-family: 'Cinzel', serif; margin: 1rem 0; }

/* Step 7 — Inventory */
.wallet { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: .5rem; background: #0000001f; }
.wallet-label { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .9rem; }
.wallet-coin { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; }
.wallet-input { width: 4rem; padding: .3rem .4rem; text-align: right; background: #00000033; border: 1px solid var(--line); border-radius: .3rem; color: var(--ink); }
.wallet-note { flex-basis: 100%; font-size: .72rem; margin: 0; }
.inv-toolbar { display: flex; gap: .8rem; align-items: flex-start; flex-wrap: wrap; margin: .8rem 0; }
.inv-search { position: relative; flex: 1; min-width: 16rem; }
#inv-search-input {
    width: 100%; box-sizing: border-box; background: var(--bg-raise); border: 1px solid var(--line);
    border-radius: 8px; color: var(--ink); font-family: 'Spectral', serif; font-size: .92rem; padding: .45rem .7rem;
}
#inv-search-input:focus { outline: none; border-color: var(--gold); }
.inv-search-results {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px;
    max-height: 20rem; overflow-y: auto; display: none; box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.inv-search-results.is-open { display: block; }
.inv-result {
    display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem; cursor: pointer;
    border-bottom: 1px dotted var(--line); font-size: .88rem;
}
.inv-result:hover, .inv-result.is-active { background: rgba(200,160,79,.12); }
.inv-result .ir-name { flex: 1; color: var(--ink); }
.inv-result .ir-kind { color: var(--gold); font-size: .72rem; text-transform: uppercase; }
.inv-result .ir-meta { color: var(--ink-soft); font-size: .78rem; }
.inv-result .src-badge { font-size: .68rem; }
.inv-result-empty { padding: .5rem .7rem; color: var(--ink-soft); font-size: .85rem; }

.inv-list { display: flex; flex-direction: column; gap: .3rem; margin: .6rem 0; }
.inv-row {
    display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem;
    background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px;
}
.inv-row.is-nested { margin-left: 1.8rem; border-left: 2px solid var(--gold); background: rgba(200,160,79,.04); }
.inv-row[data-iscont] { border-color: rgba(200,160,79,.5); }
.inv-name { flex: 1 1 12rem; min-width: 8rem; }
.inv-name .tag-ref { color: var(--ink); }
.inv-meta { flex: 1 1 14rem; color: var(--ink-soft); font-size: .78rem; }
.inv-qty { display: inline-flex; align-items: center; gap: .2rem; color: var(--ink-soft); font-size: .85rem; }
.inv-qty input { width: 3.4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
    color: var(--ink); font-family: 'Spectral', serif; padding: .2rem .3rem; }
.inv-qty input:focus { outline: none; border-color: var(--gold); }
.inv-eq { display: inline-flex; align-items: center; gap: .25rem; color: var(--ink-soft); font-size: .8rem; white-space: nowrap; }
.inv-eq input:checked + span, .inv-row:has(.inv-eq input:checked) .inv-name .tag-ref { color: var(--gold-soft); }
.inv-eq-spacer { display: inline-block; }
.inv-container { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink);
    font-family: 'Spectral', serif; font-size: .8rem; padding: .2rem .3rem; max-width: 9rem; }
.inv-container:focus { outline: none; border-color: var(--gold); }
.inv-remove { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft);
    cursor: pointer; font-size: 1rem; line-height: 1; padding: .1rem .45rem; }
.inv-remove:hover { border-color: #c4674e; color: #e6a07a; }
.inv-totals { margin-top: .8rem; }
.gold-chip.is-warn strong { color: #e6a07a; }

/* Header auth indicator */
.site-auth { margin-left: auto; display: flex; align-items: center; gap: .7rem; font-size: .85rem; justify-content: flex-end;}
.site-auth-who { color: var(--ink); }
.site-auth-dev { background: var(--line); color: var(--ink-soft); border-radius: 5px; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; padding: .05rem .35rem; vertical-align: middle; }
.site-auth-link { color: var(--gold-soft); text-decoration: none; }
.site-auth-link:hover { text-decoration: underline; }

/* Login portal (?view=login) */
.auth-wrap { max-width: 26rem; margin: 1rem auto; }
.auth-devnote { background: var(--bg-raise); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; color: var(--ink-soft); font-size: .85rem; line-height: 1.5; }
.auth-devnote code { background: rgba(0,0,0,.25); padding: .05rem .3rem; border-radius: 4px; font-size: .85em; }
.auth-skip { display: inline-block; margin-top: .6rem; font-size: .82rem; padding: .35rem .7rem; }
.auth-card { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
.auth-tabs { display: flex; gap: .3rem; margin-bottom: 1rem; }
.auth-tab { flex: 1; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); cursor: pointer; font-family: 'Cinzel', serif; font-size: .85rem; padding: .5rem; }
.auth-tab.is-on { border-color: var(--gold); color: var(--gold-soft); background: rgba(201,162,90,.08); }
.auth-form { display: flex; flex-direction: column; gap: .7rem; }
.auth-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--ink-soft); }
.auth-form input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: 'Spectral', serif; font-size: .95rem; padding: .5rem .6rem; }
.auth-form input:focus { outline: none; border-color: var(--gold); }
.auth-form .btn-primary { margin-top: .3rem; }
.auth-error { background: rgba(196,103,78,.12); border: 1px solid #c4674e; border-radius: 8px; color: #e6a07a; font-size: .85rem; padding: .5rem .7rem; margin: 0 0 .9rem; }

/* Dashboard (?view=dashboard) */
.dash-intro { margin-bottom: 1.2rem; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.dash-new {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 9rem;
    border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-soft); text-decoration: none;
    transition: border-color .15s, color .15s;
}
.dash-new:hover { border-color: var(--gold); color: var(--gold-soft); }
.dash-new-plus { font-family: 'Cinzel', serif; font-size: 2.2rem; line-height: 1; color: var(--gold); }
.dash-card { display: flex; flex-direction: column; justify-content: space-between; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.dash-card h3 { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.15rem; margin: 0 0 .2rem; }
.dash-sub { color: var(--ink); font-size: .9rem; margin: 0 0 .35rem; }
.dash-meta { display: flex; flex-wrap: wrap; gap: .8rem; color: var(--ink-soft); font-size: .82rem; margin: 0; }
.dash-incomplete { color: #e6a07a; font-size: .8rem; margin: .4rem 0 0; }
.dash-card-actions { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; flex-wrap: wrap; }
.dash-card-actions .btn-primary, .dash-card-actions .btn-ghost { font-size: .82rem; padding: .35rem .7rem; }
.dash-card-actions form { margin-left: auto; }
.btn-danger { background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); cursor: pointer; font-size: 1rem; line-height: 1; padding: .3rem .55rem; }
.btn-danger:hover { border-color: #c4674e; color: #e6a07a; }
.dash-empty { grid-column: 1 / -1; }

/* Live character sheet (?view=sheet) */
.cs { max-width: 1100px; margin: 0 auto; }
.cs-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: 1rem; }
.cs-id h1 { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.9rem; margin: 0; }
.cs-sub { font-family: 'Cinzel', serif; color: var(--ink); font-size: 1rem; margin: .15rem 0 .35rem; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--ink-soft); font-size: .85rem; margin: 0; }
.cs-meta .k { color: var(--gold); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; margin-right: .25rem; }
.cs-actions { display: flex; align-items: center; gap: .6rem; }
.cs-actions .btn-ghost { font-size: .82rem; padding: .35rem .7rem; }
.cs-insp { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 8px; font-size: .82rem; color: var(--ink-soft); }
.cs-insp.is-on { border-color: var(--gold); color: var(--gold-soft); background: rgba(200,160,79,.1); }

.cs-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1rem; align-items: start; }
.cs-col { display: flex; flex-direction: column; gap: 1rem; }
.cs-wide { margin-top: 1rem; }
.print-only { display: none; }
.cs-box { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; }
.cs-box h3 { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1rem; margin: 0 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.cs-box h3 .muted { font-family: 'Spectral', serif; font-size: .78rem; }

.cs-abilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cs-abil { display: flex; flex-direction: column; align-items: center; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; padding: .5rem .2rem; }
.cs-abil-name { color: var(--gold); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-abil-mod { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1.5rem; line-height: 1; }
.cs-abil-score { color: var(--ink); font-size: .82rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 999px; padding: 0 .5rem; margin-top: .15rem; }

.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-list li { display: flex; align-items: center; gap: .45rem; padding: .18rem .1rem; border-bottom: 1px dotted var(--line); font-size: .86rem; }
.cs-list .dot { width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid var(--ink-soft); flex: none; }
.cs-list li.is-prof .dot { background: var(--gold); border-color: var(--gold); }
.cs-list li.is-exp .dot { background: var(--gold-soft); border-color: var(--gold-soft); transform: rotate(45deg); border-radius: 2px; }
.cs-list .nm { flex: 1; color: var(--ink); }
.cs-list li.is-prof .nm, .cs-list li.is-exp .nm { color: var(--gold-soft); }
.cs-list .nm em { color: var(--ink-soft); font-style: normal; font-size: .74rem; }
.cs-list .mv { font-family: 'Cinzel', serif; color: var(--ink); }
.cs-passive { margin: .5rem 0 0; color: var(--ink-soft); font-size: .85rem; }

.cs-combat { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.cs-stat { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .3rem; }
.cs-stat .k { color: var(--gold); font-size: .58rem; text-transform: uppercase; letter-spacing: .02em; }
.cs-stat strong { font-family: 'Cinzel', serif; color: var(--ink); font-size: 1.4rem; line-height: 1.1; }
.cs-stat .sub { color: var(--ink-soft); font-size: .58rem; }

/* Manual live-play adjusters (±buff/debuff) on stats + ability boxes */
.cs-adj { width: 3.7rem; margin-top: .25rem; text-align: center; font-size: .72rem; padding: .12rem .1rem .12rem .3rem; background: var(--bg); border: 1px dashed var(--line); border-radius: 6px; color: var(--ink-soft); font-family: 'Spectral', serif; }
.cs-slot-used { width: 3.4rem; text-align: center; }
.cs-adj:hover { border-color: var(--ink-soft); }
.cs-adj:focus { outline: none; border-style: solid; border-color: var(--gold); color: var(--ink); }
.cs-adj.is-set { border-style: solid; border-color: var(--gold); color: var(--gold-soft); font-weight: 600; }
.cs-abil { position: relative; }
.cs-abil.is-adj { box-shadow: inset 0 0 0 1px var(--gold); }
.cs-abil .cs-adj { width: 2.3rem; }

.cs-stat-insp { cursor: pointer; }
.cs-stat-insp strong { font-size: 1rem; }
.cs-stat-insp input { accent-color: var(--gold); width: 1.3rem; height: 1.3rem; }
.cs-stat-insp.is-on { border-color: var(--gold); background: rgba(200,160,79,.12); }

.cs-hp-main { display: flex; align-items: center; gap: 1.2rem; }
.cs-hp-max { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .2rem .8rem; border: 1px solid var(--gold); border-radius: 12px; background: rgba(200,160,79,.08); }
.cs-hp-max .k { color: var(--gold); font-size: .62rem; text-transform: uppercase; }
.cs-hp-max strong { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 2.2rem; line-height: 1; }
.cs-hp-max .sub { color: var(--ink-soft); font-size: .6rem; }
.cs-hp-cur, .cs-hp-temp { display: flex; flex-direction: column; gap: .25rem; color: var(--ink-soft); font-size: .78rem; }
.cs-currency label, .cs-death label { display: flex; flex-direction: column; gap: .2rem; color: var(--ink-soft); font-size: .76rem; }
.cs input[type="number"], .cs-notes { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: 'Spectral', serif; padding: .35rem .5rem; }
.cs-hp-cur input, .cs-hp-temp input { width: 4.5rem; font-size: 1.2rem; text-align: center; }
.cs input[type="number"]:focus, .cs-notes:focus { outline: none; border-color: var(--gold); }
.cs-death { display: flex; align-items: center; gap: 1.4rem; margin-top: .7rem; color: var(--ink-soft); font-size: .8rem; }

.cs-actions-list { color: var(--ink-soft); font-size: .8rem; margin: .5rem 0 0; line-height: 1.5; }
.cs-actions-list .k { color: var(--gold); font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; }

.cs-cond-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.cs-cond { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-soft); font-size: .82rem; }
.cs-cond:hover { border-color: var(--gold); }
.cs-cond.is-on { border-color: var(--gold); background: rgba(200,160,79,.14); color: var(--gold-soft); }
.cs-cond-info { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.cs-cond-info:hover { color: var(--gold); }

.cs-feat-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.cs-feat-tab { cursor: pointer; background: #00000026; border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink-soft); font: inherit; font-size: .78rem; padding: .2rem .7rem; transition: border-color .12s, color .12s, background .12s; }
.cs-feat-tab:hover { border-color: var(--gold); color: var(--ink); }
.cs-feat-tab.is-active { background: #c8a04f1f; border-color: var(--gold); color: var(--gold-soft); }
.cs-feat-tab-n { color: var(--ink-soft); font-size: .68rem; }
.cs-feat-tab.is-active .cs-feat-tab-n { color: var(--gold-soft); }
.cs-feat-hidden { display: none; }
.cs-feat-lvl-cat { min-width: 0; text-transform: uppercase; letter-spacing: .03em; font-size: .6rem;
    border: 1px solid var(--line); border-radius: 999px; padding: .02rem .4rem; color: var(--gold-soft); align-self: center; }
.cs-features { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .9rem; }
.cs-feature { border-bottom: 1px dotted var(--line); padding: .15rem 0; break-inside: avoid; }
.cs-feature > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .5rem; }
.cs-feature > summary::-webkit-details-marker { display: none; }
.cs-feature > summary::before { content: '\25B8'; color: var(--gold); font-size: .7rem; }
.cs-feature[open] > summary::before { content: '\25BE'; }
.cs-feat-lvl { color: var(--gold); font-size: .68rem; min-width: 1.6rem; }
.cs-feat-name { flex: 1; color: var(--ink); font-size: .9rem; }
.cs-feat-from { color: var(--ink-soft); font-size: .7rem; }
.cs-feat-body { color: var(--ink-soft); font-size: .85rem; padding: .3rem 0 .5rem 1.6rem; }
.cs-feat-body p { margin: .3rem 0; }

.cs-spell-lists { margin-top: .4rem; }
.cs-inv-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .4rem 1.2rem; }
.cs-inv-add { position: relative; max-width: 28rem; margin-bottom: .6rem; }
#cs-inv-search { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: 'Spectral', serif; font-size: .9rem; padding: .4rem .6rem; }
#cs-inv-search:focus { outline: none; border-color: var(--gold); }
.cs-inv-edit li { display: flex; align-items: center; gap: .45rem; }
.cs-inv-ctl { display: inline-flex; align-items: center; gap: .35rem; flex: none; }
.cs-eq { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; cursor: pointer; }
.cs-eq-spacer { display: inline-block; width: 1.05rem; }
.cs-inv-qty { width: 3rem; text-align: center; padding: .12rem .2rem !important; font-size: .8rem; }
.cs-inv-del { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); cursor: pointer; font-size: .9rem; line-height: 1; padding: 0 .4rem; }
.cs-inv-del:hover { border-color: #c4674e; color: #e6a07a; }

.cs-pips-exh { flex-wrap: wrap; }
.cs-exh-list { margin: .5rem 0 0; padding-left: 1.4rem; color: var(--ink-soft); font-size: .8rem; }
.cs-exh-list li { padding: .08rem 0; }
.cs-exh-list li.is-on { color: var(--gold-soft); font-weight: 600; }
.cs-personality dd { white-space: normal; }
.cs-notes { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.5; }
.cs-notes-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.cs-notes-tab {
    cursor: pointer; border: 1px solid var(--line); background: #00000026; color: var(--ink-soft);
    border-radius: .5rem .5rem 0 0; padding: .3rem .7rem; font-family: 'Spectral', serif; font-size: .85rem;
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .12s;
}
.cs-notes-tab:hover { border-color: var(--gold); color: var(--ink); }
.cs-notes-tab.is-active { border-color: var(--gold); color: var(--gold-soft); background: #c8a04f1a; border-bottom-color: transparent; }
.cs-notes-add {
    cursor: pointer; border: 1px dashed var(--line); background: transparent; color: var(--ink-soft);
    border-radius: .5rem; padding: .3rem .6rem; font-size: 1rem; line-height: 1; transition: all .12s;
}
.cs-notes-add:hover { border-color: var(--gold); color: var(--gold-soft); }
.cs-notes-edit { display: flex; gap: .4rem; margin-bottom: .4rem; }
.cs-notes-title {
    flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
    font-family: 'Cinzel', serif; font-size: .9rem; padding: .35rem .6rem;
}
.cs-notes-title:focus { outline: none; border-color: var(--gold); }
.cs-notes-del {
    cursor: pointer; border: 1px solid var(--line); background: #00000026; color: var(--ink-soft);
    border-radius: 8px; width: 2.1rem; font-size: 1.2rem; line-height: 1; transition: all .12s;
}
.cs-notes-del:hover { border-color: var(--ember); color: var(--ember); }
.cs-notes-print-title { font-family: 'Cinzel', serif; margin: .6rem 0 .1rem; }

.cs-rest-btns { display: flex; gap: .5rem; margin-bottom: .6rem; }
.cs-rest-btn {
    flex: 1; cursor: pointer; border: 1px solid var(--line); background: #00000026; color: var(--ink);
    border-radius: .5rem; padding: .45rem; font-family: 'Cinzel', serif; font-size: .82rem; letter-spacing: .02em; transition: all .15s;
}
.cs-rest-btn:hover { border-color: var(--gold); color: var(--gold-soft); background: #c8a04f14; }
.cs-resources { display: grid; gap: .35rem; }
.cs-resource { display: flex; align-items: center; gap: .5rem; }
.cs-resource .cs-pips { flex: 1; }
.cs-res-recharge { font-size: .68rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.cs-res-partial { color: var(--gold-soft); text-transform: none; letter-spacing: 0; cursor: help; }
.cs-auto-res { padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px dashed var(--line); }
.cs-res-label { font-size: .68rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin: .2rem 0 0; }
.cs-res-del { cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); border-radius: 5px; width: 1.6rem; height: 1.6rem; line-height: 1; transition: all .12s; }
.cs-res-del:hover { border-color: var(--ember); color: var(--ember); }
.cs-res-empty { font-size: .78rem; margin: .2rem 0; }
.cs-res-add { display: flex; gap: .35rem; margin-top: .6rem; flex-wrap: wrap; }
.cs-res-add input[type="text"] { flex: 1; min-width: 7rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-family: 'Spectral', serif; padding: .3rem .5rem; }
.cs-res-add input[type="number"] { width: 3.4rem; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); padding: .3rem .2rem; }
.cs-res-add select { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); padding: .3rem; font-family: 'Spectral', serif; }
.cs-res-add button { cursor: pointer; border: 1px solid var(--gold); background: #c8a04f1f; color: var(--gold-soft); border-radius: 6px; padding: 0 .8rem; font-family: 'Cinzel', serif; }
.cs-res-add button:hover { background: #c8a04f2e; }

.cs-inv-sell { cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--gold-soft); border-radius: 5px; width: 1.6rem; height: 1.6rem; line-height: 1; font-weight: 700; transition: all .12s; }
.cs-inv-sell:hover { border-color: var(--gold); background: #c8a04f1a; }
.cs-charges { display: inline-flex; align-items: center; gap: .2rem; margin: 0 .25rem; padding: .05rem .2rem; border: 1px solid var(--line); border-radius: 6px; background: rgba(200,160,79,.06); vertical-align: middle; }
.cs-charge-btn { cursor: pointer; border: none; background: transparent; color: var(--gold-soft); width: 1.1rem; height: 1.3rem; line-height: 1; font-weight: 700; padding: 0; }
.cs-charge-btn:hover { color: var(--gold); }
.cs-charge-rem { font-family: 'Cinzel', serif; color: var(--gold); font-weight: 700; min-width: 1ch; text-align: center; }
.cs-charge-max { font-size: .7rem; color: var(--ink-soft); }
.cs-shop-scrim { position: fixed; inset: 0; z-index: 8800; background: rgba(6,5,10,.6); backdrop-filter: blur(2px); }
.cs-shop {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8810;
    width: min(22rem, 92vw); background: linear-gradient(180deg, var(--panel), #14111d);
    border: 1px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem;
}
.cs-shop h4 { margin: 0 0 .5rem; font-family: 'Cinzel', serif; color: var(--gold-soft); }
.cs-shop-name { font-size: 1.05rem; margin: 0 0 .3rem; }
.cs-shop-fields { display: flex; gap: .7rem; margin: .6rem 0 .3rem; }
.cs-shop-fields label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--ink-soft); flex: 1; }
.cs-shop-fields input { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); padding: .4rem .5rem; font-family: 'Spectral', serif; }
.cs-shop-fields input:focus { outline: none; border-color: var(--gold); }
.cs-shop-total { font-family: 'Cinzel', serif; color: var(--gold-soft); margin: .3rem 0; }
.cs-shop-err { margin: .3rem 0; }
.cs-shop-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }
.cs-shop-actions button { cursor: pointer; border: 1px solid var(--line); background: #00000026; color: var(--ink); border-radius: .5rem; padding: .45rem .9rem; font-family: 'Cinzel', serif; font-size: .85rem; transition: all .12s; }
.cs-shop-actions button:hover { border-color: var(--gold); color: var(--gold-soft); }
.cs-shop-actions .cs-shop-go { border-color: var(--gold); background: #c8a04f1f; color: var(--gold-soft); }
.cs-shop-actions .cs-shop-go:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); background: transparent; }
.cs-pips { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.cs-pips .pip-label { font-size: .76rem; margin-right: .2rem; }
.cs-pips .pip { width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid var(--ink-soft); }
.cs-pips .pip.on { background: var(--gold); border-color: var(--gold); }
.cs-pips-fail .pip.on { background: #c4674e; border-color: #c4674e; }

.cs-attacks, .cs-slots { width: 100%; border-collapse: collapse; font-size: .84rem; }
.cs-attacks th, .cs-slots th { color: var(--gold); font-size: .66rem; text-transform: uppercase; text-align: left; padding: .25rem .4rem; border-bottom: 1px solid var(--line); }
.cs-attacks td, .cs-slots td { padding: .3rem .4rem; border-bottom: 1px dotted var(--line); color: var(--ink); }
.cs-attacks tr.not-prof td { color: var(--ink-soft); }
.cs-slots td input { width: 2.8rem; padding: .15rem .2rem; text-align: center; }
.cs-conditions { width: 100%; box-sizing: border-box; }
.cs-currency { display: flex; gap: .5rem; flex-wrap: wrap; }
.cs-currency input { width: 4rem; text-align: center; }

.cs-spellhdr { color: var(--ink-soft); font-size: .85rem; margin: 0 0 .4rem; }
.cs-pact { color: var(--ink); font-size: .85rem; }
.cs-spline { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem; padding: .3rem 0; border-bottom: 1px dotted var(--line); font-size: .85rem; }
.cs-spline dt { color: var(--gold); font-size: .72rem; text-transform: uppercase; padding-top: .1rem; }
.cs-spline dd { margin: 0; color: var(--ink); }
.cs-spline .lv { color: var(--gold); font-size: .68rem; }

.cs-profs div { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem; padding: .25rem 0; border-bottom: 1px dotted var(--line); }
.cs-profs dt { color: var(--gold); font-size: .72rem; text-transform: uppercase; padding-top: .1rem; }
.cs-profs dd { margin: 0; color: var(--ink); font-size: .85rem; }
.cs-inv-grp { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .85rem; margin: .5rem 0 .1rem; }
.cs-inv { list-style: none; margin: .2rem 0 0; padding: 0; }
.cs-inv.nested { margin-left: .8rem; border-left: 1px solid var(--line); padding-left: .8rem; }
.cs-inv li { color: var(--ink); font-size: .85rem; padding: .12rem 0; }
.cs-inv li.eqd { color: var(--gold-soft); }
.cs-inv .eq-tag { color: var(--gold); font-size: .62rem; text-transform: uppercase; border: 1px solid var(--line); border-radius: 4px; padding: 0 .2rem; }
.cs-ammo { width: 3.2rem; text-align: center; padding: .1rem .2rem !important; }
.cs-backstory { color: var(--ink-soft); font-size: .85rem; margin: .5rem 0 0; }

.edition-badge { font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; border: 1px solid currentColor; }
.edition-2014 { color: #8a6d3b; }
.edition-2024 { color: #2e6da4; }

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

/* Print: drop the app chrome, lay the sheet out on white. */
@media print {
    .aurora, .site-header, .stepper, .site-footer, .step-controls, .no-print { display: none !important; }
    body { background: #fff; color: #111; }
    .content { max-width: none; }
    .prof-block, .sheet-core, .ability-card, .core-stat, .save-row, .skill-row, .prof-line {
        break-inside: avoid;
    }
    .sheet-titles h1, .sheet-sub, .core-k, .ab-name, .prof-line dt, .prof-block h3 .count, .spell-lvl { color: #444; }
    .core-v, .ab-mod, .save-mod, .prof-block h3 { color: #111; }
    .core-stat, .ability-card, .save-row, .review-warn { background: #fff; border-color: #bbb; }

    /* Live sheet (?view=sheet) on paper */
    .print-only { display: block !important; }
    .cs-box, .cs-abil, .cs-stat, .cs-hp-max { background: #fff !important; border-color: #999 !important; break-inside: avoid; }
    .cs-grid { grid-template-columns: 1fr 1.3fr; gap: .5rem; }
    .cs-id h1, .cs-sub, .cs-abil-mod, .cs-stat strong, .cs-list .mv, .cs-box h3, .cs-hp-max strong, .cs-feat-name { color: #111 !important; }
    .cs-box h3, .cs-abil-name, .cs-stat .k, .cs-spline dt, .cs-profs dt, .cs-meta .k, .cs-list li.is-prof .nm, .cs-list li.is-exp .nm, .cs-inv-grp, .cs-hp-max .k, .cs-feat-lvl, .cs-feat-from, .cs-actions-list .k { color: #444 !important; }
    .cs-list .nm, .cs-attacks td, .cs-attacks th, .cs-slots th, .cs-slots td, .cs-spline dd, .cs-profs dd, .cs-inv li, .tag-ref, .cs-feat-body, .cs-actions-list, .cs-personality dd, .cs-backstory { color: #111 !important; }
    .cs-list .dot { border-color: #777; }
    .cs-list li.is-prof .dot, .cs-list li.is-exp .dot { background: #444; border-color: #444; }
    .cs-feature > summary::before { content: '' !important; }
    .cs-feature .cs-feat-body { display: block !important; } /* features expanded in print */
    .cs-feat-hidden { display: block !important; } /* a tab filter never hides features from print */

    /* Fillable inputs: white, value visible, underline like the WotC PDF */
    .cs input, .cs textarea { background: #fff !important; color: #111 !important; border: 0 !important;
        border-bottom: 1px solid #888 !important; border-radius: 0 !important; }
    #cs-notes-card { display: block !important; } /* notes print (with its text) */
    .cs-notes { display: block !important; min-height: 3cm; }

    /* Ruled blank lines for handwriting (added as .print-lines blocks in the view) */
    .print-lines { display: block !important; }
    .print-lines .ln { height: 1.5em; border-bottom: 1px solid #bbb; }

    /* Give the big sections room to fill the page like a printed character sheet */
    .cs-spells-print { display: block !important; }
    section.cs-wide { break-inside: auto; }
    .cs-features { grid-template-columns: 1fr; }
    .blank-row td { height: 1.5em; }
    /* The spellbook gets its own page of ruled lines to fill out by hand */
    #cs-spells { break-before: page; }
    .cs-spellbook { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 1.6rem; margin-top: .6rem; }
    .cs-spellbook h4 { font-family: 'Cinzel', serif; color: #444; font-size: .9rem; margin: .4rem 0 .2rem; border-bottom: 1px solid #999; }
}
.print-lines, .cs-spells-print { display: none; }

@media (max-width: 560px) {
    .equip-final { grid-template-columns: 1fr; }
    .sheet-actions { flex-direction: column; }
    .skill-list { grid-template-columns: 1fr; }
    .stepper-label { display: none; }
    .step-controls { flex-direction: column; align-items: stretch; }
}

/* ---------- DM Custom Items (?view=custom-items) ---------- */
.dash-links { margin-top: .8rem; }
.custom-badge { color: var(--gold-soft); border-color: var(--gold); background: rgba(200,160,79,.1); }
.ci-error { color: #e7a; margin: 0 0 1rem; }
.ci-tabs { display: flex; gap: .4rem; margin: 0 0 1.4rem; border-bottom: 1px solid var(--line); }
.ci-tab { text-decoration: none; color: var(--ink-soft); font-family: 'Cinzel', serif; font-size: .92rem; padding: .5rem 1.1rem; border: 1px solid transparent; border-bottom: none; border-radius: 9px 9px 0 0; margin-bottom: -1px; }
.ci-tab:hover { color: var(--gold-soft); }
.ci-tab.is-active { color: var(--gold); border-color: var(--line); border-bottom: 1px solid var(--bg, #1a1722); background: rgba(200,160,79,.06); }
.cc-abils { display: flex; flex-wrap: wrap; gap: .6rem; }
.cc-abil { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.cc-abil span { font-size: .75rem; color: var(--ink-soft); letter-spacing: .04em; }
.cc-abil input { width: 3.4rem; text-align: center; padding: .35rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.cc-mod { font-size: .72rem; color: var(--gold-soft); }
.cc-saves { display: flex; flex-wrap: wrap; gap: .5rem; }
.cc-save { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.cc-save span { font-size: .72rem; color: var(--ink-soft); }
.cc-save input { width: 3.2rem; text-align: center; padding: .3rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; }
.cc-block-fs .cc-blocks { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.cc-block { display: flex; gap: .4rem; align-items: flex-start; }
.cc-block input { width: 9rem; flex: none; padding: .35rem .45rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.cc-block textarea { flex: 1; padding: .35rem .45rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; resize: vertical; }
.cc-block-rm { flex: none; cursor: pointer; color: var(--ink-soft); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 6px; padding: .2rem .5rem; line-height: 1; }
.cc-block-rm:hover { border-color: #b4543e; color: #d77; }
.cc-add { font-size: .82rem; padding: .3rem .7rem; }
.ref-section { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin: .7rem 0 .2rem; border-bottom: 1px solid var(--line); padding-bottom: .15rem; }
.ci-layout { display: grid; grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.ci-form, .ci-list { background: var(--panel, rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; }
.ci-form h2, .ci-list h2 { font-family: 'Cinzel', serif; font-size: 1.05rem; margin: 0 0 .9rem; color: var(--gold-soft); }
.ci-field { display: block; margin-bottom: .8rem; }
.ci-field > span { display: block; font-size: .82rem; color: var(--ink-soft); margin-bottom: .25rem; }
.ci-field input, .ci-field select, .ci-field textarea {
    width: 100%; box-sizing: border-box; padding: .45rem .55rem;
    background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px;
    color: var(--ink); font: inherit;
}
.ci-field textarea { resize: vertical; }
.ci-row { display: flex; gap: .7rem; }
.ci-row .ci-field { flex: 1; }
.ci-check { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-soft); align-self: flex-end; padding-bottom: .5rem; }
.ci-props { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.ci-prop { align-self: auto; padding-bottom: 0; }
.ci-sub { border: 1px solid var(--line); border-radius: 9px; padding: .8rem .9rem .2rem; margin: 0 0 .9rem; }
.ci-sub legend { font-family: 'Cinzel', serif; font-size: .85rem; color: var(--gold-soft); padding: 0 .4rem; }
.ci-actions { display: flex; gap: .6rem; align-items: center; margin-top: .4rem; }
.ci-card { display: flex; justify-content: space-between; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: 9px; padding: .7rem .9rem; margin-bottom: .6rem; }
.ci-card h3 { font-size: .98rem; margin: 0 0 .25rem; }
.ci-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: .8rem; color: var(--ink-soft); }
.ci-card-meta span { white-space: nowrap; }
.ci-card-actions { display: flex; gap: .4rem; align-items: center; }
.ci-card-actions form { margin: 0; }
@media (max-width: 720px) {
    .ci-layout { grid-template-columns: 1fr; }
}

/* ---------- Campaigns (?view=campaigns, ?view=campaign) ---------- */
.camp-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 2rem; }
.camp-card { background: var(--panel, rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; }
.camp-card h2 { font-family: 'Cinzel', serif; font-size: 1.05rem; margin: 0 0 .5rem; color: var(--gold-soft); }
.camp-create button, .camp-join button { margin-top: .3rem; }
.camp-list-title { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold-soft); margin: 0 0 .8rem; }
.camp-tile { text-decoration: none; }
.camp-tile h3 { display: flex; align-items: center; gap: .5rem; }

.camp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.camp-head h1 { display: flex; align-items: center; gap: .6rem; }
.camp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.camp-code { display: flex; align-items: center; gap: .8rem; margin-top: .4rem; }
.camp-code-val { font-family: 'Cinzel', serif; font-size: 1.6rem; letter-spacing: .22em; color: var(--gold); background: rgba(200,160,79,.08); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .9rem; }
.camp-playas { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.camp-playas select { flex: 1; min-width: 12rem; padding: .45rem .55rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.camp-roster { margin-bottom: 1.2rem; }
.camp-members { width: 100%; border-collapse: collapse; }
.camp-members th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: .4rem .5rem; }
.camp-members td { padding: .5rem .5rem; border-bottom: 1px solid var(--line); }
.camp-members tr.is-me td { background: rgba(200,160,79,.05); }
.camp-soon { margin-bottom: 1.2rem; border-style: dashed; }
.camp-actions { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.camp-edit summary { display: inline-block; cursor: pointer; list-style: none; }
.camp-edit[open] { flex: 1; min-width: 18rem; }
.camp-edit-form { margin-top: .7rem; }
.camp-copy { padding: .3rem .7rem; }

/* Campaign event feed (chat + rolls) */
.camp-feed-card { margin-bottom: 1.2rem; }
.feed-log {
    height: 22rem; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem;
    padding: .7rem; margin-bottom: .7rem;
    background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 9px;
}
.feed-empty { margin: auto; }
.feed-row { display: flex; align-items: baseline; gap: .5rem; padding: .22rem .35rem; border-radius: 6px; }
.feed-row.is-mine { background: rgba(200,160,79,.07); }
.feed-user { color: var(--gold-soft); font-weight: 600; font-size: .82rem; flex: none; }
.feed-user::after { content: ':'; color: var(--ink-soft); }
.feed-body { color: var(--ink); word-break: break-word; flex: 1; }
.feed-roll .feed-body { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.feed-total {
    flex: none; margin-left: auto; align-self: center;
    font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold);
    background: rgba(200,160,79,.12); border: 1px solid var(--line); border-radius: 7px;
    padding: .05rem .55rem; min-width: 2rem; text-align: center;
}
.feed-system { justify-content: center; color: var(--ink-soft); font-style: italic; font-size: .85rem; }

.feed-roll-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.feed-die {
    font: inherit; font-size: .82rem; cursor: pointer; color: var(--ink);
    background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 7px; padding: .3rem .6rem;
}
.feed-die:hover { border-color: var(--gold); color: var(--gold-soft); }
.feed-mode { color: var(--gold-soft); }
#feed-roll-input { width: 6rem; padding: .3rem .5rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.feed-compose { display: flex; gap: .6rem; }
#feed-msg { flex: 1; padding: .5rem .6rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.feed-soon { margin: .7rem 0 0; font-size: .85rem; }

/* Initiative tracker */
.camp-enc-card { margin-bottom: 1.2rem; }
.enc-start { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.enc-start input[type=text], .enc-start input:not([type]) { padding: .45rem .55rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.enc-seed-lbl { color: var(--ink-soft); display: flex; align-items: center; gap: .3rem; }
.enc-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .6rem; }
.enc-name-txt { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1rem; }
.enc-round { color: var(--ink-soft); font-size: .85rem; }
.enc-list { display: flex; flex-direction: column; gap: .25rem; }
.enc-row { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.enc-row.is-turn { border-color: var(--gold); background: rgba(200,160,79,.1); }
.enc-row.is-dead { opacity: .5; }
.enc-row.is-dead .enc-cname { text-decoration: line-through; }
.enc-marker { width: 1rem; color: var(--gold); }
.enc-init { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold-soft); min-width: 1.8rem; text-align: center; }
.enc-cname { flex: 1; color: var(--ink); }
.enc-row.is-pc .enc-cname { color: var(--gold-soft); }
.enc-hp { display: flex; align-items: center; gap: .4rem; min-width: 9rem; }
.enc-hp-bar { flex: 1; height: .5rem; background: rgba(0,0,0,.35); border-radius: 999px; overflow: hidden; }
.enc-hp-fill { display: block; height: 100%; background: #5aa469; }
.enc-hp-fill.mid { background: #c8a04f; }
.enc-hp-fill.low { background: #b4543e; }
.enc-hp-num { font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 3rem; text-align: right; }
.enc-ac { font-size: .78rem; color: var(--ink-soft); min-width: 3rem; }
.enc-ctl { display: flex; align-items: center; gap: .25rem; }
.enc-amt, .enc-setinit { width: 3rem; padding: .2rem .3rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: .82rem; }
.enc-btn { cursor: pointer; font: inherit; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 6px; padding: .15rem .5rem; line-height: 1; }
.enc-btn:hover { border-color: var(--gold); color: var(--gold-soft); }
.enc-rm:hover { border-color: #b4543e; color: #d77; }
.enc-rowwrap { display: flex; flex-direction: column; }
.enc-hp-hidden { font-size: .82rem; color: var(--ink-soft); letter-spacing: .05em; }
.enc-eye { font-size: .72rem; color: var(--ink-soft); font-style: italic; }
.enc-edit { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .2rem 1.7rem; }
.enc-ef { width: 4rem; padding: .3rem .4rem; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: .82rem; }
.enc-ef-name { width: 9rem; }
.enc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.enc-monster { margin-top: .6rem; }
.enc-monster input { padding: .35rem .45rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.enc-search-row { display: flex; gap: .5rem; }
.enc-search { flex: 1; }
.enc-count { width: 4rem; }
.enc-results { display: flex; flex-direction: column; gap: .2rem; margin-top: .4rem; max-height: 13rem; overflow-y: auto; }
.enc-res { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; text-align: left; cursor: pointer; font: inherit; color: var(--ink); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 7px; padding: .35rem .6rem; }
.enc-res:hover { border-color: var(--gold); background: rgba(200,160,79,.08); }
.enc-res-name { color: var(--gold-soft); }
.enc-res-meta { font-size: .76rem; color: var(--ink-soft); white-space: nowrap; }
.enc-res-empty { color: var(--ink-soft); font-size: .85rem; padding: .3rem; }
.enc-or { color: var(--ink-soft); font-size: .8rem; margin: .7rem 0 .4rem; text-align: center; }
.enc-manual-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.enc-manual-row input { width: 5rem; }
.enc-manual-row input:first-child { width: 9rem; }

@media (max-width: 720px) {
    .ci-layout { grid-template-columns: 1fr; }
    .camp-forms, .camp-grid { grid-template-columns: 1fr; }
    .enc-row { flex-wrap: wrap; }
}

/* Consistent primary nav (every page, when signed in) */
.site-nav { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0 auto 1.4rem; padding: 0 1rem; max-width: 70rem; }
.site-nav-link {
    text-decoration: none; color: var(--ink-soft); font-family: 'Cinzel', serif; font-size: .9rem;
    padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02);
    transition: color .15s, border-color .15s, background .15s;
}
.site-nav-link:hover { color: var(--gold-soft); border-color: var(--gold); }
.site-nav-link.is-active { color: var(--gold); border-color: var(--gold); background: rgba(200,160,79,.1); }

/* Transient toast (e.g. "Joined initiative at 17") */
.cs-toast {
    position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(1rem);
    z-index: 2000; opacity: 0; transition: opacity .25s, transform .25s;
    background: rgba(20,18,28,.96); color: var(--gold-soft);
    border: 1px solid var(--gold); border-radius: 9px; padding: .55rem 1.1rem;
    font-family: 'Cinzel', serif; font-size: .9rem; box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.cs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Guided Level-Up (?view=levelup) ---------- */
.lvl-next { color: var(--gold-soft); }
.lu-maxed { text-align: center; padding: 2rem; }
.lu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; align-items: start; }
.lu-card { background: var(--panel, rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
.lu-card h2 { font-family: 'Cinzel', serif; font-size: 1.02rem; margin: 0 0 .6rem; color: var(--gold-soft); }
.lu-card h3 { font-family: 'Cinzel', serif; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); margin: .9rem 0 .35rem; }
.lu-hp-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lu-hp-row select, .lu-hp-row input { padding: .4rem .5rem; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.lu-hp-row input { width: 4.5rem; }
.lu-hp-gain { margin-left: auto; color: var(--ink-soft); }
.lu-hp-gain strong, .lu-prof strong, .lu-line strong { color: var(--gold-soft); }
.lu-line { margin: .35rem 0; }
.lu-choice { color: var(--ink); }
.lu-feats { list-style: none; margin: .2rem 0 0; padding: 0; }
.lu-feats li { padding: .3rem 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .5rem; }
.lu-feats li:first-child { border-top: none; }
.lu-feats li.lu-feat-li { display: block; }
.lu-feat-name { color: var(--ink); }
.lu-tag { font-size: .68rem; color: var(--gold-soft); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem; }
.lu-hint { font-size: .78rem; color: var(--ink-soft); margin: .1rem 0 .3rem; }
.lu-feat > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; list-style-position: outside; }
.lu-feat > summary::-webkit-details-marker { color: var(--gold-soft); }
.lu-feat[open] > summary { margin-bottom: .35rem; }
.lu-feat-desc { font-size: .88rem; color: var(--ink-soft); padding: .1rem 0 .4rem 1rem; border-left: 2px solid var(--line); margin-left: .2rem; }
.lu-feat-desc p:first-child { margin-top: 0; }
.lu-feat-desc p:last-child { margin-bottom: 0; }
.lu-actions { margin-top: 1.4rem; text-align: center; }
.lu-note { color: var(--ink-soft); margin: 0 0 .8rem; }
.lu-buttons { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }