/* ==========================================================================
   年会抽奖系统样式（重构版）
   核心自适应策略：
   - 所有"尺寸"统一用 calc(var(--su) * N)，"贴边定位"保持 vh
   - --su 默认 = 1vh（宽屏按高度缩放）
   - 视口宽高比 ≤ 16:10 时 --su = 0.625vw（窄屏/竖屏按宽度缩放，整体等比缩小）
   - 3D 名片墙 / 中奖卡片布局由 JS 按相机投影精确计算，CSS 只管卡片自身尺寸
   ========================================================================== */

/* ============================================================
   0. 设计变量
   ============================================================ */
:root {
  /* 缩放单位：宽屏 = 1vh；窄屏/竖屏由下方媒体查询改为按宽度缩放 */
  --su: 1vh;

  /* 主题色：电青（科技主色）+ 品红（中奖强调）+ 深空蓝（卡片底） */
  --c-cyan: rgba(0, 212, 255, 0.85);
  --c-cyan-bright: #00d4ff;
  --c-win: #ff2d92;
  --c-win-deep: rgba(255, 45, 146, 0.9);
  --c-win-glow: rgba(255, 45, 146, 0.55);
  --c-card-bg: rgba(8, 22, 48, 0.86);
  --c-bg-dark: #020817;
  --c-border: rgba(0, 212, 255, 0.28);
  --c-glow: rgba(0, 212, 255, 0.5);
  --c-panel: rgba(0, 24, 48, 0.55);

  /* 默认主题：电青（赛博青） */
  --c-highlight: #00d4ff;
  --c-highlight-bright: #66e6ff;
  --c-highlight-deep: rgba(0, 180, 230, 0.92);
  --c-highlight-glow: rgba(0, 212, 255, 0.55);

  /* 默认按钮：电青主 + 品红副 */
  --c-btn-primary: #00d4ff;
  --c-btn-primary-deep: rgba(0, 180, 230, 0.4);
  --c-btn-primary-glow: rgba(0, 212, 255, 0.55);
  --c-btn-secondary: #ff2d92;
  --c-btn-secondary-deep: rgba(255, 45, 146, 0.18);
  --c-btn-secondary-glow: rgba(255, 45, 146, 0.4);

  /* 通用语义色 */
  --c-success: #2ee6a8;
  --c-warning: #ffb547;
  --c-danger:  #ff5c5c;

  /* 共享装饰色（聚光柱 / 奖牌金 / 玻璃高光） */
  --c-stage-glow: rgba(0, 212, 255, 0.18);
  --c-medal: #f5b942;
  --c-medal-deep: #8a5a00;
  --c-glass: rgba(255, 255, 255, 0.06);
  --c-glass-strong: rgba(255, 255, 255, 0.12);

  /* 弹窗层级：canvas(0/-1) < 3D(1) < 弹幕(2) < 控件(3~4) < 编辑弹窗(5) < 基础弹窗(9) < Toast(999) */
  --z-canvas: 0;
  --z-3d: 1;
  --z-qipao: 2;
  --z-controls: 3;
  --z-editor: 5;
  --z-modal: 9;
  --z-toast: 999;

  /* 字体系统：Noto Serif SC(展示/标题) + Noto Sans SC(正文/UI) */
  --font-display: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-body: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
}

/* ============================================================
   0.1 预设主题（<html data-theme="...">）：科幻(默认)/喜庆/丰收/简约
   ============================================================ */
:root[data-theme='festive'] {
  --c-cyan: rgba(255, 209, 102, 0.85);
  --c-cyan-bright: #ffd166;
  --c-win: #ff5a3c;
  --c-win-deep: rgba(255, 90, 60, 0.9);
  --c-win-glow: rgba(255, 90, 60, 0.55);
  --c-card-bg: rgba(48, 12, 8, 0.88);
  --c-bg-dark: #1a0505;
  --c-border: rgba(255, 209, 102, 0.35);
  --c-glow: rgba(255, 120, 60, 0.55);
  --c-panel: rgba(58, 10, 6, 0.6);
  /* 朱砂金：朱红主高亮 + 暖金按钮 */
  --c-highlight: #ff5a3c;
  --c-highlight-bright: #ff8a65;
  --c-highlight-deep: rgba(220, 70, 40, 0.92);
  --c-highlight-glow: rgba(255, 90, 60, 0.55);
  --c-btn-primary: #ff5a3c;
  --c-btn-primary-deep: rgba(220, 70, 40, 0.4);
  --c-btn-primary-glow: rgba(255, 90, 60, 0.55);
  --c-btn-secondary: #ffd166;
  --c-btn-secondary-deep: rgba(255, 209, 102, 0.18);
  --c-btn-secondary-glow: rgba(255, 209, 102, 0.45);
  --c-stage-glow: rgba(255, 90, 60, 0.22);
  --c-medal: #ffd166;
  --c-medal-deep: #8a5a00;
}
:root[data-theme='harvest'] {
  --c-cyan: rgba(245, 185, 66, 0.8);
  --c-cyan-bright: #f5b942;
  --c-win: #2dd4bf;
  --c-win-deep: rgba(45, 212, 191, 0.9);
  --c-win-glow: rgba(45, 212, 191, 0.55);
  --c-card-bg: rgba(28, 18, 6, 0.88);
  --c-bg-dark: #0d0a05;
  --c-border: rgba(245, 185, 66, 0.32);
  --c-glow: rgba(245, 185, 66, 0.5);
  --c-panel: rgba(22, 14, 4, 0.6);
  /* 墨金：暗金主高亮 + 翡翠绿点睛 */
  --c-highlight: #f5b942;
  --c-highlight-bright: #ffd980;
  --c-highlight-deep: rgba(200, 145, 30, 0.92);
  --c-highlight-glow: rgba(245, 185, 66, 0.55);
  --c-btn-primary: #f5b942;
  --c-btn-primary-deep: rgba(200, 145, 30, 0.4);
  --c-btn-primary-glow: rgba(245, 185, 66, 0.55);
  --c-btn-secondary: #2dd4bf;
  --c-btn-secondary-deep: rgba(45, 212, 191, 0.18);
  --c-btn-secondary-glow: rgba(45, 212, 191, 0.45);
  --c-stage-glow: rgba(245, 185, 66, 0.2);
  --c-medal: #f5b942;
  --c-medal-deep: #8a5a00;
}
:root[data-theme='minimal'] {
  --c-cyan: rgba(94, 234, 212, 0.8);
  --c-cyan-bright: #5eead4;
  --c-win: #fcd34d;
  --c-win-deep: rgba(252, 211, 77, 0.9);
  --c-win-glow: rgba(252, 211, 77, 0.45);
  --c-card-bg: rgba(16, 24, 22, 0.88);
  --c-bg-dark: #0a0f0d;
  --c-border: rgba(94, 234, 212, 0.25);
  --c-glow: rgba(94, 234, 212, 0.4);
  --c-panel: rgba(12, 20, 18, 0.6);
  /* 青墨：碧青主高亮 + 暖黄点睛 */
  --c-highlight: #5eead4;
  --c-highlight-bright: #99f6e4;
  --c-highlight-deep: rgba(60, 200, 180, 0.9);
  --c-highlight-glow: rgba(94, 234, 212, 0.4);
  --c-btn-primary: #5eead4;
  --c-btn-primary-deep: rgba(60, 200, 180, 0.35);
  --c-btn-primary-glow: rgba(94, 234, 212, 0.4);
  --c-btn-secondary: #fcd34d;
  --c-btn-secondary-deep: rgba(252, 211, 77, 0.15);
  --c-btn-secondary-glow: rgba(252, 211, 77, 0.4);
  --c-stage-glow: rgba(94, 234, 212, 0.18);
  --c-medal: #fcd34d;
  --c-medal-deep: #8a6500;
}

/* ============================================================
   1. 基础 reset / 背景层
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  overflow: hidden;
  background-color: var(--c-bg-dark);
  /* Signature 元素：舞台聚光柱 —— 中央 60% 高度聚焦，模拟聚光灯下的开奖瞬间 */
  background-image:
    radial-gradient(
      ellipse 80% 60% at 50% 35%,
      var(--c-stage-glow) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 120% 80% at 50% 100%,
      rgba(0, 0, 0, 0.45) 0%,
      transparent 70%
    );
  background-attachment: fixed;
}

/* 星空 canvas：最底层，不可交互 */
#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
   2. 3D 名片墙容器 & 单张名片
   ============================================================ */
#container { position: relative; z-index: var(--z-3d); }

