/* ═══════════════════════════════════════════════════════════════════
   STOCKFLOW — PREMIUM DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand palette — Industrial Workboot hi-vis amber */
  --brand-50:  #2a2118;
  --brand-100: #3b2c1c;
  --brand-200: #5a3f1f;
  --brand-300: #b07820;
  --brand-400: #d99325;
  --brand-500: #ffae00;
  --brand-600: #e09600;
  --brand-700: #b87600;
  --brand-800: #7e5000;
  --brand-900: #4a2f00;

  /* Amber accent (hi-vis highlight) */
  --amber-50:  #2a2118;
  --amber-100: #3a2a0a;
  --amber-300: #ffd166;
  --amber-400: #ffae00;
  --amber-500: #e09600;

  /* Graphite neutrals (dark theme — inverted usage) */
  --gray-25:  #11171d;
  --gray-50:  #161c22;
  --gray-100: #1f272f;
  --gray-150: #252e38;
  --gray-200: #2d3845;
  --gray-300: #475363;
  --gray-400: #6a7787;
  --gray-500: #8b97a6;
  --gray-600: #b3bdc9;
  --gray-700: #d2d9e2;
  --gray-800: #e8ecf1;
  --gray-900: #f5f7fa;

  /* Semantic (tuned for dark canvas) */
  --color-success:        #34d399;
  --color-success-light:  rgba(52,211,153,.14);
  --color-success-border: rgba(52,211,153,.40);
  --color-success-dark:   #6ee7b7;
  --color-error:          #f87171;
  --color-error-light:    rgba(248,113,113,.14);
  --color-error-border:   rgba(248,113,113,.42);
  --color-warning:        #ffd166;
  --color-warning-light:  rgba(255,174,0,.14);
  --color-warning-border: rgba(255,174,0,.40);
  --color-info:           #60a5fa;
  --color-info-light:     rgba(96,165,250,.14);
  --color-info-border:    rgba(96,165,250,.42);

  /* Surfaces — dark industrial canvas */
  --bg-canvas:  #0d1217;
  --bg-surface: #161c22;
  --bg-muted:   #1f272f;
  --bg-overlay: rgba(0,0,0,.62);

  /* Typography — light ink on dark */
  --text-primary:   #f5f7fa;
  --text-secondary: #b3bdc9;
  --text-muted:     #8b97a6;
  --text-inverse:   #0d1217;
  --text-brand:     var(--brand-500);

  /* Borders */
  --border-subtle:  #1f272f;
  --border-default: #2d3845;
  --border-strong:  #475363;
  --border-brand:   var(--brand-500);
  --border-focus:   var(--brand-500);

  /* Render native form controls / scrollbars dark */
  color-scheme: dark;

  /* Legacy aliases (backward-compat) */
  --line:           var(--border-default);
  --line-strong:    var(--border-strong);
  --bg:             var(--bg-canvas);
  --card:           var(--bg-surface);
  --text:           var(--text-primary);
  --muted:          var(--text-secondary);
  --accent:         var(--brand-500);
  --accent-strong:  var(--brand-400);
  --accent-soft:    var(--brand-50);
  --danger:         var(--color-error);
  --danger-soft:    var(--color-error-light);
  --info-soft:      var(--color-info-light);
  --info-border:    var(--color-info-border);
  --success-soft:   var(--color-success-light);
  --success-border: var(--color-success-border);

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(10,18,32,.04);
  --shadow-sm:  0 1px 3px rgba(10,18,32,.05), 0 1px 2px rgba(10,18,32,.03);
  --shadow-md:  0 4px 6px rgba(10,18,32,.04), 0 2px 12px rgba(10,18,32,.06);
  --shadow-lg:  0 10px 15px rgba(10,18,32,.04), 0 4px 24px rgba(10,18,32,.08);
  --shadow-xl:  0 20px 25px rgba(10,18,32,.05), 0 8px 40px rgba(10,18,32,.10);
  --shadow-2xl: 0 32px 40px rgba(10,18,32,.07), 0 16px 64px rgba(10,18,32,.13);
  --shadow-brand:    0 4px 14px rgba(255,174,0,.30);
  --shadow-brand-lg: 0 8px 28px rgba(255,174,0,.35);

  /* Radii */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  22px;
  --r-3xl:  28px;
  --r-full: 9999px;

  /* Layout */
  --pad:          16px;
  --navh:         64px;
  --topbar-h:     60px;
  --sidebar-w:    210px;
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --content-max:  880px;
  --admin-max:    1000px;

  /* Motion */
  --ease-spring:   cubic-bezier(0.34, 1.44, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   100ms;
  --t-normal: 180ms;
  --t-slow:   280ms;
}

