/* packages/shared-i18n/components/LanguageSwitcher.css */

.language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  visibility: visible;
  transition: all 0.3s ease;
  pointer-events: auto;
  overflow: visible;
}

/* Dropdown 比 Tooltip 多一层 trigger，需与 header 其它 icon 同高同轴 */
.language-switcher [class*="trigger"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* 下拉菜单：相对触发图标定位，显示在图标正下方（覆盖公共 Dropdown 的 fixed 定位）
 * 不覆盖 transform，保留 Dropdown 的 scaleY(0)→scaleY(1) 弹出动画 */
.language-switcher [class*="dropdownBottom"],
.language-switcher [class*="dropdownTop"] {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 12px) !important;
  z-index: 1001;
  overflow: visible;
}

/* 按钮外观由 Header 的 `.header-icon-btn` 统一控制 */
.language-switcher .language-switcher-btn {
  transition: background-color 0.2s ease;
}

.language-switcher:hover .language-switcher-btn {
  background: var(--community-icon-hover-bg);
  color: var(--text-primary);
}

/* 覆盖 Dropdown 的下拉菜单项样式 - 使其内容居中（勿影响触发按钮） */
.language-switcher [class*="dropdownItem"] {
  justify-content: center !important;
}

/* 覆盖 Dropdown 的标签样式 - 居中显示 */
.language-switcher [class*="dropdownItem"] span {
  text-align: center;
  flex: none !important;
}

.language-switcher [class*="dropdownItem"]:disabled {
  font-weight: 600;
  opacity: 1 !important;
  cursor: default !important;
}

.language-switcher .language-switcher-btn,
.language-switcher .language-switcher-btn * {
  opacity: 1 !important;
}

/* dropdown 打开时与 hover 背景一致 */
.language-switcher[class*="active"] .language-switcher-btn {
  pointer-events: none !important;
  background: var(--community-icon-hover-bg) !important;
  color: var(--text-primary) !important;
}

/* 下拉菜单容器 */
.main-dropdownContainer_kzw6S {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.main-trigger_RXMzs {
  cursor: pointer;
}

.main-dropdown_XmVjU {
  position: fixed;
  padding: 8px;
  pointer-events: none;
  min-width: 104px;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0px 0px 12px 0px var(--shadow-color);
  z-index: 9999;
  overflow: visible;
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  /* 收起时使用 ease-out，避免 scaleY(0) 时 overshoot 导致负值翻转 */
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  will-change: opacity, transform;
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
}

/* 向下展开：菜单在下方，从上方边缘展开 */
.main-dropdownBottom_jUbfp {
  transform-origin: top center;
}

/* 向上展开：菜单在上方，从下方边缘展开 */
.main-dropdownTop_Npx0j {
  transform-origin: bottom center;
}

.main-dropdownArrow_WpQe5 {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.main-dropdownBottom_jUbfp .main-dropdownArrow_WpQe5 {
  top: calc(0px - var(--tooltip-arrow-height, 8px) + 1px);
  border-left: var(--tooltip-arrow-size, 8px) solid transparent;
  border-right: var(--tooltip-arrow-size, 8px) solid transparent;
  border-bottom: var(--tooltip-arrow-height, 8px) solid var(--bg-secondary);
}

.main-dropdownTop_Npx0j .main-dropdownArrow_WpQe5 {
  bottom: calc(0px - var(--tooltip-arrow-height, 8px) + 1px);
  border-left: var(--tooltip-arrow-size, 8px) solid transparent;
  border-right: var(--tooltip-arrow-size, 8px) solid transparent;
  border-top: var(--tooltip-arrow-height, 8px) solid var(--bg-secondary);
}

/* 桥接区域：悬浮时填补 trigger 到菜单之间的空隙 */
.main-bridge_rkr3k {
  position: fixed;
  width: 60px;
  height: 16px;
  transform: translateX(-50%) translateY(60%);
  background: transparent;
  pointer-events: auto;
  z-index: 10000;
}

.main-dropdownVisible_VmViR {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scaleY(1);
  /* 展开时使用回弹曲线 */
  transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 左对齐：菜单左边与触发器左边对齐，取消水平居中偏移 */
.main-dropdownAlignLeft_dl2a2 {
  transform: translateX(0) scaleY(0);
}
.main-dropdownAlignLeft_dl2a2.main-dropdownBottom_jUbfp {
  transform-origin: top left;
}
.main-dropdownAlignLeft_dl2a2.main-dropdownTop_Npx0j {
  transform-origin: bottom left;
}
.main-dropdownAlignLeft_dl2a2.main-dropdownVisible_VmViR {
  transform: translateX(0) scaleY(1);
}
.main-dropdownAlignLeft_dl2a2 .main-dropdownArrow_WpQe5,
.main-dropdownAlignRight_OHz6x .main-dropdownArrow_WpQe5 {
  /* 水平位置由 Dropdown 按触发器中心动态计算 */
}

/* 右对齐：菜单右边与触发器右边对齐，宽度向左延伸 */
.main-dropdownAlignRight_OHz6x {
  transform: translateX(-100%) scaleY(0);
}
.main-dropdownAlignRight_OHz6x.main-dropdownBottom_jUbfp {
  transform-origin: top right;
}
.main-dropdownAlignRight_OHz6x.main-dropdownTop_Npx0j {
  transform-origin: bottom right;
}
.main-dropdownAlignRight_OHz6x.main-dropdownVisible_VmViR {
  transform: translateX(-100%) scaleY(1);
}

.main-dropdownHeader_TRRSl {
  padding: 4px 6px 8px;
  box-sizing: border-box;
}

.main-dropdownItem_nEx6m {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 9px 14px;
  background: transparent;
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
  text-align: left;
  box-sizing: border-box;
}

.main-dropdownItem_nEx6m:hover:not(.main-disabledItem_FOQYu):not(.main-selectedItem_FV_Un) {
  color: var(--text-primary);
  background: var(--text-placeholder);
  border-radius: 8px;
}

.main-dropdownItem_nEx6m:active:not(.main-disabledItem_FOQYu) {
  color: var(--primary-color);
}

.main-selectedItem_FV_Un {
  background: transparent;
  color: var(--primary-color);
}

.main-selectedItem_FV_Un:hover {
  color: var(--btn-primary-bg-hover);
  background: var(--text-placeholder);
  border-radius: 8px;
}

.main-disabledItem_FOQYu {
  color: var(--primary-color);
  cursor: not-allowed;
}

.main-dropdownItemIcon_JrXQq {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 8px;
}

.main-dropdownItemLabel_JSPi2 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-disabled_tWT3z {
  opacity: 0.6;
  pointer-events: none;
  color: var(--text-secondary);
}

/* hover 模式下，active 时禁用 trigger 的 pointer-events（避免鼠标移开时立即关闭） */
/* click 模式下，需要保持可点击以关闭菜单 */
.main-active_YtzxT.main-hover-mode_Qoq8D .main-trigger_RXMzs,
.main-active_YtzxT.main-hover-mode_Qoq8D .main-trigger_RXMzs * {
  pointer-events: none;
  color: var(--primary-hover);
}

/* packages/shared-theme/theme.css */

/* 全局字体（唯一加载路径：main-app/public/index.html 内 requestIdleCallback + FontFace）
   中文与标点 → Alibaba PuHuiTi；数字、英文、符号等 → HarmonyOS Sans */

/* Alibaba PuHuiTi：中文汉字 + CJK/全角标点 */
/* @font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("./font/alibabaph/BGgQ5owLOA0l.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF, U+3000-303F, U+FE10-FE2F, U+FE30-FE4F,
    U+FF01-FF0F, U+FF1A-FF20, U+FF3B-FF40, U+FF5B-FF65;
} */

/* HarmonyOS Sans：拉丁、数字、符号、日韩文、全角英数等 */
/* @font-face {
  font-family: "HarmonyOS Sans";
  src: url("./font/harmonyossans/HarmonyOS_Sans_SC_Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0009-000D, U+0020-002F, U+0030-0039, U+003A-007E, U+00A0-00FF,
    U+3040-309F, U+30A0-30FF, U+1100-11FF, U+3130-318F, U+AC00-D7AF,
    U+0600-06FF, U+0E00-0E7F, U+0400-04FF, U+0370-03FF,
    U+FF10-FF19, U+FF21-FF5A, U+FF66-FFEF;
} */

/* 禁止网页选中文字和图片 */
html,
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 禁止图片拖拽 */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* 输入框、可编辑区域允许选中 */
input,
textarea,
[contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* 浅色与深色共用变量 */
:root {
  /* 文本大小 */
  --text-h1: 18px;
  --text-h2: 16px;
  --text-h3: 14px;
  --text-body: 14px;
  --text-caption: 12px;

  /* 文字字重 */
  --text-weight-black: 900;
  --text-weight-h1: 700;
  --text-weight-h2: 700;
  --text-weight-h3: 500;
  --text-weight-body: 500;
  --text-weight-caption: 400;

  /* 主题色 */
  --primary-color: #ff5019;
  --primary-color-hover: #ff602e;
  --primary-color-bg: #FF501917;
  /* 兼容历史变量名 */
  --primary-hover: var(--primary-color-hover);

  --delete-color: #ff1919;
  --delete-color-hover: #ff4d4f;
}

/* 浅色主题（默认） */
[data-theme="light"],
#root[data-theme="light"] {
  /* 背景色 */
  --bg-primary: #ebedf0;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f4f6;

  --shadow-color: rgba(0, 0, 0, 0.12);
  --shadow-color-light: rgba(0, 0, 0, 0.08);

  /* 文字颜色 */
  --text-primary: #1e2023;
  --text-secondary: #3f4144;
  --text-tertiary: #6c6e70;
  --text-quaternary: #999a9c;
  --text-muted: #c6c7c8;
  --text-disabled: #dddede;
  --text-placeholder: #ebebeb;
  --text-inverse: #f6f6f6;

  --text-title-color: #1E2023;
  --text-body-color: #7F8792;
  --text-caption-color: #999A9C;

  /* 分割线颜色 */
  --line-color: #ebebeb;

  /* 数字输入框（带箭头） */
  --number-input-border: #d3d5d6;
  --number-input-arrow: #959698;
  --number-input-arrow-bg: #f7f7f7;
  --number-input-arrow-border: #dcdcde;

  /* 按钮颜色 */
  --btn-default-bg: #F3F4F6;
  --btn-default-bg-hover: #E8EAEE;
  --btn-default-text: #1E2023;
  --btn-default-text-hover: #1E2023;            
  --btn-primary-bg: var(--primary-color);
  --btn-primary-bg-hover: var(--primary-color-hover);
  --btn-primary-text: #ffffff;          
  --btn-primary-text-hover: #FFFFFF;
  --btn-secondary-bg: #1E2023;
  --btn-secondary-bg-hover: #2F3237;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-text-hover: #FFFFFF;
  --btn-disabled-bg: #EBEBEB;
  --btn-disabled-text: #999A9C;

  /* 开关颜色：关闭 / 打开 */
  --switch-bg-off: #f7f8f9;
  --switch-thumb-off: #d6dae0;
  --switch-border-off: #d6dae0;
  --switch-thumb-border-off: #f7f8f9;
  --switch-bg-on: var(--primary-color);
  --switch-thumb-on: #ffffff;
  --switch-border-on: var(--primary-color);
  --switch-thumb-border-on: #ffffff;

  /* Radio 未选中边框 */
  --radio-border-color: #1E202340;

  /* 搜索输入框 */
  --input-placeholder: #949597;

  /* 章节描述 */
  --section-description: #949597;

  /* Tabs pill */
  --tab-pill-text-inactive: #949597;
  --tabspill-bg: #f6f6f6;

  /* 小圆点（指示器）选中时的边框色 */
  --dot-selected-border-color: #d3d3d3;

  /* logo 图片 */
  --logo-img: url(/images/logo.bc19c6995c8cbf1f01b1.png);
  --logo-img-shrink: url(/images/logo-shrink.d80ca742de130ab9c76a.png);

  /* 滑块颜色 */
  --slider-bg-color: #F1F2F4; /* 背景色 */
  --slider-strip-color: #D6DAE0; /* 滑块颜色 */
  --slider-thumb-up:#99A3B2;
  --slider-thumb-down:rgba(255, 255, 255, 0.45);
  --slider-thumb-shadow:0 0 10px rgba(153, 163, 178, 0.45); /* 拖拽按钮悬停时-边框颜色 */
  --slider-border-color: var(--slider-strip-color); /* 边框颜色 */
  --slider-border-focus-color: var(--text-primary); /* 聚焦时边框颜色 */
  --slider-text-color: var(--text-primary); /* 滑块文字颜色 */
  --slider-text-unit-color: #7f8792; /* 单位文字颜色 */
  --slider-scale-color: #cdd2d9; /* 标尺颜色 */
  --slider-scale-color-dpi: #ffffff; /* 标尺颜色 */
  --slider-input-bg-color: #ffffff; /* 输入框背景色 */

  /* 弹窗颜色 */
  --modal-bg-color: #ffffff; /* 弹窗背景色 */
  --modal-title-text-color: #1e2023; /* 标题文字颜色 */
  --modal-button-confirm-bg-color: var(--modal-title-text-color);
  --modal-button-confirm-text-color: var(--modal-bg-color);
  --modal-button-cancel-bg-color: #f3f4f6;
  --modal-button-cancel-text-color: var(--modal-title-text-color);
  --community-config-preview-overlay-bg: rgba(235, 237, 240, 0.75);
  --community-stat-divider: rgba(30, 32, 35, 0.1);
  --community-stat-icon-muted: rgba(30, 32, 35, 0.25);
  --community-icon-hover-bg: rgba(30, 32, 35, 0.09);

  /* Loading 组件 */
  --loading-content-bg: var(--modal-bg-color);
  --loading-content-border: rgba(255, 255, 255, 1);
  --loading-spinner-track: rgba(30, 32, 35, 0.15);
  --loading-spinner-active: #1E2023;
  --loading-progress-track: rgba(0, 0, 0, 0.15);
  --loading-progress-bar: linear-gradient(90deg, #474B52 0%, #1E2023 100%);

  /* 调色板板颜色 */
  --palette-bg-color: #f3f4f6;
  --palette-label-color: #1e202345;
  --palette-el-tab-active-bg: #1E2023;
  --palette-el-tab-active-color: #f3f4f6; 
  --palette-el-hex-group-border: #D6DAE0;
  --palette-el-clear-btn-bg: #F3F4F6;
  --palette-el-clear-btn-color: #1E2023;
  --palette-colorLabel-color: #1e2023;

  /* 设备卡片 - 休眠条（底部横条） */
  --device-card-sleep-bg: rgba(30, 32, 35, 0.56);
  --device-card-sleep-bar-bg: rgba(0, 0, 0, 0.25);
  --device-card-sleep-bar-text: #FFFFFF;
  --device-card-icon: rgba(30, 32, 35, 0.85);
  --device-card-instruction-bg: rgba(30, 32, 35, 0.04);
  --device-card-tips-text: #1E2023; 

  /* 连接设备按钮颜色 */
  --connect-button-bg: var(--primary-color);
  --connect-button-text: #ffffff;
  --connect-button-bg-hover: var(--primary-color-hover);

  /* 菜单样式 */
  --menu-bg-color: #f9f9fc;
  /* DeviceStatus：独立的毛玻璃背景与悬停浮层 */
  --devicestatus-bg: rgba(255, 255, 255, 0.8);
  --devicestatus-overlay-mask-bg: rgba(0, 0, 0, 0.86);
  --devicestatus-overlay-button-bg: rgba(255, 255, 255, 0.96);
  --devicestatus-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --menu-child-bg-color: rgba(249, 249, 252,0.98);
  --menu-child-bg-color-hover: rgba(30, 32, 25, 0.06);
  --menu-equipment-before-bg1: #FFFFFF80;
  --menu-equipment-before-bg2: #FFFFFF80;
  --menu-equipment-bg: #FFFFFF80;
  --menu-equipment-name-text: #0F131A;
  --menu-equipment-power-text: rgba(30, 32, 25, 0.45);
  --menu-patttern-before-bg: rgba(0, 0, 0, 0.86);
  --menu-patttern-button-bg: rgba(255, 255, 255, 0.65);
  --menu-patttern-icon-color: #ffffff;
  --menu-list-title-text: rgba(30, 32, 35, 0.45);
  --menu-list-child-icon: #1E2023;
  --menu-child-list-text-arrow: #646465;
  --menu-child-list-text-arrow-active: #1e2023;
  --menu-line: rgba(30, 32, 25, 0.09);
  --menu-feedback-bg: #F0F2F5;
  --menu-feedback-text: #1E2023;
  --menu-modal-bg: rgb(235, 236, 239);
  --menu-modal-border: rgba(30, 32, 35, 0.09);
  --menu-modal-title-text: #1e2023;
  --menu-modal-desc-text: #6c6e70;
  --menu-devicelist-item-bg: #dbdcde;
  --menu-devicelist-item-hover-bg: #1e2023;
  --menu-devicelist-item-hover-text: #ffffff;


  /* 灯光样式 */
  --lighting-operation-bg: #ffffff;
  --lighting-operation-line: rgba(34, 38, 44, 0.08);

  /* 全局音乐律动 — 设备列表行 / 复选框（亮主题，对齐设计稿） */
  --music-rhythm-device-row-bg: #f5f5f5;
  --music-rhythm-device-row-bg-hover: #ebebeb;
  --music-rhythm-device-checkbox-bg: #ffffff;
  --music-rhythm-device-checkbox-border: #d6dae0;
  --music-rhythm-device-checkbox-checked-bg: #1e2023;
  --music-rhythm-device-checkbox-checked-border: #1e2023;
  --music-rhythm-device-checkbox-checked-icon: #ffffff;

  /* 鼠标改键页文本颜色 */
  --label-bg: #ffffff;
  --label-border-color: #1e2023;
  --connection-line-color: #1e2023;
  --key-remapping-description: rgba(0, 0, 0, 0.4);

  /* 滚动条（keymap 等） */
  --scrollbar-track: #ffffff;
  --scrollbar-thumb: #1E202317;
  --scrollbar-thumb-hover: rgba(30, 32, 35, 0.15);

  /* 宏样式 */
  --macro-bg: var(--bg-secondary);
  --macro-line: rgba(34, 38, 44, 0.09);
  --macro-list-item-bg: var(--bg-tertiary);
  --macro-list-item-active-bg: transparent;
  --macro-setting-keyvalue-bg: var(--macro-list-item-bg);
  --macro-setting-keyvalue-border: transparent;
  --macro-setting-keyvalue-text: #1E2023;
  --macro-recording-tips-color: #7E7E7E;
  --macro-recording-item-bg: rgba(243, 244, 246, 1);
  --macro-recording-item-drag: #1E2023;

  /* 高级键样式 */
  --advancedKey-bg: #ffffff;
  --advancedKey-max-tit: #1e2023;
  --advancedKey-min-tit: rgba(0, 0, 0, 0.4);
  --advancedKey-list-item-bg: #F3F4F6; 
  --advancedKey-list-item-icon: #72777F;
  --advancedKey-after-border: #F3F4F6;
  --advancedKey-before-list-key-bg: #FFFFFF;
  --advancedKey-after-key-item-bg: rgba(0, 0, 0, 0.09);
  --advancedKey-key-bg: rgba(0, 0, 0, 0.09);
  --advancedKey-key-hover-bg: rgba(0, 0, 0, 0.09);
  --advancedKey-key-hover-border: #1E2023;
  --advancedKey-select-key-bg: #F6F7F8;
  --advancedKey-select-key-model-bg: #72777F;
  --advancedKey-select-bg: #F3F4F6; 
  --advancedKey-select-active-bg: #1E2023;
  --advancedKey-select-radio-bg: none;
  --advancedKey-select-radio-border: rgba(30, 32, 35, 0.25);
  --advancedKey-select-radio-active-bg: #ffffff;
  --advancedKey-select-radio-active-border: #ffffff;
  --advancedKey-select-radio-active-svg: #000000;
  --advancedKey-select-text: #1E2023;
  --advancedKey-select-active-text: #FFFFFF;
  --advancedKey-dks-tips-bg: #EBEBEB;
  --advancedKey-dks-tips-line: #D9D9D9;
  --advancedKey-dks-tips-text1: #1E2023;
  --advancedKey-dks-tips-text2: #1E2023;
  --advancedKey-dks-tips-icon001: url(/images/001-white.413d918424ae81cee260.png);
  --advancedKey-dks-tips-icon002: url(/images/002-white.fc8fc034c9f01c312e2e.png);
  --advancedKey-dks-tips-icon003: url(/images/003-white.357864d94c4d38d8b5e1.png);
  --advancedKey-socd-icon: url(/images/socd-white.abbfb9833335f7581e3e.png);
  --advancedKey-rs-icon: url(/images/rs-white.4607fd89f9b87ec4f625.png);
  --advancedKey-dks-icon: url(/images/dks-white.0cd1705ace992f44e7db.png);
  --advancedKey-mpt-icon: url(/images/mpt-white.f689f7808de5384db9f4.png);
  --advancedKey-mt-icon: url(/images/mt-white.e2d80f9b0a32e70968f1.png);
  --advancedKey-tgl-icon: url(/images/tgl-white.8179248a548c62b31fc7.png);
  --advancedKey-end-icon: url(/images/end-white.167be6e9c56edec98c1d.png);
  --allKeyboardSelect-bg: #FFFFFF;
  --allKeyboardSelect-shadow: rgba(25, 26, 31, 0.28);
  --advancedKey-test-point-icon: url(/images/point-white.2cc9e0d033bbd83387ab.png);
  --advancedKey-dks-range-bg: #FFD3C5;


  /* 接收器配对弹窗 - 圆环颜色（由内到外） */
  --pairing-ring-1: rgba(0, 0, 0, 0.15);
  --pairing-ring-2: rgba(0, 0, 0, 0.12);
  --pairing-ring-3: rgba(0, 0, 0, 0.09);
  --pairing-ring-4: rgba(0, 0, 0, 0.06);
  --receiver-color:rgba(0, 0, 0, 0.15);
  --receiver-color-hover:rgba(30, 32, 35); 

  /* 板载配置样式 */
  --board-bg: #ffffff;
  --board-title: #0f131a;
  --board-desc: #576e8d;
  --board-btn-import-bg: #ffffff;
  --board-btn-import-border: var(--primary-color);
  --board-btn-import-text: var(--primary-color);
  --board-btn-newConfig-bg: var(--primary-color);
  --board-btn-newConfig-text: #ffffff;
  --board-configCard-bg: #f3f4f6;

  /* 触发样式 */
  --taigger-bg: #ffffff !important;
  --taigger-line: #dbdcdd;
  --taigger-mixedshaft-bg: transparent;
  --taigger-mixedshaft-border: #EBEDF0;
  --taigger-mixedshaft-gradient: linear-gradient(180deg,#00000000 0%,#DAFFFC 65%,#00000000 100%);
  --default-img-url: url(/images/007.b7d6c3e080329b517f56.png);
  --taigger-img-url: url(/images/006.766427b625defbe2e154.png);

  --reportrate-option-bg-hover: #e3e3e3;

  /* 性能样式 */
  --performance-bg: #ffffff;
  --performance-title: #1e2023;
  --performance-desc: #7f8792;

  /* 其他模块样式 */
  --other-tab-bg: #f1f2f4;
  --other-tab-active-bg: #161c27;
  --other-tab-border: #c0c0c1;
  --other-tab-text: #6c6e70;
  --other-tab-hover-text: #161c27;
  --other-tab-active-text: #f6f6f6;
  --other-version-max-text: #1e2023;
  --other-version-min-text: #6c6e70;
  --other-button-bg: #f3f4f6;
  --other-button-text: #1e2023;
  --other-button-hover-bg: var(--primary-color);
  --other-button-hover-text: #ffffff;
  --other-button-install-bg: #161c27;
  --other-button-install-text: #f6f6f6;
  --other-upload-icon: url(/images/001-white.ccec3db0760d487f2c64.png);
  --other-recovery-bg: #f3f4f6;
  --other-recovery-button-bg: #e0e1e3;
  --other-recovery-button-text: #161c27;
  --other-recovery-button-danger-bg: #ff2c2c;
  --other-recovery-button-danger-text: #f6f6f6;

  /* 系统设置样式 */
  --system-bg: #ffffff;
  --system-text: #1e2023;
  --system-about-bg: #f1f2f4;
  --system-about-text: rgb(30, 32, 35, 0.65);
  --system-about-btn: #1e2023;

  /* 连接设备样式 */
  --connect-mask-bg: linear-gradient(
    to right,
    #ebedf0 0%,
    transparent 9%,
    transparent 91%,
    #ebedf0 100%
  );
  --connect-list-bg: #ffffff;
  --connect-name-text: #0f131a;
  --connect-power-text: rgba(30, 32, 35, 0.85);
  --connect-dormancy-before-bg: rgba(30, 32, 35, 0.56);
  --connect-dormancy-bg: rgba(0, 0, 0, 0.25);
  --connect-dormancy-text: #ffffff;
  --connect-color-active: #D3D3D3;

  /* 传感器模式卡片背景色 */
  --sensor-mode-bg:#F9F9F9;
  --sensor-mode-bg-active:#FFFFFF;
  --sensor-mode-label: #1E2023;
  --sensor-mode-description: #6C6E70;
  --sensor-mode-icon: #1E2023;

  /* Message 组件 - */
  --message-bg: #FFFFFF;
  --message-text: #1E2023;

  --scaleslider-track-color: #F7F8F9;
  --scaleslider-value-bg-color: #EFF0F3;

  --usb-plug-cover-up:rgb(235, 237, 240, 1);
  --usb-plug-cover-down:rgb(235, 237, 240 ,0);

  --macro-letter-bg: rgba(30, 32, 35, 0.09);

  --sensor-rotation-btn-icon: rgba(30, 32, 35, 0.25);

  --auth-modal-get-code-btn-bg: #FFFFFF;

  /* 壁纸 */
  --wallpaper-title: rgba(0, 0, 0, 0.85);
  --wallpaper-border-color: rgba(30, 32, 35, 0.25);
  --wallpaper-border-hover-color: rgba(30, 32, 35, 0.4);
  --wallpaper-upload-bg: url(/images/upload-white.905278e182d21f437833.png);
  --wallpaper-icon-bg: rgba(0, 0, 0, 0.04);
  --wallpaper-icon-color: rgba(0, 0, 0, 0.65);
  --wallpaper-tips-bg: rgba(255, 255, 255, 0.45);;
  --wallpaper-tips-label-color: rgba(0, 0, 0, 0.85);
  --wallpaper-tips-value-color: rgba(0, 0, 0, 0.65);

  --keyremap-tooltip-color: rgba(30, 32, 35, 0.75);
  --keyremap-tooltip-text: #FFFFFF;

  /* 键盘样式 */
  --keyboard-bg: #EBEDF0;
  --beyboard-border: #EBEDF0;
  --keyboard-bg-hover: rgba(30, 32, 35, 0.15);
  --beyboard-border-hover: rgba(30, 32, 35, 1);
  --beyboard-text-hover: #1E2023;
  --keyboard-label-color: #F6F6F6;
  --keyboard-selected-bg: #1E2023;
  --keyboard-selected-text: #F6F6F6;
  --keyboard-selected-text-hover: #F6F6F6;

  --dpi-card-bg-hover: #EBECEE;

  /* 头部更新图标 */
  --header-update-icon-color: #1E2023;
  --header-update-icon-hover-color: var(--primary-color-hover);
  --header-search-input-bg: rgba(255, 255, 255, 0.65);
  --header-search-input-bg-hover: #FFFFFF;
  --header-search-input-color: rgba(30, 32, 35, 0.45);

  /* 屏幕页样式 */
  --screen-list-item-bg: #1E20230A;
  --screen-list-item-border: #1E202340;
  --screen-icon-bg: #F2F2F2A6;
  --screen-operation-bg: #0000000A;
  --screen-right-panel-overlay-bg: #FFFFFF73;
  --screen-right-panel-overlay-progress-bar: linear-gradient(90deg, #474B52, #1E2023);
  --screen-upload-icon: url(/images/upload-ligth.db18f55564f219228f07.png);

  /* 物理按键样式 */
  --physical-tips-bg: #ffffff;
  --physical-tips-beofre-bg: #1E2023;
  --physical-tips-max-color: #1E2023;
  --physical-tips-min-color: #6C6E70;
  --physical-setting-bg: #ffffff;
  --physical-setting-title-color: #1E2023;
  --physical-hover-setting-border: #1E2023;

  /* 板载配置样式 */
  --config-tips-iconfont-color: rgba(30, 32, 35, 0.25);
  --config-tips-tip-bg: #ffffff;
  --config-tips-shadow-color: rgba(0, 0, 0, 0.35);
  --config-tips-content-color: rgba(30, 32, 35, 0.85);

  --cover-color: rgba(255, 255, 255, 0.65);
  /* 骨架屏样式 */  
  --skeleton-bg: linear-gradient(
    90deg,
    rgba(243, 244, 246, 1) 0%,
    rgba(232, 234, 238, 1) 50%,
    rgba(243, 244, 246, 1) 100%
  );
  --skeleton-bg-keyboard: linear-gradient(
    90deg,
    transparent 0%,
    transparent 20%,
    rgba(243, 244, 246, 1) 50%,
    transparent 70%,
    transparent 100%
  );
  --quick-skeleton-bg: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(226, 229, 233, 1) 100%
  );
}

/* 深色主题 */
[data-theme="dark"],
#root[data-theme="dark"] {
  /* 背景色 */
  --bg-primary: #06080a;
  --bg-secondary: #0f131a;
  --bg-tertiary: #161c27;

  --shadow-color: rgba(0, 0, 0, 0.6);
  --shadow-color-light: rgba(0, 0, 0, 0.25);

  /* 文字颜色 */
  --text-primary: #f6f6f6;
  --text-secondary: #dbdcdd;
  --text-tertiary: #abadaf;
  --text-quaternary: #7b7d81;
  --text-muted: #4b4e53;
  --text-disabled: #33363c;
  --text-placeholder: #25282f;
  --text-inverse: #181c23;

  --text-title-color: #f6f6f6;
  --text-body-color: #7b7d81;
  --text-caption-color: #4b4e53;

  /* 开关颜色：关闭 / 打开 */
  --switch-bg-off: #21242c;
  --switch-thumb-off: #4b4f57;
  --switch-border-off: #4b4f57;
  --switch-thumb-border-off: #21242c;
  --switch-bg-on: var(--primary-color);
  --switch-thumb-on: #ffffff;
  --switch-border-on: var(--primary-color);
  --switch-thumb-border-on: #ffffff;

  /* 分割线颜色 */
  --line-color: #25282f;

  /* 数字输入框（带箭头） */
  --number-input-border: #454952;
  --number-input-arrow: #4b4e55;
  --number-input-arrow-bg: #131720;
  --number-input-arrow-border: #42454d;

  /* 按钮颜色 */
  --btn-default-bg: #FFFFFF17;
  --btn-default-bg-hover: #181C23;
  --btn-default-text: #ffffff;
  --btn-default-text-hover: #abadaf;
  --btn-primary-bg: var(--primary-color);
  --btn-primary-bg-hover: var(--primary-color-hover);
  --btn-primary-text: #ffffff;
  --btn-primary-text-hover: #ffffff;
  --btn-secondary-bg: #f6f6f6;
  --btn-secondary-bg-hover: #a5a7a9;
  --btn-secondary-text: #1e2023;
  --btn-secondary-text-hover: #323437;
  --btn-disabled-bg: #33363c;
  --btn-disabled-text: #7b7d81;

  /* Radio 未选中边框 */
  --radio-border-color: #9fa1a3;

  /* 搜索输入框 */
  --input-placeholder: #6f7176;

  /* 章节描述 */
  --section-description: #6f7176;

  /* Tabs pill */
  --tab-pill-text-inactive: #6f7176;
  --tabspill-bg: #090c0f;

  /* 小圆点（指示器）选中时的边框色 */
  --dot-selected-border-color: #adadad;

  /* logo 图片 */
  --logo-img: url(/images/logo-black.61ffeca59b72e575ad5b.png);
  --logo-img-shrink: url(/images/logo-shrink.d80ca742de130ab9c76a.png);

  /* 滑块颜色 */
  --slider-bg-color: #2B303A; /* 背景色 */
  --slider-strip-color: #B5B7BA; /* 滑块颜色 */
  --slider-thumb-up:#D9D9D9;
  --slider-thumb-down:rgba(255, 255, 255, 0.25);
  --slider-thumb-shadow: transparent; /* 拖拽按钮悬停时-边框颜色 */
  --slider-border-color: #404248; /* 边框颜色 */
  --slider-border-focus-color: #ffffff; /* 聚焦时边框颜色 */
  --slider-text-color: #ffffff; /* 滑块文字颜色 */
  --slider-text-unit-color: #7a7d81; /* 单位文字颜色 */
  --slider-scale-color: #60646b; /* 标尺颜色 */
  --slider-scale-color-dpi: #2b303a; /* 标尺颜色 */
  --slider-input-bg-color: #0f131a; /* 输入框背景色 */


  /* 弹窗颜色 */
  --modal-bg-color: var(--bg-secondary); /* 弹窗背景色 */
  --modal-title-text-color: #f6f6f6; /* 标题文字颜色 */
  --modal-button-confirm-bg-color: var(--modal-title-text-color);
  --modal-button-confirm-text-color: var(--modal-bg-color);
  --modal-button-cancel-bg-color: var(--bg-tertiary);
  --modal-button-cancel-text-color: var(--modal-title-text-color);
  --community-config-preview-overlay-bg: rgba(6, 8, 10, 0.75);
  --community-stat-divider: rgba(255, 255, 255, 0.1);
  --community-stat-icon-muted: rgba(255, 255, 255, 0.25);
  --community-icon-hover-bg: rgba(255, 255, 255, 0.09);

  /* Loading 组件 */
  --loading-content-bg: var(--modal-bg-color);
  --loading-content-border: rgba(255, 255, 255, 0.25);
  --loading-spinner-track: rgba(255, 255, 255, 0.2);
  --loading-spinner-active: #FFFFFF;
  --loading-progress-track: rgba(255, 255, 255, 0.15);
  --loading-progress-bar: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 1) 100%);

  /* 调色板板颜色 */
  /* --palette-bg-color: var(--bg-tertiary);
  --palette-label-color: #ffffff22;
  --palette-colorLabel-color: #c2c3c4; */

  --palette-bg-color: #1e202345;
  --palette-label-color: #f3f4f6;
  --palette-el-tab-active-bg: #f3f4f6;
  --palette-el-tab-active-color: #1E2023;
  --palette-el-hex-group-border: #292b2e;
  --palette-el-clear-btn-bg: #1E2023;
  --palette-el-clear-btn-color: #F3F4F6;
  --palette-colorLabel-color: #c2c3c4;

  /* 设备卡片 - 休眠条（底部横条，略深于卡片） */
  --device-card-sleep-bg: rgba(15, 19, 26, 0.85);
  --device-card-sleep-bar-bg: rgba(0, 0, 0, 0.25);
  --device-card-sleep-bar-text: #F5F6F6;
  --device-card-icon: rgba(255, 255, 255, 0.65);
  --device-card-instruction-bg: rgba(255, 255, 255, 0.04);
  --device-card-tips-text: rgba(255, 255, 255, 0.85);

  /* 连接设备按钮颜色（与浅色主题一致：品牌橙） */
  --connect-button-bg: var(--primary-color);
  --connect-button-text: #ffffff;
  --connect-button-bg-hover: var(--primary-color-hover);

  /* 菜单样式 */
  --menu-bg-color: var(--bg-secondary);
  /* DeviceStatus：独立的毛玻璃背景与悬停浮层 */
  --devicestatus-bg: rgba(15, 19, 26, 0.85);
  --devicestatus-stroke-color: rgba(255, 255, 255, 0.08);
  --devicestatus-stroke-color-end: rgba(255, 255, 255, 0);
  --devicestatus-stroke-gradient: linear-gradient(
    135deg,
    var(--devicestatus-stroke-color) 0%,
    var(--devicestatus-stroke-color-end) 100%
  );
  --devicestatus-overlay-mask-bg: rgba(0, 0, 0, 0.86);
  --devicestatus-overlay-button-bg: rgba(255, 255, 255, 0.65);
  --devicestatus-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
  --menu-child-bg-color: rgba(15, 19, 26, 0.98);
  --menu-child-bg-color-hover: rgba(255, 255, 255, 0.04);
  --menu-equipment-before-bg1: #FFFFFF14;
  --menu-equipment-before-bg2: #0F131A65;
  --menu-equipment-bg: var(--bg-secondary);
  --menu-equipment-name-text: rgba(255, 255, 255, 0.96);
  --menu-equipment-power-text: rgba(255, 255, 255, 0.45);
  --menu-patttern-before-bg: rgba(0, 0, 0, 0.86);
  --menu-patttern-button-bg: rgba(255, 255, 255, 0.96);
  --menu-patttern-icon-color: #ffffff;
  --menu-list-title-text: rgba(255, 255, 255, 0.45);
  --menu-list-child-icon: rgba(255, 255, 255, 0.85);
  --menu-child-list-text-arrow: #abadaf;
  --menu-child-list-text-arrow-active: #ffffff;
  --menu-line: rgba(255, 255, 255, 0.09);
  --menu-feedback-bg: #06080a;
  --menu-feedback-text: #ffffff;
  --menu-modal-bg: #11151c;
  --menu-modal-border: rgba(255, 255, 255, 0.15);
  --menu-modal-title-text: #ffffff;
  --menu-modal-desc-text: #7b7d81;
  --menu-devicelist-item-bg: #1e2023;
  --menu-devicelist-item-hover-bg: #dbdcde;
  --menu-devicelist-item-hover-text: #000000;

  /* Message 组件  */
  --message-bg: #0F131A;
  --message-text: #FFFFFF;

  /* 灯光样式 */
  --lighting-operation-bg: var(--bg-secondary);
  --lighting-operation-line: #22262c;

  /* 全局音乐律动 — 设备列表行 / 复选框（暗主题，对齐设计稿） */
  --music-rhythm-device-row-bg: #1c1c21;
  --music-rhythm-device-row-bg-hover: #25252c;
  --music-rhythm-device-checkbox-bg: #1c1c21;
  --music-rhythm-device-checkbox-border: #44444a;
  --music-rhythm-device-checkbox-checked-bg: #ffffff;
  --music-rhythm-device-checkbox-checked-border: #ffffff;
  --music-rhythm-device-checkbox-checked-icon: #1e2023;

  /* 鼠标改键页颜色 */
  --label-bg:#0F131A;
  --label-border-color: #FFFFFF;
  --connection-line-color: #8A8D93;
  --key-remapping-description: rgba(255, 255, 255, 0.4);

  /* 滚动条（keymap 等） */
  --scrollbar-track: #0f131a;
  --scrollbar-thumb: #FFFFFF17;
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);

  /* 宏样式 */
  --macro-bg: var(--bg-secondary);
  --macro-line: #22262c;
  --macro-list-item-bg: var(--bg-tertiary);

  --macro-setting-keyvalue-bg: var(--macro-list-item-bg);
  --macro-setting-keyvalue-border: #292e37;
  --macro-setting-keyvalue-text: rgba(255, 255, 255, 0.6);
  --macro-recording-tips-color: #7e7e7e;
  --macro-recording-item-bg: rgba(255, 255, 255, 0.09);
  --macro-recording-item-drag: rgba(255, 255, 255, 0.3);

  /* 高级键样式 */
  --advancedKey-bg: var(--bg-secondary);
  --advancedKey-max-tit: #FFFFFF;
  --advancedKey-min-tit: #6F7176;
  --advancedKey-list-item-bg: #181C23;
  --advancedKey-list-item-icon: #FFFFFF80;
  --advancedKey-after-border: #22262c;
  --advancedKey-before-list-key-bg: rgba(255,255,255,0.04);
  --advancedKey-after-key-item-bg: rgba(255,255,255,0.04);
  --advancedKey-key-bg: rgba(255,255,255,0.09);
  --advancedKey-key-hover-bg: rgba(255,255,255,0.25);
  --advancedKey-key-hover-border: rgba(255,255,255,0.85);
  --advancedKey-select-key-bg: #14181E;
  --advancedKey-select-key-model-bg: #FFFFFF80;
  --advancedKey-select-bg: rgba(255,255,255,0.09);
  --advancedKey-select-active-bg: rgba(255, 255, 255, 0.65);
  --advancedKey-select-radio-bg: none;
  --advancedKey-select-radio-border: rgba(255, 255, 255, 0.6);
  --advancedKey-select-radio-active-bg: #000000;
  --advancedKey-select-radio-active-border: #000000;
  --advancedKey-select-radio-active-svg: rgba(255, 255, 255, 0.6);
  --advancedKey-select-text: rgba(255, 255, 255, 0.6);
  --advancedKey-select-active-text: #000000;

  --advancedKey-dks-tips-bg: #33363c;
  --advancedKey-dks-tips-line: #393b42;
  --advancedKey-dks-tips-text1: rgba(255, 255, 255, 0.65);
  --advancedKey-dks-tips-text2: #FFFFFF;
  --advancedKey-dks-tips-icon001: url(/images/001-black.10568761bca14ef036f1.png);
  --advancedKey-dks-tips-icon002: url(/images/002-black.33bfd1700f0ff6e3dfd3.png);
  --advancedKey-dks-tips-icon003: url(/images/003-black.22fb2f4ae3f47de55759.png);
  --advancedKey-socd-icon: url(/images/socd.f9d36ee1b048602cf730.png);
  --advancedKey-rs-icon: url(/images/rs.2970d931571eb6f6ca67.png);
  --advancedKey-dks-icon: url(/images/dks.344fb9a605240ca988e2.png);
  --advancedKey-mpt-icon: url(/images/mpt.753a095f0823875cc592.png);
  --advancedKey-mt-icon: url(/images/mt.3d94cc0f3f5d388dafde.png);
  --advancedKey-tgl-icon: url(/images/tgl.e45d0f46f0e3e33c4772.png);
  --advancedKey-end-icon: url(/images/end.73543a6282318d6fc484.png);
  --allKeyboardSelect-bg: #0F131A;
  --allKeyboardSelect-shadow: rgba(255, 255, 255, 0.08);
  --advancedKey-test-point-icon: url(/images/point-black.e02e0863f153c34d6ee0.png);
  --advancedKey-dks-range-bg: #FF501917;

  /* 接收器配对弹窗 - 圆环颜色（由外到内：外 #10131A → 内 #21262D） */
  --pairing-ring-1: rgba(255, 255, 255, 0.12);
  --pairing-ring-2: rgba(255, 255, 255, 0.09);
  --pairing-ring-3: rgba(255, 255, 255, 0.06);
  --pairing-ring-4: rgba(255, 255, 255, 0.03);
  --receiver-color:#33363C;
  --receiver-color-hover:#000000;

  /* 板载配置样式 */
  --board-bg: #0f131a;
  --board-title: #ffffff;
  --board-desc: #6f7176;
  --board-btn-import-bg: #25282f;
  --board-btn-import-text: #ffffff;
  --board-btn-newConfig-bg: var(--primary-color);
  --board-btn-newConfig-text: #ffffff;
  --board-configCard-bg: #191c23;

  /* 触发样式 */
  --taigger-bg: #0f131a !important;
  --taigger-line: #22262c;
  --taigger-mixedshaft-bg: #191c23;
  --taigger-mixedshaft-border: transparent;
  --taigger-mixedshaft-gradient: transparent;
  --default-img-url: url(/images/007-black.c8a931048c7c5dbffe34.png);
  --taigger-img-url: url(/images/006-black.c529ab72e3444df768e9.png);

  --reportrate-option-bg-hover: #212427;

  /* 性能样式 */
  --performance-bg: #0f131a;
  --performance-title: #ffffff;
  --performance-desc: #6f7176;

  /* 其他模块样式 */
  --other-tab-bg: #191c23;
  --other-tab-active-bg: #f6f6f6;
  --other-tab-border: #3b3e43;
  --other-tab-text: #abadaf;
  --other-tab-hover-text: #ffffff;
  --other-tab-active-text: #191c23;
  --other-version-max-text: #f6f6f6;
  --other-version-min-text: #7b7d81;
  --other-button-bg: #161c27;
  --other-button-text: rgba(255, 255, 255, 0.9);
  --other-button-hover-bg: var(--primary-color);
  --other-button-hover-text: #ffffff;
  --other-button-install-bg: #f6f6f6;
  --other-button-install-text: #161c27;
  --other-upload-icon: url(/images/001-black.414fa472946112a37f89.png);
  --other-recovery-bg: #161c27;
  --other-recovery-button-bg: #2b303a;
  --other-recovery-button-text: #ffffff;
  --other-recovery-button-danger-bg: #ff2c2c;
  --other-recovery-button-danger-text: #f6f6f6;

  /* 系统设置样式 */
  --system-bg: #171b21;
  --system-text: #ffffff;
  --system-about-bg: #222730;
  --system-about-text: #aeb0b4;
  --system-about-btn: rgba(255, 255, 255, 0.65);

  /* 连接设备样式 */
  --connect-mask-bg: linear-gradient(
    to right,
    #06080a 0%,
    transparent 9%,
    transparent 91%,
    #06080a 100%
  );
  --connect-list-bg: #0f131a;
  --connect-name-text: #ffffff;
  --connect-power-text: rgba(255, 255, 255, 0.65);
  --connect-dormancy-before-bg: rgba(30, 32, 35, 0.56);
  --connect-dormancy-bg: rgba(0, 0, 0, 0.25);
  --connect-dormancy-text: #ffffff;
  --connect-color-active: rgba(255, 255, 255, 0.65);

  /* 传感器模式卡片背景色 */
  --sensor-mode-bg: #181c23;
  --sensor-mode-bg-active: #000000;
  --sensor-mode-label: #aeb0b2;
  --sensor-mode-description: #808286;
  --sensor-mode-icon: #85878A;

  --scaleslider-track-color: #21242C;
  --scaleslider-value-bg-color: #21242C;

  
  --usb-plug-cover-up:rgb(6, 8, 10 , 1);
  --usb-plug-cover-down:rgb(6, 8, 10 , 0);

  --macro-letter-bg: rgba(255, 255, 255, 0.04);

  --sensor-rotation-btn-icon: rgba(255, 255, 255, 0.4);
  
  
  --auth-modal-get-code-btn-bg: #1C1F26;

  /* 壁纸 */
  --wallpaper-title: rgba(255, 255, 255, 0.85);
  --wallpaper-border-color: rgba(255, 255, 255, 0.15);
  --wallpaper-border-hover-color: rgba(255, 255, 255, 0.3);
  --wallpaper-upload-bg: url(/images/upload-black.2f951de072f7a0d5880f.png);
  --wallpaper-icon-bg: rgba(255, 255, 255, 0.04);
  --wallpaper-icon-color: rgba(255, 255, 255, 0.65);
  --wallpaper-tips-bg: rgba(0, 0, 0, 0.45);
  --wallpaper-tips-border-color: rgba(255, 255, 255, 0.09);
  --wallpaper-tips-label-color: rgba(255, 255, 255, 0.85);
  --wallpaper-tips-value-color: rgba(255, 255, 255, 0.65);

  --keyremap-tooltip-color: rgba(255, 255, 255, 0.75);
  --keyremap-tooltip-text: #000000;

  /* 键盘样式 */
  --keyboard-bg: #25282F;
  --beyboard-border: #25282F;
  --keyboard-bg-hover: rgba(255, 255, 255, 0.15);
  --beyboard-border-hover: rgba(255, 255, 255, 0.85);
  --beyboard-text-hover: #FFFFFF;
  --keyboard-label-color: #F6F6F6;
  --keyboard-selected-bg: rgba(255, 255, 255, 0.65);
  --keyboard-selected-text: rgba(30, 32, 35, 1);
  --keyboard-selected-text-hover: #0F131A;

  --dpi-card-bg-hover: #1D232E;

  /* 头部更新图标 */
  --header-update-icon-color: #FFFFFF;
  --header-update-icon-hover-color: var(--primary-color-hover);
  --header-search-input-bg: rgba(255, 255, 255, 0.09);
  --header-search-input-bg-hover: rgba(255, 255, 255, 0.15);
  --header-search-input-color: rgba(255, 255, 255, 0.45); 

  /* 屏幕页样式 */
  --screen-list-item-bg: #0F131A;
  --screen-list-item-border: #FFFFFF26;
  --screen-icon-bg: #FFFFFF0A;
  --screen-operation-bg: #00000026;
  --screen-right-panel-overlay-bg: #0F131AA6;
  --screen-right-panel-overlay-progress-bar: linear-gradient(90deg, #FFFFFFA6, #FFFFFF);
  --screen-upload-icon: url(/images/upload-dark.e77262222d8c26cf5215.png);

  /* 物理按键样式 */
  --physical-tips-bg: #161C27;
  --physical-tips-beofre-bg: rgba(255, 255, 255, 0.65);
  --physical-tips-max-color: #FFFFFF;
  --physical-tips-min-color: rgba(255, 255, 255, 0.6);
  --physical-setting-bg: #0F131A;
  --physical-setting-title-color: #FFFFFF;
  --physical-hover-setting-border: #FFFFFF;

  /* 板载配置样式 */
  --config-tips-iconfont-color: rgba(255, 255, 255, 0.25);
  --config-tips-tip-bg: #161C27;
  --config-tips-shadow-color: rgba(30, 32, 35, 0.65);
  --config-tips-content-color: rgba(255, 255, 255, 0.85);

  --cover-color: rgba(15, 19, 26, 0.75);
  /* 骨架屏样式 */
  --skeleton-bg: linear-gradient(
    90deg,
    rgba(37, 40, 47, 1) 0%,
    rgba(45, 49, 57, 1) 50%,
    rgba(37, 40, 47, 1) 100%
  );
  --skeleton-bg-keyboard: linear-gradient(
    90deg,
    transparent 0%,
    transparent 20%,
    rgba(37, 40, 47, 1) 50%,
    transparent 70%,
    transparent 100%
  );
  --quick-skeleton-bg: linear-gradient(
    90deg,
    rgba(15, 19, 26, 1) 0%,
    rgba(45, 49, 57, 1) 100%
  );
}



/* 全局滚动条（主应用 + 子应用统一，非主题变量） */
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* 渐变边框动画：旋转（conic-gradient 绕中心转一圈） */
@keyframes gradient-border-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* 工具类：彩虹渐变边框旋转（::before 渐变层 + ::after 内层遮罩露出 2px 环） */
.gradient-border-animation {
  position: relative;
  overflow: hidden;
  border-radius: var(--gradient-border-radius, 24px);
  /* 固定色投影兜底，保证能明显看到发光 */
  box-shadow: 0 0 12px 2px rgba(255, 80, 25, 0.2);
}

.gradient-border-animation::before {
  content: "";
  position: absolute;
  inset: -100px;
  background: conic-gradient(#ff5019, #f49153, #f67875, #ee64d9, #ff5019);
  border-radius: inherit;
  animation: gradient-border-rotate 2s linear infinite;
  z-index: 0;
}

.gradient-border-animation::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-secondary);
  border-radius: calc(var(--gradient-border-radius, 24px) - 2px);
  z-index: 1;
}

/* 全局样式应用 */
body,
#root {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  /* 中文与标点 → Alibaba PuHuiTi；其余 → HarmonyOS Sans（见 main-app/public/index.html） */
  /* font-family: "HarmonyOS Sans", "Alibaba PuHuiTi", sans-serif; */
  height: 100%;
}

