.contrast-dialog { --ce-bg: #0b202d; --ce-panel: #102c38; --ce-text: #eefbff; --ce-muted: #9eb7c7; --ce-border: #315361; --ce-input: #071925; box-sizing: border-box; width: min(820px, calc(100vw - 28px)); max-height: 88dvh; padding: 26px; border: 1px solid var(--ce-border); border-radius: 22px; color: var(--ce-text); background: var(--ce-bg); font-family: inherit; }
.contrast-dialog[data-theme="review"] { --ce-bg: #f7fffd; --ce-panel: #fff; --ce-text: #173647; --ce-muted: #5a7280; --ce-border: #a9d7d2; --ce-input: #fff; }
.contrast-dialog::backdrop { background: #00111bd9; backdrop-filter: blur(8px); }
.contrast-dialog [hidden] { display: none !important; }
.contrast-dialog * { box-sizing: border-box; }
.contrast-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.contrast-heading h2 { margin: 0; font-size: 24px; color: var(--ce-text); }
.contrast-dialog button { border: 1px solid var(--ce-border); border-radius: 10px; padding: 10px 15px; background: var(--ce-panel); color: var(--ce-text); font: inherit; cursor: pointer; }
.contrast-dialog button:hover { border-color: #13afa4; }
.contrast-dialog button:disabled { opacity: .55; cursor: wait; }
.contrast-dialog button:focus-visible, .contrast-dialog input:focus-visible { outline: 2px solid #18bdae; outline-offset: 2px; }
.contrast-dialog .contrast-close { font-size: 22px; padding: 2px 12px; }
.contrast-context, .contrast-note, .contrast-count, .contrast-status, .contrast-empty { color: var(--ce-muted); line-height: 1.6; font-size: 14px; }
.contrast-context { margin: 8px 0 18px; }
.contrast-editor-rows { display: grid; gap: 14px; }
.contrast-editor-row { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 12px; padding: 18px; border: 1px solid var(--ce-border); border-radius: 15px; background: var(--ce-panel); }
.contrast-row-number { color: #12a89c; padding-top: 28px; }
.contrast-editor-row label { display: grid; gap: 8px; font-size: 13px; color: var(--ce-muted); min-width: 0; }
.contrast-editor-row input { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--ce-border); border-radius: 8px; color: var(--ce-text); background: var(--ce-input); font: inherit; font-size: 15px; }
.contrast-row-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.contrast-row-actions small { color: var(--ce-muted); }
.contrast-dialog .contrast-delete { color: #c0545e; }
.contrast-footer { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.contrast-dialog .contrast-primary { background: #69ddd2; border-color: #69ddd2; color: #052a35; font-weight: 700; }
.contrast-status { min-height: 22px; }
.contrast-status.is-error { color: #dc6574; }
.contrast-count { color: #4bc7bc; letter-spacing: .08em; }
.contrast-question { font-size: clamp(23px, 4vw, 32px); margin: 28px 0; line-height: 1.5; overflow-wrap: anywhere; }
.contrast-dialog .contrast-speaker { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; }
.contrast-speaker svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contrast-dialog .contrast-speaker:disabled { cursor: default; }
.contrast-answer { font-size: 25px; color: #79e7d9; line-height: 1.5; padding: 20px; background: var(--ce-panel); border-radius: 12px; overflow-wrap: anywhere; }
.contrast-quiz-token { border-color: #998254 !important; color: #ebd29c !important; }
.contrast-quiz-token[hidden] { display: none !important; }
@media (max-width: 620px) { .contrast-dialog { padding: 20px 16px; } .contrast-editor-row { grid-template-columns: 22px 1fr; padding: 12px; } .contrast-editor-row label { grid-column: 2; } .contrast-row-number { grid-row: 1 / 3; } .contrast-row-actions { grid-column: 1 / -1; } .contrast-footer button { flex: 1; } }