/* ==========================================================================
   shadcn/ui design system — vanilla CSS port (no build step, no Tailwind)
   Tokens follow shadcn "new-york" style. Theme: [data-theme="dark"] on <html>.
   Accent: [data-accent="blue|violet|green|orange|zinc"] on <html>.
   ========================================================================== */

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 35%;
  --warning: 38 92% 45%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.625rem;
  --sidebar: 240 4.8% 97.6%;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --font-scale: 1;
  color-scheme: light;
}

[data-theme="dark"] {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 5.5%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 5.5%;
  --popover-foreground: 0 0% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 50.6%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 69% 45%;
  --warning: 38 92% 55%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 217.2 91.2% 59.8%;
  --sidebar: 240 10% 5.5%;
  color-scheme: dark;
}

/* Accent themes */
[data-accent="violet"] { --primary: 262.1 83.3% 57.8%; --ring: 262.1 83.3% 57.8%; --primary-foreground: 210 20% 98%; }
[data-accent="green"]  { --primary: 142.1 76.2% 36.3%; --ring: 142.1 76.2% 36.3%; --primary-foreground: 355.7 100% 97.3%; }
[data-accent="orange"] { --primary: 24.6 95% 53.1%;    --ring: 24.6 95% 53.1%;    --primary-foreground: 60 9.1% 97.8%; }
[data-accent="rose"]   { --primary: 346.8 77.2% 49.8%; --ring: 346.8 77.2% 49.8%; --primary-foreground: 355.7 100% 97.3%; }
[data-accent="zinc"]   { --primary: 240 5.9% 10%;      --ring: 240 5.9% 10%;      --primary-foreground: 0 0% 98%; }
[data-theme="dark"][data-accent="violet"] { --primary: 263.4 70% 60%; --ring: 263.4 70% 60%; --primary-foreground: 210 20% 98%; }
[data-theme="dark"][data-accent="green"]  { --primary: 142.1 70.6% 45.3%; --ring: 142.1 70.6% 45.3%; --primary-foreground: 144.9 80.4% 10%; }
[data-theme="dark"][data-accent="orange"] { --primary: 20.5 90.2% 48.2%; --ring: 20.5 90.2% 48.2%; --primary-foreground: 60 9.1% 97.8%; }
[data-theme="dark"][data-accent="rose"]   { --primary: 346.8 77.2% 49.8%; --ring: 346.8 77.2% 49.8%; --primary-foreground: 355.7 100% 97.3%; }
[data-theme="dark"][data-accent="zinc"]   { --primary: 0 0% 98%; --ring: 240 4.9% 83.9%; --primary-foreground: 240 5.9% 10%; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); }
html { font-size: calc(16px * var(--font-scale)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); background: hsl(var(--background)); color: hsl(var(--foreground));
  line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "rlig" 1, "calt" 1;
}
h1, h2, h3, h4, h5, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
::selection { background: hsl(var(--primary) / .2); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { transition: none !important; animation: none !important; }
[hidden] { display: none !important; }
[data-lucide], .lucide { width: 1rem; height: 1rem; flex-shrink: 0; stroke-width: 2; }

/* ---------- Typography ---------- */
.h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
.h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.h4 { font-size: 1rem; font-weight: 600; }
.lead { font-size: 1.05rem; color: hsl(var(--muted-foreground)); }
.muted { color: hsl(var(--muted-foreground)); }
.kbd {
  display: inline-flex; align-items: center; gap: 2px; height: 1.25rem; padding: 0 .375rem; border-radius: .25rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); font-family: var(--font-mono); font-size: .65rem;
  font-weight: 500; color: hsl(var(--muted-foreground));
}

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
  height: 2.25rem; padding: 0 1rem; border-radius: calc(var(--radius) - 2px); font-size: .875rem; font-weight: 500;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-sm);
  transition: background .15s, color .15s, box-shadow .15s, opacity .15s; border: 1px solid transparent;
}
.btn:hover { background: hsl(var(--primary) / .9); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover { background: hsl(var(--secondary) / .8); }
.btn-outline { background: hsl(var(--background)); color: hsl(var(--foreground)); border-color: hsl(var(--input)); }
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); box-shadow: none; }
.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn-destructive:hover { background: hsl(var(--destructive) / .9); }
.btn-link { background: none; box-shadow: none; color: hsl(var(--primary)); padding: 0; height: auto; }
.btn-link:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.btn-xs { height: 1.75rem; padding: 0 .5rem; font-size: .75rem; gap: .25rem; }
.btn-lg { height: 2.5rem; padding: 0 2rem; }
.btn-icon { width: 2.25rem; padding: 0; }
.btn-icon.btn-sm { width: 2rem; }
.btn-icon.btn-xs { width: 1.75rem; }
.btn-block { width: 100%; }

