/* Cadim panel. Visual reference: docs/superpowers/specs/assets/2026-10-22-painel-conferencia.html
   Every color lives in a token below; components never use a loose color. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); }

/* ---------- tokens ---------- */

:root {
  color-scheme: light;
  --ink: #15171A;
  --mute: #6B7078;
  --line: #E3E5E8;
  --line2: #EEF0F2;
  --page: #F3F4F6;
  --sheet: #FFFFFF;
  --mark: #FFE14D;
  --mark-soft: #FFF4B8;
  --mark-line: #D9B800;
  --on-mark: #15171A;
  --ok: #1F7A4D;
  --ok-soft: #E3F2EA;
  --bad: #B42318;
  --field: #C9CDD2;
  --sel: #F7F8F9;
  --kbd: #C3C7CD;
  --btn: #15171A;
  --on-btn: #FFFFFF;
  --btn-off: #D5D8DC;
  --on-btn-off: #8A8F96;
  --bar: #15171A;
  --bar-ink: #FFFFFF;
  --bar-mute: #C9CCD1;
  --bar-line: #34383E;
  --bar-hover: #24272C;
  --backdrop: rgba(21, 23, 26, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #E8EAED;
    --mute: #9BA1A9;
    --line: #2F3338;
    --line2: #282B30;
    --page: #17191C;
    --sheet: #202327;
    --mark: #FFE14D;
    --mark-soft: #3D3714;
    --mark-line: #B89C00;
    --on-mark: #15171A;
    --ok: #5BC48E;
    --ok-soft: #173A29;
    --bad: #F97066;
    --field: #3E434A;
    --sel: #272A2F;
    --kbd: #4A4F57;
    --btn: #E8EAED;
    --on-btn: #15171A;
    --btn-off: #34383E;
    --on-btn-off: #7E848C;
    --bar: #0E0F11;
    --bar-ink: #FFFFFF;
    --bar-mute: #A9AEB5;
    --bar-line: #2C3036;
    --bar-hover: #1C1E22;
    --backdrop: rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E8EAED;
  --mute: #9BA1A9;
  --line: #2F3338;
  --line2: #282B30;
  --page: #17191C;
  --sheet: #202327;
  --mark: #FFE14D;
  --mark-soft: #3D3714;
  --mark-line: #B89C00;
  --on-mark: #15171A;
  --ok: #5BC48E;
  --ok-soft: #173A29;
  --bad: #F97066;
  --field: #3E434A;
  --sel: #272A2F;
  --kbd: #4A4F57;
  --btn: #E8EAED;
  --on-btn: #15171A;
  --btn-off: #34383E;
  --on-btn-off: #7E848C;
  --bar: #0E0F11;
  --bar-ink: #FFFFFF;
  --bar-mute: #A9AEB5;
  --bar-line: #2C3036;
  --bar-hover: #1C1E22;
  --backdrop: rgba(0, 0, 0, .6);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--page);
  min-height: 100vh;
}

a { color: inherit; }

/* ---------- top bar ---------- */

.bar { display: flex; align-items: center; gap: 28px; padding: 12px 24px; background: var(--bar); color: var(--bar-ink); }
.bar .logo { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--bar-ink); text-decoration: none; }
.bar .logo i { font-style: normal; background: var(--mark); color: var(--on-mark); padding: 0 4px; margin-left: 1px; }
.bar nav { display: flex; gap: 20px; font-weight: 500; }
.bar nav a { color: var(--bar-mute); text-decoration: none; padding: 2px 0; }
.bar nav a:hover { color: var(--bar-ink); }
.bar nav a.on { color: var(--bar-ink); box-shadow: 0 2px 0 var(--mark); }
.bar .end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.store { display: flex; align-items: center; gap: 8px; color: var(--bar-mute); margin: 0; }
.store select {
  font: inherit; font-weight: 500; color: var(--bar-ink); background: var(--bar);
  border: 1px solid var(--bar-line); border-radius: 5px; padding: 5px 8px; max-width: 240px; cursor: pointer;
}
.store select:focus-visible, .bar-btn:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px; }

