/* ================================================================
   聚慧 · 师徒积分平台 — 柔和拟态设计系统
   浅蓝灰背景 / 深蓝灰文字 / 低饱和强调蓝 / 双向拟态阴影
   ================================================================ */

:root {
  /* 色彩 */
  --bg: #e8edf5;
  --bg-grad: linear-gradient(160deg, #eef2f9 0%, #e4eaf4 100%);
  --surface: #e9eef6;
  --card-grad: linear-gradient(150deg, #f0f4fa 0%, #e5ebf5 100%);
  --ink: #3d4a63;
  --ink-strong: #2c3752;
  --ink-soft: #7c8aa5;
  --ink-faint: #97a3ba;
  --line-soft: #ffffffb3;

  /* 强调 */
  --accent: #5d82cf;
  --accent-grad: linear-gradient(135deg, #8fb1f0 0%, #5d82cf 100%);
  --green: #4f9e7d;
  --red: #c2685b;
  --gold-grad: linear-gradient(135deg, #f0d38a 0%, #d4a94e 100%);
  --silver-grad: linear-gradient(135deg, #e3e9f3 0%, #b6c2d4 100%);
  --bronze-grad: linear-gradient(135deg, #e8c39e 0%, #c98d5e 100%);

  /* 圆角 */
  --r-card: 28px;
  --r-panel: 24px;
  --r-field: 16px;
  --r-pill: 999px;

  /* 双向拟态阴影 */
  --sh-out: 9px 10px 18px #c5cfdecc, -8px -8px 19px #fff;
  --sh-out-sm: 5px 6px 12px #c5cfdecc, -4px -4px 10px #fff;
  --sh-in: inset 5px 5px 11px #c8d2e2, inset -4px -4px 9px #fff;
  --sh-press: inset 4px 4px 9px #c8d2e2, inset -3px -3px 7px #fff;

  /* 字体 */
  --font:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system,
    'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
}

/* ---------------- 基础 ---------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-image: var(--bg-grad);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.65;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid #6d97e6;
  outline-offset: 2px;
  border-radius: 6px;
}

/* 显式声明 hidden 优先级，防止 display 覆盖导致场景切换失效 */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kicker {
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------------- 品牌 ---------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

/* 印章式品牌图标：凸起小方块 + 内嵌线描图形，像盖在纸面上的浅浮雕印章 */
.brand-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(145deg, #f4f7fd, #dce5f5);
  color: #7187a8;
  box-shadow:
    inset 1px 1px 2px #fff,
    3px 3px 7px #b9c7da;
  flex: none;
}

.brand-icon svg {
  width: 22px;
  height: 22px;
}

.topbar .brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.topbar .brand-icon svg {
  width: 19px;
  height: 19px;
}

.brand-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink-strong);
}

.brand-sub {
  font-size: 12px;
  color: var(--ink-soft);
  padding-left: 11px;
  border-left: 1px solid #cfd8e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- 按钮 ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform 0.22s,
    box-shadow 0.22s,
    filter 0.22s;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  color: #fff;
  background: var(--accent-grad);
  box-shadow: var(--sh-out-sm);
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 7px 9px 16px #c0cbdd, -6px -6px 14px #fff;
}

.btn-primary:active {
  transform: translateY(0);
  filter: none;
  box-shadow: var(--sh-press);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: var(--sh-out-sm);
}

.btn-soft {
  color: #64748f;
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
}

.btn-soft:hover {
  transform: translateY(-2px);
  box-shadow: 7px 9px 16px #c0cbdd, -6px -6px 14px #fff;
}

.btn-soft:active {
  transform: translateY(0);
  box-shadow: var(--sh-press);
}

.btn-ghost {
  color: var(--ink-soft);
  padding: 12px 14px;
}

.btn-ghost:hover {
  color: var(--ink);
}

.btn-danger {
  color: var(--red);
  background: linear-gradient(150deg, #f3e6e2 0%, #ead9d3 100%);
  box-shadow: var(--sh-out-sm);
}

.btn-danger:hover {
  transform: translateY(-2px);
}

.btn-danger:active {
  transform: translateY(0);
  box-shadow: var(--sh-press);
}

.btn-mini {
  padding: 8px 16px;
  font-size: 12px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #64748f;
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
  transition:
    transform 0.22s,
    box-shadow 0.22s;
}

.icon-btn:hover {
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: translateY(0);
  box-shadow: var(--sh-press);
}

/* 快捷分值胶囊：正绿负红 */
.pill {
  min-width: 54px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.pill:hover {
  transform: translateY(-2px);
}

.pill:active {
  transform: translateY(0);
  box-shadow: var(--sh-press);
}

.pill-pos {
  color: var(--green);
}

.pill-neg {
  color: var(--red);
}

/* ---------------- 输入 ---------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field-grow {
  flex: 1;
}

.field label,
.field .field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #64748f;
}

/* 表单 label 内“选填”标注 */
.field-optional {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #93a1b8;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 0;
  border-radius: var(--r-field);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink-strong);
  background: #e8edf6;
  box-shadow: var(--sh-in);
  outline: none;
  transition: box-shadow 0.22s;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9aa8bf;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow:
    var(--sh-in),
    0 0 0 3px #6d97e64d;
}

.field textarea {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  resize: vertical;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7c8aa5 50%),
    linear-gradient(135deg, #7c8aa5 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 15px) calc(50% - 2px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 16px;
  align-items: end;
}

.form-row .field-btn {
  align-self: end;
}

/* 管理台新增学生：姓名 / 性别 / 手机号 / 按钮一行 */
.form-row-cols {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.8fr)
    minmax(0, 1.4fr)
    auto;
  gap: 16px;
  align-items: end;
}

.form-row-cols .field-btn {
  align-self: end;
}

/* panel-head 右侧操作区：计数 + 危险按钮并排 */
.panel-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------------- 验证码行：输入框 + 获取按钮并排 ---------------- */

.code-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.code-row input {
  flex: 1;
  min-width: 0;
  letter-spacing: 3px;
  font-family: var(--mono);
}

.code-row .btn {
  flex-shrink: 0;
  padding: 12px 18px;
  font-size: 13px;
}

/* 倒计时期间的禁用态：拟态淡化、不可点击 */
.btn-soft:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--sh-out-sm);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.form-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* 字段内行下小字提示（借 .field 的 7px gap 排布） */
.field-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.form-error {
  margin-top: 12px;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--red);
  background: #f1e2de;
  box-shadow: var(--sh-press);
}

/* ---------------- 卡片 / 面板 ---------------- */

.panel {
  border-radius: var(--r-panel);
  padding: 24px 26px;
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out);
}

.panel + .panel,
.view .panel {
  margin-top: 20px;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.panel-head h3,
.panel-head h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink-strong);
}

/* 面板标题：印章 + 文字 */
.panel-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 通用印章：凹槽质感（双向内阴影，凹陷于卡片表面）；品牌印章 .brand-icon 保持凸起 */
.seal {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: linear-gradient(142deg, #d7e4fd, #cbdaf6);
  color: #6d8fe1;
  box-shadow:
    inset 3px 3px 6px #b4c4df,
    inset -3px -3px 8px #ffffffd6;
  flex: none;
}

.seal svg {
  width: 18px;
  height: 18px;
}

.seal-sm {
  width: 27px;
  height: 27px;
  border-radius: 9px;
  box-shadow:
    inset 2px 2px 5px #b4c4df,
    inset -2px -2px 6px #ffffffd6;
}

.seal-sm svg {
  width: 15px;
  height: 15px;
}

.panel-note {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------------- 标签 / 徽章 ---------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.tag-master {
  color: #4a6fb5;
  background: #dde8f8;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

.tag-apprentice {
  color: #45927a;
  background: #ddf0e8;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

.tag-none {
  color: #8493ab;
  background: #e6ebf3;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

/* VIP 标签：金色（有效 / 永久），灰蓝（已到期） */
.tag-vip {
  color: #8a6a1f;
  background: #f6ecd2;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

.tag-vip-off {
  color: #98a4b8;
  background: #eef1f6;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

/* 性别标签：男为强调蓝系、女为砖红系淡底（均低饱和） */
.tag-boy {
  color: #4a72b8;
  background: #dbe7fb;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

.tag-girl {
  color: #b06a80;
  background: #f4e0e7;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

/* 小组标签：积分墙与管理台共用的蓝系胶囊 */
.tag-group {
  color: #4a6fb5;
  background: #dde8f8;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

/* 默认学校徽标：浅金底，呼应前三名金徽章 */
.tag-default {
  color: #8a6a1f;
  background: #f2e3bd;
  box-shadow: 2px 3px 6px #c9d3e355, -2px -2px 5px #fffc;
}

.rank-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #64748f;
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
  flex: none;
}

.rank-badge-gold {
  color: #7a5b16;
  background: var(--gold-grad);
}

.rank-badge-silver {
  color: #55617a;
  background: var(--silver-grad);
}

.rank-badge-bronze {
  color: #7c4f2c;
  background: var(--bronze-grad);
}

/* ---------------- 登录场景 ---------------- */

.auth-scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px 20px;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.blob-a {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -100px;
  background: #a8c4f033;
}

.blob-b {
  width: 380px;
  height: 380px;
  bottom: -110px;
  right: -90px;
  background: #9fd4bd30;
}

.blob-c {
  width: 260px;
  height: 260px;
  top: 42%;
  right: 16%;
  background: #c3b9f02a;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  border-radius: 32px;
  padding: 38px 36px 30px;
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out);
}

.brand-auth {
  margin-bottom: 22px;
}

.auth-title {
  font-size: clamp(28px, 4.4vw, 34px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink-strong);
  margin-top: 8px;
}

.auth-desc {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.auth-form {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 登录入口按钮组：四列胶囊，窄屏折叠为两列 */
.auth-demo {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #d7dfea;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.auth-demo .btn {
  width: 100%;
  padding: 9px 4px;
  font-size: 12px;
}

/* ---------------- 顶栏 / 导航 ---------------- */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 14px 4.2%;
  background: #eaeff7ee;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #d3dcea;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-item {
  border-radius: var(--r-pill);
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition:
    color 0.22s,
    box-shadow 0.22s;
}

.nav-item:hover {
  color: var(--ink-strong);
}

.nav-item.is-active {
  color: var(--ink-strong);
  background: #e8edf6;
  box-shadow: var(--sh-in);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-pill);
  padding: 7px 15px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748f;
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
  white-space: nowrap;
}

.user-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px #4f9e7d2e;
}

/* 数据源徽章：凹槽胶囊 + 状态点（本地缓存/沙箱测试库/云端正式库） */
.db-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-pill);
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--bg);
  box-shadow: inset 3px 3px 7px rgba(180, 196, 223, 0.55), inset -3px -3px 8px rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  user-select: none;
}

.db-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa9c4;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.db-badge.is-server::before {
  background: #59b58a;
  box-shadow: 0 0 0 3px #59b58a26;
}

.db-badge.is-prod::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px #5d82cf26;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  place-items: center;
  color: #64748f;
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
}

/* ---------------- 主区 / 视图 ---------------- */

/* 宽屏利用：内容上限 1720px（1920 屏两侧留白各 ~100px），侧边距随视口自适应收紧 */
.main {
  flex: 1;
  width: min(1720px, 100%);
  margin: 0 auto;
  padding: 40px clamp(16px, 2.4vw, 40px) 64px;
}

.view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.view-title {
  margin-top: 8px;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--ink-strong);
}

.inline-edit {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-edit input {
  width: 190px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 13px;
  color: var(--ink-strong);
  background: #e8edf6;
  box-shadow: var(--sh-in);
  outline: none;
  transition: box-shadow 0.22s;
}

.inline-edit input:focus {
  box-shadow:
    var(--sh-in),
    0 0 0 3px #6d97e64d;
}

/* ---------------- 建设中占位（班级画像 / 云边小卖部） ---------------- */

.build-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: var(--r-panel);
  padding: 78px 30px;
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out);
}

/* 大号正圆凹陷印章（复用统计卡图标质感） */
.build-placeholder .seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 16px;
  color: #658cda;
  background: linear-gradient(140deg, #d6e4fc, #ccdcf8);
  box-shadow:
    inset 2px 3px 5px #aec1e1,
    inset -3px -3px 6px #fff;
}

.build-placeholder .seal svg {
  width: 30px;
  height: 30px;
}

.build-placeholder h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink-strong);
}