/* ---------- Card ---------- */
.card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow-sm);
}
.card-header { display: flex; flex-direction: column; gap: .375rem; padding: 1.25rem 1.25rem 0; }
.card-header.row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.card-title { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.card-description { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.card-content { padding: 1.25rem; }
.card-footer { display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem 1.25rem; }
.card-hover { transition: box-shadow .2s, border-color .2s, transform .2s; }
.card-hover:hover { box-shadow: var(--shadow-md); border-color: hsl(var(--primary) / .35); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; padding: .125rem .625rem;
  font-size: .75rem; font-weight: 600; line-height: 1.1rem; white-space: nowrap; border: 1px solid transparent;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}
.badge [data-lucide], .badge .lucide { width: .75rem; height: .75rem; }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.badge-destructive { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.badge-success { background: hsl(var(--success) / .12); color: hsl(var(--success)); }
.badge-warning { background: hsl(var(--warning) / .14); color: hsl(var(--warning)); }
.badge-soft { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
[data-theme="dark"][data-accent="zinc"] .badge-soft { color: hsl(var(--foreground)); }

/* ---------- Form controls ---------- */
.label { font-size: .875rem; font-weight: 500; line-height: 1; display: inline-block; }
.input, .select, .textarea {
  display: flex; width: 100%; height: 2.25rem; border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--input));
  background: transparent; padding: .25rem .75rem; font-size: .875rem; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 5rem; padding: .5rem .75rem; resize: vertical; }
.select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; }
.select option { background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); }
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .2); }
.input-icon { position: relative; }
.input-icon > [data-lucide], .input-icon > .lucide { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; }
.input-icon > .input { padding-left: 2.25rem; }
.field { display: grid; gap: .5rem; }
.field-hint { font-size: .8rem; color: hsl(var(--muted-foreground)); }

.checkbox, .radio {
  appearance: none; width: 1rem; height: 1rem; border: 1px solid hsl(var(--primary)); border-radius: 4px; display: inline-grid;
  place-content: center; flex-shrink: 0; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s;
}
.radio { border-radius: 50%; }
.checkbox:checked { background: hsl(var(--primary)); }
.checkbox:checked::after { content: ""; width: .55rem; height: .3rem; border: 2px solid hsl(var(--primary-foreground)); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.radio:checked::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--primary)); }

.switch { appearance: none; width: 2.25rem; height: 1.25rem; border-radius: 9999px; background: hsl(var(--input)); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: hsl(var(--background)); box-shadow: var(--shadow); transition: transform .2s; }
.switch:checked { background: hsl(var(--primary)); }
.switch:checked::after { transform: translateX(1rem); }

.slider { width: 100%; accent-color: hsl(var(--primary)); }

/* ---------- Avatar ---------- */
.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: hsl(var(--muted)); font-size: .8rem; font-weight: 600;
  color: hsl(var(--muted-foreground)); user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .65rem; }
.avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.avatar-xl { width: 5rem; height: 5rem; font-size: 1.5rem; }
.avatar-group { display: flex; }
.avatar-group .avatar { box-shadow: 0 0 0 2px hsl(var(--card)); }
.avatar-group .avatar + .avatar { margin-left: -.5rem; }
.status-dot { position: absolute; right: 0; bottom: 0; width: .6rem; height: .6rem; border-radius: 50%; background: hsl(var(--success)); box-shadow: 0 0 0 2px hsl(var(--card)); }

/* ---------- Progress ---------- */
.progress { position: relative; height: .5rem; width: 100%; overflow: hidden; border-radius: 9999px; background: hsl(var(--primary) / .15); }
.progress > span { display: block; height: 100%; background: hsl(var(--primary)); border-radius: inherit; transition: width .6s ease; }
.progress-sm { height: .375rem; }
.progress-success > span { background: hsl(var(--success)); }
.progress-success { background: hsl(var(--success) / .15); }
.progress-warning > span { background: hsl(var(--warning)); }
.progress-warning { background: hsl(var(--warning) / .15); }
.progress-destructive > span { background: hsl(var(--destructive)); }
.progress-destructive { background: hsl(var(--destructive) / .15); }

/* Circular progress (conic) */
.ring {
  --value: 0; --size: 3.5rem; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(hsl(var(--primary)) calc(var(--value) * 1%), hsl(var(--primary) / .15) 0);
  font-size: .8rem; font-weight: 600; position: relative;
}
.ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: hsl(var(--card)); }
.ring > span { position: relative; }

