/* 
   CSS 样式表
   项目：客户端控制器
   作者：ZWER
   日期：2025.10.9
   版本：V1.0
*/


/* =====================
   01 页面基础布局样式
   ===================== */

* {
  margin: 0;
  padding: 0;
}

a {
  position: relative;
  left: 0px;
  color: white;
  text-decoration: none;
  top: 25%;
}

html {
  /* font-size: 100px; */
  height: 100%;
  width: 100%;
  user-select: none;
  /* 背景颜色  */
  background-color: #c4c4c4;
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
  /* 背景颜色  */
  background-color: #c4c4c4;

}

#fullscreen_button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  background-image: url(../media/fullscreen_open.svg);
  background-size: 100%;
}

.iframe {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 100%;
  left: 0%;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
}

/* =====================
   02 工具面板样式
   ===================== */

.toolbar-container {
  position: fixed;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  justify-content: center;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  /* padding: 10px 16px; */
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toolbar-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
  color: #333;
}

.toolbar-btn:hover {
  background: #eaf8ff;
  /* transform: scale(1.05); */
}

.toolbar-btn:active {
  transform: scale(0.95);
}

.toolbar-btn.active {
  background: #007aff;
  color: white;
}

.toolbar-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* 阴影按钮图标尺寸调整 */
#shadowBtn svg {
  width: 33px;
  height: 33px;
}

/* =====================
   演示模式深色工具栏样式
   ===================== */

/* 演示模式下工具栏深色模式 */
body.show-mode-dark .toolbar-group {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.show-mode-dark .toolbar-btn {
  color: #e0e0e0;
}

body.show-mode-dark .toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.show-mode-dark .toolbar-btn.active {
  background: #007aff;
  color: white;
}

body.show-mode-dark .toolbar-btn:disabled {
  color: #666;
  opacity: 0.5;
}

body.show-mode-dark .toolbar-btn svg {
  stroke: currentColor;
  fill: currentColor;
}

/* 深色模式下的下拉菜单 */
body.show-mode-dark .dropdown-menu {
  background: rgba(30, 30, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.show-mode-dark .dropdown-item {
  color: #e0e0e0;
}

body.show-mode-dark .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 深色模式下的滑块和标签 */
body.show-mode-dark .opacity-panel label {
  color: #e0e0e0;
}

body.show-mode-dark .opacity-panel input[type="range"] {
  background: rgba(255, 255, 255, 0.1);
}

body.show-mode-dark .opacity-panel input[type="range"]::-webkit-slider-thumb {
  background: #007aff;
}

body.show-mode-dark .opacity-panel input[type="range"]::-moz-range-thumb {
  background: #007aff;
}

/* 深色模式下的颜色指示器 */
body.show-mode-dark .color-indicator {
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* 深色模式下的下拉箭头 */
body.show-mode-dark .dropdown-arrow {
  color: #e0e0e0;
  opacity: 0.8;
}

/* 深色模式下的分隔线 */
body.show-mode-dark .toolbar-divider {
  background: rgba(255, 255, 255, 0.2);
}

/* =====================
   演示/编辑按钮位置切换
   ===================== */

/* 确保 icon-bar 使用 flexbox */
.icon-bar {
  display: flex;
  flex-direction: column;
}

/* 编辑模式：存取、画笔、文字、图案、演示、背景、效果、设置 */
/* 按钮保持默认顺序，不需要调整 */
body:not(.show-mode-dark) #showBtn {
  order: 0;
  /* 默认顺序，在背景按钮之前 */
}

body:not(.show-mode-dark) #backgroundBtn {
  order: 0;
  /* 默认顺序，在演示按钮之后 */
}

body:not(.show-mode-dark) #effectBtn {
  order: 0;
  /* 默认顺序 */
}

/* 演示模式：效果、背景、编辑、设置 */
/* 调整按钮顺序：效果、背景、编辑（演示按钮变成的）、设置 */
body.show-mode-dark #effectBtn {
  order: -2;
  /* 效果按钮在第一个位置 */
}

body.show-mode-dark #backgroundBtn {
  order: -1;
  /* 背景按钮在第二个位置 */
}

body.show-mode-dark #showBtn {
  order: 0;
  /* 编辑按钮（演示按钮变成的）在第三个位置 */
}

/* 设置按钮保持在最后 */
body.show-mode-dark [data-panel="Settings"] {
  order: 1;
  /* 设置按钮在最后 */
}

/* =====================
   演示模式深色侧边栏样式
   ===================== */

/* 深色模式下的左侧图标栏 */
body.show-mode-dark .icon-bar {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* 深色模式下的图标按钮 */
body.show-mode-dark .icon-btn {
  color: #e0e0e0;
}

body.show-mode-dark .icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.show-mode-dark .icon-btn.active {
  background: #007aff;
  color: #ffffff;
}

body.show-mode-dark .icon-btn svg {
  fill: #e0e0e0;
}

body.show-mode-dark .icon-btn.active svg {
  fill: #ffffff !important;
}

/* 深色模式下的右侧面板 */
body.show-mode-dark .sidebar {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5),
    0 3px 10px rgba(0, 0, 0, 0.3);
}

