:root {
  --background: 210 42% 96%;
  --foreground: 218 38% 15%;
  --primary: 210 92% 38%;
  --primary-foreground: 0 0% 100%;
  --secondary: 199 86% 92%;
  --secondary-foreground: 212 58% 24%;
  --muted: 212 26% 88%;
  --muted-foreground: 216 18% 43%;
  --destructive: 354 78% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 213 26% 84%;
  --card: 0 0% 100%;
  --success: 148 62% 34%;
  --warning: 36 94% 48%;
  --shadow-sm: 0 3px 10px rgba(15, 42, 70, 0.07);
  --shadow-md: 0 12px 28px rgba(15, 42, 70, 0.10);
  --shadow-lg: 0 22px 60px rgba(15, 42, 70, 0.16);
  --transition-fast: 150ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 218 34% 10%;
  --foreground: 210 35% 94%;
  --primary: 204 88% 58%;
  --primary-foreground: 218 34% 10%;
  --secondary: 216 35% 19%;
  --secondary-foreground: 210 35% 94%;
  --muted: 216 28% 24%;
  --muted-foreground: 214 18% 72%;
  --destructive: 354 75% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 22% 28%;
  --card: 218 30% 14%;
  --success: 148 58% 52%;
  --warning: 38 92% 58%;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, hsla(var(--primary), .16), transparent 32%),
    linear-gradient(135deg, hsl(var(--background)), hsl(var(--secondary)));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

button, input, select { font: inherit; }

.desktop-shell {
  height: calc(100vh - 24px);
  margin: 12px;
  border: 1px solid hsla(var(--border), .9);
  background: hsla(var(--card), .86);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.win-titlebar {
  height: 38px;
  background: linear-gradient(180deg, hsla(var(--card), .92), hsla(var(--secondary), .72));
  border-bottom: 1px solid hsl(var(--border));
  -webkit-app-region: drag;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.focus-ring:focus {
  outline: 3px solid hsla(var(--primary), .25);
  outline-offset: 2px;
}

.chart-line {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawLine 1.1s ease forwards;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

.card-hover {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: hsla(var(--primary), .35);
}

.receipt-print-area { display: none; }

@media print {
  @page { margin: 8mm; size: 80mm auto; }
  html, body, #root { height: auto; }
  body { overflow: visible; background: #fff; color: #000; }
  .desktop-shell { display: block; height: auto; margin: 0; border: 0; box-shadow: none; background: #fff; border-radius: 0; overflow: visible; }
  .desktop-shell > .win-titlebar, .desktop-shell > div > aside, .desktop-shell > div > main { display: none !important; }
  .receipt-print-area { display: block !important; color: #000; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
  .receipt-paper { width: 72mm; margin: 0 auto; padding: 0; font-size: 11px; line-height: 1.35; }
  .receipt-center { text-align: center; }
  .receipt-center h1 { margin: 0 0 4px; font-size: 18px; letter-spacing: .02em; }
  .receipt-center p { margin: 1px 0; }
  .receipt-divider { border-top: 1px dashed #000; margin: 8px 0; }
  .receipt-paper table { width: 100%; border-collapse: collapse; }
  .receipt-paper th, .receipt-paper td { padding: 4px 0; vertical-align: top; text-align: left; }
  .receipt-paper th:nth-child(2), .receipt-paper td:nth-child(2) { text-align: center; width: 24px; }
  .receipt-paper th:nth-child(3), .receipt-paper td:nth-child(3) { text-align: right; }
  .receipt-paper td span { font-size: 10px; color: #333; }
  .receipt-line { display: flex; justify-content: space-between; gap: 12px; margin: 3px 0; }
  .receipt-total { border-top: 1px solid #000; padding-top: 5px; font-size: 14px; }
  .receipt-thanks { margin-top: 10px; text-align: center; font-weight: 700; }
}

@media (max-width: 760px) {
  body { overflow: auto; }
  .desktop-shell { height: auto; min-height: calc(100vh - 16px); margin: 8px; }
}