/* Ширма ведущего: картографическая калька в клетку, латунь фонаря как акцент.
   Слева список, справа лист; на телефоне все в одну колонку. */
/* Свиток: состаренная бумага, сепия чернил, сургуч как акцент.
   Слева список, справа лист; на телефоне все в одну колонку. */
:root {
  --paper: #e8d9b5;
  --paper-edge: rgba(120, 78, 30, .28);
  --grain: .16;
  --sheet: #f3e8cc;
  --sheet2: #eadbb6;
  --ink: #2f2214;
  --ink2: #6e5a3f;
  --line: #c9b38a;
  --brass: #8e2a1e;
  --brass-ink: #7a2318;
  --brass-soft: #ecd2b4;
  --good: #4d6a2e;
  --warn: #9a5a12;
  --crit: #8e2a1e;
  --crit-soft: #efcfbf;
  --shadow: 0 1px 0 rgba(255, 250, 235, .6) inset, 0 2px 10px rgba(90, 60, 20, .14);
  --f-disp: "Old Standard TT", "PT Serif", Georgia, serif;
  --f-body: "Golos Text", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 3px;
  --on-accent: #f6ecd6;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #221a11; --paper-edge: rgba(0, 0, 0, .55); --grain: .1; --sheet: #2c2216; --sheet2: #34291b;
  --ink: #ecdfc2; --ink2: #b39e7c; --line: #4a3b27; --brass: #d9775f; --brass-ink: #e9937c; --brass-soft: #4a2a1f;
  --good: #a4bf7a; --warn: #e2a85a; --crit: #e8836c; --crit-soft: #44241c; --shadow: 0 2px 12px rgba(0, 0, 0, .35); --on-accent: #241a10; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #221a11; --paper-edge: rgba(0, 0, 0, .55); --grain: .1; --sheet: #2c2216; --sheet2: #34291b;
  --ink: #ecdfc2; --ink2: #b39e7c; --line: #4a3b27; --brass: #d9775f; --brass-ink: #e9937c; --brass-soft: #4a2a1f;
  --good: #a4bf7a; --warn: #e2a85a; --crit: #e8836c; --crit-soft: #44241c; --shadow: 0 2px 12px rgba(0, 0, 0, .35); --on-accent: #241a10; color-scheme: dark }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
body {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 50% 40%, transparent 55%, var(--paper-edge) 130%);
  background-attachment: fixed;
  color: var(--ink); font: 14px/1.45 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 80px;
}
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: var(--grain); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper) }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: .01em }
h2 { font-size: 26px; line-height: 1.15 }
h3 { font-size: 18px }
.lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); font-weight: 600 }
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums }
.muted { color: var(--ink2) }
.small { font-size: 12.5px }
a { color: var(--brass-ink) }

/* шапка */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--paper); box-shadow: 0 6px 12px -10px var(--paper-edge); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding: 10px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line) }
.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.brand h1 { font-size: 26px; letter-spacing: .02em }
.brand h1::first-letter { color: var(--brass); font-size: 1.25em }
.brand .sub { font-family: var(--f-disp); font-style: italic; color: var(--ink2) }
.store-pill { margin-left: auto; font-size: 12px; color: var(--ink2); display: inline-flex; gap: 6px; align-items: center }
.store-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); display: inline-block }
.store-pill.cloud i { background: var(--good) }
nav.tabs { display: flex; gap: 2px 18px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px }
nav .grp { display: flex; gap: 2px; align-items: flex-end; flex-wrap: wrap }
nav .grp > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink2); margin-right: 6px; padding-bottom: 9px }
nav a { text-decoration: none; color: var(--ink2); padding: 7px 10px 8px; border-bottom: 2px solid transparent; font-weight: 500 }
nav a:hover { color: var(--ink) }
nav a.on { color: var(--ink); border-bottom-color: var(--brass) }

