:root {
  --background: 174 34% 96%;
  --foreground: 180 33% 8%;
  --primary: 174 72% 34%;
  --primary-foreground: 0 0% 100%;
  --secondary: 38 92% 55%;
  --secondary-foreground: 30 50% 10%;
  --muted: 174 18% 88%;
  --muted-foreground: 178 13% 34%;
  --destructive: 0 76% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 174 18% 80%;
  --card: 0 0% 100%;
  --shadow-sm: 0 2px 10px hsl(180 35% 8% / 0.08);
  --shadow-md: 0 14px 38px hsl(180 35% 8% / 0.12);
  --shadow-lg: 0 28px 70px hsl(180 35% 8% / 0.18);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}
.dark {
  --background: 180 35% 7%;
  --foreground: 174 34% 94%;
  --primary: 174 72% 44%;
  --primary-foreground: 180 35% 7%;
  --secondary: 38 92% 58%;
  --secondary-foreground: 30 50% 10%;
  --muted: 180 24% 14%;
  --muted-foreground: 174 16% 70%;
  --destructive: 0 76% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 180 18% 22%;
  --card: 180 28% 10%;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: hsl(var(--foreground)); background: radial-gradient(circle at top left, hsl(var(--primary) / .18), transparent 32rem), hsl(var(--background)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast); }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }
.card { background: hsl(var(--card) / .92); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.focus-ring:focus { outline: 3px solid hsl(var(--primary) / .28); outline-offset: 2px; }
.app-shell { width: min(100%, var(--workspace-width, 100%)); margin-inline: auto; transform: scale(var(--app-scale, 1)); transform-origin: top center; }
.pos-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 1024px) { .pos-grid { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (min-width: 1536px) { .pos-grid { grid-template-columns: minmax(0, 1fr) 400px; } }
.print-receipt { display: none; }
@media print { body * { visibility: hidden; } .print-receipt, .print-receipt * { visibility: visible; } .print-receipt { display: block; position: absolute; inset: 0; padding: 24px; color: black; background: white; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--primary) / .45); border-radius: 999px; }