/*
 * prefab.css — Base theme for the prefab renderer.
 *
 * Provides CSS custom properties (shadcn-compatible design tokens) and
 * structural styles for all pf-* component classes.  Import this file or
 * add a <link> tag to get a polished default look without BYO CSS.
 *
 * Token naming follows shadcn/ui conventions so existing Tailwind themes
 * can override them seamlessly.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — Light & Dark
   ═══════════════════════════════════════════════════════════════════════════
   Fallback chain: MCP Apps vars → VS Code vars → static defaults.
   When rendered inside Claude Desktop, VS Code webviews, or standalone,
   the correct tokens are resolved automatically without user CSS.

   MCP Apps spec:  --color-background-primary, --color-text-primary, …
   VS Code:        --vscode-editor-background, --vscode-editor-foreground, …
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Radii */
  --radius: var(--border-radius-md, 8px);
  --radius-sm: var(--border-radius-sm, 6px);

  /* Core palette — MCP Apps → VS Code → static */
  --background:            var(--color-background-primary, var(--vscode-editor-background, #ffffff));
  --foreground:            var(--color-text-primary, var(--vscode-editor-foreground, #09090b));

  --card:                  var(--color-background-secondary, var(--vscode-editorWidget-background, #ffffff));
  --card-foreground:       var(--color-text-primary, var(--vscode-editorWidget-foreground, #09090b));

  --popover:               var(--color-background-secondary, var(--vscode-editorHoverWidget-background, #ffffff));
  --popover-foreground:    var(--color-text-primary, var(--vscode-editorHoverWidget-foreground, #09090b));

  --primary:               var(--color-background-info, var(--vscode-button-background, #3b82f6));
  --primary-foreground:    var(--color-text-inverse, var(--vscode-button-foreground, #ffffff));

  --secondary:             var(--color-background-tertiary, var(--vscode-button-secondaryBackground, #f3f4f6));
  --secondary-foreground:  var(--color-text-secondary, var(--vscode-button-secondaryForeground, #1f2937));

  --muted:                 var(--color-background-tertiary, var(--vscode-editorWidget-background, #f3f4f6));
  --muted-foreground:      var(--color-text-tertiary, var(--vscode-descriptionForeground, #6b7280));

  --accent:                var(--color-background-ghost, var(--vscode-list-hoverBackground, #eff6ff));
  --accent-foreground:     var(--color-text-info, var(--vscode-list-hoverForeground, #1e40af));

  --destructive:           var(--color-background-danger, var(--vscode-errorForeground, #ef4444));
  --destructive-foreground: var(--color-text-inverse, #ffffff);

  --success:               var(--color-background-success, #22c55e);
  --success-foreground:    var(--color-text-inverse, #ffffff);

  --warning:               var(--color-background-warning, #f59e0b);
  --warning-foreground:    var(--color-text-inverse, #ffffff);

  --border:                var(--color-border-primary, var(--vscode-panel-border, #e5e7eb));
  --input:                 var(--color-border-secondary, var(--vscode-input-background, #e5e7eb));
  --ring:                  var(--color-ring-primary, var(--vscode-focusBorder, #3b82f6));

  /* Typography — MCP Apps uses --font-sans/--font-mono directly (same names);
     host inline styles override these automatically. VS Code fallback here. */
  --font-sans: var(--vscode-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif);
  --font-mono: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace);

  /* Shadows — MCP Apps host overrides these names inline when present */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background:            var(--color-background-primary, var(--vscode-editor-background, #09090b));
    --foreground:            var(--color-text-primary, var(--vscode-editor-foreground, #fafafa));

    --card:                  var(--color-background-secondary, var(--vscode-editorWidget-background, #111113));
    --card-foreground:       var(--color-text-primary, var(--vscode-editorWidget-foreground, #fafafa));

    --popover:               var(--color-background-secondary, var(--vscode-editorHoverWidget-background, #111113));
    --popover-foreground:    var(--color-text-primary, var(--vscode-editorHoverWidget-foreground, #fafafa));

    --primary:               var(--color-background-info, var(--vscode-button-background, #60a5fa));
    --primary-foreground:    var(--color-text-inverse, var(--vscode-button-foreground, #09090b));

    --secondary:             var(--color-background-tertiary, var(--vscode-button-secondaryBackground, #1f2937));
    --secondary-foreground:  var(--color-text-secondary, var(--vscode-button-secondaryForeground, #f3f4f6));

    --muted:                 var(--color-background-tertiary, var(--vscode-editorWidget-background, #1f2937));
    --muted-foreground:      var(--color-text-tertiary, var(--vscode-descriptionForeground, #9ca3af));

    --accent:                var(--color-background-ghost, var(--vscode-list-hoverBackground, #1e3a5f));
    --accent-foreground:     var(--color-text-info, var(--vscode-list-hoverForeground, #93c5fd));

    --destructive:           var(--color-background-danger, var(--vscode-errorForeground, #f87171));
    --destructive-foreground: var(--color-text-inverse, #09090b);

    --success:               var(--color-background-success, #4ade80);
    --success-foreground:    var(--color-text-inverse, #09090b);

    --warning:               var(--color-background-warning, #fbbf24);
    --warning-foreground:    var(--color-text-inverse, #09090b);

    --border:                var(--color-border-primary, var(--vscode-panel-border, #27272a));
    --input:                 var(--color-border-secondary, var(--vscode-input-background, #27272a));
    --ring:                  var(--color-ring-primary, var(--vscode-focusBorder, #60a5fa));
  }
}

/* Explicit dark override via data-theme attribute (standalone toggle only).
   Specificity (0,2,0) via :root[...] to beat the @media dark :root:not(...) rule.
   Static values only — NO host var references.
   In hosted mode (Claude/VS Code), data-theme is never set; the host's inline
   vars resolve through the var() chain in :root / @media-dark above.
   data-theme is only set by the standalone theme toggle button. */
:root[data-theme="dark"] {
  --background: #09090b;
  --foreground: #fafafa;

  --card: #111113;
  --card-foreground: #fafafa;

  --popover: #111113;
  --popover-foreground: #fafafa;

  --primary: #60a5fa;
  --primary-foreground: #09090b;

  --secondary: #1f2937;
  --secondary-foreground: #f3f4f6;

  --muted: #1f2937;
  --muted-foreground: #9ca3af;

  --accent: #1e3a5f;
  --accent-foreground: #93c5fd;

  --destructive: #f87171;
  --destructive-foreground: #09090b;

  --success: #4ade80;
  --success-foreground: #09090b;

  --warning: #fbbf24;
  --warning-foreground: #09090b;

  --border: #27272a;
  --input: #27272a;
  --ring: #60a5fa;
}

/* Explicit light override via data-theme attribute (standalone toggle only).
   Same specificity + static strategy as the dark block above. */
:root[data-theme="light"] {
  --background: #ffffff;
  --foreground: #09090b;

  --card: #ffffff;
  --card-foreground: #09090b;

  --popover: #ffffff;
  --popover-foreground: #09090b;

  --primary: #3b82f6;
  --primary-foreground: #ffffff;

  --secondary: #f3f4f6;
  --secondary-foreground: #1f2937;

  --muted: #f3f4f6;
  --muted-foreground: #6b7280;

  --accent: #eff6ff;
  --accent-foreground: #1e40af;

  --destructive: #ef4444;
  --destructive-foreground: #ffffff;

  --success: #22c55e;
  --success-foreground: #ffffff;

  --warning: #f59e0b;
  --warning-foreground: #ffffff;

  --border: #e5e7eb;
  --input: #e5e7eb;
  --ring: #3b82f6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

.pf-app-root {
  font-family: var(--font-sans);
  color: var(--foreground);
  background-color: var(--background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-column { display: flex; flex-direction: column; }
.pf-row    { display: flex; flex-direction: row; flex-wrap: wrap; }
.pf-grid   { display: grid; }

.pf-grid-item { min-width: 0; }
.pf-container { width: 100%; max-width: 1200px; margin: 0 auto; }
.pf-div  { display: block; }
.pf-span { display: inline; }
.pf-pages { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-heading { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
.pf-h1 { font-size: 2.25rem; line-height: 2.5rem; }
.pf-h2 { font-size: 1.875rem; line-height: 2.25rem; }
.pf-h3 { font-size: 1.5rem;  line-height: 2rem; }
.pf-h4 { font-size: 1.25rem; line-height: 1.75rem; }

.pf-text { }
.pf-p    { margin: 0; }
.pf-lead { font-size: 1.25rem; color: var(--muted-foreground); }
.pf-large { font-size: 1.125rem; font-weight: 600; }
.pf-small { font-size: 0.875rem; }
.pf-muted { color: var(--muted-foreground); font-size: 0.875rem; margin: 0; }

.pf-blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--border);
  font-style: italic;
  color: var(--muted-foreground);
}

.pf-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.pf-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.pf-link:hover { text-decoration-thickness: 2px; }

.pf-code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}

.pf-markdown { line-height: 1.7; }
.pf-markdown h1, .pf-markdown h2, .pf-markdown h3 { margin-top: 1.5em; margin-bottom: 0.5em; }
.pf-markdown p { margin: 0.75em 0; }
.pf-markdown code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--muted);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.pf-markdown pre code { background: none; padding: 0; }

.pf-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  min-width: 1.5em;
  padding: 0.15em 0.4em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--muted);
  box-shadow: 0 1px 0 var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pf-card-header  { padding: 1.5rem 1.5rem 0; }
.pf-card-content { padding: 1.5rem; }
.pf-card-footer  { padding: 0 1.5rem 1.5rem; display: flex; align-items: center; gap: 0.5rem; }

.pf-card-title       { margin: 0; font-size: 1.25rem; font-weight: 600; }
.pf-card-description { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. ALERT
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-alert {
  position: relative;
  padding: 1rem 1rem 1rem 3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pf-alert[data-variant="destructive"] {
  border-color: var(--destructive);
  color: var(--destructive);
}
.pf-alert-icon {
  position: absolute;
  left: 1rem;
  top: 1rem;
}
.pf-alert-title       { margin: 0; font-weight: 600; font-size: 0.875rem; }
.pf-alert-description { margin: 0.25rem 0 0; font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. BADGE
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.15em 0.6em;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.pf-badge[data-variant="default"]     { background: var(--primary); color: var(--primary-foreground); }
.pf-badge[data-variant="secondary"]   { background: var(--secondary); color: var(--secondary-foreground); }
.pf-badge[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
.pf-badge[data-variant="success"]     { background: var(--success); color: var(--success-foreground); }
.pf-badge[data-variant="warning"]     { background: var(--warning); color: var(--warning-foreground); }
.pf-badge[data-variant="outline"]     { background: transparent; border: 1px solid var(--border); color: var(--foreground); }

.pf-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DATA — Metric, Ring, Progress, Separator, Loader, Icon, Sparkline
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-metric       { display: flex; flex-direction: column; gap: 0.25rem; }
.pf-metric-label { font-size: 0.875rem; color: var(--muted-foreground); }
.pf-metric-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-metric-delta { font-size: 0.875rem; font-weight: 500; margin-left: 0.5rem; }
.pf-metric-desc  { font-size: 0.75rem; color: var(--muted-foreground); }

.pf-ring       { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.pf-ring-label { position: absolute; text-align: center; font-size: 0.875rem; font-weight: 600; }

.pf-progress {
  width: 100%;
  height: 0.5rem;
  background: var(--muted);
  border-radius: 9999px;
  overflow: hidden;
}
.pf-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.pf-separator {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.pf-loader {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--muted);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: pf-spin 0.6s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

.pf-icon { display: inline-flex; align-items: center; }

.pf-sparkline svg { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. DATATABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-datatable-wrapper { overflow-x: auto; }

.pf-datatable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.pf-datatable-th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.pf-datatable-td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.pf-datatable-search {
  width: 100%;
  max-width: 20rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--background);
  color: var(--foreground);
}
.pf-datatable-search:focus {
  outline: 2px solid var(--ring);
  outline-offset: -1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. TABLE (semantic HTML table)
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.pf-table-row { }
.pf-table-header {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
}
.pf-table-cell {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.pf-table-caption {
  caption-side: bottom;
  padding: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.pf-expandable-row { }
.pf-expandable-row-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.pf-expandable-arrow {
  display: inline-block;
  transition: transform 0.2s;
}
.pf-expandable-row-detail {
  padding-left: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. FORM
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-form { display: flex; flex-direction: column; gap: 1rem; }

.pf-input-wrapper, .pf-textarea-wrapper, .pf-select-wrapper, .pf-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pf-input-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.pf-input, .pf-textarea, .pf-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--background);
  color: var(--foreground);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pf-input:focus, .pf-textarea:focus, .pf-select:focus {
  outline: 2px solid var(--ring);
  outline-offset: -1px;
  border-color: var(--ring);
}
.pf-textarea { min-height: 5rem; resize: vertical; }

/* Buttons */
.pf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s;
  white-space: nowrap;
}
.pf-button:hover { opacity: 0.9; }
.pf-button:active { opacity: 0.8; }
.pf-button:disabled { opacity: 0.5; cursor: not-allowed; }

.pf-button[data-variant="default"]     { background: var(--primary); color: var(--primary-foreground); }
.pf-button[data-variant="secondary"]   { background: var(--secondary); color: var(--secondary-foreground); }
.pf-button[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
.pf-button[data-variant="ghost"]       { background: transparent; color: var(--foreground); }
.pf-button[data-variant="ghost"]:hover { background: var(--accent); }
.pf-button[data-variant="outline"]     { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
.pf-button[data-variant="outline"]:hover { background: var(--accent); }
.pf-button[data-variant="link"]        { background: transparent; color: var(--primary); text-decoration: underline; padding: 0; }

.pf-button-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Checkbox, Switch, Slider, Radio */
.pf-checkbox-wrapper, .pf-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.pf-checkbox, .pf-switch { accent-color: var(--primary); }

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

.pf-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.pf-radio-label { font-size: 0.875rem; }
.pf-radio-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Select separator */
.pf-select-group  { }
.pf-select-label  { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; padding: 0.25rem 0; }

/* Field */
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.pf-field-title       { font-size: 0.875rem; font-weight: 500; }
.pf-field-description { font-size: 0.75rem; color: var(--muted-foreground); }
.pf-field-content     { }
.pf-field-error       { font-size: 0.75rem; color: var(--destructive); }

/* Combobox */
.pf-combobox { position: relative; }
.pf-combobox-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--background);
  color: var(--foreground);
}
.pf-combobox-input:focus {
  outline: 2px solid var(--ring);
  outline-offset: -1px;
}
.pf-combobox-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 0.25rem;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  max-height: 15rem;
  overflow-y: auto;
}
.pf-combobox-option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.pf-combobox-option:hover { background: var(--accent); }
.pf-combobox-group { }
.pf-combobox-label { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; padding: 0.5rem 0.75rem 0.25rem; }

/* Calendar & DatePicker */
.pf-calendar {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-size: 0.875rem;
}
.pf-datepicker {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ChoiceCard */
.pf-choice-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.pf-choice-card:hover { border-color: var(--ring); }
.pf-choice-card-label       { font-weight: 500; }
.pf-choice-card-description { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   12. TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-tabs { }
.pf-tabs-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.pf-tab-trigger {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted-foreground);
  transition: color 0.15s, border-color 0.15s;
}
.pf-tab-trigger:hover { color: var(--foreground); }
.pf-tab-trigger[aria-selected="true"] {
  color: var(--foreground);
  border-bottom-color: var(--primary);
}
.pf-tab-panel { }
.pf-tab { }

/* ═══════════════════════════════════════════════════════════════════════════
   13. ACCORDION
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-accordion { display: flex; flex-direction: column; }
.pf-accordion-item { border-bottom: 1px solid var(--border); }
.pf-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--foreground);
}
.pf-accordion-trigger:hover { text-decoration: underline; }
.pf-accordion-content { padding-bottom: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. DIALOG
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-dialog-wrapper { }
.pf-dialog {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 32rem;
  width: 90vw;
}
.pf-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.pf-dialog-title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; }
.pf-dialog-desc  { margin: 0 0 1rem; color: var(--muted-foreground); font-size: 0.875rem; }
.pf-dialog-body  { }

/* ═══════════════════════════════════════════════════════════════════════════
   15. POPOVER, TOOLTIP, HOVER CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-popover { position: relative; display: inline-block; }
.pf-popover-content {
  position: absolute;
  z-index: 50;
  min-width: 12rem;
  padding: 1rem;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.pf-popover-title { font-weight: 600; margin-bottom: 0.5rem; }

.pf-tooltip { position: relative; display: inline-block; }
.pf-tooltip-content {
  position: absolute;
  z-index: 50;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--foreground);
  color: var(--background);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
}

.pf-hover-card { position: relative; display: inline-block; }
.pf-hover-card-content {
  position: absolute;
  z-index: 50;
  min-width: 16rem;
  padding: 1rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. CAROUSEL
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-carousel { position: relative; overflow: hidden; }
.pf-carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}
.pf-carousel-track > * { flex: 0 0 100%; min-width: 0; }

.pf-carousel-prev,
.pf-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  font-size: 1rem;
}
.pf-carousel-prev { left: 0.5rem; }
.pf-carousel-next { right: 0.5rem; }
.pf-carousel-prev:hover,
.pf-carousel-next:hover { background: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   17. CHARTS
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-chart { position: relative; }
.pf-chart svg { display: block; width: 100%; height: auto; }

.pf-chart-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  background: var(--popover, #fff);
  color: var(--popover-foreground, #09090b);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 0.375rem);
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.pf-chart-tooltip.pf-visible { opacity: 1; }
.pf-chart-tooltip-label { font-weight: 500; margin-bottom: 0.125rem; }
.pf-chart-tooltip-row { display: flex; align-items: center; gap: 0.375rem; }
.pf-chart-tooltip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.pf-chart-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.75rem; }
.pf-chart-legend-item { display: flex; align-items: center; gap: 0.375rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   18. MEDIA
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-image { max-width: 100%; height: auto; display: block; }
.pf-audio { width: 100%; }
.pf-video { max-width: 100%; height: auto; display: block; }
.pf-embed { position: relative; overflow: hidden; }
.pf-embed iframe { border: none; }
.pf-svg { display: inline-block; }
.pf-mermaid { overflow-x: auto; }

.pf-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: border-color 0.15s;
}
.pf-dropzone:hover, .pf-dropzone.pf-dropzone--active {
  border-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-toast {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  max-width: 24rem;
}
.pf-toast--success {
  border-color: var(--success, #22c55e);
  background: color-mix(in srgb, var(--success, #22c55e) 10%, var(--card));
}
.pf-toast--error {
  border-color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 10%, var(--card));
}
.pf-toast--warning {
  border-color: var(--warning, #f59e0b);
  background: color-mix(in srgb, var(--warning, #f59e0b) 10%, var(--card));
}
.pf-toast--info {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. UTILITY — Tailwind-compatible helpers for cssClass
   ═══════════════════════════════════════════════════════════════════════════
   All classes used by auto-renderers and builders are defined here so the
   bundle works without Tailwind.  The scale mirrors Tailwind's default
   spacing (1 unit = 0.25rem) and typography tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Display ──────────────────────────────────────────────────────────────── */

.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* ── Flexbox ──────────────────────────────────────────────────────────────── */

.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1 1 0%; }
.flex-auto    { flex: 1 1 auto; }
.flex-none    { flex: none; }
.grow         { flex-grow: 1; }
.grow-0       { flex-grow: 0; }
.shrink       { flex-shrink: 1; }
.shrink-0     { flex-shrink: 0; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* ── Gap ──────────────────────────────────────────────────────────────────── */

.gap-0  { gap: 0;       } .gap-0\.5 { gap: 0.125rem; }
.gap-1  { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; }
.gap-2  { gap: 0.5rem;  } .gap-2\.5 { gap: 0.625rem; }
.gap-3  { gap: 0.75rem; } .gap-4    { gap: 1rem;     }
.gap-5  { gap: 1.25rem; } .gap-6    { gap: 1.5rem;   }
.gap-8  { gap: 2rem;    } .gap-10   { gap: 2.5rem;   }
.gap-12 { gap: 3rem;    } .gap-16   { gap: 4rem;     }

/* ── Padding ──────────────────────────────────────────────────────────────── */

.p-0  { padding: 0;       } .p-0\.5 { padding: 0.125rem; }
.p-1  { padding: 0.25rem; } .p-1\.5 { padding: 0.375rem; }
.p-2  { padding: 0.5rem;  } .p-2\.5 { padding: 0.625rem; }
.p-3  { padding: 0.75rem; } .p-4    { padding: 1rem;     }
.p-5  { padding: 1.25rem; } .p-6    { padding: 1.5rem;   }
.p-8  { padding: 2rem;    } .p-10   { padding: 2.5rem;   }

.px-0  { padding-left: 0;       padding-right: 0;       }
.px-1  { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2  { padding-left: 0.5rem;  padding-right: 0.5rem;  }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem;    padding-right: 1rem;    }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem;  }
.px-8  { padding-left: 2rem;    padding-right: 2rem;    }

.py-0  { padding-top: 0;       padding-bottom: 0;       }
.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2  { padding-top: 0.5rem;  padding-bottom: 0.5rem;  }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;    padding-bottom: 1rem;    }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6  { padding-top: 1.5rem;  padding-bottom: 1.5rem;  }
.py-8  { padding-top: 2rem;    padding-bottom: 2rem;    }

.pt-0  { padding-top: 0;       } .pt-1  { padding-top: 0.25rem; }
.pt-2  { padding-top: 0.5rem;  } .pt-3  { padding-top: 0.75rem; }
.pt-4  { padding-top: 1rem;    } .pt-6  { padding-top: 1.5rem;  }
.pt-8  { padding-top: 2rem;    }

.pb-0  { padding-bottom: 0;       } .pb-1  { padding-bottom: 0.25rem; }
.pb-2  { padding-bottom: 0.5rem;  } .pb-3  { padding-bottom: 0.75rem; }
.pb-4  { padding-bottom: 1rem;    } .pb-6  { padding-bottom: 1.5rem;  }
.pb-8  { padding-bottom: 2rem;    }

.pl-0  { padding-left: 0;       } .pl-2  { padding-left: 0.5rem;  }
.pl-4  { padding-left: 1rem;    } .pl-6  { padding-left: 1.5rem;  }

.pr-0  { padding-right: 0;       } .pr-2  { padding-right: 0.5rem;  }
.pr-4  { padding-right: 1rem;    } .pr-6  { padding-right: 1.5rem;  }

/* ── Margin ───────────────────────────────────────────────────────────────── */

.m-0    { margin: 0;       } .m-1    { margin: 0.25rem; }
.m-2    { margin: 0.5rem;  } .m-4    { margin: 1rem;    }
.m-auto { margin: auto;    }

.mx-0    { margin-left: 0;       margin-right: 0;       }
.mx-2    { margin-left: 0.5rem;  margin-right: 0.5rem;  }
.mx-4    { margin-left: 1rem;    margin-right: 1rem;    }
.mx-auto { margin-left: auto;    margin-right: auto;    }

.my-0  { margin-top: 0;       margin-bottom: 0;       }
.my-2  { margin-top: 0.5rem;  margin-bottom: 0.5rem;  }
.my-4  { margin-top: 1rem;    margin-bottom: 1rem;    }

.mt-0    { margin-top: 0;        } .mt-1    { margin-top: 0.25rem;  }
.mt-1\.5 { margin-top: 0.375rem; } .mt-2    { margin-top: 0.5rem;   }
.mt-3    { margin-top: 0.75rem;  } .mt-4    { margin-top: 1rem;     }
.mt-6    { margin-top: 1.5rem;   } .mt-8    { margin-top: 2rem;     }
.mt-auto { margin-top: auto;     }

.mb-0  { margin-bottom: 0;       } .mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem;  } .mb-4  { margin-bottom: 1rem;    }
.mb-6  { margin-bottom: 1.5rem;  } .mb-8  { margin-bottom: 2rem;    }

.ml-0    { margin-left: 0;       } .ml-2    { margin-left: 0.5rem;  }
.ml-4    { margin-left: 1rem;    } .ml-auto { margin-left: auto;    }

.mr-0    { margin-right: 0;       } .mr-2    { margin-right: 0.5rem;  }
.mr-4    { margin-right: 1rem;    } .mr-auto { margin-right: auto;    }

/* ── Width ────────────────────────────────────────────────────────────────── */

.w-0     { width: 0;      } .w-4     { width: 1rem;    }
.w-8     { width: 2rem;   } .w-10    { width: 2.5rem;  }
.w-12    { width: 3rem;   } .w-16    { width: 4rem;    }
.w-20    { width: 5rem;   } .w-24    { width: 6rem;    }
.w-28    { width: 7rem;   } .w-32    { width: 8rem;    }
.w-40    { width: 10rem;  } .w-48    { width: 12rem;   }
.w-56    { width: 14rem;  } .w-64    { width: 16rem;   }
.w-full  { width: 100%;   } .w-screen { width: 100vw; }
.w-auto  { width: auto;   } .w-fit   { width: fit-content; }
.min-w-0 { min-width: 0;  } .min-w-full { min-width: 100%; }

/* ── Height ───────────────────────────────────────────────────────────────── */

.h-0     { height: 0;      } .h-1     { height: 0.25rem; }
.h-2     { height: 0.5rem; } .h-3     { height: 0.75rem; }
.h-4     { height: 1rem;   } .h-6     { height: 1.5rem;  }
.h-8     { height: 2rem;   } .h-10    { height: 2.5rem;  }
.h-12    { height: 3rem;   } .h-16    { height: 4rem;    }
.h-20    { height: 5rem;   } .h-24    { height: 6rem;    }
.h-32    { height: 8rem;   } .h-40    { height: 10rem;   }
.h-48    { height: 12rem;  } .h-64    { height: 16rem;   }
.h-full  { height: 100%;   } .h-screen { height: 100vh; }
.h-auto  { height: auto;   } .h-fit   { height: fit-content; }
.min-h-0 { min-height: 0;  } .min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-h-48  { max-height: 12rem; } .max-h-64  { max-height: 16rem; }
.max-h-80  { max-height: 20rem; } .max-h-96  { max-height: 24rem; }
.max-h-full { max-height: 100%; } .max-h-screen { max-height: 100vh; }
.max-h-none { max-height: none; }

/* ── Max-Width ────────────────────────────────────────────────────────────── */

.max-w-xs   { max-width: 20rem; } .max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; } .max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; } .max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; } .max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; } .max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; } .max-w-full { max-width: 100%;  }
.max-w-prose { max-width: 65ch; } .max-w-none { max-width: none;  }

/* ── Typography ───────────────────────────────────────────────────────────── */

.text-xs   { font-size: 0.75rem;  line-height: 1rem;    }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem;  }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem;    }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem;  }

.font-thin       { font-weight: 100; }
.font-light      { font-weight: 300; }
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }

.italic     { font-style: italic; }
.not-italic { font-style: normal; }

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }

.leading-none   { line-height: 1;      }
.leading-tight  { line-height: 1.25;   }
.leading-snug   { line-height: 1.375;  }
.leading-normal { line-height: 1.5;    }
.leading-relaxed { line-height: 1.625; }
.leading-loose  { line-height: 2;      }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0;        }
.tracking-wide   { letter-spacing: 0.025em;  }

.tabular-nums { font-variant-numeric: tabular-nums; }
.font-mono    { font-family: var(--font-mono); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre    { white-space: pre;    }

/* ── Theme-Aware Text Colors ──────────────────────────────────────────────── */

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

/* ── Theme-Aware Background Colors ────────────────────────────────────────── */

.bg-background  { background-color: var(--background); }
.bg-card        { background-color: var(--card); }
.bg-muted       { background-color: var(--muted); }
.bg-primary     { background-color: var(--primary); }
.bg-secondary   { background-color: var(--secondary); }
.bg-accent      { background-color: var(--accent); }
.bg-destructive { background-color: var(--destructive); }
.bg-success     { background-color: var(--success); }
.bg-warning     { background-color: var(--warning); }
.bg-transparent { background-color: transparent; }

/* ── Borders ──────────────────────────────────────────────────────────────── */

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

.rounded       { border-radius: var(--radius); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-lg    { border-radius: calc(var(--radius) + 2px); }
.rounded-xl    { border-radius: calc(var(--radius) + 4px); }
.rounded-2xl   { border-radius: calc(var(--radius) + 8px); }
.rounded-full  { border-radius: 9999px; }
.rounded-none  { border-radius: 0; }

/* ── Shadows ──────────────────────────────────────────────────────────────── */

.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* ── Overflow ─────────────────────────────────────────────────────────────── */

.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto;   }
.overflow-scroll  { overflow: scroll; }
.overflow-visible { overflow: visible; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }

/* ── Position ─────────────────────────────────────────────────────────────── */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed;    }
.sticky   { position: sticky; top: 0; }

.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0;    } .right-0  { right: 0;  }
.bottom-0 { bottom: 0; } .left-0   { left: 0;   }

/* ── Z-Index ──────────────────────────────────────────────────────────────── */

.z-0   { z-index: 0;   } .z-10  { z-index: 10;  }
.z-20  { z-index: 20;  } .z-30  { z-index: 30;  }
.z-40  { z-index: 40;  } .z-50  { z-index: 50;  }

/* ── Opacity ──────────────────────────────────────────────────────────────── */

.opacity-0   { opacity: 0;   } .opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; } .opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1;   }

/* ── Cursor ───────────────────────────────────────────────────────────────── */

.cursor-pointer     { cursor: pointer;     }
.cursor-default     { cursor: default;     }
.cursor-not-allowed { cursor: not-allowed; }

/* ── Pointer Events ───────────────────────────────────────────────────────── */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ── User Select ──────────────────────────────────────────────────────────── */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all;  }

/* ── Transitions ──────────────────────────────────────────────────────────── */

.transition      { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all  { transition-property: all;     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-none { transition-property: none; }
.duration-75  { transition-duration: 75ms;  }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* ── Screen Reader ────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border-width: 0;
}