main { max-width: 1320px; margin: 18px auto 0 }
.split { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 18px; align-items: start }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr) } }
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; min-width: 0; box-shadow: var(--shadow) }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0 }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.row > * { min-width: 0 }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px }
.grid2 > * { min-width: 0 }
input[list] { width: 100%; min-width: 0 }
.sect { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px }
.sect-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.sect-h h3 { margin-right: auto }

/* поля */
input, select, textarea { font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; min-width: 0; max-width: 100% }
textarea { width: 100%; resize: vertical; min-height: 64px }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px }
.big { font-family: var(--f-disp); font-size: 22px; font-weight: 700; border-color: transparent; background: transparent; padding-left: 0; width: 100% }
.big:hover, .big:focus { border-color: var(--line); background: var(--sheet); padding-left: 8px }
input.w-num { width: 64px; text-align: center; font-family: var(--f-mono) }
.field { display: grid; gap: 4px; min-width: 0 }
.field > input, .field > select { width: 100% }
button { font: inherit; cursor: pointer; border-radius: 4px; border: 1px solid var(--line); background: var(--sheet2); color: var(--ink); padding: 6px 11px }
button:hover { border-color: var(--ink2) }
button.pri { background: var(--brass); border-color: var(--brass); color: var(--on-accent); font-weight: 600; box-shadow: 0 1px 0 rgba(0,0,0,.15) }
button.pri:hover { filter: brightness(1.08) }
button.ghost { background: transparent; border-color: transparent; color: var(--ink2); padding: 4px 6px }
button.ghost:hover { color: var(--ink); border-color: var(--line) }
button.danger { color: var(--crit) }
button.sm { padding: 3px 8px; font-size: 12.5px }
button.step { width: 30px; padding: 4px 0; font-family: var(--f-mono) }

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink2); background: var(--sheet); white-space: nowrap }
button.chip { cursor: pointer }
button.chip:hover { border-color: var(--brass); color: var(--ink) }
.chip.on { background: var(--brass-soft); border-color: var(--brass); color: var(--brass-ink) }
.chip.good { color: var(--good); border-color: currentColor }
.chip.warn { color: var(--warn); border-color: currentColor }
.chip.crit { color: var(--crit); border-color: currentColor; background: var(--crit-soft) }
.chips { display: flex; gap: 6px; flex-wrap: wrap }

/* список слева */
.list { display: grid; gap: 6px }
.li { display: grid; gap: 2px; text-align: left; padding: 9px 11px; border: 1px solid var(--line); background: var(--sheet); border-radius: var(--r); cursor: pointer; width: 100% }
.li:hover { border-color: var(--ink2) }
.li.on { border-color: var(--brass); box-shadow: inset 3px 0 0 var(--brass) }
.li b { font-family: var(--f-disp); font-size: 16px }
.empty { border: 1px dashed var(--line); border-radius: var(--r); padding: 18px; color: var(--ink2); display: grid; gap: 10px; background: var(--sheet) }

/* карточки партии */
.roster { display: grid; gap: 8px }
.pc-card { display: grid; gap: 6px; padding: 10px 12px; text-align: left; width: 100% }
.pc-card .nm { display: flex; justify-content: space-between; gap: 8px; align-items: baseline }
.pc-card .nm b { font-family: var(--f-disp); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bar { height: 6px; background: var(--sheet2); border-radius: 3px; overflow: hidden; border: 1px solid var(--line) }
.bar > i { display: block; height: 100%; background: var(--good) }
.bar.warn > i { background: var(--warn) }
.bar.crit > i { background: var(--crit) }
.kv { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2) }
.kv b { color: var(--ink); font-family: var(--f-mono); font-weight: 600 }

