/*
 * Koder Design — UI style preset rules
 *
 * Source: ~/temp/koder-ui-style-previews.html (2026-05-09 prototype, ratified
 * as the visual reference of design-RFC-001). Only `.preset.*` selectors
 * are kept here; page chrome lives in base.css. Each preset declares its
 * own CSS custom properties on `.preset.<slug>` and the inner cards read
 * them via `var(--…)` with light-theme defaults.
 *
 * Stage container forces a light backdrop so previews render the same
 * regardless of the surrounding page theme.
 */
.stage,
.stage-large {
  background: linear-gradient(180deg, #f5f5f5, #ececec);
  padding: 20px;
  border-radius: 8px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-large { padding: 40px; min-height: 360px; }

/* KDS-022 (2026-05-13) — side-by-side compare mode for preset detail
   pages. In default mode (.compare-active absent), only the
   [data-stage-mode] matching the global theme is shown. When the user
   activates compare mode, both light and dark instances render
   side-by-side at ≥ 768px (stack vertically below per
   specs/web-apps/responsiveness.kmd). */
.stage [data-stage-mode] { display: none; }
:root:not([data-theme="dark"]) .stage [data-stage-mode="light"],
:root[data-theme="dark"] .stage [data-stage-mode="dark"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.uistyle-detail-page.compare-active .stage,
.uistyle-detail-page.compare-active .stage-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--kdr-surface, #f5f5f5);
}
.uistyle-detail-page.compare-active .stage [data-stage-mode],
.uistyle-detail-page.compare-active .stage-large [data-stage-mode] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(180deg, #f5f5f5, #ececec);
  border-radius: 6px;
  position: relative;
}
.uistyle-detail-page.compare-active .stage [data-stage-mode="dark"],
.uistyle-detail-page.compare-active .stage-large [data-stage-mode="dark"] {
  background: linear-gradient(180deg, #1a1c20, #0d0f12);
}
.uistyle-detail-page.compare-active .stage [data-stage-mode]::before,
.uistyle-detail-page.compare-active .stage-large [data-stage-mode]::before {
  content: attr(data-stage-label);
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-family: var(--kds-font-mono, monospace);
}
.uistyle-detail-page.compare-active .stage [data-stage-mode="dark"]::before,
.uistyle-detail-page.compare-active .stage-large [data-stage-mode="dark"]::before {
  color: #f1f5f9;
}
.uistyle-detail-page.compare-active .stage [data-stage-mode="light"]::before,
.uistyle-detail-page.compare-active .stage-large [data-stage-mode="light"]::before {
  color: #0f172a;
}
/* Mobile stack — per responsiveness.kmd, side-by-side is desktop-only. */
@media (max-width: 768px) {
  .uistyle-detail-page.compare-active .stage,
  .uistyle-detail-page.compare-active .stage-large {
    grid-template-columns: 1fr;
  }
}

.compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--kdr-surface);
  color: var(--kdr-text);
  border: 1px solid var(--kdr-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.compare-toggle:hover,
.compare-toggle:focus-visible {
  background: var(--kdr-surface-2);
  border-color: var(--kdr-accent);
}
.compare-toggle[aria-pressed="true"] {
  background: var(--kdr-accent, #6366f1);
  color: #fff;
  border-color: var(--kdr-accent, #6366f1);
}

/* KDS-022 follow-up (2026-05-13) — fallback dark variant pra side-by-side
   compare mode. Cada `.preset.<slug>` define apenas tokens light hoje
   (`--bg`, `--surface`, `--on-surface`, `--label-color`). Sem essa
   regra, o painel ESCURO renderiza idêntico ao CLARO pra qualquer
   preset que ainda não tem dark artesanal — quebrando o propósito
   visual do side-by-side.
   Esse fallback aplica defaults dark sensatos a `.preset.themed-dark`
   sem slug, e fica abaixo na cascata pra que presets que definirem
   `.preset.themed-dark.<slug>` artesanal sobrescrevam. Ticket de
   acompanhamento: tools/design-gen/backlog/pending/NNN-preset-dark-variants. */
/* Default light color-scheme for every preset preview, so native form
   controls (input/textarea/select/scrollbar) follow the preset's mode
   instead of bleeding the OS theme through Chrome's UA stylesheet —
   same fix base.css uses on the settings rail (see ~line 4424). The
   .themed-dark override below switches it to dark when Mode is dark. */
.preset { color-scheme: light; }

/* Nota: o seletor `.themed-dark.preset` (em vez de `.preset.themed-dark`)
   é proposital. O `css_split.go::SplitPresetsCSS` faz match em
   `\.preset\.([a-z0-9_]+)` pra atribuir cada regra a um chunk per-slug.
   O regex pega `themed` (parando no hyphen) e cria phantom chunk
   `themed.css`. Como esta regra é fallback genérico (sem slug), o
   correto é mantê-la no `presets-core.css`. Reordenar o seletor escapa
   o regex sem mudar a semântica CSS (especificidade idêntica). Bug do
   splitter tratado separadamente em ticket dedicado. */
.themed-dark.preset {
  /* color-scheme tells the browser's UA stylesheet what theme native
     form controls (<input>, <textarea>, <select>, scrollbars) should
     render in. Without this, OS dark mode leaks dark UA defaults into
     light-preset previews regardless of our explicit `background` rules
     — see base.css line ~4424 for the same fix on the settings rail. */
  color-scheme: dark;
  /* 2026-05-13 (segunda iteração): owner reportou que o form-card
     "se misturava" com o stage outer. Stage dark gradient #1a1c20→
     #0d0f12 (média ~#141618) era quase idêntico ao card bg #14171c.
     Bumped --bg pra #22272e (card pops ~8% mais claro que stage),
     adicionado border + shadow mais fortes pra contorno visível. */
  --bg: #1a1f26;
  --surface: #22272e;
  --surface-2: #131619;
  --on-surface: #f1f1f4;
  --label-color: #b9bcc4;
  --input-border: 1px solid #3a4048;
  --btn-secondary-bg: #2a2f37;
  --btn-secondary-fg: #f1f1f4;
  --btn-secondary-border: 1px solid #3a4048;
  --btn-secondary-hover: #353b44;
  --shadow-form: 0 2px 8px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* Fallback genérico precisa sobrescrever regras per-preset que usam
   cores hardcoded (e.g., `.preset.notion input:focus { background:
   #F7F6F3 }` — light value que vence sobre as CSS vars do fallback).
   Por isso `!important` aqui é necessário até cada preset ter artesanal
   dark via ticket #007. Sem isso, inputs renderizam dark bg + dark text
   (texto invisível) em presets de cores fortes. */
.themed-dark.preset input,
.themed-dark.preset textarea,
.themed-dark.preset select {
  background: #131619 !important;
  color: #f1f1f4 !important;
  border-color: #2a2f37 !important;
}
.themed-dark.preset input:focus,
.themed-dark.preset textarea:focus,
.themed-dark.preset select:focus {
  background: #131619 !important;
  color: #f1f1f4 !important;
}
.themed-dark.preset .form-card {
  background: #1a1f26 !important;
  color: #f1f1f4 !important;
  border: 1px solid #2a2f37 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.themed-dark.preset .form-title,
.themed-dark.preset label,
.themed-dark.preset label > span {
  color: #f1f1f4 !important;
}
.themed-dark.preset .btn-secondary {
  background: #2a2f37 !important;
  color: #f1f1f4 !important;
  border-color: #3a4048 !important;
}
.themed-dark.preset .btn-secondary:hover {
  background: #353b44 !important;
}

/* ─── Style builder (#008.10-11) ─── */
/* Page chrome */
.sb-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.sb-header-left h1 { margin: 0 0 4px; font-size: 1.5rem; }
.sb-lede { margin: 0; color: var(--text-muted, #666); font-size: 0.95rem; }
.sb-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-mode-label { font-size: 0.85rem; color: var(--text-muted, #666); }

/* Buttons */
.sb-mode-btn, .sb-action-btn {
  padding: 5px 12px; border-radius: 6px;
  /* surface-2 gives ~3 steps of contrast against --kdr-bg in dark mode
     where --kdr-surface is too close to bg (#14171c vs #0d0f12). */
  border: 1px solid color-mix(in srgb, var(--kdr-text) 25%, transparent);
  background: var(--kdr-surface-2); color: var(--kdr-text);
  cursor: pointer; font-size: 0.82rem; transition: background 0.15s;
}
.sb-mode-btn:hover, .sb-action-btn:hover { background: color-mix(in srgb, var(--kdr-text) 10%, transparent); }
.sb-mode-btn[aria-pressed="true"] { background: var(--kdr-accent, #3584E4); color: #fff; border-color: transparent; }
.sb-action-btn--danger { border-color: color-mix(in srgb, #e01b24 35%, transparent); color: #e01b24; }
.sb-action-btn--danger:hover { background: color-mix(in srgb, #e01b24 12%, transparent); }
/* Disabled glyphs (undo/redo) need enough alpha to stay readable in
   dark mode against --kdr-surface-2 — 0.4 was too faint. */
.sb-action-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Flash message */
.sb-flash { position: fixed; bottom: 24px; right: 24px; background: #2e3436; color: #fff;
  padding: 8px 16px; border-radius: 8px; font-size: 0.88rem; z-index: 9999;
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.sb-flash--visible { opacity: 1; transform: none; }

/* 2-col layout */
.sb-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; margin-bottom: 24px; }
@media (max-width: 860px) { .sb-layout { grid-template-columns: 1fr; } }

/* Editor panel (left) — uses page chrome vars so dark mode works
   even outside a .preset.<name> scope where --surface is defined. */
.sb-editor { background: var(--kdr-surface); color: var(--kdr-text);
  border: 1px solid color-mix(in srgb, var(--kdr-text) 12%, transparent);
  border-radius: 10px; overflow: hidden; }
.sb-editor-header { padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--kdr-text) 12%, transparent); }
.sb-tab-bar { display: flex; }
.sb-tab { flex: 1; padding: 10px 4px; border: none; background: none; cursor: pointer;
  font-size: 0.8rem; font-weight: 500; color: var(--kdr-text-muted); transition: color 0.15s;
  border-bottom: 2px solid transparent; }
.sb-tab[aria-selected="true"] { color: var(--kdr-accent, #3584E4); border-bottom-color: var(--kdr-accent, #3584E4); background: color-mix(in srgb, var(--kdr-accent, #3584E4) 8%, transparent); }
.sb-editor-panel { padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; }

/* Token rows */
.sb-token-row { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.sb-row-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--kdr-text) 18%, transparent); flex-shrink: 0; }
.sb-row-dot--changed { background: var(--kdr-accent, #3584E4); }
.sb-token-label { font-size: 0.78rem; color: var(--kdr-text-muted); min-width: 110px; flex-shrink: 0; }
.sb-color-inputs { display: flex; align-items: center; gap: 6px; flex: 1; }
.sb-color-swatch { width: 30px; height: 30px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); cursor: pointer; padding: 2px; flex-shrink: 0; }
.sb-hex-input { width: 76px; font-size: 0.78rem; font-family: monospace; padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); border-radius: 4px;
  background: var(--kdr-bg); color: var(--kdr-text); }
.sb-range-inputs { display: flex; align-items: center; gap: 6px; flex: 1; }
.sb-range { flex: 1; accent-color: var(--kdr-accent, #3584E4); }
.sb-range-val { font-size: 0.78rem; font-family: monospace; min-width: 36px; color: var(--kdr-text-muted); }
.sb-font-inputs { display: flex; align-items: center; gap: 6px; flex: 1; }
.sb-font-select { flex: 1; font-size: 0.8rem; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); border-radius: 4px; background: var(--kdr-bg); color: var(--kdr-text); }
.sb-reset-token { padding: 2px 6px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--kdr-text) 15%, transparent);
  background: none; cursor: pointer; font-size: 0.75rem; color: var(--kdr-text-muted); }
.sb-reset-token:hover:not(:disabled) { background: color-mix(in srgb, var(--kdr-text) 6%, transparent); }
.sb-reset-token:disabled { opacity: 0.3; cursor: default; }

/* Diff panel */
.sb-diff-section { border-top: 1px solid color-mix(in srgb, var(--kdr-text) 12%, transparent); padding: 10px 12px; }
.sb-diff-section summary { font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--kdr-text); }
.sb-diff { margin: 8px 0 0; font-size: 0.75rem; font-family: monospace; white-space: pre-wrap;
  color: var(--kdr-text-muted); line-height: 1.5; max-height: 160px; overflow-y: auto; }

/* Preview area (right) */
.sb-preview-area { background: #eee; border-radius: 10px; overflow: hidden; }
[data-theme="dark"] .sb-preview-area, .themed-dark .sb-preview-area { background: #1a1a1a; }
.sb-preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: color-mix(in srgb, var(--kdr-text) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--kdr-text) 10%, transparent); color: var(--kdr-text); flex-wrap: wrap; gap: 8px; }
.sb-preview-label { font-size: 0.8rem; font-weight: 600; color: var(--kdr-text-muted); }
.sb-preset-name-group { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.sb-preset-name-input { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); border-radius: 4px; font-size: 0.8rem; font-family: monospace; width: 140px; background: var(--kdr-bg); color: var(--kdr-text); }

/* Preview card itself — picks up the active preset's --bg so the form
   content sits on the preset surface, not the page chrome stage. */
.sb-preview { padding: 20px; min-height: 360px;
  background: var(--bg); color: var(--on-surface);
  transition: background 0.2s, color 0.2s; }
.sb-preview-inner { display: flex; flex-direction: column; gap: 20px; }
.sb-components { display: flex; flex-direction: column; gap: 10px; }
.sb-component-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* ─── Preview form classes (.form-wrap / .field / .field-label / etc.) ───
   The interactive form preview emits markup with these classes; without
   their own rules, labels and the wrapper rendered against whatever bg
   bled through from .sb-preview-area, which in App-Light + Mode-Dark
   left the dark preset's --label-color (#cccccc) painting onto the
   light page-chrome stage — invisible. Bind each piece to the
   preset's tokens. */
.sb-preview .form-wrap {
  display: flex; flex-direction: column; gap: var(--gap-field, 10px);
  background: var(--surface, #fff); color: var(--on-surface, #111);
  border: 1px solid color-mix(in srgb, var(--on-surface, #000) 12%, transparent);
  border-radius: var(--radius-lg, 12px);
  padding: var(--pad-form, 24px);
  box-shadow: var(--shadow-form, 0 1px 3px rgba(0,0,0,0.08));
  max-width: 480px;
}
.sb-preview .form-wrap h2 {
  margin: 0 0 calc(var(--gap-title, 14px) - 4px);
  font-size: 1.25rem; font-weight: 600;
  color: var(--on-surface, #111);
}
.sb-preview .fieldset-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-field, 10px); }
@media (max-width: 600px) { .sb-preview .fieldset-group { grid-template-columns: 1fr; } }
.sb-preview .field { display: flex; flex-direction: column; gap: 4px; }
.sb-preview .field-label {
  font-size: var(--font-size-label, 12px);
  font-weight: var(--font-weight-label, 500);
  color: var(--label-color, #5e6772);
  letter-spacing: var(--letter-label, normal);
}
.sb-preview .field-label.checkbox-label {
  flex-direction: row; align-items: center; gap: 8px;
  display: inline-flex; cursor: pointer;
}
.sb-preview .field-error {
  font-size: 0.78rem; color: var(--error, #e01b24); margin-top: 2px;
}
.sb-preview .field .input.input--error { border-color: var(--error, #e01b24); }
.sb-preview .form-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Export section */
.sb-export { margin-bottom: 24px; }
.sb-export h2 { font-size: 1.1rem; margin-bottom: 12px; }
.sb-export-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
@media (max-width: 720px) { .sb-export-tabs { grid-template-columns: 1fr; } }
.sb-export-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sb-export-col-label { font-weight: 600; font-size: 0.88rem; font-family: monospace; }
.sb-export-textarea { width: 100%; font-family: monospace; font-size: 0.78rem; padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kdr-text) 20%, transparent); border-radius: 8px;
  background: var(--kdr-surface); color: var(--kdr-text);
  resize: vertical; line-height: 1.5; }
.sb-export-actions { display: flex; gap: 8px; }

/* Import section */
.sb-import { margin-bottom: 32px; }
.sb-import h2 { font-size: 1.1rem; margin-bottom: 6px; }
.sb-import-lede { font-size: 0.88rem; color: var(--kdr-text-muted); margin-bottom: 8px; }
.sb-import-submit { margin-top: 8px; }

/* ─── Surface showcase (#008.9) ─── */
/* Tab bar */
.surface-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--kdr-border, rgba(0,0,0,0.10));
  margin-bottom: 20px;
}
.surface-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kdr-text-secondary, #666);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s;
}
.surface-tab:hover { color: var(--kdr-accent, #6750A4); }
.surface-tab.active {
  color: var(--kdr-accent, #6750A4);
  border-bottom-color: var(--kdr-accent, #6750A4);
  font-weight: 600;
}
/* Panels */
.surface-panel { display: none; }
.surface-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .surface-panel.active { grid-template-columns: 1fr; } }

/* Device frame inside each panel */
.surface-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--kdr-border, rgba(0,0,0,0.12));
  background: var(--kdr-surface, #fff);
}
.surface-frame-bar {
  background: var(--kdr-surface-2, #f5f5f5);
  border-bottom: 1px solid var(--kdr-border, rgba(0,0,0,0.08));
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kdr-text-secondary, #888);
  display: flex;
  align-items: center;
  gap: 6px;
}
.surface-frame-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kdr-accent, #6750A4); opacity: 0.5;
}
.surface-frame-body { padding: 16px; }

/* Rules aside */
.surface-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.surface-rules h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kdr-text-secondary, #888);
  margin: 0 0 4px;
}
.surface-rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--kdr-text, #333);
}
.surface-rule-icon {
  font-size: 15px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* ── Mobile surface density ── */
.preset.surface-mobile .btn-primary,
.preset.surface-mobile .btn-secondary {
  min-height: 44px;
  padding: 0 22px;
  font-size: 15px;
}
.preset.surface-mobile input {
  min-height: 44px;
  font-size: 16px;
  padding: 0 14px;
}
.preset.surface-mobile .form-card {
  border-radius: var(--radius-lg, 12px);
}
.preset.surface-mobile .actions {
  flex-direction: column;
  gap: 10px;
}
.preset.surface-mobile .actions .btn-primary,
.preset.surface-mobile .actions .btn-secondary {
  width: 100%;
  justify-content: center;
}

/* ── Desktop surface density ── */
.preset.surface-desktop .btn-primary,
.preset.surface-desktop .btn-secondary {
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
}
.preset.surface-desktop input {
  min-height: 28px;
  font-size: 12px;
  padding: 0 8px;
}
.preset.surface-desktop .form-card {
  padding: 16px;
  border-radius: var(--radius-md, 6px);
  max-width: 380px;
}
.preset.surface-desktop label { font-size: 11px; }
.preset.surface-desktop .form-title { font-size: 15px; }
.preset.surface-desktop .shortcut {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--kdr-border, rgba(0,0,0,0.15));
  border-radius: 3px;
  font-family: var(--kds-font-mono, monospace);
  opacity: 0.7;
  margin-left: 4px;
}

/* ── Web surface density ── */
.preset.surface-web .btn-primary,
.preset.surface-web .btn-secondary {
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}
.preset.surface-web input {
  min-height: 36px;
  font-size: 14px;
}
.preset.surface-web .fieldset-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 480px) { .preset.surface-web .fieldset-group { grid-template-columns: 1fr; } }

/* ── TV surface density ── */
.preset.surface-tv .btn-primary,
.preset.surface-tv .btn-secondary {
  min-height: 56px;
  padding: 0 32px;
  font-size: 18px;
  border-radius: var(--radius-tv, 8px);
}
.preset.surface-tv .btn-primary:focus-visible,
.preset.surface-tv .btn-secondary:focus-visible,
.preset.surface-tv input:focus-visible {
  outline: 4px solid var(--accent, #6750A4);
  outline-offset: 3px;
}
.preset.surface-tv input {
  min-height: 56px;
  font-size: 18px;
  padding: 0 18px;
}
.preset.surface-tv .form-card {
  padding: 32px;
  border-radius: var(--radius-lg, 16px);
  max-width: 520px;
}
.preset.surface-tv label { font-size: 16px; }
.preset.surface-tv .form-title { font-size: 24px; }
.preset.surface-tv .dpay-hint {
  font-size: 12px;
  color: var(--label-color, #888);
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Fix label overlap (2026-05-13): em listing page o form-card é menor
   e fica próximo do topo do panel, sobrepondo o label absoluto
   (CLARO/ESCURO). Aumentar padding-top do panel pra que o form fique
   abaixo da zona reservada pro label. Padding-bottom igual ao top
   pra simetria visual (owner reportou 2026-05-13 19:30). */
.uistyle-detail-page.compare-active .stage [data-stage-mode],
.uistyle-detail-page.compare-active .stage-large [data-stage-mode] {
  padding-top: 32px;
  padding-bottom: 32px;
}

.preset .form-card {
  font-family: var(--font, 'Inter', sans-serif);
  background: var(--bg, #fff);
  color: var(--on-surface, #111);
  border-radius: var(--radius-lg, 12px);
  padding: var(--pad-form, 24px);
  box-shadow: var(--shadow-form, 0 4px 16px rgba(0,0,0,0.1));
  border: var(--border-form, none);
  width: 100%;
  max-width: 440px;
}
.preset .form-title {
  margin: 0 0 var(--gap-title, 20px);
  font-size: var(--font-size-title, 18px);
  font-weight: var(--font-weight-title, 600);
  letter-spacing: var(--letter-title, normal);
  color: var(--on-surface, #111);
}
.preset label {
  display: block;
  font-size: var(--font-size-label, 12px);
  font-weight: var(--font-weight-label, 500);
  color: var(--label-color, #555);
  margin-bottom: var(--gap-label, 6px);
  letter-spacing: var(--letter-label, normal);
  text-transform: var(--label-case, none);
}
.preset input {
  width: 100%;
  padding: var(--pad-y, 10px) var(--pad-x, 12px);
  font-family: inherit;
  font-size: var(--font-size-input, 14px);
  background: var(--surface, #fff);
  color: var(--on-surface, #111);
  border: var(--input-border, 1px solid #ccc);
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--gap-field, 14px);
  outline: none;
  transition: var(--motion, 150ms ease);
  box-shadow: var(--input-shadow, none);
}
.preset input:focus {
  border-color: var(--accent, #6750A4);
  box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent));
}
.preset .row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--row-gap, 12px);
}
.preset .actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: var(--gap-actions, 16px);
}
.preset button {
  padding: var(--pad-btn-y, 8px) var(--pad-btn-x, 20px);
  font-family: inherit;
  font-size: var(--font-size-btn, 14px);
  font-weight: var(--font-weight-btn, 500);
  border-radius: var(--radius-btn, var(--radius-md, 6px));
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--motion, 150ms ease);
  letter-spacing: var(--letter-btn, normal);
  text-transform: var(--btn-case, none);
}
.preset .btn-secondary {
  background: var(--btn-secondary-bg, transparent);
  color: var(--btn-secondary-fg, var(--on-surface, #111));
  border-color: var(--btn-secondary-border, transparent);
}
.preset .btn-primary {
  background: var(--accent, #6750A4);
  color: var(--accent-on, #fff);
  border-color: var(--btn-primary-border, var(--accent, #6750A4));
  box-shadow: var(--btn-shadow, none);
}
.preset .btn-secondary:hover { background: var(--btn-secondary-hover, rgba(0,0,0,0.05)); }
.preset .btn-primary:hover { background: var(--accent-strong, var(--accent, #6750A4)); }

/* ── Button variants (tertiary / ghost / destructive) ── */
.preset .btn-tertiary {
  background: transparent;
  color: var(--btn-tertiary-color, var(--accent, #6750A4));
  border-color: transparent;
  padding-left: var(--pad-btn-x-tertiary, 8px);
  padding-right: var(--pad-btn-x-tertiary, 8px);
}
.preset .btn-tertiary:hover {
  background: var(--btn-tertiary-hover, rgba(0,0,0,0.06));
}
.preset .btn-ghost {
  background: transparent;
  color: var(--btn-ghost-color, var(--on-surface, #111));
  border-color: var(--btn-ghost-border, var(--input-border-color, #ccc));
}
.preset .btn-ghost:hover {
  background: var(--btn-ghost-hover, rgba(0,0,0,0.04));
}
.preset .btn-destructive {
  background: var(--error, #B3261E);
  color: var(--error-on, #fff);
  border-color: var(--error, #B3261E);
}
.preset .btn-destructive:hover {
  background: var(--error-strong, #8C1D18);
}

/* ── Button states ── */
.preset button:disabled,
.preset button[disabled] {
  opacity: var(--disabled-opacity, 0.4);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Button size variants ── */
.preset button.btn-sm {
  padding: var(--pad-btn-y-sm, 4px) var(--pad-btn-x-sm, 12px);
  font-size: var(--font-size-btn-sm, 12px);
}
.preset button.btn-lg {
  padding: var(--pad-btn-y-lg, 12px) var(--pad-btn-x-lg, 28px);
  font-size: var(--font-size-btn-lg, 16px);
}

/* ── Input states ── */
.preset input.error,
.preset textarea.error {
  border-color: var(--error, #B3261E);
  outline-color: var(--error, #B3261E);
}
.preset input.error:focus,
.preset textarea.error:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--error, #B3261E) 20%, transparent);
}
.preset input:disabled,
.preset input[disabled],
.preset textarea:disabled,
.preset textarea[disabled] {
  opacity: var(--disabled-opacity, 0.5);
  cursor: not-allowed;
  background: var(--disabled-bg, rgba(0,0,0,0.04));
}

/* ── Select ── */
.preset select {
  display: block;
  width: 100%;
  padding: var(--pad-y, 8px) var(--pad-x, 12px);
  font-family: inherit;
  font-size: var(--font-size-input, 14px);
  color: var(--on-surface, #111);
  background: var(--surface, #fff);
  border: var(--input-border, 1px solid #ccc);
  border-radius: var(--radius-md, 6px);
  outline-offset: 2px;
  transition: var(--motion, 150ms ease);
  cursor: pointer;
  appearance: none;
  background-image: var(--select-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.preset select:focus {
  outline: 2px solid var(--accent, #6750A4);
}

/* ── Checkbox & Radio ── */
.preset .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--font-size-input, 14px);
  color: var(--on-surface, #111);
}
.preset .form-check input[type="checkbox"],
.preset .form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #6750A4);
  cursor: pointer;
}

/* ── Toggle switch — CSS-only pill ── */
.preset .toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.preset .toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.preset .toggle-track {
  width: 36px;
  height: 20px;
  background: var(--toggle-off, #ccc);
  border-radius: 10px;
  transition: var(--motion, 150ms ease);
  position: relative;
  flex-shrink: 0;
}
.preset .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: var(--motion, 150ms ease);
}
.preset .toggle-switch input:checked ~ .toggle-track {
  background: var(--accent, #6750A4);
}
.preset .toggle-switch input:checked ~ .toggle-track .toggle-thumb {
  left: 18px;
}
.preset .toggle-switch input:focus-visible ~ .toggle-track {
  outline: 2px solid var(--accent, #6750A4);
  outline-offset: 2px;
}

/* ─── Containers (#008.3) ─── */

/* Card */
.preset .card {
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 8px);
  padding: var(--pad-form, 16px);
  box-shadow: var(--shadow-card, 0 1px 4px rgba(0,0,0,0.12));
  transition: box-shadow var(--motion, 150ms ease);
}
.preset .card-elevated {
  box-shadow: var(--shadow-elevated, 0 4px 16px rgba(0,0,0,0.16));
}
.preset .card-outlined {
  box-shadow: none;
  border: var(--card-border, 1px solid rgba(0,0,0,0.12));
}
.preset .card-interactive {
  cursor: pointer;
}
.preset .card-interactive:hover {
  box-shadow: var(--shadow-elevated, 0 4px 16px rgba(0,0,0,0.16));
}
.preset .card-title {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 6px;
}
.preset .card-body {
  font-size: 14px;
  color: var(--label-color, #5e6772);
  margin: 0;
}

/* Alert / Banner */
.preset .alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  border-left: 4px solid currentColor;
}
.preset .alert-info    { background: var(--info-bg,    rgba(53,132,228,0.10)); color: var(--info,    #1a6cbf); }
.preset .alert-success { background: var(--success-bg, rgba(38,162, 76,0.10)); color: var(--success, #1c7a41); }
.preset .alert-warning { background: var(--warning-bg, rgba(249,177, 45,0.12)); color: var(--warning, #8a6200); }
.preset .alert-error   { background: var(--error-bg,   rgba(224, 27, 36,0.10)); color: var(--error,   #b3261e); }

/* Tabs */
.preset .tab-list {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--tab-border, rgba(0,0,0,0.10));
  margin-bottom: 12px;
}
.preset .tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--label-color, #5e6772);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--motion, 150ms ease), border-color var(--motion, 150ms ease);
}
.preset .tab:hover { color: var(--on-surface, #2e3436); }
.preset .tab.active {
  color: var(--accent, #6750A4);
  border-bottom-color: var(--accent, #6750A4);
}

/* Accordion (details/summary) */
.preset .accordion-item {
  border: var(--card-border, 1px solid rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  margin-bottom: 4px;
}
.preset .accordion-item summary {
  list-style: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface, #fff);
  color: var(--on-surface, #2e3436);
}
.preset .accordion-item summary::after {
  content: '›';
  transform: rotate(90deg);
  transition: transform var(--motion, 150ms ease);
  font-size: 16px;
  color: var(--label-color, #5e6772);
}
.preset .accordion-item[open] summary::after { transform: rotate(270deg); }
.preset .accordion-item .accordion-body {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--label-color, #5e6772);
  border-top: var(--card-border, 1px solid rgba(0,0,0,0.08));
  background: var(--bg, #fafafa);
}

/* Badge */
.preset .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--badge-radius, 100px);
  line-height: 1.6;
}
.preset .badge-neutral { background: var(--badge-neutral-bg, rgba(0,0,0,0.08)); color: var(--on-surface, #2e3436); }
.preset .badge-primary { background: var(--accent, #6750A4); color: var(--accent-on, #fff); }
.preset .badge-success { background: var(--success-badge, rgba(38,162,76,0.15)); color: var(--success, #1c7a41); }
.preset .badge-warning { background: var(--warning-badge, rgba(249,177,45,0.18)); color: var(--warning, #8a6200); }
.preset .badge-error   { background: var(--error, #B3261E); color: #fff; }

/* ─── Navigation (#008.4) ─── */

/* App bar / Top bar */
.preset .app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 48px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 6px);
}
.preset .app-bar-title {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
  color: var(--on-surface, #2e3436);
}
.preset .app-bar-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.preset .icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-color, #5e6772);
  font-size: 18px;
  transition: background var(--motion, 150ms ease);
}
.preset .icon-btn:hover { background: var(--btn-ghost-hover, rgba(0,0,0,0.06)); }

/* Breadcrumb */
.preset .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.preset .breadcrumb-item {
  color: var(--label-color, #5e6772);
  text-decoration: none;
}
.preset .breadcrumb-item:hover { color: var(--accent, #6750A4); }
.preset .breadcrumb-sep {
  color: var(--label-color, #5e6772);
  opacity: 0.5;
  font-size: 11px;
}
.preset .breadcrumb-item.current {
  color: var(--on-surface, #2e3436);
  font-weight: 500;
  pointer-events: none;
}

/* Pagination */
.preset .pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.preset .page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: var(--card-border, 1px solid rgba(0,0,0,0.12));
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--label-color, #5e6772);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion, 150ms ease), color var(--motion, 150ms ease);
}
.preset .page-btn:hover { background: var(--btn-ghost-hover, rgba(0,0,0,0.06)); }
.preset .page-btn.active {
  background: var(--accent, #6750A4);
  color: var(--accent-on, #fff);
  border-color: var(--accent, #6750A4);
}
.preset .page-btn:disabled { opacity: var(--disabled-opacity, 0.4); cursor: not-allowed; }

/* Navigation rail (vertical) */
.preset .nav-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface, #fff);
  border-radius: var(--radius-md, 6px);
  width: fit-content;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.12));
}
.preset .rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--label-color, #5e6772);
  transition: background var(--motion, 150ms ease), color var(--motion, 150ms ease);
  text-decoration: none;
  white-space: nowrap;
}
.preset .rail-item:hover { background: var(--btn-ghost-hover, rgba(0,0,0,0.06)); color: var(--on-surface, #2e3436); }
.preset .rail-item.active {
  background: var(--rail-active-bg, rgba(53,132,228,0.12));
  color: var(--accent, #3584E4);
}
.preset .rail-icon { font-size: 16px; opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════
   GRUPO 0 — KODER NATIVE (canonical Stack identity)
   ═══════════════════════════════════════════════════════════════
   The koder preset is the canonical visual identity of every Koder
   product. v0 ships foundational tokens (palette + radius + spacing
   + typography); form elements, containers, navigation, data,
   feedback, and surface-specific tuning ship in subsequent #008
   sub-tickets. Spec: meta/docs/stack/specs/themes/koder-style.kmd.
   ═══════════════════════════════════════════════════════════════ */

/* Verge v1 — Koder Design's canonical visual language. v0 (2026-05-14)
   iniciou em Adwaita 1:1; v1 (owner ratificou 2026-05-28) promove o
   preset OLED-aware (palette "C" do dek#123, 2026-05-25) a default:
   dark variant ganha surfaces near-black ramp + radii bumpados; light
   continua Adwaita-derived (só radii bumpadas pra paridade geométrica).
   Spec: meta/docs/stack/specs/themes/verge.kmd §R4.3. */
.preset.verge {
  --font: 'Cabin', 'Cantarell', 'Inter', sans-serif;
  --accent: #3584E4; --accent-strong: #1c71d8; --accent-on: #fff;
  --bg: #FAFAFA; --surface: #fff; --on-surface: #2e3436; --label-color: #5e6772;
  /* Light radii inalterados vs v0 (verge.kmd §R4.1, "light intacto"
     per owner ratification 2026-05-28). v1 OLED-aware bumps são
     dark-only, abaixo. */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-btn: 6px;
  --pad-y: 8px; --pad-x: 12px;
  --shadow-form: 0 0 0 1px rgba(0,0,0,0.1);
  --input-border: 1px solid #c0c0c0;
  --gap-field: 10px; --gap-title: 14px;
  --pad-form: 18px;
  --btn-secondary-border: 1px solid #c0c0c0;
  /* #008.2 — form element tokens (Adwaita-derived) */
  --btn-tertiary-color: #3584E4;
  --btn-tertiary-hover: rgba(53,132,228,0.10);
  --btn-ghost-border: 1px solid #c0c0c0;
  --btn-ghost-color: #2e3436;
  --btn-ghost-hover: rgba(0,0,0,0.06);
  --error: #e01b24; --error-strong: #a51d2d; --error-on: #fff;
  --disabled-opacity: 0.42;
  --disabled-bg: rgba(0,0,0,0.04);
  --toggle-off: #c0c0c0;
  /* Legacy --motion alias — points at the canonical KDS motion tokens
     (specs/themes/motion/easing-duration.kmd R1/R2). New code SHOULD use
     --kds-motion-duration-* / --kds-motion-easing-* directly. */
  --motion: var(--kds-motion-duration-fast) var(--kds-motion-easing-standard);
  /* #008.3 — container tokens (Adwaita-derived) */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
  --card-border: 1px solid rgba(0,0,0,0.12);
  --info: #1a6cbf; --info-bg: rgba(53,132,228,0.10);
  --success: #1c7a41; --success-bg: rgba(38,162,76,0.10); --success-badge: rgba(38,162,76,0.15);
  --warning: #8a6200; --warning-bg: rgba(249,177,45,0.12); --warning-badge: rgba(249,177,45,0.18);
  --error-bg: rgba(224,27,36,0.10);
  --tab-border: rgba(0,0,0,0.10);
  --badge-neutral-bg: rgba(0,0,0,0.08);
  --badge-radius: 100px;
  /* #008.4 — navigation tokens */
  --rail-active-bg: rgba(53,132,228,0.12);
  /* #008.5 — data tokens */
  --table-border: 1px solid rgba(0,0,0,0.10);
  --table-header-bg: rgba(0,0,0,0.03);
  --table-row-hover: rgba(0,0,0,0.03);
  --progress-bg: rgba(0,0,0,0.10);
  --stat-label-color: #5e6772;
  /* #008.6 — feedback tokens */
  --toast-bg: #2e3436; --toast-fg: #fff;
  --spinner-track: rgba(0,0,0,0.12);
  --skeleton-bg: rgba(0,0,0,0.08);
  /* #008.7 — typography tokens */
  --font-mono: 'JetBrains Mono', monospace;
  --code-bg: rgba(0,0,0,0.06);
  --code-color: #a31515;
  /* #008.8 — layout tokens */
  --focus-ring: 2px solid #3584E4;
}

/* Verge v1 dark — OLED-aware (verge.kmd §R4.3). Near-black surface ramp
   (NOT pure #000 — preserva elevation cues), on-surface #F4F4F6, hairline
   outline em 5% white. Acompanha bump de radii compartilhado com light. */
.themed-dark.preset.verge {
  --bg: #0A0A0B;
  --surface: #0F0F0F;
  --card: #161618;
  --card-high: #1F1F22;
  /* Legacy alias mantido pra back-compat com selectors antigos que usem --surface-2. */
  --surface-2: #1F1F22;
  --on-surface: #F4F4F6;
  --on-surface-dim: #9A9AA0;
  --label-color: #9A9AA0;
  --outline: rgba(255, 255, 255, 0.05);
  /* Hairline border em 5% white substitui as bordas pretas v0 (que sumiam
     no near-black). */
  --input-border: 1px solid rgba(255, 255, 255, 0.05);
  --btn-secondary-bg: #161618;
  --btn-secondary-fg: #F4F4F6;
  --btn-secondary-border: 1px solid rgba(255, 255, 255, 0.05);
  --btn-secondary-hover: #1F1F22;
  --shadow-form: 0 0 0 1px rgba(255, 255, 255, 0.05);
  /* #008.2 dark overrides — adaptados pro ramp v1 */
  --btn-ghost-border: 1px solid rgba(255, 255, 255, 0.05);
  --btn-ghost-color: #F4F4F6;
  --btn-ghost-hover: rgba(255,255,255,0.06);
  --disabled-bg: rgba(255,255,255,0.04);
  --toggle-off: #3a3a3d;
  /* #008.3 dark overrides — shadows mais densas sobre o ramp mais escuro */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.5);
  --card-border: 1px solid rgba(255, 255, 255, 0.05);
  --tab-border: rgba(255, 255, 255, 0.05);
  --badge-neutral-bg: rgba(255, 255, 255, 0.06);
  --info: #7fb4f0; --info-bg: rgba(53,132,228,0.15);
  --success: #57c87c; --success-bg: rgba(38,162,76,0.15); --success-badge: rgba(38,162,76,0.20);
  --warning: #f5c842; --warning-bg: rgba(249,177,45,0.15); --warning-badge: rgba(249,177,45,0.22);
  --error-bg: rgba(224,27,36,0.18);
  /* #008.4 dark overrides */
  --rail-active-bg: rgba(127, 180, 240, 0.14);
  /* #008.5 dark overrides */
  --table-border: rgba(255, 255, 255, 0.05);
  --table-header-bg: rgba(255, 255, 255, 0.03);
  --table-row-hover: rgba(255, 255, 255, 0.04);
  --progress-bg: rgba(255, 255, 255, 0.08);
  --stat-label-color: #9A9AA0;
  /* #008.6 dark overrides */
  --toast-bg: #1F1F22; --toast-fg: #F4F4F6;
  --spinner-track: rgba(255, 255, 255, 0.08);
  --skeleton-bg: rgba(255, 255, 255, 0.06);
  /* #008.7 dark overrides */
  --code-bg: rgba(255, 255, 255, 0.05);
  --code-color: #f08080;
  /* #008.8 dark overrides */
  --focus-ring: 2px solid #7fb4f0;
}

/* ─── Data (#008.5) ─── */

/* Data table */
.preset .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.preset .data-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  color: var(--label-color, #5e6772);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: var(--table-border, 1px solid rgba(0,0,0,0.10));
  background: var(--table-header-bg, rgba(0,0,0,0.03));
}
.preset .data-table td {
  padding: 8px 10px;
  color: var(--on-surface, #2e3436);
  border-bottom: var(--table-border, 1px solid rgba(0,0,0,0.06));
}
.preset .data-table tr:last-child td { border-bottom: none; }
.preset .data-table tbody tr:hover { background: var(--table-row-hover, rgba(0,0,0,0.03)); }
.preset .data-table .col-badge { text-align: center; }

/* Progress bar */
.preset .progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preset .progress-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--label-color, #5e6772);
}
.preset .progress-track {
  height: 6px;
  background: var(--progress-bg, rgba(0,0,0,0.10));
  border-radius: 100px;
  overflow: hidden;
}
.preset .progress-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--accent, #6750A4);
  transition: width var(--motion, 150ms ease);
}
.preset .progress-fill.success { background: var(--success, #1c7a41); }
.preset .progress-fill.warning { background: var(--warning, #8a6200); }

/* Stat / KPI card */
.preset .stat-card {
  background: var(--surface, #fff);
  border-radius: var(--radius-md, 6px);
  padding: 12px 14px;
  border: var(--card-border, 1px solid rgba(0,0,0,0.10));
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.preset .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--on-surface, #2e3436);
  line-height: 1.2;
}
.preset .stat-value.accent { color: var(--accent, #3584E4); }
.preset .stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--stat-label-color, var(--label-color, #5e6772));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.preset .stat-delta {
  font-size: 12px;
  margin-top: 4px;
}
.preset .stat-delta.up   { color: var(--success, #1c7a41); }
.preset .stat-delta.down { color: var(--error, #B3261E); }

/* ─── Typography (#008.7) ─── */

.preset .type-scale { display: flex; flex-direction: column; gap: 4px; }
.preset .type-T1  { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--on-surface, #2e3436); }
.preset .type-T2  { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--on-surface, #2e3436); }
.preset .type-T3  { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--on-surface, #2e3436); }
.preset .type-T4  { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--on-surface, #2e3436); }
.preset .type-T5  { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--on-surface, #2e3436); }
.preset .type-T6  { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--on-surface, #2e3436); }
.preset .type-T7  { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--label-color, #5e6772); }
.preset .type-body    { font-size: 14px; line-height: 1.6; color: var(--on-surface, #2e3436); }
.preset .type-caption { font-size: 11px; color: var(--label-color, #5e6772); letter-spacing: 0.03em; }
.preset .type-code    { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 13px; background: var(--code-bg, rgba(0,0,0,0.06)); padding: 2px 6px; border-radius: var(--radius-sm, 4px); color: var(--code-color, #c0392b); }
.preset .type-label   { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label-color, #5e6772); }
.preset .type-link    { color: var(--accent, #3584E4); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ─── Layout primitives (#008.8) ─── */

/* Stack (vertical flex) + Row (horizontal flex) */
.preset .stack { display: flex; flex-direction: column; }
.preset .stack-4  { gap: 4px; }
.preset .stack-8  { gap: 8px; }
.preset .stack-16 { gap: 16px; }
.preset .row   { display: flex; align-items: center; }
.preset .row-4  { gap: 4px; }
.preset .row-8  { gap: 8px; }
.preset .row-between { justify-content: space-between; }

/* Divider */
.preset .divider {
  border: none;
  border-top: var(--card-border, 1px solid rgba(0,0,0,0.10));
  margin: 8px 0;
}
.preset .divider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--label-color, #5e6772);
}
.preset .divider-label::before,
.preset .divider-label::after {
  content: '';
  flex: 1;
  border-top: var(--card-border, 1px solid rgba(0,0,0,0.10));
}

/* Surface levels */
.preset .surface-0 { background: var(--bg, #fafafa); border-radius: var(--radius-md, 6px); padding: 8px 10px; }
.preset .surface-1 { background: var(--surface, #fff); border-radius: var(--radius-md, 6px); padding: 8px 10px; box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.10)); }
.preset .surface-2 { background: var(--surface-2, #f0f0f0); border-radius: var(--radius-md, 6px); padding: 8px 10px; }
.preset .surface-label { font-size: 11px; color: var(--label-color, #5e6772); font-weight: 500; }

/* Focus ring demo */
.preset .focus-ring-demo {
  outline: var(--focus-ring, 2px solid var(--accent, #3584E4));
  outline-offset: 2px;
}

/* ─── Feedback (#008.6) ─── */

/* Toast / Snackbar */
.preset .toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  background: var(--toast-bg, #2e3436);
  color: var(--toast-fg, #fff);
  box-shadow: var(--shadow-elevated, 0 4px 12px rgba(0,0,0,0.18));
  max-width: 320px;
}
.preset .toast-icon { font-size: 16px; flex-shrink: 0; }
.preset .toast-msg  { flex: 1; }
.preset .toast-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #3584E4);
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}
.preset .toast.toast-success { background: var(--success, #1c7a41); }
.preset .toast.toast-error   { background: var(--error,   #B3261E); }

/* Spinner (CSS-only) */
.preset .spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--spinner-track, rgba(0,0,0,0.12));
  border-top-color: var(--accent, #3584E4);
  border-radius: 50%;
  animation: kds-spin 0.7s linear infinite;
}
.preset .spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.preset .spinner-lg { width: 36px; height: 36px; border-width: 4px; }
@keyframes kds-spin { to { transform: rotate(360deg); } }

/* Skeleton loader */
.preset .skeleton {
  background: var(--skeleton-bg, rgba(0,0,0,0.08));
  border-radius: var(--radius-sm, 4px);
  animation: kds-shimmer 1.4s ease-in-out infinite;
}
.preset .skeleton-text { height: 12px; margin-bottom: 6px; }
.preset .skeleton-text:last-child { width: 60%; }
.preset .skeleton-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.preset .skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.preset .skeleton-lines { flex: 1; }
@keyframes kds-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.45; }
  100% { opacity: 1; }
}

/* Empty state */
.preset .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
}
.preset .empty-icon { font-size: 32px; opacity: 0.35; }
.preset .empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-surface, #2e3436);
}
.preset .empty-body {
  font-size: 13px;
  color: var(--label-color, #5e6772);
  max-width: 220px;
}

/* ═══════════════════════════════════════════════════════════════
   GRUPO A — OS LOOK-ALIKES (10)
   ═══════════════════════════════════════════════════════════════ */

.preset.material3 {
  --font: 'Roboto', 'Inter', sans-serif;
  --accent: #6750A4; --accent-strong: #543c91; --accent-on: #fff;
  --bg: #FFFBFE; --surface: #fff; --on-surface: #1C1B1F; --label-color: #49454F;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 24px; --radius-btn: 100px;
  --pad-y: 14px; --pad-x: 16px;
  --shadow-form: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --input-border: 1px solid #79747E;
  --btn-shadow: 0 1px 2px rgba(0,0,0,0.1);
  --gap-field: 16px;
}

.preset.material2 {
  --font: 'Roboto', sans-serif;
  --accent: #2196F3; --accent-strong: #1976D2; --accent-on: #fff;
  --bg: #fff; --surface: #fff; --on-surface: #212121; --label-color: #757575;
  --radius-sm: 4px; --radius-md: 4px; --radius-lg: 4px; --radius-btn: 4px;
  --pad-y: 12px; --pad-x: 14px;
  --shadow-form: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
  --input-border: 0; --input-shadow: inset 0 -1px 0 rgba(0,0,0,0.42);
  --focus-ring: inset 0 -2px 0 var(--accent);
  --font-weight-btn: 500;
  --btn-case: uppercase; --letter-btn: 0.05em;
}

.preset.gnome {
  --font: 'Cabin', 'Cantarell', 'Inter', sans-serif;
  --accent: #3584E4; --accent-strong: #1c71d8; --accent-on: #fff;
  --bg: #FAFAFA; --surface: #fff; --on-surface: #2e3436; --label-color: #5e6772;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-btn: 6px;
  --pad-y: 8px; --pad-x: 12px;
  --shadow-form: 0 0 0 1px rgba(0,0,0,0.1);
  --input-border: 1px solid #c0c0c0;
  --gap-field: 10px; --gap-title: 14px;
  --pad-form: 18px;
  --btn-secondary-border: 1px solid #c0c0c0;
}

/* GNOME Adwaita dark — primeira variante artesanal do ticket #007.
   Reference: GNOME Human Interface Guidelines + Adwaita dark palette
   (libadwaita 1.x). Window-bg/card/surface tons distintos pra preservar
   o layering visual; accent mantido (#3584E4) como na Adwaita light.
   Seletor `.themed-dark.preset.gnome` (não `.preset.themed-dark.gnome`)
   pra escapar o regex do css_split.go que cria phantom chunks. */
.themed-dark.preset.gnome {
  --bg: #242424;
  --surface: #303030;
  --surface-2: #424242;
  --on-surface: #ffffff;
  --label-color: #cccccc;
  --input-border: 1px solid #1b1b1b;
  --btn-secondary-bg: #3a3a3a;
  --btn-secondary-fg: #ffffff;
  --btn-secondary-border: 1px solid #1b1b1b;
  --btn-secondary-hover: #4a4a4a;
  --shadow-form: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* ─── OS-native dark variants — wave A (#007, 2026-05-14) ───────
   Paletas das próprias plataformas (não criativas) — Apple HIG dark,
   Microsoft Fluent dark, iOS dark, Yaru dark, KDE Breeze Dark,
   Material 3 dark, Material 2 dark. Accent geralmente mantido do
   light (a identidade do OS persiste no dark). Surfaces/labels
   adaptados pra dark conforme guideline oficial. */

/* macOS Sonoma dark — Apple HIG dark mode.
   bg = systemBackground (true black-ish) | surface = secondarySystemBackground.
   Label colors per Apple HIG: 0.9 primary / 0.6 secondary (white). */
.themed-dark.preset.macos_sonoma {
  --bg: rgba(28, 28, 30, 0.78);
  --surface: rgba(44, 44, 46, 0.92);
  --surface-2: rgba(58, 58, 60, 0.92);
  --on-surface: rgba(255, 255, 255, 0.92);
  --label-color: rgba(235, 235, 245, 0.6);
  --input-border: 1px solid rgba(255, 255, 255, 0.12);
  --input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-form: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Windows 11 dark — Microsoft Fluent dark Mica.
   Slightly brighter accent #0099E5 (vs light #0067C0) per Win11 dark spec. */
.themed-dark.preset.windows_11 {
  --accent: #0099E5;
  --accent-strong: #0078d4;
  --bg: linear-gradient(135deg, rgba(31, 31, 31, 0.98), rgba(36, 36, 38, 0.98));
  --surface: rgba(43, 43, 43, 0.85);
  --surface-2: rgba(55, 55, 55, 0.92);
  --on-surface: #FFFFFF;
  --label-color: #C5C5C5;
  --input-border: 1px solid rgba(255, 255, 255, 0.12);
  --input-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  --btn-secondary-border: 1px solid rgba(255, 255, 255, 0.12);
  --shadow-form: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* iOS Cupertino dark — true-black system background, brighter accent. */
.themed-dark.preset.ios_cupertino {
  --accent: #0A84FF;
  --accent-strong: #0070d8;
  --bg: #000000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --on-surface: #FFFFFF;
  --label-color: rgba(235, 235, 245, 0.6);
  --input-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  --shadow-form: 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Yaru dark — Ubuntu's signature orange accent preserved. */
.themed-dark.preset.yaru {
  --bg: #292929;
  --surface: #353535;
  --surface-2: #444444;
  --on-surface: #FFFFFF;
  --label-color: #b8b8b8;
  --input-border: 1px solid #4a4a4a;
  --btn-secondary-bg: #3a3a3a;
  --btn-secondary-fg: #FFFFFF;
  --btn-secondary-border: 1px solid #4a4a4a;
  --btn-secondary-hover: #4a4a4a;
  --shadow-form: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* KDE Breeze Dark — official KDE Plasma dark scheme.
   Breeze blue accent preserved; surface tones from Breeze Dark color scheme. */
.themed-dark.preset.kde_breeze {
  --bg: #232629;
  --surface: #2A2E32;
  --surface-2: #31363B;
  --on-surface: #FCFCFC;
  --label-color: #b8c0c5;
  --input-border: 1px solid #4d4d4d;
  --btn-secondary-bg: #31363B;
  --btn-secondary-fg: #FCFCFC;
  --btn-secondary-border: 1px solid #4d4d4d;
  --btn-secondary-hover: #3D4248;
  --shadow-form: 0 0 0 1px #4d4d4d, 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Material 3 dark — Google M3 baseline dark scheme.
   Primary flips: #6750A4 (light) → #D0BCFF (dark), on-primary becomes #381E72.
   Surfaces follow M3 elevation tokens. */
.themed-dark.preset.material3 {
  --accent: #D0BCFF;
  --accent-strong: #B69DF8;
  --accent-on: #381E72;
  --bg: #1C1B1F;
  --surface: #25232A;
  --surface-2: #2E2B34;
  --on-surface: #E6E1E5;
  --label-color: #CAC4D0;
  --input-border: 1px solid #938F99;
  --shadow-form: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Material 2 dark — Material Design 2 dark baseline (Material You predecessor).
   #BB86FC purple per MD2 dark theme spec; true #121212 surface (Material guide). */
.themed-dark.preset.material2 {
  --accent: #BB86FC;
  --accent-strong: #985EFF;
  --accent-on: #000000;
  --bg: #121212;
  --surface: #1E1E1E;
  --surface-2: #2C2C2C;
  --on-surface: #FFFFFF;
  --label-color: rgba(255, 255, 255, 0.6);
  --input-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.42);
  --focus-ring: inset 0 -2px 0 var(--accent);
  --shadow-form: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ─── Documented creative dark variants — wave B partial (#007, 2026-05-14) ───
   8 presets criativos cuja paleta dark é externamente documentada (não
   criativo — segue spec publicada do design system de origem). */

/* shadcn dark (zinc) — shadcn/ui Zinc dark scheme.
   zinc-950 bg, zinc-900 surface, zinc-50 fg, zinc-400 muted label.
   Monochrome accent flips inverso: light fg #18181B → dark fg #FAFAFA. */
.themed-dark.preset.shadcn {
  --accent: #FAFAFA;
  --accent-strong: #E4E4E7;
  --accent-on: #18181B;
  --bg: #09090B;
  --surface: #18181B;
  --surface-2: #27272A;
  --on-surface: #FAFAFA;
  --label-color: #A1A1AA;
  --input-border: 1px solid #27272A;
  --shadow-form: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Carbon (IBM) dark — Carbon Design System "Gray 90" theme.
   bg gray-100 (#161616), surface gray-90 (#262626), text gray-10 (#F4F4F4),
   muted gray-30 (#C6C6C6), accent blue-50 (#4589FF) dark variant. */
.themed-dark.preset.carbon_ibm {
  --accent: #4589FF;
  --accent-strong: #0F62FE;
  --accent-on: #FFFFFF;
  --bg: #161616;
  --surface: #262626;
  --surface-2: #393939;
  --on-surface: #F4F4F4;
  --label-color: #C6C6C6;
  --input-border: 1px solid #6F6F6F;
}

/* Notion dark — Notion's published dark theme.
   bg #191919, surface #2F2F2F, fg #FFFFFF, muted #9B9A97.
   Accent #2EAADC preserved from light. */
.themed-dark.preset.notion {
  --bg: #191919;
  --surface: #2F2F2F;
  --surface-2: #373737;
  --on-surface: #FFFFFF;
  --label-color: #9B9A97;
  --input-border: 1px solid rgba(255, 255, 255, 0.094);
  --shadow-form:
    rgba(255, 255, 255, 0.06) 0 0 0 1px,
    rgba(0, 0, 0, 0.3) 0 3px 6px,
    rgba(0, 0, 0, 0.5) 0 9px 24px;
}

/* high_contrast — already black/white/yellow at max contrast in light.
   Dark variant identical (max-contrast holds both ways). Document
   explicitly to override the generic fallback so accent yellow
   `#FFFF00` doesn't get diluted by `.themed-dark.preset` defaults. */
.themed-dark.preset.high_contrast {
  --accent: #FFFF00;
  --accent-strong: #FFEE00;
  --accent-on: #000000;
  --bg: #000000;
  --surface: #000000;
  --surface-2: #1a1a1a;
  --on-surface: #FFFFFF;
  --label-color: #FFFF00;
  --input-border: 2px solid #FFFFFF;
  --shadow-form: 0 0 0 3px #FFFF00;
}

/* terminal_classic — CRT phosphor green on black.
   Already dark-first; dark variant affirms tokens (override generic
   fallback so `#33FF33` accent doesn't get lost). */
.themed-dark.preset.terminal_classic {
  --accent: #33FF33;
  --accent-strong: #2ad62a;
  --accent-on: #000000;
  --bg: #000000;
  --surface: #001100;
  --surface-2: #002200;
  --on-surface: #33FF33;
  --label-color: #22aa22;
  --input-border: 1px solid #33FF33;
  --shadow-form: 0 0 32px rgba(51, 255, 51, 0.3), inset 0 0 0 1px #33FF33;
}

/* Discord — already dark-by-default (light bg #313338 in spec actually
   IS Discord's dark theme).  Dark variant pushes deeper: chat content
   `#1E1F22`, sidebar `#2B2D31`, message hover `#313338`. */
.themed-dark.preset.discord {
  --bg: #1E1F22;
  --surface: #2B2D31;
  --surface-2: #313338;
  --on-surface: #DBDEE1;
  --label-color: #949BA4;
  --input-border: 1px solid #1E1F22;
  --shadow-form: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Plasma 6 dark — KDE Plasma 6 Breeze Dark color scheme.
   Same Breeze Dark palette as kde_breeze dark, slightly brighter accent
   (Plasma 6 uses the more saturated `#1d99f3` per upstream). */
.themed-dark.preset.plasma6 {
  --bg: #1B1E20;
  --surface: #232629;
  --surface-2: #2A2E32;
  --on-surface: #FCFCFC;
  --label-color: #b8c0c5;
  --input-border: 1px solid #4d4d4d;
  --btn-secondary-bg: #2A2E32;
  --btn-secondary-fg: #FCFCFC;
  --btn-secondary-border: 1px solid #4d4d4d;
  --btn-secondary-hover: #353A3F;
  --shadow-form: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px #4d4d4d;
}

/* Dieter Rams dark — Braun design language.
   Less brand than philosophy: minimal, functional, orange accent for
   action only. Dark surface deliberately near-black to preserve the
   "machine grade" feel (Braun TP1 black plastic, T1000 dark gray). */
.themed-dark.preset.dieter_rams {
  --bg: #1a1a1a;
  --surface: #222222;
  --surface-2: #2a2a2a;
  --on-surface: #f5f5f5;
  --label-color: #999999;
  --input-border: 1px solid #444444;
  --btn-secondary-border: 1px solid #666666;
  --shadow-form: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ─── Wave B+ (#007, 2026-05-14) — derivable presets ───
   Mechanical inversions, companion-to-shipped variants, upstream-docs,
   and known-pattern darks. Total artisanal: 24 of 35 presets. */

/* Swiss / International Typographic Style — black/white/red.
   Dark: invert canvas (black bg, white text), red accent preserved.
   Strong typographic intent unchanged. */
.themed-dark.preset.swiss {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #1a1a1a;
  --on-surface: #FFFFFF;
  --label-color: #FFFFFF;
  --input-shadow: inset 0 -2px 0 #FFFFFF;
  --focus-ring: inset 0 -3px 0 var(--accent);
  --shadow-form: 0 0 0 1px #FFFFFF;
}

/* Brutalist — raw, harsh contrasts. Dark: invert canvas + heavy borders.
   Red accent preserved. 6×6 hard shadows flip from black to white. */
.themed-dark.preset.brutalist {
  --bg: #000000;
  --surface: #000000;
  --surface-2: #0a0a0a;
  --on-surface: #FFFFFF;
  --label-color: #FFFFFF;
  --input-border: 2px solid #FFFFFF;
  --shadow-form: 6px 6px 0 #FFFFFF;
  --btn-shadow: 4px 4px 0 #FFFFFF;
  --btn-secondary-border: 2px solid #FFFFFF;
}

/* Newspaper — serif typography, classic broadsheet. Dark: "evening
   edition" — deep cream-on-charcoal preserving the warm paper feel
   instead of cold pure-white text. */
.themed-dark.preset.newspaper {
  --bg: #1c1916;
  --surface: #25211c;
  --surface-2: #2f2a24;
  --on-surface: #f0e9dc;
  --label-color: #c4b89c;
  --input-border: 1px solid #4a4135;
  --shadow-form: 0 0 0 1px #4a4135;
}

/* Minimalist Mono — pure monochrome with hairline underlines.
   Dark: invert (black bg, white text, white underline focus). */
.themed-dark.preset.minimalist_mono {
  --accent: #FFFFFF;
  --accent-strong: #cccccc;
  --accent-on: #000000;
  --bg: #000000;
  --surface: #000000;
  --surface-2: #0a0a0a;
  --on-surface: #FFFFFF;
  --label-color: #888888;
  --shadow-form: 0 0 0 1px #222222;
  --input-shadow: inset 0 -1px 0 #444444;
  --focus-ring: inset 0 -2px 0 #FFFFFF;
}

/* Fluent Design dark — Microsoft Fluent dark (sibling to windows_11 dark
   already shipped, but Fluent allows more depth + acrylic transparency
   than the Windows 11 Mica variant). */
.themed-dark.preset.fluent_design {
  --accent: #4CC2FF;
  --accent-strong: #0099E5;
  --accent-on: #000000;
  --bg: rgba(32, 32, 32, 0.95);
  --surface: rgba(43, 43, 43, 0.78);
  --surface-2: rgba(60, 60, 60, 0.85);
  --on-surface: #FFFFFF;
  --label-color: #C5C5C5;
  --input-border: 1px solid rgba(255, 255, 255, 0.1);
  --input-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  --btn-secondary-border: 1px solid rgba(255, 255, 255, 0.12);
  --shadow-form: 0 8px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Material Expressive dark — Material 3 Expressive dark variant.
   Inherits material3 dark base + Expressive's brighter accent & wider
   shadow radius for the "lively" feel. */
.themed-dark.preset.material_expressive {
  --accent: #DCBFFF;
  --accent-strong: #B69DF8;
  --accent-on: #381E72;
  --bg: #1C1B1F;
  --surface: #25232A;
  --surface-2: #322E37;
  --on-surface: #E6E1E5;
  --label-color: #CAC4D0;
  --input-border: 2px solid #938F99;
  --shadow-form: 0 12px 32px rgba(220, 191, 255, 0.18), 0 4px 8px rgba(0, 0, 0, 0.4);
  --btn-shadow: 0 4px 12px rgba(220, 191, 255, 0.3);
}

/* Pantheon dark — elementary OS dark color scheme.
   Background `#3D3D3D` (elementary dark gray), accent `#64BAFF` preserved
   (elementary blue), surface tones `#444`/`#4e4e4e`. */
.themed-dark.preset.pantheon {
  --bg: #3D3D3D;
  --surface: #444444;
  --surface-2: #4e4e4e;
  --on-surface: #F0F0F0;
  --label-color: #B8B8B8;
  --input-border: 1px solid #555555;
  --btn-secondary-border: 1px solid #555555;
  --shadow-form: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Neumorphism dark — flip the shadow pair: dark shadow + light
   highlight on a dark gray surface. Same shadow-radius pattern, just
   inverted tones. Surface `#2c2f35` is the canonical "dark neumorphic"
   gray (sits between true black and elevated card). */
.themed-dark.preset.neumorphism {
  --bg: #2c2f35;
  --surface: #2c2f35;
  --surface-2: #353841;
  --on-surface: #e0e5ec;
  --label-color: #a0a5ad;
  --input-border: 0;
  --shadow-form: 8px 8px 16px #1a1c20, -8px -8px 16px #3e424a;
  --input-shadow: inset 4px 4px 8px #1a1c20, inset -4px -4px 8px #3e424a;
  --btn-shadow: 4px 4px 8px #1a1c20, -4px -4px 8px #3e424a;
}

/* ─── Wave C (#007, 2026-05-14) — movement-derived darks ───
   The remaining 11 presets' dark palettes derived from each preset's
   source aesthetic/design movement. Closes #007. */

/* Bauhaus dark — primary triad (red/yellow/blue) on dark canvas.
   Bauhaus colors are canonical (red, yellow, blue, black, white) —
   "dark Bauhaus" inverts canvas while preserving the triad. */
.themed-dark.preset.bauhaus {
  --accent: #E63946;
  --accent-strong: #C42332;
  --accent-on: #FFFFFF;
  --bg: #1a1a1a;
  --surface: #222222;
  --surface-2: #2a2a2a;
  --on-surface: #FAFAFA;
  --label-color: #FAFAFA;
  --input-border: 4px solid #FAFAFA;
  --shadow-form: 4px 4px 0 #FAFAFA;
  --btn-shadow: 4px 4px 0 #FAFAFA;
  --btn-secondary-border: 4px solid #FAFAFA;
}

/* Cyberpunk Neon dark — already dark-first; deepens canvas, accent
   magenta/cyan preserved. Cyberpunk 2077 documented palette
   (#FF00FF magenta, #00FFFF cyan, near-black bg). */
.themed-dark.preset.cyberpunk_neon {
  --accent: #FF00FF;
  --accent-strong: #C100FF;
  --accent-on: #000000;
  --bg: #050010;
  --surface: #0a0014;
  --surface-2: #14001f;
  --on-surface: #00FFFF;
  --label-color: #FF00FF;
  --input-border: 1px solid #00FFFF;
  --input-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
  --shadow-form: 0 0 48px rgba(255, 0, 255, 0.5), inset 0 0 0 1px #FF00FF;
  --btn-shadow: 0 0 16px var(--accent);
}

/* Synthwave / Outrun dark — already dark-first; deepens purple bg
   gradient, hot pink + cyan accents preserved. Documented Outrun
   palette: hot pink #FF6EC7, cyan #36F1FE, deep purple #2E1856. */
.themed-dark.preset.synthwave {
  --accent: #FF00B6;
  --accent-strong: #D6009B;
  --accent-on: #FFFFFF;
  --bg: linear-gradient(180deg, #1B0F33 0%, #2E1856 100%);
  --surface: rgba(20, 0, 40, 0.92);
  --surface-2: rgba(46, 24, 86, 0.85);
  --on-surface: #FFC8FB;
  --label-color: #FF7ED4;
  --input-border: 1px solid rgba(255, 126, 212, 0.5);
  --input-shadow: inset 0 0 12px rgba(255, 0, 182, 0.15);
  --shadow-form: 0 16px 48px rgba(255, 0, 182, 0.45), 0 0 0 1px rgba(255, 0, 182, 0.5);
}

/* Glassmorphism dark — frosted glass on dark backdrop. Pattern is
   documented (dark gradient bg, semi-transparent surfaces, backdrop
   blur preserved). Accent indigo from light retained. */
.themed-dark.preset.glassmorphism {
  --accent: #818cf8;
  --accent-strong: #6366f1;
  --accent-on: #FFFFFF;
  --bg: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
  --surface: rgba(40, 40, 60, 0.5);
  --surface-2: rgba(50, 50, 80, 0.6);
  --on-surface: #FFFFFF;
  --label-color: #B0B0C8;
  --input-border: 1px solid rgba(255, 255, 255, 0.2);
  --shadow-form: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Memphis Pop dark — Memphis Group (Milan 1981) brights on dark canvas.
   Documented palette: pink, yellow, cyan, black squiggles. Dark version
   inverts canvas (squiggles flip to white on near-black). */
.themed-dark.preset.memphis_pop {
  --bg: #1a1a1a;
  --surface: #222222;
  --surface-2: #2a2a2a;
  --on-surface: #FAFAFA;
  --label-color: #E0E0E0;
  --input-border: 2px solid #FFFFFF;
  --shadow-form: 4px 4px 0 #FF6EC7, 8px 8px 0 #36F1FE;
  --btn-shadow: 3px 3px 0 #FFFFFF;
}

/* Japanese Mu dark — wabi-sabi night. Sumi black canvas + washi cream
   text + indigo accent (Edo period blue, AIZOME). Documented Japanese
   traditional palette: sumi #0F0F0F, ai-iro indigo #3D5A80, kinari
   off-white #F8F4E3. */
.themed-dark.preset.japanese_mu {
  --accent: #3D5A80;
  --accent-strong: #2A4365;
  --accent-on: #F8F4E3;
  --bg: #0F0F0F;
  --surface: #1A1A1F;
  --surface-2: #242429;
  --on-surface: #F8F4E3;
  --label-color: #C5BEAB;
  --input-border: 1px solid #3D5A80;
  --shadow-form: 0 1px 0 rgba(248, 244, 227, 0.06);
}

/* Mediterranean dark — coastal night palette. Warm terracotta accent
   preserved + cream text on dark warm-tinted surfaces. Documented
   Mediterranean palette: terracotta #C97064, olive #6B7050, cream
   #F5E6D3. Dark = warm-tinted near-black (not cold gray). */
.themed-dark.preset.mediterranean {
  --accent: #C97064;
  --accent-strong: #A8554A;
  --accent-on: #FFFFFF;
  --bg: #2A1F1A;
  --surface: #3D2F26;
  --surface-2: #4A3A2F;
  --on-surface: #F5E6D3;
  --label-color: #B8A28A;
  --input-border: 1px solid #6B5544;
  --shadow-form: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 112, 100, 0.2);
}

/* Frutiger Aero dark — light-by-definition aesthetic (glossy Win Vista
   / iOS 6 era). Minimal adaptation: dark glossy gradient bg
   preserving the semi-transparent blue surface feel. Not native
   Frutiger Aero (the aesthetic is anti-dark by spec), but provides
   dark-mode coverage for completeness. */
.themed-dark.preset.frutiger_aero {
  --accent: #4FC3F7;
  --accent-strong: #29B6F6;
  --accent-on: #FFFFFF;
  --bg: linear-gradient(180deg, #0A1A2F 0%, #1C3358 100%);
  --surface: rgba(70, 130, 200, 0.25);
  --surface-2: rgba(90, 150, 220, 0.32);
  --on-surface: #FFFFFF;
  --label-color: #B8D4F0;
  --input-border: 1px solid rgba(150, 200, 240, 0.4);
  --shadow-form: 0 8px 24px rgba(0, 50, 100, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Compact Power User dark — IDE/Vim/iTerm style dense functional UI.
   Documented dark palettes: VSCode dark+ (bg #1e1e1e, surface #252526,
   accent #0e639c blue). Power users live in dark by default —
   variant doubles down on the IDE feel. */
.themed-dark.preset.compact_power_user {
  --accent: #0E639C;
  --accent-strong: #1177BB;
  --accent-on: #FFFFFF;
  --bg: #1E1E1E;
  --surface: #252526;
  --surface-2: #2D2D30;
  --on-surface: #D4D4D4;
  --label-color: #9CDCFE;
  --input-border: 1px solid #3C3C3C;
  --shadow-form: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Windows 95 dark — Win95 had "High Contrast Black" theme + the
   common "Windows Classic Dark" adaptation. Period-appropriate:
   navy chrome (#000080) + #C0C0C0 gray inverted to #404040 dark
   panels with the same chiseled 3D bezels reversed. */
.themed-dark.preset.windows_95 {
  --accent: #000080;
  --accent-strong: #0000a0;
  --accent-on: #FFFFFF;
  --bg: #404040;
  --surface: #1F1F1F;
  --surface-2: #2D2D2D;
  --on-surface: #FFFFFF;
  --label-color: #FFFFFF;
  --shadow-form:
    inset 1px 1px #606060, inset -1px -1px #000000,
    inset 2px 2px #808080, inset -2px -2px #000000;
  --input-shadow:
    inset 1px 1px #000000, inset -1px -1px #808080,
    inset 2px 2px #000000, inset -2px -2px #606060;
  --btn-shadow:
    inset 1px 1px #606060, inset -1px -1px #000000,
    inset 2px 2px #808080, inset -2px -2px #000000;
  --btn-secondary-bg: #404040;
  --btn-primary-bg: #000080;
  --btn-secondary-fg: #FFFFFF;
}

/* Aqua Classic dark — macOS 9-era "Graphite" theme (Apple's documented
   alternative to Aqua blue). Pinstripes survive but tones invert to
   dark grays. Accent shifts from blue to graphite gray per Apple HIG
   System 9. */
.themed-dark.preset.aqua_classic {
  --accent: #6B6B6B;
  --accent-strong: #4A4A4A;
  --accent-on: #FFFFFF;
  --bg: linear-gradient(180deg, #2D2D2D 0%, #1A1A1A 100%);
  --surface: linear-gradient(180deg, #3D3D3D 0%, #2D2D2D 100%);
  --surface-2: linear-gradient(180deg, #4A4A4A 0%, #3A3A3A 100%);
  --on-surface: #E5E5E5;
  --label-color: #B8B8B8;
  --input-border: 1px solid #555555;
  --input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  --shadow-form: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.preset.kde_breeze {
  --font: 'Inter', sans-serif;
  --accent: #3DAEE9; --accent-strong: #2980b9; --accent-on: #fff;
  --bg: #EFF0F1; --surface: #FCFCFC; --on-surface: #232629; --label-color: #4d4d4d;
  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 4px; --radius-btn: 2px;
  --pad-y: 7px; --pad-x: 10px;
  --shadow-form: 0 0 0 1px #BDC3C7, 0 1px 2px rgba(0,0,0,0.06);
  --input-border: 1px solid #BDC3C7;
  --gap-field: 9px;
  --pad-form: 16px;
  --btn-secondary-border: 1px solid #BDC3C7;
}

.preset.yaru {
  --font: 'Cabin', 'Inter', sans-serif;
  --accent: #E95420; --accent-strong: #c7491f; --accent-on: #fff;
  --bg: #F7F7F7; --surface: #fff; --on-surface: #3D3D3D; --label-color: #707070;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-btn: 6px;
  --pad-y: 8px; --pad-x: 12px;
  --shadow-form: 0 0 0 1px rgba(0,0,0,0.08);
  --input-border: 1px solid #d3d3d3;
  --gap-field: 10px;
  --pad-form: 18px;
  --btn-secondary-border: 1px solid #d3d3d3;
}

.preset.macos_sonoma {
  --font: -apple-system, 'Inter', sans-serif;
  --accent: #007AFF; --accent-strong: #0062cc; --accent-on: #fff;
  --bg: rgba(255,255,255,0.78); --surface: rgba(255,255,255,0.9);
  --on-surface: #1d1d1f; --label-color: #6e6e73;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-btn: 999px;
  --pad-y: 9px; --pad-x: 14px;
  --shadow-form: 0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  --input-border: 1px solid rgba(0,0,0,0.1);
  --input-shadow: inset 0 1px 0 rgba(0,0,0,0.04);
  --gap-field: 12px;
  --pad-form: 26px;
  --pad-btn-x: 22px;
  --backdrop: 1;
}

.preset.windows_11 {
  --font: 'Inter', 'Segoe UI', sans-serif;
  --accent: #0067C0; --accent-strong: #005ba1; --accent-on: #fff;
  --bg: linear-gradient(135deg, rgba(243,243,243,0.98), rgba(248,248,250,0.98));
  --surface: rgba(255,255,255,0.85); --on-surface: #1B1B1B; --label-color: #5C5C5C;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-btn: 4px;
  --pad-y: 9px; --pad-x: 12px;
  --shadow-form: 0 4px 14px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
  --input-border: 1px solid #d1d1d1;
  --input-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
  --gap-field: 11px;
  --btn-secondary-border: 1px solid #d1d1d1;
}

.preset.ios_cupertino {
  --font: -apple-system, 'Inter', sans-serif;
  --accent: #007AFF; --accent-strong: #0062cc; --accent-on: #fff;
  --bg: #F2F2F7; --surface: #fff; --on-surface: #000; --label-color: #6c6c70;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-btn: 999px;
  --pad-y: 12px; --pad-x: 16px;
  --shadow-form: 0 1px 0 rgba(0,0,0,0.04);
  --input-border: 0; --input-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  --gap-field: 12px;
  --pad-form: 22px;
  --pad-btn-x: 24px; --font-weight-btn: 600;
}

.preset.windows_95 {
  --font: 'DM Mono', 'Tahoma', monospace;
  --accent: #000080; --accent-strong: #0000a0; --accent-on: #fff;
  --bg: #C0C0C0; --surface: #fff; --on-surface: #000; --label-color: #000;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-btn: 0;
  --pad-y: 4px; --pad-x: 6px;
  --shadow-form: inset 1px 1px #fff, inset -1px -1px #808080,
                 inset 2px 2px #dfdfdf, inset -2px -2px #000;
  --input-border: 0;
  --input-shadow: inset 1px 1px #808080, inset -1px -1px #fff,
                  inset 2px 2px #000, inset -2px -2px #dfdfdf;
  --gap-field: 8px;
  --pad-form: 12px;
  --font-size-input: 12px; --font-size-label: 11px; --font-size-title: 13px;
  --font-size-btn: 12px; --pad-btn-y: 4px; --pad-btn-x: 14px;
  --btn-shadow: inset 1px 1px #fff, inset -1px -1px #808080,
                inset 2px 2px #dfdfdf, inset -2px -2px #000;
  --btn-secondary-bg: #C0C0C0; --btn-primary-bg: #000080;
  --btn-secondary-fg: #000;
  --gap-title: 8px;
}
.preset.windows_95 .btn-secondary {
  background: #C0C0C0; box-shadow: var(--btn-shadow);
  border: 0;
}
.preset.windows_95 .btn-primary {
  background: #000080; box-shadow: var(--btn-shadow);
  border: 0;
}

.preset.aqua_classic {
  --font: 'Inter', 'Lucida Grande', sans-serif;
  --accent: #4D90FE; --accent-strong: #3870c5; --accent-on: #fff;
  --bg: linear-gradient(180deg, #d5e0ec, #b0c5dc);
  --surface: linear-gradient(180deg, #fff, #e6e6e6);
  --on-surface: #000; --label-color: #303030;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-btn: 999px;
  --pad-y: 9px; --pad-x: 12px;
  --shadow-form: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
  --input-border: 1px solid #888;
  --input-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.06);
  --gap-field: 11px;
}
.preset.aqua_classic .btn-primary {
  background: linear-gradient(180deg, #6da8ff, #2768d8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2);
}
.preset.aqua_classic input {
  background: linear-gradient(180deg, #fff, #e6e6e6);
}

/* ═══════════════════════════════════════════════════════════════
   GRUPO B — AESTHETIC PERSONALITIES (9)
   ═══════════════════════════════════════════════════════════════ */

.preset.terminal_classic {
  --font: 'JetBrains Mono', monospace;
  --accent: #33FF33; --accent-strong: #2ad62a; --accent-on: #000;
  --bg: #000; --surface: #001100; --on-surface: #33FF33; --label-color: #22aa22;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-btn: 0;
  --pad-y: 6px; --pad-x: 10px;
  --shadow-form: 0 0 32px rgba(51,255,51,0.3), inset 0 0 0 1px #33FF33;
  --input-border: 1px solid #33FF33;
  --gap-field: 10px;
  --pad-form: 18px;
  --font-size-title: 14px;
  --letter-title: 0.1em; --label-case: uppercase;
  --btn-secondary-fg: #33FF33;
  /* Motion: 0ms snap — CRT terminal feel (motion/physics.kmd R4.5). */
  --kds-motion-duration-instant: 0ms;
  --kds-motion-duration-fast: 0ms;
  --kds-motion-duration-medium: 0ms;
  --kds-motion-duration-slow: 0ms;
  --kds-motion-duration-long: 0ms;
  --motion: 0ms linear;
}
.preset.terminal_classic .form-title::before { content: '> '; }
.preset.terminal_classic input::placeholder { color: #225522; }

.preset.brutalist {
  --font: 'JetBrains Mono', monospace;
  --accent: #FF0000; --accent-strong: #c00; --accent-on: #fff;
  --bg: #fff; --surface: #fff; --on-surface: #000; --label-color: #000;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-btn: 0;
  --pad-y: 8px; --pad-x: 10px;
  --shadow-form: 6px 6px 0 #000;
  --input-border: 2px solid #000;
  --gap-field: 12px;
  --pad-form: 20px;
  --font-weight-label: 700;
  --label-case: uppercase; --letter-label: 0.05em;
  --font-weight-title: 900; --letter-title: -0.02em;
  --btn-shadow: 4px 4px 0 #000;
  --btn-secondary-border: 2px solid #000;
  --font-weight-btn: 700; --label-case: uppercase;
  /* Motion: 0ms snap — intentional sharpness (motion/physics.kmd R4.5). */
  --kds-motion-duration-instant: 0ms;
  --kds-motion-duration-fast: 0ms;
  --kds-motion-duration-medium: 0ms;
  --kds-motion-duration-slow: 0ms;
  --kds-motion-duration-long: 0ms;
  --motion: 0ms linear;
}

.preset.newspaper {
  --font: 'Source Serif Pro', 'Cormorant Garamond', serif;
  --accent: #8B0000; --accent-strong: #6b0000; --accent-on: #fff;
  --bg: #FBF8F3; --surface: #fff; --on-surface: #1a1a1a; --label-color: #6b5d4f;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-btn: 4px;
  --pad-y: 10px; --pad-x: 14px;
  --shadow-form: 0 0 0 1px #d4c8b6;
  --input-border: 1px solid #c9b9a4;
  --gap-field: 16px;
  --pad-form: 28px;
  --font-size-title: 22px; --font-weight-title: 700;
}
.preset.newspaper .form-title {
  border-bottom: 2px solid #1a1a1a; padding-bottom: 12px;
  font-family: 'Cormorant Garamond', serif;
}

.preset.minimalist_mono {
  --font: 'Inter', sans-serif;
  --accent: #000; --accent-strong: #333; --accent-on: #fff;
  --bg: #fff; --surface: #fff; --on-surface: #000; --label-color: #888;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-btn: 0;
  --pad-y: 12px; --pad-x: 0;
  --shadow-form: 0 0 0 1px #eee;
  --input-border: 0; --input-shadow: inset 0 -1px 0 #ddd;
  --focus-ring: inset 0 -2px 0 #000;
  --gap-field: 18px;
  --pad-form: 32px;
  --font-size-label: 11px; --label-case: uppercase; --letter-label: 0.1em;
  --font-weight-label: 500;
  --letter-title: -0.02em;
  --btn-secondary-bg: transparent;
}

.preset.compact_power_user {
  --font: 'Inter', sans-serif;
  --accent: #2563eb; --accent-strong: #1d4ed8; --accent-on: #fff;
  --bg: #fff; --surface: #fff; --on-surface: #111; --label-color: #555;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-btn: 4px;
  --pad-y: 4px; --pad-x: 8px;
  --shadow-form: 0 1px 3px rgba(0,0,0,0.08);
  --input-border: 1px solid #d4d4d4;
  --gap-field: 6px; --gap-label: 2px;
  --pad-form: 12px;
  --font-size-input: 12px; --font-size-label: 11px;
  --font-size-title: 13px; --gap-title: 8px;
  --pad-btn-y: 4px; --pad-btn-x: 12px; --font-size-btn: 12px;
}

.preset.bauhaus {
  --font: 'Bebas Neue', 'Inter', sans-serif;
  --accent: #FF0000; --accent-strong: #c00; --accent-on: #fff;
  --bg: #fff; --surface: #fff; --on-surface: #000; --label-color: #000;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-btn: 0;
  --pad-y: 10px; --pad-x: 12px;
  --shadow-form: none;
  --input-border: 3px solid #000;
  --gap-field: 14px;
  --pad-form: 24px;
  --font-size-title: 28px; --letter-title: 0.05em;
  --letter-btn: 0.1em; --btn-case: uppercase;
}
.preset.bauhaus {
  border: 4px solid #000; background:
    repeating-linear-gradient(90deg, transparent 0 25%, rgba(0,102,204,0.06) 25% 50%, rgba(255,213,0,0.06) 50% 75%);
}
.preset.bauhaus .form-card { border: 4px solid #000; }

.preset.cyberpunk_neon {
  --font: 'JetBrains Mono', monospace;
  --accent: #FF00FF; --accent-strong: #cc00cc; --accent-on: #000;
  --bg: #0a0014; --surface: #14001f; --on-surface: #00FFFF; --label-color: #c100ff;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-btn: 4px;
  --pad-y: 9px; --pad-x: 12px;
  --shadow-form: 0 0 32px rgba(255,0,255,0.4), inset 0 0 0 1px #FF00FF;
  --input-border: 1px solid #00FFFF;
  --input-shadow: 0 0 8px rgba(0,255,255,0.3);
  --gap-field: 12px;
  --pad-form: 20px;
  --letter-title: 0.05em;
  --btn-shadow: 0 0 12px var(--accent);
  /* Motion: deliberate slower pulses + -30% stiffness on Spatial
     (more "weighty" feel) per motion/physics.kmd R4.5. Durations 1.2×;
     spring linear() generated by `tools/design-gen/cmd/spring-emit`
     from the physics simulation (Wave 2C-b). */
  --kds-motion-duration-fast: 180ms;
  --kds-motion-duration-medium: 300ms;
  --kds-motion-duration-slow: 480ms;
  --kds-motion-spring-spatial-fast: linear(0, 0.4771, 0.8496, 0.9714, 0.9978, 1.0);
  --kds-motion-spring-spatial-default: linear(0, 0.6367, 0.948, 0.9982, 1.0009, 1.0);
  --kds-motion-spring-spatial-slow: linear(0, 0.6585, 0.986, 1.0126, 1.0027, 1.0);
}
.preset.cyberpunk_neon .form-title { text-shadow: 0 0 8px #00FFFF; }

.preset.synthwave {
  --font: 'Inter', sans-serif;
  --accent: #FF00B6; --accent-strong: #d6009b; --accent-on: #fff;
  --bg: linear-gradient(180deg, #2c0050 0%, #ff00b6 130%);
  --surface: rgba(20,0,40,0.85); --on-surface: #fff; --label-color: #ff7ed4;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-btn: 8px;
  --pad-y: 10px; --pad-x: 14px;
  --shadow-form: 0 16px 48px rgba(255,0,182,0.3), 0 0 0 1px rgba(255,0,182,0.4);
  --input-border: 1px solid rgba(255,126,212,0.4);
  --input-shadow: inset 0 0 12px rgba(255,0,182,0.1);
  --gap-field: 12px;
  --pad-form: 22px;
}
.preset.synthwave .form-title {
  background: linear-gradient(90deg, #ff00b6, #00ffff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.preset.glassmorphism {
  --font: 'Inter', sans-serif;
  --accent: #6366f1; --accent-strong: #4f46e5; --accent-on: #fff;
  --bg: rgba(255,255,255,0.15); --surface: rgba(255,255,255,0.25);
  --on-surface: #1a1a2e; --label-color: #494a5e;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-btn: 12px;
  --pad-y: 10px; --pad-x: 14px;
  --shadow-form: 0 8px 32px rgba(31,38,135,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
  --input-border: 1px solid rgba(255,255,255,0.4);
  --gap-field: 13px;
  --pad-form: 24px;
  /* Motion: +10% damping ratio on Effect (gentler settle) per
     motion/physics.kmd R4.5. linear() generated by
     `tools/design-gen/cmd/spring-emit` from the physics simulation
     (Wave 2C-b). */
  --kds-motion-spring-effect-fast: linear(0, 0.7729, 0.9652, 0.9947, 0.9992, 1.0);
  --kds-motion-spring-effect-default: linear(0, 0.7461, 0.9576, 0.993, 0.9989, 1.0);
  --kds-motion-spring-effect-slow: linear(0, 0.7242, 0.9505, 0.9913, 0.9985, 1.0);
}
.preset.glassmorphism .form-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.preset.glassmorphism { background:
  radial-gradient(circle at 20% 20%, #ff6ec4, transparent 50%),
  radial-gradient(circle at 80% 60%, #7873f5, transparent 50%),
  #1a1a2e;
}
.preset.glassmorphism input {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}

/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO A EXTRA (OS modernos não cobertos) — 4
   ═══════════════════════════════════════════════════════════════ */

.preset.material_expressive {
  --font: 'Roboto', 'Inter', sans-serif;
  --accent: #6E47C5; --accent-strong: #553a9c; --accent-on: #fff;
  --bg: #FAF7FF; --surface: #fff; --on-surface: #1C1B1F; --label-color: #49454F;
  --radius-sm: 12px; --radius-md: 24px; --radius-lg: 40px; --radius-btn: 999px;
  --pad-y: 16px; --pad-x: 18px;
  --shadow-form: 0 12px 32px rgba(110,71,197,0.18), 0 4px 8px rgba(0,0,0,0.06);
  --input-border: 2px solid #CAC4D0;
  --btn-shadow: 0 4px 12px rgba(110,71,197,0.3);
  --gap-field: 18px;
  --pad-btn-y: 12px; --pad-btn-x: 28px; --font-weight-btn: 600;
  /* Motion: +20% stiffness on Spatial → ~0.83× durations (snappier),
     per motion/physics.kmd R4.5. Spring linear() generated by
     `tools/design-gen/cmd/spring-emit` from the physics simulation
     (Wave 2C-b: computed, no longer eyeballed). */
  --kds-motion-duration-fast: 125ms;
  --kds-motion-duration-medium: 210ms;
  --kds-motion-duration-slow: 330ms;
  --kds-motion-spring-spatial-fast: linear(0, 0.4931, 0.8604, 0.9747, 0.9982, 1.0);
  --kds-motion-spring-spatial-default: linear(0, 0.474, 0.8475, 0.9708, 0.9977, 1.0);
  --kds-motion-spring-spatial-slow: linear(0, 0.6689, 0.9888, 1.0119, 1.0023, 1.0);
}

.preset.pantheon {
  --font: 'Inter', 'Open Sans', sans-serif;
  --accent: #64BAFF; --accent-strong: #3892E0; --accent-on: #fff;
  --bg: #F5F5F5; --surface: #fff; --on-surface: #333; --label-color: #6c6c6c;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-btn: 6px;
  --pad-y: 9px; --pad-x: 12px;
  --shadow-form: 0 4px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  --input-border: 1px solid #d0d0d0;
  --gap-field: 11px;
  --pad-form: 22px;
  --btn-secondary-border: 1px solid #d0d0d0;
}

.preset.plasma6 {
  --font: 'Inter', 'Noto Sans', sans-serif;
  --accent: #1d99f3; --accent-strong: #1671b8; --accent-on: #fff;
  --bg: #FCFCFC; --surface: #fff; --on-surface: #232629; --label-color: #4d4d4d;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-btn: 4px;
  --pad-y: 9px; --pad-x: 12px;
  --shadow-form: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06);
  --input-border: 1px solid #BDC3C7;
  --gap-field: 10px;
  --pad-form: 20px;
  --btn-secondary-border: 1px solid #BDC3C7;
}

.preset.fluent_design {
  --font: 'Inter', 'Segoe UI', sans-serif;
  --accent: #0078D4; --accent-strong: #005a9e; --accent-on: #fff;
  --bg: rgba(243,243,243,0.95); --surface: rgba(255,255,255,0.78);
  --on-surface: #1B1B1B; --label-color: #5C5C5C;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-btn: 4px;
  --pad-y: 9px; --pad-x: 12px;
  --shadow-form: 0 8px 16px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06);
  --input-border: 1px solid #c8c8c8;
  --input-shadow: inset 0 -1px 0 #5c5c5c;
  --gap-field: 12px;
  --btn-secondary-border: 1px solid #c8c8c8;
}
.preset.fluent_design .form-card { backdrop-filter: blur(20px); }

/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO B EXTRA (aesthetic) — 5
   ═══════════════════════════════════════════════════════════════ */

.preset.neumorphism {
  --font: 'Inter', sans-serif;
  --accent: #4f46e5; --accent-strong: #4338ca; --accent-on: #fff;
  --bg: #e0e5ec; --surface: #e0e5ec; --on-surface: #2c3e50; --label-color: #6b7c8e;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-btn: 12px;
  --pad-y: 12px; --pad-x: 16px;
  --shadow-form: 8px 8px 16px #b8bec6, -8px -8px 16px #ffffff;
  --input-border: 0;
  --input-shadow: inset 4px 4px 8px #b8bec6, inset -4px -4px 8px #ffffff;
  --gap-field: 16px;
  --pad-form: 28px;
  --btn-shadow: 4px 4px 8px #b8bec6, -4px -4px 8px #ffffff;
}
.preset.neumorphism .btn-secondary {
  background: #e0e5ec; box-shadow: var(--btn-shadow); color: var(--on-surface);
}
.preset.neumorphism .btn-primary { box-shadow: 4px 4px 8px rgba(79,70,229,0.4); }

.preset.high_contrast {
  --font: 'Inter', sans-serif;
  --accent: #FFFF00; --accent-strong: #FFEE00; --accent-on: #000;
  --bg: #000; --surface: #000; --on-surface: #fff; --label-color: #FFFF00;
  --radius-sm: 0; --radius-md: 2px; --radius-lg: 4px; --radius-btn: 4px;
  --pad-y: 12px; --pad-x: 14px;
  --shadow-form: 0 0 0 3px #FFFF00;
  --input-border: 2px solid #fff;
  --focus-ring: 0 0 0 4px #FFFF00;
  --gap-field: 16px;
  --pad-form: 24px;
  --font-weight-label: 700;
  --font-weight-title: 700; --font-size-title: 20px;
  --btn-secondary-border: 2px solid #fff;
  --btn-secondary-fg: #fff;
}
.preset.high_contrast .btn-primary { color: #000; font-weight: 700; }

.preset.dieter_rams {
  --font: 'Inter', sans-serif;
  --accent: #FF6600; --accent-strong: #cc5200; --accent-on: #fff;
  --bg: #F5F5F5; --surface: #fff; --on-surface: #1a1a1a; --label-color: #666;
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-btn: 2px;
  --pad-y: 10px; --pad-x: 12px;
  --shadow-form: 0 1px 2px rgba(0,0,0,0.05);
  --input-border: 1px solid #ccc;
  --gap-field: 14px;
  --pad-form: 24px;
  --font-weight-label: 400; --letter-label: 0.02em;
  --font-weight-title: 500;
  --btn-secondary-border: 1px solid #999;
}

.preset.swiss {
  --font: 'Inter', 'Helvetica Neue', sans-serif;
  --accent: #FF0000; --accent-strong: #cc0000; --accent-on: #fff;
  --bg: #fff; --surface: #fff; --on-surface: #000; --label-color: #000;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-btn: 0;
  --pad-y: 10px; --pad-x: 12px;
  --shadow-form: 0 0 0 1px #000;
  --input-border: 0; --input-shadow: inset 0 -2px 0 #000;
  --focus-ring: inset 0 -3px 0 var(--accent);
  --gap-field: 20px;
  --pad-form: 32px;
  --font-size-title: 32px; --font-weight-title: 800; --letter-title: -0.03em;
  --font-weight-label: 700; --letter-label: -0.01em;
  --font-weight-btn: 700;
}

.preset.frutiger_aero {
  --font: 'Inter', sans-serif;
  --accent: #00B7FF; --accent-strong: #0091cc; --accent-on: #fff;
  --bg: linear-gradient(180deg, #cdeaff 0%, #e0fff0 100%);
  --surface: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(220,240,255,0.85));
  --on-surface: #003a5c; --label-color: #006ba1;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-btn: 999px;
  --pad-y: 10px; --pad-x: 14px;
  --shadow-form: 0 8px 24px rgba(0,140,200,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  --input-border: 1px solid rgba(0,140,200,0.3);
  --input-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  --gap-field: 12px;
  --pad-form: 22px;
}
.preset.frutiger_aero .btn-primary {
  background: linear-gradient(180deg, #6ad0ff, #00B7FF 50%, #0095d8);
  box-shadow: 0 2px 6px rgba(0,140,200,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO C NOVO (Cultural/Regional) — 3
   ═══════════════════════════════════════════════════════════════ */

.preset.japanese_mu {
  --font: 'Inter', 'Noto Sans JP', sans-serif;
  --accent: #8B0000; --accent-strong: #6b0000; --accent-on: #fff;
  --bg: #FAF8F3; --surface: #fff; --on-surface: #1a1a1a; --label-color: #888;
  --radius-sm: 0; --radius-md: 2px; --radius-lg: 4px; --radius-btn: 2px;
  --pad-y: 14px; --pad-x: 0;
  --shadow-form: 0 0 0 1px #e8e2d6;
  --input-border: 0; --input-shadow: inset 0 -1px 0 #d4cab9;
  --focus-ring: inset 0 -2px 0 #8B0000;
  --gap-field: 28px;
  --pad-form: 40px;
  --font-size-label: 11px; --letter-label: 0.15em; --label-case: uppercase;
  --font-weight-label: 400;
  --gap-title: 32px;
  --font-size-title: 16px; --font-weight-title: 400; --letter-title: 0.05em;
}

.preset.mediterranean {
  --font: 'Inter', sans-serif;
  --accent: #1A6C9C; --accent-strong: #0e547d; --accent-on: #fff;
  --bg: #FAF3E0; --surface: #fff; --on-surface: #3D3527; --label-color: #8B6F47;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-btn: 8px;
  --pad-y: 11px; --pad-x: 14px;
  --shadow-form: 0 6px 20px rgba(139,111,71,0.15), 0 0 0 1px rgba(139,111,71,0.1);
  --input-border: 1px solid #d4c5a5;
  --gap-field: 13px;
  --pad-form: 24px;
}

.preset.memphis_pop {
  --font: 'Bebas Neue', 'Inter', sans-serif;
  --accent: #FF66B2; --accent-strong: #e0479a; --accent-on: #fff;
  --bg: #FFF8DC; --surface: #fff; --on-surface: #1a1a1a; --label-color: #333;
  --radius-sm: 0; --radius-md: 6px; --radius-lg: 12px; --radius-btn: 999px;
  --pad-y: 10px; --pad-x: 14px;
  --shadow-form: 8px 8px 0 #00B5E2, 0 0 0 3px #1a1a1a;
  --input-border: 3px solid #1a1a1a;
  --gap-field: 14px;
  --pad-form: 24px;
  --font-size-title: 26px; --letter-title: 0.04em;
  --letter-btn: 0.05em; --btn-case: uppercase;
}
.preset.memphis_pop .form-card { background:
  repeating-linear-gradient(45deg, #fff 0 8px, #FFE0F0 8px 16px); }

/* Sprint 10 #030 — 4 modern web framework / product-specific presets
   added 2026-05-10. Each maps to a recognizable design language so
   consumers see the breadth at a glance. Together with the 12 dormant
   presets activated in canonicalPresets the same commit, brings total
   from 19 → 35. */

.preset.shadcn {
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --accent: #18181B; --accent-strong: #09090B; --accent-on: #FAFAFA;
  --bg: #FAFAFA; --surface: #FFFFFF; --on-surface: #18181B; --label-color: #71717A;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-btn: 6px;
  --pad-y: 9px; --pad-x: 12px;
  --shadow-form: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --input-border: 1px solid #E4E4E7;
  --gap-field: 14px;
  --pad-form: 24px;
  --font-size-title: 18px;
  --letter-title: -0.01em;
}

.preset.carbon_ibm {
  --font: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --accent: #0F62FE; --accent-strong: #0043CE; --accent-on: #FFFFFF;
  --bg: #FFFFFF; --surface: #F4F4F4; --on-surface: #161616; --label-color: #525252;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-btn: 0;
  --pad-y: 11px; --pad-x: 14px;
  --shadow-form: none;
  --input-border: 1px solid #8D8D8D;
  --gap-field: 14px;
  --pad-form: 24px;
  --font-size-title: 20px;
  --letter-title: 0;
}
.preset.carbon_ibm .form-card { border: 1px solid #E0E0E0; }
.preset.carbon_ibm input { border-bottom: 1px solid #8D8D8D; border-top: none; border-left: none; border-right: none; background: #F4F4F4; }

.preset.discord {
  --font: 'gg sans', 'Whitney', 'Inter', sans-serif;
  --accent: #5865F2; --accent-strong: #4752C4; --accent-on: #FFFFFF;
  --bg: #313338; --surface: #2B2D31; --on-surface: #DBDEE1; --label-color: #B5BAC1;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-btn: 4px;
  --pad-y: 10px; --pad-x: 13px;
  --shadow-form: 0 8px 16px rgba(0,0,0,0.24);
  --input-border: 1px solid #1E1F22;
  --gap-field: 12px;
  --pad-form: 20px;
  --font-size-title: 20px;
  --letter-title: 0;
}
.preset.discord input { background: #1E1F22; color: #DBDEE1; }
.preset.discord .form-card { background: #313338; }

.preset.notion {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --accent: #2EAADC; --accent-strong: #0B6E99; --accent-on: #FFFFFF;
  --bg: #FFFFFF; --surface: #F7F6F3; --on-surface: #37352F; --label-color: #787774;
  --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-btn: 3px;
  --pad-y: 8px; --pad-x: 11px;
  --shadow-form: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
  --input-border: 1px solid #E9E5DA;
  --gap-field: 10px;
  --pad-form: 28px;
  --font-size-title: 22px;
  --letter-title: -0.011em;
}
.preset.notion input:focus { background: #F7F6F3; }

/* ═══════════════════════════════════════════════════════════════
   GRUPO F — TV PRESETS (Sprint 11 expansion, 2026-05-13)
   10-foot UI guidelines: dark-first canvas, oversized typography,
   prominent focus rings, sparse information density. Variantes
   .themed-light.preset.<slug> definidas pra cobrir TV em modo claro
   (raro — alguns Smart TVs têm modo dia/luz ambiente alta).
   ═══════════════════════════════════════════════════════════════ */

/* 36. Android TV (Leanback / Material You for TV) */
.preset.android_tv {
  --font: 'Roboto', 'Noto Sans', sans-serif;
  --accent: #BB86FC; --accent-strong: #985EFF; --accent-on: #000;
  --bg: #0F0F0F; --surface: #1F1F1F; --on-surface: #FFFFFF; --label-color: #B3B3B3;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-btn: 24px;
  --pad-y: 14px; --pad-x: 20px;
  --pad-btn-y: 12px; --pad-btn-x: 28px;
  --font-size-input: 16px; --font-size-btn: 16px; --font-size-title: 24px;
  --font-size-label: 14px;
  --shadow-form: 0 8px 24px rgba(0, 0, 0, 0.5);
  --input-border: 2px solid #2A2A2A;
  --gap-field: 16px; --gap-title: 20px;
  --pad-form: 24px;
  --btn-secondary-bg: #2A2A2A;
  --btn-secondary-fg: #FFFFFF;
  --btn-secondary-border: 2px solid #3A3A3A;
  --btn-secondary-hover: #3A3A3A;
  --focus-ring: 0 0 0 4px var(--accent);
}
.preset.android_tv input { background: #1F1F1F; color: #FFFFFF; }
.preset.android_tv input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.themed-light.preset.android_tv {
  --bg: #FFFFFF; --surface: #F5F5F5; --on-surface: #1A1A1A; --label-color: #5A5A5A;
  --input-border: 2px solid #DADADA;
  --btn-secondary-bg: #F0F0F0; --btn-secondary-fg: #1A1A1A; --btn-secondary-border: 2px solid #DADADA; --btn-secondary-hover: #E5E5E5;
}
.themed-light.preset.android_tv input { background: #F5F5F5; color: #1A1A1A; }

/* 37. Samsung Tizen TV */
.preset.tizen_tv {
  --font: 'SamsungOne', 'Inter', sans-serif;
  --accent: #1428A0; --accent-strong: #0A1F8F; --accent-on: #FFFFFF;
  --bg: #0E0E0E; --surface: #1A1A1A; --on-surface: #F1F1F1; --label-color: #A0A0A0;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-btn: 8px;
  --pad-y: 13px; --pad-x: 18px;
  --pad-btn-y: 12px; --pad-btn-x: 24px;
  --font-size-input: 16px; --font-size-btn: 15px; --font-size-title: 22px;
  --font-size-label: 13px;
  --shadow-form: 0 6px 20px rgba(0, 0, 0, 0.55);
  --input-border: 1px solid #2D2D2D;
  --gap-field: 14px; --gap-title: 18px;
  --pad-form: 22px;
  --btn-secondary-bg: #252525;
  --btn-secondary-fg: #F1F1F1;
  --btn-secondary-border: 1px solid #3D3D3D;
  --btn-secondary-hover: #303030;
  --focus-ring: 0 0 0 3px var(--accent);
}
.preset.tizen_tv input { background: #1A1A1A; color: #F1F1F1; }
.preset.tizen_tv input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.themed-light.preset.tizen_tv {
  --bg: #FFFFFF; --surface: #F7F7F7; --on-surface: #181818; --label-color: #606060;
  --input-border: 1px solid #D5D5D5;
  --btn-secondary-bg: #ECECEC; --btn-secondary-fg: #181818; --btn-secondary-border: 1px solid #D5D5D5; --btn-secondary-hover: #DDDDDD;
}
.themed-light.preset.tizen_tv input { background: #F7F7F7; color: #181818; }

/* 38. LG webOS TV */
.preset.webos_tv {
  --font: 'LG Smart UI', 'Inter', sans-serif;
  --accent: #A50034; --accent-strong: #80002A; --accent-on: #FFFFFF;
  --bg: #000000; --surface: #161616; --on-surface: #FFFFFF; --label-color: #B0B0B0;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-btn: 100px;
  --pad-y: 14px; --pad-x: 22px;
  --pad-btn-y: 14px; --pad-btn-x: 30px;
  --font-size-input: 16px; --font-size-btn: 15px; --font-size-title: 22px;
  --font-size-label: 13px;
  --shadow-form: 0 8px 24px rgba(0, 0, 0, 0.65);
  --input-border: 1px solid #262626;
  --gap-field: 16px; --gap-title: 20px;
  --pad-form: 26px;
  --btn-secondary-bg: #1F1F1F;
  --btn-secondary-fg: #FFFFFF;
  --btn-secondary-border: 1px solid #2F2F2F;
  --btn-secondary-hover: #2A2A2A;
  --focus-ring: 0 0 0 4px var(--accent);
}
.preset.webos_tv input { background: #161616; color: #FFFFFF; }
.preset.webos_tv input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.themed-light.preset.webos_tv {
  --bg: #FAFAFA; --surface: #F0F0F0; --on-surface: #1C1C1C; --label-color: #5A5A5A;
  --input-border: 1px solid #D8D8D8;
  --btn-secondary-bg: #EAEAEA; --btn-secondary-fg: #1C1C1C; --btn-secondary-border: 1px solid #D8D8D8; --btn-secondary-hover: #DDDDDD;
}
.themed-light.preset.webos_tv input { background: #F0F0F0; color: #1C1C1C; }

/* ═══════════════════════════════════════════════════════════════
   GRUPO G — MOST-RELEVANT ALTERNATIVES TO MATERIAL (Sprint 12,
   2026-05-13). Cobre gaps de mercado: productivity moderna,
   Android brasileiro, Apple spatial, enterprise dev tools,
   enterprise Ásia.
   ═══════════════════════════════════════════════════════════════ */

/* 39. Linear — productivity tool de referência 2023+ */
.preset.linear {
  --font: 'Inter Display', 'Inter', system-ui, sans-serif;
  --accent: #5E6AD2; --accent-strong: #4C5BCC; --accent-on: #FFFFFF;
  --bg: #FAFBFB; --surface: #FFFFFF; --on-surface: #08090A; --label-color: #62646C;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-btn: 6px;
  --pad-y: 7px; --pad-x: 12px;
  --pad-btn-y: 7px; --pad-btn-x: 14px;
  --font-size-input: 14px; --font-size-btn: 13px; --font-size-title: 18px;
  --font-size-label: 12px; --font-weight-title: 600;
  --shadow-form: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
  --input-border: 1px solid #D7D8DB;
  --gap-field: 10px; --gap-title: 14px;
  --pad-form: 20px;
  --btn-secondary-bg: #FFFFFF; --btn-secondary-fg: #08090A;
  --btn-secondary-border: 1px solid #D7D8DB; --btn-secondary-hover: #F4F5F6;
  --letter-title: -0.012em;
}
.preset.linear input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.18); }
.themed-dark.preset.linear {
  --bg: #131316; --surface: #1B1B1F; --surface-2: #1F1F23;
  --on-surface: #F7F8F8; --label-color: #94959D;
  --input-border: 1px solid #2A2A30;
  --btn-secondary-bg: #1F1F23; --btn-secondary-fg: #F7F8F8;
  --btn-secondary-border: 1px solid #2A2A30; --btn-secondary-hover: #28282E;
  --shadow-form: 0 1px 0 rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* 40. Samsung One UI — Android brasileiro dominante */
.preset.samsung_one_ui {
  --font: 'SamsungOne', 'Roboto', sans-serif;
  --accent: #1428A0; --accent-strong: #0A1F8F; --accent-on: #FFFFFF;
  --bg: #FAFAFA; --surface: #FFFFFF; --on-surface: #1A1A1A; --label-color: #555555;
  --radius-sm: 12px; --radius-md: 22px; --radius-lg: 28px; --radius-btn: 100px;
  --pad-y: 14px; --pad-x: 18px;
  --pad-btn-y: 14px; --pad-btn-x: 28px;
  --font-size-input: 16px; --font-size-btn: 15px; --font-size-title: 22px;
  --font-size-label: 13px; --font-weight-title: 600;
  --shadow-form: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.06);
  --input-border: 1px solid #E0E0E0;
  --gap-field: 14px; --gap-title: 18px;
  --pad-form: 24px;
  --btn-secondary-bg: #F0F0F0; --btn-secondary-fg: #1A1A1A;
  --btn-secondary-border: 1px solid #E0E0E0; --btn-secondary-hover: #E8E8E8;
}
.themed-dark.preset.samsung_one_ui {
  --bg: #1C1C1E; --surface: #2C2C2E; --surface-2: #3A3A3C;
  --on-surface: #FFFFFF; --label-color: #A8A8A8;
  --input-border: 1px solid #3A3A3C;
  --btn-secondary-bg: #2C2C2E; --btn-secondary-fg: #FFFFFF;
  --btn-secondary-border: 1px solid #3A3A3C; --btn-secondary-hover: #38383A;
}

/* 41. Apple visionOS — spatial computing, glass + depth */
.preset.visionos {
  --font: 'SF Pro Display', 'SF Pro', -apple-system, sans-serif;
  --accent: #0A84FF; --accent-strong: #006FE6; --accent-on: #FFFFFF;
  --bg: #F2F2F7;
  --surface: rgba(255, 255, 255, 0.72);
  --on-surface: #000000;
  --label-color: rgba(60, 60, 67, 0.6);
  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-btn: 100px;
  --pad-y: 12px; --pad-x: 16px;
  --pad-btn-y: 12px; --pad-btn-x: 24px;
  --font-size-input: 15px; --font-size-btn: 15px; --font-size-title: 22px;
  --font-size-label: 13px; --font-weight-title: 700;
  --shadow-form:
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 16px 64px rgba(0, 0, 0, 0.06);
  --input-border: 1px solid rgba(60, 60, 67, 0.18);
  --gap-field: 14px; --gap-title: 18px;
  --pad-form: 24px;
  --btn-secondary-bg: rgba(255, 255, 255, 0.5);
  --btn-secondary-fg: #000000;
  --btn-secondary-border: 1px solid rgba(60, 60, 67, 0.18);
  --btn-secondary-hover: rgba(255, 255, 255, 0.7);
}
.preset.visionos .form-card { backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
.preset.visionos input { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.themed-dark.preset.visionos {
  --bg: #000000;
  --surface: rgba(60, 60, 60, 0.52);
  --surface-2: rgba(28, 28, 30, 0.6);
  --on-surface: #FFFFFF;
  --label-color: rgba(235, 235, 245, 0.6);
  --input-border: 1px solid rgba(255, 255, 255, 0.14);
  --btn-secondary-bg: rgba(60, 60, 60, 0.4);
  --btn-secondary-fg: #FFFFFF;
  --btn-secondary-border: 1px solid rgba(255, 255, 255, 0.14);
  --btn-secondary-hover: rgba(80, 80, 80, 0.5);
  --shadow-form:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 16px 64px rgba(0, 0, 0, 0.4);
}

/* 42. Atlassian Design System — enterprise dev tools (Jira/Confluence) */
.preset.atlassian {
  --font: 'Charlie Display', 'Charlie Text', 'Inter', system-ui, sans-serif;
  --accent: #0052CC; --accent-strong: #003884; --accent-on: #FFFFFF;
  --bg: #FFFFFF; --surface: #FFFFFF; --on-surface: #172B4D; --label-color: #44546F;
  --radius-sm: 3px; --radius-md: 4px; --radius-lg: 8px; --radius-btn: 3px;
  --pad-y: 6px; --pad-x: 10px;
  --pad-btn-y: 6px; --pad-btn-x: 12px;
  --font-size-input: 14px; --font-size-btn: 14px; --font-size-title: 20px;
  --font-size-label: 12px; --font-weight-title: 600;
  --shadow-form: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  --input-border: 2px solid #DCDFE4;
  --gap-field: 12px; --gap-title: 16px;
  --pad-form: 20px;
  --btn-secondary-bg: rgba(9, 30, 66, 0.04); --btn-secondary-fg: #44546F;
  --btn-secondary-border: 2px solid transparent; --btn-secondary-hover: rgba(9, 30, 66, 0.08);
}
.preset.atlassian input:focus { border-color: var(--accent); }
.themed-dark.preset.atlassian {
  --bg: #1D2125; --surface: #22272B; --surface-2: #2C333A;
  --on-surface: #B6C2CF; --label-color: #9FADBC;
  --input-border: 2px solid #2C333A;
  --btn-secondary-bg: rgba(166, 197, 226, 0.08);
  --btn-secondary-fg: #B6C2CF;
  --btn-secondary-border: 2px solid transparent;
  --btn-secondary-hover: rgba(166, 197, 226, 0.16);
}

/* 43. Ant Design — enterprise Ásia, table-heavy patterns */
.preset.ant_design {
  --font: 'PingFang SC', -apple-system, 'Segoe UI', 'Noto Sans CJK SC', sans-serif;
  --accent: #1677FF; --accent-strong: #0958D9; --accent-on: #FFFFFF;
  --bg: #F0F2F5; --surface: #FFFFFF; --on-surface: rgba(0, 0, 0, 0.88);
  --label-color: rgba(0, 0, 0, 0.65);
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-btn: 6px;
  --pad-y: 6px; --pad-x: 11px;
  --pad-btn-y: 6px; --pad-btn-x: 15px;
  --font-size-input: 14px; --font-size-btn: 14px; --font-size-title: 20px;
  --font-size-label: 14px; --font-weight-title: 500;
  --shadow-form: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
  --input-border: 1px solid #D9D9D9;
  --gap-field: 10px; --gap-title: 16px;
  --pad-form: 24px;
  --btn-secondary-bg: #FFFFFF; --btn-secondary-fg: rgba(0, 0, 0, 0.88);
  --btn-secondary-border: 1px solid #D9D9D9; --btn-secondary-hover: rgba(0, 0, 0, 0.04);
}
.preset.ant_design input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1); }
.themed-dark.preset.ant_design {
  --bg: #141414; --surface: #1F1F1F; --surface-2: #262626;
  --on-surface: rgba(255, 255, 255, 0.85); --label-color: rgba(255, 255, 255, 0.65);
  --input-border: 1px solid #424242;
  --btn-secondary-bg: transparent; --btn-secondary-fg: rgba(255, 255, 255, 0.85);
  --btn-secondary-border: 1px solid #424242; --btn-secondary-hover: rgba(255, 255, 255, 0.08);
}