/* ─── 2. BASE RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
               'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  background-image:
    radial-gradient(ellipse 80% 40% at 20% 0%, rgba(5,136,96,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 80% 100%, rgba(37,99,235,.05) 0%, transparent 50%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

body.management-page,
body.platform-page {
  background-image:
    radial-gradient(ellipse 70% 45% at 10% 0%, rgba(5,136,96,.10) 0%, transparent 58%),
    radial-gradient(ellipse 60% 35% at 100% 100%, rgba(2,132,199,.09) 0%, transparent 56%);
}

body.camera-open { overflow: hidden; }
body.auth-open   { overflow: hidden; }

body.auth-locked .topbar,
body.auth-locked main,
body.auth-locked .bottom-nav,
body.auth-locked #err {
  display: none !important;
}

/* ─── 3. TYPOGRAPHY ─────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -.025em;
  line-height: 1.25;
  color: var(--text-primary);
}

h1 { font-size: 22px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }

strong { font-weight: 700; letter-spacing: -.01em; }

p { margin: 0; }

/* ─── 4. UTILITIES ──────────────────────────────────────────────────── */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.top-gap    { margin-top: 10px; }
.no-top-gap { margin-top: 0; }
.right      { text-align: right; }

.required {
  color: var(--color-error);
  font-weight: 700;
  margin-left: 2px;
}

/* ─── 5. APP SHELL ──────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--topbar-h);
  padding: 0 20px;
  padding-top: var(--safe-top);
  background: rgba(22,28,34,.88);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 1px 0 rgba(10,18,32,.04), 0 4px 16px rgba(10,18,32,.04);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  /* stocktake. brand mark: amber tick on a dark tile (per Brand Identity board) */
  background: var(--bg-surface);
  border: 1px solid rgba(255,174,0,.45);
}

.topbar h1 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  white-space: nowrap;
}

/* amber accent period on the "stocktake." wordmark */
.topbar h1 .brand-dot { color: var(--brand-500); }

.topbar-subtitle {
  display: none;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}

.subtitle {
  display: none;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}

.topbar-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

main {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 14px var(--pad);
  padding-bottom: calc(var(--navh) + var(--safe-bottom) + 20px);
}

.admin-shell {
  width: min(100%, var(--admin-max));
  margin: 0 auto;
  padding: 20px var(--pad) 40px;
}

body.management-page .admin-shell,
body.platform-page .admin-shell {
  width: min(100%, 1200px);
  padding-top: 18px;
}

.admin-card { margin-top: 20px; }

body.management-page .admin-card,
body.platform-page .admin-card {
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md);
  border-color: #dbe6f2;
}

body.management-page .admin-card > h2,
body.platform-page .admin-card > h2 {
  margin-bottom: 6px;
}

body.management-page .admin-card .statusBar,
body.platform-page .admin-card .statusBar {
  margin: -2px -2px 14px;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── Collapsible admin sections ────────────────────────────────────── */
details.admin-card > summary.collapsible-header {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: block;
  position: relative;
  padding-right: 20px;
}
details.admin-card > summary.collapsible-header::-webkit-details-marker { display: none; }
details.admin-card > summary.collapsible-header::marker { content: ""; }
details.admin-card > summary.collapsible-header::after {
  content: "▾";
  position: absolute;
  right: 0;
  top: 2px;
  font-size: 0.75rem;
  opacity: 0.45;
  transition: transform 0.18s ease;
  line-height: 1;
}
details.admin-card:not([open]) > summary.collapsible-header::after {
  transform: rotate(-90deg);
}
details.admin-card:not([open]) > summary.collapsible-header .statusBar {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

body.management-page #adminShell,
body.platform-page #platformShell {
  display: grid;
  gap: 14px;
}

.console-menu {
  display: grid;
  gap: 8px;
}

.console-menu-link {
  display: block;
  padding: 9px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-muted);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}

.console-menu-link:hover,
.console-menu-link:focus-visible {
  border-color: var(--brand-400);
  background: var(--bg-surface);
  outline: none;
}

.console-menu-link.is-active {
  border-color: var(--brand-500);
  background: rgba(255,174,0,.16);
  color: var(--brand-500);
}