.element {
  width: calc(var(--su) * 5.5);
  height: calc(var(--su) * 7.5);
  background-color: transparent;
  text-align: center;
  cursor: default;
  position: relative;
  perspective: 1000px;
}
.element:hover .card-inner {
  box-shadow: 
    0 0 calc(var(--su) * 1.2) var(--c-glow),
    0 calc(var(--su) * 0.2) calc(var(--su) * 0.8) rgba(0, 0, 0, 0.3);
  border: 1px solid var(--c-cyan);
  transform: scale(1.02);
}
.card-inner {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--c-card-bg), rgba(0, 40, 80, 0.9));
  box-shadow: 
    0 0 calc(var(--su) * 0.8) var(--c-glow),
    0 calc(var(--su) * 0.1) calc(var(--su) * 0.4) rgba(0, 0, 0, 0.4);
  border: 1px solid var(--c-border);
  border-radius: calc(var(--su) * 0.3);
  transform-origin: center center;
  transition: 
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.2s ease,
    background 0.2s ease;
  overflow: hidden;
}
.card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  pointer-events: none;
}
.card-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.6s ease;
  pointer-events: none;
}
.element:hover .card-inner::after {
  left: 100%;
}
/* 卡片三段式：顶部公司名（小而淡）→ 中部姓名（大而重）→ 底部工号/部门（小而淡） */
.element .company {
  position: absolute;
  top: calc(var(--su) * 0.4);
  left: 0;
  right: 0;
  text-align: center;
  font-size: calc(var(--su) * 0.65);
  font-weight: var(--font-weight-light);
  color: rgba(200, 220, 230, 0.5);
  font-family: var(--font-body);
  letter-spacing: calc(var(--su) * 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.element .name {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-display);
  font-size: calc(var(--su) * 1.8);
  font-weight: var(--font-weight-black);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 calc(var(--su) * 0.2);
  letter-spacing: calc(var(--su) * 0.05);
  text-shadow: 0 0 calc(var(--su) * 0.3) rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}
.element:hover .name {
  transform: translateY(-50%) scale(1.02);
}
/* 三字姓名：适当缩小 */
.element .name.mid-name {
  font-size: calc(var(--su) * 1.45);
  letter-spacing: 0;
}
/* 四字及以上姓名：大幅缩小 */
.element .name.long-name {
  font-size: calc(var(--su) * 1.2);
  letter-spacing: 0;
}
.element .details {
  position: absolute;
  bottom: calc(var(--su) * 0.3);
  left: 0;
  right: 0;
  text-align: center;
  font-size: calc(var(--su) * 0.55);
  font-weight: var(--font-weight-regular);
  color: rgba(200, 220, 230, 0.45);
  font-family: var(--font-body);
  letter-spacing: calc(var(--su) * 0.05);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 年份高亮卡片 - lightitem（用于标记年份点阵位置） */
.lightitem .card-inner {
  background: linear-gradient(145deg, var(--c-highlight-deep), rgba(0, 150, 150, 0.5)) !important;
  box-shadow:
    0 0 calc(var(--su) * 1.5) var(--c-highlight-glow),
    0 calc(var(--su) * 0.1) calc(var(--su) * 0.5) rgba(0, 0, 0, 0.3);
  border: 1px solid var(--c-highlight) !important;
  animation: lightPulse 2s ease-in-out infinite;
}
.lightitem .name {
  color: #fff !important;
  text-shadow: 0 0 calc(var(--su) * 0.8) rgba(255, 255, 255, 0.8);
}
.lightitem .company,
.lightitem .details {
  color: rgba(255, 255, 255, 0.9) !important;
}
@keyframes lightPulse {
  0%, 100% {
    box-shadow:
      0 0 calc(var(--su) * 1.5) var(--c-highlight-glow),
      0 calc(var(--su) * 0.1) calc(var(--su) * 0.5) rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 calc(var(--su) * 2.5) var(--c-highlight-glow),
      0 calc(var(--su) * 0.1) calc(var(--su) * 0.6) rgba(0, 0, 0, 0.4);
  }
}

/* 年份高亮卡片（随主题变色） */
.highlight .card-inner,
.element.highlight .card-inner {
  background: linear-gradient(145deg, var(--c-highlight-deep), rgba(0, 150, 150, 0.5)) !important;
  box-shadow:
    0 0 calc(var(--su) * 1.5) var(--c-highlight-glow),
    0 calc(var(--su) * 0.1) calc(var(--su) * 0.5) rgba(0, 0, 0, 0.3);
  border: 1px solid var(--c-highlight) !important;
  animation: highlightPulse 2s ease-in-out infinite;
}
@keyframes highlightPulse {
  0%, 100% {
    box-shadow:
      0 0 calc(var(--su) * 1.5) var(--c-highlight-glow),
      0 calc(var(--su) * 0.1) calc(var(--su) * 0.5) rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 calc(var(--su) * 2.5) var(--c-highlight-glow),
      0 calc(var(--su) * 0.1) calc(var(--su) * 0.6) rgba(0, 0, 0, 0.4);
  }
}
.highlight.element .name {
  text-shadow: 0 0 calc(var(--su) * 0.8) rgba(255, 255, 255, 0.8);
  color: #fff;
}
.highlight.element .company,
.highlight.element .details {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 中奖卡片 - 完整覆盖原卡片 */
.prize.element {
  background: transparent !important;
}
.prize.element .card-inner {
  background: linear-gradient(145deg, var(--c-win-deep), rgba(40, 10, 10, 0.95)) !important;
  box-shadow:
    0 0 calc(var(--su) * 2) var(--c-win-glow),
    0 calc(var(--su) * 0.3) calc(var(--su) * 1) rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 138, 138, 0.7);
  animation: prizeGlow 1.5s ease-in-out infinite;
  transition: none !important;
  transform: none !important;
}
.prize.element .card-inner::before {
  display: none;
}
.prize.element .card-inner::after {
  display: none;
}
@keyframes prizeGlow {
  0%, 100% {
    box-shadow:
      0 0 calc(var(--su) * 2) var(--c-win-glow),
      0 calc(var(--su) * 0.3) calc(var(--su) * 1) rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 calc(var(--su) * 3.5) var(--c-win-glow),
      0 calc(var(--su) * 0.3) calc(var(--su) * 1.2) rgba(0, 0, 0, 0.6);
  }
}
.prize.element .name {
  color: #fff !important;
  font-size: calc(var(--su) * 1.3) !important;
  text-shadow:
    0 0 calc(var(--su) * 0.8) rgba(255, 255, 255, 0.9),
    0 0 calc(var(--su) * 1.5) rgba(255, 100, 100, 0.9);
}
.prize.element .name.mid-name {
  font-size: calc(var(--su) * 1.1) !important;
}
.prize.element .name.long-name {
  font-size: calc(var(--su) * 0.9) !important;
}
.prize.element .company,
.prize.element .details {
  font-size: calc(var(--su) * 0.5) !important;
  color: rgba(255, 220, 220, 0.8) !important;
}
.prize.element .details {
  font-size: calc(var(--su) * 0.45) !important;
}
.card-inner.prize-scaled {
  transform: none !important;
}

/* ============================================================
   3. 顶部：公司信息 + 背景音乐
   ============================================================ */
#companyDisplay {
  position: absolute;
  top: calc(var(--su) * 2);
  left: calc(var(--su) * 2);
  transform: none;
  z-index: var(--z-controls);
  text-align: left;
  white-space: nowrap;
  padding: calc(var(--su) * 1.2) calc(var(--su) * 1.8);
  background: linear-gradient(135deg, rgba(0, 40, 80, 0.7), rgba(0, 20, 40, 0.5));
  border: 2px solid rgba(3, 233, 244, 0.4);
  border-radius: calc(var(--su) * 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 calc(var(--su) * 2) rgba(3, 233, 244, 0.2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--su) * 0.4);
}
#companyDisplay .company-sub {
  display: block;
  font-family: var(--font-body);
  font-size: calc(var(--su) * 1.4);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: calc(var(--su) * 0.1);
  text-shadow: 0 0 calc(var(--su) * 0.5) rgba(3, 233, 244, 0.3);
  padding-left: calc(var(--su) * 0.3);
  border-left: 3px solid var(--c-btn-primary);
}
#companyDisplay .company-main {
  font-family: var(--font-display);
  font-size: calc(var(--su) * 3);
  font-weight: var(--font-weight-black);
  color: var(--c-btn-primary);
  letter-spacing: calc(var(--su) * 0.15);
  text-shadow: 
    0 0 calc(var(--su) * 1) var(--c-btn-primary-glow),
    0 calc(var(--su) * 0.1) calc(var(--su) * 0.3) rgba(0, 0, 0, 0.5);
  line-height: 1.1;
}

.music {
  position: fixed;
  top: 3vh;
  right: 3vh;
  z-index: var(--z-controls);
}
.music-box {
  width: calc(var(--su) * 4.5);
  height: calc(var(--su) * 4.5);
  border-radius: 50%;
  text-align: center;
  line-height: calc(var(--su) * 4.5);
  font-size: calc(var(--su) * 1.2);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
  color: var(--c-btn-primary);
  cursor: pointer;
  background: linear-gradient(145deg, var(--c-btn-primary-deep), rgba(0, 0, 0, 0.4));
  border: 1px solid var(--c-btn-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 0 calc(var(--su) * 1) var(--c-btn-primary-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.music-box:hover {
  background: linear-gradient(145deg, var(--c-btn-primary-glow), var(--c-btn-primary-deep));
  box-shadow: 
    0 0 calc(var(--su) * 1.8) var(--c-btn-primary-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}
.music-box:active {
  transform: scale(0.98);
}
.music-box.playing {
  animation: musicPulse 2s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 calc(var(--su) * 1) var(--c-btn-primary-glow); }
  50% { box-shadow: 0 0 calc(var(--su) * 2) var(--c-btn-primary-glow); }
}

/* ============================================================
   4. 左侧奖品栏
   ============================================================ */
.prize-list-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  display: none;
  z-index: var(--z-controls);
}
#prizeBar {
  position: absolute;
  top: calc(var(--su) * 14);
  bottom: calc(var(--su) * 14);
  left: 0;
  width: calc(var(--su) * 22);
  overflow: auto;
  background: linear-gradient(180deg, rgba(15, 25, 40, 0.75), rgba(15, 25, 40, 0.55));
  border-right: 1px solid rgba(100, 200, 220, 0.15);
  backdrop-filter: blur(10px);
  z-index: var(--z-controls);
  opacity: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  box-shadow: calc(var(--su) * 0.3) 0 calc(var(--su) * 1) rgba(0, 0, 0, 0.3);
  padding: calc(var(--su) * 0.3);
  box-sizing: border-box;
}
#prizeBar.collapsed {
  transform: translateX(-100%);
  opacity: 0;
}
#prizeBar:hover {
  background: linear-gradient(180deg, rgba(15, 25, 40, 0.85), rgba(15, 25, 40, 0.65));
}

/* 折叠/展开按钮 */
.prize-bar-toggle {
  position: fixed;
  left: calc(var(--su) * 22); /* 与 #prizeBar 宽度相同 */
  top: calc(var(--su) * 16); /* 与 #prizeBar 顶部对齐 */
  width: calc(var(--su) * 1.8);
  height: calc(var(--su) * 2.2);
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: 0 calc(var(--su) * 0.4) calc(var(--su) * 0.4) 0;
  color: var(--c-cyan);
  font-size: calc(var(--su) * 1.2);
  cursor: pointer;
  z-index: 100; /* 确保在所有元素之上 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
  line-height: 1;
}
.prize-bar-toggle:hover {
  background: var(--c-btn-primary-deep);
  color: var(--c-btn-primary);
  box-shadow: 0 0 calc(var(--su) * 1) var(--c-glow);
}
/* 折叠状态下的按钮 */
body.prize-bar-collapsed .prize-bar-toggle {
  left: 0;
  transform: rotate(180deg);
}

/* 顶部"正在抽取"信息栏 */
.current-prize-bar {
  position: fixed;
  top: calc(var(--su) * 1);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(0, 40, 80, 0.85), rgba(0, 20, 40, 0.8));
  border: 1px solid var(--c-border);
  border-radius: calc(var(--su) * 0.8);
  padding: calc(var(--su) * 1) calc(var(--su) * 3);
  z-index: var(--z-controls);
  display: none;
  align-items: center;
  gap: calc(var(--su) * 1.5);
  backdrop-filter: blur(10px);
  box-shadow: 0 calc(var(--su) * 0.5) calc(var(--su) * 2) rgba(0, 0, 0, 0.4);
}
.current-prize-bar.visible {
  display: flex;
}
.current-prize-bar .prize-info-label {
  color: var(--c-cyan);
  font-size: calc(var(--su) * 1.4);
  font-weight: var(--font-weight-medium);
}
.current-prize-bar .prize-info-type {
  color: var(--c-btn-secondary);
  font-size: calc(var(--su) * 1.8);
  font-weight: var(--font-weight-bold);
  text-shadow: 0 0 calc(var(--su) * 0.5) var(--c-btn-secondary-glow);
}
.current-prize-bar .prize-info-title {
  color: var(--c-highlight);
  font-size: calc(var(--su) * 2.2);
  font-weight: var(--font-weight-black);
  text-shadow: 0 0 calc(var(--su) * 0.8) var(--c-highlight-glow);
  letter-spacing: calc(var(--su) * 0.2);
}
.current-prize-bar .prize-info-divider {
  width: 1px;
  height: calc(var(--su) * 2);
  background: var(--c-border);
}
.current-prize-bar .prize-info-count {
  color: var(--c-cyan);
  font-size: calc(var(--su) * 1.6);
}
.current-prize-bar .prize-info-count .count-num {
  color: var(--c-btn-secondary);
  font-weight: var(--font-weight-bold);
  font-size: calc(var(--su) * 2);
}
#prizeBar::-webkit-scrollbar { width: calc(var(--su) * 0.6); }
#prizeBar::-webkit-scrollbar-thumb { 
  background: rgba(100, 200, 220, 0.25); 
  border-radius: calc(var(--su) * 0.3); 
}
#prizeBar::-webkit-scrollbar-track { 
  background: rgba(0, 0, 0, 0.2); 
}

.prize-list-container,
ul.prize-list {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  gap: calc(var(--su) * 0.3);
}
.prize-list-container .prize-item,
.prize-list .prize-item {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  background-color: rgba(20, 35, 55, 0.55);
  border: 1px solid rgba(100, 200, 220, 0.15);
  color: rgba(200, 230, 240, 0.85);
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: calc(var(--su) * 0.3);
  transition: all 0.3s ease;
  border-radius: calc(var(--su) * 0.4);
  opacity: 1;
  gap: calc(var(--su) * 0.3);
}
.prize-list-container .prize-item:hover,
.prize-list .prize-item:hover {
  background-color: rgba(25, 45, 70, 0.65);
  border-color: rgba(100, 200, 220, 0.25);
}
.prize-list-container .prize-item.shine,
.prize-list .prize-item.shine {
  background: linear-gradient(135deg, rgba(3, 233, 244, 0.15), rgba(3, 233, 244, 0.05));
  border-color: var(--c-highlight);
  box-shadow: 
    0 0 calc(var(--su) * 1) var(--c-highlight-glow),
    inset 0 0 calc(var(--su) * 0.5) rgba(3, 233, 244, 0.1);
  opacity: 1;
  animation: prizeActive 1.5s ease-in-out infinite;
}
@keyframes prizeActive {
  0%, 100% {
    box-shadow: 
      0 0 calc(var(--su) * 1) var(--c-highlight-glow),
      inset 0 0 calc(var(--su) * 0.5) rgba(3, 233, 244, 0.1);
  }
  50% {
    box-shadow: 
      0 0 calc(var(--su) * 1.5) var(--c-highlight-glow),
      inset 0 0 calc(var(--su) * 0.8) rgba(3, 233, 244, 0.15);
  }
}
.prize-list-container .prize-item.done,
.prize-list .prize-item.done {
  opacity: 0.3;
  filter: grayscale(1);
  border-color: rgba(100, 100, 100, 0.3);
  pointer-events: none;
  background-color: rgba(15, 20, 30, 0.4);
}
.prize-mess {
  display: flex;
  flex-direction: column;
  gap: calc(var(--su) * 0.6);
  width: calc(var(--su) * 22);
  margin: calc(var(--su) * 0.6);
  text-align: left;
  box-sizing: border-box;
  padding: calc(var(--su) * 1) calc(var(--su) * 1.2);
  font-size: calc(var(--su) * 1.4);
  line-height: 1.4;
  font-weight: 600;
  color: var(--c-cyan);
  background: linear-gradient(135deg, var(--c-panel), rgba(0,0,0,0.3));
  border: 1px solid var(--c-border);
  border-radius: calc(var(--su) * 0.6);
  box-shadow: 0 0 calc(var(--su) * 0.8) var(--c-glow);
}
.prize-mess-row {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.4);
  flex-wrap: wrap;
}
.prize-mess-label {
  color: var(--c-cyan-bright);
  font-size: calc(var(--su) * 1.2);
  letter-spacing: calc(var(--su) * 0.05);
}
.prize-mess .prize-type {
  font-size: calc(var(--su) * 1.6);
  color: var(--c-highlight);
}
.prize-mess .prize-title {
  font-size: calc(var(--su) * 1.8);
  color: var(--c-cyan);
}
.prize-mess .prize-count-num {
  font-size: calc(var(--su) * 2.2);
  font-weight: 900;
  color: var(--c-highlight);
}