/* 深色模式下的折叠按钮 */
body.show-mode-dark .collapse-btn {
  background: rgba(0, 122, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

body.show-mode-dark .collapse-btn:hover {
  background: rgba(0, 122, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

/* 深色模式下的面板标题 */
body.show-mode-dark .panel-header h4 {
  color: #e0e0e0;
}

/* 深色模式下的标签按钮 */
body.show-mode-dark .tab-button {
  color: #e0e0e0;
}

body.show-mode-dark .tab-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.show-mode-dark .tab-button.active {
  background: rgba(0, 122, 255, 0.3);
  color: #ffffff;
}

/* 深色模式下的面板内容文字 */
body.show-mode-dark .panel-content {
  color: #e0e0e0;
}

/* 深色模式下的输入框和按钮 */
body.show-mode-dark input[type="text"],
body.show-mode-dark input[type="range"],
body.show-mode-dark select,
body.show-mode-dark textarea {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.show-mode-dark input[type="text"]:focus,
body.show-mode-dark select:focus,
body.show-mode-dark textarea:focus {
  border-color: #007aff;
  background: rgba(255, 255, 255, 0.15);
}

/* 深色模式下的按钮 */
body.show-mode-dark .btn {
  background: rgba(0, 122, 255, 0.3);
  color: #ffffff;
  border: 1px solid rgba(0, 122, 255, 0.5);
}

body.show-mode-dark .btn:hover {
  background: rgba(0, 122, 255, 0.5);
  border-color: #007aff;
}

/* 深色模式下的标签文字 */
body.show-mode-dark label {
  color: #e0e0e0;
}

/* 深色模式下的工具按钮 */
body.show-mode-dark .tool-btn {
  color: #e0e0e0;
}

body.show-mode-dark .tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.show-mode-dark .tool-btn.active {
  background: #007aff;
  color: #ffffff;
}

body.show-mode-dark .tool-btn svg {
  fill: currentColor;
  stroke: currentColor;
}

/* 深色模式下的区域标题 */
body.show-mode-dark .regional-title {
  color: #e0e0e0;
}

/* 深色模式下的区域内容 */
body.show-mode-dark .regional-content {
  color: #e0e0e0;
}

/* 深色模式下的滚动条（仅保留字体下拉框和面板内容的滚动条样式） */
body.show-mode-dark .custom-font-select-list::-webkit-scrollbar-track {
  background: rgba(30, 30, 30, 0.8);
}

body.show-mode-dark .custom-font-select-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

body.show-mode-dark .custom-font-select-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

body.show-mode-dark .custom-font-select-list::-webkit-scrollbar-corner {
  background: rgba(30, 30, 30, 0.8);
}

/* 深色模式下面板内容滚动条 */
body.show-mode-dark .panel-content::-webkit-scrollbar {
  width: 8px;
}

body.show-mode-dark .panel-content::-webkit-scrollbar-track {
  background: rgba(30, 30, 30, 0.5);
  border-radius: 4px;
}

body.show-mode-dark .panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

body.show-mode-dark .panel-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Firefox 滚动条 */
body.show-mode-dark .panel-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(30, 30, 30, 0.5);
}

/* 清空画布按钮图标尺寸调整 */
#resetBtn svg {
  width: 23px;
  height: 23px;
}

/* 蒙版按钮图标尺寸调整 */
#maskBtn svg {
  width: 23px;
  height: 23px;
}

/* 重置视图按钮图标尺寸调整 */
#resetViewBtn svg {
  width: 23px;
  height: 23px;
}

.toolbar-divider {
  width: 1px;
  height: 30px;
  background: #ddd;
  margin: 0 4px;
}

/* 下拉菜单容器 */
.toolbar-dropdown {
  position: relative;
}

.dropdown-arrow {
  font-size: 8px;
  margin-left: 4px;
  opacity: 0.6;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 8px;
  min-width: 140px;
  display: none;
  z-index: 1000;
}

.toolbar-dropdown.active .dropdown-menu {
  display: block;
}

.dropdown-item {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.dropdown-item:hover {
  background: #f0f0f0;
}

.dropdown-item svg {
  flex-shrink: 0;
}

/* 透明度面板 */
.opacity-panel {
  padding: 12px;
  min-width: 180px;
}

.opacity-panel label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
}

.opacity-panel input[type="range"] {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.opacity-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007aff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.opacity-panel input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007aff;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 颜色选择器 */
.toolbar-color-wrapper {
  position: relative;
}

.toolbar-color-wrapper input[type="color"] {
  position: absolute;
  opacity: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.color-indicator {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: #007aff;
  pointer-events: none;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .toolbar-group {
    gap: 4px;
    padding: 8px 12px;
  }

  .toolbar-btn {
    width: 36px;
    height: 36px;
  }

  .toolbar-divider {
    display: none;
  }
}

/* =====================
   03 老的控制面板样式（临时）
   ===================== */

.speed-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 元素间距 */
}



#serverResponse {
  position: absolute;
  bottom: 80px;
  left: 200px;
  width: 30%;
  height: 50px;
  padding: 10px;
  margin-top: 20px;
  line-height: 1;
  overflow-y: scroll;
  /* 允许垂直滚动 */
  scrollbar-width: none;
  /* Firefox 隐藏滚动条 */
}

#serverResponse::-webkit-scrollbar {
  display: none;
  /* Chrome / Safari 隐藏滚动条 */
}

.Control-wrapper {
  position: fixed;
  /* 固定在视口 */
  bottom: 0;
  /* 贴在底部 */

  width: 100vw;
  /* 视口宽度 */
  height: 70px;
  /* 固定高度 */
  background: #000000;
  /* 背景色 */
  /* border-top: 1px solid #ddd; */
  /* 上边框 */
  display: flex;
  /* Flex布局 */
  overflow: visible;
  /* 允许速度面板显示在容器外 */
  align-items: center;
  /* 垂直居中 */
  justify-content: space-between;
  /* 两端对齐 */

  gap: 20px;
  /* 按钮间距 */
}


.Controlbtn-group {
  display: flex;
  align-items: center;
  gap: 20px;
  /* 按钮间距 */
}

/* 控制按钮 */
.Control-btn {
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.2s;
  /* 禁用移动端点击高亮效果 */
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  /* 防止文本选择 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 防止触摸时出现默认样式 */
  -webkit-touch-callout: none;
}

.Control-btn:hover {
  transform: scale(1.1);
  /* 悬停时图标放大 */
}

/* 禁用 Control-btn 的 active 状态变灰效果 */
.Control-btn:active {
  opacity: 1 !important;
  background: transparent !important;
  transform: scale(0.95);
  /* 点击时只缩小，不变灰 */
}

.Control-btn svg {
  width: 45px;
  height: 45px;
  transition: fill 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  /* 确保 SVG 在 active 状态下保持不透明 */
  opacity: 1;
}

/* 确保 SVG 图标在点击时不变灰 */
.Control-btn:active svg,
.Control-btn:active svg path {
  opacity: 1 !important;
  fill: inherit !important;
}

/* 特别针对重置按钮，确保点击时不变灰 */
#reset:active {
  opacity: 1 !important;
  background: transparent !important;
}

#reset:active svg,
#reset:active svg path {
  opacity: 1 !important;
  fill: inherit !important;
}

/* ========== cw 和 ccw 按钮的激活/非激活状态样式 ========== */

/* cw 按钮：非激活状态显示非激活图标 */
#cw:not(.active) .icon-inactive {
  display: block !important;
}

#cw:not(.active) .icon-active {
  display: none !important;
}

/* cw 按钮：激活状态显示激活图标 */
#cw.active .icon-inactive {
  display: none !important;
}

#cw.active .icon-active {
  display: block !important;
}

/* ccw 按钮：非激活状态显示非激活图标 */
#ccw:not(.active) .icon-inactive {
  display: block !important;
}

#ccw:not(.active) .icon-active {
  display: none !important;
}

/* ccw 按钮：激活状态显示激活图标 */
#ccw.active .icon-inactive {
  display: none !important;
}

#ccw.active .icon-active {
  display: block !important;
}

/* 激活状态不要放大 */
#cw.active,
#ccw.active {
  transform: scale(1) !important;
}

#cw.active:hover,
#ccw.active:hover {
  transform: scale(1) !important;
}

/* SVG 图标颜色设置 */
#cw .icon path.st0,
#cw .icon path {
  fill: #5AC8FB;
}

