/* 应用与独立 HTML 共用的主题色唯一入口。 */
:root, html[data-theme="light"] {
  color-scheme: light;
  --el-bg-color-page: #f5f6f8;
  --el-bg-color: #ffffff;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #20242c;
  --el-text-color-regular: #454b56;
  --el-text-color-secondary: #626976;
  --el-text-color-placeholder: #697180;
  --el-text-color-disabled: #949ba6;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #dce0e6;
  --el-border-color-lighter: #e6e9ee;
  --el-border-color-extra-light: #f1f3f5;
  --el-border-color-dark: #cdd0d6;
  --el-border-color-darker: #626976;
  --el-fill-color: #eceff3;
  --el-fill-color-light: #f4f6f8;
  --el-fill-color-lighter: #f8fafb;
  --el-fill-color-extra-light: #fcfcfd;
  --el-fill-color-dark: #dfe3e9;
  --el-fill-color-darker: #d2d8e0;
  --el-fill-color-blank: #ffffff;
  --el-disabled-bg-color: #f4f6f8;
  --el-disabled-text-color: #949ba6;
  --el-disabled-border-color: #dce0e6;
  --app-on-accent: #ffffff;
  --app-tooltip-bg: #252830;
  --app-tooltip-text: #ffffff;
  --app-media-bg: #000000;
  --app-media-text: #ffffff;
  --app-media-mask: rgba(0, 0, 0, .65);
  --app-scrim: rgba(0, 0, 0, .4);
  --app-scrollbar-thumb: color-mix(in srgb, var(--el-text-color-secondary) 30%, var(--el-bg-color));
  --app-scrollbar-thumb-hover: color-mix(in srgb, var(--el-text-color-secondary) 50%, var(--el-bg-color));
  --app-canvas-grid: #dce0e6;
  --app-document-paper: #ffffff;
  --app-shadow-color: rgba(24, 30, 40, .14);
  --el-mask-color: color-mix(in srgb, var(--el-bg-color-overlay) 90%, transparent);
  --el-mask-color-extra-light: color-mix(in srgb, var(--el-bg-color-overlay) 30%, transparent);
  --el-overlay-color: rgba(0, 0, 0, .65);
  --el-overlay-color-light: rgba(0, 0, 0, .5);
  --el-overlay-color-lighter: rgba(0, 0, 0, .35);
  --el-color-primary: #2563eb;
  --el-color-primary-light-3: #6692f1;
  --el-color-primary-light-5: #92b1f5;
  --el-color-primary-light-7: #bed0f9;
  --el-color-primary-light-8: #d3e0fb;
  --el-color-primary-light-9: #e9effd;
  --el-color-primary-dark-2: #1e4fbc;
  --el-color-success: #247645;
  --el-color-success-light-3: #669f7d;
  --el-color-success-light-5: #92baa2;
  --el-color-success-light-7: #bdd6c7;
  --el-color-success-light-8: #d3e4da;
  --el-color-success-light-9: #e9f1ec;
  --el-color-success-dark-2: #1d5e37;
  --el-color-warning: #946000;
  --el-color-warning-light-3: #b4904c;
  --el-color-warning-light-5: #cab080;
  --el-color-warning-light-7: #dfcfb2;
  --el-color-warning-light-8: #eadfcc;
  --el-color-warning-light-9: #f4efe6;
  --el-color-warning-dark-2: #764d00;
  --el-color-danger: #c52b38;
  --el-color-danger-light-3: #d66b74;
  --el-color-danger-light-5: #e2959c;
  --el-color-danger-light-7: #eebfc3;
  --el-color-danger-light-8: #f3d5d7;
  --el-color-danger-light-9: #f9eaeb;
  --el-color-danger-dark-2: #9e222d;
  --el-color-info: #596576;
  --el-color-info-light-3: #8b939f;
  --el-color-info-light-5: #acb2ba;
  --el-color-info-light-7: #cdd1d6;
  --el-color-info-light-8: #dee0e4;
  --el-color-info-light-9: #eef0f1;
  --el-color-info-dark-2: #47515e;
  --el-color-error: var(--el-color-danger);
  --el-color-error-light-3: var(--el-color-danger-light-3);
  --el-color-error-light-5: var(--el-color-danger-light-5);
  --el-color-error-light-7: var(--el-color-danger-light-7);
  --el-color-error-light-8: var(--el-color-danger-light-8);
  --el-color-error-light-9: var(--el-color-danger-light-9);
  --el-color-error-dark-2: var(--el-color-danger-dark-2);
  --app-accent-hover: #1f54c8;
  --app-accent-active: #1c4ab0;
  --el-box-shadow: 0 10px 28px var(--app-shadow-color);
  --el-box-shadow-light: 0 4px 16px var(--app-shadow-color);
  --el-box-shadow-lighter: 0 2px 10px var(--app-shadow-color);
  --el-box-shadow-dark: 0 16px 48px var(--app-shadow-color);
}
html[data-theme="paper"] {
  color-scheme: light;
  --el-bg-color-page: #eeece5;
  --el-bg-color: #faf9f5;
  --el-bg-color-overlay: #fdfbf7;
  --el-text-color-primary: #302e29;
  --el-text-color-regular: #514e46;
  --el-text-color-secondary: #68645b;
  --el-text-color-placeholder: #716d62;
  --el-text-color-disabled: #969184;
  --el-border-color: #8d8576;
  --el-border-color-light: #ded9cd;
  --el-border-color-lighter: #e6e3d9;
  --el-border-color-extra-light: #efece5;
  --el-border-color-dark: #8d8576;
  --el-border-color-darker: #68645b;
  --el-fill-color: #e9e5db;
  --el-fill-color-light: #f2efe7;
  --el-fill-color-lighter: #f5f3ed;
  --el-fill-color-extra-light: #f8f6f1;
  --el-fill-color-dark: #ded9ce;
  --el-fill-color-darker: #d2cec2;
  --el-fill-color-blank: #faf9f5;
  --el-disabled-bg-color: #f2efe7;
  --el-disabled-text-color: #969184;
  --el-disabled-border-color: #ded9cd;
  --app-on-accent: #ffffff;
  --app-tooltip-bg: #252830;
  --app-tooltip-text: #ffffff;
  --app-media-bg: #000000;
  --app-media-text: #ffffff;
  --app-media-mask: rgba(0, 0, 0, .65);
  --app-scrim: rgba(0, 0, 0, .4);
  --app-scrollbar-thumb: color-mix(in srgb, var(--el-text-color-secondary) 30%, var(--el-bg-color));
  --app-scrollbar-thumb-hover: color-mix(in srgb, var(--el-text-color-secondary) 50%, var(--el-bg-color));
  --app-canvas-grid: #ded9cd;
  --app-document-paper: #ffffff;
  --app-shadow-color: rgba(24, 30, 40, .14);
  --el-mask-color: color-mix(in srgb, var(--el-bg-color-overlay) 90%, transparent);
  --el-mask-color-extra-light: color-mix(in srgb, var(--el-bg-color-overlay) 30%, transparent);
  --el-overlay-color: rgba(0, 0, 0, .65);
  --el-overlay-color-light: rgba(0, 0, 0, .5);
  --el-overlay-color-lighter: rgba(0, 0, 0, .35);
  --el-color-primary: #245bd4;
  --el-color-primary-light-3: #648ade;
  --el-color-primary-light-5: #8faae4;
  --el-color-primary-light-7: #bacaeb;
  --el-color-primary-light-8: #cfd9ee;
  --el-color-primary-light-9: #e5e9f2;
  --el-color-primary-dark-2: #1d49aa;
  --el-color-success: #327044;
  --el-color-success-light-3: #6e9979;
  --el-color-success-light-5: #96b49c;
  --el-color-success-light-7: #bed0c0;
  --el-color-success-light-8: #d2ded2;
  --el-color-success-light-9: #e6ebe3;
  --el-color-success-dark-2: #285a36;
  --el-color-warning: #885900;
  --el-color-warning-light-3: #aa894a;
  --el-color-warning-light-5: #c1a97a;
  --el-color-warning-light-7: #d8c9ac;
  --el-color-warning-light-8: #e3d9c4;
  --el-color-warning-light-9: #efe9dc;
  --el-color-warning-dark-2: #6d4700;
  --el-color-danger: #bb3039;
  --el-color-danger-light-3: #ce6c71;
  --el-color-danger-light-5: #da9497;
  --el-color-danger-light-7: #e7bdbd;
  --el-color-danger-light-8: #edd1cf;
  --el-color-danger-light-9: #f4e5e2;
  --el-color-danger-dark-2: #96262e;
  --el-color-info: #625e55;
  --el-color-info-light-3: #908c85;
  --el-color-info-light-5: #aeaca5;
  --el-color-info-light-7: #cccac5;
  --el-color-info-light-8: #dcdad5;
  --el-color-info-light-9: #ebeae5;
  --el-color-info-dark-2: #4e4b44;
  --el-color-error: var(--el-color-danger);
  --el-color-error-light-3: var(--el-color-danger-light-3);
  --el-color-error-light-5: var(--el-color-danger-light-5);
  --el-color-error-light-7: var(--el-color-danger-light-7);
  --el-color-error-light-8: var(--el-color-danger-light-8);
  --el-color-error-light-9: var(--el-color-danger-light-9);
  --el-color-error-dark-2: var(--el-color-danger-dark-2);
  --app-accent-hover: #1f4db4;
  --app-accent-active: #1b449f;
  --el-box-shadow: 0 10px 28px var(--app-shadow-color);
  --el-box-shadow-light: 0 4px 16px var(--app-shadow-color);
  --el-box-shadow-lighter: 0 2px 10px var(--app-shadow-color);
  --el-box-shadow-dark: 0 16px 48px var(--app-shadow-color);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --el-bg-color-page: #171819;
  --el-bg-color: #222426;
  --el-bg-color-overlay: #2b2d30;
  --el-text-color-primary: #f0f1f3;
  --el-text-color-regular: #d2d5da;
  --el-text-color-secondary: #b3b9c2;
  --el-text-color-placeholder: #a5adb8;
  --el-text-color-disabled: #747c87;
  --el-border-color: #66707c;
  --el-border-color-light: #42474e;
  --el-border-color-lighter: #383c42;
  --el-border-color-extra-light: #2f3236;
  --el-border-color-dark: #66707c;
  --el-border-color-darker: #b3b9c2;
  --el-fill-color: #373c43;
  --el-fill-color-light: #2d3137;
  --el-fill-color-lighter: #292c30;
  --el-fill-color-extra-light: #25282b;
  --el-fill-color-dark: #434951;
  --el-fill-color-darker: #4e5660;
  --el-fill-color-blank: #222426;
  --el-disabled-bg-color: #2d3137;
  --el-disabled-text-color: #747c87;
  --el-disabled-border-color: #42474e;
  --app-on-accent: #142033;
  --app-tooltip-bg: #252830;
  --app-tooltip-text: #ffffff;
  --app-media-bg: #000000;
  --app-media-text: #ffffff;
  --app-media-mask: rgba(0, 0, 0, .65);
  --app-scrim: rgba(0, 0, 0, .6);
  --app-scrollbar-thumb: color-mix(in srgb, var(--el-text-color-secondary) 30%, var(--el-bg-color));
  --app-scrollbar-thumb-hover: color-mix(in srgb, var(--el-text-color-secondary) 50%, var(--el-bg-color));
  --app-canvas-grid: #42474e;
  --app-document-paper: #ffffff;
  --app-shadow-color: rgba(0, 0, 0, .4);
  --el-mask-color: color-mix(in srgb, var(--el-bg-color-overlay) 90%, transparent);
  --el-mask-color-extra-light: color-mix(in srgb, var(--el-bg-color-overlay) 30%, transparent);
  --el-overlay-color: rgba(0, 0, 0, .65);
  --el-overlay-color-light: rgba(0, 0, 0, .5);
  --el-overlay-color-lighter: rgba(0, 0, 0, .35);
  --el-color-primary: #8eb4ff;
  --el-color-primary-light-3: #6e89be;
  --el-color-primary-light-5: #586c92;
  --el-color-primary-light-7: #424f67;
  --el-color-primary-light-8: #384151;
  --el-color-primary-light-9: #2d323c;
  --el-color-primary-dark-2: #a5c3ff;
  --el-color-success: #85d3a2;
  --el-color-success-light-3: #679e7d;
  --el-color-success-light-5: #547c64;
  --el-color-success-light-7: #40594b;
  --el-color-success-light-8: #36473f;
  --el-color-success-light-9: #2c3532;
  --el-color-success-dark-2: #9ddcb5;
  --el-color-warning: #efc078;
  --el-color-warning-light-3: #b1915f;
  --el-color-warning-light-5: #88724f;
  --el-color-warning-light-7: #60533f;
  --el-color-warning-light-8: #4b4336;
  --el-color-warning-light-9: #36342e;
  --el-color-warning-dark-2: #f2cd93;
  --el-color-danger: #ff9ca5;
  --el-color-danger-light-3: #bd787f;
  --el-color-danger-light-5: #906066;
  --el-color-danger-light-7: #64484c;
  --el-color-danger-light-8: #4e3c3f;
  --el-color-danger-light-9: #383033;
  --el-color-danger-dark-2: #ffb0b7;
  --el-color-info: #bec9db;
  --el-color-info-light-3: #8f98a5;
  --el-color-info-light-5: #707680;
  --el-color-info-light-7: #51565c;
  --el-color-info-light-8: #41454a;
  --el-color-info-light-9: #323438;
  --el-color-info-dark-2: #cbd4e2;
  --el-color-error: var(--el-color-danger);
  --el-color-error-light-3: var(--el-color-danger-light-3);
  --el-color-error-light-5: var(--el-color-danger-light-5);
  --el-color-error-light-7: var(--el-color-danger-light-7);
  --el-color-error-light-8: var(--el-color-danger-light-8);
  --el-color-error-light-9: var(--el-color-danger-light-9);
  --el-color-error-dark-2: var(--el-color-danger-dark-2);
  --app-accent-hover: #9fbfff;
  --app-accent-active: #aac7ff;
  --el-box-shadow: 0 10px 28px var(--app-shadow-color);
  --el-box-shadow-light: 0 4px 16px var(--app-shadow-color);
  --el-box-shadow-lighter: 0 2px 10px var(--app-shadow-color);
  --el-box-shadow-dark: 0 16px 48px var(--app-shadow-color);
}

html, body { background: var(--el-bg-color-page); color: var(--el-text-color-primary); }
:where(button, input, textarea, select) { color: inherit; }
:where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: 3px; }
:where(button):disabled { cursor: not-allowed; }
::selection { background: var(--el-color-primary-light-8); color: var(--el-text-color-primary); }