/* 暗黑模式规则已迁入 dark-mode-unified.css（原 components/card_actions.css） */
/**
 * 🎯 统一卡片功能按钮样式
 * 文件：css/web/components/card_actions.css
 * 用途：为样音和老师卡片提供统一的功能按钮样式
 * 适用于：.sample-actions 和 .teacher-actions
 * 
 * ✨ 优化版本 v2.0
 * - 添加 CSS 变量管理主题色
 * - 移除重复的客服样式（已在 customer-service-context.css）
 * - 优化代码组织和可维护性
 * 
 * 📅 最后更新：2026-01-13
 */

/* ==================== 防闪烁：样式初始化期间禁用过渡动画 ==================== */
/* card_actions.js 在 applyButtonStyleConfig 时临时为 html 添加此 class，结束后移除 */
html.card-style-init .sample-actions .action-icon,
html.card-style-init .teacher-actions .action-icon,
html.card-style-init .voice-actions .action-icon,
html.card-style-init .sample-actions .index-action-icon,
html.card-style-init .teacher-actions .index-action-icon,
html.card-style-init .voice-actions .index-action-icon,
html.card-style-init .sample-actions,
html.card-style-init .teacher-actions,
html.card-style-init .voice-actions {
    transition: none !important;
}

/* ==================== CSS 变量配置 ==================== */
:root {
    /* 主题色（与 TVCBOOK / 功能键统一 #818cf8；悬停背景 = 主色） */
    --card-primary-color: #818cf8;
    --card-primary-hover: #6366f1;
    --card-primary-shadow: rgba(129, 140, 248, 0.28);

    /* 🎨 后台可配置：图标颜色 / 悬停色 / 收藏色（由 card_actions.js 动态覆盖） */
    /* ⚠️ 这里的默认值必须与 card_actions.js 的 buttonStyleConfig 默认值保持一致（含 icon_color），避免首次渲染闪烁 */
    --card-icon-color: #71717a;
    --card-hover-color: #818cf8;      /* 默认悬停背景（与 --card-primary-color 同步由 JS 写入） */
    --card-collected-color: #ff9800;  /* 默认已收藏颜色（与 JS 默认对齐） */
    --card-collected-bg: rgba(255, 152, 0, 0.08);

    /* 中性色 */
    --card-text-primary: #18181b;
    --card-text-secondary: #52525b;
    --card-text-tertiary: #a1a1aa;
    --card-text-success: #2e7d32;

    /* 边框和背景色（下拉/宫格等 UI 仍用实线边，不跟卡片外轮廓 token） */
    --card-border: #e4e4e7;
    --card-border-hover: #d4d4d8;
    --card-bg-white: #fff;
    --card-bg-gray: #f4f4f5;
    --card-bg-light: #ecfdf5;
    --card-bg-success: #e8f5e9;

    /* 🎨 后台可配置：按钮尺寸（由 card_actions.js 动态覆盖） */
    --card-btn-size: 38px;
    --card-btn-size-tablet: 34px;
    --card-btn-size-mobile: 30px;
    --card-btn-gap: 14px;
    --card-btn-gap-tablet: 10px;
    --card-btn-gap-mobile: 8px;

    /* 🎨 后台可配置：图标大小 / 边框宽度 / 下拉菜单间距（由 card_actions.js 动态覆盖） */
    --card-icon-size: 19px;
    --card-border-width: 1px;              /* 0px = 无边框 */
    --card-dropdown-gap: 4px;             /* 宫格模式菜单项间距 */
    --card-dropdown-max-width: 212px;     /* 宫格容器最大宽度（JS 按列数估算；列宽按内容收缩） */
    --card-dropdown-item-padding-v: 8px;  /* 下拉菜单按钮内边距：上下 */
    --card-dropdown-item-padding-h: 12px; /* 下拉菜单按钮内边距：左右 */
    --card-dropdown-bg: #ffffff;
    --card-dropdown-ring: rgba(0, 0, 0, 0.10);
    --card-dropdown-text: #3f3f46;
    --card-dropdown-item-hover-bg: #ecfdf6;
    --card-dropdown-icon-color: #71717a;
    --card-dropdown-arrow: #ffffff;

    /* 圆角：50% = 正圆；px 值 = 圆角方形 */
    --card-icon-radius: 50%;
    --card-border-radius: 12px;
    --card-border-radius-small: 8px;
    --card-border-radius-large: 12px;

    /* 阴影 */
    --card-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.04);
    --card-shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.1);
    --card-shadow-large: 0 8px 24px rgba(0, 0, 0, 0.15);
}


/* ========== 快捷提示（全站 .action-icon、客服、样音/老师卡片、会员收藏工具栏等，由 card_actions.js initFastTitleTooltips 创建） ========== */
#card-action-tooltip.card-action-tooltip {
  position: fixed;
  z-index: 999999;
  max-width: min(240px, calc(100vw - 16px));
  padding: 4px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(33, 33, 33, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
  display: none;
  visibility: hidden;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

/* 头像外链：提示在头像右侧（JS 定位），文案左对齐 */
#card-action-tooltip.card-action-tooltip.card-action-tooltip--avatar {
  text-align: left;
}

#card-action-tooltip.card-action-tooltip.visible {
  display: block;
  visibility: visible;
}


/* ========== 基础容器 ========== */
.sample-actions,
.teacher-actions,
.voice-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--card-btn-gap);
  position: relative;
  padding-top: 0px;  /* 🎯 功能按钮区域顶部间距 */
}

/* ========== 单个按钮样式 ========== */
/* 🔒 限定作用域：只在卡片容器内生效，不污染全局 */
.sample-actions .action-icon,
.teacher-actions .action-icon,
.voice-actions .action-icon,
.sample-actions .index-action-icon,
.teacher-actions .index-action-icon,
.voice-actions .index-action-icon {
  width: var(--card-btn-size);
  height: var(--card-btn-size);
  border-radius: var(--card-icon-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  border: var(--card-border-width) solid var(--card-border);
  background: var(--card-bg-white);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--card-shadow-small);
  flex-shrink: 0;
}