.build-placeholder p {
  margin-top: 5px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------------- 动态 feed ---------------- */

.feed {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.feed li {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 18px;
  padding: 12px 17px;
  background: #e9eef6;
  box-shadow: var(--sh-in);
}

.feed .feed-main {
  min-width: 0;
  flex: 1;
}

.feed .feed-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.feed .feed-group {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-strong);
}

.feed .feed-member {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748f;
  background: #dfe6f0;
  border-radius: var(--r-pill);
  padding: 2px 10px;
}

.feed .feed-reason {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 历史记录体系小标签：学习（蓝）/ 四育（绿），标明该笔积分计入的维度 */
.feed-scheme {
  display: inline-block;
  vertical-align: 1px;
  margin-right: 6px;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

.feed-scheme-learn {
  color: #4a6fb5;
  background: rgba(74, 111, 181, 0.13);
}

.feed-scheme-four {
  color: #3e8f63;
  background: rgba(62, 143, 99, 0.13);
}

/* 帮扶标记（师徒传导衍生分）：紫金小标签，与学习/四育体系标签并列透出 */
.feed-scheme-help {
  color: #9a6b1f;
  background: rgba(196, 148, 58, 0.15);
}

.feed .feed-time {
  flex: none;
  font-size: 11px;
  color: #9aa8bf;
}

.delta-chip {
  flex: none;
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 800;
}

.delta-pos {
  color: var(--green);
  background: #ddf0e8;
}

.delta-neg {
  color: var(--red);
  background: #f1e2de;
}

/* 历史条目操作按钮：小圆凸起（改 = 蓝，删 = 红），hover 上浮着色 */
.feed-ops {
  flex: none;
  display: inline-flex;
  gap: 6px;
}

.feed-act {
  border: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font: 700 11.5px/1 var(--font);
  color: #7c8aa5;
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
  transition:
    color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.feed-act:hover {
  color: #4a6fb5;
  transform: translateY(-1px);
}

.feed-act:active {
  box-shadow: var(--sh-in);
  transform: translateY(0);
}

.feed-act-del:hover {
  color: var(--red);
}

/* 历史条目行内编辑态：整条替换为 分值 + 理由 + 存/消 的紧凑编辑行 */
.feed-editing {
  display: block;
  background: #e4eaf4;
  box-shadow: var(--sh-in);
}

.feed-edit-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feed-edit-form input {
  border: none;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font: 600 12.5px/1.3 var(--font);
  color: var(--ink-strong);
  background: #eef2f9;
  box-shadow: var(--sh-in);
  min-width: 0;
}

.feed-edit-form input:focus {
  outline: none;
  box-shadow:
    var(--sh-in),
    0 0 0 3px rgba(109, 151, 230, 0.3);
}

#histEditAmount {
  flex: none;
  width: 74px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#histEditReason {
  flex: 1;
}

.feed-edit-form input::-webkit-outer-spin-button,
.feed-edit-form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.feed-edit-form .feed-act-save {
  color: #3e8f63;
}

.feed-edit-form .feed-act-save:hover {
  color: #2f7a51;
}

.feed-edit-err {
  margin: 7px 2px 0;
  font-size: 11.5px;
  color: var(--red);
}

.feed-empty {
  padding: 26px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------------- 管理台「积分明细」子版块 ---------------- */

/* 工具行：全选 + 已选计数 + 批量删除（凹槽内嵌一行，与列表视觉分层） */
.records-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 14px;
  border-radius: 16px;
  padding: 9px 14px;
  background: #e9eef6;
  box-shadow: var(--sh-in);
}

.records-check-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

.records-sel-note {
  flex: 1;
  min-width: 60px;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* 明细列表：复用 .feed 基础行样式，行首加选择列 */
.records-list li {
  gap: 12px;
}

.rec-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* 学生归属行：姓名 + 代号 / 小组（明细行第二行小字） */
.rec-stu {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #8a97ae;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 选中行高亮（浅蓝底浮出凹槽） */
.records-list li.rec-on {
  background: #dde9fb;
}

/* 窄屏：行内元素收窄换行，编辑态输入占满 */
@media (max-width: 640px) {
  .records-list li {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .records-list .feed-main {
    flex: 1 1 100%;
    order: 2;
  }

  .records-list .rec-check {
    order: 0;
  }

  .records-list .delta-chip {
    order: 3;
  }

  .records-list .feed-time {
    order: 4;
  }

  .records-list .feed-ops {
    order: 5;
    margin-left: auto;
  }
}

/* ---------------- 管理台布局（左侧子版块导航） ---------------- */

.console-layout {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.console-side {
  position: sticky;
  top: 86px;
  border-radius: 22px;
  padding: 12px;
  background: linear-gradient(145deg, #eef2f9, #e2e8f2);
  box-shadow: var(--sh-in);
}

.console-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 滑动滑块：凸起胶囊底座，随选中项平移（纵/横布局自适应，由 JS 按 offset 定位） */
.console-nav-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--r-pill);
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out-sm);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.24s ease;
}

.console-nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-pill);
  padding: 11px 15px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.22s;
}

.console-nav-item:hover {
  color: var(--ink-strong);
}

/* 选中态：凸出感由背后的滑块胶囊承载（不再凹陷），文字转强调蓝 */
.console-nav-item.is-active {
  color: var(--accent);
}

.console-main {
  min-width: 0;
}

.console-upload-row {
  align-items: center;
  margin-bottom: 18px;
}

.console-upload-row .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------------- 学生名单（管理台，表格） ---------------- */

/* ---------------- 小组管理（积分体系切换 + 分组板块） ---------------- */

/* 体系切换组：凹槽轨道，选中项以凸起胶囊浮出（呼应子导航滑块语言） */
.scheme-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border-radius: var(--r-pill);
  padding: 4px;
  background: #e9eef6;
  box-shadow: var(--sh-in);
}

.scheme-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-pill);
  padding: 4px 13px 4px 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  transition:
    color 0.22s,
    box-shadow 0.22s;
}

.scheme-tab:hover {
  color: var(--ink-strong);
}

/* 选中态：凸起胶囊，从凹槽轨道中浮出 */
.scheme-tab.is-active {
  color: var(--accent);
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
}

/* 切换按钮内小印章（默认蓝 / 绿色变体） */
.scheme-tab-seal {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  box-shadow:
    inset 2px 2px 4px #b4c4df,
    inset -2px -2px 5px #ffffffd6;
}

.scheme-tab-seal svg {
  width: 12px;
  height: 12px;
}

.scheme-tab-seal-green {
  background: linear-gradient(142deg, #dcf0e4, #cbe5d6);
  color: var(--green);
  box-shadow:
    inset 2px 2px 4px #aed3c0,
    inset -2px -2px 5px #ffffffd6;
}

/* 分组板块：体系说明行 + 分组展示区，切换时上浮淡入 */
.scheme-board {
  margin-top: 18px;
  animation: scheme-board-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scheme-board-lead {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 学习板块标题行右侧操作区：人数滑条 + 开始/重新分组按钮 */
.scheme-lead-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.size-seg {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: #e9eef6;
  box-shadow: var(--sh-in);
}

.size-seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: var(--card-grad);
  box-shadow: 3px 3px 7px #c0ccdd, inset 1px 1px 2px #fff;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.size-seg-item {
  position: relative;
  z-index: 1;
  width: 52px;
  border: 0;
  padding: 7px 0;
  border-radius: 999px;
  background: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}

.size-seg-item:hover {
  color: var(--ink);
}

.size-seg-item.is-on {
  color: var(--accent);
  font-weight: 700;
}

/* 分组提交后滑条锁定：降低对比、禁用指针 */
.size-seg.is-locked {
  opacity: 0.62;
  cursor: not-allowed;
}

.size-seg.is-locked .size-seg-item,
.size-seg.is-locked .size-seg-item:hover {
  cursor: not-allowed;
  color: var(--ink-soft);
}

.size-seg.is-locked .size-seg-item.is-on {
  color: var(--ink-strong);
}

/* 学习板块轻提示行（替代原大号状态框） */
.scheme-board-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.scheme-board-lead h4 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink-strong);
}