#ccw .icon path.st0,
#ccw .icon path {
  fill: #71bce3;
}

#set_speed {
  margin-left: clamp(15px, 8vw, 550px);
  /* 自适应间距：最小15px，默认8vw这个值是设置速度按钮距离中心距离的百分比，最大550px */
}

#set_color {
  margin-right: clamp(15px, 8vw, 550px);
  /* 自适应间距：最小15px，默认8vw这个值是设置颜色按钮距离中心距离的百分比，最大550px */
}

/* 阻止点击事件 */
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
  transform: none;
  margin: 0;
}

/* =====================
   03 左侧边栏样式，手风琴效果
   ===================== */

.sidebar-container {
  display: flex;
  height: 100vh;
  width: 0px;
  position: absolute;
  align-items: center;
  z-index: 10000;
  /* ✅ 修复：确保侧边栏在浮动面板和画布之上 */
}

.sidebar-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: auto;
}

/* -------- 【左侧边栏】图标样式 ------- */
.icon-bar {
  position: absolute;
  margin-left: 10px;
  width: 72px;
  background: #ffffff;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 20px;
  border-radius: 20px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2),
    0 3px 10px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  /* ✅ 修复：确保图标栏在浮动面板和画布之上 */
}

.icon-btn {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: #007aff;
  gap: 2px;
  transition: background 0.2s;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  /* 移动端点击优化 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;

}

.icon-btn:hover {
  background: #eaf8ff;
}

.icon-btn.active {

  background: #007aff;
  color: #ffffff;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: #007aff;
  transition: fill 0.2s ease;
  /* 添加过渡效果 */
}

.icon-btn.active svg {
  fill: #ffffff !important;
  /* 激活状态 */
}

/* =====================
   04 右侧面板样式
   ===================== */

/* -------- 【右侧面板】，的基础样式 ------- */
.sidebar {
  position: absolute;
  width: 260px;
  left: 90px;
  background: rgba(255, 255, 255, 0.1);
  /* 磨砂玻璃效果 - 更透明的背景 */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  height: 580px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2),
    0 3px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* 增强玻璃效果的边框 */
  z-index: 100;
  /* ✅ 修复：确保侧边栏在画布之上 */
}

.sidebar.hidden {
  display: none;
}

/* 折叠按钮 */
.collapse-btn {
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  background: rgba(0, 122, 255, 0.5);
  /* 磨砂玻璃效果 - 透明蓝色背景 */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
  transition: all 0.3s ease;
}

.collapse-btn:hover {
  background: rgba(0, 122, 255, 0.8);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.2);
}

.collapse-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* side-frame 统一边距和边框 */
.side-frame {
  padding: 16px 20px;
  height: 100%;
  /* 移除 overflow: hidden */
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 允许内容超出时滚动 */
  overflow: hidden;
  /* 保持hidden，配合下面的flex布局 */
}

/* 面板内容区  */
.panel {
  display: none;
  flex-direction: column;
  height: 100%;
  /* 关键：flex布局允许内容滚动 */
  min-height: 0;
  /* 重要：允许flex子项收缩 */
}

.panel.active {
  display: flex;
}

.panel-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}


.panel-content {
  flex: 1;
  overflow-y: auto;
  /* 内容过多时显示滚动条 */
  padding: 8px 4px;
  /* 添加内边距给悬停效果留空间 */
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  /* 确保滚动容器有足够的padding */
  margin: -4px;
  /* 抵消部分padding，保持布局 */
  /* overflow: visible !important; */

  padding: 8px 8px;
  /* ✅ 加大左右padding */
  /* margin: 0; */
  /* ✅ 移除负margin */
  /* background-clip: padding-box; */
  /* 避免阴影穿透滚动条 */
}

/* -------- 【右侧面板】，的标签切换 ------- */

.tab-buttons {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 10px;
}

.tab-button {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  font-size: 14px;
}

.tab-button.active {
  border-bottom-color: #007bff;
  color: #007bff;
  font-weight: bold;
}

/* .tab-button:hover {
  background-color: #f5f5f5;
} */

.tab-content {
  display: none;
  height: 100%;
  overflow: hidden;
  /*默认隐藏滚动滑块，在需要滑块的地方打开即可 */
}

.tab-content.active {
  display: block;
}

/* 只有一个标签时的特殊样式 */
.tab-button:only-child {
  border-bottom-color: transparent;
  /* 没有下划线 */
  color: inherit;
  /* 不变颜色 */
  font-weight: bold;
  /* 保持加粗 */
  pointer-events: none;
  /* 不可点击 */
  cursor: default;
  /* 默认光标 */
}

.tab-button:only-child.active {
  border-bottom-color: transparent;
  /* 没有下划线 */
  color: inherit;
  /* 不变颜色 */
  font-weight: bold;
  /* 保持加粗 */
}

.tab-button:only-child:hover {
  border-bottom-color: transparent;
  /* 没有下划线 */
  color: inherit;
  /* 不变颜色 */
  font-weight: bold;
  /* 保持加粗 */
  background-color: transparent;
  /* 没有背景色变化 */
}

/* -------- 【右侧面板】，的btn图标（画笔、字体按钮） ------- */
.tool-btn {
  width: 45px;
  height: 45px;
  border: none;
  background: transparent;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: #007aff;
  gap: 2px;
  transition: background 0.2s;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  /* 移动端点击优化 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;

}

.tool-btn:hover {
  background: #eaf8ff;
}

/* 工具按钮激活状态 */
.tool-btn.active {
  background: #007aff;
  color: #ffffff;
}

/* 工具按钮SVG基础样式 */
.tool-btn svg {
  width: 18px;
  height: 18px;
  fill: #007aff;
  transition: fill 0.2s ease, transform 0.3s ease;
}

/* 工具按钮激活时SVG颜色 */
.tool-btn.active svg {
  fill: #ffffff;
}

/* 动画按钮样式 - 参考画笔按钮样式 */
.animation-btn {
  width: 45px;
  height: 45px;
  border: none;
  background: transparent;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: #007aff;
  gap: 2px;
  transition: background 0.2s;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  /* 移动端点击优化 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.animation-btn:hover {
  background: #eaf8ff;
}

.animation-btn.active {
  background: #007aff;
  color: #ffffff;
}

.animation-btn svg {
  width: 24px;
  height: 24px;
  fill: #007aff;
  transition: fill 0.2s ease, transform 0.3s ease;
}

.animation-btn.active svg {
  fill: #ffffff;
}

/* 画笔面板：三个工具按钮容器样式 */
#brush-tab .Regional-Block:first-child .regional-content:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 0;
}

/* 毛笔和橡皮按钮：默认旋转90度 */
#brush-btn svg,
#eraserBtn svg {
  transform: rotate(90deg);
}

/* 铅笔按钮：激活时旋转-90度 */
#draw-btn.active svg {
  transform: rotate(-90deg);
}