.sample-actions .action-icon:hover,
.teacher-actions .action-icon:hover,
.voice-actions .action-icon:hover,
.sample-actions .index-action-icon:hover,
.teacher-actions .index-action-icon:hover,
.voice-actions .index-action-icon:hover {
  background-color: var(--card-hover-color);
  border-color: var(--card-hover-color);
  box-shadow: 0 2px 6px var(--card-primary-shadow);
}

.sample-actions .action-icon:hover svg,
.teacher-actions .action-icon:hover svg,
.voice-actions .action-icon:hover svg,
.sample-actions .index-action-icon:hover svg,
.teacher-actions .index-action-icon:hover svg,
.voice-actions .index-action-icon:hover svg {
  stroke: #ffffff; /* 🎨 悬停时图标始终为白色，确保在主题色背景上清晰可见 */
  fill: #ffffff; /* 🎨 同时设置fill，确保所有类型的图标都显示 */
  color: #ffffff; /* 🎨 设置color属性作为备用 */
}

.sample-actions .action-icon svg,
.teacher-actions .action-icon svg,
.voice-actions .action-icon svg,
.sample-actions .index-action-icon svg,
.teacher-actions .index-action-icon svg,
.voice-actions .index-action-icon svg {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  fill: none;
  stroke: var(--card-icon-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
  flex-shrink: 0;
}

/* ========== 带文字标签的按钮 ========== */
.sample-actions .action-icon.with-label,
.teacher-actions .action-icon.with-label,
.voice-actions .action-icon.with-label {
  width: auto;
  min-width: 60px;
  padding: 0 12px;
  gap: 6px;
}

.sample-actions .action-icon .action-label,
.teacher-actions .action-icon .action-label,
.voice-actions .action-icon .action-label {
  font-size: 12px;
  color: var(--card-text-secondary);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.sample-actions .action-icon.with-label:hover .action-label,
.teacher-actions .action-icon.with-label:hover .action-label,
.voice-actions .action-icon.with-label:hover .action-label {
  color: #ffffff; /* 🎨 悬停时文字始终为白色 */
}

/* ========== 收藏按钮状态 ========== */
/* 统一使用深褐红色填充图标 */
/* ========== 已收藏状态 - 所有样音和老师按钮 ========== */
.sample-actions .action-icon.collected,
.teacher-actions .action-icon.collected,
.voice-actions .action-icon.collected,
.sample-actions .collection_sample.collected,
.teacher-actions .collection_sample.collected,
.voice-actions .collection_sample.collected,
.action-icon.collection_sample.collected,
.action-icon.collection_teacher.collected {
  background-color: var(--card-bg-white);
  border-color: var(--card-border);
}

/* 已收藏状态的图标颜色 - 深红色 */
.sample-actions .action-icon.collected svg,
.teacher-actions .action-icon.collected svg,
.voice-actions .action-icon.collected svg,
.sample-actions .collection_sample.collected svg,
.teacher-actions .collection_sample.collected svg,
.voice-actions .collection_sample.collected svg,
.action-icon.collection_sample.collected svg,
.action-icon.collection_teacher.collected svg {
  fill: var(--card-collected-color);
  stroke: var(--card-collected-color);
  color: var(--card-collected-color);
}

/* 悬停效果 - 使用后台配置的悬停色 */
.sample-actions .action-icon.collected:hover,
.teacher-actions .action-icon.collected:hover,
.voice-actions .action-icon.collected:hover,
.sample-actions .collection_sample.collected:hover,
.teacher-actions .collection_sample.collected:hover,
.voice-actions .collection_sample.collected:hover,
.action-icon.collection_sample.collected:hover,
.action-icon.collection_teacher.collected:hover {
  background-color: var(--card-hover-color);
  border-color: var(--card-hover-color);
}

/* 悬停时的图标颜色 - 白色 */
.sample-actions .action-icon.collected:hover svg,
.teacher-actions .action-icon.collected:hover svg,
.voice-actions .action-icon.collected:hover svg,
.sample-actions .collection_sample.collected:hover svg,
.teacher-actions .collection_sample.collected:hover svg,
.voice-actions .collection_sample.collected:hover svg,
.action-icon.collection_sample.collected:hover svg,
.action-icon.collection_teacher.collected:hover svg {
  fill: #ffffff; /* 🎨 悬停时图标始终为白色 */
  stroke: #ffffff;
  color: #ffffff;
}

/* ========== 更多菜单容器 ========== */
.sample-actions .action-more,
.teacher-actions .action-more,
.voice-actions .action-more {
  position: relative;
  /* 扩大交互区域，防止卡片移动时鼠标离开触发区域 */
  padding: 4px;
  margin: -4px;
  /* 按钮本身使用普通层级，只有下拉菜单需要高层级 */
  z-index: 1;
}

/* 更多按钮触发器 - 确保继承 action-icon 的样式 */
.sample-actions .action-more-trigger,
.teacher-actions .action-more-trigger,
.voice-actions .action-more-trigger {
  position: relative;
  /* 继承 action-icon 的所有样式（已在上方定义） */
}

/* 更多按钮图标的圆点 - 默认深灰色（与其他图标一致） */
/* 使用更高优先级选择器覆盖全局样式 */
.sample-actions .action-more .action-more-trigger svg,
.teacher-actions .action-more .action-more-trigger svg,
.voice-actions .action-more .action-more-trigger svg,
.sample-actions .action-icon.action-more-trigger svg,
.teacher-actions .action-icon.action-more-trigger svg,
.voice-actions .action-icon.action-more-trigger svg {
  fill: none;
  stroke: var(--card-text-secondary);
}

.sample-actions .action-more .action-more-trigger svg circle,
.teacher-actions .action-more .action-more-trigger svg circle,
.voice-actions .action-more .action-more-trigger svg circle,
.sample-actions .action-icon.action-more-trigger svg circle,
.teacher-actions .action-icon.action-more-trigger svg circle,
.voice-actions .action-icon.action-more-trigger svg circle {
  fill: var(--card-text-secondary);
  stroke: none;
  transition: all 0.2s ease;
}

/* 🎯 更多按钮悬停状态 - 与普通功能按钮同一套主题色 */
/* 使用更高优先级选择器覆盖 teacher_list.css 中的全局样式 */
.sample-actions .action-more .action-more-trigger:hover,
.teacher-actions .action-more .action-more-trigger:hover,
.voice-actions .action-more .action-more-trigger:hover,
.sample-actions .action-icon.action-more-trigger:hover,
.teacher-actions .action-icon.action-more-trigger:hover,
.voice-actions .action-icon.action-more-trigger:hover {
  background-color: var(--card-primary-color);
  border-color: var(--card-primary-color);
  box-shadow: 0 2px 6px var(--card-primary-shadow);
}

/* 更多按钮图标（三个圆点）悬停时变白色 - 与其他图标一致 */
.sample-actions .action-more .action-more-trigger:hover svg,
.teacher-actions .action-more .action-more-trigger:hover svg,
.voice-actions .action-more .action-more-trigger:hover svg,
.sample-actions .action-icon.action-more-trigger:hover svg,
.teacher-actions .action-icon.action-more-trigger:hover svg,
.voice-actions .action-icon.action-more-trigger:hover svg {
  color: var(--card-bg-white);
  stroke: var(--card-bg-white);
}

.sample-actions .action-more .action-more-trigger:hover svg circle,
.teacher-actions .action-more .action-more-trigger:hover svg circle,
.voice-actions .action-more .action-more-trigger:hover svg circle,
.sample-actions .action-icon.action-more-trigger:hover svg circle,
.teacher-actions .action-icon.action-more-trigger:hover svg circle,
.voice-actions .action-icon.action-more-trigger:hover svg circle {
  fill: var(--card-bg-white);
  stroke: none;
}

/* 更多按钮激活状态 */
.sample-actions .action-more-trigger:active,
.teacher-actions .action-more-trigger:active,
.voice-actions .action-more-trigger:active {
  transform: scale(0.95);
}

/* 当菜单打开时，更多按钮保持高亮，并提升容器层级 */
.sample-actions .action-more:has(.action-dropdown.show),
.teacher-actions .action-more:has(.action-dropdown.show),
.voice-actions .action-more:has(.action-dropdown.show) {
  z-index: 50000; /* 🔧 降低层级，避免覆盖客服（客服为100000+） */
}

/* 🔥 确保卡片在菜单显示时不会裁剪菜单，并且在所有兄弟元素之上 */
.sample-item:has(.action-dropdown.show),
.sample-card-item:has(.action-dropdown.show),
.voice-card:has(.action-dropdown.show),
.SoundBox:has(.action-dropdown.show),
.sound-item:has(.action-dropdown.show),
.index-sample-item:has(.action-dropdown.show),
.Teacher:has(.action-dropdown.show),
.teacher-card-item:has(.action-dropdown.show),
.teacher-item:has(.action-dropdown.show),
.index-teacher-item:has(.action-dropdown.show),
.discount-teacher-card:has(.action-dropdown.show),
.discount-teacher-inner:has(.action-dropdown.show) {
  z-index: 50000; /* 🔧 降低层级，避免覆盖客服（客服为100000+） */
  overflow: visible;
  position: relative; /* 🔥 确保 z-index 生效 */
  transform: none; /* 🔥 避免创建新的堆叠上下文 */
}

.sample-actions .action-more:has(.action-dropdown.show) .action-more-trigger,
.teacher-actions .action-more:has(.action-dropdown.show) .action-more-trigger,
.voice-actions .action-more:has(.action-dropdown.show) .action-more-trigger,
.sample-actions .action-more:has(.action-dropdown:hover) .action-more-trigger,
.teacher-actions .action-more:has(.action-dropdown:hover) .action-more-trigger,
.voice-actions .action-more:has(.action-dropdown:hover) .action-more-trigger {
  background-color: var(--card-primary-color);
  border-color: var(--card-primary-color);
  box-shadow: 0 2px 6px var(--card-primary-shadow);
}

.sample-actions .action-more:has(.action-dropdown.show) .action-more-trigger svg circle,
.teacher-actions .action-more:has(.action-dropdown.show) .action-more-trigger svg circle,
.voice-actions .action-more:has(.action-dropdown.show) .action-more-trigger svg circle,
.sample-actions .action-more:has(.action-dropdown:hover) .action-more-trigger svg circle,
.teacher-actions .action-more:has(.action-dropdown:hover) .action-more-trigger svg circle,
.voice-actions .action-more:has(.action-dropdown:hover) .action-more-trigger svg circle {
  fill: var(--card-bg-white);
  stroke: none;
}

/* ========== 下拉菜单 ========== */
/* 🎯 统一使用绝对定位，始终在按钮上方（自适应方案） */
/* 让更多按钮容器成为定位参考点 */
.sample-actions .action-more,
.teacher-actions .action-more,
.voice-actions .action-more {
  position: relative;
}

.sample-actions .action-dropdown,
.teacher-actions .action-dropdown,
.voice-actions .action-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  left: auto;
  top: auto;

  background: var(--card-dropdown-bg, #ffffff);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px var(--card-dropdown-ring, rgba(0, 0, 0, 0.10)),
    0 4px 10px rgba(0, 0, 0, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.18);
  filter: none;
  min-width: 120px;
  max-width: 200px;
  padding: 6px;
  z-index: 50000;
  border: none;
  
  /* 默认隐藏 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: block;
  
  /* 平滑过渡效果 */
  transition: opacity 0.2s ease, 
              visibility 0.2s ease;
  
  /* 防止内容溢出 */
  max-height: 80vh;
  overflow: visible;
}

/* 显示菜单 - 由 JS 的 .show 类控制 */
.sample-actions .action-dropdown.show,
.teacher-actions .action-dropdown.show,
.voice-actions .action-dropdown.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 🔧 移除桥接区域：只有鼠标真正在按钮上才触发菜单 */
/* 桥接区域会导致鼠标在按钮下方很远的地方也能触发菜单 */
.sample-actions .action-more::after,
.teacher-actions .action-more::after,
.voice-actions .action-more::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: transparent;
  z-index: 999;
  pointer-events: none; /* 🔧 不拦截鼠标事件，让hover事件正常触发 */
}

/* 🔻 三角：边框三角形 + 底边重叠 1px；三角不加 box-shadow（避免接缝双线），主阴影只在父级 */
.sample-actions .action-dropdown::after,
.teacher-actions .action-dropdown::after,
.voice-actions .action-dropdown::after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: auto;
  right: 14px;
  bottom: auto;
  margin-top: -1px;
  width: 0;
  height: 0;
  border: none;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--card-dropdown-arrow, var(--card-dropdown-bg, #ffffff));
  transform: none;
  box-shadow: none;
  filter: none;
  z-index: 1;
  pointer-events: none;
}

/* 向下展开（菜单在按钮下方）：三角移到菜单顶部、朝上指向按钮（由 card_actions.js 加类） */
.sample-actions .action-dropdown.action-dropdown--open-down::after,
.teacher-actions .action-dropdown.action-dropdown--open-down::after,
.voice-actions .action-dropdown.action-dropdown--open-down::after {
  top: -7px !important;
  bottom: auto !important;
  left: auto !important;
  right: 14px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 0 7px 8px 7px !important;
  border-color: transparent transparent var(--card-dropdown-arrow, var(--card-dropdown-bg, #ffffff)) transparent !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 简化动画（不再需要复杂的 transform 动画） */

/* ========== 下拉菜单项 - ElevenLabs 风格 ========== */
.sample-actions .action-dropdown-item,
.teacher-actions .action-dropdown-item,
.voice-actions .action-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左对齐 - 更符合阅读习惯 */
  gap: 8px;
  padding: var(--card-dropdown-item-padding-v) var(--card-dropdown-item-padding-h);
  margin: 2px 0;
  color: var(--card-dropdown-text, #3f3f46);
  text-decoration: none;
  transition: all 0.15s ease;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* 移除分隔线 - 更简洁 */
.sample-actions .action-dropdown-item:not(:last-child)::after,
.teacher-actions .action-dropdown-item:not(:last-child)::after,
.voice-actions .action-dropdown-item:not(:last-child)::after {
  display: none;
}

/* 移除左侧装饰条 - 更简洁 */
.sample-actions .action-dropdown-item::before,
.teacher-actions .action-dropdown-item::before,
.voice-actions .action-dropdown-item::before {
  display: none;
}

.sample-actions .action-dropdown-item:hover,
.teacher-actions .action-dropdown-item:hover,
.voice-actions .action-dropdown-item:hover {
  background: var(--card-dropdown-item-hover-bg, #ecfdf6);
  transform: none;
}

.sample-actions .action-dropdown-item:active,
.teacher-actions .action-dropdown-item:active,
.voice-actions .action-dropdown-item:active {
  background: #e7e5e4;
  transform: none;
}

.sample-actions .action-dropdown-item svg.icon,
.teacher-actions .action-dropdown-item svg.icon,
.voice-actions .action-dropdown-item svg.icon {
  width: 16px;
  height: 16px;
  stroke: var(--card-dropdown-icon-color, #71717a);
  fill: none;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

/* 某些图标需要 fill（如圆点图标） */
.sample-actions .action-dropdown-item svg.icon circle,
.teacher-actions .action-dropdown-item svg.icon circle,
.voice-actions .action-dropdown-item svg.icon circle {
  fill: var(--card-text-secondary);
  stroke: none;
}

/* 菜单项图标的其他子元素（path, polyline, line等）使用 stroke */
.sample-actions .action-dropdown-item svg.icon path,
.sample-actions .action-dropdown-item svg.icon polyline,
.sample-actions .action-dropdown-item svg.icon line,
.teacher-actions .action-dropdown-item svg.icon path,
.teacher-actions .action-dropdown-item svg.icon polyline,
.teacher-actions .action-dropdown-item svg.icon line,
.voice-actions .action-dropdown-item svg.icon path,
.voice-actions .action-dropdown-item svg.icon polyline,
.voice-actions .action-dropdown-item svg.icon line {
  stroke: var(--card-text-secondary);
  fill: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 某些path需要fill（如星形收藏图标） */
.sample-actions .action-dropdown-item svg.icon polygon,
.teacher-actions .action-dropdown-item svg.icon polygon,
.voice-actions .action-dropdown-item svg.icon polygon {
  stroke: var(--card-text-secondary);
  fill: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sample-actions .action-dropdown-item:hover svg.icon,
.teacher-actions .action-dropdown-item:hover svg.icon,
.voice-actions .action-dropdown-item:hover svg.icon {
  transform: none;
}

.sample-actions .action-dropdown-item:hover svg.icon circle,
.teacher-actions .action-dropdown-item:hover svg.icon circle,
.voice-actions .action-dropdown-item:hover svg.icon circle {
  fill: #3f3f46;
  stroke: none;
}

.sample-actions .action-dropdown-item:hover svg.icon path,
.sample-actions .action-dropdown-item:hover svg.icon polyline,
.sample-actions .action-dropdown-item:hover svg.icon line,
.sample-actions .action-dropdown-item:hover svg.icon polygon,
.teacher-actions .action-dropdown-item:hover svg.icon path,
.teacher-actions .action-dropdown-item:hover svg.icon polyline,
.teacher-actions .action-dropdown-item:hover svg.icon line,
.teacher-actions .action-dropdown-item:hover svg.icon polygon,
.voice-actions .action-dropdown-item:hover svg.icon path,
.voice-actions .action-dropdown-item:hover svg.icon polyline,
.voice-actions .action-dropdown-item:hover svg.icon line,
.voice-actions .action-dropdown-item:hover svg.icon polygon {
  stroke: #3f3f46;
}

.sample-actions .action-dropdown-item span,
.teacher-actions .action-dropdown-item span,
.voice-actions .action-dropdown-item span {
  font-size: 12px;
  white-space: nowrap;
  color: var(--card-dropdown-text, #3f3f46);
  transition: color 0.15s ease;
}

.sample-actions .action-dropdown-item:hover span,
.teacher-actions .action-dropdown-item:hover span,
.voice-actions .action-dropdown-item:hover span {
  color: var(--card-dropdown-text, #1f2937);
}

/* 已收藏状态的菜单项 - 特殊样式 */
.sample-actions .action-dropdown-item.collected svg.icon polygon,
.teacher-actions .action-dropdown-item.collected svg.icon polygon,
.voice-actions .action-dropdown-item.collected svg.icon polygon {
  fill: var(--card-collected-color);
  stroke: var(--card-collected-color);
}

.sample-actions .action-dropdown-item.collected:hover,
.teacher-actions .action-dropdown-item.collected:hover,
.voice-actions .action-dropdown-item.collected:hover {
  background: var(--card-collected-bg);
}

.sample-actions .action-dropdown-item.collected:hover::before,
.teacher-actions .action-dropdown-item.collected:hover::before,
.voice-actions .action-dropdown-item.collected:hover::before {
  background: var(--card-collected-color);
}

.sample-actions .action-dropdown-item.collected:hover svg.icon polygon,
.teacher-actions .action-dropdown-item.collected:hover svg.icon polygon,
.voice-actions .action-dropdown-item.collected:hover svg.icon polygon {
  fill: var(--card-primary-color);
  stroke: var(--card-primary-color);
}

.sample-actions .action-dropdown-item.collected:hover span,
.teacher-actions .action-dropdown-item.collected:hover span,
.voice-actions .action-dropdown-item.collected:hover span {
  color: var(--card-primary-color);
}

/* ========== 🔲 宫格模式下拉菜单（body.action-dropdown-grid 时激活） ========== */

/* 下拉容器：列宽按内容，无 52px 下限；内边距完全由 --card-dropdown-item-padding-* 决定 */
body.action-dropdown-grid .sample-actions .action-dropdown,
body.action-dropdown-grid .teacher-actions .action-dropdown,
body.action-dropdown-grid .voice-actions .action-dropdown {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  gap: var(--card-dropdown-gap);
  padding: 10px;
  min-width: unset;
  max-width: var(--card-dropdown-max-width);
  width: max-content;
  justify-items: stretch;
}

/* 宫格项：不设 min-width，总尺寸 = 内容 + 配置的上下/左右 padding（border-box） */
body.action-dropdown-grid .sample-actions .action-dropdown-item,
body.action-dropdown-grid .teacher-actions .action-dropdown-item,
body.action-dropdown-grid .voice-actions .action-dropdown-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: var(--card-dropdown-item-padding-v) var(--card-dropdown-item-padding-h);
  margin: 0;
  box-sizing: border-box;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  border-radius: 8px;
  text-align: center;
}

/* 宫格模式：图标稍大 */
body.action-dropdown-grid .sample-actions .action-dropdown-item svg.icon,
body.action-dropdown-grid .teacher-actions .action-dropdown-item svg.icon,
body.action-dropdown-grid .voice-actions .action-dropdown-item svg.icon {
  width: 20px;
  height: 20px;
}

/* 宫格模式：文字换行允许，截断长字（与项宽 max-content 配合） */
body.action-dropdown-grid .sample-actions .action-dropdown-item span,
body.action-dropdown-grid .teacher-actions .action-dropdown-item span,
body.action-dropdown-grid .voice-actions .action-dropdown-item span {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48px;
  display: block;
}

/* ========================================================================
   🌟 全局收藏图标统一样式（适用于所有页面）
   ======================================================================== */

/* 所有收藏按钮的已收藏状态 - 深褐红色 #551018 */
.action-icon.collected svg,
.index-action-icon.collected svg,
.discount-teacher-actions .action-icon.collected svg,
.voice-actions .action-icon.collected svg,
.order-action-icon.collected svg,
.collection-sample.collected svg,
.cancel-collection-sample svg,
.collection_teacher.collected svg,
.addBtn3.active svg,
.icon-star.filled {
  fill: var(--card-collected-color);
  stroke: var(--card-collected-color);
}

/* 老式文字按钮的已收藏状态 */
.voice-action-btn.collected,
.voice-action-btn.collection_teacher.collected,
.discount-action-btn.collected,
.order-voice-action-btn.collected,
.collection_teacher.collected,
.cancel-collection-sample {
  color: var(--card-collected-color);
}

/* 收藏按钮背景保持白色 */
.action-icon.collected,
.index-action-icon.collected {
  background: var(--card-bg-white);
  border-color: var(--card-border);
}

/* 悬停时变绿色 */
.action-icon.collected:hover,
.index-action-icon.collected:hover {
  background-color: var(--card-primary-color);
  border-color: var(--card-primary-color);
}

.action-icon.collected:hover svg,
.index-action-icon.collected:hover svg {
  fill: var(--card-bg-white);
  stroke: var(--card-bg-white);
}

/* ========================================
   📤 分享弹窗样式（全局统一）
   功能：配合 include/share_modal.php 使用
   ======================================== */

/* 分享弹窗遮罩 - 使用 flexbox 居中 */
.share-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  pointer-events: none;
}

.share-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 分享弹窗内容 - 居中显示，不占满屏幕 */
.share-modal-content {
  background-color: var(--card-bg-white);
  padding: 48px 40px 40px;
  border: none;
  border-radius: 20px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: shareModalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* 关闭按钮 */
.share-modal-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--card-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.share-modal-close:hover {
  color: var(--card-text-primary);
  background: var(--card-bg-gray);
  transform: rotate(90deg);
}

/* 二维码区域 */
.share-qr-section {
  text-align: center;
  margin-bottom: 36px;
}

.share-qr-hint {
  margin: 16px 0 0 0;
  font-size: 14px;
  color: var(--card-text-secondary);
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* 二维码容器 */
.qrcode-container {
  display: inline-block;
  padding: 20px;
  background: var(--card-bg-white);
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.qrcode-container img {
  display: block;
  border-radius: 4px;
}

/* 复制链接区域 */
.share-link-section {
  margin: 0;
}

.share-link-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.share-link-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--card-border-radius);
  font-size: 14px;
  color: var(--card-text-secondary);
  background: #f9f9f9;
  outline: none;
}

.share-copy-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--card-primary-color) 0%, var(--card-primary-hover) 100%);
  color: white;
  border: none;
  border-radius: var(--card-border-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.share-copy-btn:hover {
  background: linear-gradient(135deg, var(--card-primary-hover) 0%, var(--card-primary-color) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--card-primary-shadow);
}

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

.copy-btn-icon {
  width: 16px;
  height: 16px;
}

/* 复制成功提示 */
.copy-success-msg {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--card-bg-success);
  border-radius: var(--card-border-radius);
  color: var(--card-text-success);
  font-size: 13px;
  animation: fadeInScale 0.3s ease;
}

.copy-success-msg.show {
  display: flex;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 移动端简化提示弹窗 */
.share-copied-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.share-copied-modal.show {
  display: flex;
  opacity: 1;
}

.share-copied-content {
  background: white;
  border-radius: 16px;
  padding: 32px 28px;
  width: 85%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: shareModalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.share-copied-icon {
  margin-bottom: 16px;
  color: var(--card-primary-color);
}

.share-copied-icon svg {
  width: 48px;
  height: 48px;
}

.share-copied-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--card-text-primary);
  margin: 0 0 12px 0;
}

.share-copied-text {
  font-size: 14px;
  color: var(--card-text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.share-copied-text strong {
  color: var(--card-primary-color);
  font-weight: 600;
}

.share-copied-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--card-primary-color) 0%, var(--card-primary-hover) 100%);
  color: white;
  border: none;
  border-radius: var(--card-border-radius);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-copied-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--card-primary-shadow);
}

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

/* ========================================
   📤 分享预览弹窗样式（动态弹窗）
   参考：teacher_price_popup.css 的架构
   ======================================== */

/* 弹窗遮罩层 */
.share-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* 弹窗内容容器 */
.share-preview-content {
  background: white;
  border-radius: var(--card-border-radius);
  padding: 24px;
  width: 75%;
  max-width: 420px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

/* 成功提示区域 */
.share-preview-header {
  text-align: center;
  margin-bottom: 18px;
}

.share-preview-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: var(--card-primary-color);
  border-radius: 50%;
  line-height: 36px;
  margin-bottom: 10px;
  color: white;
  font-size: 20px;
}

.share-preview-title {
  font-size: 16px;
  color: var(--card-text-primary);
  margin: 0;
  font-weight: 600;
}

/* 文本内容区 */
.share-preview-body {
  background: var(--card-bg-light);
  border-radius: var(--card-border-radius-small);
  padding: 14px;
  margin-bottom: 14px;
}

.share-preview-text {
  font-size: 13px;
  color: var(--card-text-primary);
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0;
}

/* 按钮区域 */
.share-preview-footer {
  text-align: center;
}

.share-preview-btn {
  padding: 10px 32px;
  background: var(--card-primary-color);
  color: white;
  border: none;
  border-radius: var(--card-border-radius-small);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.share-preview-btn:hover {
  background: var(--card-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--card-primary-shadow);
}

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

/* share-handler.js 额外需要的样式 */
.share-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.share-preview-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--card-text-tertiary);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.share-preview-close:hover {
  background: var(--card-bg-gray);
  color: var(--card-text-primary);
}

.share-preview-tip {
  font-size: 13px;
  color: var(--card-text-secondary);
  margin: 0 0 12px 0;
  text-align: center;
}

.share-preview-url {
  display: flex;
  gap: 8px;
}

.share-preview-url input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: var(--card-border-radius-small);
  font-size: 13px;
  color: var(--card-text-secondary);
  background: white;
}

.share-copy-url-btn {
  padding: 10px 20px;
  background: var(--card-primary-color);
  color: white;
  border: none;
  border-radius: var(--card-border-radius-small);
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.2s;
}

.share-copy-url-btn:hover {
  background: var(--card-primary-hover);
}

.share-copy-url-btn:active {
  transform: scale(0.95);
}

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

/* ========== 响应式：平板及以下 ========== */
@media (max-width: 768px) {
  /* 卡片按钮 */
  .sample-actions,
  .teacher-actions,
  .voice-actions {
    gap: var(--card-btn-gap-tablet);
  }
  
  .sample-actions .action-icon,
  .teacher-actions .action-icon,
  .voice-actions .action-icon {
    width: var(--card-btn-size-tablet);
    height: var(--card-btn-size-tablet);
  }
  
  .sample-actions .action-icon svg,
  .teacher-actions .action-icon svg,
  .voice-actions .action-icon svg {
    width: 17px;
    height: 17px;
  }
  
  .sample-actions .action-icon.with-label,
  .teacher-actions .action-icon.with-label,
  .voice-actions .action-icon.with-label {
    min-width: 55px;
    padding: 0 10px;
  }
  
  .sample-actions .action-icon .action-label,
  .teacher-actions .action-icon .action-label,
  .voice-actions .action-icon .action-label {
    font-size: 11px;
  }
  
  /* 分享弹窗 */
  .share-modal-content {
    width: 92%;
    max-width: 380px;
    padding: 40px 28px 32px;
  }
  
  .share-qr-section {
    margin-bottom: 28px;
  }
  
  .share-link-input {
    font-size: 13px;
    padding: 10px 12px;
  }
  
  .share-copy-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
  
  /* 分享预览弹窗 */
  .share-preview-content {
    width: 85%;
    max-width: 380px;
    padding: 20px;
  }
}

/* ========== 响应式：手机 ========== */
@media (max-width: 480px) {
  /* 卡片按钮 */
  .sample-actions,
  .teacher-actions,
  .voice-actions {
    gap: var(--card-btn-gap-mobile);
  }
  
  .sample-actions .action-icon,
  .teacher-actions .action-icon,
  .voice-actions .action-icon {
    width: var(--card-btn-size-mobile);
    height: var(--card-btn-size-mobile);
    border-radius: var(--card-icon-radius);
  }
  
  .sample-actions .action-icon svg,
  .teacher-actions .action-icon svg,
  .voice-actions .action-icon svg {
    width: 20px;
    height: 20px;
  }
  
  /* 移动端：同样使用绝对定位在按钮上方 */
  .sample-actions .action-dropdown,
  .teacher-actions .action-dropdown,
  .voice-actions .action-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    top: auto;
    min-width: 140px;
    width: auto;
    padding: 8px 0;
    border-radius: 10px;
    max-height: 60vh;
    overflow: visible;
  }
  
  /* 移动端菜单项：紧凑排列 */
  .sample-actions .action-dropdown-item,
  .teacher-actions .action-dropdown-item,
  .voice-actions .action-dropdown-item {
    padding: 6px 16px;
    font-size: 14px;
    gap: 10px;
    white-space: nowrap;
  }
  
  /* 移动端图标 */
  .sample-actions .action-dropdown-item svg,
  .teacher-actions .action-dropdown-item svg,
  .voice-actions .action-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  
  /* 移动端文字 */
  .sample-actions .action-dropdown-item span,
  .teacher-actions .action-dropdown-item span,
  .voice-actions .action-dropdown-item span {
    font-size: 14px;
  }
  
  /* 移动端三角（与桌面同一套边框三角 + top:100%） */
  .sample-actions .action-dropdown::after,
  .teacher-actions .action-dropdown::after,
  .voice-actions .action-dropdown::after {
    top: 100%;
    bottom: auto;
    right: 20px;
    margin-top: -1px;
  }

  .sample-actions .action-dropdown.action-dropdown--open-down::after,
  .teacher-actions .action-dropdown.action-dropdown--open-down::after,
  .voice-actions .action-dropdown.action-dropdown--open-down::after {
    right: 20px !important;
  }
  
  /* 分享弹窗 */
  .share-modal-content {
    width: 75%;
    max-width: 340px;
    padding: 36px 24px 28px;
  }
  
  .qrcode-container {
    padding: 16px;
  }
  
  .share-link-wrapper {
    flex-direction: column;
  }
  
  .share-copy-btn {
    width: 100%;
    justify-content: center;
  }
  
  /* 分享预览弹窗 */
  .share-preview-content {
    width: 75%;
    max-width: 340px;
    padding: 20px;
  }
  
  .share-preview-icon {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
  }
  
  .share-preview-title {
    font-size: 15px;
  }
  
  .share-preview-text {
    font-size: 12px;
  }
  
  .share-preview-btn {
    padding: 8px 24px;
    font-size: 13px;
  }
}











/* ==================== 无障碍优化 ==================== */
.sample-actions .action-icon:focus,
.teacher-actions .action-icon:focus,
.voice-actions .action-icon:focus {
  outline: 2px solid var(--card-primary-color);
  outline-offset: 2px;
}

.sample-actions .action-dropdown-item:focus,
.teacher-actions .action-dropdown-item:focus,
.voice-actions .action-dropdown-item:focus {
  outline: none;
  background: var(--card-bg-gray);
}


/* ==================== 打印样式 ==================== */
@media print {
  .sample-actions,
  .teacher-actions,
  .voice-actions {
    display: none;
  }
}

/* ==================== 文件结束 ==================== */
/* 优化版本 v2.1 - 2026-01-28 */
/* 文件大小：从 2101 行 → 1289 行（-39%） */
/* 移除了 812 行重复的客服样式 */
/* 添加了 CSS 变量管理主题色 */

/* ========================================
   🔧 紧急修复：悬停时图标必须显示为白色
   优先级最高，放在文件末尾确保覆盖所有其他样式
   ======================================== */

/* 所有功能按钮悬停时的图标颜色 */
.sample-actions .action-icon:hover svg,
.teacher-actions .action-icon:hover svg,
.voice-actions .action-icon:hover svg,
.sample-actions .index-action-icon:hover svg,
.teacher-actions .index-action-icon:hover svg,
.voice-actions .index-action-icon:hover svg,
.sound-list-container .Sound .Operate a:hover svg,
.sound-list-container .Sound .Operate a:hover .icon-order,
.sound-list-container .Sound .Operate a:hover .icon-download,
.sound-list-container .Sound .Operate a:hover .icon-star,
.index-action-icon:hover svg,
.action-icon:hover svg {
    stroke: #ffffff;
    fill: #ffffff;
    color: #ffffff;
}

/* 已收藏状态悬停时的图标颜色 */
.sample-actions .action-icon.collected:hover svg,
.teacher-actions .action-icon.collected:hover svg,
.voice-actions .action-icon.collected:hover svg,
.action-icon.collected:hover svg,
.collection_sample.collected:hover svg,
.collection_teacher.collected:hover svg {
    stroke: #ffffff;
}

/* ==================== 按钮圆形背景：按场景显示/隐藏（由 card_actions.js + 后台开关） ==================== */
/* 注意：仅用 background-color，勿用 background 简写，否则会盖住 :hover 的悬停底色 */

html.card-actions-teacher-no-bg .teacher-actions .action-icon:not(:hover),
html.card-actions-teacher-no-bg .teacher-actions .index-action-icon:not(:hover),
html.card-actions-teacher-no-bg .Teacher .teacher-actions .action-icon:not(:hover),
html.card-actions-teacher-no-bg .teacher-card-item .teacher-actions .action-icon:not(:hover),
html.card-actions-teacher-no-bg .teacher-item .teacher-actions .action-icon:not(:hover),
html.card-actions-teacher-no-bg #teacher_list .teacher-actions .action-icon:not(:hover),
html.card-actions-teacher-no-bg .discount-teacher-card .teacher-actions .action-icon:not(:hover),
html.card-actions-teacher-no-bg .voice-card .teacher-actions .action-icon:not(:hover) {
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html.card-actions-sample-card-no-bg #sound_list.card-view .sample-actions .action-icon:not(:hover),
html.card-actions-sample-card-no-bg #sound_list.card-view .sample-actions .index-action-icon:not(:hover),
html.card-actions-sample-card-no-bg .samples-grid.card-view .sample-actions .action-icon:not(:hover),
html.card-actions-sample-card-no-bg .samples-grid.card-view .sample-actions .index-action-icon:not(:hover),
html.card-actions-sample-card-no-bg .TeacherHome .samples-grid.card-view .sample-actions .action-icon:not(:hover) {
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 样音列表：一列 list-view、两列默认网格（非 card-view）— 默认无底，悬停仍显示主题色圆底 */
html.card-actions-sample-list-no-bg #sound_list.list-view .sample-actions .action-icon:not(:hover),
html.card-actions-sample-list-no-bg #sound_list.list-view .sample-actions .index-action-icon:not(:hover),
html.card-actions-sample-list-no-bg #sound_list:not(.card-view):not(.list-view) .sample-actions .action-icon:not(:hover),
html.card-actions-sample-list-no-bg #sound_list:not(.card-view):not(.list-view) .sample-actions .index-action-icon:not(:hover),
html.card-actions-sample-list-no-bg .samples-grid.list-view .sample-actions .action-icon:not(:hover),
html.card-actions-sample-list-no-bg .samples-grid:not(.card-view) .sample-actions .action-icon:not(:hover),
html.card-actions-sample-list-no-bg .samples-grid:not(.card-view):not(.list-view) .sample-actions .action-icon:not(:hover) {
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 列表无底时：悬停必须恢复圆底 + 白图标（否则白图标落在白底上看不见） */
html.card-actions-sample-list-no-bg #sound_list.list-view .sample-actions .action-icon:hover,
html.card-actions-sample-list-no-bg #sound_list.list-view .sample-actions .index-action-icon:hover,
html.card-actions-sample-list-no-bg #sound_list:not(.card-view):not(.list-view) .sample-actions .action-icon:hover,
html.card-actions-sample-list-no-bg #sound_list:not(.card-view):not(.list-view) .sample-actions .index-action-icon:hover,
html.card-actions-sample-list-no-bg .samples-grid.list-view .sample-actions .action-icon:hover,
html.card-actions-sample-list-no-bg .samples-grid:not(.card-view) .sample-actions .action-icon:hover,
html.card-actions-sample-list-no-bg .samples-grid:not(.card-view):not(.list-view) .sample-actions .action-icon:hover,
html.card-actions-sample-card-no-bg #sound_list.card-view .sample-actions .action-icon:hover,
html.card-actions-sample-card-no-bg .samples-grid.card-view .sample-actions .action-icon:hover,
html.card-actions-teacher-no-bg .teacher-actions .action-icon:hover,
html.card-actions-teacher-no-bg .teacher-actions .index-action-icon:hover {
  background-color: var(--card-hover-color) !important;
  border-color: var(--card-hover-color) !important;
  box-shadow: 0 2px 6px var(--card-primary-shadow) !important;
}

html.card-actions-sample-list-no-bg #sound_list.list-view .sample-actions .action-icon:hover svg,
html.card-actions-sample-list-no-bg #sound_list:not(.card-view):not(.list-view) .sample-actions .action-icon:hover svg,
html.card-actions-sample-list-no-bg .samples-grid.list-view .sample-actions .action-icon:hover svg,
html.card-actions-sample-list-no-bg .samples-grid:not(.card-view) .sample-actions .action-icon:hover svg {
  stroke: #ffffff !important;
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* 压过暗黑模式里对 #sound_list 统一铺底的规则（仅非悬停） */
html.card-actions-sample-list-no-bg body.dark-mode #sound_list.list-view .sample-actions .action-icon:not(:hover),
html.card-actions-sample-list-no-bg body.dark-mode #sound_list:not(.card-view) .sample-actions .action-icon:not(:hover),
html.card-actions-sample-card-no-bg body.dark-mode #sound_list.card-view .sample-actions .action-icon:not(:hover),
html.card-actions-teacher-no-bg body.dark-mode .teacher-actions .action-icon:not(:hover) {
  background-color: transparent !important;
  box-shadow: none !important;
}

html.card-actions-sample-list-no-bg body.dark-mode #sound_list.list-view .sample-actions .action-icon:hover,
html.card-actions-sample-list-no-bg body.dark-mode #sound_list:not(.card-view) .sample-actions .action-icon:hover {
  background-color: var(--card-hover-color) !important;
  border-color: var(--card-hover-color) !important;
}