:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F7;
  --bg-tertiary: #FAFAFC;
  --text-primary: #1D1D1F;
  --text-secondary: #86868B;
  --text-tertiary: #C7C7CC;
  --accent-blue: #007AFF;
  --accent-blue-light: #E5F1FF;
  --accent-pink: #FF2D55;
  --success: #34C759;
  --warning: #FF9500;
  --danger: #FF3B30;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.04);
  --border-light: rgba(0,0,0,0.06);
  --border-color: rgba(0,0,0,0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  font-family: -apple-system, "PingFang SC", "SF Pro Display", "Be Vietnam Pro", "Helvetica Neue", sans-serif;
  background: var(--bg-secondary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
  /* 禁双击/捏合缩放,要"App 感"——保留正常滚动和点击。配合 viewport 的 user-scalable=no。 */
  touch-action: manipulation;
}
/* 文字不可被长按选中/放大镜(原生 App 观感);输入框除外,要能选 */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

img { display: block; max-width: 100%; }

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  font-size: inherit;
}

button:active { transform: scale(0.96); transition: transform 0.15s; }

a { color: inherit; text-decoration: none; }

/* 隐藏滚动条但保持可滚动 */
.scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { display: none; }

/* --- 公共组件 --- */

/* iOS 状态栏（模拟） */
.ios-status-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-weight: 600;
  font-size: 15px;
  background: transparent;
}

/* 卡片 */
.card {
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 16px;
}

.card-tappable {
  cursor: pointer;
  transition: transform 0.15s;
}
.card-tappable:active { transform: scale(0.98); }

/* Toast */
.toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(28,28,30,0.92);
  color: #fff;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  backdrop-filter: blur(20px);
  max-width: 80%;
  text-align: center;
}
.toast.show { opacity: 1; }

/* --- 入口页 --- */

.entry-card {
  width: 100%;
  max-width: 360px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.entry-card .brand {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.entry-card .subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.entry-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

.entry-btn.primary {
  background: var(--accent-blue);
  color: #fff;
}

.entry-btn.disabled {
  background: var(--bg-primary);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.entry-btn.disabled:active { transform: none; }

.entry-btn.secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1.5px solid var(--border-light);
}

.wip-tag {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--warning);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
}

.lang-switch {
  margin-top: 16px;
}
.lang-switch button {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 6px 12px;
}

/* --- 登录页 --- */

.login-page {
  min-height: 100vh;
  padding: 60px 32px 40px;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}
.login-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.login-field {
  margin-bottom: 16px;
}
.login-field label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.login-field input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.login-field input:focus { border-color: var(--accent-blue); }

.login-submit {
  width: 100%;
  padding: 14px;
  background: var(--accent-blue);
  color: #fff;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
}

/* --- 主播端顶部栏（暖心大版） --- */

.top-area {
  /* 默认 L1 银灰底（L2-L4 由 data-level 覆盖） */
  background:
    radial-gradient(ellipse 70% 50% at 80% 25%, rgba(255, 255, 255, 0.6) 0%, transparent 60%),
    linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 50%, #CBD5E1 100%);
  color: #1E293B;
  border-radius: 0 0 28px 28px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: background 0.4s ease;
  position: relative;
  isolation: isolate;
}
/* 统一顶部金属高光（柔光） */
.top-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 55% at 30% 0%, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.top-area > * { position: relative; z-index: 2; }

/* ============================================================
   等级 4 阶 · 英雄联盟段位风格
   白银 SILVER → 黄金 GOLD → 白金 PLATINUM → 钻石 DIAMOND
   核心元素：深色基底 + 段位辉光 + 段位徽章 + 段位英文水印 + 放射光线
   ============================================================ */

/* ============================================================
   L1 SILVER · 真·银灰金属（浅银底 + 深字 + 钢灰阴影）
   方向：整张卡片就是一块亮银，不再是"深蓝灰"
   ============================================================ */
.top-area[data-level="1"] {
  background:
    radial-gradient(ellipse 70% 50% at 80% 25%, rgba(255, 255, 255, 0.6) 0%, transparent 60%),
    linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 40%, #CBD5E1 100%);
}
/* L1 是浅银底，所有文字 / icon / 装饰物都翻深 */
.top-area[data-level="1"],
.top-area[data-level="1"] .ios-status-bar,
.top-area[data-level="1"] .bar-greet,
.top-area[data-level="1"] .bar-heart,
.top-area[data-level="1"] .profile-header-name,
.top-area[data-level="1"] .profile-header-sub,
.top-area[data-level="1"] .ranking-hero h1,
.top-area[data-level="1"] .ranking-hero .sub {
  color: #1E293B;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
}
/* hero 下方 level-tag 也翻深 */
.top-area[data-level="1"] .bar-meta-row .level-tag {
  background: rgba(15, 23, 42, 0.12);
  color: #1E293B;
}
/* L1 段位水印改为深灰半透明（浅底上白色看不见） */
.top-area[data-level="1"] .tier-watermark {
  color: rgba(15, 23, 42, 0.22);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
/* L1 放射光线改为深灰射线（浅底上白色看不见） */
.top-area[data-level="1"] .tier-rays {
  background: repeating-conic-gradient(
    from 0deg at 60% 50%,
    rgba(71, 85, 105, 0.20) 0deg 3deg,
    transparent 3deg 22deg
  );
}
/* L1 顶部金属高光（::after）改为白色光泽更亮 */
.top-area[data-level="1"]::after {
  background: radial-gradient(ellipse 80% 55% at 30% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
}
/* L1 直播胶囊：深灰底深字（浅银底白字看不见） */
.top-area[data-level="1"] .live-pill {
  background: rgba(15, 23, 42, 0.10);
  color: #1E293B;
}
.top-area[data-level="1"] .live-pill .dot {
  background: #DC2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.25);
}

/* L2 GOLD · 暗红棕基底 + 金辉光 */
.top-area[data-level="2"] {
  background:
    radial-gradient(ellipse 75% 55% at 78% 32%, rgba(252, 211, 77, 0.42) 0%, transparent 55%),
    linear-gradient(135deg, #78350F 0%, #44150B 55%, #1C0701 100%);
}

/* L3 PLATINUM · 墨青基底 + 青蓝辉光 */
.top-area[data-level="3"] {
  background:
    radial-gradient(ellipse 75% 55% at 78% 32%, rgba(94, 234, 212, 0.46) 0%, transparent 55%),
    linear-gradient(135deg, #134E4A 0%, #064E3B 55%, #022C22 100%);
}

/* L4 DIAMOND · 深蓝紫基底 + 钻蓝辉光 */
.top-area[data-level="4"] {
  background:
    radial-gradient(ellipse 75% 55% at 78% 32%, rgba(165, 180, 252, 0.55) 0%, transparent 50%),
    linear-gradient(135deg, #1E1B4B 0%, #131129 55%, #050313 100%);
}

/* 段位英文水印（巨大斜体，超低透明 — LOL 卡片签名风） */
.tier-watermark {
  position: absolute;
  top: 56px;
  right: 14px;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 3px;
  font-style: italic;
  font-family: 'Impact', 'Arial Black', 'Helvetica Neue', sans-serif;
  color: rgba(255, 255, 255, 0.10);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}
/* 不同段位水印染色（轻微，呼应段位主色） */
.top-area[data-level="2"] .tier-watermark { color: rgba(252, 211, 77, 0.18); }
.top-area[data-level="3"] .tier-watermark { color: rgba(94, 234, 212, 0.20); }
.top-area[data-level="4"] .tier-watermark { color: rgba(165, 180, 252, 0.22); }

/* 段位徽章（右上角 SVG） */
.tier-emblem {
  position: absolute;
  top: 56px;
  right: 18px;
  width: 54px;
  height: 68px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.tier-emblem svg { width: 100%; height: 100%; display: block; }

/* 段位放射光线（贴在徽章后） */
.tier-rays {
  position: absolute;
  top: 30px;
  right: -30px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background:
    repeating-conic-gradient(
      from 0deg at 60% 50%,
      rgba(255,255,255,0.12) 0deg 3deg,
      transparent 3deg 22deg
    );
  -webkit-mask: radial-gradient(circle at 60% 50%, #000 0%, transparent 65%);
  mask: radial-gradient(circle at 60% 50%, #000 0%, transparent 65%);
}
.top-area[data-level="2"] .tier-rays {
  background: repeating-conic-gradient(from 0deg at 60% 50%, rgba(252, 211, 77, 0.22) 0deg 3deg, transparent 3deg 22deg);
}
.top-area[data-level="3"] .tier-rays {
  background: repeating-conic-gradient(from 0deg at 60% 50%, rgba(94, 234, 212, 0.26) 0deg 3deg, transparent 3deg 22deg);
}
.top-area[data-level="4"] .tier-rays {
  background: repeating-conic-gradient(from 0deg at 60% 50%, rgba(165, 180, 252, 0.28) 0deg 3deg, transparent 3deg 22deg);
}

/* 钻石段位额外双高光（棱面反射） */
.top-area[data-level="4"]::after {
  background:
    radial-gradient(ellipse 80% 55% at 30% 0%, rgba(255,255,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 20% 80%, rgba(165,180,252,0.18) 0%, transparent 60%);
}

/* 段位文字阴影（让浅色暗色基底文字都清晰） */
.top-area .bar-greet,
.top-area .bar-heart {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.top-area .ios-status-bar {
  color: #fff;
  background: transparent;
}

.anchor-top-bar-large {
  /* 顶部留出系统状态栏高度（安卓/iOS 真机），避免头像、铃铛、问候语被状态栏盖住。
     之前靠 renderIOSStatusBar() 假状态栏撑开，过审后它返空，安卓顶部就贴边了。
     无安全区的浏览器环境回退到 4px，与原样一致。 */
  padding: calc(4px + env(safe-area-inset-top)) 20px 22px;
}

.anchor-top-bar-large .bar-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.anchor-top-bar-large .avatar-wrap {
  position: relative;
  width: 46px;
  height: 46px;
}
.anchor-top-bar-large .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.3);
  display: block;
}
.anchor-top-bar-large .avatar-wrap .level-chip {
  position: absolute;
  bottom: -3px;
  right: -4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 6px;
  color: #1F2937;
  background: rgba(255,255,255,0.95);
  border: 1.5px solid rgba(255,255,255,0.5);
  line-height: 1.3;
}
/* 头像 Lv 角标：按段位主色染色（白底 + 深段位字色 = 高对比 + 段位识别） */
.top-area[data-level="1"] .level-chip { color: #334155; }   /* 银 */
.top-area[data-level="2"] .level-chip { color: #92400E; }   /* 金 */
.top-area[data-level="3"] .level-chip { color: #0F766E; }   /* 白金 */
.top-area[data-level="4"] .level-chip { color: #4338CA; }   /* 钻石 */

/* ============================================================
   明星主播头像框 · 高还原参考图（皇冠 + 双翅 + 珍珠环 + 底花）
   .avatar-wrap.is-star          → 主播 home 顶部 hero（紧凑版）
   .profile-header-avatar.is-star → profile 头像（完整版）
   .ranking-row.is-star .avatar  → 排行榜行（极简版：金边+小皇冠）
   ============================================================ */

/* 通用：头像本体（圆形 + 金色描边 + 暖色辉光） */
.avatar-wrap.is-star,
.profile-header-avatar.is-star {
  position: relative;
  overflow: visible;
}
.avatar-wrap.is-star .avatar,
.profile-header-avatar.is-star img {
  position: relative;
  z-index: 3;
  border-radius: 50%;
  border: 2.5px solid #FCD34D !important;
  box-shadow:
    0 0 14px rgba(252, 211, 77, 0.55),
    inset 0 0 6px rgba(255, 255, 255, 0.35);
}

/* 装饰物容器：绝对定位 inset:0，SVG 子层用 absolute 准确居中扩展 */
.star-frame-deluxe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.star-frame-deluxe svg {
  position: absolute;
  top: -55%;
  left: -55%;
  width: 210%;
  height: 210%;
  overflow: visible;
  display: block;
}
/* 紧凑版（home顶部 / ranking 行）：尺寸更小，避免溢出 hero / row */
.star-frame-deluxe.compact svg {
  top: -35%;
  left: -35%;
  width: 170%;
  height: 170%;
}

/* 翅膀轻颤 + 皇冠微浮 + 珍珠光泽呼吸 */
@keyframes sf-crown-bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes sf-wing-flutter{ 0%,100% { transform: scaleY(1); }    50% { transform: scaleY(0.94); } }
@keyframes sf-pearl-shimmer{0%,100% { filter: brightness(1); }   50% { filter: brightness(1.25); } }
@keyframes sf-petal-wiggle{ 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } }

.star-frame-deluxe .sf-crown    { transform-origin: 100px 60px; animation: sf-crown-bob   2.6s ease-in-out infinite; }
.star-frame-deluxe .sf-wing-l   { transform-origin: 60px 100px; animation: sf-wing-flutter 2.8s ease-in-out infinite; }
.star-frame-deluxe .sf-wing-r   { transform-origin: 140px 100px; animation: sf-wing-flutter 2.8s ease-in-out 0.18s infinite; }
.star-frame-deluxe .sf-pearls   { animation: sf-pearl-shimmer 3.4s ease-in-out infinite; }
.star-frame-deluxe .sf-flowers  { transform-origin: 100px 158px; animation: sf-petal-wiggle 4s ease-in-out infinite; }

/* hero 顶部明星 chip（替代默认 level-tag，金底深棕） */
.bar-meta-row .star-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
  color: #78350F;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(252, 211, 77, 0.5);
}

/* profile 头像旁的小明星 badge */
.profile-star-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
  color: #78350F;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(252, 211, 77, 0.4);
}
.bar-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bar-meta-row .level-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
}

.anchor-top-bar-large .actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 玻璃质感按钮（铃铛 / 语言）· iOS-style frosted glass + 双层光影 */
.anchor-top-bar-large .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.anchor-top-bar-large .icon-btn:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* 语言按钮：胶囊形适配文字 "中 / VN" */
.anchor-top-bar-large .icon-btn.lang {
  width: auto;
  min-width: 56px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* L1 银灰底按钮：深字 + 深细描边（玻璃质感保留） */
.top-area[data-level="1"] .anchor-top-bar-large .icon-btn {
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: #1E293B;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(15, 23, 42, 0.06);
}
.top-area[data-level="1"] .anchor-top-bar-large .icon-btn:active {
  background: rgba(15, 23, 42, 0.12);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.08),
    inset 0 1px 2px rgba(15, 23, 42, 0.10);
}

.anchor-top-bar-large .icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--accent-pink);
  border-radius: 50%;
  /* 用透明白边圈出徽章，跟随 hero 任意配色不再绑死绿色 */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}

.bar-greet {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  color: #fff;
}

.bar-heart {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin-bottom: 14px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

.live-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
  animation: pulse 1.6s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- 兼容（如有别处用） --- */
.anchor-top-bar { display: none; }

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  position: relative;
}

.icon-btn.lang {
  min-width: auto;
  width: auto;
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--bg-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-blue);
  height: 32px;
}

.icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--accent-pink);
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}

/* --- 底部 tab bar --- */

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 393px;
  margin: 0 auto;
  height: 83px;
  padding-bottom: 34px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--border-light);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  display: flex;
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-secondary);
  font-size: 10px;
  text-decoration: none;
}

.tab-item.active { color: var(--accent-blue); }
.tab-item:active { background: rgba(0,0,0,0.03); }

/* --- 主播端内容容器 --- */

.anchor-page {
  min-height: 100vh;
  padding-bottom: 100px;  /* 给 tab bar 留空间 */
  background: var(--bg-secondary);
  overflow-x: hidden; /* 防止 LOL 段位装饰物（tier-rays / 头像框翅膀）触发水平滚动 */
}

.section {
  padding: 0 16px;
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.section-title .left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}
.section-title .right {
  font-size: 13px;
  color: var(--text-secondary);
}

/* --- 今日任务区块（v2: 2x2 + 阶梯积分） --- */

.section-title .see-all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-secondary);
}

.tasks-card { padding: 18px 18px 16px; }

.tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.tasks-progress-text {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tasks-progress-text .done-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--success);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tasks-progress-text .done-suffix {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.tasks-reward {
  font-size: 13px;
  font-weight: 600;
  color: var(--warning);
  background: rgba(255,149,0,0.10);
  padding: 6px 10px;
  border-radius: 999px;
}

.tasks-progress-bar {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}
.tasks-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #4ADE80);
  border-radius: 3px;
  transition: width 0.4s;
}

.tasks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 奇数个任务时最后一个跨两列（轮换任务通常是末位） */
.tasks-grid > .task-card-v2:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* 轮换任务的副标题：今日主题 */
.task-card-v2 .task-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-blue);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.task-card-v2 .task-subtitle .topic-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
}

/* tasks.html 任务行的轮换主题 */
.task-row .topic-banner {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-row .topic-banner .topic-label {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--accent-blue);
  color: #fff;
  border-radius: 4px;
}

/* 详情页今日主题卡 */
.detail-topic-card {
  margin: 0 16px 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #E5F1FF 0%, #DBEAFE 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.detail-topic-card .label {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--accent-blue);
  color: #fff;
  border-radius: 999px;
  flex: 0 0 auto;
}
.detail-topic-card .topic-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-blue);
}

.task-card-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  background: var(--bg-secondary);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
  min-height: 64px;
}
.task-card-v2:active { transform: scale(0.97); }

.task-card-v2.done {
  background: rgba(52,199,89,0.10);
}

.task-card-v2 .task-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-card-v2.done .task-icon {
  color: var(--success);
}

