/* ============================================================
   桥牌练习系统 - 全局样式
   主题：浅绿色护眼配色
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* 浅绿护眼色板 */
  --green-50:  #f2f9f0;   /* 页面底色 */
  --green-100: #e3f2e0;   /* 卡片/分区底 */
  --green-200: #cde8c6;   /* 边框浅 */
  --green-300: #a8d69d;   /* 边框/禁用 */
  --green-400: #7cbf6d;
  --green-500: #58a34b;   /* 主按钮 */
  --green-600: #44853a;   /* 主色深 */
  --green-700: #35682d;   /* 标题文字 */
  --text-1:   #2f3e33;    /* 主文字 */
  --text-2:   #5c6e61;    /* 次文字 */
  --text-3:   #93a598;    /* 占位 */
  --white:    #ffffff;
  --danger:   #c96a5a;
  --warn:     #c9a24b;
}

html, body { height: 100%; }

body {
  /* 2026-09-20 字体栈加固：补齐 Android / Linux / 旧版 macOS 的中文字体名。
     原字体栈仅列 PingFang SC（苹果）与 Microsoft YaHei（Windows），
     Segoe UI 为纯西文字体；在未装前两者的设备上会命中不含中文字形的拉丁字体，
     导致中文静默丢失（浏览器不再触发 CJK 回退）。 */
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC",
               "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC",
               "WenQuanYi Micro Hei", "Microsoft JhengHei",
               "Segoe UI", Roboto, sans-serif;
  background: var(--green-50);
  color: var(--text-1);
}

a { color: var(--green-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===================== 登录页 ===================== */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  overflow: hidden;
}

/* 四个花色：黑、红、橙、绿 */
.suit-s { color: #222; }
.suit-h { color: #e5484d; }
.suit-d { color: #ef8f2f; }
.suit-c { color: #3f9e4d; }

/* 登录页背景：四张半透明扑克牌（模仿姚记蓝，散落分布） */
.playing-card {
  position: absolute;
  width: 232px;
  height: 324px;
  background: linear-gradient(180deg, #ffffff, #eaf1f9);
  border: 2px solid #5b7cab;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(42, 75, 141, .18);
  opacity: .16;
  pointer-events: none;
  user-select: none;
}
.pc-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pc-corner.tl { top: 20px; left: 20px; }
.pc-corner.br { bottom: 20px; right: 20px; transform: rotate(180deg); }
.pc-rank { font-size: 44px; font-weight: 800; color: #1a2b4a; }
.pc-suit { font-size: 34px; margin-top: 4px; }
.pc-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 120px; line-height: 1; }
.pc-center svg { display: block; }
.pc1 { top: -30px; left: -30px; transform: rotate(36deg); }
.pc2 { top: 30px; right: 85px; transform: rotate(114deg); }
.pc3 { bottom: -30px; left: -20px; transform: rotate(14deg); }
.pc4 { bottom: -20px; right: -20px; transform: rotate(-10deg); }
.pc5 { top: 60px; left: 24%; transform: rotate(-6deg); }
.pc6 { bottom: 40px; left: 55%; transform: rotate(12deg); }

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border: 1px solid var(--green-200);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(68, 133, 58, .10);
  padding: 36px 32px 26px;
}

.brand { text-align: center; margin-bottom: 26px; }
.brand-logo { font-size: 34px; letter-spacing: 6px; }
.brand-logo span { display: inline-block; }
.brand h1 { font-size: 21px; color: var(--green-700); margin-top: 10px; letter-spacing: 1px; }
.brand p { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* 两个登录入口 */
.login-entries { display: flex; gap: 14px; margin-bottom: 22px; }

.entry-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 0 14px;
  background: var(--green-100);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-2);
  transition: all .2s ease;
}
.entry-btn .entry-icon { font-size: 26px; }
/* 2026-09-20 图标改内联 SVG：不再依赖 emoji 字体，需显式设定尺寸 */
.entry-btn .entry-icon,
.entry-btn .entry-icon svg { display: inline-block; vertical-align: -3px; }
.entry-btn .entry-icon svg { width: 22px; height: 22px; }
.entry-btn:hover { background: var(--green-200); }
.entry-btn.active {
  background: var(--white);
  border-color: var(--green-400);
  color: var(--green-700);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(88, 163, 75, .18);
}

/* 表单 */
.login-form { display: none; }
.login-form.active { display: block; animation: fadeIn .25s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--green-200);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  background: var(--green-50);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px rgba(124, 191, 109, .18);
  background: var(--white);
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input::placeholder { color: var(--text-3); }

/* 多个字段并排一行 */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.field-row select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--green-200); border-radius: 8px;
  font-size: 15px; font-family: inherit; background: var(--white); color: var(--text-1);
}
.field-row select:focus { border-color: var(--green-400); box-shadow: 0 0 0 3px rgba(124, 191, 109, .18); }

/* 操作结果提示 */
.form-tip { margin-left: 12px; font-size: 13px; }
.form-tip.ok { color: var(--green-600); }
.form-tip.error { color: #c0392b; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(24, 60, 40, .35);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
  background: var(--white); border-radius: 14px; padding: 24px 26px;
  width: min(680px, 92vw); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(24, 60, 40, .25);
}
.modal h3 { margin-bottom: 18px; font-size: 17px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* 工具栏下方的说明文字 */
.toolbar-hint { margin-top: 10px; font-size: 13px; color: var(--text-2); line-height: 1.7; }
.toolbar-hint.ok { color: var(--green-600); }
.toolbar-hint.error { color: #c0392b; }

.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 44px; }
.toggle-pwd {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; font-size: 15px; cursor: pointer;
  padding: 4px 6px; opacity: .45;
}
.toggle-pwd:hover { opacity: 1; }
.toggle-pwd svg { width: 18px; height: 18px; display: block; }

.btn-login {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  background: var(--green-500);
  color: #fff;
  font-size: 16px;
  letter-spacing: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, transform .1s;
}
.btn-login:hover { background: var(--green-600); }
.btn-login:active { transform: scale(.985); }

.login-msg { text-align: center; font-size: 13px; margin-top: 14px; min-height: 18px; }
.login-msg.error { color: var(--danger); }
.login-msg.ok { color: var(--green-600); }

.page-footer {
  position: relative; z-index: 1;
  margin-top: 26px; font-size: 12px; color: var(--text-3);
}

/* ===================== 通用布局（学生端/老师端） ===================== */
.app-shell { display: flex; min-height: 100vh; }

/* 侧边栏 */
.sidebar {
  width: 210px;
  flex-shrink: 0;
  background: var(--green-100);
  border-right: 1px solid var(--green-200);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
}

.sidebar .logo {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--green-200);
  margin-bottom: 14px;
}
.avatar-box {
  width: 72px; height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e4e7ea;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  overflow: hidden;
  color: #b6bcc2;
  transition: transform .15s;
}
.avatar-box:hover { transform: scale(1.04); }
.logo-suits { font-size: 20px; letter-spacing: 4px; line-height: 1; }
.logo-suits span { display: inline-block; }
.logo-name { font-size: 14px; font-weight: 600; color: var(--green-700); margin-top: 8px; letter-spacing: 0; }
.sidebar .logo small { display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 4px;
  border: none;
  background: transparent;
  width: 100%;
  font-family: inherit;
  text-align: left;
  transition: background .15s;
}
.nav-item:hover { background: var(--green-200); }
.nav-item:disabled { opacity: .45; cursor: not-allowed; }
.nav-item:disabled:hover { background: transparent; }
.nav-item.active {
  background: var(--green-500);
  color: #fff;
  font-weight: 600;
}

.sidebar .spacer { flex: 1; }
.sidebar .logout {
  border-top: 1px solid var(--green-200);
  padding-top: 12px;
}

/* 主区域 */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--green-200);
  padding: 14px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar h2 { font-size: 17px; color: var(--green-700); font-weight: 600; }
.topbar .user-info { font-size: 14px; color: var(--text-2); line-height: 34px; }
.topbar #btn-logout { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 6px; }

.content { padding: 24px 26px; flex: 1; }

/* 模块面板（默认隐藏，配合导航切换） */
.panel { display: none; }
.panel.active { display: block; animation: fadeIn .2s ease; }

/* 卡片 */
.card {
  background: var(--white);
  border: 1px solid var(--green-200);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}
.card h3 { font-size: 15px; color: var(--green-700); margin-bottom: 14px; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--green-100);
}
.table th { color: var(--text-2); font-weight: 600; background: var(--green-50); }
.table tr:hover td { background: var(--green-50); }