.console-menu-card {
  order: -10;
}

.live-log {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: #0b1320;
  color: #d8e3f1;
  padding: 10px 12px;
  min-height: 150px;
  max-height: 260px;
  overflow: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.76rem;
  line-height: 1.35;
}

.live-log-row {
  padding: 2px 0;
  border-bottom: 1px dashed rgba(216,227,241,.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-log-row:last-child {
  border-bottom: none;
}

.live-log-time {
  color: #8fb3d9;
  margin-right: 8px;
}

.live-log-operator {
  color: #8ae6b4;
  margin-right: 8px;
}

.live-feed-tools {
  justify-content: flex-end;
}

.sandbox-panel {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #d9e5f2;
}

.sandbox-chip {
  display: inline-flex;
  position: static;
  float: none;
}

@media (min-width: 1080px) {
  body.management-page #adminShell,
  body.platform-page #platformShell {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
  }

  body.management-page #adminShell > .console-menu-card,
  body.platform-page #platformShell > .console-menu-card {
    grid-column: 1;
    position: static;
    margin-top: 0;
  }

  body.management-page #adminShell > :not(.console-menu-card),
  body.platform-page #platformShell > :not(.console-menu-card) {
    grid-column: 2;
  }
}

body.management-page .guide-card,
body.platform-page .guide-card {
  background:
    radial-gradient(ellipse 75% 50% at 100% 0%, rgba(255,174,0,.10) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-muted) 100%);
}

body.management-page .topbar,
body.platform-page .topbar {
  background: linear-gradient(180deg, rgba(22,28,34,.94) 0%, rgba(13,18,23,.92) 100%);
  border-bottom-color: #d9e5f2;
}

/* Bottom nav (mobile) / Sidebar (desktop) */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  gap: 4px;
  align-items: stretch;
  justify-content: space-around;
  height: calc(var(--navh) + var(--safe-bottom));
  padding: 6px 10px calc(6px + var(--safe-bottom));
  background: rgba(22,28,34,.92);
  backdrop-filter: saturate(1.5) blur(24px);
  -webkit-backdrop-filter: saturate(1.5) blur(24px);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -1px 0 rgba(10,18,32,.03), 0 -8px 24px rgba(10,18,32,.05);
}

.bottom-nav button {
  flex: 1 1 0;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font: 500 11px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition:
    background     var(--t-fast) var(--ease-standard),
    color          var(--t-fast) var(--ease-standard),
    border-color   var(--t-fast) var(--ease-standard);
}

.bottom-nav button svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-normal) var(--ease-spring);
}

.bottom-nav button:hover {
  color: var(--text-secondary);
  background: var(--bg-muted);
}

.bottom-nav button.active {
  color: var(--brand-700);
  background: var(--brand-50);
  border-color: var(--brand-200);
  font-weight: 700;
}

.bottom-nav button.active svg {
  transform: translateY(-1px) scale(1.08);
}

/* ─── 6. CARDS ──────────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-bottom: 12px;
}

.card:last-child { margin-bottom: 0; }

.card-elevated { box-shadow: var(--shadow-md); }

.guide-card {
  border-color: var(--brand-200);
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(5,136,96,.06) 0%, transparent 60%),
    var(--bg-surface);
}

/* ─── 7. TOOLBARS ───────────────────────────────────────────────────── */
.statusBar, .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.statusBar { justify-content: space-between; margin-bottom: 12px; }

.toolbar-end { justify-content: flex-end; margin-top: 10px; }

.utility-toolbar { justify-content: space-between; }

