/* Display size control (2026-10-05), inside the settings panel. Uses the settings hub colour variables; works in light and dark. */
.ds-box { padding: 4px 0 10px; }
.ds-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 4px; }
.ds-desc { font-size: 12px; color: var(--hub-muted, #64748b); flex: 1 1 100%; }
.ds-ctl { display: inline-flex; align-items: center; gap: 6px; }
.ds-btn { min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid var(--hub-line, #e2e8f0); border-radius: 8px; background: var(--hub-card, #f8fafc); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.ds-btn:hover:not(:disabled) { background: var(--hub-card-hover, #eef2f7); }
.ds-btn:focus-visible { outline: 2px solid var(--hub-accent, #4f46e5); outline-offset: 2px; }
.ds-btn:disabled { opacity: .4; cursor: default; }
.ds-val { min-width: 48px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }