/* ============================================================
   智趣云班管理系统 — 统一按钮设计系统  button-system.css
   设计原则：主色 #3B82F6 · 圆角 6px · 5 档语义类型
   配色：主色 / 次色(灰) / 成功(绿) / 危险(红) / 警告(橙) / 强调(紫)
   本文件置于各页面已有 <style> 之后引入，相同优先级下后加载者生效。
   仅改视觉，不动任何功能（onclick / 逻辑不变）。
   ============================================================ */

/* ---------- 1. 设计令牌（覆盖各页散落的旧主色） ---------- */
:root{
  /* 主色蓝 */
  --p:#3B82F6; --p-hover:#2563EB; --p-active:#1D4ED8; --p-soft:#EFF6FF;
  /* 成功绿 */
  --s:#10B981; --s-hover:#059669; --s-active:#047857; --s-soft:#ECFDF5;
  /* 危险红 */
  --d:#EF4444; --d-hover:#DC2626; --d-active:#B91C1C; --d-soft:#FEF2F2;
  /* 警告橙 */
  --w:#F59E0B; --w-hover:#D97706; --w-soft:#FFFBEB;
  /* 强调紫 */
  --pu:#8B5CF6; --pu-hover:#7C3AED; --pu-soft:#F5F3FF;
  /* 中性 */
  --dk:#1F2937; --dk-2:#374151; --g-2:#E5E7EB; --l-2:#F9FAFB;
  /* 形状 / 间距 */
  --btn-radius:6px; --btn-pad-y:8px; --btn-pad-x:16px;
  --btn-ring:rgba(59,130,246,.40);
}

/* ---------- 2. 全局基础：所有 <button> 统一交互质感 ---------- */
/* 不影响配色；圆角由下方规则统一；hover/active/focus/disabled 一致 */
button{
  font-family:inherit;
  font-size:.88rem;
  line-height:1.25;
  cursor:pointer;
  border:none;
  border-radius:var(--btn-radius);
  transition:background-color .15s ease, box-shadow .15s ease, transform .12s ease, filter .15s ease;
  -webkit-tap-highlight-color:transparent;
}
button:hover{ filter:brightness(.96); }
button:active{ transform:scale(.98); }
button:focus-visible{ outline:2px solid var(--btn-ring); outline-offset:2px; }
button:disabled, button[disabled]{
  opacity:.5; cursor:not-allowed; filter:grayscale(.25); transform:none;
}

/* ---------- 3. 统一矩形按钮圆角为 6px（保留圆形图标按钮） ---------- */
button:not(.cls-btn):not(.csbtn):not(.sav):not(.cbtn):not(.mx):not(.myav):not(.homework-bubble):not([style*="border-radius:50%"]):not([style*="border-radius: 50%"]){
  border-radius:var(--btn-radius) !important;
}