/* ─── 8. BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: 600 13px/1.2 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(22,28,34,.8);
  transition:
    background   var(--t-fast) var(--ease-standard),
    border-color var(--t-fast) var(--ease-standard),
    box-shadow   var(--t-fast) var(--ease-standard),
    color        var(--t-fast) var(--ease-standard),
    transform    var(--t-normal) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-400);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(.99);
  box-shadow: var(--shadow-xs);
}

.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.btn-primary {
  background: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-700) 100%);
  border-color: var(--brand-700);
  color: var(--text-inverse);
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.15);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(160deg, var(--brand-500) 0%, var(--brand-700) 100%);
  border-color: var(--brand-700);
  box-shadow: var(--shadow-brand-lg), inset 0 1px 0 rgba(255,255,255,.18);
}

.btn-primary:active:not(:disabled) {
  background: var(--brand-800);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}

.btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--text-primary);
}

.btn-quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-secondary);
}

.btn-quiet:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: transparent;
  box-shadow: none;
  color: var(--text-primary);
}

/* Active/pressed state — used e.g. for Torch toggle button */
.btn-active {
  background: var(--color-brand, #0a6ebd);
  border-color: var(--color-brand, #0a6ebd);
  color: #fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}

.btn-active:hover:not(:disabled) {
  background: var(--color-brand-hover, #0858a0);
  border-color: var(--color-brand-hover, #0858a0);
  color: #fff;
}

/* Torch button row inside the camera panel */
.camera-torch-bar {
  display: flex;
  gap: 8px;
  padding: 6px 0 2px;
}

.btn-danger {
  background: var(--bg-surface);
  border-color: var(--color-error-border);
  color: var(--color-error);
  box-shadow: var(--shadow-xs);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-error-light);
  border-color: var(--color-error-border);
}

.action-btn {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  border-radius: var(--r-lg);
}

/* ─── 9. CHIPS / BADGES ─────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font: 500 12px/1.4 'IBM Plex Sans', system-ui, sans-serif;
  white-space: nowrap;
}

.chip-soft    { background: var(--brand-50);  color: var(--brand-700);  border-color: var(--brand-200); }
.chip-amber   { background: var(--amber-50);  color: var(--amber-500);  border-color: var(--amber-300); }
.chip-error   { background: var(--color-error-light); color: var(--color-error); border-color: var(--color-error-border); }
.chip-success { background: var(--color-success-light); color: var(--color-success-dark); border-color: var(--color-success-border); }

/* ─── 10. BANNERS ───────────────────────────────────────────────────── */
.banner {
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
  animation: slideIn var(--t-normal) var(--ease-smooth) both;
}

.banner-info    { background: var(--color-info-light);    border-color: var(--color-info-border);    color: #bcd7fb; }
.banner-success { background: var(--color-success-light); border-color: var(--color-success-border); color: var(--color-success-dark); }
.banner-error   { background: var(--color-error-light);   border-color: var(--color-error-border);   color: #fca5a5; }

#err {
  position: sticky;
  top: calc(var(--safe-top) + 8px);
  z-index: 40;
  margin: 8px var(--pad) 0;
  box-shadow: var(--shadow-md);
}

/* ─── 11. FORM ELEMENTS ─────────────────────────────────────────────── */
label {
  display: block;
  margin-bottom: 5px;
  font: 600 11px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

input[type=text],
input[type=password],
input[type=number],
input[type=email],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  font: 500 14px/1.4 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text-primary);
  transition:
    border-color var(--t-fast) var(--ease-standard),
    box-shadow   var(--t-fast) var(--ease-standard);
  appearance: none;
  -webkit-appearance: none;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(5,136,96,.12);
  outline: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

textarea { resize: vertical; min-height: 80px; }

.field { display: flex; flex-direction: column; }
.field-small { max-width: 180px; }

.field-error { margin-top: 5px; color: var(--color-error); font-size: 12px; font-weight: 500; }

/* Primary scan input */
.scan-input-field input {
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--r-lg);
  border: 2px solid var(--border-strong);
  letter-spacing: .01em;
}

.scan-input-field input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(7,171,121,.10);
}

.scan-input-field input:disabled {
  background: var(--bg-muted);
  color: var(--text-muted);
  border-color: var(--border-default);
  cursor: not-allowed;
}

/* ─── 12. HELPER / LABEL / VALUE ────────────────────────────────────── */
.helper {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.label {
  margin-bottom: 3px;
  color: var(--text-muted);
  font: 500 11px/1 'IBM Plex Sans', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.value {
  font: 600 15px/1.3 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text-primary);
  word-break: break-word;
}

/* ─── 13. LAYOUT GRIDS ──────────────────────────────────────────────── */
.entry-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.entry-grid.spaced { margin-top: 10px; }

.summary-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.detail-grid  { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

.detail-wide  { grid-column: span 2; }

.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.compact-entry-grid { grid-template-columns: minmax(100px, 140px) auto; }

.stack-list { display: grid; gap: 8px; margin-top: 8px; }

.account-row {
  padding: 11px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

/* ─── 14. TABLES ────────────────────────────────────────────────────── */
.tableWrap {
  overflow: auto;
  max-height: 26vh;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  margin-top: 8px;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead { position: sticky; top: 0; z-index: 1; }

th {
  padding: 8px 10px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
  font: 700 11px/1 'IBM Plex Sans', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  white-space: nowrap;
}

td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--text-primary);
  font-size: 13px;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--brand-50); }

.tableWrap .btn-danger { padding: 4px 10px; font-size: 11px; border-radius: var(--r-sm); }

/* ─── 15. MODE SWITCH ───────────────────────────────────────────────── */
.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 3px;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
}

.mode-btn {
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font: 600 13px/1 'IBM Plex Sans', system-ui, sans-serif;
  cursor: pointer;
  transition:
    background   var(--t-fast) var(--ease-standard),
    border-color var(--t-fast) var(--ease-standard),
    color        var(--t-fast) var(--ease-standard),
    box-shadow   var(--t-fast) var(--ease-standard);
}

.mode-btn.active {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--brand-700);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

.mode-btn:hover:not(.active) { color: var(--text-primary); }

/* ─── 16. PAGE SECTIONS ─────────────────────────────────────────────── */
#page-scan,
#page-config,
#page-log {
  display: grid;
  gap: 12px;
  animation: fadeUp var(--t-slow) var(--ease-smooth) both;
}

#page-scan > .card,
#page-config > .card,
#page-log > .card { margin-bottom: 0; }

/* ─── 17. WORKFLOW CARD ─────────────────────────────────────────────── */
.workflow-card {
  display: grid;
  gap: 10px;
  background:
    radial-gradient(ellipse 80% 60% at 110% -20%, rgba(7,171,121,.08) 0%, transparent 55%),
    var(--bg-surface);
  border-color: var(--brand-200);
}

.workflow-head { justify-content: space-between; }

.workflow-steps { display: grid; gap: 8px; }

.workflow-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--gray-25);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.workflow-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--gray-200);
  color: var(--text-secondary);
  font: 700 12px/1 'IBM Plex Sans', system-ui, sans-serif;
  flex: 0 0 28px;
}