/* характеристики */
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.stat { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 6px 6px; display: grid; gap: 4px; justify-items: center; background: var(--sheet) }
.stat .lbl { color: var(--ink) }
.stat select { font-family: var(--f-mono); font-size: 18px; font-weight: 600; text-align: center; padding: 2px 4px; width: 100% }
.stat label { font-size: 11.5px; color: var(--ink2); display: flex; gap: 4px; align-items: center; cursor: pointer }
.stat.deb { border-color: var(--crit); background: var(--crit-soft) }
.stat.deb label { color: var(--crit) }
.vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px }
.vital { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; display: grid; gap: 6px; background: var(--sheet) }
.vital .big-n { font-family: var(--f-mono); font-size: 22px; font-weight: 600 }
.pips { display: flex; gap: 3px; flex-wrap: wrap }
.pip { width: 16px; height: 16px; border: 1.5px solid var(--ink2); border-radius: 3px; background: transparent; padding: 0; cursor: pointer }
.pip.on { background: var(--ink); border-color: var(--ink) }
.pip.st.on { background: var(--crit); border-color: var(--crit) }
.pip.br.on { background: var(--brass); border-color: var(--brass) }

/* инвентарь */
.inv { width: 100%; border-collapse: collapse; font-size: 13px }
.inv th { text-align: left; font-weight: 600; color: var(--ink2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; border-bottom: 1px solid var(--line) }
.inv td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle }
.inv td input { width: 100% }
.inv td.n input { min-width: 120px }
.inv td input.w-num { width: 52px }
.tbl-wrap { overflow-x: auto; min-width: 0 }
.load { display: grid; gap: 6px }
.load-meter { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 14px }
.load-meter i { border-radius: 2px; background: var(--sheet2); border: 1px solid var(--line) }
.load-meter i.f { background: var(--good); border-color: var(--good) }
.load-meter i.f.w { background: var(--warn); border-color: var(--warn) }
.load-meter i.f.c { background: var(--crit); border-color: var(--crit) }
.load-meter i.cap { border-style: dashed }
.gear-pick { border: 1px dashed var(--brass); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; background: var(--sheet) }
.gear-pick fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px }
.gear-pick legend { padding: 0; margin-bottom: 4px }
.gear-pick label { display: flex; gap: 6px; align-items: flex-start; font-size: 13px }

/* бросок */
.roller { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden }
.seg button { border: 0; border-radius: 0; background: var(--sheet); padding: 5px 10px; font-size: 12.5px }
.seg button.on { background: var(--brass-soft); color: var(--brass-ink); font-weight: 600 }
.dice { display: inline-flex; gap: 4px }
.die { width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 5px; display: inline-grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: 14px; background: var(--sheet) }
.die.drop { opacity: .35; border-style: dashed }
.res { display: grid; gap: 4px }
.res .tot { font-family: var(--f-mono); font-size: 20px; font-weight: 600 }
.tier-hit { color: var(--good) } .tier-mix { color: var(--warn) } .tier-miss { color: var(--crit) }
.log { display: grid; gap: 6px; font-size: 12.5px }
.log-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--line) }
.tray { position: fixed; box-shadow: var(--shadow); right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20; background: var(--sheet); border: 1px solid var(--brass); border-radius: var(--r); padding: 10px 12px; box-shadow: 0 6px 22px rgba(0,0,0,.18); max-width: min(340px, calc(100vw - 28px)); display: grid; gap: 6px }

/* часы подземелья */
.clock-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center }
@media (max-width: 520px) { .clock-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center } }
.clock svg { width: 180px; height: 180px; max-width: 100%; display: block }
.clock path { cursor: pointer; stroke: var(--ink); stroke-width: 1.5; fill: var(--sheet) }
.clock path.f { fill: var(--brass) }
.clock path:hover { fill: var(--brass-soft) }
.clock path.f:hover { fill: var(--brass) ; opacity: .85 }
.clock text { font-family: var(--f-mono); font-size: 10px; fill: var(--ink2) }
.track { display: flex; gap: 4px; flex-wrap: wrap }
.track button { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-family: var(--f-mono); font-size: 11px }
.track button.on { background: var(--ink); color: var(--sheet); border-color: var(--ink) }