/* 奖品项内部结构（prize-list.js 渲染） */
.prize-text { 
  flex: 3; 
  min-width: 0; 
  text-align: left; 
  padding-left: calc(var(--su) * 0.4); 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
}
.prize-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  gap: calc(var(--su) * 0.15);
}
.prize-type-label {
  font-family: var(--font-display);
  font-size: calc(var(--su) * 0.9);
  font-weight: var(--font-weight-bold);
  color: var(--c-highlight);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 calc(var(--su) * 0.2) var(--c-highlight-glow);
  padding: calc(var(--su) * 0.15) calc(var(--su) * 0.3);
  background: rgba(0, 0, 0, 0.3);
  border-radius: calc(var(--su) * 0.25);
  line-height: 1.2;
}
.prize-title {
  font-family: var(--font-body);
  font-size: calc(var(--su) * 1.5);
  font-weight: 500;
  color: rgba(230, 245, 255, 0.95);
  margin: 0 0 calc(var(--su) * 0.5);
  line-height: 1.25;
  text-align: left;
  /* 长标题最多两行，超出才省略，避免"华为 Mate30"这类截尾 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prize-count-left {
  font-size: calc(var(--su) * 1.3);
  color: rgba(150, 220, 240, 0.9);
  opacity: 1;
  margin-top: calc(var(--su) * 0.4);
  font-variant-numeric: tabular-nums; /* 数字等宽，进度变化不跳动 */
  text-align: left;
}
.prize-empty {
  padding: calc(var(--su) * 4) calc(var(--su) * 2);
  color: var(--c-cyan);
  opacity: 0.6;
  font-size: calc(var(--su) * 1.6);
  text-align: center;
}
.prize-img {
  width: calc(var(--su) * 3.5);
  height: calc(var(--su) * 3);
  flex-shrink: 0;
}
.prize-img img {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--su) * 0.3);
  object-fit: cover;
}
.prize-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 255, 255, 0.1);
  border-radius: calc(var(--su) * 0.3);
  color: var(--c-cyan);
  font-size: calc(var(--su) * 0.8);
  text-align: center;
}

/* 中奖进度条 */
.progress {
  height: calc(var(--su) * 1.4);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--su) * 0.7);
  margin-top: calc(var(--su) * 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.progress .progress-bar {
  border-radius: calc(var(--su) * 0.7);
  animation: progressPulse 2s ease-in-out infinite;
  background: linear-gradient(90deg, var(--c-highlight) 0%, var(--c-highlight-bright) 50%, var(--c-highlight) 100%);
  background-size: 200% 100%;
  height: calc(var(--su) * 1.4);
  transition: width 0.6s ease;
  box-shadow: 0 0 calc(var(--su) * 0.5) var(--c-highlight-glow);
}
@keyframes progressPulse {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: -100% 0; }
}
.prize-shine {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--c-highlight);
  text-shadow: 0 0 calc(var(--su) * 0.6) var(--c-highlight-glow);
  display: inline-block;
}
.prize-shine.prize-count-num {
  font-size: calc(var(--su) * 2.2);
  font-weight: var(--font-weight-black);
  color: var(--c-highlight);
  text-shadow: 0 0 calc(var(--su) * 0.8) var(--c-highlight-glow), 0 0 calc(var(--su) * 1.5) rgba(3, 233, 244, 0.3);
  min-width: calc(var(--su) * 3);
  text-align: center;
}

/* ============================================================
   5. 右侧弹幕区
   ============================================================ */
.qipao-container {
  position: absolute;
  bottom: 24vh;   /* 抬高，避免与右下 5 个按钮重叠 */
  right: 0;
  width: calc(var(--su) * 30);
  top: 10vh;
  overflow: hidden;
  z-index: var(--z-qipao);
  pointer-events: none;
}
.qipao-container .paopao {
  position: absolute;
  right: calc(var(--su) * 2.2);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #fffc;
  box-sizing: border-box;
  font-size: calc(var(--su) * 1.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--su) * 1);
  text-align: center;
  color: #222;
  max-width: 100%;
  padding: calc(var(--su) * 0.6) calc(var(--su) * 1.2);
}
.pao2 { background: rgba(195, 245, 235, 0.6); }
.pao3 { background: rgba(227, 230, 253, 0.6); }
.pao4 { background: rgba(234, 242, 227, 0.6); }

.dan-mu {
  visibility: hidden;
  position: absolute;
  right: calc(var(--su) * 2);
  top: calc(var(--su) * 2);
  padding: calc(var(--su) * 0.8) calc(var(--su) * 1.2);
  width: calc(var(--su) * 24);
  border-radius: calc(var(--su) * 1);
  box-sizing: border-box;
  background-color: var(--c-card-bg);
  box-shadow: 0 0 calc(var(--su) * 0.4) var(--c-glow);
  border: 1px solid var(--c-border);
  color: var(--c-cyan);
}
.dan-mu.active { visibility: visible; }

/* ============================================================
   6. 首屏入口（居中毛玻璃面板）
   ============================================================ */
#enterPanel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: var(--z-controls);
  text-align: center;
  background: var(--c-panel);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-border);
  border-radius: calc(var(--su) * 1.6);
  padding: calc(var(--su) * 3.5) calc(var(--su) * 5);
  box-shadow: 0 0 calc(var(--su) * 3) var(--c-glow);
}
body.screen-enter #enterPanel { display: block; }

.enter-title {
  font-family: var(--font-display);
  font-size: calc(var(--su) * 4);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: calc(var(--su) * 0.8);
  letter-spacing: calc(var(--su) * 0.4);
  text-shadow: 0 0 calc(var(--su) * 1.2) rgba(3, 233, 244, 0.35);
}
.enter-tip {
  font-size: calc(var(--su) * 1.5);
  color: var(--c-cyan);
  margin-bottom: calc(var(--su) * 3);
}
.enter-actions {
  display: flex;
  gap: calc(var(--su) * 1.6);
  justify-content: center;
}

/* ============================================================
   7. 通用按钮（底部操作栏 + 右下角功能按钮 + 首屏入口）
   ============================================================ */
button {
  padding: calc(var(--su) * 1.2) calc(var(--su) * 2.8);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--c-border);
  color: var(--c-cyan);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--su) * 1.5);
  border-radius: calc(var(--su) * 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: calc(var(--su) * 0.05);
  backdrop-filter: blur(10px);
}
button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}
button:hover::before {
  left: 100%;
}
button:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--c-cyan);
  color: var(--c-cyan-bright);
  transform: translateY(-2px);
  box-shadow: 0 calc(var(--su) * 0.3) calc(var(--su) * 1) rgba(0, 0, 0, 0.3);
}
button:active {
  transform: translateY(0);
  box-shadow: none;
}
button:focus {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}

/* 首屏入口按钮（复用全局按钮样式） */
.enter-action-btn { white-space: nowrap; }
/* 主操作（导入名单）强调，其余统一青色 */
.enter-action-btn[data-action="upload"] {
  background: rgba(3, 233, 244, 0.18);
  border-color: rgba(3, 233, 244, 0.6);
  box-shadow: 0 0 calc(var(--su) * 1) rgba(3, 233, 244, 0.25);
}

/* 设置按钮（圆形浮动按钮） */
.settings-toggle {
  position: fixed;
  right: calc(var(--su) * 2);
  bottom: calc(var(--su) * 2);
  width: calc(var(--su) * 6);
  height: calc(var(--su) * 6);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-btn-primary-deep), rgba(255,255,255,0.05));
  border: 2px solid var(--c-btn-primary);
  color: var(--c-btn-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-controls);
  transition: all 0.3s ease;
  box-shadow: 0 0 calc(var(--su) * 1.5) var(--c-btn-primary-glow);
}
.settings-toggle:hover {
  transform: scale(1.1) rotate(30deg);
  box-shadow: 0 0 calc(var(--su) * 2.5) var(--c-btn-primary-glow);
}
.settings-icon {
  font-size: calc(var(--su) * 3);
}
body:not(.screen-lottery) .settings-toggle {
  display: none;
}

/* 设置面板遮罩 */
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: calc(var(--z-modal) - 1);
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.settings-overlay.active {
  display: block;
  opacity: 1;
}

