.auto-ui { max-width: 960px; margin-inline: auto; overflow-wrap: anywhere; }
.auto-ui form,.auto-ui fieldset,.auto-ui section,.auto-ui label { min-width: 0; }
.auto-ui fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-block: 12px; }
.auto-ui label { display: grid; gap: 6px; margin-block: 8px; }
.auto-ui .auto-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.auto-ui .auto-check input { width: 20px; height: 20px; flex: 0 0 auto; }
.auto-ui input:not([type=checkbox]),.auto-ui select,.auto-ui textarea { width: 100%; max-width: 100%; min-height: 44px; box-sizing: border-box; padding: 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.auto-ui button,.auto-ui a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; box-sizing: border-box; }
.auto-ui button { max-width: 100%; white-space: normal; text-align: start; }
.auto-ui pre,.auto-ui code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.auto-ui [role=alert]:not(:empty) { border-inline-start: 3px solid var(--accent); padding: 10px; }
.auto-ui :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.auto-ui details { padding: 10px; border: 1px solid var(--border); border-radius: 6px; margin-block: 10px; }
.auto-ui summary { cursor: pointer; min-height: 44px; }
.auto-ui dl { margin: 0; } .auto-ui dd { margin: 0 0 10px 12px; }
@media(max-width: 600px) { .auto-ui .loop-actions { flex-wrap: wrap; } .auto-ui fieldset { padding: 8px; } }