/* Appearance is independent of the configured brand palette and PDF content. */
:root { color-scheme: light; }
.header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; position: relative; z-index: 10; }
.header-actions .language-trigger { min-width: 0; }
.header-actions .language-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
/* One hover background for every header link and picker, including dark mode. */
.header-actions :is(.header-menu-trigger, .language-trigger, .appearance-picker > summary):hover { background: var(--canvas); }
.appearance-picker { position: relative; flex-shrink: 0; }
.appearance-picker > summary { display: flex; align-items: center; justify-content: center; gap: 0; padding: 0; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.appearance-picker[open] > summary { background: var(--accent-soft); }
.appearance-picker > summary .icon { display: none; width: 19px; height: 19px; color: var(--ink); transform: none; }
[data-appearance-preference="light"] .appearance-light, [data-appearance-preference="dark"] .appearance-dark, [data-appearance-preference="system"] .appearance-system { display: block !important; }
.appearance-options { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 190px; margin: 0; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 14px 40px #10172226; }
.appearance-options label { display: flex; align-items: center; gap: 10px; min-height: 43px; padding: 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.appearance-options label:hover { background: var(--canvas); }
.appearance-options label:has(:checked) { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.appearance-options label:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.appearance-options input { margin: 0; order: 2; margin-inline-start: auto; width: 15px; height: 15px; }
.appearance-options .icon { width: 18px; height: 18px; }
@media (min-width: 901px) {
    /* Add to the 10px header gap to separate navigation from site preferences. */
    .appearance-picker { margin-inline-start: 14px; }
}
@media (max-width: 680px) {
    .header-actions { gap: 7px; }
    .appearance-picker > summary { width: 36px; height: 36px; }
    .header-actions .language-trigger > span { max-width: 88px; }
}

:root[data-appearance="dark"] {
    color-scheme: dark;
    --ink: #edf1f7;
    --settings-heading-color: var(--ink);
    --muted: #a8b2c3;
    --arabic-paragraph-color: var(--muted);
    --line: #344154;
    --surface: #192230;
    --canvas: #111924;
    --page-bg: #101721;
    --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
    --accent-readable: color-mix(in srgb, var(--accent) 65%, white);
    background: var(--page-bg);
}
:root[data-appearance="dark"] :is(.home-page, .site-header, .home-page .site-header) { background: var(--page-bg); }
:root[data-appearance="dark"] :is(.workspace, .language-dialog, .secondary, .edit-toolbar, .edit-tool-menu, .edit-sign-dialog, .edit-stamp-dialog, .edit-stamp-card, .extract-page-picker) { background: var(--surface); border-color: var(--line); }
:root[data-appearance="dark"] :is(.workspace-status, .document-column, .edit-pages) { background: var(--canvas); }
:root[data-appearance="dark"] :is(.document-toolbar, .edit-view-controls > button, .extract-quick-actions button, .extract-move-toggle, .extract-order-actions button, .extract-page-picker) { border-color: var(--line); }
:root[data-appearance="dark"] :is(.edit-view-controls > button:not(.icon-button), .extract-quick-actions button, .extract-order-actions button, .edit-pages button, .conversion-swatch) { background: var(--surface); }
:root[data-appearance="dark"] :is(.language-search, .gallery-search) { background: var(--surface); }
:root[data-appearance="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) { background-color: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-appearance="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:root[data-appearance="dark"] .drop-area { background: radial-gradient(ellipse at 50% 28%, var(--accent-soft), var(--surface) 75%); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
:root[data-appearance="dark"] .drop-area.drag-over { background: var(--accent-soft); border-color: var(--accent); }
:root[data-appearance="dark"] :is(.secondary:hover, .icon-button:hover:not(:disabled), .edit-pages button[aria-current="true"], .edit-stamp-card:hover, .extract-quick-actions button:hover) { background: var(--accent-soft); }
:root[data-appearance="dark"] :is(.edit-pages button[aria-current="true"], .edit-stamp-card:hover, .extract-quick-actions button:hover) { border-color: var(--accent); }
:root[data-appearance="dark"] .extract-pages-grid > li { background: var(--canvas); }
:root[data-appearance="dark"] :is(select option:checked, .edit-redact-notice strong, .translation-area-controls output, .translation-area-actions button[aria-pressed="true"], .measure-result.has-value, .edit-toolbar button .icon, .edit-tool-group > summary .icon) { color: var(--accent-readable); }
:root[data-appearance="dark"] :is(.edit-tools button[aria-pressed="true"], .edit-tool-group[open] > summary, .edit-tool-group:has([aria-pressed="true"]) > summary, .edit-path-actions button, .edit-objects button[aria-pressed="true"], .extract-selection-count, .extract-move-toggle[aria-expanded="true"]) { color: var(--accent-readable); }
:root[data-appearance="dark"] select option:not(:disabled):is(:hover, :focus-visible) { color: white; }
:root[data-appearance="dark"] .skip-link { background: var(--accent-hover); color: white; }
:root[data-appearance="dark"] .error-message { background: #382127; color: #ffc2b8; border-color: #66343c; }
:root[data-appearance="dark"] :is(.edit-sign-error, #edit-stamp-error) { color: #ffb4b0; }
:root[data-appearance="dark"] .local-badge { color: #93cdb7; }
:root[data-appearance="dark"] .color-pdf-page .local-badge { background: #392d22; color: #eac49b; }
:root[data-appearance="dark"] .status-dot { background: #83d6b1; box-shadow: 0 0 0 4px #1a3a32; }

/* Gallery colors retain each tool's hue, with quieter surfaces and clear text. */
:root[data-appearance="dark"] .tool-card-description { color: var(--muted); }
:root[data-appearance="dark"] .gallery-empty { border-color: var(--line); }
:root[data-appearance="dark"] .tool-card:hover { box-shadow: 0 12px 25px #0003; }
:root[data-appearance="dark"] .card-arrow { background: #ffffff0b; border-color: #ffffff26; color: color-mix(in srgb, var(--art-ink) 45%, white); }
:root[data-appearance="dark"] .tool-card:hover .card-arrow { background: var(--art-ink); border-color: var(--art-ink); color: white; }
:root[data-appearance="dark"] .tool-illustration [fill="white"] { fill: #dce5f3; }
:root[data-appearance="dark"] .tool-illustration .art-lines { stroke: #a4b1c5; }

/* Real document/signature/stamp previews stay faithful; never invert canvas pixels. */
.page-surface, .extract-thumb-paper, .edit-pages canvas, .edit-sign-preview, .edit-stamp-card img { color-scheme: only light; }
:root[data-appearance="dark"] .extract-current-toggle { background: #fffefeee; color: #6d707c; }
:root[data-appearance="dark"] .extract-current-toggle.is-selected { background: #edf3ff; color: var(--accent); }
:root[data-appearance="dark"] .edit-stamp-card img { background: #fafbfd; border-radius: 4px; }
:root[data-appearance="dark"] .edit-sign-preview { background-color: #fafbfd; }
/* A light blue edge separates controls from decorative panels and dividers. */
:root { --control-border: #c6d8f5; --control-border-hover: #9dbdec; }
:root[data-appearance="dark"] { --control-border: #49658c; --control-border-hover: #7295c5; }
:root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]), select, textarea) { border-color: var(--control-border-current, var(--control-border)); }
:root :is(input, select, textarea):not(:disabled):hover { --control-border-current: var(--control-border-hover); }
:root :is(input, select, textarea):is(:focus-visible, :open) { --control-border-current: var(--accent); }
/* Keep each app's color-control size; normalize only the inset around its swatch.
   Rich-text color/highlight underlines retain their compact indicator layout. */
:root #main input[type="color"]:not(:where(.text-inline-color input)) { padding: 3px; }
:root #main input[type="color"]:not(:where(.text-inline-color input))::-webkit-color-swatch-wrapper { padding: 0; }
:root #main input[type="color"]:not(:where(.text-inline-color input))::-webkit-color-swatch { border: 0; border-radius: 3px; }
:root #main input[type="color"]:not(:where(.text-inline-color input))::-moz-color-swatch { border: 0; border-radius: 3px; }