/*
 * COUNT — Material Design 3 Expressive web implementation
 * Design roles: tonal color, expressive shape scale, type hierarchy, state layers.
 * Motion: dedicated physics-driven spatial springs in expressive.js; CSS effects
 * use non-overshooting easing. Zero remote fonts, trackers, or UI dependencies.
 */
:root {
  color-scheme: light;
  --md-primary: #20564d;
  --md-on-primary: #fff;
  --md-primary-container: #c5eede;
  --md-on-primary-container: #153d34;
  --md-secondary: #50635e;
  --md-on-secondary: #fff;
  --md-secondary-container: #d4e7df;
  --md-on-secondary-container: #31463f;
  --md-tertiary: #456487;
  --md-tertiary-container: #d8e7ff;
  --md-on-tertiary-container: #254568;
  --md-error: #b3261e;
  --md-on-error: #fff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #80201c;
  --md-surface: #f7faf7;
  --md-surface-container-low: #f0f5f0;
  --md-surface-container: #eaf1eb;
  --md-surface-container-high: #e2ebe4;
  --md-surface-container-highest: #dae5dd;
  --md-surface-container-lowest: #ffffff;
  --md-on-surface: #17231f;
  --md-on-surface-variant: #52645c;
  --md-outline: #778a80;
  --md-outline-variant: #c7d7ca;
  --md-inverse-surface: #2a3730;
  --md-inverse-on-surface: #ebf3eb;
  --md-state-hover: .08;
  --md-state-pressed: .12;
  --md-shape-xs: 8px;
  --md-shape-sm: 12px;
  --md-shape-md: 18px;
  --md-shape-lg: 28px;
  --md-shape-xl: 36px;
  --md-shape-xxl: 48px;
  --md-effects-fast: 170ms;
  --md-effects-default: 260ms;
  --md-effects-slow: 400ms;
  --md-ease-effects: cubic-bezier(.2,0,0,1);
  --md-shadow: 0 6px 22px rgba(26,51,39,.055);
  --md-shadow-raised: 0 13px 34px rgba(24,55,39,.12);
  /* Map v1 roles to the shared tonal system. */
  --pine: var(--md-primary);
  --pine-dark: #17433b;
  --ink: var(--md-on-surface);
  --muted: var(--md-on-surface-variant);
  --line: var(--md-outline-variant);
  --bg: var(--md-surface);
  --mint: var(--md-primary-container);
  --aqua: #85dbc0;
  --paper: var(--md-surface-container-lowest);
  --orange: #956019;
  --red: var(--md-error);
  --radius: var(--md-shape-lg);
  --shadow: var(--md-shadow);
}

