@media (max-width: 760px) {
  html:has(body.inventory-session),
  html:has(body.clerk-session),
  body.inventory-session,
  body.clerk-session {
    --ink: #1f2329;
    --ink-soft: #4e5969;
    --ink-muted: #667085;
    --canvas: #f5f7fa;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --line: #e5e7eb;
    --line-strong: #d1d5db;
    --brand: #3370ff;
    --brand-deep: #245fdc;
    --shadow-sm: 0 1px 2px rgb(31 35 41 / 5%);
    --shadow-md: 0 10px 28px rgb(31 35 41 / 8%);
    background: #f5f7fa;
  }

  body.inventory-session header,
  body.clerk-session header {
    color: #1f2329;
    background: #ffffff;
    border-bottom-color: #e5e7eb;
    box-shadow: 0 2px 12px rgb(31 35 41 / 7%);
  }

  body.inventory-session header strong,
  body.clerk-session header strong { color: #1f2329; }

  body.inventory-session nav button,
  body.clerk-session nav button {
    color: #4e5969;
    background: transparent;
  }

  body.inventory-session nav button:hover,
  body.clerk-session nav button:hover { color: #245fdc; background: #f5f8ff; }

  body.inventory-session nav button.active,
  body.clerk-session nav button.active {
    color: #245fdc;
    background: #edf3ff;
    box-shadow: inset 0 0 0 1px #dbe7ff;
  }

  body.inventory-session #logout,
  body.clerk-session #logout {
    color: #4e5969;
    background: #ffffff;
    border-color: #dfe3e8;
  }

  body.inventory-session #logout:hover,
  body.clerk-session #logout:hover { color: #245fdc; background: #f5f8ff; }

  body.inventory-session button,
  body.clerk-session button {
    min-height: 44px;
    color: #3f4854;
    background: #ffffff;
    border-color: #dfe3e8;
    box-shadow: none;
    touch-action: manipulation;
  }

  body.inventory-session button:hover,
  body.clerk-session button:hover { color: #245fdc; background: #f5f8ff; border-color: #b7c9ff; }

  body.inventory-session button.primary,
  body.clerk-session button.primary { color: #ffffff; background: #3370ff; border-color: #3370ff; }

  body.inventory-session button.primary:hover,
  body.clerk-session button.primary:hover { color: #ffffff; background: #245fdc; border-color: #245fdc; }

  body.inventory-session button.danger,
  body.clerk-session button.danger { color: #ffffff; background: #b74545; border-color: #b74545; }

  body.inventory-session .panel,
  body.inventory-session .metric,
  body.clerk-session .panel,
  body.clerk-session .metric { background: #ffffff; border-color: #e5e7eb; }

  body.inventory-session .field input,
  body.inventory-session .field textarea,
  body.inventory-session .field select,
  body.clerk-session .field input,
  body.clerk-session .field textarea,
  body.clerk-session .field select { color: #1f2329; background: #ffffff; border-color: #d1d5db; }

  body.inventory-session .multi-sale-item,
  body.clerk-session .multi-sale-item { background: #f8fafc; border-color: #e5e7eb; }
}