/* 设置面板 */
.settings-panel {
  position: fixed;
  top: 50%;
  right: calc(var(--su) * 2);
  transform: translateY(-50%) translateX(120%);
  width: calc(var(--su) * 48);
  max-width: 420px;
  min-width: 320px;
  max-height: 85vh;
  background: linear-gradient(145deg, rgba(15, 25, 45, 0.98), rgba(10, 20, 35, 0.95));
  border: 1px solid var(--c-border);
  border-radius: calc(var(--su) * 1);
  z-index: var(--z-modal);
  display: none;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 calc(var(--su) * 2) calc(var(--su) * 4) rgba(0, 0, 0, 0.5);
  opacity: 0;
}
.settings-panel.active {
  display: flex;
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* 设置面板头部 */
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--su) * 1.5) calc(var(--su) * 2);
  border-bottom: 1px solid rgba(127, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.2);
}
.settings-header h3 {
  margin: 0;
  font-size: calc(var(--su) * 2);
  font-weight: var(--font-weight-bold);
  color: #fff;
}
.settings-close {
  width: calc(var(--su) * 3);
  height: calc(var(--su) * 3);
  min-width: calc(var(--su) * 3);
  max-width: calc(var(--su) * 3);
  aspect-ratio: 1 / 1;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(var(--su) * 1.4);
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  line-height: 1;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.settings-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.settings-close:active {
  transform: scale(0.95);
}

/* 设置内容区域 */
.settings-panel > div:not(.settings-header) {
  overflow-y: auto;
  padding: calc(var(--su) * 2);
}

/* 设置分区 */
.settings-section {
  margin-bottom: calc(var(--su) * 2.5);
}
.settings-section:last-child {
  margin-bottom: 0;
}
.settings-section.danger {
  padding-top: calc(var(--su) * 1.5);
  border-top: 1px solid rgba(255, 100, 100, 0.2);
}

/* 分区标题 */
.settings-section-title {
  font-size: calc(var(--su) * 1.4);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: calc(var(--su) * 1.2);
  text-transform: uppercase;
  letter-spacing: calc(var(--su) * 0.1);
}
.settings-section.danger .settings-section-title {
  color: rgba(255, 150, 150, 0.7);
}

/* 主题选择器 */
.theme-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--su) * 1);
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--su) * 1);
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: calc(var(--su) * 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-option:hover {
  background: rgba(255, 255, 255, 0.1);
}
.theme-option.active {
  border-color: var(--c-btn-primary);
  background: rgba(255, 255, 255, 0.1);
}
.theme-preview {
  width: calc(var(--su) * 3.5);
  height: calc(var(--su) * 3.5);
  border-radius: 50%;
  margin-bottom: calc(var(--su) * 0.8);
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.theme-preview.theme-scifi {
  background: linear-gradient(135deg, #03e9f4, #02101c);
}
.theme-preview.theme-festive {
  background: linear-gradient(135deg, #e04040, #ffd54f);
}
.theme-preview.theme-harvest {
  background: linear-gradient(135deg, #ffb347, #462808);
}
.theme-preview.theme-minimal {
  background: linear-gradient(135deg, #9fb3c8, #0d1117);
}
.theme-name {
  font-size: calc(var(--su) * 1.2);
  color: rgba(255, 255, 255, 0.8);
}

/* 设置按钮组 */
.settings-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--su) * 1);
}
.settings-btn {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.8);
  padding: calc(var(--su) * 1.2) calc(var(--su) * 1.5);
  background: linear-gradient(135deg, var(--c-btn-primary-deep), rgba(255,255,255,0.02));
  border: 1px solid var(--c-btn-primary);
  border-radius: calc(var(--su) * 0.8);
  color: var(--c-btn-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: calc(var(--su) * 1.4);
}
.settings-btn:hover {
  background: linear-gradient(135deg, var(--c-btn-primary-glow), var(--c-btn-primary-deep));
  box-shadow: 0 0 calc(var(--su) * 1.5) var(--c-btn-primary-glow);
  transform: translateY(-2px);
}
.settings-btn .btn-icon {
  font-size: calc(var(--su) * 1.8);
}
.settings-btn .btn-text {
  flex: 1;
  text-align: left;
}

/* 危险按钮 */
.settings-btn.danger-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(219,92,88,0.2), rgba(219,92,88,0.05));
  border-color: rgba(219, 92, 88, 0.6);
  color: #ff8b87;
}
.settings-btn.danger-btn:hover {
  background: linear-gradient(135deg, rgba(219,92,88,0.35), rgba(219,92,88,0.15));
  box-shadow: 0 0 calc(var(--su) * 1.5) rgba(219, 92, 88, 0.5);
}

/* 响应式调整 */
/* 大屏 (1920px+) */
@media (min-width: 1920px) {
  .settings-panel {
    width: calc(var(--su) * 52);
    max-width: 480px;
  }
}

/* 中屏 (1440px - 1920px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .settings-panel {
    width: calc(var(--su) * 50);
    max-width: 440px;
  }
}

/* 小屏/平板 (768px - 1439px) */
@media (min-width: 768px) and (max-width: 1439px) {
  .settings-panel {
    width: calc(var(--su) * 48);
    max-width: 420px;
  }
}

/* 移动端 (< 768px) */
@media (max-width: 767px) {
  .settings-panel {
    right: calc(var(--su) * 1);
    left: calc(var(--su) * 1);
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .theme-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  .settings-buttons {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   8. 底部中央抽奖操作栏
   ============================================================ */
#actionBar {
  position: absolute;
  bottom: calc(var(--su) * 2.5);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: calc(var(--su) * 2);
  z-index: var(--z-controls);
  background: rgba(2, 20, 40, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid var(--c-border);
  border-radius: calc(var(--su) * 1);
  padding: calc(var(--su) * 1.2) calc(var(--su) * 2);
}
body.screen-lottery #actionBar { display: flex; }

#actionBar button {
  padding: calc(var(--su) * 1.6) calc(var(--su) * 3.5);
  font-size: calc(var(--su) * 2);
  border-radius: calc(var(--su) * 0.6);
}

/* 开始抽奖（主按钮，呼吸效果） */
#lottery {
  background: linear-gradient(135deg, var(--c-btn-primary-deep), rgba(255,255,255,0.05));
  border: 1px solid var(--c-btn-primary);
  outline: none;
  color: var(--c-btn-primary);
  text-shadow: 0 0 calc(var(--su) * 0.5) var(--c-btn-primary-glow);
  animation: breath 1.6s linear infinite;
  box-shadow: 0 0 calc(var(--su) * 1.5) var(--c-btn-primary-glow);
  transition: all 0.3s ease;
}
#lottery:hover {
  background: linear-gradient(135deg, var(--c-btn-primary-glow), var(--c-btn-primary-deep));
  box-shadow: 0 0 calc(var(--su) * 2) var(--c-btn-primary-glow);
}
#lottery[data-locked="1"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
}

/* 重新抽奖：正方形按钮（宽高 = 2*padding + svg = 5.7su） */
#reLottery {
  background: linear-gradient(135deg, var(--c-btn-secondary-deep), rgba(255,255,255,0.02));
  border: 1px solid var(--c-btn-secondary);
  outline: none;
  color: var(--c-btn-secondary);
  /* 正方形：覆盖 #actionBar button 的 padding，强制宽高一致 */
  padding: 0 !important;
  width: calc(var(--su) * 5.7);
  height: calc(var(--su) * 5.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--su) * 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}
#reLottery:hover {
  background: linear-gradient(135deg, var(--c-btn-secondary-glow), var(--c-btn-secondary-deep));
  box-shadow: 0 0 calc(var(--su) * 1.5) var(--c-btn-secondary-glow);
  transform: translateY(-2px);
}
#reLottery:active {
  transform: translateY(0);
}
#reLottery svg {
  width: calc(var(--su) * 2.5);
  height: calc(var(--su) * 2.5);
  transition: transform 0.5s ease;
}
#reLottery:hover svg {
  transform: rotate(180deg);
}

/* ============================================================
   9. 通用弹窗（遮罩 + 弹窗体 + 表单）
   ============================================================ */
.mask,
.upload-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  display: none;
  z-index: var(--z-modal);
}
.mask.show,
.upload-mask.show { display: block; }

.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f5f5f5;
  border-radius: calc(var(--su) * 1);
  padding: calc(var(--su) * 3.2);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  min-width: 320px;
  box-shadow: 0 0 calc(var(--su) * 4) rgba(0, 0, 0, 0.3);
}
/* ========== 导入名单弹窗样式 ========== */
.upload-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: calc(var(--su) * 1.2);
  padding: calc(var(--su) * 3);
  width: calc(var(--su) * 80);
  max-width: 680px;
  max-height: calc(var(--su) * 75);
  overflow: hidden;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 calc(var(--su) * 2) rgba(100, 149, 237, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  animation: uploadSlideIn 0.3s ease-out;
}

@keyframes uploadSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 头部 */
.upload-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: calc(var(--su) * 2);
  padding-bottom: calc(var(--su) * 1.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.upload-title-group {
  flex: 1;
}

.upload-header h2 {
  margin: 0;
  color: var(--c-highlight);
  font-size: calc(var(--su) * 2.2);
  font-weight: 600;
  text-shadow: 0 0 calc(var(--su) * 0.3) var(--c-highlight-glow);
}

.upload-header p {
  margin: calc(var(--su) * 0.6) 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: calc(var(--su) * 1.3);
}

.upload-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: calc(var(--su) * 3);
  height: calc(var(--su) * 3);
  min-width: calc(var(--su) * 3);
  max-width: calc(var(--su) * 3);
  aspect-ratio: 1 / 1;
  /* 覆盖 base button 的 padding 1.2/2.8 + font-size 1.5，
     避免内容尺寸撑开 flex item 导致椭圆 */
  padding: 0;
  font-size: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  box-sizing: border-box;
}

.upload-close:hover {
  background: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
  transform: rotate(90deg);
}

.upload-close .close-icon {
  font-size: calc(var(--su) * 1.5);
}

/* 步骤指示器 */
.upload-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(var(--su) * 2.5);
  padding: calc(var(--su) * 1.5) calc(var(--su) * 2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: calc(var(--su) * 0.8);
}

.step-item {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.8);
  transition: all 0.3s ease;
}

.step-num {
  width: calc(var(--su) * 2.5);
  height: calc(var(--su) * 2.5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--su) * 1.2);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.step-text {
  font-size: calc(var(--su) * 1.3);
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.step-item.active .step-num {
  background: var(--c-highlight);
  border-color: var(--c-highlight);
  color: #1a1a2e;
  box-shadow: 0 0 calc(var(--su) * 0.8) var(--c-highlight-glow);
}

.step-item.active .step-text {
  color: var(--c-highlight);
  font-weight: 600;
}

.step-item.completed .step-num {
  background: rgba(100, 200, 100, 0.3);
  border-color: rgba(100, 200, 100, 0.5);
  color: #8fbc8f;
}

.step-item.completed .step-text {
  color: #8fbc8f;
}

.step-line {
  width: calc(var(--su) * 4);
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 calc(var(--su) * 1);
  transition: all 0.3s ease;
}

.step-line.active {
  background: var(--c-highlight);
}

/* 内容区域 */
.upload-content {
  flex: 1;
  overflow-y: auto;
  margin-bottom: calc(var(--su) * 2);
}

.upload-content::-webkit-scrollbar {
  width: 6px;
}

.upload-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.upload-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.upload-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.upload-step {
  display: none;
  animation: stepFadeIn 0.3s ease-out;
}

.upload-step.active {
  display: block;
}

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

/* 上传区域 */
.upload-dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: calc(var(--su) * 1);
  padding: calc(var(--su) * 4) calc(var(--su) * 2);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.02);
}

.upload-dropzone:hover {
  border-color: var(--c-highlight);
  background: rgba(100, 149, 237, 0.05);
  box-shadow: 0 0 calc(var(--su) * 2) rgba(100, 149, 237, 0.15);
}

.upload-dropzone.dragover {
  border-color: var(--c-highlight);
  background: rgba(100, 149, 237, 0.1);
  transform: scale(1.02);
  box-shadow: 0 0 calc(var(--su) * 3) rgba(100, 149, 237, 0.3);
}

.dropzone-icon {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: calc(var(--su) * 1.5);
  transition: all 0.3s ease;
}

.upload-dropzone:hover .dropzone-icon {
  color: var(--c-highlight);
  transform: translateY(-5px);
}

.upload-dropzone h3 {
  margin: 0 0 calc(var(--su) * 1);
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(var(--su) * 1.6);
  font-weight: 500;
}

.dropzone-hint {
  color: rgba(255, 255, 255, 0.4);
  font-size: calc(var(--su) * 1.2);
  margin: calc(var(--su) * 0.8) 0;
}

.dropzone-tip {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(var(--su) * 1.1);
  margin-top: calc(var(--su) * 1.5);
}

.upload-dropzone input[type="file"] {
  display: none;
}

/* 按钮样式 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--su) * 0.6);
  padding: calc(var(--su) * 1.2) calc(var(--su) * 2.5);
  background: linear-gradient(135deg, var(--c-highlight) 0%, #4169e1 100%);
  color: #fff;
  border: none;
  border-radius: calc(var(--su) * 0.6);
  font-size: calc(var(--su) * 1.4);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(100, 149, 237, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 calc(var(--su) * 0.6) calc(var(--su) * 2) var(--c-btn-primary-glow);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 calc(var(--su) * 0.2) var(--c-bg-dark),
    0 0 0 calc(var(--su) * 0.4) var(--c-btn-primary),
    0 calc(var(--su) * 0.6) calc(var(--su) * 2) var(--c-btn-primary-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary .btn-icon {
  font-size: calc(var(--su) * 1.6);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--su) * 0.6);
  padding: calc(var(--su) * 1.2) calc(var(--su) * 2.5);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: calc(var(--su) * 0.6);
  font-size: calc(var(--su) * 1.4);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-secondary:active {
  transform: scale(0.98);
}

/* 快捷操作栏 */
.upload-actions-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--su) * 1.5);
  margin-top: calc(var(--su) * 2);
  padding-top: calc(var(--su) * 1.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.template-download,
.quick-demo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--su) * 0.6);
  color: var(--c-highlight);
  font-size: calc(var(--su) * 1.3);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.template-download:hover,
.quick-demo:hover {
  color: var(--c-highlight-bright);
  text-decoration: underline;
}

.template-download .download-icon,
.quick-demo .demo-icon {
  font-size: calc(var(--su) * 1.5);
}

.upload-actions-bar .divider {
  color: rgba(255, 255, 255, 0.2);
}

