/* Override the light-theme card palette for checked filters, not only dark mode. */
html body.ink-control-theme .mailing-filter-chip { position: relative; display: inline-flex; margin: 0; }
html body.ink-control-theme .mailing-filter-chip input { width: 1px; height: 1px; margin: 0; }
html[data-theme] body.ink-control-theme .mailing-filter-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html[data-theme] body.ink-control-theme .mailing-filter-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-theme] body.ink-control-theme .mailing-filter-chip input:disabled + span { opacity: .55; cursor: not-allowed; }
.ml-panel, .ml-dialog { color: var(--text); }
.ml-heading, .ml-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ml-heading h3, .ml-card h3 { margin: 0; }
.ml-muted { color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr)); gap: 16px; margin: 20px 0; }
.ml-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-width: 0; overflow-wrap: anywhere; }
.ml-button { width: auto; margin: 0; min-height: 42px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 15px; color: var(--text); background: var(--surface); font: inherit; font-size: 14px; cursor: pointer; line-height: 1.4; }
.ml-button.primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.ml-button:disabled { cursor: default; opacity: .55; }
.ml-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ml-dialog { width: min(900px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: clamp(16px,3vw,28px); background: var(--sidebar); border: 1px solid var(--line); border-radius: 20px; overflow: auto; }
.ml-dialog::backdrop { background: #0009; }
.ml-dialog *, .ml-panel * { box-sizing: border-box; }
.ml-dialog [hidden], .ml-panel [hidden] { display: none !important; }
.ml-form { display: grid; gap: 16px; margin-top: 20px; }
.ml-field { display: grid; gap: 8px; min-width: 0; color: var(--text); font-size: 14px; }
.ml-field input, .ml-field textarea { width: 100%; min-width: 0; min-height: 44px; padding: 12px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.ml-field textarea { min-height: 90px; resize: vertical; }
.ml-import { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; }
.ml-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.ml-entry > div { min-width: 0; overflow-wrap: anywhere; }
.ml-entry small { display: block; }
.ml-entry button { flex-shrink: 0; }
.ml-results { display: grid; gap: 8px; max-height: 250px; overflow: auto; }
.ml-results button { text-align: left; }
.ml-report { max-height: 180px; overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.ml-error { color: var(--danger, #b43e32); white-space: pre-wrap; overflow-wrap: anywhere; }
.ml-dialog .ml-error:empty { display: none; }
.ml-dialog header h2 { font-size: clamp(22px,3vw,28px); margin: 0; }
@media(max-width:700px) { .ml-dialog { max-height: calc(100dvh - 12px); } .ml-entry { align-items: start; } }