/* Shared client palette and text roles. Geometry remains in each surface. */
:root {
    color-scheme: light;
    --bg: #f6f8fb;
    --bg-glow-a: rgba(47, 99, 125, .06);
    --bg-glow-b: rgba(40, 123, 134, .045);
    --panel: #ffffff;
    --panel-soft: #eef3f6;
    --panel-fill: rgba(255, 255, 255, .88);
    --panel-border: rgba(216, 228, 242, .9);
    --step-border: rgb(100, 100, 100);
    --control-fill: #ffffff;
    --control-muted: #fbfcfe;
    --control-translucent: rgba(255, 255, 255, .72);
    --dropzone-fill: #fbfcfe;
    --dropzone-border: #c3d2e6;
    --thumb-fill: #eef4fb;
    --result-fill: #f8fbff;
    --progress-fill: rgba(247, 251, 255, .88);
    --ink: #07112f;
    --muted: #65758e;
    --line: #dce5ed;
    --accent: #2f637d;
    --accent-strong: #123149;
    --accent-soft: #edf5f7;
    --focus-ring: rgba(47, 99, 125, .10);
    --primary-fill: var(--ink);
    --primary-hover: var(--accent-strong);
    --primary-text: #ffffff;
    --badge-fill: var(--ink);
    --badge-text: #ffffff;
    --badge-line: transparent;
    --placeholder: #8b97a8;
    --warn: #287b86;
    --danger: #c2413a;
    --danger-soft: #fff1ef;
    --danger-line: #f2c6c0;
    --info-line: #c8ddea;
    --shadow: 0 18px 46px rgba(8, 16, 48, .075);
    --radius: 8px;
    --card: #ffffff;
    --text: var(--ink);
    --faint: var(--muted);
    --soft: #f7f9fc;
    --strong: var(--ink);
    --strong-text: #ffffff;
}

:root[data-theme="night"] {
    color-scheme: dark;
    --bg: #0f1110;
    --bg-glow-a: rgba(142, 200, 182, .07);
    --bg-glow-b: rgba(214, 190, 133, .05);
    --panel: #181b19;
    --panel-soft: #22261f;
    --panel-fill: rgba(20, 23, 21, .96);
    --panel-border: rgba(221, 227, 217, .13);
    --step-border: rgb(100, 100, 100);
    --control-fill: #1b1f1d;
    --control-muted: #121514;
    --control-translucent: rgba(26, 29, 27, .9);
    --dropzone-fill: #121514;
    --dropzone-border: rgba(160, 181, 169, .28);
    --thumb-fill: #222620;
    --result-fill: #121514;
    --progress-fill: rgba(11, 13, 12, .84);
    --ink: #f2f0e8;
    --muted: #a8afa8;
    --line: rgba(221, 227, 217, .14);
    --accent: #94caba;
    --accent-strong: #d9efe7;
    --accent-soft: rgba(148, 202, 186, .105);
    --focus-ring: rgba(148, 202, 186, .18);
    --primary-fill: #a9d2c2;
    --primary-hover: #c2e2d6;
    --primary-text: #0d1210;
    --badge-fill: rgba(148, 202, 186, .12);
    --badge-text: #e0f4ed;
    --badge-line: rgba(148, 202, 186, .34);
    --placeholder: #7d857d;
    --warn: #d1ba79;
    --danger: #ffaaa1;
    --danger-soft: rgba(255, 142, 132, .13);
    --danger-line: rgba(255, 170, 161, .28);
    --info-line: rgba(148, 202, 186, .25);
    --shadow: 0 22px 58px rgba(0, 0, 0, .38);
    --card: #1b1f1d;
    --text: var(--ink);
    --faint: var(--muted);
    --soft: #131614;
    --strong: #f7f3e9;
    --strong-text: #0f1110;
}

:root {
    --ui-density: 1;
    --ui-device-scale: 1;
    --ui-device-unit: 1px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    --ui-heading-weight: 600;
    --ui-label-weight: 500;
    --ui-body-weight: 400;
    --ui-title-font: calc(var(--ui-density) * 24px);
    --ui-section-font: calc(var(--ui-density) * 18px);
    --ui-control-font: calc(var(--ui-density) * (28px - 2px) / 1.5);
    --ui-body-font: var(--ui-control-font);
    --ui-shared-select-font: var(--ui-control-font);
    --ui-caption-font: max(11px, calc(var(--ui-density) * (10px * 1.25 + 5px) / 1.5));
    --ui-surface-title-font: max(16px, var(--ui-section-font));
    --ui-surface-body-font: var(--ui-body-font);
    --ui-surface-caption-font: var(--ui-caption-font);
    --ui-surface-label-font: var(--ui-caption-font);
    --ui-surface-emphasis-font: clamp(20px, calc(var(--ui-density) * 24px), 24px);
    --ui-surface-control-height: 38px;
}
:root[data-font-scale="small"] { --ui-density: .75; }
/* Shared overlays reserve cutouts and keyboard space at their own boundary. */
:is(.asset-library-modal, .image-edit-modal, .result-viewer, .cloud-login-overlay) {
    --ui-overlay-padding: 12px;
    --ui-overlay-content-height: calc(var(--app-viewport-h, 100dvh) - max(var(--ui-overlay-padding), env(safe-area-inset-top)) - max(var(--ui-overlay-padding), env(safe-area-inset-bottom)));
    grid-template-columns: minmax(0, 1fr);
    padding: max(var(--ui-overlay-padding), env(safe-area-inset-top)) max(var(--ui-overlay-padding), env(safe-area-inset-right)) max(var(--ui-overlay-padding), env(safe-area-inset-bottom)) max(var(--ui-overlay-padding), env(safe-area-inset-left));
}
:is(.asset-library-modal, .image-edit-modal, .cloud-login-overlay) > :is(.asset-library-shell, .user-center-shell, .user-recharge-shell, .prompt-save-shell, .prompt-editor-shell, .result-save-shell, .advanced-analysis-shell, .image-edit-panel, .cloud-login-panel) {
    min-width: 0;
    max-width: 100%;
    max-height: var(--ui-overlay-content-height);
}
/* All surfaces, including body-mounted dialogs, own the same device roles.
 * The main document pins the unit while a keyboard is open. Standalone
 * surfaces can derive it from their viewport without a script dependency. */
@media (max-width: 640px), (max-height: 520px), (max-width: 1024px) and (orientation: portrait), (max-width: 1400px) and (max-height: 1400px) {
    :root[data-font-scale] {
        --ui-device-unit: min(1px, .1785714286vmin);
        --ui-density: calc(.75 * var(--ui-device-scale));
        --ui-title-font: calc(18 * var(--ui-device-unit));
        --ui-section-font: calc(13.5 * var(--ui-device-unit));
        --ui-control-font: calc(13 * var(--ui-device-unit));
        --ui-caption-font: calc(11 * var(--ui-device-unit));
        --ui-shared-select-font: calc(12 * var(--ui-device-unit));
        --ui-surface-title-font: var(--ui-section-font);
        --ui-surface-emphasis-font: calc(20 * var(--ui-device-unit));
        --ui-surface-control-height: calc(28 * var(--ui-device-unit));
    }
    :root[data-font-scale="medium"] {
        --ui-density: var(--ui-device-scale);
        --ui-section-font: calc(15 * var(--ui-device-unit));
        --ui-control-font: calc(14 * var(--ui-device-unit));
        --ui-caption-font: calc(12 * var(--ui-device-unit));
        --ui-shared-select-font: calc(13 * var(--ui-device-unit));
    }
}