.workflow-step-title {
  font: 700 13px/1.3 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text-primary);
  letter-spacing: -.01em;
}

.workflow-step[data-state="active"] {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.workflow-step[data-state="active"] .workflow-step-number {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.workflow-step[data-state="done"] {
  border-color: var(--color-success-border);
  background: var(--color-success-light);
}

.workflow-step[data-state="done"] .workflow-step-number {
  background: var(--color-success);
  color: #fff;
}

.workflow-summary-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-default);
}

.workflow-summary-label {
  color: var(--text-muted);
  font: 500 11px/1 'IBM Plex Sans', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.workflow-summary-value {
  font: 700 13px/1 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text-primary);
}

.workflow-next-action { margin-top: 0; }

/* ─── 18. SCAN SHELL ────────────────────────────────────────────────── */
.scan-shell { display: grid; gap: 12px; }

.scan-tools-panel {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-default);
}

.compact-card { padding: 12px 14px; }

/* ─── 19. SCAN MAIN ─────────────────────────────────────────────────── */
.scan-main { display: grid; gap: 12px; }

.scan-main-top { display: grid; gap: 12px; }

.primary-scan-card {
  border: 2px solid var(--border-strong);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.primary-scan-card:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(7,171,121,.08), var(--shadow-md);
}

.current-card {
  border-color: var(--brand-200);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(7,171,121,.06) 0%, transparent 60%),
    var(--bg-surface);
  animation: slideIn var(--t-slow) var(--ease-spring) both;
}

/* ─── 20. ENTRY CARD & NUMPAD ───────────────────────────────────────── */
.entry-card { background: var(--bg-surface); }

.duplicate-scan-warning {
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: var(--r-md);
  background: var(--color-warning-light, #fff8e1);
  border: 1px solid var(--color-warning-border, #ffc107);
  color: var(--color-warning, #7a5c00);
  font-size: 14px;
  line-height: 1.4;
}

.entry-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--brand-200);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-50) 0%, rgba(22,28,34,.8) 100%);
  animation: slideIn var(--t-slow) var(--ease-spring) both;
}

.entry-summary-text { min-width: 0; }

.entry-summary-title {
  font: 700 15px/1.25 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -.015em;
  color: var(--text-primary);
}

.entry-summary-meta {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  word-break: break-word;
}

.note-field-wrap { margin-top: 10px; }

#qty {
  font: 800 28px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -.04em;
  text-align: center;
  padding: 14px 12px;
  border-radius: var(--r-lg);
  border: 2px solid var(--border-strong);
}