/* 毛笔和橡皮按钮：激活时旋转到0度（从90度逆时针旋转90度） */
#brush-btn.active svg,
#eraserBtn.active svg {
  transform: rotate(0deg);
}

.brush-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.brush-preview-inner {
  border-radius: 50%;
  background: #000;
}


/* -------- 【图案面板】，的图片库两列排列 ------- */
/* 只控制图案面板内的滚动，不影响其他面板 */
#library-tab .panel-content,
#icons-svg-tab .panel-content,
#upload-tab .panel-content,
#background-tab .panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 让图片区滚动 */
#library-tab .image-grid,
#icons-svg-tab .image-grid,
#background-tab .image-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* 避免内容撑开 */
}

.image-grid {
  column-count: 2;
  column-gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
  /* 给图片悬停效果留空间 */
}

/* 统一图片基础样式 */
.image-grid img,
.text-grid img,
.upload-item img {
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* 普通图片容器（image-grid 和 text-grid）*/
.image-grid img,
.text-grid img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid transparent;
  background: #f5f5f5;
  padding: 4px;
  display: block;
}

/* 布局特有属性 */
.image-grid img {
  margin-bottom: 8px;
  break-inside: avoid;
}

.text-grid img {
  transform: scale(1);
}

/* 上传容器图片（绝对定位，填充容器）*/
.upload-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 4px;
}

/* 图片悬停效果 */
.image-grid img:hover,
.text-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  z-index: 1;
  position: relative;
}

/* 选中状态：蓝色边框 */
.image-grid img.selected,
.text-grid img.selected,
.upload-item.selected {
  border: 2px solid #4a67f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

/* 激活状态：蓝色边框，高亮显示 */
.image-grid img.active,
.text-grid img.active,
.upload-item.active {
  border: 2px solid #4a67f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

/* -------- 【文字面板】文字图片网格样式（固定两列Grid布局） ------- */
.text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
}

/* -------- 文字内容适应（没用到）------- */

/* .text-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-item {
  padding: 10px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.text-item:hover {
  background: #f0f0f0;
  border-color: #4a67f5;
} */

/* -------- 普通按钮样式（临时,存取区按钮）------- */

.btn {
  padding: 10px 16px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin: 5px 0;
  transition: background 0.2s;
  width: 50%;
}

.btn:hover {
  background: #3a57e5;
}

/* -------- 【右侧面板】图片文件上传 ------- */
input[type="file"] {
  padding: 10px;
  border: 2px dashed #ddd;
  border-radius: 6px;

}

/* 上传数量提示 */
.upload-count {
  font-size: 12px;
  color: #666;
  margin: 1px 0;
}

/* 上传缩略图区域 */
.upload-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  /* 间距稍大 */
  overflow-y: auto;
  padding: 4px;
  box-sizing: border-box;
  /* align-content: flex-start; */
}

/* 每个缩略图容器 */
.upload-item {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  /* 方形格子 */
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.2s ease,
    border-color 0.18s ease,
    box-shadow 0.2s ease;
  background: #fff;
}

/* 悬停时整体放大 + 增强阴影 */
.upload-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}





/* 图片库的删除按钮（圆形黑色背景，仅悬停时显示） */
.upload-item .delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.12s ease;
  z-index: 2;
}

/* 鼠标悬停显示删除按钮 */
.upload-item:hover .delete-btn {
  opacity: 1;
}

/* 删除按钮悬停反馈（变红色） */
.upload-item .delete-btn:hover {
  background: rgba(255, 0, 0, 0.9);
  transform: scale(1.1);
}

/* -------- 设置面板里的按钮 ------- */
.setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 减少间距 */
  margin: 3px 5px;
}

.setting-row p {
  margin: 0;
  font-size: 16px;
  white-space: nowrap;
  /* 防止文字换行 */
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
  /* 移除外边距 */
}

.radio-label input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s;
  background: white;
  flex-shrink: 0;
  /* 防止复选框被压缩 */
}

.radio-label input[type="checkbox"]:checked+.checkbox-custom {
  border-color: #007bff;
  background: #007bff;
}

.radio-label input[type="checkbox"]:checked+.checkbox-custom::after {
  content: '✓';
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
}

/* -------- 设置面板滑块样式（使用regional-slider统一样式） ------- */
/* 设置面板中的滑块标签文字大小与按键音效一致 */
#Settings-tab .regional-slider label {
  font-size: 16px;
  color: #000000;
}

/* 设置面板中滑块的margin */
#Settings-tab .regional-slider {
  margin: 4px 0px 4px 5px;
}

/* -------- 设置面板按钮组样式 ------- */
.setting-buttons-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 3px;
}

/* -------- 设置面板灯光效果按钮样式 ------- */
.light-effect-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: #007aff;
}

.light-effect-btn:hover {
  background: #eaf8ff;
  transform: scale(1.05);
}

.light-effect-btn.active {
  background: #007aff;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.light-effect-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* -------- 设置面板纹理大小按钮样式 ------- */
.texture-size-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #000000;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.texture-size-btn:hover {
  background: #eaf8ff;
  transform: scale(1.05);
}

.texture-size-btn.active {
  background: #007aff;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* -------- 设置面板帮助文档链接样式 ------- */
.setting-help-row {
  padding-top: 10px;
  padding-bottom: 5px;
  border-top: 1px solid #e0e0e0;
  text-align: center;
  flex-shrink: 0;
  margin: 5px;
}

.help-doc-link {
  font-size: 14px;
  color: #007aff;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
  display: inline-block;
}

.help-doc-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* 确保设置面板内容有足够的底部空间显示帮助文档 */
#Settings-tab .panel-content {
  padding-bottom: 5px;
}

/* 速度面板样式 */
.speed-panel {
  position: fixed;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 15px;
  padding: 15px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 10001;
  width: 200px;
  pointer-events: auto;
  margin-top: -10px;
}

.speed-panel .regional-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.speed-panel .regional-slider label {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
}

.speed-panel .regional-slider .speed-value {
  font-size: 16px;
  font-weight: 600;
  color: #007aff;
  min-width: 20px;
  text-align: center;
}

.speed-panel .regional-slider input[type="range"] {
  flex: 1;
  min-width: 100px;
}

/* 深色模式下的速度面板样式 */
body.show-mode-dark .speed-panel {
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.show-mode-dark .speed-panel .regional-slider label {
  color: #e0e0e0;
}

body.show-mode-dark .speed-panel .regional-slider .speed-value {
  color: #5ac8fa;
}

/* 深色模式下的设置面板新增元素样式 */
/* 设置面板滑块在深色模式下的样式 */
body.show-mode-dark #Settings-tab .regional-slider label {
  color: #e0e0e0;
}