/* ---------- Separator ---------- */
.separator { height: 1px; background: hsl(var(--border)); width: 100%; border: 0; margin: 0; }
.separator-v { width: 1px; align-self: stretch; background: hsl(var(--border)); }

/* ---------- Tabs ---------- */
.tabs-list {
  display: inline-flex; align-items: center; gap: .125rem; height: 2.25rem; padding: .1875rem; border-radius: var(--radius);
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tabs-trigger {
  display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; height: 100%; padding: 0 .75rem;
  border-radius: calc(var(--radius) - 3px); font-size: .875rem; font-weight: 500; transition: all .15s;
}
.tabs-trigger:hover { color: hsl(var(--foreground)); }
.tabs-trigger[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow); }
[data-theme="dark"] .tabs-trigger[aria-selected="true"] { background: hsl(var(--card)); }
.tabs-content { margin-top: 1rem; }
.tabs-content:not(.active) { display: none; }
/* underline variant */
.tabs-line { background: none; border-bottom: 1px solid hsl(var(--border)); border-radius: 0; padding: 0; height: 2.5rem; gap: 1rem; width: 100%; justify-content: flex-start; }
.tabs-line .tabs-trigger { border-radius: 0; padding: 0 .125rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-line .tabs-trigger[aria-selected="true"] { background: none; box-shadow: none; border-bottom-color: hsl(var(--primary)); }

/* ---------- Table ---------- */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; caption-side: bottom; }
.table th { height: 2.5rem; padding: 0 .75rem; text-align: left; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; border-bottom: 1px solid hsl(var(--border)); }
.table td { padding: .75rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: hsl(var(--muted) / .5); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Dropdown / Popover ---------- */
.dropdown { position: relative; display: inline-flex; }
.dropdown-content, .popover {
  position: absolute; z-index: 60; top: calc(100% + .375rem); min-width: 12rem; padding: .25rem; border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border)); background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none; transition: opacity .12s, transform .12s; right: 0;
}
.dropdown-content.align-start, .popover.align-start { right: auto; left: 0; }
.dropdown-content.side-top { top: auto; bottom: calc(100% + .375rem); }
.dropdown.open > .dropdown-content, .dropdown.open > .popover { opacity: 1; transform: none; pointer-events: auto; }
.popover { padding: 1rem; width: 18rem; }
.dropdown-label { padding: .375rem .5rem; font-size: .875rem; font-weight: 600; }
.dropdown-item {
  display: flex; width: 100%; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: calc(var(--radius) - 4px);
  font-size: .875rem; text-align: left; cursor: default; user-select: none; transition: background .1s;
}
.dropdown-item:hover, .dropdown-item:focus { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); outline: none; cursor: pointer; }
.dropdown-item .kbd, .dropdown-item .shortcut { margin-left: auto; }
.dropdown-item.danger { color: hsl(var(--destructive)); }
.dropdown-separator { height: 1px; margin: .25rem -.25rem; background: hsl(var(--border)); }