html { scroll-behavior: smooth; font-family: "Roboto Flex", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; }
body { background: var(--md-surface); color: var(--md-on-surface); font-size: 14px; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
h1,h2,h3 { letter-spacing: -.035em; }
h1 { font-weight: 760; line-height: 1.09; font-size: clamp(32px,4vw,52px); }
h2 { font-size: 23px; font-weight: 740; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 700; }
p { color: var(--md-on-surface-variant); line-height: 1.6; }
:where(button, a, input, select, .md-select-trigger, [role=option]):focus-visible {
  outline: 3px solid var(--md-tertiary);
  outline-offset: 3px;
}
:where(button,a) { -webkit-tap-highlight-color: transparent; }
:where(.btn,.role-option,.tabs button,.md-select-trigger) { position: relative; overflow: hidden; isolation: isolate; }
.md-ripple { position:absolute; pointer-events:none; z-index:0; border-radius:50%; background:currentColor; opacity:.14; transform:translate(-50%,-50%) scale(0); mix-blend-mode:multiply; }
:where(.btn,.role-option,.tabs button,.md-select-trigger) > :not(.md-ripple) { position:relative; z-index:1; }

/* App chrome */
.topbar {
  height: 78px;
  padding-inline: clamp(18px,4.5vw,74px);
  background: color-mix(in srgb,var(--md-surface) 93%,transparent);
  border: 0;
  border-bottom:1px solid var(--md-outline-variant);
  position: sticky; top:0; z-index:40;
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
}
.brand { letter-spacing:-.065em; font-size: 23px; font-weight:830; gap:11px; }
.brand-icon { width:43px; height:43px; border-radius:16px; background:var(--md-primary); color:var(--md-on-primary); }
.brand-icon svg { width:25px; height:25px; stroke-width:2.2; }
.brand-dot { color:var(--md-tertiary); }
.brand-light { color:var(--md-on-primary); }
.brand-light .brand-icon { background:var(--md-primary-container); color:var(--md-on-primary-container); }
.brand-light .brand-dot { color:#b4d7ff; }
.app-tag { background:var(--md-secondary-container); color:var(--md-on-secondary-container); border-radius:50px; padding:6px 10px; letter-spacing:.05em; }
.user-name { font-size:13px; font-weight:650; color:var(--md-on-surface-variant); }
.page { max-width:1480px; padding-top:48px; }
.page-heading { margin-bottom:34px; }
.page-heading p { margin-top:12px; font-size:15px; }
.overline, .kicker, .eyebrow { font-size:11px; font-weight:760; letter-spacing:.125em; color:var(--md-secondary); }
.top-pill { background:var(--md-secondary-container); color:var(--md-on-secondary-container); border:0; border-radius:50px; padding:12px 16px; font-size:12px; font-weight:680; }
.pulse { background:#28865b; box-shadow:0 0 0 5px rgba(40,134,91,.13); }

/* Surfaces & section identity */
.card { border-radius:var(--md-shape-xl); background:var(--md-surface-container-lowest); border:1px solid color-mix(in srgb,var(--md-outline-variant) 55%,transparent); padding:32px; box-shadow:none; }
.card.compact { padding:27px; }
.card + .card { margin-top:20px; }
.section-title { gap:17px; margin-bottom:29px; }
.section-title p { font-size:13px; margin-top:7px; }
.step-bubble { border-radius:17px; height:49px; width:49px; font-size:16px; background:var(--md-primary-container); color:var(--md-on-primary-container); }
.icon-tile { background:var(--md-tertiary-container); color:var(--md-on-tertiary-container); border-radius:18px; height:53px; width:53px; }
.divider-line { border-color:var(--md-outline-variant); }

/* Text fields and adaptive selectors */
label,.field { color:var(--md-on-surface-variant); font-size:12px; font-weight:660; gap:9px; }
.field { display:flex; flex-direction:column; min-width:0; }
.field-label { font-size:12px; font-weight:660; color:var(--md-on-surface-variant); }
input:not([type=checkbox]):not([type=file]),select,.md-select-trigger {
  min-height:54px; height:54px; border-radius:var(--md-shape-md);
  border:1px solid var(--md-outline-variant); padding:0 17px;
  background:var(--md-surface-container-low); color:var(--md-on-surface); font-size:14px;
  transition:background var(--md-effects-fast) var(--md-ease-effects),border-color var(--md-effects-fast) var(--md-ease-effects),box-shadow var(--md-effects-fast) var(--md-ease-effects);
}
input:not([type=checkbox]):not([type=file]):hover,select:hover { background:var(--md-surface-container); }
input:focus,select:focus { border-color:var(--md-primary); box-shadow:0 0 0 2px var(--md-primary-container); background:var(--md-surface-container-lowest); }
input[type=file] { background:var(--md-surface-container-low); color:var(--md-on-surface-variant); border-color:var(--md-outline-variant); border-radius:var(--md-shape-md); padding:15px; font-size:12px; }
input[type=file]::file-selector-button { border:0; border-radius:100px; background:var(--md-secondary-container); color:var(--md-on-secondary-container); font:inherit; font-weight:720; padding:9px 13px; margin-right:10px; cursor:pointer; }
input[type=checkbox] { accent-color:var(--md-primary); }
input::placeholder { color:var(--md-on-surface-variant); opacity:.7; }
.md-native-select { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:0!important; overflow:hidden!important; opacity:0!important; clip-path:inset(50%); pointer-events:none; }
.md-select-shell { position:relative; width:100%; }
.md-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; width:100%; font-weight:620; cursor:pointer; white-space:nowrap; }
.md-select-trigger:hover { background:var(--md-surface-container); }
.md-select-trigger[aria-expanded=true] { border-color:var(--md-primary); box-shadow:0 0 0 2px var(--md-primary-container); background:var(--md-surface-container-lowest); }
.md-select-value { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; flex:1; }
.md-select-trigger .md-chevron { color:var(--md-on-surface-variant); width:19px; height:19px; flex:none; transition:transform var(--md-effects-fast) var(--md-ease-effects); }
.md-select-trigger[aria-expanded=true] .md-chevron { transform:rotate(180deg); }
.md-select-menu { position:fixed; z-index:200; padding:8px; background:var(--md-surface-container-lowest); color:var(--md-on-surface); border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-lg); box-shadow:0 12px 40px rgba(13,42,32,.18); max-height:min(360px,60vh); overflow:auto; overscroll-behavior:contain; }
.md-select-option { position:relative; padding:13px 16px; font-size:14px; font-weight:580; border-radius:var(--md-shape-md); display:flex; gap:12px; align-items:center; justify-content:space-between; cursor:pointer; outline-offset:-2px; min-height:46px; }
.md-select-option:hover,.md-select-option:focus-visible { background:var(--md-surface-container-low); }
.md-select-option[aria-selected=true] { background:var(--md-secondary-container); color:var(--md-on-secondary-container); font-weight:740; }
.md-select-option[aria-selected=true]::after { content:"✓"; margin-left:auto; font-size:16px; }
.md-select-option[data-placeholder=true] { color:var(--md-on-surface-variant); }
.md-select-backdrop { position:fixed; inset:0; z-index:190; background:transparent; }

/* Buttons and controls */
.btn { border-radius:100px; min-height:45px; padding:12px 22px; font-size:13px; font-weight:730;
  transition:background var(--md-effects-fast) var(--md-ease-effects), color var(--md-effects-fast) var(--md-ease-effects), box-shadow var(--md-effects-default) var(--md-ease-effects), border-radius var(--md-effects-default) var(--md-ease-effects); }
.btn:not(:disabled):hover { box-shadow:var(--md-shadow); }
.btn:not(:disabled):active { transform:none; border-radius:16px; }
.btn-primary { background:var(--md-primary); color:var(--md-on-primary); }
.btn-primary:hover { background:color-mix(in srgb,var(--md-primary) 91%,white); }
.btn-outline { background:transparent; border:1px solid var(--md-outline); color:var(--md-primary); }
.btn-outline:hover { background:var(--md-secondary-container); border-color:var(--md-secondary-container); }
.btn-text { background:transparent; color:var(--md-primary); border:0; }
.btn-text:hover { background:var(--md-secondary-container); }
.btn:disabled { opacity:.44; box-shadow:none; }
.btn.small { min-height:38px; }
.align-end { margin-top:27px; }
.btn svg,.action-icon { width:17px; height:17px; flex-shrink:0; }

/* Login page — enlarged expressive hero with two actionable role surfaces */
.login-page { background:var(--md-surface); }
.login-shell { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:18px; gap:18px; min-height:100dvh; }
.login-left { border-radius:var(--md-shape-xxl); padding:58px clamp(42px,5.5vw,108px); background:radial-gradient(ellipse at 12% 2%,#346d5d 0,transparent 52%),linear-gradient(135deg,#1b5146 0%,#143b38 65%,#173b48 100%); }
.login-left::after { border:2px solid rgba(205,255,233,.1); box-shadow:0 0 0 130px rgba(215,253,233,.032), 0 0 0 270px rgba(215,253,233,.024); left:-370px; bottom:-560px; }
.hero-copy h1 { font-size:clamp(48px,5.5vw,88px); font-weight:770; letter-spacing:-.06em; }
.hero-copy h1 em { color:#afe8cc; }
.hero-copy p { color:#d4e9de; font-size:16px; }
.hero-copy .overline,.login-foot { color:#aed1c1; }
.login-right { border-radius:var(--md-shape-xxl); padding:clamp(30px,5.2vw,100px); background:var(--md-surface-container-low); }
.circle-symbol { border-radius:18px; background:var(--md-tertiary-container); color:var(--md-on-tertiary-container); width:56px; height:56px; margin-bottom:33px; }
.circle-symbol svg { width:28px; height:28px; }
.login-form { max-width:530px; }
.login-form h2 { font-size:clamp(35px,3.5vw,51px); font-weight:770; }
.login-form>p { font-size:14px; margin-bottom:35px; }
.role-option { border:1px solid transparent; background:var(--md-surface-container-lowest); border-radius:var(--md-shape-xl); padding:24px; gap:18px; min-height:103px;
  transition:background var(--md-effects-default) var(--md-ease-effects), border-radius var(--md-effects-default) var(--md-ease-effects), box-shadow var(--md-effects-default) var(--md-ease-effects), border-color var(--md-effects-default) var(--md-ease-effects); }
.role-option:hover { transform:none; border-color:var(--md-outline-variant); background:var(--md-primary-container); border-radius:var(--md-shape-lg); box-shadow:var(--md-shadow-raised); }
.role-option:active { border-radius:var(--md-shape-md); }
.role-option strong { font-size:16px; font-weight:750; }
.role-option small { font-size:12px; }
.role-symbol { background:var(--md-primary-container); color:var(--md-on-primary-container); border-radius:18px; width:55px; height:55px; }
.role-option:hover .role-symbol { background:var(--md-primary); color:var(--md-on-primary); }
.role-symbol svg { height:26px; width:26px; }
.role-arrow { width:35px; height:35px; border-radius:50%; background:var(--md-secondary-container); color:var(--md-on-secondary-container); display:grid; place-items:center; }
.role-arrow svg { width:19px; height:19px; }
.login-note { border-color:var(--md-outline-variant); font-size:12px; }

/* Scanner */
#setupCard { background:var(--md-surface-container-lowest); }
.scan-layout { grid-template-columns:minmax(0,1.75fr) minmax(280px,.75fr); gap:20px; }
.scan-card { background:var(--md-surface-container-lowest); }
.scan-input-wrap { border-radius:var(--md-shape-lg); background:var(--md-surface-container-low); border:2px solid transparent; padding:10px 10px 10px 20px; min-height:76px; transition:border-color var(--md-effects-fast) var(--md-ease-effects),background var(--md-effects-fast) var(--md-ease-effects); }
.scan-input-wrap:focus-within { border-color:var(--md-primary); background:var(--md-surface-container-lowest); box-shadow:0 0 0 3px var(--md-primary-container); }
.scan-input-wrap input { font-size:17px; font-weight:650; }
.scan-input-wrap input::placeholder { font-size:13px; }
.scan-glyph { color:var(--md-primary); display:flex; align-items:center; }
.scan-glyph svg { width:27px; height:27px; }
.matches { gap:10px; }
.match { border-radius:var(--md-shape-lg); background:var(--md-surface-container-low); border:1px solid transparent; min-height:82px; padding:17px; }
.match:hover { border-color:var(--md-outline-variant); }
.count-panel { border-top-color:var(--md-outline-variant); }
.selected-product { border-radius:var(--md-shape-lg); padding:16px; background:var(--md-secondary-container); }
.selected-product .overline { color:var(--md-on-secondary-container); }
.side-stack .card:first-child { background:var(--md-primary-container); color:var(--md-on-primary-container); border-color:transparent; }
.side-stack .card:first-child .muted,.side-stack .card:first-child .kicker { color:var(--md-on-primary-container); opacity:.8; }
.side-stack .card:first-child .divider-line { border-color:color-mix(in srgb,var(--md-on-primary-container) 22%,transparent); }
.location-big { font-size:clamp(30px,3vw,42px); }
.big-stat { font-size:42px; }
.entry { padding:13px 0; }
.entry-actions button { color:var(--md-error); font-weight:660; padding:6px 10px; border-radius:50px; }
.entry-actions button:hover { background:var(--md-error-container); }
.helper { color:var(--md-on-surface-variant); }
.flash { position:fixed; inset:auto max(18px,2vw) 22px auto; max-width:min(480px,calc(100vw - 36px)); border-radius:var(--md-shape-md); background:var(--md-inverse-surface); color:var(--md-inverse-on-surface); box-shadow:var(--md-shadow-raised); padding:16px 21px; z-index:300; font-size:13px; font-weight:660; }
.flash.error { background:var(--md-error-container); color:var(--md-on-error-container); }
.flash.show { animation:none; }

/* Admin — segmented scrolling navigation with expanding selected state */
.admin-page { padding-top:45px; }
.tabs { margin-bottom:25px; padding:8px; gap:5px; border:0; border-radius:var(--md-shape-lg); background:var(--md-surface-container); scrollbar-width:thin; position:sticky; top:88px; z-index:35; }
.tabs button { padding:13px 20px; border:0; border-radius:100px; color:var(--md-on-surface-variant); font-size:13px; min-height:48px; transition:background var(--md-effects-fast) var(--md-ease-effects),color var(--md-effects-fast) var(--md-ease-effects),border-radius var(--md-effects-default) var(--md-ease-effects); }
.tabs button:hover { background:var(--md-surface-container-highest); }
.tabs button.active { background:var(--md-secondary-container); color:var(--md-on-secondary-container); border:0; border-radius:var(--md-shape-md); }
.tabs button.active:hover { background:var(--md-secondary-container); }
.tab-panel { gap:19px; }
.kpi-grid { gap:14px; }
.kpi { background:var(--md-surface-container-lowest); border:0; border-radius:var(--md-shape-lg); padding:24px; }
.kpi:nth-child(4n+2) { background:var(--md-secondary-container); }
.kpi:nth-child(4n+3) { background:var(--md-tertiary-container); }
.kpi:nth-child(4n+4) { background:var(--md-primary-container); }
.kpi .kicker { color:inherit; opacity:.75; }
.kpi strong { font-size:36px; font-weight:760; margin-top:12px; }
.info-grid div { border-color:var(--md-primary-container); }
.form-line .btn { min-height:54px; height:54px; }
.round { background:var(--md-surface-container-low); border:1px solid transparent; border-radius:var(--md-shape-lg); padding:19px 22px; }
.round:hover { border-color:var(--md-outline-variant); }
.round h3 { font-size:17px; }
.state { border-radius:100px; font-size:11px; font-weight:770; padding:8px 12px; }
.state.open,.state.done { background:var(--md-primary-container); color:var(--md-on-primary-container); }
.state.closed,.state.missing { background:var(--md-surface-container-high); color:var(--md-on-surface-variant); }
.state.diff { background:#ffddb7; color:#683c04; }
.review-stats > div { background:var(--md-surface-container-low); border:0; border-radius:var(--md-shape-lg); padding:19px; }
.review-stats b { font-size:29px; }
.table-wrap { border-color:var(--md-outline-variant); border-radius:var(--md-shape-lg); }
th { background:var(--md-surface-container); color:var(--md-on-surface-variant); font-size:11px; }
td,th { padding:15px 18px; border-color:var(--md-outline-variant); }
td { color:var(--md-on-surface-variant); }
tbody tr { transition:background var(--md-effects-fast) var(--md-ease-effects); }
tbody tr:hover { background:var(--md-surface-container-low); }
.warning-note { background:#fff0d7; color:#694500; border-radius:var(--md-shape-md); padding:18px; }
.checkbox-line { border-radius:var(--md-shape-md); padding:13px 16px; background:var(--md-surface-container-low); }
.checkbox-line input { accent-color:var(--md-primary); width:20px; height:20px; }

/* Confirmation dialog: native <dialog> for focus-trapping and inert backdrop */
.md-dialog { border:0; color:var(--md-on-surface); background:var(--md-surface-container-high); border-radius:var(--md-shape-xl); box-shadow:0 20px 70px rgba(0,0,0,.25); max-width:min(450px,calc(100vw - 36px)); width:100%; padding:31px; overflow:visible; }
.md-dialog::backdrop { background:rgba(13,26,20,.44); backdrop-filter:blur(3px); }
.md-dialog-icon { background:var(--md-tertiary-container); color:var(--md-on-tertiary-container); border-radius:20px; display:grid; place-items:center; width:55px; height:55px; margin-bottom:18px; }
.md-dialog-icon svg { width:27px; height:27px; }
.md-dialog h2 { margin-bottom:10px; font-size:26px; }
.md-dialog p { font-size:14px; margin:0; }
.md-dialog-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:28px; }

@media (prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --md-primary:#9dd8bc;
    --md-on-primary:#123d30;
    --md-primary-container:#2b5444;
    --md-on-primary-container:#c7f1dc;
    --md-secondary:#b3cdc0;
    --md-on-secondary:#203b2f;
    --md-secondary-container:#354f44;
    --md-on-secondary-container:#d0e9dd;
    --md-tertiary:#a9caed;
    --md-tertiary-container:#344f71;
    --md-on-tertiary-container:#d8e9ff;
    --md-error:#ffb4ab;
    --md-on-error:#690005;
    --md-error-container:#732622;
    --md-on-error-container:#ffdad6;
    --md-surface:#111a15;
    --md-surface-container-low:#19241e;
    --md-surface-container:#202c25;
    --md-surface-container-high:#29362e;
    --md-surface-container-highest:#334138;
    --md-surface-container-lowest:#0b120e;
    --md-on-surface:#e3eee5;
    --md-on-surface-variant:#b3c5b8;
    --md-outline:#84988a;
    --md-outline-variant:#405247;
    --md-inverse-surface:#e3eee5;
    --md-inverse-on-surface:#1a2920;
    --md-shadow:0 6px 24px rgba(0,0,0,.15);
    --md-shadow-raised:0 13px 34px rgba(0,0,0,.32);
    --pine-dark:#addbc8;
  }
  .login-left { background:radial-gradient(ellipse at 12% 2%,#2b5f4c 0,transparent 52%),linear-gradient(135deg,#143d31,#0c2927 65%,#152a3d); }
  .login-form .ink { color:var(--md-primary); }
  .role-option:hover .role-symbol { background:var(--md-primary); color:var(--md-on-primary); }
  .pulse { background:#a3dbb8; box-shadow:0 0 0 5px rgba(163,219,184,.17); }
  .state.diff { background:#573d1d; color:#ffdab3; }
  .warning-note { background:#523d19; color:#ffe0b3; }
  .scan-input-wrap input { color:var(--md-on-surface); }
  .md-ripple { mix-blend-mode:screen; }
}

@media(max-width:1100px) {
  .tabs { top:78px; }
  .login-left { padding:44px; }
  .login-right { padding:42px; }
  .io-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:720px) {
  .login-shell { grid-template-columns:1fr; padding:10px; gap:10px; min-height:100dvh; }
  .login-left { min-height:280px; padding:30px; border-radius:var(--md-shape-xl); }
  .hero-copy { margin:32px 0 15px; }
  .hero-copy h1 { font-size:clamp(43px,9vw,64px); }
  .login-right { padding:32px 23px 48px; border-radius:var(--md-shape-xl); }
  .role-option { padding:17px; min-height:91px; }
  .role-symbol { height:49px; width:49px; border-radius:16px; }
  .topbar { height:69px; }
  .brand { font-size:20px; }
  .brand-icon { width:38px; height:38px; border-radius:13px; }
  .page { padding:29px 15px 90px; }
  .page-heading { margin-bottom:24px; }
  .page-heading h1 { font-size:clamp(31px,7vw,42px); }
  .card { padding:23px 19px; border-radius:var(--md-shape-lg); }
  .card.compact { padding:22px; }
  .section-title { align-items:flex-start; gap:12px; flex-wrap:wrap; }
  .section-title .push-right { margin-left:0; width:100%; }
  .step-bubble { width:43px; height:43px; border-radius:15px; }
  .scan-input-wrap { min-height:72px; }
  .scan-input-wrap .btn { width:100%; }
  .scan-input-wrap input { min-width:0; }
  .tabs { top:70px; margin-inline:-15px; border-radius:0; padding:8px 15px; }
  .tabs button { min-height:45px; padding:11px 16px; }
  .review-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi { padding:17px; }
  .kpi strong { font-size:30px; }
  .io-grid { grid-template-columns:1fr; }
  .md-select-menu { position:fixed!important; left:12px!important; right:12px!important; bottom:12px!important; top:auto!important; width:auto!important; max-height:min(60dvh,490px); border-radius:var(--md-shape-xl); padding:12px; }
  .md-select-backdrop { background:rgba(0,0,0,.36); backdrop-filter:blur(2px); }
  .md-dialog { border-radius:var(--md-shape-lg); padding:25px; }
  .flash { left:14px; right:14px; bottom:14px; max-width:none; }
}
@media(max-width:390px) {
  .top-actions { gap:2px; }
  .top-actions .btn { padding:10px; }
  .top-actions .btn-outline { font-size:11px; }
  .app-tag { padding:4px 7px; }
  .role-symbol { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .md-ripple { display:none!important; }
}

/* V1.2 – clearly separated round creation, round history and editable records. */
.round-hero { display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--md-primary-container);border-color:transparent; }
.round-hero h2 { color:var(--md-on-primary-container);margin:7px 0 9px; }
.round-hero p { color:var(--md-on-primary-container);max-width:650px; }
.round-hero .btn { flex:none; }
.create-round { border:2px solid var(--md-primary); }
.create-round .kicker { color:var(--md-primary); }
.round-filters { display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:16px 0 22px; }
.filter-chip { background:var(--md-surface-container-low);border:1px solid var(--md-outline-variant);color:var(--md-on-surface-variant);border-radius:50px;font-weight:680;font-size:12px;min-height:43px;padding:10px 17px;transition:background var(--md-effects-fast) var(--md-ease-effects),border-radius var(--md-effects-default) var(--md-ease-effects); }
.filter-chip:hover { background:var(--md-secondary-container); }
.filter-chip.selected { background:var(--md-primary);border-color:var(--md-primary);color:var(--md-on-primary);border-radius:var(--md-shape-md); }
.round { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.round-details { flex:1; min-width:220px; }
.round-meta { color:var(--md-primary);font-size:12px;font-weight:700;margin-top:8px; }
.round-actions { display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end; }
.round-actions .state { margin-right:8px; }
.round-records { width:100%;flex-basis:100%;border-top:1px solid var(--md-outline-variant);padding-top:20px;margin-top:12px; }
.round-records .section-row { align-items:flex-start; }
.round-records .section-row p { text-align:right;max-width:550px; }
.table-actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.toolbar-inline { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
.toolbar-inline .search { flex:1;min-width:250px; }
.data-toolbar { display:grid;grid-template-columns:minmax(180px,300px) minmax(220px,1fr) auto;gap:16px;align-items:end;margin:20px 0 12px; }
.data-toolbar .btn { margin-bottom:4px; }
.empty-table { padding:33px 15px;text-align:center;color:var(--md-on-surface-variant); }
.data-dialog { max-width:min(900px,calc(100vw - 34px));max-height:min(88dvh,900px);overflow-y:auto; }
.data-dialog > form > h2 { margin:9px 0 8px; }
.data-dialog .edit-data-fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0 12px; }
.data-dialog .key-locked { opacity:.73; }
.data-dialog input:disabled { opacity:.74; cursor:not-allowed; }
.data-dialog .md-dialog-actions { position:sticky;bottom:-31px;background:var(--md-surface-container-high);padding:16px 0;z-index:1;border-top:1px solid var(--md-outline-variant); }
.data-dialog .checkbox-line { align-self:end;display:flex;flex-direction:row;align-items:center; }
.version-history { margin-top:26px; border-top:1px solid var(--md-outline-variant);padding-top:22px; }
.version-list { display:flex;flex-direction:column;gap:11px; }
.version-row { border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);background:var(--md-surface-container-low);padding:17px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px; }
.version-row strong { font-size:14px;display:block;margin-bottom:7px; }
#reviewFilters { margin:18px 0 6px; }
#panel-review .table-wrap th:first-child { min-width:120px; }
#panel-catalog .table-wrap th:nth-child(4) { min-width:200px; }
#panel-catalog .table-wrap th:nth-child(5) { min-width:130px; }
@media(max-width:860px){
 .round-hero { flex-direction:column;align-items:stretch; }
 .round-actions { justify-content:flex-start; }
 .data-toolbar { grid-template-columns:1fr 1fr; }
 .data-toolbar .btn { grid-column:1/-1;justify-self:start; }
}
@media(max-width:590px){
 .data-toolbar { grid-template-columns:1fr; }
 .data-toolbar .btn { grid-column:auto; }
 .data-dialog .edit-data-fields { grid-template-columns:1fr; }
 .round-records .section-row { flex-direction:column; }
 .round-records .section-row p { text-align:left; }
 .data-dialog .md-dialog-actions { bottom:-25px; }
 .version-row { align-items:stretch; }
 .version-row .table-actions { width:100%; }
 .version-row .btn { flex:1; }
}
@media(prefers-reduced-motion:reduce){ .filter-chip { transition:none; } }

/* v1.3 — Inline data editing and clear MD3 Expressive admin controls */
.btn-tonal { background:var(--md-secondary-container);color:var(--md-on-secondary-container);border:1px solid transparent; }
.btn-tonal:hover { background:color-mix(in srgb,var(--md-secondary-container) 83%,var(--md-primary) 17%); }
.md-action { min-height:40px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:740;line-height:1.1; }
.md-action svg { width:17px;height:17px;flex:none;stroke-width:2; }
.md-action:active:not(:disabled) { border-radius:var(--md-shape-sm); }
.md-action.btn-primary { background:var(--md-primary);color:var(--md-on-primary); }
.md-action.btn-outline { background:transparent;color:var(--md-primary);border:1px solid var(--md-outline-variant); }
.md-action.btn-text { background:transparent;color:var(--md-primary);border:1px solid transparent; }
.round-expandable { display:block;border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);padding:22px;transition:border-radius var(--md-effects-default) var(--md-ease-effects),background var(--md-effects-fast) var(--md-ease-effects); }
.round-expandable:has([aria-expanded=true]) { background:var(--md-surface-container-low);border-radius:var(--md-shape-xl); }
.round-heading { display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap; }
.round-heading .round-details { flex:1;min-width:230px; }
.round-heading .round-details p { margin:4px 0 0; }
.round-heading .round-actions { max-width:100%; }
.round-heading input { min-width:min(340px,70vw); }
.round-expandable .round-records { border-top:1px solid var(--md-outline-variant);margin-top:22px;padding-top:22px; }
.round-expandable [aria-expanded=true] svg { transform:rotate(180deg); }
.round-expandable [aria-controls] svg { transition:transform var(--md-effects-default) var(--md-ease-effects); }
.table-wrap { border-radius:var(--md-shape-lg); }
.table-wrap table { border-collapse:separate;border-spacing:0;width:100%; }
.table-wrap thead th { position:sticky;top:0;z-index:1;background:var(--md-surface-container); }
.table-wrap td { min-width:94px; }
.table-wrap td:first-child { min-width:100px; }
.table-wrap td:last-child { min-width:155px; }
.table-wrap tr.editing { background:var(--md-secondary-container); }
.table-wrap tr.editing td { border-color:var(--md-outline-variant); }
.table-wrap td input:not([type=checkbox]):not([type=file]),.table-wrap td .md-select-trigger {
 width:100%;height:43px;min-height:43px;min-width:115px;border-radius:var(--md-shape-sm);padding-inline:12px;
 background:var(--md-surface-container-lowest);font-size:13px;
}
.table-wrap tr.editing td { padding:9px 8px; }
.table-wrap tr.editing td:last-child { min-width:190px; }
.table-wrap tr.editing td:last-child .md-action { margin:2px; }
.inline-key { font-weight:700;color:var(--md-on-surface);background:var(--md-surface-container-high);padding:9px 12px;display:inline-block;border-radius:var(--md-shape-sm); }
.inline-details-row > td { padding:0!important;background:var(--md-surface-container-low)!important;white-space:normal; }
.inline-details { padding:19px 24px 23px;border-radius:0 0 var(--md-shape-lg) var(--md-shape-lg);background:var(--md-surface-container-low); }
.inline-details h3 { margin-bottom:14px; }
.inline-details .btn { margin-top:13px; }
.inline-details-heading { color:var(--md-on-surface-variant);font-size:12px;font-weight:700;margin-bottom:15px; }
.inline-details-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px; }
.inline-details-grid label { font-weight:660;min-width:0; }
.inline-details-grid input:not([type=checkbox]),.inline-details-grid .md-select-trigger { width:100%;min-width:0; }
.inline-details .table-wrap { background:var(--md-surface-container-lowest); }
.inline-details-row .table-wrap td:last-child { min-width:150px; }
.new-record { background:var(--md-tertiary-container)!important; }
.new-record.editing { background:var(--md-tertiary-container)!important; }
#panel-catalog .table-wrap { max-width:100%; }
#panel-catalog .table-wrap td:nth-child(2) { min-width:240px;white-space:normal; }
#panel-catalog .table-wrap th:nth-child(4) { min-width:140px; }
#panel-catalog .table-wrap th:nth-child(6) { min-width:150px; }
#panel-catalog .table-wrap td:last-child { min-width:225px; }
#panel-configure #dataBody td:last-child { white-space:nowrap; }
#location { letter-spacing:.025em;font-weight:720;text-transform:uppercase; }
@media(max-width:900px){
 .round-heading { align-items:stretch;flex-direction:column; }
 .round-heading .round-actions { justify-content:flex-start; }
 .inline-details { padding:17px; }
}
@media(max-width:590px){
 .round-expandable { padding:16px; }
 .round-heading .round-actions .md-action { flex:1; }
 .inline-details-grid { grid-template-columns:1fr; }
 .round-records .section-row { gap:8px; }
}
@media(prefers-reduced-motion:reduce){ .round-expandable,.round-expandable [aria-controls] svg,.md-action { transition:none!important; } }

.entry-actions .md-action { font-size:11px;padding:7px 11px;min-height:36px;white-space:normal; }
.entry-actions .md-action svg { height:14px;width:14px; }

/* v1.4 — Official Google Material Symbols Rounded and low-friction actions. */
.material-symbol {display:inline-block;width:22px;height:22px;fill:currentColor;flex:none;vertical-align:middle;}
.brand-icon .material-symbol {width:26px;height:26px;}
.circle-symbol .material-symbol {width:28px;height:28px;}
.role-symbol .material-symbol {width:26px;height:26px;}
.role-arrow .material-symbol {width:20px;height:20px;}
.btn .material-symbol {width:19px;height:19px;}
.md-action .material-symbol {width:20px;height:20px;}
.md-select-trigger .material-symbol.md-chevron {width:22px;height:22px;}
.md-icon-button {width:42px;min-width:42px;height:42px;min-height:42px;padding:0;aspect-ratio:1;border-radius:50%;}
.md-icon-button .material-symbol {width:23px;height:23px;transition:transform var(--md-effects-default) var(--md-ease-effects);}
.md-icon-button:hover:not(:disabled) {background:var(--md-primary-container);color:var(--md-on-primary-container);box-shadow:var(--md-shadow);}
.round-heading .round-actions {margin-left:auto;flex-wrap:nowrap;}
.round-heading .round-details {padding:10px 4px;border-radius:var(--md-shape-md);cursor:pointer;min-width:160px;}
.round-heading .round-details:hover h3 {color:var(--md-primary);}
.round-heading .round-details:focus-visible {outline:3px solid var(--md-tertiary);outline-offset:3px;}
.round-heading .round-details h3 {transition:color var(--md-effects-fast) var(--md-ease-effects);}
.round-expandable {padding:14px 19px;}
.round-expandable .round-records {margin-top:14px;padding-top:18px;}
.round-expandable .round-actions .state {margin-right:8px;}
.round-expandable .round-actions .md-icon-button:last-child {margin-left:5px;}
.round-expandable [aria-expanded=true] .material-symbol {transform:rotate(180deg);}
.round-expandable .round-details[aria-expanded=true] {background:transparent;}
.inline-quick-cell {cursor:pointer;transition:background var(--md-effects-fast) var(--md-ease-effects);}
.inline-quick-cell:hover,.batch-expiry-quick:hover {background:var(--md-primary-container);color:var(--md-on-primary-container);}
.batch-expiry-quick {cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;}
#panel-catalog .table-wrap th:nth-child(5) {min-width:150px;}
#panel-catalog .table-wrap td:last-child {min-width:215px;}
.btn:has([data-md-icon]) {display:inline-flex;gap:8px;align-items:center;justify-content:center;}
.btn [data-md-icon] {display:inline-flex;align-items:center;}
@media(max-width:650px){
 .round-heading {flex-direction:row;align-items:center;}
 .round-heading .round-actions {justify-content:flex-end;gap:5px;flex-wrap:wrap;}
 .round-heading .round-actions .md-action:not(.md-icon-button) {min-height:36px;padding:8px 12px;}
 .round-expandable {padding:13px;}
 .round-heading .round-details {flex-basis:100%;}
 .round-heading .round-actions .md-icon-button {flex:0 0 42px;}
}
@media(prefers-reduced-motion:reduce){
 .md-icon-button .material-symbol,.round-heading .round-details h3,.inline-quick-cell {transition:none!important;}
}

/* Overrides older .btn.small sizing for genuinely icon-only round controls. */
.btn.md-action.md-icon-button {width:44px;min-width:44px;height:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.btn.md-action.md-icon-button .material-symbol {width:24px;height:24px;}
select {background-image:none;}
.md-decorated {display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.md-decorated > .material-symbol {width:19px;height:19px;}

/* v1.5: scanner-first counting and aggregated article feedback. */
.scope-line{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--md-on-surface-variant)}
.scanner-instructions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin:14px 0 4px}
.scanner-instructions .checkbox-line{margin:0;white-space:nowrap}
.scan-feedback{margin:10px 0;color:var(--md-primary);font-weight:690;min-height:22px}
.product-total{gap:10px}.product-total>div:first-child{min-width:0}.product-total-count{font-size:21px;font-variant-numeric:tabular-nums;color:var(--md-primary)}
.product-total .entry-actions{display:flex;align-items:center;gap:8px}
@media(max-width:680px){.scanner-instructions{align-items:flex-start;flex-direction:column}}

/* v1.6 — Clear scanner decisions: batch → LP only when necessary. */
.batch-picker{border:1px solid var(--md-outline-variant);background:var(--md-surface-container-low);border-radius:var(--md-shape-xl);padding:clamp(16px,2vw,26px);box-shadow:var(--md-shadow)}
.batch-picker-header{margin-bottom:15px}
.batch-picker-header h3{font-size:clamp(19px,2vw,25px);line-height:1.25;margin:5px 0 7px}
.batch-picker-header p{margin:0;font-size:13px}
.batch-choice-scan{display:flex;align-items:stretch;gap:10px;margin-bottom:13px}
.batch-choice-scan input{flex:1;min-width:0;border-radius:var(--md-shape-md);background:var(--md-surface-container-lowest)}
.batch-choice-scan .btn{border-radius:var(--md-shape-lg)}
.batch-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.batch-option{display:flex;text-align:left;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:78px;padding:14px 16px;border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);background:var(--md-surface-container-lowest);color:var(--md-on-surface);cursor:pointer;font:inherit;transition:background var(--md-effects-fast) var(--md-ease-effects),border-radius var(--md-effects-default) var(--md-ease-effects),border-color var(--md-effects-fast) var(--md-ease-effects)}
.batch-option:hover{background:var(--md-secondary-container);border-color:var(--md-primary);border-radius:var(--md-shape-xl)}
.batch-option:active{border-radius:var(--md-shape-md)}
.batch-option-copy{display:grid;gap:6px;min-width:0}
.batch-option-copy strong{font-size:15px;overflow-wrap:anywhere;color:var(--md-on-surface)}
.batch-option-copy small{font-size:12px;line-height:1.4;color:var(--md-on-surface-variant)}
.batch-option>.material-symbol{width:21px;height:21px;transform:rotate(-90deg);color:var(--md-primary)}
.batch-picker>.btn-text{margin-top:12px}
.batch-choice-error{color:var(--md-error);font-weight:700;font-size:12px;min-height:0;margin:8px 0 0}
.batch-choice-error:empty{display:none}
.batch-memory{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;background:var(--md-primary-container);color:var(--md-on-primary-container);border-radius:var(--md-shape-lg);margin-top:16px}
.batch-memory-info{display:grid;gap:5px;min-width:0}
.batch-memory-info strong{font-size:14px;overflow-wrap:anywhere}
.batch-memory-label{font-size:11px;font-weight:750;letter-spacing:.01em}
.batch-memory .btn{flex:none}
.batch-admin-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.batch-admin-heading h3{margin:0 0 7px}
.batch-admin-heading p{max-width:720px;margin:0;font-size:12px;line-height:1.55}
.batch-admin-heading .btn{margin-top:0}
.batch-admin-table th,.batch-admin-table td{white-space:normal;min-width:110px}
.batch-admin-table td:first-child{font-weight:700}
@media(max-width:640px){.batch-choice-scan{flex-direction:column}.batch-choice-scan .btn{width:100%}.batch-memory{flex-wrap:wrap}.batch-memory .btn{width:100%}.batch-admin-heading{align-items:stretch;flex-direction:column}.batch-admin-heading .btn{align-self:flex-start}}
@media(prefers-reduced-motion:reduce){.batch-option{transition:none!important}}

.batch-option{position:relative;overflow:hidden;isolation:isolate}
.batch-option>.batch-option-copy,.batch-option>.material-symbol{position:relative;z-index:1}

/* v1.7 · Unmatched FnO journal reconciliation, using Material tonal surfaces and actions. */
.reconcile-panel { display:grid;gap:17px;border-radius:var(--md-shape-xl);border:1px solid var(--md-outline-variant);background:var(--md-surface-container-low);padding:24px;margin-top:24px; }
.reconcile-panel.hidden,.reconcile-details.hidden { display:none; }
.reconcile-heading,.reconcile-detail-head {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.reconcile-heading h3 { margin:5px 0 7px; }
.reconcile-heading p { font-size:13px;max-width:720px; }
.reconcile-badge { flex:none;border-radius:100px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font-size:12px;font-weight:720;padding:10px 15px; }
.reconcile-steps { display:flex;gap:8px;flex-wrap:wrap; }
.reconcile-steps span { padding:8px 12px;background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-size:12px;border-radius:100px;font-weight:620; }
.reconcile-panel .table-wrap { background:var(--md-surface-container-lowest);border-radius:var(--md-shape-md); }
.reconcile-details {background:var(--md-surface-container-lowest);border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);padding:22px;display:grid;gap:18px; }
.reconcile-group { display:grid;gap:10px; }
.reconcile-group h4 {font-size:14px;color:var(--md-on-surface);}
.reconcile-option { display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:13px 16px;border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-md);background:var(--md-surface-container-low); }
.reconcile-option-info {display:grid;gap:5px;min-width:0;}
.reconcile-option-info strong {font-size:13px;}
.reconcile-option-info small {font-size:12px;color:var(--md-on-surface-variant);white-space:normal;}
.reconcile-no-reference { background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);padding:17px;border-radius:var(--md-shape-md);font-size:13px;line-height:1.65; }
.reconcile-no-reference p {color:inherit;margin-top:6px;}
.reconcile-footer {display:flex;gap:12px;flex-wrap:wrap;}
.unmatched-inline {display:inline-flex;border-radius:100px;padding:5px 9px;margin-top:7px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font-size:11px;font-weight:740;}
@media(max-width:720px){.reconcile-panel{padding:14px}.reconcile-details{padding:15px}.reconcile-option .btn{width:100%}.reconcile-footer .btn{width:100%}}

/* Expressive, accessible authentication error surface. */
.login-error{background:var(--md-error-container);color:var(--md-on-error-container);padding:18px 20px;
 border-radius:var(--md-shape-lg);font-size:13px;line-height:1.55;margin:-12px 0 22px;
 border:1px solid color-mix(in srgb,var(--md-error) 25%,transparent);
 animation:auth-error-enter 330ms cubic-bezier(.2,0,0,1) both;}
@keyframes auth-error-enter{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.login-error{animation:none;}}

/* v1.9: scanner batch context and admin batch assignment use MD3 surface and motion. */
.scan-prebatch{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:12px 16px;margin:12px 0 16px;border-radius:24px;background:var(--md-surface-container-low);border:1px solid var(--md-outline-variant)}
.scan-prebatch>label{flex:1 1 260px;font-weight:600}.scan-prebatch input{width:100%;margin-top:6px}.scan-prebatch>.helper{flex:1 0 100%;margin:0}
.reconcile-bulkbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0}
.reconcile-bulkbar input[type=checkbox]{accent-color:var(--md-primary)}
.bulk-batch-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.bulk-batch-form label{display:flex;flex-direction:column;gap:8px}.bulk-batch-form>.helper,.bulk-batch-form>.reconcile-footer{grid-column:1/-1}
.bulk-batch-form :is(input,select){min-height:48px}
#unmatchedBody input[type=checkbox],#selectAllUnmatched{width:20px;height:20px;accent-color:var(--md-primary);cursor:pointer}
@media(max-width:700px){.scan-prebatch{border-radius:18px;padding:12px}.reconcile-bulkbar{align-items:stretch}.reconcile-bulkbar .btn{width:100%}}

.scan-prebatch .md-select-shell{min-width:min(240px,80vw)}.scan-prebatch label{min-width:min(245px,100%)}

/* v1.10 · Shared barcode surfaces and non-blocking batch reconciliation. */
.scan-prebatch{
 display:grid;align-items:initial;gap:11px;padding:16px 18px;margin:12px 0 16px;
 border-radius:var(--md-shape-lg);background:var(--md-surface-container-low);
}
.batch-context-heading{display:flex;align-items:baseline;justify-content:space-between;gap:5px 16px;flex-wrap:wrap}
.batch-context-heading strong{font-size:13px;color:var(--md-on-surface);font-weight:740}
.batch-context-heading .helper{margin:0;font-size:11px;line-height:1.4}
.batch-context-row{display:flex;gap:9px;align-items:stretch;min-width:0}
.batch-code-form{min-width:0;flex:1;margin:0}
.batch-code-form input{min-width:0}
.batch-code-form .batch-activate,.scan-input-wrap .scan-add{
 width:58px;min-width:58px;height:54px;min-height:54px;flex:none;padding:0;display:grid;place-items:center;
 border-radius:var(--md-shape-md);
}
.scan-input-wrap .scan-add .material-symbol{width:29px;height:29px}
.batch-code-form .batch-activate .material-symbol{width:23px;height:23px}
.batch-active-button{
 display:flex;align-items:center;text-align:left;gap:14px;flex:1;min-width:0;
 padding:12px 20px;min-height:76px;
 background:var(--md-secondary-container);color:var(--md-on-secondary-container);
 border:2px solid var(--md-primary);border-radius:var(--md-shape-lg);
 font:inherit;cursor:pointer;
 transition:background var(--md-effects-fast) var(--md-ease-effects),
 border-radius var(--md-effects-default) var(--md-ease-effects),
 box-shadow var(--md-effects-fast) var(--md-ease-effects);
}
.batch-active-button .scan-glyph{color:inherit}
.batch-active-button .material-symbol{width:26px;height:26px;flex:none}
.batch-active-button .batch-active-code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:750;font-size:17px}
.batch-active-button:hover,.batch-active-button:focus-visible{background:var(--md-primary-container);border-radius:var(--md-shape-xl)}
.batch-active-button:active{border-radius:var(--md-shape-md)}
.batch-clear-icon{
 display:grid;place-items:center;flex:none;width:76px;min-height:76px;
 background:var(--md-surface-container-high);color:var(--md-on-surface);
 border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);
 transition:background var(--md-effects-fast) var(--md-ease-effects),border-radius var(--md-effects-default) var(--md-ease-effects);
}
.batch-clear-icon .material-symbol{width:34px;height:34px}
.batch-clear-icon:hover{background:var(--md-error-container);color:var(--md-on-error-container);border-radius:var(--md-shape-xl)}
.batch-clear-icon:active{border-radius:var(--md-shape-md)}
.batch-active-button:focus-visible,.batch-clear-icon:focus-visible{outline:3px solid var(--md-primary);outline-offset:3px}
.scanner-instructions{margin-top:7px}.scanner-instructions .helper{font-size:12px;line-height:1.4;margin:0}
.batch-notice{
 max-width:min(92vw,490px);width:100%;border:1px solid var(--md-outline-variant);
 border-radius:var(--md-shape-xl);background:var(--md-surface-container-lowest);
 color:var(--md-on-surface);padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.batch-notice::backdrop{background:rgba(6,21,15,.55);backdrop-filter:blur(3px)}
.batch-notice .batch-notice-mark{width:56px;height:56px;border-radius:20px;display:grid;place-items:center;
 background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);margin-bottom:20px}
.batch-notice .batch-notice-mark svg{width:30px;height:30px}
.batch-notice h2{font-size:24px;letter-spacing:-.03em;margin-bottom:12px}
.batch-notice p{font-size:14px;line-height:1.6;color:var(--md-on-surface-variant);margin-bottom:25px}
.batch-notice .btn{margin-left:auto}
.entry-wrap{border-bottom:1px solid var(--md-outline-variant);padding-bottom:4px}
.entry-wrap:last-child{border-bottom:none}
.entry-wrap .entry{border-bottom:none}
.entry-wrap .entry-actions{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.entry-wrap .entry-actions b{margin:0 5px 0 0}
.entry-wrap .entry-actions .md-action{width:39px;height:39px;min-height:39px;padding:7px;display:grid;place-items:center;border-radius:50%}
.entry-wrap .entry-actions .md-action .material-symbol{width:21px;height:21px}
.entry-batch-list{padding:10px 2px 18px;display:grid;gap:10px}
.entry-batch-list>.helper{font-size:11px;margin:0 0 2px}
.entry-batch-edit{background:var(--md-surface-container-low);border-radius:var(--md-shape-md);padding:11px;display:grid;
 grid-template-columns:minmax(0,1fr) minmax(100px,1.1fr) 42px;column-gap:8px;row-gap:3px;align-items:center}
.entry-batch-edit label{font-size:11px;line-height:1.4;word-break:break-word;color:var(--md-on-surface);font-weight:720}
.entry-batch-edit input{min-width:0;width:100%;height:42px!important;min-height:42px!important;font-size:12px!important}
.entry-batch-edit .btn{height:42px;min-height:42px;width:42px;padding:0;display:grid;place-items:center;border-radius:14px}
.entry-batch-edit .batch-record-status{grid-column:1/-1;font-size:10px;color:var(--md-on-surface-variant)}
@media(max-width:720px){
 .batch-context-row{flex-wrap:nowrap}
 .batch-code-form{flex-wrap:nowrap}
 .scan-input-wrap .scan-add,.batch-code-form .batch-activate{width:54px;min-width:54px}
 .batch-code-form .batch-activate{height:52px;min-height:52px}
 .batch-code-form input{width:0;flex:1;min-width:0}
 .batch-clear-icon{width:62px;min-height:72px}
 .entry-batch-edit{grid-template-columns:minmax(0,1fr) 44px;}
 .entry-batch-edit label{grid-column:1/-1}
 .entry-batch-edit input{grid-column:1}
 .entry-batch-edit .btn{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
 .batch-active-button,.batch-clear-icon{transition:none}
 .batch-notice::backdrop{backdrop-filter:none}
}

/* v1.11 · matched scan fields, compact inline quantity control, final review. */
.scanner-fields { display:grid;gap:18px; margin:16px 0 10px; }
.scanner-field-group { min-width:0;display:grid;gap:8px; }
.scanner-field-heading { display:flex;align-items:baseline;justify-content:space-between;gap:7px 14px;flex-wrap:wrap; }
.scanner-field-heading label { color:var(--md-on-surface);font-size:16px;font-weight:740;letter-spacing:-.012em; }
.scanner-field-heading label .muted {font-size:12px;font-weight:550;color:var(--md-on-surface-variant)}
.scanner-field-heading .helper {margin:0;font-size:11px;line-height:1.35;color:var(--md-on-surface-variant)}
.scanner-field-group :is(.scan-input-wrap,.batch-active-button) {
 margin:0;min-height:74px;height:74px;box-sizing:border-box;
 border-radius:var(--md-shape-lg);
}
.scanner-field-group .batch-code-form {flex:1;min-width:0;}
.scanner-field-group .scan-input-wrap {display:flex;flex-wrap:nowrap;background:var(--md-surface-container-low);border:2px solid transparent;
 padding:10px 10px 10px 20px;}
.scanner-field-group .scan-input-wrap:focus-within {border-color:var(--md-primary);background:var(--md-surface-container-lowest)}
.scanner-field-group .scan-input-wrap input { width:0;min-width:0;flex:1;font-size:17px;}
.scanner-field-group .scan-input-wrap :is(.batch-activate,.scan-add) {width:54px;min-width:54px;height:54px;min-height:54px;margin:0;}
.scanner-field-group .batch-active-button {border:2px solid var(--md-primary);}
.scanner-field-group .batch-clear-icon {min-height:74px;height:74px;width:74px;border-radius:var(--md-shape-lg);}
.scanner-field-group .batch-context-row {align-items:center;}
.scanner-note {font-size:12px;line-height:1.4;color:var(--md-on-surface-variant);margin:0;}
.entry-wrap .entry {gap:12px;align-items:center;}
.entry-wrap .entry-actions {display:flex;align-items:center;gap:5px;flex:none;}
.entry-wrap .entry-actions .qty-button {width:40px;height:40px;min-height:40px;min-width:40px;padding:8px;
 border-radius:var(--md-shape-lg);display:grid;place-items:center;color:var(--md-on-secondary-container);background:var(--md-secondary-container);border:0;
 transition:background var(--md-effects-fast) var(--md-ease-effects),border-radius var(--md-effects-fast) var(--md-ease-effects),transform var(--md-effects-fast) var(--md-ease-effects);}
.entry-wrap .entry-actions .qty-button:hover {border-radius:var(--md-shape-xl);background:var(--md-primary-container);}
.entry-wrap .entry-actions .qty-button:active {transform:scale(.93)}
.entry-wrap .entry-actions .qty-button:disabled {opacity:.42;cursor:wait;}
.entry-wrap .entry-actions .qty-button .material-symbol {width:22px;height:22px;}
.entry-wrap .entry-actions .product-total-count {font-size:19px;min-width:35px;text-align:center;display:inline-block;
 margin:0 2px;font-variant-numeric:tabular-nums;color:var(--md-on-surface);}
.entry-edit-button {display:inline-flex;align-items:center;gap:5px;padding:5px 0;margin-top:5px;font-size:11px;
 color:var(--md-primary);font:inherit;font-size:11px;font-weight:700;border:0;background:none;cursor:pointer;}
.entry-edit-button .material-symbol {width:16px;height:16px;}
.entry-edit-button:hover {text-decoration:underline;}
.entry-edit-button:focus-visible {outline:2px solid var(--md-primary);outline-offset:4px;border-radius:4px;}
.scan-submit-action {margin-top:20px;padding-top:18px;border-top:1px solid var(--md-outline-variant);display:grid;gap:8px;}
.scan-submit-action .btn {justify-content:center;min-height:48px;width:100%;}
.scan-submit-action .helper {margin:0;text-align:center;font-size:11px;line-height:1.4;}
.count-review {max-width:min(92vw,680px);max-height:90dvh;overflow:auto;padding:26px;}
.count-review .review-heading {display:flex;gap:14px;align-items:center;}
.count-review .review-mark {width:48px;height:48px;display:grid;place-items:center;background:var(--md-primary-container);
 color:var(--md-on-primary-container);border-radius:var(--md-shape-md);flex:none;}
.count-review .review-mark svg {width:26px;height:26px;}
.count-review h2 {margin:0 0 5px;font-size:23px;}
.count-review .review-heading p {margin:0;font-size:12px;line-height:1.4;}
.review-scope {margin:18px 0 14px;font-size:12px;font-weight:670;line-height:1.4;color:var(--md-on-surface-variant);}
.review-table-wrap {border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);overflow:auto;max-height:40dvh;}
.review-table {width:100%;border-collapse:collapse;font-size:13px;white-space:normal;}
.review-table th,.review-table td {padding:12px 14px;border-bottom:1px solid var(--md-outline-variant);vertical-align:top;}
.review-table thead th {position:sticky;top:0;background:var(--md-surface-container);color:var(--md-on-surface-variant);font-size:11px;}
.review-table tbody td {color:var(--md-on-surface);overflow-wrap:anywhere;}
.review-table tfoot th {background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-size:13px;}
.review-table :is(th,td).number {text-align:right;white-space:nowrap;font-weight:780;font-variant-numeric:tabular-nums;}
.review-agree {display:flex!important;align-items:flex-start!important;gap:12px;margin:20px 0 18px;cursor:pointer;
 background:var(--md-surface-container-low);border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-md);padding:13px 14px;}
.review-agree input {flex:none;min-width:22px;min-height:22px;width:22px;height:22px;accent-color:var(--md-primary);margin:0;}
.review-agree span {font-size:12px;line-height:1.5;color:var(--md-on-surface);}
.review-actions {display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;}
.review-actions .btn {margin:0;}
.review-actions .btn:disabled {opacity:.45;cursor:not-allowed;}
@media(max-width:720px) {
 .scanner-field-heading {align-items:flex-start;gap:3px;flex-direction:column;}
 .scanner-field-group :is(.scan-input-wrap,.batch-active-button){height:70px;min-height:70px;}
 .scanner-field-group .batch-clear-icon{height:70px;min-height:70px;width:58px;}
 .entry-wrap .entry-actions .qty-button {min-width:37px;width:37px;height:37px;min-height:37px;}
 .entry-wrap .entry-actions .product-total-count{min-width:25px;font-size:16px;}
 .count-review{padding:16px;max-width:calc(100vw - 24px);}
 .review-actions .btn {flex:1;min-width:130px;}
}
@media(prefers-reduced-motion:reduce) {
 .entry-wrap .entry-actions .qty-button{transition:none;}
}
/* Keep scan card above the counted-products sidebar on tablets and phones.
   Earlier Expressive grid overrides accidentally cancelled the mobile layout. */
.scanner-field-heading label {display:inline-flex;flex-direction:row;align-items:baseline;gap:5px;}
@media(max-width:1050px){
 .scan-layout {grid-template-columns:minmax(0,1fr);}
}
@media(max-width:720px){
 .scan-layout {display:grid;grid-template-columns:minmax(0,1fr);}
 .scan-layout > * {min-width:0;}
 .scan-layout .side-stack{display:flex;flex-direction:column;min-width:0;}
 .scan-card .section-title {flex-wrap:wrap;}
 .scan-card #changeLocation {margin-left:0;}
}

/* v1.12 — batch editing happens exclusively in the final count review. */
.count-review .review-table-wrap {max-height:48dvh;}
.count-review .review-batch-cell {min-width:135px;}
.count-review .review-batch-value {display:inline-block;max-width:180px;vertical-align:middle;overflow-wrap:anywhere;font-size:12px;}
.count-review .review-batch-toggle {display:inline-grid;place-items:center;margin-left:8px;vertical-align:middle;
 width:38px;height:38px;border:0;border-radius:14px;background:var(--md-secondary-container);
 color:var(--md-on-secondary-container);cursor:pointer;transition:background var(--md-effects-fast) var(--md-ease-effects),
 border-radius var(--md-effects-fast) var(--md-ease-effects),transform var(--md-effects-fast) var(--md-ease-effects);}
.count-review .review-batch-toggle:hover {border-radius:20px;background:var(--md-primary-container);}
.count-review .review-batch-toggle:active {transform:scale(.94);}
.count-review .review-batch-toggle[aria-expanded=true] {background:var(--md-primary-container);color:var(--md-on-primary-container);}
.count-review .review-batch-toggle .material-symbol {width:19px;height:19px;}
.count-review .review-details-row td {padding:0 10px 14px;background:var(--md-surface-container-low);}
.count-review .review-batch-editor {display:grid;gap:13px;padding:15px 8px 6px;}
.count-review .review-edit-heading {display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.count-review .review-bulk-form {display:flex;align-items:end;gap:10px;flex-wrap:wrap;}
.count-review .review-bulk-form label {flex:1 1 180px;display:grid;gap:7px;font-weight:670;color:var(--md-on-surface);font-size:12px;}
.count-review .review-bulk-form input {width:100%;min-width:0;}
.count-review .review-bulk-form button {min-height:47px;white-space:normal;}
.count-review .review-individual {border-top:1px solid var(--md-outline-variant);padding-top:12px;}
.count-review .review-individual summary {color:var(--md-primary);font-size:12px;font-weight:730;cursor:pointer;padding:8px 0;}
.count-review .review-individual-list {display:grid;gap:8px;padding-top:8px;}
.count-review .review-individual-form {display:flex;align-items:end;gap:8px;}
.count-review .review-individual-form label {flex:1 1 auto;display:grid;gap:5px;font-size:12px;}
.count-review .review-individual-form input {width:100%;min-width:0;}
.count-review .review-individual-form .btn {flex:none;min-height:45px;}
/* Override the global form label layout: checkbox and warning must occupy ONE row. */
.count-review label.review-agree {display:flex!important;flex-direction:row!important;align-items:center!important;
 justify-content:flex-start!important;gap:12px!important;white-space:normal;text-align:left;}
.count-review label.review-agree input[type=checkbox] {display:block!important;position:static!important;flex:0 0 22px!important;
 width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;margin:0!important;}
.count-review label.review-agree span {display:block;flex:1 1 0;min-width:0;}
@media(max-width:600px){
 .count-review .review-batch-value {max-width:110px;}
 .count-review .review-bulk-form button {width:100%;}
 .count-review .review-table th,.count-review .review-table td {padding:10px 8px;}
 .count-review .review-batch-toggle {width:34px;height:34px;}
}
@media(prefers-reduced-motion:reduce){.count-review .review-batch-toggle {transition:none;}}

.count-review .review-edit-hint {margin:12px 0 0;font-size:12px;color:var(--md-on-surface-variant);}

/* v1.13 · Grouped reconciliation by article + actual location. */
#unmatchedBody .pending-quantity {font-weight:790;font-size:17px;font-variant-numeric:tabular-nums;color:var(--md-on-surface)}
#unmatchedBody td{vertical-align:middle}
#groupBatchBar.hidden {display:none}
.reconcile-amount-form {display:flex;align-items:end;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.reconcile-amount-form .reconcile-quantity{min-width:140px;max-width:180px}
.reconcile-quantity{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--md-on-surface-variant)}
.reconcile-quantity input{width:100%;min-height:44px;border-radius:var(--md-shape-sm);font-variant-numeric:tabular-nums}
.reconcile-amount-form>small{flex-basis:100%;text-align:right;font-size:11px}
@media(max-width:750px){.reconcile-amount-form{width:100%;justify-content:stretch}.reconcile-amount-form .reconcile-quantity{flex:1;max-width:none}.reconcile-amount-form .btn{flex:1}}


/* v1.14 – Import / Export: peer cards align on desktop; accessible MD3 Expressive switches. */
#panel-io .io-grid { align-items:start; }
#panel-io .io-grid > .card + .card { margin-top:0; }
#panel-io .io-fno-options { display:grid;gap:16px; }
#panel-io .io-fno-options > label { margin:0; }
#panel-io .io-switches { display:grid; gap:12px; }
#panel-io .io-switch-row {
 position:relative; display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;
 column-gap:18px; min-height:78px; margin:0; padding:15px 18px;
 border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-lg);
 background:var(--md-surface-container-low); color:var(--md-on-surface); cursor:pointer;
 transition:background var(--md-effects-default) var(--md-ease-effects),
  border-radius var(--md-effects-default) var(--md-ease-effects),
  border-color var(--md-effects-default) var(--md-ease-effects);
}
#panel-io .io-switch-row:hover { background:var(--md-surface-container); }
#panel-io .io-switch-row:active { border-radius:var(--md-shape-md); }
#panel-io .io-switch-copy { display:flex;flex-direction:column;gap:5px;min-width:0; }
#panel-io .io-switch-title { font-size:13px;font-weight:740;line-height:1.35;letter-spacing:0;color:var(--md-on-surface); }
#panel-io .io-switch-hint { font-size:11px;font-weight:470;line-height:1.4;color:var(--md-on-surface-variant); }
/* The native control stays keyboard/screen-reader operable; only its visual styling is replaced. */
#panel-io .io-switch-row > input[type="checkbox"] {
 position:absolute; width:1px;height:1px;margin:0;padding:0;opacity:0;
 clip-path:inset(50%); overflow:hidden;
}
#panel-io .io-switch-track {
 box-sizing:border-box;position:relative;justify-self:end;display:block;flex:none;
 width:52px;height:32px;border:2px solid var(--md-outline);border-radius:100px;
 background:var(--md-surface-container-highest);
 transition:background var(--md-effects-default) var(--md-ease-effects),
  border-color var(--md-effects-default) var(--md-ease-effects);
}
#panel-io .io-switch-thumb {
 position:absolute;left:6px;top:50%;display:grid;place-items:center;
 width:16px;height:16px;border-radius:100%;background:var(--md-outline);
 transform:translateY(-50%);
 transition:width var(--md-effects-default) var(--md-ease-effects),
  height var(--md-effects-default) var(--md-ease-effects),
  left var(--md-effects-default) var(--md-ease-effects),
  background var(--md-effects-default) var(--md-ease-effects);
}
#panel-io .io-switch-thumb [data-md-icon],
#panel-io .io-switch-thumb .material-symbol { display:block;width:16px;height:16px; }
#panel-io .io-switch-thumb .material-symbol {
 opacity:0;transform:scale(.5);color:var(--md-on-primary);
 transition:opacity var(--md-effects-fast) var(--md-ease-effects),
  transform var(--md-effects-default) var(--md-ease-effects);
}
#panel-io .io-switch-row > input:checked + .io-switch-track {
 background:var(--md-primary);border-color:var(--md-primary);
}
#panel-io .io-switch-row > input:checked + .io-switch-track .io-switch-thumb {
 left:22px;width:24px;height:24px;background:var(--md-on-primary);
}
#panel-io .io-switch-row > input:checked + .io-switch-track .material-symbol {
 opacity:1;transform:scale(1);color:var(--md-primary);
}
#panel-io .io-switch-row > input:focus-visible + .io-switch-track {
 outline:3px solid var(--md-tertiary);outline-offset:3px;
}
#panel-io .io-switch-row > input:checked ~ .io-switch-track {box-shadow:0 0 0 0 transparent;}
#panel-io .io-switch-row:active .io-switch-thumb { width:28px;height:28px;left:2px; }
#panel-io .io-switch-row:active > input:checked + .io-switch-track .io-switch-thumb {left:20px;width:28px;height:28px;}
@media(max-width:720px) {
 #panel-io .io-grid > .card + .card {margin-top:8px;}
 #panel-io .io-switch-row {padding:14px;column-gap:12px;min-height:74px;}
}
@media(prefers-reduced-motion:reduce) {
 #panel-io .io-switch-row,#panel-io .io-switch-track,#panel-io .io-switch-thumb,
 #panel-io .io-switch-thumb .material-symbol {transition:none!important;}
}
@media(forced-colors:active) {
 #panel-io .io-switch-row {border-color:CanvasText;}
 #panel-io .io-switch-track {border-color:ButtonText;}
 #panel-io .io-switch-row > input:checked + .io-switch-track {background:Highlight;border-color:Highlight;}
 #panel-io .io-switch-row > input:checked + .io-switch-track .io-switch-thumb {background:HighlightText;}
 #panel-io .io-switch-row > input:checked + .io-switch-track .material-symbol {color:Highlight;}
}


