/* ============================================================
   Copuz Tools Design System — vendored CSS (tokens + effects +
   the cz-* component class layer). Concatenated from the design
   system's styles.css @import closure so the vendored React
   components (_ds_bundle.js) render with their real styling.
   Consumed by the dashboard alongside app-chrome in style.css.
   ============================================================ */

/* ---- tokens/colors.css ---- */
:root {
  --background: 222 15% 13%;
  --foreground: 240 18% 78%;
  --card: 222 15% 13%;
  --card-foreground: 240 18% 78%;
  --popover: 222 15% 13%;
  --popover-foreground: 240 18% 78%;
  --primary: 314 100% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 242 39% 49%;
  --secondary-foreground: 0 0% 100%;
  --accent: 242 39% 49%;
  --accent-foreground: 0 0% 100%;
  --muted: 240 32% 29%;
  --muted-foreground: 240 22% 58%;
  --destructive: 350 89% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 32% 29%;
  --input: 240 32% 29%;
  --ring: 176 100% 59%;
  --chart-1: 314 100% 45%;
  --chart-2: 242 39% 49%;
  --chart-3: 176 100% 59%;
  --chart-4: 314 72% 68%;
  --chart-5: 242 45% 68%;
  --sidebar-background: 222 15% 13%;
  --sidebar-foreground: 240 18% 78%;
  --sidebar-primary: 314 100% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 242 39% 49%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 240 32% 29%;
  --sidebar-ring: 176 100% 59%;
}

/* ---- tokens/status.css ---- */
:root {
  --green-400: #4af086;
  --green-500: #19e35d;
  --green-600: #12cf51;
  --red-400: #ff6161;
  --red-500: #fb3b3b;
  --red-600: #e21f1f;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --status-ok: var(--green-500);
  --status-warn: var(--amber-500);
  --status-error: var(--red-500);
  --status-info: var(--blue-500);
  --status-unknown: #6b7280;
  --tv-up-dim: #45456a;
}

/* ---- tokens/typography.css ---- */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --text-9: 9px; --text-10: 10px; --text-11: 11px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --leading-none: 1; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625;
  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
  --tracking-tight: -0.025em; --tracking-wide: 0.025em;
}

/* ---- tokens/radius.css ---- */
:root {
  --radius: 0.5rem;
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-0-5: 0.125rem; --space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem;
  --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --panel-pad-x: var(--space-5); --panel-pad-y: var(--space-4); --section-pad: var(--space-6);
  --panel-gap: var(--space-3); --edge-pad: var(--space-5); --cell-pad-x: var(--space-3); --cell-pad-y: var(--space-2);
}

/* ---- tokens/elevation.css ---- */
:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ---- tokens/effects.css (base reset, motion, scrollbars, code) ---- */
* { border-color: hsl(var(--border)); box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: #fff; margin: 0; }
a { color: inherit; }
@keyframes cz-cell-flash { 0% { background-color: hsl(var(--secondary) / 0.6); } 100% { background-color: transparent; } }
.cz-cell-flash { animation: cz-cell-flash 2s ease-out; }
@keyframes cz-row-pulse { 0%, 100% { background-color: hsl(var(--secondary) / 0.14); } 50% { background-color: hsl(var(--secondary) / 0.38); } }
.cz-row-active > td { animation: cz-row-pulse 1.4s ease-in-out infinite; }
.cz-status-lamp { display: inline-block; flex: none; border-radius: var(--radius-full); }
@media (prefers-reduced-motion: reduce) { .cz-cell-flash, .cz-row-active > td { animation: none !important; } }
* { scrollbar-width: thin; scrollbar-color: hsl(var(--muted-foreground) / 0.5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: hsl(var(--muted-foreground) / 0.45); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted-foreground) / 0.7); }
::-webkit-scrollbar-corner { background: transparent; }
.hljs { color: hsl(var(--foreground)); background: transparent; }
.hljs-comment, .hljs-quote, .hljs-meta { color: hsl(var(--muted-foreground)); font-style: italic; }
.hljs-keyword, .hljs-built_in, .hljs-name, .hljs-tag, .hljs-attr, .hljs-selector-tag { color: hsl(var(--primary)); }
.hljs-string, .hljs-number, .hljs-literal, .hljs-symbol, .hljs-regexp, .hljs-attribute, .hljs-addition { color: hsl(var(--ring)); }
.hljs-title, .hljs-section, .hljs-type, .hljs-function { color: hsl(var(--foreground)); font-weight: 600; }