.task-card-v2 .task-info {
  flex: 1;
  min-width: 0;
}
.task-card-v2 .task-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  /* 防溢出 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.task-status-progress {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

.task-status-done {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 今日直播区块（浅色品牌风，与排班联动）--- */

.live-card {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
}

/* has-today：顶部一条蓝紫渐变细带 */
.live-card.has-today::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
}

/* 顶部一行：左 LIVE 徽章 / 右 时间 */
.live-card .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.live-card .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.live-card .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-pink);
  box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.15);
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 45, 85, 0.1); }
}
.live-card .team-pill {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.live-card .live-time {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 500;
}

/* 中间一行：倒计时 / 我的位置 */
.live-card .info-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}
.live-card .info-block {
  flex: 1;
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 10px 12px;
}
.live-card .info-block .label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
}
.live-card .info-block .value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.1;
}
.live-card .info-block.countdown-block .value.live-now {
  color: var(--accent-pink);
}
.live-card .info-block .value .crown-mark {
  color: #F59E0B;
}
/* 兼容旧 .countdown 直接渲染（如果某处还在用） */
.live-card .countdown {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.live-card .countdown-label {
  font-size: 11px;
  color: var(--text-secondary);
}

/* 同场队友行（升级版） */
.live-card .mates-row {
  border-top: 0.5px solid var(--border-light);
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-card .mates-row .mates-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}
.live-card .mates-row .mates-avatars {
  display: flex;
  align-items: center;
}
.live-card .mates-row .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  margin-left: -6px;
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
}
.live-card .mates-row .av:first-child { margin-left: 0; }
.live-card .mates-row .av img { width: 100%; height: 100%; object-fit: cover; }
.live-card .mates-row .av.lead-mark::after {
  content: '★';
  position: absolute;
  top: -3px; right: -3px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #78350F;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg-primary);
}
.live-card .mates-row .extra {
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}
.live-card .mates-row .empty-mates {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* 休息日态 */
.live-card.no-today {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.live-card.no-today::before { display: none; }

/* --- 推荐学习 --- */

.learn-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.15s;
}
.learn-card:active { transform: scale(0.98); }

.learn-card-yellow {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
  color: #1D1D1F;
}
.learn-card-blue {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
  color: #fff;
}
.learn-card-pink {
  background: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
  color: #fff;
}

.learn-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.7);
}

.learn-info { flex: 1; min-width: 0; }
.learn-tag {
  font-size: 11px;
  opacity: 0.72;
  margin-bottom: 4px;
}
.learn-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}
.learn-meta {
  font-size: 11px;
  opacity: 0.72;
}

.learn-action {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- GMV 业绩区块 --- */

.gmv-card {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--card-shadow);
}

.gmv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.gmv-cell {
  text-align: center;
  padding: 8px 4px;
}
.gmv-cell .gmv-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.gmv-cell .gmv-value {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.gmv-cell .gmv-sub {
  font-size: 10px;
  color: var(--text-secondary);
}
.gmv-cell .gmv-sub.up { color: var(--success); }
.gmv-cell .gmv-sub.down { color: var(--danger); }

/* --- 打卡 + 等级 --- */

.dual-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mini-stat-card {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--card-shadow);
}

.mini-stat-card .head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.mini-stat-card .main {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
}

.mini-stat-card .meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.mini-stat-card .progress {
  margin-top: 8px;
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
  overflow: hidden;
}
.mini-stat-card .progress-fill {
  height: 100%;
  background: var(--accent-blue);
  border-radius: 2px;
}

/* --- 占位页 --- */

.placeholder-page {
  min-height: 100vh;
  padding: 80px 32px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-secondary);
}

.placeholder-page .icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.placeholder-page h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.placeholder-page p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.placeholder-page .back-btn {
  padding: 12px 24px;
  background: var(--accent-blue);
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* --- 二级页面顶部栏（tasks.html / task-detail.html 用） --- */

.page-top-bar {
  background: var(--bg-primary);
  border-bottom: 0.5px solid var(--border-light);
}

.page-top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px 12px;
}

.page-top-actions-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-top-actions .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-top-actions .icon-btn.lang {
  width: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 600;
  height: 30px;
}

.page-title {
  padding: 0 4px;
  margin-bottom: 16px;
}

.page-title h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 16px;
}

.page-title-row h1 {
  font-size: 22px;
  font-weight: 700;
}

/* --- tasks.html 任务大行卡 --- */

.task-row {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.15s;
}
.task-row:active { transform: scale(0.99); }

.task-row.done { background: rgba(52,199,89,0.08); }

.task-row-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.task-row-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-row.done .task-row-icon {
  background: rgba(52,199,89,0.15);
  color: var(--success);
}

.task-row-info { flex: 1; min-width: 0; }
.task-row-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
}
.task-row-meta {
  font-size: 11px;
  color: var(--text-secondary);
}
.task-row-meta .dot-sep {
  margin: 0 4px;
}

.task-row-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.task-row-status.done {
  background: var(--success);
  color: #fff;
}

.task-row-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-row-progress-bar {
  flex: 1;
  height: 5px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}
.task-row-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #4ADE80);
  border-radius: 3px;
  transition: width 0.4s;
}
.task-row-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* --- task-detail.html 任务详情页 --- */

.detail-hero {
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: var(--card-shadow);
  margin: 0 16px 16px;
}

.detail-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.detail-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-hero.done .detail-hero-icon {
  background: rgba(52,199,89,0.15);
  color: var(--success);
}

.detail-hero-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.detail-hero-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.detail-hero.done .detail-hero-status-badge {
  background: var(--success);
  color: #fff;
}
.detail-hero.progress .detail-hero-status-badge {
  background: var(--warning);
  color: #fff;
}

.detail-progress {
  margin-bottom: 18px;
}
.detail-progress-num {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.detail-progress-num .target {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}
.detail-progress-num .unit {
  font-size: 14px;
  color: var(--text-secondary);
  margin-left: 4px;
}
.detail-progress-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}
.detail-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #4ADE80);
  border-radius: 4px;
  transition: width 0.4s;
}

.detail-hero-footer {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border-light);
  font-size: 13px;
}
.detail-hero-footer .item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.detail-hero-footer .item i {
  color: var(--text-tertiary);
}

.detail-section {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--card-shadow);
  margin: 0 16px 14px;
}

