:root {
  --background: 210 24% 97%;
  --foreground: 218 32% 14%;
  --primary: 210 83% 28%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 22% 93%;
  --secondary-foreground: 218 32% 14%;
  --muted: 210 18% 90%;
  --muted-foreground: 215 16% 43%;
  --destructive: 2 72% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 22% 86%;
  --card: 0 0% 100%;
  --success: 156 64% 32%;
  --warning: 35 88% 42%;
  --shadow-sm: 0 1px 2px hsl(218 32% 14% / 0.06);
  --shadow-md: 0 10px 24px hsl(218 32% 14% / 0.08);
  --shadow-lg: 0 24px 60px hsl(218 32% 14% / 0.12);
  --transition-fast: 140ms ease;
  --transition-smooth: 220ms ease;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
}
.dark {
  --background: 218 32% 9%;
  --foreground: 210 24% 96%;
  --primary: 202 85% 58%;
  --primary-foreground: 218 32% 9%;
  --secondary: 218 22% 16%;
  --secondary-foreground: 210 24% 96%;
  --muted: 218 18% 18%;
  --muted-foreground: 214 16% 72%;
  --destructive: 2 72% 58%;
  --border: 218 18% 22%;
  --card: 218 30% 12%;
}
* { 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: hsl(var(--background)); color: hsl(var(--foreground)); }
.bg-1 { background: hsl(var(--background)); }
.bg-2 { background: hsl(var(--card)); }
.bg-3 { background: hsl(var(--secondary)); }
.bg-4 { background: hsl(var(--muted)); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--muted-foreground)); }
.accent { color: hsl(var(--primary)); }
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.input { width: 100%; min-height: 44px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); border-radius: var(--radius-md); padding: 0.72rem 0.9rem; font-size: max(16px, 1rem); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12); }
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger { min-height: 44px; border-radius: var(--radius-md); padding: 0.65rem 1rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.btn-secondary.active { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-danger { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); }
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover { transform: translateY(-1px); }
button:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
.nav-item { min-height: 44px; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-md); color: hsl(var(--muted-foreground)); font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast); }
.nav-item:hover, .nav-active { background: hsl(var(--primary) / 0.10); color: hsl(var(--primary)); }
.bottom-nav { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; }
.status, .badge { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; border-radius: 999px; padding: 0.28rem 0.65rem; font-size: 0.75rem; font-weight: 800; background: hsl(var(--primary) / 0.10); color: hsl(var(--primary)); }
.status.completed, .status.paid, .status.active { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); }
.status.in-progress, .status.partial { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }
.status.delayed, .status.overdue, .badge.danger { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); }
.status.pending, .status.on-hold, .badge.warn { background: hsl(var(--warning) / 0.14); color: hsl(var(--warning)); }
.status.not-started, .status.available { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.progress { height: 0.55rem; width: 100%; overflow: hidden; border-radius: 999px; background: hsl(var(--muted)); }
.progress > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, hsl(var(--primary)), hsl(190 70% 42%)); transition: width var(--transition-smooth); }
.compact-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.compact-table th { position: sticky; top: 0; z-index: 1; background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.compact-table th, .compact-table td { padding: 0.85rem 1rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.compact-table tr:last-child td { border-bottom: 0; }
.step-card { min-height: 150px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); padding: 1rem; text-align: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.step-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
genmb-uploader { display: block; border-radius: var(--radius-lg); overflow: hidden; }
@media print { aside, header, nav, button, genmb-uploader { display: none !important; } main { padding: 0 !important; } .card { box-shadow: none; } }