/* ========== 设置面板样式 ========== */
.settings-panel {
  position: fixed;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 10001;
  width: 400px;
  /* 固定高度：padding(40) + serverResponse(125) + gap(15) + divider(11) + gap(15) + buttons(40) = 246px */
  height: 246px;
  max-width: 90vw;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;

  overflow: hidden;
  box-sizing: border-box;
}

/* 服务端响应显示区域 - 固定显示5行，超出自动滚动 */
.settings-panel .settings-server-response {
  /* 覆盖全局 #serverResponse 的绝对定位样式 */
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  margin-top: 0 !important;

  /* 固定高度：5行内容 (14px * 1.5 line-height * 5行 = 105px) + padding (10px * 2 = 20px) = 125px */
  height: 125px;
  min-height: 125px;
  max-height: 125px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  background: rgba(240, 240, 240, 0.8);
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  flex-shrink: 0;
  order: 1;
  box-sizing: border-box;
}

/* 服务端响应消息样式 */
.settings-panel .settings-server-response p {
  margin: 5px 0;
  padding: 5px;
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-panel .settings-server-response p:first-child {
  margin-top: 0;
}

.settings-panel .settings-server-response p:last-child {
  margin-bottom: 0;
}

/* 滚动条样式 - 确保滚动条在 serverResponse 内部 */
.settings-panel .settings-server-response::-webkit-scrollbar {
  width: 6px;
}

.settings-panel .settings-server-response::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.settings-panel .settings-server-response::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.settings-panel .settings-server-response::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.settings-panel .settings-server-response {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* 分隔线 */
.settings-panel .settings-divider {
  height: 1px;
  min-height: 1px;
  max-height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent);
  margin: 5px 0;
  order: 2;
  flex-shrink: 0;
}

/* 按钮容器 */
.settings-panel .settings-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: space-between;
  flex-shrink: 0;
  order: 3;
  align-items: center;
}

/* 自定义按钮样式 - 默认状态：白色背景，蓝色文字 */
.settings-panel .settings-custom-btn {
  flex: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #ffffff;
  color: #4a90e2;
  border: 1px solid #4a90e2;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 40px;
  max-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 悬停状态 */
.settings-panel .settings-custom-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(74, 144, 226, 0.3);
  background: rgba(74, 144, 226, 0.1);
}

/* 点击状态 */
.settings-panel .settings-custom-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(74, 144, 226, 0.2);
}

/* 激活状态：蓝色背景，白色文字 */
.settings-panel .settings-custom-btn.active {
  background: #4a90e2;
  color: white;
  border-color: #4a90e2;
  box-shadow: 0 2px 4px rgba(74, 144, 226, 0.3);
}

.settings-panel .settings-custom-btn.active:hover {
  background: #5aa0f2;
  box-shadow: 0 3px 6px rgba(74, 144, 226, 0.4);
}

/* 按钮内的SVG图标样式 */
.settings-panel .settings-custom-btn svg {
  display: block;
  margin: 0;
  flex-shrink: 0;
}

.settings-panel .settings-custom-btn .settings-btn-icon-disconnect,
.settings-panel .settings-custom-btn .settings-btn-icon-connect {
  width: 20px;
  height: 20px;
}

/* 按钮内的文字样式 */
.settings-panel .settings-custom-btn {
  line-height: 1;
}

/* 深色模式下的设置面板样式 */
body.show-mode-dark .settings-panel {
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.show-mode-dark .settings-panel .settings-server-response {
  background: rgba(255, 255, 255, 0.05);
  color: #e0e0e0;
}

body.show-mode-dark .settings-panel .settings-divider {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* 深色模式下的6个自定义按钮样式 */
body.show-mode-dark .settings-panel .settings-custom-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.show-mode-dark .settings-panel .settings-custom-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

body.show-mode-dark .settings-panel .settings-custom-btn.active {
  background: #007aff;
  color: white;
  border-color: #007aff;
}

body.show-mode-dark .settings-panel .settings-custom-btn.active:hover {
  background: #0066cc;
  border-color: #0066cc;
}

body.show-mode-dark #Settings-tab .regional-slider input[type="range"] {
  background: rgba(255, 255, 255, 0.1);
}

body.show-mode-dark #Settings-tab .regional-slider input[type="range"]::-webkit-slider-thumb {
  background: #007aff;
}

body.show-mode-dark #Settings-tab .regional-slider input[type="range"]::-moz-range-thumb {
  background: #007aff;
}

body.show-mode-dark .light-effect-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

body.show-mode-dark .light-effect-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

body.show-mode-dark .light-effect-btn.active {
  background: #007aff;
  color: #ffffff;
}

body.show-mode-dark .texture-size-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

body.show-mode-dark .texture-size-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

body.show-mode-dark .texture-size-btn.active {
  background: #007aff;
  color: #ffffff;
}

body.show-mode-dark .setting-help-row {
  border-top-color: rgba(255, 255, 255, 0.1);
}

body.show-mode-dark .help-doc-link {
  color: #007aff;
}

body.show-mode-dark .help-doc-link:hover {
  color: #5ac8fb;
}

/* -------- 【画笔面板】，的Regional Block 样式（仅视觉底色，不含交互），基础样式与【文字面板】共享------- */

.Regional-Wrapper {
  position: relative;
  margin: 0 -6px;

  padding: 0 6px;
}

.Regional-Block {
  background: rgba(255, 255, 255, 0.08);
  /* 半透明底色 */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px 14px;
  margin-bottom: 8px;
  backdrop-filter: blur(6px);
  transition: background 0.3s ease;
  overflow: visible;
  /* 保持可见 */
  position: relative;
  z-index: 1;

}

/* 标题 */
.regional-title {
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
  margin-top: 8px;
  padding-bottom: 8px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e0e0e0;

}

/* 区域内容布局 */
.regional-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0px;
}

/* 颜色区域水平居中布局 */
.regional-content.color-row {
  flex-direction: row;
  justify-content: center;
  gap: 9px;
}

.color-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 滑块部分 */
.regional-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 13px 0px;
  /* 调大此值即可加大行距 */
}

/* 滑块数字输入框样式 */
.slider-number-input {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
}

.slider-number-input:focus {
  outline: none;
  border-color: #007aff;
}

/* 隐藏number输入框的箭头 */
.slider-number-input::-webkit-inner-spin-button,
.slider-number-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.slider-number-input {
  -moz-appearance: textfield;
  appearance: textfield;
}



label {
  font-size: 13px;
  color: #000000;
  display: inline-block;
  /* 确保它是行内块，能与输入框同一行 */
  writing-mode: horizontal-tb;
  /* 强制横向文字方向 */
  text-orientation: mixed;
  /* 避免中文竖排 */
  white-space: nowrap;
  /* 防止文字换行 */
}

/* 颜色方块 */
.color-palette {
  display: flex;
  gap: 6px;
}

.color-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

