:root { --ink: #16181d; --paper: #fbfaf7; --card: #fff; --line: #e2e0d8; --muted: #6d6f78; --accent: #b2431f; }
* { box-sizing: border-box; } body { background: var(--paper); color: var(--ink); font: 16px/1.5 Iowan Old Style, Palatino, Georgia, serif; margin: 0; }
.app-header { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1rem clamp(1.25rem, 5vw, 4rem); }.brand { font-size: 1.2rem; font-weight: 700; letter-spacing: .01em; }.tally { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.app-shell { margin: 0 auto; max-width: 46rem; padding: clamp(1.5rem, 5vw, 3.5rem); }.lede { color: var(--muted); margin: 0 0 2rem; max-width: 34rem; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1rem, 3vw, 2rem); }.panel-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1.5rem; }.panel-head h2 { font-size: 1.9rem; line-height: 1; margin: 0; }.kicker { color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: .09em; margin: 0 0 .4rem; text-transform: uppercase; }
.rows { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.row { align-items: start; border: 1px solid var(--line); border-radius: 3px; display: flex; gap: 1rem; padding: .85rem 1rem; }.pos { color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .15rem; width: 1.5rem; }.row-main { flex: 1; min-width: 0; }.row-main h3 { font-size: 1.15rem; margin: 0; }.meta { color: var(--muted); font-size: .85rem; margin: .1rem 0 .6rem; }
.note { display: flex; flex-direction: column; gap: .25rem; }.note-caption { color: var(--muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }.note input { border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: .9rem; padding: .35rem .5rem; width: 100%; }.note input:focus { border-color: var(--accent); outline: none; }
.row-actions { display: flex; flex-direction: column; gap: .25rem; }
button { background: var(--card); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); cursor: pointer; font: inherit; font-size: .85rem; padding: .2rem .55rem; }button:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }button[disabled] { color: #c3c2bc; cursor: default; }.ghost { align-self: center; }
@media (max-width: 620px) { .row { flex-wrap: wrap; }.panel-head { flex-direction: column; align-items: start; gap: .75rem; } }