/* 引入思源字体 */
@font-face {
  font-family: 'Source Han Sans';
  src: url('https://cdn.jsdelivr.net/npm/source-han-sans-cn@2.004/webfonts/SourceHanSansCN-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/source-han-sans-cn@2.004/webfonts/SourceHanSansCN-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 这很重要，确保文字闪烁前有默认字体显示 */
}

/* 定义 500 字重 */
@font-face {
  font-family: 'Source Han Sans';
  src: url('https://cdn.jsdelivr.net/npm/source-han-sans-cn@2.004/webfonts/SourceHanSansCN-Medium.woff2') format('woff2');
  font-weight: 500;
}

/* 定义 600 字重 */
@font-face {
  font-family: 'Source Han Sans';
  src: url('https://cdn.jsdelivr.net/npm/source-han-sans-cn@2.004/webfonts/SourceHanSansCN-Bold.woff2') format('woff2');
  font-weight: 600;
}

/*******************************************************************************
 * CSS样式表
 * =============================================================================
 * 【CSS编码规范】
 * =============================================================================
 * 
 * 1. 文件组织原则：
 *    - 按功能模块分组组织样式
 *    - 从通用到具体，从全局到局部
 *    - 相关属性就近放置，便于维护
 * 
 * 2. 命名规范：
 *    - 使用BEM命名法：block__element--modifier
 *    - 语义化命名，表达功能和用途
 *    - 避免过于具体的描述性名称
 * 
 * 3. 代码风格：
 *    - 使用2个空格缩进（保持一致性）
 *    - 属性名后加冒号和空格
 *    - 每个属性独占一行
 *    - 选择器与花括号之间加空格
 * 
 * 4. 性能优化：
 *    - 避免过深的嵌套（不超过3层）
 *    - 合理使用CSS特异性
 *    - 使用简写属性减少代码量
 * 
 * 5. 兼容性考虑：
 *    - 使用标准属性，必要时添加前缀
 *    - 考虑不同浏览器的默认样式差异
 *    - 移动端优先的响应式设计
 * 
 ******************************************************************************/

/* 
=================================================================================
CSS重置与基础样式
=================================================================================
【全局重置】
- 清除浏览器默认样式差异
- 统一盒模型计算方式
- 建立一致的基础样式基准
*/

/* 
【CSS自定义属性（CSS变量）】
- 集中管理设计系统的颜色和尺寸
- 便于主题切换和维护
- 提高代码复用性和一致性
*/
:root {
  /* Figma System UI 颜色系统 */
  --color-primary: #0D99FF;
  --color-primary-hover: #0078FF;
  --color-primary-active: #0066CC;
  --color-text-primary: #1E1E1E;
  --color-text-secondary: #6B6B6B;
  --color-text-muted: #999999;
  --color-border: #E5E5EA;
  --color-border-light: #F5F5F5;
  --color-border-hover: #D1D1D6;
  --color-border-focus: #007AFF;
  --color-background: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-surface-raised: #F7F7F7;
  --color-surface-overlay: #FFFFFF;
  --color-surface-active: #E8E8E8;
  --color-surface-hover: #F5F5F5;
  --color-vertex-dot: #14B8A6;
  --color-vertex-dot-border: #18A0FB;
  --color-vertex-dot-active: #0D9488;
  --color-vertex-dot-free: #18A0FB;
  --color-vertex-dot-free-border: #18A0FB;
  --color-vertex-dot-highlight: #e74c3c;
  /* 文字颜色变量 */
  --color-mused: #1E1E1E;
  --vertex-dot-size: 3px;
  --vertex-dot-opacity: 0;
  --vertex-dot-visible-opacity: 1;
  --anchor-fill: #FFFFFF;
  --color-anchor-stroke: #1E1E1E;
  --color-connection-line: #1E1E1E;

  /* 尺寸系统 */
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;

  /* 圆角系统 */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 阴影系统 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.15);

  /* 字体系统 */
  --font-family: 'Source Han Sans', "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 14px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-line-height: 1.5;
  --font-letter-spacing: 0.025em;

  /* 按钮系统 */
  --btn-font-size: var(--font-size-base);
  --btn-font-weight: var(--font-weight-normal);
  --btn-text-color: var(--color-text-secondary);
  --btn-bg-color: #fff;
  --btn-border-color: #E5E5EA;
  --btn-border-radius: 4px;
  --btn-hover-border-color: #18A0FB;
  --btn-hover-text-color: var(--color-text-primary);
  --btn-active-bg-color: rgba(24, 160, 251, 0.2);
  --btn-active-text-color: var(--color-text-primary);
  --btn1-height-xs: 20px;
  --btn1-height-sm: 24px;
  --btn1-height-lg: 28px;
  --panel-header-height: 32px;
  --panel-header-bg-color: var(--color-surface-raised);
  --panel-header-hover-bg-color: var(--color-surface-hover);
  --panel-title-color: var(--color-text-primary);
  --panel-icon-color: var(--color-text-secondary);
  
  /* 图形默认颜色 */
  --shape-fill-default: #D9D9D9; /* 浅灰色 */
  --shape-stroke-default: #1E1E1E; /* 深黑色 */
  --shape-stroke-width: 0.5px; /* 线条宽度 */

  /* 选择框和锚点样式 */
  --selection-stroke-color: #18A0FB; /* 选择框和锚点颜色 */
  --selection-stroke-width: 1px; /* 选择框和锚点线条宽度 */
  --selection-fill: rgba(24, 160, 251, 0.1); /* 选择框填充颜色 */
  --anchor-size: 6px; /* 锚点边长/直径 */
  --anchor-stroke: #18A0FB; /* 锚点描边颜色 - 蓝色 */
  --anchor-stroke-width: 1px; /* 锚点描边宽度 */
  --anchor-fill: rgb(255, 255, 255); /* 锚点填充颜色 */

  /* 动画系统 */
  --transition-fast: 0.1s;
  --transition-normal: 0.15s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

/* 字体工具类 */
.text-xs { font-size: var(--font-size-xs); line-height: var(--font-line-height); letter-spacing: var(--font-letter-spacing); }
.text-sm { font-size: var(--font-size-sm); line-height: var(--font-line-height); letter-spacing: var(--font-letter-spacing); }
.text-base { font-size: var(--font-size-base); line-height: var(--font-line-height); letter-spacing: var(--font-letter-spacing); }
.text-lg { font-size: var(--font-size-lg); line-height: var(--font-line-height); letter-spacing: var(--font-letter-spacing); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }

/* 全局 span 样式 */
span {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

/* 图形相关样式 */
.vertex-dot {
  fill: var(--color-vertex-dot);
  stroke: var(--color-vertex-dot-border);
  stroke-width: 1;
  opacity: 0;
  r: var(--vertex-dot-size);
}

.vertex-dot.active {
  fill: var(--color-vertex-dot-active);
}

.anchor-point {
  fill: var(--anchor-fill);
  stroke: var(--anchor-stroke);
  stroke-width: var(--anchor-stroke-width);
  transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.anchor-point:hover {
  fill: var(--color-primary);
  stroke: var(--color-primary);
}

.rotation-anchor {
  fill: var(--anchor-fill);
  stroke: var(--anchor-stroke);
  stroke-width: var(--anchor-stroke-width);
  cursor: grab;
  transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.rotation-anchor:hover {
  fill: var(--color-primary);
  stroke: var(--color-primary);
}

.rotation-anchor:active {
  cursor: grabbing;
}

.connection-line {
  stroke: var(--selection-stroke-color);
  stroke-width: var(--selection-stroke-width);
  pointer-events: none;
}

.selection-box {
  fill: var(--selection-fill);
  stroke: var(--selection-stroke-color);
  stroke-width: var(--selection-stroke-width);
  pointer-events: none;
}

.free-shape-selection {
  fill: transparent;
}

/*
=================================================================================
全局按钮基础样式
=================================================================================
*/
button {
  font-family: var(--font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  color: var(--btn-text-color);
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

button:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

button.active {
  background-color: var(--btn-active-bg-color);
  border-color: var(--btn-hover-border-color);
  color: var(--btn-hover-text-color);
}

button:focus-visible {
  outline: none;
  border-color: var(--btn-border-color);
  background-color: var(--btn-bg-color);
  color: var(--btn-text-color);
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
  outline: none;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid var(--btn-border-color);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  outline: none;
  vertical-align: middle;
}

input[type="checkbox"]:checked {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#bgImageToggle {
  width: var(--btn1-height-xs);
  height: var(--btn1-height-xs);
}

.shape-outline {
  fill: none;
  stroke: var(--color-anchor-stroke);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* 响应式表单样式 */
.collapse-panel {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--spacing-sm);
  align-items: center;
}

.form-item {
  flex: 1;
  min-width: 0; /* 允许元素收缩到内容宽度，避免溢出 */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-item > label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.grid-hint {
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.form-label-text {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* 系统设置标签样式 - 字体大小14px，字重400 */
#block-panel .collapse-panel:first-child .form-item > label,
#pixel-art-collapse-panel .form-item > label {
  font-size: var(--font-size-base);  /* 使用基础字体大小常量（14px） */
  font-weight: var(--font-weight-normal);  /* 使用正常字重常量（400） */
}

.form-item > input[type="text"],
.form-item > input[type="number"],
.form-item > select {
  width: 100%;
  min-width: 75px;
  height: var(--btn1-height-lg);
  padding: 0 12px;
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  font-size: var(--btn-font-size);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  background-color: var(--btn-bg-color);
  color: var(--color-text-primary);
  transition: all 0.2s ease;
}

.form-item > input[type="text"].input-xs,
.form-item > input[type="number"].input-xs,
.form-item > select.input-xs {
  height: var(--btn1-height-sm);
  padding: 0 8px;
  font-size: var(--font-size-sm);
}

.form-item > button:not(.block-action-btn) {
  width: 100%;
  min-width: 75px;
  height: var(--btn1-height-lg);
  padding: 0 12px;
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  font-size: var(--btn-font-size);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  background-color: var(--btn-bg-color);
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
}

.form-item > button:not(.block-action-btn).btn-xs {
  height: var(--btn1-height-sm);
  padding: 0 8px;
  font-size: var(--font-size-sm);
}

.form-item > input[type="text"]:hover,
.form-item > input[type="number"]:hover,
.form-item > select:hover {
  border-color: var(--color-border-hover);
}

.form-item > button:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-item > button:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form-item > input[type="text"]:focus,
.form-item > input[type="number"]:focus,
.form-item > select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-item > select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.form-item > div {
  width: 100%;
  min-width: 75px;
  padding: 0 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
}

/* 文件设置面板中的按钮组 */
.form-item:has(.block-action-btn) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* 拼布块面板中文件折叠框的表单行样式 */
#patch-panel .collapse-panel:has(#blockNameInput) .form-row {
  margin-bottom: 4px;
}

.block-action-btn {
  flex: 1;
  min-width: 60px;
  height: var(--btn1-height-lg);
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  color: var(--btn-text-color);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  cursor: pointer;
  transition: all 0.2s ease;
}

.block-action-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.block-action-btn:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.block-action-btn.active {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}

.theme-btn {
  flex: 1;
}

.theme-btn:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.theme-mode-btn {
  flex: 1;
}

.theme-mode-btn:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.library-btn {
  flex: 1;
}

.library-btn:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}



#testContainer {
  position: relative;
  width: 100%;
  flex: 1;
  height: var(--btn1-height-lg);
  cursor: pointer;
  border-radius: var(--btn-border-radius);
}

#testContainer.input-xs {
  height: var(--btn1-height-sm);
}

#testInnerRect {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background-color: rgb(235, 235, 235);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  border-radius: var(--btn-border-radius);
}

.special-grid-btn {
  flex: 1;
  height: var(--btn1-height-lg);
  padding: 8px 16px;
  line-height: var(--btn1-height-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-bg-color);
  color: var(--color-text-secondary);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.special-grid-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.special-grid-btn:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 面料库按钮样式 */
#fabric-collapse-panel .shape-icon-button.block-action-btn,
#fabric-collapse-panel .shape-select.block-action-btn {
  flex: none;
  min-width: 60px;
  height: var(--btn1-height-lg);
}

/* 颜色选择器特殊处理 */
.form-item > input[type="color"] {
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 24px;
}

.form-item > input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 3px;
  border: none;
}

.form-item > input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: var(--btn-border-radius);
}

.form-item > input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: var(--btn-border-radius);
}