.scheme-board-lead p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* 板块说明行大号印章（默认蓝：学习表现） */
.scheme-seal {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.scheme-seal svg {
  width: 23px;
  height: 23px;
}

/* 绿色变体印章（四育表现：呼应点缀绿） */
.scheme-seal-green {
  background: linear-gradient(142deg, #dcf0e4, #cbe5d6);
  color: var(--green);
  box-shadow:
    inset 3px 3px 6px #aed3c0,
    inset -3px -3px 8px #ffffffd6;
}

/* 金色变体印章（学生货币：呼应金徽章与货币金） */
.scheme-seal-gold {
  background: linear-gradient(142deg, #f6ecd2, #eeddb2);
  color: #a67c1e;
  box-shadow:
    inset 3px 3px 6px #dcc389,
    inset -3px -3px 8px #ffffffd6;
}

/* 分组展示区：凹槽空态（手动分组建设中） */
.scheme-board-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  border-radius: 20px;
  padding: 34px 22px;
  text-align: center;
  background: #e9eef6;
  box-shadow: var(--sh-in);
}

.scheme-board-empty p {
  margin: 0;
  max-width: 42ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* 分组板块状态标题与操作按钮（成绩上传状态区） */
.scheme-board-empty .scheme-empty-title {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.scheme-board-empty .btn {
  margin-top: 10px;
}

/* ---------------- 积分汇率（学习 / 四育积分兑换比例） ---------------- */

/* 单凹槽容器：上部公式演算 + 细分割线 + 下部设置行，紧凑排列 */
.currency-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  border-radius: 18px;
  padding: 18px 16px;
  background: #e9eef6;
  box-shadow: var(--sh-in);
}

/* 公式演算行：货币 = X 学习 + Y 四育 ÷ 汇率；师徒 = 徒弟 1 分 × 系数 = 师傅 X 分 */
.currency-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.currency-item {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* 演算行印章：比小组管理说明行小一档 */
.currency-view .scheme-seal {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.currency-view .scheme-seal svg {
  width: 18px;
  height: 18px;
}

.currency-val {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.currency-val b {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.currency-val em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
}

/* 运算符（公式 + ÷ =，及设置行等号） */
.currency-op,
.currency-eq {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-faint);
  line-height: 1;
}

/* 汇率块：轻量形态（无印章），作为公式中间变量弱化呈现 */
.currency-item-rate .currency-val b {
  font-size: 17px;
  color: var(--ink-soft);
}

/* 细分割线：分隔演算与设置 */
.currency-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #cbd6e6 18%, #cbd6e6 82%, transparent);
}

/* 汇率设置行：凹槽胶囊输入 + 保存按钮 */
.currency-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.currency-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-pill);
  padding: 4px 15px 4px 7px;
  background: #eef2f9;
  box-shadow: var(--sh-in);
  cursor: text;
  transition: box-shadow 0.22s;
}

.currency-field:focus-within {
  box-shadow:
    var(--sh-in),
    0 0 0 3px #6d97e64d;
}

.currency-field input {
  width: 54px;
  border: 0;
  padding: 7px 3px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--ink-strong);
  background: none;
  box-shadow: none;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.currency-field input::-webkit-outer-spin-button,
.currency-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.currency-field span {
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}


/* ---------------- 积分标签（管理台子版块 + 明细弹窗快捷区） ---------------- */

/* 新增行：维度下拉 + 名称 + 分值 + 添加按钮 */
.label-add-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 14px;
}

/* 标签表单输入：拟态凹陷胶囊（与登录表单 / 汇率设置同一设计语言） */
.label-input {
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-strong);
  background: #e8edf6;
  box-shadow: var(--sh-in);
  outline: none;
  transition: box-shadow 0.22s ease;
}

.label-input::placeholder {
  color: #9aa8bf;
}

.label-input:focus {
  box-shadow: var(--sh-in), 0 0 0 3px #6d97e64d;
}

/* 分值胶囊：隐藏 number 旋钮，保持胶囊形态干净 */
.label-input::-webkit-outer-spin-button,
.label-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.label-input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.label-name-input {
  flex: 1 1 150px;
  max-width: 220px;
}

/* 介绍输入框：选填，弹性伸展、字色淡一档 */
.label-desc-input {
  flex: 1 1 190px;
  max-width: 320px;
  font-size: 12.5px;
  color: #7c8aa5;
}

.label-desc-input::placeholder {
  color: #a8b3c7;
}

.label-value-input {
  flex: 0 1 104px;
  min-width: 88px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 维度下拉：凹陷胶囊 + 细箭头 */
.label-dim-select {
  flex: 0 1 150px;
  min-width: 132px;
  appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, #7c8aa5 50%),
    linear-gradient(135deg, #7c8aa5 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* 标签列表：按维度分组纵向堆叠 */
.label-chip-list {
  display: grid;
  gap: 12px;
}

/* 维度分组：凹槽卡片 */
.label-dim-group {
  border-radius: 16px;
  padding: 12px 14px 14px;
  background: #e9eef7;
  box-shadow: var(--sh-in);
}

.label-dim-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* 维度名：可点击重命名（虚线下划线暗示可编辑） */
.label-dim-name {
  border: 0;
  padding: 0 0 1px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-strong);
  cursor: pointer;
  border-bottom: 1px dashed #b9c7dab3;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.label-dim-name:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.label-dim-count {
  font-size: 11px;
  font-weight: 700;
  color: #8494ad;
  background: #dfe7f3;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}

.label-dim-del {
  margin-left: auto;
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #93a2ba;
  background: none;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.label-dim-del:hover {
  color: var(--red);
  background: #f1e2de;
}

.label-dim-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.label-dim-empty {
  font-size: 12px;
  color: #93a2ba;
}

/* 组尾快捷添加小胶囊 */
.label-chip-add {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1.5px dashed #b3c2d6;
  border-radius: var(--r-pill);
  background: none;
  color: #8fa0ba;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.label-chip-add:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* 列表底部：添加维度虚线按钮 */
.label-dim-add {
  width: 100%;
  border: 1.5px dashed #b3c2d6;
  border-radius: 14px;
  background: none;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #8fa0ba;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.label-dim-add:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 维度行内编辑输入（新增 / 重命名共用）：凹陷胶囊 + 常驻焦点环 */
.label-dim-input {
  border: 0;
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-strong);
  background: #e8edf6;
  box-shadow: var(--sh-in), 0 0 0 3px #6d97e64d;
  outline: none;
}

/* 单个标签 chip：凸起小胶囊（主体可点击编辑 · 尾部 × 删除） */
.label-chip {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--r-pill);
  background: var(--card-grad);
  border: 1px solid #fff;
  box-shadow: var(--sh-out-sm);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.label-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-out);
}

.label-chip-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px 7px 14px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

/* chip 主体文字块：名称 + 下方介绍小字（纵向两行） */
.label-chip-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.label-chip-main b {
  font-weight: 700;
  line-height: 1.35;
}

.label-chip-desc {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 500;
  color: #93a1b8;
}

.label-chip-main .label-val {
  transition: transform 0.15s ease;
}

.label-chip-main:active .label-val {
  transform: scale(0.92);
}

.label-val {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.label-val-pos {
  color: var(--green);
  background: #ddf0e8;
}

.label-val-neg {
  color: var(--red);
  background: #f1e2de;
}

/* chip 尾部删除小按钮 */
.label-chip-del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  margin: 4px 4px 4px 2px;
  border-radius: var(--r-pill);
  color: #a3aec2;
  background: #eef2f9;
  box-shadow: var(--sh-in);
  cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease;
}

.label-chip-del:hover {
  color: var(--red);
  transform: translateY(-1px);
}

.label-chip-del:active {
  transform: none;
}

/* 明细弹窗：快捷标签区 */
/* ===== 积分明细弹窗 · 快捷标签区 ===== */
/* 维度 = 轻量组头（色点+名称+渐隐引导线），标签 = 水平双段凸起 chip（名称+分值徽章） */
.detail-labels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 2px;
}

.detail-label-dim {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* 维度组头：色点 + 名称 + 渐隐引导线（不占独立卡片） */
.dlabel-dim-cap {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #8d9cb5;
}

.dlabel-dim-cap::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7fa8e8, #5b8bd6);
  box-shadow: 0 1px 2px rgba(91, 139, 214, 0.45);
}

.dlabel-dim-cap::after {
  content: '';
  flex: 1;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(to right, rgba(148, 164, 192, 0.4), rgba(148, 164, 192, 0));
}

/* 四育体系：组头色点转绿 */
.detail-labels.is-four .dlabel-dim-cap::before {
  background: linear-gradient(135deg, #8fce9f, #5bab6f);
  box-shadow: 0 1px 2px rgba(91, 171, 111, 0.45);
}

.detail-label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-left: 14px; /* 与组头色点对齐 */
}

/* 快捷标签 chip：水平双段（名称 + 分值徽章），凸起拟态、点击直接记分 */
.dlabel-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #fff;
  border-radius: var(--r-pill);
  padding: 7px 8px 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dlabel-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-out);
}

.dlabel-chip:active {
  transform: translateY(0);
  box-shadow: var(--sh-in);
}

.dlabel-name {
  line-height: 1.2;
}

/* 分值徽章：正绿/负红底色徽章，视觉焦点 */
.dlabel-val {
  flex: none;
  min-width: 30px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.4;
}

.dlabel-val-pos {
  color: #1f7a4d;
  background: #d9f2e3;
}

.dlabel-val-neg {
  color: #b3403a;
  background: #fadbd8;
}

/* ---------------- 四育分组方式选择与结果展示 ---------------- */

.four-mode-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 14px;
}

/* 凹槽轨道：打钩选择条 */
.four-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  box-shadow: var(--sh-in);
  transition: opacity 0.25s ease;
}

.four-mode-options.is-locked {
  opacity: 0.72;
}

.four-mode-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.four-mode-item:hover {
  color: var(--ink);
}

.four-mode-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.four-mode-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 2px 2px 5px #cbd5e4, inset -2px -2px 4px #fff;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.four-mode-item:has(input:checked) {
  box-shadow: var(--sh-out-sm);
  color: var(--ink-strong);
  transform: translateY(-1px);
}

.four-mode-item:has(input:checked) .four-mode-check {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 2px 6px #5d82cf59;
}

.four-mode-item:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 四育结果区容器 */
.four-group-board {
  margin-top: 4px;
}

/* 提示卡（不分组个体文案 / 引用缺失提醒） */
.four-note-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--sh-in);
}