#qty:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(7,171,121,.10);
}

.numpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.numpad .btn {
  min-height: 56px;
  font: 700 20px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -.02em;
  border-radius: var(--r-md);
  background: var(--bg-muted);
  border-color: var(--border-default);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.9);
  transition:
    background   var(--t-fast) var(--ease-standard),
    transform    var(--t-fast) var(--ease-spring),
    box-shadow   var(--t-fast) var(--ease-standard);
}

.numpad .btn:hover:not(:disabled) {
  background: var(--gray-150);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9);
}

.numpad .btn:active:not(:disabled) {
  transform: scale(.96);
  background: var(--gray-200);
  box-shadow: inset 0 1px 3px rgba(10,18,32,.12);
}

#backspace, #clearQty {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-surface);
}

.entry-actions { display: flex; justify-content: stretch; margin-top: 12px; }

/* ─── 21. RECENT ENTRIES ────────────────────────────────────────────── */
.recent-card { min-width: 0; }

.recent-actions { display: flex; gap: 8px; align-items: center; }

.recent-columns-panel {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--gray-25);
}

.recent-columns-title {
  font: 700 12px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: .02em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.recent-columns-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.recent-column-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font: 600 12px/1.2 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text-primary);
}

.recent-column-option input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.mobile-only-btn { display: none; }

/* ─── 22. STAT CARDS ────────────────────────────────────────────────── */
.stat-card {
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.stat-card .stat-label {
  color: var(--text-muted);
  font: 600 11px/1 'IBM Plex Sans', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.stat-card .stat-value {
  margin-top: 6px;
  font: 800 28px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -.04em;
  color: var(--text-primary);
}

/* ─── 23. AUTH GATE ─────────────────────────────────────────────────── */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 20px) 16px calc(var(--safe-bottom) + 20px);
  background: var(--bg-overlay);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  animation: fadeIn var(--t-normal) var(--ease-standard) both;
}

.auth-card {
  width: min(100%, 460px);
  max-height: min(100dvh - 40px, 760px);
  overflow-y: auto;
  padding: 28px;
  background: var(--bg-surface);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-2xl);
  animation: slideUp var(--t-slow) var(--ease-spring) both;
}

.auth-header { margin-bottom: 16px; }

/* ─── 24. CAMERA SHEET ──────────────────────────────────────────────── */
.camera-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 10px);
  background: rgba(8,12,18,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeIn var(--t-fast) var(--ease-standard) both;
}

.camera-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 720px);
  height: 100%;
  min-height: 0;
  padding: 14px;
  background: var(--bg-surface);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-2xl);
}

.camera-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.camera-panel-subtitle { margin-top: 3px; color: var(--text-muted); font-size: 12px; }

.camera-helper { margin-top: 10px; }

#camContainer {
  position: relative;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #000;
}

#camContainer video,
#camContainer canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

#camContainer section { background: transparent; color: var(--text-primary); }

#camContainer button {
  padding: 10px 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  font: inherit !important;
}

#camContainer select {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  font: inherit !important;
}

#camContainer__scan_region { min-height: 260px; border-radius: var(--r-lg); overflow: hidden; }

#camContainer__dashboard { padding: 12px 0 0; }

/* ─── 25. ENTRY BACKDROP ────────────────────────────────────────────── */
.entry-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(8,12,18,.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn var(--t-fast) var(--ease-standard) both;
}

/* ─── 26. NOT-FOUND SHEET ───────────────────────────────────────────── */
.not-found-sheet {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 calc(var(--safe-bottom) + 10px);
  background: rgba(8,12,18,.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn var(--t-fast) var(--ease-standard) both;
}

.not-found-panel {
  width: min(100%, 520px);
  padding: 20px 20px calc(12px + var(--safe-bottom));
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: 0 -20px 56px rgba(10,18,32,.18);
  animation: slideUp var(--t-slow) var(--ease-spring) both;
}

.not-found-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.not-found-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
  font: 700 13px/1 'IBM Plex Sans', system-ui, sans-serif;
}

.not-found-photo-area { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.not-found-photo-preview {
  width: 100%; max-height: 180px;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-default);
}

.duplicate-panel {
  width: min(100%, 480px);
}

.duplicate-panel .entry-grid {
  grid-template-columns: 1fr;
}

.duplicate-panel #duplicateItemText {
  font: 700 16px/1.3 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text-primary);
}