/* статблок монстра */
.statblock { border: 1px solid var(--ink); box-shadow: var(--shadow); border-radius: var(--r); padding: 14px; background: var(--sheet); display: grid; gap: 8px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 110px) }
.statblock h3 { font-size: 22px }
.statblock .tags { font-style: italic; font-family: var(--f-disp); color: var(--ink2) }
.statline { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--f-mono); border-block: 1px solid var(--line); padding: 6px 0 }
.statline b { font-weight: 600 }
.mon-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 16px; align-items: start }
@media (max-width: 1100px) { .mon-grid { grid-template-columns: minmax(0, 1fr) } .statblock { position: static } }
.q { display: grid; gap: 6px }
.q .opts { display: flex; flex-wrap: wrap; gap: 6px }
.opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px; font-size: 13px; cursor: pointer; background: var(--sheet) }
.opt:has(input:checked) { border-color: var(--brass); background: var(--brass-soft); color: var(--brass-ink) }
.opt input { margin: 0; accent-color: var(--brass) }
.opt small { color: var(--ink2) }

/* фронты */
.danger { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; background: var(--sheet2) }
.portents { display: grid; gap: 6px; counter-reset: p }
.portent { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center }
.portent input[type=text] { width: 100% }
.portent.done input[type=text] { text-decoration: line-through; color: var(--ink2) }
.doom { border-left: 3px solid var(--crit); padding: 4px 0 4px 10px }

.confirm { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap }
details summary { cursor: pointer; color: var(--ink2) }
.ref-table { width: 100%; border-collapse: collapse; font-size: 12.5px }
.ref-table td { padding: 3px 6px; border-bottom: 1px solid var(--line); vertical-align: top }
.ref-table td:first-child { font-family: var(--f-mono); width: 32px; text-align: right; color: var(--ink2) }
.note { font-size: 12.5px; color: var(--ink2); border-left: 2px solid var(--line); padding-left: 10px }
.treasure-res { display: grid; gap: 8px }
.tres { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--sheet); display: grid; gap: 6px }
.tres .nr { font-family: var(--f-mono); color: var(--brass-ink); font-weight: 600 }
/* сетки без распирания контентом */
.sect, .field, .q, .danger, .leg-body, .gear-pick, .res, .treasure-res, .tres { grid-template-columns: minmax(0, 1fr) }

.rt tr.hit td { background: var(--brass-soft); color: var(--brass-ink); font-weight: 600 }
.rt td:first-child { width: 52px }
.tres .nr { min-width: 28px }

.rt.mt tr[data-a] { cursor: pointer }
.rt.mt tr[data-a]:hover td { background: var(--sheet2) }

.ver { white-space: nowrap; flex: none; font-family: var(--f-mono); font-size: 11px; color: var(--ink2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; align-self: center }
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px }
.pal { display: grid; grid-template-rows: 1fr auto; gap: 6px; padding: 10px; border: 2px solid; border-radius: var(--r); text-align: left; cursor: pointer }
.pal-sheet { display: grid; gap: 4px; border: 1px solid; border-radius: 3px; padding: 10px }
.pal-row { display: flex; gap: 5px; align-items: center; margin-top: 4px }
.pal-row i { width: 14px; height: 14px; border-radius: 50%; display: inline-block }
.pal-btn { margin-left: auto; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 3px }
.pal-mark { font-size: 12px; font-weight: 600 }
.rt.names th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); padding: 4px 6px; border-bottom: 1px solid var(--line) }
.rt.names td.hit { background: var(--brass-soft); color: var(--brass-ink); font-weight: 600 }

select { text-overflow: ellipsis }
.statblock { min-width: 0 }
.statblock select, .tres select { flex: 1 1 120px; width: 0; min-width: 0 }

/* удаление рядом с записью */
.li-wrap { position: relative; display: grid; gap: 6px }
.li-wrap > .li { padding-right: 36px }
.li-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border-color: transparent; background: transparent; color: var(--ink2); font-size: 13px }
.li-del:hover, .li-del:focus-visible { color: var(--crit); border-color: var(--crit); background: var(--crit-soft) }
.li-confirm { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--crit); border-radius: var(--r); background: var(--crit-soft) }
.li-confirm .small { flex: 1 1 140px; color: var(--crit) }
textarea.big { resize: none; overflow: hidden; min-height: 0; line-height: 1.2; padding-block: 4px; width: 100% }
.pc-card .nm { align-items: flex-start }
.pc-card .nm b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.pc-card .nm .small { flex: none; white-space: nowrap }
.li b { overflow-wrap: anywhere }