.four-note-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px #4f9e7d26;
}

.four-note-warn {
  color: #a8735f;
}

.four-note-warn .four-note-dot {
  background: #d2985f;
  box-shadow: 0 0 0 4px #d2985f26;
}

/* 传统分组：上传入口行 */
.four-upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.four-upload-tip {
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* 四育小组卡列表（传统分组 / 引用学习分组共用） */
.fg-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.fg-group {
  border-radius: 20px;
  padding: 14px 16px;
  background: var(--card-grad);
  border: 1px solid #ffffffb8;
  box-shadow: var(--sh-out-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fg-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fg-group-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.fg-group-count {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: var(--sh-in);
}

.fg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fg-chip {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  box-shadow: inset 2px 2px 5px #cbd5e4, inset -2px -2px 4px #fff;
}

.fg-chip-dim {
  color: var(--ink-faint);
}

/* ---------------- 师徒分层分组结果（学习表现积分板块） ---------------- */

.learn-group-board {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.lg-bar-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lg-bar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.lg-bar-meta {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.lg-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.lg-size select {
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink);
  background: #e8edf6;
  box-shadow: var(--sh-in);
  cursor: pointer;
}

.lg-size select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lg-group {
  border-radius: 20px;
  padding: 16px 18px;
  background: var(--card-grad);
  border: 1px solid #ffffffb8;
  box-shadow: var(--sh-out-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lg-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.lg-group-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.lg-group-count {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.lg-squad {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 4px;
  border-radius: 16px;
  padding: 7px 9px;
  background: #e9eef6;
  box-shadow: inset 3px 3px 7px #ccd6e6, inset -2px -2px 6px #fff;
}

.lg-squad-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-faint);
  white-space: nowrap;
  padding-right: 8px;
  margin-right: 3px;
  border-right: 1px solid #d5deeb;
}

.lg-chain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.lg-member {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 11px 5px 6px;
  background: #f2f6fc;
  border: 1px solid #ffffffa8;
  box-shadow: 2px 2px 6px #c5cfde80;
}

.lg-member.is-lead-big {
  border-color: #e8d3a0;
  box-shadow: 2px 2px 6px #c5cfde80, 0 0 0 2px #f0dfb366;
}

.lg-member.is-lead-sm {
  border-color: #cfd9e8;
  box-shadow: 2px 2px 6px #c5cfde80, 0 0 0 2px #dfe6f28c;
}

.lg-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  border-radius: 8px;
  padding: 2px 5px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--mono);
}

.lg-code-a { background: #dbe7fb; color: #3f6cc0; }
.lg-code-b { background: #ddf3e4; color: #37895a; }
.lg-code-c { background: #fdeedd; color: #b4713a; }
.lg-code-d { background: #ece1f8; color: #7d55b8; }

.lg-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.lg-score {
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* 师徒连线：线两端「师 / 徒」小标记，代号较小者为师 */
.lg-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lg-link-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

.lg-mark-shi {
  background: #dce7fb;
  color: #3f6cc0;
  box-shadow: inset 1px 1px 2px #c4d3ee;
}

.lg-mark-tu {
  background: #ddf3e4;
  color: #37895a;
  box-shadow: inset 1px 1px 2px #c9e3d2;
}

.lg-link-line {
  width: 13px;
  height: 2.5px;
  border-radius: 3px;
  background: #b9c7da;
}

/* 组长竖向桥：两行小队之间的行首连线（大组长 ↔ 小组长），金色区分于小队内帮扶链；
   margin-left 对齐行首第一个成员（跳过小队标签区） */
.lg-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 2px 0 2px 96px;
}

.lg-bridge-line {
  width: 2.5px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #dcb75f 0%, #c9a04a 100%);
}

/* 组长标识徽章 */
.lg-role {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.lg-role-big {
  background: #f2e3bd;
  color: #8a6a1f;
  box-shadow: inset 1px 1px 2px #e8d5a8;
}

.lg-role-sm {
  background: #dfe6f2;
  color: #5b6b85;
  box-shadow: inset 1px 1px 2px #ccd7e7;
}

@keyframes scheme-board-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------- 管理后台列表 ---------------- */

.admin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.admin-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  border-radius: 18px;
  padding: 12px 16px;
  background: #e9eef6;
  box-shadow: var(--sh-in);
}

.admin-list .a-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-list .btn {
  flex: none;
}

.admin-list .feed-empty {
  grid-column: 1 / -1;
}

/* ---------------- 管理后台数据表格 ---------------- */

/* 表格外壳：拟态卡片 + 横向滚动兜底 */
.table-wrap {
  margin-top: 20px;
  border-radius: var(--r-panel);
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13.5px;
}

/* 表头：浅蓝灰横带，小号粗体灰蓝字 */
.data-table th {
  padding: 13px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  background: #e2e9f4;
  white-space: nowrap;
}

/* 行分隔用柔和横线（非实线描边语言，接近分隔符） */
.data-table td {
  padding: 12px 16px;
  color: var(--ink);
  vertical-align: middle;
  border-top: 1px solid #dce3ef;
  white-space: nowrap;
}

.data-table tbody tr {
  transition: background-color 0.18s ease;
}

.data-table tbody tr:hover {
  background: #edf2fa;
}

.data-table .td-strong {
  font-weight: 700;
  color: var(--ink-strong);
}

.data-table .td-mono {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.2px;
}

.data-table .td-dim {
  color: var(--ink-faint);
}

/* 数值单元格（学习/四育积分、货币）：等宽数字加粗，色彩区分维度 */
.data-table .td-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.data-table .num-learn {
  color: #4a6fb5;
}

.data-table .num-four {
  color: #3e8f63;
}

.data-table .num-coin {
  color: #b08a2e;
}

/* 学生名单表：七列加宽下限，窄屏横向滚动兜底 */
.data-table.stu-table {
  min-width: 800px;
}

.data-table .th-manage,
.data-table .td-manage {
  text-align: center;
}

.data-table .td-manage .btn + .btn {
  margin-left: 6px;
}

/* 空态：与表格同级的拟态卡片 */
.table-empty {
  margin-top: 20px;
  border-radius: var(--r-panel);
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out);
  padding: 34px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------------- 教师名单面板：搜索 + 选择 ---------------- */

/* 工具行：左搜索、右批量操作 */
.teacher-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 16px;
}

/* 搜索框：拟态凹陷胶囊 + 内嵌放大镜（教师名单 / 学生名单共用形态） */
.teacher-search,
.stu-search {
  position: relative;
  min-width: 0;
}

.teacher-search {
  flex: 1 1 230px;
  max-width: 360px;
}

/* 学生搜索框：跟随上传工具行，靠右收窄 */
.stu-search {
  flex: 0 1 210px;
  max-width: 250px;
  margin-left: auto;
}

.teacher-search .search-ico,
.stu-search .search-ico {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.teacher-search input,
.stu-search input {
  width: 100%;
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 16px 10px 38px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-strong);
  background: #e8edf6;
  box-shadow: var(--sh-in);
  outline: none;
  transition: box-shadow 0.22s;
}

.teacher-search input::placeholder,
.stu-search input::placeholder {
  color: #9aa8bf;
}

.teacher-search input:focus,
.stu-search input:focus {
  box-shadow:
    var(--sh-in),
    0 0 0 3px #6d97e64d;
}

.teacher-bulk {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 面板内嵌表格：凹槽变体（无边框、内阴影，与凸起面板形成光影层次） */
.table-wrap.table-inset {
  margin-top: 0;
  background: #e6ecf7;
  border: 0;
  box-shadow: var(--sh-in);
  border-radius: 18px;
}

.table-inset .data-table th {
  background: #dde6f3;
}

.table-inset .data-table tbody tr:hover {
  background: #eef3fb;
}

/* 凹槽内的空态：不再叠加卡片阴影 */
.table-empty-inset {
  margin-top: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 固定列宽布局：行宽严格等于容器（与上方面板对齐），长内容省略号截断 */
.data-table.table-fixed {
  table-layout: fixed;
  min-width: 0;
}

.table-fixed .td-cut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}

/* 选择列：居中窄列 */
.data-table .th-check,
.data-table .td-check {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

/* 拟态复选框：未选凹陷 / 选中蓝色渐变凸起 / 半选横线 */
.data-table input[type='checkbox'],
.mx-check {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 6px;
  background: linear-gradient(145deg, #e9eff8, #dfe7f3);
  box-shadow: inset 2px 2px 4px #c3cede, inset -2px -2px 4px #fff;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.data-table input[type='checkbox'],
.mx-check:hover {
  box-shadow: inset 1.5px 1.5px 3px #c3cede, inset -1.5px -1.5px 3px #fff;
}

.data-table input[type='checkbox'],
.mx-check:focus-visible {
  outline: 2px solid #6d97e6;
  outline-offset: 2px;
}

.data-table input[type='checkbox'],
.mx-check:checked,
.data-table input[type='checkbox'],
.mx-check:indeterminate {
  background: var(--accent-grad);
  box-shadow: 2px 2px 5px #c5cfde, -2px -2px 4px #fff;
}

.data-table input[type='checkbox'],
.mx-check:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(42deg);
}

.data-table input[type='checkbox'],
.mx-check:indeterminate::after {
  content: '';
  position: absolute;
  left: 3.5px;
  right: 3.5px;
  top: 50%;
  height: 2.2px;
  margin-top: -1.1px;
  border-radius: 2px;
  background: #fff;
}

/* 选中行高亮（浅蓝，深于凹槽底色） */
.data-table tbody tr.tr-on {
  background: #dde9fb;
}

.data-table tbody tr.tr-on:hover {
  background: #d4e2f9;
}

/* 固定布局下管理列单行紧凑按钮（缩小确保一行放下） */
.table-fixed .td-manage {
  white-space: nowrap;
}

.table-fixed .td-manage .btn-mini {
  padding: 4px 10px;
  font-size: 11px;
}

.table-fixed .td-manage .btn + .btn {
  margin-left: 6px;
}

/* 固定布局下长文本列完整显示（自动换行，不截断） */
.table-fixed .td-wrap {
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}

/* VIP 标签行内编辑：可点击态 + 日期输入凹槽胶囊 */
.tag-vip-edit {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.tag-vip-edit:hover {
  transform: translateY(-1px);
  box-shadow: 2px 3px 8px #c5cfdeaa;
}

.tag-vip-edit:active {
  transform: none;
  box-shadow: inset 2px 2px 5px rgba(120, 138, 170, 0.35);
}

.vip-inline {
  width: 132px;
  padding: 6px 10px;
  border: none;
  border-radius: 999px;
  background: #e8edf6;
  box-shadow: var(--sh-in);
  font: 600 12px/1.2 var(--font);
  color: var(--ink);
  outline: none;
}

.vip-inline:focus {
  box-shadow: var(--sh-in), 0 0 0 3px #8fb1f066;
}

/* ---------------- 积分墙 ---------------- */

/* 板块切换行：学习表现积分 / 四育表现积分（复用凹槽轨道 + 凸起胶囊） */
.wall-board-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

/* 积分墙板块切换：滑动滑块承载凸起胶囊，随选中 tab 平移（tab 自身不再凸起） */
.wall-board-switch {
  position: relative;
  flex-wrap: nowrap;
}

.wall-board-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--r-pill);
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out-sm);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.22s ease;
}

.wall-board-switch .scheme-tab {
  position: relative;
  z-index: 1;
  transition:
    color 0.24s,
    background 0.24s;
}

/* 选中态只保留文字着色，凸起背景交给滑块 */
.wall-board-switch .scheme-tab.is-active {
  background: transparent;
  box-shadow: none;
}

.wall-grid {
  /* 个体模式：自适应多列（≥300px/卡，宽屏最多 ~5 列），窄屏自动降列 */
  position: relative; /* 幸运星发光框（.lucky-frame）的定位锚 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 22px;
}

.wall-card {
  position: relative;
  border-radius: var(--r-card);
  padding: 24px 24px 20px;
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out);
  transition:
    transform 0.22s,
    box-shadow 0.22s;
}

.wall-card:hover {
  transform: translateY(-3px);
  box-shadow: 11px 13px 22px #c0cbdd, -9px -9px 20px #fff;
}

.wall-card .rank-badge {
  position: absolute;
  top: 18px;
  right: 20px;
}

.wall-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink-strong);
  padding-right: 44px;
}

/* 学生姓名：超长时省略，避免顶到排名徽章 */
.wall-card .wall-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-members {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wall-points {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.wall-points b {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.wall-points span {
  font-size: 12px;
  color: var(--ink-soft);
}

.wall-quick {
  margin-top: 17px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.wall-foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wall-count {
  font-size: 11.5px;
  color: var(--ink-soft);
}

.wall-empty {
  grid-column: 1 / -1;
  border-radius: var(--r-card);
  padding: 46px 20px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out);
}

/* ---------------- 积分墙 · 分组模式 ---------------- */

/* 分组态网格：整块收缩（fit-content）+ auto 边距居中——页面两侧留白一致；
   盒内各行从同一左缘起排（行与行对齐，第二行组卡与第一行左对齐）；
   组卡按姓名完整的内容宽度自然收缩，容器够宽即同行并排 2 个及以上；超宽照常换行，绝不压缩姓名。
   注意：多行换行时 fit-content 的 max-content（全部组挤一行）会被钳到满宽，行末残隙堆右侧——
   app.js 的 syncWallGridWidth() 在渲染落定后实测最宽行并把盒宽钉到该值，整块才真正居中 */
.wall-grid.is-grouped {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* 四育平铺组卡 / 待分组块：定宽 320px 不拉伸——末行稀疏时与前行同等大小、从左往右排 */
.wall-grid.is-grouped .wall-group {
  flex: 0 1 320px;
  min-width: 0;
  border-radius: var(--r-card);
  padding: 13px 14px 15px;
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out);
}

/* 学习链式组卡：内容定宽（姓名完整撑开，同规模小组等宽）不拉伸——末行稀疏时
   与前行同等大小、从左往右排；640px 封顶防单链极端拉长 */
.wall-grid.is-grouped .wall-group-chain {
  flex: 0 1 auto;
  min-width: min(100%, 340px);
  max-width: 640px;
}

.wall-group-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.wall-group-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink-strong);
}

.wall-group-meta {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* 待分组块：弱化区分 */
.wall-group-todo {
  background: none;
  border: 1px dashed #c7d2e4;
  box-shadow: none;
}

.wall-group-todo .wall-group-name {
  color: var(--ink-soft);
  font-weight: 700;
}

/* 组内成员网格 */
.wall-group-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 9px;
}

/* 学生胶囊卡：点击弹出记分窗 */
.wall-member {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--card-grad);
  box-shadow: var(--sh-out-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.wall-member:hover {
  transform: translateY(-2px);
  box-shadow: 6px 7px 14px #c5cfdecc, -5px -5px 12px #fff;
}

.wall-member:active {
  transform: translateY(0);
  box-shadow: var(--sh-press);
}

.wall-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink-strong);
}

.wall-member-points {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.wall-member-points b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink-strong);
  line-height: 1;
}

.wall-member-points small {
  font-size: 10.5px;
  color: var(--ink-soft);
}

/* ---------------- 积分墙学习分组：链式成员（button 版，可点击记分） ---------------- */

/* 与小组管理的每组两行小队链对应：竖排卡 = 顶行（代号 + 组长徽章），中行姓名，底行积分（无排名徽章——已在组框架内） */
.wall-lg-member {
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}

.wall-lg-member:hover {
  transform: translateY(-2px);
  box-shadow: 3px 4px 11px #c5cfdecc;
}

.wall-lg-member:active {
  transform: translateY(0);
  box-shadow: var(--sh-press);
}

.wall-lg-member:focus-visible {
  outline: 2px solid #8fb2e6;
  outline-offset: 2px;
}

/* 竖排卡内的积分：底行居中 */
.wall-lg-member .wall-member-points {
  justify-content: center;
  flex: none;
}

.wall-lg-member .wall-member-points b {
  font-size: 15px;
}

.wall-lg-member .wall-member-points small {
  font-size: 10px;
}

/* 积分墙语境徽章窄版：缩横向占位，为姓名让空间（小组管理原样） */
.wall-lg-member .lg-role {
  padding: 3px 5px;
}

/* 积分墙组内链式结构：与组头留出呼吸间距 */
.wall-group .wall-lg-chain {
  margin-top: 4px;
  width: 100%;
}

/* ---------------- 积分墙语境覆盖：竖排成员卡（姓名独占一行）/ 去小队行凹陷背景 / 圆点连线 / 卡锚定组长桥 ---------------- */
/* 学生已在组框架内，行无需再铺一层凹陷底（小组管理保留原样，作用域仅限积分墙链）；
   成员卡竖排三层（代号徽章行 / 姓名 / 积分），卡宽由姓名内容撑开 */
.wall-lg-chain .lg-squad {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  gap: 9px 3px;
  width: 100%;
  /* 每组固定两行小队：桌面不折行（基础 .lg-squad 的 wrap 仅供小组管理与窄屏兜底） */
  flex-wrap: nowrap;
}

/* 行间距 = 组长竖桥高度（桥为二队行首卡内绝对定位，向上贯穿此间距连接一队行首） */
.wall-lg-chain .lg-squad + .lg-squad {
  margin-top: 26px;
}

/* 竖排成员卡（三层：代号徽章行 / 姓名 / 积分）：统一基准宽 var(--lg-w)（JS 按组内最宽成员推算注入）——
   等基准 + 等 grow，行内富余均分后全卡仍保持等宽（姓名居中，卡宽不随姓名长短漂移）；
   不设 min-width: 0，保留自动内容最小宽：姓名在任何行宽下都完整显示；220px 封顶防极端拉伸 */
.wall-lg-chain .lg-member {
  position: relative;
  flex: 1 1 var(--lg-w, 100px);
  min-width: 64px;
  max-width: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  padding: 8px 7px 7px;
  border-radius: 14px;
}

/* 顶行：师徒代号 chip + 组长徽章同排 */
.wall-lg-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* 姓名：独占一行居中，卡宽随姓名内容自适应撑开（ellipsis 仅为超长姓名兜底） */
.wall-lg-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--ink-strong);
}

/* 师徒色点：珍珠铆钉——径向高光 + 白描边 + 色晕投影（蓝 = 师 / 绿 = 徒） */
.lg-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  box-sizing: border-box;
}

.lg-dot-shi {
  background: radial-gradient(circle at 32% 28%, #a9c9ff 0%, #5a8ae0 58%, #3c66c4 100%);
  box-shadow:
    0 0 0 2.5px #f3f6fc,
    1px 2px 4px #3c66c44d;
}

.lg-dot-tu {
  background: radial-gradient(circle at 32% 28%, #b2e6c0 0%, #56b178 58%, #35855a 100%);
  box-shadow:
    0 0 0 2.5px #f3f6fc,
    1px 2px 4px #35855a4d;
}

/* 积分墙连线：两端珍珠铆钉 9px + 线身 6px = 24px 内容下限——基准即内容下限，
   任何行宽下都不会压缩重叠到卡片上；行内富余适度伸展（48px 封顶）托起两端铆钉，
   线身方向渐变（师端蓝 → 徒端绿） */
.wall-lg-chain .lg-link {
  flex: 1 1 24px;
  min-width: 24px;
  max-width: 48px;
}

.wall-lg-chain .lg-link-line {
  flex: 1 1 0;
  min-width: 6px;
  height: 3px;
}

.wall-lg-chain .lg-dot-shi + .lg-link-line {
  background: linear-gradient(90deg, #8fb2e6, #7fc794);
}

.wall-lg-chain .lg-dot-tu + .lg-link-line {
  background: linear-gradient(90deg, #7fc794, #8fb2e6);
}

/* 组长竖桥：渲染在二队行首卡内，绝对定位锚定本卡中心、向上贯穿行间距连接一队行首——
   卡宽随姓名自适应，桥恒对齐行首中心，不再依赖行首定宽；pointer-events 关闭不挡卡片点击 */
.wall-lg-chain .lg-bridge {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  height: 26px;
  pointer-events: none;
}

.wall-lg-chain .lg-bridge-line {
  flex: 1 1 0;
  width: 2.5px;
  height: auto;
  min-height: 6px;
}

/* ---------------- 弹窗 ---------------- */

.dlg {
  width: min(600px, calc(100vw - 36px));
  border: 1px solid var(--line-soft);
  border-radius: 30px;
  padding: 30px 30px 26px;
  background: var(--card-grad);
  box-shadow: 18px 22px 46px #b6c2d6, -14px -14px 34px #fff;
  color: var(--ink);
}

.dlg::backdrop {
  background: #3d4a6340;
  backdrop-filter: blur(7px);
}

.dlg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dlg-title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--ink-strong);
}

.dlg-points {
  margin-top: 14px;
  border-radius: 18px;
  padding: 11px 18px;
  font-size: 13px;
  color: var(--ink-soft);
  background: #e9eef6;
  box-shadow: var(--sh-in);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* 顶行：当前积分（凹槽胶囊）与「本次记入」文本标题同行并排，消除留白；窄屏自动换行堆叠 */
.dlg-top {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dlg-top .dlg-points {
  margin-top: 0;
  flex: 1 1 300px;
}

.dlg-points b {
  margin-left: 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

/* 积分拆分：总积分旁的 学习 / 四育 维度小字（蓝 = 学习，绿 = 四育） */
.dlg-points-split {
  font-size: 12px;
  white-space: nowrap;
}

.dlg-points-split b {
  margin: 0 3px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.dlg-points-split b:nth-of-type(1) {
  color: #4a6fb5;
}

.dlg-points-split b:nth-of-type(2) {
  color: #3e8f63;
}

/* 第三个 b = 帮扶分（师徒传导衍生），紫金 */
.dlg-points-split b:nth-of-type(3) {
  color: #b3822e;
}

/* 「本次记入」（与当前积分同行）：标题为纯文本标注（区别于左侧积分凹槽胶囊，不做成控件），
   两个体系选项是按钮——凹槽轨道 + 凸起滑块承载选中态 + 滑动切换（与积分墙板块切换同款语言） */
.detail-scheme-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  background: none;
  box-shadow: none;
}

.detail-scheme-cap {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
}

/* 凹槽轨道：两枚体系按钮嵌在凹陷背景里 */
.detail-scheme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  border-radius: var(--r-pill);
  padding: 4px;
  background: #e9eef6;
  box-shadow: var(--sh-in);
}

/* 滑动凸起滑块：随选中按钮平移，选中文字浮在凸起胶囊上（首次瞬时定位，此后平滑滑动） */
.detail-scheme-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--r-pill);
  background: var(--card-grad);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-out-sm);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.22s ease;
}

.detail-scheme-chip {
  position: relative;
  z-index: 1;
  border: none;
  cursor: pointer;
  background: none;
  box-shadow: none;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font: 600 12.5px/1.4 var(--font);
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color 0.22s;
}

.detail-scheme-chip:hover {
  color: var(--ink-strong);
}

/* 选中态只保留文字着色，凸起背景交给滑块 */
.detail-scheme-chip.is-active {
  font-weight: 800;
}

.detail-scheme-chip.is-active[data-detail-scheme='learn'] {
  color: #4a6fb5;
}

.detail-scheme-chip.is-active[data-detail-scheme='four'] {
  color: #3e8f63;
}

.dlg-form {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dlg-history {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #d7dfea;
}

/* ---------------- 上传名单弹窗 ---------------- */

.upload-actions {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  font-size: 14.5px;
}

.upload-btn svg {
  flex: none;
}

.upload-tpl-hint {
  margin-top: 14px;
}

.upload-extra {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #d7dfea;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feed-scroll {
  margin-top: 12px;
  max-height: 264px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #c3cfe0 transparent;
}

/* ---------------- Toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 24px);
  z-index: 60;
  max-width: calc(100vw - 40px);
  border-radius: var(--r-pill);
  padding: 12px 26px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #46536f 0%, #2c3752 100%);
  box-shadow: 8px 12px 26px #93a2bd66;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ---------------- 页脚 ---------------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 4.4%;
  border-top: 1px solid #d3dcea;
  font-size: 12px;
  color: var(--ink-soft);
}

.foot-copy {
  flex-basis: 100%;
  text-align: center;
  color: var(--ink-faint);
}

.auth-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
}

/* ---------------- 载入动画 ---------------- */

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

.rise {
  animation: rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 1060px) {
  .wall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .console-layout {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 18px;
  }
}

@media (max-width: 820px) {
  /* 分组态多列：flex wrap 自动降列——链式组卡 min-width 296 中屏仍可一行两个，
     容器不足时自动换行，无需显式单列规则 */

  .topbar {
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 12px 4.5%;
  }

  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 4.5%;
    right: 4.5%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px;
    border-radius: 22px;
    background: var(--card-grad);
    border: 1px solid var(--line-soft);
    box-shadow: var(--sh-out);
  }

  .nav.nav-open {
    display: flex;
  }

  .nav-item {
    text-align: center;
    padding: 12px 18px;
  }

  .menu-toggle {
    display: grid;
  }

  .brand-sub {
    display: none;
  }

  .wall-grid,
  .admin-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .console-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .console-side {
    position: static;
    border-radius: 18px;
    padding: 10px;
  }

  .console-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .console-nav-item {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    padding: 10px 16px;
  }

  .form-row-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main {
    padding-top: 30px;
  }
}

@media (max-width: 460px) {
  body {
    font-size: 14px;
  }

  /* 学习板块操作区纵向堆叠：滑条与按钮各占一行 */
  .scheme-lead-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  .size-seg {
    align-self: center;
  }

  .scheme-lead-actions .btn {
    flex: 1 1 auto;
  }

  .lg-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 四育分组选择行纵向堆叠：选择条与确认按钮各占一行 */
  .four-mode-row {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  .four-mode-options {
    justify-content: center;
  }

  .four-mode-item {
    font-size: 12.5px;
  }

  .fg-list {
    grid-template-columns: 1fr;
  }

  .lg-group {
    padding: 13px 12px;
    border-radius: 16px;
  }

  .lg-squad {
    padding: 9px 11px;
  }

  .lg-bridge {
    margin-left: 74px;
  }

  .lg-member {
    padding: 4px 9px 4px 5px;
  }

  .auth-demo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .code-row {
    gap: 8px;
  }

  .code-row .btn {
    padding: 12px 13px;
    font-size: 12px;
  }

  .auth-card {
    padding: 30px 24px 24px;
    border-radius: 26px;
  }

  .panel {
    padding: 19px 18px;
    border-radius: 20px;
  }

  .wall-card {
    border-radius: 22px;
    padding: 18px 17px 16px;
  }

  .scheme-tab {
    font-size: 12px;
    padding: 4px 10px 4px 5px;
  }

  /* 学习板块标题行折行：操作区（滑条 + 按钮）占满一行 */
  .scheme-board-lead {
    flex-wrap: wrap;
  }

  .scheme-lead-actions {
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .scheme-board-empty {
    padding: 28px 18px;
  }

  .stu-search {
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
  }

  .currency-view {
    gap: 12px;
    padding: 15px 12px;
  }

  .currency-formula {
    gap: 8px 10px;
  }

  .currency-val b {
    font-size: 19px;
  }

  .currency-item-rate .currency-val b {
    font-size: 14px;
  }

  .currency-op,
  .currency-eq {
    font-size: 15px;
  }

  /* 积分标签新增行：小屏纵向堆叠为整行输入 */
  .label-add-row {
    flex-direction: column;
    align-items: stretch;
  }

  .label-name-input,
  .label-dim-select,
  .label-desc-input,
  .label-value-input {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .wall-points b {
    font-size: 33px;
  }

  /* 分组态窄屏兜底：组卡占满整行；小队行允许折行——姓名完整优先，绝不截断 */
  .wall-grid.is-grouped .wall-group {
    flex: 1 1 100%;
  }

  .wall-group-chain {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
    max-width: none;
  }

  /* 窄屏成员卡：字号微降，整队放不下时折行处理（保留姓名完整） */
  .wall-lg-chain .lg-member {
    max-width: none;
    padding: 7px 6px 6px;
  }

  .wall-lg-chain .lg-squad {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 9px;
  }

  .wall-lg-chain .lg-squad + .lg-squad {
    margin-top: 24px;
  }

  .wall-lg-chain .lg-bridge {
    top: -24px;
    height: 24px;
  }

  .wall-lg-name {
    font-size: 12.5px;
  }

  .wall-group {
    padding: 13px 12px 14px;
  }

  .wall-group-members {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 8px;
  }

  .wall-member {
    padding: 10px 11px;
    gap: 6px;
  }

  .view-title {
    font-size: 23px;
  }

  .dlg {
    padding: 22px 18px 20px;
    border-radius: 24px;
  }

  /* 明细弹窗历史条目窄屏：允许折行，操作按钮不挤时间 */
  .feed li {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .feed .feed-time {
    margin-left: auto;
  }

  .feed-edit-form {
    flex-wrap: wrap;
  }

  .feed-edit-form #histEditReason {
    flex: 1 1 120px;
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .form-row-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .data-table {
    min-width: 640px;
  }

  /* 教师名单工具行：窄屏纵向堆叠，搜索框占满 */
  .teacher-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .teacher-search {
    max-width: none;
    flex-basis: auto;
  }

  .teacher-bulk {
    justify-content: space-between;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }

  .table-empty {
    padding: 26px 16px;
  }

  .build-placeholder {
    padding: 56px 22px;
  }

  .row-actions .btn {
    flex: 1 1 auto;
    padding: 11px 16px;
    font-size: 12.5px;
  }

  .inline-edit {
    width: 100%;
  }

  .inline-edit input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .top-actions .user-chip {
    display: none;
  }

  /* 小屏数据源徽章压缩为纯状态点，保留可感知的连接状态 */
  .top-actions .db-badge {
    gap: 0;
    padding: 7px 10px;
    font-size: 0;
  }
}

/* ---------------- 动效减弱 ---------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ================================================================
   班级画像 —— three.js 3D 数据舱（晚自习熄灯后的天文台）
   深空底 + 发光柱林 + 玻璃 HUD；与全站浅色拟态形成明暗对比
   ================================================================ */

/* ---- 深色作用域：变量只活在 .portrait-scope 内，不污染全局 ---- */

.portrait-scope {
  --p3d-bg-0: #05080f;
  --p3d-bg-1: #0c1530;
  --p3d-ink: #e9effd;
  --p3d-ink-soft: #a3b4d8;
  --p3d-ink-faint: #5d6e94;
  --p3d-line: rgba(96, 152, 255, 0.22);
  --p3d-line-strong: rgba(110, 170, 255, 0.4);
  --p3d-glass: rgba(12, 19, 40, 0.72);
  --p3d-glass-2: rgba(16, 24, 50, 0.88);
  --p3d-learn: #4d8dff;
  --p3d-four: #2fd48a;
  --p3d-coin: #ffc94d;
  --p3d-gold: #ffd75e;
  --p3d-silver: #cdd6e8;
  --p3d-bronze: #e0995a;
  --p3d-red: #ff7a7a;
  --p3d-up: #35e39a;
  --p3d-down: #ff7a7a;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--p3d-bg-1) 0%, var(--p3d-bg-0) 58%, #03050a 100%);
  border: 1px solid rgba(96, 152, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(140, 180, 255, 0.08),
    inset 0 0 60px rgba(20, 45, 110, 0.35),
    0 18px 46px rgba(10, 20, 50, 0.35);
  overflow: hidden;
}

/* 星尘微光层（纯装饰，不挡交互） */
.portrait-scope::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 24%, rgba(180, 205, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(180, 205, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(160, 200, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 82%, rgba(180, 205, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 40%, rgba(160, 200, 255, 0.28) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 88%, rgba(180, 205, 255, 0.3) 50%, transparent 51%);
  pointer-events: none;
  z-index: 0;
}

.portrait-scope > * {
  position: relative;
  z-index: 1;
}

/* ---- 3D 主舞台 ---- */

.p3d-stage {
  position: relative;
  height: clamp(430px, 56vh, 640px);
  min-height: 380px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 38%, rgba(30, 55, 130, 0.34) 0%, transparent 70%),
    linear-gradient(180deg, #0a1124 0%, #060b18 100%);
  border: 1px solid rgba(96, 152, 255, 0.18);
  box-shadow:
    inset 0 0 80px rgba(8, 16, 40, 0.9),
    inset 0 1px 0 rgba(140, 180, 255, 0.1);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.p3d-stage:active {
  cursor: grabbing;
}

.p3d-host {
  position: absolute;
  inset: 0;
}

.p3d-host canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 加载提示 */
.p3d-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--p3d-ink-soft);
  background: rgba(6, 11, 24, 0.72);
  backdrop-filter: blur(4px);
  transition: opacity 0.4s ease;
  z-index: 6;
}

.p3d-loading.is-done {
  opacity: 0;
  pointer-events: none;
}

.p3d-loading[hidden],
.p3d-fallback[hidden] {
  display: none;
}

.p3d-loading-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--p3d-learn);
  box-shadow: 0 0 12px var(--p3d-learn);
  animation: p3dPulse 1.1s ease-in-out infinite;
}

@keyframes p3dPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.5; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* 降级提示条 */
.p3d-fallback {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--p3d-ink-soft);
  background: rgba(30, 40, 70, 0.85);
  border: 1px solid var(--p3d-line);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  z-index: 6;
}

/* ---- HUD：总览统计（左上） ---- */

.p3d-stats {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 8px;
  z-index: 4;
  pointer-events: none;
}

.p3d-stat {
  padding: 10px 14px 11px;
  border-radius: 14px;
  background: var(--p3d-glass);
  border: 1px solid var(--p3d-line);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(150, 190, 255, 0.08);
}

.p3d-stat small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--p3d-ink-faint);
}

.p3d-stat b {
  display: block;
  margin-top: 2px;
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--p3d-ink);
}

.p3d-stat.ps-learn b { color: var(--p3d-learn); text-shadow: 0 0 18px rgba(77, 141, 255, 0.55); }
.p3d-stat.ps-plus b { color: var(--p3d-up); text-shadow: 0 0 18px rgba(53, 227, 154, 0.5); }
.p3d-stat.ps-minus b { color: var(--p3d-down); text-shadow: 0 0 18px rgba(255, 122, 122, 0.5); }
.p3d-stat.ps-neutral b { text-shadow: 0 0 18px rgba(160, 190, 255, 0.35); }

/* ---- HUD：维度 / 视角切换（右上） ---- */

.p3d-ctrl {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 5;
}

.p3d-switch {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(8, 13, 28, 0.72);
  border: 1px solid var(--p3d-line);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(120, 160, 255, 0.06);
  backdrop-filter: blur(12px);
}

/* 滑块：永远在按钮文字之下（z-index 规范，杜绝滑块盖字） */
.p3d-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(70, 120, 235, 0.85), rgba(50, 88, 200, 0.85));
  box-shadow:
    0 0 14px rgba(77, 141, 255, 0.45),
    inset 0 1px 0 rgba(200, 220, 255, 0.28);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.22s ease;
}

.p3d-tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--p3d-ink-faint);
  cursor: pointer;
  transition: color 0.22s ease, text-shadow 0.22s ease;
  white-space: nowrap;
}

.p3d-tab:hover {
  color: var(--p3d-ink-soft);
}

.p3d-tab.is-active {
  color: #f4f8ff;
  text-shadow: 0 1px 6px rgba(10, 20, 60, 0.6);
}

.p3d-tab:focus-visible {
  outline: 2px solid var(--p3d-line-strong);
  outline-offset: 1px;
}

/* ---- HUD：底部图例 + 交互提示 ---- */

.p3d-foot {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 4;
  pointer-events: none;
}

.p3d-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
  color: var(--p3d-ink-soft);
}