/* ─── 27. GUIDE CARD ────────────────────────────────────────────────── */
.guide-list { margin: 8px 0 0; padding-left: 20px; color: var(--text-primary); }
.guide-list li + li { margin-top: 8px; }

.guide-steps { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.guide-step-card {
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--brand-200);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  min-height: 120px;
  transition: box-shadow var(--t-fast), transform var(--t-normal) var(--ease-spring);
}

.guide-step-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.guide-step-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 6px;
}

.guide-step-content strong { font-size: 15px; line-height: 1.25; }

.guide-step-action { margin-top: auto; display: inline-flex; width: auto; text-decoration: none; }

.guide-step-badge {
  flex: 0 0 28px; height: 28px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--brand-700);
  background: var(--brand-100);
  border: 1px solid var(--brand-200);
}

.guide-qr {
  padding: 14px;
  border: 1.5px dashed var(--brand-300);
  border-radius: var(--r-lg);
  background: var(--brand-50);
}

.guide-qr-preview { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }

.guide-qr-preview img,
.guide-qr-inline {
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: #fff;
  padding: 6px;
  width: 180px; height: 180px;
  object-fit: contain;
}

.guide-qr-inline {
  display: flex; align-items: center; justify-content: center;
}

.guide-qr-inline svg { width: 100%; height: 100%; }

.guide-qr-info { display: grid; gap: 8px; align-content: start; min-width: min(100%, 260px); }

.guide-qr-link {
  color: var(--brand-700);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  word-break: break-all;
}

.guide-qr-link:hover { text-decoration: underline; }

/* ─── 28. LOG BOX ───────────────────────────────────────────────────── */
.logBox {
  min-height: 200px;
  max-height: 50vh;
  overflow: auto;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--bg-canvas);
  color: #a7f3d0;
  font: 500 12px/1.6 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace;
  border: 1px solid var(--border-default);
}

/* ─── 29. TICKET PRINTING ───────────────────────────────────────────── */
.ticket-preview-wrap {
  max-height: 420px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  border-radius: var(--r-md);
  overflow: auto;
}

.ticket-preview-table th { position: sticky; top: 0; z-index: 1; }
.ticket-preview-table td { padding-top: 10px; padding-bottom: 10px; }
.ticket-barcode-cell { width: 140px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ticket-description-cell { min-width: 240px; }
.ticket-line-primary     { font: 700 16px/1.2 'IBM Plex Sans', system-ui, sans-serif; }
.ticket-line-secondary   { margin-top: 2px; font-size: 15px; line-height: 1.2; }
.ticket-line-raw         { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.ticket-unit-cell,
.ticket-price-cell       { white-space: nowrap; font-size: 18px; vertical-align: middle; }
.ticket-price-cell       { font-weight: 700; }

/* ─── 30. ANIMATIONS ────────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; }                            to { opacity: 1; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-50) 50%, var(--gray-100) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}

.sync-pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ─── 31. SMALL MOBILE  ≤ 640px ─────────────────────────────────────── */
@media (max-width:640px) {
  main {
    padding: 12px;
    padding-bottom: calc(var(--navh) + var(--safe-bottom) + 16px);
  }

  .topbar {
    padding: calc(var(--safe-top) + 10px) 14px 10px;
    height: auto;
  }

  .topbar h1 { font-size: 16px; }

  .detail-wide { grid-column: auto; }
  .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .utility-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .guide-steps { grid-template-columns: 1fr; }
  .guide-step-card { min-height: 0; }
  .guide-step-action { width: 100%; justify-content: center; }

  .compact-entry-grid { grid-template-columns: minmax(0, 1fr) auto; }

  .workflow-summary-row { flex-direction: column; align-items: flex-start; }

  .entry-card {
    position: sticky;
    bottom: calc(var(--safe-bottom) + 8px);
    z-index: 8;
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
  }

  .numpad { gap: 7px; }
  .numpad .btn { min-height: 50px; font-size: 18px; }

  .tableWrap {
    max-height: 28vh;
    -webkit-overflow-scrolling: touch;
  }

  #countsTable { min-width: 560px; }

  .recent-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .recent-columns-grid { grid-template-columns: 1fr; }

  body.entry-sheet-open .entry-backdrop { display: block; }

  body.entry-sheet-open .entry-card {
    position: fixed;
    left: 10px; right: 10px;
    top: calc(var(--topbar-h) + 10px);
    z-index: 40;
    max-height: calc(100dvh - var(--topbar-h) - 32px);
    overflow: auto;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-2xl);
  }

  body.entry-sheet-open .recent-card,
  body.entry-sheet-open .scan-main-top,
  body.entry-sheet-open .bottom-nav { visibility: hidden; }

  /* Entry card raised after a scan — no backdrop, no hiding, just floats to top */
  body.entry-raised .entry-card {
    position: fixed;
    left: 10px; right: 10px;
    top: calc(var(--topbar-h) + 10px);
    z-index: 40;
    max-height: calc(100dvh - var(--topbar-h) - 32px);
    overflow: auto;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-2xl);
  }

  .mobile-only-btn { display: inline-flex; }
  .recent-body[hidden] { display: none !important; }

  .camera-panel { width: 100%; border-radius: var(--r-xl); }

  #camContainer { flex: 1 1 auto; min-height: 0; }
  #camContainer__scan_region { min-height: 0; height: 100%; }

  #page-scan { padding-bottom: calc(var(--safe-bottom) + 110px); }

  .not-found-panel { width: 100%; }
}