/* 表单控件继承全局字体（浏览器默认会把 button/input 等设为 font-family: initial） */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* 数字字体*/
/* .font-number,
[data-font="number"] {
  font-family: "HarmonyOS Sans";
} */

/* 设备配色圆点 - 与 ChooseDeviceCard / DeviceCard 共用 */

.colorDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  transform-origin: center;
}

.colorDot:hover {
  transform: scale(1.2);
}

/* .colorDot.active {
  box-shadow: inset 0 0 0 2px var(--dot-selected-border-color);
} */

/* 基础颜色 */
.colorDot[data-color='black'] {
  background: #0a0a0a;
}

.colorDot[data-color='white'] {
  background: #F0F0F0;
}

.colorDot[data-color='silvery'] {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
}

.colorDot[data-color='silver'] {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
}

.colorDot[data-color='grey'] {
  background: #808080;
}

.colorDot[data-color='red'] {
  background: #b82020;
}

.colorDot[data-color='duantan'] {
  background: #0a0a0a;
}

.colorDot[data-color='orange'] {
  background: #ff8c42;
}

.colorDot[data-color='yellow'] {
  background: #f1c40f;
}

.colorDot[data-color='pink'] {
  background: #ff69b4;
}

.colorDot[data-color='blue'] {
  background: #2d77ff;
}

.colorDot[data-color='cyan'] {
  background: #1abc9c;
}

.colorDot[data-color='green'] {
  background: #2ecc71;
}

.colorDot[data-color='purple'] {
  background: #6713ee;
}

