/**
 * =============================================
 * 装备模拟器统一样式文件
 * =============================================
 * 整合了以下文件的功能:
 * - theme-variables.css (CSS变量和设计系统)
 * - layout-new-40-60.css (40:60布局规则)
 * - responsive.css (响应式样式)
 *
 * 作者: Claude
 * 创建日期: 2026-01-20
 * =============================================
 */

/* ============================================================
   第一部分: CSS变量设计系统
   ============================================================ */

:root {
  /* ----- 颜色系统 ----- */

  /* 主色调 - 紫蓝色系 */
  --color-primary: #667eea;
  --color-primary-hover: #5a67d8;
  --color-primary-light: #ebf4ff;
  --color-primary-dark: #4c51bf;

  /* 辅助色 - 灰色系 */
  --color-secondary: #718096;
  --color-secondary-light: #f7fafc;
  --color-secondary-dark: #4a5568;

  /* 强调色 - 游戏风格 */
  --color-accent-purple: #a855f7; /* 紫色 - 传说装备 */
  --color-accent-gold: #f59e0b; /* 金色 - 稀有装备 */
  --color-accent-green: #7ed957; /* 绿色 - 优秀装备 */
  --color-accent-red: #ef4444; /* 红色 - 错误/危险 */
  --color-accent-blue: #3b82f6; /* 蓝色 - 普通装备 */

  /* 中性色 - 从白到黑 */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* 背景色系统 */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #ffffff; /* 修改为纯白色 */
  --color-bg-tertiary: #f3f4f6;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  /* 文本颜色 */
  --color-text-primary: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-text-disabled: #d1d5db;
  --color-text-inverse: #ffffff;

  /* 边框颜色 */
  --color-border-primary: #e5e7eb;
  --color-border-secondary: #d1d5db;
  --color-border-focus: #667eea;
  --color-border-error: #ef4444;
  --color-border-success: #7ed957;

  /* 状态颜色 */
  --color-info: #3b82f6;
  --color-success: #7ed957;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* ----- 间距系统 (基于8px网格) ----- */

  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */

  /* ----- 字体系统 ----- */

  /* 字体族 */
  --font-family-base:
    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-family-heading:
    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-family-mono: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* 字体大小 */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  /* 字体粗细 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ----- 圆角系统 ----- */

  --radius-none: 0;
  --radius-sm: 0.25rem; /* 4px */
  --radius-base: 0.375rem; /* 6px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-full: 9999px;

  /* ----- 阴影系统 ----- */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* 游戏风格发光效果 */
  --glow-primary: 0 0 20px rgba(102, 126, 234, 0.3);
  --glow-gold: 0 0 20px rgba(245, 158, 11, 0.3);
  --glow-purple: 0 0 20px rgba(168, 85, 247, 0.3);
  --glow-green: 0 0 20px rgba(126, 217, 87, 0.3);

  /* ----- 过渡动画 ----- */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ----- Z-index 层级 ----- */

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ----- 组件特定变量 ----- */

  /* 按钮 */
  --button-height-sm: 32px;
  --button-height-md: 40px;
  --button-height-lg: 48px;
  --button-padding-x: 1rem;
  --button-padding-y: 0.5rem;

  /* 输入框 */
  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;
  --input-padding-x: 0.75rem;
  --input-padding-y: 0.5rem;
  --input-border-width: 2px;
  --input-border-radius: var(--radius-base);

  /* 卡片 */
  --card-padding: var(--spacing-6);
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--shadow-base);
  --card-bg: var(--color-bg-primary);

  /* 装备槽位 */
  --slot-size: 64px;
  --slot-size-sm: 56px;
  --slot-size-lg: 72px;
  --slot-gap: var(--spacing-2);
  --slot-border-radius: var(--radius-base);
  --slot-bg: var(--color-bg-secondary);
  --slot-border-color: var(--color-border-primary);

  /* Tooltip */
  --tooltip-bg: rgba(49, 56, 66, 0.95);
  --tooltip-text: var(--color-text-inverse);
  --tooltip-padding: var(--spacing-3);
  --tooltip-border-radius: var(--radius-md);
  --tooltip-max-width: 320px;

  /* ----- 布局变量 ----- */

  --container-max-width: 1400px;
  --header-height: 60px;
  --sidebar-width: 280px;
  --content-max-width: 900px;

  /* 装备构建器 */
  --builder-gap: var(--spacing-5);
  --builder-padding: var(--spacing-5);
  --builder-left-max-width: 450px;
  --builder-right-max-width: 600px;
}

/* ============================================================
   第二部分: 响应式设计 - 平板设备 (768px - 1199px)
   ============================================================ */

