:root {
  --background: 42 33% 96%;
  --foreground: 222 33% 12%;
  --primary: 164 78% 25%;
  --secondary: 38 78% 54%;
  --muted: 44 24% 90%;
  --muted-foreground: 220 11% 42%;
  --destructive: 0 72% 48%;
  --border: 42 20% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 1px 2px hsl(222 33% 12% / 0.06), 0 8px 22px hsl(222 33% 12% / 0.04);
  --shadow-md: 0 8px 28px hsl(222 33% 12% / 0.10);
  --shadow-lg: 0 18px 60px hsl(222 33% 12% / 0.18);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
}

.dark {
  --background: 218 28% 8%;
  --foreground: 42 28% 94%;
  --primary: 164 62% 48%;
  --secondary: 38 82% 58%;
  --muted: 218 22% 15%;
  --muted-foreground: 218 12% 70%;
  --destructive: 0 72% 58%;
  --border: 218 18% 22%;
  --card: 218 24% 11%;
}

* { box-sizing: border-box; }
html { background: hsl(var(--background)); }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: hsl(var(--foreground)); }
button, input, select, textarea { font: inherit; }
input, select, textarea { font-size: max(16px, 1rem); }
button { min-height: 44px; cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }

.cell-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 0.6rem 0.7rem;
  outline: none;
  color: hsl(var(--foreground));
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cell-input:hover { background: hsl(var(--muted) / 0.45); }
.cell-input:focus { background: hsl(var(--card)); border-color: hsl(var(--primary) / 0.45); box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12); }

.filter-input {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: 0 0.9rem;
  outline: none;
  color: hsl(var(--foreground));
}
.filter-input:focus { box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12); border-color: hsl(var(--primary) / 0.45); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
}
.th {
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  padding: 0.9rem 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}
.td { padding: 0.45rem; }
.td.narrow { min-width: 76px; padding: 1rem 0.75rem; }

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}
.status.green { background: hsl(150 70% 42% / 0.14); color: hsl(150 70% 27%); }
.status.yellow { background: hsl(42 95% 54% / 0.20); color: hsl(35 84% 32%); }
.status.red { background: hsl(var(--destructive) / 0.13); color: hsl(var(--destructive)); }

.action-btn {
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: 12px;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  font-weight: 700;
  font-size: 0.9rem;
}
.action-btn.danger { color: hsl(var(--destructive)); }

.tab-btn {
  min-height: 46px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  font-weight: 800;
  color: hsl(var(--muted-foreground));
}
.tab-btn.active { background: hsl(var(--primary)); color: white; border-color: hsl(var(--primary)); }

.bottom-btn {
  min-height: 50px;
  border-radius: 16px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-weight: 800;
}
.bottom-btn.active { background: hsl(var(--primary)); color: white; border-color: hsl(var(--primary)); }

.loading-card, .empty-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  color: hsl(var(--muted-foreground));
}
.empty-card { display: flex; flex-direction: column; gap: 0.35rem; }
.empty-card strong { color: hsl(var(--foreground)); }

@media (max-width: 640px) {
  .th { font-size: 0.72rem; }
  .action-btn { min-height: 44px; }
}