:root {
  --background: 42 48% 96%;
  --foreground: 218 38% 13%;
  --primary: 169 72% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 29 90% 58%;
  --secondary-foreground: 218 38% 13%;
  --muted: 42 28% 88%;
  --muted-foreground: 217 14% 42%;
  --destructive: 354 72% 52%;
  --destructive-foreground: 0 0% 100%;
  --warning: 32 96% 46%;
  --border: 42 22% 80%;
  --card: 0 0% 100%;
  --shadow-sm: 0 4px 14px hsl(218 38% 13% / 0.08);
  --shadow-md: 0 14px 35px hsl(218 38% 13% / 0.12);
  --shadow-lg: 0 24px 70px hsl(218 38% 13% / 0.18);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 216 34% 9%;
  --foreground: 42 48% 96%;
  --primary: 169 65% 45%;
  --primary-foreground: 216 34% 9%;
  --secondary: 29 90% 58%;
  --secondary-foreground: 216 34% 9%;
  --muted: 216 22% 17%;
  --muted-foreground: 42 20% 70%;
  --destructive: 354 72% 58%;
  --destructive-foreground: 0 0% 100%;
  --warning: 36 96% 58%;
  --border: 216 18% 24%;
  --card: 216 28% 13%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / 0.18), transparent 32rem),
    radial-gradient(circle at bottom right, hsl(var(--secondary) / 0.16), transparent 28rem),
    hsl(var(--background));
}

.logo-mark {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: hsl(var(--primary-foreground));
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  box-shadow: var(--shadow-md);
}

.card, .stat-card {
  background: hsl(var(--card) / 0.86);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
}

.card { padding: 1rem; }
.stat-card { padding: 1.1rem; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.section-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.section-title h2 { font-size: 1.05rem; font-weight: 950; letter-spacing: -0.02em; }
.section-title p { color: hsl(var(--muted-foreground)); font-size: 0.88rem; margin-top: 0.15rem; }

.field-label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: hsl(var(--foreground));
}
.input {
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--background) / 0.72);
  color: hsl(var(--foreground));
  padding: 0.78rem 0.9rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14);
}

.btn-primary, .btn-secondary, .mini-btn {
  border: 0;
  cursor: pointer;
  font-weight: 900;
  transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn-primary {
  color: hsl(var(--primary-foreground));
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(169 72% 25%));
  padding: 0.82rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 22px hsl(var(--primary) / 0.22);
}
.btn-primary:hover, .btn-secondary:hover, .mini-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-secondary {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
}
.mini-btn {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.12);
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
}
.mini-btn.danger {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.12);
}

.table-head { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
th, td { padding: 0.85rem; text-align: left; white-space: nowrap; }
.table-row { border-top: 1px solid hsl(var(--border)); transition: background var(--transition-fast); }
.table-row:hover { background: hsl(var(--primary) / 0.05); }

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 950;
}
.pill-good { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); }
.pill-warning { color: hsl(var(--warning)); background: hsl(var(--warning) / 0.14); }
.pill-danger { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.12); }

.bill-card { background: linear-gradient(180deg, hsl(var(--card) / 0.94), hsl(var(--primary) / 0.08)); }
.bill-summary {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  padding: 1rem;
  display: grid;
  gap: 0.65rem;
  background: hsl(var(--background) / 0.58);
}
.divider { height: 1px; background: hsl(var(--border)); margin: 0.15rem 0; }
.low-warning {
  color: hsl(var(--warning));
  background: hsl(var(--warning) / 0.12);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  font-size: 0.88rem;
  font-weight: 800;
}
.danger-text { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.12); }

.sale-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--background) / 0.52);
}
.empty-state {
  min-height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
  color: hsl(var(--muted-foreground));
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--card)), hsl(var(--muted)));
  background-size: 220% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer { to { background-position: -220% 0; } }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem;
}
.feature-grid span {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--background) / 0.62);
  padding: 0.75rem;
  font-weight: 800;
  color: hsl(var(--foreground));
}
.code-card { overflow: hidden; }
.code-block {
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background: hsl(218 38% 10%);
  color: hsl(42 48% 96%);
  padding: 1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre;
}
.code-block code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

.toast { animation: slideUp 220ms ease both; }
.toast-success { background: hsl(var(--card)); border-color: hsl(var(--primary)); color: hsl(var(--foreground)); }
.toast-error { background: hsl(var(--card)); border-color: hsl(var(--destructive)); color: hsl(var(--foreground)); }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 640px) {
  .card { padding: 1.25rem; }
}