:root {
  --background: 215 45% 97%;
  --foreground: 222 47% 11%;
  --primary: 168 76% 36%;
  --primary-foreground: 0 0% 100%;
  --secondary: 222 42% 16%;
  --secondary-foreground: 0 0% 100%;
  --muted: 214 28% 88%;
  --muted-foreground: 215 18% 42%;
  --destructive: 0 78% 56%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 24% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 16px 34px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 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: 222 47% 8%;
  --foreground: 210 40% 96%;
  --primary: 168 72% 45%;
  --primary-foreground: 222 47% 8%;
  --secondary: 216 34% 17%;
  --secondary-foreground: 210 40% 96%;
  --muted: 217 24% 20%;
  --muted-foreground: 214 20% 74%;
  --destructive: 0 76% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 217 24% 24%;
  --card: 222 42% 12%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, hsla(var(--primary), .18), transparent 34rem),
    radial-gradient(circle at 85% 10%, hsla(var(--secondary), .10), transparent 28rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a, input, select, textarea { transition: var(--transition-smooth); }
input, select, textarea { font-size: max(16px, 1rem); }
button, a[role="button"] { min-height: 44px; }

.card {
  background: hsla(var(--card), .92);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-secondary {
  background: hsla(var(--secondary), .10);
  color: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
}
.dark .btn-secondary { color: hsl(var(--foreground)); }

.input {
  width: 100%;
  min-height: 46px;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsla(var(--card), .94);
  color: hsl(var(--foreground));
  padding: .75rem .9rem;
  outline: none;
}
.input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 4px hsla(var(--primary), .14); }

.status-aberto { background: hsla(35, 92%, 50%, .14); color: hsl(35 92% 34%); }
.status-em-atendimento { background: hsla(var(--primary), .14); color: hsl(var(--primary)); }
.status-resolvido { background: hsla(145, 67%, 40%, .14); color: hsl(145 67% 30%); }
.status-fechado { background: hsla(var(--secondary), .14); color: hsl(var(--secondary)); }
.dark .status-fechado { color: hsl(var(--foreground)); }

.safe-bottom { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.qr-cell { width: 10px; height: 10px; border-radius: 2px; }
@media (min-width: 768px) { .safe-bottom { padding-bottom: 2rem; } }