/* ---------- Dialog / Sheet ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / .6); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.overlay.open { opacity: 1; pointer-events: auto; }
.dialog {
  position: fixed; z-index: 90; left: 50%; top: 50%; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 2rem); overflow: auto;
  transform: translate(-50%, -48%) scale(.97); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-lg); padding: 1.5rem;
}
.dialog.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.dialog-lg { max-width: 48rem; }
.dialog-header { display: grid; gap: .375rem; margin-bottom: 1rem; padding-right: 1.5rem; }
.dialog-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.dialog-description { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.dialog-footer { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.dialog-close { position: absolute; right: 1rem; top: 1rem; opacity: .7; border-radius: 4px; padding: .125rem; }
.dialog-close:hover { opacity: 1; }

.sheet {
  position: fixed; z-index: 90; top: 0; right: 0; height: 100%; width: 100%; max-width: 26rem; display: flex; flex-direction: column;
  background: hsl(var(--background)); border-left: 1px solid hsl(var(--border)); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.sheet.sheet-left { right: auto; left: 0; border-left: 0; border-right: 1px solid hsl(var(--border)); transform: translateX(-100%); }
.sheet.open { transform: none; }
.sheet-header { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sheet-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.sheet-footer { padding: 1rem 1.25rem; border-top: 1px solid hsl(var(--border)); }

/* ---------- Tooltip (CSS-only) ---------- */
[data-tip] { position: relative; }
/* Pseudo-element exists only while hovered/focused so hidden tips never cause page overflow */
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; z-index: 70; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; padding: .25rem .5rem; border-radius: calc(var(--radius) - 4px); font-size: .75rem; font-weight: 500;
  background: hsl(var(--foreground)); color: hsl(var(--background)); pointer-events: none; animation: tip-in .12s ease;
}
[data-tip-side="right"]:hover::after { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
[data-tip-side="bottom"]:hover::after, [data-tip-side="bottom"]:focus-visible::after { bottom: auto; top: calc(100% + 6px); }
.topbar-actions [data-tip]:hover::after { left: auto; right: 0; transform: none; }
@keyframes tip-in { from { opacity: 0; } }

/* ---------- Toast (Sonner-style) ---------- */
.toaster { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; width: min(22rem, calc(100% - 2rem)); }
.toast {
  display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: var(--radius); background: hsl(var(--popover));
  border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-lg); animation: toast-in .25s ease; font-size: .875rem;
}
.toast.leaving { animation: toast-out .2s ease forwards; }
.toast-title { font-weight: 600; }
.toast-desc { color: hsl(var(--muted-foreground)); font-size: .8125rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

/* ---------- Accordion (native details) ---------- */
.accordion > details { border-bottom: 1px solid hsl(var(--border)); }
.accordion summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0;
  font-weight: 500; font-size: .9375rem; cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover .acc-title { text-decoration: underline; text-underline-offset: 4px; }
.accordion summary .chev { transition: transform .2s; color: hsl(var(--muted-foreground)); }
.accordion details[open] > summary .chev { transform: rotate(180deg); }
.accordion .acc-body { padding-bottom: 1rem; }

/* ---------- Alert ---------- */
.alert { display: flex; gap: .75rem; padding: 1rem; border-radius: var(--radius); border: 1px solid hsl(var(--border)); font-size: .875rem; background: hsl(var(--card)); }
.alert-title { font-weight: 600; margin-bottom: .125rem; }
.alert-info { border-color: hsl(var(--primary) / .35); background: hsl(var(--primary) / .06); }
.alert-info > [data-lucide], .alert-info > .lucide { color: hsl(var(--primary)); }
.alert-warning { border-color: hsl(var(--warning) / .4); background: hsl(var(--warning) / .07); }
.alert-warning > [data-lucide], .alert-warning > .lucide { color: hsl(var(--warning)); }
.alert-destructive { border-color: hsl(var(--destructive) / .4); background: hsl(var(--destructive) / .06); }
.alert-destructive > [data-lucide], .alert-destructive > .lucide { color: hsl(var(--destructive)); }

/* ---------- Skeleton ---------- */
.skeleton { border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted)); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* ---------- Command palette ---------- */
.command { display: flex; flex-direction: column; overflow: hidden; }
.command-input-wrap { display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; border-bottom: 1px solid hsl(var(--border)); }
.command-input-wrap [data-lucide], .command-input-wrap .lucide { color: hsl(var(--muted-foreground)); }
.command-input { flex: 1; height: 3rem; background: transparent; border: 0; outline: none; font-size: .9rem; }
.command-input::placeholder { color: hsl(var(--muted-foreground)); }
.command-list { max-height: 22rem; overflow-y: auto; padding: .25rem; }
.command-group-heading { padding: .5rem .5rem .25rem; font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.command-item { display: flex; align-items: center; gap: .625rem; padding: .5rem; border-radius: calc(var(--radius) - 4px); font-size: .875rem; cursor: pointer; }
.command-item[aria-selected="true"] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.command-item .kbd { margin-left: auto; }
.command-empty { padding: 2rem; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.command-footer { display: flex; gap: 1rem; padding: .5rem .75rem; border-top: 1px solid hsl(var(--border)); font-size: .75rem; color: hsl(var(--muted-foreground)); }
.dialog.dialog-command { padding: 0; max-width: 36rem; top: 20%; transform: translate(-50%, 0) scale(.97); }
.dialog.dialog-command.open { transform: translate(-50%, 0); }

/* ---------- Toggle group ---------- */
.toggle-group { display: inline-flex; border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px); padding: 2px; gap: 2px; }
.toggle { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 1.875rem; min-width: 1.875rem; padding: 0 .5rem; border-radius: calc(var(--radius) - 4px); font-size: .8125rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.toggle:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.toggle[aria-pressed="true"] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.breadcrumb a:hover { color: hsl(var(--foreground)); }
.breadcrumb .current { color: hsl(var(--foreground)); font-weight: 500; }
.breadcrumb [data-lucide], .breadcrumb .lucide { width: .875rem; height: .875rem; }

/* ---------- Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; }