/* 预览区域 */
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--su) * 1.5) calc(var(--su) * 2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: calc(var(--su) * 0.8);
  margin-bottom: calc(var(--su) * 1.5);
}

.preview-file-info {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 1);
}

.preview-file-info .file-icon {
  font-size: calc(var(--su) * 2);
}

.preview-file-info .file-name {
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(var(--su) * 1.4);
  font-weight: 500;
  max-width: calc(var(--su) * 40);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-file-info .file-badge {
  padding: calc(var(--su) * 0.3) calc(var(--su) * 0.8);
  background: rgba(100, 149, 237, 0.2);
  border: 1px solid rgba(100, 149, 237, 0.4);
  border-radius: calc(var(--su) * 0.4);
  color: var(--c-highlight);
  font-size: calc(var(--su) * 1.1);
  font-weight: 500;
}

.preview-stats {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 1.5);
}

.preview-stats .stat-item {
  display: flex;
  align-items: baseline;
  gap: calc(var(--su) * 0.4);
}

.preview-stats .stat-num {
  color: var(--c-highlight);
  font-size: calc(var(--su) * 1.8);
  font-weight: 600;
}

.preview-stats .stat-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(var(--su) * 1.2);
}

.preview-stats .stat-divider {
  width: 1px;
  height: calc(var(--su) * 2);
  background: rgba(255, 255, 255, 0.2);
}

/* 预览表格 */
.preview-table-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--su) * 0.8);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.preview-table-container {
  max-height: calc(var(--su) * 25);
  overflow-y: auto;
}

.preview-table-container::-webkit-scrollbar {
  width: 4px;
}

.preview-table-container::-webkit-scrollbar-track {
  background: transparent;
}

.preview-table-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

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