.p3d-legend i {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  white-space: nowrap;
}

.p3d-legend i::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2.5px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.p3d-lg-learn { color: var(--p3d-learn); }
.p3d-lg-four { color: var(--p3d-four); }
.p3d-lg-coin { color: var(--p3d-coin); }
.p3d-lg-gold { color: var(--p3d-gold); }
.p3d-lg-up { color: var(--p3d-up); }
.p3d-lg-down { color: var(--p3d-down); }
.p3d-lg-la { color: #6ea4ff; }
.p3d-lg-lb { color: #52ecab; }
.p3d-lg-lc { color: #f0a56c; }
.p3d-lg-ld { color: #b795ec; }

.p3d-hint {
  font-size: 11.5px;
  color: var(--p3d-ink-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---- 悬停明细 tooltip ---- */

.p3d-tip {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 148px;
  padding: 9px 13px 10px;
  border-radius: 12px;
  background: var(--p3d-glass-2);
  border: 1px solid var(--p3d-line-strong);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(2, 6, 18, 0.65);
  pointer-events: none;
  z-index: 7;
  transform: translateY(-50%);
}

.p3d-tip b {
  display: block;
  font-size: 14px;
  color: var(--p3d-ink);
}

.p3d-tip span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--p3d-ink-soft);
}

.p3d-tip em {
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- 榜单面板（深色玻璃卡） ---- */

.portrait-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pvp {
  padding: 16px 18px 18px;
  border-radius: 20px;
  background: var(--p3d-glass);
  border: 1px solid var(--p3d-line);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(150, 190, 255, 0.07);
  animation: pvpRise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.pvp:nth-child(2) { animation-delay: 0.07s; }
.pvp:nth-child(3) { animation-delay: 0.14s; }
.pvp:nth-child(4) { animation-delay: 0.21s; }

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

.pvp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 13px;
}

.pvp-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--p3d-ink);
  letter-spacing: 0.02em;
}

.pvp-title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 2.5px;
  background: linear-gradient(135deg, #6ea4ff, #3d6fe0);
  box-shadow: 0 0 10px rgba(77, 141, 255, 0.7);
  vertical-align: 1px;
}

.pvp-note {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--p3d-ink-faint);
  white-space: nowrap;
}

/* 引导卡（无数据 / 未分组） */
.pvp-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--p3d-ink-soft);
  background: rgba(20, 30, 60, 0.5);
  border: 1px dashed rgba(96, 152, 255, 0.25);
}