.form-item > input,
.form-item > select {
  border-radius: var(--btn-border-radius);
}

.form-item > input[type="color"]:focus,
.form-item > input[type="color"]:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* TEST容器样式 */
#testContainer {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--btn-bg-color);
  transition: all 0.2s ease;
}

#testContainer:hover {
  border-color: var(--color-primary-hover);
  background-color: var(--btn-active-bg-color);
}

/* TEST内部矩形样式 */
#testInnerRect {
  background-color: rgb(235, 235, 235);
  border: 0 none #555;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* 系统设置中宽度、高度、水平分割、垂直分割、网格、线宽、背景色和背景图选择框样式 */
.form-item:has(#text1),
.form-item:has(#text2),
.form-item:has(#text3),
.form-item:has(#text4),
.form-item:has(#text5),
.form-item:has(#text6),
.form-item:has(#gridColorInput),
.form-item:has(#lineColorInput),
.form-item:has(#lineWidthInput),
.form-item:has(#lineStyleSelect),
.form-item:has(#bgColorInput),
.form-item:has(#testContainer),
.form-item:has(#specialGrid),
.form-item:has(#specialGridSize) {
  flex: 1;
  min-width: 60px;
}

#text1,
#text2,
#text3,
#text4,
#text5,
#text6,
#gridColorInput,
#lineColorInput,
#lineWidthInput,
#lineStyleSelect,
#bgColorInput,
#testContainer,
#specialGrid,
#specialGridSize {
  min-width: 60px;
  height: var(--btn1-height-lg);
}

#text1.input-xs,
#text2.input-xs,
#text3.input-xs,
#text4.input-xs,
#text5.input-xs,
#text6.input-xs {
  height: var(--btn1-height-sm);
}

/* 单位显示特殊处理 */
#unitDisplay {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
}



/* 对齐表单元素 */
.form-item {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.form-item:has(label) > label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  margin-bottom: 2px;
}

.form-item > input[type="text"],
.form-item > input[type="number"],
.form-item > select {
  width: 100%;
  min-width: 50px;
  height: var(--btn1-height-lg);
  padding: 0 12px;
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  font-size: var(--btn-font-size);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  background-color: var(--btn-bg-color);
  color: var(--color-text-primary);
  align-self: stretch;
  flex-shrink: 1;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.form-item > input[type="text"].input-xs,
.form-item > input[type="number"].input-xs,
.form-item > select.input-xs {
  height: var(--btn1-height-sm);
  padding: 0 8px;
  font-size: var(--font-size-sm);
}

.form-item > button:not(.block-action-btn) {
  width: 100%;
  min-width: 50px;
  height: var(--btn1-height-lg);
  padding: 0 12px;
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  font-size: var(--btn-font-size);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  background-color: var(--btn-bg-color);
  color: var(--color-text-secondary);
  align-self: stretch;
  flex-shrink: 1;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.form-item > button:not(.block-action-btn).btn-xs {
  height: var(--btn1-height-sm);
  padding: 0 8px;
  font-size: var(--font-size-sm);
}

.form-item > input[type="text"]:hover,
.form-item > input[type="number"]:hover,
.form-item > select:hover {
  border-color: var(--color-border-hover);
}

.form-item > button:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-item > button:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form-item > input[type="text"]:focus,
.form-item > input[type="number"]:focus,
.form-item > select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-item > select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.form-item > div {
  width: 100%;
  min-width: 75px;
  padding: 0 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  align-self: stretch;
}

/* 确保宽度和高度始终在同一行 */
.form-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 8px;
  align-items: flex-start;
}

/* 确保尺寸设置组的项目不换行 */
.form-row:nth-of-type(3) .form-item {
  min-width: 100px;
}

/* 确保宽度和高度输入框不换行 */
.form-row:nth-of-type(3) .form-item:nth-child(1),
.form-row:nth-of-type(3) .form-item:nth-child(2) {
  flex: 1;
  min-width: 120px;
}

/* 单位选择器设置 */
.form-row:nth-of-type(3) .form-item:nth-child(3) {
  min-width: 80px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 调整表单行和项目间距 */
  .form-row {
    gap: 6px;
    flex-wrap: nowrap;
  }
  
  /* 确保宽度和高度始终在同一行 */
  .form-row:nth-of-type(3) {
    flex-wrap: nowrap;
  }
  
  /* 调整表单项目宽度 */
  .form-item {
    min-width: 80px;
  }
  
  /* 确保宽度和高度输入框在同一行 */
  .form-row:nth-of-type(3) .form-item:nth-child(1),
  .form-row:nth-of-type(3) .form-item:nth-child(2) {
    flex: 1;
    min-width: 100px;
  }
  
  /* 调整单位选择器 */
  .form-row:nth-of-type(3) .form-item:nth-child(3) {
    min-width: 60px;
  }
  
  /* 调整字体大小 */
  .form-item > label {
    font-size: 12px;
  }
  
  /* 调整输入框样式 */
  .form-item > input[type="text"],
  .form-item > input[type="number"],
  .form-item > select,
  .form-item > button {
    min-width: 60px;
    font-size: var(--btn-font-size);
    height: var(--btn1-height-lg);
    padding: 0 12px;
  }
  
  /* 调整小尺寸输入框样式 */
  .form-item > input[type="text"].input-xs,
  .form-item > input[type="number"].input-xs,
  .form-item > select.input-xs,
  .form-item > button.btn-xs {
    height: var(--btn1-height-sm);
    padding: 0 8px;
    font-size: var(--font-size-sm);
  }

  /* 调整div元素样式，不设置固定高度 */
  .form-item > div {
    min-width: 60px;
    font-size: var(--btn-font-size);
  }

  /* 调整按钮样式 */
  .block-action-btn {
    min-width: 50px;
    font-size: var(--btn-font-size);
    height: var(--btn1-height-lg);
    padding: 0 12px;
  }
}

@media (max-width: 480px) {
  /* 确保宽度和高度始终在同一行 */
  .form-row:nth-of-type(3) {
    flex-wrap: nowrap;
  }
  
  /* 特殊网格设置行在小屏幕上也保持一行 */
  #pixel-art-collapse-panel .form-row {
    flex-wrap: nowrap;
  }
  
  #pixel-art-collapse-panel .form-row .form-item,
  #pixel-art-collapse-panel .form-row button {
    flex: 1;
    min-width: 80px;
  }
  
  /* 确保按钮不换行 */
  #pixel-art-collapse-panel .form-row button {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  
  /* 调整表单项目宽度 */
  .form-item {
    min-width: 60px;
  }
  
  /* 确保宽度和高度输入框在同一行 */
  .form-row:nth-of-type(3) .form-item:nth-child(1),
  .form-row:nth-of-type(3) .form-item:nth-child(2) {
    flex: 1;
    min-width: 80px;
  }
  
  /* 调整单位选择器 */
  .form-row:nth-of-type(3) .form-item:nth-child(3) {
    min-width: 50px;
  }
  
  /* 调整字体大小 */
  .form-item > label {
    font-size: 11px;
  }
  
  /* 调整输入框样式 */
  .form-item > input[type="text"],
  .form-item > input[type="number"],
  .form-item > select,
  .form-item > button {
    min-width: 50px;
    font-size: var(--btn-font-size);
    height: 32px;
    padding: 0 8px;
  }

  /* 调整div元素样式，不设置固定高度 */
  .form-item > div {
    min-width: 50px;
    font-size: var(--btn-font-size);
  }
  
  /* 调整按钮样式 */
  .block-action-btn {
    min-width: 45px;
    font-size: 11px;
    height: var(--btn1-height-lg);
  }
}

/* 覆盖内联样式，确保响应式生效 */
.form-row[style*="margin-top"] {
  margin-top: 8px !important;
}

.form-row[style*="margin-bottom"] {
  margin-bottom: 8px !important;
}

.form-item[style*="max-width"] {
  max-width: 100% !important;
}

.form-item[style*="width: 100%"] {
  width: 100% !important;
}

.form-item[style*="display: flex"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.form-item[style*="gap: 8px"] {
  gap: 8px !important;
}

.form-item[style*="gap: 10px"] {
  gap: 10px !important;
}

.form-row[style*="gap: 6px"] {
  gap: 6px !important;
}

.form-row[style*="gap: 8px"] {
  gap: 8px !important;
}

/* 
=================================================================================
页面级基础样式
=================================================================================
【body元素】
- 设置页面基本字体和布局
- 使用系统字体栈，确保跨平台兼容性
- 建立页面的基础视觉风格
*/
body {
  /* 系统字体栈：优先使用系统默认字体 */
  font-family: 
    -apple-system,               /* macOS和iOS系统字体 */
    BlinkMacSystemFont,          /* Chrome在macOS上的字体 */
    'Segoe UI',                  /* Windows系统字体 */
    'Microsoft YaHei',           /* 微软雅黑，中文支持 */
    sans-serif;                  /* 通用无衬线字体后备 */
  
  /* 布局设置 */
  display: flex;                /* 启用Flexbox布局 */
  min-height: 100vh;           /* 最小高度为视口高度，确保页面占满屏幕 */
  background-color: var(--color-background);   /* 使用CSS变量：浅灰色背景，减少视觉疲劳 */
  padding: var(--spacing-lg);               /* 使用CSS变量：页面内边距，避免内容贴边 */
  gap: var(--spacing-lg);                   /* 使用CSS变量：Flex项目间距 */
  overflow-y: auto;
  width: 100vw;                 /* 宽度占满视口 */
  max-width: 100vw;             /* 最大宽度限制 */
}

/* 
=================================================================================
控制面板样式
=================================================================================
【主控制区域】
- 固定宽度设计（300px）
- 卡片式外观，带有阴影效果
- 圆角边框，现代化视觉风格
*/
.left-panel {
  width: 22%;                  /* 使用百分比宽度，适应不同屏幕 */
  min-width: 200px;            /* 减小最小宽度，允许更大的宽度变动范围 */
  max-width: 360px;            /* 增大最大宽度，适应宽屏显示 */
  height: 100%;                /* 高度为100%，填充父容器 */
  flex-shrink: 1;              /* 允许在空间不足时收缩 */
  flex-grow: 0;                /* 禁止在空间充足时扩展 */
  flex-basis: 22%;             /* 基础宽度 */
  background-color: var(--color-surface);     /* 使用CSS变量：白色背景，突出内容区域 */
  border-radius: 0;           /* 取消圆角 */
  box-shadow: none;  /* 取消阴影 */
  overflow: hidden;              /* 隐藏溢出内容，保持整洁外观 */
  margin-right: 0;          /* 取消间距，使用分隔线 */
  display: flex;               /* 添加flex布局 */
  flex-direction: column;      /* 垂直排列子元素 */
}

.left-panel .left-content {
  overflow-y: auto;            /* 垂直滚动，处理内容溢出 */
  flex: 1;                     /* 填充剩余空间 */
}

/* 左侧底部面板 */
.left-bottom-panel {
  padding: 0 16px;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  gap: 10px;
  height: 20px;
}

.right-panel {
  width: 22%;
  min-width: 200px;
  max-width: 360px;
  height: 100%;                /* 高度为100%，填充父容器 */
  flex-shrink: 1;
  flex-grow: 0;                /* 禁止在空间充足时扩展 */
  flex-basis: 22%;
  background-color: var(--color-surface);
  border-bottom-right-radius: 8px;
  box-shadow: none;
  overflow: hidden;
  margin-left: 0;
  display: flex;               /* 添加flex布局 */
  flex-direction: column;      /* 垂直排列子元素 */
}

.right-panel .right-content {
  overflow-y: auto;            /* 垂直滚动，处理内容溢出 */
  flex: 1;                     /* 填充剩余空间 */
  border-bottom-right-radius: 8px;
}

.tab-rightheader {
  display: flex;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f7;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.tab-item {
  padding: 12px 8px;
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: #86868B;
  background-color: transparent;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
  position: relative;
}

.tab-item:hover:not(.active) {
  background-color: #E5E5EA;
  color: #1D1D1F;
  transform: translateY(-1px);
}

.tab-item.active {
  color: #1D1D1F;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px 8px 0 0;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 16px);
  height: 2px;
  background-color: var(--btn-hover-border-color);
}

.right-content {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.tools-panel {
  display: none;
}

.tools-panel.active {
  display: block;
  width: 100%;
  min-width: 100%;
}

.color-row {
  margin-bottom: var(--spacing-lg);
}

.color-row-title {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: 1;
}

.color-row-title > label {
  margin-left: 5px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary);
}

.color-row-title > label > span {
  color: var(--color-text-secondary);
}

.color-row-title input[type="checkbox"] {
  margin-right: 8px;
}

.color-row-title input[type="checkbox"]:checked {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
}

.color-row-title input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.color-row.active .color-row-title,
.color-row.active .color-row-title > label,
.color-row.active .color-row-title > label > span {
  color: var(--color-text-primary);
}


.theme-mode-label {
  margin-left: 0;
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text-secondary);
}
.theme-mode-label input {
  margin-right: -5px;
}
.theme-mode-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}
.theme-mode-label input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.color-row-swatches {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}

.color-swatch {
  width: 100%;
  height: 20px;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.color-swatch:hover {
  border-color: var(--btn-hover-border-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.color-swatch:active {
  transform: scale(0.98);
}

.fabric-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.fabric-thumb {
  width: 100%;
  height: 20px;
  padding-top: 0;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
}

.fabric-thumb:hover {
  border-color: var(--btn-hover-border-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.fabric-thumb:active {
  transform: scale(0.98);
}

.fabric-grid .fabric-thumb.selected {
  outline: 2px solid var(--btn-hover-border-color);
  outline-offset: -2px;
}

.fabric-selected-bar {
  margin-top: 10px;
}

.fabric-selected-list .fabric-thumb {
  width: 100%;
  height: 20px;
  padding-top: 0;
  margin: 0;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transform: none;
  justify-self: start;
  transition: all 0.2s ease;
}

.fabric-selected-list .fabric-thumb:hover {
  border-color: var(--btn-hover-border-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.fabric-selected-list .fabric-thumb:active {
  transform: scale(0.98);
}

.fabric-selected-list .fabric-thumb {
  line-height: 14px;
  text-align: center;
  cursor: pointer;
}

.fabric-selected-title {
  font-size: 13px;
  color: #555;
  margin: 8px 0;
  display: flex;
  align-items: center;
}

.fabric-selected-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  align-items: center;
  overflow-x: hidden;
  padding: 4px;
  max-height: none;
  overflow-y: visible;
  width: 100%;
  box-sizing: border-box;
}

.fabric-transform-controls label {
  font-size: 13px;
}

.fabric-selected-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 0;
  width: 100%;
  flex-wrap: nowrap;
}

.fabric-selected-actions #fabricGlobalRandomBtn {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}

.fabric-selected-actions span.theme-mode-group {
  min-width: 0;
  display: flex;
  gap: 2px;
  flex-shrink: 1;
}

.fabric-selected-actions .theme-mode-group .theme-mode-btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fabric-transform-controls {
  margin-top: 8px;
  display: grid;
  font-size: 13px;
  gap: 8px;
}
.fabric-transform-controls .transform-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 
=================================================================================
标签页组件样式
=================================================================================
【标签头部】
- Flex布局，标签项等宽分布
- 底部边框作为视觉分隔
*/
.tab-leftheader {
  display: flex;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f7;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* 
【单个标签项】
- 交互式设计：悬停和点击状态
- 过渡动画，提升用户体验
- 文字居中，视觉平衡
*/
.tab-item {
  padding: 12px 8px;
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: #86868B;
  background-color: transparent;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.tab-item:hover:not(.active) {
  background-color: #E5E5EA;
  color: #1D1D1F;
  transform: translateY(-1px);
}

.tab-item.active {
  color: #1D1D1F;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 0;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 16px);
  height: 2px;
  background-color: var(--btn-hover-border-color);
}

.progress-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); display: none; align-items: center; justify-content: center; z-index: 9999; }
.progress-box { background: #fff; padding: 16px; border-radius: 8px; box-shadow: var(--shadow-md); min-width: 280px; display: flex; flex-direction: column; gap: 8px; }
.progress-text { font-size: 14px; color: #333; text-align: center; }
.progress-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.progress-bar-inner { height: 100%; width: 0%; background: #3498db; transition: width 0.1s linear; }

/*
=================================================================================
标签内容区域样式
=================================================================================
【内容容器】
- 固定高度计算，确保一致性
- 垂直滚动支持，处理内容溢出
*/
.left-content {
  padding: 20px;               /* 内容区域内边距 */
  flex: 1;                     /* 占据剩余空间 */
  overflow-y: auto;            /* 垂直滚动，处理内容溢出 */
  min-height: 0;               /* 允许内容区域收缩 */
}

/* 
【标签面板】
- 默认隐藏，通过active类控制显示
- 简单的显示/隐藏切换
*/
.tab-panel {
  display: none;               /* 默认隐藏 */
}

.tab-panel.active {
  display: block;              /* 激活时显示 */
}

/* 
=================================================================================
表单组件样式
=================================================================================
【表单行】
- Flex布局，项目水平排列
- 统一的间距和对齐方式
*/
.form-row {
  display: flex;               /* 启用Flexbox布局 */
  gap: var(--spacing-md);      /* 项目间距 */
  margin-bottom: var(--spacing-md);  /* 底部外边距，分隔不同行 */
}

/* 表单行变体 */
.form-row-flex-start {
  justify-content: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0 var(--spacing-xs);
}

.form-row-padding-sm {
  padding: var(--spacing-sm);
}

.form-row-padding-none {
  padding: 0;
}

.form-row-center {
  justify-content: center;
  width: 100%;
  padding: var(--spacing-sm) 0 var(--spacing-xs);
}

.form-row-nowrap {
  flex-wrap: nowrap;
  gap: 8px;
  padding: var(--spacing-sm) 0 var(--spacing-xs);
}

.form-row-gap-sm {
  gap: 8px;
}

.form-row-gap-md {
  gap: var(--spacing-md);
}

.form-row-gap-lg {
  gap: var(--spacing-lg);
}

/* 表单项目变体 */
.form-item-flex-1 {
  flex: 1;
}

.form-item-flex-05 {
  flex: 0.5;
  min-width: 0;
}

.form-item-flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
}

/* 面板变体 */
.collapse-panel-mt {
  margin-top: var(--spacing-lg);
}

.panel-content-block {
  display: block;
}

.panel-content-hidden {
  display: none;
}

/* 材料库内容 */
.material-library-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-xs);
}

/* 网格提示 */
.grid-hint-center {
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-lg);
}

/* 主题色面板 */
.theme-panel-row {
  margin: var(--spacing-xs) 0 var(--spacing-md);
  display: flex;
  gap: var(--spacing-md);
}

.theme-global-controls {
  margin: var(--spacing-xs) 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* 表单标签复选框 */
.form-label-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0.5;
}

/* 文件输入隐藏 */
.file-input-hidden {
  display: none;
}

/* 颜色样本 */
.color-swatch {
  width: 100%;
  height: 20px;
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.color-swatch:hover {
  border-color: var(--btn-hover-border-color);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.color-swatch:active {
  transform: scale(0.98);
}

/* 
【表单项】
- 等宽分布，适应容器宽度
*/
.form-item {
  flex: 1;                     /* 恢复自适应宽度，显示按钮 */
}

/* 
【表单标签】
- 块级显示，独占一行
- 清晰的视觉层次和文字样式
*/
.form-item label {
  display: block;              /* 块级显示，独占一行 */
  margin-bottom: 5px;          /* 与输入框的间距 */
  font-size: 14px;             /* 标准字体大小 */
  color: var(--color-text-secondary); /* 深灰色文字，良好的可读性 */
  font-weight: var(--font-weight-medium); /* 中等字重 */
}

/* 
【表单输入控件】
- 统一的输入框样式
- 边框、圆角、内边距标准化
*/
.form-item input, 
.form-item select {
  width: 100%;                 /* 宽度100%，填满容器 */
  padding: 4px 4px;           /* 内边距：上下8px，左右12px */
  border: 1px solid var(--color-border); /* 浅灰色边框 */
  border-radius: var(--btn-border-radius); /* 使用全局按钮边框半径 */
  font-size: var(--font-size-base);             /* 标准字体大小 */
  font-family: var(--font-family);             /* 标准字体 */
  color: var(--color-text-primary);           /* 标准文字颜色 */
  background-color: var(--color-surface);     /* 标准背景颜色 */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* 
=================================================================================
QUILT相关样式
=================================================================================
*/

/* 计算输入框 */
.quilt-calc-input {
  width: 45px;
  min-width: 45px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-size: 12px;
}

/* 窄版计算输入框（宽度减少15px） */
.quilt-calc-input-small {
  width: 30px;
  min-width: 30px;
}

/* 单位显示 */
.unit-span {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
  margin-right: 10px;
  vertical-align: middle;
}

/* 颜色选择器 */
.quilt-color-input {
  width: 40px;
  height: 20px;
  margin-left: 5px;
  vertical-align: middle;
  padding: 0;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  overflow: hidden;
  background: none;
}

/* WebKit浏览器的颜色样本样式 */
.quilt-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* WebKit浏览器的颜色样本包装器样式 */
.quilt-color-input::-webkit-color-swatch-wrapper {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Firefox浏览器的颜色样本样式 */
.quilt-color-input::-moz-color-swatch {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Firefox浏览器的颜色样本包装器样式 */
.quilt-color-input::-moz-focus-inner {
  border: none;
  padding: 0;
  margin: 0;
}

/* Firefox浏览器的颜色选择器焦点样式 */
.quilt-color-input:-moz-focusring {
  outline: none;
  border: none;
}

/* 
=================================================================================
浮动工具栏样式
=================================================================================
【浮动工具栏】
- 固定定位，可拖动
- 阴影效果，突出显示
- 响应式设计，自适应内容
*/
.floating-toolbar {
  position: fixed;
  top: 50px;
  left: calc(100% - 110px);
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  cursor: move;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.floating-toolbar[style*="flex-direction: row"] {
  align-items: center;
  justify-content: flex-start;
}

.floating-toolbar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 8px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.floating-toolbar-close {
  cursor: pointer;
  font-size: 18px;
  color: #666;
  transition: color 0.2s;
}

.floating-toolbar-close:hover {
  color: #333;
}

.floating-toolbar-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px;
  cursor: default;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: auto;
  overflow-y: auto;
}

/* 美化工具栏内容区域的滚动条 */
.floating-toolbar-content::-webkit-scrollbar {
  width: 6px;
}

.floating-toolbar-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.floating-toolbar-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.floating-toolbar-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.floating-toolbar[style*="flex-direction: row"] .floating-toolbar-content {
  align-items: center;
  justify-content: flex-start;
  padding: 8px 4px;
}

.floating-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px;
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--btn-text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
}

.floating-toolbar-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.5;
}

.floating-toolbar-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
}

.floating-toolbar-btn:active {
  transform: scale(0.98);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
}

/* 排列方式切换按钮样式 */
.layout-toggle {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.floating-toolbar-btn.active {
  background-color: var(--btn-hover-border-color);
  color: #fff;
  border-color: var(--btn-hover-border-color);
}

.floating-toolbar-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

/* 浮动工具栏输入框样式 */
.floating-toolbar-input {
  padding: 0;
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  width: 32px;
  text-align: center;
  transition: all 0.2s;
  height: 32px;
  background-color: var(--btn-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-toolbar-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* 
=================================================================================
元素栏样式
=================================================================================
【元素栏设计】
- 固定定位，独立于BLOCK面板
- 垂直排列，参考编辑栏设计
- 只能上下移动，不能左右调整
*/
.elements-toolbar {
  position: fixed;
  top: 20px;
  left: 340px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 40px;
  cursor: move;
  user-select: none;
  transition: left 0.3s ease;
}

.elements-toolbar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 14px;
}

.elements-toolbar-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  cursor: default;
}

.elements-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px;
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--btn-text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
}

.elements-toolbar-btn#freeShapeBtn,
.elements-toolbar-btn#svgButton,
.elements-toolbar-btn#fppBtn,
.floating-toolbar-btn#freeShapeBtnToolbar {
  font-size: var(--font-size-sm);
}

.elements-toolbar-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
}

.elements-toolbar-btn:hover svg {
  fill: var(--btn-hover-border-color);
  stroke: var(--btn-hover-border-color);
}

.elements-toolbar-btn:active {
  transform: scale(0.98);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
}

.elements-toolbar-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.elements-toolbar-btn.active {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: white;
}

.elements-toolbar-btn:empty {
  font-weight: 600;
  font-size: var(--font-size-base);
}

/* 
=================================================================================
渲染区域样式
=================================================================================
【主渲染容器】
- Flex布局，居中显示内容
- 自适应大小，处理内容溢出
*/
.render-area {
  flex: 1;                     /* 占据剩余空间 */
  display: flex;               /* 启用Flexbox布局 */
  flex-direction: column;      /* 垂直排列子元素 */
  align-items: center;         /* 水平居中 */
  justify-content: flex-start; /* 顶部对齐，确保标尺不被遮挡 */
  overflow: auto;              /* 显示滚动条，确保内容完整显示 */
  padding: 20px 20px 5px;     /* 内边距：上20px，左右20px，下5px */
  position: relative;          /* 相对定位，为子元素定位提供参考 */
  min-height: 0;               /* 允许收缩，确保flex布局正常 */
  height: auto;               /* 自动高度 */
}

/* 
=================================================================================
网格系统样式
=================================================================================
【网格容器】
- SVG画布的容器元素
- 边框和背景设置
*/
/* 网格窗口容器，包含标尺和网格 */
.grid-with-rulers {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 10px; /* 顶部间距，确保标尺不被遮挡，比原来减少10px，相当于往上移动10px */
  flex-shrink: 0;
}

/* 左侧标尺和网格容器 */
.ruler-grid-container {
  display: flex;
  flex-shrink: 0;
}

/* 标尺样式 */
.ruler {
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  position: relative;
  flex-shrink: 0;
}

/* 顶部标尺 */
.ruler-top {
  height: 24px;
  min-height: 24px;
  margin-left: 24px; /* 与左侧标尺宽度一致 */
}

/* 左侧标尺 */
.ruler-left {
  width: 24px;
  min-width: 24px;
  margin-bottom: 0; /* 与顶部标尺底部对齐 */
}

/* 右侧标尺 */
.ruler-right {
  width: 24px;
  min-width: 24px;
}

/* 标尺刻度 - 移除默认伪元素，使用JavaScript生成的刻度线 */
.ruler::before {
  content: '';
  position: absolute;
  background-color: transparent;
}

/* 顶部标尺刻度 */
.ruler-top::before {
  width: 0;
  height: 0;
  bottom: 0;
}

/* 左侧标尺刻度 */
.ruler-left::before {
  width: 0;
  height: 0;
  right: 0;
}

/* 标尺标签 */
.ruler span {
  position: absolute;
  font-size: 10px;
  color: #333;
  font-family: var(--font-family);
}

/* 顶部标尺标签 */
.ruler-top span {
  bottom: 2px;
  transform: translateX(-50%);
}

/* 左侧标尺标签 */
.ruler-left span {
  right: 2px;
  transform: translateY(-50%);
  text-align: right;
}

/* 尺子标记样式 */
.ruler-mark {
  position: absolute;
}

/* 顶部标尺标记线 */
.ruler-top .ruler-mark-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 10px;
  background-color: var(--color-text-muted);
}

/* 左侧标尺标记线 */
.ruler-left .ruler-mark-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: var(--color-text-muted);
}

/* 顶部标尺短刻度线 */
.ruler-top .ruler-mark-line-half {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 6px;
  background-color: var(--color-text-muted);
}

/* 左侧标尺短刻度线 */
.ruler-left .ruler-mark-line-half {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 1px;
  background-color: var(--color-text-muted);
}

/* 单位显示容器 */
.unit-display-container {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 单位显示框 */
.unit-display-box {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  font-family: var(--font-family);
  background-color: var(--color-background);
}

/* 尺子标记文本 */
.ruler-mark-text {
  position: absolute;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  font-family: var(--font-family);
}

/* 顶部标尺标记文本 */
.ruler-top .ruler-mark-text {
  bottom: 2px;
  left: 0;
  transform: translateX(-50%);
}

/* 左侧标尺标记文本 */
.ruler-left .ruler-mark-text {
  right: 2px;
  top: 0;
  transform: translateY(-50%);
  text-align: right;
}

.grid-container {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid var(--color-text-secondary);
  border-radius: 0;
  display: inline-block;
  overflow: hidden;
  touch-action: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  flex-shrink: 0;
}

#gridSvg {
  /* 确保SVG继承触摸行为 */
  touch-action: inherit;
  -webkit-touch-callout: inherit;
  -webkit-user-select: inherit;
  user-select: inherit;
  /* 禁用焦点轮廓 */
  outline: none;
  outline-offset: 0;
}

/* 确保网格容器和SVG不会显示焦点边框 */
.grid-container,
.grid-container:focus,
.grid-container:focus-within,
#gridSvg:focus,
#gridSvg:focus-within {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* 
【单位标签】
- 绝对定位，显示当前计量单位
- 半透明背景，不影响底层内容查看
*/
.unit-label {
  position: absolute;          /* 绝对定位，脱离文档流 */
  top: 10px;                   /* 距离顶部10px */
  right: 10px;                 /* 距离右侧10px */
  font-size: 12px;             /* 小字体，不喧宾夺主 */
  color: #666;                 /* 灰色文字，柔和不刺眼 */
  background-color: rgba(255, 255, 255, 0.9);  /* 半透明白色背景 */
  padding: 2px 6px;            /* 轻微内边距 */
  border-radius: 3px;          /* 小圆角 */
  border: 1px solid #ddd;      /* 浅灰色边框 */
  z-index: 10;                 /* 层级设置，确保显示在最上层 */
}

/* 
=================================================================================
图形工具按钮样式
=================================================================================

- icon外框方形设计，带有图标
- 悬停效果，提供交互反馈
*/
.shape-icon-button {
  min-width: 38px;
  height: var(--btn1-height-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  transition: all 0.2s ease;
}

.setting-btn {
  width: 100px;
}

.shape-icon-button.active {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}

.shape-icon-button:hover {
  background-color: var(--btn-active-bg-color);
  border-color: var(--btn-hover-border-color);
  color: var(--btn-hover-text-color);
  transition: all 0.2s ease;
}



#saveSettingsBtn,
#resetSettingsBtn {
  flex: 1;
  width: 100%;
  height: var(--btn1-height-lg);
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  color: var(--btn-text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

#saveSettingsBtn:hover,
#resetSettingsBtn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#saveSettingsBtn:active,
#resetSettingsBtn:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shape-icon-button:focus,
.shape-icon-button:focus-visible {
  outline: none;
  background-color: var(--btn-bg-color);
  border-color: var(--btn-border-color);
  color: var(--btn-text-color);
}

.shape-icon-button:focus:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.shape-icon-button:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#themeGlobalControls #themeGlobalRandomBtn {
  width: auto;
  min-width: 50px;
  height: var(--btn1-height-lg);
  padding: 0 12px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}

/* 文件属性面板中的操作按钮样式 */
.block-action-btn {
  width: auto;
  min-width: 40px;
  height: var(--btn1-height-lg);
  padding: 0px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}

.fabric-transform-controls .shape-icon-button.block-action-btn {
  width: auto;
  min-width: 60px;
  height: var(--btn1-height-lg);
}

#fabricGlobalRandomBtn {
  min-width: 40px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}

/* 选中面料面板中的主题模式按钮 */
#fabric-selected-collapse-panel .theme-mode-btn {
  border: 1px solid var(--btn-border-color);
  background: var(--btn-bg-color);
  color: var(--btn-text-color);
  transition: all 0.2s ease;
}

#fabric-selected-collapse-panel .theme-mode-btn:hover {
  border-color: var(--btn-hover-border-color);
}

#fabric-selected-collapse-panel .theme-mode-btn.active {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}

/* 选中面料面板中的变换控制按钮 */
.fabric-transform-controls .shape-icon-button.active {
  background: var(--btn-hover-border-color) !important;
  border-color: var(--btn-hover-border-color) !important;
  color: #fff !important;
}

/* 面料旋转步骤输入框样式 */
#fabricRotateStep {
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

#fabricRotateStep:hover,
#fabricRotateStep:focus {
  border-color: var(--color-primary);
  outline: none;
}

.theme-delete-btn {
  font-size: var(--btn-font-size);
  font-family: var(--font-family);
  font-weight: var(--btn-font-weight);
  color: var(--btn-text-color);
  background: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  height: var(--btn1-height-xs);
  padding: 0 12px;
  cursor: pointer;
  flex: none !important;
}

.theme-delete-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-delete-btn:active {
  transform: scale(0.9);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
}

.theme-delete-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.theme-save-btn {
  font-size: var(--btn-font-size);
  font-family: var(--font-family);
  font-weight: var(--btn-font-weight);
  color: var(--btn-text-color);
  background: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  height: var(--btn1-height-xs);
  padding: 0 12px;
  cursor: pointer;
  flex: none !important;
}

.theme-save-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-save-btn:active {
  transform: scale(0.9);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
}

/* GALLERY 面板中按钮显式保持正方形（与宽度一致） */
.gallery-content .shape-icon-button {
  height: 38px;
  aspect-ratio: 1 / 1;
  font-family: var(--font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  color: var(--btn-text-color);
}

/* GALLERY内容区域特殊样式 - 确保5个按钮每行完美显示 */
.gallery-content .form-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
}

.gallery-content .form-row:last-child {
  margin-bottom: 0;
}

.gallery-content .shape-icon-button {
  flex: 1;
  max-width: calc((100% - 12px) / 4);
  min-width: 0;
}

.gallery-content .shape-icon-button:hover {
  color: var(--btn-hover-text-color);
}

/* ================================================================*/
/* 合并矩形、直角三角形，等腰三角形和扇形，弓形，棱镜 圆形 平行四边形 菱形 正六边形 正八边形 路径图标公共样式 */
.rectangle-icon, .righttriangle-icon, .isoscelestriangle-icon, .sector-icon, .circularsegment-icon, .parallelogram-icon,.lens-icon, .circle-icon ,.diamond-icon,.trapezoid-icon,.hexagon-icon,.octagon-icon{
  width: 24px;
  height: 24px;
  fill: #3498db;
  stroke: #3498db;
  stroke-width: 1;
  transition: fill 0.2s; /* 可选：添加颜色过渡动画，更流畅 */
}

/* 悬停时两个图标都变白色 */ 
.shape-icon-button:hover .rectangle-icon,
.shape-icon-button:hover .righttriangle-icon,
.shape-icon-button:hover .isoscelestriangle-icon,
.shape-icon-button:hover .sector-icon,
.shape-icon-button:hover .circularsegment-icon,
.shape-icon-button:hover .lens-icon,
.shape-icon-button:hover .circle-icon,
.shape-icon-button:hover .parallelogram-icon,
.shape-icon-button:hover .diamond-icon,
.shape-icon-button:hover .trapezoid-icon,
.shape-icon-button:hover .hexagon-icon,
.shape-icon-button:hover .octagon-icon
{
  fill: white;
}
/* ================================================================*/

.shape-icon-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.shape-icon-button[disabled] .diamond-icon {
  fill: #999;
  stroke: #999;
}


.collapse-panel {
  margin-bottom: var(--spacing-lg);          /* 使用CSS变量：底部外边距 */
  border: 1px solid var(--color-border);      /* 使用CSS变量：浅灰色边框 */
  border-radius: var(--radius-md);           /* 使用CSS变量：中等圆角边框 */
  overflow: hidden;               /* 隐藏溢出内容 */
}

/* 
【面板头部】
- Flex布局，两端对齐
- 悬停效果，提升交互体验
*/
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--panel-header-height);
  padding: 0 8px;
  background-color: var(--panel-header-bg-color);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.panel-header:hover {
  background-color: var(--panel-header-hover-bg-color);
}

.panel-title {
  font-weight: var(--font-weight-normal);
  color: var(--panel-title-color);
  font-size: var(--font-size-base);
  letter-spacing: -0.01em;
}

.panel-icon {
  font-size: 11px;
  font-weight: var(--font-weight-normal);
  color: var(--panel-icon-color);
  transition: transform var(--transition-normal);
  display: inline-block;
  cursor: pointer;
  padding: 4px 6px;
  user-select: none;
  border-radius: var(--radius-sm);
}

.panel-icon:hover {
  background-color: var(--color-surface-active);
  color: var(--panel-title-color);
}

/* 
【图层项按钮样式】
- 编辑和删除图标的统一样式
- 悬停效果增强用户体验
- 固定为统一尺寸（32x32），并使用flex居中对齐
*/
.layer-item button {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  transition: all 0.2s ease;      /* 平滑过渡效果 */
  border-radius: 4px;            /* 圆角边框 */
}

.layer-item button:hover {
  border-color: var(--btn-hover-border-color) !important;
  color: var(--btn-hover-text-color);
}

.layer-item button:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 主题色提取面板按钮样式 - 自适应宽度 */
#extra-collapse-panel .shape-icon-button.block-action-btn {
  width: auto !important;
  min-width: 60px;
  flex: 1;
}

/* 删除按钮特殊悬停效果 */
.layer-item button[title="删除"]:hover {
  background-color: #f0f0f0 !important;
  color: #333 !important;
}

/* 
【隐藏数字输入框箭头】
- 针对Webkit浏览器（Chrome, Safari, Edge）
- 针对Firefox浏览器
*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

/* 禁用状态的输入框样式 */
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f0f0f0;
}

.layer-item {
  gap: 2px !important;
}

.layer-item button {
  margin: 0 0.2px;
  flex-shrink: 0;
}

/* 名称输入框样式调整 */
.layer-item input[type="text"],
.layer-item-name {
  flex: 1 !important;
  min-width: 100px !important;
  max-width: none !important;
}

/* 颜色容器样式 */
.layer-item-color-container {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

/* 颜色选择器样式 */
.layer-item-color {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  cursor: pointer;
  box-sizing: border-box;
}

/* 面料缩略图样式 */
.layer-item-fabric-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  box-sizing: border-box;
}

/* 【保存按钮样式】 - 已统一使用全局 button 样式 */

/* 【打开面板按钮样式】
- 面板标题旁边的打开按钮
- 悬停效果和交互反馈
*/

.open-panel-btn {
  padding: 2px 6px;                    /* 内边距 */
  margin-left: auto;                   /* 自动左边距，推到右边 */
  border-radius: 4px;                  /* 圆角 */
  transition: all 0.2s ease;          /* 平滑过渡 */
  opacity: 0.7;                        /* 默认透明度 */
}

.open-panel-btn:hover {
  background-color: var(--color-border-light);  /* 悬停背景色 */
  opacity: 1;                          /* 完全不透明 */
  transform: scale(1.1);                /* 轻微放大 */
}

.open-panel-btn:active {
  transform: scale(0.95);               /* 点击时缩小 */
}

/* 面板标题容器调整 */
.panel-header {
  display: flex;                        /* 启用Flexbox */
  align-items: center;                  /* 垂直居中对齐 */
  height: var(--panel-header-height);
  background-color: var(--panel-header-bg-color);
  gap: 8px;                            /* 元素间距 */
  padding: 0 8px;                      /* 左右内边距 */
  transition: background-color var(--transition-fast);
}

.panel-header:hover {
  background-color: var(--panel-header-hover-bg-color);
}

/* 打开面板按钮与标题之间的间距 */
.panel-header .open-panel-btn + .panel-title {
  margin-left: 4px;                     /* 打开图标与标题之间的额外间距 */
  flex: 1;                             /* 标题占据剩余空间 */
}

/* 确保展开/收起图标在右侧 */
.panel-header .panel-icon {
  margin-left: auto;                    /* 自动左边距，推到最右边 */
}

/* 
【面板内容区域】
- 默认隐藏，通过JavaScript控制显示
- 内边距设置
*/
.panel-content {
  display: none;                /* 默认隐藏 */
  padding: var(--spacing-lg);                /* 使用CSS变量：内容内边距 */
  background-color: var(--color-surface);      /* 使用CSS变量：白色背景 */
  overflow-y: auto;             /* 内容溢出时垂直滚动 */
  flex: 1;                      /* 占据剩余空间 */
}

/* 文件、素材库、拼布块图层面板的padding设置 */
#patch-panel .collapse-panel:first-child .panel-content,
#patch-panel .collapse-panel:has(.material-library-content) .panel-content,
#patch-panel .collapse-panel:has(.layer-list) .panel-content,
#pattern-panel .collapse-panel:has(.pattern-block-layer-list) .panel-content,
#pattern-panel .collapse-panel:has(.gallery-content) .panel-content,
#quilt-panel .collapse-panel:has(#quiltAttributesContent) .panel-content,
#quilt-panel .collapse-panel:has(#quiltTransformControls) .panel-content,
#theme-collapse-panel .panel-content,
#extra-collapse-panel .panel-content,
#fabric-collapse-panel .panel-content,
#fabric-selected-collapse-panel .panel-content {
  padding: var(--spacing-xs) !important;
}

/* 图谱库面板的padding设置 */
#library-panel .panel-content {
  padding: 0 !important;
}

/* 被子-图形变换面板的自动宽度适应 */
#quiltTransformControls .quilt-row {
  display: flex !important;
  gap: 12px !important;
  width: 100%;
}

#quiltTransformControls .quilt-block {
  flex: 1;
  min-width: 0;
}

#quiltTransformControls .quilt-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* 板片统计折叠框样式 */
#statistics-collapse-panel {
  flex: 1;                      /* 占据右侧菜单栏剩余空间 */
  overflow: hidden;              /* 隐藏溢出内容 */
}