.preview-table thead {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.preview-table th {
  padding: calc(var(--su) * 1) calc(var(--su) * 1.5);
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(var(--su) * 1.2);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-table td {
  padding: calc(var(--su) * 0.8) calc(var(--su) * 1.5);
  color: rgba(255, 255, 255, 0.85);
  font-size: calc(var(--su) * 1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.preview-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.preview-table tbody tr:last-child td {
  border-bottom: none;
}

.preview-table td:first-child,
.preview-table th:first-child {
  width: calc(var(--su) * 4);
  text-align: center;
}

.preview-more {
  padding: calc(var(--su) * 1) calc(var(--su) * 1.5);
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(var(--su) * 1.2);
}

.preview-more strong {
  color: var(--c-highlight);
}

/* 警告提示 */
.preview-warnings {
  margin-top: calc(var(--su) * 1.5);
}

.warning-item {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.8);
  padding: calc(var(--su) * 1) calc(var(--su) * 1.5);
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: calc(var(--su) * 0.6);
  margin-bottom: calc(var(--su) * 0.8);
  color: #ffc107;
  font-size: calc(var(--su) * 1.2);
}

.warning-item:last-child {
  margin-bottom: 0;
}

.warning-icon {
  font-size: calc(var(--su) * 1.5);
}

.warning-text {
  flex: 1;
}

.warning-item.error {
  background: rgba(244, 67, 54, 0.1);
  border-color: rgba(244, 67, 54, 0.4);
  color: #ff6b6b;
}

.dedup-btn {
  padding: calc(var(--su) * 0.6) calc(var(--su) * 1.2);
  background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
  color: #fff;
  border: none;
  border-radius: calc(var(--su) * 0.5);
  font-size: calc(var(--su) * 1.1);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dedup-btn:hover {
  background: linear-gradient(135deg, #ff5252 0%, #f44336 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

.dedup-btn:active {
  transform: translateY(0);
}

/* 完成区域 */
.upload-step-3 {
  text-align: center;
  padding: calc(var(--su) * 4) calc(var(--su) * 2);
}

.complete-icon {
  color: #4caf50;
  margin-bottom: calc(var(--su) * 2);
  animation: completePulse 0.6s ease-out;
}

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

.upload-step-3 h3 {
  margin: 0 0 calc(var(--su) * 1);
  color: #4caf50;
  font-size: calc(var(--su) * 2);
  font-weight: 600;
}

.complete-count {
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(var(--su) * 1.5);
  margin: 0 0 calc(var(--su) * 0.8);
}

.complete-count strong {
  color: var(--c-highlight);
  font-size: calc(var(--su) * 1.8);
}

.complete-tip {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(var(--su) * 1.3);
  margin: 0;
}

/* 底部按钮 */
.upload-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--su) * 1.2);
  padding-top: calc(var(--su) * 1.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 响应式 */
@media (max-width: 768px) {
  .upload-box {
    width: 95vw;
    max-height: 90vh;
    padding: calc(var(--su) * 2);
  }

  .upload-steps {
    flex-wrap: wrap;
    gap: calc(var(--su) * 1);
  }

  .step-line {
    width: calc(var(--su) * 2);
  }

  .preview-header {
    flex-direction: column;
    gap: calc(var(--su) * 1);
    align-items: flex-start;
  }

  .preview-stats {
    width: 100%;
    justify-content: flex-start;
  }

  .upload-actions-bar {
    flex-direction: column;
    gap: calc(var(--su) * 1);
  }

  .upload-actions-bar .divider {
    display: none;
  }

  .preview-table td,
  .preview-table th {
    padding: calc(var(--su) * 0.6) calc(var(--su) * 0.8);
    font-size: calc(var(--su) * 1.1);
  }
}

/* 表单行/输入/勾选/确认按钮（共用） */
.form-row {
  display: flex;
  gap: calc(var(--su) * 1);
  align-items: center;
  margin-bottom: calc(var(--su) * 1.2);
}
.form-input,
.prize-edit-fields input {
  padding: calc(var(--su) * 1);
  flex: 1;
  font-size: calc(var(--su) * 1.4);
  border: 1px solid #ccc;
  border-radius: calc(var(--su) * 0.5);
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus,
.prize-edit-fields input:focus { border-color: var(--c-cyan-bright); }

.form-check {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.6);
  margin-bottom: calc(var(--su) * 1.6);
  font-size: calc(var(--su) * 1.4);
  color: #555;
  cursor: pointer;
}
.form-btn-confirm {
  background: var(--c-cyan-bright);
  color: #fff;
  border: none;
  border-radius: calc(var(--su) * 0.5);
  padding: calc(var(--su) * 1) calc(var(--su) * 2);
  font-size: calc(var(--su) * 1.4);
  cursor: pointer;
}

/* ============================================================
   10. 奖品编辑弹窗
   ============================================================ */
.prize-edit-container {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: calc(var(--su) * 0.8);
  margin-bottom: calc(var(--su) * 1.6);
}
.prize-edit-container::-webkit-scrollbar { width: calc(var(--su) * 0.8); }
.prize-edit-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: calc(var(--su) * 0.4);
}

.prize-edit-item {
  border: 1px solid #ddd;
  border-radius: calc(var(--su) * 0.5);
  padding: calc(var(--su) * 1.2);
  margin-bottom: calc(var(--su) * 1);
  background: #fff;
}
.prize-edit-item.is-special { background: rgba(212, 160, 32, 0.12); }

.prize-edit-row { display: flex; gap: calc(var(--su) * 1); align-items: center; }
.prize-edit-img { position: relative; width: calc(var(--su) * 5); flex-shrink: 0; }
.prize-edit-img img {
  width: calc(var(--su) * 5);
  height: calc(var(--su) * 5);
  object-fit: cover;
  border-radius: calc(var(--su) * 0.5);
  cursor: pointer;
  display: block;
}
.prize-edit-img input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.prize-edit-fields { flex: 1; display: flex; flex-direction: column; gap: calc(var(--su) * 0.6); }

.editor-actions {
  display: flex;
  gap: calc(var(--su) * 0.8);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: calc(var(--su) * 1);
}
.editor-actions button {
  padding: calc(var(--su) * 0.8) calc(var(--su) * 1.6);
  font-size: calc(var(--su) * 1.3);
  background: var(--c-cyan-bright);
  color: #fff;
  border: none;
  border-radius: calc(var(--su) * 0.4);
}
.editor-actions button:hover { background: #00c4d4; }
.editor-close-btn {
  width: 100%;
  margin-top: calc(var(--su) * 0.8);
  background: rgba(127, 255, 255, 0.2);
  color: #555;
  border: 1px solid #ccc;
  padding: calc(var(--su) * 1);
  border-radius: calc(var(--su) * 0.4);
  font-size: calc(var(--su) * 1.4);
}

/* ============================================================
   11. 结果导出 / Toast / 动画
   ============================================================ */
#save { display: none; }

.toast-msg {
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(20, 30, 48, 0.95);
  color: #fff;
  padding: calc(var(--su) * 1.2) calc(var(--su) * 2.4);
  border-radius: calc(var(--su) * 0.6);
  font-size: calc(var(--su) * 1.6);
  z-index: var(--z-toast);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.toast-msg.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes breath {
  0% { box-shadow: 0 0 0 rgba(3, 233, 244, 0); }
  100% { box-shadow: 0 0 calc(var(--su) * 1.6) rgba(3, 233, 244, 0.8); }
}
@keyframes rotating {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.rotate-active { animation: rotating 1.2s linear infinite; }

/* ============================================================
   12. 响应式媒体查询
   ============================================================ */

/* 窄屏/竖屏（宽高比 ≤ 16:10）：缩放单位改为按宽度，整体等比缩小 */
@media (max-aspect-ratio: 16/10) {
  :root { --su: 0.625vw; } /* 10/16 = 0.625，与 16:10 临界点无缝衔接 */
}

/* 中等窄屏：隐藏右侧弹幕区，避免遮挡 */
@media (max-width: 900px) {
  .qipao-container { display: none; }
}

/* 小屏：进一步精简装饰元素 */
@media (max-width: 600px) {
  #companyDisplay .company-sub { display: none; }
  .music { top: 2vh; right: 2vh; }
  .fixed-btn { min-width: 104px; }
}

/* 矮屏（如手机横屏）：压缩顶部标题与底部操作栏 */
@media (max-height: 600px) {
  #companyDisplay .company-sub { display: none; }
  #actionBar { bottom: 2vh; }
}

/* ============================================================
   13. 自定义弹窗组件
   ============================================================ */
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dialog-mask.dialog-show {
  opacity: 1;
}
.dialog-box {
  background: linear-gradient(145deg, rgba(15, 25, 45, 0.98), rgba(10, 20, 35, 0.95));
  border: 1px solid var(--c-border, rgba(127, 255, 255, 0.3));
  border-radius: calc(var(--su) * 1.2);
  padding: calc(var(--su) * 3);
  min-width: 320px;
  max-width: 420px;
  width: calc(var(--su) * 42);
  box-shadow: 0 calc(var(--su) * 2) calc(var(--su) * 6) rgba(0, 0, 0, 0.5),
              0 0 calc(var(--su) * 2) rgba(127, 255, 255, 0.1);
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.dialog-mask.dialog-show .dialog-box {
  transform: scale(1);
}
.dialog-header {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 1.2);
  margin-bottom: calc(var(--su) * 1.5);
  padding-bottom: calc(var(--su) * 1.2);
  border-bottom: 1px solid rgba(127, 255, 255, 0.15);
}
.dialog-icon {
  font-size: calc(var(--su) * 2.8);
  line-height: 1;
  flex-shrink: 0;
}
.dialog-icon-info {
  filter: drop-shadow(0 0 calc(var(--su) * 0.5) rgba(127, 255, 255, 0.5));
}
.dialog-icon-success {
  filter: drop-shadow(0 0 calc(var(--su) * 0.5) rgba(76, 217, 100, 0.5));
}
.dialog-icon-warning {
  filter: drop-shadow(0 0 calc(var(--su) * 0.5) rgba(255, 180, 0, 0.5));
}
.dialog-icon-error,
.dialog-icon-question {
  filter: drop-shadow(0 0 calc(var(--su) * 0.5) rgba(220, 53, 69, 0.5));
}
.dialog-title {
  font-size: calc(var(--su) * 2);
  font-weight: var(--font-weight-bold, 700);
  color: #fff;
}
.dialog-content {
  font-size: calc(var(--su) * 1.5);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: calc(var(--su) * 2);
  white-space: pre-wrap;
  word-break: break-word;
}
.dialog-actions {
  display: flex;
  gap: calc(var(--su) * 1.5);
  justify-content: flex-end;
}
.dialog-btn {
  padding: calc(var(--su) * 1) calc(var(--su) * 2.5);
  font-size: calc(var(--su) * 1.6);
  font-weight: var(--font-weight-medium, 500);
  border: none;
  border-radius: calc(var(--su) * 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  min-width: calc(var(--su) * 10);
}
.dialog-btn-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.dialog-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.dialog-btn-confirm {
  background: linear-gradient(135deg, var(--c-btn-primary-deep, #007a8a), var(--c-btn-primary, #03e9f4));
  color: #fff;
  border: 1px solid var(--c-btn-primary, #03e9f4);
  box-shadow: 0 0 calc(var(--su) * 1) var(--c-btn-primary-glow, rgba(3, 233, 244, 0.3));
}
.dialog-btn-confirm:hover {
  background: linear-gradient(135deg, var(--c-btn-primary-glow, #03e9f4), var(--c-btn-primary-deep, #007a8a));
  transform: translateY(-1px);
  box-shadow: 0 calc(var(--su) * 0.5) calc(var(--su) * 1.5) var(--c-btn-primary-glow, rgba(3, 233, 244, 0.4));
}
.dialog-btn-confirm:active {
  transform: translateY(0);
}
.dialog-btn-danger {
  background: linear-gradient(135deg, #8b0000, #dc3545);
  border-color: #dc3545;
  box-shadow: 0 0 calc(var(--su) * 1) rgba(220, 53, 69, 0.3);
}
.dialog-btn-danger:hover {
  background: linear-gradient(135deg, #dc3545, #8b0000);
  box-shadow: 0 calc(var(--su) * 0.5) calc(var(--su) * 1.5) rgba(220, 53, 69, 0.4);
}

/* 弹窗响应式 */
@media (max-width: 480px) {
  .dialog-box {
    min-width: calc(100vw - calc(var(--su) * 4));
    max-width: calc(100vw - calc(var(--su) * 4));
    width: calc(100vw - calc(var(--su) * 4));
    margin: calc(var(--su) * 2);
  }
  .dialog-actions {
    flex-direction: column-reverse;
  }
  .dialog-btn {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   2025 全新设置面板样式
   ============================================================ */

/* 设置面板 - 现代化卡片设计 */
.settings-panel {
  width: calc(var(--su) * 52);
  max-width: 480px;
  background: linear-gradient(165deg, rgba(15, 25, 50, 0.98) 0%, rgba(10, 18, 35, 0.96) 100%);
  border: 1px solid rgba(127, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  box-shadow: 
    0 calc(var(--su) * 4) calc(var(--su) * 8) rgba(0, 0, 0, 0.5),
    0 0 calc(var(--su) * 2) rgba(127, 255, 255, 0.1);
}

/* 设置面板头部 */
.settings-header {
  padding: calc(var(--su) * 2) calc(var(--su) * 2.5);
  background: linear-gradient(90deg, rgba(127, 255, 255, 0.08), transparent);
  border-bottom: 1px solid rgba(127, 255, 255, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-header-title {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 1);
}

.settings-icon-main {
  font-size: calc(var(--su) * 2.5);
  filter: drop-shadow(0 0 calc(var(--su) * 0.5) var(--c-highlight));
}

.settings-header h3 {
  font-size: calc(var(--su) * 2.2);
  font-weight: 600;
  background: linear-gradient(135deg, #fff, var(--c-highlight));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.settings-close {
  width: calc(var(--su) * 3.2);
  height: calc(var(--su) * 3.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.settings-close:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 100, 100, 0.4);
  transform: rotate(90deg);
}

.close-icon {
  font-size: calc(var(--su) * 1.4);
  color: rgba(255, 255, 255, 0.8);
}

/* 统计卡片区域 */
.settings-stats {
  display: flex;
  gap: calc(var(--su) * 1);
  padding: calc(var(--su) * 2);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(127, 255, 255, 0.1);
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.8);
  padding: calc(var(--su) * 1.2);
  background: rgba(127, 255, 255, 0.05);
  border: 1px solid rgba(127, 255, 255, 0.1);
  border-radius: calc(var(--su) * 0.8);
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(127, 255, 255, 0.08);
  border-color: rgba(127, 255, 255, 0.2);
  transform: translateY(-2px);
}

.stat-card.highlight {
  background: linear-gradient(135deg, rgba(127, 255, 255, 0.1), rgba(127, 255, 255, 0.03));
  border-color: rgba(127, 255, 255, 0.25);
}

.stat-icon {
  font-size: calc(var(--su) * 2);
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: calc(var(--su) * 2.2);
  font-weight: 700;
  color: var(--c-highlight);
  line-height: 1;
}

.stat-label {
  font-size: calc(var(--su) * 1.2);
  color: rgba(255, 255, 255, 0.6);
  margin-top: calc(var(--su) * 0.3);
}

/* 设置区域 */
.settings-panel > div:not(.settings-header):not(.settings-stats) {
  padding: calc(var(--su) * 2);
  overflow-y: auto;
}

.settings-section {
  margin-bottom: calc(var(--su) * 2.5);
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-header {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.8);
  margin-bottom: calc(var(--su) * 1.2);
}

.settings-section-header .section-icon {
  font-size: calc(var(--su) * 1.8);
}

.settings-section-header .section-title {
  font-size: calc(var(--su) * 1.6);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.settings-section-header.danger .section-title {
  color: #ff6b6b;
}

/* 主题卡片网格 */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--su) * 1);
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--su) * 1.2) calc(var(--su) * 0.8);
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid transparent;
  border-radius: calc(var(--su) * 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-3px);
  box-shadow: 0 calc(var(--su) * 1) calc(var(--su) * 2) rgba(0, 0, 0, 0.3);
}

.theme-card.active {
  border-color: var(--c-highlight);
  background: rgba(127, 255, 255, 0.08);
  box-shadow: 0 0 calc(var(--su) * 1.5) rgba(127, 255, 255, 0.2);
}

.theme-preview {
  width: calc(var(--su) * 3.5);
  height: calc(var(--su) * 3.5);
  border-radius: calc(var(--su) * 0.6);
  margin-bottom: calc(var(--su) * 0.8);
  box-shadow: inset 0 calc(var(--su) * 0.2) calc(var(--su) * 0.4) rgba(0, 0, 0, 0.2);
}

.theme-scifi-preview {
  background: linear-gradient(135deg, #03e9f4 0%, #02101c 100%);
}

.theme-festive-preview {
  background: linear-gradient(135deg, #e04040 0%, #ffd54f 100%);
}

.theme-harvest-preview {
  background: linear-gradient(135deg, #ffb347 0%, #462808 100%);
}

.theme-minimal-preview {
  background: linear-gradient(135deg, #9fb3c8 0%, #0d1117 100%);
}

.theme-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.theme-name {
  font-size: calc(var(--su) * 1.4);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.theme-desc {
  font-size: calc(var(--su) * 1.1);
  color: rgba(255, 255, 255, 0.5);
  margin-top: calc(var(--su) * 0.2);
}

/* 操作卡片网格 */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--su) * 1);
}

.action-card {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 1);
  padding: calc(var(--su) * 1.5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--su) * 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.action-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(127, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 calc(var(--su) * 1) calc(var(--su) * 2) rgba(0, 0, 0, 0.2);
}

.action-icon {
  width: calc(var(--su) * 4);
  height: calc(var(--su) * 4);
  border-radius: calc(var(--su) * 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--su) * 2);
  flex-shrink: 0;
}

.action-icon.icon-purple {
  background: linear-gradient(135deg, rgba(156, 100, 255, 0.2), rgba(156, 100, 255, 0.05));
  border: 1px solid rgba(156, 100, 255, 0.3);
}

.action-icon.icon-blue {
  background: linear-gradient(135deg, rgba(100, 180, 255, 0.2), rgba(100, 180, 255, 0.05));
  border: 1px solid rgba(100, 180, 255, 0.3);
}

.action-icon.icon-green {
  background: linear-gradient(135deg, rgba(100, 220, 150, 0.2), rgba(100, 220, 150, 0.05));
  border: 1px solid rgba(100, 220, 150, 0.3);
}

.action-icon.icon-orange {
  background: linear-gradient(135deg, rgba(255, 170, 100, 0.2), rgba(255, 170, 100, 0.05));
  border: 1px solid rgba(255, 170, 100, 0.3);
}

.action-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.action-title {
  font-size: calc(var(--su) * 1.5);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-desc {
  font-size: calc(var(--su) * 1.15);
  color: rgba(255, 255, 255, 0.5);
  margin-top: calc(var(--su) * 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-arrow {
  font-size: calc(var(--su) * 1.8);
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.action-card:hover .action-arrow {
  color: var(--c-highlight);
  transform: translateX(3px);
}

/* 危险区域 */
.danger-zone {
  padding-top: calc(var(--su) * 1.5);
  border-top: 1px solid rgba(255, 107, 107, 0.2);
}

.danger-action {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 1.2);
  padding: calc(var(--su) * 1.5);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 107, 107, 0.02));
  border: 1px solid rgba(255, 107, 107, 0.25);
  border-radius: calc(var(--su) * 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  text-align: left;
}

.danger-action:hover {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.05));
  border-color: rgba(255, 107, 107, 0.4);
  box-shadow: 0 0 calc(var(--su) * 2) rgba(255, 107, 107, 0.15);
}

.danger-icon {
  font-size: calc(var(--su) * 2.5);
}

.danger-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.danger-title {
  font-size: calc(var(--su) * 1.6);
  font-weight: 500;
  color: #ff6b6b;
}

.danger-desc {
  font-size: calc(var(--su) * 1.2);
  color: rgba(255, 255, 255, 0.5);
  margin-top: calc(var(--su) * 0.2);
}

.danger-arrow {
  font-size: calc(var(--su) * 1.8);
  color: rgba(255, 107, 107, 0.5);
  transition: all 0.3s ease;
}

.danger-action:hover .danger-arrow {
  transform: translateX(3px);
  color: #ff6b6b;
}

/* ============================================================
   2025 全新奖品编辑器样式
   ============================================================ */

/* 编辑器遮罩 */
.editor-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: var(--z-editor);
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.editor-mask.show {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 编辑器容器 */
.editor-container {
  width: calc(var(--su) * 80);
  max-width: 900px;
  /* 自适应高度：内容至少 110su，让奖项列表 scroll 至少能放下 2 个 item */
  min-height: calc(var(--su) * 110);
  height: auto;
  max-height: 880px;
  background: linear-gradient(165deg, rgba(15, 25, 50, 0.98) 0%, rgba(10, 18, 35, 0.96) 100%);
  border: 1px solid rgba(127, 255, 255, 0.2);
  border-radius: calc(var(--su) * 1.2);
  box-shadow: 
    0 calc(var(--su) * 6) calc(var(--su) * 12) rgba(0, 0, 0, 0.5),
    0 0 calc(var(--su) * 3) rgba(127, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(calc(var(--su) * 30));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 编辑器头部 */
.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(var(--su) * 2.5) calc(var(--su) * 3);
  background: linear-gradient(90deg, rgba(127, 255, 255, 0.08), transparent);
  border-bottom: 1px solid rgba(127, 255, 255, 0.15);
}

.editor-title-group h2 {
  font-size: calc(var(--su) * 2.5);
  font-weight: 700;
  color: #fff;
  margin: 0 0 calc(var(--su) * 0.5) 0;
  background: linear-gradient(135deg, #fff, var(--c-highlight));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.editor-subtitle {
  font-size: calc(var(--su) * 1.3);
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.editor-close {
  width: calc(var(--su) * 3);
  height: calc(var(--su) * 3);
  min-width: calc(var(--su) * 3);
  max-width: calc(var(--su) * 3);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* 覆盖 base button 的 padding，避免被内容撑成椭圆 */
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.editor-close::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 77, 109, 0), rgba(255, 77, 109, 0));
  transition: background 0.3s ease;
}

.editor-close:hover {
  background: rgba(255, 77, 109, 0.15);
  border-color: rgba(255, 77, 109, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 calc(var(--su) * 1) rgba(255, 77, 109, 0.3);
}

.editor-close:hover::before {
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.2), rgba(255, 77, 109, 0));
}

.editor-close .close-icon {
  font-size: calc(var(--su) * 1.4);
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.editor-close:hover .close-icon {
  color: #ff4d6d;
  transform: rotate(90deg);
}

/* 统计栏 */
.editor-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--su) * 3);
  padding: calc(var(--su) * 1.5) calc(var(--su) * 3);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(127, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  align-items: baseline;
  gap: calc(var(--su) * 0.5);
}

.stat-item .stat-num {
  font-size: calc(var(--su) * 2.5);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.stat-item .stat-num.highlight {
  color: var(--c-highlight);
}

.stat-item .stat-label {
  font-size: calc(var(--su) * 1.3);
  color: rgba(255, 255, 255, 0.5);
}

.stat-divider {
  width: 1px;
  height: calc(var(--su) * 2.5);
  background: rgba(255, 255, 255, 0.15);
}

/* 设置组 */
.editor-settings-group {
  padding: calc(var(--su) * 2) calc(var(--su) * 3);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(127, 255, 255, 0.08);
}

.settings-row {
  display: flex;
  gap: calc(var(--su) * 2);
  margin-bottom: calc(var(--su) * 1.5);
}

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

.settings-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--su) * 0.8);
}

.field-label {
  font-size: calc(var(--su) * 1.4);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.5);
}

.label-icon {
  font-size: calc(var(--su) * 1.6);
}

.field-input {
  width: 100%;
  height: calc(var(--su) * 4);
  padding: 0 calc(var(--su) * 1.2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: calc(var(--su) * 0.6);
  color: #fff;
  font-size: calc(var(--su) * 1.4);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.field-input:focus {
  outline: none;
  border-color: var(--c-highlight);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 calc(var(--su) * 0.2) rgba(127, 255, 255, 0.15);
}

.field-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* 开关 */
.toggle-field {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 1.2);
  padding: calc(var(--su) * 1) calc(var(--su) * 1.5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--su) * 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-field:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.toggle-icon {
  font-size: calc(var(--su) * 2);
}

.toggle-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.toggle-title {
  font-size: calc(var(--su) * 1.5);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.toggle-desc {
  font-size: calc(var(--su) * 1.2);
  color: rgba(255, 255, 255, 0.5);
}

.toggle-switch {
  position: relative;
  width: calc(var(--su) * 5);
  height: calc(var(--su) * 2.8);
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: calc(var(--su) * 1.4);
  transition: all 0.3s ease;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: calc(var(--su) * 2);
  width: calc(var(--su) * 2);
  left: calc(var(--su) * 0.3);
  bottom: calc(var(--su) * 0.3);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--c-highlight), var(--c-highlight-deep));
  border-color: var(--c-highlight);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(calc(var(--su) * 2.2));
  background: #fff;
}

/* 奖项列表区域 */
.editor-prizes-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(var(--su) * 2) calc(var(--su) * 3);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--su) * 1.5);
}

.section-header h3 {
  font-size: calc(var(--su) * 1.8);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.btn-add-prize {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.5);
  padding: calc(var(--su) * 0.8) calc(var(--su) * 1.5);
  background: linear-gradient(135deg, rgba(127, 255, 255, 0.15), rgba(127, 255, 255, 0.05));
  border: 1px solid rgba(127, 255, 255, 0.3);
  border-radius: calc(var(--su) * 0.6);
  color: var(--c-highlight);
  font-size: calc(var(--su) * 1.4);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-add-prize:hover {
  background: linear-gradient(135deg, rgba(127, 255, 255, 0.25), rgba(127, 255, 255, 0.1));
  transform: translateY(-1px);
  box-shadow: 0 calc(var(--su) * 0.5) calc(var(--su) * 1.5) rgba(127, 255, 255, 0.2);
}

.plus-icon {
  font-size: calc(var(--su) * 1.8);
  font-weight: 400;
}

.prizes-scroll {
  flex: 1;
  /* 至少能同时显示 2 个 prize-item（每个约 9su + 1.2su gap ≈ 20su） */
  min-height: calc(var(--su) * 20);
  overflow-y: auto;
  padding-right: calc(var(--su) * 0.5);
}

.prizes-scroll::-webkit-scrollbar {
  width: calc(var(--su) * 0.8);
}

.prizes-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: calc(var(--su) * 0.4);
}

.prizes-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: calc(var(--su) * 0.4);
}

.prizes-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 奖项列表项 */
.prizes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--su) * 1.2);
}

.prize-item {
  display: flex;
  gap: calc(var(--su) * 1.5);
  padding: calc(var(--su) * 1.5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--su) * 0.8);
  transition: all 0.3s ease;
  position: relative;
}

.prize-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.prize-item.special {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.02));
  border-color: rgba(255, 215, 0, 0.25);
}

.prize-item.special:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 215, 0, 0.05));
  border-color: rgba(255, 215, 0, 0.35);
}

.prize-item.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.prize-item.drag-over {
  border-color: var(--c-highlight);
  box-shadow: 0 0 calc(var(--su) * 1) rgba(127, 255, 255, 0.2);
}

.prize-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.prize-item.disabled .prize-img-upload {
  pointer-events: none;
}

/* 拖拽手柄 */
.drag-handle {
  width: calc(var(--su) * 2.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: rgba(255, 255, 255, 0.3);
  font-size: calc(var(--su) * 1.6);
  user-select: none;
}

.drag-handle:hover {
  color: rgba(255, 255, 255, 0.6);
}

.drag-handle:active {
  cursor: grabbing;
}

/* 奖项图片 */
.prize-img-upload {
  width: calc(var(--su) * 10);
  height: calc(var(--su) * 10);
  border-radius: calc(var(--su) * 0.8);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.prize-img-upload:hover {
  border-color: var(--c-highlight);
  background: rgba(127, 255, 255, 0.05);
}

.prize-img-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prize-img-upload .no-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--su) * 0.5);
  color: rgba(255, 255, 255, 0.4);
  font-size: calc(var(--su) * 1.2);
}

