/* Completar dicionário (public/dictionary-supplement.js). Uses the Staffboard tokens. */
#dictionary-supplement-board .ds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
#dictionary-supplement-board .ds-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
#dictionary-supplement-board .ds-fields label, #dictionary-supplement-board label { display: flex; flex-direction: column; gap: 4px; }
#dictionary-supplement-board label.ds-check { flex-direction: row; align-items: center; gap: 8px; margin: 6px 0; }
#dictionary-supplement-board .ds-bar { height: 8px; border-radius: 4px; background: var(--border, #e5e7eb); overflow: hidden; margin: 8px 0; }
#dictionary-supplement-board .ds-bar span { display: block; height: 100%; background: var(--accent, #2563eb); transition: width .3s; }
#dictionary-supplement-board .ds-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#dictionary-supplement-board .ds-review-head input[type=search] { flex: 1 1 220px; min-width: 0; }
#dictionary-supplement-board .ds-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
#dictionary-supplement-board .chip.active { background: var(--accent, #2563eb); color: #fff; }
#dictionary-supplement-board .ds-table td { vertical-align: top; }
#dictionary-supplement-board .ds-expl { max-width: 360px; }
#dictionary-supplement-board .ds-test { max-height: 320px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
#dictionary-supplement-board button.link { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; }
#dictionary-supplement-board .ds-review { overflow-x: auto; }
.ds-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; background: var(--card, #fff); color: inherit; }
.ds-dialog textarea, .ds-dialog input, .ds-dialog select { width: 100%; box-sizing: border-box; }
.ds-dialog .ds-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 10px 0; }
.ds-dialog .ds-lang { display: flex; flex-direction: column; gap: 4px; }