/* 按钮 */
.btn {
  padding: 8px 16px;
  border: 1px solid var(--green-300);
  border-radius: 7px;
  background: var(--white);
  color: var(--green-700);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.btn:hover { background: var(--green-100); border-color: var(--green-400); }
.btn-primary {
  background: var(--green-500);
  border-color: var(--green-500);
  color: #fff;
}
.btn-primary:hover { background: var(--green-600); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-danger { color: var(--danger); border-color: #e0b4ab; }
.btn-danger:hover { background: #fbf0ed; border-color: var(--danger); }

/* 搜索栏 */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select {
  padding: 8px 12px;
  border: 1px solid var(--green-200);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: var(--white);
}
.toolbar input:focus, .toolbar select:focus { border-color: var(--green-400); }

/* 徽章 */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--green-100);
  color: var(--green-700);
}
.badge.warn { background: #f7efdd; color: #8a6d2f; }
.badge.off { background: #eeeeee; color: #888; }

/* 统计小卡 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card {
  background: var(--white);
  border: 1px solid var(--green-200);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.stat-card .num { font-size: 26px; font-weight: 700; color: var(--green-600); }
.stat-card .label { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* 升级考试：信息行（现在等级 / 考试内容 / 得分要求 / 题量 / 升级后等级） */
.exam-card { border: 1px solid var(--green-200); border-radius: 10px; padding: 6px 16px; }
.exam-row { display: flex; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.exam-row:last-child { border-bottom: none; }
.exam-label { width: 112px; color: #9aa0a6; flex-shrink: 0; }
.exam-value { flex: 1; color: #2c3e50; min-width: 0; word-break: break-all; }
.exam-note { display: block; margin-top: 2px; font-size: 12px; color: #9aa0a6; }

/* 装扮系统：头衔与背景设置左右两列 */
.dress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dress-grid .card { margin-bottom: 0; }

/* ===================== 学生端背景主题（装扮系统/积分商城） ===================== */
body.theme-bg-blue { background: #d9ecfa; }
body.theme-bg-purple { background: #ebe4f8; }
body.theme-bg-pink { background: #fbe5ee; }
body.theme-bg-green-dot {
  background-color: #d8ecd0;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 3px, transparent 3.6px);
  background-size: 30px 30px;
}
body.theme-bg-blue-dot {
  background-color: #d9ecfa;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 3px, transparent 3.6px);
  background-size: 30px 30px;
}
body.theme-bg-purple-dot {
  background-color: #ebe4f8;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 3px, transparent 3.6px);
  background-size: 30px 30px;
}
body.theme-bg-pink-dot {
  background-color: #fbe5ee;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 3px, transparent 3.6px);
  background-size: 30px 30px;
}

/* ===================== 积分商城 ===================== */
.points-banner {
  display: flex; align-items: baseline; gap: 12px;
  background: linear-gradient(135deg, var(--green-50), #fff);
  border: 1px solid var(--green-200); border-radius: 12px;
  padding: 14px 22px; margin-bottom: 16px;
}
.points-banner .points-label { font-size: 15px; color: var(--text-2); }
.points-banner .points-num { font-size: 36px; font-weight: 700; color: var(--green-600); line-height: 1; }
.points-banner .points-unit { font-size: 14px; color: var(--text-3); }
.shop-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--green-200); margin-bottom: 16px; overflow-x: auto; }
.shop-tab {
  padding: 10px 18px; font-size: 14px; color: var(--text-2);
  background: transparent; border: none; border-radius: 8px 8px 0 0;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.shop-tab:hover { background: var(--green-50); }
.shop-tab.active { background: var(--green-500); color: #fff; font-weight: 600; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.shop-item { border: 1px solid var(--green-200); border-radius: 10px; padding: 12px; text-align: center; background: #fff; }
.shop-item.owned { border-color: var(--green-400); background: var(--green-50); }
.shop-item .bg-demo {
  height: 64px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .06); margin-bottom: 10px;
}
.shop-item .item-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
.shop-item .item-price { font-size: 13px; color: var(--text-2); margin: 6px 0 10px; }
.demo-bg_blue { background: #d9ecfa; }
.demo-bg_purple { background: #ebe4f8; }
.demo-bg_pink { background: #fbe5ee; }
.demo-bg_green_dot { background-color: #d8ecd0; background-image: radial-gradient(rgba(255, 255, 255, .95) 3px, transparent 3.6px); background-size: 20px 20px; }
.demo-bg_blue_dot { background-color: #d9ecfa; background-image: radial-gradient(rgba(255, 255, 255, .95) 3px, transparent 3.6px); background-size: 20px 20px; }
.demo-bg_purple_dot { background-color: #ebe4f8; background-image: radial-gradient(rgba(255, 255, 255, .95) 3px, transparent 3.6px); background-size: 20px 20px; }
.demo-bg_pink_dot { background-color: #fbe5ee; background-image: radial-gradient(rgba(255, 255, 255, .95) 3px, transparent 3.6px); background-size: 20px 20px; }

/* 空状态 */
.empty {
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  padding: 40px 0;
}

/* ===== 平板适配（2026-09-10）：721-1024px 侧栏改顶部横向导航，避免侧栏挤压内容 =====
   仅作用于平板区间；≤720px 仍走下方「手机端抽屉导航」，>1024px 保持原桌面侧栏 */
@media (min-width: 721px) and (max-width: 1024px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex-direction: row; align-items: center;
    padding: 8px 10px; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    position: sticky; top: 0; z-index: 120;
    border-right: 0; border-bottom: 1px solid var(--green-200);
    box-shadow: 0 1px 6px rgba(30, 58, 110, .08);
  }
  .sidebar .logo { display: none; }                 /* 头像/昵称由顶栏显示，平板不再占竖向空间 */
  .sidebar .nav-item { width: auto; white-space: nowrap; margin-bottom: 0; flex: 0 0 auto; }
  .sidebar .spacer { display: none; }
  .sidebar .logout { border: 0; padding: 0; display: flex; align-items: center; }
  .content { padding: 16px 18px; }
  .panel { max-height: calc(100vh - 130px); }
}

/* 响应式 */
@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; padding: 10px; overflow-x: auto; }
  .sidebar .logo { border: none; padding: 0 10px; margin: 0; white-space: nowrap; }
  .sidebar .logo small { display: none; }
  .logo-name { display: none; }
  .avatar-box { display: none; }
  .nav-item { width: auto; white-space: nowrap; margin-bottom: 0; }
  .sidebar .spacer { display: none; }
  .sidebar .logout { border: none; padding: 0; }
  .login-card { padding: 28px 20px 22px; }
  .login-entries { gap: 10px; }
  .content { padding: 16px; }
  .topbar { padding: 12px 16px; }
  .topbar-right { gap: 8px; }
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .exam-card { padding: 4px 12px; }
  .exam-row { font-size: 13px; padding: 9px 0; }
  .exam-label { width: 88px; font-size: 13px; }
  .stat-card .num { font-size: 22px; }
  .dress-grid { grid-template-columns: 1fr; }
  .points-banner { padding: 10px 16px; }
  .points-banner .points-num { font-size: 28px; }
  .shop-tab { padding: 8px 12px; font-size: 13px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
}
.field-note { display: block; margin-top: 4px; font-size: 12px; color: #9aa0a6; }
.field input:disabled { background: #f1f3f4; color: #5f6368; cursor: not-allowed; }

/* 题库三大块手风琴 */
.block-row { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-size: 16px; font-weight: 600; color: var(--text-1); cursor: pointer; border-radius: 10px; user-select: none; }
.block-row:hover { background: var(--green-50); }
.block-row .block-arrow { color: var(--green-500); font-size: 20px; transition: transform .15s; }
.block-row.open .block-arrow { transform: rotate(90deg); }
.block-topics { padding: 2px 12px 14px; }
.block-topics .table { margin-bottom: 10px; }

/* 专题题目编辑页（全屏） */
.topic-view { position: fixed; inset: 0; background: var(--green-50); z-index: 1500; display: flex; flex-direction: column; }
.topic-body { flex: 1; overflow: auto; padding: 20px 24px; }
.q-text { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-hand { white-space: pre-line; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 13px; line-height: 1.55; max-width: 220px; }
.suit-red { color: #d32f2f; }
.stu-female { color: #d32f2f; }
.q-opts { white-space: pre-line; max-width: 200px; font-size: 13px; color: var(--text-2); }

/* 顶栏右侧：铃铛 + 用户信息 */
.topbar-right { display: flex; align-items: center; gap: 14px; }
.bell-btn { position: relative; background: none; border: none; color: var(--green-500); cursor: pointer; padding: 6px; border-radius: 50%; line-height: 1; display: flex; transition: background .15s, color .15s; }
.bell-btn:hover { background: var(--green-100); color: var(--green-600); }
.bell-btn svg { display: block; }
.bell-dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; background: #e5484d; border-radius: 50%; border: 2px solid var(--green-50); box-sizing: content-box; }

/* 消息界面（全屏覆盖，QQ 式双栏） */
.msg-view { position: fixed; inset: 0; background: var(--green-50); z-index: 2000; display: flex; flex-direction: column; }
.msg-header { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--green-200); }
.msg-header h3 { margin: 0; font-size: 16px; color: var(--text-1); }
.msg-main { flex: 1; display: flex; overflow: hidden; }

/* 左侧联系人列表 */
.msg-contacts { width: 240px; background: #fff; border-right: 1px solid var(--green-200); padding: 10px 8px; overflow: auto; flex-shrink: 0; }
.contact-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; position: relative; }
.contact-item:hover { background: var(--green-50); }
.contact-item.active { background: var(--green-100); }
.contact-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-400); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
.contact-preview { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.contact-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 18px; height: 18px; background: #e5484d; color: #fff; border-radius: 9px; font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-sizing: border-box; }

/* 右侧聊天窗口 */
.msg-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.msg-chat-header { padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--green-200); font-size: 15px; font-weight: 600; color: var(--text-1); }
.msg-chat-list { flex: 1; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.msg-bubble-row { display: flex; }
.msg-bubble-row.me { justify-content: flex-end; }
.msg-bubble { max-width: 70%; background: #fff; border: 1px solid var(--green-200); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--text-1); word-break: break-word; }
.msg-bubble-row.me .msg-bubble { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.msg-bubble .bt { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.msg-bubble-row.me .msg-bubble .bt { color: rgba(255,255,255,.75); }
.msg-input-bar { display: flex; gap: 10px; padding: 12px 20px; background: #fff; border-top: 1px solid var(--green-200); }
.msg-input-bar input { flex: 1; }

/* 编辑班级成员弹窗里的学生勾选列表 */
.member-picker { max-height: 320px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 14px; margin-bottom: 8px; }
.member-picker label { display: flex; align-items: center; gap: 8px; padding: 8px 2px; cursor: pointer; border-bottom: 1px dashed #f0f1f3; font-size: 14px; }
.member-picker label:last-child { border-bottom: none; }

/* 身份证号眼睛切换 */
.eye-wrap { position: relative; }
.eye-wrap input { padding-right: 40px; }
.eye-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 6px; line-height: 1; }

/* 叫牌练习界面 */
.practice-view { position: fixed; inset: 0; background: var(--green-50); z-index: 1500; display: flex; flex-direction: column; }
.practice-body { flex: 1; overflow: auto; padding: 24px; display: flex; justify-content: center; }
.practice-card { background: #fff; border: 1px solid var(--green-200); border-radius: 14px; padding: 26px 30px; max-width: 720px; width: 100%; align-self: flex-start; }
.pr-meta { font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.pr-hand { font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; white-space: pre-line; font-size: 30px; line-height: 1.7; background: var(--green-50); border: 1px solid var(--green-200); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; width: fit-content; min-width: 190px; max-width: 340px; }
.suit-spade { color: #111; }
.suit-heart { color: #d32f2f; }
.suit-diamond { color: #f57c00; }
.suit-club { color: #2e7d32; }
.suit-empty { color: #999; font-weight: normal; }
.pr-question { font-size: 24px; line-height: 1.5; font-weight: 600; color: var(--text-1); margin-bottom: 16px; }

/* ===== 叫牌进程表（牌例右侧方框） ===== */
.pr-top { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.pr-top .pr-hand { margin-bottom: 0; flex: 0 0 auto; width: fit-content; min-width: 190px; max-width: 340px; }
.pr-top .pr-auction, .demo-duo .demo-auction { flex: 1 1 0; min-width: 250px; max-width: 420px; justify-content: flex-start; }
.pr-auction, .demo-auction { background: var(--green-50); border: 1px solid var(--green-200); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex: 0 0 auto; min-width: 230px; max-width: 100%; }
/* 进程块：左上角「叫牌进程：」标题 + 表格撑满框，与左侧牌例卡等高对齐 */
.aq-block { display: flex; flex-direction: column; width: 100%; }
.aq-title { font-size: 14px; font-weight: 700; color: #1e3a6e; margin: 0 0 6px 2px; flex: 0 0 auto; }
.aq-wrap { display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: nowrap; width: 100%; flex: 1 1 auto; position: relative; }
.auction-tbl td.aq-hasnote { cursor: pointer; text-decoration: underline dotted #3b6fd4; text-underline-offset: 3px; }
/* 悬停解析：fixed 定位弹层，出现在被悬停叫品格正下方（下方放不下则上方）——不参与布局、绝不遮挡进程格；left/top 由 JS 按格子位置计算 */
.aq-note { display: none; position: fixed; top: 0; left: 0; z-index: 999; font-size: 13px; line-height: 1.5; color: #1c2b33; background: #f6f3ea; border: 1px solid #e0d8c2; border-radius: 6px; padding: 6px 10px; text-align: left; white-space: normal; max-width: min(420px, 92vw); box-shadow: 0 2px 8px rgba(0, 0, 0, .10); }
.demo-duo { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.demo-duo .demo-hand { margin-bottom: 0; flex: 0 0 auto; width: fit-content; min-width: 190px; max-width: 340px; }
.auction-tbl { border-collapse: separate; border-spacing: 5px 5px; margin: 0; width: 100%; table-layout: fixed; }
.auction-tbl th { font-size: 14px; font-weight: 700; color: #1c2b33; padding: 0 4px 2px; text-align: center; width: 25%; }
.auction-tbl td { min-width: 0; }
.auction-tbl td.aq { background: #dcdcdc; font-size: 15px; font-weight: 600; text-align: center; padding: 6px 4px; border-radius: 5px; white-space: nowrap; }
.auction-tbl td.aq .suit-heart, .auction-tbl td.aq .suit-diamond { font-weight: 700; }
.auction-tbl td.aq-q { background: #e6e2a5; font-weight: 800; font-size: 16px; color: #1c2b33; }
.auction-tbl td.aq-pass { color: #6b7680; font-weight: 500; font-size: 12px; letter-spacing: .5px; }
.wq-item .pr-auction { min-width: 200px; padding: 6px 8px; }
.wq-item .auction-tbl th { font-size: 14px; }
.wq-item .auction-tbl td.aq { font-size: 14px; padding: 3px 7px; min-width: 42px; }
.wq-item .auction-tbl { border-spacing: 4px 3px; }
.wq-item .aq-note { font-size: 12px; padding: 4px 8px; max-width: min(320px, 92vw); }

/* 面板统一滚动：页面本体不滚动（body overflow hidden），所有面板内容超出视口时面板内独立下拉滚动 */
.panel { max-height: calc(100vh - 150px); overflow-y: auto; }

/* 老师作业管理 - 卡片网格 */
.hw-grid { display: flex; flex-direction: column; gap: 12px; }
/* 作业按班级分组：外层班级卡，点开看具体作业 */
.hw-group { border: 1px solid var(--green-200); border-radius: 10px; background: #fff; overflow: hidden; }
.hw-group-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; transition: background .15s; }
.hw-group-head:hover { background: #f4f9f2; }
.hw-group-arrow { color: var(--green-500); font-size: 14px; width: 14px; flex: 0 0 auto; }
.hw-group-name { font-size: 16px; font-weight: 700; color: var(--text-1); flex: 0 0 auto; }
.hw-group-meta { color: var(--text-2); font-size: 13px; flex: 1; }
.hw-group-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 12px; }
.hw-card { border: 1px solid var(--green-200); border-radius: 10px; padding: 14px 16px; background: #fff; transition: border-color .15s, box-shadow .15s; cursor: pointer; }
.hw-card:hover { border-color: var(--green-500); box-shadow: 0 2px 8px rgba(68,133,58,.08); }
.hw-card.done { border-left: 4px solid var(--green-500); }
.hw-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.hw-topic { font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--text-1); }
.hw-meta { color: var(--text-2); font-size: 13px; margin-bottom: 10px; line-height: 1.7; }
.hw-card-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--green-200); }
.hw-progress { flex: 1; height: 6px; background: var(--green-50); border-radius: 3px; overflow: hidden; }
.hw-progress-bar { display: block; height: 100%; background: var(--green-500); }
.opt-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--green-200); background: #fff; border-radius: 10px; cursor: pointer; font-size: 15px; font-family: inherit; color: var(--text-1); }
.opt-btn:hover { background: var(--green-50); }
.opt-btn:disabled { cursor: default; }
.opt-btn span { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--green-100); color: var(--green-700); align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.opt-btn.correct { background: #e6f4e0; border-color: var(--green-400); }
.opt-btn.wrong { background: #fbe9e7; border-color: var(--danger); }
.pr-feedback { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.6; }
.pr-feedback.ok { background: #e6f4e0; color: #35682d; }
.pr-feedback.no { background: #fbe9e7; color: #9c3f32; }
.pr-result { text-align: center; padding: 30px 0; }
.pr-result .score { font-size: 42px; font-weight: 700; color: var(--green-600); margin: 12px 0; }
.pr-result .sub { font-size: 14px; color: var(--text-2); margin-bottom: 20px; }

/* ===================== 赛事日历（学生端 · 比赛报名） ===================== */
.tc-intro { font-size: 13px; color: var(--text-2); line-height: 1.7; margin: -6px 0 16px; }

/* 月份时间线：上排 1-6 月，下排 7-12 月，节点之间用箭头连接 */
.tc-timeline { display: flex; flex-direction: column; margin: 0 0 20px; }
.tl-row { display: flex; align-items: stretch; }

.tl-node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  border: 1px solid var(--green-200);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.tl-node .tl-m { font-size: 14px; font-weight: 600; color: var(--text-1); }
.tl-node .tl-n { font-size: 11px; color: var(--text-3); }
.tl-node:hover { border-color: var(--green-400); background: var(--green-50); }
.tl-node.has-ev { border-color: var(--green-300); background: var(--green-50); }
.tl-node.has-ev .tl-n { color: var(--green-600); font-weight: 600; }
.tl-node.no-ev { background: #fafbfa; border-style: dashed; }
.tl-node.no-ev .tl-m { color: var(--text-3); }
.tl-node.active {
  background: var(--green-500);
  border-color: var(--green-500);
  box-shadow: 0 2px 10px rgba(88, 163, 75, .25);
}
.tl-node.active .tl-m { color: #fff; }
.tl-node.active .tl-n { color: rgba(255, 255, 255, .85); }

.tl-arrow {
  flex: 0 0 22px;
  align-self: center;
  height: 2px;
  background: var(--green-200);
  position: relative;
  margin: 0 3px;
}
.tl-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--green-300);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* 反向箭头：下排从右往左指（7月 → 8月 → … → 12月） */
.tl-arrow.rev::after {
  right: auto;
  left: -1px;
  border-left: none;
  border-right: 6px solid var(--green-300);
}

/* 上下两排之间的折返：从 6 月正下方连到 7 月。
   用与月份行完全相同的列结构占位，保证垂直对齐，无需手算偏移量。 */
.tl-turn { height: 26px; }
.tl-turn .tl-ghost { flex: 1 1 0; min-width: 0; }
.tl-turn .tl-ghost-arrow { visibility: hidden; }
.tl-down { display: flex; justify-content: center; align-items: stretch; }
.tl-down i {
  display: block; width: 0; height: 100%;
  border-left: 2px dashed var(--green-300);
  position: relative;
}
.tl-down i::after {
  content: '';
  position: absolute; bottom: 0; left: -6px;
  border-top: 6px solid var(--green-300);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.tc-month-head { font-size: 14px; font-weight: 600; color: var(--green-700); margin: 0 0 12px; }

/* 赛事卡片 */
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--green-200);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.tc-card:hover { border-color: var(--green-500); box-shadow: 0 3px 12px rgba(68, 133, 58, .12); }
.tc-card:active { transform: scale(.99); }
.tc-card:focus-visible { outline: 2px solid var(--green-400); outline-offset: 2px; }
.tc-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tc-name { font-size: 15px; font-weight: 600; color: var(--text-1); line-height: 1.5; margin-bottom: 8px; }
.tc-meta { font-size: 13px; color: var(--text-2); line-height: 1.8; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tc-tag { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: var(--green-100); color: var(--green-700); }
.tc-more {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--green-200);
  font-size: 12px; color: var(--green-600);
}

/* 赛事级别徽章 */
.tc-lv { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 20px; font-weight: 600; }
.tc-lv.lv-world { background: #f3e8ff; color: #7b3fbf; }
.tc-lv.lv-nat   { background: #e7f0fe; color: #2563c9; }
.tc-lv.lv-sh    { background: var(--green-100); color: var(--green-700); }

/* 详情弹窗 */
.tc-modal { max-width: 560px; }
.tc-sub { font-size: 14px; color: var(--green-700); margin: 18px 0 10px; }
.tc-res { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tc-res li {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--green-50);
  border-left: 3px solid var(--green-300);
  color: var(--text-1);
}
.tc-res li.gold   { background: #fdf6e0; border-left-color: #e0a800; }
.tc-res li.silver { background: #f4f6f8; border-left-color: #9aa5b1; }
.tc-res li.bronze { background: #fbf0e8; border-left-color: #c1783c; }
.tc-note { font-size: 12px; color: var(--text-3); margin-top: 10px; }
.tc-unknown { color: var(--text-3); }

/* 卡片顶部赛场缩略图 */
.tc-thumb {
  /* 父级 .tc-card 是纵向 flex 容器：width 需补偿两侧 16px 负边距才能真正通栏 */
  width: calc(100% + 32px); height: 96px; overflow: hidden;
  margin: -14px -16px 12px;
  border-radius: 12px 12px 0 0;
  background: var(--green-100);
  display: flex; align-items: center; justify-content: center;
}
.tc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-thumb-ph { color: var(--green-500); font-size: 30px; }

/* 详情弹窗赛场全景：左右负边距抵消 .modal 的 26px 内边距，通栏顶满 */
.tc-photo { margin: 2px -26px 16px; overflow: hidden; background: var(--green-50); }
.tc-photo img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.tc-photo-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 170px; color: var(--text-3); font-size: 14px;
  background: linear-gradient(135deg, var(--green-50), #fff);
  border: 1px dashed var(--green-200);
}
.tc-ph-icon { font-size: 34px; }
.tc-photo-ph small { color: var(--text-3); font-size: 12px; }
.tc-src { display: block; font-size: 11px; color: var(--text-3); margin-top: 3px; }

@media (max-width: 720px) {
  .tl-arrow { flex-basis: 12px; margin: 0 1px; }
  .tl-node { padding: 8px 2px; }
  .tl-node .tl-m { font-size: 12px; }
  .tl-node .tl-n { font-size: 10px; }
  .tc-grid { grid-template-columns: 1fr; }
}
/* ===== 老师端：女生姓名显示红色（2026-09-04 恢复，此前被样式覆盖丢失） ===== */
.female { color: #e03131; }

/* ==================== 学生端：头像区 + 装扮系统美化（2026-09-04 追加） ==================== */

/* --- 侧栏头像下方：头衔徽章 + 姓名 --- */
.avatar-user { margin-top: 6px; text-align: center; line-height: 1.4; }
.avatar-user .avatar-title {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--green-700);
  background: #fff; border: 1px solid var(--green-300); border-radius: 999px;
  padding: 1px 12px; margin-bottom: 4px;
}
.avatar-user .avatar-name { display: block; font-size: 16px; font-weight: 700; color: var(--green-700); letter-spacing: 1px; }

/* --- 装扮系统：自绘下拉框（替换原生灰色样式） --- */
.dress-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; padding: 10px 40px 10px 14px; font-size: 14px; font-family: inherit;
  color: var(--text-1); background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2358a34b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
  border: 1.5px solid var(--green-200); border-radius: 10px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.dress-select:hover { border-color: var(--green-400); background-color: var(--green-50); }
.dress-select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(88, 163, 75, .18); background-color: #fff; }
.dress-select option { padding: 8px; }
.dress-select option:disabled { color: #a8b0a6; }

/* --- 装扮系统：当前头衔 / 当前背景 徽章化 --- */
#dress-title-current, #dress-bg-current {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--green-700);
  background: linear-gradient(135deg, var(--green-50), var(--green-100));
  border: 1px solid var(--green-300); border-radius: 999px; padding: 4px 16px;
}

/* --- 装扮系统：卡片标题分隔线 + 表格底色 --- */
.dress-grid .card h3 { font-size: 16px; padding-bottom: 10px; border-bottom: 1px dashed var(--green-200); }
.dress-grid .exam-card { background: var(--green-50); }
.dress-grid .exam-row { border-bottom-color: rgba(168, 214, 157, .35); }
.dress-grid .btn-primary { border-radius: 10px; padding: 10px 22px; }

/* ==================== 背景主题全站适配（2026-09-04 第二轮追加） ====================
   原理：全站组件均引用 :root 的 --green-* / --text-* 变量，
   在 body 主题类上整体覆盖变量，即可让侧栏/卡片/边框/按钮/文字同步换色，
   结构与默认绿色版完全一致。 */

/* ---------- 淡紫色主题 ---------- */
body.theme-bg-purple {
  --green-50:  #f8f5fd;
  --green-100: #efe9f9;
  --green-200: #ded2f2;
  --green-300: #c3aee7;
  --green-400: #a486d8;
  --green-500: #8b66c9;
  --green-600: #7151a6;
  --green-700: #594082;
  --text-1: #37304a;
  --text-2: #645e78;
  --text-3: #9b95ab;
  background: var(--green-50);
}
body.theme-bg-purple-dot {
  --green-50:  #f8f5fd;
  --green-100: #efe9f9;
  --green-200: #ded2f2;
  --green-300: #c3aee7;
  --green-400: #a486d8;
  --green-500: #8b66c9;
  --green-600: #7151a6;
  --green-700: #594082;
  --text-1: #37304a;
  --text-2: #645e78;
  --text-3: #9b95ab;
}

/* ---------- 浅蓝色主题 ---------- */
body.theme-bg-blue {
  --green-50:  #f2f8fd;
  --green-100: #e4f0fa;
  --green-200: #c9e2f4;
  --green-300: #a2c9ea;
  --green-400: #74a9da;
  --green-500: #528cc5;
  --green-600: #41709f;
  --green-700: #34587d;
  --text-1: #2f3a46;
  --text-2: #5d6a78;
  --text-3: #97a3b0;
  background: var(--green-50);
}
body.theme-bg-blue-dot {
  --green-50:  #f2f8fd;
  --green-100: #e4f0fa;
  --green-200: #c9e2f4;
  --green-300: #a2c9ea;
  --green-400: #74a9da;
  --green-500: #528cc5;
  --green-600: #41709f;
  --green-700: #34587d;
  --text-1: #2f3a46;
  --text-2: #5d6a78;
  --text-3: #97a3b0;
}

/* ---------- 淡粉色主题 ---------- */
body.theme-bg-pink {
  --green-50:  #fdf4f8;
  --green-100: #fbe7ef;
  --green-200: #f7cfdf;
  --green-300: #efa8c5;
  --green-400: #e37ba4;
  --green-500: #d25487;
  --green-600: #aa436c;
  --green-700: #863555;
  --text-1: #46333e;
  --text-2: #75606b;
  --text-3: #ad9aa4;
  background: var(--green-50);
}
body.theme-bg-pink-dot {
  --green-50:  #fdf4f8;
  --green-100: #fbe7ef;
  --green-200: #f7cfdf;
  --green-300: #efa8c5;
  --green-400: #e37ba4;
  --green-500: #d25487;
  --green-600: #aa436c;
  --green-700: #863555;
  --text-1: #46333e;
  --text-2: #75606b;
  --text-3: #ad9aa4;
}

/* ---------- 主题下的装扮下拉框：箭头与聚焦光圈同色 ---------- */
body.theme-bg-blue .dress-select, body.theme-bg-blue-dot .dress-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23528cc5' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
body.theme-bg-blue .dress-select:focus, body.theme-bg-blue-dot .dress-select:focus { box-shadow: 0 0 0 3px rgba(82, 140, 197, .18); }
body.theme-bg-purple .dress-select, body.theme-bg-purple-dot .dress-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238b66c9' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
body.theme-bg-purple .dress-select:focus, body.theme-bg-purple-dot .dress-select:focus { box-shadow: 0 0 0 3px rgba(139, 102, 201, .18); }
body.theme-bg-pink .dress-select, body.theme-bg-pink-dot .dress-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d25487' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
body.theme-bg-pink .dress-select:focus, body.theme-bg-pink-dot .dress-select:focus { box-shadow: 0 0 0 3px rgba(210, 84, 135, .18); }

/* ==================== 默认♣头像 + 头像商店（2026-09-04 第三轮追加） ==================== */

/* 默认头像：白底 + 绿色♣居中（avatar-box 仅学生端使用，teacher.html 无此类） */
.sidebar .avatar-box { background: #fff; color: #2e7d32; }

/* 装扮系统：头像设置卡占整行 */
.dress-grid .dress-avatar-card { grid-column: 1 / -1; }

/* 头像选项网格 */
.avatar-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.avatar-opt {
  border: 2px solid var(--green-200); border-radius: 12px; background: #fff;
  padding: 14px 8px 10px; text-align: center; cursor: pointer; user-select: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.avatar-opt:hover { border-color: var(--green-400); background: var(--green-50); }
.avatar-opt.selected { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(88, 163, 75, .15); background: var(--green-50); }
.avatar-opt.locked { opacity: .55; cursor: not-allowed; background: #fafafa; }
.avatar-opt.locked:hover { border-color: var(--green-200); background: #fafafa; }
.avatar-opt-icon { display: block; font-size: 34px; line-height: 1.2; font-weight: 600; }
.avatar-opt-name { display: block; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.avatar-opt-state { display: inline-block; font-size: 11px; color: var(--green-600); background: var(--green-100); border-radius: 999px; padding: 1px 8px; margin-top: 6px; }
.avatar-opt.selected .avatar-opt-state { background: var(--green-500); color: #fff; }

/* 商城头像商店：白底圆卡花色展示 */
.avatar-demo {
  width: 100%; max-width: 120px; aspect-ratio: 1 / 1; margin: 0 auto 8px;
  background: #fff; border: 1px solid var(--green-200); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 600; box-shadow: inset 0 0 0 4px var(--green-50);
}
@media (max-width: 720px) { .avatar-opts { grid-template-columns: repeat(2, 1fr); } }

/* ==================== 花色放大 + 徽章商店（2026-09-04 第四轮追加） ==================== */

/* 侧栏头像框放大（1.6 倍：72→100px，花色 64px），并为徽章定位做容器 */
.sidebar .avatar-box {
  width: 100px; height: 100px;
  position: relative;
}
.sidebar .avatar-box #avatar-suit { font-size: 91.8px; }   /* 2026-09-11 用户要求：原 102px 的 90%（真值同时在 pages/student.html 行内） */

/* 头像右下角盾形徽章：独立于头像框，悬挂在圆外右下角（形状由 SVG 绘制，参考盾牌图整体造型） */
.sidebar .avatar-box { margin-bottom: 30px; }
.avatar-badge {
  position: absolute; right: -14px; bottom: -12px;
  width: 40px; height: 47px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.shield-svg { width: 100%; height: 100%; display: block; }

/* 商城徽章商品：同款盾形展示卡 */
.badge-demo {
  width: 100%; max-width: 92px; aspect-ratio: 100 / 118; margin: 0 auto 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
}

/* 商城头像花色放大（1.6 倍：44→70px） */
.avatar-demo { font-size: 112px; max-width: 132px; }

/* 装扮系统四卡等大（头像卡已改为普通卡片，取消占整行） */
.dress-grid .dress-avatar-card { grid-column: auto; }

/* ==================== 盾形徽章裁剪修复（2026-09-04 第七轮追加） ==================== */
/* .logo 与 .avatar-box 默认 overflow:hidden，会把悬挂在头像外右下角的盾牌剪掉；
   学生端侧栏放开裁剪（移动端头像是隐藏的，不受影响），保证盾牌完整显示 */
.sidebar .logo,
.sidebar .avatar-box { overflow: visible; }
@media (max-width: 720px) {
  .sidebar .logo { overflow: hidden; }
}

/* ==================== 个人中心（2026-09-04 追加）：子标签导航 ==================== */
.center-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.ctab {
  border: 1.5px solid var(--green-200); background: #fff; color: var(--text-2);
  border-radius: 999px; padding: 7px 18px; font-size: 14px; font-family: inherit;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.ctab:hover { border-color: var(--green-400); background: var(--green-50); }
.ctab.active {
  border-color: var(--green-500); background: var(--green-500); color: #fff; font-weight: 600;
}
.center-sub { animation: fadeIn .2s ease; }

/* ==================== 侧栏图标等宽对齐（2026-09-04 追加） ==================== */
.nav-item .nav-ico {
  flex: 0 0 24px; width: 24px;
  text-align: center; line-height: 1;
}


/* ===== 挑战系统·战斗属性面板（2026-09-04 追加） ===== */
.combat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 48px; }
.combat-row { display: flex; align-items: center; min-height: 46px; border-bottom: 1px dashed var(--green-100, #e3eedd); }
.combat-label { flex: 0 0 104px; color: var(--text-2, #6b7280); font-size: 14px; }
.combat-value { flex: 1; font-size: 15px; color: var(--text-1, #1f2937); min-width: 0; }
.combat-power { font-size: 22px; font-weight: 700; }
.combat-bar { position: relative; height: 26px; background: #f1f2f4; border-radius: 13px; overflow: hidden; }
.combat-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #f2a2b3; border-radius: 13px; transition: width .3s; }
.combat-bar-text { position: relative; z-index: 1; text-align: center; line-height: 26px; font-size: 13px; color: #8c4a58; }
@media (max-width: 768px) {
  .combat-grid { grid-template-columns: 1fr; gap: 0; }
}


/* ===== 战斗属性详情按钮与弹窗（2026-09-04 追加） ===== */
.combat-detail-btn { margin-left: 8px; padding: 1px 10px; font-size: 12px; color: var(--green-600, #3d8b40); background: #fff; border: 1px solid var(--green-300, #a5d0a0); border-radius: 10px; cursor: pointer; vertical-align: middle; }
.combat-detail-btn:hover { background: var(--green-50, #eef6ea); }
.combat-modal-mask { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.combat-modal { width: min(420px, 88vw); max-height: 76vh; overflow: auto; background: #fff; border-radius: 12px; padding: 20px 22px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.combat-modal h3 { margin: 0 0 12px; font-size: 16px; color: var(--text-1, #1f2937); }
.combat-modal ul { margin: 0; padding-left: 18px; }
.combat-modal li { font-size: 14px; color: var(--text-2, #4b5563); line-height: 1.9; }


/* ===== 专题金星进度条与星星（2026-09-04 追加） ===== */
.topic-star-td { white-space: nowrap; text-align: left; }
.topic-star-bar { position: relative; display: inline-block; vertical-align: middle; width: 86px; height: 18px; background: #f1f2f4; border-radius: 9px; overflow: hidden; margin-right: 8px; }
.topic-star-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #8fc98a; border-radius: 9px; transition: width .3s; }
.topic-star-bar span { position: relative; z-index: 1; display: block; text-align: center; line-height: 18px; font-size: 11px; color: #5c665a; }
.topic-star { display: inline-block; vertical-align: middle; font-size: 20px; line-height: 1; }
.topic-star.gray { color: #c9cdd3; cursor: default; }
.topic-star.gold { color: #f5b301; cursor: pointer; text-shadow: 0 0 6px rgba(245,179,1,.45); }


/* ===== 金星右侧信息圆圈与悬停奖励提示（2026-09-04 追加） ===== */
.topic-star-info { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 15px; height: 15px; margin-left: 6px; border: 1px solid #9aa3ad; border-radius: 50%; font-size: 10px; font-style: italic; font-family: Georgia, serif; color: #6b7280; cursor: help; user-select: none; }
.topic-star-info:hover, .topic-star-info:focus { border-color: var(--green-600, #3d8b40); color: var(--green-600, #3d8b40); }
.topic-star-tip { display: none; position: absolute; right: -6px; bottom: calc(100% + 8px); z-index: 3200; width: max-content; max-width: 240px; padding: 9px 13px; background: #fff; border: 1px solid var(--green-200, #cfe6c8); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); font-size: 12px; font-style: normal; line-height: 1.85; color: var(--text-1, #1f2937); text-align: center; }
.topic-star-tip b { color: #1a3a6b; }
.topic-star-tip i { color: #98a1ab; font-size: 11px; }
.topic-star-tip::after { content: ''; position: absolute; right: 12px; top: 100%; border: 6px solid transparent; border-top-color: var(--green-200, #cfe6c8); }
.topic-star-info:hover .topic-star-tip, .topic-star-info:focus .topic-star-tip { display: block; }


/* ===== 徽章图片版（老刘头盾牌图，2026-09-04 追加） ===== */
.badge-img { width: 100%; height: 100%; display: block; }
.sidebar .avatar-badge { width: 44px; height: 44px; }
.badge-demo { aspect-ratio: 1 / 1; }

/* ===== 题库示例做题视图（teacher demo-view，2026-09-04 追加） ===== */
.demo-card { width: 100%; max-width: 820px; padding: 26px 30px; }
.demo-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.demo-progress { font-size: 15px; font-weight: 700; color: var(--green-700); }
.demo-diff { font-size: 13px; color: var(--text-3); }
.demo-hand { font-family: inherit; font-size: 19px; line-height: 1.55; background: var(--green-50);
  border: 1px solid var(--green-200); border-radius: 10px; padding: 12px 18px; margin: 0 0 14px; white-space: pre-wrap; }
.demo-question { font-size: 17px; font-weight: 600; margin-bottom: 16px; white-space: pre-wrap; }
.demo-opts { display: flex; flex-direction: column; gap: 10px; }
.demo-opt { text-align: left; padding: 11px 16px; border-radius: 10px; border: 1.5px solid var(--green-200);
  background: #fff; cursor: pointer; font-size: 15px; font-family: inherit; color: var(--text-1); }
.demo-opt:hover:not(:disabled) { border-color: var(--green-400); }
.demo-opt:disabled { cursor: default; }
.demo-opt.correct { border-color: var(--green-500); background: var(--green-100); }
.demo-opt.wrong { border-color: #d46a6a; background: #fbeeee; }
.demo-answer { margin-top: 16px; padding: 13px 18px; border-radius: 10px; background: var(--green-100); }
.demo-answer-line { font-weight: 700; color: var(--green-700); margin-bottom: 5px; }
.demo-explain { font-size: 15px; white-space: pre-wrap; color: var(--text-2); }
.demo-nav { display: flex; gap: 12px; margin-top: 20px; align-items: center; }
.demo-nav .btn:first-child { margin-right: auto; }
.demo-nav .btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 640px) {
  .demo-card { padding: 18px; }
  .demo-hand { font-size: 16px; }
  .demo-nav { flex-wrap: wrap; }
}

/* ===== 示例视图同步学生端做题格式（2026-09-05 追加） ===== */
.demo-view .topic-body { display: flex; justify-content: center; }
.demo-view .demo-card { max-width: 720px; width: 100%; border-radius: 14px; padding: 26px 30px; align-self: flex-start; }
.demo-view .demo-hand { font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; white-space: pre-line; font-size: 30px; line-height: 1.7; background: var(--green-50); border-radius: 10px; padding: 16px 18px; margin-bottom: 0; }
.demo-view .demo-question { font-size: 24px; line-height: 1.5; font-weight: 600; color: var(--text-1); margin-bottom: 18px; }
.demo-view .demo-diff { font-size: 13px; color: var(--text-3); }
.demo-view .demo-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--green-200); border-radius: 10px; background: #fff; font-size: 15px; color: var(--text-1); }
.demo-view .demo-opt:hover:not(:disabled) { background: var(--green-50); border-color: var(--green-200); }
.demo-view .demo-opt b { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--green-100); color: var(--green-700); align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.demo-view .demo-opt span { line-height: 1.5; }
.demo-view .demo-opt.correct { background: #e6f4e0; border-color: var(--green-400); }
.demo-view .demo-opt.wrong { background: #fbe9e7; border-color: var(--danger); }
.demo-view .demo-answer { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #e6f4e0; }
.demo-view .demo-answer-line { font-weight: 700; color: #35682d; margin-bottom: 5px; font-size: 15px; }
.demo-view .demo-explain { font-size: 14px; line-height: 1.7; color: #35682d; }
@media (max-width: 640px) {
  .demo-view .demo-card { padding: 18px; }
  .demo-view .demo-hand { font-size: 22px; }
  .demo-view .demo-question { font-size: 19px; }
}

/* ===== 选项内花色符号不要圆形徽章（2026-09-05 追加）：圈只留给字母，花色用正文同款字体+四色 ===== */
.opt-btn > span { display: inline; background: none; width: auto; height: auto; min-width: 0; border-radius: 0; padding: 0; color: inherit; font-weight: inherit; flex-shrink: 1; }
.opt-btn > span:first-child { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--green-100); color: var(--green-700); align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.opt-btn .suit-spade, .opt-btn .suit-heart, .opt-btn .suit-diamond, .opt-btn .suit-club { font-size: inherit; font-weight: 600; }
.demo-view .demo-top { margin-bottom: 12px; }

/* ===== 示例视图选择器修正：容器类名是 topic-view，须用 #demo-view（2026-09-05 追加，此前 .demo-view 前缀全部未命中） ===== */
#demo-view .topic-body { display: flex; justify-content: center; }
#demo-view .demo-card { max-width: 720px; width: 100%; border-radius: 14px; padding: 26px 30px; align-self: flex-start; }
#demo-view .demo-hand { font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; white-space: pre-line; font-size: 30px; line-height: 1.7; border: 1px solid var(--green-200); padding: 16px 18px; margin-bottom: 0; }
#demo-view .demo-question { font-size: 24px; line-height: 1.5; font-weight: 600; color: var(--text-1); margin-bottom: 18px; }
#demo-view .demo-top { margin-bottom: 12px; }
/* 字母徽章（含"A."带点），教师示例与学生端做题共用 */
#demo-view .demo-opt b, .opt-btn b { display: inline-flex; min-width: 24px; height: 24px; border-radius: 16px; background: var(--green-100); color: var(--green-700); align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; padding: 0 7px; box-sizing: border-box; }
#demo-view .demo-opt span, .opt-btn > span { line-height: 1.5; }
@media (max-width: 640px) {
  #demo-view .demo-card { padding: 18px; }
  #demo-view .demo-hand { font-size: 22px; }
  #demo-view .demo-question { font-size: 19px; }
}

/* ===== 修复：选项内花色符号仍被旧 .opt-btn span 规则套圈（花色span嵌套在内容span内，> 直取不到）===== */
.opt-btn .suit-spade, .opt-btn .suit-heart, .opt-btn .suit-diamond, .opt-btn .suit-club { display: inline; background: none; width: auto; height: auto; min-width: 0; border-radius: 0; padding: 0; font-weight: 600; }

/* ===== 作业卡金星/小i放大两倍并垂直居中于卡片正右方（2026-09-05 追加，仅作用作业卡，题库页不变）===== */
.hw-card { position: relative; }
.hw-card .hw-star-wrap { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.hw-card .topic-star { font-size: 40px; }
.hw-card .topic-star-info { width: 30px; height: 30px; margin-left: 10px; font-size: 20px; }
.hw-card .topic-star-tip { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(100% + 12px); }
.hw-card .topic-star-tip::after { right: auto; left: 50%; margin-left: -6px; }

/* ===== 作业卡金星/小i再放大一倍（星80px、ⓘ60px），位置不变：卡片正右方垂直居中（2026-09-05 追加）===== */
.hw-card .topic-star { font-size: 80px; }
.hw-card .topic-star-info { width: 60px; height: 60px; margin-left: 18px; font-size: 38px; border-width: 2px; }
.hw-card .topic-star-tip { bottom: calc(100% + 20px); min-width: 220px; }

/* ===== 修复：选项内花色颜色被旧 .opt-btn span 的 color 抢走（0,1,1 > .suit-* 的 0,1,0），用 0,2,0 显式四色 ===== */
.opt-btn .suit-spade { color: #111 !important; }
.opt-btn .suit-heart { color: #d32f2f !important; }
.opt-btn .suit-diamond { color: #f57c00 !important; }
.opt-btn .suit-club { color: #2e7d32 !important; }

/* ===== 作业卡金星缩至75%（60px）、小i缩至60%（36px），位置不变（2026-09-05 追加）===== */
.hw-card .topic-star { font-size: 60px; }
.hw-card .topic-star-info { width: 36px; height: 36px; margin-left: 12px; font-size: 22px; }

/* ===== 作业卡金星与小i垂直中心对齐 + 整体左移40px（right 18→58px）（2026-09-05 追加）===== */
.hw-card .hw-star-wrap { right: 58px; display: flex; align-items: center; }
.hw-card .topic-star { line-height: 1; display: inline-block; }

/* ===== 小i视觉微调：下移2px（2026-09-05 追加）===== */
.hw-card .topic-star-info { position: relative; top: 2px; }

/* ===== 错题本（个人中心·错题记录，2026-09-05 追加） ===== */
#center-mistakes { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.wq-toolbar { width: 100%; max-width: 720px; display: flex; align-items: center; justify-content: space-between; }
.wq-count { font-size: 13px; color: var(--text-3); }
.wq-card { width: 100%; max-width: 720px; padding: 16px 20px; }
.wq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.wq-topic { font-size: 13px; font-weight: 700; color: var(--green-700); background: var(--green-50); border-radius: 6px; padding: 2px 8px; }
.wq-meta { font-size: 12px; color: var(--text-3); margin-left: auto; }
.wq-question { font-size: 15px; line-height: 1.6; color: var(--text-1); margin-bottom: 12px; white-space: pre-wrap; }

/* ===== 统一四色花色：♠黑 ♥红 ♦蓝 ♣绿（2026-09-05 追加，覆盖旧橙方块） ===== */
.suit-s, .suit-spade { color: #111; }
.suit-h, .suit-heart { color: #d32f2f; }
.suit-d, .suit-diamond { color: #2563eb; }
.suit-c, .suit-club { color: #2e7d32; }

/* ===== 修复：选项按钮内方块仍为橙色（1156行 !important 规则压过统一四色），追加 !important 蓝色覆盖（2026-09-05） ===== */
.opt-btn .suit-diamond { color: #2563eb !important; }

/* ===== 统一方块♦为 #FF5500（用户指定颜色，2026-09-05） ===== */
.suit-d, .suit-diamond { color: #FF5500 !important; }
.opt-btn .suit-diamond { color: #FF5500 !important; }

/* ===== 头像框（avatar frame）：透明 PNG 环绕在头像外围（2026-09-06 二轮修正）
     .avatar-box 原本无 position:relative，框的 left/top:50% 会相对错误祖先定位而跑偏；
     overflow:hidden 会把 120px 框裁进 72px 窗口 —— 一并放开（花色字符宽度本就在圆内，无溢出风险） */
.sidebar .avatar-box {
  position: relative;
  overflow: visible;
}
.avatar-frame-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  max-width: none;
  pointer-events: none;
  z-index: 1;
}
.avatar-box #avatar-suit {
  position: relative;
  z-index: 0;
}
/* 名片横匾：替代「头衔圆条」（.avatar-title 白底绿框）的背景，尺寸与原圆条一致（2026-09-06） */
.avatar-user .avatar-title.has-nameplate {
  background-color: transparent;
  border-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* ===== 装扮三轮（2026-09-06 09:58）：框图回滚不挖洞版，改用 z-index 压层 =====
   层级：头像框(0) < 花色头像(1) < 徽章(2) —— 框中心部分被头像盖住，无需挖洞；
   框(120px)与花色均以 box 中心定位，几何中心重合 */
.avatar-frame-img { z-index: 0; }
.avatar-box #avatar-suit { z-index: 1; }

/* ===== 装扮四轮（2026-09-06 10:12 修正）：名片横匾图放大 1.5 倍、文字保持原 12px =====
   做法：::before 伪元素承接背景图（JS 写入 --np-img 变量），尺寸 150% 以中心悬出；
   圆条本身（含文字）完全不动 —— 不再用 scale，避免图随文字一起缩放 */
.avatar-user .avatar-title { position: relative; z-index: 0; }
.avatar-user .avatar-title.has-nameplate::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background-image: var(--np-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}
/* ===== 逐件微调（JS 加 per-item class：frame-X / nameplate-X） ===== */
/* 青铜头像框：144px（120×1.2），中心左移 12px（8+6-2 右移回 2） */
.avatar-frame-img.frame-bronze {
  width: 144px;
  height: 144px;
  transform: translate(calc(-50% - 12px), -50%);
}
/* 青铜名片：横匾图 200%（全局 150%，青铜单独放大），图中心累计偏移 左0.7px/下0.5px（0.5+0.2 / 0.3+0.2，文字不动） */
.avatar-user .avatar-title.nameplate-bronze::before {
  width: 200%;
  height: 200%;
  transform: translate(calc(-50% - 0.7px), calc(-50% + 0.5px));
}
/* 横匾下方用户信息块（姓名/花色行/俱乐部名/会员端）整体下移 2px（2026-09-06 用户圈选指定） */
.sidebar .avatar-user .avatar-name,
.sidebar .logo-suits,
.sidebar .logo-name,
.sidebar .logo small {
  position: relative;
  top: 2px;
}

/* ===== 装扮五轮（2026-09-06 10:30）：青铜参数全局化 =====
   用户确认：所有头像框、所有名片统一采用青铜调好的参数 */
.avatar-frame-img {
  width: 144px;
  height: 144px;
  transform: translate(calc(-50% - 12px), -50%);
}
.avatar-user .avatar-title.has-nameplate::before {
  width: 200%;
  height: 200%;
  transform: translate(calc(-50% - 0.5px), calc(-50% + 0.3px));
}

/* ===== 装扮六轮（2026-09-06 11:20）：白银件微调 ===== */
/* 白银头像框：高度 144px 不变，宽度加宽至 172.8px（144×120%）；中心累计偏移 右2px/下4px（5-3=+2；+4） */
.avatar-frame-img.frame-silver {
  width: 172.8px;
  height: 144px;
  transform: translate(calc(-50% + 2px), calc(-50% + 4px));
}
/* 白银名片：图中心累计偏移 右2.8px、下2.3px（0.7+1+0.8+0.3 / 0.3+0.5+1+0.5） */
.avatar-user .avatar-title.nameplate-silver::before {
  transform: translate(calc(-50% + 2.8px), calc(-50% + 2.3px));
}

/* ===== 商店内头像框/名片缩略图 ===== */
.frame-demo,
.card-demo {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.4);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}
.frame-demo img {
  height: 72px;
  width: auto;
  object-fit: contain;
}
.card-demo img {
  width: 92%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}

/* ============ 教师端页面锁高：名单再长也不撑长整页，名单区内部滚动（2026-09-05） ============ */
/* 仅对 teacher.html（body.teacher-locked）生效，学生端及其余页面不受影响 */
body.teacher-locked { height: 100vh; overflow: hidden; }
body.teacher-locked .app-shell { height: 100vh; overflow: hidden; }
body.teacher-locked .sidebar { overflow-y: auto; }          /* 侧栏安全冗余：条目多也可内部滚 */
body.teacher-locked .main { min-height: 0; }
body.teacher-locked .content { min-height: 0; overflow: hidden; }   /* 不让整页滚；学生管理面板自己管溢出 */

/* 学生管理面板：4 统计卡 + 搜索/筛选栏 + 表头全部冻在顶部，仅 tbody 内部滚（2026-09-05 18:42 升级） */
body.teacher-locked #panel-students.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
body.teacher-locked #panel-students.active > .stat-grid { flex: 0 0 auto; }
body.teacher-locked #panel-students.active > .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.teacher-locked #panel-students.active > .card > .toolbar,
body.teacher-locked #panel-students.active > .card > .toolbar-hint { flex: 0 0 auto; }
body.teacher-locked #panel-students.active > .card > .table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* 表头吸顶在 .table-scroll 容器内顶部 */
body.teacher-locked #panel-students.active > .card > .table-scroll thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--green-50);
  box-shadow: 0 1px 0 var(--green-200);
}

/* ===================== 商店战斗力倍率行 + 新背景主题（2026-09-05 追加） ===================== */
/* 商品卡价格下的倍率提示行 */
.shop-item .item-mult {
  font-size: 12px;
  color: #b8860b;
  margin: -4px 0 10px;
}
/* 商店预览方块：纯白 / 深夜黑 */
.demo-bg_white { background: #ffffff; border: 1px solid #e3e6ea; }
.demo-bg_dark { background: #1f1f28; }
/* 背景主题：纯白 */
body.theme-bg-white { background: #ffffff; }
/* 背景主题：深夜黑（类 Windows 深色模式）——配套把主区域文字切换为浅色保证可读 */
body.theme-bg-dark { background: #1f1f28; color: #e8eaf0; }
body.theme-bg-dark .main,
body.theme-bg-dark .card,
body.theme-bg-dark .panel { color: #e8eaf0; }
body.theme-bg-dark .card { background: #2a2a35; border-color: #3a3a48; }
body.theme-bg-dark .item-name, body.theme-bg-dark .item-price,
body.theme-bg-dark .stat-label, body.theme-bg-dark .form-tip { color: #c9cdd6; }
body.theme-bg-dark .table th { color: #e8eaf0; }
body.theme-bg-dark .table td { color: #d5d9e2; }
body.theme-bg-dark .toolbar-hint, body.theme-bg-dark .nav-item { color: #c9cdd6; }
body.theme-bg-dark .card h3, body.theme-bg-dark .card h4 { color: #e8eaf0; }

/* ===== 青铜名片偏移（17:38）：必须置于末尾全局段之后，否则被全局（左0.5/下0.3）同特异性覆盖 ===== */
.avatar-user .avatar-title.nameplate-bronze::before {
  transform: translate(calc(-50% - 0.7px), calc(-50% + 0.5px));
}

/* ============================================================ */
/* ============ 手机端抽屉导航（2026-09-07）：侧边栏收进右上角三条杠 ============ */
/* 桌面端零改动（新元素全部 display:none）；≤720px 时：
   ① 顶栏 = 三条杠 + 头像 + 姓名（左） / 铃铛 + 汉堡（右），页面标题与退出登录隐藏
   ② 侧边栏变为左侧滑出抽屉，含全部大功能 + 退出登录
   ③ 点菜单项或遮罩自动收起（body.menu-open 控制） */
.menu-btn, .topbar-avatar, .topbar-username, .sidebar-logout { display: none; }
.nav-mask { display: none; }

@media (max-width: 720px) {
  /* --- 顶栏 --- */
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar h2, .topbar-right .user-info, .topbar-right #btn-logout { display: none; }
  .topbar-right { margin-left: auto; gap: 4px; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 8px;
    background: none; border: none; border-radius: 8px;
    color: var(--green-700); cursor: pointer; flex-shrink: 0;
  }
  .menu-btn:hover { background: var(--green-100); }
  .menu-btn svg { display: block; }
  .topbar-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%; background: #fff;
    border: 2px solid var(--green-400);
    font-size: 20px; font-weight: 700; line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    cursor: pointer;
  }
  .topbar-username {
    display: block; font-size: 16px; font-weight: 600; color: var(--text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
  }

  /* --- 侧边栏 → 左侧滑出抽屉（覆盖上方 720px 横向布局段） --- */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 236px; max-width: 78vw;
    flex-direction: column; align-items: stretch;
    padding: 16px 12px;
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 1300;
  }
  .menu-open .sidebar { transform: translateX(0); box-shadow: 8px 0 28px rgba(0, 0, 0, .22); }
  .nav-mask {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .38); z-index: 1250;
  }
  .menu-open .nav-mask { display: block; }

  /* 抽屉内 logo 区：恢复竖排，只显示花色行 + 俱乐部名（头像框仍隐藏） */
  .sidebar .logo {
    border-bottom: 1px solid var(--green-200);
    padding: 4px 6px 14px; margin-bottom: 12px;
    white-space: normal;
  }
  .sidebar .logo-suits { display: block; font-size: 18px; }
  .sidebar .logo-name { display: block; font-size: 13px; margin-top: 6px; }

  .nav-item { width: 100%; }
  .sidebar-logout {
    display: flex; margin-top: 18px; padding-top: 12px;
    border-top: 1px solid var(--green-200);
    color: #c62828;
  }
}

/* ============ 手机顶栏：名片横匾 + 三条杠移最右（2026-09-07 二轮微调） ============ */
/* ① 顶栏头衔处显示名片横匾（背景图由 JS 写入 --np-img，随已购名片切换；无名片纯文字）
   ② menu-btn 移入 topbar-right（铃铛之后），order 不需调整 */
@media (max-width: 720px) {
  .topbar-username {
    display: flex; align-items: center; gap: 7px; min-width: 0;
  }
  .topbar-title { white-space: nowrap; flex-shrink: 0; }
  .topbar-name-txt {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-title.has-nameplate {
    display: inline-flex; align-items: center; justify-content: center;
    background-image: var(--np-img, none);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
    padding: 5px 18px;
    border-radius: 8px;
    font-size: 13px; font-weight: 600; line-height: 1;
    min-width: 86px; min-height: 26px; box-sizing: border-box;
  }
}

/* ============================================================ */
/* ============ 错题本重做（2026-09-07）：编号卡片式预览 ============ */
/* 结构：卡片 = 头部(序号圆徽+专题标签+题干+错次) + 主体(左牌图卡 / 右2x2选项) + 底部(从错题本中删除) */
.wq-item { width: 100%; max-width: 860px; padding: 16px 18px 12px; }
.wq-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wq-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: #8d6e63; color: #fff; font-size: 14px; font-weight: 700;
}
.wq-tag {
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  color: #c2185b; background: #fce4ec;
  border-radius: 6px; padding: 3px 10px; line-height: 1.4;
}
.wq-qtext { font-size: 15px; font-weight: 600; color: var(--text-1); line-height: 1.5; }
.wq-sub { font-size: 12px; color: var(--text-3); margin-left: auto; white-space: nowrap; }
.wq-item-body { display: flex; gap: 16px; align-items: flex-start; }

/* 左：牌图卡 */
.wq-hand {
  flex-shrink: 0; width: 200px; box-sizing: border-box;
  background: #fafafa; border: 1px solid var(--green-100, #e0e0e0);
  border-radius: 10px; padding: 12px 14px 10px;
}
.wq-suitrow { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.wq-suit { width: 16px; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.wq-ranks { flex: 1; font-size: 16px; font-weight: 700; color: #333; letter-spacing: 1px; }
.wq-suitlen { font-size: 11px; color: var(--text-3); }
.wq-handtags { display: flex; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e0e0e0; }
.wq-chip {
  font-size: 11px; color: #616161; background: #eee;
  border-radius: 5px; padding: 2px 8px; line-height: 1.5;
}

/* 右：2x2 选项网格 */
.wq-opts { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.wq-opt {
  display: flex; align-items: center; gap: 9px;
  background: #fafafa; border: 1.5px solid #ececec; border-radius: 8px;
  padding: 9px 12px; font-size: 14px; color: var(--text-1);
}
.wq-opt-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 5px;
  background: #e8e8e8; color: #757575; font-size: 11px; font-weight: 700;
}
.wq-opt-text { flex: 1; min-width: 0; font-weight: 600; }
.wq-opt-correct { border-color: #66bb6a; background: #f1f8e9; }
.wq-opt-correct .wq-opt-letter { background: #66bb6a; color: #fff; }
.wq-opt-mark { font-size: 13px; font-weight: 700; color: #2e7d32; flex-shrink: 0; }

/* 底部：删除按钮 */
.wq-item-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.wq-del {
  border: 1px solid #f2b8b5; background: #fff; color: #c62828;
  font-size: 12.5px; border-radius: 7px; padding: 6px 14px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.wq-del:hover { background: #fdecea; border-color: #e57373; }
.wq-del:disabled { opacity: .55; cursor: default; }

@media (max-width: 720px) {
  .wq-item { padding: 14px 12px 10px; }
  .wq-item-head { gap: 8px; }
  .wq-sub { display: none; }            /* 手机端隐藏错次时间，卡片更清爽 */
  .wq-item-body { flex-direction: column; }
  .wq-hand { width: 100%; }
  .wq-opts { width: 100%; }
  .wq-opt { padding: 9px 10px; font-size: 13.5px; }
  .wq-item-foot { margin-top: 8px; }
  .wq-del { width: 100%; padding: 8px 0; }
}

/* ============ 错题本二轮（2026-09-07）：选项可点选作答，不预标正确答案 ============ */
button.wq-opt { cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, background .15s; }
@media (min-width: 721px) { button.wq-opt:hover:not(:disabled) { border-color: var(--green-400, #a5d6a7); background: #f3f9f3; } }
button.wq-opt:disabled { cursor: default; }
.wq-opt-wrong { border-color: #e57373 !important; background: #fdecea !important; }
.wq-opt-wrong .wq-opt-letter { background: #e57373; color: #fff; }
.wq-fb { margin-top: 10px; font-size: 13.5px; line-height: 1.6; border-radius: 8px; padding: 9px 12px; }
.wq-fb.ok { background: #f1f8e9; color: #2e7d32; }
.wq-fb.no { background: #fdecea; color: #c62828; }

/* ============ 错题本三轮微调（2026-09-07）：选项条改白底紧凑款（参考图样式），只动配色与紧凑度 ============ */
.wq-item .wq-opt { background: #fff; border: 1px solid #e5e5e5; padding: 6px 10px; gap: 8px; font-size: 13px; }
.wq-item .wq-opt-letter { width: 17px; height: 17px; font-size: 10px; border-radius: 4px; }
.wq-item .wq-opt-text { font-size: 13px; }
@media (min-width: 721px) { .wq-item button.wq-opt:hover:not(:disabled) { border-color: #bdbdbd; background: #fafafa; } }
.wq-item .wq-opt-correct { border-color: #81c784; background: #f1f8e9; }
.wq-item .wq-opt-wrong { border-color: #e57373 !important; background: #fdecea !important; }
.wq-item .wq-fb { margin-top: 8px; font-size: 13px; padding: 7px 10px; }

/* ============ 错题本尺寸回滚（2026-09-07）：用户只要求改颜色，恢复选项条原始宽长尺寸（白底浅边配色保留） ============ */
.wq-item .wq-opt { padding: 9px 12px; gap: 9px; font-size: 14px; }
.wq-item .wq-opt-letter { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; }
.wq-item .wq-opt-text { font-size: 14px; }
.wq-item .wq-fb { margin-top: 10px; font-size: 13.5px; padding: 9px 12px; }

/* ============ 错题本选项撑满修复（2026-09-07）：wq-right 包裹层补 flex:1，2x2 选项条撑满卡片右侧 ============ */
.wq-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wq-item .wq-opts { width: 100%; }

/* ============================================================ */
/* ============ 手机端适配增强（2026-09-08）：学生端 + 教师端 ============ */
@media (max-width: 720px) {
  /* —— 布局基础 —— */
  .content { padding: 12px; }
  .modal { padding: 16px; width: 94vw; }
  .btn { padding: 10px 14px; }

  /* —— 做题视图（学生练习/作业 + 教师示例） —— */
  .practice-body, .demo-view .topic-body { padding: 12px; }
  .practice-card, .demo-view .demo-card { padding: 16px 14px; border-radius: 12px; }
  .pr-hand, .demo-view .demo-hand { font-size: 19px; line-height: 1.8; padding: 12px; letter-spacing: 1px; }

  /* 牌例区改为上下排列：手牌在上、进程表占满整行 */
  .pr-top, .demo-duo { flex-direction: column; }
  .pr-top .pr-hand, .demo-duo .demo-hand { flex: none; width: fit-content; max-width: 100%; }
  .pr-auction, .demo-auction { min-width: 0; width: 100%; padding: 8px; }

  /* 叫牌进程表缩格适配窄屏 */
  .auction-tbl { border-spacing: 3px 3px; }
  .auction-tbl th { font-size: 14px; padding: 0 6px 2px; }
  .auction-tbl td.aq { font-size: 14px; padding: 4px 6px; min-width: 40px; }
  .auction-tbl td.aq-q { font-size: 15px; }
  .auction-tbl td.aq-pass { font-size: 12px; }
  .wq-item .auction-tbl td.aq { font-size: 13px; min-width: 36px; }

  /* 题干与选项 */
  .demo-view .demo-question { font-size: 17px; }
  .opt-btn, .demo-view .demo-opt { padding: 11px 12px; font-size: 14px; gap: 10px; }

  /* —— 错题本卡片：牌图与选项上下堆叠 —— */
  .wq-item { padding: 14px 12px 10px; }
  .wq-item-body { flex-direction: column; }
  .wq-hand { width: 100%; }
  .wq-qtext { font-size: 14px; }

  /* —— 教师端专题编辑页 —— */
  .topic-body { padding: 12px; }

  /* —— 消息页：联系人栏缩窄为头像列 —— */
  .msg-contacts { width: 92px; padding: 8px 4px; }
  .contact-item { padding: 8px 4px; justify-content: center; }
  .contact-info, .contact-badge { display: none; }
  .msg-header { padding: 10px 14px; gap: 10px; }
  .msg-chat-list { padding: 12px; }
  .msg-bubble { max-width: 82%; }
  .msg-input-bar { padding: 10px 12px; }

  /* —— 工具栏与统计卡 —— */
  .toolbar input, .toolbar select { flex: 1 1 120px; min-width: 0; }
  .stat-grid { gap: 10px; }
}

/* 叫牌提示：注释文字色（2026-09-08 点击叫品显示大册子含义） */
.aq-note .aq-notetxt { color: #1a56c4; }

/* 四明手分析面板（2026-09-09） */
.dd-analysis { margin-top:10px; }
.dd-sec { margin:10px 0 14px; }
.dd-h { font-size:13px; font-weight:700; color:var(--navy,#1e3a6e); border-left:3px solid var(--gold,#c9a227); padding-left:8px; margin-bottom:6px; }
.dd-line { font-size:13px; line-height:1.8; color:var(--text-2,#444); }
.dd-ok { color:#0a8a3c; font-weight:600; }
.dd-bad { color:#d0342c; font-weight:600; }
.dd-table { border-collapse:collapse; width:100%; font-size:12.5px; }
.dd-table th, .dd-table td { border:1px solid var(--green-200,#d9e8d5); padding:4px 6px; text-align:center; }
.dd-table thead th { background:var(--green-50,#f2f8f0); }
.dd-table tbody th { background:var(--green-50,#f2f8f0); width:52px; }
.dd-tricks td.dd-badcell { background:#fdeceb; outline:2px solid #d0342c; }

/* ================= 排行榜：日榜 / 天梯榜 双榜并排（2026-09-10 用户定稿） =================
   · 左「今日排行榜（日榜）」：按当日 IMP 降序，每天 00:00 换日归零
   · 右「天梯榜（周榜）」  ：按天梯分（1200 + 本周累计 IMP）降序，每周一 00:00 归零重算
   两榜同源、口径独立、互不影响；窄屏（≤1180px 视口）自动上下堆叠。 */
.panel#panel-ranking .card { max-width: 1180px !important; }   /* 双榜需要更宽；覆盖页面内联 max-width:820px */
.dual-rank { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.dual-rank-col {
  border: 1px solid var(--line, #e4ddcd); border-radius: 10px; padding: 12px 14px 10px;
  background: linear-gradient(135deg, #fffdf9, #fff8e8); min-width: 0;
}
.dual-rank-col.is-loading { opacity: .55; transition: opacity .15s; }
.dual-rank-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.dual-rank-title { font-weight: 700; color: var(--navy, #1e3a6e); font-size: 15px; display: flex; align-items: center; gap: 6px; }
.dual-rank-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #f2ebd8; color: #8a6d1f; font-weight: 600; white-space: nowrap; }
.dual-rank-meta { font-size: 12px; color: #8a8474; line-height: 1.7; }
.dual-rank-meta b { color: var(--navy, #1e3a6e); }
.dual-rank-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; margin-top: 6px; }
.dual-rank-table th { color: #8a8474; font-size: 12px; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid #efe8d8; }
.dual-rank-table td { padding: 6px; border-bottom: 1px solid #f6f1e5; }
.dual-rank-table tr:last-child td { border-bottom: none; }
.dual-rank-table th:nth-child(1), .dual-rank-table td:nth-child(1) { width: 30px; text-align: left; }
.dual-rank-table th:nth-child(2), .dual-rank-table td:nth-child(2) { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dual-rank-table th:nth-child(3), .dual-rank-table td:nth-child(3),
.dual-rank-table th:nth-child(4), .dual-rank-table td:nth-child(4) { width: 76px; text-align: right; }
.dual-rank-table td.dr-idx { font-weight: 600; color: #4a463c; }
.dual-rank-table td.dr-idx.dr-top { font-weight: 800; color: #c9a227; }
.dual-rank-table td.dr-name { color: var(--navy, #1e3a6e); }
.dual-rank-table td.dr-num { font-weight: 700; color: #4a463c; }
.dual-rank-table td.dr-num.dr-pos { color: #22a447; }
.dual-rank-table td.dr-num.dr-neg { color: #d9534f; }
.dual-rank-table td.dr-num.dr-zero { color: #8a8474; }
.dual-rank-table tr.dr-me { background: #fff6d8; }
.dual-rank-table tr.dr-me td.dr-name { font-weight: 700; }
.dual-rank-state { padding: 22px 12px; text-align: center; color: #8a8474; font-size: 12.5px; line-height: 1.9; }
.dual-rank-state .dr-retry {
  margin-top: 8px; padding: 5px 14px; border: 1px solid #ddd6c6; border-radius: 6px;
  background: #fff; color: var(--navy, #1e3a6e); font-weight: 600; cursor: pointer; font-size: 12.5px;
}
.dual-rank-skel { padding: 6px 0; }
.dual-rank-skel i { display: block; height: 11px; border-radius: 4px; background: #f0e9d9; margin: 9px 0; }
.dual-rank-skel i:nth-child(1) { width: 92%; }
.dual-rank-skel i:nth-child(2) { width: 78%; }
.dual-rank-skel i:nth-child(3) { width: 85%; }
.dual-rank-skel i:nth-child(4) { width: 66%; }
.dual-rank-foot { font-size: 11.5px; color: #8a8474; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #ece4d2; line-height: 1.7; }
@media (max-width: 1180px) {
  /* 窄屏：两榜上下堆叠，并居中收窄到 760px，避免学员列被拉得过宽 */
  .dual-rank { grid-template-columns: minmax(0, 760px); justify-content: center; }
}

/* ===== 机器人错题记忆库：老师端一键回传（2026-09-11） ===== */
.robot-feed { margin-top: 15px; padding: 13px 15px; border-radius: 10px; border: 1px solid #f0d9a8; background: #fffaf0; }
.rf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rf-title { font-weight: 700; color: #8a6d1f; font-size: 14px; }
.rf-badge { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: #f3e6c8; color: #8a6d1f; }
.rf-badge.on { background: #dff3d8; color: #2f6b27; }
.rf-meta { font-size: 13px; color: #6b6355; line-height: 1.95; margin-bottom: 8px; }
.rf-meta code { background: #fff; border: 1px solid #ecdfc2; border-radius: 5px; padding: 1px 6px; font-size: 12px; color: #26314a; }
.rf-meta b { color: #1e3a6e; }
.rf-meta .rf-call { color: #0a7a3c; }
.rf-note { width: 100%; box-sizing: border-box; border: 1px solid #e6d7b6; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.6; resize: vertical; background: #fff; color: #26314a; }
.rf-note:focus { outline: none; border-color: #c9a227; }
.rf-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.rf-chk { font-size: 12.5px; color: #6b6355; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.rf-spacer { flex: 1; }
.rf-hint { font-size: 12.5px; margin-top: 8px; line-height: 1.75; display: none; }
.rf-hint.ok { display: block; color: #2f6b27; }
.rf-hint.err { display: block; color: #c0392b; }
@media (max-width: 640px) {
  .rf-actions { flex-direction: column; align-items: stretch; }
  .rf-spacer { display: none; }
}

/* ================= 排位赛：合并「排行榜」后的左右结构（2026-09-11） =================
   左上 = 开赛功能（开始上分 + 规则说明），左下 = 今日排行榜（与开赛卡片同宽、行数较短），
   右侧 = 天梯榜（行数理论上更多、更长）。
   「排行榜」导航项已删除；双榜由 js/clubrank.js（教师端）/ js/student.js（学员端）
   分别渲染进 #center-rank-day / #center-rank-week 两个容器（不再用 .dual-rank 外层网格）。
   ≤1000px（手机 + 竖屏平板）自动单列堆叠，顺序：开赛 → 今日排行榜 → 天梯榜。
   注：上面 2026-09-10 那批 .dual-rank / #panel-ranking 规则中的 .dual-rank 一条已无宿主
       （合并后不再生成该容器），保留不删以避免动到别处引用。 */
.panel#panel-rank .card { max-width: none !important; }   /* 覆盖页面内联 max-width:820px，让左列占满 */
.rank-wrap {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 14px;
  align-items: start;
}
.rank-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rank-wrap .card { margin-bottom: 0; }
@media (max-width: 1000px) {
  /* 单列堆叠：开赛 → 今日排行榜 → 天梯榜（DOM 顺序天然如此） */
  .rank-wrap { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}
@media (max-width: 720px) {
  /* 手机端：双榜表格数值列收窄，把宽度让给学员名；卡片内边距同步收紧 */
  .rank-wrap { max-width: none; gap: 12px; }
  .rank-col { gap: 12px; }
  .rank-wrap .dual-rank-col { padding: 11px 11px 9px; }
  .rank-wrap .dual-rank-table { font-size: 12.5px; }
  .rank-wrap .dual-rank-table th:nth-child(3), .rank-wrap .dual-rank-table td:nth-child(3),
  .rank-wrap .dual-rank-table th:nth-child(4), .rank-wrap .dual-rank-table td:nth-child(4) { width: 62px; }
}

/* ===== 头像框 / 名片 / 花色头像 逐件微调（2026-09-11 22:40 用户指定，第三批） =====
   为什么必须放文件最末：全局段（装扮五轮 .avatar-frame-img / .has-nameplate::before）
   与 17:38 那条青铜名片段都在前面，同特异性下「后来者胜」，压不到最后就不生效。 */
/* ① 黄金头像框：在全局基线（中心左移 12px / 下移 0）之上逐轮累加 ——
   22:40 那一轮 左移 3px / 下移 0.5px；本轮（22:45）再左移 1px / 下移 1px
   → 累计 = 中心相对头像圆 左 16px / 下 1.5px（全局 -12 → -16） */
.avatar-frame-img.frame-gold {
  transform: translate(calc(-50% - 16px), calc(-50% + 1.5px));
}
/* ② 青铜名片：在 17:38 基线（左 0.7px / 下 0.5px）之上，再下移 0.3px（文字不动） */
.avatar-user .avatar-title.nameplate-bronze::before {
  transform: translate(calc(-50% - 0.7px), calc(-50% + 0.8px));
}
/* ③ 花色头像（♠♥♦♣）字号：102px → 91.8px（= 原尺寸的 90%）。
   ⚠️ 这条**不能只写在 CSS 里**：pages/student.html:18 的 span#avatar-suit 带行内
      style="font-size:102px"，行内样式优先级高于样式表，只在 CSS 里覆盖无效（本次已实测踩到，
      症状：computed font-size 仍是 102px）。
   字号真值现在有两处、必须同时改：student.html:18 的行内 + 本文件 1021 行。
   .avatar-box 是 flex 居中，缩的是字形本身，圆心仍与头像框/徽章的定位中心重合，不影响框与徽章对齐。 */

/* 每题限时倒计时（格子法检测层） */
.pr-timer { margin: 8px 0 12px; }
.pr-timer-bar { height: 6px; border-radius: 3px; background: var(--border, #e3e8ef); overflow: hidden; }
.pr-timer-bar > i { display: block; height: 100%; background: #2e7d32; transition: width .1s linear; }
.pr-timer.warn .pr-timer-bar > i { background: #f39c12; }
.pr-timer.over .pr-timer-bar > i { background: #c0392b; }
.pr-timer-txt { font-size: 12px; color: var(--text-3, #6b7280); margin-top: 4px; }
.pr-timer.warn .pr-timer-txt { color: #f39c12; font-weight: 600; }
.pr-timer.over .pr-timer-txt { color: #c0392b; font-weight: 600; }


/* ===== 练习深度档位条（练到第几声） ===== */
.depth-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 14px;
  background:#f6f7f9;border-bottom:1px solid #e6e8eb}
.depth-lab{font-size:12px;color:var(--text-2,#8a9099);margin-right:2px}
.depth-btn{font-size:13px;line-height:1;padding:6px 13px;border-radius:999px;
  border:1px solid #dfe3e8;background:var(--white,#fff);color:var(--text-1,#333);
  cursor:pointer;transition:all .15s}
.depth-btn:hover{border-color:var(--green-500,#43a047);color:var(--green-600,#2e7d32)}
.depth-btn.active{background:var(--green-600,#2e7d32);border-color:var(--green-600,#2e7d32);
  color:#fff;font-weight:600}
.depth-btn.locked{opacity:.55;cursor:not-allowed;background:#eef0f2;color:var(--text-3,#a3a8b0)}
.depth-btn.locked:hover{border-color:#dfe3e8;color:var(--text-3,#a3a8b0)}
.depth-hint{font-size:12px;color:var(--text-2,#8a9099);margin-left:auto}

/* ==================== 侧栏：配图删除，统一全文字（2026-09-16 追加） ====================
   教练要求：侧栏每一项的配图全部删除，统一全文字（手机端也要正常）。
   历史上侧栏图标有两套机制，本段把它们统一收口：
     ① HTML 里直接写的 emoji（🏆/📝/📕/🗂/↩）—— 已在 HTML 中删除
     ② HTML 里内嵌的 <svg>（题库练习/打牌练习/做庄大神）+ js 的 alignNavIcons() 运行时
        把 emoji 拆进 .nav-ico 列 —— 已改为 stripNavIcons()，不再插列
   本段只负责「没有图标后怎么排得好看」。 */

/* 图标列已不存在 ⇒ 那个 24px 空槽不要留，否则文字会整体右移 */
.nav-item .nav-ico { display: none; }

/* 纯文字：左对齐、单行不折、去掉 flex 的 gap 残留 */
.nav-item {
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 手机端抽屉（236px）：纯文字项撑满整行，点按区域更大、更好按 */
@media (max-width: 720px) {
  .nav-item {
    width: 100%;
    padding: 12px 14px;          /* 比桌面略高一点，手指更好点 */
    font-size: 15.5px;
    margin-bottom: 2px;
  }
  .sidebar-logout { padding: 12px 14px; }
}

/* 平板（721~1024px）：侧栏是横向滚动条，纯文字项之间给足间距，别挤在一起 */
@media (min-width: 721px) and (max-width: 1024px) {
  .sidebar .nav-item { padding: 9px 14px; }
  .sidebar .nav-item + .nav-item { margin-left: 2px; }
}

/* ==================== 俱乐部排行榜（2026-09-16 用户定稿 · 整页三段全宽） ====================
   背景：用户要求把导航「排位赛」改名「俱乐部排行榜」并整页重做 ——
     ① 精英排行榜占据**整个宽度的最上方**（PC 横向多列并列，每组前 5）；
     ② 开赛功能移到**从上到下第二个**、**横向占满整宽**，并显示「我的组别 + 天梯分 + 名次」；
     ③ 最下方放**日榜**，模仿总榜同样分年龄组五列，且**显示当日全部**（不只前五）。
   手机端（≤760px）：五列改为一列 + 顶部**五档筛选条**（默认选中我自己所在的组）。
   命名约定：全部以 rk- 前缀，避免与既有 .rank-* / .dual-rank-* 撞车（后者已无宿主，保留不删）。
   本段**必须**位于 style.css 最末：上面的「排位赛：合并「排行榜」后的左右结构（2026-09-11）」
   段里还有 .panel#panel-rank .card { max-width: none !important } 等同名前缀规则，靠顺序压制。 */

/* —— 面板容器：三段之间的统一间距，整体不再限宽（用户明确要占满整宽） —— */
.panel#panel-rank { display: flex; flex-direction: column; gap: 14px; }
.panel#panel-rank:not(.active) { display: none; }   /* 未激活面板必须仍然隐藏（display:flex 会覆盖 .panel 的隐藏） */

/* —— 一族榜（精英榜 / 日榜共用同一套外观，保证「日榜模仿总榜」） —— */
.rk-family {
  border: 1px solid var(--line, #e4ddcd);
  border-radius: 12px;
  padding: 16px 18px 14px;
  background: linear-gradient(135deg, #fffdf9, #fff8e8);
  min-width: 0;
}
.rk-family-today { background: linear-gradient(135deg, #fffdf9, #f7fbf5); }

/* —— 标题行：左右各一个奖杯 + 放大标题（用户：「奖杯和标题做大一点」） —— */
.rk-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 4px; }
.rk-title-wrap { text-align: center; min-width: 0; }
.rk-title {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--navy, #1e3a6e);
  line-height: 1.25;
  white-space: nowrap;
}
.rk-sub { font-size: 12.5px; color: #8a8474; margin-top: 5px; line-height: 1.7; }
.rk-sub b { color: var(--navy, #1e3a6e); }
/* 奖杯 SVG：PC 56px / 手机 38px；两枚做镜像，视觉上对称「夹住」标题 */
.rk-cup { width: 56px; height: 56px; flex: 0 0 auto; filter: drop-shadow(0 3px 5px rgba(160, 120, 20, .28)); }
.rk-cup-r { transform: scaleX(-1); }

/* —— 五列并排（PC）：列宽等分、内容最少 0，避免长名字把列撑破 —— */
.rk-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.rk-col {
  border: 1px solid #ece4d2; border-radius: 10px; background: #fff;
  padding: 9px 10px 7px; min-width: 0;
}
/* 我所在的那一列：淡金底 + 描边，一眼找到自己 */
.rk-col.active { border-color: #e0c46a; background: #fffdf3; box-shadow: 0 0 0 1px #f0e0a8 inset; }
.rk-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.rk-col-head b { font-size: 14px; color: var(--navy, #1e3a6e); }
.rk-col-n { font-size: 11px; color: #a39a86; white-space: nowrap; }

/* —— 表格：定长布局，名字列可省略，分数列固定宽 —— */
.rk-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.rk-table th {
  color: #a39a86; font-size: 11.5px; font-weight: 600; text-align: left;
  padding: 3px 5px; border-bottom: 1px solid #f0e9d9;
}
.rk-table td { padding: 5px; border-bottom: 1px solid #f7f2e6; }
.rk-table tr:last-child td { border-bottom: none; }
.rk-table th:nth-child(1), .rk-table td:nth-child(1) { width: 26px; }
.rk-table th:nth-child(3), .rk-table td:nth-child(3) { width: 62px; text-align: right; }
.rk-no { font-weight: 700; color: #9a917c; }
.rk-no-top { color: #c9a227; font-weight: 800; }
.rk-name { color: var(--navy, #1e3a6e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-score { font-weight: 700; color: #4a463c; text-align: right; }
.rk-table tr.rk-me { background: #fff3cf; }
.rk-table tr.rk-me .rk-name { font-weight: 700; }
.rk-me-tag { font-size: 10px; color: #a9780f; background: #fdf0c8; border-radius: 3px; padding: 0 3px; margin-left: 3px; font-style: normal; }
.rk-empty { padding: 14px 6px; text-align: center; color: #b0a793; font-size: 12px; line-height: 1.8; }

/* —— 开赛卡片（全宽）：左侧说明 + 中部四项数据 + 右侧按钮 —— */
.rk-entry {
  border: 1px solid #e4ddcd; border-radius: 12px; padding: 15px 18px;
  background: linear-gradient(135deg, #fffdf9, #fff5e0); min-width: 0;
}
.rk-entry-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rk-entry-left { min-width: 180px; }
.rk-entry-k { font-weight: 800; color: var(--green-700, #1e6b3a); font-size: 17px; }
.rk-entry-v { font-size: 12.5px; color: #8a8474; margin-top: 4px; line-height: 1.7; }
.rk-entry-warn { color: #c9a227; font-weight: 600; }
.rk-entry-stats { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; justify-content: center; }
.rk-stat { text-align: center; min-width: 66px; }
.rk-stat-k { display: block; font-size: 11.5px; color: #9a917c; margin-bottom: 3px; }
.rk-stat-v { display: block; font-size: 21px; font-weight: 800; color: var(--navy, #1e3a6e); line-height: 1.2; }
.rk-stat-v.hi { color: #c9a227; }
.rk-stat-v.dim { font-size: 15px; color: #b0a793; }
.rk-stat-v b { font-weight: 800; }
.rk-entry-act { display: flex; gap: 8px; flex-wrap: wrap; }
.rk-btn {
  padding: 11px 22px; border-radius: 8px; border: none; cursor: pointer;
  font-weight: 700; font-size: 14px; font-family: inherit; white-space: nowrap;
}
.rk-btn-main { background: var(--green-600, #2e7d32); color: #fff; }
.rk-btn-main:hover { background: var(--green-700, #1e6b3a); }
.rk-btn-gold { background: #c9a227; color: #fff; }
.rk-btn-gold:hover { background: #b08d1c; }
.rk-entry-resume {
  margin-top: 11px; padding: 8px 12px; border-radius: 8px;
  background: #fff8e8; border: 1px solid #f0dda8; font-size: 12.5px; color: #6b6355;
}
.rk-roomno { letter-spacing: 2px; color: var(--navy, #1e3a6e); }
.rk-entry-rules {
  margin-top: 11px; padding-top: 9px; border-top: 1px dashed #ece4d2;
  font-size: 12px; color: #8a8474; line-height: 1.95;
  display: flex; flex-wrap: wrap; gap: 2px 20px;
}
.rk-entry-rules b { color: #6b6355; }

/* —— 骨架屏 / 错误态 —— */
.rk-skel { padding: 16px 4px; }
.rk-skel i { display: block; height: 13px; border-radius: 5px; background: #f0e9d9; margin: 11px 0; }
.rk-skel i:nth-child(1) { width: 88%; }
.rk-skel i:nth-child(2) { width: 72%; }
.rk-skel i:nth-child(3) { width: 80%; }
.rk-error { padding: 26px 12px; text-align: center; color: #8a8474; font-size: 13px; line-height: 2; }
.rk-error .rk-retry { margin-top: 8px; padding: 6px 16px; border: 1px solid #ddd6c6; border-radius: 6px; background: #fff; color: var(--navy, #1e3a6e); font-weight: 600; cursor: pointer; font-size: 12.5px; }

/* —— 手机端筛选条：PC 隐藏（PC 五列全展开，无需筛选） —— */
.rk-tabs { display: none; }

@media (max-width: 1000px) {
  /* 中等宽度：五列压得太窄 ⇒ 先折成 3 列，名字还不至于被截断 */
  .rk-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* —— 手机端：五档筛选条 + 单列 —— */
  .rk-family { padding: 13px 12px 11px; border-radius: 10px; }
  .rk-head { gap: 10px; }
  .rk-cup { width: 38px; height: 38px; }
  .rk-title { font-size: 20px; letter-spacing: .5px; white-space: normal; }
  .rk-sub { font-size: 11.5px; }
  .rk-tabs {
    display: flex; gap: 6px; overflow-x: auto; margin: 11px -2px 0; padding: 0 2px 3px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .rk-tabs::-webkit-scrollbar { display: none; }
  .rk-tab {
    flex: 1 0 auto; padding: 7px 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid #e2dac8; background: #fff; color: #6b6355;
    font-size: 13px; font-family: inherit; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .rk-tab.active { background: var(--green-600, #2e7d32); border-color: var(--green-600, #2e7d32); color: #fff; }
  .rk-tab-me { font-size: 10px; font-style: normal; background: #fdf0c8; color: #a9780f; border-radius: 3px; padding: 0 3px; }
  .rk-tab.active .rk-tab-me { background: rgba(255, 255, 255, .28); color: #fff; }
  /* 单列：只显示被选中的那一组（其余组靠筛选条切换） */
  .rk-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rk-col { display: none; }
  .rk-col.active { display: block; }
  .rk-table { font-size: 13.5px; }
  .rk-table td { padding: 7px 5px; }
  /* 开赛卡片：改为上下堆叠，数据行横向等分 */
  .rk-entry { padding: 13px 13px; }
  .rk-entry-in { flex-direction: column; align-items: stretch; gap: 12px; }
  .rk-entry-left { min-width: 0; text-align: center; }
  .rk-entry-stats { gap: 8px; justify-content: space-between; }
  .rk-stat { min-width: 0; flex: 1; }
  .rk-stat-v { font-size: 18px; }
  .rk-entry-act { flex-direction: column; }
  .rk-btn { width: 100%; padding: 12px; }
  .rk-entry-rules { flex-direction: column; gap: 3px; }
  .panel#panel-rank { gap: 12px; }
}
@media (max-width: 380px) {
  /* 极窄机（如 360px 档）：标题与数据再收一档，保证不换行溢出 */
  .rk-title { font-size: 18px; }
  .rk-cup { width: 32px; height: 32px; }
  .rk-stat-v { font-size: 16px; }
}

/* ============================================================================
   2026-09-16 兼容补丁：Chromium 86 及更早内核不认识 `inset` 简写
   （`inset` 需 Chrome/Edge 87+；教练在用的 360极速浏览器 13.5.2044.0 内核是 86.0.4240.198）
   ⇒ 靠 `inset:0` 撑满视口的浮层会塌成 0×0 并停靠在页面左下角：做庄「过关/失败」弹窗
     会跑到屏幕左下角（2026-09-16 教练截图反馈），设置/声称/选将/路线/天梯榜/星星领奖/
     全屏/练牌室菜单/通用弹窗同理。
   修法：给这些选择器补上等价的四边显式偏移。`inset:0` 本就是 top/right/bottom/left 的
   简写 ⇒ 在 87+ 内核上计算值完全相同（实测 21 个元素 0 差异、截图逐字节相同，视觉零变化）；
   在旧内核上则把塌掉的浮层重新撑满视口。
   ★ 本块为「只追加」补丁，不改写上面任何既有规则。
   ============================================================================ */
.fw-mask, .fw-canvas,
.set-mask, .clm-mask, .modal-mask, .combat-modal-mask, .club-menu-mask, .nav-mask,
.topic-view, .msg-view, .practice-view,
#d-rank, #dsb-modal, #d-choose, #d-routebox,
.sw i, #club-root .bt-board .bb-bar i, #panel-decl .bt-board .bb-bar i,
body.club-fs #club-root, #panel-decl.d-fs #d-table { top: 0; right: 0; bottom: 0; left: 0; }

/* ============================================================================
   2026-09-16 追加（承接上面的 Chromium86 inset 兼容补丁）
   独立页 pages/decl.html 的全屏用的是 "body.d-fs #d-table{position:fixed; inset:0}"
   —— 该页由教师端侧栏「做庄练习」入口打开；选择器带 body.d-fs 前缀、不在上面那条名单里，
   故单独补一份等价四边偏移。
   同样：inset:0 就是这四个值的简写 ⇒ 在 87+ 内核上计算值完全相同（零视觉变化），
   只让不认识 inset 的旧内核（360极速浏览器 13.5.2044.0 / Chromium 86）也能撑满视口。
   ★ 仍为「只追加」补丁，不改写上面任何既有规则。
   ============================================================================ */
body.d-fs #d-table { top: 0; right: 0; bottom: 0; left: 0; }
/* 2026-09-18 约定叫红框高亮（学员端+教师端共用） */
.auction-tbl td.aq-conv { border: 2px solid #e23b3b; border-radius: 5px; background: #fff4f4; color: #c01b1b; font-weight: 600; }
.club-agtable td .ag-conv { border: 2px solid #e23b3b; border-radius: 5px; background: #fff4f4; color: #c01b1b; font-weight: 600; padding: 1px 5px; }
/* 约定叫格鼠标悬停显示含义提示（与 .aq-hasnote 一致） */
.auction-tbl td.aq-conv, .club-agtable td .ag-conv { cursor: help; }