#statistics-collapse-panel .panel-content {
  height: 100%;                 /* 高度自适应父容器 */
}

/* 图层列表项样式 */
.layer-list .layer-item {
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.layer-list .layer-item.active {
  background-color: rgba(52, 152, 219, 0.25);
  border: 1px solid var(--color-primary);
}

/* 
=================================================================================
CSS工具类（Utility Classes）
=================================================================================
【文本工具类】
- 快速应用常用的文字样式
- 遵循单一职责原则
*/

/* 文字对齐 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 文字大小 */
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }

/* 文字颜色 */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }

/* 字重 */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-bold { font-weight: var(--font-weight-bold); }

/* 
【间距工具类】
- 快速应用常用的间距样式
- 使用CSS变量保持一致性
*/

/* 内边距 */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* 外边距 */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* 
【显示工具类】
- 控制元素的显示和隐藏
*/
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* 
【弹性布局工具类】
- 快速应用Flexbox布局
*/
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* 
=================================================================================
响应式设计（Media Queries）
=================================================================================
【移动优先的响应式设计】
- 从最小屏幕开始设计，逐步适配大屏幕
- 使用相对单位，确保可伸缩性
- 考虑触摸交互和可读性
*/

/* 
【超小屏幕（< 768px）】
- 手机竖屏模式
- 单列布局，大触摸目标
*/
@media (max-width: 767.98px) {
  body {
    padding: var(--spacing-sm);           /* 减小页面内边距 */
    gap: var(--spacing-md);               /* 减小元素间距 */
    flex-direction: column;                /* 垂直布局 */
  }
  
  .left-panel {
    width: 100%;                          /* 控制面板占满宽度 */
    min-width: unset;                     /* 取消最小宽度限制 */
    max-width: 100%;                      /* 最大宽度100% */
    margin-bottom: var(--spacing-md);     /* 添加底部间距 */
    margin-right: 0;                      /* 在小屏幕上取消右边距 */
  }

  .right-panel {
    width: 100%;                          /* 右侧工具栏占满宽度 */
    min-width: unset;                     /* 取消最小宽度限制 */
    max-width: 100%;                      /* 最大宽度100% */
    margin-left: 0;                       /* 在小屏幕上取消左边距 */
  }
  
  .form-row {
    flex-direction: column;               /* 表单行改为垂直布局 */
    gap: var(--spacing-sm);               /* 减小间距 */
  }
  
  /* 保持拼布图谱库的按钮横向排列 */
  .gallery-content .form-row {
    flex-direction: row;                 /* 保持横向布局 */
  }
  
  /* 保持系统设置中语言和单位按钮的横向排列 */
  .form-row:has(.language-btn),
  .form-row:has(.unit-btn),
  .form-row:has(#text1),
  .form-row:has(#text2),
  .form-row:has(#text3),
  .form-row:has(#text4),
  .form-row:has(#text5),
  .form-row:has(#text6),
  .form-row:has(#bgColorInput),
  .form-row:has(#bgImagePickerBtn),
  .form-row:has(.theme-btn),
  .form-row:has(.fabric-type-btn),
  .form-row:has(#fabricSelectAllBtn),
  .form-row:has(#fabricGlobalRandomBtn) {
    flex-direction: row;                 /* 保持横向布局 */
    gap: 12px;                           /* 保持按钮间距 */
  }
  

  
  .shape-icon-button {
    height: 48px;                         /* 增大触摸目标 */
  }
  
  /* 主题按钮在窄屏时自适应宽度 */
  .form-row:has(.theme-btn) .shape-icon-button {
    width: auto;
    flex: 1;
    min-width: 0;
  }
  
  /* 面料库按钮在窄屏时自适应宽度 */
  .form-row:has(.fabric-type-btn) .shape-icon-button,
.form-row:has(#fabricSelectAllBtn) .shape-icon-button {
  width: auto;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
}

.fabric-type-btn {
  border-radius: var(--radius-lg);
  flex: 1;
}

.fabric-type-btn.active {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}
  
  /* 面料选中区域按钮在窄屏时自适应宽度 */
  .fabric-selected-actions {
    width: 100%;
    flex-wrap: nowrap;
  }
  
  .fabric-selected-actions #fabricGlobalRandomBtn {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
  }
  
  .fabric-selected-actions span.theme-mode-group {
    min-width: 0;
    display: flex;
    gap: 2px;
    flex-shrink: 1;
  }
  
  .fabric-selected-actions .theme-mode-group .theme-mode-btn {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gallery-content .shape-icon-button {
    height: 48px;                         /* 与宽度一致，保持正方形 */
    aspect-ratio: 1 / 1;                  /* 确保宽高比为1:1 */
    max-width: calc((100% - 12px) / 4); /* 4个按钮，考虑3个间距 */
  }

  .floating-toolbar,
  .elements-toolbar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-bottom: var(--spacing-md);
    width: 100%;
    max-width: 100%;
  }
}

/* 
【中等屏幕（768px - 1023px）】
- 平板设备
- 考虑分屏使用场景
*/
@media (min-width: 768px) and (max-width: 1023.98px) {
  body {
    padding: var(--spacing-md);           /* 中等内边距 */
    gap: var(--spacing-md);               /* 中等间距 */
  }
  
  .left-panel {
    width: 22%;                          /* 使用百分比宽度 */
    min-width: 240px;
    max-width: 280px;
  }

  .right-panel {
    width: 22%;
    min-width: 240px;
    max-width: 280px;
  }
  
  /* 编辑栏使用固定定位，可以自由移动 */
  .floating-toolbar {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
  }
}

/* 打印样式 */
@media print {
  /* 确保背景颜色和图片在打印时显示 */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* 隐藏页面上的所有内容，除了板片统计 */
  body > *:not(div[style*="position: fixed"]),
  .left-panel,
  .right-panel,
  .render-area,
  .floating-toolbar,
  .elements-toolbar,
  .tab-panel,
  .tab-header,
  .tools-header,
  .right-content,
  .collapse-panel:not(#statistics-collapse-panel) {
    display: none !important;
  }
  
  /* 确保只有板片统计内容显示 */
  #statistics-collapse-panel .panel-content > *:not(#shapeStatisticsList) {
    display: none !important;
  }
  
  /* 确保统计表格的颜色块在打印时显示 */
  .statistics-table td div {
    border: 1px solid #ddd !important;
  }
  
  /* 控制打印页面布局 */
  body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    background-color: white !important;
  }
  
  /* 确保打印容器适合单页 */
  div[style*="position: fixed"] {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background-color: white !important;
  }
  
  /* 调整打印内容的最大宽度，确保适合单页 */
  div[style*="max-width: 800px"] {
    max-width: 100% !important;
  }
  
  /* 打印时调整可见图形总数的样式 */
  .statistics-footer {
    display: block !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #eee !important;
  }
  
  .statistics-total {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    font-size: 12px !important;
  }
  
  .statistics-total #visibleShapesCount {
    min-width: 40px !important;
    text-align: center !important;
    margin-left: 4px !important;
  }
  
  /* 打印时的图像样式，确保只打印图像内容 */
  @media print {
    div[style*="position: fixed"] img {
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    /* 确保预览图像和其他元素没有样式，但不影响统计表格中的颜色块 */
    div[style*="position: fixed"] div:not(.statistics-table td div) {
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    /* 确保统计表格中的颜色块在打印时显示正确 */
    div[style*="position: fixed"] .statistics-table td div {
      border: 1px solid #ddd !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      /* 移除background-color: inherit，允许颜色块显示自己的背景色 */
    }
    
    /* 确保预览图像容器没有样式 */
    div[style*="text-align: center"][style*="marginBottom"] {
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }
  
  /* 防止内容不必要地分页 */
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
  
  /* 移除统计列表中的刷新按钮 */
  .statistics-refresh-btn {
    display: none !important;
  }
  
  /* 确保只显示统计表格内容 */
  #statistics-collapse-panel #shapeStatisticsList {
    display: block !important;
  }
  
  /* 确保统计表格完整显示 */
  .statistics-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  
  /* 确保统计表格的列正确显示 */
  .statistics-table th,
  .statistics-table td {
    padding: 8px !important;
    border: 1px solid #ddd !important;
  }
}

/* 大屏幕（1024px - 1439px）】
- 小型笔记本
- 标准桌面布局
*/
@media (min-width: 1024px) and (max-width: 1439.98px) {
  body {
    padding: var(--spacing-lg);           /* 大内边距 */
    gap: var(--spacing-lg);               /* 大间距 */
  }
  
  .left-panel {
    width: 22%;                          /* 使用百分比宽度 */
    min-width: 260px;
    max-width: 320px;
  }

  .right-panel {
    width: 22%;
    min-width: 260px;
    max-width: 320px;
  }
  
  /* 编辑栏使用固定定位，可以自由移动 */
  .floating-toolbar {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
  }
}

/* 
【超大屏幕（≥ 1440px）】
- 大型显示器
- 考虑内容区域的最大宽度
*/
@media (min-width: 1440px) {
  body {
    padding: var(--spacing-xl);           /* 超大内边距 */
    gap: var(--spacing-xl);               /* 超大间距 */
  }
  
  .left-panel {
    width: 20%;                          /* 使用百分比宽度 */
    min-width: 300px;
    max-width: 360px;
  }

  .right-panel {
    width: 20%;
    min-width: 300px;
    max-width: 360px;
  }

  /* 编辑栏使用固定定位，可以自由移动 */
  .floating-toolbar {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
  }

  .elements-toolbar {
    left: 380px;
  }

  .render-area {
    max-width: 1600px;                    /* 限制最大宽度，避免过度拉伸 */
    margin: 0 auto;                       /* 水平居中 */
    max-height: none;
    min-height: 0;
  }
}

/* 软件说明样式 */
.software-desc-container {
  padding: 8px;
}

.software-desc {
  margin: 0 0 12px 0;
  line-height: 1.5;
  font-size: var(--font-size-base);  /* 12px */
  font-weight: var(--font-weight-normal);  /* 400 */
  color: var(--color-text-secondary);  /* 使用次要文字颜色常量 */
}

/* 登录说明样式 */
.login-desc {
  padding: 8px 12px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.login-desc span {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

/* 板片统计样式 */
.statistics-container {
  color: var(--color-text-primary);
}

.statistics-header {
  font-size: var(--font-size-base);  /* 使用基础字体大小常量（14px） */
  color: var(--color-text-primary);
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.statistics-filename {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.statistics-filename > span {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.statistics-footer {
  font-size: var(--font-size-base);  /* 使用基础字体大小常量（14px） */
  color: var(--color-text-secondary);
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  border-top: 1px solid #eee;
}

.statistics-total {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  text-align: right;
  padding-right: 12px;
  min-width: 150px;
}

.statistics-total > span {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.statistics-refresh-btn {
  margin-left: 10px;
  padding: 0 12px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.statistics-refresh-btn:focus,
.statistics-refresh-btn:focus-visible {
  outline: none;
  border-color: var(--btn-border-color);
}

.statistics-refresh-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.statistics-refresh-btn:active {
  transform: scale(0.9);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
}

.statistics-table {
  width: 100%;
  border-collapse: collapse;
}

.statistics-table td {
  padding: 6px 4px;
  text-align: center;
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.statistics-table td.color-cell {
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.statistics-table td.color-cell .color-letter {
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
}

.statistics-table td.shape-name {
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.statistics-table td.shape-size {
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.statistics-table td.shape-count {
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.statistics-table td.no-data-cell {
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  text-align: center;
  padding: 10px;
}

.statistics-table-header {
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

.statistics-table-th {
  padding: 6px 4px;
  text-align: center;
  font-weight: normal;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text-secondary);
}

.statistics-table-th > span,
.statistics-table-th {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.statistics-table-th:first-child {
  width: 50px;
}

.statistics-no-data {
  text-align: center;
  padding: 10px;
  font-size: var(--font-size-base);  /* 使用基础字体大小常量（14px） */
  color: var(--color-text-secondary);
}

/* 板片统计表格内容样式 */
.statistics-table tbody tr td {
  font-size: var(--font-size-sm);  /* 使用小字体常量（12px） */
  color: var(--color-text-primary);
  text-align: center;
  padding: 6px 4px;
}

/* 
=================================================================================
可访问性增强（Accessibility）
=================================================================================
【焦点样式】
- 为键盘导航提供清晰的焦点指示
- 符合WCAG 2.1标准
*/

/* 焦点可见性 */
*:focus {
  outline: 2px solid var(--color-primary);    /* 使用主色调作为焦点颜色 */
  outline-offset: 2px;                        /* 焦点轮廓偏移，增加可见性 */
}

/* 按钮焦点样式 */
button:focus,
button:focus-visible {
  outline: none;
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
}

/* 自定义焦点样式（可选） */
.form-item input:focus,
.form-item select:focus {
  border-color: var(--color-primary);         /* 边框颜色变化 */
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);  /* 轻微的发光效果 */
}

/* BLOCK名称输入框样式 - 自适应宽度 */
#patch-panel .collapse-panel:has(#blockNameInput) .form-row {
  margin-bottom: 4px;
  width: 100%;
}

#patch-panel .collapse-panel:has(#blockNameInput) .form-item {
  width: 100%;
  min-width: 0 !important;
  flex: 1 !important;
}

#patch-panel .collapse-panel:has(#blockNameInput) .shape-icon-button.block-action-btn {
  width: auto !important;
  min-width: 60px;
  flex: 1;
}

#blockNameInput {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* BLOCK名称输入占位符颜色 */
#blockNameInput::placeholder {
  color: #999;
}

/* 
【高对比度模式支持】
- 支持Windows高对比度模式
- 使用系统颜色关键字
*/
@media (prefers-contrast: high) {
  :root {
    --color-primary: #0000ff;                 /* 在高对比度下使用更鲜明的蓝色 */
    --color-text-primary: #000000;            /* 纯黑色文字 */
    --color-border: #000000;                  /* 纯黑色边框 */
  }
}

/* 
【减少动画偏好】
- 尊重用户的动画偏好设置
- 为晕动症患者提供更好的体验
*/
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.layer-list {
  overflow-x: hidden;
}
.layer-color-swatch {
  display: flex;
  gap: 6px;
  padding: 8px;
  background-color: var(--color-surface);
  flex-wrap: wrap;
}
.layer-color-swatch .color-chip {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
}
.layer-color-swatch .color-chip.selected {
  outline: 2px solid var(--color-primary);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25);
}
.color-builder-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.theme-create-btn {
  font-size: 12px;
  color: #2c3e50;
  background: #ffffff;
  border: 1px solid #3498db;
  border-radius: 6px;
  height: var(--btn1-height-lg);
  padding: 0 12px;
  min-width: 40px;
  cursor: pointer;
  margin: 0 var(--spacing-xs);
}
.theme-import-btn, .theme-extract-btn {
  font-family: var(--font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  color: var(--btn-text-color);
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  height: var(--btn1-height-lg);
  padding: 0 12px;
  min-width: 50px;
  cursor: pointer;
  margin: 0 var(--spacing-xs);
  transition: all 0.2s ease;
}

.theme-import-btn:hover, .theme-extract-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-import-btn:active, .theme-extract-btn:active {
  transform: scale(0.9);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
}
.theme-create-btn:hover { background: #efefef; }

.theme-builder-panel {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}

.builder-inputs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

.builder-inputs .builder-color {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 1px solid #ddd;
}

.builder-actions { margin-top: 10px; display: flex; gap: 8px; }
.theme-mode-btn {
  font-size: var(--btn-font-size);
  font-family: var(--font-family);
  font-weight: var(--btn-font-weight);
  color: var(--btn-text-color);
  background: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  height: var(--btn1-height-xs);
  padding: 0 12px;
  cursor: pointer;
}
.theme-mode-btn.active {
  background: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}
.theme-mode-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.floating-toolbar-btn:active {
  transform: scale(0.9);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
}
.theme-mode-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.theme-mode-btn:not(.active):focus,
.theme-mode-btn:not(.active):focus-visible {
  outline: none;
}
.theme-builder-panel .builder-inputs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.theme-builder-panel .builder-inputs .builder-color {
  height: 20px;
  padding: 0;
}
.theme-builder-panel .builder-actions #themeBuilderNameInput {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  flex: 0 0 220px;
}

#imageImportPreview {
  width: 100%;
  min-height: 160px;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
  margin-bottom: 5px;
}

#imageImportPreview img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.layer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 4px;
}

.layer-item.active, #patternBlockLayerList .layer-item.active {
  outline: 1px solid var(--btn-hover-border-color);
  outline-offset: -1px;
  background: rgba(64, 158, 255, 0.2);
}

.layer-item.active .layer-thumb {
  border: 1px solid #ddd;
  box-shadow: none;
}

.layer-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.layer-name-input {
  flex: 1;
  min-width: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
}

.layer-name-input:focus {
  outline: none;
  border-color: #ddd;
  box-shadow: none;
}

.layer-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  height: 100%;
}

.layer-actions {
  display: flex;
  gap: 0px;
  align-items: stretch;
  flex-shrink: 0;
  margin-left: 2px;
  height: 100%;
}

.layer-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 24px;
  height: 100%;
  width: auto;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.layer-btn:hover {
  background-color: #f0f0f0;
}

.layer-btn svg {
  width: 16px;
  height: 16px;
  fill: #555;
  transition: fill 0.2s;
}

.layer-btn:hover svg {
  fill: #333;
}

.layer-btn[title="删除"]:hover svg {
  fill: #333;
}

.quilt-variants { display: flex; flex-direction: column; gap: 12px; }
.quilt-row { display: flex; gap: 14px; align-items: flex-start; }
.quilt-block { display: flex; flex-direction: column; gap: 4px; align-items: center; cursor: pointer; }
.quilt-title { font-size: 12px; color: #555; text-align: center; margin-top: 12px; }
.quilt-grid { display: grid; grid-template-columns: repeat(2, 64px); grid-auto-rows: 64px; gap: 0; position: relative; border: none; }
.quilt-grid .frame { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 1px solid #000; pointer-events: none; z-index: 4; }
.quilt-grid img { width: 64px; height: 64px; display: block; transform-origin: center; border: none; border-radius: 0; position: relative; z-index: 1; }
.quilt-grid::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #999; z-index: 3; pointer-events: none; }
.quilt-grid::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid #999; z-index: 3; pointer-events: none; }
.flip-h { transform: scaleX(-1); }
.flip-v { transform: scaleY(-1); }
.flip-both { transform: scale(-1, -1); }
.rot-90 { transform: rotate(90deg); }
.rot-180 { transform: rotate(180deg); }
.rot-270 { transform: rotate(270deg); }
#patternBlockLayerList {
  overflow-y: auto;
}

/* 
=================================================================================
图形编辑器弹窗样式
=================================================================================
*/
.shape-editor-popup {
  position: fixed;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 8px;
  z-index: 1000;
  font-size: 14px;
}

.shape-editor-popup input[type="text"],
.shape-editor-popup input[type="number"],
.shape-editor-popup .editor-input {
  width: 50px;
  color: #333;
  padding: 2px 4px;
  text-align: left;
}

.shape-editor-popup input[type="text"]:focus,
.shape-editor-popup input[type="number"]:focus,
.shape-editor-popup .editor-input:focus,
.shape-editor-popup input[type="range"]:focus {
  outline: none;
  border-color: #ddd;
  box-shadow: none;
}

.editor-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px; /* 统一行距 */
}

/* 移除特定mt-6类，因为现在所有行都有margin-top */
/* 此行类名已统一由 .editor-row 的 margin-top 处理，无需额外空规则 */
  /* margin-top: 6px; */


.editor-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.editor-label {
  margin-right: 4px;
  text-align: left; /* 文字左对齐 */
  flex: 0 0 70px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}

.ratio-lock-btn {
  cursor: pointer;
  margin-left: 8px;
  color: #ccc;
  transform: rotate(0deg);
}

.ratio-lock-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  transform: scale(1.25, 1.25); /* 垂直方向放大2倍 */
  transform-origin: center;
}

/* 编辑器弹窗样式补充 */
.editor-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rotation-slider {             
  accent-color: #18A0FB;
  width: 160px;
}

.ratio-lock-btn.active {
  color: #333;
}

.angle-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.editor-btn-row {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.editor-btn-row .shape-icon-button {
  font-size: var(--font-size-base);
  width: auto;
  padding: 0 12px;
  height: var(--btn1-height-lg);
  background: var(--btn-bg-color);
  color: var(--color-text-secondary);
  border: 1px solid var(--btn-border-color);
}

/* Quilt Preview Info */
.quilt-info-container {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.quilt-info-thumb {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 1px solid #ddd;
}

.quilt-info-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  margin-bottom: 0;
  /* transform: scale(0.9); */
  /* transform-origin: right center; */
}

.quilt-calc-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #333;
}

.quilt-calc-input {
  width: 45px !important;
  min-width: 45px !important;
  padding: 0 0px !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}

/* Color Picker Popup */
.chip-color-picker-popup {
  position: fixed;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  z-index: 1000;
}
.chip-color-picker-input {
  width: 32px;
  height: 32px;
  border: none;
}

/* Gallery Popup */
.gallery-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 12px;
  z-index: 1000;
  min-width: 280px;
  max-width: 80vw;
  max-height: 70vh;
  overflow: auto;
}
.gallery-title {
  font-weight: 600;
  margin-bottom: 8px;
}
.gallery-content {
  font-size: 12px;
  color: #666;
}
.gallery-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.gallery-item {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.gallery-item img {
  display: block;
  margin: 0 auto 0;
  width: 50%;
  height: auto;
}

.gallery-item img {
  border: 1px solid #ddd;
  border-radius: 6px;
}

.gallery-item-name {
  font-size: 12px;
  color: #333;
}

/* Gallery Item Hover Effect - Only highlight image */
.gallery-item:hover {
  border-color: #eee; /* Keep default border or transparent */
  background: transparent; /* No background change for container */
}

.gallery-item:hover img {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  transform: translateY(-2px);
  transition: all 0.2s;
}

.quilt-name-display {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.layer-size-info {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

/* Lock Button */


/* Opacity Control */
.opacity-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.opacity-control .opacity-label {
  flex-shrink: 0;
}

.opacity-control .opacity-range {
  flex: 1;
  min-width: 80px;
}

.opacity-control .opacity-value {
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
}

.opacity-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family);
  color: var(--color-text-secondary);
}

.opacity-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family);
  color: var(--color-text-secondary);
}

.opacity-range {
  accent-color: #18A0FB;
}

.opacity-range:focus {
  outline: none;
  box-shadow: none;
}

/* Chips Container */
.chips-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin-top: 8px;
}

/* Quilt Grid Selection */
.quilt-grid.selected {
  outline: 2px solid #1890ff;
}

/* Layer Item Styles for Patch Layer */
/* .layer-item-checkbox {} */
.layer-item-color {
  width: 22px;
  height: 22px;
  border: 1px solid #ddd;
  padding: 0;
}
.layer-item-name {
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  padding: 2px 6px;
  margin-right: 8px;
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  background-color: var(--btn-bg-color);
}

.layer-item-name:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}



/* 联系方式图标按钮样式 */
.contact-icon-btn {
  width: 40px;
  height: 40px;
  border: none;
  background-color: #18A0FB;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-icon-btn:hover {
  background-color: #0d8de3;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 微信按钮样式 */


.contact-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* 二维码弹窗样式 */
.qrcode-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode-modal-content {
  background-color: white;
  margin: auto;
  padding: 24px;
  border: 1px solid #888;
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

.qrcode-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  right: 16px;
  top: 8px;
  cursor: pointer;
}

.qrcode-close:hover,
.qrcode-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.qrcode-container {
  text-align: center;
}

/* 编辑器弹窗样式 */
.editor-header {
  background-color: #f0f0f0;
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.editor-title {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}

.editor-drag-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.editor-content {
  padding: 12px;
}

.rotation-row {
  display: none;
  padding: 0 12px;
}

.editor-col-full {
  width: 100%;
}

.rotation-unit,
.editor-unit {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  margin-left: 4px;
}

.rotation-slider {
  margin-top: 4px;
}

.editor-btn-row {
  padding: 12px;
}

/* 语言按钮和单位按钮样式 */
.language-btn,
.unit-btn {
  flex: 1;
  height: var(--btn1-height-lg);
  padding: 8px 4px;
  font-weight: var(--btn-font-weight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  color: var(--btn-text-color);
  transition: all 0.2s ease;
}

.language-btn:hover,
.unit-btn:hover {
  border-color: var(--btn-hover-border-color);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-hover-text-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.language-btn.active,
.unit-btn.active {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}

.language-btn:active,
.unit-btn:active {
  transform: scale(0.95);
  background-color: var(--btn-active-bg-color);
  color: var(--btn-active-text-color);
  border-color: var(--btn-hover-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 表单行特殊样式 */
.form-row-flex-start {
  gap: 8px;
  justify-content: stretch;
}

.form-row-flex-start > * {
  flex: 1;
  min-width: 0;
  border-radius: var(--btn-border-radius);
}

.form-row-flex-start > *:first-child {
  border-radius: var(--btn-border-radius);
}

.form-row-flex-start > *:last-child {
  border-radius: var(--btn-border-radius);
}

.form-row-padding-sm {
  padding: 8px 0 4px;
}

.form-row-padding-none {
  padding: 0;
}

.form-row-center {
  justify-content: center;
  width: 100%;
}

/* 重置设置按钮样式 */


/* 折叠面板特殊样式 */
.collapse-panel-margin-top {
  margin-top: 12px;
}

/* 像素艺术面板样式 */
.pixel-art-merge-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 4px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pixel-art-merge-wrapper input[type="range"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pixel-art-merge-range {
  width: 100%;
  margin: 0;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pixel-art-merge-value {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
  display: none;
}

/* 像素艺术提示样式 */
.pixel-art-hint {
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
  color: #666;
}

/* Logo 容器样式 */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  height: 100px;
}

.logo-image {
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* 素材库内容样式 */
.material-library-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1px;
}

/* 隐藏元素样式 */
.hidden-element {
  display: none;
}

/* 预览大图容器样式 */
.preview-large-container {
  display: none;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 记录编号样式 */
.copyright {
  text-align: center;
  padding: 5px 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.copyright span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.copyright a {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  text-decoration: none;
}

.copyright a:hover {
  text-decoration: underline;
}

/* Logo文字样式 */
.logo-bar {
  padding: 26px 12px 12px 22px;
  height: 48px;
  display: flex;
  align-items: center;
}

/* Logo容器 */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Logo图标 */
.logo-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.logo-text {
  font-weight: bold;
  color: var(--btn-hover-border-color);
  font-size: 22px;
  transition: opacity 0.3s ease;
  text-align: center;
}

/* narrow类已禁用，始终显示图标和文字 */
/*
.left-sidebar.narrow .logo-text {
  display: none;
}

.left-sidebar.narrow .user-info {
  display: none;
}

.left-sidebar.narrow .user-account {
  justify-content: center;
  padding: 12px;
}

.left-sidebar.narrow .user-avatar {
  margin-right: 0;
  flex-shrink: 0;
}
*/

/* 语言选择下拉框样式 */
.language-select {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
  min-width: 80px;
  appearance: none;
  /* 移除箭头图标 */
}

.language-select:hover {
  font-weight: 600;
}

.language-select option {
  background: white;
  color: var(--color-text-primary);
  padding: 8px 12px;
}

/* 确保点击整个区域都能触发下拉框 */
.language-selector {
  cursor: pointer;
}

.language-selector select {
  cursor: pointer;
}

/* ICP 备案链接样式 */
.icp-link {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  text-decoration: none;
}

.icp-link:hover {
  text-decoration: underline;
}

/* 备案图标样式 */
.police-record-icon {
  vertical-align: middle;
  margin-right: 4px;
  height: 12px;
}

/* 主题按钮样式 */
.theme-btn {
  flex: 1;
  border: 1px solid var(--btn-border-color);
  font-size: var(--btn-font-size);
  font-family: var(--font-family);
  font-weight: var(--btn-font-weight);
  color: var(--btn-text-color);
  background-color: var(--btn-bg-color);
  border-radius: var(--btn-border-radius);
  height: 38px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-btn:hover {
  border-color: var(--btn-hover-border-color);
  color: var(--btn-hover-text-color);
}

.theme-btn:active {
  transform: scale(0.98);
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}

.theme-btn.active {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}

/* 主题构建器面板样式 */
.theme-builder-panel {
  display: none;
}

/* 多边形编辑器样式 */
.polygon-sides-section-title {
  margin: 10px 0;
  font-size: 14px;
  font-weight: normal;
}

.polygon-side-row {
  margin: 5px 0;
  font-size: 14px;
}

.polygon-side-value {
  font-size: 14px;
}

/* 浮动工具栏内容区域样式 */
.floating-toolbar-content-scrollable {
  overflow-y: auto;
}

/* 显示编辑栏 */
.floating-toolbar {
  display: block;
}

/* ================================================================================
   右键菜单样式
   ================================================================================ */
.context-menu {
  position: fixed;
  background-color: var(--color-surface-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  min-width: 160px;
  padding: var(--spacing-xs) 0;
  z-index: 10000;
}

.context-menu-item {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.context-menu-item:hover {
  background-color: var(--color-surface-hover);
}

/* 主题名称样式 */
.theme-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

/* 空状态提示样式 */
.empty-message {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  text-align: center;
  padding: 20px;
}

/* 联系按钮文字样式 */
.contact-button-text {
  color: white;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* 联系信息样式 */
.contact-info {
  margin-left: 8px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* 图层图标样式 */
.layer-icon {
  fill: var(--color-text-secondary);
  stroke: none;
  stroke-width: 0;
  font-weight: var(--font-weight-normal);
}

.layer-item-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.layer-item-btn:hover {
  background-color: #f0f0f0;
}

.layer-item-btn svg {
  width: 14px;
  height: 14px;
  transition: fill 0.2s;
}

.layer-item-btn:hover svg {
  fill: var(--color-text-primary);
}

.layer-item-btn[title="删除"]:hover {
  color: #333;
}

/* 拼布块-文件中的按钮样式 */
#blockInitBtn, #toolsImportJsonBtn, #blockNameSaveBtn, #referenceImageBtn, #blockNameUseBtn {
  height: var(--btn1-height-lg);
}

/* 拼布图谱库中的按钮样式 */
#galleryBasicBtn, #galleryAdvancedBtn, #galleryClassic1050Btn, #galleryFullTileBtn {
  height: var(--btn1-height-lg);
}

/* 颜色-主题色中的按钮样式 */
.theme-btn, #themeGlobalRandomBtn, #importImageBtn, #extractColorsBtn, #extractSaveBtn, #themeBuilderSaveBtn, #themeBuilderCancelBtn {
  height: var(--btn1-height-lg);
}

/* 新建主题按钮样式 */
#extractSaveBtn {
  flex: none;
  width: 80px;
  min-width: 80px;
  margin-left: auto;
}



/* 面料-面料库中的按钮样式 */
.fabric-type-btn, #fabricSelectAllBtn, #fabricInvertSelectBtn, #fabricLoadBtn {
  height: var(--btn1-height-lg);
}

/* 面料-选中面料中的按钮样式 */
#fabricGlobalRandomBtn, #fabricRotateLeftBtn, #fabricRotateRightBtn, #fabricGrainBtn, #fabricMoveBtn, #fabricResetBtn {
  height: var(--btn1-height-lg);
}

/* 面料-选中面料中的同色、同型、匹配按钮样式 */
#fabricGlobalModeSameColor, #fabricGlobalModeSameType, #fabricGlobalModeMatch {
  height: var(--btn1-height-xs);
}

/* 输出-板片统计中的按钮样式 */
#gridBackgroundBtn, #lineArtBtn, #artworkBtn, #exportPrintBtn, .statistics-refresh-btn {
  height: var(--btn1-height-lg);
}

/* 浮动窗口颜色库中的添加到我的颜色按钮 */
.add-to-my-colors-btn {
  width: 100%;
  padding: 8px;
  background-color: var(--btn-bg-color);
  color: var(--color-text-secondary);
  border: 1px solid var(--btn-border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.add-to-my-colors-btn:hover {
  background-color: var(--btn-hover-bg-color);
  border-color: var(--btn-hover-border-color);
  color: var(--btn-hover-text-color);
}

.add-to-my-colors-btn:active {
  background-color: var(--btn-active-bg-color);
  border-color: var(--btn-hover-border-color);
  color: var(--btn-active-text-color);
}

/* 浮动窗口颜色库中的库选择按钮 */
.library-btn {
  flex: 1;
  height: var(--btn1-height-lg);
  background-color: var(--btn-bg-color);
  color: var(--color-text-primary);
  border: 1px solid var(--btn-border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all 0.2s ease;
}

.library-btn:hover {
  background-color: var(--btn-hover-bg-color);
  border-color: var(--btn-hover-border-color);
  color: var(--btn-hover-text-color);
}

.library-btn:active {
  background-color: var(--btn-active-bg-color);
  border-color: var(--btn-hover-border-color);
  color: var(--btn-active-text-color);
}

.library-btn.active {
  background-color: var(--btn-hover-border-color);
  border-color: var(--btn-hover-border-color);
  color: #fff;
}

/* 浮动窗口颜色库中的选择提示文字 */
.color-selection-hint {
  margin: 0 0 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

/* 浮动窗口颜色库中的选中主题色标题 */
.selected-colors-title {
  margin: 0 0 8px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}