/* ---------- 4. 规范类（新代码推荐使用） ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  font-weight:500; font-size:.88rem; line-height:1.2;
  cursor:pointer; border:none; color:#fff;
  transition:background-color .15s, box-shadow .15s, transform .12s, filter .15s;
}
.btn-primary{ background:var(--p); }      .btn-primary:hover{ background:var(--p-hover); }
.btn-secondary{ background:var(--l); color:var(--dk-2); } .btn-secondary:hover{ background:var(--g-2); }
.btn-ghost{ background:transparent; color:var(--p); border:1px solid var(--g-2); } .btn-ghost:hover{ background:var(--p-soft); }
.btn-success{ background:var(--s); }        .btn-success:hover{ background:var(--s-hover); }
.btn-danger{ background:var(--d); }         .btn-danger:hover{ background:var(--d-hover); }
.btn-warning{ background:var(--w); }        .btn-warning:hover{ background:var(--w-hover); }
.btn-sm{ padding:5px 12px; font-size:.8rem; }
.btn-lg{ padding:11px 22px; font-size:.95rem; }
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:2px solid var(--btn-ring); outline-offset:2px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:grayscale(.25); }

/* ---------- 5. 复用既有类名 → 映射到统一令牌（保持外观一致） ---------- */
/* 登录 / 访客 */
.login-btn{ background:var(--p); color:#fff; border-radius:var(--btn-radius); }
.login-btn:hover{ background:var(--p-hover); transform:translateY(-1px); box-shadow:0 4px 12px var(--btn-ring); }
.guest-btn{ background:var(--l); color:var(--dk); }
.guest-btn:hover{ background:var(--g-2); }

/* 班级选择小圆钮（保持圆形） */
.cls-btn.add{ background:var(--s); color:#fff; } .cls-btn.ren{ background:var(--p); color:#fff; } .cls-btn.del{ background:var(--d); color:#fff; }

/* 角色切换 / 退出 */
.role-btn{ border-radius:var(--btn-radius); }
.role-btn.active{ background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.1); color:var(--p); }
.logout-btn{ background:var(--d); color:#fff; border-radius:var(--btn-radius); }

/* 菜单卡按钮 */
.mbtn{ border-radius:var(--btn-radius); }

/* 边框型 / 实心型 操作钮 */
.bsb{ border:2px solid var(--g-2); border-radius:var(--btn-radius); background:#fff; }
.bgs{ border:2px solid var(--g-2); border-radius:var(--btn-radius); }
.badd{ background:var(--s); color:#fff; border-radius:var(--btn-radius); }
.bsub{ background:var(--d); color:#fff; border-radius:var(--btn-radius); }

/* 选项卡 / 分页 */
.tab-btn{ border-radius:var(--btn-radius); }
.tab-btn.active{ background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.1); color:var(--p); }
.page-btn{ border:2px solid var(--g-2); border-radius:var(--btn-radius); background:#fff; }
.page-btn:hover:not(:disabled){ border-color:var(--p); color:var(--p); }
.page-btn.active{ background:var(--p); color:#fff; border-color:var(--p); }
.page-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* 顶部操作钮 / 语音 tab 等 */
.pfb{ border-radius:var(--btn-radius); }
.sob{ border-radius:var(--btn-radius); }

/* 记录 / 语音 大按钮 */
.rbtn{ border-radius:var(--btn-radius); }
.rbtn.start{ background:var(--s); color:#fff; }
.rbtn.stop{ background:var(--d); color:#fff; }
.rbtn.multi{ background:var(--p); color:#fff; }
.rbtn:hover{ filter:brightness(.96); }

/* 原 .btn-p/.btn-s/.btn-d/.btn-sec/.btn-w/.btn-pu 语义映射 */
.btn-p{ background:var(--p); color:#fff; }   .btn-p:hover{ background:var(--p-hover); }
.btn-s{ background:var(--s); color:#fff; }   .btn-s:hover{ background:var(--s-hover); }
.btn-d{ background:var(--d); color:#fff; }   .btn-d:hover{ background:var(--d-hover); }
.btn-sec{ background:var(--l); color:var(--dk-2); }
.btn-w{ background:var(--w); color:#fff; }   .btn-w:hover{ background:var(--w-hover); }
.btn-pu{ background:var(--pu); color:#fff; } .btn-pu:hover{ background:var(--pu-hover); }

/* 通用边框卡片按钮 / 评价等级按钮 */
.atb{ border:2px solid var(--g-2); border-radius:var(--btn-radius); background:#fff; }
.eval-level-btn{ border:2px solid var(--g-2); border-radius:var(--btn-radius); background:#fff; }
.eval-level-btn:hover{ border-color:var(--p); }
.eval-level-btn.selected{ border-color:var(--p); background:var(--p-soft); }

/* ---------- 6. 覆盖页面里写死的按钮色（保证真正统一，不再有杂色） ---------- */
/* 这些按钮原用 hardcode hex（#feca57/#ff6b6b/#48dbfb/#5a9bd5…），必须强制覆盖 */
/* 宠物 / 即时反馈类按钮：原刺眼黄/红/青 → 收口到统一语义色 */
.pfb.feed{ background:var(--w) !important; color:#fff !important; }
.pfb.play{ background:var(--d) !important; color:#fff !important; }
.pfb.clean{ background:var(--p) !important; color:#fff !important; }
/* 数量步进钮 .bp/.bm：原写死 #5a9bd5 / #888；v2.0 把 .bm 减分钮改淡灰（不再突兀） */
.bp{ background:var(--p) !important; color:#fff !important; }
.bm{ background:#c8ccd4 !important; color:#fff !important; }
.bm:hover{ background:#b8bcc4 !important; }
/* 悬停写死色 → 统一 hover 令牌 */
.badd:hover{ background:var(--s-hover) !important; }
.bsub:hover{ background:var(--d-hover) !important; }
.btn-p:hover{ background:var(--p-hover) !important; }
/* 停止录音钮渐变尾部写死 #c0392b → 统一危险深 */
.rbtn.stop{ background:linear-gradient(135deg,var(--d),var(--d-hover)) !important; }
/* 语音情感钮：保留语义区分（表扬绿/建议橙/吐槽红），但色值收口到统一调色板 */
.sob.ex{ background:linear-gradient(135deg,var(--s),var(--s-hover)) !important; }
.sob.av{ background:linear-gradient(135deg,var(--w),var(--w-hover)) !important; }
.sob.pr{ background:linear-gradient(135deg,var(--d),var(--d-hover)) !important; }
/* 登录/退出：确保用统一主色与危险色（覆盖可能存在的写死） */
.login-btn{ background:var(--p) !important; }
.logout-btn{ background:var(--d) !important; }

/* ---------- 7. 页面大背景：去掉紫色渐变，改为干净白底 ---------- */
body{ background:#fff !important; }

/* ---------- 8. 首页模块菜单卡：按角色统一着色 + 文字加粗 ---------- */
/* 用户定调：教师端统一蓝色，学生端统一紫色，按钮文字加粗，不再按功能分五颜六色 */
body.teacher-mode .mbtn,
body.teacher-mode .m-ai{
  background:var(--p-soft) !important;
  color:var(--p-active) !important;
  border:1px solid rgba(59,130,246,.22) !important;
  font-weight:600 !important;
}
body.teacher-mode .mbtn:hover,
body.teacher-mode .m-ai:hover{
  background:#DBEAFE !important;
}
body.student-mode .mbtn,
body.student-mode .m-ai{
  background:var(--pu-soft) !important;
  color:var(--pu-hover) !important;
  border:1px solid rgba(139,92,246,.22) !important;
  font-weight:600 !important;
}
body.student-mode .mbtn:hover,
body.student-mode .m-ai:hover{
  background:#EDE9FE !important;
}

/* ---------- 9. 大卡片柔和化：与角色菜单底色一致，去掉突兀深渐变 ---------- */
/* 学生端：我的积分顶部卡片 + 我的小组卡片 -> 浅紫底深紫字 */
body.student-mode .my-card{
  background:var(--pu-soft) !important;
  color:var(--pu-hover) !important;
  border:1px solid #DDD6FE !important;
}
body.student-mode .my-card .myav{
  background:#EDE9FE !important;
}
body.student-mode .my-card .myav:hover{
  background:#E9E5FE !important;
}
body.student-mode .my-card .msi{
  background:#EDE9FE !important;
}
body.student-mode .my-card .msv,
body.student-mode .my-card .msl{
  color:var(--pu-hover) !important;
}
body.student-mode .gc{
  background:var(--pu-soft) !important;
  color:var(--pu-hover) !important;
  border:1px solid #DDD6FE !important;
}
body.student-mode .gc::before{
  background:rgba(139,92,246,.08) !important;
}
body.student-mode .gc .gname,
body.student-mode .gc .gscore{
  color:var(--pu-hover) !important;
}
body.student-mode .gc .mtag{
  background:#EDE9FE !important;
  color:var(--pu-hover) !important;
}

/* 教师端：班级管理卡片 -> 浅蓝底深蓝字 */
body.teacher-mode .clsc{
  background:var(--p-soft) !important;
  color:var(--p-active) !important;
  border:1px solid #BFDBFE !important;
}
body.teacher-mode .clsc.active{
  border:3px solid var(--p) !important;
}
body.teacher-mode .clsc .csname,
body.teacher-mode .clsc .cscnt,
body.teacher-mode .clsc .cslbl{
  color:var(--p-active) !important;
}
body.teacher-mode .clsc .csbtn.edit{
  background:#BFDBFE !important;
  color:var(--p-active) !important;
}