/* ---- tokens/components.css (the cz-* component class layer) ---- */
.cz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); white-space: nowrap;
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-medium);
  line-height: 1; cursor: pointer; user-select: none;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
  height: 2.25rem; padding: 0 var(--space-4);
}
.cz-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.cz-btn:disabled { pointer-events: none; opacity: .5; }
.cz-btn svg { width: 1rem; height: 1rem; flex: none; }
.cz-btn--sm { height: 2rem; padding: 0 var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-md); }
.cz-btn--lg { height: 2.5rem; padding: 0 var(--space-8); border-radius: var(--radius-md); }
.cz-btn--icon { height: 2rem; width: 2rem; padding: 0; }
.cz-btn--default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow); }
.cz-btn--default:hover { background: hsl(var(--primary) / 0.9); }
.cz-btn--secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); box-shadow: var(--shadow-sm); }
.cz-btn--secondary:hover { background: hsl(var(--secondary) / 0.8); }
.cz-btn--destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); box-shadow: var(--shadow-sm); }
.cz-btn--destructive:hover { background: hsl(var(--destructive) / 0.9); }
.cz-btn--outline { background: transparent; border-color: hsl(var(--input)); box-shadow: var(--shadow-sm); color: inherit; }
.cz-btn--outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.cz-btn--ghost { background: transparent; color: inherit; }
.cz-btn--ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.cz-btn--link { background: transparent; color: hsl(var(--primary)); text-underline-offset: 4px; padding: 0; height: auto; }
.cz-btn--link:hover { text-decoration: underline; }
.cz-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius-md); border: 1px solid transparent;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs); font-weight: var(--font-semibold); line-height: 1.35; white-space: nowrap;
}
.cz-badge--default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.cz-badge--secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.cz-badge--destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.cz-badge--outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.cz-card {
  border-radius: var(--radius-xl); border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: var(--shadow);
}
.cz-card-header { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--section-pad); }
.cz-card-title { font-weight: var(--font-semibold); line-height: 1; letter-spacing: var(--tracking-tight); color: #fff; }
.cz-card-description { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.cz-card-content { padding: var(--section-pad); padding-top: 0; }
.cz-panel { border-radius: var(--radius-lg); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.cz-input, .cz-textarea {
  display: flex; width: 100%;
  border-radius: var(--radius-md); border: 1px solid hsl(var(--input));
  background: transparent; color: hsl(var(--foreground));
  font-family: inherit; font-size: var(--text-sm);
  box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s;
}
.cz-input { height: 2.25rem; padding: var(--space-1) var(--space-3); }
.cz-textarea { min-height: 60px; padding: var(--space-2) var(--space-3); line-height: var(--leading-normal); resize: vertical; }
.cz-input::placeholder, .cz-textarea::placeholder { color: hsl(var(--muted-foreground)); }
.cz-input:focus-visible, .cz-textarea:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--muted-foreground)); }
.cz-input:disabled, .cz-textarea:disabled { cursor: not-allowed; opacity: .5; }
.cz-label { font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1; }
.cz-select { position: relative; display: inline-block; width: 100%; }
.cz-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; height: 2.25rem; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); border: 1px solid hsl(var(--input));
  background: transparent; color: hsl(var(--foreground));
  font-family: inherit; font-size: var(--text-sm); text-align: left;
  box-shadow: var(--shadow-sm); cursor: pointer; white-space: nowrap;
}
.cz-select-trigger:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--muted-foreground)); }
.cz-select-trigger[data-placeholder] { color: hsl(var(--muted-foreground)); }
.cz-select-trigger svg { width: 1rem; height: 1rem; opacity: .5; flex: none; }
.cz-select-content {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 100%;
  max-height: 24rem; overflow: auto; padding: var(--space-1);
  border-radius: var(--radius-md); border: 1px solid hsl(var(--border));
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); box-shadow: var(--shadow-md);
}
.cz-select-item {
  position: relative; display: flex; align-items: center; width: 100%;
  padding: var(--space-1-5) var(--space-8) var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: default; user-select: none;
}
.cz-select-item:hover, .cz-select-item[data-active] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.cz-select-item[data-selected] .cz-select-check { display: inline-flex; }
.cz-select-check { display: none; position: absolute; right: var(--space-2); width: .875rem; height: .875rem; align-items: center; justify-content: center; }
.cz-switch {
  position: relative; display: inline-flex; align-items: center; flex: none;
  height: 1.25rem; width: 2.25rem; padding: 0; cursor: pointer;
  border-radius: var(--radius-full); border: 2px solid transparent;
  background: hsl(var(--input)); box-shadow: var(--shadow-sm); transition: background-color .15s;
}
.cz-switch[data-checked] { background: hsl(var(--primary)); }
.cz-switch:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.cz-switch:disabled { cursor: not-allowed; opacity: .5; }
.cz-switch-thumb {
  display: block; height: 0.875rem; width: 0.875rem; border-radius: var(--radius-full);
  background: #fff; box-shadow: var(--shadow-lg); transform: translateX(1px); transition: transform .15s;
}
.cz-switch[data-checked] .cz-switch-thumb { transform: translateX(17px); }
.cz-checkbox {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 1rem; width: 1rem; padding: 0;
  border-radius: var(--radius-sm); border: 1px solid hsl(var(--primary));
  background: transparent; color: hsl(var(--primary-foreground)); box-shadow: var(--shadow); cursor: pointer;
}
.cz-checkbox[data-checked] { background: hsl(var(--primary)); }
.cz-checkbox:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.cz-checkbox:disabled { cursor: not-allowed; opacity: .5; }
.cz-checkbox svg { width: .875rem; height: .875rem; opacity: 0; }
.cz-checkbox[data-checked] svg { opacity: 1; }
.cz-separator { flex: none; background: hsl(var(--border)); }
.cz-separator[data-orientation="horizontal"] { height: 1px; width: 100%; }
.cz-separator[data-orientation="vertical"] { width: 1px; height: 100%; }
.cz-alert {
  position: relative; width: 100%;
  border-radius: var(--radius-lg); border: 1px solid hsl(var(--border));
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
  background: hsl(var(--background)); color: hsl(var(--foreground));
}
.cz-alert > svg { position: absolute; left: var(--space-4); top: var(--space-4); width: 1rem; height: 1rem; color: hsl(var(--foreground)); }
.cz-alert > svg ~ * { padding-left: var(--space-6); }
.cz-alert--destructive { border-color: hsl(var(--destructive) / 0.5); color: hsl(var(--destructive)); }
.cz-alert--destructive > svg { color: hsl(var(--destructive)); }
.cz-alert-title { margin: 0 0 var(--space-1); font-weight: var(--font-medium); line-height: 1; letter-spacing: var(--tracking-tight); }
.cz-alert-description { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.cz-dialog-overlay { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 0.8); }
.cz-dialog-content {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 50; display: grid; gap: var(--space-4); width: 100%; max-width: 32rem;
  border-radius: var(--radius-lg); border: 1px solid hsl(var(--border));
  background: hsl(var(--background)); padding: var(--section-pad); box-shadow: var(--shadow-lg);
}
.cz-dialog-header { display: flex; flex-direction: column; gap: var(--space-1-5); text-align: left; }
.cz-dialog-title { font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: 1; letter-spacing: var(--tracking-tight); color: #fff; }
.cz-dialog-description { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.cz-dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-2); }
.cz-dialog-close {
  position: absolute; right: var(--space-4); top: var(--space-4);
  border: none; background: transparent; color: inherit; cursor: pointer;
  border-radius: var(--radius-sm); opacity: .7; transition: opacity .15s; padding: 0;
}
.cz-dialog-close:hover { opacity: 1; }
.cz-dialog-close svg { width: 1rem; height: 1rem; }
.cz-popover-content {
  z-index: 50; width: 18rem; padding: var(--space-4);
  border-radius: var(--radius-md); border: 1px solid hsl(var(--border));
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); box-shadow: var(--shadow-md); outline: none;
}
.cz-hovercard-content { width: 16rem; }
.cz-table-wrap { position: relative; width: 100%; overflow: auto; }
.cz-table { width: 100%; border-collapse: collapse; caption-side: bottom; font-size: var(--text-sm); }
.cz-table thead tr { border-bottom: 1px solid hsl(var(--border)); }
.cz-table tbody tr { border-bottom: 1px solid hsl(var(--border)); transition: background-color .15s; }
.cz-table tbody tr:last-child { border-bottom: 0; }
.cz-table tbody tr:hover { background: hsl(var(--muted) / 0.5); }
.cz-th {
  height: 2.5rem; padding: 0 var(--cell-pad-x); text-align: left; vertical-align: middle;
  font-weight: var(--font-medium); color: #fff; background: hsl(var(--muted)); white-space: nowrap;
}
.cz-th:first-child { padding-left: var(--edge-pad); }
.cz-th:last-child { padding-right: var(--edge-pad); }
.cz-td { padding: var(--cell-pad-y) var(--cell-pad-x); vertical-align: middle; }
.cz-td:first-child { padding-left: var(--edge-pad); }
.cz-td:last-child { padding-right: var(--edge-pad); }
.cz-code {
  overflow-x: auto; margin: 0;
  border-radius: var(--radius-md); border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); padding: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-relaxed); color: hsl(var(--foreground));
}
.cz-code code { background: transparent; padding: 0; font: inherit; }
.cz-icon-action {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: hsl(var(--muted-foreground)); transition: color .15s;
}
.cz-icon-action:hover { color: #fff; }
.cz-tabs-list { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: hsl(var(--muted)); }
.cz-tabs-trigger {
  border: none; background: transparent; color: hsl(var(--muted-foreground));
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium);
  padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: color .15s, background-color .15s; white-space: nowrap;
}
.cz-tabs-trigger:hover { color: #fff; }
.cz-tabs-trigger[data-active] { background: hsl(var(--background)); color: #fff; box-shadow: var(--shadow-sm); }
.cz-tabs-trigger:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.cz-tabs-content { padding-top: var(--space-3); }
.cz-menu-content {
  min-width: 11rem; padding: var(--space-1); z-index: 50;
  border-radius: var(--radius-md); border: 1px solid hsl(var(--border));
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); box-shadow: var(--shadow-md);
}
.cz-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px 8px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); cursor: pointer; color: hsl(var(--foreground)); user-select: none;
}
.cz-menu-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.cz-menu-item[data-destructive] { color: hsl(var(--destructive)); }
.cz-menu-item[data-destructive]:hover { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); }
.cz-menu-item svg { width: 1rem; height: 1rem; flex: none; }
.cz-menu-label { padding: 6px 8px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: hsl(var(--muted-foreground)); }
.cz-menu-separator { height: 1px; margin: var(--space-1) calc(-1 * var(--space-1)); background: hsl(var(--border)); }
.cz-tooltip {
  z-index: 50; padding: 5px 9px; white-space: nowrap;
  border-radius: var(--radius-sm); border: 1px solid hsl(var(--border));
  background: hsl(var(--popover)); color: #fff; font-size: var(--text-xs); box-shadow: var(--shadow-md);
}
.cz-toast-viewport { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.cz-toast {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-md);
  background: hsl(var(--popover)); box-shadow: var(--shadow-lg); padding: 10px 14px; font-size: var(--text-sm); color: hsl(var(--foreground));
}
.cz-toast-title { font-weight: var(--font-semibold); color: #fff; }
.cz-toast-description { color: hsl(var(--muted-foreground)); font-size: var(--text-xs); margin-top: 2px; }
.cz-toast[data-variant="success"] { border-left: 3px solid var(--green-500); }
.cz-toast[data-variant="error"] { border-left: 3px solid var(--red-500); }
.cz-toast[data-variant="info"] { border-left: 3px solid hsl(var(--secondary)); }
.cz-toast[data-variant="warning"] { border-left: 3px solid var(--amber-500); }
.cz-radio-group { display: flex; flex-direction: column; gap: var(--space-2); }
.cz-radio-row { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); }
.cz-radio {
  width: 1rem; height: 1rem; flex: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-full); border: 1px solid hsl(var(--primary));
  background: transparent; display: inline-flex; align-items: center; justify-content: center;
}
.cz-radio:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.cz-radio:disabled { opacity: .5; cursor: not-allowed; }
.cz-radio[data-checked]::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: hsl(var(--primary)); }
.cz-progress { height: 8px; width: 100%; overflow: hidden; border-radius: var(--radius-full); background: hsl(var(--muted)); }
.cz-progress-bar { height: 100%; border-radius: var(--radius-full); background: hsl(var(--primary)); transition: width .3s ease; }
@keyframes cz-shimmer { 100% { transform: translateX(100%); } }
.cz-skeleton { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: hsl(var(--muted)); }
.cz-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, hsl(var(--muted-foreground) / 0.15), transparent); animation: cz-shimmer 1.5s infinite; }
@media (prefers-reduced-motion: reduce) { .cz-skeleton::after { animation: none; } }
.cz-avatar {
  width: 2.25rem; height: 2.25rem; flex: none; overflow: hidden; user-select: none;
  border-radius: var(--radius-full); background: hsl(var(--muted));
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: var(--text-sm); font-weight: var(--font-semibold);
}
.cz-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.cz-breadcrumb a { color: hsl(var(--muted-foreground)); text-decoration: none; underline-offset: 2px; }
.cz-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.cz-breadcrumb [aria-current] { color: #fff; }
.cz-breadcrumb-separator { color: hsl(var(--muted-foreground)); opacity: .6; }
.cz-pagination { display: flex; align-items: center; gap: var(--space-1); }
.cz-page-btn {
  min-width: 2rem; height: 2rem; padding: 0 8px; cursor: pointer;
  border-radius: var(--radius-md); border: 1px solid transparent; background: transparent;
  color: hsl(var(--foreground)); font: inherit; font-size: var(--text-sm);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s;
}
.cz-page-btn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.cz-page-btn[data-active] { border-color: hsl(var(--input)); color: #fff; font-weight: var(--font-semibold); }
.cz-page-btn:disabled { opacity: .5; cursor: not-allowed; }