.bar-btn {
  font: inherit; font-weight: 500; color: var(--bar-mute); background: transparent;
  border: 1px solid var(--bar-line); border-radius: 5px; padding: 5px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.bar-btn:hover { color: var(--bar-ink); background: var(--bar-hover); }
.bar-btn svg { width: 16px; height: 16px; display: block; }

/* Theme toggle shows the icon of the current mode. */
.theme .i-light, .theme .i-dark { display: none; }
.theme[data-mode="light"] .i-system, .theme[data-mode="dark"] .i-system { display: none; }
.theme[data-mode="light"] .i-light, .theme[data-mode="dark"] .i-dark { display: block; }

/* ---------- page ---------- */

.wrap { padding: 20px 24px 28px; }
.crumb { color: var(--mute); font-size: 13px; margin-bottom: 8px; }
.crumb a { color: var(--mute); }
.head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.head .act { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.chip { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: var(--mark); color: var(--on-mark); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.meta {
  display: flex; flex-wrap: wrap; gap: 12px 36px; color: var(--mute); font-size: 12px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 12px 18px; margin-bottom: 18px;
}
.meta > span { display: flex; flex-direction: column; gap: 2px; }
.meta b { color: var(--ink); font-size: 15px; font-weight: 600; }

.grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.card { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; }

.empty { padding: 48px 24px; text-align: center; color: var(--mute); }
.empty b { display: block; color: var(--ink); font-size: 16px; font-weight: 700; margin-bottom: 4px; }

/* ---------- buttons and fields ---------- */

.btn {
  font: inherit; font-weight: 700; padding: 9px 16px; background: var(--btn); color: var(--on-btn);
  border: 0; border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn[disabled] { background: var(--btn-off); color: var(--on-btn-off); cursor: default; }
.btn-sec {
  font: inherit; font-weight: 500; padding: 8px 14px; background: var(--sheet); color: var(--ink);
  border: 1px solid var(--field); border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:focus-visible, .btn-sec:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mark); }

.f { margin-bottom: 20px; }
.f > label { display: block; font-weight: 700; margin-bottom: 6px; }
.f > label .opt { font-weight: 400; color: var(--mute); margin-left: 4px; }
.in {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--field); border-radius: 4px; padding: 8px 10px; width: 100%; outline: none;
}
.in:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--mark); }
.in[aria-invalid="true"] { border-color: var(--mark-line); background: var(--mark-soft); }
.hint { color: var(--mute); font-size: 12.5px; margin-top: 5px; }
.hint a { color: var(--ink); }
.err { font-size: 12.5px; font-weight: 500; margin-top: 6px; }
.err::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); border: 1px solid var(--mark-line); margin-right: 6px; }
.tag-new { display: inline-block; font-size: 11.5px; font-weight: 700; background: var(--mark); color: var(--on-mark); padding: 1px 6px; border-radius: 3px; margin-left: 8px; }

kbd { font-family: inherit; font-size: 11.5px; border: 1px solid var(--kbd); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; color: var(--mute); }

/* ---------- tables, tabs, pills ---------- */

.tools { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tab { font: inherit; padding: 5px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--mute); font-weight: 500; text-decoration: none; cursor: pointer; }
.tab:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px; }
.tab b { font-weight: 700; margin-left: 4px; }
.tab.on { background: var(--page); color: var(--ink); }
.tab .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); border: 1px solid var(--mark-line); margin-right: 6px; }
.tools .search { margin-left: auto; font: inherit; font-size: 13px; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px; width: 170px; }

