@media (prefers-color-scheme: light) {
  :root[data-theme-mode='auto'] {
    --color--brand: #565dff;
    --color--sub__danger: #ff3c3c;
    --color--sub__tips: #f12d30;
    --color--text__primary: #000;
    --color--text__second1: rgba(0,0,0,0.4);
    --color--text__second2: rgba(0,0,0,0.5);
    --color--text__tertiary: rgba(0,0,0,0.3);
    --color--text__quaternary: rgba(0,0,0,0.2);
    --color--text__contrary: #fff;
    --color--text__special: #565dff;
    --color--text__second06: rgba(0,0,0,0.6);
    --color--text__second08: rgba(0,0,0,0.8);
    --color--text__red1: rgba(254,0,0,0.8);
    --color--test__tip2: #343141;
    --color--test__tip3: #343141;
    --color--text__cancel: rgba(0,0,0,0.6);
    --color--text__empty: #636363;
    --color--text--component: rgba(0,0,0,0.72);
    --color--text--color04: rgba(0,0,0,0.4);
    --color--text--color05: rgba(0,0,0,0.3);
    --color--text--color06: rgba(0,0,0,0.4);
    --color--icon__primary: #000;
    --color--icon__second1: rgba(0,0,0,0.4);
    --color--icon__tertiary: rgba(0,0,0,0.2);
    --color--icon__quaternary: #333;
    --color--icon__contrary: #fff;
    --color--icon__arrow: rbga(0, 0, 0, 0.4);
    --color--icon__toolbar-icon-fill2: rgba(0,0,0,0.05);
    --color--icon_circle03: rgba(0,0,0,0.3);
    --color--icon__block: rgba(255,255,255,0.56);
    --color--icon__checkbox: rgba(0,0,0,0.8);
    --color--icon__checkbox-all: #565dff;
    --color--icon__checkbox-little: #000;
    --color--icon__checkbox-little-disabled: rgba(0,0,0,0.2);
    --color--icon__checkbox-non: #8b8c8f;
    --color--icon__down: rgba(0,0,0,0.4);
    --color--bg__primary: #fff;
    --color--bg__second1-edit: #f2f2f2;
    --color--bg__second2-home: #f2f2f2;
    --color--bg__toolbar: #fff;
    --color--bg__canvas: #f8f8f8;
    --color--bg__split1: #e5e5e5;
    --color--bg__split2: #cdcdcd;
    --color--bg__second2: #f5f5f5;
    --color--bg__ruler: #fff;
    --color--bg__button1: #000;
    --color--bg__button2: rgba(0,0,0,0.1);
    --color--bg__button3: rgba(0,0,0,0.6);
    --color--bg__button4: rgba(0,0,0,0.4);
    --color--bg__button02: rgba(0,0,0,0.2);
    --color--bg__button03: rgba(0,0,0,0.3);
    --color--bg__button5: #565dff;
    --color--bg__tint: #f5f5f5;
    --color--bg__progress: #ededed;
    --color--bg__recommended: #f4f4f4;
    --color--bg__pressed: #f2f2f2;
    --color--bg__plugins-icon: #fff;
    --color--bg__button05: rgba(0,0,0,0.05);
    --color--bg__product_cmp: #fff;
    --color--sp__hover1: #dce1ea;
    --color--sp__hover2: #eaecf6;
    --color--sp__hover3: #dce1ea;
    --color--sp__hover4: rgba(0,0,0,0.05);
    --color--sp__hover5: #ffe1ff;
    --color--sp__hover6: #dce1ea;
    --color--sp__hover7: #f2f2f2;
    --color--sp__text-selection: rgba(86,93,255,0.24);
    --color--sp__text-selection2: rgba(47,156,255,0.3);
    --color--sp__component: #565dff;
    --color--sp__component-second: rgba(86,93,255,0.5);
    --color--sp__border1: rgba(0,0,0,0.1);
    --color--sp__border2: #565dff;
    --color--sp__border3: #e5e5e5;
    --color--sp__border02: rgba(0,0,0,0.2);
    --color--sp__border-secondary: #000;
    --color--sp__border-primary: #fff;
    --color--sp__fill: #fff;
    --color--sp__space-control-line: #f145ff;
    --color--sp__regular: #2f9cff;
    --color--sp__beta: #333;
    --color--sp__blue: #495af0;
    --color--sp__dialog-divider: #e5e5e5;
    --color--sp_team-project-border: #e5e5e5;
    --color--sp__bg-tag: #f2f2f2;
    --color--sp__shadow: rgba(0,0,0,0.05);
    --color--sp__slider: rgba(120,120,128,0.2);
    --color--sp__bg-func: rgba(86,93,255,0.05);
    --color--sp__border4: rgba(0,0,0,0.1);
    --color--sp__divider: #f5f5f5;
    --color--sp__bg-move: #e4e8ef;
    --color--sp__bg-success: #7ac23c;
    --color--sp__warn: #f2b133;
    --color--sp__arrow: #000;
    --color--bg__white: #fff;
    --color--sp__bg-import: #f2f2f2;
    --color--sp__bg-mask: rgba(0,0,0,0.5);
    --color--sp_overlay: #33353f;
    --coloe--sp__dialog: #fff;
    --color--sp__bg-publish-card: #f8f8f8;
    --color--sp__border5: #e6e6e6;
    --color--sp__bg-btn: rgba(0,0,0,0.02);
    --color--sp__border-cancel: rgba(0,0,0,0.2);
    --color--bg__bg-loading-btn: rgba(0,0,0,0.6);
    --color--sp__tag-menu: #eaecf6;
    --color--sp__tag-menu-bg: #fff;
    --color--sort-menu-bg: #fff;
    --color--sort-menu-border: #e2e2ea;
    --color--component-bg: rgba(53,57,141,0.03);
    --color--component-scrollbar: #c4c4c4;
    --color--sp__input-border: rgba(0,0,0,0.1);
    --color--sp__input-bg: #fff;
    --color--sp__cover-bg06: rgba(255,255,255,0.6);
    --color--sp__bg-hover: #dce1ea;
    --color--sp__input-bg2: #fff;
    --color--sp__panel-hover: #dce1ea;
    --color--sp__panel-bg: #fff;
    --color--sp__modal-footer-shadow: rgba(0,0,0,0.05);
    --color--sp_home_left_icon: #767676;
    --skeleton-color--bg: #f2f2f2;
    --skeleton-color--bg-primary: #e1e1e1;
    --skeleton-color--bg-content: #fff;
    --skeleton-color--border: #e5e5e5;
    --skeleton-color--viewport: #f8f8f8;
    --autolayout-constraints-current-box-color-bg: rgba(86,93,255,0.1);
    --autolayout-constraints-current-box-item-color-hover: rgba(86,93,255,0.3);
    --plugin-dropdown--bg: #fff;
    --plugin-dropdown--li__hover: #eaecf6;
    --color--multiplayer__dark1: #797dbc;
    --color--multiplayer__bright1: #696cfd;
    --scrollbar-thumb-bg: #d2d3d5;
    --quickframe--bg__active: rgba(0,0,0,0.03);
/*
	 * v2改版
	 */
    --v2--color-bg-brand-press: #245cdb;
    --v2--color-bg-brand-normal: #336fff;
    --v2--color-bg-brand-hover: #4e84fd;
    --v2--color-bg-brand-disable: #bacffd;
    --v2--color-brand-light: rgba(51,111,255,0.1);
    --v2--color-bg-danger-press: #c43232;
    --v2--color-bg-danger-normal: #f43529;
    --v2--color-bg-danger-hover: #f76565;
    --v2--color-bg-danger-disable: #fbb2b2;
    --v2--color-bg-success-normal: #00b42a;
    --v2--color-bg-warming-normal: #ff7d00;
    --v2--color-bg-info-normal: #2f9dfe;
    --v2--color-bg-bodybase: #edeef0;
    --v2--color-bg-body: #fff;
    --v2--color-bg-bodyoverlay: #f7f7f9;
    --v2--color-bg-hover: rgba(18,17,42,0.05);
    --v2--color-bg-press: rgba(18,17,42,0.07);
    --v2--color-bg-button-active: rgba(76,135,255,0.2);
    --v2--color-bg-button-active-hover: rgba(76,135,255,0.3);
    --v2--color-bg-button-normal: #fff;
    --v2--color-bg-floatbase: #edeef0;
    --v2--color-bg-float: #fff;
    --v2--color-bg-floatoverlay: #f7f7f9;
    --v2--color-border-primary: rgba(19,18,43,0.07);
    --v2--color-border-secondary: rgba(5,4,16,0.09);
    --v2--color-border-avatar: #fbfbfb;
    --v2--color-border-button: rgba(2,9,16,0.13);
    --v2--color-border-checkbox: #262626;
    --v2--color-border-float: rgba(6,6,31,0.09);
    --v2--color-border-primary: rgba(19,18,43,0.07);
    --v2--color-border-commentavatar: #336fff;
    --v2--color-border-brand-normal: #336fff;
    --v2--color-text-primary: #19191a;
    --v2--color-text-secondary: #555557;
    --v2--color-text-tertiary: #8b8c8f;
    --v2--color-text-quaternary: #b7b9bd;
    --v2--color-text-onfunctionandbrand: #fff;
    --v2--color-text-onfunctionandbrand-dissable: rgba(255,255,255,0.82);
    --v2--color-text-brand-ontips: #4c87ff;
    --v2--color-text-brand-press: #245cdb;
    --v2--color-text-brand-normal: #336fff;
    --v2--color-text-brand-hover: #4e84fd;
    --v2--color-text-brand-disable: #b8ceff;
    --v2--color-text-danger-press: #de1b25;
    --v2--color-text-danger-normal: #f43529;
    --v2--color-text-danger-hover: #f76970;
    --v2--color-text-danger-disable: #f9959a;
    --v2--color-text-success-normal: #41ab07;
    --v2--color-text-warming-normal: #f07400;
    --v2--color-text-info-normal: #2f9dfe;
    --v2--color-text-px-logo: #000;
    --v2--color-text-tag-brand: #336fff;
    --v2--color-text-tag-green: #41ae07;
    --v2--color-text-tag-red: #f43529;
    --v2--color-text-tag-yellow: #f27500;
    --v2--color-text-tag-blue: #2e9cfe;
    --v2--color-icon-primary: #414142;
    --v2--color-icon-secondary: #a2a4a8;
    --v2--color-icon-tertiary: #d0d2d4;
    --v2--color-icon-onfunctionandbrand: #fff;
    --v2--color-icon-brand-normal: #336fff;
    --v2--color-icon-brand-press: #245cdb;
    --v2--color-icon-brand-hover: #4e84fd;
    --v2--color-icon-brand-dissable: #bacffd;
    --v2--color-icon-brand-tertiary: #c8d9fe;
    --v2--color-icon-quaternary: #9da7b7;
    --v2--color-bg-x-navigation: #fff;
    --v2--color-bg-x-navigation-hover: rgba(18,17,43,0.03);
    --v2--color-bg-x-navigation-active: rgba(18,17,43,0.07);
    --v2--color-bg-mask-primary: rgba(6,8,10,0.57);
    --v2--color-bg-mask-secondary: rgba(6,13,20,0.18);
    --v2--color-bg-tips-primary: rgba(14,15,17,0.9);
    --v2--color-bg-scrollbar-normal: rgba(6,13,20,0.18);
    --v2--color-bg-scrollbar-hover: rgba(4,8,12,0.37);
    --v2--color-border-input: rgba(5,4,16,0.09);
    --v2--color-border-input-focus: #336fff;
    --v2--color-border-input-error: #f43529;
    --v2--color-bg-input: #f7f7f9;
    --v2--color-bg-input-hover: #f3f3f5;
    --v2--color-bg-input-disable: rgba(18,17,42,0.03);
    --v2--color-file-menu-fill: rgba(255,255,255,0.8);
    --v2--color-file-shadow: rgba(128,128,128,0.1);
    --v2--color-box-shadow: rgba(128,128,128,0.1);
    --v2--color-scrollbar: #d2d3d5;
    --v2--color-cover-mask-light: transparent;
    --v2--color-multiplayer-brand: #336fff;
    --v2--color-multiplayer-purple: #945dfa;
    --v2--color-multiplayer-orange: #fe9935;
    --v2--color-multiplayer-cyan: #07c6c2;
    --v2--color-multiplayer-green: #4bcb08;
    --v2--color-multiplayer-blue: #2e9cfe;
    --v2--color-multiplayer-red: #f76b71;
    --v2--color-multiplayer-magenta: #fe59b4;
    --v2--color-multiplayer-yellow: #daab2b;
    --v2--color-border-x-canvasobject: #336fff;
    --v2--color-border-x-canvascomponents: #8848f9;
    --v2--color-border-x-canvasslice: #8b8c8f;
    --v2--color-border-x-canvasedit: #717273;
    --v2--color-border-x-controlline: #f10a91;
    --v2--color-border-x-spacingmeasurement: #f42932;
    --v2--color-bg-x-canvas: #e6e6e6;
    --v2--color-bg-px-canvas-loading: #f7f7f9;
    --v2--color-bg-px-canvastext-active: rgba(46,156,254,0.4);
    --v2--color-bg-loading-primary: #555557;
    --v2--color-bg-loading-secondary: rgba(18,17,42,0.07);
    --v2--color-bg-x-layer-primary: #e5edff;
    --v2--color-bg-x-layer-secondary: #f8faff;
    --v2--color-text-x-components-quaternary: #d7d3fe;
    --v2--color-text-x-components-primary: #8948f9;
    --v2--color-icon-x-components-quaternary: #d6d2fe;
    --v2--color-bg-optionstrip-normal: #f7f7f9;
    --v2--color-bg-optionstrip-active: #fff;
    --v2--color-bg-slider: #edeef0;
    --v2--color-bg-slider-active: #336fff;
    --v2--color-bg-onslider-normal: #fff;
    --v2--color-bg-onslider-active: #336fff;
    --v2--color-bg-stepper: #fff;
    --v2--color-icon-onstepper-normal: #cfd1d3;
    --v2--color-icon-onstepper-hover: #19191a;
    --v2--color-bg-dropdown: #fff;
    --v2--color-border-dropdown: rgba(18,17,42,0.03);
    --v2--color-bg-popover: #fff;
    --v2--color-border-popover: rgba(19,18,43,0.03);
    --v2--color-bg-toast: rgba(15,16,18,0.96);
    --v2--color-border-toast: #212121;
    --v2--color-bg-page-hover: #fbfbfb;
    --v2--color-bg-page-active: rgba(19,18,43,0.05);
    --v2--color-loading-cover-water: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 51.76%, rgba(255,255,255,0) 100%);
    --v2--color-bg-px-tableheader: #fbfbfb;
    --v2--color-bg-px-multiplestyletext: #f7f7f9;
    --v2--color-bg-tag-brand-primary: #336fff;
    --v2--color-bg-tag-brand-secondary: rgba(51,111,255,0.1);
    --v2--color-bg-tag-green-primary: #41ae07;
    --v2--color-bg-tag-green-secondary: rgba(65,174,7,0.1);
    --v2--color-bg-tag-red-primary: #f43529;
    --v2--color-bg-tag-red-secondary: rgba(244,53,41,0.1);
    --v2--color-bg-tag-yellow-primary: #f27500;
    --v2--color-bg-tag-yellow-secondary: rgba(242,117,0,0.1);
    --v2--color-bg-tag-blue-primary: #2e9cfe;
    --v2--color-bg-tag-blue-secondary: rgba(46,156,254,0.1);
    --v2--color-bg-banner-light-blue: #d5f1ff;
    --v2--color-bg-px-chat-primary: #e5edff;
    --v2--color-bg-px-chat-secondary: #f3f3f5;
  }
}
@media (prefers-color-scheme: dark) {
  :root[data-theme-mode='auto'] {
    --color--brand: #565dff;
    --color--sub__danger: #ff3c3c;
    --color--sub__tips: #f12d30;
    --color--text__primary: #fff;
    --color--text__second1: rgba(255,255,255,0.7);
    --color--text__second2: rgba(255,255,255,0.6);
    --color--text__tertiary: rgba(255,255,255,0.4);
    --color--text__quaternary: rgba(255,255,255,0.2);
    --color--text__contrary: #000;
    --color--text__special: #9398ff;
    --color--text__second06: rgba(255,255,255,0.6);
    --color--text__second08: #fff;
    --color--text--color04: rgba(255,255,255,0.4);
    --color--text--color05: rgba(255,255,255,0.4);
    --color--text--color06: rgba(255,255,255,0.5);
    --color--text__red1: rgba(254,0,0,0.8);
    --color--test__tip2: rgba(255,255,255,0.7);
    --color--test__tip3: #fff;
    --color--text__cancel: #fff;
    --color--text__empty: #fff;
    --color--text--component: #fff;
    --color--icon__primary: #fff;
    --color--icon__second1: rgba(255,255,255,0.4);
    --color--icon__tertiary: rgba(255,255,255,0.2);
    --color--icon__quaternary: #fff;
    --color--icon__arrow: rbga(255, 255, 255, 1);
    --color--icon__contrary: #000;
    --color--icon__toolbar-icon-fill2: rgba(255,255,255,0.4);
    --color--icon_circle03: rgba(255,255,255,0.3);
    --color--icon__block: rgba(0,0,0,0.24);
    --color--icon__checkbox: #fff;
    --color--icon__checkbox-all: #565dff;
    --color--icon__checkbox-little: rgba(255,255,255,0.4);
    --color--icon__checkbox-little-disabled: rgba(255,255,255,0.2);
    --color--icon__checkbox-non: rgba(255,255,255,0.8);
    --color--icon__down: #fff;
    --color--bg__primary: #343141;
    --color--bg__second1-edit: #2a2735;
    --color--bg__second2-home: #0f0d13;
    --color--bg__toolbar: #2a2735;
    --color--bg__canvas: #0f0d13;
    --color--bg__split1: #3d3a47;
    --color--bg__split2: #504e59;
    --color--bg__second2: #f5f5f5;
    --color--bg__ruler: #1b1822;
    --color--bg__button1: #fff;
    --color--bg__button2: rgba(255,255,255,0.1);
    --color--bg__button3: rgba(255,255,255,0.45);
    --color--bg__button4: #fff;
    --color--bg__button02: rgba(0,0,0,0.2);
    --color--bg__button03: rgba(255,255,255,0.3);
    --color--bg__button5: #565dff;
    --color--bg__tint: rgba(255,255,255,0.16);
    --color--bg__progress: #565656;
    --color--bg__recommended: #444151;
    --color--bg__pressed: #f2f2f2;
    --color--bg__plugins-icon: #1d1926;
    --color--bg__button05: rgba(255,255,255,0.05);
    --color--bg__product_cmp: #343141;
    --color--sp__hover1: #5f5f6b;
    --color--sp__hover2: #3d3b48;
    --color--sp__hover3: #4f4d5a;
    --color--sp__hover4: rgba(255,255,255,0.3);
    --color--sp__hover5: #ffe1ff;
    --color--sp__hover6: #dce1ea;
    --color--sp__hover7: #3d3a46;
    --color--sp__text-selection: rgba(147,152,255,0.5);
    --color--sp__text-selection2: rgba(47,156,255,0.3);
    --color--sp__component: #9398ff;
    --color--sp__component-second: rgba(147,152,255,0.6);
    --color--sp__border1: rgba(172,172,172,0.1);
    --color--sp__border2: #9398ff;
    --color--sp__border3: rgba(255,255,255,0.2);
    --color--sp__border02: rgba(255,255,255,0.2);
    --color--sp__border-secondary: #fff;
    --color--sp__border-primary: #000;
    --color--sp__fill: #3d3a46;
    --color--sp__space-control-line: #f145ff;
    --color--sp__regular: #2f9cff;
    --color--sp__beta: #fff;
    --color--sp__blue: #495af0;
    --color--sp__dialog-divider: #e5e5e5;
    --color--sp_team-project-border: #3d3a47;
    --color--sp__bg-tag: #2a2735;
    --color--sp__shadow: rgba(255,255,255,0.05);
    --color--sp__slider: rgba(120,120,128,0.8);
    --color--sp__bg-func: rgba(0,0,0,0.16);
    --color--sp__border4: rgba(255,255,255,0.1);
    --color--sp__divider: #3d3a47;
    --color--sp__bg-move: #56555a;
    --color--sp__bg-success: #7ac23c;
    --color--sp__warn: #f2b133;
    --color--sp__arrow: #9b9b9b;
    --color--bg__white: #fff;
    --color--sp__bg-import: rgba(0,0,0,0.2);
    --color--sp__bg-mask: rgba(255,255,255,0.5);
    --color--sp_overlay: #fff;
    --coloe--sp__dialog: #343141;
    --color--sp__bg-publish-card: #3d3a47;
    --color--sp__border5: #3d3a47;
    --color--sp__bg-btn: transparent;
    --color--sp__border-cancel: #fff;
    --color--bg__bg-loading-btn: #716e7a;
    --color--sp__tag-menu: rgba(172,172,172,0.1);
    --color--sp__tag-menu-bg: #2a2735;
    --color--sort-menu-bg: rgba(172,172,172,0.1);
    --color--sort-menu-border: rgba(255,255,255,0.1);
    --color--component-bg: rgba(172,172,172,0.1);
    --color--component-scrollbar: rgba(255,255,255,0.2);
    --color--sp__input-border: rgba(172,172,172,0.1);
    --color--sp__input-bg: rgba(172,172,172,0.1);
    --color--sp__cover-bg06: rgba(0,0,0,0.6);
    --color--sp__bg-hover: rgba(220,225,234,0.2);
    --color--sp__input-bg2: #3d3a46;
    --color--sp__panel-hover: #343141;
    --color--sp__panel-bg: #3d3a46;
    --color--sp__modal-footer-shadow: rgba(255,255,255,0.1);
    --color--sp_home_left_icon: #333;
    --skeleton-color--bg: #0f0d13;
    --skeleton-color--bg-primary: #3d3a47;
    --skeleton-color--bg-content: #2a2735;
    --skeleton-color--border: #3d3a47;
    --skeleton-color--viewport: #0f0d13;
    --autolayout-constraints-current-box-color-bg: rgba(86,93,255,0.3);
    --autolayout-constraints-current-box-item-color-hover: #565dff;
    --plugin-dropdown--bg: #2a2735;
    --plugin-dropdown--li__hover: #343141;
    --color--multiplayer__dark1: #797dbc;
    --color--multiplayer__bright1: #696cfd;
    --scrollbar-thumb-bg: #424242;
    --quickframe--bg__active: rgba(255,255,255,0.03);
/*
	 * v2改版
	 */
    --v2--color-bg-brand-press: #2e64d1;
    --v2--color-bg-brand-normal: #4c87ff;
    --v2--color-bg-brand-hover: #709fff;
    --v2--color-bg-brand-disable: rgba(76,135,255,0.2);
    --v2--color-brand-light: rgba(76,135,255,0.1);
    --v2--color-bg-danger-press: #c43232;
    --v2--color-bg-danger-normal: #f43529;
    --v2--color-bg-danger-hover: #f76565;
    --v2--color-bg-danger-disable: #fbb2b2;
    --v2--color-bg-success-normal: #00b42a;
    --v2--color-bg-warming-normal: #ff7d00;
    --v2--color-bg-info-normal: #2f9dfe;
    --v2--color-bg-bodybase: #19191a;
    --v2--color-bg-body: #212121;
    --v2--color-bg-bodyoverlay: #303030;
    --v2--color-bg-hover: rgba(255,255,255,0.19);
    --v2--color-bg-press: rgba(255,255,255,0.26);
    --v2--color-bg-button-active: rgba(76,135,255,0.2);
    --v2--color-bg-button-active-hover: rgba(76,135,255,0.35);
    --v2--color-bg-button-normal: rgba(255,255,255,0.1);
    --v2--color-bg-floatbase: #19191a;
    --v2--color-bg-float: #303030;
    --v2--color-bg-floatoverlay: #414142;
    --v2--color-border-primary: rgba(255,255,255,0.1);
    --v2--color-border-secondary: rgba(255,255,255,0.19);
    --v2--color-border-avatar: rgba(255,255,255,0.1);
    --v2--color-border-button: rgba(255,255,255,0.19);
    --v2--color-border-checkbox: rgba(255,255,255,0.55);
    --v2--color-border-float: rgba(255,255,255,0.19);
    --v2--color-border-primary: rgba(255,255,255,0.1);
    --v2--color-border-commentavatar: #4c87ff;
    --v2--color-border-brand-normal: #336fff;
    --v2--color-text-primary: rgba(255,255,255,0.91);
    --v2--color-text-secondary: rgba(255,255,255,0.64);
    --v2--color-text-tertiary: rgba(255,255,255,0.33);
    --v2--color-text-quaternary: rgba(255,255,255,0.19);
    --v2--color-text-onfunctionandbrand: rgba(255,255,255,0.91);
    --v2--color-text-onfunctionandbrand-dissable: rgba(255,255,255,0.19);
    --v2--color-text-brand-ontips: #4c87ff;
    --v2--color-text-brand-press: #2e64d1;
    --v2--color-text-brand-normal: #4c87ff;
    --v2--color-text-brand-hover: #709fff;
    --v2--color-text-brand-disable: rgba(76,135,255,0.2);
    --v2--color-text-danger-press: #de1b25;
    --v2--color-text-danger-normal: #f43529;
    --v2--color-text-danger-hover: #f76970;
    --v2--color-text-danger-disable: #f9959a;
    --v2--color-text-success-normal: #41ab07;
    --v2--color-text-warming-normal: #f07400;
    --v2--color-text-info-normal: #2f9dfe;
    --v2--color-text-px-logo: #fff;
    --v2--color-text-tag-brand: #4c87ff;
    --v2--color-text-tag-green: #41ae07;
    --v2--color-text-tag-red: #f43529;
    --v2--color-text-tag-yellow: #f27500;
    --v2--color-text-tag-blue: #2e9cfe;
    --v2--color-icon-primary: rgba(255,255,255,0.82);
    --v2--color-icon-secondary: rgba(255,255,255,0.55);
    --v2--color-icon-tertiary: rgba(255,255,255,0.33);
    --v2--color-icon-onfunctionandbrand: rgba(255,255,255,0.82);
    --v2--color-icon-brand-normal: #4c87ff;
    --v2--color-icon-brand-press: #2e64d1;
    --v2--color-icon-brand-hover: #709fff;
    --v2--color-icon-brand-dissable: rgba(76,135,255,0.2);
    --v2--color-icon-brand-tertiary: rgba(91,102,255,0.2);
    --v2--color-icon-quaternary: rgba(255,255,255,0.45);
    --v2--color-bg-x-navigation: #212121;
    --v2--color-bg-x-navigation-hover: rgba(255,255,255,0.13);
    --v2--color-bg-x-navigation-active: rgba(255,255,255,0.19);
    --v2--color-bg-mask-primary: rgba(6,8,10,0.57);
    --v2--color-bg-mask-secondary: rgba(6,13,20,0.18);
    --v2--color-bg-tips-primary: #414142;
    --v2--color-bg-scrollbar-normal: rgba(255,255,255,0.26);
    --v2--color-bg-scrollbar-hover: rgba(255,255,255,0.45);
    --v2--color-border-input: rgba(255,255,255,0.19);
    --v2--color-border-input-focus: #4c87ff;
    --v2--color-border-input-error: #f43529;
    --v2--color-bg-input: rgba(255,255,255,0.08);
    --v2--color-bg-input-hover: rgba(255,255,255,0.19);
    --v2--color-bg-input-disable: rgba(255,255,255,0.1);
    --v2--color-file-menu-fill: rgba(128,128,128,0.8);
    --v2--color-file-shadow: rgba(0,0,0,0.3);
    --v2--color-box-shadow: rgba(0,0,0,0.4);
    --v2--color-scrollbar: #424242;
    --v2--color-cover-mask-light: rgba(5,4,16,0.09);
    --v2--color-multiplayer-brand: #336fff;
    --v2--color-multiplayer-purple: #945dfa;
    --v2--color-multiplayer-orange: #fe9935;
    --v2--color-multiplayer-cyan: #07c6c2;
    --v2--color-multiplayer-green: #4bcb08;
    --v2--color-multiplayer-blue: #2e9cfe;
    --v2--color-multiplayer-red: #f76b71;
    --v2--color-multiplayer-magenta: #fe59b4;
    --v2--color-multiplayer-yellow: #daab2b;
    --v2--color-border-x-canvasobject: #336fff;
    --v2--color-border-x-canvascomponents: #af8bfd;
    --v2--color-border-x-canvasslice: #8b8c8f;
    --v2--color-border-x-canvasedit: #717273;
    --v2--color-border-x-controlline: #f10a91;
    --v2--color-border-x-spacingmeasurement: #f42932;
    --v2--color-bg-x-canvas: #1a1a1a;
    --v2--color-bg-px-canvas-loading: #1a1a1a;
    --v2--color-bg-px-canvastext-active: rgba(46,156,254,0.4);
    --v2--color-bg-loading-primary: #d0d2d4;
    --v2--color-bg-loading-secondary: rgba(255,255,255,0.08);
    --v2--color-bg-x-layer-primary: rgba(109,126,255,0.35);
    --v2--color-bg-x-layer-secondary: rgba(109,126,255,0.2);
    --v2--color-text-x-components-quaternary: rgba(175,139,253,0.3);
    --v2--color-text-x-components-primary: #af8bfd;
    --v2--color-icon-x-components-quaternary: rgba(175,139,253,0.3);
    --v2--color-bg-optionstrip-normal: rgba(255,255,255,0.08);
    --v2--color-bg-optionstrip-active: #555557;
    --v2--color-bg-slider: #414142;
    --v2--color-bg-slider-active: #4c87ff;
    --v2--color-bg-onslider-normal: #dedfe0;
    --v2--color-bg-onslider-active: #4c87ff;
    --v2--color-bg-stepper: #555557;
    --v2--color-icon-onstepper-normal: #b7b9bd;
    --v2--color-icon-onstepper-hover: #fff;
    --v2--color-bg-dropdown: #303030;
    --v2--color-border-dropdown: rgba(255,255,255,0.05);
    --v2--color-bg-popover: #262626;
    --v2--color-border-popover: rgba(255,255,255,0.05);
    --v2--color-bg-toast: rgba(15,16,18,0.96);
    --v2--color-border-toast: rgba(255,255,255,0.05);
    --v2--color-bg-page-hover: rgba(255,255,255,0.05);
    --v2--color-bg-page-active: rgba(255,255,255,0.13);
    --v2--color-loading-cover-water: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 51.76%, rgba(0,0,0,0) 100%);
    --v2--color-bg-px-tableheader: rgba(255,255,255,0.05);
    --v2--color-bg-px-multiplestyletext: #414142;
    --v2--color-bg-tag-brand-primary: #4c87ff;
    --v2--color-bg-tag-brand-secondary: rgba(76,135,255,0.1);
    --v2--color-bg-tag-green-primary: #41ae07;
    --v2--color-bg-tag-green-secondary: rgba(65,174,7,0.1);
    --v2--color-bg-tag-red-primary: #f43529;
    --v2--color-bg-tag-red-secondary: rgba(244,53,41,0.1);
    --v2--color-bg-tag-yellow-primary: #f27500;
    --v2--color-bg-tag-yellow-secondary: rgba(242,117,0,0.1);
    --v2--color-bg-tag-blue-primary: #2e9cfe;
    --v2--color-bg-tag-blue-secondary: rgba(46,156,254,0.1);
    --v2--color-bg-banner-light-blue: #d5f1ff;
    --v2--color-bg-px-chat-primary: #0d2a5a;
    --v2--color-bg-px-chat-secondary: #414142;
  }
}
:root[data-theme-mode='light'],
:root {
  --color--brand: #565dff;
  --color--sub__danger: #ff3c3c;
  --color--sub__tips: #f12d30;
  --color--text__primary: #000;
  --color--text__second1: rgba(0,0,0,0.4);
  --color--text__second2: rgba(0,0,0,0.5);
  --color--text__tertiary: rgba(0,0,0,0.3);
  --color--text__quaternary: rgba(0,0,0,0.2);
  --color--text__contrary: #fff;
  --color--text__special: #565dff;
  --color--text__second06: rgba(0,0,0,0.6);
  --color--text__second08: rgba(0,0,0,0.8);
  --color--text__red1: rgba(254,0,0,0.8);
  --color--test__tip2: #343141;
  --color--test__tip3: #343141;
  --color--text__cancel: rgba(0,0,0,0.6);
  --color--text__empty: #636363;
  --color--text--component: rgba(0,0,0,0.72);
  --color--text--color04: rgba(0,0,0,0.4);
  --color--text--color05: rgba(0,0,0,0.3);
  --color--text--color06: rgba(0,0,0,0.4);
  --color--icon__primary: #000;
  --color--icon__second1: rgba(0,0,0,0.4);
  --color--icon__tertiary: rgba(0,0,0,0.2);
  --color--icon__quaternary: #333;
  --color--icon__contrary: #fff;
  --color--icon__arrow: rbga(0, 0, 0, 0.4);
  --color--icon__toolbar-icon-fill2: rgba(0,0,0,0.05);
  --color--icon_circle03: rgba(0,0,0,0.3);
  --color--icon__block: rgba(255,255,255,0.56);
  --color--icon__checkbox: rgba(0,0,0,0.8);
  --color--icon__checkbox-all: #565dff;
  --color--icon__checkbox-little: #000;
  --color--icon__checkbox-little-disabled: rgba(0,0,0,0.2);
  --color--icon__checkbox-non: #8b8c8f;
  --color--icon__down: rgba(0,0,0,0.4);
  --color--bg__primary: #fff;
  --color--bg__second1-edit: #f2f2f2;
  --color--bg__second2-home: #f2f2f2;
  --color--bg__toolbar: #fff;
  --color--bg__canvas: #f8f8f8;
  --color--bg__split1: #e5e5e5;
  --color--bg__split2: #cdcdcd;
  --color--bg__second2: #f5f5f5;
  --color--bg__ruler: #fff;
  --color--bg__button1: #000;
  --color--bg__button2: rgba(0,0,0,0.1);
  --color--bg__button3: rgba(0,0,0,0.6);
  --color--bg__button4: rgba(0,0,0,0.4);
  --color--bg__button02: rgba(0,0,0,0.2);
  --color--bg__button03: rgba(0,0,0,0.3);
  --color--bg__button5: #565dff;
  --color--bg__tint: #f5f5f5;
  --color--bg__progress: #ededed;
  --color--bg__recommended: #f4f4f4;
  --color--bg__pressed: #f2f2f2;
  --color--bg__plugins-icon: #fff;
  --color--bg__button05: rgba(0,0,0,0.05);
  --color--bg__product_cmp: #fff;
  --color--sp__hover1: #dce1ea;
  --color--sp__hover2: #eaecf6;
  --color--sp__hover3: #dce1ea;
  --color--sp__hover4: rgba(0,0,0,0.05);
  --color--sp__hover5: #ffe1ff;
  --color--sp__hover6: #dce1ea;
  --color--sp__hover7: #f2f2f2;
  --color--sp__text-selection: rgba(86,93,255,0.24);
  --color--sp__text-selection2: rgba(47,156,255,0.3);
  --color--sp__component: #565dff;
  --color--sp__component-second: rgba(86,93,255,0.5);
  --color--sp__border1: rgba(0,0,0,0.1);
  --color--sp__border2: #565dff;
  --color--sp__border3: #e5e5e5;
  --color--sp__border02: rgba(0,0,0,0.2);
  --color--sp__border-secondary: #000;
  --color--sp__border-primary: #fff;
  --color--sp__fill: #fff;
  --color--sp__space-control-line: #f145ff;
  --color--sp__regular: #2f9cff;
  --color--sp__beta: #333;
  --color--sp__blue: #495af0;
  --color--sp__dialog-divider: #e5e5e5;
  --color--sp_team-project-border: #e5e5e5;
  --color--sp__bg-tag: #f2f2f2;
  --color--sp__shadow: rgba(0,0,0,0.05);
  --color--sp__slider: rgba(120,120,128,0.2);
  --color--sp__bg-func: rgba(86,93,255,0.05);
  --color--sp__border4: rgba(0,0,0,0.1);
  --color--sp__divider: #f5f5f5;
  --color--sp__bg-move: #e4e8ef;
  --color--sp__bg-success: #7ac23c;
  --color--sp__warn: #f2b133;
  --color--sp__arrow: #000;
  --color--bg__white: #fff;
  --color--sp__bg-import: #f2f2f2;
  --color--sp__bg-mask: rgba(0,0,0,0.5);
  --color--sp_overlay: #33353f;
  --coloe--sp__dialog: #fff;
  --color--sp__bg-publish-card: #f8f8f8;
  --color--sp__border5: #e6e6e6;
  --color--sp__bg-btn: rgba(0,0,0,0.02);
  --color--sp__border-cancel: rgba(0,0,0,0.2);
  --color--bg__bg-loading-btn: rgba(0,0,0,0.6);
  --color--sp__tag-menu: #eaecf6;
  --color--sp__tag-menu-bg: #fff;
  --color--sort-menu-bg: #fff;
  --color--sort-menu-border: #e2e2ea;
  --color--component-bg: rgba(53,57,141,0.03);
  --color--component-scrollbar: #c4c4c4;
  --color--sp__input-border: rgba(0,0,0,0.1);
  --color--sp__input-bg: #fff;
  --color--sp__cover-bg06: rgba(255,255,255,0.6);
  --color--sp__bg-hover: #dce1ea;
  --color--sp__input-bg2: #fff;
  --color--sp__panel-hover: #dce1ea;
  --color--sp__panel-bg: #fff;
  --color--sp__modal-footer-shadow: rgba(0,0,0,0.05);
  --color--sp_home_left_icon: #767676;
  --skeleton-color--bg: #f2f2f2;
  --skeleton-color--bg-primary: #e1e1e1;
  --skeleton-color--bg-content: #fff;
  --skeleton-color--border: #e5e5e5;
  --skeleton-color--viewport: #f8f8f8;
  --autolayout-constraints-current-box-color-bg: rgba(86,93,255,0.1);
  --autolayout-constraints-current-box-item-color-hover: rgba(86,93,255,0.3);
  --plugin-dropdown--bg: #fff;
  --plugin-dropdown--li__hover: #eaecf6;
  --color--multiplayer__dark1: #797dbc;
  --color--multiplayer__bright1: #696cfd;
  --scrollbar-thumb-bg: #d2d3d5;
  --quickframe--bg__active: rgba(0,0,0,0.03);
/*
	 * v2改版
	 */
  --v2--color-bg-brand-press: #245cdb;
  --v2--color-bg-brand-normal: #336fff;
  --v2--color-bg-brand-hover: #4e84fd;
  --v2--color-bg-brand-disable: #bacffd;
  --v2--color-brand-light: rgba(51,111,255,0.1);
  --v2--color-bg-danger-press: #c43232;
  --v2--color-bg-danger-normal: #f43529;
  --v2--color-bg-danger-hover: #f76565;
  --v2--color-bg-danger-disable: #fbb2b2;
  --v2--color-bg-success-normal: #00b42a;
  --v2--color-bg-warming-normal: #ff7d00;
  --v2--color-bg-info-normal: #2f9dfe;
  --v2--color-bg-bodybase: #edeef0;
  --v2--color-bg-body: #fff;
  --v2--color-bg-bodyoverlay: #f7f7f9;
  --v2--color-bg-hover: rgba(18,17,42,0.05);
  --v2--color-bg-press: rgba(18,17,42,0.07);
  --v2--color-bg-button-active: rgba(76,135,255,0.2);
  --v2--color-bg-button-active-hover: rgba(76,135,255,0.3);
  --v2--color-bg-button-normal: #fff;
  --v2--color-bg-floatbase: #edeef0;
  --v2--color-bg-float: #fff;
  --v2--color-bg-floatoverlay: #f7f7f9;
  --v2--color-border-primary: rgba(19,18,43,0.07);
  --v2--color-border-secondary: rgba(5,4,16,0.09);
  --v2--color-border-avatar: #fbfbfb;
  --v2--color-border-button: rgba(2,9,16,0.13);
  --v2--color-border-checkbox: #262626;
  --v2--color-border-float: rgba(6,6,31,0.09);
  --v2--color-border-primary: rgba(19,18,43,0.07);
  --v2--color-border-commentavatar: #336fff;
  --v2--color-border-brand-normal: #336fff;
  --v2--color-text-primary: #19191a;
  --v2--color-text-secondary: #555557;
  --v2--color-text-tertiary: #8b8c8f;
  --v2--color-text-quaternary: #b7b9bd;
  --v2--color-text-onfunctionandbrand: #fff;
  --v2--color-text-onfunctionandbrand-dissable: rgba(255,255,255,0.82);
  --v2--color-text-brand-ontips: #4c87ff;
  --v2--color-text-brand-press: #245cdb;
  --v2--color-text-brand-normal: #336fff;
  --v2--color-text-brand-hover: #4e84fd;
  --v2--color-text-brand-disable: #b8ceff;
  --v2--color-text-danger-press: #de1b25;
  --v2--color-text-danger-normal: #f43529;
  --v2--color-text-danger-hover: #f76970;
  --v2--color-text-danger-disable: #f9959a;
  --v2--color-text-success-normal: #41ab07;
  --v2--color-text-warming-normal: #f07400;
  --v2--color-text-info-normal: #2f9dfe;
  --v2--color-text-px-logo: #000;
  --v2--color-text-tag-brand: #336fff;
  --v2--color-text-tag-green: #41ae07;
  --v2--color-text-tag-red: #f43529;
  --v2--color-text-tag-yellow: #f27500;
  --v2--color-text-tag-blue: #2e9cfe;
  --v2--color-icon-primary: #414142;
  --v2--color-icon-secondary: #a2a4a8;
  --v2--color-icon-tertiary: #d0d2d4;
  --v2--color-icon-onfunctionandbrand: #fff;
  --v2--color-icon-brand-normal: #336fff;
  --v2--color-icon-brand-press: #245cdb;
  --v2--color-icon-brand-hover: #4e84fd;
  --v2--color-icon-brand-dissable: #bacffd;
  --v2--color-icon-brand-tertiary: #c8d9fe;
  --v2--color-icon-quaternary: #9da7b7;
  --v2--color-bg-x-navigation: #fff;
  --v2--color-bg-x-navigation-hover: rgba(18,17,43,0.03);
  --v2--color-bg-x-navigation-active: rgba(18,17,43,0.07);
  --v2--color-bg-mask-primary: rgba(6,8,10,0.57);
  --v2--color-bg-mask-secondary: rgba(6,13,20,0.18);
  --v2--color-bg-tips-primary: rgba(14,15,17,0.9);
  --v2--color-bg-scrollbar-normal: rgba(6,13,20,0.18);
  --v2--color-bg-scrollbar-hover: rgba(4,8,12,0.37);
  --v2--color-border-input: rgba(5,4,16,0.09);
  --v2--color-border-input-focus: #336fff;
  --v2--color-border-input-error: #f43529;
  --v2--color-bg-input: #f7f7f9;
  --v2--color-bg-input-hover: #f3f3f5;
  --v2--color-bg-input-disable: rgba(18,17,42,0.03);
  --v2--color-file-menu-fill: rgba(255,255,255,0.8);
  --v2--color-file-shadow: rgba(128,128,128,0.1);
  --v2--color-box-shadow: rgba(128,128,128,0.1);
  --v2--color-scrollbar: #d2d3d5;
  --v2--color-cover-mask-light: transparent;
  --v2--color-multiplayer-brand: #336fff;
  --v2--color-multiplayer-purple: #945dfa;
  --v2--color-multiplayer-orange: #fe9935;
  --v2--color-multiplayer-cyan: #07c6c2;
  --v2--color-multiplayer-green: #4bcb08;
  --v2--color-multiplayer-blue: #2e9cfe;
  --v2--color-multiplayer-red: #f76b71;
  --v2--color-multiplayer-magenta: #fe59b4;
  --v2--color-multiplayer-yellow: #daab2b;
  --v2--color-border-x-canvasobject: #336fff;
  --v2--color-border-x-canvascomponents: #8848f9;
  --v2--color-border-x-canvasslice: #8b8c8f;
  --v2--color-border-x-canvasedit: #717273;
  --v2--color-border-x-controlline: #f10a91;
  --v2--color-border-x-spacingmeasurement: #f42932;
  --v2--color-bg-x-canvas: #e6e6e6;
  --v2--color-bg-px-canvas-loading: #f7f7f9;
  --v2--color-bg-px-canvastext-active: rgba(46,156,254,0.4);
  --v2--color-bg-loading-primary: #555557;
  --v2--color-bg-loading-secondary: rgba(18,17,42,0.07);
  --v2--color-bg-x-layer-primary: #e5edff;
  --v2--color-bg-x-layer-secondary: #f8faff;
  --v2--color-text-x-components-quaternary: #d7d3fe;
  --v2--color-text-x-components-primary: #8948f9;
  --v2--color-icon-x-components-quaternary: #d6d2fe;
  --v2--color-bg-optionstrip-normal: #f7f7f9;
  --v2--color-bg-optionstrip-active: #fff;
  --v2--color-bg-slider: #edeef0;
  --v2--color-bg-slider-active: #336fff;
  --v2--color-bg-onslider-normal: #fff;
  --v2--color-bg-onslider-active: #336fff;
  --v2--color-bg-stepper: #fff;
  --v2--color-icon-onstepper-normal: #cfd1d3;
  --v2--color-icon-onstepper-hover: #19191a;
  --v2--color-bg-dropdown: #fff;
  --v2--color-border-dropdown: rgba(18,17,42,0.03);
  --v2--color-bg-popover: #fff;
  --v2--color-border-popover: rgba(19,18,43,0.03);
  --v2--color-bg-toast: rgba(15,16,18,0.96);
  --v2--color-border-toast: #212121;
  --v2--color-bg-page-hover: #fbfbfb;
  --v2--color-bg-page-active: rgba(19,18,43,0.05);
  --v2--color-loading-cover-water: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 51.76%, rgba(255,255,255,0) 100%);
  --v2--color-bg-px-tableheader: #fbfbfb;
  --v2--color-bg-px-multiplestyletext: #f7f7f9;
  --v2--color-bg-tag-brand-primary: #336fff;
  --v2--color-bg-tag-brand-secondary: rgba(51,111,255,0.1);
  --v2--color-bg-tag-green-primary: #41ae07;
  --v2--color-bg-tag-green-secondary: rgba(65,174,7,0.1);
  --v2--color-bg-tag-red-primary: #f43529;
  --v2--color-bg-tag-red-secondary: rgba(244,53,41,0.1);
  --v2--color-bg-tag-yellow-primary: #f27500;
  --v2--color-bg-tag-yellow-secondary: rgba(242,117,0,0.1);
  --v2--color-bg-tag-blue-primary: #2e9cfe;
  --v2--color-bg-tag-blue-secondary: rgba(46,156,254,0.1);
  --v2--color-bg-banner-light-blue: #d5f1ff;
  --v2--color-bg-px-chat-primary: #e5edff;
  --v2--color-bg-px-chat-secondary: #f3f3f5;
}
:root[data-theme-mode='dark'] {
  --color--brand: #565dff;
  --color--sub__danger: #ff3c3c;
  --color--sub__tips: #f12d30;
  --color--text__primary: #fff;
  --color--text__second1: rgba(255,255,255,0.7);
  --color--text__second2: rgba(255,255,255,0.6);
  --color--text__tertiary: rgba(255,255,255,0.4);
  --color--text__quaternary: rgba(255,255,255,0.2);
  --color--text__contrary: #000;
  --color--text__special: #9398ff;
  --color--text__second06: rgba(255,255,255,0.6);
  --color--text__second08: #fff;
  --color--text--color04: rgba(255,255,255,0.4);
  --color--text--color05: rgba(255,255,255,0.4);
  --color--text--color06: rgba(255,255,255,0.5);
  --color--text__red1: rgba(254,0,0,0.8);
  --color--test__tip2: rgba(255,255,255,0.7);
  --color--test__tip3: #fff;
  --color--text__cancel: #fff;
  --color--text__empty: #fff;
  --color--text--component: #fff;
  --color--icon__primary: #fff;
  --color--icon__second1: rgba(255,255,255,0.4);
  --color--icon__tertiary: rgba(255,255,255,0.2);
  --color--icon__quaternary: #fff;
  --color--icon__arrow: rbga(255, 255, 255, 1);
  --color--icon__contrary: #000;
  --color--icon__toolbar-icon-fill2: rgba(255,255,255,0.4);
  --color--icon_circle03: rgba(255,255,255,0.3);
  --color--icon__block: rgba(0,0,0,0.24);
  --color--icon__checkbox: #fff;
  --color--icon__checkbox-all: #565dff;
  --color--icon__checkbox-little: rgba(255,255,255,0.4);
  --color--icon__checkbox-little-disabled: rgba(255,255,255,0.2);
  --color--icon__checkbox-non: rgba(255,255,255,0.8);
  --color--icon__down: #fff;
  --color--bg__primary: #343141;
  --color--bg__second1-edit: #2a2735;
  --color--bg__second2-home: #0f0d13;
  --color--bg__toolbar: #2a2735;
  --color--bg__canvas: #0f0d13;
  --color--bg__split1: #3d3a47;
  --color--bg__split2: #504e59;
  --color--bg__second2: #f5f5f5;
  --color--bg__ruler: #1b1822;
  --color--bg__button1: #fff;
  --color--bg__button2: rgba(255,255,255,0.1);
  --color--bg__button3: rgba(255,255,255,0.45);
  --color--bg__button4: #fff;
  --color--bg__button02: rgba(0,0,0,0.2);
  --color--bg__button03: rgba(255,255,255,0.3);
  --color--bg__button5: #565dff;
  --color--bg__tint: rgba(255,255,255,0.16);
  --color--bg__progress: #565656;
  --color--bg__recommended: #444151;
  --color--bg__pressed: #f2f2f2;
  --color--bg__plugins-icon: #1d1926;
  --color--bg__button05: rgba(255,255,255,0.05);
  --color--bg__product_cmp: #343141;
  --color--sp__hover1: #5f5f6b;
  --color--sp__hover2: #3d3b48;
  --color--sp__hover3: #4f4d5a;
  --color--sp__hover4: rgba(255,255,255,0.3);
  --color--sp__hover5: #ffe1ff;
  --color--sp__hover6: #dce1ea;
  --color--sp__hover7: #3d3a46;
  --color--sp__text-selection: rgba(147,152,255,0.5);
  --color--sp__text-selection2: rgba(47,156,255,0.3);
  --color--sp__component: #9398ff;
  --color--sp__component-second: rgba(147,152,255,0.6);
  --color--sp__border1: rgba(172,172,172,0.1);
  --color--sp__border2: #9398ff;
  --color--sp__border3: rgba(255,255,255,0.2);
  --color--sp__border02: rgba(255,255,255,0.2);
  --color--sp__border-secondary: #fff;
  --color--sp__border-primary: #000;
  --color--sp__fill: #3d3a46;
  --color--sp__space-control-line: #f145ff;
  --color--sp__regular: #2f9cff;
  --color--sp__beta: #fff;
  --color--sp__blue: #495af0;
  --color--sp__dialog-divider: #e5e5e5;
  --color--sp_team-project-border: #3d3a47;
  --color--sp__bg-tag: #2a2735;
  --color--sp__shadow: rgba(255,255,255,0.05);
  --color--sp__slider: rgba(120,120,128,0.8);
  --color--sp__bg-func: rgba(0,0,0,0.16);
  --color--sp__border4: rgba(255,255,255,0.1);
  --color--sp__divider: #3d3a47;
  --color--sp__bg-move: #56555a;
  --color--sp__bg-success: #7ac23c;
  --color--sp__warn: #f2b133;
  --color--sp__arrow: #9b9b9b;
  --color--bg__white: #fff;
  --color--sp__bg-import: rgba(0,0,0,0.2);
  --color--sp__bg-mask: rgba(255,255,255,0.5);
  --color--sp_overlay: #fff;
  --coloe--sp__dialog: #343141;
  --color--sp__bg-publish-card: #3d3a47;
  --color--sp__border5: #3d3a47;
  --color--sp__bg-btn: transparent;
  --color--sp__border-cancel: #fff;
  --color--bg__bg-loading-btn: #716e7a;
  --color--sp__tag-menu: rgba(172,172,172,0.1);
  --color--sp__tag-menu-bg: #2a2735;
  --color--sort-menu-bg: rgba(172,172,172,0.1);
  --color--sort-menu-border: rgba(255,255,255,0.1);
  --color--component-bg: rgba(172,172,172,0.1);
  --color--component-scrollbar: rgba(255,255,255,0.2);
  --color--sp__input-border: rgba(172,172,172,0.1);
  --color--sp__input-bg: rgba(172,172,172,0.1);
  --color--sp__cover-bg06: rgba(0,0,0,0.6);
  --color--sp__bg-hover: rgba(220,225,234,0.2);
  --color--sp__input-bg2: #3d3a46;
  --color--sp__panel-hover: #343141;
  --color--sp__panel-bg: #3d3a46;
  --color--sp__modal-footer-shadow: rgba(255,255,255,0.1);
  --color--sp_home_left_icon: #333;
  --skeleton-color--bg: #0f0d13;
  --skeleton-color--bg-primary: #3d3a47;
  --skeleton-color--bg-content: #2a2735;
  --skeleton-color--border: #3d3a47;
  --skeleton-color--viewport: #0f0d13;
  --autolayout-constraints-current-box-color-bg: rgba(86,93,255,0.3);
  --autolayout-constraints-current-box-item-color-hover: #565dff;
  --plugin-dropdown--bg: #2a2735;
  --plugin-dropdown--li__hover: #343141;
  --color--multiplayer__dark1: #797dbc;
  --color--multiplayer__bright1: #696cfd;
  --scrollbar-thumb-bg: #424242;
  --quickframe--bg__active: rgba(255,255,255,0.03);
/*
	 * v2改版
	 */
  --v2--color-bg-brand-press: #2e64d1;
  --v2--color-bg-brand-normal: #4c87ff;
  --v2--color-bg-brand-hover: #709fff;
  --v2--color-bg-brand-disable: rgba(76,135,255,0.2);
  --v2--color-brand-light: rgba(76,135,255,0.1);
  --v2--color-bg-danger-press: #c43232;
  --v2--color-bg-danger-normal: #f43529;
  --v2--color-bg-danger-hover: #f76565;
  --v2--color-bg-danger-disable: #fbb2b2;
  --v2--color-bg-success-normal: #00b42a;
  --v2--color-bg-warming-normal: #ff7d00;
  --v2--color-bg-info-normal: #2f9dfe;
  --v2--color-bg-bodybase: #19191a;
  --v2--color-bg-body: #212121;
  --v2--color-bg-bodyoverlay: #303030;
  --v2--color-bg-hover: rgba(255,255,255,0.19);
  --v2--color-bg-press: rgba(255,255,255,0.26);
  --v2--color-bg-button-active: rgba(76,135,255,0.2);
  --v2--color-bg-button-active-hover: rgba(76,135,255,0.35);
  --v2--color-bg-button-normal: rgba(255,255,255,0.1);
  --v2--color-bg-floatbase: #19191a;
  --v2--color-bg-float: #303030;
  --v2--color-bg-floatoverlay: #414142;
  --v2--color-border-primary: rgba(255,255,255,0.1);
  --v2--color-border-secondary: rgba(255,255,255,0.19);
  --v2--color-border-avatar: rgba(255,255,255,0.1);
  --v2--color-border-button: rgba(255,255,255,0.19);
  --v2--color-border-checkbox: rgba(255,255,255,0.55);
  --v2--color-border-float: rgba(255,255,255,0.19);
  --v2--color-border-primary: rgba(255,255,255,0.1);
  --v2--color-border-commentavatar: #4c87ff;
  --v2--color-border-brand-normal: #336fff;
  --v2--color-text-primary: rgba(255,255,255,0.91);
  --v2--color-text-secondary: rgba(255,255,255,0.64);
  --v2--color-text-tertiary: rgba(255,255,255,0.33);
  --v2--color-text-quaternary: rgba(255,255,255,0.19);
  --v2--color-text-onfunctionandbrand: rgba(255,255,255,0.91);
  --v2--color-text-onfunctionandbrand-dissable: rgba(255,255,255,0.19);
  --v2--color-text-brand-ontips: #4c87ff;
  --v2--color-text-brand-press: #2e64d1;
  --v2--color-text-brand-normal: #4c87ff;
  --v2--color-text-brand-hover: #709fff;
  --v2--color-text-brand-disable: rgba(76,135,255,0.2);
  --v2--color-text-danger-press: #de1b25;
  --v2--color-text-danger-normal: #f43529;
  --v2--color-text-danger-hover: #f76970;
  --v2--color-text-danger-disable: #f9959a;
  --v2--color-text-success-normal: #41ab07;
  --v2--color-text-warming-normal: #f07400;
  --v2--color-text-info-normal: #2f9dfe;
  --v2--color-text-px-logo: #fff;
  --v2--color-text-tag-brand: #4c87ff;
  --v2--color-text-tag-green: #41ae07;
  --v2--color-text-tag-red: #f43529;
  --v2--color-text-tag-yellow: #f27500;
  --v2--color-text-tag-blue: #2e9cfe;
  --v2--color-icon-primary: rgba(255,255,255,0.82);
  --v2--color-icon-secondary: rgba(255,255,255,0.55);
  --v2--color-icon-tertiary: rgba(255,255,255,0.33);
  --v2--color-icon-onfunctionandbrand: rgba(255,255,255,0.82);
  --v2--color-icon-brand-normal: #4c87ff;
  --v2--color-icon-brand-press: #2e64d1;
  --v2--color-icon-brand-hover: #709fff;
  --v2--color-icon-brand-dissable: rgba(76,135,255,0.2);
  --v2--color-icon-brand-tertiary: rgba(91,102,255,0.2);
  --v2--color-icon-quaternary: rgba(255,255,255,0.45);
  --v2--color-bg-x-navigation: #212121;
  --v2--color-bg-x-navigation-hover: rgba(255,255,255,0.13);
  --v2--color-bg-x-navigation-active: rgba(255,255,255,0.19);
  --v2--color-bg-mask-primary: rgba(6,8,10,0.57);
  --v2--color-bg-mask-secondary: rgba(6,13,20,0.18);
  --v2--color-bg-tips-primary: #414142;
  --v2--color-bg-scrollbar-normal: rgba(255,255,255,0.26);
  --v2--color-bg-scrollbar-hover: rgba(255,255,255,0.45);
  --v2--color-border-input: rgba(255,255,255,0.19);
  --v2--color-border-input-focus: #4c87ff;
  --v2--color-border-input-error: #f43529;
  --v2--color-bg-input: rgba(255,255,255,0.08);
  --v2--color-bg-input-hover: rgba(255,255,255,0.19);
  --v2--color-bg-input-disable: rgba(255,255,255,0.1);
  --v2--color-file-menu-fill: rgba(128,128,128,0.8);
  --v2--color-file-shadow: rgba(0,0,0,0.3);
  --v2--color-box-shadow: rgba(0,0,0,0.4);
  --v2--color-scrollbar: #424242;
  --v2--color-cover-mask-light: rgba(5,4,16,0.09);
  --v2--color-multiplayer-brand: #336fff;
  --v2--color-multiplayer-purple: #945dfa;
  --v2--color-multiplayer-orange: #fe9935;
  --v2--color-multiplayer-cyan: #07c6c2;
  --v2--color-multiplayer-green: #4bcb08;
  --v2--color-multiplayer-blue: #2e9cfe;
  --v2--color-multiplayer-red: #f76b71;
  --v2--color-multiplayer-magenta: #fe59b4;
  --v2--color-multiplayer-yellow: #daab2b;
  --v2--color-border-x-canvasobject: #336fff;
  --v2--color-border-x-canvascomponents: #af8bfd;
  --v2--color-border-x-canvasslice: #8b8c8f;
  --v2--color-border-x-canvasedit: #717273;
  --v2--color-border-x-controlline: #f10a91;
  --v2--color-border-x-spacingmeasurement: #f42932;
  --v2--color-bg-x-canvas: #1a1a1a;
  --v2--color-bg-px-canvas-loading: #1a1a1a;
  --v2--color-bg-px-canvastext-active: rgba(46,156,254,0.4);
  --v2--color-bg-loading-primary: #d0d2d4;
  --v2--color-bg-loading-secondary: rgba(255,255,255,0.08);
  --v2--color-bg-x-layer-primary: rgba(109,126,255,0.35);
  --v2--color-bg-x-layer-secondary: rgba(109,126,255,0.2);
  --v2--color-text-x-components-quaternary: rgba(175,139,253,0.3);
  --v2--color-text-x-components-primary: #af8bfd;
  --v2--color-icon-x-components-quaternary: rgba(175,139,253,0.3);
  --v2--color-bg-optionstrip-normal: rgba(255,255,255,0.08);
  --v2--color-bg-optionstrip-active: #555557;
  --v2--color-bg-slider: #414142;
  --v2--color-bg-slider-active: #4c87ff;
  --v2--color-bg-onslider-normal: #dedfe0;
  --v2--color-bg-onslider-active: #4c87ff;
  --v2--color-bg-stepper: #555557;
  --v2--color-icon-onstepper-normal: #b7b9bd;
  --v2--color-icon-onstepper-hover: #fff;
  --v2--color-bg-dropdown: #303030;
  --v2--color-border-dropdown: rgba(255,255,255,0.05);
  --v2--color-bg-popover: #262626;
  --v2--color-border-popover: rgba(255,255,255,0.05);
  --v2--color-bg-toast: rgba(15,16,18,0.96);
  --v2--color-border-toast: rgba(255,255,255,0.05);
  --v2--color-bg-page-hover: rgba(255,255,255,0.05);
  --v2--color-bg-page-active: rgba(255,255,255,0.13);
  --v2--color-loading-cover-water: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 51.76%, rgba(0,0,0,0) 100%);
  --v2--color-bg-px-tableheader: rgba(255,255,255,0.05);
  --v2--color-bg-px-multiplestyletext: #414142;
  --v2--color-bg-tag-brand-primary: #4c87ff;
  --v2--color-bg-tag-brand-secondary: rgba(76,135,255,0.1);
  --v2--color-bg-tag-green-primary: #41ae07;
  --v2--color-bg-tag-green-secondary: rgba(65,174,7,0.1);
  --v2--color-bg-tag-red-primary: #f43529;
  --v2--color-bg-tag-red-secondary: rgba(244,53,41,0.1);
  --v2--color-bg-tag-yellow-primary: #f27500;
  --v2--color-bg-tag-yellow-secondary: rgba(242,117,0,0.1);
  --v2--color-bg-tag-blue-primary: #2e9cfe;
  --v2--color-bg-tag-blue-secondary: rgba(46,156,254,0.1);
  --v2--color-bg-banner-light-blue: #d5f1ff;
  --v2--color-bg-px-chat-primary: #0d2a5a;
  --v2--color-bg-px-chat-secondary: #414142;
}
.el-scrollbar {
  height: 100%;
}
.el-scrollbar .el-scrollbar__wrap {
  height: 100%;
}
.el-scrollbar .el-scrollbar__thumb {
  background: var(--v2--color-bg-scrollbar-normal);
}
.el-scrollbar .el-scrollbar__thumb:hover {
  background: var(--v2--color-bg-scrollbar-hover);
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.inline-table {
  display: inline-table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-column {
  display: table-column;
}
.table-column-group {
  display: table-column-group;
}
.table-footer-group {
  display: table-footer-group;
}
.table-header-group {
  display: table-header-group;
}
.table-row-group {
  display: table-row-group;
}
.table-row {
  display: table-row;
}
.flow-root {
  display: flow-root;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.list-item {
  display: list-item;
}
.hidden {
  display: none;
}
.overflow__auto {
  overflow: auto;
}
.overflow__hidden {
  overflow: hidden;
}
.overflow__clip {
  overflow: clip;
}
.overflow__visible {
  overflow: visible;
}
.overflow__scroll {
  overflow: scroll;
}
.overflow-x__auto {
  overflow-x: auto;
}
.overflow-y__auto {
  overflow-y: auto;
}
.overflow-x__hidden {
  overflow-x: hidden;
}
.overflow-y__hidden {
  overflow-y: hidden;
}
.overflow-x__clip {
  overflow-x: clip;
}
.overflow-y__clip {
  overflow-y: clip;
}
.overflow-x__visible {
  overflow-x: visible;
}
.overflow-y__visible {
  overflow-y: visible;
}
.overflow-x__scroll {
  overflow-x: scroll;
}
.overflow-y__scroll {
  overflow-y: scroll;
}
.flx {
  display: flex;
}
.flx__center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flx-space__between {
  display: flex;
  justify-content: space-between;
}
.flx-align__center-space__between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flx-align__center {
  display: flex;
  align-items: center;
}
.flx-justify__center {
  display: flex;
  justify-content: center;
}
.flx-column {
  display: flex;
  flex-direction: column;
}
.flx-column-align__center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flx-column-justify__space__between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flx-column__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flx-xl {
  justify-content: flex-start;
}
.flx-xc {
  justify-content: center;
}
.flx-xr {
  justify-content: flex-end;
}
.flx-yl {
  align-items: flex-start;
}
.flx-yc {
  align-items: center;
}
.flx-yr {
  align-items: flex-end;
}
.flx__1 {
  flex: 1 1 0%;
}
.flx__auto {
  flex: 1 1 auto;
}
.flx__initial {
  flex: 0 1 auto;
}
.flx__none {
  flex: none;
}
.flx-grow {
  flex-grow: 1;
}
.flx-grow__0 {
  flex-grow: 0;
}
.flx-shrink {
  flex-shrink: 1;
}
.flx-shrink__0 {
  flex-shrink: 0;
}
.flx-order__1 {
  order: 1;
}
.flx-order__2 {
  order: 2;
}
.flx-order__3 {
  order: 3;
}
.flx-order__4 {
  order: 4;
}
.flx-order__5 {
  order: 5;
}
.flx-order__6 {
  order: 6;
}
.flx-order__7 {
  order: 7;
}
.flx-order__8 {
  order: 8;
}
.flx-order__9 {
  order: 9;
}
.grid-gap__0 {
  gap: 0;
}
.grid-x-gap__0 {
  column-gap: 0;
}
.grid-y-gap__0 {
  row-gap: 0;
}
.grid-gap__4 {
  gap: 4px;
}
.grid-x-gap__4 {
  column-gap: 4px;
}
.grid-y-gap__4 {
  row-gap: 4px;
}
.grid-gap__8 {
  gap: 8px;
}
.grid-x-gap__8 {
  column-gap: 8px;
}
.grid-y-gap__8 {
  row-gap: 8px;
}
.grid-gap__16 {
  gap: 16px;
}
.grid-x-gap__16 {
  column-gap: 16px;
}
.grid-y-gap__16 {
  row-gap: 16px;
}
.box__border {
  box-sizing: border-box;
}
.box__content {
  box-sizing: content-box;
}
.pos__static {
  position: static;
}
.pos__fixed {
  position: fixed;
}
.pos__absolute {
  position: absolute;
}
.pos__relative {
  position: relative;
}
.pos__sticky {
  position: sticky;
}
.t__0 {
  top: 0;
}
.r__0 {
  right: 0;
}
.b__0 {
  bottom: 0;
}
.l__0 {
  left: 0;
}
.y__0 {
  top: 0;
  bottom: 0;
}
.x__0 {
  left: 0;
  right: 0;
}
.t__1-4 {
  top: 25%;
}
.r__1-4 {
  right: 25%;
}
.b__1-4 {
  bottom: 25%;
}
.l__1-4 {
  left: 25%;
}
.y__1-4 {
  top: 25%;
  bottom: 25%;
}
.x__1-4 {
  left: 25%;
  right: 25%;
}
.t__1-3 {
  top: 33.33333%;
}
.r__1-3 {
  right: 33.33333%;
}
.b__1-3 {
  bottom: 33.33333%;
}
.l__1-3 {
  left: 33.33333%;
}
.y__1-3 {
  top: 33.33333%;
  bottom: 33.33333%;
}
.x__1-3 {
  left: 33.33333%;
  right: 33.33333%;
}
.t__1-2 {
  top: 50%;
}
.r__1-2 {
  right: 50%;
}
.b__1-2 {
  bottom: 50%;
}
.l__1-2 {
  left: 50%;
}
.y__1-2 {
  top: 50%;
  bottom: 50%;
}
.x__1-2 {
  left: 50%;
  right: 50%;
}
.t__2-3 {
  top: 66.66666%;
}
.r__2-3 {
  right: 66.66666%;
}
.b__2-3 {
  bottom: 66.66666%;
}
.l__2-3 {
  left: 66.66666%;
}
.y__2-3 {
  top: 66.66666%;
  bottom: 66.66666%;
}
.x__2-3 {
  left: 66.66666%;
  right: 66.66666%;
}
.t__3-4 {
  top: 75%;
}
.r__3-4 {
  right: 75%;
}
.b__3-4 {
  bottom: 75%;
}
.l__3-4 {
  left: 75%;
}
.y__3-4 {
  top: 75%;
  bottom: 75%;
}
.x__3-4 {
  left: 75%;
  right: 75%;
}
.y__full {
  top: 100%;
  bottom: 100%;
}
.x__full {
  left: 100%;
  right: 100%;
}
.t__full {
  top: 100%;
}
.r__full {
  right: 100%;
}
.b__full {
  bottom: 100%;
}
.l__full {
  left: 100%;
}
.y__full {
  top: 100%;
  bottom: 100%;
}
.x__full {
  left: 100%;
  right: 100%;
}
.y__auto {
  top: auto;
  bottom: auto;
}
.x__auto {
  left: auto;
  right: auto;
}
.t__auto {
  top: auto;
}
.r__auto {
  right: auto;
}
.b__auto {
  bottom: auto;
}
.l__auto {
  left: auto;
}
.y__auto {
  top: auto;
  bottom: auto;
}
.x__auto {
  left: auto;
  right: auto;
}
.z__0 {
  z-index: 0;
}
.z__1 {
  z-index: 1;
}
.z__10 {
  z-index: 10;
}
.z__100 {
  z-index: 100;
}
.z__1000 {
  z-index: 1000;
}
.z__auto {
  z-index: auto;
}
.border__none {
  border: none;
}
.m__0,
.m__0 .m__0,
.m__0__1st:first-child,
.m__0__last:last-child {
  margin: 0;
}
.mt__0__1st:first-child,
.mt__0 .mt__0,
.mt__0__last:last-child {
  margin-top: 0;
}
.mr__0__1st:first-child,
.mr__0 .mr__0,
.mr__0__last:last-child {
  margin-right: 0;
}
.mb__0__1st:first-child,
.mb__0 .mb__0,
.mb__0__last:last-child {
  margin-bottom: 0;
}
.ml__0__1st:first-child,
.ml__0 .ml__0,
.ml__0__last:last-child {
  margin-left: 0;
}
.my__0__1st:first-child,
.my__0 .my__0,
.my__0__last:last-child {
  margin-top: 0;
  margin-bottom: 0;
}
.mx__0__1st:first-child,
.mx__0 .mx__0,
.mx__0__last:last-child {
  margin-left: 0;
  margin-right: 0;
}
.m__4 {
  margin: 4px;
}
.mt__4 {
  margin-top: 4px;
}
.mr__4 {
  margin-right: 4px;
}
.mb__4 {
  margin-bottom: 4px;
}
.ml__4 {
  margin-left: 4px;
}
.my__4 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.mx__4 {
  margin-left: 4px;
  margin-right: 4px;
}
.m__8 {
  margin: 8px;
}
.mt__8 {
  margin-top: 8px;
}
.mr__8 {
  margin-right: 8px;
}
.mb__8 {
  margin-bottom: 8px;
}
.ml__8 {
  margin-left: 8px;
}
.my__8 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.mx__8 {
  margin-left: 8px;
  margin-right: 8px;
}
.m__16 {
  margin: 16px;
}
.mt__16 {
  margin-top: 16px;
}
.mr__16 {
  margin-right: 16px;
}
.mb__16 {
  margin-bottom: 16px;
}
.ml__16 {
  margin-left: 16px;
}
.my__16 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.mx__16 {
  margin-left: 16px;
  margin-right: 16px;
}
.m__24 {
  margin: 24px;
}
.mt__24 {
  margin-top: 24px;
}
.mr__24 {
  margin-right: 24px;
}
.mb__24 {
  margin-bottom: 24px;
}
.ml__24 {
  margin-left: 24px;
}
.my__24 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.mx__24 {
  margin-left: 24px;
  margin-right: 24px;
}
.m__32 {
  margin: 32px;
}
.mt__32 {
  margin-top: 32px;
}
.mr__32 {
  margin-right: 32px;
}
.mb__32 {
  margin-bottom: 32px;
}
.ml__32 {
  margin-left: 32px;
}
.my__32 {
  margin-top: 32px;
  margin-bottom: 32px;
}
.mx__32 {
  margin-left: 32px;
  margin-right: 32px;
}
.m__40 {
  margin: 40px;
}
.mt__40 {
  margin-top: 40px;
}
.mr__40 {
  margin-right: 40px;
}
.mb__40 {
  margin-bottom: 40px;
}
.ml__40 {
  margin-left: 40px;
}
.my__40 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.mx__40 {
  margin-left: 40px;
  margin-right: 40px;
}
.m__auto {
  margin: auto;
}
.my__auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mx__auto {
  margin-left: auto;
  margin-right: auto;
}
.mt__auto {
  margin-top: auto;
}
.mr__auto {
  margin-right: auto;
}
.mb__auto {
  margin-bottom: auto;
}
.ml__auto {
  margin-left: auto;
}
.p__0__1st:first-child,
.p__0 .p__0,
.p__0__last:last-child {
  padding: 0;
}
.pt__0__1st:first-child,
.pt__0 .pt__0,
.pt__0__last:last-child {
  padding-top: 0;
}
.pr__0__1st:first-child,
.pr__0 .pr__0,
.pr__0__last:last-child {
  padding-right: 0;
}
.pb__0__1st:first-child,
.pb__0 .pb__0,
.pb__0__last:last-child {
  padding-bottom: 0;
}
.pl__0__1st:first-child,
.pl__0 .pl__0,
.pl__0__last:last-child {
  padding-left: 0;
}
.py__0__1st:first-child,
.py__0 .py__0,
.py__0__last:last-child {
  padding-top: 0;
  padding-bottom: 0;
}
.px__0__1st:first-child,
.px__0 .px__0,
.px__0__last:last-child {
  padding-left: 0;
  padding-right: 0;
}
.p__4 {
  padding: 4px;
}
.pt__4 {
  padding-top: 4px;
}
.pr__4 {
  padding-right: 4px;
}
.pb__4 {
  padding-bottom: 4px;
}
.pl__4 {
  padding-left: 4px;
}
.py__4 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.px__4 {
  padding-left: 4px;
  padding-right: 4px;
}
.p__8 {
  padding: 8px;
}
.pt__8 {
  padding-top: 8px;
}
.pr__8 {
  padding-right: 8px;
}
.pb__8 {
  padding-bottom: 8px;
}
.pl__8 {
  padding-left: 8px;
}
.py__8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.px__8 {
  padding-left: 8px;
  padding-right: 8px;
}
.p__16 {
  padding: 16px;
}
.pt__16 {
  padding-top: 16px;
}
.pr__16 {
  padding-right: 16px;
}
.pb__16 {
  padding-bottom: 16px;
}
.pl__16 {
  padding-left: 16px;
}
.py__16 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.px__16 {
  padding-left: 16px;
  padding-right: 16px;
}
.p__24 {
  padding: 24px;
}
.pt__24 {
  padding-top: 24px;
}
.pr__24 {
  padding-right: 24px;
}
.pb__24 {
  padding-bottom: 24px;
}
.pl__24 {
  padding-left: 24px;
}
.py__24 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.px__24 {
  padding-left: 24px;
  padding-right: 24px;
}
.p__32 {
  padding: 32px;
}
.pt__32 {
  padding-top: 32px;
}
.pr__32 {
  padding-right: 32px;
}
.pb__32 {
  padding-bottom: 32px;
}
.pl__32 {
  padding-left: 32px;
}
.py__32 {
  padding-top: 32px;
  padding-bottom: 32px;
}
.px__32 {
  padding-left: 32px;
  padding-right: 32px;
}
.p__40 {
  padding: 40px;
}
.pt__40 {
  padding-top: 40px;
}
.pr__40 {
  padding-right: 40px;
}
.pb__40 {
  padding-bottom: 40px;
}
.pl__40 {
  padding-left: 40px;
}
.py__40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.px__40 {
  padding-left: 40px;
  padding-right: 40px;
}
.p__auto {
  padding: auto;
}
.py__auto {
  padding-top: auto;
  padding-bottom: auto;
}
.px__auto {
  padding-left: auto;
  padding-right: auto;
}
.pt__auto {
  padding-top: auto;
}
.pr__auto {
  padding-right: auto;
}
.pb__auto {
  padding-bottom: auto;
}
.pl__auto {
  padding-left: auto;
}
.border-com__sm {
  border: 1px solid var(--v2--color-border-button);
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.w__0 {
  width: 0;
}
.w-auto {
  width: auto;
}
.w__p-10 {
  width: 10%;
}
.w__p-20 {
  width: 20%;
}
.w__p-25 {
  width: 25%;
}
.w__p-30 {
  width: 30%;
}
.w__p-1-3 {
  width: 33.33333%;
}
.w__p-40 {
  width: 40%;
}
.w__p-50 {
  width: 50%;
}
.w__p-60 {
  width: 60%;
}
.w__p-2-3 {
  width: 66.66666%;
}
.w__p-70 {
  width: 70%;
}
.w__p-80 {
  width: 80%;
}
.w__p-90 {
  width: 90%;
}
.w__p-100 {
  width: 100%;
}
.w__p-full {
  width: 100%;
}
.h__0 {
  height: 0;
}
.h-auto {
  height: auto;
}
.h__p-10 {
  height: 10%;
}
.h__p-20 {
  height: 20%;
}
.h__p-25 {
  height: 25%;
}
.h__p-30 {
  height: 30%;
}
.h__p-1-3 {
  height: 33.33333%;
}
.h__p-40 {
  height: 40%;
}
.h__p-50 {
  height: 50%;
}
.h__p-60 {
  height: 60%;
}
.h__p-2-3 {
  height: 66.66666%;
}
.h__p-70 {
  height: 70%;
}
.h__p-80 {
  height: 80%;
}
.h__p-90 {
  height: 90%;
}
.h__p-100 {
  height: 100%;
}
.h__p-full {
  height: 100%;
}
.bg__fixed {
  background-attachment: fixed;
}
.bg__local {
  background-attachment: local;
}
.bg__scroll {
  background-attachment: scroll;
}
.bg__auto {
  background-size: auto;
}
.bg__cover {
  background-size: cover;
}
.bg__contain {
  background-size: contain;
}
.bg__repeat {
  background-repeat: repeat;
}
.bg__no-repeat {
  background-repeat: no-repeat;
}
.bg__repeat-x {
  background-repeat: repeat-x;
}
.bg__repeat-y {
  background-repeat: repeat-y;
}
.bg__repeat-round {
  background-repeat: round;
}
.bg__repeat-space {
  background-repeat: space;
}
.bg__bottom {
  background-position: bottom;
}
.bg__center {
  background-position: center;
}
.bg__left {
  background-position: left;
}
.bg__left-bottom {
  background-position: left bottom;
}
.bg__left-top {
  background-position: left top;
}
.bg__right {
  background-position: right;
}
.bg__right-bottom {
  background-position: right bottom;
}
.bg__right-top {
  background-position: right top;
}
.bg__top {
  background-position: top;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-center-colum {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.flex-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-align-center {
  display: flex;
  align-items: center;
}
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.px-mask--dialog {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1999;
  background-color: var(--v2--color-bg-mask-primary);
}
.px-mask--card {
  background-color: var(--v2--color-bg-mask-secondary);
}
:root[data-system='mac'] {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
}
:root[data-system='win'],
:root {
  --font-weight-regular: 400;
  --font-weight-medium: 600;
}
.text-header1 {
  font-size: 26px;
  line-height: 36px;
  font-weight: var(--font-weight-medium);
}
.text-header2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-medium);
}
.text-header3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
}
.text-header4 {
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
}
.text-title1 {
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
}
.text-title2 {
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
}
.text-subtitle1 {
  font-size: 16px;
  line-height: 22px;
}
.text-subtitle2 {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-medium);
}
.text-subtitle3 {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-medium);
}
.text-subtitle4 {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-regular);
}
.text-body1 {
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-medium);
}
.text-body2 {
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-medium);
}
.text-body3 {
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-regular);
}
.text-body4 {
  font-size: 12px;
  line-height: 16px;
  text-decoration: underline;
}
.text-color__primary {
  color: var(--v2--color-text-primary);
}
.text-color__second1 {
  color: var(--v2--color-text-secondary);
}
.text-color__assist {
  color: var(--v2--color-text-tertiary);
}
.text__ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text__ellipsis_2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.text__ellipsis_4 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.word__break {
  word-break: break-word;
  white-space: pre-line;
}
.txt__break-normal {
  overflow-wrap: normal;
  word-break: normal;
}
.txt__break-words {
  overflow-wrap: break-word;
}
.txt__break-all {
  word-break: break-all;
}
.txt-whitespace__normal {
  white-space: normal;
}
.txt-whitespace__nowrap {
  white-space: nowrap;
}
.txt-whitespace__pre {
  white-space: pre;
}
.txt-whitespace__pre-line {
  white-space: pre-line;
}
.txt-whitespace__pre-wrap {
  white-space: pre-wrap;
}
.txt__uppercase {
  text-transform: uppercase;
}
.txt__lowercase {
  text-transform: lowercase;
}
.txt__capitalize {
  text-transform: capitalize;
}
.txt__normal-case {
  text-transform: none;
}
.txt__underline {
  text-decoration-line: underline;
}
.txt__no-underline {
  text-decoration-line: none;
}
.txt__overline {
  text-decoration-line: overline;
}
.txt__line-through {
  text-decoration-line: line-through;
}
.txt__truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.txt__ellipsis {
  text-overflow: ellipsis;
}
.txt__clip {
  text-overflow: clip;
}
.txt-v__baseline {
  vertical-align: baseline;
}
.txt-v__top {
  vertical-align: top;
}
.txt-v__middle {
  vertical-align: middle;
}
.txt-v__bottom {
  vertical-align: bottom;
}
.txt-v__text-top {
  vertical-align: text-top;
}
.txt-v__text-bottom {
  vertical-align: text-bottom;
}
.txt-v__sub {
  vertical-align: sub;
}
.txt-v__super {
  vertical-align: super;
}
.txt-h__left {
  text-align: left;
}
.txt-h__center {
  text-align: center;
}
.txt-h__right {
  text-align: right;
}
.t-body-12 {
  font-size: 12px;
  line-height: 20px;
  font-weight: var(--font-weight-regular);
}
.t-publicbody-13 {
  font-size: 13px;
  line-height: 22px;
  font-weight: var(--font-weight-regular);
}
.t-body-14 {
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--font-weight-regular);
}
.t-en-body-14 {
  font-family: Inter;
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--font-weight-regular);
}
.t-body-16 {
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-regular);
}
.t-body-20 {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-regular);
}
.t-css-body-12 {
  font-family: JetBrainsMono-Regular;
  font-size: 12px;
  line-height: 20px;
  font-weight: var(--font-weight-regular);
}
.t-title-12 {
  font-size: 12px;
  line-height: 20px;
  font-weight: var(--font-weight-medium);
}
.t-publictitle-13 {
  font-size: 13px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
}
.t-title-14 {
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
}
.t-title-16 {
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
}
.t-title-20 {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-medium);
}
.t-css-title-12 {
  font-family: JetBrainsMono-Regular;
  font-size: 12px;
  line-height: 20px;
  font-weight: var(--font-weight-medium);
}
.t-en-title-12 {
  font-family: Inter;
  font-size: 12px;
  line-height: 20px;
  font-weight: var(--font-weight-medium);
}
.t-en-publictitle-13 {
  font-family: Inter;
  font-size: 13px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
}
.t-en-title-14 {
  font-family: Inter;
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
}
.t-en-title-16 {
  font-family: Inter;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
}
.t-en-title-20 {
  font-family: Inter;
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-medium);
}
.t-en-body-12 {
  font-family: Inter;
  font-size: 12px;
  line-height: 20px;
  font-weight: var(--font-weight-regular);
}
.t-en-publicbody-13 {
  font-family: Inter;
  font-size: 13px;
  line-height: 22px;
  font-weight: var(--font-weight-regular);
}
.t-en-body-14 {
  font-family: Inter;
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--font-weight-regular);
}
.t-en-body-16 {
  font-family: Inter;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-regular);
}
.t-en-body-20 {
  font-family: Inter;
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-regular);
}
.color-brand__press {
  color: var(--v2--color-bg-brand-press);
}
.color-brand-bg__press {
  background-color: var(--v2--color-bg-brand-press);
}
.color-brand-outline__press {
  outline-color: var(--v2--color-bg-brand-press);
}
.color-brand-border__press {
  border-color: var(--v2--color-bg-brand-press);
}
.color-brand__primary {
  color: var(--v2--color-bg-brand-normal);
}
.color-brand-bg__primary {
  background-color: var(--v2--color-bg-brand-normal);
}
.color-brand-outline__primary {
  outline-color: var(--v2--color-bg-brand-normal);
}
.color-brand-border__primary {
  border-color: var(--v2--color-bg-brand-normal);
}
.color-brand__hover:hover {
  color: var(--v2--color-bg-brand-hover);
}
.color-brand-bg__hover:hover {
  background-color: var(--v2--color-bg-brand-hover);
}
.color-brand-outline__hover:hover {
  outline-color: var(--v2--color-bg-brand-hover);
}
.color-brand-border__hover:hover {
  border-color: var(--v2--color-bg-brand-hover);
}
.color-brand__disable {
  color: var(--v2--color-bg-brand-disable);
}
.color-brand-bg__disable {
  background-color: var(--v2--color-bg-brand-disable);
}
.color-brand-outline__disable {
  outline-color: var(--v2--color-bg-brand-disable);
}
.color-brand-border__disable {
  border-color: var(--v2--color-bg-brand-disable);
}
.color-brand__light {
  color: var(--v2--color-brand-light);
}
.color-brand-bg__light {
  background-color: var(--v2--color-brand-light);
}
.color-brand-outline__light {
  outline-color: var(--v2--color-brand-light);
}
.color-brand-border__light {
  border-color: var(--v2--color-brand-light);
}
.color-func__success {
  color: var(--v2--color-bg-success-normal);
}
.color-func-bg__success {
  background-color: var(--v2--color-bg-success-normal);
}
.color-func-outline__success {
  outline-color: var(--v2--color-bg-success-normal);
}
.color-func-border__success {
  border-color: var(--v2--color-bg-success-normal);
}
.color-func__error {
  color: var(--v2--color-bg-danger-normal);
}
.color-func-bg__error {
  background-color: var(--v2--color-bg-danger-normal);
}
.color-func-outline__error {
  outline-color: var(--v2--color-bg-danger-normal);
}
.color-func-border__error {
  border-color: var(--v2--color-bg-danger-normal);
}
.color-func__warning {
  color: var(--v2--color-bg-warming-normal);
}
.color-func-bg__warning {
  background-color: var(--v2--color-bg-warming-normal);
}
.color-func-outline__warning {
  outline-color: var(--v2--color-bg-warming-normal);
}
.color-func-border__warning {
  border-color: var(--v2--color-bg-warming-normal);
}
.color-body-bg__base {
  background-color: var(--v2--color-bg-bodybase);
}
.color-body-bg {
  background-color: var(--v2--color-bg-body);
}
.color-body-bg__overlay {
  background-color: var(--v2--color-bg-bodyoverlay);
}
.color-body-bg__hover:hover {
  background-color: var(--v2--color-bg-hover);
}
.color-body-bg__press:active {
  background-color: var(--v2--color-bg-press);
}
.color-input-bg {
  background-color: var(--v2--color-bg-input);
}
.color-input-hover:hover {
  background-color: var(--v2--color-bg-input-hover);
}
.color-fl-bg__base {
  background-color: var(--v2--color-bg-floatbase);
}
.color-fl-bg {
  background-color: var(--v2--color-bg-float);
}
.color-fl-bg__overlay {
  background-color: var(--v2--color-bg-floatoverlay);
}
.color-line-bg {
  background-color: var(--v2--color-border-primary);
}
.color-line-module-bg {
  background-color: var(--v2--color-border-secondary);
}
.color-avater-outline {
  outline-color: var(--v2--color-border-avatar);
}
.color-avater-border {
  border-color: var(--v2--color-border-avatar);
}
.color-com-outline {
  outline-color: var(--v2--color-border-button);
}
.color-com-border {
  border-color: var(--v2--color-border-button);
}
.color-fl-border {
  border-color: var(--v2--color-border-float);
}
.color-txt__primary {
  color: var(--v2--color-text-primary);
}
.color-txt__secondary {
  color: var(--v2--color-text-secondary);
}
.color-txt__assist {
  color: var(--v2--color-text-tertiary);
}
.color-txt__disable {
  color: var(--v2--color-text-quaternary);
}
.color-txt__contrary {
  color: var(--v2--color-text-onfunctionandbrand);
}
.color-icon__primary {
  color: var(--v2--color-icon-primary);
}
.color-icon__secondary {
  color: var(--v2--color-icon-secondary);
}
.color-icon__tertiary {
  color: var(--v2--color-icon-tertiary);
}
.color-icon__contrary {
  color: var(--v2--color-icon-onfunctionandbrand);
}
.color-icon__special1 {
  color: var(--v2--color-icon-tertiary);
}
.color-icon__special2 {
  color: var(--v2--color-icon-quaternary);
}
.color-navigation-bg {
  background-color: var(--v2--color-bg-x-navigation);
}
.color-left-navigation-bg {
  background-color: var(--v2--color-bg-x-navigation);
}
.color-mask-bg__default {
  background-color: var(--v2--color-bg-mask-primary);
}
.color-mask-bg__light {
  background-color: var(--v2--color-bg-mask-secondary);
}
.color-tip-bg {
  background-color: var(--v2--color-bg-tips-primary);
}
.color-scrollbar {
  color: var(--v2--color-bg-scrollbar-normal);
  scrollbar-width: thin;
  scrollbar-color: #d4dedf #fff;
}
.color-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.color-scrollbar::-webkit-scrollbar-thumb:vertical {
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
  background-color: var(--v2--color-bg-scrollbar-normal);
}
.color-scrollbar::-webkit-scrollbar-track:vertical {
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
  background-color: var(--v2--color-bg-scrollbar-normal);
}
.opacity__0 {
  opacity: 0;
}
.opacity__10 {
  opacity: 0.1;
}
.opacity__20 {
  opacity: 0.2;
}
.opacity__30 {
  opacity: 0.3;
}
.opacity__40 {
  opacity: 0.4;
}
.opacity__50 {
  opacity: 0.5;
}
.opacity__60 {
  opacity: 0.6;
}
.opacity__70 {
  opacity: 0.7;
}
.opacity__80 {
  opacity: 0.8;
}
.opacity__90 {
  opacity: 0.9;
}
.opacity__100 {
  opacity: 1;
}
.trans-scale100 {
  transform: scale(1);
}
.trans-scale120 {
  transform: scale(1.2);
}
.rounded__none {
  border-radius: 0;
}
.rounded__md {
  border-radius: 6px;
}
.rounded__lg {
  border-radius: 10px;
}
:root {
  --v2--shadow__down1: 0px 5px 12px rgba(0,0,0,0.09), 0px 3px 6px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.16);
  --v2--shadow__down2: 0px 9px 28px rgba(49,50,51,0.05), 0px 6px 16px rgba(49,50,51,0.08), 0px 3px 6px rgba(49,50,51,0.12);
  --v2--shadow__down3: 0px 12px 48px rgba(49,50,51,0.03), 0px 9px 28px rgba(49,50,51,0.05), 0px 6px 16px rgba(49,50,51,0.08);
}
:root,
:root[data-theme-mode='light'] {
  --v2--shadow_s: 0px 0px 1px 0px rgba(25,25,26,0.08), 0px 2px 8px 0px rgba(25,25,26,0.12);
  --v2--shadow_m: 0px 2px 12px 0px rgba(25,25,26,0.04), 0px 6px 20px 0px rgba(25,25,26,0.06);
  --v2--shadow_l: 0px 2px 12px 0px rgba(25,25,26,0.04), 0px 6px 20px 0px rgba(25,25,26,0.06);
}
:root[data-theme-mode='dark'] {
  --v2--shadow_s: 0px 0px 1px 0px rgba(25,25,26,0.3), 0px 2px 8px 0px rgba(25,25,26,0.4);
  --v2--shadow_m: 0px 2px 12px 0px rgba(25,25,26,0.3), 0px 6px 20px 0px rgba(25,25,26,0.4);
  --v2--shadow_l: 40px 2px 12px 0px rgba(25,25,26,0.04), 0px 6px 20px 0px rgba(25,25,26,0.4);
}
.shadow__none {
  box-shadow: none;
}
.shadow__down1 {
  box-shadow: 0px 5px 12px rgba(0,0,0,0.09), 0px 3px 6px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.16);
}
.shadow__down2 {
  box-shadow: 0px 9px 28px rgba(49,50,51,0.05), 0px 6px 16px rgba(49,50,51,0.08), 0px 3px 6px rgba(49,50,51,0.12);
}
.shadow__down3 {
  box-shadow: 0px 12px 48px rgba(49,50,51,0.03), 0px 9px 28px rgba(49,50,51,0.05), 0px 6px 16px rgba(49,50,51,0.08);
}
.shadow__sp {
  box-shadow: 0px 6px 20px rgba(128,128,128,0.1);
}
.shadow__s {
  box-shadow: var(--v2--shadow_s);
}
.shadow__m {
  box-shadow: var(--v2--shadow_m);
}
.shadow__l {
  box-shadow: var(--v2--shadow_l);
}
.border-component {
  border: 1px solid var(--v2--color-border-button);
}
.border-float {
  border: 1px solid var(--v2--color-border-float);
}
.border-transparent {
  border: 1px solid transparent;
}
.transition-preset1 {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
}
.transition-preset1__all {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
  transition-property: all;
}
.hover-trans120 {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
  transform: scale(1);
}
.hover-trans120:hover {
  transform: scale(1.2);
}
.hover-opacity__0-1 {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
  opacity: 0;
}
.hover-opacity__0-1:hover {
  opacity: 1;
}
.hover-bk {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
}
.hover-bk:hover {
  background-color: var(--v2--color-bg-hover);
}
.hover-bk:active {
  background-color: var(--v2--color-bg-press);
}
.hover-shadow__sp {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
  box-shadow: none;
}
.hover-shadow__sp:hover {
  box-shadow: 0px 6px 20px rgba(128,128,128,0.1);
}
.hover-icon {
  border-radius: 6px;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
}
.hover-icon:hover {
  background-color: var(--v2--color-bg-hover);
}
.hover-icon:active {
  background-color: var(--v2--color-bg-press);
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.modal-footer {
  width: 100%;
  height: 64px;
  background: #fff;
  box-shadow: 0px -1px 20px rgba(0,0,0,0.05);
  border-radius: 0px 0px 12px 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.modal-footer-btn__cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  border: 1px solid var(--color--sp__border1);
  color: var(--color--text__primary);
  margin-right: 16px;
}
.modal-footer-btn__confirm {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  background: var(--color--bg__button1);
  color: var(--color--text__contrary);
  margin-right: 24px;
}
.modal-footer-btn__confirm__disable {
  cursor: no-drop;
  background: var(--color--bg__button02);
}
.animation-dropdown-menu {
  animation: animation_dropdown_menu 0.15s ease-in-out;
}
@-moz-keyframes animation_rotate_clockwise {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes animation_rotate_clockwise {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes animation_rotate_clockwise {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animation_rotate_clockwise {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes animation_dropdown_menu {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes animation_dropdown_menu {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes animation_dropdown_menu {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation_dropdown_menu {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.com-menuitem {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
  transition-property: all;
  display: flex;
  align-items: center;
}
.com-menuitem:hover,
.com-menuitem:active,
.com-menuitem.com-menuitem__active {
  color: var(--v2--color-bg-brand-normal);
  background-color: var(--v2--color-brand-light);
  border-radius: 6px;
}
.com-btn {
  padding: 0;
  border: none;
  outline: none;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-duration: 150ms;
  transition-property: all;
  font-family: inherit;
}
.com-btn.com-btn__lg {
  padding-left: 24px;
  padding-right: 24px;
  height: 40px;
}
.com-btn.com-btn__def {
  padding-left: 16px;
  padding-right: 16px;
  height: 32px;
}
.com-btn.com-btn__sm {
  padding-left: 8px;
  padding-right: 8px;
  height: 24px;
}
.com-btn.com-btn__default {
  background-color: transparent;
  color: var(--v2--color-text-primary);
  border-color: var(--v2--color-border-button);
}
.com-btn.com-btn__default:hover {
  background-color: var(--v2--color-bg-hover);
}
.com-btn.com-btn__default:active {
  background-color: var(--v2--color-bg-press);
}
.com-btn.com-btn__default.com-btn__disable {
  background-color: transparent;
  color: var(--v2--color-text-quaternary);
}
.com-btn.com-btn__primary {
  background-color: var(--v2--color-bg-brand-normal);
  border-color: var(--v2--color-bg-brand-normal);
  color: var(--v2--color-text-onfunctionandbrand);
}
.com-btn.com-btn__primary:hover {
  background-color: var(--v2--color-bg-brand-hover);
  border-color: var(--v2--color-bg-brand-hover);
}
.com-btn.com-btn__primary:active {
  background-color: var(--v2--color-bg-brand-press);
  border-color: var(--v2--color-bg-brand-press);
}
.com-btn.com-btn__primary.com-btn__disable {
  background-color: var(--v2--color-bg-brand-disable);
  border-color: transparent;
  cursor: no-drop;
  color: var(--v2--color-text-onfunctionandbrand-dissable);
}
.com-btn.com-btn__secondary {
  background-color: transparent;
  color: var(--v2--color-text-primary);
  border-color: var(--v2--color-border-button);
}
.com-btn.com-btn__secondary:hover {
  background-color: var(--v2--color-bg-hover);
}
.com-btn.com-btn__secondary:active {
  background-color: var(--v2--color-bg-press);
}
.com-btn.com-btn__secondary.com-btn__disable {
  background-color: transparent;
  color: var(--v2--color-text-quaternary);
}
.com-btn.com-btn__text {
  background-color: transparent;
  color: var(--v2--color-text-brand-normal);
  border-color: transparent;
}
.com-btn.com-btn__text:hover {
  color: var(--v2--color-text-brand-hover);
}
.com-btn.com-btn__text:active {
  color: var(--v2--color-text-brand-press);
}
.com-btn.com-btn__text.com-btn__disable {
  color: var(--v2--color-text-brand-disable);
}
.com-btn.com-btn__error {
  background-color: var(--v2--color-bg-danger-normal);
  border-color: var(--v2--color-bg-danger-normal);
  color: var(--v2--color-text-onfunctionandbrand);
}
.com-btn.com-btn__error:hover {
  background-color: var(--v2--color-bg-danger-hover);
  border-color: var(--v2--color-bg-danger-hover);
}
.com-btn.com-btn__error:active {
  background-color: var(--v2--color-bg-danger-press);
  border-color: var(--v2--color-bg-danger-press);
}
.com-btn.com-btn__error.com-btn__disable {
  background-color: var(--v2--color-bg-danger-disable);
  border-color: var(--v2--color-bg-danger-disable);
}
.com-input-contain {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: var(--v2--color-border-input);
  padding: 8px;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--v2--color-text-primary);
  transition: border-color 0.3s;
  background-color: var(--v2--color-bg-body);
}
.com-input-contain .com-input {
  height: 100%;
  width: 100%;
  background-color: var(--v2--color-bg-body);
  color: var(--v2--color-text-primary);
}
.com-input-contain .com-input-error {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 4px 0;
  font-size: 14px;
  transform: translateY(100%);
  font-weight: 400;
  line-height: 22px;
  color: #f53f3f;
}
.com-input-contain:hover {
  border-color: var(--v2--color-border-input-focus);
}
.com-input-contain.com-input-contain__focus {
  border-color: var(--v2--color-border-input-focus);
  border-width: 2px;
  padding: 7px;
}
.com-input-contain.com-input-contain__focus .com-input-error {
  bottom: -1px;
  left: -1px;
}
.com-input-contain.com-input-contain__error {
  border-color: var(--v2--color-border-input-error);
}
.scrollbar-n {
  overflow: overlay;
  scrollbar-width: thin;
  scrollbar-color: var(--v2--color-bg-scrollbar-normal) transparent;
}
.scrollbar-n::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  visibility: hidden;
  background-color: var(--v2--color-bg-scrollbar-normal);
  background-clip: content-box;
}
.scrollbar-n:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}
.scrollbar-n:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--v2--color-bg-scrollbar-hover);
}
.scrollbar-n::-webkit-scrollbar {
  width: 10px;
}
.scrollbar-n::-webkit-scrollbar-thumb {
  border-radius: 5px;
}
.scrollbar-s {
  overflow: overlay;
  scrollbar-width: thin;
  scrollbar-color: var(--v2--color-bg-scrollbar-normal) transparent;
}
.scrollbar-s::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  visibility: hidden;
  background-color: var(--v2--color-bg-scrollbar-normal);
  background-clip: content-box;
}
.scrollbar-s:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}
.scrollbar-s:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--v2--color-bg-scrollbar-hover);
}
.scrollbar-s::-webkit-scrollbar {
  width: 8px;
}
.scrollbar-s::-webkit-scrollbar-thumb {
  border-radius: 4px;
}
.new-tips-dot {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: var(--v2--color-bg-brand-normal);
}