.prize-img-upload .no-img::before {
  content: "📷";
  font-size: calc(var(--su) * 2.5);
}

.prize-img-upload input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* 奖项内容 */
.prize-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--su) * 0.8);
  min-width: 0;
}

.prize-row {
  display: flex;
  gap: calc(var(--su) * 1);
}

.prize-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--su) * 0.3);
}

.prize-field label {
  font-size: calc(var(--su) * 1.1);
  color: rgba(255, 255, 255, 0.5);
}

.prize-field input {
  width: 100%;
  height: calc(var(--su) * 3);
  padding: 0 calc(var(--su) * 0.8);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--su) * 0.4);
  color: #fff;
  font-size: calc(var(--su) * 1.3);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.prize-field input:focus {
  outline: none;
  border-color: var(--c-highlight);
  background: rgba(0, 0, 0, 0.3);
}

.prize-field input[type="number"] {
  width: calc(var(--su) * 6);
}

/* 奖项状态 */
.prize-status {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 1.5);
  margin-top: calc(var(--su) * 0.3);
}

.status-item {
  font-size: calc(var(--su) * 1.2);
  color: rgba(255, 255, 255, 0.5);
}

.status-item b {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.status-item.rate b {
  color: var(--c-highlight);
}

.status-item.special-tag {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #ffd700;
  padding: calc(var(--su) * 0.2) calc(var(--su) * 0.8);
  border-radius: calc(var(--su) * 0.4);
  font-size: calc(var(--su) * 1.1);
  font-weight: 500;
}

/* 删除按钮 */
.prize-delete {
  width: calc(var(--su) * 3);
  height: calc(var(--su) * 3);
  min-width: calc(var(--su) * 3);
  max-width: calc(var(--su) * 3);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 100, 100, 0.1);
  border: 1px solid rgba(255, 100, 100, 0.2);
  color: rgba(255, 100, 100, 0.7);
  font-size: calc(var(--su) * 1.5);
  /* 覆盖 base button padding，避免内容撑成椭圆 */
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.prize-delete:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 100, 100, 0.4);
  color: #ff6b6b;
  transform: scale(1.1);
}

.prize-item.special .prize-delete {
  display: none;
}

/* 底部操作栏 */
.editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--su) * 2) calc(var(--su) * 3);
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(127, 255, 255, 0.1);
  gap: calc(var(--su) * 1.5);
}

