:root {
  --radius: 0.625rem;
  --background: oklch(0.99 0.005 240);
  --foreground: oklch(0.2 0.04 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.04 240);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.04 240);
  --primary: oklch(0.45 0.16 250);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.62 0.16 155);
  --secondary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.96 0.01 240);
  --muted-foreground: oklch(0.5 0.02 240);
  --accent: oklch(0.94 0.04 250);
  --accent-foreground: oklch(0.25 0.08 250);
  --success: oklch(0.62 0.16 155);
  --success-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.6 0.22 27);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.9 0.01 240);
  --input: oklch(0.92 0.01 240);
  --ring: oklch(0.45 0.16 250);
  --sidebar: oklch(0.28 0.08 250);
  --sidebar-foreground: oklch(0.97 0.01 240);
  --sidebar-primary: oklch(0.62 0.16 155);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.35 0.09 250);
  --sidebar-accent-foreground: oklch(0.97 0.01 240);
  --sidebar-border: oklch(0.35 0.08 250);
}

* { border-color: var(--border); }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }

.gradient-hero {
  background: linear-gradient(135deg, oklch(0.45 0.16 250), oklch(0.62 0.16 155));
}

.bg-sidebar { background-color: var(--sidebar); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
.text-sidebar-foreground\/70 { color: color-mix(in oklch, var(--sidebar-foreground) 70%, transparent); }
.text-sidebar-foreground\/90 { color: color-mix(in oklch, var(--sidebar-foreground) 90%, transparent); }
.bg-sidebar-primary { background-color: var(--sidebar-primary); }
.text-sidebar-primary-foreground { color: var(--sidebar-primary-foreground); }
.bg-sidebar-accent { background-color: var(--sidebar-accent); }
.border-sidebar-border { border-color: var(--sidebar-border); }

.bg-card { background-color: var(--card); }
.bg-muted { background-color: var(--muted); }
.bg-muted\/30 { background-color: color-mix(in oklch, var(--muted) 30%, transparent); }
.bg-muted\/50 { background-color: color-mix(in oklch, var(--muted) 50%, transparent); }
.bg-primary { background-color: var(--primary); }
.bg-primary\/10 { background-color: color-mix(in oklch, var(--primary) 10%, transparent); }
.bg-secondary\/15 { background-color: color-mix(in oklch, var(--secondary) 15%, transparent); }
.bg-destructive\/10 { background-color: color-mix(in oklch, var(--destructive) 10%, transparent); }
.bg-accent { background-color: var(--accent); }
.bg-background { background-color: var(--background); }

.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-destructive { color: var(--destructive); }

.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l-2 { border-left: 2px solid var(--border); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; font-weight: 500;
  padding: 0.5rem 1rem; cursor: pointer; transition: all 0.15s; border: none;
  background: var(--primary); color: var(--primary-foreground);
}
.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--accent); }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }

.input, .select, .textarea {
  width: 100%; border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input); background: var(--background);
  padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--foreground);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--ring); outline-offset: 1px;
}
.textarea { min-height: 80px; resize: vertical; }

.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500;
  border: 1px solid var(--border);
}
.badge-secondary { background: color-mix(in oklch, var(--secondary) 15%, transparent); color: var(--secondary-foreground); border-color: transparent; }
.badge-outline { background: transparent; }

.dialog-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.dialog-content {
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto; padding: 1.5rem;
}
.dialog-content.lg { max-width: 42rem; }
.dialog-content.xl { max-width: 48rem; }

.tabs-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
  background: var(--muted); border-radius: calc(var(--radius) - 2px); padding: 0.25rem;
}
.tab-trigger {
  padding: 0.5rem; text-align: center; border-radius: calc(var(--radius) - 4px);
  font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; background: transparent;
}
.tab-trigger.active { background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.tag {
  border-radius: 9999px; background: color-mix(in oklch, var(--secondary) 15%, transparent);
  padding: 0.125rem 0.5rem; font-size: 10px; font-weight: 500; color: var(--secondary-foreground);
}

.toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 100;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.toast {
  padding: 0.75rem 1rem; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: 0.875rem;
}
.toast.success { border-color: var(--secondary); }
.toast.error { border-color: var(--destructive); color: var(--destructive); }

[x-cloak] { display: none !important; }

.hidden { display: none !important; }

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (min-width: 768px) {
  .md\:block { display: block !important; }
  .md\:flex { display: flex !important; }
  .md\:hidden { display: none !important; }
  .md\:table-cell { display: table-cell !important; }
  .md\:p-8 { padding: 2rem !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:table-cell { display: table-cell !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:max-w-2xl { max-width: 42rem; }
  .sm\:max-w-xl { max-width: 36rem; }
}