/* 形状按钮 */
.shape-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000000;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shape-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}


/* -------- 【文字面板】，的字体选择下拉框样式 ------- */

/* 包裹器 */
.custom-select-wrapper.light {
  position: relative;
  display: inline-block;
  overflow: visible;
  /* 确保下拉不被裁掉 */
}

/* 基础样式 */
.custom-select-wrapper.light select {
  appearance: none;
  /* 去掉系统默认箭头 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  /* 右边留箭头空间 */
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  width: 125px;
  /* 宽度适中，不挤也不溢出 */
  box-sizing: border-box;
}

/* hover / focus 效果 */
.custom-select-wrapper.light select:hover {
  border-color: #bbb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.custom-select-wrapper.light select:focus {
  outline: none;
  border-color: #a5c8ff;
  box-shadow: 0 0 0 3px rgba(165, 200, 255, 0.35);
}

/* 自定义下拉箭头 */
.custom-select-wrapper.light::after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #666;
  pointer-events: none;
}

/* IE / Edge 去掉默认箭头 */
select::-ms-expand {
  display: none;
}

/* -------- 【文字面板】，的图片文字滚动 ------- */
/* 只针对文字面板布局 */
/* tab-content 垂直布局 */
#text-tab .panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#text-tab .image-grid {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* 避免内容撑开 */
}

/* -------- 【新版】自定义字体下拉框样式 ------- */
/* 包装器 */
.custom-font-select-wrapper {
  position: relative;
  flex: 1;
  /* 占据剩余空间 */
  min-width: 0;
  /* 允许缩小 */
  max-width: 100%;
  /* 不超过父容器 */
}

/* 自定义下拉框容器 */
.custom-font-select {
  position: relative;
  width: 100%;
  min-width: 0;
  /* 允许缩小 */
  box-sizing: border-box;
}

/* 下拉按钮 */
.custom-font-select-button {
  width: 100%;
  max-width: 100%;
  /* 限制最大宽度 */
  padding: 8px 32px 8px 12px;
  /* 右侧留出空间给箭头 */
  background: rgba(255, 255, 255, 0.3);
  /* 磨砂玻璃效果 - 透明背景 */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  /* 隐藏超出部分 */
  box-sizing: border-box;
}

.custom-font-select-button:hover {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.custom-font-select-button:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 122, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

/* 显示文本 */
.custom-font-select-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
  min-width: 0;
  /* 确保flex子元素能正确截断 */
  padding-right: 8px;
  /* 与箭头保持间距 */
}

/* 箭头 */
.custom-font-select-arrow {
  position: absolute;
  /* 使用绝对定位固定位置 */
  right: 12px;
  /* 距离右边缘12px */
  top: 50%;
  /* 垂直居中 */
  transform: translateY(-50%);
  /* 修正垂直居中 */
  font-size: 10px;
  color: #666;
  transition: transform 0.2s ease;
  pointer-events: none;
  /* 不阻挡点击事件 */
}

.custom-font-select.open .custom-font-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  /* 保持垂直居中 + 旋转180度 */
}

/* 下拉框 */
.custom-font-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  /* 与按钮保持相同宽度 */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
  max-width: 100%;
  /* 限制最大宽度不超过父容器 */
  box-sizing: border-box;
}

.custom-font-select.open .custom-font-select-dropdown {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
}

/* 下拉列表容器 */
.custom-font-select-list {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
  /* 添加水平滚动 */
  padding: 4px 0;
  max-width: 100%;
  /* 限制最大宽度 */
  box-sizing: border-box;
}

/* 下拉选项 */
.custom-font-select-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  /* 防止换行 */
  display: inline-block;
  /* 让选项宽度自适应内容 */
  min-width: 100%;
  /* 至少占满容器宽度 */
  box-sizing: border-box;
}

.custom-font-select-item:hover {
  background: #f5f5f5;
}

.custom-font-select-item.selected {
  background: #e3f2fd;
  color: #007aff;
  font-weight: 500;
}

/* 分隔线 */
.custom-font-select-separator {
  height: 1px;
  background: #eee;
  margin: 4px 0;
}

/* 滚动条样式（列表容器） */
/* 垂直滚动条 */
.custom-font-select-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  /* 水平滚动条高度 */
}

.custom-font-select-list::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.custom-font-select-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.custom-font-select-list::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* 滚动条交叉处（角落） */
.custom-font-select-list::-webkit-scrollbar-corner {
  background: #f5f5f5;
}

/* -------- 【文字面板】，的字体上传区按钮样式 ------- */

#fontInput {
  display: none;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #f9f9f9;
  color: #007aff;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 14px;
  border: 1px solid #ddd;
  transition: all 0.2s ease;
}

.upload-btn:hover {
  background: #007aff;
  color: #fff;
}

.upload-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

/* 字体预览容器 */
.upload-font {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 420px;

}

/* 每个字体卡片 */
.font-card {
  background: #b7d0f8;
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.2s ease;
}

.font-card:hover {
  transform: translateY(-2px);
}

/* 字体名称示例 */
.font-preview {
  font-size: 20px;
  color: #000;
  word-break: break-all;
}

/* 字体卡片的删除按钮（使用 SVG 垃圾桶图标，不需要背景） */
.font-card .delete-btn {
  position: absolute;
  right: 12px;
  bottom: 10px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
  width: auto;
  height: auto;
  border-radius: 0;
  padding: 2px;
  transform: rotate(180deg);
}

.font-card .delete-btn:hover {
  opacity: 1;
  background: none;
  transform: rotate(180deg) scale(1.1);
}

.font-card .delete-btn svg {
  width: 18px;
  height: 18px;
  color: #666;
  display: block;
}

.font-card .delete-btn:hover svg {
  color: #ff4444;
}


/* =====================
   05 Canvas 画布区域（iframe方式）
   ===================== */

/* ✅ 画布已整合到 iframe (Client_Controls.html) 内部 */
/* ✅ 所有画布相关样式已移到 Client_Controls.css */

/* iframe 容器样式 - 确保原有 iframe 正常工作 */
.iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 0;
  /* 确保在所有 UI 之下 */
}

/* =====================
   06 自定义提示框样式
   ===================== */


/* 自定义提示框样式 */
.custom-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 99999;
  min-width: 300px;
  display: none;
}

.custom-alert h3 {
  margin-top: 0;
  color: #333;
}

.custom-alert p {
  margin: 15px 0;
  color: #666;
}

.custom-alert-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.custom-alert button {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  transition: all 0.2s;
}

.custom-alert button:hover {
  background: #e9ecef;
}

.custom-alert button.primary {
  background: #2b8beb;
  color: white;
  border-color: #2b8beb;
}

.custom-alert button.primary:hover {
  background: #1a7ad9;
}