/* ─── 32. TABLET  721px – 1023px ────────────────────────────────────── */
@media (min-width:721px) {
  .scan-main {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    align-items: start;
  }

  .scan-main-top {
    position: sticky;
    top: calc(var(--safe-top) + 76px);
  }
}

@media (max-width:720px) {
  .detail-wide { grid-column: auto; }
  .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── 33. DESKTOP  ≥ 1024px ─────────────────────────────────────────── */
@media (min-width:1024px) {
  body.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    min-height: 100dvh;
  }

  body.app-shell .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
  }

  .subtitle { display: block; }

  body.app-shell .bottom-nav {
    position: sticky;
    top: var(--topbar-h);
    left: 0;
    right: auto; bottom: auto;
    z-index: 20;
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: var(--sidebar-w);
    height: calc(100dvh - var(--topbar-h));
    padding: 16px 10px;
    border-top: none;
    border-right: 1px solid var(--border-default);
    border-bottom: none;
    box-shadow: none;
    gap: 4px;
    background: rgba(22,28,34,.96);
    overflow-y: auto;
  }

  body.app-shell .bottom-nav button {
    flex: 0 0 auto;
    max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: var(--r-md);
    text-align: left;
  }

  body.app-shell .bottom-nav button svg { flex: 0 0 18px; width: 18px; height: 18px; }

  body.app-shell main {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: none;
    padding: 20px 28px;
    padding-bottom: 40px;
    overflow-y: auto;
  }

  #page-scan,
  #page-config,
  #page-log {
    max-width: var(--content-max);
    margin: 0 auto;
  }

  #page-scan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto;
    align-items: start;
    gap: 16px;
    max-width: 1080px;
  }

  #recentCard {
    grid-column: 2;
    grid-row: 1 / 8;
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
    max-height: calc(100dvh - var(--topbar-h) - 40px);
    overflow-y: auto;
    margin-bottom: 0;
  }

  .tableWrap { max-height: 45vh; }

  .workflow-card,
  .scan-shell,
  .scan-main { grid-column: 1; }

  .scan-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .scan-main-top {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  body.app-shell .admin-shell {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    width: 100%;
    padding: 24px 36px 48px;
    overflow-y: auto;
  }

  .admin-shell .admin-card:first-child { margin-top: 0; }

  .admin-shell .entry-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (min-width:1024px) {
  body.management-page .admin-shell,
  body.platform-page .admin-shell {
    padding: 24px 28px 44px;
  }

  body.management-page #adminShell,
  body.platform-page #platformShell {
    grid-template-columns: 1fr;
  }

  body.management-page #managementGuideCard {
    position: relative;
    overflow: hidden;
  }

  body.management-page #managementGuideCard::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(5,136,96,.16) 0%, rgba(5,136,96,0) 70%);
    pointer-events: none;
  }
}

/* ─── 34. LARGE DESKTOP  ≥ 1280px ───────────────────────────────────── */
@media (min-width:1280px) {
  .bottom-nav { padding: 20px 14px; }

  .bottom-nav button { padding: 11px 14px; font-size: 13px; }

  #page-scan {
    grid-template-columns: minmax(0, 1fr) 400px;
    max-width: 1200px;
  }

  main { padding: 24px 36px; }
}

/* Lock scrolling when sheets open */
body.nf-sheet-open { overflow: hidden; }

/* Register page */
.register-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.register-card { width: min(100%, 480px); }