/* наследие */
.legacy > summary { list-style: none }
.legacy > summary::-webkit-details-marker { display: none }
.leg-sum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 4px 0 }
.leg-sum h3::after { content: " ▸"; color: var(--brass); font-size: 14px }
.legacy[open] .leg-sum h3::after { content: " ▾" }
.leg-sum .leg-name { font-family: var(--f-disp); font-style: italic; color: var(--ink2); margin-right: auto }
.leg-sum .pip { cursor: default; display: inline-block }
.leg-body { display: grid; gap: 12px; margin-top: 10px }
.leg-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end }
.leg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px }
.leg-card { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; background: var(--sheet2); box-shadow: var(--shadow) }
.leg-card.on { border-color: var(--brass) }
.leg-text { min-height: 96px; font-size: 15px; line-height: 1.5; field-sizing: content }
.leg-slot { font-size: 12px; padding: 3px 9px; border-radius: 99px }
.leg-slot.on { background: var(--brass); border-color: var(--brass); color: var(--on-accent) }
.file-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--brass); border-radius: var(--r); padding: 9px 12px; color: var(--brass-ink); cursor: pointer; background: var(--sheet) }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100% }
.file-btn:focus-within { outline: 2px solid var(--brass); outline-offset: 1px }

/* телефон */
@media (max-width: 620px) {
  h2 { font-size: 22px }
  .top { padding-top: 6px }
  .brand h1 { font-size: 21px }
  .brand .sub { display: none }
  .brand { flex-wrap: nowrap; align-items: center; gap: 8px }
  .brand h1 { white-space: nowrap; flex: none }
  .store-pill { min-width: 0 }
  .store-pill { font-size: 11px; text-align: right; line-height: 1.2 }
  nav .grp > span { display: none }
  .stats { gap: 6px }
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px 12px; -webkit-overflow-scrolling: touch }
  nav.tabs::-webkit-scrollbar { display: none }
  nav .grp { flex-wrap: nowrap }
  nav a { white-space: nowrap; padding: 9px 8px 10px }
  .panel { padding: 12px }
  .big { font-size: 20px }
  input, select, textarea { font-size: 16px }
  .stat select { font-size: 18px }
  button.step { width: 38px; padding: 7px 0 }
  .pip { width: 22px; height: 22px }
  .track button { width: 32px; height: 32px }
  .inv, .inv tbody { display: block }
  .inv thead { display: none }
  .inv tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line) }
  .inv td { border: 0; padding: 0; display: grid; gap: 2px; align-content: start }
  .inv td.n { grid-column: 1 / 5 } .inv td.n input { min-width: 0 }
  .inv td.x { grid-column: 5; grid-row: 1 }
  .inv td.t { grid-column: 1 / -1 }
  .inv td[data-l]::before { content: attr(data-l); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2) }
  .tbl-wrap { overflow: visible }
  .tray { left: calc(10px + env(safe-area-inset-left, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); max-width: none }
  .leg-grid { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: no-preference) { .tray { animation: rise .18s ease-out } @keyframes rise { from { transform: translateY(8px); opacity: .4 } to { transform: none; opacity: 1 } } }
.store-pill { cursor: pointer; -webkit-tap-highlight-color: transparent }
.acct { align-items: center }
.ava { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); flex: none }
button.store-pill { border: 0; background: none; padding: 0; color: var(--ink2) }
.auth-back { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-start; justify-content: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 14px 24px; overflow-y: auto }
.auth-box { width: 100%; max-width: 380px; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 10px }
.auth-box h3 { margin: 0 }
.auth-box input { width: 100%; box-sizing: border-box; font-size: 16px }
.auth-box .or { text-align: center; font-size: 12px; color: var(--ink2) }
.auth-err { min-height: 1.2em; font-size: 13px; color: var(--bad, #c0392b) }