/* MioPDF v99. Interface colors only; document pages keep their real colors. */
:root {
  color-scheme: light;
  --ui-bg: #f2f5fa;
  --ui-surface: #fff;
  --ui-raised: #f6f8fc;
  --ui-hover: #eaf0f9;
  --ui-line: #d9e2ef;
  --ui-text: #172a46;
  --ui-muted: #61748e;
  --ui-focus: #2563eb;
}

/* The appearance switch and language always travel together. */
.appearance-controls {
  order: 2 !important; display: flex; align-items: center;
  gap: 9px; max-width: 100%; flex: 0 0 auto;
}
.editor-primary-actions .appearance-controls .editor-language {
  order: 0 !important; flex: 1 0 auto !important;
  width: max-content !important; min-width: 240px !important;
  max-width: none !important; padding-inline: 12px !important;
  background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-line);
}
.appearance-controls .editor-language select {
  flex: 1 0 auto; width: auto !important; min-width: 0 !important;
  max-width: none !important; white-space: nowrap; text-overflow: clip;
  padding-inline: 2px 8px; color: var(--ui-text); background-color: transparent;
}
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  flex: 0 0 auto; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--ui-line); border-radius: 11px;
  background: var(--ui-raised); color: var(--ui-text);
  font: inherit; font-size: 12px; font-weight: 750; white-space: nowrap;
  box-shadow: 0 2px 7px rgb(15 23 42 / 4%); cursor: pointer;
}
.theme-toggle:hover { background: var(--ui-hover); border-color: #8fa7c8; }
.theme-icon { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-sun { display: none; }
.theme-toggle:focus-visible, .appearance-controls .editor-language:focus-within { outline: 3px solid var(--ui-focus); outline-offset: 3px; }

/* Colored header strips, tinted cards and soft shadows from the reference. */
.commandbar > .file-command { --panel-start: #2571db; --panel-end: #005bd6; --panel-rgb: 27, 110, 236; --panel-tint: #eaf2ff; --panel-ink: #0968de; }
.commandbar > .translation-command { --panel-start: #d8345f; --panel-end: #be1746; --panel-rgb: 224, 45, 91; --panel-tint: #ffedf2; --panel-ink: #d52450; }
.commandbar > .page-command { --panel-start: #8050db; --panel-end: #5e35c1; --panel-rgb: 119, 72, 226; --panel-tint: #f0eaff; --panel-ink: #7841e1; }
.commandbar > .extract-command { --panel-start: #11823a; --panel-end: #006e31; --panel-rgb: 13, 145, 70; --panel-tint: #eaf6ef; --panel-ink: #098044; }
.commandbar > .document-command { --panel-start: #0a7c92; --panel-end: #006b80; --panel-rgb: 9, 153, 179; --panel-tint: #e5f5fa; --panel-ink: #008eab; }
.commandbar > .optimization-command { --panel-start: #ffb04d; --panel-end: #fb8725; --panel-rgb: 244, 137, 29; --panel-tint: #fff0e3; --panel-ink: #c45b08; --panel-heading: #512300; }
.commandbar > .security-command { --panel-start: #7d3be0; --panel-end: #6520c8; --panel-rgb: 127, 49, 232; --panel-tint: #f0e8ff; --panel-ink: #7a31dc; }
.commandbar > .command-group {
  --panel-heading: #fff;
  padding-inline: 7px !important;
  border: 1px solid rgba(var(--panel-rgb), .18) !important;
  border-radius: 14px !important;
  background: linear-gradient(165deg, var(--ui-surface), var(--panel-tint)) !important;
  box-shadow: 0 3px 6px rgba(var(--panel-rgb), .13), 0 6px 14px rgb(28 46 76 / 6%) !important;
}
.commandbar > .optimization-command { --panel-heading: #512300; }
.commandbar > .command-group > .toolbar-label {
  width: calc(100% + 14px) !important; margin-inline: -7px !important;
  border-radius: 13px 13px 0 0; color: var(--panel-heading) !important;
  background: linear-gradient(120deg, var(--panel-start), var(--panel-end)) !important;
  font-weight: 850 !important; letter-spacing: .02em !important;
}
.commandbar > .command-group .tool-tile {
  background: linear-gradient(155deg, var(--ui-surface), var(--ui-raised)) !important;
  border-color: rgba(var(--panel-rgb), .09) !important;
  box-shadow: 0 3px 7px rgba(var(--panel-rgb), .10) !important;
  color: var(--ui-text) !important;
}
.commandbar > .command-group .tool-tile > .tool-glyph { color: var(--panel-ink) !important; }
.commandbar > .command-group .tool-tile > span:last-child { color: var(--ui-text) !important; }
.commandbar > .command-group .tool-tile:hover:not(:disabled) { background: var(--panel-tint) !important; border-color: var(--panel-ink) !important; }
.commandbar > .command-group .tool-tile.active,
.commandbar > .command-group .tool-tile[aria-pressed="true"] { background: var(--panel-tint) !important; border-color: var(--panel-ink) !important; box-shadow: inset 0 0 0 1px var(--panel-ink) !important; }
.commandbar > .command-group .tool-tile.delete-mode-btn > span { color: #e91e43 !important; }
.commandbar > .security-command .protect-tool > .tool-glyph { color: #10983f !important; }
.commandbar > .security-command .unlock-tool > .tool-glyph { color: #e91e43 !important; }
.commandbar > .optimization-command > .optimization-panel { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.commandbar > .optimization-command > .optimization-panel #optimizeWeightBtn {
  background: linear-gradient(180deg, #ffb149, #f98921) !important;
  color: #512300 !important; border: 1px solid #ed841e !important;
  box-shadow: 0 3px 7px rgb(231 125 24 / 20%) !important;
}
.commandbar > .optimization-command #resetOptimizationBtn { background: var(--ui-surface) !important; color: var(--panel-ink) !important; border-color: rgba(var(--panel-rgb), .15) !important; }
.commandbar > .optimization-command #currentWeight { color: var(--ui-text) !important; }

/* Dark interface: no filters, inversion, canvas edits or document recoloring. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #101827; --ui-surface: #1b273b; --ui-raised: #233249;
  --ui-hover: #2c3e58; --ui-line: #3a4c66; --ui-text: #edf3ff;
  --ui-muted: #afbed3; --ui-focus: #83b6ff;
  --bg: var(--ui-bg); --card: var(--ui-surface); --text: var(--ui-text);
  --muted: var(--ui-muted); --line: var(--ui-line); --shadow: 0 12px 34px rgb(0 0 0 / 24%);
}
html[data-theme="dark"] .theme-moon { display: none; }
html[data-theme="dark"] .theme-sun { display: block; color: #ffd166; }
html[data-theme="dark"] .file-command { --panel-tint: #1c3354; --panel-ink: #83b6ff; }
html[data-theme="dark"] .translation-command { --panel-tint: #42263c; --panel-ink: #ffa1b9; }
html[data-theme="dark"] .page-command { --panel-tint: #302b4f; --panel-ink: #c3a5ff; }
html[data-theme="dark"] .extract-command { --panel-tint: #1a3832; --panel-ink: #79dba6; }
html[data-theme="dark"] .document-command { --panel-tint: #1b3544; --panel-ink: #74d8ed; }
html[data-theme="dark"] .optimization-command { --panel-tint: #3c2f29; --panel-ink: #ffbf80; }
html[data-theme="dark"] .security-command { --panel-tint: #342749; --panel-ink: #c7a0ff; }
html[data-theme="dark"] body,
html[data-theme="dark"] :is(main, #editorView, .pages-workspace, .editor-empty-state, .pages-main-column, .pages-stream, .editor-toolbar, .commandbar) { background: var(--ui-bg) !important; color: var(--ui-text); border-color: var(--ui-line) !important; }
html[data-theme="dark"] :is(.editor-topbar, .editor-topbar-inner, .site-footer, .modal-card, .office-editor-card, #previewShell, .session-recovery-popover, .ad-region) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] .editor-brand-image { background: #fff; border-radius: 10px; }
html[data-theme="dark"] :is(.appearance-controls .editor-language, .reset-btn, .header-search-dock .live-search-control, .preview-head, .preview-tools-panel, .preview-tool-options, .preview-thumb-rail, .preview-page-toolbar, .preview-edit-toolbar, .preview-tools-tab, .preview-support-card, .preview-pdf-status, .office-editor-head, .office-editor-toolbar, .office-editor-nav, .office-editor-actions, .office-visual-options) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] :is(.header-search-dock .live-search-control input, .editor-language select, .editor-drop-zone h2, .footer-project > strong, .preview-title-block strong, .preview-title-line, .office-editor-head strong, .office-editor-head h2) { color: var(--ui-text) !important; }
html[data-theme="dark"] .editor-drop-zone { background: #211f30 !important; border-color: #f1647d !important; box-shadow: 0 10px 26px rgb(0 0 0 / 15%) !important; }
html[data-theme="dark"] .editor-drop-zone:hover,
html[data-theme="dark"] .editor-drop-zone.dragover { background: #2b2438 !important; }
html[data-theme="dark"] :is(.editor-drop-zone > p, .drop-meta, .upload-use-notice, .upload-use-notice button, .upload-use-notice small, .live-search-status, .drag-hint, .support-choice, .main-support-card .support-choice, .preview-support-card .support-choice, .extract-empty, .extract-help, .page-stats, .ad-label, .ad-placeholder) { color: var(--ui-muted) !important; }
html[data-theme="dark"] .extract-counter,
html[data-theme="dark"] .extract-counter button { background: var(--ui-raised) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] .extract-counter b { color: var(--ui-text) !important; }
html[data-theme="dark"] .extract-counter small { color: var(--ui-muted) !important; }
html[data-theme="dark"] .extract-groups .extract-btn { background: var(--ui-raised) !important; }
html[data-theme="dark"] .extract-groups .extract-btn b { color: var(--ui-text) !important; }
html[data-theme="dark"] .extract-groups .extract-btn.active { background: color-mix(in srgb, var(--extract-color) 25%, var(--ui-surface)) !important; }
html[data-theme="dark"] .optimization-command > .optimization-panel > div > small,
html[data-theme="dark"] .optimization-command > .optimization-panel > #optimizationLevelLabel { color: var(--ui-muted) !important; }
html[data-theme="dark"] :is(.main-support-card, .adsense-slot) { border-color: var(--ui-line) !important; }
html[data-theme="dark"] .adsense-slot { background: var(--ui-bg) !important; }
html[data-theme="dark"] :is(.support-share-button, .preview-support-card .support-share-button, .site-footer nav button, .support-copy-row button) { background: var(--ui-raised) !important; color: #bdd7ff !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] :is(.main-support-card #topDonationBtn, .preview-support-card #openDonationBtn) { background: #412638 !important; color: #ffabc0 !important; border-color: #87405a !important; }
html[data-theme="dark"] :is(.page-card, .source-chip, .documents-file-card, .file-panel, .document-panel, .source-header) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] :is(.page-card header, .page-card footer, .page-meta, .file-header, .file-title, .source-title) { background: var(--ui-raised) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] :is(.source-name, .page-caption) { color: var(--ui-text) !important; }
html[data-theme="dark"] :is(.source-count, .page-caption .rotation-label, .empty-documents) { color: var(--ui-muted) !important; }
html[data-theme="dark"] :is(.preview-stage, .preview-viewport, .office-native-viewport) { background: #111b2b !important; }
/* Native document text inherits its original light-mode base, not the UI ink. */
#officeNativeStage { color: #0f172a; color-scheme: light; }

/* Dialog controls and reading text; PDF/office content, QR and swatches are excluded. */
html[data-theme="dark"] .modal-card :is(h2, h3, label, legend),
html[data-theme="dark"] :is(.info-sections h3, .faq-item summary, .pdf-output-card strong, .donation-method h3) { color: var(--ui-text) !important; }
html[data-theme="dark"] .modal-card :is(.modal-copy, .settings-note, .modal-kicker, small),
html[data-theme="dark"] :is(.info-sections p, .faq-item p, .donation-method p, .download-review, .download-individual-heading, .pdf-output-card span, .info-language, .support-modal .modal-copy) { color: var(--ui-muted) !important; }
html[data-theme="dark"] .modal-card :is(input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
html[data-theme="dark"] .office-editor-toolbar :is(select, input:not([type="color"])) { background: var(--ui-bg) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #91a3bd !important; }
html[data-theme="dark"] :is(select, input[type="checkbox"], input[type="radio"]) { accent-color: #83b6ff; }
html[data-theme="dark"] :is(.settings-check, .page-border-target-box, .page-border-target-mode, .page-border-properties-card .settings-grid, .donation-method, .faq-item, .pdf-output-card, .documents-list, .document-list-item, .saved-signature-card, .image-library-item) { background: var(--ui-raised) !important; border-color: var(--ui-line) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] :is(.faq-item[open] summary, .info-contact-link, .translation-privacy-notice) { background: #342d32 !important; color: #ffcb92 !important; border-color: #9f7546 !important; }
html[data-theme="dark"] :is(.support-qr-download, .donation-paypal h3, .donation-paypal .paypal-wordmark) { color: #acccff !important; }
html[data-theme="dark"] :is(.secondary-btn, .modal-card button.secondary, .signature-tab, .image-library-tab, .download-group-button, .preview-tool-btn, .preview-fit-btn, .preview-zoom-level, .preview-page-nav button, .preview-shortcuts button, .office-editor-toolbar button:not(.modal-close), .office-visual-quick-tools > button:not(.modal-close), .office-editor-nav button, .office-font-size-menu, .office-list-style-popover, .preview-list-style-popover, .office-color-palette-popover, .office-shape-gallery, .office-footer-zoom, .office-footer-zoom button) { background: var(--ui-raised) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] :is(.preview-tool-btn.active, .preview-fit-btn.active, .office-editor-toolbar button.active:not(.modal-close), .signature-tab.active) { background: #28466c !important; border-color: #83b6ff !important; color: #fff !important; }
html[data-theme="dark"] .modal-card .modal-close:not(#closeDownloadModalBtn):not(#closeInfoModalBtn) { background: #392534 !important; color: #ffd6df !important; }
html[data-theme="dark"] .commandbar > .command-group .delete-mode-btn > span,
html[data-theme="dark"] .commandbar > .security-command .unlock-tool > .tool-glyph { color: #ff94a9 !important; }
html[data-theme="dark"] .commandbar > .security-command .protect-tool > .tool-glyph { color: #7fe1a2 !important; }
html[data-theme="dark"] :is(.modal-secondary, .image-upload-btn, .signature-drop, .page-border-accordion-toggle, .page-border-style-picker, .preview-edit-toolbar button) { background: var(--ui-raised) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
html[data-theme="dark"] .preview-edit-toolbar button.active { background: #28466c !important; color: #fff !important; border-color: #83b6ff !important; }
html[data-theme="dark"] :is(.preview-tool-options, .office-editor-nav) :is(select, input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"])) { background: var(--ui-bg) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }

/* Let the expanded controls wrap naturally when the available width is small. */
@media (max-width: 1500px) {
  .editor-topbar, .editor-topbar-inner { height: auto !important; }
  .editor-topbar-inner { flex-wrap: wrap !important; }
  .editor-primary-actions { flex-wrap: wrap !important; max-width: 100%; }
}
@media (max-width: 600px) {
  .appearance-controls { width: 100%; flex: 1 1 100%; }
  .editor-primary-actions .appearance-controls .editor-language { min-width: 0 !important; width: auto !important; flex: 1 1 auto !important; }
  .theme-toggle { width: 44px; min-height: 46px; padding: 0; }
  .theme-toggle > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}