/* v1.15 – MD3 Expressive constrained allocation slider; counted total is immutable. */
.reconcile-amount-form { flex:1 1 290px; min-width:min(100%,290px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 14px; align-items:end; }
.reconcile-amount-form .reconcile-quantity {grid-column:1/-1;min-width:0;max-width:none}
.reconcile-amount-form > small {grid-column:1/-1;flex-basis:auto;text-align:start}
.reconcile-quantity {display:grid;gap:10px;padding:12px 14px;border-radius:var(--md-shape-md);background:var(--md-surface-container);border:1px solid var(--md-outline-variant);}
.reconcile-quantity-heading,.reconcile-quantity-balance {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.reconcile-quantity-heading {font-size:12px;color:var(--md-on-surface-variant);font-weight:650}
.reconcile-quantity-value {font-size:20px;font-weight:780;font-variant-numeric:tabular-nums;color:var(--md-on-surface);}
.reconcile-quantity-balance {font-size:11px;font-weight:500;color:var(--md-on-surface-variant)}
.reconcile-quantity-balance strong{font-size:12px;font-weight:750;color:var(--md-on-surface);font-variant-numeric:tabular-nums}
.reconcile-quantity input[type=range] {
 display:block;width:100%;height:36px;min-height:36px;max-width:none;margin:0;padding:0;
 border:none;outline-offset:4px;box-shadow:none;background:transparent;cursor:pointer;
 accent-color:var(--md-primary);appearance:none;-webkit-appearance:none;
}
.reconcile-quantity input[type=range]::-webkit-slider-runnable-track{
 height:13px;border-radius:100px;background:linear-gradient(to right,var(--md-primary) var(--reconcile-range-progress,100%),var(--md-surface-container-highest) var(--reconcile-range-progress,100%));
}
.reconcile-quantity input[type=range]::-moz-range-track {height:13px;border-radius:100px;background:var(--md-surface-container-highest);}
.reconcile-quantity input[type=range]::-moz-range-progress {height:13px;border-radius:100px;background:var(--md-primary);}
.reconcile-quantity input[type=range]::-webkit-slider-thumb{
 appearance:none;-webkit-appearance:none; width:24px;height:24px;margin-top:-5.5px;
 border-radius:50%;border:4px solid var(--md-surface);background:var(--md-primary);
 box-shadow:0 1px 5px #0002;transition:transform var(--md-effects-fast) var(--md-ease-effects);
}
.reconcile-quantity input[type=range]::-moz-range-thumb {width:17px;height:17px;border-radius:50%;border:4px solid var(--md-surface);background:var(--md-primary);box-shadow:0 1px 5px #0002;}
.reconcile-quantity input[type=range]:active::-webkit-slider-thumb {transform:scale(1.15);}
.reconcile-quantity input[type=range]:focus-visible {outline:3px solid var(--md-tertiary);outline-offset:4px;border-radius:20px;}
.bulk-batch-form .reconcile-quantity {align-self:start;}
@media(max-width:750px){.reconcile-amount-form{width:100%;grid-template-columns:minmax(0,1fr);min-width:0}.reconcile-amount-form .btn{justify-self:stretch;flex:none;}.reconcile-option{min-width:0;}}
@media(prefers-reduced-motion:reduce){.reconcile-quantity input[type=range]::-webkit-slider-thumb{transition:none!important;}}

/* v1.16: product-led counting and consistent MD3 Expressive scanning controls */
.round-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px;margin:18px 0}
.round-choice{display:flex;flex-direction:column;gap:7px;min-height:96px;padding:17px 20px;text-align:left;cursor:pointer;font:inherit;
 color:var(--md-on-surface);border:2px solid var(--md-outline-variant);background:var(--md-surface-container-low);
 border-radius:var(--md-shape-lg);transition:border-radius var(--md-effects-default) var(--md-ease-effects),background var(--md-effects-fast) var(--md-ease-effects),transform var(--md-effects-fast) var(--md-ease-effects)}
.round-choice strong{font-size:16px}.round-choice small{font-size:12px;color:var(--md-on-surface-variant)}
.round-choice:is(:hover,.selected){background:var(--md-secondary-container);border-color:var(--md-primary);border-radius:var(--md-shape-xl)}
.round-choice:active{transform:scale(.985)}.round-choice:focus-visible{outline:3px solid var(--md-primary);outline-offset:3px}
.location-step{display:grid;gap:10px;margin-top:18px}.location-step .scanner-title{font-size:17px;font-weight:740}
.location-step .scan-input-wrap{display:flex;align-items:center;gap:14px;background:var(--md-surface-container-low);border:2px solid transparent;border-radius:var(--md-shape-lg);padding:10px 12px 10px 20px}
.location-step .scan-input-wrap:focus-within{border-color:var(--md-primary);background:var(--md-surface-container-lowest)}
.location-step .scan-input-wrap input{min-width:0;flex:1;width:100%;font:inherit;font-size:17px;background:transparent;border:0;outline:0;padding:10px 0}
.location-step .scan-input-wrap .btn{min-height:52px;min-width:52px;aspect-ratio:1;border-radius:var(--md-shape-md)}
.count-product-context{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:var(--md-shape-md);background:var(--md-primary-container);color:var(--md-on-primary-container);padding:13px 17px}
.count-product-context div{display:grid;gap:5px}.count-product-context strong{font-size:15px}.count-product-context small{color:inherit;opacity:.86}
.count-product-context .material-symbol{height:28px;width:28px}
.scanner-fields #plateField .scan-input-wrap,.scanner-fields #wField .scan-input-wrap,.scanner-fields #dateField .scan-input-wrap{min-height:70px;display:flex;align-items:center;padding:8px 16px}
.scanner-fields #plateField .scan-input-wrap:focus-within,.scanner-fields #wField .scan-input-wrap:focus-within,.scanner-fields #dateField .scan-input-wrap:focus-within{border-color:var(--md-primary)}
.scanner-fields #itemDate{min-height:42px;color:var(--md-on-surface);color-scheme:light dark}
.entry-actions .product-quantity-input{width:76px;min-width:65px;height:46px;flex:0 0 auto;box-sizing:border-box;background:var(--md-surface-container);color:var(--md-on-surface);border:1px solid var(--md-outline-variant);
 border-radius:var(--md-shape-md);font:inherit;font-weight:780;font-size:18px;text-align:center;appearance:textfield;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.entry-actions .product-quantity-input::-webkit-inner-spin-button,.entry-actions .product-quantity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.entry-actions .product-quantity-input:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
#tab-review{display:none!important}#panel-review{display:none!important}
@media(max-width:640px){.round-choice-grid{grid-template-columns:1fr}.count-product-context{align-items:flex-start}.entry-actions{gap:6px}.entry-actions .product-quantity-input{width:64px}}
@media(prefers-reduced-motion:reduce){.round-choice{transition:none}}

/* v1.17 — restore two-column scan layout (only the card and sidebar are grid children). */
#scanArea.scan-layout {display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.8fr);align-items:start;gap:22px;}
#scanArea > .scan-card,#scanArea > .side-stack {min-width:0;grid-row:1;margin:0;}
#scanArea > .scan-card {grid-column:1;}
#scanArea > .side-stack {grid-column:2;}
#roundChoices.round-choice-grid {margin-block:14px 0;}
.round-empty{padding:18px 20px;border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);color:var(--md-on-surface-variant);font-weight:650;}
.scanner-required {color:var(--md-primary);font-size:16px;font-weight:800;}
.scanner-fields .scanner-field-group {margin:0;}
@media(max-width:1050px){
 #scanArea.scan-layout{grid-template-columns:minmax(0,1fr);}
 #scanArea > .scan-card{grid-column:1;grid-row:1;}
 #scanArea > .side-stack{grid-column:1;grid-row:2;}
}
@media(prefers-reduced-motion:reduce){#roundChoices .round-choice{transition:none;}}

/* v1.18: staged product entry; the summary is read-only until opened with Edit. */
.product-entry{display:grid;gap:12px;margin-top:12px;padding:18px;border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-xl);background:var(--md-surface-container-low)}
.product-entry .scanner-field-heading label{font-size:16px;font-weight:750}
.product-submit-form{display:grid;grid-template-columns:minmax(160px,1fr) auto;align-items:end;gap:14px}
.product-qty-stepper{display:flex;align-items:center;gap:10px;min-width:0}
.product-qty-stepper input{width:100%;min-width:0;min-height:56px;border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);background:var(--md-surface-container-lowest);color:var(--md-on-surface);text-align:center;font-size:23px;font-weight:750;font-variant-numeric:tabular-nums}
.product-qty-stepper input:focus-visible{outline:3px solid var(--md-primary);outline-offset:1px}
.product-qty-stepper .qty-step{width:48px;height:48px;min-width:48px;min-height:48px;border-radius:18px;display:grid;place-items:center;padding:8px}
.product-submit-form>#productSubmit{min-height:56px;border-radius:var(--md-shape-xl);padding:0 25px}
.entry-wrap .entry-details{min-width:0;overflow-wrap:anywhere;flex:1}
.entry-wrap .entry-actions{flex:none;gap:10px}
.entry-wrap .entry-actions .product-total-count{font-size:22px;min-width:28px;text-align:right}
.entry-wrap .entry-actions .md-icon-button{height:44px;min-height:44px;width:44px;min-width:44px;border-radius:var(--md-shape-lg);padding:9px}
.entry-wrap .entry-actions .md-icon-button:hover{border-radius:var(--md-shape-xl)}
.entry-wrap .entry-actions .md-icon-button:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
#recentEntries{overflow-x:hidden;min-width:0}
.md3-three-way{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:285px;padding:4px;gap:3px;background:var(--md-surface-container-high);border:1px solid var(--md-outline-variant);border-radius:999px;min-height:48px;align-items:stretch}
.md3-three-way-option{cursor:pointer;font:inherit;font-size:12px;font-weight:750;color:var(--md-on-surface-variant);background:transparent;border:0;border-radius:999px;padding:7px 10px;transition:background .28s cubic-bezier(.2,.0,0,1),transform .34s cubic-bezier(.2,.0,0,1),color .18s}
.md3-three-way-option[aria-checked="true"]{background:var(--md-primary-container);color:var(--md-on-primary-container);box-shadow:0 1px 4px #0002}
.md3-three-way-option:active{transform:scale(.93)}
.md3-three-way-option:focus-visible{outline:3px solid var(--md-primary);outline-offset:1px}
.automation-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;margin-top:22px}
.automation-form label{display:flex;flex-direction:column;gap:8px;min-width:0;font-weight:650}
.automation-form :is(input,select){width:100%;min-width:0}
.automation-form button{min-height:48px}
.automation-list{display:grid;gap:12px}
.automation-item{border:1px solid var(--md-outline-variant);background:var(--md-surface-container-low);border-radius:var(--md-shape-xl);padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px;transition:border-radius .32s cubic-bezier(.2,0,0,1),background .22s}
.automation-item:hover{border-radius:var(--md-shape-lg);background:var(--md-surface-container)}
.automation-details{min-width:0;display:grid;gap:5px}.automation-details strong{font-size:14px;overflow-wrap:anywhere}.automation-details small{color:var(--md-on-surface-variant);font-size:12px}
.automation-actions{display:flex;gap:9px;align-items:center;flex:none}
.automation-toggle[aria-checked="false"]{opacity:.68}
.automation-applied{display:block;font-size:11px;font-weight:700;color:var(--md-primary);margin:8px 0}
@media(max-width:950px){.automation-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.product-submit-form{grid-template-columns:minmax(0,1fr)}.product-submit-form>#productSubmit{width:100%}.product-qty-stepper .qty-step{min-width:42px;width:42px}.automation-form{grid-template-columns:1fr}.automation-item{align-items:flex-start;flex-direction:column}.automation-actions{width:100%;justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){.md3-three-way-option,.automation-item{transition:none}}

/* Material 3 Expressive category management: compact responsive editor */
.category-form{display:grid;grid-template-columns:minmax(130px,.55fr) minmax(120px,.75fr) minmax(220px,1.5fr) auto;gap:16px;align-items:end;margin-top:22px}
.category-form label{display:flex;flex-direction:column;gap:8px;min-width:0;font-weight:650}
.category-form :is(input,select){width:100%;min-width:0}
.category-form button{min-height:48px}
#panel-categories .table-wrap{margin-top:16px}
#panel-categories input{max-width:100%}
@media(max-width:950px){.category-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.category-form{grid-template-columns:minmax(0,1fr)}}

/* v1.20: Category level is a dedicated, accessible segmented row. */
.category-form{display:flex;flex-direction:column;align-items:stretch;gap:19px}
.category-level-group{border:0;margin:0;padding:0;min-width:0}
.category-level-group legend,.category-filter-label{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--md-on-surface-variant)}
.category-input-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,2fr) auto;gap:16px;align-items:end}
.category-segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--md-surface-container-high);border:1px solid var(--md-outline-variant);padding:5px;border-radius:var(--md-shape-full,999px);width:min(100%,480px)}
.category-segment button{border:0;border-radius:999px;min-height:44px;padding:9px 14px;color:var(--md-on-surface-variant);font:inherit;font-weight:730;background:transparent;cursor:pointer;transition:background .22s,transform .35s cubic-bezier(.2,0,0,1),color .22s;white-space:normal}
.category-segment button[aria-checked="true"]{background:var(--md-primary-container);color:var(--md-on-primary-container);box-shadow:0 1px 4px #0002}
.category-segment button:active{transform:scale(.94)}
.category-segment button:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
.category-filter-group{display:grid;gap:7px;margin:16px 0}
.category-filter-segment{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,620px)}
.catalog-search{display:flex;align-items:center;gap:8px;border:1px solid var(--md-outline-variant);background:var(--md-surface-container);border-radius:999px;padding:4px 7px 4px 15px;min-width:min(100%,330px);flex:1;transition:border .2s,box-shadow .26s}
.catalog-search:focus-within{border-color:var(--md-primary);box-shadow:0 0 0 2px var(--md-primary-container)}
.catalog-search>[data-md-icon]{flex:none;color:var(--md-primary)}
.catalog-search input.search{border:0;background:transparent;outline:0!important;box-shadow:none!important;border-radius:0;min-width:0;flex:1;width:100%;margin:0;padding:10px 2px;min-height:38px}
.catalog-search input::-webkit-search-cancel-button{display:none}
.catalog-search-clear{flex:none;width:36px;height:36px;min-height:36px;border:0;border-radius:50%;cursor:pointer;background:var(--md-surface-container-high);color:var(--md-on-surface);display:grid;place-items:center}
.catalog-search-clear.hidden{display:none}
.catalog-search-status{font-size:12px;color:var(--md-on-surface-variant);margin:4px 0 15px}
.fno-product-details .table-wrap{overflow-x:auto}
.fno-product-table th{white-space:nowrap}
.fno-product-table td{max-width:220px;overflow-wrap:anywhere}
#panel-catalog .table-wrap td:last-child{min-width:260px}
@media(max-width:700px){.category-input-row{grid-template-columns:1fr}.category-segment,.category-filter-segment{width:100%}.category-segment button{padding:8px 5px;font-size:12px}.catalog-search{min-width:0;width:100%}.toolbar-inline{width:100%}}
@media(prefers-reduced-motion:reduce){.category-segment button,.catalog-search{transition:none}}

