:root{
  --surface:#ffffff;
  --surface-alt:#f5f6f8;
  --surface-strong:#15181d;
  --text:#17202a;
  --text-muted:#667085;
  --border:#dfe3e8;
  --accent:#344054;
  --selection:#e9edf2;
  --success:#2e7d32;
  --warning:#9a6700;
  --error:#b42318;
  --row-hover:#f3f5f7;
  --featured:#fff7cc;
  --control-bg:#ffffff;
  --control-text:#17202a;
  --control-border:#cfd5dc;
  --radius:6px;
  --space-field:.55rem;
  --space-panel:1rem;
  --font-ui:system-ui,Segoe UI,sans-serif;

  --validation-pass:var(--success);
  --validation-warn:var(--warning);
  --validation-error:var(--error);
}
:root[data-theme="dark"]{
  --surface:#000;
  --surface-alt:#111;
  --surface-strong:#000;
  --text:#e8e8e8;
  --text-muted:#999;
  --border:#3d3d3d;
  --accent:#fff;
  --selection:#242424;
  --success:#69b36d;
  --warning:#d6a43a;
  --error:#ef6b61;
  --row-hover:#e8e8e8;
  --featured:#242000;
  --control-bg:#000;
  --control-text:#fff;
  --control-border:#666;
  --radius:0;
  --font-ui:"Courier New",Courier,monospace;
}
:root[data-theme="soft"]{
  --surface:#fbfaf7;
  --surface-alt:#f1efe8;
  --surface-strong:#38423b;
  --text:#27332c;
  --text-muted:#6d756f;
  --border:#d9d5ca;
  --accent:#4b6354;
  --selection:#e5ece7;
  --success:#3b7a57;
  --warning:#8d6b24;
  --error:#a13d38;
  --row-hover:#f2f0e9;
  --featured:#f3ead0;
  --control-bg:#fffefa;
  --control-text:#27332c;
  --control-border:#cbc6b8;
}
:root[data-theme="contrast"]{
  --surface:#fff;
  --surface-alt:#fff;
  --surface-strong:#000;
  --text:#000;
  --text-muted:#222;
  --border:#000;
  --accent:#000;
  --selection:#ffeb3b;
  --success:#006400;
  --warning:#7a4a00;
  --error:#b00020;
  --row-hover:#ffeb3b;
  --featured:#ffeb3b;
  --control-bg:#fff;
  --control-text:#000;
  --control-border:#000;
}
:root[data-density="compact"]{
  --space-field:.28rem;
  --space-panel:.55rem;
}
:root[data-density="comfortable"]{
  --space-field:.55rem;
  --space-panel:1rem;
}

.component-field{display:inline-flex;align-items:center;gap:.45rem;margin:.12rem .25rem .12rem 0}
.component-summary{color:var(--text-muted)}
.component-action{background:var(--control-bg);color:var(--control-text);border:1px solid var(--control-border);border-radius:var(--radius);padding:.3rem .45rem}