.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
input[type=text], input[type=number], input[type=search], input[type=datetime-local], select, textarea {
  min-height: 2.125rem; padding: 0.375rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
textarea { height: auto; padding: 8px 10px; resize: vertical; width: 100%; }
textarea.code { font: 0.8125rem/1.55 var(--mono); min-height: 420px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: color-mix(in srgb, var(--ink) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }

/* label | control rows */
.field { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); align-items: start; }
.field:first-child { border-top: 0; }
.field-label { font-weight: 500; }
.field-label .key { display: block; font: 11.5px var(--mono); color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.field-help { color: var(--ink-3); font-size: 0.8125rem; margin-top: 4px; }
.field-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.field-control input[type=number] { width: 120px; }
.field-control input[type=text] { width: 100%; max-width: 460px; }
.badge-over { font-size: 11.5px; color: var(--ink-2); border: 1px dashed var(--border-strong); border-radius: 4px; padding: 0 6px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 16px; }
.grid-form label { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.grid-form label input, .grid-form label select { width: 100%; }

/* switch */
.switch { position: relative; width: 36px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; cursor: pointer; transition: background .15s; }
.switch span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + span { background: var(--ink); }
.switch input:checked + span::after { transform: translateX(16px); background: var(--bg); }
.switch input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: 2px; }
.inherit { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 0.8125rem; }

/* list editors */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.8125rem; background: var(--surface); }
.chip button { border: 0; background: none; cursor: pointer; color: var(--ink-3); padding: 0 4px; font-size: 14px; line-height: 1; }
.chip button:hover { color: var(--ink); }
.chip-input { width: 160px; height: 26px !important; }
.chain { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; }
.chain-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.chain-item .n { font: 11.5px var(--mono); color: var(--ink-3); width: 18px; }
.chain-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* steppers + segmented */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.stepper button { border: 0; background: var(--surface); width: 30px; height: 30px; cursor: pointer; }
.stepper button:hover { background: var(--surface-2); }
.stepper span { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.segmented button { border: 0; background: var(--surface); padding: 0 12px; height: 30px; cursor: pointer; color: var(--ink-2); }
.segmented button + button { border-left: 1px solid var(--border-strong); }
.segmented button.on { background: var(--surface-2); color: var(--ink); font-weight: 500; }