.pvp-guide::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p3d-learn);
  box-shadow: 0 0 8px var(--p3d-learn);
}

.pvp-guide.guide-warn::before {
  background: var(--p3d-bronze);
  box-shadow: 0 0 8px var(--p3d-bronze);
}

/* ---- 个人榜（4–10 名列表，前三名在 3D 领奖台） ---- */

.prank-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(18, 28, 58, 0.55);
  border: 1px solid rgba(96, 152, 255, 0.12);
  transition: border-color 0.22s ease, background 0.22s ease;
}

.prank-row:hover {
  border-color: var(--p3d-line-strong);
  background: rgba(26, 40, 80, 0.65);
}

.prank-no {
  flex: none;
  width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--p3d-ink-faint);
}

.prank-no.n-gold { color: var(--p3d-gold); text-shadow: 0 0 10px rgba(255, 215, 94, 0.55); }
.prank-no.n-silver { color: var(--p3d-silver); text-shadow: 0 0 10px rgba(205, 214, 232, 0.45); }
.prank-no.n-bronze { color: var(--p3d-bronze); text-shadow: 0 0 10px rgba(224, 153, 90, 0.5); }

.prank-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p3d-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prank-val {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prank-val-learn { color: var(--p3d-learn); text-shadow: 0 0 14px rgba(77, 141, 255, 0.45); }
.prank-val-four { color: var(--p3d-four); text-shadow: 0 0 14px rgba(47, 212, 138, 0.45); }
.prank-val-coin { color: var(--p3d-coin); text-shadow: 0 0 14px rgba(255, 201, 77, 0.45); }

.prank-unit {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--p3d-ink-faint);
}