/* 悬浮工具栏样式 */
.floating-toolbar {
  position: absolute;
  background: #2c2c2c;
  border-radius: 6px;
  padding: 4px;
  display: flex;
  gap: 2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  pointer-events: auto;
}

.float-tool-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}

.float-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.float-tool-btn:active {
  background: rgba(255, 255, 255, 0.2);
}

.float-tool-btn svg {
  pointer-events: none;
}

.float-submenu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  min-width: 140px;
}

.float-submenu-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}

.float-submenu-item:hover {
  background: #f0f0f0;
}

.hidden-input {
  display: none;
}

.bottom-toolbar {
  padding: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  background: #f0f0f0;
  border-top: 1px solid #ddd;
  flex-shrink: 0;
}

.bottom-toolbar button {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.bottom-toolbar button:hover {
  background: #e9ecef;
}

.context-menu,
.submenu {
  position: absolute;
  background-color: #2f323a;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  padding: 6px 0;
  width: 160px;
  display: none;
  z-index: 1000;
}

.context-menu-item {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
}

.context-menu-item:hover {
  background-color: #3e4451;
}

.context-menu-item svg {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

.arrow-right {
  margin-left: auto;
  opacity: 0.7;
}

.submenu {
  left: 100%;
  top: 0;
}

.submenu .context-menu-item {
  justify-content: flex-start;
}

.drawing-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.drawing-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.brush-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.brush-preview-inner {
  border-radius: 50%;
  background: #000;
}

/* 确保选框清晰可见 */
.konva-rect {
  pointer-events: none;
}

#fontFamilySelect {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  font-size: 14px;
  height: 32px;
  cursor: pointer;
  margin-left: 5px;
}

#fontFamilySelect:focus {
  outline: none;
  border-color: #2b8beb;
  box-shadow: 0 0 0 2px rgba(43, 139, 235, 0.2);
}

#fontFamilySelect:hover {
  border-color: #999;
}

/* 裁切模式样式 */
.crop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  pointer-events: none;
  /* ✅ 关键：让点击穿透到下面的 Canvas */
}

.crop-toolbar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #2c2c2c;
  border-radius: 8px;
  padding: 15px 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 1001;
  min-width: 300px;
  pointer-events: auto;
  /* ✅ 恢复工具栏内按钮的点击 */
}

.crop-hint {
  color: #fff;
  font-size: 13px;
  text-align: center;
  margin-bottom: 5px;
  opacity: 0.9;
}

.crop-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.crop-toolbar button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  flex: 1;
}

.crop-toolbar button.confirm {
  background: #2b8beb;
  color: white;
}

.crop-toolbar button.confirm:hover {
  background: #1a7ad9;
  transform: translateY(-1px);
}

.crop-toolbar button.cancel {
  background: #666;
  color: white;
}

.crop-toolbar button.cancel:hover {
  background: #555;
  transform: translateY(-1px);
}

/* ========================================
   本地中文字体样式表
   ======================================== */

/* ========== 方正字体（4款） ========== */