/* v1.21 — concise article-scoped FnO reference management. No giant editable grid. */
.fno-product-details{min-width:0;max-width:100%;padding:22px 24px 25px;overflow-wrap:anywhere}
.fno-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.fno-heading-copy{min-width:0;flex:1}
.fno-heading-copy h3{margin:0;line-height:1.2}
.fno-heading-copy p{margin:7px 0 0;font-size:12px;max-width:690px}
.fno-title-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fno-count{display:inline-flex;align-items:center;min-height:27px;padding:4px 11px;border-radius:999px;background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:750;font-size:12px;white-space:nowrap}
.fno-section-heading .btn,.fno-reference-head .btn,.fno-editor-actions .btn{margin:0}
.fno-reference-list{display:grid;gap:11px}
.fno-empty-state{padding:24px;border:1px dashed var(--md-outline);border-radius:var(--md-shape-lg);background:var(--md-surface-container);display:grid;gap:8px}
.fno-empty-state h4{font-size:15px;font-weight:750;margin:0;color:var(--md-on-surface)}
.fno-empty-state p{font-size:12px;margin:0;max-width:740px;line-height:1.55}
.fno-reference-card{min-width:0;border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);background:var(--md-surface-container-lowest);padding:15px 17px;display:grid;gap:16px;transition:background var(--md-effects-default) var(--md-ease-effects),border-radius var(--md-effects-default) var(--md-ease-effects)}
.fno-reference-card:hover{background:var(--md-surface-container);border-radius:var(--md-shape-xl)}
.fno-reference-head{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.fno-reference-title{display:grid;gap:5px;min-width:0}
.fno-reference-title strong{font-size:14px;font-weight:760;color:var(--md-on-surface)}
.fno-reference-location{font-size:12px;color:var(--md-on-surface-variant);overflow-wrap:anywhere}
.fno-reference-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.fno-reference-quantity{font-size:14px;font-weight:780;color:var(--md-primary);font-variant-numeric:tabular-nums}
.fno-reference-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid var(--md-outline-variant);padding-top:12px}
.fno-fact{display:grid;gap:5px;min-width:0}
.fno-fact small{font-size:10px;font-weight:750;color:var(--md-on-surface-variant);letter-spacing:.02em}
.fno-fact span{font-size:12px;color:var(--md-on-surface);overflow-wrap:anywhere}
.fno-reference-editor{min-width:0;display:grid;gap:17px;background:var(--md-surface-container);border:1px solid var(--md-outline-variant);padding:19px;border-radius:var(--md-shape-lg)}
.fno-editor-heading{display:grid;gap:6px}
.fno-editor-heading h4{font-size:16px;font-weight:770;color:var(--md-on-surface);margin:0}
.fno-editor-heading p{margin:0;line-height:1.45}
.fno-field-section{display:grid;gap:12px;min-width:0}
.fno-field-section h5{font-size:13px;font-weight:760;margin:0;color:var(--md-on-surface)}
.fno-field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-width:0}
.fno-field{display:flex;flex-direction:column;gap:7px;min-width:0;font-weight:700}
.fno-field-label{font-size:12px;color:var(--md-on-surface-variant)}
.fno-field :is(input,select){width:100%;max-width:100%;min-width:0;background:var(--md-surface-container-lowest);border:1px solid var(--md-outline-variant);color:var(--md-on-surface);border-radius:var(--md-shape-md);height:47px;padding:0 13px;font:inherit;font-size:13px}
.fno-field input:disabled{color:var(--md-on-surface-variant);opacity:.72;cursor:not-allowed}
.fno-advanced{border-top:1px solid var(--md-outline-variant);padding-top:13px}
.fno-advanced summary{color:var(--md-primary);cursor:pointer;font-size:13px;font-weight:750;padding:5px 0;outline-offset:4px}
.fno-advanced[open] .fno-field-grid{margin-top:14px}
.fno-editor-hint{margin:0;font-size:12px;line-height:1.5}
.fno-editor-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
@media(max-width:850px){.fno-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fno-reference-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.fno-product-details{padding:16px 12px 19px}.fno-section-heading{align-items:stretch}.fno-section-heading>.btn{align-self:flex-start}.fno-reference-head{align-items:flex-start}.fno-reference-actions{width:100%;justify-content:space-between}.fno-field-grid{grid-template-columns:minmax(0,1fr)}.fno-reference-card{padding:15px 13px}.fno-reference-editor{padding:16px 12px}.fno-editor-actions .btn{flex:1}}
@media(prefers-reduced-motion:reduce){.fno-reference-card{transition:none}}
/* Article tables scroll horizontally on phones, but FnO details must remain viewport-sized. */
@media(max-width:700px){
 #panel-catalog .table-wrap .fno-product-details{width:calc(100vw - 76px);max-width:calc(100vw - 76px)}
 #panel-catalog .table-wrap .fno-product-details .fno-reference-card,
 #panel-catalog .table-wrap .fno-product-details .fno-reference-editor{max-width:100%}
}