.colorDot[data-color='lightpurple'] {
  background: linear-gradient(135deg, #b19cd9 0%, #dcd0ff 100%);
}

.colorDot[data-color='blackpink'] {
  background: linear-gradient(135deg, #ff548d 0%, #0a0a0a 100%);
}

.colorDot[data-color='luotianyi'] {
  background: linear-gradient(135deg, #cbe6ff 0%, #4a74e996 50%, #01154e96 100%);
}

.colorDot[data-color='light-blue'] {
  background: #87CEEB;
}

.colorDot[data-color='lightgreen'] {
  background: #97cf4e;
}

/* Z7 Master 松烟绿（仅 pinegreen 一色） */
.colorDot[data-color='pinegreen'] {
  background: linear-gradient(145deg, #6d8f72 0%, #4a5f4e 55%, #3d4a40 100%);
}

/* S9V2 Master 曼巴绿（偏荧光绿 / 亮黄绿高光） */
.colorDot[data-color='mambagreen'] {
  background: linear-gradient(145deg,#d8ff8a 0%,#5cff5c 42%,#16b85a 78%,#0a6b3d 100%);
}

.colorDot[data-color='dark-blue'] {
  background: #1e3b8a;
}

.colorDot[data-color='dark-green'] {
  background: #1c5832;
}

.colorDot[data-color='dark-red'] {
  background: #942727;
}

.colorDot[data-color='berryred'] {
  background: #C71585;
}

.colorDot[data-color='berryredTranslucent'] {
  background: rgba(199, 21, 133, 0.42);
}

.colorDot[data-color='baifenjianbian'] {
  background: #e1b4c3;
}

.colorDot[data-color='bikonglan'] {
  background: #808bcf;
}

.colorDot[data-color='fushihui'] {
  background: linear-gradient(135deg, #ffffff 0%, #333333 50%);
}

.colorDot[data-color='jingmihaiyang'] {
  background: linear-gradient(135deg, #8081b8 30%, #333333 70%);
}

.colorDot[data-color='piwen'] {
  background: #333333;
}

.colorDot[data-color='qingshimohei'] {
  background: linear-gradient(135deg, #70665a 30%, #333333 70%);
}

.colorDot[data-color='qingti'] {
  background: linear-gradient(135deg, #c4d959 30%, #333333 70%);
}

.colorDot[data-color='tianxinfen'] {
  background: linear-gradient(135deg, #ffffff 20%, #e1b4c3 60%);
}

.colorDot[data-color='weichen'] {
  background: linear-gradient(135deg, #ffffff 30%, #333333 70%);
}

.colorDot[data-color='wutou'] {
  background: linear-gradient(135deg, #83634f 30%, #333333 70%);
}

.colorDot[data-color='xueshanjianbian'] {
  background: linear-gradient(135deg, #98b8e7 30%, #c3cfea 70%);
}

.colorDot[data-color='piwenbai'] {
  background: #eeeeee;
}

.colorDot[data-color='foggywhite'] {
  background: linear-gradient(135deg, #f5f8fc 0%, #d8e4f0 100%);
}

/* X23 Pro 鼠标配色 */
.colorDot[data-color='shumeipink'] {
  background: #e2aaac;
}

/* X23 Carbon 鼠标配色 */
.colorDot[data-color='qianlan'] {
  background: #88ABDA;
}

/* A6 Pro 鼠标配色 */
.colorDot[data-color='bingchuangblue'] {
  background: #88ABDA;
}
.colorDot[data-color='yinghuapink'] {
  background: #D5A8AA;
}

/* ES98 键盘配色 */
.colorDot[data-color='blackpurple'] {
  background: linear-gradient(135deg, #1a0a1e 0%, #4a1f5c 100%);
}

.colorDot[data-color='tengwangge'] {
  background: linear-gradient(135deg, #d4af37 0%, #b8342f 50%, #1e4620 100%);
}

.colorDot[data-color='whiteblue'] {
  background: linear-gradient(135deg, #e8f4fd 0%, #4a90e2 100%);
}

.colorDot[data-color='whiteblue2'] {
  background: linear-gradient(135deg, #e8f4fd 0%, #4a90e2 100%);
}

.colorDot[data-color='blackyellow'] {
  background: linear-gradient(135deg, #f1c40f 0%, #0a0a0a 100%);
}

.colorDot[data-color='whitepink'] {
  background: linear-gradient(135deg, #fff0f5 0%, #f78f9f 100%);
}

.colorDot[data-color='panda'] {
  background: linear-gradient(135deg, #ffffff 0%, #000000 100%);
}

/* X98 键盘配色 */
.colorDot[data-color='taofen'] {
  background: #FFB1B9;
}
.colorDot[data-color='yunjianlan'] {
  background: #88ABDA;
}
.colorDot[data-color='zheyingzhiguang'] {
  background: #E6E9EF;
}

.colorDot[data-color='zheying'] {
  background: linear-gradient(135deg, #ffffff 0%, #ffb3d9 25%, #b388ff 50%, #64b5f6 75%, #81c784 100%);
}

/* X75 Pro 键盘配色 */
.colorDot[data-color='grapepurple'] {
  background: linear-gradient(135deg, #8E44AD 0%, #4B0082 100%);
}
.colorDot[data-color='jiangguohong'] {
  background: #C71585;
}
.colorDot[data-color='moyingjianbiandenggaoxian3'] {
  background: linear-gradient(135deg, #434343 0%, #000000 100%);
}
.colorDot[data-color='pinkgradient'] {
  background: linear-gradient(135deg, #FF9A9E 0%, #FAD0C4 100%);
}
.colorDot[data-color='whitedenggaoxian3'] {
  background: #f5f5f5;
}

/* M98 键盘配色 */
.colorDot[data-color='fendiye'] {
  background: #FF9A9E;
}
.colorDot[data-color='leitaocijianmao'] {
  background: #F9F4E8;
}

/* MUSE M71 键盘配色（与 DEVICE_CONFIGS「M71」colors[].key 一致） */
.colorDot[data-color='lipstickDot'] {
  background: linear-gradient(135deg, #ffe4ec 0%, #c41e3a 50%, #3a1d1e 100%);
}
.colorDot[data-color='cuteBearLiquidFoundation'] {
  background: linear-gradient(135deg, #fce8dc 0%, #e8b4a8 45%, #c9a07a 100%);
}
.colorDot[data-color='lipstickCuteLittleBear'] {
  background: linear-gradient(135deg, #ffe4ec 0%, #c41e3a 50%, #3a1d1e 100%);
}
.colorDot[data-color='liquidFoundationDots'] {
  background: linear-gradient(135deg, #f0e0d0 0%, #d4b896 40%, #b8956a 100%);
}

/* T87 键盘配色 */
.colorDot[data-color='jiguangwhite'] {
  background: linear-gradient(135deg, #7be4d5 0%, #a3b2cb 50%, #ffffff 100%);
}
.colorDot[data-color='moyunhui'] {
  background: linear-gradient(135deg, #1a1a1a 0%, #545454 50%, #a6a6a6 100%);
}
.colorDot[data-color='ningyepink'] {
  background: linear-gradient(135deg, #231b1e 0%, #8c6275 50%, #e8b4c4 100%);
}
.colorDot[data-color='taoyuewhite'] {
  background: linear-gradient(135deg, #e6e6e6 0%, #f5f5f5 50%, #ffffff 100%);
}
.colorDot[data-color='yuntianblue'] {
  background: linear-gradient(135deg, #5142a7 0%, #7689cb 50%, #ffffff 100%);
}

/* 默认样式 */
.colorDot:not([data-color]) {
  background: #666;
}

/* M98 屏幕版配色 */
.colorDot[data-color='JingTou'] {
  background: #F0F0F0;
}

/** packages/shared-components/src/components/Message/Message.css */

.shared-message-container {
  /* 挂到子应用 #root 时，避免被 #root > * { flex: 1 } 挤出空白布局 */
  position: fixed;
  inset: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  flex: none;
  z-index: 10000;
}

/* 子应用 #root > * { flex: 1 } 优先级高于 .shared-message-container，须单独覆盖 */
#root > .shared-message-container {
  flex: none;
  min-width: 0;
  min-height: 0;
}

.message {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 10000;

  display: flex;
  flex-direction: column;

  background: var(--message-bg);

  /* 无边框 */
  border: none;
  border-radius: 8px;

  /* 柔和阴影 */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);

  overflow: hidden;
  will-change: transform, opacity;

  opacity: 0;
  transform: translate(-50%, -100%);
}

/* ... 动画部分保持不变 ... */
.message-mounting {
  opacity: 0;
  transform: translate(-50%, -100%);
}
.message-mounted {
  animation: message-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.message-unmounting {
  animation: message-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes message-slide-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes message-slide-out {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.9);
  }
}

/* ... 内容区域 ... */
.message-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  position: relative;
  z-index: 1;
  width: fit-content;
}

.message-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--message-text);
}

/* 图标通用样式 */
.message-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Iconfont 需在自身设置 font-size 才生效（iconfont 字形大小由 <i> 的 font-size 决定） */
.message-icon .message-iconfont,
.message-iconfont {
  font-size: 20px !important;
}


/* ========== 类型样式（图标背景使用全局渐变变量） ========== */

/* Success - 绿色渐变 */
.message-success {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgb(0, 225, 122, 0.2) 0%,
      transparent 60px
    ),
    var(--message-bg);
}
.message-success .message-icon {
  color: #00E17A;
}

/* Warning - 黄色渐变 */
.message-warning {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgb(255, 210, 31, 0.2) 0%,
      transparent 60px
    ),
    var(--message-bg);
}
.message-warning .message-icon {
  color: #FFD21F;
}

/* Error - 红色渐变 */
.message-error {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgb(240, 66, 72, 0.2) 0%,
      transparent 60px
    ),
    var(--message-bg);
}
.message-error .message-icon {
  color: #F04248;
}

/* Info - 蓝色渐变 */
.message-info {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgb(60, 97, 242, 0.2) 0%,
      transparent 60px
    ),
    var(--message-bg);
}
.message-info .message-icon {
  color: #3C61F2;
}


@media (max-width: 640px) {
  .message {
    width: calc(100% - 32px);
    top: 16px;
  }
  .message:nth-child(2) {
    top: calc(16px + 64px);
  }
  .message:nth-child(3) {
    top: calc(16px + 128px);
  }
}

.shared-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 高于 Message(10000) 等全局浮层，避免与其它提示叠层时文案被盖住 */
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.shared-loading-content {
  position: relative;
  z-index: 10051;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  gap: 20px;
  width: 400px;
  height: 180px;
  background: var(--loading-content-bg);
  border: 1px solid var(--loading-content-border);
  border-radius: 12px;
}

.shared-loading-text {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-h1);
  font-weight: var(--text-weight-h2);
  text-align: center;
  margin-bottom: 0px;
}

/* 进度条样式 */
.shared-loading-progress-track {
  width: 336px;
  min-width: 200px;
  height: 8px;
  min-height: 8px;
  flex-shrink: 0;
  background: var(--loading-progress-track);
  border-radius: 8px;
  overflow: hidden;
}

.shared-loading-progress-bar {
  height: 100%;
  min-width: 2px;
  background: var(--loading-progress-bar);
  border-radius: 8px;
}

.shared-loading-percent {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-h1);
  font-weight: var(--text-weight-h1);
}

.main-button_WH4Ym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  border: none;
}

.main-button_WH4Ym:disabled:not(.main-button_loading_EQpWH) {
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
}

.main-button_active_lh1NG {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* 激活态 hover 保持与激活一致，避免被 default 变体的 hover 盖成白/灰底 */
.main-button_active_lh1NG:hover:not(:disabled),
.main-button_default_mfqUX.main-button_active_lh1NG:hover:not(:disabled) {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* Variants */
.main-button_default_mfqUX {
  background-color: var(--btn-default-bg);
  color: var(--btn-default-text);
}

.main-button_default_mfqUX:hover:not(:disabled) {
  background-color: var(--btn-default-bg-hover);
}

.main-button_default_mfqUX.main-button_loading_EQpWH {
  background-color: var(--btn-default-bg);
  color: var(--btn-default-text);
}

.main-button_default_mfqUX.main-button_loading_EQpWH .main-loading_VwGhd {
  --btn-loading-color: var(--btn-default-text);
}

.main-button_primary_RDD7c {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.main-button_primary_RDD7c:hover:not(:disabled) {
  background-color: var(--btn-primary-bg-hover);
}

.main-button_primary_RDD7c.main-button_loading_EQpWH {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.main-button_primary_RDD7c.main-button_loading_EQpWH .main-loading_VwGhd {
  --btn-loading-color: var(--btn-primary-text);
}

.main-button_secondary_Yi19h {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.main-button_secondary_Yi19h:hover:not(:disabled) {
  background-color: var(--btn-secondary-bg-hover);
}

.main-button_secondary_Yi19h.main-button_loading_EQpWH {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.main-button_secondary_Yi19h.main-button_loading_EQpWH .main-loading_VwGhd {
  --btn-loading-color: var(--btn-secondary-text);
}

/* Sizes */
.main-button_sm_Wt5_D {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.main-button_md_HAca8 {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.main-button_lg_HH4Nh {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  line-height: 1.75rem;
}

.main-loading_VwGhd {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: var(--btn-loading-color);
  /* 跟随当前按钮文本色做透明度角度渐变 */
  background: conic-gradient(
    from 22.5deg,
    transparent 0deg,
    var(--btn-loading-color) 360deg
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: main-spin_DVppe 0.6s steps(8, end) infinite;
  transform-origin: center;
}

.main-loadingContent_Hauga {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@keyframes main-spin_DVppe {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.main-buttonGroup_OJWJa {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.main-tabs_wacUd {
  display: flex;
  flex-direction: column;
}

.main-tabList_Y2Ud9 {
  display: flex;
}

/* Pill 样式（全宽 + 滑动背景） */
.main-tabList_Y2Ud9.main-pill_IKaPT {
  position: relative;
  width: 100%;
  background: var(--tabspill-bg);
  border-radius: 24px;
  padding: 0;
}

/* 定位与尺寸；边框/渐变/动画由全局 .gradient-border-animation 提供 */
.main-pillSlider_Ws2EL {
  position: absolute;
  left: calc((100%) / var(--tab-count) * var(--tab-active-index));
  width: calc((100%) / var(--tab-count));
  height: 100%;
  border-radius: 24px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.main-tabList_Y2Ud9.main-pill_IKaPT .main-tab_oGdsa {
  position: relative;
  z-index: 1;
  flex: 1;
  flex-shrink: 0;
  height: var(--tab-height);
  padding: 0 20px;
  background: transparent;
  border: none;
  color: var(--tab-pill-text-inactive);
  font-size: var(--text-body);
  line-height: var(--tab-height);
  cursor: pointer;
  border-radius: 24px;
  transition: color 0.3s ease;
  margin-right: 0;
}


.main-tabList_Y2Ud9.main-pill_IKaPT .main-tab_oGdsa.main-active_QuLLe {
  color: var(--text-primary);
}

/* 勿加 pointer-events: none：与 onDisabledTabClick 联用时需能点到禁用项以弹出说明；无回调时仍用原生 disabled 拦截 */
.main-disabled_X3RzK {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Tab 内容 */
.main-tabContent_xbQVE {
  animation: main-fadeIn_UMLFk 0.3s ease;
}

@keyframes main-fadeIn_UMLFk {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.el-slider-box{width:100%;height:36px;display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 6px}.el-slider-box .el-slider-control{width:100%;height:32px;background:var(--slider-bg-color);border-radius:8px;position:relative}.el-slider-box .el-slider-control .el-slider-scale{width:100%;height:100%;position:relative;z-index:1}.el-slider-box .el-slider-control .el-slider-scale span{width:1px;height:8px;background:var(--slider-scale-color);position:absolute;top:50%;transform:translateY(-50%)}.el-slider-box .el-slider-control .el-slider-scale span.el-slider-scale-max{height:12px}.el-slider-box .el-slider-control .el-slider-track{width:0%;height:100%;background:var(--slider-strip-color);position:absolute;left:0;top:0;z-index:2;border-radius:8px 0 0 8px}.el-slider-box .el-slider-control .el-slider-thumb{width:12px;height:36px;background:rgba(0,0,0,0);position:absolute;left:0;top:-2px;transform:translateX(-50%);z-index:3;border:none;border-radius:6px;overflow:visible;isolation:isolate}.el-slider-box .el-slider-control .el-slider-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--slider-thumb-up);z-index:1;pointer-events:none}.el-slider-box .el-slider-control .el-slider-thumb::before{content:"";position:absolute;inset:-4px;border-radius:28px;background:var(--slider-thumb-down);opacity:0;box-shadow:var(--slider-thumb-shadow);transition:opacity .12s ease,transform .12s ease;backdrop-filter:blur(8.8px);-webkit-backdrop-filter:blur(8.8px);z-index:0;pointer-events:none}.el-slider-box .el-slider-control .el-slider-thumb:hover::before{opacity:1}.el-slider-box.dragging .el-slider-thumb::before{opacity:1}.el-slider-box .el-slider-input-unit{width:100px;height:100%;flex-shrink:0;display:flex;justify-content:center;align-items:center;margin-left:16px;padding:0 12px;gap:4px;border-radius:8px;border:1px solid var(--slider-border-color);background:rgba(0,0,0,0)}.el-slider-box .el-slider-input-unit:focus-within{background:var(--slider-input-bg-color);border-color:var(--slider-border-focus-color)}.el-slider-box .el-slider-input-unit .el-slider-input{flex:1;min-width:0;height:100%;background:none}.el-slider-box .el-slider-input-unit .el-slider-input .el-input-inner{width:100%;height:100%;border:none;outline:none;text-align:center;color:var(--slider-text-color);font-size:14px;font-weight:bold;background:none;border-radius:0;padding:0}.el-slider-box .el-slider-input-unit .el-slider-input .el-input-inner:focus{border:none;outline:none}.el-slider-box .el-slider-input-unit .el-slider-unit{flex-shrink:0;color:var(--slider-text-unit-color);font-size:14px}.el-slider-box .el-slider-input-unit.top{position:absolute;top:-44px;right:0}.el-slider-box.disabled{opacity:.5;pointer-events:none}
/* 仅两种样式：关闭 .switch / 打开 .switch.checked */

.main-switch_lufG4 {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--switch-bg-off);
  border-radius: 12px;
  border: 2px solid var(--switch-border-off);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.main-switch_lufG4.main-checked_yGQCt {
  background: var(--switch-bg-on);
  border: var(--switch-border-on);
}

.main-switch_lufG4:disabled {
  cursor: not-allowed;
}

.main-thumb_TqZsS {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: var(--switch-thumb-off);
  border-radius: 50%;
  border: 2px solid var(--switch-thumb-border-off);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.main-switch_lufG4.main-checked_yGQCt .main-thumb_TqZsS {
  transform: translate(20px, -50%);
  background: var(--switch-thumb-on);
  border: var(--switch-thumb-border-on);
}

/* packages/shared-components/src/components/Checkbox/Checkbox.module.css */

.main-checkbox_jdNze {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 复选框主体 */
.main-box_didoO {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid #D6DAE0;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 勾选图标 */
.main-icon_ezcQi {
  width: 12px;
  height: 12px;
  color: transparent;
  transition: all 0.2s ease;
}

/* 标签 */
.main-label_Sgu6K {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
}

.main-labelLeft_gktQ4 {
  order: -1;
}

.main-labelRight_x7hxZ {
  order: 1;
}

/* ==================== 选中状态 ==================== */
.main-checked__44wV .main-box_didoO {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.main-checked__44wV .main-icon_ezcQi {
  color: #ffffff;
}

/* ==================== Hover 状态 ==================== */
/* .checkbox:hover:not(.disabled) .box {
  border-color: var(--primary-color);
  background-color: red;
} */

.main-checkbox_jdNze:hover:not(.main-disabled_axCxN).main-checked__44wV .main-box_didoO {
  /* background-color: red; */
  /* filter: brightness(1.1); */
}

.main-checkbox_jdNze:hover:not(.main-disabled_axCxN) .main-label_Sgu6K {
  color: #ffffff;
}

/* ==================== Active 状态 ==================== */
.main-checkbox_jdNze:active:not(.main-disabled_axCxN) .main-box_didoO {
  transform: scale(0.95);
}

/* ==================== 禁用状态 ==================== */
.main-disabled_axCxN {
  opacity: 0.5;
  cursor: not-allowed;
}

.main-disabled_axCxN .main-box_didoO,
.main-disabled_axCxN .main-label_Sgu6K {
  pointer-events: none;
}

/* packages/shared-components/src/components/ScaleSlider/ScaleSlider.module.css */

/* ==================== 容器 ==================== */
.main-container_zbYDT {
  position: relative;
  display: grid;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ==================== 纵向布局 ==================== */
.main-vertical_ugw0B {
  grid-template-columns: auto 8px auto; /* 刻度 | 轨道 | 值显示 */
  gap: 8px;
  align-items: stretch;
}

/* ==================== 横向布局 ==================== */
.main-horizontal_m0Fv4 {
  grid-template-rows: auto 8px auto; /* 刻度 | 轨道 | 值显示 */
  gap: 8px;
  align-items: stretch;
}

/* ==================== 刻度容器 ==================== */
.main-scalesContainer_xEyOf {
  position: relative;
  pointer-events: none; /* ✅ 不响应鼠标事件 */
}

.main-vertical_ugw0B .main-scalesContainer_xEyOf {
  width: 14px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.main-horizontal_m0Fv4 .main-scalesContainer_xEyOf {
  width: 100%;
  height: 14px;
  display: flex;
  align-items: flex-end;
}

/* ==================== 刻度 ==================== */
.main-scale_lIrlv {
  position: absolute;
  background: var(--text-body-color);
}

.main-vertical_ugw0B .main-scale_lIrlv {
  width: 6px;
  height: 1px;
  right: 0;
}

.main-vertical_ugw0B .main-scaleMain_bNIMf {
  width: 10px;
}

.main-horizontal_m0Fv4 .main-scale_lIrlv {
  height: 6px;
  width: 1px;
  bottom: 0;
}

.main-horizontal_m0Fv4 .main-scaleMain_bNIMf {
  height: 10px;
}

/* 刻度数值 */
.main-scaleValue_hSzM6 {
  position: absolute;
  font-size: 10px;
  color: var(--text-body-color);
  white-space: nowrap;
  user-select: none;
  line-height: 1.2;
  padding-right: 6px;
}

.main-vertical_ugw0B .main-scaleValue_hSzM6 {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.main-horizontal_m0Fv4 .main-scaleValue_hSzM6 {
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
}

/* ==================== ✅ 轨道容器（唯一可交互区域） ==================== */
.main-trackContainer_VmojC {
  position: relative;
  cursor: pointer;
  touch-action: none;
  pointer-events: auto; /* ✅ 只有这里响应鼠标事件 */
}

.main-vertical_ugw0B .main-trackContainer_VmojC {
  height: 100%;
}

.main-horizontal_m0Fv4 .main-trackContainer_VmojC {
  width: 100%;
}

/* ==================== 轨道 ==================== */
.main-track_jQAfF {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--scaleslider-track-color);
  border-radius: 8px;
}

/* ==================== 填充条 ==================== */
.main-fill_Gqbut {
  background-color: var(--primary-color);
  pointer-events: none;
  transition: height 0.15s ease, width 0.15s ease;
}

.main-fillNoDrag__JJmc {
  transition: none !important;
}

.main-vertical_ugw0B .main-fill_Gqbut {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.main-horizontal_m0Fv4 .main-fill_Gqbut {
  height: 100%;
}

/* ==================== 滑块 ==================== */
.main-thumb_bkW06 {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  cursor: grab;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.main-vertical_ugw0B .main-thumb_bkW06 {
  left: 50%;
  transform: translate(-50%, 50%);
}

.main-horizontal_m0Fv4 .main-thumb_bkW06 {
  top: 50%;
  transform: translate(-50%, -50%);
}

.main-trackContainer_VmojC:hover .main-thumb_bkW06 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.main-vertical_ugw0B .main-trackContainer_VmojC:hover .main-thumb_bkW06 {
  transform: translate(-50%, 50%) scale(1.1);
}

.main-horizontal_m0Fv4 .main-trackContainer_VmojC:hover .main-thumb_bkW06 {
  transform: translate(-50%, -50%) scale(1.1);
}

.main-container_zbYDT:active:not(.main-disabled__HOER) .main-thumb_bkW06 {
  cursor: grabbing;
}

/* ==================== 值显示容器（不可交互） ==================== */
.main-valueContainer_wV_Wr {
  position: relative;
  pointer-events: none; /* ✅ 不响应鼠标事件 */
  display: flex;
}

.main-vertical_ugw0B .main-valueContainer_wV_Wr {
  width: 100px;
  align-items: flex-start;
  justify-content: center;
}

.main-horizontal_m0Fv4 .main-valueContainer_wV_Wr {
  height: 50px;
  align-items: flex-start;
  justify-content: center;
}

/* ==================== 值显示内容 ==================== */
.main-valueContent_u0GEk {
  display: flex;
  gap: 6px;
  transition: none; /* ✅ 值内容跟随容器位置，不需要独立过渡 */
}

.main-vertical_ugw0B .main-valueContent_u0GEk {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  flex-direction: row;
  align-items: center;
}

.main-horizontal_m0Fv4 .main-valueContent_u0GEk {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
}

/* 拖拽时容器位置无过渡 */
.main-container_zbYDT:active .main-valueContainer_wV_Wr {
  transition: none !important;
}

/* ==================== 箭头 ==================== */
.main-arrow_wJYvd {
  width: 14px;
  height: 14px;
  color: var(--bg-against);
  flex-shrink: 0;
}

/* ==================== 值显示框 ==================== */
.main-valueDisplay_eZsFO {
  padding: 6px 12px;
  background: var(--scaleslider-value-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-fixed-color1);
  white-space: nowrap;
  min-width: fit-content;
  text-align: center;
  cursor: text;
  pointer-events: auto; /* ✅ 允许点击进入编辑模式 */
  transition: background 0.2s ease, border-color 0.2s ease;
}

.main-valueDisplay_eZsFO:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-color);
}

/* ==================== 值输入框 ==================== */
.main-valueInput_kkNT1 {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
  text-align: center;
  outline: none;
  pointer-events: auto; /* ✅ 输入框可交互 */
  transition: width 0.15s ease;
}

.main-valueInput_kkNT1::selection {
  background: var(--primary-color);
  color: #ffffff;
}

/* ==================== 输入错误状态 ==================== */
.main-valueInputError_Eue8I {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  animation: main-shake_LFKhe 0.3s ease-in-out;
}

@keyframes main-shake_LFKhe {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* ==================== 禁用状态 ==================== */
.main-disabled__HOER {
  opacity: 0.5;
  pointer-events: none;
}

/* packages/shared-components/src/components/FormSection/FormSection.module.css */

.main-formSection_lUuBx {
  margin-bottom: 16px;
}
.main-disabled_uuMQZ {
  opacity: 0.5;
  pointer-events: none;
}

.main-header_LXEFM {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.main-title_taJ3n {
  font-size: var(--text-h2);
  font-weight: var(--text-weight-h2);
  color: var(--text-title-color);
  margin: 0;
}

.main-rightContent_uyrPa {
  font-size: var(--text-body);
  font-weight: var(--text-weight-body);
  color: var(--text-primary);
  margin-left: 16px;
}

.main-description_mHWYE {
  font-size: var(--text-caption);
  font-weight: var(--text-weight-caption);
  color: var(--text-body-color);
  margin: -8px 0 0px 0;
}
.main-content_wk5VS {
  width: 100%;
}

.main-contentSpacing_J2_kX {
  margin-top: 16px;
}


.main-settingItem_s_Mdb {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-color);
}

.main-settingItem_s_Mdb:last-child {
  border-bottom: none;
}

.main-settingItem_s_Mdb.main-disabled_BimYY {
  opacity: 0.6;
  cursor: not-allowed;
}

.main-content_vXulC {
  flex: 1;
  min-width: 0;
}

.main-title_Q71xG {
  font-size: var(--text-body);
  font-weight: var(--text-weight-body);
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.5;
}

.main-description_ydyxG {
  font-size: var(--text-body);
  font-weight: var(--text-weight-body);
  color: var(--text-caption);
  margin: 0;
  line-height: 1.6;
}

.main-control_JY40I {
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.main-compact_dg1gz {
  padding: 0;
  margin: 0;
  border-bottom: none;
  gap: 12px;
}

.main-compact_dg1gz .main-title_Q71xG {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-against-primary);
  margin: 0 0 8px;
}

.main-compact_dg1gz .main-description_ydyxG {
  font-size: 14px;
  color: var(--text-body-color);
  line-height: 1.6;
}

.main-compact_dg1gz .main-control_JY40I {
  flex-shrink: 0;
  padding-top: 0;
}

/* packages/shared-components/src/components/LoadingDotsMask/LoadingDotsMask.module.css */

.main-overlay_NOm0I {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  overflow: hidden;
}

.main-overlay_NOm0I::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--cover-color);
  /* backdrop-filter: blur(2px); */
  z-index: -1;
}

.main-dots_OLOFJ {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.main-dot_yWYdD {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary-color);
  animation: main-bounce_fgKT4 0.8s ease-in-out infinite both;
}

.main-dot_yWYdD:nth-child(1) {
  animation-delay: -0.32s;
}

.main-dot_yWYdD:nth-child(2) {
  animation-delay: -0.16s;
}

.main-dot_yWYdD:nth-child(3) {
  animation-delay: 0s;
}

.main-dot_yWYdD:nth-child(4) {
  animation-delay: 0.16s;
}

@keyframes main-bounce_fgKT4 {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
}

/** packages/shared-components/src/components/Modal/Modal.css **/

.shared-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

/* 遮罩层进入动画 */
.shared-modal-mask-enter {
  animation: shared-modal-fade-in 0.3s ease-out;
}

/* 遮罩层退出动画 */
.shared-modal-mask-exit {
  animation: shared-modal-fade-out 0.3s ease-out;
}

@keyframes shared-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shared-modal-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.shared-modal-container {
  position: relative;
  background: var(--modal-bg-color);
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

/* 弹窗进入动画 */
.shared-modal-container-enter {
  animation: shared-modal-zoom-in 0.3s ease-out;
}

/* 弹窗退出动画 */
.shared-modal-container-exit {
  animation: shared-modal-zoom-out 0.3s ease-out;
}

@keyframes shared-modal-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shared-modal-zoom-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

.shared-modal-header {
  position: relative;
  padding: 20px 24px;
  cursor: default;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}

.shared-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--modal-title-text-color);
}

.shared-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
  opacity: 0.6;
}

.shared-modal-close-icon {
  font-size: 20px;
  line-height: 1;
}

.shared-modal-close:hover {
  opacity: 1;
}

.shared-modal-body {
  padding: 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
}
/* Tooltip 容器 */
.main-tooltipWrapper_qiYTN {
  position: relative;
  display: inline-block;
}

/* Tooltip 本体（自身 absolute，小三角 absolute 相对本盒定位） */
.main-tooltip_Jq31y {
  position: absolute;
  top: calc(100% + var(--tooltip-gap));
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0px 0px 12px var(--shadow-color);
  border: none;
  box-sizing: border-box;
  font-size: 14px;
  width: max-content;
  /* 扩大最大宽度：用于展示较长更新说明等内容 */
  max-width: 492px;
  white-space: normal;
  word-wrap: break-word;
  z-index: 101;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); */
  /* 动画：淡入+上浮，用 ease-out 曲线（先快后慢） */
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  will-change: opacity, transform;
}

/* 在上方 */
.main-tooltipTop_kMaEt {
  top: auto;
  bottom: calc(100% + var(--tooltip-gap));
  transform: translateX(-50%) translateY(4px);
}

/* 在右侧 */
.main-tooltipRight_o2uMk {
  top: 50%;
  left: calc(100% + var(--tooltip-gap));
  transform: translateY(-50%) translateX(-4px);
}

/* 在左侧 */
.main-tooltipLeft_o9dAQ {
  top: 50%;
  right: calc(100% + var(--tooltip-gap));
  transform: translateY(-50%) translateX(4px);
}

/* 悬浮时显示 tooltip（hover 模式） */
.main-tooltipWrapper_qiYTN:hover .main-tooltip_Jq31y {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.main-tooltipWrapper_qiYTN:hover .main-tooltipTop_kMaEt {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.main-tooltipWrapper_qiYTN:hover .main-tooltipRight_o2uMk,
.main-tooltipWrapper_qiYTN:hover .main-tooltipLeft_o9dAQ {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* always + 非 Portal：常驻显示 */
.main-tooltipWrapperAlways_Ujmvx .main-tooltip_Jq31y,
.main-tooltipWrapperAlways_Ujmvx .main-tooltipTop_kMaEt,
.main-tooltipWrapperAlways_Ujmvx .main-tooltipRight_o2uMk,
.main-tooltipWrapperAlways_Ujmvx .main-tooltipLeft_o9dAQ {
  opacity: 1;
  pointer-events: none;
  transition: none;
}

.main-tooltipWrapperAlways_Ujmvx .main-tooltip_Jq31y {
  transform: translateX(-50%) translateY(0);
}

.main-tooltipWrapperAlways_Ujmvx .main-tooltipTop_kMaEt {
  transform: translateX(-50%) translateY(0);
}

.main-tooltipWrapperAlways_Ujmvx .main-tooltipRight_o2uMk,
.main-tooltipWrapperAlways_Ujmvx .main-tooltipLeft_o9dAQ {
  transform: translateY(-50%) translateX(0);
}

/* —— Portal 浮层（与默认气泡视觉统一） —— */
.main-tooltipPortal_puUQT {
  position: fixed;
  z-index: 101;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-secondary);
  width: max-content;
  /* Portal 模式同样扩大最大宽度 */
  max-width: min(492px, 90vw);
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  box-shadow: 0px 0px 12px var(--shadow-color);
  box-sizing: border-box;
  pointer-events: none;
}

:root {
  --tooltip-arrow-size: 8px;
  --tooltip-arrow-height: 8px;
}

/** packages/shared-components/src/components/DataTable/DataTable.css **/

.shared-data-table {
  width: 100%;
  font-size: 14px;
  color: var(--text-primary);
}

.shared-data-table__inner {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.shared-data-table--bordered .shared-data-table__inner {
  border: 1px solid var(--line-color);
}

.shared-data-table__thead {
  background: var(--bg-tertiary);
}

.shared-data-table__th,
.shared-data-table__td {
  padding: 16px;
  vertical-align: middle;
  word-break: break-word;
  font-weight: 400;
}

.shared-data-table__td {
  color: var(--text-secondary);
}

.shared-data-table--bordered .shared-data-table__th,
.shared-data-table--bordered .shared-data-table__td {
  border-bottom: 1px solid var(--line-color);
}

.shared-data-table--bordered .shared-data-table__th + .shared-data-table__th,
.shared-data-table--bordered .shared-data-table__td + .shared-data-table__td {
  border-left: 1px solid var(--line-color);
}

.shared-data-table__th--left,
.shared-data-table__td--left {
  text-align: left;
}

.shared-data-table__th--center,
.shared-data-table__td--center {
  text-align: center;
}

.shared-data-table__th--right,
.shared-data-table__td--right {
  text-align: right;
}

.shared-data-table--small .shared-data-table__th,
.shared-data-table--small .shared-data-table__td {
  font-size: 13px;
}

.shared-data-table--large .shared-data-table__th,
.shared-data-table--large .shared-data-table__td {
  font-size: 15px;
}

.shared-data-table__tbody .shared-data-table__tr {
  border-bottom: 1px solid var(--line-color);
}

.shared-data-table__empty {
  text-align: center;
  color: var(--text-tertiary, #999);
}

/* 表格单元格多行截断（最多3行，超出显示省略号） */
.shared-data-table__td-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}

/* packages/shared-components/src/components/Popconfirm/Popconfirm.css */

.popconfirm-trigger {
  display: inline-block;
  cursor: pointer;
}

.popconfirm-container {
  animation: popconfirm-fade-in 0.2s ease-out forwards;
}

/* 动画结束后再启用 transition */
.popconfirm-container.popconfirm-container--animated {
  transition: top 0.15s ease-out, left 0.15s ease-out;
  will-change: top, left;
}

@keyframes popconfirm-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 参考头像下拉菜单：文字、背景、阴影 */
.popconfirm-content {
  position: relative;
  z-index: 0;
  min-width: 220px;
  max-width: 320px;
  padding: 16px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--shadow-color);
}

/* 箭头基础样式 */
.popconfirm-arrow {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--bg-secondary);
}

/* 动画启用后添加过渡效果 */
.popconfirm-container--animated .popconfirm-arrow {
  transition: left 0.15s ease-out, right 0.15s ease-out, top 0.15s ease-out, bottom 0.15s ease-out, transform 0.15s ease-out;
  will-change: left, right, top, bottom, transform;
}

/* 各方向箭头位置 */
.popconfirm-arrow-top,
.popconfirm-arrow-topLeft,
.popconfirm-arrow-topRight {
  width: 30px;
  height: 15px;
  bottom: -10px;
}

.popconfirm-arrow-top {
  left: 48%;
  transform: translateX(calc(-50% + var(--arrow-offset-x, 0px)));
}

.popconfirm-arrow-topLeft {
  left: calc(12px + var(--arrow-offset-x, 0px));
}

.popconfirm-arrow-topRight {
  right: calc(16px - var(--arrow-offset-x, 0px));
}

.popconfirm-arrow-bottom,
.popconfirm-arrow-bottomLeft,
.popconfirm-arrow-bottomRight {
  width: 30px;
  height: 15px;
  top: -10px;
}

.popconfirm-arrow-bottom {
  left: 48%;
  transform: translateX(calc(-50% + var(--arrow-offset-x, 0px)));
}

.popconfirm-arrow-bottomLeft {
  left: calc(12px + var(--arrow-offset-x, 0px));
}

.popconfirm-arrow-bottomRight {
  right: calc(16px - var(--arrow-offset-x, 0px));
}

.popconfirm-arrow-left,
.popconfirm-arrow-leftTop,
.popconfirm-arrow-leftBottom {
  width: 15px;
  height: 30px;
  right: -10px;
}

.popconfirm-arrow-left {
  top: 50%;
  transform: translateY(calc(-50% + var(--arrow-offset-y, 0px)));
}

.popconfirm-arrow-leftTop {
  top: calc(8px + var(--arrow-offset-y, 0px));
}

.popconfirm-arrow-leftBottom {
  bottom: calc(8px - var(--arrow-offset-y, 0px));
}

.popconfirm-arrow-right,
.popconfirm-arrow-rightTop,
.popconfirm-arrow-rightBottom {
  width: 15px;
  height: 30px;
  left: -10px;
}

.popconfirm-arrow-right {
  top: 50%;
  transform: translateY(calc(-50% + var(--arrow-offset-y, 0px)));
}

.popconfirm-arrow-rightTop {
  top: calc(8px + var(--arrow-offset-y, 0px));
}

.popconfirm-arrow-rightBottom {
  bottom: calc(8px - var(--arrow-offset-y, 0px));
}

/* 消息区域 */
.popconfirm-message {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* 参考 Message warning：图标颜色 #FFD21F */
.popconfirm-icon {
  color: #FFD21F;
  display: flex;
  align-items: flex-start;
}

/* Iconfont 需在自身设置 font-size 才生效 */
.popconfirm-icon .iconfont {
  font-size: 20px;
}

.popconfirm-message-text {
  flex: 1;
}

.popconfirm-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.popconfirm-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.popconfirm-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 8px;
}

.popconfirm-btn {
  padding: 6px 16px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.5;
  align-items: center;
  margin-right: 0;
}

.popconfirm-btn:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

.popconfirm-btn-cancel {
  background: var(--btn-default-bg);
  color: var(--text-primary);
}

.popconfirm-btn-cancel:hover:not(:disabled) {
  opacity: 0.8;
}

.popconfirm-btn-ok {
  color: #fff;
  font-weight: 500;
}

.popconfirm-btn-danger {
  background: #F04248;
}

.popconfirm-btn-danger:hover:not(:disabled) {
  opacity: 0.8;
}

/* 加载图标：与 Button 组件 loading 态保持一致（锥形渐变 + 旋转） */
.popconfirm-loading-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

.popconfirm-loading-icon .iconfont {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  background: conic-gradient(
    from 22.5deg,
    transparent 0deg,
    currentColor 360deg
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: popconfirm-spin 0.6s steps(8, end) infinite;
  transform-origin: center;
}

@keyframes popconfirm-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* 扫光只在「键」范围内（.keyboard-skeleton__cell::after），键缝保持父级背景，不会出现整板遮罩滑过间隙。
   整盘同步：每个键用同一套 keyframes，视觉上仍像一道光扫过键盘。 */

.keyboard-skeleton {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 12px;
  user-select: none;
  isolation: isolate;
}

.keyboard-skeleton__keys-layer {
  position: relative;
  z-index: 0;
}

.keyboard-skeleton__row {
  display: block;
  position: relative;
  margin-bottom: var(--key-gap, 4px);
}

.keyboard-skeleton__row:last-child {
  margin-bottom: 0;
}

.keyboard-skeleton__cell {
  position: absolute;
  border-radius: 8px;
  pointer-events: none;
  overflow: hidden;
}

.keyboard-skeleton__cell-inner {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  z-index: 0;
}

/* 仅盖住键帽区域，不盖住键与键之间的空隙 */
.keyboard-skeleton__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  z-index: 1;
  pointer-events: none;
  background: var(--skeleton-bg-keyboard);
  background-size: 200% 100%;
  animation: keyboard-skeleton-shimmer 2s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

.keyboard-skeleton--neutral .keyboard-skeleton__cell-inner {
  background: var(--keyboard-bg);
  border: 1px solid var(--beyboard-border);
}

@keyframes keyboard-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/** packages/shared-components/src/components/Keyboard/Keyboard.css */

.shared-keyboard-fit-root {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shared-keyboard-fit-slot {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

/* slot 为 naturalSize×scale，scale<1 时过窄；abspos 子级 shrink-to-fit 会压扁测量，naturalSize 递减 */
.shared-keyboard-fit-scaler {
  width: max-content;
  height: max-content;
  max-width: none;
}

.shared-keyboard-fit-measure {
  display: inline-block;
  vertical-align: top;
  width: max-content;
  height: max-content;
}

.layout-content .shared-keyboard-box,
.lighting-keyboard .shared-keyboard-box,
.trigger-keyboard .shared-keyboard-box,
.advancedKey-keyboard .shared-keyboard-box,
.advancedKey-keyboard-beiying .shared-keyboard-box,
.test-keyboard .shared-keyboard-box,
.music-dance-keyboard-display .shared-keyboard-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/** 框选父级：与页面键盘展示区同大，从左上角开始拉框 */
.shared-keyboard-selection-root {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.lighting-keyboard-display .shared-keyboard-box,
.trigger-keyboard-display .shared-keyboard-box,
.lighting-keyboard-display .shared-keyboard-selection-root,
.trigger-keyboard-display .shared-keyboard-selection-root {
  min-height: 100%;
}

.shared-keyboard-selection-root > .shared-keyboard-selection-fit {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.shared-keyboard {
  --key-size: 48px;
  --key-gap: 4px;

  padding: 4px;
  display: inline-block;
  user-select: none;
  position: relative; /* 子元素的绝对定位支持 */
}
.shared-keyboard.bordered {
  border-radius: 8px; /* 圆角边框 */
  border: 12px solid #7c737352; /* 外壳边框样式 */
}
.shared-keyboard-row {
  display: block; /* 使用块级布局 */
  position: relative; /* 使子元素绝对定位的父元素有效 */
  margin-bottom: var(--key-gap);
}

.shared-keyboard-row:last-child {
  margin-bottom: 0;
}

/* 间距占位符样式 */
.shared-keyboard-gap {
  flex-shrink: 0;
  pointer-events: none;
}

/* ===== neutral 模式：统一灰色 ===== */
.shared-keyboard-style-neutral {
  background: var(--bg-secondary);
}
.shared-keyboard-key {
  position: relative;
  background: var(--keyboard-bg);
  color: var(--beyboard-text-hover);
  border: var(--beyboard-border) 1px solid;
  border-radius: 8px;
}

.shared-keyboard-key-custom-corner-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  z-index: 4;
}
.shared-keyboard-style-neutral
  .shared-keyboard-key:hover:not(.shared-keyboard-key-selected):not(
    .shared-keyboard-key-pressed
  ) {
  background: var(--keyboard-bg-hover);
  border-color: var(--beyboard-border-hover);
  color: var(--beyboard-text-hover);
  filter: none;
  transform: scale(1.02);
}
.shared-keyboard-style-neutral
  .shared-keyboard-key .shared-keyboard-key-label, .shared-keyboard-style-neutral
  .shared-keyboard-key:hover .shared-keyboard-key-label {
    color: var(--beyboard-text-hover);
  }
  .shared-keyboard-style-neutral
  .shared-keyboard-key:hover .shared-keyboard-key-label {
    font-weight: 700 !important;
  }

.shared-keyboard-style-neutral .shared-keyboard-key-pressed {
  background: #FFD3C5;
  transform: translateY(1px);
  filter: none;
}

.shared-keyboard-style-neutral .shared-keyboard-key-selected {
  background: var(--keyboard-selected-bg);
  /* border: 2px solid var(--primary-color); */
  color: var(--keyboard-selected-text);
  filter: none;
}
.shared-keyboard-style-neutral .shared-keyboard-key-selected .shared-keyboard-key-label {
  color: var(--keyboard-selected-text);
  font-weight: 700 !important;
}
.shared-keyboard-style-neutral .shared-keyboard-key-selected:hover .shared-keyboard-key-label {
  color: var(--keyboard-selected-text-hover);
}

/* ===== colorful 模式的交互效果 ===== */
.shared-keyboard-style-colorful .shared-keyboard-key:hover {
  filter: brightness(1.2);
  transform: none;
}

.shared-keyboard-style-colorful .shared-keyboard-key-pressed {
  transform: none;
  filter: brightness(0.8);
}

.shared-keyboard-style-colorful .shared-keyboard-key-selected {
  box-shadow: inset 0 0 0 2px #fff;
  filter: brightness(1.3);
}

.shared-keyboard-style-colorful .shared-keyboard-key-selected::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 80% 键盘功能键区域样式优化 */
.shared-keyboard-type-80 .shared-keyboard-row:first-child .shared-keyboard-key {
  font-size: 10px;
}

/* 导航区按键标签缩小 */
.shared-keyboard-key[data-code="Insert"],
.shared-keyboard-key[data-code="Delete"],
.shared-keyboard-key[data-code="Home"],
.shared-keyboard-key[data-code="End"],
.shared-keyboard-key[data-code="PageUp"],
.shared-keyboard-key[data-code="PageDown"],
.shared-keyboard-key[data-code="PrintScreen"],
.shared-keyboard-key[data-code="ScrollLock"],
.shared-keyboard-key[data-code="Pause"] {
  font-size: 9px;
}

/* 方向键样式优化 */
.shared-keyboard-key[data-code^="Arrow"] {
  font-size: 16px;
}

/* 响应式 */
@media (max-width: 1200px) {
  .shared-keyboard {
    --key-size: 40px;
  }
}

@media (max-width: 768px) {
  .shared-keyboard {
    --key-size: 32px;
    --key-gap: 2px;
  }

  .shared-keyboard-key {
    font-size: 10px;
  }
}
/* 拖拽悬停样式 */
.shared-keyboard-key-drag-over {
  border: 2px solid var(--primary-color, #FF602E) !important;
  background: rgba(59, 130, 246, 0.2) !important;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

/* 拖拽提示动画 */
@keyframes drag-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.6);
  }
}

.shared-keyboard-key[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.7;
}

/* 宏按键区：未配置宏的禁用态 */
.shared-keyboard-key-macro-disabled {
  opacity: 0.8;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.shared-keyboard-key-macro-disabled:hover {
  border: none;
}

/* ========== 高级键标识样式 ========== */
.shared-keyboard-key-content {
  display: flex;
  flex-direction: column; /* 设定为垂直方向 */
  align-items: center; /* 水平居中 */
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative; /* 允许子元素绝对定位 */
}

.shared-keyboard-key-random-value {
  position: absolute; /* 绝对定位 */
  top: 1px; /* 根据需要调整位置 */
  left: 50%; /* 左侧居中 */
  transform: translateX(-50%); /* 移动到自身宽度的一半 */
  font-size: 12px; /* 根据设计需要调整字体大小 */
}
.shared-keyboard-key-label {
  color: var(--keyboard-label-color);
  font-size: 12px;
  font-weight: 500;
  position: relative;
  z-index: 2;
  width: 200%; /* 阈值宽度：超过这个宽度才会换行 */
  white-space: normal; /* 取消强制不换行，允许自动换行 */
  word-wrap: break-word; /* 长单词/连续字符也能换行 */
  word-break: break-all; /* 兼容中英文混合换行 */
  overflow-wrap: break-word; /* 现代浏览器换行兼容 */
}

.shared-keyboard-key-badge {
  /* width: 100%; */
  /* position: absolute;
  bottom: 1px;
  right: 0px; */
  font-size: 12px; /* 根据设计需要调整字体大小 */
  font-weight: 600;
  min-width: 36px;
  padding: 2px 0;
  color: var(--advancedKey-select-key-bg);
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1;
  background: var(--advancedKey-select-key-model-bg);
  transform: skew(-10deg);
  margin-top: 10px;
  padding: 2px 4px;
  letter-spacing: 1px;
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); */
}

.shared-keyboard-key-advanced {
  /* border: 1px solid rgba(234, 88, 12, 0.5); */
  background: var(--advancedKey-select-key-bg);
  /* cursor: not-allowed; */
  border: none;
}

.shared-keyboard-key-advanced::after {
  content: "";
  /* position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: #FF602E;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(234, 88, 12, 0.8); */
}

.calibration-box,
.teampreset-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.calibration-box .calibration-text {
  width: 100%;
  height: 100%;
  padding-top: 4px;
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 2px;
  z-index: 2;
}
.calibration-box .calibration-number {
  width: 100%;
  font-size: 10px;
  position: absolute;
  left: 0;
  bottom: 4px;
  z-index: 3;
  display: flex;
  justify-content: center;
}
@keyframes calibration-animation {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}
.calibration-box .calibration-bg {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    transparent,
    var(--primary-color)
  );
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0.6;
  transition: all 0.05s;
  /* animation: calibration-animation 1s ease-in-out infinite alternate; */
}
.teampreset-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
}
.teampreset-box .teampreset-first {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: var(--primary-color);
}
.teampreset-box .teampreset-dwon-up {
  display: flex;
  justify-content: space-between;
}
.teampreset-box .teampreset-dwon-up .teampreset-down,
.teampreset-box .teampreset-dwon-up .teampreset-up {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 9.2px;
}
.axis-box {
  width: 100%;
  font-size: 9px;
  position: absolute;
  left: 0;
  top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: var(--primary-color);
}

.selection-box {
  position: absolute;
  border: 1px dashed var(--primary-color, #FF602E);
  background-color: rgba(59, 130, 246, 0.1);
  z-index: 999;
  pointer-events: none;
}

.shared-keyboard-extra-key-tooltip-host {
  display: inline-block;
  vertical-align: top;
}

.keyboard-button {
  padding: 0;
  overflow: hidden;
}

.shared-keyboard-type-63 {
  width: 896px !important;
}
/** packages/shared-components/src/components/KeyboardLayoutSelector/KeyboardLayoutSelector.css */

.keyboard-layout-selector {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
}

.keyboard-layout-selector-sidebar {
  position: relative;
  width: 156px;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 2px;
  flex-shrink: 0;
  button {
    margin-right: 0;
  }
}

.keyboard-layout-selector-sidebar::before {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 2px;
  background: var(--line-color);
  border-radius: 0 2px 2px 0;
  z-index: 0;
}

.keyboard-layout-selector-tab {
  position: relative;
  width: 100%;
  height: 36px;
  background: transparent;
  border: none;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 12px;
  z-index: 1;
  border-radius: 4px;
}

.keyboard-layout-selector-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: var(--text-primary);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.keyboard-layout-selector-tab .tab-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.keyboard-layout-selector-tab.active {
  background: #eee;
}
.keyboard-layout-selector-tab.active::before {
  opacity: 1;
}

.keyboard-layout-selector-content {
  flex: 1; /* 确保内容区自动填充剩余空间 */
  padding: 8px 24px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  /* 避免与父级滚动链互相抢滚动；去掉 mandatory 滚动捕捉，减少顿挫感 */
  overscroll-behavior: contain;
}

.keyboard-layout-selector-layout:not(:first-child) .shared-keyboard-key  {
   width: 48px!important;
   height: 48px!important;
   align-items: center;
   justify-content: center;
  .iconfont {
      color: var(--text-primary); 
      font-size: 24px;
      font-weight: 500;
}}

/* .keyboard-layout-selector-layout {
  margin-bottom: 24px;
} */


/** 按键行左缘与分组标题左对齐：抵消 shared-keyboard padding-left(4px) + containerPadding(6px) */
.keyboard-layout-selector-layout .shared-keyboard {
  padding-left: 0;
  margin-left: -6px;
}

/** 改键选择器：按键块靠左排列，不使用主键盘区的居中框选容器样式 */
.keyboard-layout-selector-layout .shared-keyboard-box,
.keyboard-layout-selector-layout .shared-keyboard-selection-root {
  width: auto;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
}



/** packages/shared-components/src/components/KeyRemappingPanel/KeyRemappingPanel.css */

.key-remapping-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 24px; /* 增加内边距让内容不贴边 */
  margin-top: 24px;
  box-sizing: border-box;

  /* 新增需求：白色背景，圆角12px */
  background-color: var(--bg-secondary);
  border-radius: 24px;
  /* 可选：添加轻微阴影增加层次感 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 头部文本区域 */
.key-remapping-header {
  flex: 0 0 auto;
  margin-bottom: 20px;
}

.key-remapping-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
}

.key-remapping-description {
  margin: 0;
  font-size: 14px;
  color: var(--key-remapping-description, #6b7280);
  line-height: 1.5;
}

/* 下方选择器区域容器 */
.key-remapping-panel-selector {
  flex: 1;
  min-height: 0;
  overflow: hidden; /* 防止溢出破坏圆角 */
  display: flex;
  flex-direction: column;
}

/* packages/shared-components/src/components/DecorativeLight/DecorativeLight.css */

.decorative-light {
  width: fit-content;
  max-width: 100%;
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.decorative-led-grid {
  display: flex;
  width: fit-content;
  max-width: 100%;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* 横条布局 */
.decorative-led-strip {
  display: flex;
  flex-direction: row; /* 确保 LEDs 横向排列 */
  align-items: center; /* 垂直居中 LED */
  height: auto; /* 根据内容的高度调整 */
}

.decorative-led {
  border-radius: 2px; /* 整体边角可选 */
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

/* 激活状态的发光效果 */
.decorative-led.active {
  border-color: rgba(255, 255, 255, 0.3);
}

.decorative-led:hover {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.decorative-led:active {
  transform: scale(0.95);
}

/* packages/shared-components/src/components/Sidebar/Sidebar.css */

.shared-sidebar {
  width: 240px;
  height: 100vh;
  background: rgba(15, 23, 42, 0.95);
  border-right: 1px solid rgba(148, 163, 184, 0.1);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  position: sticky;
  top: 0;
  left: 0;
}

.shared-sidebar-collapsed {
  width: 60px;
}

.shared-sidebar-header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  min-height: 60px;
}

.shared-sidebar-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
}

.shared-sidebar-toggle {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 4px;
  color: #cbd5e1;
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  font-size: 1rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.shared-sidebar-toggle:hover {
  background: rgba(148, 163, 184, 0.2);
  border-color: rgba(148, 163, 184, 0.3);
  color: #f1f5f9;
}

.shared-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.shared-sidebar-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  color: #cbd5e1;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  margin-bottom: 0.25rem;
}

.shared-sidebar-item:hover {
  background: rgba(148, 163, 184, 0.1);
  color: #f1f5f9;
}

.shared-sidebar-item-active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-weight: 500;
}

.shared-sidebar-item-active:hover {
  background: rgba(59, 130, 246, 0.2);
}

.shared-sidebar-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

.shared-sidebar-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shared-sidebar-collapsed .shared-sidebar-item {
  justify-content: center;
  padding: 0.75rem 0.5rem;
}

/* 滚动条样式 */
/* .shared-sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.shared-sidebar-nav::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

.shared-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 3px;
}

.shared-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
} */

/* 响应式 */
@media (max-width: 768px) {
  .shared-sidebar {
    width: 60px;
  }

  .shared-sidebar-label {
    display: none;
  }

  .shared-sidebar-title {
    display: none;
  }
}

/* packages/shared-components/src/components/Section/Section.module.css */

.main-section_q508f {
  margin-bottom: 2rem;
}
.main-disabled_H5eav {
  opacity: 0.5;
  pointer-events: none;
}

.main-header_xUDp7 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

/* ✅ 只有 showDivider=true 时显示分割线 */
.main-header_xUDp7.main-withDivider_V5wx7 {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-color);
}

.main-headerLeft_w8kG8 {
flex: 1;
}

.main-titleRow_Z5E99 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-titleRow_Z5E99 .main-title_dqaz9 {
  margin-bottom: 0;
}

.main-title_dqaz9 {
  font-size: var(--text-h2);
  font-weight: var(--text-weight-h1);
  color: var(--text-primary);
  margin: 0;
  margin-bottom: 0.25rem;
}

.main-description_uZtUo {
  font-size: var(--text-body);
  font-weight: var(--text-weight-body);
  color: var(--section-description);
  margin: 0;
  margin-top: 0.25rem;
}

.main-rightContent_zLsZg {
  margin-left: 1rem;
  flex-shrink: 0;
}

.main-content_LXR1w {
  color: var(--text-primary);
}
/* packages/shared-components/src/components/Radio/Radio.module.css */

.main-radio_imJbv {
  display: inline-flex;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s;

  &:hover:not(.main-disabled_FaykE) .main-ring__X51Q {
    border-color: var(--text-primary);
  }

  &.main-disabled_FaykE {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

.main-iconWrapper_glW4H {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.main-ring__X51Q,
.main-iconHolder_Zn4eh {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

.main-ring__X51Q {
  border: 2px solid var(--switch-border-off);
  border-radius: 50%;
  background: transparent;
}

.main-iconHolder_Zn4eh {
  color: var(--text-primary);
}

.main-hidden_yPDtJ {
  opacity: 0;
  pointer-events: none;
}

.main-icon_A7Wm5 {
  font-size: 20px!important;
}

.main-label_Mkp7g {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

/* RadioGroup */
.main-radioGroup_AY217 {
  display: flex;

  &.main-horizontal_EDche {
    flex-direction: row;
    gap: 2rem;
    align-items: center;
  }

  &.main-vertical_Q7wyw {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}

/** packages/shared-components/src/components/Toast/Toast.css */

.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  min-width: 320px;
  max-width: 480px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  will-change: transform, opacity;

  /* ✅ 初始状态：完全隐藏在右侧 */
  opacity: 0;
  transform: translateX(100%) scale(0.9);
}

/* ✅ mounting 状态：准备进入（不可见） */
.toast-mounting {
  opacity: 0;
  transform: translateX(100%) scale(0.9);
}

/* ✅ mounted 状态：执行进入动画 */
.toast-mounted {
  animation: toast-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ✅ unmounting 状态：执行退出动画 */
.toast-unmounting {
  animation: toast-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ========== 进入动画 ========== */
@keyframes toast-slide-in {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  60% {
    transform: translateX(-8px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ========== 退出动画 ========== */
@keyframes toast-slide-out {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(120%) scale(0.9);
  }
}

/* ========== 内容区域 ========== */
.toast-content {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  position: relative;
  z-index: 1;
}

/* ========== 图标区域 ========== */
.toast-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
}

.toast-icon-svg {
  width: 100%;
  height: 100%;
}

/* ✅ 图标动画：仅在 mounted 状态触发 */
.toast-mounted .toast-icon-svg {
  animation: icon-pop 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
}

@keyframes icon-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== 文本区域 ========== */
.toast-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.toast-message {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========== 进度条 ========== */
.toast-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.toast-progress-fill {
  height: 100%;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px currentColor;
}

/* ========== Success 样式 ========== */
.toast-success {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.15) 0%,
    rgba(5, 150, 105, 0.12) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.toast-success .toast-icon {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1),
    0 2px 8px rgba(16, 185, 129, 0.3);
}

.toast-success .toast-progress-fill {
  background: linear-gradient(90deg, #10b981, #059669);
  color: #10b981;
}

/* ========== Error 样式 ========== */
.toast-error {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.15) 0%,
    rgba(220, 38, 38, 0.12) 100%
  );
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.toast-error .toast-icon {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1), 0 2px 8px rgba(239, 68, 68, 0.3);
}

.toast-error .toast-progress-fill {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  color: #ef4444;
}

/* ========== Warning 样式 ========== */
.toast-warning {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(217, 119, 6, 0.12) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.toast-warning .toast-icon {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1),
    0 2px 8px rgba(245, 158, 11, 0.3);
}

.toast-warning .toast-progress-fill {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #f59e0b;
}

/* ========== Info 样式 ========== */
.toast-info {
  background: linear-gradient(
    135deg,
    rgba(234, 88, 12, 0.15) 0%,
    rgba(194, 65, 12, 0.12) 100%
  );
  border: 1px solid rgba(234, 88, 12, 0.3);
}

.toast-info .toast-icon {
  color: #FF602E;
  background: rgba(234, 88, 12, 0.15);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.1), 0 2px 8px rgba(234, 88, 12, 0.3);
}

.toast-info .toast-progress-fill {
  background: linear-gradient(90deg, #FF602E, #c2410c);
  color: #FF602E;
}

/* ========== 响应式 ========== */
@media (max-width: 640px) {
  .toast {
    top: 16px;
    right: 16px;
    left: 16px;
    min-width: unset;
    max-width: unset;
  }

  .toast-content {
    padding: 16px 18px;
  }

  .toast-message {
    font-size: 14px;
  }

  .toast-icon {
    width: 24px;
    height: 24px;
  }
}

/* ========== 多个 Toast 堆叠 ========== */
.toast:nth-child(2) {
  top: calc(24px + 90px);
}

.toast:nth-child(3) {
  top: calc(24px + 180px);
}

.toast:nth-child(4) {
  top: calc(24px + 270px);
}

@media (max-width: 640px) {
  .toast:nth-child(2) {
    top: calc(16px + 80px);
  }

  .toast:nth-child(3) {
    top: calc(16px + 160px);
  }

  .toast:nth-child(4) {
    top: calc(16px + 240px);
  }
}

/* ========== 悬停效果 ========== */
.toast-mounted:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.toast-mounted:hover .toast-progress-fill {
  animation: progress-glow 1.5s ease-in-out infinite;
}

@keyframes progress-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.main-battery_jLDDR {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.main-batteryIcon_aIStb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  line-height: 0;
}

.main-batteryIcon_aIStb .iconfont {
  font-size: 20px;
  line-height: 1;
}

.main-chargingSvg_EPVO0 {
  width: 20px;
  height: 20px;
  display: block;
}

.main-batteryLevel_t7ek3 {
  line-height: 20px;
  font-size: 14px;
}

.main-batteryLow_UYQvz .main-batteryIcon_aIStb .iconfont {
  color: #ff3b30 !important;
}

.main-batteryCharging_SdyEb {
  --battery-charging-color: #00bc78;
  color: var(--battery-charging-color);
}

.main-batteryCharging_SdyEb .main-batteryLevel_t7ek3 {
  color: var(--battery-charging-color);
}

/* 已连接设备卡片 */
.main-deviceCard_zy6ca {
  width: auto;
  min-width: 388px;
  max-width: 800px;
  height: 500px;
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  border: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  transform: scale(1);
}

.main-deviceCard_zy6ca:hover {
  transform: scale(1.02);
}

/* 禁用状态 */
.main-deviceCard_zy6ca.main-disabled_EkDvi {
  opacity: 0.6;
  filter: grayscale(50%);
  cursor: not-allowed;
  pointer-events: none;
}

.main-deviceCard_zy6ca.main-disabled_EkDvi:hover {
  transform: scale(1);
  border-color: transparent;
  background: var(--bg-tertiary);
}

/* 休眠禁用：底部横条（略深于卡片背景），Zz + 设备休眠 */
.main-sleepOverlay_xVirj {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--device-card-sleep-bar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 0 0 16px 16px;
  z-index: 10;
}

.main-sleepOverlay_xVirj .main-sleepIcon_YWr1C {
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  color: var(--device-card-sleep-bar-text);
  letter-spacing: 0.02em;
}

.main-sleepOverlay_xVirj .main-sleepMessage_kHqEV {
  font-size: var(--text-body);
  font-weight: var(--text-weight-body);
  color: var(--device-card-sleep-bar-text);
  line-height: 1.4;
}

.main-deviceCardContent_oGj7m {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-deviceName_rJXFu {
  font-size: 24px;
  font-weight: var(--text-weight-h1);
  color: var(--text-primary);
  margin: 0 0 20px 0;
}

.main-deviceImageWrapper_PCY4l {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  flex: 1;
  align-items: center;
}

.main-deviceImage_b3Z3w {
  max-height: 226px;
  max-width: 700px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.main-colorSelector_t0OHS {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.main-colorDot_zPrCN {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.main-colorDot_zPrCN:hover {
  transform: scale(1.2);
}

/* .colorDot.active {
  box-shadow: inset 0 0 0 2px var(--dot-selected-border-color);
  transition: all 0.2s ease;
} */

/* 基础颜色 */
.main-colorDot_zPrCN[data-color='black'] {
  background: #0a0a0a;
}

.main-colorDot_zPrCN[data-color='white'] { 
  background: #c2c2c2;
}

.main-colorDot_zPrCN[data-color='silvery'] {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
}

.main-colorDot_zPrCN[data-color='silver'] {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
}

.main-colorDot_zPrCN[data-color='grey'] {
  background: #808080;
}

.main-colorDot_zPrCN[data-color='red'] {
  background: #b82020;
}

.main-colorDot_zPrCN[data-color='duantan'] {
  background: #0a0a0a;
}

.main-colorDot_zPrCN[data-color='orange'] {
  background: #ff8c42;
}

.main-colorDot_zPrCN[data-color='yellow'] {
  background: #f1c40f;
}

.main-colorDot_zPrCN[data-color='pink'] {
  background: #ff69b4;
}

.main-colorDot_zPrCN[data-color='blue'] {
  background: #2d77ff;
}

.main-colorDot_zPrCN[data-color='cyan'] {
  background: #1abc9c;
}

.main-colorDot_zPrCN[data-color='green'] {
  background: #2ecc71;
}

.main-colorDot_zPrCN[data-color='purple'] {
  background: #6713ee;
}

.main-colorDot_zPrCN[data-color='lightpurple'] {
  background: linear-gradient(135deg, #b19cd9 0%, #dcd0ff 100%);
}

.main-colorDot_zPrCN[data-color='blackpink'] {
  background: linear-gradient(135deg, #ff548d 0%, #0a0a0a 100%);
}

.main-colorDot_zPrCN[data-color='luotianyi'] {
  background: linear-gradient(135deg, #cbe6ff 0%,#4a74e996 50%, #01154e96 100%);
}

.main-colorDot_zPrCN[data-color='dark-blue'] {
  background: #1e3b8a;
}

.main-colorDot_zPrCN[data-color='dark-green'] {
  background: #1c5832;
}

.main-colorDot_zPrCN[data-color='dark-red'] {
  background: #942727;
}

.main-colorDot_zPrCN[data-color='berryred'] {
  background: #C71585;
}

.main-colorDot_zPrCN[data-color='berryredTranslucent'] {
  background: rgba(199, 21, 133, 0.42);
}

.main-colorDot_zPrCN[data-color='baifenjianbian'] {
  background: #e1b4c3;
}
.main-colorDot_zPrCN[data-color='bikonglan'] {
  background: #808bcf;
}
.main-colorDot_zPrCN[data-color='fushihui'] {
  background: linear-gradient(135deg, #ffffff 0%, #333333 50%);
}
.main-colorDot_zPrCN[data-color='jingmihaiyang'] {
  background: linear-gradient(135deg, #8081b8 30%, #333333 70%);
}
.main-colorDot_zPrCN[data-color='piwen'] {
  background: #333333;
}
.main-colorDot_zPrCN[data-color='qingshimohei'] {
  background: linear-gradient(135deg, #70665a 30%, #333333 70%);
}
.main-colorDot_zPrCN[data-color='qingti'] {
  background: linear-gradient(135deg, #c4d959 30%, #333333 70%);
}
.main-colorDot_zPrCN[data-color='tianxinfen'] {
  background: linear-gradient(135deg, #ffffff 20%, #e1b4c3 60%);
}
.main-colorDot_zPrCN[data-color='weichen'] {
  background: linear-gradient(135deg, #ffffff 30%, #333333 70%);
}
.main-colorDot_zPrCN[data-color='wutou'] {
  background: linear-gradient(135deg, #83634f 30%, #333333 70%);
}
.main-colorDot_zPrCN[data-color='xueshanjianbian'] {
  background: linear-gradient(135deg, #98b8e7 30%, #c3cfea 70%);
}
.main-colorDot_zPrCN[data-color='piwenbai'] {
  background: #c2c2c2;
}

.main-colorDot_zPrCN[data-color='foggywhite'] {
  background: linear-gradient(135deg, #f5f8fc 0%, #d8e4f0 100%);
}

/* X23 Pro 鼠标配色 */
.main-colorDot_zPrCN[data-color='shumeipink'] {
  background: #D5A8AA;
}

/* ES98 键盘配色 */
.main-colorDot_zPrCN[data-color='blackpurple'] {
  background: linear-gradient(135deg, #1a0a1e 0%, #4a1f5c 100%);
}
.main-colorDot_zPrCN[data-color='tengwangge'] {
  background: linear-gradient(135deg, #d4af37 0%, #b8342f 50%, #1e4620 100%);
}
.main-colorDot_zPrCN[data-color='whiteblue'] {
  background: linear-gradient(135deg, #e8f4fd 0%, #4a90e2 100%);
}

.main-colorDot_zPrCN[data-color='whiteblue2'] {
  background: linear-gradient(135deg, #e8f4fd 0%, #4a90e2 100%);
}
.main-colorDot_zPrCN[data-color='blackyellow'] {
  background: linear-gradient(135deg, #f1c40f 0%, #0a0a0a 100%);
}
.main-colorDot_zPrCN[data-color='whitepink'] {
  background: linear-gradient(135deg, #fff0f5 0%, #ffb6c1 100%);
}

/* X98 键盘配色 */
.main-colorDot_zPrCN[data-color='taofen'] {
  background: #FFB1B9;
}
.main-colorDot_zPrCN[data-color='yunjianlan'] {
  background: #88ABDA;
}
.main-colorDot_zPrCN[data-color='zheyingzhiguang'] {
  background: #E6E9EF;
}

/* X75 Pro 键盘配色 */
.main-colorDot_zPrCN[data-color='grapepurple'] {
  background: linear-gradient(135deg, #b19cd9 0%, #dcd0ff 100%);
}
.main-colorDot_zPrCN[data-color='jiangguohong'] {
  background: linear-gradient(135deg, #cbe6ff 0%, #4a74e996 50%, #01154e96 100%);
}
.main-colorDot_zPrCN[data-color='moyingjianbiandenggaoxian3.0'] {
  background: linear-gradient(135deg, #cbe6ff 0%, #4a74e996 50%, #01154e96 100%);
}
.main-colorDot_zPrCN[data-color='pinkgradient'] {
  background: linear-gradient(135deg, #ff548d 0%, #0a0a0a 100%);
}
.main-colorDot_zPrCN[data-color='whitedenggaoxian3.0'] {
  background: linear-gradient(135deg, #cbe6ff 0%, #4a74e996 50%, #01154e96 100%);
}

/* M98 键盘配色 */
.main-colorDot_zPrCN[data-color='fendiye'] {
  background: #FF9A9E;
}
.main-colorDot_zPrCN[data-color='leitaocijianmao'] {
  background: #F9F4E8;
}

/* MUSE M71 键盘配色（与 DEVICE_CONFIGS「M71」colors[].key 一致） */
.main-colorDot_zPrCN[data-color='lipstickDot'] {
  background: linear-gradient(135deg, #ffe4ec 0%, #c41e3a 50%, #3a1d1e 100%);
}
.main-colorDot_zPrCN[data-color='cuteBearLiquidFoundation'] {
  background: linear-gradient(135deg, #fce8dc 0%, #e8b4a8 45%, #c9a07a 100%);
}
.main-colorDot_zPrCN[data-color='lipstickCuteLittleBear'] {
  background: linear-gradient(135deg, #ffe4ec 0%, #c41e3a 50%, #3a1d1e 100%);
}
.main-colorDot_zPrCN[data-color='liquidFoundationDots'] {
  background: linear-gradient(135deg, #f0e0d0 0%, #d4b896 40%, #b8956a 100%);
}

/* 默认样式 - 如果没有匹配到特定颜色 */
.main-colorDot_zPrCN:not([data-color]) {
  background: #666;
}

/* 连接模式与电量：样式均在本组件内，由主题变量控制，与页面分离 */
.main-deviceStatus_PhYlj {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.main-statusItem_Eez4s {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-statusItem_Eez4s .iconfont,
.main-statusItem_Eez4s i {
  color: var(--device-card-icon);
  font-size: 20px;
  flex-shrink: 0;
}

.main-statusItem_Eez4s span {
  font-weight: var(--text-weight-caption);
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: 1;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .main-deviceCard_zy6ca {
    min-width: 400px;
    max-width: 640px;
    height: 480px;
    padding: 36px;
  }

  .main-deviceName_rJXFu {
    font-size: 24px;
    margin: 0 0 16px 0;
  }

  .main-deviceImage_b3Z3w {
    max-height: 300px;
    max-width: 560px;
  }

  .main-deviceImageWrapper_PCY4l {
    margin-bottom: 16px;
  }

  .main-colorSelector_t0OHS {
    gap: 10px;
    margin-bottom: 14px;
  }

  .main-colorDot_zPrCN {
    width: 14px;
    height: 14px;
  }

  .main-deviceStatus_PhYlj {
    font-size: 13px;
    gap: 20px;
  }
}

@media (max-width: 1366px) {
  .main-deviceCard_zy6ca {
    min-width: 350px;
    max-width: 560px;
    height: 420px;
    padding: 32px;
  }

  .main-deviceName_rJXFu {
    font-size: 22px;
    margin: 0 0 14px 0;
  }

  .main-deviceImage_b3Z3w {
    max-height: 260px;
    max-width: 480px;
  }

  .main-deviceImageWrapper_PCY4l {
    margin-bottom: 14px;
  }

  .main-colorSelector_t0OHS {
    gap: 8px;
    margin-bottom: 12px;
  }

  .main-colorDot_zPrCN {
    width: 12px;
    height: 12px;
  }

  .main-deviceStatus_PhYlj {
    font-size: 12px;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .main-deviceCard_zy6ca {
    width: 90%;
    min-width: unset;
    max-width: 400px;
    height: auto;
    min-height: 400px;
    padding: 24px;
  }
  
  .main-deviceName_rJXFu {
    font-size: 20px;
    margin: 0 0 12px 0;
  }

  .main-deviceImageWrapper_PCY4l {
    margin-bottom: 12px;
  }
  
  .main-deviceImage_b3Z3w {
    max-height: 200px;
    max-width: 90%;
  }

  .main-colorSelector_t0OHS {
    gap: 8px;
    margin-bottom: 10px;
  }

  .main-colorDot_zPrCN {
    width: 12px;
    height: 12px;
  }

  .main-deviceStatus_PhYlj {
    font-size: 11px;
    gap: 12px;
    flex-wrap: wrap;
  }
}

.main-skeleton_r7pBu {
  display: block;
  box-sizing: border-box;
  background: var(--skeleton-bg);
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.main-skeletonCircle_VMswV {
  border-radius: 50%;
}

.main-skeletonShimmer__9dFF::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--skeleton-bg);
  background-size: 200% 100%;
  animation: main-skeleton-shimmer_vh5os 1.35s ease-in-out infinite;
}

.main-skeletonPulse_nFaLx {
  animation: main-skeleton-pulse_jxquz 1.5s ease-in-out infinite;
}

@keyframes main-skeleton-shimmer_vh5os {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes main-skeleton-pulse_jxquz {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.main-searchInput_BKgty {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.main-searchIcon_8N7R0 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--input-placeholder);
  pointer-events: none;
  z-index: 1;
  font-size: 16px;
}

.main-input_OlTFS {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 40px;
  line-height: 36px;
  box-sizing: border-box;
  background: var(--btn-default-bg);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
}

.main-input_OlTFS::placeholder {
  color: var(--input-placeholder);
}


.main-clearButton_KOkFy {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--input-placeholder);
  cursor: pointer;
  transition: all 0.2s;
}


@property --menu-conic-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes menuActiveConicAngle{to{--menu-conic-angle: 1turn}}.menu-box{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:16px;background:var(--menu-bg-color);position:relative;box-sizing:border-box}.menu-box .logo{width:172px;height:28px;background:var(--logo-img) no-repeat center center;background-size:contain;cursor:pointer;margin-bottom:14px}.menu-box .device-status{margin-bottom:16px}.menu-box .menu-main{width:100%;flex:1;min-height:0;height:auto;display:flex;flex-direction:column}.menu-box .menu-main .menu-list{width:100%;display:flex;flex-direction:column}.menu-box .menu-main .menu-list .list-title{font-size:12px;color:var(--menu-list-title-text);margin-bottom:8px}.menu-box .menu-main .menu-list .menu-child{width:100%;display:flex;flex-direction:column}.menu-box .menu-main .menu-list .menu-child .child-list{width:100%;position:relative}.menu-box .menu-main .menu-list .menu-child .child-list .child-title{width:100%;height:44px;display:flex;align-items:center;border:1px solid rgba(0,0,0,0);border-radius:8px;padding:14px 16px;cursor:pointer;gap:12px}.menu-box .menu-main .menu-list .menu-child .child-list .child-title .iconfont{color:var(--menu-list-child-icon);font-size:20px}.menu-box .menu-main .menu-list .menu-child .child-list .child-title .text{font-size:14px;color:var(--menu-child-list-text-arrow)}.menu-box .menu-main .menu-list .menu-child .child-list .child-title .arrow{width:16px;height:16px;position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;opacity:0;transition:all .3s}.menu-box .menu-main .menu-list .menu-child .child-list .child-title .arrow .iconfont{font-size:16px}.menu-box .menu-main .menu-list .menu-child .child-list .child-title:hover{background:var(--menu-child-bg-color-hover)}.menu-box .menu-main .menu-list .menu-child .child-list .child-modal-box{width:380px;padding:0 10px;position:absolute;left:100%;top:0;z-index:99999;display:none}.menu-box .menu-main .menu-list .menu-child .child-list .child-modal-box .child-modal{width:100%;border:1px solid var(--menu-modal-border);border-radius:10px;position:relative;overflow:hidden}.menu-box .menu-main .menu-list .menu-child .child-list .child-modal-box .child-modal::before{content:"";width:100%;height:100%;background:var(--menu-modal-bg);position:absolute;left:0;top:0;z-index:1}.menu-box .menu-main .menu-list .menu-child .child-list .child-modal-box .child-modal .child-modal-main{width:100%;position:relative;z-index:2;display:flex;flex-direction:column;padding:20px}.menu-box .menu-main .menu-list .menu-child .child-list .child-modal-box .child-modal .child-modal-main .child-modal-title-more{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.menu-box .menu-main .menu-list .menu-child .child-list .child-modal-box .child-modal .child-modal-main .child-modal-title-more .child-modal-title{font-size:16px;color:var(--menu-modal-title-text)}.menu-box .menu-main .menu-list .menu-child .child-list .child-modal-box .child-modal .child-modal-main .child-modal-title-more .child-modal-more{display:flex;align-items:center;color:var(--menu-modal-title-text);cursor:pointer}.menu-box .menu-main .menu-list .menu-child .child-list .child-modal-box .child-modal .child-modal-main .child-modal-desc{font-size:14px;color:var(--menu-modal-desc-text);margin-bottom:20px}.menu-box .menu-main .menu-list .menu-child .child-list.active .child-title{overflow:hidden;background-color:color-mix(in srgb, var(--menu-child-bg-color) 76%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.menu-box .menu-main .menu-list .menu-child .child-list.active .child-title::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;--menu-conic-angle: 0deg;background:conic-gradient(from var(--menu-conic-angle), rgba(255, 115, 196, 0.42), rgba(74, 222, 255, 0.42), rgba(255, 115, 196, 0.42), rgba(255, 214, 54, 0.42), rgba(255, 115, 196, 0.42));opacity:.09;animation:menuActiveConicAngle 4s linear infinite}.menu-box .menu-main .menu-list .menu-child .child-list.active .child-title::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;padding:2px;box-sizing:border-box;--menu-conic-angle: 0deg;background:conic-gradient(from var(--menu-conic-angle), rgba(255, 115, 196, 0.45), rgba(74, 222, 255, 0.45), rgba(255, 115, 196, 0.45), rgba(255, 214, 54, 0.45), rgba(255, 115, 196, 0.45));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:menuActiveConicAngle 4s linear infinite}.menu-box .menu-main .menu-list .menu-child .child-list.active .child-title>span{z-index:1}.menu-box .menu-main .menu-list .menu-child .child-list.active .child-title .arrow{opacity:1}.menu-box .menu-main .menu-list .menu-child .child-list.active .child-title .icon,.menu-box .menu-main .menu-list .menu-child .child-list.active .child-title .text{color:var(--menu-child-list-text-arrow-active)}.menu-box .menu-main .menu-list .menu-child .child-list:hover .arrow{opacity:1}.menu-box .menu-main .menu-list .menu-child .child-list:hover .icon,.menu-box .menu-main .menu-list .menu-child .child-list:hover .text{color:var(--menu-child-list-text-arrow-active)}.menu-box .menu-main .menu-list .menu-child .child-list:hover .child-modal-box{display:flex}.menu-box .menu-main .menu-list .menu-child.overflowY{overflow:hidden auto;padding:6px 4px 6px 8px;margin:-6px -4px -6px -8px;width:calc(100% + 12px)}.menu-box .menu-main .menu-list.fixedHeight{height:48px}.menu-box .menu-main .menu-list.line{height:56px;border-bottom:1px solid var(--menu-line);margin-bottom:12px}.menu-box .menu-main .menu-list.overflowY{height:calc(100% - 96px)}.menu-box .menu-footer{width:100%;display:flex;align-items:stretch;flex-shrink:0;gap:8px;margin-top:12px}.menu-box .menu-footer.menu-footer--row{flex-direction:row}.menu-box .menu-footer.menu-footer--row .menu-footer-feedback{flex:1 1 0;min-width:0;overflow:hidden}.menu-box .menu-footer.menu-footer--row .menu-footer-toggle{flex-shrink:0}.menu-box .menu-footer.menu-footer--stacked{flex-direction:column;align-items:stretch;gap:2px}.menu-box .menu-footer-feedback.feedback,.menu-box .feedback.menu-footer-feedback{width:100%;height:48px;position:relative;background:rgba(0,0,0,0);border-radius:8px;border:1px solid var(--menu-line);display:flex;cursor:pointer;align-items:center;justify-content:center;padding:12px 8px;box-sizing:border-box}.menu-box .menu-footer-feedback.feedback .icon-text,.menu-box .feedback.menu-footer-feedback .icon-text{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%}.menu-box .menu-footer-feedback.feedback .icon-text .icon,.menu-box .feedback.menu-footer-feedback .icon-text .icon{width:24px;height:24px;margin-right:16px;display:flex;align-items:center;justify-content:center}.menu-box .menu-footer-feedback.feedback .icon-text .icon img,.menu-box .feedback.menu-footer-feedback .icon-text .icon img{width:100%;height:100%;display:block}.menu-box .menu-footer-feedback.feedback .icon-text .text,.menu-box .feedback.menu-footer-feedback .icon-text .text{font-size:14px;color:var(--menu-feedback-text);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}.menu-box .menu-footer-feedback.feedback:hover,.menu-box .feedback.menu-footer-feedback:hover{background:var(--menu-child-bg-color-hover)}.menu-box .menu-footer-toggle{width:48px;height:48px;border-radius:8px;border:none;background:rgba(0,0,0,0);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:0;color:var(--menu-list-child-icon)}.menu-box .menu-footer-toggle .iconfont{font-size:18px}.menu-box .menu-footer-toggle:hover .iconfont{transform:scale(1.15);transition:all .18s}.menu-box .menu-footer-toggle:hover{background:var(--menu-child-bg-color-hover)}@keyframes menu-sidebar-title-in{from{opacity:0;transform:translate3d(-14px, 0, 0)}to{opacity:1;transform:translate3d(0, 0, 0)}}.menu-box.menu-box--expanded .logo{animation:menu-sidebar-title-in .42s cubic-bezier(0.22, 1, 0.36, 1) both}.menu-box.menu-box--expanded .menu-main .list-title{animation:menu-sidebar-title-in .42s cubic-bezier(0.22, 1, 0.36, 1) both}.menu-box.menu-box--expanded .menu-main .child-title .text{display:inline-block;min-width:0;animation:menu-sidebar-title-in .42s cubic-bezier(0.22, 1, 0.36, 1) both}.menu-box.menu-box--expanded .menu-footer .feedback.menu-footer-feedback .icon-text{animation:menu-sidebar-title-in .42s cubic-bezier(0.22, 1, 0.36, 1) both}@media(prefers-reduced-motion: reduce){.menu-box.menu-box--expanded .logo,.menu-box.menu-box--expanded .menu-main .list-title,.menu-box.menu-box--expanded .menu-main .child-title .text,.menu-box.menu-box--expanded .menu-footer .feedback.menu-footer-feedback .icon-text{animation:none !important;opacity:1;transform:none}}
.menu-box.menu-box--collapsed{padding:16px 6px}.menu-box.menu-box--collapsed .logo{width:32px;height:32px;margin-left:6px;margin-bottom:12px;align-self:flex-start;background:var(--logo-img-shrink) no-repeat center center;background-size:contain}.menu-box.menu-box--collapsed .device-status{margin-bottom:8px}.menu-box.menu-box--collapsed .menu-main{height:auto;flex:1;min-height:0;padding-top:8px;border-top:1px solid var(--menu-line)}.menu-box.menu-box--collapsed .menu-list .list-title.list-title--advanced{writing-mode:horizontal-tb;align-self:flex-start;width:100%;text-align:left;white-space:nowrap;margin-bottom:12px;line-height:1.2;letter-spacing:0;overflow:hidden;text-overflow:clip;padding:0 10px}.menu-box.menu-box--collapsed .menu-list .menu-child .child-list{display:flex;justify-content:center;width:100%}.menu-box.menu-box--collapsed .menu-list .menu-child .child-list .child-title{justify-content:center;align-items:center;width:44px;height:44px;min-height:44px;padding:0;box-sizing:border-box;border-radius:8px}.menu-box.menu-box--collapsed .menu-list .menu-child .child-list .child-title .text,.menu-box.menu-box--collapsed .menu-list .menu-child .child-list .child-title .arrow{display:none}.menu-box.menu-box--collapsed .menu-list .menu-child .child-list .child-title .icon{margin-right:0}.menu-box.menu-box--collapsed .menu-item-tooltip-host{position:relative;width:100%}.menu-box.menu-box--collapsed .menu-footer{width:100%;margin-top:auto;flex-shrink:0}.menu-box.menu-box--collapsed .menu-footer-feedback .icon-text .text{display:none}.menu-box.menu-box--collapsed .menu-footer-feedback .icon-text .icon{margin-right:0}.menu-box.menu-box--collapsed .menu-footer.menu-footer--stacked .menu-footer-toggle{width:44px;height:44px;box-sizing:border-box;flex-shrink:0;align-self:flex-start}.menu-box.menu-box--collapsed .menu-footer-feedback.feedback,.menu-box.menu-box--collapsed .feedback.menu-footer-feedback{width:44px;height:44px;padding:8px 4px;box-sizing:border-box;border-color:rgba(0,0,0,0);align-self:flex-start}.menu-sidebar-flyout--portal{box-sizing:border-box;z-index:200010;padding:8px 14px;font-size:14px;line-height:1.35;font-weight:400;color:var(--menu-modal-title-text);white-space:nowrap;background:var(--menu-child-bg-color);border-radius:8px;border:1px solid var(--line-color);box-shadow:var(--menu-shadow);pointer-events:none}.menu-sidebar-flyout--portal::before{content:"";position:absolute;left:-5px;top:50%;margin-top:-5px;width:10px;height:10px;transform:rotate(45deg);background:var(--menu-child-bg-color);border-left:1px solid var(--line-color);border-bottom:1px solid var(--line-color);box-sizing:border-box}
.configFile-list{display:flex;flex-direction:column;gap:10px}.configFile-list .configFile-item{width:100%;padding:12px 16px;background-color:var(--bg-tertiary);border:1px solid rgba(0,0,0,0);border-radius:12px;color:var(--menu-modal-title-text);font-size:14px;display:flex;align-items:center;cursor:pointer;font-weight:500;transition:all .3s ease}.configFile-list .configFile-item .configFile-name{color:var(--menu-modal-title-text)}.configFile-list .configFile-item .configFile-desc{color:var(--menu-modal-title-text)}.configFile-list .configFile-item:hover,.configFile-list .configFile-item.active{background:var(--menu-devicelist-item-hover-bg)}.configFile-list .configFile-item:hover .configFile-id,.configFile-list .configFile-item.active .configFile-id{color:var(--menu-devicelist-item-hover-text)}.configFile-list .configFile-item:hover .configFile-label,.configFile-list .configFile-item.active .configFile-label{color:var(--menu-devicelist-item-hover-text)}.configFile-list .configFile-item:hover .configFile-name,.configFile-list .configFile-item.active .configFile-name{color:var(--menu-devicelist-item-hover-text)}.configFile-list .configFile-item:hover .configFile-desc,.configFile-list .configFile-item.active .configFile-desc{color:var(--menu-devicelist-item-hover-text)}.configFile-list .configFile-item .configFile-id{margin-right:12px;min-width:40px}.configFile-list .configFile-item .configFile-label{margin-right:12px}.configFile-list .configFile-item .configFile-desc{font-size:13px;opacity:.8}.configFile-list .configFile-item.es68Card.M1 .configFile-id{color:#ff5019}.configFile-list .configFile-item.es68Card.M1:hover,.configFile-list .configFile-item.es68Card.M1.active{background:#ff5019}.configFile-list .configFile-item.es68Card.M2 .configFile-id{color:#00bc78}.configFile-list .configFile-item.es68Card.M2:hover,.configFile-list .configFile-item.es68Card.M2.active{background:#00bc78}.configFile-list .configFile-item.es68Card.M3 .configFile-id{color:#fc3049}.configFile-list .configFile-item.es68Card.M3:hover,.configFile-list .configFile-item.es68Card.M3.active{background:#fc3049}.configFile-list .configFile-item.es68Card.M4 .configFile-id{color:#dd25b5}.configFile-list .configFile-item.es68Card.M4:hover,.configFile-list .configFile-item.es68Card.M4.active{background:#dd25b5}.configFile-list .configFile-item.es68Card.M1:hover .configFile-id,.configFile-list .configFile-item.es68Card.M1:hover .configFile-label,.configFile-list .configFile-item.es68Card.M1:hover .configFile-name,.configFile-list .configFile-item.es68Card.M1:hover .configFile-desc,.configFile-list .configFile-item.es68Card.M1.active .configFile-id,.configFile-list .configFile-item.es68Card.M1.active .configFile-label,.configFile-list .configFile-item.es68Card.M1.active .configFile-name,.configFile-list .configFile-item.es68Card.M1.active .configFile-desc,.configFile-list .configFile-item.es68Card.M2:hover .configFile-id,.configFile-list .configFile-item.es68Card.M2:hover .configFile-label,.configFile-list .configFile-item.es68Card.M2:hover .configFile-name,.configFile-list .configFile-item.es68Card.M2:hover .configFile-desc,.configFile-list .configFile-item.es68Card.M2.active .configFile-id,.configFile-list .configFile-item.es68Card.M2.active .configFile-label,.configFile-list .configFile-item.es68Card.M2.active .configFile-name,.configFile-list .configFile-item.es68Card.M2.active .configFile-desc,.configFile-list .configFile-item.es68Card.M3:hover .configFile-id,.configFile-list .configFile-item.es68Card.M3:hover .configFile-label,.configFile-list .configFile-item.es68Card.M3:hover .configFile-name,.configFile-list .configFile-item.es68Card.M3:hover .configFile-desc,.configFile-list .configFile-item.es68Card.M3.active .configFile-id,.configFile-list .configFile-item.es68Card.M3.active .configFile-label,.configFile-list .configFile-item.es68Card.M3.active .configFile-name,.configFile-list .configFile-item.es68Card.M3.active .configFile-desc,.configFile-list .configFile-item.es68Card.M4:hover .configFile-id,.configFile-list .configFile-item.es68Card.M4:hover .configFile-label,.configFile-list .configFile-item.es68Card.M4:hover .configFile-name,.configFile-list .configFile-item.es68Card.M4:hover .configFile-desc,.configFile-list .configFile-item.es68Card.M4.active .configFile-id,.configFile-list .configFile-item.es68Card.M4.active .configFile-label,.configFile-list .configFile-item.es68Card.M4.active .configFile-name,.configFile-list .configFile-item.es68Card.M4.active .configFile-desc{color:#fff}
.device-status{width:100%;height:170px;border-radius:16px;position:relative;overflow:hidden;padding:4px 0 28px 0;box-shadow:var(--devicestatus-shadow)}.device-status .device-status-bg-image{position:absolute;inset:0;z-index:0;background-size:auto 62px;background-position:center 24px;background-repeat:no-repeat;pointer-events:none}.device-status::before{content:"";position:absolute;inset:0;z-index:1;background:var(--devicestatus-bg);backdrop-filter:blur(12px) saturate(1.12);-webkit-backdrop-filter:blur(8px) saturate(1.12)}.device-status::after{content:"";position:absolute;inset:0;z-index:3;padding:1px;border-radius:16px;background:var(--devicestatus-stroke-gradient);-webkit-mask:linear-gradient(#fff, #fff) content-box,linear-gradient(#fff, #fff);-webkit-mask-composite:xor;mask:linear-gradient(#fff, #fff) content-box,linear-gradient(#fff, #fff);mask-composite:exclude;pointer-events:none}.device-status .device-status-inner{width:100%;display:block;position:relative;z-index:2}.device-status .device-status-placeholder{width:100%;min-height:96px;display:flex;align-items:center;justify-content:center;color:var(--text-primary);font-size:14px}.device-status .device-status-overlay{width:100%;height:100%;position:absolute;left:0;top:0;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s;z-index:2;pointer-events:none}.device-status .device-status-overlay::before{content:"";position:absolute;width:100%;height:100%;background:var(--devicestatus-overlay-mask-bg);left:0;top:0;z-index:1}.device-status .device-status-overlay .device-list-btn{display:flex;align-items:center;justify-content:center;color:#1e2023;font-size:12px;padding:8px 16px;background:var(--devicestatus-overlay-button-bg);border-radius:20px;position:relative;z-index:2;cursor:pointer;border:none;pointer-events:auto}.device-status .device-status-overlay .device-list-btn .device-status-devicelist{font-size:14px;font-weight:500;color:#1e2023}.device-status:hover .device-status-overlay{opacity:1}.card-container{display:flex;justify-content:center;align-items:center;height:100%}.device-status-card{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.device-status-card .devicestatus-image-container{width:100%;height:100px;display:flex;align-items:center;justify-content:center;margin:0;position:relative}.device-status-card .devicestatus-image-container .devicestatus-image{max-width:68%;max-height:68%;object-fit:contain;transition:transform .3s ease;position:absolute}.device-status-card .devicestatus-image-container .devicestatus-image-placeholder{width:100px;height:60px;background-color:rgba(0,0,0,.05);border-radius:8px}.device-status-card .devicestatus-name{width:100%;text-align:center;font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}.device-status-card .devicestatus-meta{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.device-status-card .devicestatus-meta .battery-status{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary)}.device-status-card .devicestatus-meta .battery-status .iconfont{font-size:14px}.device-status-card .devicestatus-meta .connection-status{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary)}.device-status-card .devicestatus-meta .connection-status .status-icon,.device-status-card .devicestatus-meta .connection-status .iconfont{font-size:14px}.device-status-card .devicestatus-meta .connection-status .connection-text{white-space:nowrap}.device-status.device-status--sidebar-collapsed{width:44px;height:44px;min-height:0;padding:0;align-self:flex-start;margin-left:0;margin-right:0;margin-bottom:0;border-radius:8px;box-shadow:none;overflow:visible}.device-status.device-status--sidebar-collapsed::before,.device-status.device-status--sidebar-collapsed::after{display:none}.device-status.device-status--sidebar-collapsed .device-status-pop-anchor{position:relative;width:44px;height:44px}.device-status.device-status--sidebar-collapsed .device-status-collapsed-thumb{width:44px;height:44px;border-radius:8px;border:none;background:rgba(0,0,0,0);padding:0 12px;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}.device-status.device-status--sidebar-collapsed .device-status-collapsed-thumb .iconfont{font-size:20px}.device-status.device-status--sidebar-collapsed .device-status-collapsed-thumb:hover{transform:scale(1.15);background-color:var(--bg-tertiary)}.device-status.device-status--sidebar-collapsed .device-status-collapsed-thumb .device-status-collapsed-type-icon{color:var(--menu-list-child-icon)}.device-status.device-status--sidebar-collapsed .device-status-collapsed-thumb .device-status-collapsed-type-icon .iconfont{font-size:24px}.device-status.device-status--sidebar-collapsed .device-status-collapsed-thumb .device-status-collapsed-empty{font-size:12px;color:var(--text-tertiary)}.device-status.device-status--sidebar-collapsed .device-status-hover-panel{position:absolute;left:calc(100% + 12px - 15px);top:0;z-index:100003;width:184px;height:170px;padding:4px 0 28px 0;box-sizing:border-box;border-radius:16px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;box-shadow:0 8px 28px rgba(0,0,0,.14);border:1px solid var(--line-color, rgba(0, 0, 0, 0.08))}.device-status.device-status--sidebar-collapsed .device-status-hover-panel::before{content:"";position:absolute;inset:0;z-index:1;background:var(--devicestatus-bg);backdrop-filter:blur(12px) saturate(1.12);-webkit-backdrop-filter:blur(8px) saturate(1.12)}.device-status.device-status--sidebar-collapsed .device-status-hover-panel::after{content:"";position:absolute;inset:0;z-index:3;padding:1px;border-radius:16px;background:var(--devicestatus-stroke-gradient);-webkit-mask:linear-gradient(#fff, #fff) content-box,linear-gradient(#fff, #fff);-webkit-mask-composite:xor;mask:linear-gradient(#fff, #fff) content-box,linear-gradient(#fff, #fff);mask-composite:exclude;pointer-events:none}.device-status.device-status--sidebar-collapsed .device-status-hover-panel .device-status-bg-image{z-index:0}.device-status.device-status--sidebar-collapsed .device-status-hover-panel .device-status-inner--popover{position:relative;z-index:2;padding:0;height:100%;min-height:0;box-sizing:border-box}.device-status.device-status--sidebar-collapsed .device-status-hover-panel .device-status-overlay{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .3s;z-index:2;pointer-events:none}.device-status.device-status--sidebar-collapsed .device-status-hover-panel .device-status-overlay::before{display:block}.device-status.device-status--sidebar-collapsed .device-status-hover-panel .device-status-overlay .device-list-btn{pointer-events:auto;flex-wrap:nowrap;white-space:nowrap}.device-status.device-status--sidebar-collapsed .device-status-hover-panel:hover .device-status-overlay{opacity:1}.device-status.device-status--sidebar-collapsed .device-status-pop-anchor:hover .device-status-hover-panel,.device-status.device-status--sidebar-collapsed .device-status-hover-panel:hover{opacity:1;visibility:visible;pointer-events:auto}
/* Input with Arrows */
.main-inputWithArrows_TTfFP {
  display: flex;
  align-items: stretch;
  width: fit-content;
  border: 1px solid var(--number-input-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.main-inputContainer_n4k5H {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0 16px;
  height: 34px;
  transition: background 0.2s ease;
}

.main-configInput_PJ0kD {
  width: 32px;
  height: 34px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
  user-select: text;
  -webkit-user-select: text;
}

.main-configInput_PJ0kD:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.main-inputUnit_vsq8E {
  font-size: 14px;
  color: var(--text-secondary);
  margin-left: 4px;
  white-space: nowrap;
}

/* Arrow Buttons */
.main-arrowButtons_e0_XR {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--number-input-border);
  background: transparent;
  height: 36px;
}

.main-arrowBtn_bYc_9 {
  flex: 1;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: none;
  color: var(--number-input-arrow);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin-right: 0;
  &:hover {
    color: var(--primary-color);
  }
}

.main-arrowBtn_bYc_9:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.main-arrowBtn_bYc_9 svg {
  width: 12px;
  height: 8px;
}

.main-wrap_EWTrH {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-height: 100%;
}

.main-canvasWrap_nbbMO {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  user-select: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.main-canvas_gh1Ox {
  display: block;
  /* 宽高由 JS 按容器与 MAX_DISPLAY_HEIGHT 等比缩放，避免按位图像素撑开布局 */
  border-radius: 8px;
  margin: 0;
}

.main-toolbar_B0Zhr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.main-wrapper_HkI4p {
  position: relative;
  width: 100%;
  height: 48px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color, #D3D5D6);
  border-radius: 12px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 12px;
}

.main-wrapper_HkI4p:focus-within {
  border-color: var(--input-focus-border, #1E2023) !important;
  background: transparent;
}

.main-wrapper_HkI4p.main-error_yxrUP {
  border-color: var(--error-color, #f44336) !important;
}

.main-wrapper_HkI4p.main-error_yxrUP:focus-within {
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1) !important;
}

.main-wrapper_HkI4p.main-disabled_LksHQ {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-disabled);
}

.main-inputWrap_mc4kq {
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.main-affixPrefix_lqwfr {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  padding-right: 6px;
  height: 100%;
}

.main-affixSuffix_gy9KP {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  padding-left: 6px;
  height: 100%;
}

.main-input_mvTi7 {
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  border-radius: 12px;
  box-sizing: border-box;
}

.main-input_mvTi7::placeholder {
  color: var(--text-tertiary);
}

.main-input_mvTi7:disabled {
  cursor: not-allowed;
  color: var(--text-disabled);
}

.main-count_RLRNP {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-tertiary);
  pointer-events: none;
  white-space: nowrap;
}

.shared-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.shared-modal-mask-enter {
  animation: shared-modal-fade-in 0.3s ease-out;
}

.shared-modal-mask-exit {
  animation: shared-modal-fade-out 0.3s ease-out;
}

@keyframes shared-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shared-modal-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.shared-modal-container {
  position: relative;
  background: var(--modal-bg-color, #fff);
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.shared-modal-container-enter {
  animation: shared-modal-zoom-in 0.3s ease-out;
}

.shared-modal-container-exit {
  animation: shared-modal-zoom-out 0.3s ease-out;
}

@keyframes shared-modal-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shared-modal-zoom-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

.shared-modal-header {
  position: relative;
  padding: 20px 24px;
}

.shared-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--modal-title-text-color, #333);
}

.shared-modal-close {
  position: absolute;
  top: 16px;
  right: 12px;
  width: auto !important;
  height: auto !important;
  border: none;
  background: transparent !important;
  color: var(--text-primary);
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shared-modal-close-icon {
  font-size: 20px;
  line-height: 1;
}

.shared-modal-close:hover {
  opacity: 1;
  background: none !important;
}

.shared-modal-body {
  padding: 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
}

.shared-modal-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.shared-modal-btn-cancel,
.shared-modal-btn-ok {
  padding: 8px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.shared-modal-btn-cancel {
  background: var(--modal-button-cancel-bg-color, #f5f5f5);
  color: var(--modal-button-cancel-text-color, #333);
}

.shared-modal-btn-cancel:hover {
  opacity: 0.8;
}

.shared-modal-btn-ok {
  background: var(--btn-primary-bg, #FF5019);
  color: var(--btn-primary-text, #ffffff);
  &:hover {
    background: var(--btn-primary-bg-hover, #FF5019);
    color: var(--btn-primary-text-hover, #ffffff);
  }
}

.shared-modal-btn-ok:hover {
  opacity: 0.8;
}
.firmware-update-modal{padding:0;color:var(--text-primary);margin-top:-24px}.firmware-update-modal .firmware-update-warning{display:flex;gap:10px;padding:10px 16px;margin-bottom:32px;border-radius:8px;background:rgba(255,80,25,.09);border:1px solid var(--primary-color);font-size:14px;color:var(--text-primary);line-height:1;align-items:center}.firmware-update-modal .firmware-update-warning .firmware-update-warning-icon{font-size:20px;color:var(--primary-color);flex-shrink:0}.firmware-update-modal .firmware-update-warning .firmware-update-warning-text{font-size:14px;color:var(--text-primary)}.firmware-update-modal .firmware-current-version{margin:0 0 16px;font-size:14px;font-weight:500;color:var(--text-primary)}.firmware-update-modal .firmware-new-version-card{padding:16px 18px;margin-bottom:48px;border-radius:8px;background:var(--bg-tertiary)}.firmware-update-modal .firmware-new-version-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:14px;font-weight:500}.firmware-update-modal .firmware-new-version-title{color:var(--text-primary);flex:1;min-width:0}.firmware-update-modal .firmware-new-version-meta{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap}.firmware-update-modal .firmware-new-version-number{font-weight:600;color:var(--text-primary)}.firmware-update-modal .latest-badge{font-size:11px;padding:2px 8px;background:rgba(0,255,129,.09);color:#00c96d;border-radius:4px;font-weight:500}.firmware-update-modal .current-badge{font-size:11px;padding:2px 8px;background:rgba(255,80,25,.09);color:var(--primary-color);border-radius:4px;font-weight:500}.firmware-update-modal .firmware-new-version-notes{margin:0;padding-left:18px}.firmware-update-modal .firmware-new-version-notes li{font-size:14px;line-height:1;color:var(--text-secondary);margin-bottom:12px}.firmware-update-modal .firmware-new-version-notes li::marker{font-size:8px;color:var(--text-secondary)}.firmware-update-modal .firmware-update-actions{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;gap:14px}.firmware-update-modal .firmware-update-actions .install-btn{padding:10px 24px;height:36px;min-width:auto;background:var(--other-button-install-bg) !important;border:1px solid rgba(0,0,0,0) !important;border-radius:8px !important;color:var(--other-button-install-text) !important;font-size:14px !important;font-weight:500;cursor:pointer;transition:all .2s}.firmware-update-modal .firmware-update-actions .install-btn:hover:not(:disabled){background:var(--primary-hover) !important;color:#fff !important;opacity:1 !important;transform:none !important}.firmware-update-modal .firmware-update-actions .install-btn:disabled{background:rgba(60,60,60,.8) !important;color:hsla(0,0%,100%,.4) !important;cursor:not-allowed}.firmware-update-modal .progress-container{width:100%}.firmware-update-modal .progress-bar{width:100%;height:6px;border-radius:8px;overflow:hidden;background:var(--line-color);margin-bottom:10px}.firmware-update-modal .progress-fill{display:block;height:100%;max-width:100%;border-radius:999px;background:var(--text-primary);transition:none}.firmware-update-modal .progress-text{text-align:center;font-size:16px;color:var(--text-primary);font-weight:500}.firmware-update-modal .success-icon{width:64px;height:64px;background:#4caf50;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;color:#fff;animation:firmwareUpdateScaleIn .3s ease}.firmware-update-modal .error-message{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:8px;background:rgba(244,67,54,.1);color:#f44336;font-size:13px}.firmware-update-modal .error-message .error-icon{font-size:18px}@keyframes firmwareUpdateScaleIn{from{transform:scale(0)}to{transform:scale(1)}}
.community-preview-stage{position:relative;flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:rgba(0,0,0,0);border:none}.community-preview-stage__content{position:relative;flex:1;min-height:0;width:100%;display:flex;flex-direction:column;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;pointer-events:auto;user-select:none;cursor:default}.community-preview-stage__content::-webkit-scrollbar{display:none}.community-preview-stage__content input,.community-preview-stage__content button,.community-preview-stage__content select,.community-preview-stage__content textarea,.community-preview-stage__content a,.community-preview-stage__content label,.community-preview-stage__content [role=button],.community-preview-stage__content [role=tab],.community-preview-stage__content [role=slider],.community-preview-stage__content [role=switch],.community-preview-stage__content [role=radio],.community-preview-stage__content [role=checkbox],.community-preview-stage__content .el-slider-box,.community-preview-stage__content .switch,.community-preview-stage__content .shared-keyboard-key,.community-preview-stage__content .kb-buttonGroup_OJWJa,.community-preview-stage__content .palette-el-saturation-hueSlider-presetColors,.community-preview-stage__content .paletteConfig,.community-preview-stage__content .direction-control,.community-preview-stage__content .mode-list-item,.community-preview-stage__content .advancedKey-list-item .operation,.community-preview-stage__content .card-title-block,.community-preview-stage__content .icon-btn{pointer-events:none !important;cursor:default !important}.community-preview-stage__content .palette-sc-presetColor:hover,.community-preview-stage__content .palette-sc-presetColor:active,.community-preview-stage__content .paletteConfig-item:hover,.community-preview-stage__content .paletteConfig-item:active{transform:none !important}[data-theme=dark] .community-preview-stage{background:rgba(0,0,0,0);border:none}.community-preview-scroll{pointer-events:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.community-preview-stage__content:has(>.community-mouse-changekey-preview),.community-preview-stage__content:has(>.community-mouse-trigger-preview){overflow:hidden}.community-preview-stage__content .community-kb-lighting-preview .lighting-main,.community-preview-stage__content .community-kb-lighting-preview .formSection-box,.community-preview-stage__content .community-kb-trigger-preview .trigger-main,.community-preview-stage__content .community-kb-trigger-preview .formSection-box,.community-preview-stage__content .community-kb-advanced-preview .setting-mode-list,.community-preview-stage__content .community-kb-advanced-preview .setting-advancedKey-list,.community-preview-stage__content .community-kb-advanced-preview .setting-after-container--readonly,.community-preview-stage__content .community-mouse-dpi-preview .dpi-grid,.community-preview-stage__content .community-mouse-parameter-preview .mouse-setting-content,.community-preview-stage__content .community-mouse-performance-preview .performance-right,.community-preview-stage__content .community-mouse-lighting-preview .lighting-content{pointer-events:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.community-preview-stage__content .community-kb-trigger-preview .trigger-main .triggerOperation,.community-preview-stage__content .community-kb-trigger-preview .trigger-main .triggerOperation *,.community-preview-stage__content .community-kb-trigger-preview .trigger-main .lightingOperation,.community-preview-stage__content .community-kb-trigger-preview .trigger-main .lightingOperation *,.community-preview-stage__content .community-kb-lighting-preview .lighting-main .triggerOperation,.community-preview-stage__content .community-kb-lighting-preview .lighting-main .triggerOperation *,.community-preview-stage__content .community-kb-lighting-preview .lighting-main .lightingOperation,.community-preview-stage__content .community-kb-lighting-preview .lighting-main .lightingOperation *{pointer-events:none !important;cursor:default !important}.community-preview-stage__content .community-kb-trigger-preview .trigger-main .triggerOperation,.community-preview-stage__content .community-kb-trigger-preview .trigger-main .lightingOperation .formSection-box,.community-preview-stage__content .community-kb-lighting-preview .lighting-main .triggerOperation,.community-preview-stage__content .community-kb-lighting-preview .lighting-main .lightingOperation .formSection-box{pointer-events:auto !important}.community-preview-interactive{pointer-events:auto}.community-preview-interactive button,.community-preview-interactive [role=button],.community-preview-interactive [role=tab],.community-preview-interactive .button-label,.community-preview-interactive .layer-btn,.community-preview-interactive .tab{pointer-events:auto !important;cursor:pointer !important}.community-preview-stage__content .community-mouse-dpi-preview .card-title-block{pointer-events:auto !important;cursor:pointer !important}.community-preview-stage__content .palette-el-rgb-hex-tab{pointer-events:auto}.community-preview-stage__content .palette-el-rgb-hex-tab span{pointer-events:auto !important;cursor:pointer !important}.community-preview-stage__content .palette-el-hex-group input,.community-preview-stage__content .palette-el-rgb-group input{pointer-events:none !important;cursor:default !important}.community-preview-stage__content .community-kb-advanced-preview .advancedKey-main.community-preview-interactive .advancedKey-list-item,.community-preview-stage__content .community-kb-advanced-preview .advancedKey-main.community-preview-interactive .advancedKey-list-item .operation,.community-preview-stage__content .community-kb-advanced-preview .advancedKey-main.community-preview-interactive .advancedKey-list-item .operation .btns{pointer-events:auto !important;cursor:pointer !important}.community-preview-stage__content .community-kb-advanced-preview .advancedKey-main.community-preview-interactive .setting-after-container--readonly .header-left-back{pointer-events:auto !important;cursor:pointer !important}.community-preview-stage__content .community-kb-trigger-preview .trigger-keyboard.community-preview-interactive .shared-keyboard-key{pointer-events:auto !important;cursor:pointer !important}.community-preview-stage__content .community-kb-trigger-preview .trigger-main .eweadn-tooltip-trigger,.community-preview-stage__content .community-kb-trigger-preview .trigger-main .eweadn-tooltip-trigger *,.community-preview-stage__content .community-kb-lighting-preview .lighting-main .eweadn-tooltip-trigger,.community-preview-stage__content .community-kb-lighting-preview .lighting-main .eweadn-tooltip-trigger *{pointer-events:auto !important}body:has(.community-config-preview-overlay) [data-eweadn-tooltip-portal]{z-index:1500 !important}
.lighting{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.lighting .lighting-keyboard{width:100%;flex:1;min-height:250px;display:flex;align-items:stretch;position:relative;padding:16px 0;overflow:hidden}.lighting .lighting-keyboard .selection-box{z-index:20}.lighting .lighting-keyboard .shared-keyboard-fit-root{flex:1 1 0;min-height:0;width:100%;height:100%}.lighting .lighting-keyboard .lighting-keyboard-display{flex:1 1 auto;min-width:0;width:100%;height:100%;align-self:stretch;display:flex;justify-content:center;align-items:stretch;position:relative}.lighting .lighting-keyboard .lighting-keyboard-with-actions{display:flex;flex-direction:row;align-items:center;gap:24px;height:100%}.lighting .lighting-keyboard .lighting-keyboard-with-actions .lighting-keyboard-display{flex:1 1 auto;min-width:0;min-height:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.lighting .lighting-keyboard .lighting-keyboard-with-actions .lighting-keyboard-display .shared-keyboard-box,.lighting .lighting-keyboard .lighting-keyboard-with-actions .lighting-keyboard-display .shared-keyboard-selection-root{width:100%;height:100%;min-height:100%}.lighting .lighting-keyboard .lighting-select-box{flex:0 0 120px;width:120px;align-self:center;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto;user-select:none}.lighting .lighting-keyboard .lighting-select-box .popconfirm-trigger{display:block;width:100%;margin-top:20px}.lighting .lighting-keyboard .lighting-select-box button{width:100%;height:40px;border:none;background:var(--bg-secondary);border:1px solid rgba(0,0,0,0);color:var(--text-primary);outline:none;cursor:pointer;border-radius:20px;transition:background .2s ease}.lighting .lighting-keyboard .lighting-select-box button:hover:not(:disabled){background:var(--primary-color);color:#fff}.lighting .lighting-keyboard .lighting-select-box button:disabled{opacity:.45;cursor:not-allowed}.lighting .lighting-keyboard .lighting-select-box button.active{background:var(--primary-color);color:#fff}.lighting .lighting-keyboard .lighting-light-strip-display{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.lighting .lighting-keyboard .lighting-light-strip-display .decorative-light{pointer-events:auto}.lighting .lighting-keyboard .music-rhythm-tip{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:9;min-height:52px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border:1px solid #4a6cff;background:#f8faff;box-shadow:0 2px 8px rgba(39,85,255,.2),inset 0 0 0 1px rgba(100,134,255,.1)}.lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-content{display:flex;align-items:center;min-width:0}.lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-icon{color:#3f67ff;font-size:20px;margin-right:10px;flex-shrink:0}.lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-text{color:#2a2a2a;font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-actions{display:flex;align-items:center;justify-content:center;margin-left:12px;flex-shrink:0}.lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-confirm{width:40px;height:24px;border:0;border-radius:10px;background:#3f67ff;color:#fff;font-size:14px;cursor:pointer;display:flex;justify-content:center;align-items:center;margin:0}.lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-close{width:10px;height:10px;border:0;background:rgba(0,0,0,0);color:#2f2f2f;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;margin:0;padding:0;margin-left:16px}[data-theme=dark] .lighting .lighting-keyboard .music-rhythm-tip,.dark .lighting .lighting-keyboard .music-rhythm-tip{border-color:#3e5dff;background:rgba(11,18,44,.92);box-shadow:0 0 16px rgba(35,91,255,.5),inset 0 0 0 1px rgba(73,124,255,.55)}[data-theme=dark] .lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-icon,.dark .lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-icon{color:#4f79ff}[data-theme=dark] .lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-text,.dark .lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-text{color:#fff}[data-theme=dark] .lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-confirm,.dark .lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-confirm{background:#4268ff}[data-theme=dark] .lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-close,.dark .lighting .lighting-keyboard .music-rhythm-tip .music-rhythm-tip-close{color:#fff}.lighting .lighting-tab{flex-shrink:0;width:270px;margin:10px 0 16px}.lighting .lighting-tab.lighting-tab--gif{width:400px}.lighting .lighting-tab.lighting-tab-one{width:135px}.lighting .lighting-tab .kb-tabs_wacUd{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.lighting .lighting-tab .kb-tabs_wacUd .kb-tabContent_xbQVE{width:100%;height:0px;overflow:hidden}.lighting .lighting-main{width:100%;height:50%;flex-shrink:0;background:var(--lighting-operation-bg);padding:24px 32px 32px;border-radius:24px}
.triggerOperation{width:100%;height:100%;display:flex}.triggerOperation .triggerOperation-item{width:33.3333333333%;height:100%}.triggerOperation .triggerOperation-item .routineGifMusic{width:100%;height:100%;display:flex;flex-direction:column;border-right:1px solid var(--line-color);padding:0}.triggerOperation .triggerOperation-item .routineGifMusic .title{width:100%;height:25px;margin-bottom:15px;color:var(--text-against-primary);display:flex;justify-content:space-between;flex-shrink:0}.triggerOperation .triggerOperation-item .routineGifMusic .title .deadZone-title{display:flex;align-items:center}.triggerOperation .triggerOperation-item .routineGifMusic .title .label{font-size:18px;font-weight:bold}.triggerOperation .triggerOperation-item .routineGifMusic .title .label.disabled{opacity:.6;cursor:not-allowed}.triggerOperation .triggerOperation-item .routineGifMusic .title .deadZone-info-icon{color:var(--text-quaternary);margin-left:8px;cursor:pointer;font-size:15px}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main{flex:1;display:flex;flex-direction:column;overflow:visible;container-type:inline-size;container-name:trigger-slider-panel}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .direction-control .kb-button_WH4Ym{margin-right:8px}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisTips{width:100%;color:var(--text-body-color);flex-shrink:0}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisNote{width:100%;text-align:center;color:var(--text-caption-color);font-size:14px;margin-top:15px;flex-shrink:0}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting{width:100%;display:flex;align-items:center;flex:1}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect{width:60%;display:flex;flex-direction:column}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect .title{align-items:center}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect .keyAxisImage{width:100%;display:flex;justify-content:center}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect .keyAxisImage img{width:136px;max-height:129px;object-fit:cover;user-select:none;pointer-events:none;-webkit-user-drag:none}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect .keyAxisImage .keyAxisImage-box{width:135px;height:158px;position:relative}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect .keyAxisImage .keyAxisImage-box .keyAxisImage-01{width:135px;height:80px;position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:1;user-select:none;pointer-events:none;-webkit-user-drag:none}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect .keyAxisImage .keyAxisImage-box .keyAxisImage-02{width:65px;height:85px;position:absolute;left:50%;transform:translateX(-50%);bottom:52px;z-index:2;overflow:hidden}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect .keyAxisImage .keyAxisImage-box .keyAxisImage-02 img{width:100%;height:100%;transition:transform .1s ease-out;user-select:none;pointer-events:none;-webkit-user-drag:none}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSelect .keyAxisImage .keyAxisImage-box .keyAxisImage-03{width:134px;height:104px;position:absolute;left:50%;transform:translateX(-50%);bottom:0px;z-index:3;user-select:none;pointer-events:none;-webkit-user-drag:none}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .keyAxisSelectSetting .keyAxisSetting{width:40%;display:flex;justify-content:center;padding:20px 0px 0 20px}.triggerOperation .triggerOperation-item .routineGifMusic .routineGifMusic-main .trigger-furious-item{margin-top:15px}.triggerOperation .triggerOperation-item .routineGifMusic .rt-description{font-size:.875rem;color:var(--text-body-color);line-height:1.6;margin-bottom:20px}.triggerOperation .triggerOperation-item .routineGifMusic .triggerFast{width:100%;display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:22px;margin-bottom:20px}.triggerOperation .triggerOperation-item .routineGifMusic .triggerFast .triggerFast-item{flex:1 1 calc(50% - 10px);min-width:180px;max-width:100%;flex-shrink:0}.triggerOperation .triggerOperation-item .routineGifMusic .triggerFast .triggerFast-item .text{font-size:14px;color:var(--text-primary);margin-bottom:12px}.triggerOperation .triggerOperation-item .routineGifMusic .triggerFast .triggerFast-item-release{--primary-color: #FEBF01}.triggerOperation .triggerOperation-item .routineGifMusic .triggerFast.triggerFastWrap{flex-direction:column;flex-wrap:nowrap;gap:12px}.triggerOperation .triggerOperation-item .routineGifMusic .triggerFast.triggerFastWrap .triggerFast-item{width:100%;flex:0 0 auto;min-width:0;margin-bottom:0}.triggerOperation .triggerOperation-item .routineGifMusic .kb-container_zbYDT{width:100% !important}.triggerOperation .triggerOperation-item .routineGifMusic .itinerary-item{width:100%;padding:0 30px}.triggerOperation .triggerOperation-item:not(:first-child):not(:last-child) .routineGifMusic .title,.triggerOperation .triggerOperation-item:not(:first-child):not(:last-child) .routineGifMusic .routineGifMusic-main{padding:0 20px}.triggerOperation .triggerOperation-item:last-child .routineGifMusic{border-right:none}.triggerOperation .triggerOperation-item:last-child .routineGifMusic .title,.triggerOperation .triggerOperation-item:last-child .routineGifMusic .routineGifMusic-main{padding:0 20px}@container trigger-slider-panel (max-width: 680px){.triggerFast:not(.triggerFastWrap){flex-direction:column;flex-wrap:nowrap;gap:12px}.triggerFast:not(.triggerFastWrap) .triggerFast-item{width:100%;flex:0 0 auto;min-width:0}}
.trigger-page{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 !important}.trigger-page .trigger-keyboard{width:100%;flex:1;min-height:250px;display:flex;align-items:stretch;padding:16px 0}.trigger-page .trigger-keyboard .shared-keyboard-fit-root{flex:1 1 0;min-height:0;width:100%;height:100%}.trigger-page .trigger-keyboard .trigger-keyboard-with-actions{display:flex;flex-direction:row;align-items:center;gap:24px;height:100%}.trigger-page .trigger-keyboard .trigger-keyboard-display{flex:1 1 auto;min-width:0;min-height:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.trigger-page .trigger-keyboard .trigger-keyboard-display .shared-keyboard-box,.trigger-page .trigger-keyboard .trigger-keyboard-display .shared-keyboard-selection-root{width:100%;height:100%;min-height:100%}.trigger-page .trigger-keyboard .trigger-keyboard-teampreset{display:flex;flex-direction:row;align-items:stretch;width:100%;height:100%}.trigger-page .trigger-keyboard .trigger-keyboard-teampreset .trigger-keyboard-display{flex:1 1 auto;min-width:0;width:100%;height:100%;align-self:stretch;align-items:stretch}.trigger-page .trigger-keyboard .trigger-select-box{flex:0 0 120px;width:120px;align-self:center;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto;user-select:none}.trigger-page .trigger-keyboard .trigger-select-box button{width:100%;height:40px;border:none;background:var(--bg-secondary);border:1px solid rgba(0,0,0,0);color:var(--text-primary);outline:none;cursor:pointer;border-radius:20px;transition:background .2s ease}.trigger-page .trigger-keyboard .trigger-select-box button:hover:not(.active){opacity:.8}.trigger-page .trigger-keyboard .trigger-select-box button.active{background:var(--primary-color);color:#fff}.trigger-page .trigger-keyboard .trigger-select-box button.btn-default{margin-top:32px}.trigger-page .trigger-tab{width:395px !important;margin-top:10px;flex-shrink:0}.trigger-page .trigger-tab .kb-tabs_wacUd{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.trigger-page .trigger-tab .kb-tabs_wacUd .kb-tabList_Y2Ud9{margin-bottom:0px}.trigger-page .trigger-tab .kb-tabs_wacUd .kb-tabContent_xbQVE{width:100%;height:0px;overflow:hidden}.trigger-page .trigger-main{width:100%;height:50%;flex-shrink:0;background:var(--taigger-bg);border-radius:24px;padding:24px 32px 32px;margin-top:16px}.trigger-page .trigger-main.teampreset{padding:0;background:none;border-radius:0}
.change-key-page{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.remapping-panel{height:50%;flex-shrink:0;margin-top:16px;box-sizing:border-box}.remapping-panel .keyboard-layout-selector-content{align-items:flex-start}.remapping-panel .key-remapping-panel{margin-top:0;padding:24px 32px 32px}.remapping-panel .key-remapping-panel .key-remapping-header .key-remapping-title{font-weight:bold}.layout-content{width:100%;flex:1;min-height:250px;display:flex;padding:16px 0}.keyboard-with-layers{display:flex;flex-direction:row;align-items:center;gap:24px}.keyboard-display{flex:1 1 auto;min-width:0;display:flex;justify-content:center;align-items:center;position:relative}.layer-switcher{flex:0 0 auto;width:120px;display:flex;flex-direction:column;align-items:center;gap:12px}.layer-btn{width:100%;height:40px;padding:0;border:none;background:var(--bg-secondary);border:1px solid rgba(0,0,0,0);color:var(--text-primary);outline:none;cursor:pointer;border-radius:20px;margin:0;transition:background .2s ease}.layer-btn:hover:not(:disabled):not(.active){opacity:.8}.layer-btn.active{background:var(--primary-color);color:#fff}.layer-btn:disabled{opacity:.5;cursor:not-allowed}.layer-btn:nth-last-child(2){margin-bottom:32px}.reset-btn{width:120px;margin-right:0}.reset-btn:hover:not(:disabled){opacity:.8}.connecting-state{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem}.connecting-state p{font-size:16px;margin:0;text-align:center;color:hsla(0,0%,100%,.7)}.error-state{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem}.error-state h2{font-size:24px;font-weight:bold;margin:0;color:#ff6b6b}.error-state p{font-size:16px;margin:0;text-align:center;color:hsla(0,0%,100%,.6);max-width:500px}.changeKeyPage-physicalButton{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.changeKeyPage-physicalButton .changeKey-tab{width:270px}.changeKeyPage-physicalButton .changeKey-main{width:100%;flex:1;min-height:0;display:flex;justify-content:center}.changeKeyPage-physicalButton.active .changeKey-main{height:100%}
.setting-before-container{width:100%;height:100%;display:flex;gap:12px;box-sizing:border-box}.setting-before-container .advance-setting-box{background:var(--bg-secondary);border-radius:16px;padding:24px;display:flex;flex-direction:column;box-sizing:border-box}.setting-before-container .advance-setting-box .advance-setting-box-header{font-size:16px;line-height:20px;color:var(--text-primary);margin-bottom:16px;font-weight:bold}.setting-before-container .advance-setting-box .advance-setting-box-header .configured-keys-count{color:var(--primary-color)}.setting-before-container .advance-setting-box.setting-before-mode{flex:4.5}.setting-before-container .advance-setting-box.setting-before-mode .setting-mode-list{width:100%;flex:1;min-height:0;overflow:hidden auto;scrollbar-width:none;display:grid;grid-template-columns:repeat(2, 1fr);gap:8px;align-content:start}.setting-before-container .advance-setting-box.setting-before-mode .setting-mode-list .mode-list-item{width:100%;height:96px;background:var(--advancedKey-list-item-bg);border-radius:8px;display:flex;align-items:center;padding:0 16px;transition:all .3s;cursor:pointer}.setting-before-container .advance-setting-box.setting-before-mode .setting-mode-list .mode-list-item .mode-icon{width:40px;height:40px;font-size:40px;color:var(--text-primary);display:flex;align-items:center;flex-shrink:0}.setting-before-container .advance-setting-box.setting-before-mode .setting-mode-list .mode-list-item .mode-label{flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-left:16px}.setting-before-container .advance-setting-box.setting-before-mode .setting-mode-list .mode-list-item .mode-label .mode-label-title{font-size:16px;line-height:20px;font-weight:bold;margin-bottom:8px}.setting-before-container .advance-setting-box.setting-before-mode .setting-mode-list .mode-list-item .mode-label .mode-label-desc{color:var(--advancedKey-min-tit);font-size:12px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all}.setting-before-container .advance-setting-box.setting-before-mode .setting-mode-list .mode-list-item:hover{background:var(--dpi-card-bg-hover)}.setting-before-container .advance-setting-box.setting-before-selected{flex:3}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list{width:100%;flex:1;min-height:0;overflow:hidden auto;padding-right:4px;display:flex;flex-direction:column;gap:8px}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item{width:100%;height:64px;background:var(--advancedKey-list-item-bg);border-radius:8px;display:flex;justify-content:space-between;align-items:center;transition:all .3s;padding:8px}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item .list-item-left{display:flex;align-items:center}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item .list-item-left .key-list{display:flex;flex-shrink:0;gap:8px}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item .list-item-left .mode-icon{width:40px;height:40px;font-size:40px;color:var(--text-primary);margin:0 16px;display:flex;align-items:center}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item .list-item-left .target-key-label{font-size:14px;color:var(--text-primary);white-space:nowrap}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item .operation{flex-shrink:0;display:flex}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item .operation .btns{margin:0 12px;cursor:pointer}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item .operation .btns .iconfont{font-size:20px}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item .operation .btns:hover{transform:scale(1.1);transition:all .3s}.setting-before-container .advance-setting-box.setting-before-selected .setting-advancedKey-list .advancedKey-list-item:hover{background:var(--dpi-card-bg-hover)}.setting-before-container.setting-before-container--no-key-test .advance-setting-box.setting-before-mode,.setting-before-container.setting-before-container--no-key-test .advance-setting-box.setting-before-selected{flex:1;min-width:0}.setting-before-container .advance-setting-box.setting-before-test{flex:2.5}.setting-before-container .advance-setting-box.setting-before-test .setting-test-list{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:12px}.setting-before-container .advance-setting-box.setting-before-test .setting-test-list .test-button-list{flex:1;min-height:0;background:var(--advancedKey-list-item-bg);border:1px solid var(--line-color);border-radius:8px;padding:12px;padding-right:0;box-sizing:border-box;display:flex;flex-direction:column;position:relative}.setting-before-container .advance-setting-box.setting-before-test .setting-test-list .test-button-list .test-button-list-header{font-size:14px;line-height:20px;margin-bottom:8px;color:var(--text-primary);opacity:.45}.setting-before-container .advance-setting-box.setting-before-test .setting-test-list .test-button-list .test-button-list-content{flex:1;min-height:0;overflow:hidden auto;display:flex;flex-wrap:wrap;gap:8px}.setting-before-container .advance-setting-box.setting-before-test .setting-test-list .test-button-list .test-button-list-content .advance-key-button.test-button{background:var(--scrollbar-thumb)}.setting-before-container .advance-setting-box.setting-before-test .setting-test-list .test-button-list .test-button-empty{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;flex-direction:column;align-items:center;justify-content:center}.setting-before-container .advance-setting-box.setting-before-test .setting-test-list .test-button-list .test-button-empty .empty-icon{width:56px;height:56px;background-image:var(--advancedKey-test-point-icon);background-size:100% 100%;background-repeat:no-repeat;background-position:center}.setting-before-container .advance-setting-box.setting-before-test .setting-test-list .test-button-list .test-button-empty .empty-text{margin-top:8px;font-size:14px;line-height:20px;color:var(--text-tertiary)}.setting-before-container .advance-key-button{width:48px;height:48px;background:var(--advancedKey-before-list-key-bg);border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;flex-shrink:0;color:var(--text-primary);text-align:center;word-break:break-all;overflow-wrap:break-word;line-height:1;padding:4px}.setting-before-container .advancedKey-list-item--preview{cursor:pointer}.setting-before-container .advancedKey-list-item--preview:hover{background:var(--dpi-card-bg-hover)}
.setting-after-container{width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box}.setting-after-container .setting-after-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding-bottom:16px}.setting-after-container .setting-after-header .setting-after-header-left{display:flex;align-items:center;gap:4px}.setting-after-container .setting-after-header .setting-after-header-left .header-left-back{display:flex;align-items:center;padding:6px 8px;border-radius:6px;transition:all .3s;cursor:pointer}.setting-after-container .setting-after-header .setting-after-header-left .header-left-back:hover{background:var(--screen-list-item-bg)}.setting-after-container .setting-after-header .setting-after-header-left .header-left-back span{font-size:18px;line-height:20px}.setting-after-container .setting-after-header .setting-after-header-left .header-left-mode{display:flex;align-items:center;gap:12px;color:var(--text-primary)}.setting-after-container .setting-after-header .setting-after-header-left .header-left-mode .header-left-mode-title{font-size:18px;font-weight:bold}.setting-after-container .setting-after-header .setting-after-header-left .header-left-mode .header-left-mode-desc{font-size:14px;opacity:.65}.setting-after-container .setting-after-header .setting-after-header-left .header-left-mode::before{content:"";width:1px;height:16px;background:var(--text-muted)}.setting-after-container .setting-after-header .setting-after-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.setting-after-container .setting-after-header .setting-after-header-right button{margin-right:0;padding:6px 20px}.setting-after-container .setting-after-header .setting-after-header-right .cancel-button{background:var(--scrollbar-thumb);color:var(--text-primary);transition:all .3s}.setting-after-container .setting-after-header .setting-after-header-right .cancel-button:hover{opacity:.8}.setting-after-container .setting-after-header .setting-after-header-right .confirm-button{background:var(--text-primary);color:var(--bg-secondary);transition:all .3s}.setting-after-container .setting-after-header .setting-after-header-right .confirm-button:hover{opacity:.8}.setting-after-container .setting-after-content{flex:1;display:flex;gap:12px;overflow:hidden}.setting-after-container .setting-after-content .advance-setting-box{flex:1;display:flex;flex-direction:column;box-sizing:border-box;background:var(--bg-secondary);backdrop-filter:blur(25px);border-radius:16px;padding:16px 24px}.setting-after-container .setting-after-content .advance-setting-box .advance-setting-box-header{flex-shrink:0;margin-bottom:16px;display:flex;flex-direction:column;gap:8px;color:var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .advance-setting-box-header .advance-setting-box-header-title{font-size:16px;font-weight:bold}.setting-after-container .setting-after-content .advance-setting-box .advance-setting-box-header .advance-setting-box-header-desc{font-size:12px;opacity:.65}.setting-after-container .setting-after-content .advance-setting-box .advance-select-common{flex:1;min-height:0;overflow:hidden auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center}.setting-after-container .setting-after-content .advance-setting-box .advance-select-common .select-presskey-box{display:flex;align-items:center;justify-content:center;gap:48px}.setting-after-container .setting-after-content .advance-setting-box .advance-select-common .step-content1-tips{margin-top:16px;display:flex;align-items:center;background:var(--bg-tertiary);border-radius:8px;padding:8px 16px;color:var(--text-primary);font-size:12px;line-height:20px}.setting-after-container .setting-after-content .advance-setting-box .advance-select-common .step-content1-tips .tips-icon{font-size:20px;width:20px;height:20px;margin-right:8px}.setting-after-container .setting-after-content .advance-setting-box .operation-item{flex:1;min-height:0;overflow:hidden auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;width:90%}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step .socd-mode-item{background:var(--bg-tertiary);border-radius:8px;padding:24px;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,0);position:relative;box-sizing:border-box;cursor:pointer}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step .socd-mode-item .socd-mode-item-text{font-size:14px;font-weight:bold;color:var(--text-primary);line-height:20px;margin-bottom:4px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step .socd-mode-item .socd-mode-item-text.desc{margin-bottom:0;font-weight:400;color:var(--config-tips-content-color)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step .socd-mode-item .socd-mode-item-checked{position:absolute;top:12px;right:12px;width:24px;height:24px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step .socd-mode-item .socd-mode-item-checked .checked-icon{color:var(--primary-color)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step .socd-mode-item.active{border:1px solid var(--primary-color);background:var(--primary-color-bg)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step.step-last{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step.step-last .socd-mode-item{width:328px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step.step-last .common-slider{width:100%}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step.step-last .common-slider .slider-item{width:100%}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-socd .socd-mode-box-step.step-last .common-slider .slider-item .label{font-size:14px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mpt .mpt-mode-box{width:100%;display:flex;align-items:center;justify-content:center}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mpt .mpt-mode-box .mpt-dynamic-box{width:100%;display:flex;flex-direction:column;justify-content:center;gap:12px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mpt .mpt-mode-box .mpt-dynamic-box .mpt-dynamic-item{display:flex;align-items:center;gap:16px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mpt .mpt-mode-box .mpt-dynamic-box .mpt-dynamic-item .pressKey-box{display:flex;align-items:center;justify-content:end;gap:8px;flex-shrink:0}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mpt .mpt-mode-box .mpt-dynamic-box .mpt-dynamic-item .pressKey-box .pressKey-text{font-size:14px;line-height:20px;color:var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mpt .mpt-mode-box .mpt-dynamic-box .mpt-dynamic-item .pressKey-box .pressKey{width:64px;height:64px;background:var(--bg-tertiary);border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;flex-shrink:0;color:var(--text-primary);text-align:center;word-break:break-all;overflow-wrap:break-word;line-height:1;padding:4px;cursor:pointer}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mpt .mpt-mode-box .mpt-dynamic-box .mpt-dynamic-item .common-slider{flex:1}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .end-mode-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .mt-mode-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .tgl-mode-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .end-mode-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .mt-mode-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .tgl-mode-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .end-mode-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .mt-mode-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .tgl-mode-box{width:100%;display:flex;align-items:center;justify-content:center}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .end-mode-box .select-presskey-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .mt-mode-box .select-presskey-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .tgl-mode-box .select-presskey-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .end-mode-box .select-presskey-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .mt-mode-box .select-presskey-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .tgl-mode-box .select-presskey-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .end-mode-box .select-presskey-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .mt-mode-box .select-presskey-box,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .tgl-mode-box .select-presskey-box{display:flex;align-items:center;justify-content:center;gap:48px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .end-mode-box .select-presskey-box .pressKey.no-select,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .mt-mode-box .select-presskey-box .pressKey.no-select,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .tgl-mode-box .select-presskey-box .pressKey.no-select,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .end-mode-box .select-presskey-box .pressKey.no-select,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .mt-mode-box .select-presskey-box .pressKey.no-select,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .tgl-mode-box .select-presskey-box .pressKey.no-select,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .end-mode-box .select-presskey-box .pressKey.no-select,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .mt-mode-box .select-presskey-box .pressKey.no-select,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .tgl-mode-box .select-presskey-box .pressKey.no-select{border:1px dashed var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .end-mode-box .select-presskey-box .pressKey.no-select .add-icon,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .mt-mode-box .select-presskey-box .pressKey.no-select .add-icon,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .tgl-mode-box .select-presskey-box .pressKey.no-select .add-icon,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .end-mode-box .select-presskey-box .pressKey.no-select .add-icon,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .mt-mode-box .select-presskey-box .pressKey.no-select .add-icon,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .tgl-mode-box .select-presskey-box .pressKey.no-select .add-icon,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .end-mode-box .select-presskey-box .pressKey.no-select .add-icon,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .mt-mode-box .select-presskey-box .pressKey.no-select .add-icon,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .tgl-mode-box .select-presskey-box .pressKey.no-select .add-icon{font-size:16px;color:var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .end-mode-box .common-slider,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .mt-mode-box .common-slider,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .tgl-mode-box .common-slider,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .end-mode-box .common-slider,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .mt-mode-box .common-slider,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .tgl-mode-box .common-slider,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .end-mode-box .common-slider,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .mt-mode-box .common-slider,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .tgl-mode-box .common-slider{width:100%}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .end-mode-box .common-slider .slider-item .label,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .mt-mode-box .common-slider .slider-item .label,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-end .tgl-mode-box .common-slider .slider-item .label,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .end-mode-box .common-slider .slider-item .label,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .mt-mode-box .common-slider .slider-item .label,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-mt .tgl-mode-box .common-slider .slider-item .label,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .end-mode-box .common-slider .slider-item .label,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .mt-mode-box .common-slider .slider-item .label,.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-tgl .tgl-mode-box .common-slider .slider-item .label{font-size:14px;margin-bottom:8px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box{width:100%;display:flex;align-items:center;padding-left:56px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box-wrapper{width:55%;display:flex}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:60px;padding-bottom:12px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item{display:flex;align-items:center;gap:16px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .pressKey-box{display:flex;align-items:center;flex-shrink:0}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .pressKey-box .pressKey{width:64px;height:48px;background:var(--bg-tertiary);border:1px dashed rgba(0,0,0,0);border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;flex-shrink:0;color:var(--text-primary);text-align:center;word-break:break-all;overflow-wrap:break-word;line-height:1;padding:4px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .pressKey-box .pressKey.no-select{border:1px dashed var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .pressKey-box .pressKey .add-icon{font-size:16px;color:var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider{flex:1;display:flex;align-items:center}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col.has-tip::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:1px;height:32px;background:var(--advancedKey-dks-tips-line)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col.connect-right::after{content:"";position:absolute;left:50%;top:50%;transform:translateY(-50%);width:100%;height:6px;background:var(--text-primary);z-index:0}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col .dks-tips-list{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 20px);background:var(--bg-tertiary);border-radius:6px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;white-space:nowrap;z-index:1}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col .dks-tips-list .label{display:flex;align-items:center}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col .dks-tips-list .label .icon{width:8px;height:11px;margin-right:4px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col .dks-tips-list .label .text{font-size:14px;color:var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col .dks-tips-list .value{font-size:14px;color:var(--text-primary);text-decoration:underline;cursor:pointer}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col .dks-tips-list.press .label .icon{background:var(--advancedKey-dks-tips-icon001)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col .dks-tips-list.bottomOut .label .icon{background:var(--advancedKey-dks-tips-icon002)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item-col .dks-tips-list.reset .label .icon{background:var(--advancedKey-dks-tips-icon003)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item{width:24px;height:24px;background:var(--text-disabled);border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;flex-shrink:0;position:relative;z-index:1}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item .add-icon{font-size:10px;font-weight:bold;width:10px;height:10px;color:var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item .check-circle{width:8px;height:8px;background:var(--bg-secondary);border-radius:50%}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-dks .dks-mode-box .dks-dynamic-box .dks-dynamic-item .travel-slider .check-item.active{background:var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-cb .cb-mode-box{width:100%;display:flex;gap:12px;align-items:center;justify-content:center}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-cb .cb-mode-box .select-modifier-key{display:flex;background:var(--bg-tertiary);border-radius:12px}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-cb .cb-mode-box .select-modifier-key .base-pressKey{background:rgba(0,0,0,0);border:none}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-cb .cb-mode-box .select-modifier-key .base-pressKey .pressKey.no-select{border:1px dashed var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-cb .cb-mode-box .select-modifier-key .base-pressKey .pressKey.no-select .add-icon{font-size:16px;color:var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-cb .cb-mode-box .select-presskey-box .pressKey.no-select{border:1px dashed var(--text-primary)}.setting-after-container .setting-after-content .advance-setting-box .operation-item.operation-cb .cb-mode-box .select-presskey-box .pressKey.no-select .add-icon{font-size:16px;color:var(--text-primary)}.setting-after-container .setting-after-content .dks-advance-setting-box{flex:3}.setting-after-container .setting-after-content .base-pressKey{width:156px;height:156px;background:var(--bg-tertiary);border-radius:12px;border:1px dashed rgba(0,0,0,0);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer}.setting-after-container .setting-after-content .base-pressKey.no-select{border:1px dashed var(--text-primary)}.setting-after-container .setting-after-content .base-pressKey .pressKey{width:64px;height:64px;background:var(--screen-list-item-bg);border-radius:8px;border:1px dashed rgba(0,0,0,0);display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;flex-shrink:0;color:var(--text-primary);text-align:center;word-break:break-all;overflow-wrap:break-word;line-height:1;padding:4px}.setting-after-container .setting-after-content .base-pressKey .pressKey.isActive{background:var(--advancedKey-before-list-key-bg)}.setting-after-container .setting-after-content .base-pressKey .pressKey.no-select{border:1px dashed var(--text-primary)}.setting-after-container .setting-after-content .base-pressKey .pressKey-desc{width:100%;margin-top:8px;padding:0 8px;font-size:14px;color:var(--text-primary);text-align:center;line-height:18px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all}.setting-after-container .setting-after-content .base-pressKey .select-checkbox{position:absolute;top:8px;right:8px;width:18px;height:18px;background:var(--screen-operation-bg);border:1px solid var(--text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center}.setting-after-container .setting-after-content .base-pressKey .select-checkbox .select-checkbox-icon{color:rgba(0,0,0,0)}.setting-after-container .setting-after-content .base-pressKey .select-checkbox.active{background:var(--primary-color);border:1px solid var(--primary-color)}.setting-after-container .setting-after-content .base-pressKey .select-checkbox.active .select-checkbox-icon{color:var(--bg-secondary)}.dks-no-shadow{box-shadow:none !important}.setting-after-container--readonly .setting-after-content{pointer-events:none;user-select:none}.setting-after-container--readonly .setting-after-header-left .header-left-back{pointer-events:auto}
.setting-travel-container{display:flex;align-items:flex-start;padding-bottom:24px}.setting-travel-container .setting-travel-axis-section{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:16px}.setting-travel-container .setting-travel-axis-section .setting-travel-axis-image-box{width:135px;height:160px;position:relative}.setting-travel-container .setting-travel-axis-section .setting-travel-axis-image-box .setting-travel-axis-base{width:135px;height:80px;position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:1;user-select:none;pointer-events:none}.setting-travel-container .setting-travel-axis-section .setting-travel-axis-image-box .setting-travel-axis-slider-layer{width:65px;height:85px;position:absolute;left:50%;transform:translateX(-50%);bottom:52px;overflow:hidden;user-select:none;pointer-events:none}.setting-travel-container .setting-travel-axis-section .setting-travel-axis-image-box .setting-travel-axis-slider-layer .setting-travel-axis-slider-img{width:100%;height:100%;transition:transform .2s ease-out;user-select:none;pointer-events:none}.setting-travel-container .setting-travel-axis-section .setting-travel-axis-image-box .setting-travel-axis-shell{width:134px;height:104px;position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:4;user-select:none;pointer-events:none}.setting-travel-container .setting-travel-axis-section .setting-travel-axis-tips{font-size:12px;line-height:20px;color:var(--text-primary)}.setting-travel-container .setting-travel-track-section{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-left:40px;gap:12px}.setting-travel-container .setting-travel-track-section button{margin-right:0;margin-left:40px}.setting-travel-container .setting-travel-track-section button .setting-travel-reset-icon{font-size:16px;margin-right:8px}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer{display:flex;align-items:stretch;gap:6px;height:204px}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-scale-col{position:relative;width:34px;flex-shrink:0}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-scale-col .setting-travel-scale-mark{position:absolute;right:0;width:6px;height:1px;background:var(--text-body-color)}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-scale-col .setting-travel-scale-main{width:10px}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-scale-col .setting-travel-scale-value{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-body-color);white-space:nowrap}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-track-wrap{width:38px;flex-shrink:0;position:relative}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-track-wrap .setting-travel-track{width:100%;height:100%;position:relative;background:var(--slider-bg-color);border-radius:8px;overflow:hidden;cursor:pointer}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-track-wrap .setting-travel-track .setting-travel-range-fill{position:absolute;left:0;width:100%;background:var(--advancedKey-dks-range-bg);pointer-events:none;transition:bottom .1s ease,height .1s ease}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-track-wrap .setting-travel-track .setting-travel-thumb-line{position:absolute;left:0;width:100%;height:3px;background:var(--primary-color);border-radius:2px;transform:translateY(50%);pointer-events:none;transition:bottom .1s ease;z-index:1}.setting-travel-container .setting-travel-track-section .setting-travel-track-outer .setting-travel-track-wrap .setting-travel-track .setting-travel-thumb-active{height:4px}.setting-travel-container .setting-travel-input-section{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:32px;background:var(--bg-tertiary);border-radius:8px;margin-left:80px;min-width:450px}.setting-travel-container .setting-travel-input-section .setting-travel-input-header{display:flex;flex-direction:column;align-items:center;margin-bottom:40px}.setting-travel-container .setting-travel-input-section .setting-travel-input-header .travel-input-header-title{color:var(--text-primary);font-size:16px;font-weight:bold;line-height:20px}.setting-travel-container .setting-travel-input-section .setting-travel-input-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}.setting-travel-container .setting-travel-input-section .setting-travel-input-row .setting-travel-input-item{display:flex;flex-direction:column;align-items:center;gap:8px}.setting-travel-container .setting-travel-input-section .setting-travel-input-row .setting-travel-input-item .label{display:flex;align-items:center}.setting-travel-container .setting-travel-input-section .setting-travel-input-row .setting-travel-input-item .label .icon{width:8px;height:11px;margin-right:4px}.setting-travel-container .setting-travel-input-section .setting-travel-input-row .setting-travel-input-item .label .text{font-size:14px;color:var(--text-primary);white-space:nowrap}.setting-travel-container .setting-travel-input-section .setting-travel-input-row .setting-travel-input-item.press .label .icon{background:var(--advancedKey-dks-tips-icon001)}.setting-travel-container .setting-travel-input-section .setting-travel-input-row .setting-travel-input-item.bottomOut .label .icon{background:var(--advancedKey-dks-tips-icon002)}.setting-travel-container .setting-travel-input-section .setting-travel-input-row .setting-travel-input-item.reset .label .icon{background:var(--advancedKey-dks-tips-icon003)}.setting-travel-container .setting-travel-input-section .setting-travel-input-row .setting-travel-input-active{border:1px solid var(--text-primary);border-radius:6px}.setting-travel-container.setting-travel-dragging .setting-travel-axis-slider-img{transition:none !important}.setting-travel-container.setting-travel-dragging .setting-travel-range-fill{transition:none}.setting-travel-container.setting-travel-dragging .setting-travel-thumb-line{transition:none}@keyframes setting-travel-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.advancedKey-index{width:100%;height:100%}.advancedKey{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between}.advancedKey .advancedKey-keyboard{width:100%;flex:1;min-height:250px;display:flex;padding:24px 0}.advancedKey .advancedKey-keyboard .advanced-key-keyboard-display{flex:1 1 auto;min-width:0;display:flex;justify-content:center;align-items:center;position:relative}.advancedKey .advancedKey-main{width:100%;height:50%;flex-shrink:0}
.performance{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start;box-sizing:border-box}.performance .performance-section{height:145px;padding:32px !important;background:var(--performance-bg);border-radius:16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.performance .performance-section .performance-section-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.performance .performance-section .performance-section-header>:last-child{transform:scale(1.1667);transform-origin:right center}.performance .performance-section .performance-section-title{font-size:16px;font-weight:bold;color:var(--text-primary);margin-bottom:8px}.performance .performance-section .performance-section-description{font-size:14px;font-weight:400;color:var(--text-body-color);display:flex;align-items:center}.performance .performance-section .performance-section-description .iconfont{font-size:20px;color:var(--primary-color);margin-left:6px}.performance .radio-group{width:100%;display:flex;align-items:center;justify-content:flex-start}.performance .radio-group .form-section-box{margin-bottom:0}.performance .radio-group .form-section-box .form-section-item{display:flex;align-items:center}.performance .radio-group .kb-tooltipWrapper_qiYTN{display:flex;align-items:center}.performance .radio-group .kb-radio_imJbv{margin-right:20px;gap:8px}.performance .radio-group .kb-radio_imJbv .kb-iconWrapper_glW4H{width:18px;height:18px}.performance .radio-group .kb-formSection_lUuBx{width:100%;margin-right:10px}.performance .radio-group .kb-formSection_lUuBx .kb-header_LXEFM .kb-title_taJ3n{opacity:0}.performance .radio-group .kb-checkbox_jdNze{flex-shrink:0}.performance .radio-group .kb-checkbox_jdNze .kb-label_Sgu6K{color:var(--text-against-primary);opacity:1}.performance .radio-group.sleep-time,.performance .radio-group.debounce-setting{margin-top:16px}.performance .radio-group.sleep-time{gap:12px}.performance .radio-group.sleep-time .kb-formSection_lUuBx{flex:1 1 auto;width:auto;margin-right:0}.performance .radio-group.sleep-time .slider-box{width:100%}.performance .radio-group.polling-rate,.performance .radio-group.debounce-mode{margin-top:16px;flex-wrap:wrap;align-items:center;align-content:flex-start;row-gap:12px}.performance .radio-group.polling-rate>label,.performance .radio-group.debounce-mode>label{flex-shrink:0;margin:0}.performance .radio-group.polling-rate{column-gap:20px}.performance .radio-group.debounce-mode{column-gap:20px}.performance .wasd-arrow-switch-section{position:relative}.performance .wasd-arrow-switch-spinner-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);pointer-events:all}.performance .wasd-arrow-switch-spinner{width:32px;height:32px;border:3px solid hsla(0,0%,100%,.25);border-top-color:var(--primary-color);border-radius:50%;animation:wasd-arrow-switch-spin .75s linear infinite}@keyframes wasd-arrow-switch-spin{to{transform:rotate(360deg)}}.performance .wasd-arrow-switch-loading-text{position:absolute;left:50%;top:calc(50% + 24px);transform:translateX(-50%);z-index:11;font-size:14px;color:var(--text-body-color);pointer-events:none;white-space:nowrap}.slider-box{width:560px}.slider-box.debounce-setting{width:100%}
.mouse-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:40px}.mouse-visualizer{position:relative;width:264px;height:474px;display:flex;justify-content:center;align-items:center}.mouse-image{width:92%;margin-left:4%;object-fit:contain;user-select:none;pointer-events:none;will-change:transform;transform:translateZ(0);margin-top:16px}.mouse-button-hotspot{position:absolute;width:28px;height:28px;display:flex;align-items:center;justify-content:center;transform:translate(-50%, -50%);pointer-events:none;transition:all .3s ease;z-index:10;border:3px dashed var(--primary-color);border-radius:50%;opacity:1;will-change:transform;transform:translate(-50%, -50%) translateZ(0)}.mouse-button-hotspot .hotspot-icon{display:none}.mouse-button-hotspot.selected{transform:translate(-50%, -50%) scale(1.3);border-color:var(--primary-color);border-style:solid}.button-label:hover~.mouse-button-hotspot,.mouse-button-group:hover .mouse-button-hotspot{transform:translate(-50%, -50%) scale(1.3)}.button-label{position:absolute;transform:translate(-50%, -50%);background:var(--label-bg);border:2px solid rgba(0,0,0,0);border-radius:8px;padding:12px 16px;min-width:96px;width:max-content;max-width:120px;white-space:normal;word-break:break-all;transition:all .3s ease;z-index:5;cursor:pointer;will-change:transform,border-color;transform:translate(-50%, -50%) translateZ(0);transition:all .3s ease;box-shadow:0px 0px 20px var(--shadow-color-light)}.button-label.align-right{white-space:nowrap;max-width:none;transform:translate(-100%, -50%) translateZ(0)}.button-label.align-right:hover{transform:translate(-100%, -50%) scale(1.06)}.button-label:hover{border-color:var(--label-border-color);transform:translate(-50%, -50%) scale(1.06)}.button-label.selected{border-color:var(--label-border-color)}.label-text{font-size:var(--text-h2);font-weight:var(--text-weight-body);color:var(--text-primary);text-align:left;margin-bottom:4px;letter-spacing:.5px;word-break:break-word}.label-subtext{font-size:var(--text-body);font-weight:var(--text-weight-caption);color:var(--text-caption-color);text-align:left;letter-spacing:.3px}.button-reset{position:relative;margin-top:32px;width:120px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--label-bg);border:1px solid rgba(0,0,0,0);border-radius:8px;color:var(--text-primary);font-size:var(--text-body);font-weight:var(--text-weight-caption);cursor:pointer;transition:all .2s ease;z-index:10}.button-reset:hover{border:1px solid var(--label-border-color)}.button-reset:hover{border-color:var(--label-border-color)}.connection-lines-container{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:3;overflow:visible}.connection-lines-container path,.connection-lines-container line{stroke:var(--connection-line-color);stroke-width:1;fill:none;opacity:1;transition:stroke .2s ease,opacity .2s ease}@media(max-width: 1440px){.mouse-container{width:100%;height:100%;max-height:100%;min-height:0;margin-bottom:0;padding:0 0 8px;box-sizing:border-box;container-type:size;container-name:mouse-panel}.mouse-visualizer{width:min(180px,76%,(100cqh - 52px)*264/474);height:auto;aspect-ratio:264/474;flex-shrink:1}.mouse-button-hotspot{width:10.6%;height:auto;aspect-ratio:1}.button-label{min-width:72px;max-width:92px;padding:8px 10px}.label-text{font-size:13px}.label-subtext{font-size:11px}.button-reset{flex-shrink:0;margin-top:12px;width:96px;height:36px;font-size:12px}}@media(max-width: 1024px){.mouse-container{padding:24px 0}.mouse-visualizer{width:min(264px,72vw);height:auto;aspect-ratio:264/474}.button-label{min-width:60px;padding:6px 10px}.label-text{font-size:12px}.label-subtext{font-size:10px}}
.changekey-page{display:flex;width:100%;height:100%;gap:24px;box-sizing:border-box;overflow:hidden}.changekey-left{display:flex;width:52%;margin-top:8%;box-sizing:border-box}.changekey-right{display:flex;width:48%;box-sizing:border-box}@media(max-width: 1440px){.changekey-left{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;margin-top:4%;padding-top:0;overflow:visible}.changekey-right{padding-top:8px}}@media(max-width: 1024px){.changekey-left{flex-basis:auto;padding-top:24px}.changekey-right{padding-top:8px}}
.dpi-card-wrapper{cursor:pointer;transition:all .2s ease}.dpi-card{width:100%;background:var(--bg-tertiary);border:2px solid rgba(0,0,0,0);border-radius:12px;padding:20px 32px;transition:all .3s ease;display:flex;flex-direction:column;box-shadow:none}.dpi-card:hover{background:var(--dpi-card-bg-hover)}.dpi-card.active{border-color:var(--text-primary);background:var(--dpi-card-bg-hover)}.dpi-card.dpi-card--gear-locked .card-title-block{cursor:pointer}.dpi-card.dpi-card--gear-locked .color-button{cursor:pointer}.dpi-card.dpi-card--gear-locked .card-header-right .icon-btn{cursor:pointer}.dpi-card.dpi-card--gear-locked .slider-row.combined{cursor:pointer}.dpi-card.dpi-card--gear-locked .slider-row.combined label{cursor:pointer}.dpi-card button,.dpi-card .color-button,.dpi-card .card-title-block,.dpi-card input,.dpi-card .switch,.dpi-card .slider-row{pointer-events:auto}.dpi-card .slider-row *{pointer-events:auto}.dpi-card .el-slider-box{padding:0 !important}.dpi-card .card-header{display:flex;align-items:center;justify-content:flex-start;gap:16px;margin-bottom:12px}.dpi-card .card-title-block{display:flex;align-items:center;justify-content:center;gap:8px;width:88px;height:36px;background:var(--bg-secondary);border-radius:19px;flex-shrink:0}.dpi-card .card-title-block.color-readonly{cursor:default}.dpi-card .card-title-block.color-readonly .color-button{cursor:default}.dpi-card .card-title-block.color-readonly .color-button:hover{transform:none}.dpi-card .card-title{font-size:var(--text-body);font-weight:var(--text-weight-body);color:var(--text-primary);margin:0;flex-shrink:0}.dpi-card .card-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1}.dpi-card .color-button{width:12px;height:12px;border:none;border-radius:50%;transition:transform .2s ease;padding:0;box-shadow:none;flex-shrink:0;pointer-events:auto;cursor:pointer}.dpi-card .color-button:hover{transform:scale(1.15)}.dpi-card .toggle-label{font-size:12px;color:var(--text-secondary);white-space:nowrap;margin:0 6px 0 0}.dpi-card .icon-btn{font-size:20px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);border:none;border-radius:6px;padding:4px;margin-right:-8px;transition:color .2s ease}.dpi-card .icon-btn:hover{color:var(--primary-color)}.dpi-card .icon-btn:disabled{opacity:.5;cursor:not-allowed}.dpi-card .icon-btn .icon{transition:transform .18s ease}.dpi-card .icon-btn:hover:not(:disabled) .icon{transform:scale(1.2)}.dpi-card .card-body{display:flex;flex-direction:column;gap:12px;pointer-events:auto}.dpi-card .card-body .slider-group{display:flex;flex-direction:column;gap:120px}.dpi-card .card-body .slider-group.separate{flex-direction:row;justify-content:space-between;gap:0;align-items:start}.dpi-card .card-body .slider-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.dpi-card .card-body .slider-row label{margin:0;font-size:12px;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.4px;text-align:left;flex-shrink:0}.dpi-card .card-body .dpi-slider-wrap{width:100%;min-width:0}.dpi-card .card-body .dpi-slider-wrap .el-slider-scale{background:var(--slider-scale-color-dpi);border-radius:8px}.dpi-card .card-body .slider-group.separate .slider-row{width:calc(50% - 10px)}
.dpi-setting-page{width:100%;height:100%;padding:32px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;background:var(--bg-secondary);border-radius:24px}.dpi-setting-page .dpi-header{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}.dpi-setting-page .dpi-header .header-text{flex:1}.dpi-setting-page .dpi-header .header-text h1{margin:0;display:inline;font-size:var(--text-h1);font-weight:var(--text-weight-h1);color:var(--text-primary)}.dpi-setting-page .dpi-header .header-text .dpi-count{display:inline;margin-left:12px;font-size:var(--text-body);color:var(--text-primary)}.dpi-setting-page .dpi-header .header-text p{margin:4px 0 0 0;font-size:14px;color:var(--text-tertiary)}.dpi-setting-page .dpi-header .add-dpi-btn{width:120px;height:40px;font-size:14px;color:var(--btn-default-text);background:var(--btn-default-bg);border:none;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;line-height:1}.dpi-setting-page .dpi-header .add-dpi-btn:hover{background:var(--btn-default-bg-hover);color:var(--btn-default-text-hover)}.dpi-setting-page .dpi-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;width:100%}@media(max-width: 1200px){.dpi-setting-page .dpi-grid{grid-template-columns:1fr}}.dpi-color-popup{position:fixed;z-index:9999;width:420px;box-sizing:border-box;background:var(--bg-secondary);border-radius:12px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);overflow:hidden}
.trigger-mouse-readonly .button-label{cursor:default;pointer-events:none}.trigger-mouse-readonly .button-label:hover{border-color:rgba(0,0,0,0);transform:translate(-50%, -50%) translateZ(0)}.trigger-mouse-readonly .button-label.align-right:hover{transform:translate(-100%, -50%) translateZ(0)}.trigger-mouse-readonly .mouse-button-hotspot{pointer-events:none}.trigger-mouse-readonly .button-label:hover~.mouse-button-hotspot,.trigger-mouse-readonly .mouse-button-group:hover .mouse-button-hotspot{transform:translate(-50%, -50%) translateZ(0)}
.report-rate-card{background:var(--bg-secondary);border-radius:16px;padding:20px 24px}.report-rate-card .card-header{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:20px}.report-rate-card .card-title{font-size:var(--text-h1);font-weight:var(--text-weight-h1);color:var(--text-primary);margin:0}.report-rate-card .rate-description{font-size:var(--text-body);font-weight:var(--text-weight-body);color:var(--text-quaternary);margin:0;line-height:1.5}.report-rate-card .report-rate-slider{display:flex;flex-direction:column;gap:0px}.report-rate-card .report-rate-tabs{margin-bottom:0}.report-rate-card .report-rate-tabs .tabContent{display:none}.report-rate-card .report-rate-tabs>div:first-child button{color:var(--text-tertiary)}.report-rate-card .report-rate-tabs>div:first-child button:hover:not([class*=active]):not(:disabled):not([aria-disabled=true]){color:var(--text-primary);background:var(--reportrate-option-bg-hover)}.report-rate-card .report-rate-tabs>div:first-child button[class*=active]{color:var(--btn-primary-text)}.report-rate-card .report-rate-tabs>div:first-child button:disabled{color:var(--text-quaternary)}.report-rate-card .report-rate-tabs .gradient-border-animation::before,.report-rate-card .report-rate-tabs .gradient-border-animation::after{display:none}.report-rate-card .report-rate-tabs .gradient-border-animation{box-shadow:none}.report-rate-card .report-rate-tabs.report-rate-tabs--0 .gradient-border-animation,.report-rate-card .report-rate-tabs.report-rate-tabs--1 .gradient-border-animation,.report-rate-card .report-rate-tabs.report-rate-tabs--2 .gradient-border-animation{background:linear-gradient(90deg, #005DD2, #00B1FF)}.report-rate-card .report-rate-tabs.report-rate-tabs--3 .gradient-border-animation{background:linear-gradient(90deg, #00B1FF, #FA9345)}.report-rate-card .report-rate-tabs.report-rate-tabs--4 .gradient-border-animation,.report-rate-card .report-rate-tabs.report-rate-tabs--5 .gradient-border-animation,.report-rate-card .report-rate-tabs.report-rate-tabs--6 .gradient-border-animation{background:linear-gradient(90deg, #FA9345, #E73030)}.report-rate-card .slider-labels{display:flex;justify-content:space-between;gap:8px;padding:0 4px}.report-rate-card .slider-labels .label-left,.report-rate-card .slider-labels .label-right{font-size:var(--text-caption);font-weight:var(--text-weight-caption);color:var(--text-quaternary);min-width:0}.report-rate-card .slider-labels .label-right{text-align:right}@media(max-width: 1280px){.report-rate-card{padding:16px 14px}.report-rate-card .report-rate-slider .report-rate-tabs>div:first-child button{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;font-size:12px;line-height:36px;height:36px}}@media(max-width: 520px){.report-rate-card .report-rate-slider .report-rate-tabs>div:first-child button{font-size:11px;padding-left:2px;padding-right:2px}.report-rate-card .slider-labels{flex-wrap:wrap;row-gap:4px}.report-rate-card .slider-labels .label-left,.report-rate-card .slider-labels .label-right{flex:1 1 calc(50% - 4px)}}
.battery-life-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-secondary) 52%, var(--bg-tertiary) 79%, var(--bg-tertiary) 100%);border-radius:16px;padding:24px;min-height:272px}.battery-life-card .card-header{display:flex;flex-direction:column;align-items:flex-start}.battery-life-card .card-title{font-size:var(--text-h1);font-weight:var(--text-weight-h1);color:var(--text-primary);margin:0}.battery-life-card .battery-content{display:flex;align-items:stretch;justify-content:space-between;flex:1}.battery-life-card .battery-main{flex:1;display:flex;flex-direction:column;min-width:0}.battery-life-card .battery-hours{font-size:56px;font-weight:var(--text-weight-black);color:var(--text-primary);letter-spacing:1px;line-height:1.2;margin-top:20px}.battery-life-card .battery-range{display:flex;align-items:center;flex-wrap:wrap;gap:12px 32px;margin-top:8px;font-size:var(--text-body);font-weight:500;color:var(--text-primary);letter-spacing:.5px}.battery-life-card .battery-range .battery-range-label{color:var(--text-quaternary)}.battery-life-card .battery-range .battery-range-value{font-weight:700}.battery-life-card .battery-bar-block{display:flex;flex-direction:column;gap:12px}.battery-life-card .battery-description{font-size:var(--text-body);font-weight:var(--text-weight-body);color:var(--text-quaternary);letter-spacing:.4px;margin:0}.battery-life-card .battery-mouse-wrap{position:absolute;right:32px;top:50%;transform:translateY(-50%);width:300px;max-width:40%;display:flex;align-items:center;justify-content:center;pointer-events:none}.battery-life-card .battery-mouse{width:100%;height:auto;object-fit:contain}.battery-life-card .battery-bar{width:100%;height:6px;background:var(--line-color);border-radius:24px;overflow:hidden}.battery-life-card .battery-bar-fill{height:100%;background:var(--text-primary);border-radius:24px;transition:width .4s ease}@media(max-width: 1024px){.battery-life-card{padding:20px;min-height:0}.battery-life-card .battery-bar{margin:0 -20px -20px}.battery-life-card .battery-hours{font-size:28px}.battery-life-card .battery-mouse-wrap{position:relative;right:auto;top:auto;transform:none;width:140px;max-width:55%;margin:12px auto 0;align-self:center}}@media(max-width: 480px){.battery-life-card{padding:16px}.battery-life-card .battery-hours{font-size:22px;margin-top:12px}.battery-life-card .battery-mouse-wrap{width:120px;max-width:70%}}
.sensor-mode-card{background:var(--bg-secondary);border-radius:16px;padding:24px}.sensor-mode-card .card-header{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:20px}.sensor-mode-card .card-title{font-size:var(--text-h1);font-weight:var(--text-weight-h1);color:var(--text-primary);margin:0}.sensor-mode-card .sensor-mode-content{width:100%;padding:0px;display:flex;flex-direction:column}.sensor-mode-card .card-description{margin:0;color:var(--text-quaternary);font-size:var(--text-body);font-weight:var(--text-weight-body);line-height:1.5}.sensor-mode-card .mode-options{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px}.sensor-mode-card .mode-button{height:200px;flex:1 1 0;min-width:0;width:auto;display:flex;flex-direction:column;padding:40px 24px 8px 24px;border:2px solid var(--bg-secondary);border-radius:24px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.sensor-mode-card .mode-button.mode-lp{background:linear-gradient(180deg, var(--sensor-mode-bg) 100%, #008cff 0%)}.sensor-mode-card .mode-button.mode-hp{background:linear-gradient(180deg, var(--sensor-mode-bg) 100%, #ff9900 0%)}.sensor-mode-card .mode-button.mode-corded{background:linear-gradient(180deg, var(--sensor-mode-bg) 100%, #ff0000 0%)}.sensor-mode-card .mode-button .mode-bg-img{position:absolute;top:0;left:0;width:100%;height:100%;transition:filter .3s ease;z-index:0}.sensor-mode-card .mode-button .mode-check-icon{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;opacity:0;font-size:20px;transform:scale(1);transition:all .3s ease;z-index:2;color:#fff}.sensor-mode-card .mode-button .mode-text-container{position:relative;z-index:1;padding:12px 0 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;min-height:152px}.sensor-mode-card .mode-button .mode-text-container .mode-icon-placeholder{display:flex;align-items:center;justify-content:center;margin-bottom:12px}.sensor-mode-card .mode-button .mode-text-container .mode-icon-placeholder .mode-icon{font-size:32px;color:var(--sensor-mode-icon);transition:color .3s ease}.sensor-mode-card .mode-button .mode-text-container .mode-label{font-size:var(--text-h2);font-weight:var(--text-weight-h2);background:rgba(0,0,0,0);letter-spacing:.5px;transition:color .3s ease;margin-bottom:4px;color:var(--sensor-mode-label)}.sensor-mode-card .mode-button .mode-text-container .mode-description{font-size:12px;color:var(--sensor-mode-description);font-weight:var(--text-weight-caption);text-align:left;line-height:1.5;transition:color .3s ease}.sensor-mode-card .mode-button:not(.active) .mode-bg-img{filter:grayscale(1) opacity(0.2)}.sensor-mode-card .mode-button:disabled,.sensor-mode-card .mode-button[aria-disabled=true]{cursor:not-allowed}.sensor-mode-card .mode-button:not(.active):not(:disabled):not([aria-disabled=true]):hover .mode-bg-img{filter:grayscale(0.4) opacity(0.6)}.sensor-mode-card .mode-button:not(.active):not(:disabled):not([aria-disabled=true]):hover .mode-icon{color:#fff}.sensor-mode-card .mode-button.active .mode-bg-img{filter:grayscale(0) opacity(1)}.sensor-mode-card .mode-button.active .mode-check-icon{opacity:1;transform:scale(1)}.sensor-mode-card .mode-button.active.mode-lp{background:linear-gradient(180deg, var(--sensor-mode-bg-active) 100%, #008cff 0%)}.sensor-mode-card .mode-button.active.mode-hp{background:linear-gradient(180deg, var(--sensor-mode-bg-active) 100%, #ff9900 0%)}.sensor-mode-card .mode-button.active.mode-corded{background:linear-gradient(180deg, var(--sensor-mode-bg-active) 100%, #ff0000 0%)}.sensor-mode-card .mode-button.mode-lp.active{border-color:#226cff}.sensor-mode-card .mode-button.mode-lp.active .mode-icon-placeholder .mode-icon{color:#fff}.sensor-mode-card .mode-button.mode-lp.active .mode-label{background:linear-gradient(90deg, #59E1FF 0%, #2069FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}.sensor-mode-card .mode-button.mode-hp.active{border-color:#ff5019}.sensor-mode-card .mode-button.mode-hp.active .mode-icon-placeholder .mode-icon{color:#fff}.sensor-mode-card .mode-button.mode-hp.active .mode-label{background:linear-gradient(90deg, #FF9437 0%, #FF3F1D 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}.sensor-mode-card .mode-button.mode-corded.active{border-color:#ff2c2c}.sensor-mode-card .mode-button.mode-corded.active .mode-icon-placeholder .mode-icon{color:#fff}.sensor-mode-card .mode-button.mode-corded.active .mode-label{background:linear-gradient(90deg, #FF635B 0%, #FF2020 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}@media(max-width: 1024px){.sensor-mode-card{padding:20px}.sensor-mode-card .mode-options{flex-direction:column;flex-wrap:nowrap}.sensor-mode-card .mode-button{flex:none;width:100%;height:auto;min-height:148px;padding:24px 20px 12px 20px}.sensor-mode-card .mode-button .mode-text-container{padding:8px 0 0 0;min-height:100px}}@media(max-width: 480px){.sensor-mode-card{padding:16px}.sensor-mode-card .mode-button{min-height:132px;padding:20px 16px 10px 16px}}
.work-mode-card{background:var(--bg-secondary);border-radius:24px;padding:24px}.work-mode-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.work-mode-card .card-title{font-size:var(--text-h1);font-weight:var(--text-weight-h1);color:var(--text-primary);margin:0}.work-mode-card .work-mode-content{width:100%;padding:0;display:flex;flex-direction:column}.work-mode-card .mode-options{width:100%;display:flex;gap:8px}.work-mode-card .mode-button{height:200px;width:25%;display:flex;flex-direction:column;padding:28px 8px 24px 14px;border:2px solid var(--bg-secondary);border-radius:24px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.work-mode-card .mode-button.mode-office{background:linear-gradient(180deg, var(--sensor-mode-bg) 100%, #008cff 0%)}.work-mode-card .mode-button.mode-highspeed{background:linear-gradient(180deg, var(--sensor-mode-bg) 100%, #FFBB46 0%)}.work-mode-card .mode-button.mode-gaming{background:linear-gradient(180deg, var(--sensor-mode-bg) 100%, #ff9900 0%)}.work-mode-card .mode-button.mode-berserk{background:linear-gradient(180deg, var(--sensor-mode-bg) 100%, #ff0000 0%)}.work-mode-card .mode-button .mode-bg-img{position:absolute;top:0;left:0;width:100%;height:100%;transition:filter .3s ease;z-index:0}.work-mode-card .mode-button .mode-check-icon{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;opacity:0;font-size:20px;transform:scale(1);transition:all .3s ease;z-index:2;color:#fff}.work-mode-card .mode-button .mode-text-container{position:relative;z-index:1;padding:12px 0 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;min-height:152px}.work-mode-card .mode-button .mode-text-container .mode-icon-placeholder{display:flex;align-items:center;justify-content:center;margin-bottom:12px}.work-mode-card .mode-button .mode-text-container .mode-icon-placeholder .mode-icon{font-size:32px;color:var(--sensor-mode-icon);transition:color .3s ease}.work-mode-card .mode-button .mode-text-container .mode-label{font-size:var(--text-h2);font-weight:var(--text-weight-h2);letter-spacing:.5px;transition:color .3s ease;margin-bottom:4px;color:var(--sensor-mode-label)}.work-mode-card .mode-button .mode-text-container .mode-description{font-size:12px;color:var(--sensor-mode-description);font-weight:var(--text-weight-caption);text-align:left;line-height:1.5;word-break:break-all;transition:color .3s ease}.work-mode-card .mode-button:not(.active) .mode-bg-img{filter:grayscale(1) opacity(0.2)}.work-mode-card .mode-button:disabled,.work-mode-card .mode-button[aria-disabled=true]{cursor:not-allowed}.work-mode-card .mode-button:not(.active):not(:disabled):not([aria-disabled=true]):hover .mode-bg-img{filter:grayscale(0.4) opacity(0.6)}.work-mode-card .mode-button:not(.active):not(:disabled):not([aria-disabled=true]):hover .mode-icon{color:#fff}.work-mode-card .mode-button.active .mode-bg-img{filter:grayscale(0) opacity(1)}.work-mode-card .mode-button.active .mode-check-icon{opacity:1;transform:scale(1)}.work-mode-card .mode-button.active.mode-office{background:linear-gradient(180deg, var(--sensor-mode-bg-active) 100%, #008cff 0%)}.work-mode-card .mode-button.active.mode-highspeed{background:linear-gradient(180deg, var(--sensor-mode-bg-active) 100%, #FFBB46 0%)}.work-mode-card .mode-button.active.mode-gaming{background:linear-gradient(180deg, var(--sensor-mode-bg-active) 100%, #ff9900 0%)}.work-mode-card .mode-button.active.mode-berserk{background:linear-gradient(180deg, var(--sensor-mode-bg-active) 100%, #ff0000 0%)}.work-mode-card .mode-button.mode-office.active{border-color:#226cff}.work-mode-card .mode-button.mode-office.active .mode-icon-placeholder .mode-icon{color:#fff}.work-mode-card .mode-button.mode-office.active .mode-label{background:linear-gradient(90deg, #59e1ff 0%, #2069ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}.work-mode-card .mode-button.mode-highspeed.active{border-color:#ffbb46}.work-mode-card .mode-button.mode-highspeed.active .mode-icon-placeholder .mode-icon{color:#fff}.work-mode-card .mode-button.mode-highspeed.active .mode-label{background:linear-gradient(90deg, #FFB820 0%, #FF8419 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}.work-mode-card .mode-button.mode-gaming.active{border-color:#ff5019}.work-mode-card .mode-button.mode-gaming.active .mode-icon-placeholder .mode-icon{color:#fff}.work-mode-card .mode-button.mode-gaming.active .mode-label{background:linear-gradient(90deg, #ff9437 0%, #ff3f1d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}.work-mode-card .mode-button.mode-berserk.active{border-color:#ff2c2c}.work-mode-card .mode-button.mode-berserk.active .mode-icon-placeholder .mode-icon{color:#fff}.work-mode-card .mode-button.mode-berserk.active .mode-label{background:linear-gradient(90deg, #ff635b 0%, #ff2020 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}@media(max-width: 1024px){.work-mode-card{padding:20px}.work-mode-card .mode-options{flex-wrap:wrap;gap:10px}.work-mode-card .mode-button{width:calc(50% - 5px);flex:0 0 calc(50% - 5px);height:auto;min-height:160px;padding:22px 14px 16px 16px}.work-mode-card .mode-button .mode-text-container{min-height:120px}}@media(max-width: 520px){.work-mode-card .mode-button{width:100%;flex:0 0 100%;min-height:140px}}
.performance-page{display:flex;width:100%;height:100%;padding:0;box-sizing:border-box}.performance-left{width:calc(100% - 740px);display:flex;align-items:center;justify-content:center}.performance-right{display:flex;flex-direction:column;gap:16px;width:740px}@media(max-width: 1400px){.performance-page{padding:0 20px 24px 20px}.performance-left{flex:0 0 40%}.performance-right{flex:1 1 60%}}.battery-life-card--placeholder{background:var(--bg-secondary);border-radius:24px;padding:24px}.battery-life-card--placeholder .battery-placeholder-text{margin:0;color:var(--text-secondary);font-size:14px}@media(max-width: 1024px){.performance-page{flex-direction:column;height:auto;padding:0 16px 20px 16px}.performance-left,.performance-right{flex:0 0 auto;width:100%;max-width:100%}}@media(max-width: 480px){.performance-page{padding:0 12px 16px 12px}}
.sensor-rotation-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px;padding:20px 0 48px 0}.sensor-rotation-container .sensor-rotation-dial{position:relative;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-dial-image{width:100%;height:100%;object-fit:contain;display:block;opacity:1}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-track{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-scale{position:absolute;left:50.3%;top:51.2%;transform:translate(-50%, -50%);width:283px;height:283px;pointer-events:none;z-index:2;opacity:1}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-arc{transition:stroke .15s ease}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-indicator{position:absolute;width:12px;height:48px;border-radius:6px;border:none;overflow:visible;isolation:isolate;z-index:3;transition:none}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-indicator::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;z-index:1;pointer-events:none}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-indicator::before{content:"";position:absolute;inset:-4px;border-radius:28px;background:rgba(184,184,184,.4);opacity:1;box-shadow:none;transition:opacity .12s ease,transform .12s ease;backdrop-filter:blur(8.8px);-webkit-backdrop-filter:blur(8.8px);z-index:0;pointer-events:none}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-indicator:hover::before{box-shadow:var(--slider-thumb-shadow)}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-indicator:active{cursor:grabbing}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-center{position:absolute;left:50.2%;top:56%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-mouse-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:134px;height:134px}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-mouse-rotate{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:50% 56%}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-mouse-image{width:100%;height:100%;object-fit:contain}.sensor-rotation-container .sensor-rotation-dial .sensor-rotation-value{position:relative;z-index:1;margin-top:16px;margin-left:5.4px;font-size:18px;font-weight:700;color:var(--text-primary);line-height:1.2}.sensor-rotation-container.dragging .sensor-rotation-indicator::before{opacity:1}.sensor-rotation-container .sensor-rotation-btn{width:48px;height:48px;border:none;border-radius:8px;background:var(--btn-default-bg);cursor:pointer;color:var(--sensor-rotation-btn-icon);font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .3s;align-self:center}.sensor-rotation-container .sensor-rotation-btn .rotation-arrow-icon{font-size:24px !important}.sensor-rotation-container .sensor-rotation-btn:hover{background:var(--btn-default-bg-hover)}.sensor-rotation-container .sensor-rotation-btn:hover .rotation-arrow-icon{transform:scale(1.05)}.sensor-rotation-container .sensor-rotation-btn:active{background:var(--btn-default-bg-hover);transform:scale(0.95)}
.mouse-setting-page{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;min-width:0;min-height:0;display:flex;flex-direction:column}.mouse-setting-content{width:100%;margin:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;align-items:start;min-width:0;flex:1}.setting-column{display:flex;flex-direction:column;width:100%;min-width:0}.setting-column section{height:145px;padding:32px;box-sizing:border-box;background:var(--bg-secondary);border-radius:16px;transition:all .3s ease;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.setting-column section h3{font-weight:700;font-size:16px;color:var(--text-primary);margin-bottom:8px}.setting-column section p{font-size:14px !important;font-weight:400 !important;color:var(--text-body-color)}.setting-column section:has(>div:first-child>h3+div)>div:first-child{padding-right:72px;box-sizing:border-box}.setting-column section:has(>div:first-child>h3+div)>div:first-child>h3+div{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin-left:0;display:flex;align-items:center;justify-content:flex-end;min-height:24px}.setting-column section:has(>div:first-child>h3+div)>div:first-child>h3+div>*{transform:scale(1.1667);transform-origin:right center}.setting-column section:has(>div:first-child>h3+div)>p{padding-right:76px;box-sizing:border-box}.setting-column section:has(.sensor-rotation-container){height:467px;justify-content:flex-start}.setting-column section:has([class*=radioGroup]){height:auto;min-height:145px;justify-content:flex-start}.setting-column section.freq-parameter-light-section{height:auto;min-height:145px;justify-content:flex-start}.setting-column section [class*=radioGroup]{flex-wrap:wrap;align-content:flex-start;gap:12px 20px !important;min-width:0;width:100%;max-width:100%}.setting-column section [class*=content]{min-width:0;max-width:100%}.freq-light-select{width:100%;max-width:360px;margin-top:4px;padding:10px 14px;font-size:14px;line-height:1.4;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-color, rgba(255, 255, 255, 0.35));border-radius:10px;cursor:pointer;box-sizing:border-box}.freq-light-select:focus{outline:none;border-color:var(--color-primary, #ff7a00)}.parameter-slider-wrap{width:100%;min-width:0}.parameter-slider-wrap .el-slider-control{background-color:var(--bg-tertiary)}.windows-scroll-container{display:flex;align-items:center;gap:16px;width:100%;flex-wrap:wrap}.checkbox-container{display:flex;align-items:center;gap:8px}.checkbox-container span{color:var(--text-primary) !important;font-size:14px}.mouse-setting-page::-webkit-scrollbar{display:none}.mouse-setting-page{scrollbar-width:none;-ms-overflow-style:none}
.lighting-page{width:100%;height:100%;padding:32px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;min-width:0;min-height:0;background:var(--bg-secondary);border-radius:24px}.lighting-content{width:100%;display:flex;flex-direction:row;align-items:flex-start;min-width:0}.lighting-column{flex:1 1 0;width:50%;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:20px;padding-right:30px}.lighting-column:last-of-type{padding-right:0;padding-left:30px}.lighting-column section{padding:12px 0 0 0;width:100%}.lighting-column section h3{color:var(--text-primary);font-size:var(--text-h3);font-weight:var(--text-weight-h3)}.lighting-column section p{color:var(--text-secondary)}.lighting-content:not(:has(.lighting-divider)) .lighting-column{flex:1 1 100%;width:100%;max-width:100%;padding-left:0;padding-right:0}.lighting-divider{flex:0 0 1px;width:1px;align-self:stretch;background:var(--line-color)}@media(max-width: 1024px){.lighting-page{padding:24px}.lighting-content{flex-direction:column}.lighting-column{flex:1 1 100%;width:100%;max-width:100%;padding-left:0 !important;padding-right:0 !important}.lighting-divider{display:none}}.lighting-section-title{font-size:var(--text-h1);font-weight:var(--text-weight-h1);color:var(--text-primary);margin:0 0 4px 0}.lighting-section{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:0}.lighting-mode-buttons{display:flex;flex-wrap:wrap;gap:8px}.lighting-mode-btn{padding:10px 16px;background:var(--btn-default-bg);border:none;border-radius:8px;color:var(--btn-default-text);font-size:var(--text-body);font-weight:var(--text-weight-body);cursor:pointer;transition:all .2s ease;white-space:nowrap;outline:none}.lighting-mode-btn:hover:not(:disabled):not([aria-disabled=true]):not(.active){background:var(--btn-default-bg-hover);color:var(--btn-default-text-hover)}.lighting-mode-btn.active{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);color:var(--btn-primary-text)}.lighting-mode-btn.active:hover:not(:disabled):not([aria-disabled=true]){background:var(--btn-primary-bg-hover);border-color:var(--btn-primary-bg-hover)}.lighting-mode-btn:disabled,.lighting-mode-btn[aria-disabled=true]{background:var(--btn-disabled-bg);color:var(--btn-disabled-text);cursor:not-allowed}.lighting-slider-wrap{width:100%;min-width:0}.lighting-slider-wrap .el-slider-control{background-color:var(--bg-tertiary)}.lighting-slider-wrap--relative{position:relative}.receiver-lighting-disabled-hitbox{position:absolute;inset:0;z-index:2;cursor:not-allowed}.lighting-palette-inner{max-width:400px}.lighting-palette-disabled{opacity:.5}
.community-kb-lighting-preview,.community-kb-trigger-preview,.community-kb-advanced-preview,.community-kb-performance-preview,.community-mouse-changekey-preview,.community-mouse-trigger-preview,.community-mouse-performance-preview{width:100%;height:100%;min-height:0;box-sizing:border-box;padding:40px 0 0 0}.community-kb-lighting-preview,.community-kb-trigger-preview,.community-kb-advanced-preview{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;overflow:hidden}.community-kb-lighting-preview .lighting-tab{flex-shrink:0;width:250px;margin:10px auto 8px}.community-kb-lighting-preview .lighting-keyboard{flex:1 1 0;min-height:0;overflow:hidden}.community-kb-lighting-preview .lighting-main{flex:0 0 50%;height:50%;max-height:50%;min-height:0;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;border-radius:16px}.community-kb-lighting-preview .lighting-keyboard>.shared-keyboard-fit-root,.community-kb-trigger-preview .trigger-keyboard>.shared-keyboard-fit-root,.community-kb-advanced-preview .advancedKey-keyboard>.shared-keyboard-fit-root{flex:1 1 auto;width:100%;height:100%;min-height:0}.community-kb-lighting-preview .lighting-keyboard-display,.community-kb-trigger-preview .trigger-keyboard-display,.community-kb-advanced-preview .advanced-key-keyboard-display{display:flex;justify-content:center;align-items:center}.community-kb-advanced-preview .advancedKey-main{min-height:0;overflow:hidden;display:flex;flex-direction:column;border-radius:16px}.community-kb-advanced-preview .advancedKey-main .setting-before-container,.community-kb-advanced-preview .advancedKey-main .setting-after-container{flex:1;min-height:0;height:100%}.community-kb-advanced-preview .advancedKey-main .setting-before{flex:1;min-height:0;height:100%}.community-kb-advanced-preview .advancedKey-main .setting-mode,.community-kb-advanced-preview .advancedKey-main .setting-advancedKey{min-height:0;overflow:hidden}.community-kb-advanced-preview .advancedKey-main .setting-mode-list,.community-kb-advanced-preview .advancedKey-main .setting-advancedKey-list{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.community-kb-advanced-preview .advancedKey-main .setting-mode-list::-webkit-scrollbar,.community-kb-advanced-preview .advancedKey-main .setting-advancedKey-list::-webkit-scrollbar{display:none}.community-kb-trigger-preview .trigger-keyboard{flex:1 1 0;min-height:160px;max-height:46%;overflow:hidden}.community-kb-trigger-preview .trigger-main{flex:1 1 0;min-height:220px;height:auto !important;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;margin-top:16px;padding:24px 32px 32px;background:var(--taigger-bg);border-radius:16px}.community-kb-trigger-preview .trigger-main .triggerOperation{flex:1 1 0;min-height:0;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.community-kb-trigger-preview .trigger-main .triggerOperation::-webkit-scrollbar{display:none}.community-kb-lighting-preview .lighting-main .lightingOperation{flex:1 1 0;min-height:0;height:0;width:100%;display:flex;gap:32px;overflow:hidden}.community-kb-lighting-preview .lighting-main .lightingOperation .section-child-box{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--lighting-operation-line);padding-right:32px;overflow:hidden}.community-kb-lighting-preview .lighting-main .lightingOperation .section-child-box>*{flex:1 1 0;min-height:0;height:auto;margin-bottom:0 !important;display:flex;flex-direction:column;overflow:hidden}.community-kb-lighting-preview .lighting-main .lightingOperation .section-child-box>*>*:first-child{flex-shrink:0}.community-kb-lighting-preview .lighting-main .lightingOperation .section-child-box>*>*:last-child{flex:1 1 0;min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden}.community-kb-lighting-preview .lighting-main .lightingOperation .section-child-box .formSection-box{flex:1 1 0;min-height:0;height:0;width:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.community-kb-lighting-preview .lighting-main .lightingOperation .section-child-box .formSection-box::-webkit-scrollbar{display:none}.community-kb-lighting-preview .lighting-main .lightingOperation .section-child-box:last-child{border-right:none;padding-right:0}.community-kb-lighting-preview .lighting-main .lightingOperation .section-child-box.section-child-speedAndBrightness-box .formSection-box{container-type:inline-size;container-name:lighting-speed-panel}.community-kb-lighting-preview .lighting-main .lightingOperation.lightingOperation--light-strip .section-child-box:nth-child(3) .formSection-box{overflow-x:hidden;overflow-y:auto}.community-kb-lighting-preview .lighting-main .lightingOperation .speed-brightness-row{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:20px}.community-kb-lighting-preview .lighting-main .lightingOperation .speed-brightness-row .speed-brightness-item{flex:1 1 calc(50% - 10px);min-width:180px;max-width:100%;flex-shrink:0}.community-kb-lighting-preview .lighting-main .lightingOperation .direction-control{display:flex;gap:8px}.community-kb-lighting-preview .lighting-main .lightingOperation .direction-control>button{padding-left:20px;padding-right:20px;min-width:0}.community-kb-lighting-preview .lighting-main .lightingOperation .paletteConfig{width:100%;display:flex;flex-wrap:wrap;gap:10px;overflow:visible}.community-kb-lighting-preview .lighting-main .lightingOperation .paletteConfig .paletteConfig-item-wrap{position:relative}.community-kb-lighting-preview .lighting-main .lightingOperation .paletteConfig .paletteConfig-item{width:24px;height:24px;border-radius:50%;border:none;cursor:default;flex-shrink:0;padding:0;transition:transform .15s ease}.community-kb-lighting-preview .lighting-main .lightingOperation .paletteConfig .paletteConfig-item.paletteConfig-item-rainbow{background:url(/images/colorful-002.91ff50432e5dd9a38047.png) no-repeat center center;background-size:100% 100%}@container lighting-speed-panel (max-width: 680px){.speed-brightness-row{flex-direction:column;flex-wrap:nowrap;gap:12px}.speed-brightness-row .speed-brightness-item{width:100%;flex:0 0 auto;min-width:0}}.community-preview-stage__content>.change-key-page{width:100%;height:100%;min-height:0;box-sizing:border-box}.community-preview-stage__content>.change-key-page .layout-content{flex:1;min-height:250px;width:100%;padding-left:56px;padding-right:56px;box-sizing:border-box}.community-preview-stage__content>.change-key-page .layout-content>.shared-keyboard-fit-root{flex:1 1 0;min-height:0;width:100%;height:100%}.community-preview-stage__content>.change-key-page .keyboard-with-layers{width:100%;height:100%;min-height:0}.community-preview-stage__content>.change-key-page .layer-switcher{flex-shrink:0}.community-kb-performance-preview{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start;padding:40px;box-sizing:border-box}.community-kb-performance-preview .performance-section{border-radius:16px;height:auto;min-height:145px;overflow:visible;padding:24px !important}.community-kb-performance-preview .radio-group.sleep-time{margin-top:16px;width:100%;min-width:0}.community-kb-performance-preview .radio-group.sleep-time .community-preview-inline-row{min-width:0}.community-kb-performance-preview .radio-group.sleep-time .parameter-slider-wrap{flex:1;min-width:0}.community-kb-performance-preview .radio-group.sleep-time .parameter-slider-wrap .slider-box,.community-kb-performance-preview .radio-group.sleep-time .parameter-slider-wrap .el-slider-box{width:100%}.community-kb-performance-preview .radio-group.sleep-time .checkbox-container{flex-shrink:0}.community-kb-performance-preview .radio-group.sleep-time .checkbox-container span{color:var(--text-primary) !important;opacity:1;white-space:nowrap}.community-kb-performance-preview .radio-group.polling-rate{flex-wrap:wrap;align-items:center;align-content:flex-start;column-gap:20px;row-gap:12px}.community-kb-performance-preview .radio-group.polling-rate>label{flex-shrink:0;margin:0}.community-kb-performance-preview .radio-group.debounce-mode{flex-wrap:wrap;align-items:center;align-content:flex-start;column-gap:20px;row-gap:12px;margin-top:16px}.community-kb-performance-preview .radio-group.debounce-mode>label{flex-shrink:0;margin:0}.community-mouse-changekey-preview{display:flex;flex:1 1 0;align-items:center;justify-content:center;align-self:stretch;width:100%;min-height:0;padding:8px 16px 16px;box-sizing:border-box;overflow:hidden}.community-mouse-changekey-preview.changekey-page{width:100%;height:auto;overflow:hidden}.community-mouse-changekey-preview .changekey-left{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;max-width:100%;margin-top:0 !important;padding-top:0;overflow:visible}.community-mouse-changekey-preview .mouse-container{width:100%;height:100%;max-width:960px;max-height:100%;min-height:0;margin-bottom:0;padding:min(72px,14cqh) 0 min(24px,5cqh);box-sizing:border-box;container-type:size;container-name:mouse-panel}.community-mouse-changekey-preview .mouse-visualizer{width:min(264px,(100cqh - 32px)*264/474,(100cqw - 220px)*264/474);height:auto;aspect-ratio:264/474;flex-shrink:0}.community-mouse-changekey-preview .mouse-button-hotspot{width:10.6%;height:auto;aspect-ratio:1}.community-mouse-changekey-preview .button-label{min-width:96px;max-width:120px;padding:12px 16px}.community-mouse-changekey-preview .label-text{font-size:14px}.community-mouse-changekey-preview .label-subtext{font-size:12px}.community-mouse-dpi-preview{width:100%;height:100%;min-height:0;padding:0;box-sizing:border-box;display:flex;flex-direction:column}.community-mouse-dpi-preview .dpi-setting-page{flex:1;min-height:0;background:rgba(0,0,0,0);border-radius:0}.community-mouse-dpi-preview .dpi-card{border-radius:16px}.community-mouse-dpi-color-popup{position:fixed;z-index:1300;width:420px;box-sizing:border-box;background:var(--bg-secondary);border-radius:12px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);overflow:hidden}.community-mouse-dpi-color-popup .palette-el-box{opacity:1 !important;cursor:default}.community-mouse-dpi-color-popup .palette-el-saturation,.community-mouse-dpi-color-popup .palette-el-hueSlider,.community-mouse-dpi-color-popup .palette-el-presetColors,.community-mouse-dpi-color-popup .palette-el-clear-btn{pointer-events:none !important;cursor:default !important}.community-mouse-dpi-color-popup .palette-el-rgb-hex-tab span{pointer-events:auto !important;cursor:pointer !important}.community-mouse-dpi-color-popup .palette-el-hex-group input,.community-mouse-dpi-color-popup .palette-el-rgb-group input{pointer-events:none !important;cursor:default !important}.community-mouse-trigger-preview{display:flex;flex:1 1 0;align-items:center;justify-content:center;align-self:stretch;width:100%;min-height:0;padding:8px 16px 16px;box-sizing:border-box;overflow:hidden}.community-mouse-trigger-preview .mouse-container{width:100%;height:100%;max-width:960px;max-height:100%;min-height:0;margin-bottom:0;padding:min(72px,14cqh) 0 min(24px,5cqh);box-sizing:border-box;container-type:size;container-name:mouse-panel}.community-mouse-trigger-preview .mouse-visualizer{width:min(264px,(100cqh - 32px)*264/474,(100cqw - 120px)*264/474);height:auto;aspect-ratio:264/474;flex-shrink:0}.community-mouse-trigger-preview .mouse-button-hotspot{width:10.6%;height:auto;aspect-ratio:1}.community-mouse-trigger-preview .button-label{min-width:96px;max-width:120px;padding:12px 16px}.community-mouse-trigger-preview .label-text{font-size:14px}.community-mouse-trigger-preview .label-subtext{font-size:12px}.community-mouse-performance-preview.performance-page{display:block;margin-top:-36px !important}.community-mouse-performance-preview.performance-page .performance-right{width:100%;max-width:720px;margin:0 auto}.community-mouse-performance-preview.performance-page .report-rate-card,.community-mouse-performance-preview.performance-page .battery-life-card,.community-mouse-performance-preview.performance-page .sensor-mode-card,.community-mouse-performance-preview.performance-page .work-mode-card{border-radius:16px}.community-mouse-parameter-preview{width:100%;height:100%;min-height:0;padding:40px;box-sizing:border-box;overflow-y:auto}.community-mouse-parameter-preview .mouse-setting-content{gap:16px;align-content:start;grid-template-columns:repeat(2, minmax(0, 1fr))}.community-mouse-parameter-preview .setting-column{min-width:0}.community-mouse-parameter-preview .setting-column section{border-radius:16px;height:auto;min-height:145px;overflow:hidden !important;padding:24px !important}.community-mouse-parameter-preview .setting-column section:has(>div:first-child>h3+div)>div:first-child{padding-right:64px}.community-mouse-parameter-preview .setting-column section:has(>div:first-child>h3+div)>div:first-child>h3+div{right:24px}.community-mouse-parameter-preview .setting-column section:has(>div:first-child>h3+div)>p{padding-right:68px}.community-mouse-parameter-preview .setting-column section [class*=radioGroup]{flex-wrap:wrap;align-content:flex-start;gap:12px 20px !important;min-width:0;width:100%;max-width:100%}.community-mouse-parameter-preview .setting-column section [class*=content]{min-width:0;max-width:100%}.community-mouse-parameter-preview .setting-column section:has([class*=radioGroup]){justify-content:flex-start}.community-mouse-parameter-preview .community-preview-readonly-interaction{pointer-events:none;user-select:none}.community-mouse-parameter-preview .community-preview-readonly-interaction:has(.sensor-rotation-container){display:flex;justify-content:center;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.community-mouse-parameter-preview .setting-column section:has(.sensor-rotation-container){container-type:inline-size;min-height:auto !important;height:auto !important;overflow:hidden !important;padding-bottom:16px !important}.community-mouse-parameter-preview .sensor-rotation-container{--sensor-rotation-layout-width: 572px;--sensor-rotation-scale: min( 1, calc((100cqw - 48px) / var(--sensor-rotation-layout-width)) );flex-shrink:0;gap:12px;width:min(100%,var(--sensor-rotation-layout-width));max-width:100%;padding:4px 0 8px;transform:scale(var(--sensor-rotation-scale));transform-origin:top center;margin-left:calc(100%*(var(--sensor-rotation-scale) - 1)/2);margin-right:calc(100%*(var(--sensor-rotation-scale) - 1)/2);margin-bottom:calc((var(--sensor-rotation-scale) - 1)*300px)}.community-mouse-parameter-preview .sensor-rotation-container .sensor-rotation-btn{flex-shrink:0}.community-preview-inline-row{display:flex;align-items:center;gap:16px;width:100%}.community-preview-radio-row{display:flex;flex-wrap:wrap;gap:12px 20px}.community-preview-column-title{margin:0 0 12px;font-size:16px;font-weight:600}.community-mouse-lighting-preview.lighting-page{margin-top:40px;width:100%;height:100%;min-height:0;padding:24px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;background:var(--bg-secondary);border-radius:16px}.community-mouse-lighting-preview.lighting-page .lighting-content{width:100%;align-items:flex-start}.community-mouse-lighting-preview.lighting-page .lighting-column{gap:20px}.community-mouse-lighting-preview.lighting-page .lighting-column section{padding:12px 0 0;width:100%}.community-mouse-lighting-preview.lighting-page .lighting-divider{flex:0 0 1px;align-self:stretch}.community-mouse-lighting-preview.lighting-page .lighting-mode-btn{pointer-events:none;cursor:default}.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette .palette-el-box{opacity:1 !important}.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette.lighting-palette-disabled{opacity:1 !important}.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette .palette-el-saturation,.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette .palette-el-hueSlider,.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette .palette-el-presetColors,.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette .palette-el-clear-btn{pointer-events:none !important;cursor:default !important}.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette .palette-el-rgb-hex-tab span{pointer-events:auto !important;cursor:pointer !important}.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette .palette-el-hex-group input,.community-mouse-lighting-preview.lighting-page .community-mouse-lighting-palette .palette-el-rgb-group input{pointer-events:none !important;cursor:default !important}@media(max-width: 1024px){.community-mouse-lighting-preview.lighting-page{padding:24px}}@media(max-width: 1100px){.community-kb-lighting-preview .lighting-main .lightingOperation{flex-direction:column;gap:24px}.community-kb-lighting-preview .lighting-main .section-child-box,.community-kb-lighting-preview .lighting-main .section-child-box.section-child-speedAndBrightness-box{flex:1 1 auto;width:100%;border-right:none;padding-right:0}.community-kb-trigger-preview .trigger-main .triggerOperation{flex-direction:column}.community-kb-trigger-preview .trigger-main .triggerOperation .triggerOperation-item{width:100%}.community-kb-trigger-preview .trigger-main .triggerOperation .triggerOperation-item .routineGifMusic{border-right:none}.community-kb-performance-preview{grid-template-columns:1fr}.community-mouse-parameter-preview .mouse-setting-content{grid-template-columns:1fr}.community-mouse-changekey-preview{padding:8px 12px 12px}.community-mouse-changekey-preview .mouse-visualizer{width:min(264px,(100cqh - 24px)*264/474,(100cqw - 160px)*264/474)}.community-mouse-changekey-preview .button-label{min-width:80px;max-width:108px;padding:10px 12px}.community-mouse-lighting-preview.lighting-page .lighting-content{flex-direction:column}.community-mouse-lighting-preview.lighting-page .lighting-column{padding-left:0 !important;padding-right:0 !important}.community-mouse-lighting-preview.lighting-page .lighting-divider{display:none}}
/* Global class names for Palette — duplicated in main-app modal.css for qiankun portal */
/* 由原 Palette.module.css 转为全局类名 palette-sc-* */

.palette-sc-root {
  width: 100%;
  border-radius: 8px;
  padding: 16px;
  user-select: none;
}

.palette-sc-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ==================== 调色板区域 ==================== */
.palette-sc-paletteArea {
  width: 100%;
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

/* 饱和度面板 - 外层容器 */
.palette-sc-saturationPanel {
  /* width: calc(100% - 120px) !important; */
  position: relative;
  /* border-radius: 8px; <--- 移到了 .palette-sc-saturationMask */
  cursor: crosshair;
  /* overflow: hidden;   <--- 已移除：允许 Pointer 溢出 */
  flex-shrink: 0;
  z-index: 1;
  overflow: hidden;
}

/* 新增：内部遮罩层 - 负责圆角和背景裁切 */
.palette-sc-saturationMask {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden; /* 渐变色溢出隐藏在这里 */
  z-index: 0;
}

.palette-sc-saturationWhite {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}

.palette-sc-saturationBlack {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000000, transparent);
}

.palette-sc-saturationPointer {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-8px, -8px);
  z-index: 10;
  pointer-events: none; /* 关键：防止拖拽时鼠标正好在点上导致事件目标变化 */
}

.palette-sc-saturationCircle {
  width: 100%;
  height: 100%;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 色相条 */
.palette-sc-hueSlider {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    #ff0000 0%,
    #ffff00 17%,
    #00ff00 33%,
    #00ffff 50%,
    #0000ff 67%,
    #ff00ff 83%,
    #ff0000 100%
  );
}

.palette-sc-huePointer {
  width: 100%;
  position: absolute;
  left: 50%;
  height: 4px;
  transform: translate(-50%, -2px);
  pointer-events: none;
}

.palette-sc-hueCircle {
  height: 100%;
  border: 2px solid #ffffff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* 预设颜色 */
.palette-sc-presetColors {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.palette-sc-presetColor {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.palette-sc-presetColor:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.palette-sc-presetColor:active {
  transform: scale(0.95);
}

/* ==================== 输入区域 ==================== */
.palette-sc-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* RGB 组 */
.palette-sc-rgbGroup {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  /* background: rgba(0, 0, 0, 0.2); */
  border-radius: 6px;
  /* padding: 4px 12px; */
}

.palette-sc-rgbLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--palette-label-color);
  min-width: 32px;
}

.palette-sc-rgbInputs {
  display: flex;
  gap: 4px;
  flex: 1;
}

/* 单个颜色输入（R/G/B） */
.palette-sc-colorInput {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width:auto;
  /* background: rgba(0, 0, 0, 0.3); */
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  border-radius: 4px;
  flex: 1 1 0;
  min-width: 0;
  transition: all 0.2s;
}

/* .palette-sc-colorInput:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
} */

.palette-sc-colorLabel {
  font-size: 12px;
  font-weight: 700;
  /* min-width: 12px; */
  text-align: center;
  margin-bottom: 2px;
  color: var(--palette-colorLabel-color)
}

.palette-sc-colorInput input {
  /* flex: 1; */
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--palette-colorLabel-color);
  font-size: 13px;
  text-align: center;
  padding: 0;
}

.palette-sc-colorInput input:focus {
  outline: none;
}

.palette-sc-colorInput input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* HEX 组 */
.palette-sc-hexGroup {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  /* background: rgba(0, 0, 0, 0.2); */
  border-radius: 6px;
  /* padding: 4px 12px; */
}

.palette-sc-hexLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--palette-label-color);
  min-width: 32px;
}

.palette-sc-hexInputWrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  /* background: rgba(0, 0, 0, 0.3); */
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  border-radius: 4px;
  padding: 6px 10px;
  flex: 1;
  transition: all 0.2s;
}

/* .palette-sc-hexInputWrapper:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
} */

.palette-sc-hexPrefix {
  font-size: 13px;
  font-weight: 600;
  color: var(--palette-colorLabel-color);;
}

.palette-sc-hexInputWrapper input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--palette-colorLabel-color);
  font-size: 14px;
  text-align: left;
  padding: 0;
  letter-spacing: 0.5px;
}

.palette-sc-hexInputWrapper input:focus {
  outline: none;
}

.palette-sc-hexInputWrapper input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 移除数字输入框的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}
.palette-el-box{width:100%;height:100%;display:flex;flex-direction:column}.palette-el-box .palette-el-saturation-hueSlider-presetColors{width:100%;height:194px;display:flex}.palette-el-box .palette-el-saturation-hueSlider-presetColors .palette-el-saturation{width:calc(100% - 142px);height:100%}.palette-el-box .palette-el-saturation-hueSlider-presetColors .palette-el-hueSlider{width:44px;height:100%;margin-left:14px}.palette-el-box .palette-el-saturation-hueSlider-presetColors .palette-el-presetColors{width:60px;height:100%;margin-left:24px}.palette-el-box .palette-el-rgb-hex-clearBtn{width:100%;height:36px;margin-top:16px;display:flex}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-rgb-hex-group{width:calc(100% - 84px);height:100%;display:flex}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-rgb-hex-group .palette-el-rgb-hex-tab{width:118px;height:100%;padding:2px;background:var(--palette-bg-color);display:flex;border-radius:8px;flex-shrink:0}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-rgb-hex-group .palette-el-rgb-hex-tab span{width:50%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:6px;color:var(--palette-label-color);font-size:14px;cursor:pointer}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-rgb-hex-group .palette-el-rgb-hex-tab span.palette-el-tab-active{background:var(--palette-el-tab-active-bg);color:var(--palette-el-tab-active-color)}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-rgb-hex-group .palette-el-rgb-group,.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-rgb-hex-group .palette-el-hex-group{width:calc(100% - 120px);height:100%;margin-left:2px;border:1px solid var(--palette-el-hex-group-border);border-radius:8px}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-clear-btn{width:142px;height:36px;padding-left:16px;flex-shrink:0}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-clear-btn span{width:100%;height:100%;background:var(--palette-el-clear-btn-bg);color:var(--palette-el-clear-btn-color);display:flex;justify-content:center;align-items:center;border-radius:8px;font-size:14px;cursor:pointer;transition:background .15s ease}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-clear-btn span:not(.palette-el-clear-btn-disabled):hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.05)),var(--palette-el-clear-btn-bg)}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-clear-btn span:not(.palette-el-clear-btn-disabled):active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.09)),var(--palette-el-clear-btn-bg)}.palette-el-box .palette-el-rgb-hex-clearBtn .palette-el-clear-btn span.palette-el-clear-btn-disabled{opacity:.5;cursor:not-allowed}.palette-el-box.disabled{opacity:.45;cursor:not-allowed}
/* packages/shared-components/src/components/ColorPicker/ColorPickerPanel.module.css */

.main-panel_mk4QH {
  padding: 16px;
  user-select: none;
}

/* ==================== 颜色选择区 ==================== */
.main-pickerArea_qK2O6 {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

/* 饱和度面板 */
.main-saturationPanel_RrT0y {
  position: relative;
  border-radius: 6px;
  cursor: crosshair;
  overflow: hidden;
  flex-shrink: 0;
}

.main-saturationWhite_OhAPj {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}

.main-saturationBlack_G5iDP {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000000, transparent);
}

.main-saturationPointer_S7u8X {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-7px, -7px);
  cursor: pointer;
}

.main-saturationCircle_bt4EU {
  width: 100%;
  height: 100%;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 色相条 */
.main-hueSlider_B0Og8 {
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    #ff0000 0%,
    #ffff00 17%,
    #00ff00 33%,
    #00ffff 50%,
    #0000ff 67%,
    #ff00ff 83%,
    #ff0000 100%
  );
}

.main-huePointer_rwgvz {
  position: absolute;
  left: 50%;
  height: 4px;
  transform: translate(-50%, -2px);
  width: 100%;
}

.main-hueCircle_NPews {
  height: 100%;
  border: 2px solid #ffffff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* ==================== 输入区域 ==================== */
.main-inputs_OQsPG {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.main-inputLabel_saKGa {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  min-width: 32px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* RGB 组 */
.main-rgbGroup_RyD72 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
}

.main-rgbInputs_WojXJ {
  display: flex;
  gap: 6px;
  flex: 1;
}

.main-colorInput_ImSr2 {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 6px;
  flex: 1;
  transition: all 0.2s;
}

.main-colorInput_ImSr2:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
}

.main-colorLabel_yUcb5 {
  font-size: 11px;
  font-weight: 700;
  min-width: 10px;
  text-align: center;
}

.main-colorInput_ImSr2 input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  padding: 0;
}

.main-colorInput_ImSr2 input:focus {
  outline: none;
}

/* HEX 组 */
.main-hexGroup_BDJwH {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
}

.main-hexInputWrapper_doLV0 {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 8px;
  flex: 1;
  transition: all 0.2s;
}

.main-hexInputWrapper_doLV0:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
}

.main-hexPrefix_xXME9 {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.main-hexInputWrapper_doLV0 input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 12px;
  text-align: left;
  padding: 0;
}

.main-hexInputWrapper_doLV0 input:focus {
  outline: none;
}

/* 预设颜色网格 */
.main-presetColors_UCRa7 {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.main-presetColor_hhWrB {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.main-presetColor_hhWrB:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.main-presetColor_hhWrB:active {
  transform: scale(1.05);
}

/* 移除数字输入框箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* packages/shared-components/src/components/ColorPicker/ColorPicker.module.css */

.main-colorPicker_t_KFm {
  position: relative;
  display: inline-block;
}

.main-disabled_Fkycj {
  opacity: 0.5;
  pointer-events: none;
}

/* ==================== 单色模式 ==================== */
.main-singleMode_VXjQY {
  /* 单色模式样式 */
}

.main-singleColor_s_MHZ {
  position: relative;
  width: 120px;
  height: 48px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-singleColor_s_MHZ:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.main-singleColor_s_MHZ:active {
  transform: translateY(0);
}

.main-singleColor_s_MHZ.main-colorBlockActive_JSmIh {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.main-singleColor_s_MHZ .main-editButton_iyLIV {
  opacity: 0.8;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
}

.main-singleColor_s_MHZ:hover .main-editButton_iyLIV {
  opacity: 1;
}

.main-singleColor_s_MHZ .main-editButton_iyLIV svg {
  width: 14px;
  height: 14px;
}

/* ==================== 多色网格模式 ==================== */
.main-colorGrid_jE51c {
  display: grid;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px;
}

/* 颜色块 */
.main-colorBlock_yPcx8 {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  overflow: hidden;
}

.main-colorBlock_yPcx8:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
}

.main-colorBlock_yPcx8:active {
  transform: scale(0.98);
}

/* 选中的颜色块 */
.main-colorBlockActive_JSmIh {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* 编辑按钮 */
.main-editButton_iyLIV {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s;
  padding: 0;
  backdrop-filter: blur(4px);
}

.main-colorBlock_yPcx8:hover .main-editButton_iyLIV {
  opacity: 1;
}

.main-editButton_iyLIV:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.main-editButton_iyLIV:active {
  transform: scale(0.95);
}

.main-editButton_iyLIV svg {
  width: 12px;
  height: 12px;
}

/* ==================== 弹出层 ==================== */
.main-popover_wGCum {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  animation: main-popoverFadeIn_dJIPW 0.2s ease-out;
}

@keyframes main-popoverFadeIn_dJIPW {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-popoverContent_pL5_I {
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* 响应式：移动端 */
@media (max-width: 640px) {
  .main-colorGrid_jE51c {
    gap: 6px;
  }

  .main-colorBlock_yPcx8 {
    width: 40px;
    height: 40px;
  }

  .main-singleColor_s_MHZ {
    width: 100px;
    height: 42px;
  }

  .main-popover_wGCum {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @keyframes main-popoverFadeIn_dJIPW {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}


/*# sourceMappingURL=main.main.96386a54912492bb5786.css.map*/