@font-face { font-family: 'Cinzel'; src: url(fonts/cinzel-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url(fonts/cinzel-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url(fonts/crimson-pro-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url(fonts/crimson-pro-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url(fonts/crimson-pro-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --bg: #0b0809;
  --bg2: #141012;
  --panel: #1a1416;
  --panel2: #221a1d;
  --line: #3a2a2f;
  --text: #e8dfe0;
  --muted: #a8979b;
  --dim: #6f5f63;
  --blood: #b3122e;
  --blood2: #e0294a;
  --gold: #c9a45c;
  --ok: #6fae7a;
  --warn: #d9a441;
  --hunger: #c4102d;
  --radius: 6px;
  --serif: 'Crimson Pro', Georgia, serif;
  --display: 'Cinzel', 'Trajan Pro', serif;
  --ui: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font-family: var(--ui); font-size: 15px; line-height: 1.5; background: radial-gradient(ellipse at top, #1c0d12 0%, var(--bg) 60%) fixed; }
a { color: var(--blood2); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; margin: 0 0 0.5em; }
h1 { font-size: 1.8rem; color: var(--blood2); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; color: var(--gold); }
p { margin: 0 0 0.8em; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 0.85em; }
.hidden { display: none !important; }
button, .btn {
  font: 600 14px var(--ui); color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .btn:hover { border-color: var(--blood); }
button.primary, .btn.primary { background: var(--blood); border-color: var(--blood); color: #fff; }
button.primary:hover { background: var(--blood2); }
button.ghost { background: transparent; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
input, select, textarea {
  font: 15px var(--ui); color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; width: 100%;
}
textarea { resize: vertical; min-height: 70px; font-family: var(--serif); font-size: 17px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blood); }
label { display: block; font-size: 0.85em; color: var(--muted); margin: 10px 0 4px; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(11, 8, 9, 0.85); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(6px); }
.brand { font-family: var(--display); font-size: 1.1rem; color: var(--blood2); text-decoration: none; letter-spacing: 0.08em; }
.brand span { color: var(--text); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.err { color: #ff8a9a; }
.errors { background: #2a1015; border: 1px solid var(--blood); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; }
.errors li { margin: 2px 0; }
.ok { color: var(--ok); }
.pill { display: inline-block; font-size: 0.75em; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.pill.blood { border-color: var(--blood); color: var(--blood2); }

/* Login */
.login { max-width: 380px; margin: 12vh auto; text-align: center; }
.login .card { text-align: left; }
.sigil { font-family: var(--display); font-size: 2.4rem; color: var(--blood2); letter-spacing: 0.15em; text-shadow: 0 0 30px rgba(179, 18, 46, 0.5); }

/* Lists */
.item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel2); margin-bottom: 8px; gap: 10px; }
.item h4 { margin: 0; font-family: var(--display); font-size: 1rem; }

/* Wizard */
.steps { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.steps button { font-size: 12px; padding: 5px 10px; }
.steps button.on { border-color: var(--blood); color: var(--blood2); }
.steps button.done::after { content: ' ✓'; color: var(--ok); }
.choice { cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--panel2); transition: border-color 0.15s; }
.choice:hover { border-color: var(--dim); }
.choice.on { border-color: var(--blood); box-shadow: 0 0 0 1px var(--blood) inset; }
.choice h4 { margin: 0 0 4px; font-family: var(--display); }
.choice p { margin: 4px 0; font-size: 0.9em; color: var(--muted); }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 20px; }
.budget { position: sticky; top: 58px; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.9em; }
.budget b { color: var(--gold); }

/* Dots */
.trait { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; gap: 8px; }
.trait .name { text-transform: capitalize; }
.dots { display: inline-flex; gap: 3px; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--dim); background: transparent; padding: 0; cursor: pointer; }
.dot.on { background: var(--blood); border-color: var(--blood2); }
.dot.ro { cursor: default; }
.dot.zero { width: 10px; height: 10px; border-style: dashed; margin-right: 4px; }
.box { width: 16px; height: 16px; border: 1.5px solid var(--dim); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: var(--blood2); }
.box.sup::after { content: '/'; font-weight: 700; }
.box.agg::after { content: '✕'; font-weight: 700; }
.box.stain { background: repeating-linear-gradient(45deg, #3a1a20, #3a1a20 3px, transparent 3px, transparent 6px); }
.box.hum { background: var(--text); border-color: var(--text); }
.tracker { display: inline-flex; gap: 2px; flex-wrap: wrap; }

/* Sheet */
.sheet h3 { border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-top: 14px; }
.sheet .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 20px; }
.power { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.power b { color: var(--text); }
.power .meta { font-size: 0.8em; color: var(--dim); }

/* Play view */
.play { display: grid; grid-template-columns: minmax(0, 1fr) 420px; height: calc(100vh - 53px); }
.story-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.status-strip { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--bg2); font-size: 0.85em; }
.status-strip .lbl { color: var(--dim); margin-right: 4px; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.06em; }
.hunger-dice { display: inline-flex; gap: 3px; }
.hunger-dice i { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid #5a2a32; display: inline-block; }
.hunger-dice i.on { background: var(--hunger); border-color: #ff4d6a; box-shadow: 0 0 6px rgba(196, 16, 45, 0.6); }
.log { flex: 1; overflow-y: auto; padding: 18px 22px 30px; scroll-behavior: smooth; }
.entry { margin: 0 0 18px; max-width: 760px; }
.entry.narration { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: #efe6e7; white-space: pre-wrap; }
.entry.player { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold); border-left: 2px solid var(--gold); padding-left: 12px; white-space: pre-wrap; }
.entry.mech { font-size: 0.82em; color: var(--muted); border-left: 2px solid var(--line); padding: 2px 10px; }
.entry.mech b { color: var(--text); }
.entry.system { font-size: 0.85em; color: var(--warn); }
.entry.scene { font-family: var(--display); color: var(--blood2); letter-spacing: 0.08em; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 24px; }
.entry.scene small { display: block; font-family: var(--ui); color: var(--dim); letter-spacing: 0; font-size: 0.75em; }
.composer { border-top: 1px solid var(--line); padding: 10px 16px; background: var(--bg2); }
.composer textarea { min-height: 60px; max-height: 200px; }
.composer .row { margin-top: 6px; }
.thinking { color: var(--dim); font-style: italic; font-family: var(--serif); }
.side-col { display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 10px 6px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--text); border-bottom-color: var(--blood); }
.tab-body { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; }
#map { height: 100%; min-height: 300px; border-radius: var(--radius); background: #111; }
.tab-body.map-tab { padding: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; font-size: 0.75em; color: var(--muted); border-top: 1px solid var(--line); }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }

/* Roll card */
.rollcard { border: 1px solid var(--blood); background: linear-gradient(180deg, #24121a, var(--panel)); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; max-width: 760px; box-shadow: 0 0 24px rgba(179, 18, 46, 0.15); }
.rollcard h4 { font-family: var(--display); margin: 0 0 6px; color: var(--blood2); }
.rollcard .parts { font-size: 0.85em; color: var(--muted); }
.dice { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.die { width: 34px; height: 34px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--ui); background: #ece4e5; color: #1a1013; border: 2px solid transparent; cursor: default; user-select: none; }
.die.succ { background: #fff; box-shadow: 0 0 0 1px var(--gold) inset; }
.die.ten { background: var(--gold); color: #1a1013; }
.die.fail { background: #5a5154; color: #cfc4c6; }
.die.h { background: var(--hunger); color: #fff; }
.die.h.fail { background: #5a1a24; color: #e9b8c0; }
.die.h.one { background: #000; color: #ff3355; border-color: #ff3355; }
.die.h.ten { background: #ff3355; color: #fff; box-shadow: 0 0 10px #ff3355; }
.die.pick { cursor: pointer; }
.die.sel { border-color: #6cf; transform: translateY(-3px); }
.die.rr { outline: 2px dashed #6cf; outline-offset: 2px; }
.outcome { font-family: var(--display); font-size: 1.05rem; margin: 6px 0; }
.outcome.win { color: var(--ok); }
.outcome.fail { color: #ff8a9a; }
.outcome.messy, .outcome.bestial { color: #ff3355; text-shadow: 0 0 10px rgba(255, 51, 85, 0.4); }

.npc { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; background: var(--panel2); }
.npc h4 { margin: 0; font-family: var(--display); font-size: 0.95rem; }
.npc .meta { font-size: 0.8em; color: var(--dim); }
.journal-entry { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 0.9em; }

/* Leaflet theming: standard OSM tiles, turned to night */
.night-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.72) contrast(0.95) saturate(0.35) sepia(0.15); }
.leaflet-container { background: #0e0c0d; font-family: var(--ui); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.leaflet-popup-content h4 { font-family: var(--display); margin: 0 0 4px; color: var(--blood2); }
.leaflet-control-attribution { background: rgba(0, 0, 0, 0.6) !important; color: var(--dim) !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.hood-label { color: rgba(201, 164, 92, 0.75); font-family: var(--display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 4px #000, 0 0 8px #000; background: none; border: 0; }
.here-marker { width: 18px; height: 18px; border-radius: 50%; background: var(--blood2); border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(224, 41, 74, 0.35), 0 0 18px var(--blood2); }

.places-results .choice { margin-bottom: 6px; }
.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 12px 0; }
.progress i { display: block; height: 100%; width: 40%; background: var(--blood); animation: slide 1.4s infinite ease-in-out; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

.mobile-tabs { display: none; }
@media (max-width: 900px) {
  .play { grid-template-columns: 1fr; height: auto; }
  .story-col { height: calc(100vh - 53px - 44px); border-right: 0; }
  .side-col { height: calc(100vh - 53px - 44px); }
  .play.show-side .story-col, .play:not(.show-side) .side-col { display: none; }
  .mobile-tabs { display: flex; position: sticky; bottom: 0; background: var(--bg2); border-top: 1px solid var(--line); }
  .mobile-tabs button { flex: 1; border-radius: 0; border: 0; padding: 12px; }
  .mobile-tabs button.on { color: var(--blood2); }
  .entry.narration { font-size: 18px; }
  .log { padding: 14px 16px; }
  .wrap { padding: 16px 16px 60px; }
}

/* ===== Official-style character sheet ===== */
.vs-shell { padding: 16px 0 60px; }
.vs-bar { max-width: 1100px; margin: 0 auto 14px; padding: 0 16px; }
.vs-bar .card { padding: 12px 14px; }
.vs-bar .row { gap: 8px; }
.vs-bar select, .vs-bar input { width: auto; }
.vs-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.vpage {
  --ink: #1d1416; --red: #8e1b22; --rule: #b88f8f; --paper: #fbf5ee;
  width: 816px; min-height: 1056px; background: var(--paper); color: var(--ink); position: relative;
  padding: 34px 44px 36px; font-family: 'Crimson Pro', Georgia, serif; font-size: 15px; line-height: 1.25;
  border-radius: 14px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.vpage::before { content: ''; position: absolute; inset: 14px; border: 1.5px solid #d9b8b4; border-radius: 10px; pointer-events: none; }
.vpage::after { content: ''; position: absolute; inset: 18px; border: 0.5px solid #e6cfcb; border-radius: 8px; pointer-events: none; }
.vlogo { text-align: center; margin: 0 0 12px; line-height: 1; }
.vlogo .v1 { font-family: 'Cinzel', serif; font-weight: 700; font-size: 40px; letter-spacing: 0.04em; color: var(--ink); }
.vlogo .v2 { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.55em; margin-top: 2px; }
.vlogo.small { text-align: left; }
.vlogo.small .v1 { font-size: 28px; }
.vhead { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.vhead .cell { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 2px 6px; min-height: 24px; display: flex; gap: 6px; align-items: baseline; }
.vhead .cell:nth-child(3n) { border-right: 0; }
.vhead .cell:nth-last-child(-n+3) { border-bottom: 0; }
.vlbl { font-size: 11px; color: #4a3a3d; white-space: nowrap; }
.vval { font-size: 15px; flex: 1; min-width: 0; }
.vsec { font-family: 'Cinzel', serif; font-weight: 700; color: var(--red); text-align: center; letter-spacing: 0.14em; font-size: 13px; margin: 14px 0 6px; border-bottom: 1.5px solid var(--red); padding-bottom: 3px; }
.vsec.plain { border: 0; margin: 4px 0; }
.vattrs { display: grid; grid-template-columns: repeat(3, 1fr); }
.vattrs .col { padding: 0 14px; }
.vattrs .col + .col { border-left: 1px solid var(--ink); }
.vattrs h5 { font-style: italic; font-weight: 400; text-align: center; margin: 0 0 4px; font-size: 14px; font-family: 'Crimson Pro', serif; }
.vattr { display: flex; justify-content: space-between; align-items: center; font-size: 16px; padding: 1px 0; }
.vattr .n { flex: 1; text-align: right; padding-right: 14px; }
.vtracks { display: flex; justify-content: center; gap: 40px; margin: 8px 0 2px; }
.vtrack { text-align: center; }
.vtrack .t { color: var(--red); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; }
.vskills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.vskill { display: flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 2.5px 0; }
.vskill .n { white-space: nowrap; }
.vskill .spec { flex: 1; border-bottom: 1px dotted #9b8b8b; min-width: 10px; font-style: italic; font-size: 12px; color: #4a1f24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 15px; }
.vskill .spec input { border: 0; background: transparent; padding: 0; font: italic 12px 'Crimson Pro', serif; color: #4a1f24; width: 100%; height: 14px; }
.vdisc { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.vdbox { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.vdbox:nth-child(3n) { border-right: 0; }
.vdbox:nth-last-child(-n+3) { border-bottom: 0; }
.vdbox .top { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 6px; border-bottom: 1px solid var(--ink); min-height: 24px; font-weight: 600; }
.vdbox .line { border-bottom: 1px solid var(--ink); min-height: 21px; padding: 1px 6px; font-size: 13px; display: flex; align-items: center; }
.vdbox .line:last-child { border-bottom: 0; }
.vfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; }
.vfoot .t { color: var(--red); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; margin-right: 6px; }
.vfoot .res { border-bottom: 1px dotted #9b8b8b; min-width: 180px; display: inline-block; font-style: italic; }
.vcopy { position: absolute; bottom: 22px; left: 30px; font-size: 7px; color: #6a5a5d; font-family: 'Inter', sans-serif; }
/* circles & boxes */
.vc { display: inline-flex; gap: 3px; flex-shrink: 0; }
.vc i { width: 11px; height: 11px; border: 1.2px solid #2a2022; border-radius: 50%; display: inline-block; background: transparent; }
.vc i.on { background: #241a1c; }
.vc i.click { cursor: pointer; }
.vc i.click:hover { background: #c94a55; border-color: #8e1b22; }
.vc i.gap { margin-left: 6px; }
.vb { display: inline-flex; gap: 3px; }
.vb i { width: 12px; height: 12px; border: 1.2px solid #2a2022; display: inline-block; position: relative; font-style: normal; }
.vb i.gap { margin-left: 7px; }
.vb i.off { border-color: #cdbcbc; }
.vb i.hum { background: #241a1c; }
.vb i.sup::after, .vb i.stain::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1.5px solid #8e1b22; transform: rotate(40deg); }
.vb i.agg::before, .vb i.agg::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1.5px solid #8e1b22; transform: rotate(45deg); }
.vb i.agg::before { transform: rotate(-45deg); }
/* page 2 */
.v3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.v3 .h { color: var(--red); text-align: center; font-size: 14px; padding-bottom: 4px; }
.v3box { border: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); min-height: 190px; }
.v3box > div { padding: 6px 8px; font-size: 13px; border-right: 1px solid var(--ink); }
.v3box > div:last-child { border-right: 0; }
.v3box p { margin: 0 0 6px; }
.vmid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 12px; }
.vmid .split { border-left: 3px double var(--ink); padding-left: 12px; }
.vadv-h { color: var(--red); text-align: center; font-weight: 600; font-family: 'Inter', sans-serif; font-size: 12px; margin-bottom: 4px; }
.vadv { border: 1px solid var(--ink); }
.vadv .r { border-bottom: 1px solid var(--ink); min-height: 21px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 1px 6px; font-size: 13px; }
.vadv .r:last-child { border-bottom: 0; }
.vadv .r .flaw { color: #8e1b22; }
.vbp-h { display: flex; align-items: center; gap: 10px; color: var(--red); font-weight: 600; font-family: 'Inter', sans-serif; font-size: 12px; margin-bottom: 4px; }
.vbp { border: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; }
.vbp > div { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 2px 6px; min-height: 36px; font-size: 13px; }
.vbp > div:nth-child(2n) { border-right: 0; }
.vbp > div:nth-last-child(-n+2) { border-bottom: 0; }
.vbp .vlbl { display: block; }
.vxp { display: flex; align-items: baseline; gap: 8px; color: var(--red); font-weight: 600; font-family: 'Inter', sans-serif; font-size: 12px; margin-top: 10px; }
.vxp span:last-child { flex: 1; border-bottom: 1px dotted #9b8b8b; color: var(--ink); font-family: 'Crimson Pro', serif; font-size: 15px; font-weight: 400; }
.vbio { border: 1px solid var(--ink); margin-top: 8px; }
.vbio > div { border-bottom: 1px solid var(--ink); padding: 2px 6px; font-size: 13px; min-height: 20px; display: flex; gap: 6px; align-items: baseline; }
.vbio > div.tall, .vbio > div.hist { display: block; }
.vbio > div > input { flex: 1; min-width: 0; }
.vbio > div:last-child { border-bottom: 0; }
.vbio .tall { min-height: 40px; }
.vbio .hist { min-height: 150px; white-space: pre-wrap; }
.vnotes { border: 1px solid var(--ink); margin-top: 10px; min-height: 230px; padding: 4px 6px; font-size: 13px; white-space: pre-wrap; }
/* editable bits on paper */
.vpage input, .vpage select, .vpage textarea { background: rgba(142, 27, 34, 0.05); border: 0; border-bottom: 1px dashed #c9a9a9; border-radius: 0; color: var(--ink); font: 15px 'Crimson Pro', serif; padding: 0 2px; width: 100%; min-height: 0; }
.vpage textarea { font-size: 13px; resize: vertical; border: 1px dashed #d4b8b8; }
.vpage select { padding: 0; height: 20px; }
.vpage input:focus, .vpage select:focus, .vpage textarea:focus { outline: none; background: rgba(142, 27, 34, 0.1); border-color: var(--red); }
.vpage .addbtn { font: 600 11px 'Inter', sans-serif; padding: 0 5px; background: none; border: 1px solid #c9a9a9; color: var(--red); border-radius: 3px; cursor: pointer; line-height: 15px; }
.vpage .muted { color: #8a7a7d; font-style: italic; }
.vs-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 4000; padding: 16px; }
.vs-modal .card { max-width: 520px; width: 100%; max-height: 85vh; overflow: auto; }

/* Create-on-the-sheet: controls in a sticky left column, sheet on the right */
.vs-create { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; padding: 16px 16px 60px; align-items: start; }
.vs-create .vs-bar { position: sticky; top: 66px; max-height: calc(100vh - 80px); overflow-y: auto; margin: 0; padding: 0; max-width: none; }
.vs-create .vs-bar .card > .row { flex-wrap: wrap; }
.vs-create .vs-bar .card > .row.spread { flex-direction: column; align-items: flex-start; gap: 6px; }
.vs-create .vs-bar select { width: 100%; }
.vs-create .vs-bar .pill { white-space: normal; }
.vs-create .vs-pages { align-items: center; }
@media (max-width: 1100px) {
  .vs-create { display: block; }
  .vs-create .vs-bar { position: static; max-height: none; margin-bottom: 14px; }
  .vs-create .vs-pages { align-items: center; }
}

@media print {
  .vs-create { display: block; padding: 0; }
  @page { size: letter; margin: 0; }
  body { background: #fff !important; }
  .topbar, .vs-bar, .no-print, .mobile-tabs { display: none !important; }
  .vs-shell { padding: 0; }
  .vs-pages { gap: 0; }
  .vpage { box-shadow: none; border-radius: 0; zoom: 1 !important; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vpage input, .vpage select, .vpage textarea { background: transparent; border-color: transparent; }
  .vpage .addbtn, .vpage select.spend { display: none !important; }
}