.portrait-more {
  margin-top: 10px;
  text-align: center;
  font-size: 11.5px;
  color: var(--p3d-ink-faint);
  letter-spacing: 0.04em;
}

/* 师徒代号 chip（深色版，覆盖全局浅色样式） */
.portrait-scope .lg-code {
  flex: none;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace);
  letter-spacing: 0.04em;
  background: rgba(63, 108, 192, 0.22);
  color: #7fa8ec;
  border: 1px solid rgba(127, 168, 236, 0.25);
}

.portrait-scope .lg-code.lc-b { background: rgba(55, 137, 90, 0.22); color: #67d6a2; border-color: rgba(103, 214, 162, 0.25); }
.portrait-scope .lg-code.lc-c { background: rgba(180, 113, 58, 0.22); color: #f0a56c; border-color: rgba(240, 165, 108, 0.25); }
.portrait-scope .lg-code.lc-d { background: rgba(125, 85, 184, 0.22); color: #b795ec; border-color: rgba(183, 149, 236, 0.25); }

/* ---- 横条榜（小组榜 / 分层榜）：发光积木条 ---- */

.pbar-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pbar-label {
  flex: none;
  width: 118px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pbar-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p3d-ink);
  white-space: nowrap;
  overflow: hidden;
}

.pbar-sub {
  font-size: 10.5px;
  color: var(--p3d-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pbar-rank {
  flex: none;
  width: 19px;
  height: 17px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--p3d-ink-faint);
  background: rgba(40, 54, 96, 0.6);
}

.pbar-rank-1 { background: linear-gradient(135deg, #ffe28a, #e8b33c); color: #4a3406; box-shadow: 0 0 10px rgba(255, 209, 90, 0.55); }
.pbar-rank-2 { background: linear-gradient(135deg, #e8eefa, #aebdd6); color: #3c4a63; box-shadow: 0 0 10px rgba(205, 214, 232, 0.4); }
.pbar-rank-3 { background: linear-gradient(135deg, #f2c69a, #cc8a55); color: #4a2c10; box-shadow: 0 0 10px rgba(224, 153, 90, 0.5); }

.pbar-track {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  background: rgba(8, 13, 28, 0.8);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(120, 160, 255, 0.05);
  overflow: hidden;
}

.pbar {
  height: 100%;
  border-radius: 999px;
  min-width: 4px;
  animation: pWiden 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes pWiden {
  from { width: 0 !important; }
}

.pbar-learn { background: linear-gradient(90deg, #2c5cc5, #6ea4ff); box-shadow: 0 0 14px rgba(77, 141, 255, 0.55); }
.pbar-four { background: linear-gradient(90deg, #1a9d64, #52ecab); box-shadow: 0 0 14px rgba(47, 212, 138, 0.5); }
.pbar-coin { background: linear-gradient(90deg, #d99e26, #ffd75e); box-shadow: 0 0 14px rgba(255, 201, 77, 0.5); }

/* 分层条：A 蓝 / B 绿 / C 橙 / D 紫（与师徒层级色同源，深空发光版） */
.pbar-la { background: linear-gradient(90deg, #2c5cc5, #6ea4ff); box-shadow: 0 0 14px rgba(77, 141, 255, 0.5); }
.pbar-lb { background: linear-gradient(90deg, #1a9d64, #52ecab); box-shadow: 0 0 14px rgba(47, 212, 138, 0.45); }
.pbar-lc { background: linear-gradient(90deg, #b4713a, #f0a56c); box-shadow: 0 0 14px rgba(240, 165, 108, 0.45); }
.pbar-ld { background: linear-gradient(90deg, #7d55b8, #b795ec); box-shadow: 0 0 14px rgba(183, 149, 236, 0.45); }

.pbar-val {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--p3d-ink);
}

/* ---- 师徒帮扶榜：金色光带 ---- */

.phelp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phelp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phelp-rank {
  flex: none;
  width: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--p3d-ink-faint);
}

.phelp-who {
  flex: none;
  width: 96px;
  min-width: 0;
}

.phelp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--p3d-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phelp-sub {
  font-size: 10.5px;
  color: var(--p3d-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phelp-track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(8, 13, 28, 0.8);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.phelp-bar {
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
  animation: pWiden 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.phelp-pos { background: linear-gradient(90deg, #b8860b, #ffd75e); box-shadow: 0 0 12px rgba(255, 215, 94, 0.55); }
.phelp-neg { background: linear-gradient(90deg, #a33a3a, #ff8a8a); box-shadow: 0 0 12px rgba(255, 122, 122, 0.45); }

.phelp-val {
  flex: none;
  min-width: 46px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.phelp-val-pos { color: var(--p3d-gold); text-shadow: 0 0 12px rgba(255, 215, 94, 0.45); }
.phelp-val-neg { color: var(--p3d-red); text-shadow: 0 0 12px rgba(255, 122, 122, 0.4); }

/* ---- 班级画像响应式 ---- */

@media (max-width: 1060px) {
  .portrait-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .p3d-stage {
    height: 420px;
  }

  .p3d-stats {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
  }

  .p3d-stat b {
    font-size: 18px;
  }

  .p3d-ctrl {
    gap: 6px;
  }

  .p3d-tab {
    padding: 5px 11px;
    font-size: 12px;
  }

  .p3d-hint {
    display: none;
  }
}

@media (max-width: 460px) {
  .portrait-scope {
    padding: 12px;
    border-radius: 20px;
  }

  .p3d-stage {
    height: 400px;
    min-height: 340px;
  }

  .p3d-stats {
    top: 10px;
    left: 10px;
    right: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .p3d-stat {
    padding: 7px 8px 8px;
    border-radius: 10px;
  }

  .p3d-stat small {
    font-size: 9.5px;
  }

  .p3d-stat b {
    font-size: 14px;
  }

  .p3d-ctrl {
    top: auto;
    bottom: 40px;
    right: 10px;
  }

  .p3d-legend {
    font-size: 10.5px;
    gap: 4px 10px;
  }

  .p3d-foot {
    bottom: 8px;
  }

  .pbar-label {
    width: 96px;
  }

  .phelp-who {
    width: 76px;
  }
}

/* 3D 引擎不可用：舞台退化为普通容器（统计 + 维度切换 + 降级提示），榜单面板顶上 */
.portrait-scope.no-3d .p3d-stage {
  height: auto;
  min-height: 0;
  padding: 14px;
  background: none;
  border: 1px dashed var(--p3d-line);
  box-shadow: none;
  cursor: default;
}

.portrait-scope.no-3d .p3d-host,
.portrait-scope.no-3d .p3d-foot,
.portrait-scope.no-3d .p3d-tip {
  display: none;
}

.portrait-scope.no-3d .p3d-stats {
  position: static;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: auto;
  margin-bottom: 12px;
}

.portrait-scope.no-3d .p3d-ctrl {
  position: static;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

@media (max-width: 820px) {
  .portrait-scope.no-3d .p3d-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .portrait-scope.no-3d .p3d-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---------------- 幸运星功能栏（原积分墙说明文字位置） ---------------- */

.lucky-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-pill);
  background: #e8edf6;
  box-shadow: var(--sh-in);
}

/* 金色星形印章（拟态凹陷质感，抽取时旋转） */
.lucky-seal {
  background: linear-gradient(142deg, #fdeeba, #f6dc96);
  color: #c08a1e;
  box-shadow:
    inset 3px 3px 6px #e2c377,
    inset -3px -3px 8px #fff7dd;
}

.lucky-seal.is-spinning {
  animation: lucky-spin 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes lucky-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.12);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.lucky-btn {
  min-width: 128px;
}

/* 抽取进行中：按钮转为暖色停止态 + 轻微脉冲 */
.lucky-btn.is-running {
  color: #fff;
  background: linear-gradient(135deg, #f0a24b, #e5823a);
  animation: lucky-pulse 0.9s ease-in-out infinite;
}

@keyframes lucky-pulse {
  0%,
  100% {
    box-shadow: 0 4px 10px #e5a26366;
  }
  50% {
    box-shadow: 0 4px 18px #e5823a99;
  }
}

/* ---------------- 幸运星发光框（覆盖在学生卡片上的游走光标） ---------------- */

.lucky-frame {
  position: absolute;
  z-index: 6;
  border-radius: var(--r-card);
  border: 2.5px solid #f2b53c;
  background: #f7c94814;
  box-shadow:
    0 0 0 2px #fff8,
    0 0 18px 4px #f4b93f7a,
    0 0 42px 10px #f6cd6b3d;
  pointer-events: none;
  /* 快速移动：90ms 过渡在 100ms 跳变间隔下形成连续飞行感 */
  transition:
    left 0.09s cubic-bezier(0.3, 0.6, 0.4, 1),
    top 0.09s cubic-bezier(0.3, 0.6, 0.4, 1),
    width 0.09s ease,
    height 0.09s ease,
    opacity 0.3s ease;
}

/* 停止后落定强调：放大呼吸一次再淡出（移除由 JS 完成） */
.lucky-frame.is-settled {
  border-color: #ffcf4d;
  animation: lucky-settle 1.4s ease forwards;
}

@keyframes lucky-settle {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  18% {
    transform: scale(1.06);
    opacity: 1;
  }
  45% {
    transform: scale(1.02);
    opacity: 0.92;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* 被抽中的学生卡片：金色高亮环（短暂保留） */
.is-lucky-hit {
  border-color: #f2b53c !important;
  box-shadow:
    0 0 0 2.5px #f2b53c,
    0 0 22px 4px #f4b93f5e !important;
}

/* ---------------- 幸运星结果弹窗 ---------------- */

.dlg-lucky {
  max-width: 430px;
}

.lucky-result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  border-radius: var(--r-card);
  background: #eef2fa;
  box-shadow: var(--sh-in);
  margin-bottom: 18px;
}

.lucky-seal-lg {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(142deg, #fdeeba, #f6dc96);
  color: #c08a1e;
  box-shadow:
    inset 3px 3px 7px #e2c377,
    inset -3px -3px 9px #fff7dd;
  flex: none;
}

.lucky-seal-lg svg {
  width: 26px;
  height: 26px;
}

.lucky-who {
  flex: 1;
  min-width: 0;
}

.lucky-name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink-strong);
}

.lucky-name.is-girl {
  color: #d76a94;
}

.lucky-meta {
  margin: 0;
  font-size: 12px;
  color: var(--ink-mute);
}

.lucky-meta.is-four {
  color: #3f9b6c;
}

.lucky-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
}

.lucky-score-label {
  font-size: 11px;
  color: var(--ink-mute);
}

.lucky-score b {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #5b87d6;
}

.lucky-score b.is-four {
  color: #3f9b6c;
}

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

.lucky-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}

.lucky-op-add {
  color: #fff;
  background: linear-gradient(135deg, #57b877, #3f9b6c);
}

.lucky-op-add:hover {
  filter: brightness(1.06);
}

.lucky-op-sub {
  color: #fff;
  background: linear-gradient(135deg, #e07862, #cf5b45);
}

.lucky-op-sub:hover {
  filter: brightness(1.06);
}

.lucky-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
}

/* 窄屏：功能栏占满整行，弹窗结果纵向压缩 */
@media (max-width: 460px) {
  .lucky-bar {
    width: 100%;
    justify-content: center;
  }

  .lucky-result {
    flex-wrap: wrap;
  }

  .lucky-name {
    font-size: 19px;
  }
}