.btn-secondary {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.5);
  padding: calc(var(--su) * 1) calc(var(--su) * 2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: calc(var(--su) * 0.6);
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(var(--su) * 1.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.footer-actions {
  display: flex;
  gap: calc(var(--su) * 1);
}

.btn-outline {
  padding: calc(var(--su) * 1) calc(var(--su) * 2.5);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: calc(var(--su) * 0.6);
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(var(--su) * 1.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: calc(var(--su) * 0.5);
  padding: calc(var(--su) * 1) calc(var(--su) * 2.5);
  background: linear-gradient(135deg, var(--c-highlight-deep), var(--c-highlight));
  border: none;
  border-radius: calc(var(--su) * 0.6);
  color: #fff;
  font-size: calc(var(--su) * 1.4);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 calc(var(--su) * 0.5) calc(var(--su) * 1.5) rgba(127, 255, 255, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--c-highlight), var(--c-highlight-deep));
  transform: translateY(-1px);
  box-shadow: 0 calc(var(--su) * 0.8) calc(var(--su) * 2) rgba(127, 255, 255, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary .btn-icon {
  font-size: calc(var(--su) * 1.6);
}

/* ============================================================
   响应式适配
   ============================================================ */
@media (max-width: 900px) {
  .editor-container {
    width: calc(100vw - calc(var(--su) * 4));
    height: calc(100vh - calc(var(--su) * 4));
    max-width: none;
    max-height: none;
  }
  
  .settings-stats {
    flex-wrap: wrap;
  }
  
  .stat-card {
    min-width: calc(50% - calc(var(--su) * 0.5));
  }
  
  .action-grid {
    grid-template-columns: 1fr;
  }
  
  .theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .editor-header {
    flex-direction: column;
    gap: calc(var(--su) * 1.5);
  }
  
  .editor-stats-bar {
    flex-wrap: wrap;
    gap: calc(var(--su) * 2);
  }
  
  .stat-divider {
    display: none;
  }
  
  .settings-row {
    flex-direction: column;
    gap: calc(var(--su) * 1.2);
  }
  
  .prize-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .prize-img-upload {
    width: calc(var(--su) * 12);
    height: calc(var(--su) * 12);
  }
  
  .drag-handle {
    display: none;
  }
  
  .editor-footer {
    flex-direction: column;
    gap: calc(var(--su) * 1);
  }
  
  .footer-actions {
    width: 100%;
  }
  
  .btn-primary,
  .btn-outline,
  .btn-secondary {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   中奖名单弹窗（独立于3D场景）
   ============================================================ */
.winner-list {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: linear-gradient(135deg, rgba(20, 40, 70, 0.95), rgba(10, 20, 40, 0.98));
  border: 2px solid var(--c-highlight);
  border-radius: calc(var(--su) * 0.5);
  padding: calc(var(--su) * 0.7);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: calc(var(--su) * 0.3);
  box-shadow: 0 0 calc(var(--su) * 2) var(--c-highlight-glow),
              0 calc(var(--su) * 0.5) calc(var(--su) * 1.2) rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  /* 宽度自适应卡片数量，仅限制最大宽度 */
  width: fit-content;
  max-width: min(2000px, calc(100vw - calc(var(--su) * 4)));
  max-height: calc(var(--su) * 95);
  animation: winnerListFadeIn 0.4s ease-out;
}

/* 4 行时弹窗允许更高 */
.winner-list.rows-4 {
  max-height: calc(var(--su) * 95);
}
.winner-list.rows-3 {
  max-height: calc(var(--su) * 80);
}

.winner-list.show {
  display: flex;
  animation: winnerListFadeIn 0.4s ease-out forwards;
}

@keyframes winnerListFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.winner-list.hide {
  animation: winnerListFadeOut 0.3s ease-in forwards;
}

@keyframes winnerListFadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

.winner-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: calc(var(--su) * 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.winner-list-title {
  font-size: calc(var(--su) * 1.6);
  font-weight: 700;
  color: var(--c-highlight);
  text-shadow: 0 0 calc(var(--su) * 0.4) var(--c-highlight-glow);
  letter-spacing: calc(var(--su) * 0.08);
}

.winner-list-close {
  width: calc(var(--su) * 1.8);
  height: calc(var(--su) * 1.8);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: calc(var(--su) * 0.9);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
}

.winner-list-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: rotate(90deg);
}

.winner-list-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  overflow-y: auto;
  gap: calc(var(--su) * 0.8);
  padding: calc(var(--su) * 0.6);
  min-height: calc(var(--su) * 14);
}

/* 5 列网格：6 人及以后用 grid 严格 5 列 */
.winner-list.rows-2 .winner-list-content,
.winner-list.rows-3 .winner-list-content,
.winner-list.rows-4 .winner-list-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: center;
  justify-items: stretch;
}

/* 行数自适应：行数越多，卡片越小，确保 4 行能装下 */
.winner-list.rows-2 .winner-list-content {
  gap: calc(var(--su) * 0.7);
}
.winner-list.rows-3 .winner-list-content {
  gap: calc(var(--su) * 0.6);
}
.winner-list.rows-4 .winner-list-content {
  gap: calc(var(--su) * 0.5);
}
.winner-list.rows-4 .winner-card {
  /* 4 行时让卡片更扁，能容下 4 行 */
  aspect-ratio: 1.55/1;
  min-height: calc(var(--su) * 11);
  padding: calc(var(--su) * 0.4) calc(var(--su) * 0.7);
}
.winner-list.rows-4 .winner-card-name {
  font-size: calc(var(--su) * 3.4);
}
.winner-list.rows-4 .winner-card-name.mid-name {
  font-size: calc(var(--su) * 2.9);
}
.winner-list.rows-4 .winner-card-name.long-name {
  font-size: calc(var(--su) * 2.4);
}
.winner-list.rows-4 .winner-card-id-main {
  font-size: calc(var(--su) * 1.8);
  letter-spacing: calc(var(--su) * 0.06);
}
.winner-list.rows-4 .winner-card-dept {
  font-size: calc(var(--su) * 1.1);
}
.winner-list.rows-3 .winner-card-name {
  font-size: calc(var(--su) * 4.4);
}
.winner-list.rows-3 .winner-card-name.mid-name {
  font-size: calc(var(--su) * 3.7);
}
.winner-list.rows-3 .winner-card-name.long-name {
  font-size: calc(var(--su) * 3);
}
.winner-list.rows-3 .winner-card-id-main {
  font-size: calc(var(--su) * 2.2);
  letter-spacing: calc(var(--su) * 0.07);
}

/* 1~5 人（rows-1）用 flex；卡片宽度自适应，卡片间留 gap */
.winner-list.rows-1 .winner-card {
  /* 单行 1~5 人：flex 模式，width 不应为 100% */
  width: auto;
  flex: 0 0 auto;
  /* 1 人时单张卡可以很大，2~5 人时均分 */
  min-width: calc(var(--su) * 20);
  max-width: calc(var(--su) * 50);
}

.winner-list-content::-webkit-scrollbar {
  width: calc(var(--su) * 0.6);
}

.winner-list-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: calc(var(--su) * 0.3);
}

.winner-list-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: calc(var(--su) * 0.3);
}

.winner-card {
  /* 卡片在 grid 模式撑满 1fr；在 flex 模式由 min/max-width 决定 */
  width: 100%;
  /* 卡片宽高比 1.45:1，比正方形更宽，姓名显示更有空间 */
  aspect-ratio: 1.45/1;
  min-height: calc(var(--su) * 14);
  background: linear-gradient(145deg, rgba(30, 60, 100, 0.92), rgba(20, 40, 70, 0.96));
  border-radius: calc(var(--su) * 0.25);
  padding: calc(var(--su) * 0.5) calc(var(--su) * 0.8);
  display: grid;
  /* 三行：部门顶部 / 姓名中部（占满）/ 工号底部 */
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  gap: calc(var(--su) * 0.15);
  /* 金边：外层主题色 + 内层 medal 金色，主题切换时随之变 */
  border: 1px solid var(--c-highlight);
  box-shadow:
    0 0 calc(var(--su) * 0.4) var(--c-glow),
    inset 0 0 0 1px var(--c-medal),
    0 calc(var(--su) * 0.1) calc(var(--su) * 0.4) rgba(0, 0, 0, 0.4);
  animation: winnerCardAppear 0.5s ease-out backwards;
  /* 中奖卡金徽计数器（按出现顺序生成 1, 2, 3... 编号） */
  counter-increment: medal;
}

.winner-list-content { counter-reset: medal; }

.winner-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--su) * 0.5);
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent);
  animation: shineSweep 2s infinite;
}

/* 金徽：右上角小金圆 + 编号，signature 元素 */
.winner-card::after {
  content: counter(medal);
  position: absolute;
  top: calc(var(--su) * 0.3);
  right: calc(var(--su) * 0.3);
  width: calc(var(--su) * 1.4);
  height: calc(var(--su) * 1.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: calc(var(--su) * 0.85);
  font-weight: 800;
  color: var(--c-medal-deep);
  background: radial-gradient(circle at 30% 30%, #fff4d0, var(--c-medal) 60%, var(--c-medal-deep));
  border-radius: 50%;
  box-shadow:
    0 0 calc(var(--su) * 0.4) var(--c-medal),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  z-index: 2;
  line-height: 1;
  pointer-events: none;
}

@keyframes shineSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes winnerCardAppear {
  from {
    opacity: 0;
    transform: translateY(calc(var(--su) * 5)) rotateX(30deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.winner-card:nth-child(1) { animation-delay: 0.1s; }
.winner-card:nth-child(2) { animation-delay: 0.2s; }
.winner-card:nth-child(3) { animation-delay: 0.3s; }
.winner-card:nth-child(4) { animation-delay: 0.4s; }
.winner-card:nth-child(5) { animation-delay: 0.5s; }
.winner-card:nth-child(6) { animation-delay: 0.6s; }
.winner-card:nth-child(7) { animation-delay: 0.7s; }
.winner-card:nth-child(8) { animation-delay: 0.8s; }
.winner-card:nth-child(9) { animation-delay: 0.9s; }
.winner-card:nth-child(10) { animation-delay: 1.0s; }
.winner-card:nth-child(n+11) { animation-delay: 1.2s; }

.winner-card-company {
  font-size: calc(var(--su) * 0.75);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: calc(var(--su) * 0.03);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 姓名：卡片核心信息，4 档字号按字符数严格匹配 */
.winner-card-name {
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  white-space: nowrap;       /* 防止中文姓名被强行换行 */
  text-align: center;
  align-self: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: clip;
  letter-spacing: calc(var(--su) * 0.04);
  text-shadow: 0 0 calc(var(--su) * 0.3) var(--c-glow);
}

/* rows-1/2 默认字号（卡片较大） */
.winner-list:not(.rows-3):not(.rows-4) .winner-card-name.name-2      { font-size: calc(var(--su) * 5.0); }
.winner-list:not(.rows-3):not(.rows-4) .winner-card-name.name-3      { font-size: calc(var(--su) * 4.0); }
.winner-list:not(.rows-3):not(.rows-4) .winner-card-name.name-4      { font-size: calc(var(--su) * 3.2); }
.winner-list:not(.rows-3):not(.rows-4) .winner-card-name.name-5plus  { font-size: calc(var(--su) * 2.6); }

/* rows-3 (11~15人) 字号缩一档 */
.winner-list.rows-3 .winner-card-name.name-2     { font-size: calc(var(--su) * 4.0); }
.winner-list.rows-3 .winner-card-name.name-3     { font-size: calc(var(--su) * 3.2); }
.winner-list.rows-3 .winner-card-name.name-4     { font-size: calc(var(--su) * 2.6); }
.winner-list.rows-3 .winner-card-name.name-5plus { font-size: calc(var(--su) * 2.1); }

/* rows-4 (16~20人) 字号再缩一档 */
.winner-list.rows-4 .winner-card-name.name-2     { font-size: calc(var(--su) * 3.4); }
.winner-list.rows-4 .winner-card-name.name-3     { font-size: calc(var(--su) * 2.8); }
.winner-list.rows-4 .winner-card-name.name-4     { font-size: calc(var(--su) * 2.2); }
.winner-list.rows-4 .winner-card-name.name-5plus { font-size: calc(var(--su) * 1.8); }

/* 工号：次要信息，姓名下方，等宽字体突出身份 */
.winner-card-id-main {
  font-size: calc(var(--su) * 2.6);
  font-weight: 600;
  font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
  letter-spacing: calc(var(--su) * 0.08);
  color: var(--c-highlight);
  text-shadow: 0 0 calc(var(--su) * 0.2) var(--c-highlight-glow);
  align-self: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1;
  background: rgba(3, 233, 244, 0.08);
  border: 1px solid rgba(3, 233, 244, 0.25);
  border-radius: calc(var(--su) * 0.15);
  padding: calc(var(--su) * 0.1) calc(var(--su) * 0.3);
  max-width: 80%;
  margin: 0 auto;
}

/* 部门：顶部小标签 */
.winner-card-corner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.winner-card-dept {
  font-size: calc(var(--su) * 1.25);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  letter-spacing: calc(var(--su) * 0.06);
  background: linear-gradient(135deg, var(--c-glass-strong) 0%, var(--c-glass) 100%);
  border: 1px solid var(--c-medal);
  border-radius: calc(var(--su) * 0.3);
  padding: calc(var(--su) * 0.18) calc(var(--su) * 0.8);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-shadow: 0 0 calc(var(--su) * 0.25) var(--c-glow);
  box-shadow: inset 0 0 0 1px var(--c-glass-strong);
  position: relative;
}

/* · 分隔符用主题色高亮（中圆点用 highlight 色，更精致） */
.winner-card-dept::before {
  content: '';
  position: absolute;
  left: calc(var(--su) * 0.3);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--su) * 0.25);
  height: calc(var(--su) * 0.25);
  background: var(--c-highlight);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--su) * 0.2) var(--c-highlight-glow);
}

.winner-card-dept {
  padding-left: calc(var(--su) * 0.8 + 0.25su);  /* 留出小圆点空间 */
}

/* rows-4 部门字号再缩 */
.winner-list.rows-4 .winner-card-dept {
  font-size: calc(var(--su) * 1.05);
  padding: calc(var(--su) * 0.12) calc(var(--su) * 0.6);
  padding-left: calc(var(--su) * 0.6 + 0.2su);
}

.winner-list.rows-4 .winner-card-dept::before {
  width: calc(var(--su) * 0.2);
  height: calc(var(--su) * 0.2);
  left: calc(var(--su) * 0.25);
}

/* 中奖名单弹窗响应式：宽度始终自适应卡片，仅收紧视口上限，
   列轨道 minmax(0, Nsu) 会自动收缩适配 */
@media (max-width: 1200px) {
  .winner-list {
    max-width: calc(100vw - calc(var(--su) * 4));
  }
}

@media (max-width: 900px) {
  .winner-list {
    max-width: calc(100vw - calc(var(--su) * 4));
    max-height: calc(var(--su) * 65);
    padding: calc(var(--su) * 0.8);
  }
  
  .winner-list-content {
    gap: calc(var(--su) * 0.3);
  }
  
  .winner-list-title {
    font-size: calc(var(--su) * 1.6);
  }
}

@media (max-width: 600px) {
  .winner-list {
    max-width: calc(100vw - calc(var(--su) * 2));
    max-height: calc(100vh - calc(var(--su) * 2));
  }
  
  .winner-card-name {
    font-size: calc(var(--su) * 1.6);
  }
}

/* 中奖名单"更多"提示 */
.winner-more-notice {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--su) * 1.2);
  margin-top: calc(var(--su) * 0.8);
  background: rgba(127, 255, 255, 0.12);
  border: 1px dashed rgba(127, 255, 255, 0.4);
  border-radius: calc(var(--su) * 0.6);
  color: rgba(255, 255, 255, 0.85);
  font-size: calc(var(--su) * 1.3);
  font-weight: 500;
}

/* ============================================================
   9. A11y：键盘焦点 / 减弱动画
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--c-highlight);
  outline-offset: 2px;
}

button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible {
  outline-color: var(--c-btn-primary);
}

/* 尊重用户系统的"减少动画"偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}