@font-face {
  font-family: 'FZLanTingHeiS-UL-GB';
  src: url('../fonts/FZLTCXHJW--GB1-0.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FZShuTi';
  src: url('../fonts/FZSTK--GBK1-0.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FZSuXinShiLiuKaiS-R-GB';
  src: url('../fonts/FZSXSLKJW--GB1-0.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FZYaoTi';
  src: url('../fonts/FZYTK--GBK1-0.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== 汉仪字体（9款） ========== */

@font-face {
  font-family: 'HYChaoCuHeiJ';
  src: url('../fonts/HYb0gj.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HYZhongHeiJ';
  src: url('../fonts/HYb1gj.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HYDaHeiJ';
  src: url('../fonts/HYb2gj.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HYChangMeiHeiJ';
  src: url('../fonts/HYb3gj.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HYChenMeiZiJ';
  src: url('../fonts/HYChenMeiZiJ.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HYXiZhongYuanF';
  src: url('../fonts/HYe2gf.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HYCuYuanF';
  src: url('../fonts/HYe4gf.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HYZhongLiShuF';
  src: url('../fonts/HYf3gf.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HYHanShiTiJ';
  src: url('../fonts/HYHanShiTiJ.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== 华文字体（4款） ========== */

@font-face {
  font-family: 'STCaiyun';
  src: url('../fonts/STCaiyun.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STHupo';
  src: url('../fonts/STHupo.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STLiti';
  src: url('../fonts/STLiti.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STXingkai';
  src: url('../fonts/STXingkai.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== 其他字体（4款） ========== */

@font-face {
  font-family: 'YouYuan';
  src: url('../fonts/YouYuan.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== 替代Windows系统字体（5款） ========== */

@font-face {
  font-family: 'FangSong';
  src: url('../fonts/FangSong.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KaiTi';
  src: url('../fonts/KaiTi.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LiSu';
  src: url('../fonts/LiSu.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SimHei';
  src: url('../fonts/SimHei.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STSong';
  src: url('../fonts/STSong.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== 说明 ========== 
 * 
 * 1. 所有字体文件使用 WOFF2 格式（体积小，加载快）
 * 2. font-display: swap 确保字体加载时先显示降级字体
 * 3. 所有字体路径已验证，确保文件存在
 * 
 * 字体分类：
 * - 方正字体：4 款（兰亭黑、舒体、苏新诗柳楷、姚体）
 * - 汉仪字体：9 款（超粗黑、中黑、大黑、长美黑、陈美梓、细中圆、粗圆、中隶书、韩式体）
 * - 华文字体：4 款（彩云、琥珀、隶书、行楷）
 * - 其他字体：1 款（幼圆）
 * - 替代系统字体：5 款（仿宋、楷体、隶书、黑体、宋体）
 * 
 * 总计：26 款本地中文字体（全平台一致显示）
 * 
 * ======================================== */

/* =====================================
   20. Toggle按钮样式
   ===================================== */
.btn-toggle {
  margin: 0;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
  color: #6b7381;
  background: #bdc1c8;
  cursor: pointer;
  transition: background-color 0.25s;
}

.btn-toggle:hover {
  background: #bdc1c8;
}

.btn-toggle.active:hover {
  background-color: #007aff;
}

.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
  outline: none;
}

.btn-toggle>.handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
}

.btn-toggle.active {
  background-color: #007aff;
  transition: background-color 0.25s;
}

.btn-toggle.active>.handle {
  left: 1.6875rem;
  transition: left 0.25s;
}

.btn-toggle:before,
.btn-toggle:after {
  line-height: 1.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.4125rem;
  width: 2.325rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.55rem;
  text-transform: uppercase;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}

.btn-toggle:before {
  content: 'OFF';
  text-align: right;
}

.btn-toggle:after {
  content: 'ON';
  text-align: left;
  opacity: 0;
}

.btn-toggle.active:before {
  opacity: 0;
}

.btn-toggle.active:after {
  opacity: 1;
}

.btn-toggle.btn-sm {
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
}

.btn-toggle.btn-sm>.handle {
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
}

.btn-toggle.btn-sm.active>.handle {
  left: 1.6875rem;
}

/* =====================================
   21. 上传按钮动画样式（完全按照原始实现）
   ===================================== */
/* 设置按钮样式（左侧） */
.settings-btn-progress {
  --dur: 0.25s;
  background: #6c757d;
  border-radius: 1.25em;
  color: #fff;
  cursor: pointer;
  padding: 0.5em 1em;
  position: relative;
  text-align: center;
  transition: all 0.1s linear;
  width: 6em;
  height: 45px;
  border: none;
  overflow: visible;
  flex-shrink: 0;
  margin-left: 20px;
  /* 禁用移动端点击高亮效果 */
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  /* 防止文本选择 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 防止触摸时出现默认样式 */
  -webkit-touch-callout: none;
  -webkit-appearance: none;
  appearance: none;
}

.settings-btn-progress:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.settings-btn-progress:not(:disabled):focus,
.settings-btn-progress:not(:disabled):hover {
  background: #5a6268;
}

.settings-btn-progress:focus {
  outline: transparent;
}

/* 设置按钮激活状态 */
.settings-btn-progress.active {
  background: #007aff;
}

.settings-btn-progress.active:not(:disabled):focus,
.settings-btn-progress.active:not(:disabled):hover {
  background: #0066cc;
}

.settings-btn-progress .settings-btn-border {
  display: block;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.settings-btn-progress .settings-btn-border rect {
  stroke: #a6adb4;
  stroke-width: 4;
}

.settings-btn-progress .settings-btn-icon,
.settings-btn-progress .settings-btn-text {
  display: inline-block;
  position: relative;
  z-index: 2;
}

.settings-btn-progress .settings-btn-icon {
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

/* 上传按钮样式（右侧） */
.upload-btn-progress {
  --dur: 0.25s;
  background: #6c757d;
  border-radius: 1.25em;
  color: #fff;
  cursor: pointer;
  padding: 0.5em 1em;
  position: relative;
  text-align: center;
  transition: all 0.1s linear;
  width: 6em;
  height: 45px;
  border: none;
  overflow: visible;
  flex-shrink: 0;
  margin-right: 20px;
  /* 禁用移动端点击高亮效果 */
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  /* 防止文本选择 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 防止触摸时出现默认样式 */
  -webkit-touch-callout: none;
  -webkit-appearance: none;
  appearance: none;
}

.upload-btn-progress:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.upload-btn-progress:not(:disabled):focus,
.upload-btn-progress:not(:disabled):hover {
  background: #5a6268;
}

.upload-btn-progress:focus {
  outline: transparent;
}

/* 上传按钮激活状态 */
.upload-btn-progress.active {
  background: #007aff;
}

.upload-btn-progress.active:not(:disabled):focus,
.upload-btn-progress.active:not(:disabled):hover {
  background: #0066cc;
}

.upload-btn-progress:focus {
  outline: transparent;
}

.upload-btn-progress .upload-btn-border {
  display: block;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.upload-btn-progress .upload-btn-border rect {
  stroke: #86a6f9;
  stroke-width: 4;
}

.upload-btn-progress .upload-btn-text {
  display: inline-block;
  position: relative;
  z-index: 2;
}

.upload-btn-progress.upload-btn-running {
  text-align: center;
}

.upload-btn-progress.upload-btn-running .upload-btn-text {
  animation: flyIn1 var(--dur) ease-in forwards;
}

.upload-btn-progress.upload-btn-done .upload-btn-border {
  animation: sinkInA var(--dur) ease-in forwards;
}

.upload-btn-progress.upload-btn-done .upload-btn-border rect {
  animation: sinkInB var(--dur) ease-in forwards;
}

.upload-btn-progress.upload-btn-done .upload-btn-text {
  animation: pulseIn var(--dur) linear forwards;
  color: #25f42f;
}

.upload-btn-progress.upload-btn-ready .upload-btn-text {
  animation: flyIn1 var(--dur) ease-in forwards;
}

/* 上传按钮动画关键帧 */
@keyframes flyIn1 {
  from {
    opacity: 0;
    transform: translateY(33%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flyIn2 {
  from {
    opacity: 0;
    transform: translate(calc(-2em + 2ch), 33%);
  }

  to {
    opacity: 1;
    transform: translate(calc(-2em + 2ch), 0);
  }
}

@keyframes pulseIn {
  from {
    transform: scale(0);
  }

  33% {
    transform: scale(2.17, 2.17);
  }

  67% {
    transform: scale(1.17, 1.17);
  }

  to {
    transform: scale(1.5);
  }
}

@keyframes sinkInA {
  from {
    transform: scale(1, 1);
  }

  25%,
  to {
    transform: scale(0.968, 0.925);
  }
}

@keyframes sinkInB {
  from {
    stroke-width: 4;
  }

  25%,
  to {
    stroke-width: 0;
  }
}

/* 响应式布局 - 移动端和PAD优化 */
@media screen and (max-width: 1024px) {

  /* PAD端调整 */
  .settings-btn-progress,
  .upload-btn-progress {
    width: 5em;
    height: 40px;
    font-size: 14px;
  }

  .settings-btn-progress,
  .upload-btn-progress {
    width: 5em;
    height: 40px;
    font-size: 14px;
  }

  .settings-btn-progress {
    margin-left: 15px;
  }

  .upload-btn-progress {
    margin-right: 15px;
  }

  .Controlbtn-group {
    gap: 15px;
  }
}

@media screen and (max-width: 768px) {

  /* 手机端调整 */
  .settings-btn-progress,
  .upload-btn-progress {
    width: 4.5em;
    height: 38px;
    font-size: 12px;
    padding: 0.4em 0.8em;
  }

  .settings-btn-progress,
  .upload-btn-progress {
    width: 4.5em;
    height: 38px;
    font-size: 12px;
    padding: 0.4em 0.8em;
  }

  .settings-btn-progress {
    margin-left: 10px;
  }

  .upload-btn-progress {
    margin-right: 10px;
  }

  .Control-wrapper {
    gap: 10px;
  }

  .Controlbtn-group {
    gap: 10px;
  }

  .Control-btn {
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width: 480px) {

  /* 小屏手机调整 */
  .settings-btn-progress,
  .upload-btn-progress {
    width: 4em;
    height: 36px;
    font-size: 11px;
  }

  .Controlbtn-group {
    gap: 8px;
  }

  .Control-btn {
    width: 38px;
    height: 38px;
  }
}

/*  Media  */
@media screen and (max-width: 767px) {}

@media screen and (max-width: 479px) {}

@media screen and (max-width: 320px) {}

@media screen and (min-width: 1200px) {}