@media screen and (max-width: 1199px) {
  /* 主容器调整为两列布局 */
  .builder-container {
    grid-template-columns: 795px 1fr !important;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
  }

  /* 左侧各区域内边距 */
  .zone-left {
    padding: var(--spacing-4);
  }

  /* ============================================================
     角色选择栏样式
     ============================================================ */

  .zone-character-bar {
    background: var(--card-bg, #1a1a2e);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .character-selector-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

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

  .selector-main label {
    color: var(--color-text-secondary, #9ca3af);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }

  .character-dropdown {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--color-border-primary, #374151);
    border-radius: 6px;
    background: var(--color-bg-primary, #1f2937);
    color: var(--color-text-primary, #f9fafb);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .character-dropdown:hover {
    border-color: var(--color-border-focus, #667eea);
  }

  .character-dropdown:focus {
    outline: none;
    border-color: var(--color-border-focus, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
  }

  .character-dropdown option {
    background: var(--color-bg-primary, #1f2937);
    color: var(--color-text-primary, #f9fafb);
  }

  /* ============================================================
     统一下拉框样式 - 游戏风格
     参考角色选择器的设计，为所有下拉框提供一致的视觉体验
     ============================================================ */

  /* 所有下拉框的基础样式 */
  select.game-dropdown,
  select.character-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 36px 10px 14px;
    border: 2px solid var(--color-border-primary, #374151);
    border-radius: var(--radius-md, 8px);
    background:
      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='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E")
        no-repeat right 12px center,
      #ffffff;
    background-size:
      12px 12px,
      100% 100%;
    color: #1f2937;
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-normal, 400);
    cursor: pointer;
    transition: all var(--transition-base, 0.2s ease);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  /* 下拉框悬停效果 */
  select.game-dropdown:hover,
  select.character-dropdown:hover {
    border-color: var(--color-border-focus, #667eea);
    background:
      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='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E")
        no-repeat right 12px center,
      #ffffff;
    background-size:
      12px 12px,
      100% 100%;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  }

  /* 下拉框焦点效果 */
  select.game-dropdown:focus,
  select.character-dropdown:focus {
    outline: none;
    border-color: var(--color-border-focus, #667eea);
    box-shadow:
      0 0 0 3px rgba(102, 126, 234, 0.25),
      0 2px 8px rgba(102, 126, 234, 0.4);
    background:
      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='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E")
        no-repeat right 12px center,
      #ffffff;
    background-size:
      12px 12px,
      100% 100%;
  }

  /* 下拉框选项样式 */
  select.game-dropdown option,
  select.character-dropdown option {
    background: #ffffff;
    color: #1f2937;
    padding: 8px 12px;
  }

  /* 下拉框选项悬停 */
  select.game-dropdown option:hover,
  select.character-dropdown option:hover {
    background: var(--color-primary, #667eea);
    color: var(--color-text-inverse, #ffffff);
  }

  /* 下拉框箭头指示器（使用伪元素） */
  select.game-dropdown::after,
  select.character-dropdown::after {
    content: "▼";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--color-text-secondary, #9ca3af);
    pointer-events: none;
  }
  /* 禁用状态 */
  select.game-dropdown:disabled,
  select.character-dropdown:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background:
      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='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E")
        no-repeat right 12px center,
      var(--color-bg-tertiary, #374151);
    background-size:
      12px 12px,
      100% 100%;
    border-color: var(--color-border-secondary, #4b5563);
  }

  select.game-dropdown:disabled:hover,
  select.character-dropdown:disabled:hover {
    border-color: var(--color-border-secondary, #4b5563);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  /* 小尺寸变体 */
  select.game-dropdown.sm,
  select.character-dropdown.sm {
    padding: 6px 28px 6px 10px;
    font-size: var(--font-size-xs, 12px);
    min-width: 80px;
  }

  /* 大尺寸变体 */
  select.game-dropdown.lg,
  select.character-dropdown.lg {
    padding: 12px 40px 12px 16px;
    font-size: var(--font-size-base, 16px);
  }

  /* 全宽变体 */
  select.game-dropdown.full-width,
  select.character-dropdown.full-width {
    width: 100%;
  }

  /* 特殊变体：服务器选择 */
  select.game-dropdown.server-select {
    min-width: 160px;
    font-weight: var(--font-weight-medium, 500);
    background: linear-gradient(135deg, #2a2a45 0%, #454565 100%);
  }

  /* 特殊变体：魔方选择 */
  select.game-dropdown.cube-select {
    min-width: 140px;
    font-weight: var(--font-weight-medium, 500);
    border-color: var(--color-accent-purple, #a855f7);
  }

  select.game-dropdown.cube-select:hover {
    border-color: var(--color-accent-purple, #a855f7);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
  }

  select.game-dropdown.cube-select:focus {
    border-color: var(--color-accent-purple, #a855f7);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
  }

  /* 特殊变体：属性选择 */
  select.game-dropdown.stat-select {
    min-width: 100px;
    font-weight: var(--font-weight-normal, 400);
    border-color: var(--color-accent-gold, #f59e0b);
  }

  select.game-dropdown.stat-select:hover {
    border-color: var(--color-accent-gold, #f59e0b);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
  }

  select.game-dropdown.stat-select:focus {
    border-color: var(--color-accent-gold, #f59e0b);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
  }

  /* 按钮样式 */
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .btn-primary {
    background: var(--color-primary, #667eea);
    color: var(--color-text-inverse, #ffffff);
  }

  .btn-primary:hover {
    background: var(--color-primary-hover, #5a67d8);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  }

  .btn-secondary {
    background: var(--color-secondary-light, #374151);
    color: var(--color-text-primary, #f9fafb);
    border: 1px solid var(--color-border-primary, #4b5563);
  }

  .btn-secondary:hover {
    background: var(--color-secondary, #4b5563);
  }

  .btn-danger {
    background: var(--color-error, #ef4444);
    color: var(--color-text-inverse, #ffffff);
  }

  .btn-danger:hover {
    background: #dc2626;
  }

  .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* 当前角色卡片 */
  .current-character-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 6px;
  }

  .char-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-tertiary, #374151);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .char-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .char-info {
    flex: 1;
    min-width: 0;
  }

  .char-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #f9fafb);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .char-details {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-secondary, #9ca3af);
  }

  .char-level {
    font-weight: 500;
    color: var(--color-accent-gold, #f59e0b);
  }

  .char-job {
    color: var(--color-accent-purple, #a855f7);
  }

  .char-world {
    color: var(--color-text-tertiary, #6b7280);
  }

  .char-actions {
    flex-shrink: 0;
  }

  /* 角色头像居中显示在装备槽位中间 */
  .character-center-avatar {
    position: absolute;
    top: 18px;
    left: 15px;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: contain;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    background: rgba(26, 26, 46, 0.8);
    border: 2px solid rgba(102, 126, 234, 0.5);
  }

  .zone-character {
    padding: var(--spacing-4);
  }

  .zone-preview {
    padding: var(--spacing-4);
  }

  .zone-guide {
    padding: var(--spacing-4);
  }

  /* 装备槽位容器自适应 */
  .character-equipment-container {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 5/6;
  }

  /* 装备背景图固定尺寸 */
  .equipment-bg {
    width: 400px;
    height: 480px;
  }

  /* 表单区域优化 */
  .item-form-container {
    padding: 16px;
  }

  /* 表单项间距 */
  .form-item {
    margin-bottom: 16px;
    min-height: auto;
  }

  /* 下拉框全宽 */
  .select2-container {
    width: 100% !important;
  }
}

/* ============================================================
   第三部分: 响应式设计 - 小平板/大手机 (480px - 767px)
   ============================================================ */

@media screen and (max-width: 767px) {
  /* 主容器改为垂直布局 */
  .builder-container {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    padding: 12px;
    gap: 20px;
  }

  /* 所有区域全宽 */
  .zone-left,
  .zone-right {
    width: 100%;
    height: auto;
  }

  /* 右侧容器垂直排列 */
  .zone-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* 区域 2 和 3 垂直堆叠 */
  .zone-character,
  .zone-preview {
    width: 100%;
    height: auto;
    max-height: none;
  }

  /* 区域 4 固定高度 */
  .zone-guide {
    height: auto;
    min-height: 150px;
  }

  /* 装备槽位容器优化 */
  .character-equipment-container {
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    height: auto;
    min-height: 500px;
    overflow-x: auto;
  }

  /* 装备槽位网格在小屏保持布局 */
  .equipment-slots {
    min-width: 450px;
  }

  /* 装备槽位尺寸调整 */
  .equipment-slot {
    width: 56px;
    height: 56px;
  }

  /* 装备图标尺寸 */
  .equipment-slot img {
    width: 48px;
    height: 48px;
  }

  /* 表单区域优化 */
  .item-form-container {
    padding: 12px;
  }

  /* 表单项布局 - 垂直排列 */
  .form-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }

  /* 标签和输入框改为垂直排列 */
  .form-item label {
    width: 100%;
    margin-bottom: 8px;
    text-align: left;
  }

  .form-item .input-container {
    width: 100%;
  }

  /* 输入框全宽 */
  .form-item input[type="number"],
  .form-item input[type="text"],
  .select2-container {
    width: 100% !important;
    max-width: 100%;
  }

  /* 数值输入框优化 */
  .form-item input[type="number"] {
    height: 44px;
    font-size: 16px;
  }

  /* 预览区域 */
  .builder-preview {
    width: 100%;
    max-width: 100%;
    font-size: 13px;
  }

  /* 星星图标尺寸 */
  .builder-preview .star-icon {
    width: 14px;
    height: 14px;
  }

  /* 魔方图标尺寸 */
  .builder-preview .cube-icon {
    width: 20px;
    height: 20px;
  }

  /* 移动端加载提示 */
  .loading-overlay {
    padding: 20px;
    font-size: 16px;
  }

  .loading-spinner {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   第四部分: 响应式设计 - 手机设备 (<480px)
   ============================================================ */

@media screen and (max-width: 479px) {
  /* 主容器进一步减小间距 */
  .builder-container {
    padding: 8px;
    gap: 12px;
  }

  /* 装备槽位容器 */
  .character-equipment-container {
    padding: 12px;
    border-radius: 6px;
  }

  /* 装备槽位网格 */
  .equipment-slots {
    min-width: 320px;
    gap: 6px;
    padding: 12px;
  }

  /* 装备槽位尺寸进一步缩小 */
  .equipment-slot {
    width: 52px;
    height: 52px;
    border-radius: 4px;
  }

  /* 装备图标 */
  .equipment-slot img {
    width: 44px;
    height: 44px;
  }

  /* 删除按钮 */
  .equipment-slot .delete-btn {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  /* 表单区域 */
  .item-form-container {
    padding: 10px;
  }

  /* 表单项 */
  .form-item {
    margin-bottom: 16px;
  }

  /* 表单标签 */
  .form-item label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* 输入框触摸优化 */
  .form-item input[type="number"],
  .form-item input[type="text"] {
    height: 48px;
    padding: 0 12px;
    font-size: 16px;
    border-radius: 8px;
  }

  /* 下拉框触摸优化 */
  .select2-selection {
    height: 48px !important;
    border-radius: 8px;
  }

  .select2-selection__rendered {
    line-height: 44px;
    font-size: 15px;
  }

  /* 预览tooltip */
  .builder-preview {
    font-size: 12px;
    padding: 12px;
    border-radius: 6px;
  }

  /* 预览中的星星 */
  .builder-preview .star-container {
    flex-wrap: wrap;
    gap: 2px;
  }

  .builder-preview .star-icon {
    width: 12px;
    height: 12px;
  }

  /* 预览中的属性 */
  .builder-preview .item-stats {
    font-size: 12px;
    line-height: 10px; /* 紧凑行距 */
  }

  /* 按钮触摸优化 */
  button,
  .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
    border-radius: 8px;
  }

  /* 服务器选择 */
  #ddl_server_type {
    height: 44px;
    font-size: 15px;
  }

  /* 工具提示在移动端全宽显示 */
  .tooltip {
    max-width: 90vw;
    left: 5vw !important;
  }
}

/* ============================================================
   第五部分: 响应式设计 - 高分辨率设备 (≥1400px)
   ============================================================ */

@media screen and (min-width: 1400px) {
  /* 增大装备槽位容器 */
  .character-equipment-container {
    width: 600px;
    height: 720px;
  }

  /* 装备背景图保持固定尺寸 */
  .equipment-bg {
    width: 400px;
    height: 480px;
    left: 0;
    top: 0;
  }

  /* 装备槽位增大 */
  .equipment-slot {
    width: 72px;
    height: 72px;
  }

  .equipment-slot img {
    width: 64px;
    height: 64px;
  }

  /* 表单区域增加间距 */
  .form-item {
    margin-bottom: 24px;
  }
}

/* ============================================================
   第六部分: 特殊场景 - 横屏模式
   ============================================================ */

@media screen and (max-height: 600px) and (orientation: landscape) {
  /* 减少垂直空间占用 */
  .builder-container {
    height: auto;
    min-height: 100vh;
  }

  /* 装备槽位容器高度限制 */
  .character-equipment-container {
    height: 45vh;
    aspect-ratio: auto;
  }

  /* 表单区域滚动 */
  .zone-left {
    max-height: 50vh;
    overflow-y: auto;
  }
}

/* ============================================================
   第七部分: 特殊场景 - 平板横屏优化
   ============================================================ */

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .builder-container {
    grid-template-columns: 795px 1fr !important;
  }

  .character-equipment-container {
    width: 100%;
    max-width: 450px;
  }
}

/* ============================================================
   第八部分: 特殊场景 - 触摸设备优化
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  /* 移除悬停效果，优化触摸体验 */
  .equipment-slot:hover {
    transform: none;
  }

  /* 增大可触摸区域 */
  .equipment-slot .delete-btn {
    width: 24px;
    height: 24px;
  }

  /* Select2 触摸优化 */
  .select2-results__option {
    padding: 14px 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* 表单输入触摸优化 */
  input[type="number"],
  input[type="text"],
  select {
    min-height: 44px;
  }
}

/* ============================================================
   第九部分: 特殊场景 - 打印样式
   ============================================================ */

@media print {
  /* 隐藏不需要打印的元素 */
  .zone-left,
  .select2-dropdown,
  .delete-btn {
    display: none !important;
  }

  /* 只打印装备预览 */
  .builder-container {
    display: block;
    height: auto;
  }

  .zone-right {
    width: 100%;
  }

  .character-equipment-container {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .builder-preview {
    page-break-inside: avoid;
  }
}

/* ============================================================
   第十部分: 可访问性 - 减少动画
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   文件结束
   ============================================================ */

/* ============================================================
   第十一部分: 从 index.html 迁移的样式
   ============================================================ */

/* iframe 内部优化 - 4 区域布局 */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 禁止整体滚动 */
  background-color: var(--color-bg-secondary);
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
}

/* ===== 装备槽位对齐调整变量 - 手动调整这些值来对齐背景图 ===== */

/* 方案 1: Grid 布局（统一参数，已废弃） */
:root {
  /* 装备槽位网格的内边距 - 顺时针：上 右 下 左 */
  --slots-padding-top: 0px;
  --slots-padding-right: 302px;
  --slots-padding-bottom: 314px;
  --slots-padding-left: 0px;

  /* 装备槽位之间的间距 */
  --slots-gap: 38px;

  /* 装备槽位容器尺寸 */
  --container-width: 400px;
  --container-height: 480px;
}

/* 方案 2: 每个槽位独立定位参数 */
:root {
  /* ========== 基础尺寸配置 ========== */
  /* 槽位尺寸（所有槽位统一） */
  --slot-size: 46px;

  /* ========== 29个装备槽位的独立位置配置 ========== */
  /* 以下所有坐标均为相对于容器左上角的绝对位置 */

  /* ----- 防具槽位 ----- */

  /* ----- 34px槽位 ----- */

  /* 戒指1槽位 - 第一个戒指饰品 */
  --slot-ring1-left: 34px;
  --slot-ring1-top: 106px;

  /* 戒指2槽位 - 第二个戒指饰品 */
  --slot-ring2-left: 34px;
  --slot-ring2-top: 155px;

  /* 戒指3槽位 - 第三个戒指饰品 */
  --slot-ring3-left: 34px;
  --slot-ring3-top: 204px;

  /* 戒指4槽位 - 第四个戒指饰品 */
  --slot-ring4-left: 34px;
  --slot-ring4-top: 253px;

  /* 腰带槽位 - 腰部装备 */
  --slot-belt-left: 34px;
  --slot-belt-top: 302px;

  /* 口袋槽位 - 口袋装饰装备 */
  --slot-pocket-left: 34px;
  --slot-pocket-top: 349px;

  /* ----- 82px槽位 ----- */

  /* 脸部装饰槽位 - 脸饰装备 */
  --slot-face-left: 82px;
  --slot-face-top: 106px;

  /* 眼睛装饰槽位 - 眼饰装备 */
  --slot-eye-left: 82px;
  --slot-eye-top: 155px;

  /* 耳环槽位 - 耳部饰品 */
  --slot-earring-left: 82px;
  --slot-earring-top: 204px;

  /* 项链1槽位 - 第一个项链饰品 */
  --slot-pendant1-left: 82px;
  --slot-pendant1-top: 253px;

  /* 项链2槽位 - 第二个项链饰品 */
  --slot-pendant2-left: 82px;
  --slot-pendant2-top: 302px;

  /* ----- 133px槽位 ----- */
  --slot-weapon-left: 130px;
  --slot-weapon-top: 302px;
  /* ----- 180px槽位 ----- */
  --slot-sub_weapon-left: 180px;
  --slot-sub_weapon-top: 302px;
  /* ----- 228px槽位 ----- */
  --slot-emblem-left: 228px;
  --slot-emblem-top: 302px;
  /* ----- 280px槽位 ----- */
  /* 帽子槽位 - 头部防御装备 */
  --slot-hat-left: 277px;
  --slot-hat-top: 106px;

  /* 套装槽位 - 上衣 */
  --slot-top-left: 277px;
  --slot-top-top: 155px;

  /* 套装槽位 - 下衣 */
  --slot-bottom-left: 277px;
  --slot-bottom-top: 204px;

  /* 肩章槽位 - 肩部装饰装备 */
  --slot-shoulder-left: 277px;
  --slot-shoulder-top: 253px;

  /* 勋章槽位 - 胸部装饰装备 */
  --slot-badge-left: 277px;
  --slot-badge-top: 205px;

  /* 机器人槽位 - 机器人装备 */
  --slot-android-left: 277px;
  --slot-android-top: 302px;

  /* ----- 325px槽位 ----- */
  /* 披风槽位 - 背部装饰装备 */
  --slot-cape-left: 325px;
  --slot-cape-top: 106px;
  /* 手套槽位 - 手部装备 */
  --slot-glove-left: 325px;
  --slot-glove-top: 155px;

  /* 鞋子槽位 - 脚部装备 */
  --slot-shoes-left: 325px;
  --slot-shoes-top: 204px;

  /* 勋章槽位 - 成就勋章装备 */
  --slot-medal-left: 325px;
  --slot-medal-top: 253px;

  /* 心形槽位 - 特殊心形装备 */
  --slot-heart-left: 325px;
  --slot-heart-top: 302px;
  /* 盾牌槽位 - 副手防御装备 */
  --slot-shield-left: 325px;
  --slot-shield-top: 351px;
}

/* =========================================================== */

/* 主容器：左固定795px，右自适应 */
.builder-container {
  display: grid !important;
  grid-template-columns: 795px 1fr !important; /* 左侧固定795px，右侧自适应 */
  grid-template-rows: 100vh !important;
  gap: 16px !important;
  padding: 0px !important;
  height: 100vh !important;
  overflow: hidden !important;
  align-items: stretch !important; /* 关键：让子项拉伸填充高度 */
}

/* 左侧栏：垂直布局（槽位 + 预览 + 指南） */
.zone-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 顶部行：水平布局（装备槽位 + 装备预览） */
.zone-top-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

/* 右侧容器 */
.zone-right {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* 移除 align-self: stretch，因为父容器已经有 align-items: stretch */
}

.zone-form {
  background: var(--card-bg, #1a1a2e) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

.form-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.form-header h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.toggle-icon {
  transition: transform 0.3s ease !important;
}

.zone-form.collapsed .toggle-icon {
  transform: rotate(180deg) !important;
}

.form-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  transition: all 0.3s ease !important;
}

.zone-form.collapsed .form-content {
  display: none !important;
}

/* 装备槽位容器 */
.zone-character {
  flex-shrink: 0 !important;
  width: 400px !important;
  height: 490px !important;
  background: var(--card-bg, #1a1a2e) !important;
  border-radius: 8px !important;
  padding: 0px !important;
  overflow: hidden !important;
}

.character-equipment-container {
  width: 100% !important;
  max-width: 450px !important;
  margin: 0 auto !important;
  height: 468px !important;
  aspect-ratio: 400/480 !important;
  position: relative !important;
}

/* 装备预览 */
.zone-preview {
  flex-shrink: 0 !important;
  width: 296px !important;
  height: 520px !important;
  background: var(--card-bg, #1a1a2e) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  overflow: hidden !important;
}

/* 提升指南 - 极简主义风格，纯白背景 */
.zone-guide {
  flex: 1;
  min-height: 400px;
  background: #ffffff; /* 纯白背景 */
  border: 1px solid #e5e7eb; /* 细边框 */
  border-radius: 4px; /* 较小的圆角 */
  padding: 24px; /* 增加内边距 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 极淡阴影 */
}

#enhancement-guide-root {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* 占位内容样式 */
.guide-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-align: center;
}

.guide-placeholder h2 {
  margin: 0 0 var(--spacing-3) 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
}

.guide-placeholder p {
  margin: var(--spacing-1) 0;
  color: var(--color-text-tertiary);
}

/* ===== 滚动条优化 ===== */
.zone-left,
.zone-character,
.zone-preview,
.zone-guide,
.form-content {
  scrollbar-width: thin;
  scrollbar-color: #ffffff;
}

.zone-left::-webkit-scrollbar,
.zone-character::-webkit-scrollbar,
.zone-preview::-webkit-scrollbar,
.zone-guide::-webkit-scrollbar,
.form-content::-webkit-scrollbar {
  width: 6px;
}

.zone-left::-webkit-scrollbar-track,
.zone-character::-webkit-scrollbar-track,
.zone-preview::-webkit-scrollbar-track,
.zone-guide::-webkit-scrollbar-track,
.form-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05); /* 更浅的轨道背景 */
  border-radius: 3px;
}

.zone-left::-webkit-scrollbar-thumb,
.zone-character::-webkit-scrollbar-thumb,
.zone-preview::-webkit-scrollbar-thumb,
.zone-guide::-webkit-scrollbar-thumb,
.form-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.zone-left::-webkit-scrollbar-thumb:hover,
.zone-character::-webkit-scrollbar-thumb:hover,
.zone-preview::-webkit-scrollbar-thumb:hover,
.zone-guide::-webkit-scrollbar-thumb:hover,
.form-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 装备提升指南专用滚动条 - 极简风格，适配白色背景 */
.zone-guide::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.zone-guide::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

.zone-guide::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* 装备背景图 - 100% 填充容器 */
.equipment-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px; /* 固定宽度，不随屏幕缩放 */
  height: 480px; /* 固定高度，不随屏幕缩放 */
  background-image: url("/equip-simulator/assets/item/Equipment.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* 装备槽位网格 - 精确对齐背景图装备位置 */
.equipment-slots {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 480px;
  /* 改用相对定位，为绝对定位的槽位提供容器 */
  position: relative;
  box-sizing: border-box;
  z-index: 1;
}

/* 单个装备槽位 - 使用绝对定位，独立变量 */
.equipment-slot {
  position: absolute;
  width: var(--slot-size);
  height: var(--slot-size);
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: var(--slot-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  overflow: hidden;
}

/* 每个槽位的独立定位 */
.equipment-slot[data-slot-id="hat"] {
  left: var(--slot-hat-left);
  top: var(--slot-hat-top);
}

.equipment-slot[data-slot-id="top"] {
  left: var(--slot-top-left);
  top: var(--slot-top-top);
}

.equipment-slot[data-slot-id="bottom"] {
  left: var(--slot-bottom-left);
  top: var(--slot-bottom-top);
}

.equipment-slot[data-slot-id="face"] {
  left: var(--slot-face-left);
  top: var(--slot-face-top);
}

.equipment-slot[data-slot-id="eye"] {
  left: var(--slot-eye-left);
  top: var(--slot-eye-top);
}

.equipment-slot[data-slot-id="earring"] {
  left: var(--slot-earring-left);
  top: var(--slot-earring-top);
}

.equipment-slot[data-slot-id="pendant1"] {
  left: var(--slot-pendant1-left);
  top: var(--slot-pendant1-top);
}

.equipment-slot[data-slot-id="pendant2"] {
  left: var(--slot-pendant2-left);
  top: var(--slot-pendant2-top);
}

.equipment-slot[data-slot-id="belt"] {
  left: var(--slot-belt-left);
  top: var(--slot-belt-top);
}

.equipment-slot[data-slot-id="shoulder"] {
  left: var(--slot-shoulder-left);
  top: var(--slot-shoulder-top);
}

.equipment-slot[data-slot-id="cape"] {
  left: var(--slot-cape-left);
  top: var(--slot-cape-top);
}

.equipment-slot[data-slot-id="glove"] {
  left: var(--slot-glove-left);
  top: var(--slot-glove-top);
}

.equipment-slot[data-slot-id="ring1"] {
  left: var(--slot-ring1-left);
  top: var(--slot-ring1-top);
}

.equipment-slot[data-slot-id="ring2"] {
  left: var(--slot-ring2-left);
  top: var(--slot-ring2-top);
}

.equipment-slot[data-slot-id="ring3"] {
  left: var(--slot-ring3-left);
  top: var(--slot-ring3-top);
}

.equipment-slot[data-slot-id="ring4"] {
  left: var(--slot-ring4-left);
  top: var(--slot-ring4-top);
}

.equipment-slot[data-slot-id="shoes"] {
  left: var(--slot-shoes-left);
  top: var(--slot-shoes-top);
}

.equipment-slot[data-slot-id="weapon"] {
  left: var(--slot-weapon-left);
  top: var(--slot-weapon-top);
}

.equipment-slot[data-slot-id="sub_weapon"] {
  left: var(--slot-sub_weapon-left);
  top: var(--slot-sub_weapon-top);
}

.equipment-slot[data-slot-id="shield"] {
  left: var(--slot-shield-left);
  top: var(--slot-shield-top);
}

.equipment-slot[data-slot-id="medal"] {
  left: var(--slot-medal-left);
  top: var(--slot-medal-top);
}

.equipment-slot[data-slot-id="pocket"] {
  left: var(--slot-pocket-left);
  top: var(--slot-pocket-top);
}

.equipment-slot[data-slot-id="badge"] {
  left: var(--slot-badge-left);
  top: var(--slot-badge-top);
}

.equipment-slot[data-slot-id="emblem"] {
  left: var(--slot-emblem-left);
  top: var(--slot-emblem-top);
}

.equipment-slot[data-slot-id="heart"] {
  left: var(--slot-heart-left);
  top: var(--slot-heart-top);
}

.equipment-slot[data-slot-id="top"] {
  left: var(--slot-top-left);
  top: var(--slot-top-top);
}

.equipment-slot[data-slot-id="taming"] {
  left: var(--slot-taming-left);
  top: var(--slot-taming-top);
}

.equipment-slot[data-slot-id="totem"] {
  left: var(--slot-totem-left);
  top: var(--slot-totem-top);
}

.equipment-slot[data-slot-id="bottom"] {
  left: var(--slot-bottom-left);
  top: var(--slot-bottom-top);
}

.equipment-slot[data-slot-id="amulet"] {
  left: var(--slot-amulet-left);
  top: var(--slot-amulet-top);
}

.equipment-slot[data-slot-id="android"] {
  left: var(--slot-android-left);
  top: var(--slot-android-top);
}

/* 空槽位更透明 */
.equipment-slot.empty {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(0, 0, 0, 0.2);
}

.equipment-slot:hover {
  border-color: var(--color-border-focus);
  background: var(--color-bg-primary);
  transform: scale(1.05);
  box-shadow: var(--glow-primary);
}

.equipment-slot.active {
  border-color: var(--color-border-focus);
  box-shadow: var(--glow-primary);
}

/* 空槽位加号图标 - 装备边框风格 */
.equipment-slot.empty .slot-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 加号图标 */
.equipment-slot.empty .slot-icon::after {
  content: "+";
  position: relative;
  font-size: 24px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1;
  z-index: 2;
  font-family: "Segoe UI", "Arial", sans-serif;
}

/* 装备槽位英文标签 - 左上角灰色文字 */
.equipment-slot::before {
  content: attr(data-slot-en);
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 8px;
  font-weight: 600;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  font-family: "Arial Black", "Segoe UI", sans-serif;
  text-shadow:
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff,
    0 0 3px rgba(0, 0, 0, 0.5);
  opacity: 0.7;
}

/* 当槽位有装备时（没有 empty 类），隐藏槽位文字标签 */
.equipment-slot:not(.empty)::before {
  display: none;
}

/* 装备图标 */
.equipment-slot .slot-icon {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 1;
}

/* 槽位删除按钮 */
.equipment-slot .slot-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-full);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition-base);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.equipment-slot:hover .slot-remove {
  opacity: 1;
}

.equipment-slot .slot-remove:hover {
  background: var(--color-error);
  transform: scale(1.1);
  box-shadow: var(--shadow-sm);
}

/* 配置表单样式 */
.builder-form {
  max-width: 800px;
  margin: 0 auto;
}

.builder-form .item-form {
  background: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.builder-form .item-label {
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

/* 预览区域样式：适应父容器 */
.builder-preview {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* 预览区域的边框容器 */
.builder-preview .item-main-border {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  height: 100%;
}

.builder-preview .item-main-border {
  position: relative;
  display: block;
}

.builder-preview .item-main-border.hidden {
  display: none;
}

/* 移除预览面板顶部多余空白头部 */
.builder-preview .item-main-header {
  display: none;
}

/* ===== 响应式设计 ===== */

/* 标准桌面 (1024px - 1439px) */
@media (max-width: 1439px) and (min-width: 1024px) {
  .zone-character {
    height: 485px !important;
  }

  .zone-preview {
    height: 520px !important;
  }
}

/* 小桌面/平板 (768px - 1023px) */
@media (max-width: 1023px) {
  .builder-container {
    grid-template-columns: 700px 1fr !important;
  }

  .zone-character {
    height: 420px !important;
  }

  .zone-preview {
    height: 520px !important;
  }

  /* 表单默认折叠,节省空间 */
  .zone-form {
    flex-shrink: 0 !important;
    height: auto !important;
  }

  .zone-form:not(.collapsed) .form-content {
    max-height: 300px !important;
  }
}

/* 移动端 (<768px) */
@media (max-width: 767px) {
  .builder-container {
    grid-template-columns: 795px 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .zone-character {
    height: 380px !important;
    padding: 12px !important;
  }

  .zone-preview {
    height: 200px !important;
    padding: 8px !important;
  }

  .zone-guide {
    padding: 12px !important;
  }
}

/* 超小屏幕/mobile (<600px) - 单列布局 */

/* 滚动条样式 */
.simplebar-track {
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  width: 4px;
  z-index: 30;
  margin-top: 4px;
}

.simplebar-scrollbar:before {
  opacity: 1;
  background-color: rgba(255, 170, 0);
  border-radius: 8px;
  left: 0px;
  width: 4px;
}

/* ============================================
       预览面板视觉调整（深蓝风格）
       使用 equipment-preview-theme.css 中定义的CSS变量
       修改样式时请编辑该文件中的变量值
       ============================================ */

/* 预览面板主边框 */
.builder-preview .item-main-border {
  position: relative;
  background: linear-gradient(180deg, var(--preview-main-bg-start), var(--preview-main-bg-end));
  border-radius: var(--preview-border-radius);
  border: 1px solid var(--preview-border-color);
  box-shadow: var(--preview-shadow-main);
  color: var(--preview-text-primary);
  backdrop-filter: blur(var(--preview-blur));
  -webkit-backdrop-filter: blur(var(--preview-blur));
  overflow: hidden;
}

/* 预览面板主体内部 */
.builder-preview .item-main-border .item-main-body {
  position: relative;
  background: linear-gradient(180deg, var(--preview-body-bg-start), var(--preview-body-bg-end));
  z-index: 2;
}

/* 隐藏原有的 gloss 元素以避免与顶部高光重复显示 */
.builder-preview .item-main-gloss {
  display: none !important;
}

/* 分隔线样式 */
.builder-preview .item-dash-border {
  height: var(--preview-divider-height) !important;
  border: var(--preview-divider-border);
  box-shadow: var(--preview-divider-shadow) !important;
  pointer-events: none !important;
  z-index: var(--preview-z-index-divider) !important;
  mix-blend-mode: screen !important;
}

/* 去掉标题下方的细线 */
.builder-preview .item-main-border.server-reboot .item-title-description {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: var(--preview-title-margin-bottom) !important;
}

/* 属性行视觉风格 */
.item-stats {
  font-size: var(--preview-font-size-base);
  color: var(--preview-text-secondary);
  line-height: var(--preview-line-height);
}

.item-stats .stat-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--preview-stat-gap);
  padding: 0 var(--preview-stat-padding);
}

.item-stats .stat-left {
  color: var(--preview-stat-name);
  flex: 1 1 auto;
}

.item-stats .stat-name {
  color: var(--preview-stat-name);
}

.item-stats .stat-right {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.item-stats .stat-value {
  color: var(--preview-stat-value);
  font-weight: var(--preview-font-weight-heavy);
  margin-left: var(--preview-inc-margin-left);
}

.item-stats .stat-incr {
  color: var(--preview-stat-inc);
  font-size: var(--preview-font-size-sm);
  margin-left: var(--preview-inc-margin-left);
  font-weight: var(--preview-font-weight-bold);
}

/* 需求信息样式 */
.item-meta .item-profession {
  color: var(--preview-text-tertiary);
  font-weight: var(--preview-font-weight-medium);
  margin-bottom: 2px;
}

.item-meta .item-profession-value {
  color: var(--preview-stat-value);
  font-weight: var(--preview-font-weight-normal);
}

.item-meta .item-level {
  color: var(--preview-text-tertiary);
  font-weight: var(--preview-font-weight-medium);
}

.item-meta .item-level-value {
  color: var(--preview-stat-value);
  font-weight: var(--preview-font-weight-normal);
}

/* 子描述样式（例如 Untradable） */
.item-sub-description {
  color: var(--preview-sub-description) !important;
  font-weight: var(--preview-font-weight-bold);
}

/* 居中物品图标 */
.item-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 背光/框（gloss）定位与尺寸 */
.item-container-gloss {
  position: absolute;
  left: var(--preview-icon-container-left);
  top: var(--preview-icon-container-top);
  width: var(--preview-icon-container-width);
  height: var(--preview-icon-container-height);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  z-index: var(--preview-z-index-gloss);
}

/* 图标自身样式 */
.item-container .item-container-item,
.item-container-item.sf-item {
  display: inline-block;
  margin: 0;
  text-align: center;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: var(--preview-icon-size);
  height: var(--preview-icon-size);
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

/* reboot tag 显示完整文本 */
.reboot-tag {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  padding: 4px 8px;
  font-size: var(--preview-font-size-xs);
  display: inline-block;
}

/* 强制将图标绝对定位到 gloss 中心 */
.builder-preview .item-container .item-container-gloss .item-container-item,
.builder-preview .item-container .item-container-gloss .item-container-item.sf-item {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: var(--preview-icon-size) !important;
  height: var(--preview-icon-size) !important;
  background-position: center center !important;
  background-size: contain !important;
  z-index: var(--preview-z-icon) !important;
}

/* ============================================
       Reboot 服务器统一样式
       无论服务器类型（Reboot/Normal），都使用相同的深色主题
       ============================================ */

/* 强制 server-reboot 类使用深色主题（覆盖 starforce.css 中的白色背景） */
.builder-preview .item-main-border.server-reboot {
  background: linear-gradient(
    180deg,
    var(--preview-main-bg-start),
    var(--preview-main-bg-end)
  ) !important;
  border-radius: var(--preview-border-radius) !important;
  border: 1px solid var(--preview-border-color) !important;
  box-shadow: var(--preview-shadow-main) !important;
  color: var(--preview-text-primary) !important;
}

/* Reboot 装备主体内部背景 */
.builder-preview .item-main-border.server-reboot .item-main-body {
  background: linear-gradient(
    180deg,
    var(--preview-body-bg-start),
    var(--preview-body-bg-end)
  ) !important;
}

/* Reboot 装备名称样式 */
.builder-preview .item-main-border.server-reboot .item-name {
  color: var(--preview-text-primary) !important;
  text-align: center;
}

/* Reboot 属性文字颜色 */
.builder-preview .item-main-border.server-reboot .item-stats,
.builder-preview .item-main-border.server-reboot .item-stat-line,
.builder-preview .item-main-border.server-reboot .reboot-stat-line {
  color: var(--preview-text-secondary) !important;
}

/* Reboot 属性名称和数值 */
.builder-preview .item-main-border.server-reboot .item-color-base,
.builder-preview .item-main-border.server-reboot .stat-name {
  color: var(--preview-stat-name) !important;
}

.builder-preview .item-main-border.server-reboot .stat-value {
  color: var(--preview-stat-value) !important;
}

/* Reboot 增益值颜色 */
.builder-preview .item-main-border.server-reboot .reboot-inc-flame {
  color: var(--preview-inc-flame) !important;
}

.builder-preview .item-main-border.server-reboot .reboot-inc-sf {
  color: var(--preview-inc-sf) !important;
}

.builder-preview .item-main-border.server-reboot .reboot-inc-scroll {
  color: var(--preview-inc-scroll) !important;
}

.builder-preview .item-main-border.server-reboot .reboot-inc-pot {
  color: var(--preview-inc-pot) !important;
}