table.items { width: 100%; border-collapse: collapse; }
.items th { text-align: left; font-size: 12px; font-weight: 500; color: var(--mute); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.items th.r, .items td.r { text-align: right; }
.items th.c, .items td.c { text-align: center; }
.items td { padding: 10px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.items td.n { color: var(--mute); width: 28px; }
.items .desc { font-weight: 500; }
.items .sub { color: var(--mute); font-size: 12.5px; margin-top: 1px; }
.items .st { width: 96px; }
.items tr.sel td { background: var(--sel); }
.items tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.items tfoot td { border: 0; padding: 12px; font-weight: 700; }
.items tfoot td.lbl { color: var(--mute); font-weight: 500; }

.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.pend { background: var(--mark); color: var(--on-mark); }

/* ---------- item panel and shelf label ---------- */

.panel { padding: 20px 24px 24px; }
.ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 20px; }
.ph h2 { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.ph .pos { color: var(--mute); font-size: 13px; white-space: nowrap; }
.ph .src { color: var(--mute); margin-top: 2px; }
.ph .src b { color: var(--ink); font-weight: 500; }

.units { display: flex; align-items: center; gap: 12px; }
.units .in { width: 70px; text-align: center; }
.units select.in { width: auto; text-align: left; }
.units .res { font-weight: 700; }
.units .eq { color: var(--mute); }

.gondola { display: flex; border-radius: 6px; overflow: hidden; margin: 0 0 22px; border: 2px solid var(--ink); }
.gondola > div { padding: 10px 14px; flex: 1; }
.gondola span.l { display: block; font-size: 12px; color: var(--mute); }
.gondola b { font-size: 17px; }
.gondola .p { background: var(--mark); color: var(--on-mark); flex: 1.5; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.gondola .p span.l { color: var(--on-mark); }
.gondola .p .rs { font-size: 14px; font-weight: 700; vertical-align: top; }
.gondola .p input { font: inherit; font-size: 30px; font-weight: 800; letter-spacing: -.03em; width: 96px; border: 0; background: transparent; color: var(--on-mark); outline: none; padding: 0; line-height: 1; }
.gondola .m b { color: var(--ok); }
.gondola .m label.l { display: block; font-size: 12px; color: var(--mute); }
.gondola .pct { display: inline-flex; align-items: baseline; gap: 1px; font-size: 17px; font-weight: 700; color: var(--ok); }
.gondola .pct input { font: inherit; color: inherit; field-sizing: content; min-width: 1.5ch; border: 0; border-bottom: 1px dashed var(--field); background: transparent; outline: none; padding: 0; text-align: right; }
@supports not (field-sizing: content) { .gondola .pct input { width: 3.2ch; } }
.gondola .pct input:focus { border-bottom-color: var(--ink); }
.gondola .pct input::placeholder { color: var(--mute); }
.gondola .pct input:placeholder-shown + span { visibility: hidden; }
.gondola .pct:has(input.neg) { color: var(--bad); }
.gondola .m b.neg { color: var(--bad); }
.tag-hint { margin: -14px 0 22px; }
button.link { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

.actions { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
.actions .btn { padding: 11px 18px; }
.actions .skip { color: var(--mute); }
.actions kbd { margin-left: auto; }

/* ---------- receipt review ---------- */

.progress { display: flex; align-items: center; gap: 12px; margin: -6px 0 18px; }
.progress .ptext { color: var(--mute); font-size: 13px; font-weight: 500; white-space: nowrap; }
.progress .track { flex: 1; max-width: 320px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress .fill { height: 100%; background: var(--ok); }

.items tr.item { cursor: pointer; }
.items tr.item:hover td { background: var(--sel); }
.items tr.item:focus-visible { outline: 0; }
.items tr.item:focus-visible td { box-shadow: inset 0 0 0 2px var(--mark); }
.items tr.item.sel:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--ink), inset 0 0 0 2px var(--mark); }
.items td.nowrap { white-space: nowrap; }
.items .sub .warn { display: inline-block; font-weight: 700; color: var(--on-mark); background: var(--mark); padding: 0 5px; border-radius: 3px; margin-left: 4px; font-size: 11.5px; }
.items tr.no-rows td { color: var(--mute); text-align: center; padding: 22px 12px; }

fieldset.pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.picked { border: 1px solid var(--field); border-radius: 4px; padding: 9px 11px; background: var(--sel); }
.picked b { font-size: 15px; font-weight: 700; }
.picked .hint { margin-top: 2px; }
.picked .hint a { margin-left: 6px; font-weight: 500; }

.results:empty { display: none; }
.result-list { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.result-list li + li { border-top: 1px solid var(--line2); }
.result {
  font: inherit; color: var(--ink); background: var(--sheet); border: 0; width: 100%; text-align: left;
  padding: 8px 11px; cursor: pointer; display: flex; align-items: baseline; gap: 8px;
}
.result:hover { background: var(--sel); }
.result:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--mark); }
.result .opt { color: var(--mute); font-size: 12px; margin-left: auto; }
.results .hint { margin-top: 6px; }

.f > label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.f.tight { margin-bottom: 6px; }
.f.tight .lbl { font-weight: 700; }
.f .opt { font-weight: 400; color: var(--mute); margin-left: 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two label { display: block; font-weight: 700; margin-bottom: 6px; }
.in.date { max-width: 200px; }
.two .in.date { max-width: none; }

.gondola .p .big { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.gondola .p input::placeholder { color: var(--on-mark); opacity: .35; }
.gondola:focus-within { box-shadow: 0 0 0 3px var(--mark-soft); }
.actions .skip:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0 0 22px; }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; font-weight: 500; }
.facts .opt { color: var(--mute); font-weight: 400; }

/* ---------- flash ---------- */

#flash:empty { display: none; }
#flash { padding: 16px 24px 0; }
.flash {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px;
  background: var(--mark-soft); border: 1px solid var(--mark-line); border-left: 4px solid var(--mark); border-radius: 6px;
  font-weight: 500;
}
.flash button { margin-left: auto; font: inherit; font-size: 18px; line-height: 1; color: var(--mute); background: transparent; border: 0; cursor: pointer; padding: 0 4px; }

/* ---------- first store and dialog ---------- */

.welcome { display: flex; justify-content: center; padding: 64px 24px; }
.welcome .card { width: 100%; max-width: 440px; padding: 28px 28px 24px; }
.welcome h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.welcome h1 i { font-style: normal; background: var(--mark); color: var(--on-mark); padding: 0 4px; }
.welcome .lead { color: var(--mute); margin: 0 0 22px; }

.form-actions { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.form-actions .btn { padding: 11px 18px; }

dialog.sheet {
  border: 1px solid var(--line); border-radius: 6px; padding: 0; width: min(440px, calc(100vw - 32px));
  background: var(--sheet); color: var(--ink);
}
dialog.sheet::backdrop { background: var(--backdrop); }
dialog.sheet .ph { padding: 20px 24px 14px; margin: 0; }
dialog.sheet form { padding: 20px 24px 24px; }
dialog.sheet .x { font: inherit; font-size: 20px; line-height: 1; color: var(--mute); background: transparent; border: 0; cursor: pointer; }

/* ---------- receipt upload ---------- */

.upload { margin-bottom: 16px; }
.upload form { background: var(--sheet); border: 2px dashed var(--field); border-radius: 6px; padding: 16px 20px; }
.upload form.drag { border-color: var(--mark-line); background: var(--mark-soft); }
.upload-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.upload-label { font-weight: 500; }
.upload .in { width: auto; flex: 1; min-width: 200px; }
.upload .err a { margin-left: 8px; font-weight: 700; }
.upload form.htmx-request .btn { background: var(--btn-off); color: var(--on-btn-off); }
.items tr.row-link td a { text-decoration: none; font-weight: 700; }
.items tr.row-link:hover td { background: var(--sel); }

/* ---------- products ---------- */

.code-list .opt { color: var(--mute); font-weight: 400; margin-left: 6px; font-size: 12.5px; }
.hint.more { padding: 10px 12px; border-top: 1px solid var(--line2); margin: 0; }
.in.days { max-width: 120px; }
.codes { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.codes h3 { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.codes .codes-lead { margin: 0 0 12px; }
.code-list { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: 4px; }
.code-list li { padding: 7px 11px; font-variant-numeric: tabular-nums; }
.code-list li + li { border-top: 1px solid var(--line2); }
.codes-add { display: flex; gap: 12px; align-items: flex-end; }
.codes-add .f { margin-bottom: 8px; }
.codes-add .f:first-child { flex: 1; }
.codes-add .f > label { font-weight: 500; }

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  .bar { flex-wrap: wrap; gap: 12px 20px; padding: 12px 16px; }
  .bar .end { margin-left: 0; width: 100%; }
  .store select { max-width: none; flex: 1; }
  .store { flex: 1; }
  .wrap { padding: 16px; }
  .grid { grid-template-columns: 1fr; }
  .meta { gap: 10px 24px; padding: 12px 14px; }
  .head { flex-wrap: wrap; }
  .head .act { margin-left: 0; width: 100%; }
  .tools { flex-wrap: wrap; }
  .tools .search { margin-left: 0; width: 100%; }
  .two { grid-template-columns: 1fr; }
  .welcome { padding: 32px 16px; }
}

/* ---------- store prices (central) ---------- */

.store-prices { margin: 0 0 22px; }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sp-head .lbl { font-weight: 700; }
.sp-cost { color: var(--mute); font-size: 12.5px; }
.sp-cost b { color: var(--ink); }
.sp-list { border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.sp-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 14px; padding: 8px 12px; border-top: 1px solid var(--line); }
.sp-row:first-child { border-top: 0; }
.sp-row .err { grid-column: 1 / -1; margin-top: 0; }
.sp-name { font-weight: 500; }
.sp-name .opt { display: block; font-size: 12px; font-weight: 400; color: var(--mute); }
.sp-price { display: inline-flex; align-items: baseline; gap: 2px; background: var(--mark); color: var(--on-mark); border-radius: 4px; padding: 4px 8px; }
.sp-price .rs { font-size: 12px; font-weight: 700; }
.sp-price input { font: inherit; font-size: 18px; font-weight: 800; width: 78px; border: 0; background: transparent; color: var(--on-mark); outline: none; padding: 0; }
.sp-price input::placeholder { color: var(--on-mark); opacity: .4; }
.sp-price:has(input[aria-invalid="true"]) { box-shadow: 0 0 0 2px var(--mark-line); }
.sp-price:focus-within { box-shadow: 0 0 0 3px var(--mark-soft); }
.sp-row .pct { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 700; color: var(--ok); }
.sp-row .pct input { font: inherit; color: inherit; field-sizing: content; min-width: 1.5ch; border: 0; border-bottom: 1px dashed var(--field); background: transparent; outline: none; padding: 0; text-align: right; }
@supports not (field-sizing: content) { .sp-row .pct input { width: 3.2ch; } }
.sp-row .pct input:focus { border-bottom-color: var(--ink); }
.sp-row .pct input::placeholder { color: var(--mute); }
.sp-row .pct input[placeholder="–"]:placeholder-shown + span { visibility: hidden; }
.sp-row .pct:has(input.neg) { color: var(--bad); }
.sp-hint { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* Transfers (repasses) */
.new-transfer, .store-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.new-transfer label, .store-filter label { color: var(--mute); }
.new-transfer select.in, .store-filter select.in { width: auto; }
.shortfall { padding: 14px 18px; margin-bottom: 16px; border-color: var(--mark-line); background: var(--mark-soft); }
.shortfall ul { margin: 6px 0 0; padding-left: 18px; }
.line-units { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.line-units .in { width: 64px; text-align: center; padding-top: 4px; padding-bottom: 4px; }
.items td form { margin: 0; }
.items td.neg { color: var(--bad); font-weight: 700; }
.units .warn { font-weight: 700; color: var(--on-mark); background: var(--mark); padding: 0 5px; border-radius: 3px; font-size: 11.5px; }
.grid.transfer-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); }
.scroll-x { overflow-x: auto; }
#transfer-items th { white-space: nowrap; }
#transfer-items td:first-child { min-width: 180px; }
.items .x { font: inherit; font-size: 20px; line-height: 1; color: var(--mute); background: transparent; border: 0; padding: 2px 4px; cursor: pointer; }
.items .x:hover { color: var(--bad); }
.stock-pick { margin-top: 10px; max-height: min(60vh, 520px); overflow-y: auto; }
.stock-pick .result { align-items: center; }
.stock-pick .opt { text-align: right; white-space: nowrap; }
.stock-pick .in-transfer { display: block; color: var(--ok); }
.stock-pick .none { padding: 10px 11px; margin: 0; }
.add-dialog { width: min(480px, calc(100vw - 32px)); }
.add-have { margin: 0 0 16px; }
@media (max-width: 760px) {
  .grid.transfer-grid { grid-template-columns: 1fr; }
}
.in.code { width: 120px; text-transform: uppercase; }
.in.code::placeholder { text-transform: none; }