/* 工作状态区：实习开关 + 今日休息 */
.ws-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--border-color, #f0f0f0); }
.ws-row:first-of-type { border-top:none; }
.ws-info { min-width:0; flex:1; }
.ws-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.ws-desc { font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.4; }
.ws-toggle { flex-shrink:0; border:none; border-radius:9px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; background:#F3F4F6; color:#6B7280; }
.ws-toggle.on { background:#FEF3C7; color:#B45309; }
.ws-btn { flex-shrink:0; border:none; border-radius:9px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; background:#EEF2FF; color:#4F46E5; }
.ws-btn.rested { background:#FEE2E2; color:#B91C1C; }

.detail-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.detail-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.detail-tips {
  list-style: none;
  padding: 0;
}
.detail-tips li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.5;
}
.detail-tips li:last-child { margin-bottom: 0; }
.detail-tips li .check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.detail-action-area {
  padding: 0 16px 24px;
}

.detail-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--accent-blue);
  color: #fff;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,122,255,0.25);
}

.detail-not-found {
  padding: 80px 32px;
  text-align: center;
  color: var(--text-secondary);
}
.detail-not-found h2 {
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.detail-not-found .back-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 20px;
  background: var(--accent-blue);
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* --- 培训中心 分类卡片 --- */

.page-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.page-subtitle .dot-sep { margin: 0 4px; opacity: 0.5; }

.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cat-card {
  position: relative;
  padding: 16px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.15s;
  color: #fff;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.cat-card:active { transform: scale(0.97); }

.cat-card.empty { opacity: 0.55; }

.cat-card .cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.cat-card .cat-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.cat-card .cat-tagline {
  font-size: 11px;
  opacity: 0.85;
  line-height: 1.3;
  margin-bottom: 8px;
  min-height: 28px;
}
.cat-card .cat-progress {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  align-self: flex-start;
}
.cat-card .cat-progress.empty {
  background: rgba(255,255,255,0.15);
  opacity: 0.85;
}

/* 11 种分类色 */
.cat-card-blue   { background: linear-gradient(135deg, #60A5FA, #3B82F6); }
.cat-card-red    { background: linear-gradient(135deg, #F87171, #EF4444); }
.cat-card-amber  { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.cat-card-purple { background: linear-gradient(135deg, #A78BFA, #8B5CF6); }
.cat-card-pink   { background: linear-gradient(135deg, #F472B6, #EC4899); }
.cat-card-yellow { background: linear-gradient(135deg, #FDE047, #FACC15); color: #1D1D1F; }
.cat-card-yellow .cat-icon { background: rgba(0,0,0,0.12); }
.cat-card-yellow .cat-progress { background: rgba(0,0,0,0.12); }
.cat-card-orange { background: linear-gradient(135deg, #FB923C, #F97316); }
.cat-card-indigo { background: linear-gradient(135deg, #818CF8, #6366F1); }
.cat-card-cyan   { background: linear-gradient(135deg, #22D3EE, #06B6D4); }
.cat-card-teal   { background: linear-gradient(135deg, #2DD4BF, #14B8A6); }
.cat-card-green  { background: linear-gradient(135deg, #4ADE80, #22C55E); }

/* --- 培训：分类页 banner --- */

.cat-header-banner {
  padding: 18px 18px;
  border-radius: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.cat-header-banner.cat-card-yellow { color: #1D1D1F; }

.cat-banner-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-header-banner.cat-card-yellow .cat-banner-icon { background: rgba(0,0,0,0.12); }

.cat-banner-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.cat-banner-tagline {
  font-size: 12px;
  opacity: 0.88;
}

/* --- 培训：分类下课程列表 --- */

.lesson-row {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.15s;
}
.lesson-row:active { transform: scale(0.99); }

.lesson-row.done { background: rgba(52,199,89,0.08); }

.lesson-row .lesson-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
}
.lesson-row.done .lesson-icon {
  background: rgba(52,199,89,0.15);
  color: var(--success);
}

.lesson-row .lesson-info { flex: 1; min-width: 0; }
.lesson-row .lesson-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
.lesson-row .lesson-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.lesson-row .lesson-status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.lesson-row.done .lesson-status {
  background: var(--success);
  color: #fff;
}

/* --- 培训：单课程详情 --- */

.lesson-hero {
  margin: 0 16px 16px;
  padding: 22px 20px;
  background: var(--bg-primary);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
}
.lesson-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.lesson-hero-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}
.lesson-hero-intro {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}
.lesson-hero-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.lesson-hero-meta .item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lesson-related {
  margin: 0 16px 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: #92400E;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lesson-related i { flex: 0 0 auto; }

.lesson-body {
  margin: 0 16px 100px;
  padding: 20px;
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}
.lesson-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 14px;
  white-space: pre-wrap;
}
.lesson-body p:last-child { margin-bottom: 0; }
.lesson-body-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 12px auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.lesson-fab {
  position: fixed;
  bottom: 100px; /* 留 tab bar 空间 */
  left: 16px;
  right: 16px;
  max-width: 361px; /* 393 - 32 padding */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: var(--accent-blue);
  color: #fff;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,122,255,0.3);
  z-index: 50;
}
.lesson-fab.done {
  background: var(--success);
  box-shadow: 0 6px 16px rgba(52,199,89,0.3);
  pointer-events: none;
}
.lesson-fab:active { transform: scale(0.98); }

/* ============================================================
   管理端样式（admin/*.html 用）
   ============================================================ */

/* --- 管理端 入口/角色选择 --- */

.admin-entry-page {
  min-height: 100vh;
  padding: 60px 24px 40px;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.admin-entry-header {
  text-align: center;
  margin-bottom: 36px;
}
.admin-entry-brand {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-primary);
}
.admin-entry-brand small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.admin-entry-prompt {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 20px;
}

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.role-card {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform 0.15s;
  min-height: 130px;
  border: 1.5px solid transparent;
}
.role-card:active { transform: scale(0.97); }
.role-card.selected { border-color: var(--accent-blue); }

.role-card .role-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.role-card.boss     .role-icon { background: #FEF3C7; color: #B45309; }
.role-card.operator .role-icon { background: #DBEAFE; color: #1E40AF; }
.role-card.hr       .role-icon { background: #FCE7F3; color: #BE185D; }
.role-card.dance    .role-icon { background: #E0F2FE; color: #0369A1; }

.role-card .role-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.role-card .role-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.admin-entry-footer {
  text-align: center;
  margin-top: 28px;
}
.admin-entry-footer a {
  font-size: 13px;
  color: var(--text-secondary);
}

/* --- 管理端 登录 --- */

.admin-login-page {
  min-height: 100vh;
  padding: 60px 32px 40px;
  background: var(--bg-primary);
}

.admin-login-role-card {
  background: var(--bg-secondary);
  padding: 14px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.admin-login-role-card .badge {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-blue);
  color: #fff;
}
.admin-login-role-card .info { flex: 1; }
.admin-login-role-card .role-line {
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-login-role-card .role-name {
  font-size: 15px;
  font-weight: 600;
}
.admin-login-role-card .change-btn {
  font-size: 12px;
  color: var(--accent-blue);
  padding: 6px 10px;
  font-weight: 600;
}

/* --- 管理端 顶部栏（白底） --- */

.admin-top-bar {
  background: var(--bg-primary);
  /* border-bottom / margin-bottom 迁移到 .admin-top-row，避免 sub-page（只有 status-bar 没有 top-row）出现孤立灰条 */
}

.admin-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px 14px;
  border-bottom: 0.5px solid var(--border-light);
  margin-bottom: 16px;
}

.admin-greet-wrap { display: flex; align-items: center; gap: 10px; }

.admin-greet {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-role-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.admin-role-super_admin   { background: #FEF3C7; color: #B45309; }
.admin-role-operator      { background: #DBEAFE; color: #1E40AF; }
.admin-role-hr            { background: #FCE7F3; color: #BE185D; }
.admin-role-dance_teacher { background: #E0F2FE; color: #0369A1; }

.admin-top-row .actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-top-row .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-top-row .icon-btn.lang {
  width: auto;
  padding: 6px 12px;
  background: var(--bg-secondary);
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 600;
  height: 30px;
  border-radius: 999px;
}

/* --- 管理端 dashboard --- */

.admin-page {
  min-height: 100vh;
  padding-bottom: 100px;
  background: var(--bg-secondary);
}

.dash-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.dash-stat-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 14px 14px;
  box-shadow: var(--card-shadow);
}

.dash-stat-card.featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #1D1D1F, #2C2C2E);
  color: #fff;
}

.dash-stat-card .label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.dash-stat-card.featured .label { color: rgba(255,255,255,0.65); }

.dash-stat-card .value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.dash-stat-card.featured .value { font-size: 28px; }

.dash-stat-card .sub {
  font-size: 11px;
  color: var(--text-secondary);
}
.dash-stat-card.featured .sub { color: rgba(255,255,255,0.6); }

.dash-stat-card .sub.up   { color: var(--success); }
.dash-stat-card .sub.down { color: var(--danger); }
.dash-stat-card.featured .sub.up   { color: #4ADE80; }
.dash-stat-card.featured .sub.down { color: #F87171; }

/* 任务完成率横条 */
.dash-task-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--card-shadow);
  margin-bottom: 16px;
}
.dash-task-card .title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.dash-task-card .title-row h3 {
  font-size: 14px;
  font-weight: 600;
}

.dash-task-bar {
  height: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  margin-bottom: 10px;
}
.dash-task-bar .seg-done {
  background: var(--success);
}
.dash-task-bar .seg-progress {
  background: var(--warning);
}
.dash-task-bar .seg-todo {
  background: var(--text-tertiary);
}

.dash-task-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.dash-task-legend .item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dash-task-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dash-task-legend .dot.done     { background: var(--success); }
.dash-task-legend .dot.progress { background: var(--warning); }
.dash-task-legend .dot.todo     { background: var(--text-tertiary); }

/* 待处理 + 快捷操作 */
.dash-pending-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.dash-pending-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.dash-pending-card:active { transform: scale(0.97); }
.dash-pending-card .icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
}
.dash-pending-card.reviews   .icon-wrap { background: #E0F2FE; color: #0369A1; }
.dash-pending-card.leaves    .icon-wrap { background: #FEF3C7; color: #B45309; }
.dash-pending-card.violations .icon-wrap { background: #FEE2E2; color: #B91C1C; }
.dash-pending-card.debriefs  .icon-wrap { background: #F3E8FF; color: #7C3AED; }

.dash-pending-card .num {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-pending-card .label {
  font-size: 11px;
  color: var(--text-secondary);
}

.dash-quick-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--card-shadow);
}
.dash-quick-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.dash-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}
.dash-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s;
}
.dash-quick-btn:active { background: var(--bg-secondary); }
.dash-quick-btn .icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   管理端 · 主播管理（列表 + 详情）
   ============================================================ */

/* 顶部小统计带 */
.anchors-summary {
  padding: 10px 16px 4px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 搜索栏 */
.anchors-search {
  padding: 8px 16px 0;
}
.anchors-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-primary);
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: var(--card-shadow);
}
.anchors-search-box i { color: var(--text-tertiary); flex-shrink: 0; }
.anchors-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
}
.anchors-search-box input::placeholder { color: var(--text-tertiary); }

/* 筛选 chips */
.anchors-filter-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.anchors-filter-row::-webkit-scrollbar { display: none; }
.anchors-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--bg-primary);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.anchors-chip.active {
  background: var(--accent-blue);
  color: #fff;
  font-weight: 600;
}
.anchors-chip:active { transform: scale(0.96); }

/* 排序行 */
.anchors-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  font-size: 13px;
}
.anchors-sort-row .count {
  color: var(--text-secondary);
  font-weight: 500;
}
.anchors-sort-select {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-blue);
  cursor: pointer;
  box-shadow: var(--card-shadow);
}
.anchors-sort-select select {
  border: none;
  outline: none;
  background: transparent;
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 4px;
}

/* 主播卡列表 */
.anchor-card-list {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.anchor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.15s;
}
.anchor-card:active { transform: scale(0.98); }
.anchor-card.is-leave { opacity: 0.62; }

.anchor-card-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.anchor-card-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.anchor-card-avatar .online-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  background: var(--text-tertiary);
}
.anchor-card-avatar .online-dot.on { background: var(--success); }

.anchor-card-main { flex: 1; min-width: 0; }
.anchor-card-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.anchor-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.anchor-card-stage {
  font-size: 13px;
  color: var(--text-secondary);
}
.anchor-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}
.anchor-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.2px;
}
.anchor-tag.lv     { background: var(--accent-blue-light); color: var(--accent-blue); }
.anchor-tag.new    { background: #FEF3C7; color: #B45309; }
.anchor-tag.leave  { background: #FEE2E2; color: #B91C1C; }

.anchor-card-row2 {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.anchor-card-row2 .dot {
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.anchor-card-row3 {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.anchor-card-row3 .label {
  font-weight: 400;
  color: var(--text-secondary);
}
.anchor-card-chev {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.anchors-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ============================================================
   管理端 · 主播详情/编辑
   ============================================================ */

.detail-back-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-primary);
  border-bottom: 0.5px solid var(--border-light);
}
.detail-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: var(--accent-blue);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
}
.detail-back-btn:active { opacity: 0.6; }
.detail-back-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.detail-edit-btn {
  font-size: 14px;
  color: var(--accent-blue);
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}
.detail-edit-btn.is-save {
  background: var(--accent-blue);
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
}
.detail-edit-btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.detail-edit-cancel {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 4px 6px;
  cursor: pointer;
}

/* 详情顶部 hero */
.detail-hero {
  background: var(--bg-primary);
  padding: 20px 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 0.5px solid var(--border-light);
}
.detail-hero-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.detail-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero-info { flex: 1; min-width: 0; }
.detail-hero-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.detail-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.detail-hero-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* 信息 section */
.detail-section {
  background: var(--bg-primary);
  margin-top: 10px;
  padding: 14px 16px;
}
.detail-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.detail-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border-light);
  font-size: 14px;
}
.detail-field-row:last-child { border-bottom: none; }
.detail-field-row .label {
  color: var(--text-secondary);
}
.detail-field-row .value {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  word-break: break-all;
}

/* 备注框 */
.detail-note-box {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.detail-note-empty {
  color: var(--text-tertiary);
  font-style: italic;
}

/* 业绩 grid */
.detail-perf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.detail-perf-cell {
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.detail-perf-cell .label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.detail-perf-cell .value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* 编辑模式：输入控件 */
.detail-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border-light);
  gap: 12px;
  font-size: 14px;
}
.detail-edit-row:last-child { border-bottom: none; }
.detail-edit-row .label {
  color: var(--text-secondary);
  flex-shrink: 0;
}
.detail-edit-row .control {
  flex: 1;
  text-align: right;
}
.detail-edit-row input[type="text"],
.detail-edit-row select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  width: 100%;
  text-align: right;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
}
.detail-edit-row input[type="text"]:focus,
.detail-edit-row select:focus { border-color: var(--accent-blue); }
.detail-edit-textarea-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}
.detail-edit-textarea-row .label {
  color: var(--text-secondary);
  font-size: 14px;
}
.detail-edit-textarea-row textarea {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  width: 100%;
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
}
.detail-edit-textarea-row textarea:focus { border-color: var(--accent-blue); }

/* 底部留白 */
.detail-bottom-pad { height: 24px; }

/* ============================================================
   明星主播视觉分层
   ============================================================ */

/* 列表卡：星标主播金色细描边 + 微微金色背景 */
.anchor-card.is-star {
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 50%);
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.12), 0 0 0 1px rgba(234, 179, 8, 0.25);
}

/* 星标 chip */
.anchor-tag.star {
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #78350F;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.anchor-tag.star::before { content: '★'; font-size: 11px; }

/* 详情页 hero 星标主播：avatar 金色双环 */
.detail-hero.is-star .detail-hero-avatar {
  box-shadow: 0 0 0 2px #FFFBEB, 0 0 0 4px #F59E0B;
}

/* ============================================================
   MBTI 性格画像卡
   ============================================================ */

.mbti-card {
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
  border-radius: 14px;
  margin: 10px 16px 0;
  padding: 14px 16px 16px;
  position: relative;
  overflow: hidden;
}
.mbti-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.08);
}
.mbti-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.mbti-card-head .icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mbti-card-head .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.mbti-card-head .section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: auto;
}

.mbti-block {
  position: relative;
  z-index: 1;
  margin-top: 10px;
}
.mbti-block:first-of-type { margin-top: 0; }
.mbti-block-label {
  font-size: 11px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mbti-block-label::before {
  content: '';
  width: 3px;
  height: 12px;
  background: linear-gradient(180deg, #6366F1, #8B5CF6);
  border-radius: 2px;
}
.mbti-block-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
}

/* ============================================================
   主播端 · MBTI 测试 / 结果
   ============================================================ */

/* 测试入口卡（用于 profile） */
.mbti-entry-card {
  margin: 12px 16px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
}
.mbti-entry-card::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.mbti-entry-card .icon-bg {
  position: absolute;
  right: 14px;
  bottom: 14px;
  opacity: 0.5;
}
.mbti-entry-card .head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.mbti-entry-card .head .title {
  font-size: 17px;
  font-weight: 700;
}
.mbti-entry-card .desc {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.mbti-entry-card .has-type {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
}
.mbti-entry-card .has-type .type-big {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
}
.mbti-entry-card .has-type .type-name {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}
.mbti-entry-card .cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
}

/* 测试介绍页 */
.mbti-intro-wrap {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}
.mbti-intro-icon {
  width: 72px;
  height: 72px;
  margin: 20px auto 8px;
  border-radius: 22px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}
.mbti-intro-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
}
.mbti-intro-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  padding: 0 10px;
}
.mbti-intro-start-btn {
  margin: 16px 0 0;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}
.mbti-intro-start-btn:active { transform: scale(0.98); }

/* 测试做题页 */
.mbti-test-header {
  padding: 14px 16px 6px;
}
.mbti-test-progress-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 8px;
}
.mbti-test-progress-bar {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.mbti-test-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.mbti-test-prompt {
  padding: 22px 20px 14px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.mbti-test-options {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mbti-option {
  background: var(--bg-primary);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 16px 16px 16px 50px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  box-shadow: var(--card-shadow);
  transition: all 0.15s;
  text-align: left;
}
.mbti-option:active { transform: scale(0.99); }
.mbti-option::before {
  content: attr(data-letter);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.mbti-option.selected {
  border-color: #8B5CF6;
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
  color: var(--text-primary);
}
.mbti-option.selected::before {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
}

.mbti-test-nav {
  padding: 18px 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.mbti-test-nav-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
}
.mbti-test-nav-btn.prev {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--card-shadow);
}
.mbti-test-nav-btn.next {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
}
.mbti-test-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mbti-test-nav-btn:not(:disabled):active { transform: scale(0.98); }

/* 结果页 */
.mbti-result-hero {
  padding: 28px 20px 24px;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mbti-result-hero::before,
.mbti-result-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.mbti-result-hero::before { width: 140px; height: 140px; top: -50px; left: -40px; }
.mbti-result-hero::after  { width: 100px; height: 100px; bottom: -30px; right: -20px; }
.mbti-result-hero .label {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.mbti-result-hero .type-big {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 4px;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.mbti-result-hero .type-name {
  font-size: 18px;
  font-weight: 600;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* 4 维度比例条 */
.mbti-dims-card {
  background: var(--bg-primary);
  border-radius: 14px;
  margin: 14px 16px 0;
  padding: 16px;
  box-shadow: var(--card-shadow);
}
.mbti-dims-card .section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.mbti-dim-row {
  margin-bottom: 14px;
}
.mbti-dim-row:last-child { margin-bottom: 0; }
.mbti-dim-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.mbti-dim-row-head .left-letter { color: #6366F1; font-weight: 700; }
.mbti-dim-row-head .right-letter { color: #EC4899; font-weight: 700; }
.mbti-dim-row-head .left-letter.weak,
.mbti-dim-row-head .right-letter.weak { opacity: 0.4; font-weight: 500; color: var(--text-secondary); }
.mbti-dim-bar {
  height: 10px;
  background: rgba(236, 72, 153, 0.15);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.mbti-dim-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* 结果保存条 */
.mbti-result-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg-primary);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  border-top: 0.5px solid var(--border-light);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.03);
}
.mbti-result-btn {
  flex: 1;
  padding: 13px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
}
.mbti-result-btn.retake {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.mbti-result-btn.save {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  flex: 2;
}
.mbti-result-btn:active { transform: scale(0.98); }

/* profile 通用功能入口（嵌在 .top-area 段位主题内，背景透明） */
.profile-header {
  background: transparent;
  padding: 14px 20px 32px;
  color: #fff;
  position: relative;
  z-index: 2;
}
.profile-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-header-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  overflow: hidden;
}
.profile-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-header-name {
  font-size: 20px;
  font-weight: 700;
}
.profile-header-sub {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 2px;
}

/* profile 菜单卡 */
.profile-menu-card {
  background: var(--bg-primary);
  border-radius: 14px;
  margin: 12px 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.profile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--border-light);
  cursor: pointer;
  transition: background 0.15s;
}
.profile-menu-item:last-child { border-bottom: none; }
.profile-menu-item:active { background: var(--bg-secondary); }
.profile-menu-item .left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-primary);
}
.profile-menu-item .left i { color: var(--text-secondary); }

/* ============================================================
   管理端 · 任务管理
   ============================================================ */

/* 任务卡（列表） */
.admin-task-list {
  padding: 0 16px 90px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-task-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.15s;
}
.admin-task-card:active { transform: scale(0.99); }
.admin-task-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-task-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-task-info { flex: 1; min-width: 0; }
.admin-task-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.admin-task-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  gap: 6px;
  align-items: center;
}
.admin-task-meta .dot {
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.admin-task-rate-pct {
  font-size: 16px;
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 三色完成柱状条（已完成 / 进行中 / 未开始） */
.admin-task-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  margin-bottom: 8px;
}
.admin-task-bar .seg-done     { background: var(--success); }
.admin-task-bar .seg-progress { background: var(--warning); }
.admin-task-bar .seg-todo     { background: rgba(0,0,0,0.08); }

.admin-task-legend {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.admin-task-legend .item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-task-legend .legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.admin-task-legend .legend-dot.done     { background: var(--success); }
.admin-task-legend .legend-dot.progress { background: var(--warning); }
.admin-task-legend .legend-dot.todo     { background: rgba(0,0,0,0.2); }

/* 适用范围 chip */
.admin-task-scope-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: #DBEAFE;
  color: #1E40AF;
  margin-left: auto;
}
.admin-task-scope-chip.active { background: #DCFCE7; color: #15803D; }
.admin-task-scope-chip.new    { background: #FEF3C7; color: #B45309; }

/* FAB 浮动发布按钮 */
.admin-fab {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom));
  right: 16px;
  z-index: 50;
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 24px rgba(0, 122, 255, 0.4);
  /* 居中显示（让它跟手机原型对齐） */
  left: 50%;
  transform: translateX(calc(196px - 100% - 16px));
}
.admin-fab:active { transform: translateX(calc(196px - 100% - 16px)) scale(0.96); }

/* 发布底弹窗（bottom sheet） */
.bottom-sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.bottom-sheet-mask.show { opacity: 1; pointer-events: auto; }
.bottom-sheet {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 393px;
  background: var(--bg-primary);
  border-radius: 20px 20px 0 0;
  z-index: 101;
  transition: transform 0.25s ease;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  max-height: 86vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.bottom-sheet.show { transform: translateX(-50%) translateY(0); }
.bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--text-tertiary);
  border-radius: 4px;
  margin: 0 auto 14px;
  opacity: 0.4;
}
.bottom-sheet-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 18px;
  color: var(--text-primary);
}

/* 表单字段 */
.form-field {
  margin-bottom: 14px;
}
.form-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field select {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.form-field input:focus,
.form-field select:focus {
  background: var(--bg-primary);
  border-color: var(--accent-blue);
}
.form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 任务类型选择 grid */
.task-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.task-type-btn {
  background: var(--bg-secondary);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-primary);
  font-family: inherit;
}
.task-type-btn i { color: var(--text-secondary); }
.task-type-btn.selected {
  background: var(--accent-blue-light);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  font-weight: 600;
}
.task-type-btn.selected i { color: var(--accent-blue); }

/* 提交按钮组 */
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.form-btn {
  flex: 1;
  padding: 13px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
}
.form-btn.cancel {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.form-btn.submit {
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: #fff;
  flex: 2;
}
.form-btn:active { transform: scale(0.98); }

/* 任务详情页：完成柱状大图 */
.task-detail-rate-card {
  background: var(--bg-primary);
  border-radius: 14px;
  margin: 10px 16px 0;
  padding: 16px;
  box-shadow: var(--card-shadow);
}
.task-detail-rate-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.task-detail-rate-head .label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}
.task-detail-rate-head .pct {
  font-size: 26px;
  font-weight: 800;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
.task-detail-rate-card .admin-task-bar {
  height: 12px;
  margin-bottom: 10px;
}
.task-detail-rate-card .admin-task-legend {
  font-size: 12.5px;
}

/* 主播进度列表行 */
.anchor-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border-light);
}
.anchor-progress-row:last-child { border-bottom: none; }
.anchor-progress-row .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.anchor-progress-row .avatar img { width:100%; height:100%; object-fit:cover; }
.anchor-progress-row .name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.anchor-progress-row .progress {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.progress-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 6px;
  white-space: nowrap;
}
.progress-badge.done     { background: #DCFCE7; color: #15803D; }
.progress-badge.progress { background: #FEF3C7; color: #B45309; }
.progress-badge.todo     { background: #F3F4F6; color: #6B7280; }
.progress-badge.locked   { background: #FEE2E2; color: #B91C1C; }

/* ============================================================
   主播端 · 任务详情·学习内容区
   ============================================================ */

.task-content-section {
  margin: 12px 16px 0;
}
.task-content-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 8px;
}
.task-content-section-head .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.task-content-section-head .count {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 条目卡（5 句话 / 3 项表情） */
.task-item-card {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--card-shadow);
  position: relative;
  cursor: pointer;
  transition: all 0.15s;
}
.task-item-card:active { transform: scale(0.99); }
.task-item-card.done {
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 70%);
}
.task-item-card.done .item-zh { color: var(--success); }
.task-item-card .item-num {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-item-card.done .item-num {
  background: var(--success);
  color: #fff;
}
.task-item-card .item-zh {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  padding-right: 32px;
  line-height: 1.45;
}
.task-item-card .item-vi {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 6px;
}
.task-item-card .item-pinyin {
  font-size: 11px;
  color: #6366F1;
  font-style: italic;
  margin-bottom: 6px;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 5px;
  display: inline-block;
}
.task-item-card .item-note {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 10px;
  background: #FFFBEB;
  border-radius: 8px;
  border-left: 3px solid #F59E0B;
  line-height: 1.5;
  margin-top: 4px;
}
.task-item-card .item-note::before {
  content: '💡 ';
  margin-right: 2px;
}

/* 关联课程卡 */
.task-lesson-card {
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.task-lesson-card:active { transform: scale(0.99); }
.task-lesson-card .icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.task-lesson-card .info { flex: 1; min-width: 0; }
.task-lesson-card .lbl {
  font-size: 11px;
  color: #6366F1;
  font-weight: 600;
  margin-bottom: 2px;
}
.task-lesson-card .ttl {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.task-lesson-card .meta {
  font-size: 11.5px;
  color: var(--text-secondary);
}
.task-lesson-card .chev {
  color: var(--accent-blue);
  flex-shrink: 0;
}

/* 上传型任务：示范视频 + 上传按钮 */
.task-demo-card {
  background: var(--bg-primary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  margin-bottom: 8px;
}
.task-demo-thumb {
  position: relative;
  background: #1D1D1F;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.task-demo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.task-demo-thumb .play-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: #1D1D1F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-demo-thumb .title {
  position: absolute;
  bottom: 8px;
  left: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.task-demo-card .req {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.task-demo-card .req strong {
  display: block;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.task-upload-btn-big {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 8px;
}
.task-upload-btn-big:active { transform: scale(0.98); }

/* KPI 大数字卡 */
.task-kpi-card {
  background: linear-gradient(135deg, #FCE7F3 0%, #FFFFFF 100%);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  margin-bottom: 8px;
}
.task-kpi-card .label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
}
.task-kpi-card .big {
  font-size: 38px;
  font-weight: 800;
  color: var(--accent-pink);
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.task-kpi-card .big .total {
  font-size: 18px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.task-kpi-card .sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.task-kpi-card .kpi-bar {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.task-kpi-card .kpi-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-pink), #FB7185);
  border-radius: 999px;
}

/* KPI tips 列表 */
.task-kpi-tips {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--card-shadow);
}
.task-kpi-tips .head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.task-kpi-tips ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
}

/* 任务卡 · 学习内容一行预览 */
.task-row-preview {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0;
  padding: 6px 10px;
  background: #EEF2FF;
  border-radius: 8px;
  font-size: 12px;
  color: #4338CA;
  font-weight: 500;
}
.task-row-preview i { color: #6366F1; flex-shrink: 0; }
.task-row-preview .text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.task-row.done .task-row-preview { opacity: 0.6; }

/* ============================================================
   管理端 · 培训管理
   ============================================================ */

/* 切换 tab（所有课程 / 按分类） */
.training-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 3px;
  margin: 8px 16px 12px;
}
.training-tabs .tab {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.training-tabs .tab.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* 分类卡列表 */
.training-cat-list {
  padding: 0 16px 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.training-cat-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  position: relative;
}
.training-cat-card:active { transform: scale(0.98); }
.training-cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.training-cat-icon.blue    { background: #DBEAFE; color: #1E40AF; }
.training-cat-icon.red     { background: #FEE2E2; color: #B91C1C; }
.training-cat-icon.amber   { background: #FEF3C7; color: #B45309; }
.training-cat-icon.purple  { background: #F3E8FF; color: #6B21A8; }
.training-cat-icon.pink    { background: #FCE7F3; color: #BE185D; }
.training-cat-icon.yellow  { background: #FEF9C3; color: #A16207; }
.training-cat-icon.orange  { background: #FFEDD5; color: #9A3412; }
.training-cat-icon.indigo  { background: #E0E7FF; color: #4338CA; }
.training-cat-icon.cyan    { background: #CFFAFE; color: #155E75; }
.training-cat-icon.teal    { background: #CCFBF1; color: #115E59; }
.training-cat-icon.green   { background: #DCFCE7; color: #166534; }
.training-cat-card .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.training-cat-card .tagline {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.35;
}
.training-cat-card .count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* 课程卡列表（admin 视角） */
.training-lesson-list {
  padding: 0 16px 90px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-lesson-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
}
.admin-lesson-card:active { transform: scale(0.99); }
.admin-lesson-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.admin-lesson-cat-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.admin-lesson-cat-pill.blue   { background: #DBEAFE; color: #1E40AF; }
.admin-lesson-cat-pill.red    { background: #FEE2E2; color: #B91C1C; }
.admin-lesson-cat-pill.amber  { background: #FEF3C7; color: #B45309; }
.admin-lesson-cat-pill.purple { background: #F3E8FF; color: #6B21A8; }
.admin-lesson-cat-pill.pink   { background: #FCE7F3; color: #BE185D; }
.admin-lesson-cat-pill.yellow { background: #FEF9C3; color: #A16207; }
.admin-lesson-cat-pill.orange { background: #FFEDD5; color: #9A3412; }
.admin-lesson-cat-pill.indigo { background: #E0E7FF; color: #4338CA; }
.admin-lesson-cat-pill.cyan   { background: #CFFAFE; color: #155E75; }
.admin-lesson-cat-pill.teal   { background: #CCFBF1; color: #115E59; }
.admin-lesson-cat-pill.green  { background: #DCFCE7; color: #166534; }
.admin-lesson-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.admin-lesson-rate {
  font-size: 14px;
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.admin-lesson-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.admin-lesson-meta .dot {
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

/* 详情页：正文预览框 */
.training-body-preview {
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  border: 0.5px solid var(--border-light);
}

/* ============================================================
   管理端 · 排班管理
   ============================================================ */

.schedule-hero {
  padding: 18px 20px 16px;
  background: linear-gradient(135deg, #1E40AF 0%, #5B21B6 100%);
  color: #fff;
}
.schedule-hero .when {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 6px;
}
.schedule-hero .title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.schedule-hero .sub {
  font-size: 12.5px;
  opacity: 0.85;
}

.schedule-notes {
  background: #FFFBEB;
  margin: 12px 16px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 3px solid #F59E0B;
  font-size: 12.5px;
  line-height: 1.6;
  color: #92400E;
}
.schedule-notes .head {
  font-weight: 700;
  margin-bottom: 4px;
  color: #B45309;
}

/* 排班区：3 行（C / 副 C / 普通） */
.schedule-block {
  margin: 12px 16px 0;
}
.schedule-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding: 0 2px;
}
.schedule-block-title .pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.schedule-block-title .pill.lead   { background: #FEF3C7; color: #B45309; }
.schedule-block-title .pill.sub    { background: #DBEAFE; color: #1E40AF; }
.schedule-block-title .pill.normal { background: #E0E7FF; color: #4338CA; }
.schedule-block-title .count {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
}

/* 排班位 grid（C 1 / 副 C 2 / 普通 2） */
.schedule-slots {
  display: grid;
  gap: 10px;
}
.schedule-slots.row1 { grid-template-columns: 1fr; }
.schedule-slots.row2 { grid-template-columns: 1fr 1fr; }

.schedule-slot {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 64px;
  transition: transform 0.15s;
}
.schedule-slot:active { transform: scale(0.99); }
.schedule-slot.empty {
  background: var(--bg-secondary);
  border: 1.5px dashed var(--text-tertiary);
  box-shadow: none;
  color: var(--text-secondary);
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
}
.schedule-slot.empty:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.schedule-slot .slot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.schedule-slot .slot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.schedule-slot .slot-avatar .crown {
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #78350F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 2px solid #fff;
}
.schedule-slot .slot-main { flex: 1; min-width: 0; }
.schedule-slot .slot-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-slot .slot-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* 主播选择底弹的人列表 */
.anchor-picker-list {
  max-height: 50vh;
  overflow-y: auto;
}
.anchor-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 0.5px solid var(--border-light);
  cursor: pointer;
}
.anchor-picker-row:last-child { border-bottom: none; }
.anchor-picker-row.disabled { opacity: 0.45; cursor: not-allowed; }
.anchor-picker-row .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.anchor-picker-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.anchor-picker-row .info { flex: 1; min-width: 0; }
.anchor-picker-row .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.anchor-picker-row .meta {
  font-size: 11.5px;
  color: var(--text-secondary);
}
.anchor-picker-row .badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.anchor-picker-row .badge.suggest { background: #DCFCE7; color: #15803D; }
.anchor-picker-row .badge.busy    { background: #F3F4F6; color: #6B7280; }
.anchor-picker-row .badge.leave   { background: #FEE2E2; color: #B91C1C; }

/* 操作弹窗（修改 / 移除） */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.action-list .action-btn {
  background: var(--bg-secondary);
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
}
.action-list .action-btn:active { background: var(--bg-tertiary); }
.action-list .action-btn.danger { color: var(--danger); }
.action-list .action-btn.cancel-row {
  margin-top: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
}

/* 主播端 home：今日直播队友头像组 */
.home-teammates {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border-light);
}
.home-teammates .label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.home-teammates .avatars {
  display: flex;
  align-items: center;
}
.home-teammates .avatars .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
}
.home-teammates .avatars .av:first-child { margin-left: 0; }
.home-teammates .avatars .av img { width: 100%; height: 100%; object-fit: cover; }
.home-teammates .avatars .av.lead-mark::after {
  content: '★';
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #F59E0B;
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-teammates .extra {
  margin-left: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ============================================================
   通知中心（主播端 + 管理端共用部分）
   ============================================================ */

/* 顶栏 badge 数字（之前是个空 dot，现在改成数字） */
.icon-btn.bell { position: relative; }
.icon-btn.bell .badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
  box-sizing: border-box;
  line-height: 1;
}
.icon-btn.bell .badge.show {
  display: inline-flex;
}

/* 通知页 header */
.notif-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 6px;
  font-size: 13px;
}
.notif-summary-row .count {
  color: var(--text-secondary);
  font-weight: 500;
}
.notif-summary-row .action {
  font-size: 13px;
  color: var(--accent-blue);
  font-weight: 500;
  cursor: pointer;
}
.notif-summary-row .action:active { opacity: 0.6; }

/* 通知列表 */
.notif-list {
  padding: 0 16px 24px;
}
.notif-item {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s;
}
.notif-item:active { transform: scale(0.99); }
.notif-item.unread {
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 70%);
}
.notif-item.unread::after {
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-blue);
}
.notif-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-icon-box.task     { background: #DBEAFE; color: #1E40AF; }
.notif-icon-box.training { background: #E0E7FF; color: #4338CA; }
.notif-icon-box.schedule { background: #FEF3C7; color: #B45309; }
.notif-icon-box.announce { background: #FCE7F3; color: #BE185D; }
.notif-icon-box.system   { background: #F3F4F6; color: #6B7280; }

.notif-body { flex: 1; min-width: 0; padding-right: 14px; }
.notif-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.notif-type-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 5px;
  flex-shrink: 0;
}
.notif-type-tag.task     { background: #DBEAFE; color: #1E40AF; }
.notif-type-tag.training { background: #E0E7FF; color: #4338CA; }
.notif-type-tag.schedule { background: #FEF3C7; color: #B45309; }
.notif-type-tag.announce { background: #FCE7F3; color: #BE185D; }
.notif-type-tag.system   { background: #F3F4F6; color: #6B7280; }
.notif-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-body-text {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.notif-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.notif-meta .read-stat {
  margin-left: auto;
  font-weight: 500;
}

.notif-empty {
  padding: 60px 24px;
  text-align: center;
}
.notif-empty .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-empty .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.notif-empty .sub {
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ============================================================
   详情页右上角语言切换（全局注入，所有 detail-back-bar 都有）
   ============================================================ */
.detail-back-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.detail-lang-btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  min-height: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
}
.detail-lang-btn:active { background: var(--bg-tertiary); }
/* 隐藏 detail-back-bar 中的占位空 div（width:40px 之类的），让 right area 完美对齐 */
.detail-back-right > div:empty { display: none; }

/* ============================================================
   排班多场次切换条
   ============================================================ */
.session-switcher {
  padding: 12px 16px 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.session-switcher::-webkit-scrollbar { display: none; }

.session-chip {
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--card-shadow);
  transition: all 0.15s;
}
.session-chip:active { transform: scale(0.97); }
.session-chip.active {
  background: linear-gradient(135deg, #4338CA, #6D28D9);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.session-chip .label {
  white-space: nowrap;
}
.session-chip .count-mini {
  background: rgba(0,0,0,0.06);
  color: inherit;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.7;
}
.session-chip.active .count-mini {
  background: rgba(255,255,255,0.22);
  opacity: 1;
}

.session-add-chip {
  flex-shrink: 0;
  background: var(--bg-secondary);
  border: 1.5px dashed var(--text-tertiary);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.session-add-chip:active { transform: scale(0.97); }
.session-add-chip:hover { border-color: var(--accent-blue); }

/* 空场次状态 */
.session-empty {
  text-align: center;
  padding: 48px 24px;
}
.session-empty .icon {
  width: 60px; height: 60px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.session-empty .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.session-empty .sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.session-empty .add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #4338CA, #6D28D9);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* 场次删除按钮（hero 右上） */
.schedule-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.schedule-delete-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.schedule-delete-btn:active { opacity: 0.7; }

/* ============================================================
   新人入职 7 天进度卡
   ============================================================ */
.onb-card {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 60%, #EC4899 100%);
  color: #fff;
  border-radius: 16px;
  margin: 0 16px 14px;
  padding: 14px 14px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
}
.onb-card::before, .onb-card::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.onb-card::before { width: 120px; height: 120px; top: -40px; right: -30px; }
.onb-card::after  { width: 80px;  height: 80px;  bottom: -25px; left: -25px; }

.onb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.onb-head .title {
  font-size: 15px;
  font-weight: 700;
}
.onb-head .progress {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}
.onb-subtitle {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.onb-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
}
.onb-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* 横向滚动里程碑列表 */
.onb-milestones {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
}
.onb-milestones::-webkit-scrollbar { display: none; }

.onb-milestone {
  flex-shrink: 0;
  width: 138px;
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  padding: 10px;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  transition: transform 0.15s;
}
.onb-milestone:active { transform: scale(0.97); }
.onb-milestone.done {
  background: rgba(220,252,231,0.96);
}
.onb-milestone.current {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.onb-milestone.locked {
  background: rgba(255,255,255,0.7);
  opacity: 0.65;
}
.onb-milestone-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.onb-milestone .day-pill {
  background: rgba(0,0,0,0.06);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.onb-milestone.done .day-pill { background: var(--success); color: #fff; }
.onb-milestone .icon-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.onb-milestone .icon-box.green  { background: #DCFCE7; color: #15803D; }
.onb-milestone .icon-box.purple { background: #F3E8FF; color: #6B21A8; }
.onb-milestone .icon-box.amber  { background: #FEF3C7; color: #B45309; }
.onb-milestone .icon-box.yellow { background: #FEF9C3; color: #A16207; }
.onb-milestone .icon-box.red    { background: #FEE2E2; color: #B91C1C; }
.onb-milestone .icon-box.blue   { background: #DBEAFE; color: #1E40AF; }
.onb-milestone .icon-box.pink   { background: #FCE7F3; color: #BE185D; }

.onb-milestone .ttl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.onb-milestone .sub {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.onb-milestone .status-line {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.onb-milestone.done .status-line    { color: var(--success); }
.onb-milestone.current .status-line { color: var(--accent-blue); }
.onb-milestone.locked .status-line  { color: var(--text-tertiary); }
.onb-milestone .check-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  display: none;
}
.onb-milestone.done .check-corner { display: flex; }

/* 完成态 banner */
.onb-card.graduated {
  text-align: center;
  padding: 20px 14px;
}
.onb-card.graduated .big-text {
  font-size: 17px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* 登录页：演示账号双按钮 */
.login-demo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.login-demo-btn {
  padding: 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
}
.login-demo-btn:active { background: var(--bg-secondary); }
.login-demo-btn.newbie {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-color: #F59E0B;
  color: #92400E;
}

/* ============================================================
   排班 · 草稿模式 sticky bar + 修改标记
   ============================================================ */

.draft-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.18);
}
.draft-bar .icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.draft-bar .info {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.draft-bar .info .label {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 1px;
}
.draft-bar .info .tip {
  font-size: 10.5px;
  opacity: 0.9;
}
.draft-bar .btn {
  background: rgba(255,255,255,0.95);
  color: #B45309;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.draft-bar .btn.discard {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.draft-bar .btn:active { transform: scale(0.96); }

/* 修改过的 slot 卡：金色边框 + 角标 */
.schedule-slot.dirty {
  position: relative;
  box-shadow: 0 0 0 2px #F59E0B, var(--card-shadow);
}
.schedule-slot.dirty::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F59E0B;
  border: 2px solid var(--bg-primary);
}

/* ============================================================
   Dashboard · 聚合卡（今天直播 / TOP GMV / 最新动态）
   ============================================================ */

.dash-section-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--card-shadow);1
  margin: 0 16px 14px;
}
.dash-section-head {
  display: flex;
  align-items: baseline;
  margin-bottom: 12px;
}
.dash-section-head .title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.dash-section-head .badge {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-blue);
  background: var(--accent-blue-light);
  padding: 2px 8px;
  border-radius: 999px;
}
.dash-section-head .see-all {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
}
.dash-section-head .see-all:active { opacity: 0.6; }

/* —— 今天直播聚合 —— */
.dash-live-session {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border-light);
  cursor: pointer;
}
.dash-live-session:last-child { border-bottom: none; }
.dash-live-session:active { opacity: 0.6; }
.dash-live-session .time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
  border-radius: 8px;
  flex-shrink: 0;
  min-width: 52px;
}
.dash-live-session .time-block .time {
  font-size: 14px;
  font-weight: 700;
  color: #4338CA;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dash-live-session .time-block .team {
  font-size: 9.5px;
  font-weight: 600;
  color: #6366F1;
  margin-top: 1px;
  letter-spacing: 0.5px;
}
.dash-live-session .session-main {
  flex: 1;
  min-width: 0;
}
.dash-live-session .session-row1 {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.dash-live-session .session-row1 .filled {
  color: var(--success);
  font-weight: 700;
}
.dash-live-session .session-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-live-session .session-row2 .mates {
  display: flex;
  align-items: center;
}
.dash-live-session .session-row2 .av {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  margin-left: -5px;
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
}
.dash-live-session .session-row2 .av:first-child { margin-left: 0; }
.dash-live-session .session-row2 .av img { width: 100%; height: 100%; object-fit: cover; }
.dash-live-session .session-row2 .av.lead::after {
  content: '★';
  position: absolute;
  top: -3px; right: -3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #78350F;
  font-size: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg-primary);
}
.dash-live-session .session-row2 .extra {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 4px;
  font-weight: 600;
}
.dash-live-session .session-row2 .no-lead {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-style: italic;
}
.dash-live-session .chev {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.dash-empty-row {
  text-align: center;
  padding: 16px 0;
  color: var(--text-tertiary);
  font-size: 12.5px;
}
.dash-empty-row .cta {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent-blue);
  font-weight: 600;
  cursor: pointer;
}

/* —— TOP GMV 榜 —— */
.dash-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border-light);
  cursor: pointer;
}
.dash-top-row:last-child { border-bottom: none; }
.dash-top-row:active { opacity: 0.6; }
.dash-top-row .rank {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.dash-top-row.r1 .rank { background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #78350F; }
.dash-top-row.r2 .rank { background: linear-gradient(135deg, #E5E7EB, #9CA3AF); color: #1F2937; }
.dash-top-row.r3 .rank { background: linear-gradient(135deg, #FBA570, #B45309); color: #fff; }
.dash-top-row .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.dash-top-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-top-row .name-col {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-top-row .name-col .star {
  color: #F59E0B;
  font-size: 12px;
  margin-left: 2px;
}
.dash-top-row .lv {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-blue);
  background: var(--accent-blue-light);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
.dash-top-row .amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* —— 时间线 —— */
.dash-timeline-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}
.dash-timeline-item:active { opacity: 0.6; }
.dash-timeline-item .icon-box {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-timeline-item .icon-box.task     { background: #DBEAFE; color: #1E40AF; }
.dash-timeline-item .icon-box.training { background: #E0E7FF; color: #4338CA; }
.dash-timeline-item .icon-box.schedule { background: #FEF3C7; color: #B45309; }
.dash-timeline-item .icon-box.announce { background: #FCE7F3; color: #BE185D; }
.dash-timeline-item .body {
  flex: 1;
  min-width: 0;
}
.dash-timeline-item .tl-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.dash-timeline-item .tl-subject {
  font-size: 12px;
  color: #7C3AED;
  margin-top: 2px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.dash-timeline-item .tl-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-timeline-item .tl-meta .reach {
  color: var(--text-secondary);
  font-weight: 500;
}

/* 新入职主播卡可点击交互 */
.dash-stat-card.clickable { cursor: pointer; transition: transform 0.15s; }
.dash-stat-card.clickable:active { transform: scale(0.98); }

/* ============================================================
   主播端 · 排行榜
   ============================================================ */

.ranking-hero {
  background: transparent;
  color: #fff;
  padding: 14px 16px 60px;
  position: relative;
  z-index: 2;
}
.ranking-hero::before, .ranking-hero::after { display: none; }
.ranking-hero h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  position: relative;
  z-index: 1;
}
.ranking-hero .sub {
  font-size: 12.5px;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

/* tab 切换 */
/* 排行榜口径标签:本月榜 / 总榜 */
.ranking-scope {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 8px 16px 0;
  font-size: 12px;
  font-weight: 600;
  color: #9aa0ab;
}
.ranking-scope.monthly { color: #6366f1; }
.ranking-scope.total { color: #f59e0b; }
.ranking-tabs {
  margin: -42px 16px 0;
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 4px;
  display: flex;
  gap: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
}
.ranking-tab {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.ranking-tab.active {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  font-weight: 700;
}

/* 我的排名（自己卡片，醒目） */
.ranking-self {
  margin: 16px 16px 14px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1.5px solid #F59E0B;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18);
}
.ranking-self .my-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #B45309;
  padding: 2px 7px;
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  flex-shrink: 0;
}
.ranking-self .my-rank {
  font-size: 22px;
  font-weight: 800;
  color: #92400E;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 36px;
}
.ranking-self .my-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #FCD34D;
  flex-shrink: 0;
}
.ranking-self .my-avatar img { width:100%; height:100%; object-fit:cover; }
.ranking-self .my-info { flex: 1; min-width: 0; }
.ranking-self .my-name {
  font-size: 14px;
  font-weight: 700;
  color: #78350F;
  margin-bottom: 2px;
}
.ranking-self .my-value {
  font-size: 12px;
  color: #92400E;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 排名列表 */
.ranking-list {
  padding: 0 16px 80px;
}
.ranking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: var(--card-shadow);
}
.ranking-row.is-me {
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFFFF 60%);
}
.ranking-row .rk {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
}
.ranking-row.r1 .rk { font-size: 22px; }
.ranking-row.r2 .rk { font-size: 22px; }
.ranking-row.r3 .rk { font-size: 22px; }
.ranking-row .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-secondary);
  flex-shrink: 0;
  position: relative;
}
.ranking-row .avatar img { width:100%; height:100%; object-fit:cover; border-radius: 50%; }
/* 明星行：头像加完整紧凑头像框（皇冠+珍珠环）+ 行内 chip */
.ranking-row.is-star .avatar { overflow: visible; }
.ranking-row.is-star .avatar img {
  border: 2px solid #FCD34D;
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.55);
}
/* ranking-row 明星行：金色背景再加强一档（截图里太淡） */
.ranking-row.is-star {
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 55%, #FFFFFF 100%);
  box-shadow:
    0 2px 12px rgba(234, 179, 8, 0.22),
    0 0 0 1.5px rgba(217, 119, 6, 0.45);
}
/* ranking-self 同步明星头像框 */
.ranking-self .my-avatar { position: relative; }
.ranking-self.is-star .my-avatar {
  overflow: visible;
  border: 2px solid #FCD34D;
  box-shadow: 0 0 10px rgba(252, 211, 77, 0.6);
}
.ranking-self.is-star .my-avatar img { border-radius: 50%; }

/* 名字后面的明星 chip（紧凑款，inline-flex 不撑高 row） */
.row-star-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
  color: #78350F;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  vertical-align: 1px;
  box-shadow: 0 1px 3px rgba(252, 211, 77, 0.45);
  white-space: nowrap;
  line-height: 1.4;
}
.row-star-chip svg { width: 10px; height: 10px; stroke-width: 2.4; }
.ranking-row .name-col {
  flex: 1;
  min-width: 0;
}
.ranking-row .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-row .meta {
  font-size: 11px;
  color: var(--text-secondary);
}
.ranking-row .lv-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-blue);
  background: var(--accent-blue-light);
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
}
.ranking-row .value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ranking-row .value.training {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ranking-row .value .training-bar {
  width: 60px;
  height: 5px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.ranking-row .value .training-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  border-radius: 999px;
}

/* ============================================================
   头像上传：相机角标
   ============================================================ */
.avatar-with-edit {
  position: relative;
  display: inline-block;
}
.avatar-with-edit .camera-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.avatar-with-edit .camera-badge:active { transform: scale(0.9); }
.avatar-with-edit input[type="file"] { display: none; }

/* ============================================================
   明星主播 · 全局视觉规范（金色背景 + ★ 标识）
   ============================================================ */
.dash-top-row.is-star,
.ranking-row.is-star,
.schedule-slot.is-star,
.anchor-progress-row.is-star,
.anchor-picker-row.is-star {
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 65%);
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.15), 0 0 0 1px rgba(234, 179, 8, 0.3);
}
/* 卡片型（已有边距/圆角）兜底 */
.is-star.anchor-progress-row {
  border-radius: 8px;
  padding: 10px 8px;
  border-bottom: 0.5px solid var(--border-light) !important;
}

/* ============================================================
   待办列表（reviews / leaves / violations 通用）
   ============================================================ */
.todo-list {
  padding: 12px 16px 80px;
}
.todo-empty {
  text-align: center;
  padding: 60px 24px;
}
.todo-empty .icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #15803D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.todo-empty .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.todo-empty .sub {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.todo-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 12px 14px 0;
  margin-bottom: 10px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.todo-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.todo-card-head .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-secondary);
  flex-shrink: 0;
  position: relative;
}
.todo-card-head .avatar img { width: 100%; height: 100%; object-fit: cover; }
.todo-card-head .info { flex: 1; min-width: 0; }
.todo-card-head .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.todo-card-head .time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.todo-card-head .severity-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.todo-card-head .severity-pill.minor   { background: #FEF3C7; color: #B45309; }
.todo-card-head .severity-pill.major   { background: #FFEDD5; color: #9A3412; }
.todo-card-head .severity-pill.critical{ background: #FEE2E2; color: #B91C1C; }
.todo-card-head .leave-type-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #E0E7FF;
  color: #4338CA;
  flex-shrink: 0;
}

.todo-card-body {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 10px;
}
.todo-card-body .lbl {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-right: 4px;
}
.todo-card-body .meta-row {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.todo-actions {
  display: flex;
  border-top: 0.5px solid var(--border-light);
  margin: 0 -14px;
}
.todo-action-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-primary);
  border-right: 0.5px solid var(--border-light);
}
.todo-action-btn:last-child { border-right: none; }
.todo-action-btn.approve { color: var(--success); }
.todo-action-btn.reject  { color: var(--danger); }
.todo-action-btn.warn    { color: var(--warning); }
.todo-action-btn.fine    { color: var(--danger); }
.todo-action-btn:active { background: var(--bg-secondary); }

/* ============================================================
   管理端 · 我的（profile）
   ============================================================ */
.admin-profile-hero {
  background: linear-gradient(135deg, #1E40AF 0%, #5B21B6 100%);
  color: #fff;
  padding: 24px 20px;
}
.admin-profile-hero .row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-profile-hero .avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.4);
}
.admin-profile-hero .name {
  font-size: 18px;
  font-weight: 700;
}
.admin-profile-hero .role {
  font-size: 12.5px;
  opacity: 0.85;
  margin-top: 2px;
}

/* ============================================================
   作业提交 · 媒体卡片
   ============================================================ */
/* 管理端待审作业卡内的"媒体载体"区块 */
.submission-media {
  margin: 10px 0 4px;
  border-radius: 14px;
  overflow: hidden;
  background: #f8f8fb;
  border: 1px solid #ececf3;
}
.submission-media-type-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #555;
  background: #fafafd;
  border-bottom: 1px solid #ececf3;
}
.submission-media-type-bar .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e6e6ee;
  font-weight: 600;
  font-size: 11.5px;
  color: #444;
}
.submission-media-type-bar .pill.video { color: #C026D3; border-color: #fcd7f7; background: #fef5fd; }
.submission-media-type-bar .pill.audio { color: #2563EB; border-color: #d4e2ff; background: #f4f8ff; }
.submission-media-type-bar .pill.image { color: #D97706; border-color: #ffe1ba; background: #fff9ef; }
.submission-media-type-bar .pill.text  { color: #6B7280; border-color: #e5e7eb; background: #fafafa; }
.submission-media-type-bar .pill.list  { color: #16A34A; border-color: #c8f0d6; background: #f3fbf6; }
.submission-media-type-bar .dur {
  margin-left: auto;
  font-size: 11.5px;
  color: #888;
}

/* 视频/图片：封面 + 播放图标 */
.submission-video-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}
.submission-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}
.submission-video-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
}
.submission-video-poster .play-orb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.submission-video-poster .play-orb .play-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C026D3;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.submission-video-poster .dur-pill {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 3px 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.submission-video-poster .tap-tip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: 6px;
}

/* 语音：波形条 */
.submission-audio {
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.submission-audio .play-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB, #38bdf8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.submission-audio .wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
}
.submission-audio .wave span {
  flex: 1;
  background: linear-gradient(180deg, #93c5fd, #2563EB);
  border-radius: 2px;
  min-width: 2px;
}
.submission-audio .dur {
  font-size: 12px;
  color: #555;
  font-weight: 600;
}

/* 勾选清单（list_check） */
.submission-checks {
  padding: 10px 12px 12px;
}
.submission-checks .row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: #333;
  border-bottom: 1px dashed #eee;
}
.submission-checks .row:last-child { border-bottom: none; }
.submission-checks .row .tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16A34A;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* 纯文字打卡 */
.submission-text {
  padding: 12px 14px;
  font-size: 13.5px;
  color: #333;
  line-height: 1.55;
}

/* ============================================================
   提交弹窗 · 全屏 modal
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.center { align-items: center; }
.modal-sheet {
  width: 100%;
  max-width: 393px;
  background: #fff;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 16px 16px 24px;
  max-height: 88vh;
  overflow-y: auto;
  animation: sheetUp 0.22s ease-out;
}
.modal-overlay.center .modal-sheet {
  border-radius: 18px;
  margin: 0 16px;
  max-width: 360px;
}
@keyframes sheetUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-sheet .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.modal-sheet .modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.modal-sheet .modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f3f3f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border: none;
  cursor: pointer;
}
.modal-sheet .modal-body { font-size: 14px; color: #333; }
.modal-sheet .modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.modal-sheet .modal-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: none;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.modal-sheet .modal-btn.primary {
  background: linear-gradient(135deg, #C026D3, #9333EA);
  color: #fff;
}
.modal-sheet .modal-btn.ghost {
  background: #f3f3f7;
  color: #444;
}
.modal-sheet .modal-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 视频选择网格 */
.video-pick-section-title {
  font-size: 12.5px;
  color: #888;
  margin: 4px 2px 8px;
}
.video-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.video-pick-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f0f0f5;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
}
.video-pick-card.selected {
  border-color: #C026D3;
  transform: scale(0.97);
}
.video-pick-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-pick-card .dur-pill {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
}
.video-pick-card .check-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #C026D3;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}
.video-pick-card.selected .check-mark { display: inline-flex; }
.video-pick-req {
  margin-top: 14px;
  padding: 10px 12px;
  background: #fef5fd;
  border-radius: 10px;
  font-size: 12.5px;
  color: #862E80;
  line-height: 1.55;
}
.video-pick-req strong { display: block; margin-bottom: 4px; color: #6B21A8; }

/* 视频播放占位 (模拟播放) */
.video-player-mock {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-player-mock img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.video-player-mock .label {
  position: absolute;
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 0 18px;
  background: rgba(0,0,0,0.45);
  border-radius: 10px;
  padding: 8px 14px;
}

/* 主播端"提交今日作业"按钮 */
.task-submit-btn {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #C026D3, #9333EA);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(192, 38, 211, 0.28);
}
.task-submit-btn[disabled] {
  background: #d6d6df;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}
.task-submit-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  margin-top: 16px;
  border-radius: 14px;
  background: #fff7ed;
  color: #C2410C;
  font-size: 14px;
  font-weight: 600;
  border: 1px dashed #fed7aa;
}

/* ============================================================
   请假申请表单（主播侧）
   ============================================================ */
.leave-form .field-label {
  font-size: 12.5px;
  color: #666;
  margin: 14px 2px 6px;
  display: block;
}
.leave-form .field-label:first-child { margin-top: 0; }
.leave-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.leave-type-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 12px;
  background: #f6f6fa;
  border: 1.5px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.leave-type-chip.selected {
  background: #fef5fd;
  border-color: #C026D3;
  color: #9333EA;
}
.leave-date-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.leave-date-row > div { flex: 1; }
.leave-date-row input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e2ea;
  background: #fafafd;
  font-size: 14px;
  color: #222;
  font-family: inherit;
  -webkit-appearance: none;
}
.leave-date-row .arrow {
  flex: 0 0 auto;
  color: #aaa;
  align-self: flex-end;
  margin-bottom: 12px;
}
.leave-form textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e2ea;
  background: #fafafd;
  font-size: 14px;
  font-family: inherit;
  color: #222;
  resize: none;
  box-sizing: border-box;
}
.leave-form .err-tip {
  font-size: 12.5px;
  color: #DC2626;
  margin-top: 8px;
  padding: 6px 10px;
  background: #fef2f2;
  border-radius: 8px;
}

/* 主播侧请假历史小卡 */
.leave-history-card {
  margin-top: 14px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.leave-history-card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: #333;
  font-weight: 600;
  margin-bottom: 8px;
}
.leave-history-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid #f1f1f4;
  font-size: 13px;
  color: #444;
}
.leave-history-card .row .meta { color: #888; font-size: 12px; margin-top: 2px; }
.leave-history-card .empty {
  font-size: 12.5px;
  color: #999;
  padding: 6px 0;
}
.leave-status-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.leave-status-pill.pending  { background: #fff7ed; color: #C2410C; }
.leave-status-pill.approved { background: #f0fdf4; color: #16A34A; }
.leave-status-pill.rejected { background: #fef2f2; color: #DC2626; }

/* ============================================================
   主播 - 个人数据面板（2×2 stats card）
   ============================================================ */
.profile-stats-card {
  margin: 14px 16px 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.profile-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.profile-stats-head .title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
}
.profile-stats-head .more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  color: #9333EA;
  font-weight: 600;
  cursor: pointer;
}
.profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profile-stat-tile {
  position: relative;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fafaff 0%, #f4f4fb 100%);
  overflow: hidden;
}
.profile-stat-tile.gmv      { background: linear-gradient(135deg, #fef5fd 0%, #fce7f3 100%); }
.profile-stat-tile.rank     { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); }
.profile-stat-tile.points   { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); }
.profile-stat-tile.training { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
.profile-stat-tile .ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.profile-stat-tile.gmv .ic      { color: #C026D3; }
.profile-stat-tile.rank .ic     { color: #D97706; }
.profile-stat-tile.points .ic   { color: #4F46E5; }
.profile-stat-tile.training .ic { color: #16A34A; }
.profile-stat-tile .label {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}
.profile-stat-tile .value {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.15;
}
.profile-stat-tile .value .small {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-left: 2px;
}
.profile-stat-tile .foot {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}
.profile-stat-tile.is-star {
  background: linear-gradient(135deg, #fffbe6 0%, #fff3a3 100%);
}

/* ============================================================
   主播 - 我的违规记录页
   ============================================================ */
.my-violation-card {
  margin: 0 16px 12px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.my-violation-card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.my-violation-card .top .time { font-size: 11.5px; color: #999; }
.my-violation-card .rule { font-size: 14px; font-weight: 600; color: #111; line-height: 1.4; margin-bottom: 6px; }
.my-violation-card .ev   { font-size: 12.5px; color: #666; line-height: 1.5; }
.my-violation-card .pills {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.my-violation-card .status-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.my-violation-card .status-pill.pending { background: #fff7ed; color: #C2410C; }
.my-violation-card .status-pill.warned  { background: #fef9c3; color: #A16207; }
.my-violation-card .status-pill.fined   { background: #fef2f2; color: #DC2626; }
.my-violation-card .my-violation-fine {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fef2f2;
  color: #DC2626;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* 主播端：本月被罚汇总条 */
.my-violations-month-strip {
  margin: 12px 16px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fef2f2;
  color: #DC2626;
  font-size: 13.5px;
  font-weight: 700;
}
.my-violations-month-strip.safe {
  background: #f0fdf4;
  color: #16A34A;
}

/* ============================================================
   管理端 - 违规管理新增：统计带 / Tabs / 主播筛选 / 卡内状态
   ============================================================ */
.violations-summary-strip {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7ed 0%, #fee2e2 100%);
  color: #7c2d12;
}
.violations-summary-strip .vs-row.main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.violations-summary-strip .vs-main {
  font-size: 17px;
  font-weight: 800;
  color: #B91C1C;
  letter-spacing: 0.2px;
}
.violations-summary-strip .vs-row.sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: #9A3412;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.violations-summary-strip .dot { opacity: 0.55; }
.violations-summary-strip .pending { color: #C2410C; font-weight: 600; }

.violations-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.violations-tabs::-webkit-scrollbar { display: none; }
.violations-tabs .vt-tab {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--bg-primary);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.violations-tabs .vt-tab .num {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  background: rgba(0,0,0,0.06);
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: center;
}
.violations-tabs .vt-tab.active {
  background: var(--accent-blue);
  color: #fff;
  font-weight: 600;
}
.violations-tabs .vt-tab.active .num {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

.violations-anchor-filter {
  padding: 10px 16px 0;
}
.violations-anchor-filter select {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  box-shadow: var(--card-shadow);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2399A0AA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* 卡内状态行（已警告 / 已罚款）*/
.vio-status-line {
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
}
.vio-status-line.pending { background: #fff7ed; color: #C2410C; }
.vio-status-line.warned  { background: #fef9c3; color: #A16207; }
.vio-status-line.fined   { background: #fef2f2; color: #DC2626; }
.vio-meta-line {
  margin-top: 4px;
  font-size: 11.5px;
  color: #9CA3AF;
}

/* 罚款底弹窗 */
.fine-sheet-info {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-secondary);
}
.fine-sheet-info .fine-sheet-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.fine-sheet-info .fine-sheet-rule {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.fine-quick-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.fine-quick {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #FCA5A5;
  background: #fff;
  color: #DC2626;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.fine-quick:active { transform: scale(0.96); background: #fef2f2; }

/* ============================================================
   直播复盘
   ============================================================ */

/* home 页"上一场复盘"入口小卡 */
.debrief-entry-card {
  margin: 12px 16px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #312e81 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  position: relative;
  overflow: hidden;
}
.debrief-entry-card .badge-score {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #422006;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}
.debrief-entry-card .badge-score .n { font-size: 20px; line-height: 1; }
.debrief-entry-card .badge-score .l { font-size: 9px; opacity: 0.8; margin-top: 1px; }
.debrief-entry-card .info { flex: 1; min-width: 0; }
.debrief-entry-card .ttl { font-size: 14px; font-weight: 700; }
.debrief-entry-card .sub { font-size: 11.5px; opacity: 0.78; margin-top: 3px; }
.debrief-entry-card .chev {
  opacity: 0.7;
  flex: 0 0 auto;
}

/* 复盘页 Hero 综合评分 */
.debrief-hero {
  margin: 12px 16px 0;
  padding: 18px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #c026d3 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 28px rgba(91, 33, 182, 0.32);
}
.debrief-hero.good      { background: linear-gradient(135deg, #1e40af 0%, #2563EB 50%, #38bdf8 100%); box-shadow: 0 10px 28px rgba(30, 64, 175, 0.32); }
.debrief-hero.pass      { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); box-shadow: 0 10px 28px rgba(20, 184, 166, 0.32); }
.debrief-hero.weak      { background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%); box-shadow: 0 10px 28px rgba(234, 88, 12, 0.32); }

.score-ring {
  flex: 0 0 auto;
  position: relative;
  width: 96px;
  height: 96px;
}
.score-ring svg { transform: rotate(-90deg); }
.score-ring .ring-bg   { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 8; }
.score-ring .ring-fg   { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.score-ring .ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.score-ring .ring-text .n { font-size: 26px; font-weight: 800; line-height: 1; }
.score-ring .ring-text .total { font-size: 11px; opacity: 0.75; margin-top: 2px; }

.debrief-hero .right { flex: 1; min-width: 0; }
.debrief-hero .grade {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  margin-bottom: 6px;
}
.debrief-hero .role-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  margin-left: 6px;
}
.debrief-hero .one-line { font-size: 13px; line-height: 1.5; opacity: 0.95; }
.debrief-hero .meta-row {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 8px;
}

/* 复盘通用 section card */
.debrief-section {
  margin: 14px 16px 0;
  padding: 14px 16px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.debrief-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.debrief-section-head .title { font-size: 14px; font-weight: 700; color: #111; }
.debrief-section-head .badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef5fd;
  color: #C026D3;
}

/* 核心数据 2×3 网格 */
.debrief-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.debrief-metric-tile {
  padding: 10px 8px;
  border-radius: 12px;
  background: #fafafd;
  text-align: center;
}
.debrief-metric-tile .lbl { font-size: 11px; color: #888; margin-bottom: 4px; }
.debrief-metric-tile .val { font-size: 16px; font-weight: 700; color: #111; }
.debrief-metric-tile .val.gmv      { color: #C026D3; }
.debrief-metric-tile .val.commission { color: #16A34A; }

/* 团队配合 */
.debrief-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 10px;
}
.debrief-team-mates {
  display: flex;
  gap: -6px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.debrief-team-mates .mate {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
  margin-left: -8px;
  background: #f0f0f5;
  cursor: pointer;
  position: relative;
}
.debrief-team-mates .mate img { width: 100%; height: 100%; object-fit: cover; }
.debrief-team-mates .mate .crown {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
}
.debrief-praise-row {
  background: #fffbeb;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12.5px;
  color: #92400e;
}
.debrief-praise-row .praise-btn {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fbbf24;
  color: #422006;
  border: none;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
}
.debrief-praise-row .praise-btn[disabled] { background: #d6d3d1; color: #888; cursor: not-allowed; }

/* 高光时刻 timeline */
.debrief-timeline { position: relative; padding-left: 6px; }
.debrief-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 12px;
  width: 2px;
  background: #ececf3;
}
.debrief-tl-item {
  position: relative;
  padding-left: 30px;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
}
.debrief-tl-item:last-child { padding-bottom: 0; }
.debrief-tl-item .dot {
  position: absolute;
  left: 4px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #C026D3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C026D3;
  z-index: 1;
}
.debrief-tl-item .row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #111;
  line-height: 1.4;
}
.debrief-tl-item .row1 .time {
  font-size: 11.5px;
  color: #888;
  font-weight: 600;
  font-feature-settings: 'tnum';
}

/* 待改进卡片 */
.debrief-improve-item {
  padding: 12px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  margin-bottom: 8px;
}
.debrief-improve-item:last-child { margin-bottom: 0; }
.debrief-improve-item .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.debrief-improve-item .head .metric { font-size: 13px; font-weight: 700; color: #C2410C; }
.debrief-improve-item .head .vs {
  font-size: 11px;
  color: #9a3412;
  font-weight: 600;
}
.debrief-improve-item .desc { font-size: 12.5px; color: #7c2d12; line-height: 1.55; margin-bottom: 10px; }
.debrief-improve-item .learn-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #EA580C;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* 全场对比 */
.debrief-compare-row {
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #333;
}
.debrief-compare-row + .debrief-compare-row { border-top: 1px solid #f1f1f4; }
.debrief-compare-row .lbl { color: #666; font-size: 12.5px; }
.debrief-compare-row .val { font-weight: 700; color: #C026D3; }
.debrief-compare-bar {
  margin-top: 8px;
  height: 8px;
  background: #f1f1f4;
  border-radius: 999px;
  overflow: hidden;
}
.debrief-compare-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #C026D3, #9333EA);
  border-radius: 999px;
}

/* 底部 CTA */
.debrief-footer {
  margin: 16px 16px 32px;
  text-align: center;
}
.debrief-footer .tip {
  font-size: 12.5px;
  color: #666;
  margin-bottom: 10px;
}
.debrief-footer .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #C026D3, #9333EA);
  color: #fff;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(192, 38, 211, 0.28);
}

/* ============================================================
   管理端 · 复盘列表 + 编辑
   ============================================================ */
.admin-debrief-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 16px;
}
.admin-debrief-tabs .tab {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  background: #f3f3f7;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
}
.admin-debrief-tabs .tab.active {
  background: #7C3AED;
  color: #fff;
}

.admin-debrief-card {
  margin: 0 16px 10px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.admin-debrief-card .top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.admin-debrief-card .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}
.admin-debrief-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-debrief-card .info { flex: 1; min-width: 0; }
.admin-debrief-card .name { font-size: 13.5px; font-weight: 700; color: #111; }
.admin-debrief-card .meta { font-size: 11.5px; color: #888; margin-top: 2px; }
.admin-debrief-card .status-pill {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.admin-debrief-card .status-pill.draft     { background: #fef3c7; color: #B45309; }
.admin-debrief-card .status-pill.published { background: #ede9fe; color: #6D28D9; }
.admin-debrief-card .auto-row {
  font-size: 11.5px;
  color: #666;
  padding: 8px 10px;
  background: #fafafd;
  border-radius: 8px;
  line-height: 1.5;
}
.admin-debrief-card .actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.admin-debrief-card .actions .btn {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.admin-debrief-card .actions .btn.primary {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
}
.admin-debrief-card .actions .btn.ghost {
  background: #f3f3f7;
  color: #444;
}

/* 复盘编辑表单 */
.debrief-edit-section {
  margin: 12px 16px 0;
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.debrief-edit-section .head {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.debrief-edit-section .head .badge {
  margin-left: auto;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6D28D9;
  font-weight: 700;
}
.debrief-auto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.debrief-auto-grid .auto-tile {
  background: #fafafd;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.debrief-auto-grid .auto-tile .l { font-size: 10.5px; color: #888; }
.debrief-auto-grid .auto-tile .v { font-size: 14px; font-weight: 700; color: #222; margin-top: 2px; }
/* 可编辑变体：tile 中放数字输入 */
.debrief-auto-grid .auto-tile.editable {
  background: #fff;
  border: 1px solid #e2e2ea;
  padding: 8px 6px;
}
.debrief-auto-grid .auto-tile.editable input {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #7C3AED;
  padding: 4px 0 0;
  outline: none;
  -moz-appearance: textfield;
  font-family: inherit;
}
.debrief-auto-grid .auto-tile.editable input::-webkit-outer-spin-button,
.debrief-auto-grid .auto-tile.editable input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.debrief-auto-grid .auto-tile.editable input::placeholder { color: #c4c4cf; font-weight: 600; }
.debrief-auto-grid .auto-tile.editable .formatted {
  font-size: 10px;
  color: #888;
  margin-top: 2px;
  min-height: 12px;
}
.debrief-auto-grid .auto-tile.editable.pk-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.debrief-auto-grid .auto-tile.editable.pk-tile .pk-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.debrief-auto-grid .auto-tile.editable.pk-tile .pk-row input {
  width: 30px;
  text-align: center;
}
.debrief-auto-grid .auto-tile.editable.pk-tile .pk-row span {
  font-size: 11px;
  color: #888;
  font-weight: 600;
}
.team-data-hint {
  font-size: 11.5px;
  color: #888;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.save-team-data-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid #c4b5fd;
  background: #ede9fe;
  color: #6D28D9;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.save-team-data-btn:hover { background: #ddd6fe; }
.save-team-data-btn:active { transform: scale(0.98); }

/* ============================================================
   互动课 (interactive lesson)
   ============================================================ */

/* 顶部进度条 */
.lesson-progress-bar {
  position: sticky;
  top: 0;
  z-index: 9;
  background: #fff;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f1f4;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lesson-progress-bar .step-text {
  font-size: 11.5px;
  color: #666;
  font-weight: 600;
  flex: 0 0 auto;
}
.lesson-progress-bar .bar {
  flex: 1;
  height: 6px;
  background: #f1f1f4;
  border-radius: 999px;
  overflow: hidden;
}
.lesson-progress-bar .bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #C026D3, #9333EA);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* 通用 section 卡 */
.lesson-section {
  margin: 14px 16px;
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  animation: lessonFadeIn 0.3s ease-out;
}
@keyframes lessonFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* intro section */
.lesson-intro-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef5fd, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C026D3;
  margin: 0 auto 14px;
}
.lesson-intro-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  color: #111;
}
.lesson-intro-desc {
  font-size: 13.5px;
  color: #555;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* video section */
.lesson-video-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.lesson-video-head .idx-pill {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fef5fd;
  color: #C026D3;
  font-size: 11px;
  font-weight: 700;
}
.lesson-video-head .sentence {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.lesson-video-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 12px;
}
.lesson-video-poster img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.92;
}
.lesson-video-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%);
}
.lesson-video-poster .play-orb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.lesson-video-poster .play-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C026D3;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.lesson-video-poster .dur-pill {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  z-index: 3;
}
.lesson-video-poster .tap-tip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 3px 10px;
  border-radius: 6px;
  z-index: 3;
}
.lesson-video-poster.played {
  background: linear-gradient(135deg, #16A34A, #15803D);
}
.lesson-video-poster.played::after { background: none; }
.lesson-video-poster.played img { opacity: 0.4; filter: grayscale(0.5); }
.lesson-video-poster.played .play-circle {
  background: rgba(255,255,255,0.95);
  color: #16A34A;
}

.lesson-pinyin-row {
  padding: 10px 12px;
  background: #fafafd;
  border-radius: 10px;
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
}
.lesson-pinyin-row .label { font-size: 11px; color: #999; margin-right: 6px; font-weight: 600; }
.lesson-note-row {
  padding: 10px 12px;
  background: #fff7ed;
  border-radius: 10px;
  font-size: 13px;
  color: #C2410C;
}
.lesson-note-row .label { font-size: 11px; color: #9a3412; margin-right: 6px; font-weight: 700; }

/* 朗读播放按钮（取代旧的 video-poster） */
.lesson-tts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #fce7f3, #ede9fe);
  color: #7C3AED;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin: 10px 0 12px;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}
.lesson-tts-btn:active { transform: scale(0.96); }
.lesson-tts-btn.played {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
  color: #16A34A;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}
/* 表情真人示范：视频占位卡（上线后填真实视频） */
.lesson-video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 11;
  max-height: 320px;
  border-radius: 16px;
  margin: 10px 0 12px;
  overflow: hidden;
  background-color: #1f2230;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.1s;
}
.lesson-video-card:active { transform: scale(0.985); }
.lesson-video-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
}
.lesson-video-play {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #7C3AED;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.lesson-video-label {
  position: relative;
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.lesson-video-mocktip {
  position: absolute;
  bottom: 10px; left: 12px; right: 12px;
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
}
.lesson-video-card.played .lesson-video-play {
  background: #16A34A;
  color: #fff;
}
.lesson-quiz-must-correct {
  font-size: 12px;
  color: #9333EA;
  text-align: center;
  margin-top: 6px;
  opacity: 0.75;
}

/* 视频播放 mock overlay */
.video-play-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  animation: fadeInBg 0.2s ease-out;
}
@keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }
.video-play-overlay .label {
  font-size: 14px;
  margin-bottom: 18px;
  opacity: 0.85;
  text-align: center;
  padding: 0 24px;
}
.video-play-overlay .visual {
  width: 90%;
  max-width: 360px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #C026D3, #9333EA);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.video-play-overlay .visual img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.video-play-overlay .visual .pulse {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  animation: pulseAnim 1.5s ease-in-out infinite;
}
@keyframes pulseAnim { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.3); opacity: 0.2; } }
.video-play-overlay .progress {
  width: 90%; max-width: 360px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.video-play-overlay .progress .fill {
  height: 100%;
  background: #fff;
  border-radius: 999px;
  width: 0%;
  transition: width 0.1s linear;
}
.video-play-overlay .time-text {
  font-size: 12px;
  opacity: 0.75;
  font-feature-settings: 'tnum';
}
.video-play-overlay .skip-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.video-play-overlay .demo-tip {
  position: absolute;
  bottom: 32px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  padding: 0 24px;
  text-align: center;
}

/* 小测验 (inline + exam 共用) */
.lesson-quiz-block {
  margin-top: 14px;
  padding: 14px;
  border: 1.5px dashed #c4b5fd;
  background: #faf5ff;
  border-radius: 14px;
  animation: lessonFadeIn 0.25s ease-out;
}
.lesson-quiz-block.locked { opacity: 0.6; pointer-events: none; }
.lesson-quiz-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6D28D9;
  margin-bottom: 10px;
}
.lesson-quiz-question {
  font-size: 14.5px;
  font-weight: 600;
  color: #111;
  line-height: 1.5;
  margin-bottom: 12px;
}
.lesson-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lesson-quiz-option {
  padding: 12px 14px;
  border: 1.5px solid #e2e2ea;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lesson-quiz-option:hover { border-color: #c4b5fd; }
.lesson-quiz-option .letter {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid #d6d6df;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #666;
}
.lesson-quiz-option.selected {
  border-color: #7C3AED;
  background: #ede9fe;
  transform: scale(0.98);
}
.lesson-quiz-option.selected .letter {
  background: #7C3AED;
  color: #fff;
  border-color: #7C3AED;
}
.lesson-quiz-option.correct {
  border-color: #16A34A;
  background: #f0fdf4;
}
.lesson-quiz-option.correct .letter {
  background: #16A34A; color: #fff; border-color: #16A34A;
}
.lesson-quiz-option.incorrect {
  border-color: #DC2626;
  background: #fef2f2;
}
.lesson-quiz-option.incorrect .letter {
  background: #DC2626; color: #fff; border-color: #DC2626;
}
.lesson-quiz-option.disabled { cursor: not-allowed; opacity: 0.7; }

.lesson-quiz-feedback {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: lessonFadeIn 0.25s ease-out;
}
.lesson-quiz-feedback.correct {
  background: #f0fdf4;
  color: #15803D;
  border-left: 3px solid #16A34A;
}
.lesson-quiz-feedback.wrong {
  background: #fef2f2;
  color: #B91C1C;
  border-left: 3px solid #DC2626;
}
.lesson-quiz-feedback .hint-label {
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* 跟读练习 (practice) */
.lesson-practice-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe, #93c5fd);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1D4ED8;
  margin: 0 auto 14px;
}
.lesson-practice-tip {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 14px;
  text-align: center;
}
.lesson-record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563EB, #38bdf8);
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
}
.lesson-record-btn.recording {
  background: linear-gradient(135deg, #DC2626, #EF4444);
  animation: recordPulse 1.5s ease-in-out infinite;
}
@keyframes recordPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.lesson-record-btn.submitted {
  background: #16A34A;
  cursor: default;
}
.lesson-practice-skip {
  display: block;
  margin: 8px auto 0;
  background: transparent;
  border: none;
  color: #888;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
}

/* 通用底部 Continue 按钮 */
.lesson-section .continue-btn {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #C026D3, #9333EA);
  color: #fff;
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(192, 38, 211, 0.3);
}
.lesson-section .continue-btn[disabled] {
  background: #e2e2ea;
  color: #999;
  cursor: not-allowed;
  box-shadow: none;
}

/* 综合测验 (exam) */
.lesson-exam-q-card {
  padding: 14px;
  border-radius: 12px;
  background: #fafafd;
  margin-bottom: 12px;
}
.lesson-exam-q-card .q-idx {
  font-size: 11.5px;
  color: #7C3AED;
  font-weight: 700;
  margin-bottom: 4px;
}
.lesson-exam-q-card .q-text {
  font-size: 14.5px;
  font-weight: 600;
  color: #111;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* 测验结果页 */
.lesson-exam-result {
  text-align: center;
  padding: 20px 16px;
}
.lesson-exam-result .score-ring {
  width: 110px; height: 110px;
  margin: 0 auto 14px;
}
.lesson-exam-result .verdict {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.lesson-exam-result .verdict.pass { color: #16A34A; }
.lesson-exam-result .verdict.fail { color: #DC2626; }
.lesson-exam-result .verdict.excellent { color: #C026D3; }
.lesson-exam-result .award-tag {
  display: inline-block;
  padding: 4px 12px;
  background: #fef5fd;
  color: #C026D3;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 14px;
}
.lesson-exam-result .actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.lesson-exam-result .actions .btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lesson-exam-result .actions .btn.ghost { background: #f3f3f7; color: #444; }
.lesson-exam-result .actions .btn.primary {
  background: linear-gradient(135deg, #C026D3, #9333EA);
  color: #fff;
}

/* 已通过 banner */
.lesson-passed-banner {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #86efac;
  color: #15803D;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.lesson-passed-banner .review-btn {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: #16A34A;
  color: #fff;
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

/* ============================================================
   新建主播表单 / 3 点菜单 / 激活页
   ============================================================ */

/* anchors 列表上的 + 新建按钮（顶部 fab 风格） */
.anchors-add-fab {
  position: fixed;
  right: 16px;
  bottom: 86px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #C026D3, #9333EA);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(192, 38, 211, 0.35);
}

/* anchors 行 3 点菜单 */
.anchor-row-menu-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  cursor: pointer;
  border: none;
  margin-left: 6px;
}
.anchor-row-menu-btn:hover { background: #f3f3f7; color: #555; }
.anchor-menu-popover {
  position: absolute;
  right: 16px;
  z-index: 30;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 6px 0;
  min-width: 160px;
  animation: lessonFadeIn 0.15s ease-out;
}
.anchor-menu-popover .item {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #333;
  cursor: pointer;
}
.anchor-menu-popover .item:hover { background: #f6f6fa; }
.anchor-menu-popover .item.danger { color: #DC2626; }
.anchor-menu-popover .item.danger:hover { background: #fef2f2; }
.anchor-menu-popover .divider { height: 1px; background: #f1f1f4; margin: 4px 0; }

/* 待激活徽章 */
.anchor-invited-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #B45309;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* 新建主播页 form section */
.form-page-section {
  margin: 14px 16px 0;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.form-page-section .head {
  font-size: 13.5px;
  font-weight: 700;
  color: #111;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-page-section .head i { color: #7C3AED; }
.form-field {
  margin-bottom: 10px;
}
.form-field:last-child { margin-bottom: 0; }
.form-field label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}
.form-field label .req { color: #DC2626; margin-left: 2px; }
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="tel"],
.form-field input[type="password"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e2ea;
  background: #fafafd;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
  font-family: inherit;
}
.form-field textarea { min-height: 64px; resize: none; }
.form-field .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-field .row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.form-field .err-tip {
  font-size: 11.5px;
  color: #DC2626;
  margin-top: 4px;
}

/* 邀请链接弹窗 */
.invite-link-box {
  background: #f6f6fa;
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  word-break: break-all;
  font-size: 12px;
  color: #555;
  font-family: 'SF Mono', Menlo, monospace;
}
.invite-qr-box {
  text-align: center;
  margin: 16px 0;
}
.invite-qr-box .qr-img {
  width: 160px; height: 160px;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: 12px;
  padding: 8px;
  margin: 0 auto;
}
.invite-qr-box .tip {
  margin-top: 8px;
  font-size: 11.5px;
  color: #888;
}

/* 激活页 hero */
.activate-hero {
  margin: 16px;
  padding: 24px 18px;
  background: linear-gradient(135deg, #C026D3, #9333EA);
  color: #fff;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(192, 38, 211, 0.35);
}
.activate-hero .welcome {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.activate-hero .hi {
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.55;
}
.activate-profile-card {
  margin: 14px 16px 0;
  padding: 14px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.activate-profile-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: #333;
  border-bottom: 1px solid #f1f1f4;
}
.activate-profile-row:last-child { border-bottom: none; }
.activate-profile-row .label { color: #888; }
.activate-profile-row .val { font-weight: 600; }
.activate-submit-bar {
  margin: 16px;
}
.activate-submit-bar button {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #C026D3, #9333EA);
  color: #fff;
  border: none;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(192, 38, 211, 0.3);
}
.activate-submit-bar button[disabled] {
  background: #e2e2ea; color: #999; box-shadow: none; cursor: not-allowed;
}
.send-otp-btn {
  margin-top: 6px;
  padding: 8px 12px;
  background: #ede9fe;
  color: #6D28D9;
  border: 1px solid #c4b5fd;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.send-otp-btn[disabled] {
  background: #f3f3f7; color: #999; border-color: #e2e2ea; cursor: not-allowed;
}

.debrief-edit-field { margin-bottom: 12px; }
.debrief-edit-field:last-child { margin-bottom: 0; }
.debrief-edit-field label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}
.debrief-edit-field input[type="number"],
.debrief-edit-field input[type="text"],
.debrief-edit-field textarea,
.debrief-edit-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e2ea;
  border-radius: 10px;
  background: #fafafd;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
  font-family: inherit;
}
.debrief-edit-field textarea {
  min-height: 72px;
  resize: none;
}
.debrief-edit-field .grade-auto-pill {
  margin-left: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6D28D9;
  font-weight: 700;
}
.debrief-edit-field .err {
  font-size: 12px;
  color: #DC2626;
  margin-top: 6px;
}

/* 改进项构造器 */
.imp-card {
  padding: 10px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  margin-bottom: 8px;
}
.imp-card .row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.imp-card .row > div { flex: 1; }
.imp-card input,
.imp-card select,
.imp-card textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  box-sizing: border-box;
  font-family: inherit;
}
.imp-card textarea { min-height: 56px; resize: none; }
.imp-card .remove-btn {
  background: none;
  border: none;
  color: #DC2626;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  font-weight: 600;
}
.imp-add-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border: 2px dashed #fed7aa;
  background: transparent;
  border-radius: 10px;
  color: #C2410C;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

/* 编辑页底部按钮栏 */
.debrief-edit-actions {
  position: sticky;
  bottom: 0;
  margin: 16px -16px -16px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f1f1f4;
  display: flex;
  gap: 10px;
  z-index: 5;
}
.debrief-edit-bottom {
  display: flex;
  gap: 10px;
  margin: 16px 16px 24px;
}
.debrief-edit-bottom .btn {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.debrief-edit-bottom .btn.draft  { background: #f3f3f7; color: #444; }
.debrief-edit-bottom .btn.publish {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32);
}

/* 团员评分卡（编辑页内） */
.member-card {
  margin: 0 16px 10px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.member-card.expanded { box-shadow: 0 6px 18px rgba(124, 58, 237, 0.15); }
.member-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.member-card .head .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}
.member-card .head .avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-card .info { flex: 1; min-width: 0; }
.member-card .name { font-size: 13.5px; font-weight: 700; color: #111; }
.member-card .role-tag {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f3f3f7;
  color: #666;
  margin-left: 6px;
  font-weight: 600;
  vertical-align: middle;
}
.member-card .role-tag.lead { background: #fef3c7; color: #B45309; }
.member-card .role-tag.sub  { background: #dbeafe; color: #1D4ED8; }
.member-card .state {
  font-size: 11.5px;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.member-card .state.not-rated { color: #C2410C; }
.member-card .state.rated     { color: #16A34A; font-weight: 600; }
.member-card .chev-toggle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #f3f3f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
  flex: 0 0 auto;
  transition: transform 0.2s;
}
.member-card.expanded .chev-toggle { transform: rotate(180deg); background: #ede9fe; color: #6D28D9; }
.member-card .body {
  padding: 0 14px 14px;
  border-top: 1px solid #f1f1f4;
}
.member-card .actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.member-card .actions .btn {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.member-card .actions .btn.ghost   { background: #f3f3f7; color: #444; }
.member-card .actions .btn.publish { background: linear-gradient(135deg, #7C3AED, #9333EA); color: #fff; }
.member-card .actions .btn.republish { background: #ede9fe; color: #6D28D9; border: 1px solid #c4b5fd; }

/* 列表页 session 卡进度条 */
.session-progress {
  height: 6px;
  background: #f1f1f4;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.session-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, #7C3AED, #9333EA);
  border-radius: 999px;
  transition: width 0.4s;
}
.session-progress-text {
  font-size: 11.5px;
  color: #666;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.session-progress-text .pct { font-weight: 700; color: #7C3AED; }

/* 主播侧：团队整场数据小条 */
.session-summary-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.16);
  border-radius: 10px;
  font-size: 11px;
  margin-top: 8px;
}
.session-summary-bar span + span { padding-left: 6px; border-left: 1px solid rgba(255,255,255,0.25); }

/* ============================================================
   通知模块：置顶 / 老板 badge / 发送者行 / 铃铛紫色 dot
   ============================================================ */
.pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.boss-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.35);
}
.notif-sender-line {
  font-size: 11.5px;
  color: var(--text-secondary, #6B7280);
  margin: 2px 0 4px;
  line-height: 1.4;
}
/* pinned 通知整体加左侧紫色条 + 淡紫底，凸显层级 */
.notif-item.pinned {
  background: linear-gradient(180deg, #F5F3FF 0%, #FFFFFF 70%);
  border-left: 3px solid #7C3AED;
  padding-left: 11px;
}
.notif-item.pinned.unread {
  background: linear-gradient(180deg, #EDE9FE 0%, #FFFFFF 70%);
}
/* 主播端顶部铃铛：紫色 pinned dot（独立于未读红点 badge） */
.icon-btn.bell { position: relative; }
.icon-btn.bell .pin-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7C3AED;
  box-shadow: 0 0 0 2px #fff, 0 0 4px rgba(124, 58, 237, 0.6);
  pointer-events: none;
}

/* ============================================================
   成长任务：每日成长 / 拓展任务分组
   ============================================================ */
.growth-subheader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
}
.growth-subheader:empty { display: none; }
.growth-subheader-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}
.growth-subheader-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(124, 58, 237, 0.10);
  color: #7C3AED;
  font-size: 11px;
  font-weight: 700;
}
.section-divider {
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 14px 0 4px;
}

/* 任务卡（home 紧凑版 + tasks.html 列表版）底部发布者一行 */
.task-card-v2 .task-creator,
.task-row .task-creator {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.3;
}
.task-row .task-creator {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,0.06);
}

/* tasks.html 顶部三态汇总 */
.growth-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.growth-overview-cell { text-align: center; }
.growth-overview-cell .n {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.growth-overview-cell .l {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* 任务详情 hero · 发布者副标题 */
.detail-hero-creator {
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ============================================================
   管理端 · 排班 V2（会议卡风格 · 整洁布局）
   ============================================================ */

/* 顶部统计带 */
.schedule-summary-bar {
  margin: 8px 16px 0;
  padding: 10px 14px;
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.schedule-summary-bar .num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.schedule-summary-bar .num.soft { color: var(--text-tertiary); font-weight: 600; }
.schedule-summary-bar .num.warn { color: #DC2626; }
.schedule-summary-bar .slash { color: var(--text-tertiary); margin: 0 1px; }
.schedule-summary-bar .lbl { font-size: 12px; color: var(--text-tertiary); margin-left: 2px; }
.schedule-summary-bar .sep { color: var(--text-tertiary); margin: 0 6px; opacity: 0.6; }

/* 会议卡：一场 = 一张白卡 */
.schedule-meeting-card {
  margin: 12px 16px 0;
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 14px 14px 6px;
  position: relative;
  overflow: hidden;
}
.schedule-meeting-card.is-dirty::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #6D28D9, #4338CA);
}

.meeting-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 10px;
}
.meeting-card-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.meeting-card-title .team-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4338CA, #6D28D9);
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: 0.4px;
}
.meeting-card-title .time-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.meeting-card-title .meta-text {
  font-size: 12px;
  color: var(--text-tertiary);
}
.meeting-card-del {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
}
.meeting-card-del:active { background: #FEE2E2; color: #DC2626; transform: scale(0.94); }

.meeting-card-divider {
  height: 0.5px;
  background: var(--border-light);
  margin: 0 -14px 4px;
}

/* 槽位列表（竖向） */
.meeting-slot-list { display: flex; flex-direction: column; }

.meeting-slot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 0.5px dashed var(--border-light);
  cursor: pointer;
  min-height: 52px;
  transition: background 0.15s;
}
.meeting-slot-row:last-child { border-bottom: none; }
.meeting-slot-row:active { background: var(--bg-secondary); }

.meeting-role-prefix {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.meeting-role-prefix.lead {
  background: linear-gradient(135deg, #FEF3C7, #FCD34D);
  color: #B45309;
}
.meeting-role-prefix.sub {
  background: #DBEAFE;
  color: #1E40AF;
}
.meeting-role-prefix.normal {
  width: 22px;
  height: 22px;
  background: transparent;
  position: relative;
}
.meeting-role-prefix.normal::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
  display: block;
  margin: auto;
}

.meeting-slot-row .role-label {
  flex-shrink: 0;
  width: 58px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.1px;
}

.meeting-slot-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
}
.meeting-slot-avatar img { width: 100%; height: 100%; object-fit: cover; }

.meeting-slot-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meeting-slot-chev {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

/* 空槽：右侧虚线占位 + 待安排 */
.meeting-slot-row.empty .meeting-slot-empty-hint {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  border: 1.5px dashed var(--border-light);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  transition: all 0.15s;
}
.meeting-slot-row.empty:active .meeting-slot-empty-hint {
  border-color: #6D28D9;
  color: #6D28D9;
  background: #F5F3FF;
}

/* dirty 槽位：紫色高亮 + 圆点 */
.meeting-slot-row.dirty {
  background: linear-gradient(90deg, #F5F3FF 0%, transparent 80%);
}
.meeting-slot-row.dirty .meeting-slot-name::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #6D28D9;
  vertical-align: middle;
}

/* 明星行：金色底兜底 */
.meeting-slot-row.is-star {
  background: linear-gradient(90deg, #FFFBEB 0%, transparent 70%);
}

/* 排班建议 · 极简版（不再用大黄卡） */
.schedule-notes-lite {
  margin: 10px 16px 0;
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* draft bar V2：浮在 tab 上方 */
.draft-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 91px;  /* 83 tab + 8 间距 */
  top: auto;
  max-width: 361px; /* 393 - 16*2 */
  margin: 0 auto;
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(76, 29, 149, 0.32), 0 2px 6px rgba(76, 29, 149, 0.18);
  z-index: 60;
  gap: 10px;
}
.draft-bar .icon {
  background: rgba(255,255,255,0.18);
}
.draft-bar .info .label { font-size: 13px; font-weight: 700; }
.draft-bar .info .tip { font-size: 10.5px; opacity: 0.85; }
.draft-bar .btn {
  background: #fff;
  color: #4338CA;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
}
.draft-bar .btn.discard {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

/* dirty 旧 .schedule-slot 样式覆盖（防止旧规则在新结构里造黄边） */
.meeting-slot-row.dirty {
  box-shadow: none;
}
.meeting-slot-row.dirty::after { content: none; }

/* picker · 顶部推荐条 */
.picker-reco-strip {
  margin: 0 0 8px;
  padding: 10px 12px 12px;
  background: linear-gradient(135deg, #F5F3FF 0%, #FAF5FF 100%);
  border-radius: 12px;
  border: 1px solid #E9D5FF;
}
.picker-reco-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #6D28D9;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.picker-reco-row {
  display: flex;
  gap: 10px;
}
.picker-reco-item {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(109, 40, 217, 0.10);
  transition: transform 0.15s;
}
.picker-reco-item:active { transform: scale(0.96); }
.picker-reco-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
  margin: 0 auto 4px;
}
.picker-reco-avatar img { width: 100%; height: 100%; object-fit: cover; }
.picker-reco-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}
.picker-reco-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* 给 main 末尾留够空间，避免 draft-bar 浮层挡住卡片底部 */
.detail-bottom-pad.lg { height: 110px; }

/* 通知卡片可展开（默认 body 截 2 行，展开后全文显示） */
.notif-item { cursor: pointer; transition: background 0.15s ease; }
.notif-item.expanded .notif-body-text {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  white-space: pre-wrap;
  word-break: break-word;
}
.notif-item .notif-goto-btn { display: none; }
.notif-item.expanded .notif-goto-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.notif-item.expanded .notif-goto-btn:active { transform: scale(0.97); }
.notif-item.expanded {
  background: rgba(124, 58, 237, 0.03);
}


/* ========== 通用 Quiz 冷却 / 失败提示 ========== */
.lesson-review-banner {
  margin: 8px 16px 0;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #9a3412;
  font-weight: 600;
}
.lesson-quiz-cooldown-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #b45309;
  text-align: center;
  line-height: 1.55;
}
.lesson-quiz-fail-detail {
  margin: 4px 0 12px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  text-align: left;
}
.lesson-quiz-fail-detail .title {
  font-size: 13px; font-weight: 700; color: #b91c1c; margin-bottom: 4px;
}
.lesson-quiz-fail-detail .body {
  font-size: 12.5px; color: #7f1d1d; line-height: 1.55;
}

/* ========== 任务自定义内容区 + 测验区 ========== */
#task-quiz-section .lesson-quiz-block,
#task-body-section + #task-quiz-section .lesson-section {
  margin-top: 0;
}

/* ========== 音频上传卡片 ========== */
.audio-pick-list {
  display: flex; flex-direction: column; gap: 10px; padding: 4px 0;
}
.audio-pick-card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #e2e2ea;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.audio-pick-card.selected {
  border-color: #7C3AED;
  background: #faf5ff;
}
.audio-pick-card .audio-pick-visual {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.audio-pick-card .wave {
  position: absolute; bottom: 6px; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 10px;
}
.audio-pick-card .wave span {
  width: 2px; background: currentColor; border-radius: 1px; opacity: 0.7;
}
.audio-pick-card .wave span:nth-child(1) { height: 30%; }
.audio-pick-card .wave span:nth-child(2) { height: 70%; }
.audio-pick-card .wave span:nth-child(3) { height: 50%; }
.audio-pick-card .wave span:nth-child(4) { height: 90%; }
.audio-pick-card .wave span:nth-child(5) { height: 40%; }
.audio-pick-card .audio-pick-meta { flex: 1; min-width: 0; }
.audio-pick-card .audio-pick-meta .t {
  font-size: 13.5px; font-weight: 600; color: #111; margin-bottom: 2px;
}
.audio-pick-card .audio-pick-meta .d {
  font-size: 11px; color: #888;
}
.audio-pick-card .check-mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #d6d6df;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.audio-pick-card.selected .check-mark {
  background: #7C3AED; border-color: #7C3AED; color: #fff;
}

/* 任务详情：升级版主提交按钮 */
.detail-action-btn.primary-submit {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}
.detail-action-btn.primary-submit i { color: #fff; }
.task-related-lesson {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding: 12px 14px;
  background: #faf5ff;
  border: 1px dashed #c4b5fd;
  border-radius: 12px;
  font-size: 13px; font-weight: 600;
  color: #6D28D9;
  text-decoration: none;
  cursor: pointer;
}
.task-related-lesson:active { background: #f3e8ff; }

/* ============ 情绪疏导 · 滑动卡片课（swipe） ============ */
.swipe-wrap {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 0px);
  background: linear-gradient(160deg, #2A1B4A 0%, #4C1D95 45%, #6D28D9 100%);
  padding: 0; color: #fff;
}
.swipe-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 8px; padding-top: max(14px, env(safe-area-inset-top));
}
.swipe-close { color: rgba(255,255,255,.7); display: flex; }
.swipe-dots { flex: 1; display: flex; gap: 6px; align-items: center; }
.swipe-dot {
  height: 4px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.22);
  transition: background .3s;
}
.swipe-dot.active { background: #fff; }
.swipe-dot.past { background: rgba(255,255,255,.6); }
.swipe-count { font-size: 13px; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }

.swipe-stage {
  flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center;
  padding: 8px 18px 0; overflow: hidden; touch-action: pan-y;
}
.swipe-card {
  width: 100%; max-width: 480px;
  /* 限高在舞台内 + 内部可滚动：越南文较长时卡片不再被裁，可在卡内上下滚动看全 */
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 30px 24px 34px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  animation: swipeIn .32s cubic-bezier(.22,.9,.3,1);
  will-change: transform, opacity;
}
/* 卡内滚动条极简(深色背景上低调显示) */
.swipe-card::-webkit-scrollbar { width: 4px; }
.swipe-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 2px; }
@keyframes swipeIn {
  from { opacity: 0; transform: translateX(40px) scale(.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.swipe-card.out-left  { transition: transform .18s ease, opacity .18s ease; transform: translateX(-120%) rotate(-6deg); opacity: 0; }
.swipe-card.out-right { transition: transform .18s ease, opacity .18s ease; transform: translateX(120%) rotate(6deg); opacity: 0; }

.swipe-card-step {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .5px; color: #FBCFE8;
  background: rgba(192,38,211,.28); border: 1px solid rgba(244,114,182,.4);
  padding: 5px 13px; border-radius: 999px; margin-bottom: 18px;
}
.swipe-card-body {
  font-size: 17px; line-height: 1.85; color: #F3EEFF;
  font-weight: 400; letter-spacing: .2px;
}

.swipe-prev {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: none; color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.swipe-bottom { padding: 16px 18px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.swipe-next-btn {
  width: 100%; min-height: 54px; border: none; border-radius: 16px;
  background: linear-gradient(135deg, #EC4899, #C026D3);
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(192,38,211,.4);
  transition: transform .12s;
}
.swipe-next-btn:active { transform: scale(.97); }
.swipe-next-btn.done { background: rgba(255,255,255,.2); box-shadow: none; }

/* 滑动课全屏：盖住顶栏和 tab 栏 */
.anchor-page.swipe-fullscreen { padding: 0 !important; }
.anchor-page.swipe-fullscreen #page-top,
.anchor-page.swipe-fullscreen #bottom-bar { display: none !important; }
/* 锁死在视口高度(不用 min-height，否则超长越南文会把整页撑破、卡片限高失效、底部按钮被挤出视口)。
   height 固定后 stage 的 flex:1 才是“视口减顶栏底栏”的确定高度，卡片 max-height:100% 才真正生效、超长卡内滚动。 */
.swipe-wrap { height: 100vh; height: 100dvh; overflow: hidden; }

/* 答题阶段（卡片风格） */
.swipe-quiz-title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; color: #fff; }
.swipe-quiz-scroll { flex: 1; overflow-y: auto; padding: 8px 16px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.swipe-quiz-card {
  background: #fff; border-radius: 22px; padding: 20px 18px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
/* 答题卡内复用通用 quiz 样式，仅微调外距 */
.swipe-quiz-card .quiz-block { margin: 0; }

/* 滑动课完成卡片（温暖收尾） */
.swipe-done-wrap { justify-content: center; }
.swipe-done {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 30px 20px;
}
.swipe-done-glow {
  font-size: 64px; line-height: 1; margin-bottom: 22px;
  animation: doneGlow 2.4s ease-in-out infinite;
}
@keyframes doneGlow {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255,255,255,.5)); }
  50%     { transform: scale(1.12); filter: drop-shadow(0 0 22px rgba(251,207,232,.9)); }
}
.swipe-done-title {
  font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 18px;
  letter-spacing: 1px;
}
.swipe-done-msg {
  font-size: 17px; line-height: 1.9; color: #F3EEFF; max-width: 420px;
  font-weight: 400;
}
.swipe-done-actions { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.swipe-done-back {
  color: rgba(255,255,255,.7); font-size: 15px; text-decoration: none;
  padding: 6px 12px;
}
.swipe-done-back:active { color: #fff; }

/* 完成卡片·再看一遍按钮 */
.swipe-done-replay {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  border-radius: 14px; min-height: 46px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.swipe-done-replay:active { transform: scale(.97); }

/* ============ 情绪管理 · 治愈系卡片墙 ============ */
.anchor-page.emotion-cat-page { padding: 0 !important; background: transparent; }
.anchor-page.emotion-cat-page #page-top,
.anchor-page.emotion-cat-page #bottom-bar { display: none !important; }

.emotion-wall {
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(170deg, #FBF7FF 0%, #F3F0FF 30%, #EEF4FF 60%, #FBF0F6 100%);
  padding: 0 18px 40px;
}
.emotion-wall-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 4px; padding-top: max(14px, env(safe-area-inset-top));
}
.emotion-wall-back {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(124,58,237,.08); color: #7C3AED;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.emotion-wall-head .lang { background: rgba(124,58,237,.08); color: #7C3AED; border:none; border-radius: 16px; padding: 7px 14px; font-size: 13px; font-weight: 600; }

.emotion-wall-hero { text-align: center; padding: 14px 10px 22px; }
.emotion-wall-emoji { font-size: 40px; margin-bottom: 8px; }
.emotion-wall-title { font-size: 21px; font-weight: 800; color: #4C1D95; margin: 0 0 8px; letter-spacing: .3px; }
.emotion-wall-tag { font-size: 14px; color: #8B7AA8; line-height: 1.6; margin: 0; max-width: 300px; margin: 0 auto; }

.emotion-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  grid-auto-rows: 158px;   /* 固定行高 → 所有卡片等高、网格整齐 */
}
.emotion-card {
  border-radius: 20px; padding: 16px 15px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 6px 18px rgba(124,58,237,.08);
  transition: transform .15s, box-shadow .15s;
  border: 1px solid rgba(255,255,255,.6);
}
.emotion-card:active { transform: scale(.97); box-shadow: 0 3px 10px rgba(124,58,237,.12); }
.emotion-card-heart {
  position: absolute; top: 12px; right: 14px; font-size: 17px; color: rgba(255,255,255,.85);
}
/* 新人必学角标：右上角醒目小药丸，引导新人先学这套 */
.emotion-card-req {
  position: absolute; top: 10px; right: 12px;
  background: rgba(255,255,255,.92); color: #E11D74;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
  padding: 3px 8px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
/* 标题固定最多 2 行，副标固定最多 2 行，超出省略号 → 高度统一 */
.emotion-card-title {
  font-size: 15.5px; font-weight: 700; color: #3D2C5C; line-height: 1.35;
  margin: 0 22px 7px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.emotion-card-sub {
  font-size: 12px; color: rgba(61,44,92,.6); line-height: 1.55; margin-top: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 6 组柔色渐变 */
.emotion-card.tint-peach  { background: linear-gradient(150deg, #FFE9DD, #FFD9C7); }
.emotion-card.tint-cream  { background: linear-gradient(150deg, #FFF6DE, #FBEBC0); }
.emotion-card.tint-mint   { background: linear-gradient(150deg, #DEF7EC, #C3EEDC); }
.emotion-card.tint-rose   { background: linear-gradient(150deg, #FFE4EC, #FBCBDD); }
.emotion-card.tint-haze   { background: linear-gradient(150deg, #E2ECFF, #CBDCFB); }
.emotion-card.tint-lilac  { background: linear-gradient(150deg, #EFE6FF, #DDC9FB); }

.emotion-wall-foot { text-align: center; color: #A99BC2; font-size: 13px; padding: 26px 0 8px; }

/* ============ 听歌猜曲 song_guess ============ */
.song-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 56px) 24px calc(env(safe-area-inset-bottom) + 28px);
  background: linear-gradient(165deg, #2B1055 0%, #4B2A8A 48%, #7B4BC9 100%);
  color: #fff; box-sizing: border-box;
}
.song-back {
  position: fixed; top: calc(env(safe-area-inset-top) + 14px); left: 16px;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.15); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5;
}
.song-progress { font-size: 14px; color: rgba(255,255,255,0.7); letter-spacing: 1px; margin-bottom: 18px; }
.song-disc {
  width: 168px; height: 168px; border-radius: 50%; margin: 6px 0 22px;
  background: repeating-radial-gradient(circle at center, #1a1a1a 0 6px, #2a2a2a 6px 7px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  animation: songSpin 4s linear infinite;
}
.song-disc.spin-paused { animation-play-state: paused; }
.song-disc-inner {
  width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle, #FF8AC2, #C44BD6);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
@keyframes songSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.song-play {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.95); color: #4B2A8A; font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3); margin-bottom: 10px;
}
.song-noaudio { color: rgba(255,255,255,0.6); font-size: 13px; margin-bottom: 10px; }
.song-hint { font-size: 13px; color: rgba(255,255,255,0.78); text-align: center; margin: 4px 0 12px; max-width: 320px; }
.song-q { font-size: 17px; font-weight: 700; margin: 8px 0 14px; text-align: center; }
.song-opts { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.song-opt {
  width: 100%; padding: 15px 18px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,0.12); border: 2px solid transparent; color: #fff;
  font-size: 15px; text-align: left; transition: all 0.15s;
}
.song-opt.picked { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.7); }
.song-opt.correct { background: rgba(52,211,153,0.32); border-color: #34D399; font-weight: 600; }
.song-opt.wrong { background: rgba(248,113,113,0.28); border-color: #F87171; }
.song-opt:disabled { cursor: default; }
.song-btn-primary {
  width: 100%; max-width: 360px; margin-top: 22px; padding: 15px; border: none; cursor: pointer;
  border-radius: 16px; font-size: 16px; font-weight: 700; color: #4B2A8A;
  background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.song-btn-primary.disabled { opacity: 0.4; cursor: default; }
.song-btn-ghost {
  width: 100%; max-width: 360px; margin-top: 10px; padding: 13px; cursor: pointer;
  border-radius: 16px; font-size: 15px; color: #fff;
  background: transparent; border: 1.5px solid rgba(255,255,255,0.4);
}
.song-done { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 12vh; width: 100%; max-width: 360px; }
.song-done-emoji { font-size: 56px; margin-bottom: 8px; }
.song-done-title { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.song-done-score { font-size: 44px; font-weight: 800; letter-spacing: 2px; margin-bottom: 10px; }
.song-done-praise { font-size: 15px; color: rgba(255,255,255,0.85); margin-bottom: 26px; }

/* ============ 图文案例集 gallery（化妆/舞蹈）============ */
.gal-intro { padding: 4px 16px 14px; color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.gal-list { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 32px; }
.gal-card {
  background: var(--surface, #fff); border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.gal-media { width: 100%; display: block; background: #f0f0f3; max-height: 340px; object-fit: cover; }
/* 视频（尤其竖屏舞蹈）：完整显示不裁切，黑底，限高防止竖屏太长撑爆屏幕 */
.gal-video {
  max-height: 70vh; object-fit: contain; background: #000;
  aspect-ratio: auto;
}
.gal-media-empty {
  height: 160px; display: flex; align-items: center; justify-content: center;
  color: #c2c2cc; object-fit: contain;
}
.gal-card-body { padding: 14px 16px 18px; }
.gal-card-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.gal-card-text { font-size: 14px; line-height: 1.75; color: var(--text-secondary); }

/* ===== 视频作业提交:真实文件选取 + 上传进度 ===== */
.video-upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 16px; margin-top: 4px;
  border: 2px dashed #d8b4f0; border-radius: 14px;
  background: #faf5ff; color: #7C3AED; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.video-upload-zone:active { background: #f3e8ff; border-color: #7C3AED; }
.video-upload-hint { font-size: 14px; font-weight: 600; }
.video-picked-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; margin-top: 4px;
  background: #faf5ff; border-radius: 12px; color: #5b21b6;
}
.video-picked-name { flex: 1; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-repick {
  border: none; background: #ede9fe; color: #7C3AED;
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer;
}
#video-progress-wrap { margin-top: 12px; }
.video-progress-bar { height: 8px; background: #ede9fe; border-radius: 6px; overflow: hidden; }
#video-progress-fill { height: 100%; background: linear-gradient(90deg, #a78bfa, #7C3AED); border-radius: 6px; transition: width .2s; }
.video-progress-text { margin-top: 6px; font-size: 12px; color: #7C3AED; text-align: center; font-weight: 600; }

/* ===== 复盘 MVP 开关 ===== */
.debrief-mvp-row {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 14px; padding: 11px 14px;
  border: 1.5px dashed #d8b4f0; border-radius: 12px;
  background: #faf5ff; color: #7C3AED; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: all .15s;
}
.debrief-mvp-row:active { background: #f3e8ff; }
.debrief-mvp-row.on {
  border-style: solid; border-color: #f59e0b;
  background: linear-gradient(135deg,#fff7ed,#fef3c7); color: #b45309;
}
.debrief-mvp-row .mvp-label { flex: 1; }
.debrief-mvp-row .mvp-pts {
  background: #f59e0b; color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}

/* ===== 工资条·逐场明细 ===== */
.ps-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 8px; font-size: 11.5px; color: #9ca3af; border-bottom: 1px solid #f0f0f3;
}
.ps-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid #f5f5f7; font-size: 13px;
}
.ps-row:last-child { border-bottom: none; }
.ps-date { color: #374151; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 56px; }
.ps-nums { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.ps-nums > span { min-width: 64px; text-align: right; }
.ps-head .ps-nums > span { min-width: 64px; }
.ps-gmv { color: #9333EA; }
.ps-comm { color: #16a34a; font-weight: 600; }

/* 首页「当前收益」卡可点(跳本月实时明细) */
.gmv-cell-link { cursor: pointer; position: relative; transition: background .15s; border-radius: 10px; }
.gmv-cell-link:active { background: rgba(124,58,237,.06); }
.gmv-cell-link .gmv-label i { color: #9333EA; opacity: .7; }