/* =========================================================
   全局样式(备案过渡期:中性绿,品牌色由 brand.config.js 注入)
   ========================================================= */

:root {
  /* 默认色 = 备案期中性绿;brand.config.js 会在运行时覆盖 */
  --color-primary:       #07C160;
  --color-primary-dark:  #06AD56;
  --color-accent:        #F4D2B2;  /* 备案后可用于 logo 字色 */

  --color-bg:    #F7F8FA;
  --color-card:  #FFFFFF;

  /* 语义色(保持通用,不随品牌变) */
  --color-safe:       #07C160;
  --color-warning:    #FF976A;
  --color-urgent:     #FA5151;
  --color-bg-safe:    #E8F8EC;
  --color-bg-warning: #FFF3EB;
  --color-bg-urgent:  #FFEBEB;

  --color-text:            #191919;
  --color-text-secondary:  #888888;
  --color-text-tertiary:   #B2B2B2;
  --color-border:          #EEEEEE;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  --radius-card: 12px;
  --radius-btn:  8px;
}

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

:focus-visible {
  outline: 3px solid rgba(43, 58, 94, 0.38);
  outline-offset: 3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(43, 58, 94, 0.18);
}

html, body {
  margin: 0; padding: 0; width: 100%;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Helvetica Neue", Helvetica, "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 24px 20px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
/* 含底部 Tab Bar 的页面给 tab bar 让位 */
.page.has-tabbar {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.hidden { display: none !important; }

/* =========================================================
   通用组件
   ========================================================= */
.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
  box-shadow: 0 6px 16px rgba(43, 58, 94, 0.18);
}
.btn:hover { box-shadow: 0 8px 20px rgba(43, 58, 94, 0.24); }
.btn:active { background: var(--color-primary-dark); transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.btn-urgent { background: var(--color-urgent); }
.btn-urgent:active { background: #D84040; }

/* 按钮内 spinner */
.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 文字链接式按钮 */
.link-btn {
  background: none; border: none;
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
}
.link-btn:active { color: var(--color-primary); }

/* =========================================================
   登录页 · 高级简约版
   ========================================================= */
.login-header {
  text-align: center;
  padding: 4px 0 32px;
}
.login-logo {
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  background: var(--color-primary);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  box-shadow:
    0 10px 24px rgba(43, 58, 94, 0.14),
    0 2px 8px rgba(43, 58, 94, 0.08);
  overflow: hidden;
}
/* 真 logo 模式:容器只做圆角裁剪,不加底色/阴影叠色 */
.login-logo.login-logo--image { background: transparent; }

.login-title {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  color: #191919;
}
.login-en-title {
  margin: 8px 0 0;
  color: #C3A98F;
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.login-subtitle {
  color: #7F8592;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 8px 0 0;
}

/* 过审用合规说明:克制的小灰字 */
.member-only-notice {
  max-width: 320px;
  margin: 10px auto 0;
  color: #A0A4AE;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0;
}

.login-card {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 18px 16px 14px;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
}

.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #5E6472;
  margin-bottom: 10px;
}
.form-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #F7F8FB;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.form-input:focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.form-input::placeholder {
  color: #7F8592;
}

/* 记住学号的小提示 */
.remembered-hint {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.remembered-hint .link-btn { font-size: 12px; padding: 2px 4px; }

/* 行内错误条(替代第一阶段居中红字) */
.inline-error {
  min-height: 24px;
  margin: 8px 0 14px;
  color: #FF4D4F;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
}

.login-footer {
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 12px;
  margin-top: 20px;
}
.login-footer .icp-info { margin-top: 6px; }
.login-footer a {
  color: var(--color-text-tertiary);
  text-decoration: none;
}

/* =========================================================
   学生页 - Topbar
   ========================================================= */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px 16px;
}
.topbar-greeting {
  min-width: 0;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
}
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.topbar-icon {
  background: none; border: none;
  min-width: 40px; height: 36px;
  padding: 0 10px;
  border-radius: 18px;
  font-size: 19px;
  font-weight: 400;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.topbar-icon:active { background: #EEE; }
.topbar-icon.spinning { animation: spin 0.7s linear infinite; }

.topbar-icon.oj-entry-btn {
  position: relative;
  isolation: isolate;
  gap: 4px;
  min-width: 72px;
  height: 38px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background:
    linear-gradient(135deg, #FF6B6B 0%, #FFD93D 46%, #38BDF8 100%);
  color: #fff;
  box-shadow:
    0 10px 22px rgba(255, 107, 107, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(44, 47, 72, 0.25);
  animation: ojEntryPulse 2.2s ease-in-out infinite;
}

.topbar-icon.oj-entry-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -36%;
  left: -22%;
  width: 42%;
  height: 172%;
  background: rgba(255, 255, 255, 0.34);
  transform: rotate(18deg);
  animation: ojEntryShine 3.4s ease-in-out infinite;
}

.oj-entry-icon {
  display: inline-flex;
  transform: translateY(-1px);
  font-size: 18px;
}

.oj-entry-label {
  display: inline-flex;
  align-items: center;
  min-width: 30px;
}

.topbar-icon.oj-entry-btn:active {
  background: linear-gradient(135deg, #F05252 0%, #FBBF24 46%, #0EA5E9 100%);
  transform: translateY(1px) scale(0.98);
  box-shadow:
    0 5px 12px rgba(255, 107, 107, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

@keyframes ojEntryPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      0 10px 22px rgba(255, 107, 107, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  50% {
    transform: translateY(-1px);
    box-shadow:
      0 13px 26px rgba(56, 189, 248, 0.27),
      inset 0 1px 0 rgba(255, 255, 255, 0.62);
  }
}

@keyframes ojEntryShine {
  0%, 55% {
    opacity: 0;
    transform: translateX(-20px) rotate(18deg);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(116px) rotate(18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-icon.oj-entry-btn,
  .topbar-icon.oj-entry-btn::before {
    animation: none;
  }
}

.topbar-logout {
  color: var(--color-text-secondary);
  font-size: 19px;
  background: none; border: none; cursor: pointer;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 18px;
}
.topbar-logout:active { color: var(--color-text); background: #EEE; }

/* =========================================================
   课时概览
   ========================================================= */
.overview-card { text-align: center; padding: 24px 16px; position: relative; }

/* 数据截至提示:右上角小徽章,不抢视觉 */
.data-cutoff {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  margin-bottom: 10px;
  background: #F0F5FF;
  color: #4A6FB4;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1.4;
}
.data-cutoff-icon { font-size: 12px; }

.overview-label { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px; }
.overview-number { font-size: 48px; font-weight: bold; line-height: 1.1; margin: 4px 0; }
.overview-meta { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 16px; }

.status-bar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  font-size: 15px; font-weight: 500;
  margin-bottom: 16px;
}
.status-bar[data-level="safe"]    { background: var(--color-bg-safe);    color: var(--color-safe); }
.status-bar[data-level="warning"] { background: var(--color-bg-warning); color: var(--color-warning); }
.status-bar[data-level="urgent"]  {
  background: var(--color-bg-urgent); color: var(--color-urgent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }

.overview-status {
  padding: 12px;
  background: #FAFAFA;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
}
.overview-status-label { color: var(--color-text-secondary); margin-right: 6px; }

/* =========================================================
   课程信息
   ========================================================= */
.info-card .info-row {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
}
.info-card .info-row:last-child { border-bottom: none; }
.info-label { flex: 0 0 96px; color: var(--color-text-secondary); }
.info-value { flex: 1; word-break: break-all; }
.info-value.empty { color: var(--color-text-tertiary); }

/* =========================================================
   续费提醒
   ========================================================= */
.renew-card { text-align: center; }
.renew-card[data-level="warning"] { border: 1px solid var(--color-warning); }
.renew-card[data-level="urgent"]  { border: 1px solid var(--color-urgent);  }
.renew-title { font-size: 17px; font-weight: bold; margin-bottom: 6px; }
.renew-desc  { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 16px; }

/* =========================================================
   第三阶段扩展卡片
   ========================================================= */
.extension-card { padding: 16px; }
.extension-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.extension-title {
  font-size: 17px;
  font-weight: bold;
}
.extension-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pet-chip-bg, #E7F0FF);
  color: var(--pet-chip-text, #234B88);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--pet-chip-border, transparent);
}
.notice-list {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.notice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
}
.notice-item:last-child { border-bottom: none; }
.notice-main {
  min-width: 0;
  flex: 1;
}
.notice-title {
  font-size: 15px;
  color: var(--color-text);
  word-break: break-word;
}
.notice-time {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.notice-state {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}
.notice-state.is-read {
  background: #F2F3F5;
  color: var(--color-text-tertiary);
}
.notice-state.is-unread {
  background: #FFF3EB;
  color: #D56B2A;
}
.reward-points {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.reward-points-value {
  font-size: 30px;
  line-height: 1.1;
  font-weight: bold;
  color: var(--color-primary-dark);
}
.reward-points-label {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.reward-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reward-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #FAFAFA;
  border: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text);
}
.reward-badge-icon { line-height: 1; }
.reward-empty {
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: #FAFAFA;
}

.points-my-card {
  cursor: pointer;
  border: 1px solid #E7ECF5;
}
.points-my-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.points-my-title {
  font-size: 14px;
  color: var(--color-text-secondary);
}
.points-my-rank {
  font-size: 13px;
  color: #5A6580;
}
.points-my-value {
  margin-top: 6px;
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  color: #2B3A5E;
}
.points-my-tip {
  margin-top: 8px;
  font-size: 13px;
  color: #5A6580;
}
.points-badges-wrap {
  margin-top: 12px;
  border-top: 1px dashed #E8EDF7;
  padding-top: 10px;
}
.points-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.points-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #2B3A5E;
  background: #F4F7FF;
}
.points-badge-icon { line-height: 1; }
.points-badges-empty {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.points-ranking-card { border: 1px solid #E7ECF5; }
.points-competition-card {
  border: 1px solid #DDE8F8;
  background: #FBFCFF;
}
.points-rank-rule-note {
  margin-top: -2px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.points-rank-list {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.points-rank-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: #F7F9FD;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.points-rank-head div:last-child { text-align: right; }
.points-rank-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.points-rank-row:last-child { border-bottom: none; }
.points-rank-row.is-me {
  background: #2B3A5E;
  color: #F5D5B0;
}
.points-rank-row.is-me .points-rank-name,
.points-rank-row.is-me .points-rank-class,
.points-rank-row.is-me .points-rank-score { color: #F5D5B0; }
.points-rank-order {
  font-weight: 600;
  color: #4A6FB4;
}
.points-rank-row.is-me .points-rank-order { color: #F5D5B0; }
.points-rank-name,
.points-rank-class {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.points-rank-class {
  color: var(--color-text-secondary);
}
.points-rank-score {
  font-weight: 700;
  color: #2B3A5E;
  text-align: right;
  white-space: nowrap;
}
.points-rank-score-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.points-rank-row.is-me .points-rank-score-unit {
  color: #F5D5B0;
  opacity: 0.9;
}
.points-rank-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 8px 0;
}
.points-rank-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.points-rank-time {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.points-refresh-btn {
  border: none;
  background: #F0F5FF;
  color: #4A6FB4;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
}
.points-refresh-btn:active { background: #E6EEFF; }

.points-rules-card { border: 1px solid #E7ECF5; }
.points-rules-toggle {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  color: #2B3A5E;
  cursor: pointer;
}
.points-rules-arrow {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.points-rules-body { margin-top: 12px; }
.points-rule-item + .points-rule-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #F0F2F7;
}
.points-rule-name {
  font-size: 14px;
  color: #2B3A5E;
  font-weight: 600;
}
.points-rule-desc {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.points-rules-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.points-rule-min {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FFF8EE;
  color: #A96718;
  font-size: 13px;
}
.points-competition-rules {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F7FAFF;
  border: 1px solid #E4ECF8;
}
.points-competition-rule-title {
  font-size: 13px;
  font-weight: 700;
  color: #2B3A5E;
  margin-bottom: 6px;
}
.points-competition-rule {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.points-competition-rule + .points-competition-rule {
  margin-top: 4px;
}

.pet-card {
  --pet-stage-scale: 1;
  --pet-panel-from: #FFF7ED;
  --pet-panel-to: #FFFFFF;
  --pet-panel-border: #F3D6B2;
  --pet-panel-shadow: rgba(244, 122, 44, 0.12);
  --pet-art-top: #FFFFFF;
  --pet-art-bottom: #FFF1DE;
  --pet-art-glow: rgba(255, 247, 234, 0.98);
  --pet-art-accent: rgba(245, 168, 79, 0.22);
  --pet-state-bg: #FFE8C6;
  --pet-state-text: #A35A13;
  --pet-chip-bg: #FFF8EE;
  --pet-chip-text: #8A4A16;
  --pet-chip-border: #F2D8B8;
  --pet-tip-bg: #FFF8EE;
  --pet-tip-text: #8A4A16;
  --pet-progress-track: #F4E0C4;
  --pet-progress-from: #FFB34E;
  --pet-progress-to: #F47A2C;
  --pet-button-from: #FFB34E;
  --pet-button-to: #F47A2C;
  --pet-style-border: #F0D5B5;
  --pet-style-active-border: #F47A2C;
  --pet-style-active-bg: #FFF3E1;
  --pet-stage-bg: #F7F9FD;
  --pet-stage-border: #E7ECF5;
  --pet-stage-active-bg: #FFF8EE;
  --pet-stage-active-border: #F4C48D;
  --pet-stage-text: #6B7898;
  --pet-stage-active-text: #8A4A16;
  border: 1px solid var(--pet-panel-border);
  background: linear-gradient(180deg, var(--pet-panel-from) 0%, var(--pet-panel-to) 62%);
  box-shadow: 0 10px 24px var(--pet-panel-shadow);
}
.pet-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.pet-art-wrap {
  position: relative;
  width: min(280px, 76vw);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 32%, var(--pet-art-top) 0%, var(--pet-art-glow) 42%, var(--pet-art-bottom) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  justify-self: center;
  margin: 0 auto;
  box-shadow: inset 0 0 0 1px var(--pet-chip-border), 0 12px 24px var(--pet-panel-shadow);
  border: 0;
  padding: 0;
  cursor: pointer;
  isolation: isolate;
  touch-action: none;
  user-select: none;
}
.pet-art-wrap:active {
  transform: translateY(1px) scale(0.99);
}
.pet-art-wrap:focus-visible {
  outline: 3px solid var(--pet-style-active-border);
  outline-offset: 3px;
}
.pet-art-wrap::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.8) 0%, transparent 68%);
  opacity: 0.9;
  pointer-events: none;
}
.pet-art-wrap::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px;
  height: 54px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, var(--pet-art-accent) 0%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}
.pet-aura-ring {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0deg, var(--pet-art-accent) 58deg, transparent 116deg, rgba(255,255,255,0.72) 172deg, transparent 230deg, var(--pet-art-accent) 292deg, transparent 360deg);
  opacity: 0.34;
  filter: blur(1px);
  animation: pet-aura-spin 9s linear infinite;
  z-index: 0;
  pointer-events: none;
}
.pet-stage-grow .pet-aura-ring { opacity: 0.42; animation-duration: 7.8s; }
.pet-stage-steady .pet-aura-ring { opacity: 0.52; animation-duration: 6.8s; }
.pet-stage-graduate .pet-aura-ring { opacity: 0.64; animation-duration: 5.8s; }
.pet-stage-badge,
.pet-interact-hint {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: 0 8px 16px rgba(56, 44, 80, 0.10);
  backdrop-filter: blur(8px);
}
.pet-stage-badge {
  left: 12px;
  top: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--pet-state-text);
  background: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 800;
}
.pet-interact-hint {
  right: 12px;
  bottom: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--pet-chip-text);
  background: rgba(255,255,255,0.64);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.86;
}
.pet-growth-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.pet-growth-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--pet-progress-from);
  box-shadow: 0 0 10px var(--pet-progress-to), 0 0 18px rgba(255,255,255,0.72);
  opacity: 0;
  animation: pet-particle-drift 3.6s ease-in-out infinite;
}
.pet-stage-steady .pet-growth-particle,
.pet-stage-graduate .pet-growth-particle {
  border-radius: 30% 70% 45% 55%;
}
.pet-celebrate-pop {
  position: absolute;
  left: 50%;
  top: 16%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, var(--pet-button-from), var(--pet-button-to));
  box-shadow: 0 10px 22px var(--pet-panel-shadow);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  animation: pet-celebrate-pop 1.4s ease-out both;
  pointer-events: none;
}
.pet-art {
  width: 122%;
  height: 122%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}
.pet-art-svg,
.pet-art-image {
  transform-origin: 50% 58%;
  animation: pet-float 4.6s ease-in-out infinite;
}
.pet-art-image {
  filter: drop-shadow(0 14px 14px rgba(82, 60, 42, 0.16));
}
.pet-art-preview {
  width: 142%;
  height: 142%;
  animation-duration: 5.2s;
}
.pet-art-restore {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pet-art-restore .pet-art-image {
  flex: 0 0 auto;
}
.pet-3d-stage {
  position: relative;
  z-index: 1;
  width: 126%;
  height: 126%;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pet-3d-stage.is-dragging {
  cursor: grabbing;
}
.pet-3d-canvas,
.pet-3d-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pet-3d-canvas {
  display: none;
  filter: drop-shadow(0 18px 22px rgba(82, 60, 42, 0.2));
  touch-action: none;
}
.pet-3d-stage.is-ready .pet-3d-canvas {
  display: block;
}
.pet-3d-stage.is-ready .pet-3d-fallback {
  display: none;
}
.pet-3d-stage.is-fallback .pet-3d-canvas {
  display: none;
}
.pet-3d-stage.is-fallback .pet-3d-fallback {
  display: block;
}
@keyframes pet-float {
  0%, 100% { transform: translateY(0) scale(var(--pet-stage-scale)); }
  50% { transform: translateY(-5px) scale(calc(var(--pet-stage-scale) * 1.018)); }
}
@keyframes pet-aura-spin {
  to { transform: rotate(360deg); }
}
@keyframes pet-particle-drift {
  0%, 100% { transform: translate3d(0, 8px, 0) scale(0.65); opacity: 0; }
  35% { opacity: 0.72; }
  70% { transform: translate3d(5px, -12px, 0) scale(1); opacity: 0.18; }
}
@keyframes pet-pat-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.045) rotate(-1.4deg); }
  70% { transform: scale(0.99) rotate(1deg); }
  100% { transform: scale(1); }
}
@keyframes pet-celebrate-pop {
  0% { transform: translate(-50%, 12px) scale(0.72); opacity: 0; }
  18% { transform: translate(-50%, 0) scale(1.08); opacity: 1; }
  70% { transform: translate(-50%, -18px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -34px) scale(0.9); opacity: 0; }
}
.pet-card.is-patted .pet-art-main {
  animation: pet-pat-bounce 0.72s ease both;
}
.pet-card.is-celebrating .pet-art-wrap {
  box-shadow: inset 0 0 0 1px var(--pet-chip-border), 0 18px 32px var(--pet-panel-shadow), 0 0 0 7px var(--pet-art-accent);
}
.pet-card.is-celebrating .pet-growth-particle {
  animation-duration: 1.25s;
}
.pet-main {
  min-width: 0;
  width: 100%;
}
.pet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pet-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--pet-chip-text);
}
.pet-state {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pet-state-bg);
  color: var(--pet-state-text);
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.pet-subtitle {
  margin-top: 3px;
  font-size: 13px;
  color: var(--pet-state-text);
}
.pet-interaction-line {
  margin-top: 7px;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--pet-state-text);
  background: rgba(255,255,255,0.58);
  border: 1px solid var(--pet-chip-border);
  font-size: 12px;
  line-height: 1.45;
}
.pet-subchip {
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--pet-chip-bg);
  color: var(--pet-chip-text);
  font-size: 12px;
  line-height: 1.2;
  border: 1px solid var(--pet-chip-border);
}
.pet-evolution-meter {
  margin-top: 10px;
  padding: 8px 9px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.74), var(--pet-chip-bg));
  border: 1px solid var(--pet-chip-border);
}
.pet-evolution-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--pet-state-text);
  font-size: 12px;
}
.pet-evolution-top strong {
  color: var(--pet-chip-text);
}
.pet-evolution-track {
  margin-top: 6px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pet-progress-track);
}
.pet-evolution-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pet-progress-from), var(--pet-progress-to));
  box-shadow: 0 0 12px var(--pet-progress-from);
}
.pet-summary {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pet-battle-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.pet-power-card,
.pet-stat-pill,
.pet-boost-item,
.pet-skill-item,
.pet-rank-row,
.pet-battle-round {
  border: 1px solid var(--pet-chip-border);
  background: rgba(255,255,255,0.68);
  color: var(--pet-chip-text);
}
.pet-power-card {
  grid-row: span 2;
  border-radius: 13px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pet-power-card span,
.pet-stat-pill span,
.pet-boost-item span {
  font-size: 11px;
  color: var(--pet-state-text);
}
.pet-power-card strong {
  margin-top: 4px;
  font-size: 22px;
  line-height: 1;
}
.pet-stat-pill {
  min-width: 0;
  border-radius: 999px;
  padding: 7px 9px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}
.pet-stat-pill strong,
.pet-boost-item strong {
  font-size: 12px;
}
.pet-progress-meta {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #6B7898;
}
.pet-progress-bar {
  margin-top: 7px;
  height: 10px;
  border-radius: 999px;
  background: var(--pet-progress-track);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);
}
.pet-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pet-progress-from), var(--pet-progress-to));
}
.pet-chip-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pet-chip {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--pet-chip-bg);
  color: var(--pet-chip-text);
  font-size: 12px;
  border: 1px solid var(--pet-chip-border);
}
.pet-tip {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--pet-tip-bg);
  color: var(--pet-tip-text);
  font-size: 13px;
  border: 1px solid var(--pet-chip-border);
}
.pet-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pet-feed-btn {
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  background: linear-gradient(180deg, var(--pet-button-from), var(--pet-button-to));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px var(--pet-panel-shadow);
}
.pet-feed-btn:active {
  transform: translateY(1px);
}
.pet-reset-btn {
  padding: 4px 0;
  color: var(--pet-state-text);
}
.pet-footnote {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.pet-style-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--pet-chip-border);
}
.pet-boost-panel {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed var(--pet-chip-border);
}
.pet-section-title {
  margin: 0 0 9px;
  color: var(--pet-chip-text);
  font-size: 14px;
  font-weight: 800;
}
.pet-boost-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.pet-boost-item {
  min-width: 0;
  border-radius: 11px;
  padding: 8px 7px;
  display: grid;
  gap: 3px;
}
.pet-style-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pet-style-title {
  color: var(--pet-chip-text);
  font-size: 14px;
  font-weight: 800;
}
.pet-style-current {
  flex: 1;
  color: var(--pet-state-text);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}
.pet-style-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pet-style-option {
  min-width: 0;
  min-height: 122px;
  padding: 8px 6px 9px;
  border: 1px solid var(--pet-style-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--pet-panel-to) 100%);
  color: var(--pet-chip-text);
  cursor: pointer;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 5px;
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s, background 0.16s;
}
.pet-style-option:active {
  transform: translateY(1px) scale(0.99);
}
.pet-style-option.is-active {
  border-color: var(--pet-style-active-border);
  background: linear-gradient(180deg, var(--pet-style-active-bg) 0%, #FFFFFF 100%);
  box-shadow: 0 8px 20px var(--pet-panel-shadow), inset 0 0 0 1px rgba(255,255,255,0.52);
}
.pet-style-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, var(--pet-art-top) 0%, var(--pet-art-glow) 54%, var(--pet-art-bottom) 100%);
}
.pet-style-copy {
  display: grid;
  gap: 1px;
  text-align: center;
  min-width: 0;
}
.pet-style-name {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-style-meta {
  color: var(--pet-state-text);
  font-size: 10px;
  line-height: 1.25;
}
.pet-perks-card {
  border: 1px solid var(--pet-panel-border);
  background: linear-gradient(180deg, var(--pet-panel-from) 0%, #FFFFFF 100%);
}
.pet-skills-card,
.pet-battle-card {
  border: 1px solid var(--pet-panel-border);
  background: linear-gradient(180deg, var(--pet-panel-from) 0%, #FFFFFF 100%);
}
.pet-skill-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pet-skill-item {
  border-radius: 11px;
  padding: 10px;
}
.pet-skill-item.is-locked {
  opacity: 0.58;
  filter: grayscale(0.25);
}
.pet-skill-name {
  font-size: 13px;
  font-weight: 800;
}
.pet-skill-meta {
  margin-top: 3px;
  color: var(--pet-state-text);
  font-size: 12px;
  line-height: 1.35;
}
.pet-battle-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pet-battle-btn {
  min-width: 104px;
}
.pet-ranked-btn {
  color: var(--pet-state-text);
}
.pet-rank-summary {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,255,255,0.68);
  border: 1px solid var(--pet-chip-border);
  color: var(--pet-chip-text);
}
.pet-rank-summary strong {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
}
.pet-rank-summary span {
  flex: 0 0 auto;
  color: var(--pet-state-text);
  font-size: 12px;
}
.pet-battle-rule-note {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--pet-chip-bg);
  border: 1px dashed var(--pet-chip-border);
  color: var(--pet-state-text);
  font-size: 12px;
  line-height: 1.45;
}
.pet-battle-empty {
  margin-top: 10px;
  padding: 10px;
  border-radius: 11px;
  background: var(--pet-chip-bg);
  border: 1px solid var(--pet-chip-border);
  color: var(--pet-state-text);
  font-size: 12px;
  line-height: 1.5;
}
.pet-battle-result {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.68);
  border: 1px solid var(--pet-chip-border);
}
.pet-battle-result-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  color: var(--pet-chip-text);
}
.pet-battle-result-head span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--pet-state-text);
  text-align: right;
}
.pet-battle-rounds,
.pet-rank-list {
  margin-top: 9px;
  display: grid;
  gap: 6px;
}
.pet-battle-round,
.pet-rank-row {
  border-radius: 999px;
  padding: 7px 9px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.pet-rank-row.is-me {
  background: var(--pet-style-active-bg);
  border-color: var(--pet-style-active-border);
}
.pet-rank-row.is-extra-me {
  border-style: dashed;
}
.pet-rank-row span,
.pet-battle-round span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-rank-row span small {
  display: block;
  margin-top: 2px;
  color: var(--pet-state-text);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pet-rank-row strong,
.pet-battle-round strong {
  flex: 0 0 auto;
}
.pet-perks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pet-perk-item {
  padding: 10px;
  border-radius: 10px;
  background: #FAFAFA;
  border: 1px solid #F0F2F7;
  font-size: 13px;
  color: #5A6580;
}
.pet-perk-item.is-highlight {
  background: var(--pet-chip-bg);
  border-color: var(--pet-chip-border);
  color: var(--pet-chip-text);
  font-weight: 700;
}
.pet-perks-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.pet-stage-track { margin-top: 12px; }
.pet-stage-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pet-stage-item {
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
  background: var(--pet-stage-bg);
  border: 1px solid var(--pet-stage-border);
}
.pet-stage-item.is-active {
  background: var(--pet-stage-active-bg);
  border-color: var(--pet-stage-active-border);
  box-shadow: inset 0 0 0 1px var(--pet-stage-active-border);
}
.pet-stage-icon { font-size: 18px; line-height: 1; }
.pet-stage-name {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pet-stage-text);
}
.pet-stage-item.is-active .pet-stage-name {
  color: var(--pet-stage-active-text);
}
.pet-stage-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-secondary);
}
.pet-perks-foot {
  margin-top: 10px;
  font-size: 12px;
  color: #6B7898;
}
.pet-guide-card {
  border: 1px solid var(--pet-panel-border);
  background: linear-gradient(180deg, var(--pet-panel-from) 0%, #FFFFFF 100%);
}
.pet-attributes-card {
  border: 1px solid var(--pet-panel-border);
  background: linear-gradient(180deg, var(--pet-panel-from) 0%, #FFFFFF 100%);
}
.pet-attributes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.pet-attr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  background: var(--pet-chip-bg);
  border: 1px solid var(--pet-chip-border);
}
.pet-attr-icon {
  font-size: 20px;
  line-height: 1;
}
.pet-attr-name {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: center;
}
.pet-attr-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--pet-chip-text);
  text-align: center;
}
.pet-attr-divider {
  height: 1px;
  background: var(--pet-panel-border);
  margin: 8px 0;
}
.pet-attr-info {
  display: grid;
  gap: 8px;
}
.pet-attr-row {
  padding: 8px;
  border-radius: 8px;
  background: var(--pet-state-bg);
}
.pet-attr-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pet-state-text);
  display: block;
  margin-bottom: 3px;
}
.pet-attr-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  display: block;
}
.pet-guide-list {
  display: grid;
  gap: 8px;
}
.pet-guide-list div {
  padding: 10px 12px;
  border-radius: 10px;
  background: #FAFAFA;
  border: 1px solid #F0F2F7;
  font-size: 13px;
  line-height: 1.5;
  color: #5A6580;
}
.points-shop-pet-banner {
  margin: -2px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pet-chip-bg);
  border: 1px solid var(--pet-chip-border);
}
.points-shop-pet-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pet-chip-text);
}
.points-shop-pet-desc {
  margin-top: 3px;
  font-size: 12px;
  color: var(--pet-state-text);
}

.points-shop-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #E7ECF5;
}
.points-shop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.points-shop-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 8px 0;
}
.points-reward-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
}
.points-reward-cover {
  width: 64px;
  height: 64px;
}
.points-reward-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #E6EBF5;
}
.points-reward-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-tertiary);
  background: #F6F8FC;
}
.points-reward-main {
  min-width: 0;
}
.points-reward-name {
  font-size: 14px;
  font-weight: 600;
  color: #2B3A5E;
}
.points-reward-desc {
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.points-reward-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #6B7898;
}
.points-redeem-btn {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  color: #fff;
  background: #2B3A5E;
  cursor: pointer;
}
.points-redeem-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.points-record-preview {
  margin-top: 12px;
  border-top: 1px dashed #E5E9F3;
  padding-top: 10px;
}
.points-record-preview-empty {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.points-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
}
.points-record-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #2B3A5E;
}
.points-record-status {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  background: #6B7898;
}
.points-record-status.is-pending { background: #F59E0B; }
.points-record-status.is-done { background: #16A34A; }
.points-record-status.is-reject { background: #DC2626; }
.points-record-more {
  margin-top: 10px;
  border: none;
  background: transparent;
  color: #4A6FB4;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
}
.points-shop-mask {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.56);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 14px;
  font-weight: 600;
}

.points-modal-body { text-align: left; }
.points-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #2B3A5E;
}
.points-modal-desc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.points-modal-cost {
  margin-top: 10px;
  color: #A96718;
  font-size: 13px;
  background: #FFF8EE;
  border-radius: 8px;
  padding: 8px 10px;
}
.points-records-modal { max-width: 420px; }
.points-records-body {
  max-height: 360px;
  overflow-y: auto;
  text-align: left;
}
.points-records-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 14px 0;
}
.points-records-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
}
.points-records-item:last-child { border-bottom: none; }
.points-records-main { min-width: 0; flex: 1; }
.points-records-name {
  font-size: 14px;
  color: #2B3A5E;
  font-weight: 600;
}
.points-records-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.points-records-note {
  margin-top: 4px;
  font-size: 12px;
  color: #8B3A3A;
}
.points-records-status {
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
}
.points-records-status.is-pending { background: #F59E0B; }
.points-records-status.is-done { background: #16A34A; }
.points-records-status.is-reject { background: #DC2626; }
.homework-alert {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--color-bg-urgent);
  color: var(--color-urgent);
  border-radius: 8px;
  font-size: 13px;
}
.homework-ok {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--color-bg-safe);
  color: var(--color-safe);
  border-radius: 8px;
  font-size: 13px;
}
.homework-list {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.homework-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
}
.homework-item:last-child { border-bottom: none; }
.homework-main {
  min-width: 0;
  flex: 1;
}
.homework-title {
  font-size: 15px;
  color: var(--color-text);
  word-break: break-word;
}
.homework-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.homework-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}
.homework-status.is-submitted {
  background: var(--color-bg-safe);
  color: var(--color-safe);
}
.homework-status.is-pending {
  background: var(--color-bg-urgent);
  color: var(--color-urgent);
}
.homework-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.homework-submit-btn {
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  background: var(--color-primary);
  cursor: pointer;
}
.homework-submit-btn:active { background: var(--color-primary-dark); }
.homework-submit-btn.is-resubmit {
  background: #F0F5FF;
  color: #4A6FB4;
}
.homework-submit-btn.is-resubmit:active {
  background: #E6EEFF;
}
.timeline { position: relative; }
.timeline-item {
  position: relative;
  display: flex;
  gap: 10px;
  padding-bottom: 14px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: -2px;
  width: 1px;
  background: var(--color-border);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 193, 96, 0.12);
}
.timeline-content {
  min-width: 0;
  flex: 1;
}
.timeline-date {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}
.timeline-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  word-break: break-word;
}
.timeline-feedback {
  margin-top: 5px;
  padding: 9px 10px;
  background: #FAFAFA;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}

/* =========================================================
   骨架屏 / 淡入
   ========================================================= */
.skeleton {
  background: linear-gradient(90deg, #EEE 25%, #F5F5F5 37%, #EEE 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes skeleton-loading {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-line { height: 16px; margin-bottom: 10px; }
.skeleton-line.short { width: 40%; }
.skeleton-line.mid   { width: 60%; }
.skeleton-line.long  { width: 80%; }
.skeleton-line.big   { height: 48px; width: 50%; margin: 12px auto; }

.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Toast / Modal
   ========================================================= */
.toast {
  position: fixed; top: 20%; left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 12px 20px;
  background: rgba(0,0,0,0.8);
  color: #fff; font-size: 14px;
  border-radius: 8px;
  z-index: 999;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

.modal-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 998;
  padding: 24px;
}
.modal {
  width: 100%; max-width: 340px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
}
.modal-header {
  padding: 20px 16px 4px;
  font-size: 17px; font-weight: bold;
}
.modal-body {
  padding: 8px 16px 20px;
  color: var(--color-text-secondary);
  font-size: 14px; line-height: 1.6;
}
.modal-footer { border-top: 1px solid var(--color-border); }
.modal-btn {
  flex: 1;
  height: 48px;
  background: none; border: none;
  color: var(--color-primary);
  font-size: 16px;
  cursor: pointer;
}
.modal-btn:active { background: #F5F5F5; }
.modal-btn-primary { font-weight: bold; border-left: 1px solid var(--color-border); }

/* =========================================================
   联系老师 Modal 内部
   ========================================================= */
.contact-block { margin-bottom: 14px; }
.contact-block:last-child { margin-bottom: 0; }
.contact-label {
  font-size: 12px; color: var(--color-text-tertiary);
  margin-bottom: 4px;
}
.contact-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: #F7F8FA;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 14px;
}
.contact-row .action-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.contact-qr {
  display: block;
  margin: 0 auto 10px;
  width: 160px; height: 160px;
  object-fit: contain;
  border-radius: 8px;
  background: #F7F8FA;
}
.contact-qr-urgent {
  width: 200px;
  height: 200px;
  border: 2px solid var(--color-urgent);
  box-shadow: 0 6px 18px rgba(250, 81, 81, 0.22);
}
.contact-urgent-tip {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-bg-urgent);
  color: var(--color-urgent);
  font-size: 13px;
  text-align: left;
  animation: pulse 1.6s ease-in-out infinite;
}
.contact-placeholder {
  padding: 16px;
  background: #F7F8FA;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.contact-worktime {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #EEE;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* =========================================================
   意见反馈 Modal 内部
   ========================================================= */
.feedback-textarea {
  height: auto; min-height: 96px;
  padding: 10px 12px;
  background: #F7F8FA;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.feedback-hint {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.feedback-attach {
  display: flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.feedback-attach input { margin: 0; }

/* =========================================================
   作业提交 Modal 内部
   ========================================================= */
.homework-modal-body { text-align: left; }
.homework-submit-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  word-break: break-word;
}
.homework-submit-due {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-bottom: 10px;
}
.homework-submit-count {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: right;
}

/* =========================================================
   页脚操作区
   ========================================================= */
.page-footer {
  margin-top: 24px;
  padding: 12px 0 24px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 12px;
}
.footer-actions {
  display: flex; justify-content: center; align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.footer-divider { color: var(--color-border); }
.footer-copyright { margin-bottom: 4px; }
.footer-icp a {
  color: var(--color-text-tertiary);
  text-decoration: none;
}

/* =========================================================
   Tab 分区布局(第四阶段)
   ========================================================= */
.tab-panel { display: block; }
.tab-header {
  padding: 4px 4px 14px;
}
.tab-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.tab-header-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

/* =========================================================
   空态卡片
   ========================================================= */
.tab-empty-card {
  text-align: center;
  padding: 36px 20px;
}
.tab-empty-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 12px;
}
.tab-empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
}
.tab-empty-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* =========================================================
   课堂笔记卡片
   ========================================================= */
.notes-card {
  padding: 14px 14px 12px;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.notes-card.is-expanded {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-color: #E8EEF8;
}
.notes-group { margin-bottom: 10px; }
.notes-group-title {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0 2px 8px;
}
.notes-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.notes-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #F4F6FA;
  color: #687184;
  font-size: 11px;
  line-height: 20px;
}
.notes-chip-date {
  background: #ECF3FF;
  color: #3D66A3;
}
.notes-chip-lesson {
  background: #F3F8ED;
  color: #3B8858;
}
.notes-chip-source {
  background: #FFF3DB;
  color: #A16207;
}
.notes-topic {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  word-break: break-word;
}
.notes-points {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.7;
}
.notes-points li { word-break: break-word; }
.notes-preview {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  word-break: break-word;
}
.notes-preview-empty {
  color: var(--color-text-tertiary);
}
.notes-expanded {
  margin-top: 10px;
  border-top: 1px dashed var(--color-border);
  padding-top: 10px;
}
.notes-section {
  margin-bottom: 10px;
}
.notes-section:last-child {
  margin-bottom: 0;
}
.notes-section-title {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.notes-markdown {
  background: #FAFAFA;
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.65;
  word-break: break-word;
}
.notes-markdown code {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: #EEF1F6;
  color: #2F5FA5;
  font-size: 12px;
}
.notes-md-h1,
.notes-md-h2,
.notes-md-h3 {
  margin: 0 0 6px;
  color: var(--color-text);
}
.notes-md-h1 { font-size: 15px; font-weight: 700; }
.notes-md-h2 { font-size: 14px; font-weight: 700; }
.notes-md-h3 { font-size: 13px; font-weight: 600; }
.notes-md-p {
  margin: 0 0 6px;
}
.notes-md-p:last-child { margin-bottom: 0; }
.notes-md-list {
  margin: 0 0 6px;
  padding-left: 18px;
}
.notes-md-list li {
  margin-bottom: 4px;
}
.notes-md-list li:last-child {
  margin-bottom: 0;
}
.notes-md-code {
  margin: 0 0 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #121722;
  color: #E9EEF9;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}
.notes-md-quote {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid #D5E2F8;
  color: #4F627E;
}
.notes-inline-link {
  color: #2F64AE;
  text-decoration: none;
}
.notes-inline-link:active {
  opacity: 0.7;
}
.notes-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.notes-image-link,
.notes-image-fallback {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  background: #FAFAFA;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px;
  text-decoration: none;
}
.notes-image-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: #F0F2F6;
}
.notes-image-link span,
.notes-image-fallback {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}
.notes-image-fallback {
  justify-content: center;
  min-height: 60px;
  padding: 8px;
}
.notes-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.notes-actions:empty { display: none; }
.notes-toggle-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 12px;
  padding: 4px 6px;
  cursor: pointer;
}
.notes-toggle-btn:active { opacity: 0.7; }
.notes-detail-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.notes-detail-error {
  color: #B42318;
  font-size: 12px;
  margin-bottom: 6px;
}
.notes-jump-btn {
  background: #F0F5FF;
  color: #4A6FB4;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.notes-demo-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 10px 11px;
  border: 1px solid #BFD4F8;
  border-radius: 8px;
  background: #F5F9FF;
}
.notes-demo-entry-text {
  flex: 1 1 180px;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}
.notes-demo-jump-btn {
  min-height: 34px;
  background: #2563EB;
  color: #FFFFFF;
  border: 1px solid #1D4ED8;
  font-weight: 700;
}
.notes-demo-jump-btn:active {
  background: #1D4ED8;
}
.notes-jump-btn:active { background: #E6EEFF; }
.notes-jump-btn.is-done {
  background: var(--color-bg-safe);
  color: var(--color-safe);
}
.notes-jump-btn.is-done:active { background: #DDF3E5; }

/* 作业跳转高亮 */
.homework-item.is-flash {
  animation: homeworkFlash 1.4s ease;
}
@keyframes homeworkFlash {
  0%   { background: #FFF3EB; }
  60%  { background: #FFF3EB; }
  100% { background: transparent; }
}

/* =========================================================
   底部 Tab Bar
   ========================================================= */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  bottom: 0;
  max-width: 750px;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 50;
}
.tabbar-item {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 56px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
  padding: 6px 4px;
  font-family: inherit;
  transition: color 0.15s, background 0.15s;
}
.tabbar-item:active { background: #F5F5F5; }
.tabbar-item.is-active { color: var(--color-primary); }
.tabbar-item.is-active .tabbar-icon { transform: translateY(-1px) scale(1.05); }
.tabbar-icon {
  font-size: 21px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  transition: transform 0.15s;
}
.tabbar-label {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

/* 小红点 */
.tabbar-dot {
  position: absolute;
  top: 6px;
  left: calc(50% + 8px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-urgent);
  box-shadow: 0 0 0 2px #fff;
}

/* 数字徽章 */
.tabbar-badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-urgent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

@media (min-width: 768px) {
  .page {
    padding-top: 28px;
  }
  .login-header {
    padding-top: 2px;
    padding-bottom: 34px;
  }
  .login-card {
    padding: 18px 16px 14px;
  }
}

/* 小屏适配:360px 下依然清晰 */
@media (max-width: 360px) {
  .page {
    padding: 18px 12px 16px;
  }
  .login-header {
    padding-bottom: 24px;
  }
  .login-logo {
    width: 78px;
    height: 78px;
    border-radius: 20px;
  }
  .login-title {
    font-size: 18px;
  }
  .login-en-title {
    font-size: 10px;
    letter-spacing: 3px;
  }
  .login-card {
    padding: 16px 12px 12px;
    border-radius: 14px;
  }
  .form-label {
    font-size: 13px;
  }
  .form-input {
    height: 46px;
    font-size: 14px;
  }
  .tabbar-icon { font-size: 20px; }
  .tabbar-label { font-size: 9px; }
  .tab-header-title { font-size: 18px; }
  .notes-image-grid { grid-template-columns: 1fr; }
  .notes-markdown { font-size: 12px; }
}

@media (max-width: 560px) {
  .pet-art-wrap {
    width: min(196px, 64vw);
  }
  .pet-art {
    width: 116%;
    height: 116%;
  }
  .pet-progress-meta {
    flex-direction: column;
    gap: 3px;
  }
  .pet-battle-stats,
  .pet-boost-grid,
  .pet-skill-list {
    grid-template-columns: 1fr 1fr;
  }
  .pet-power-card {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  .pet-battle-result-head {
    display: grid;
  }
  .pet-battle-result-head span {
    text-align: left;
  }
  .pet-style-head {
    display: grid;
    gap: 3px;
  }
  .pet-style-current {
    text-align: left;
  }
  .pet-style-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pet-style-option {
    min-height: 112px;
  }
  .pet-perks-grid,
  .pet-stage-list {
    grid-template-columns: 1fr 1fr;
  }
  .points-reward-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .points-redeem-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* =========================================================
   测验入口卡片(学生作业 Tab)
   ========================================================= */
.quiz-entry-card { margin-bottom: 12px; }
.quiz-entry-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}
.quiz-entry-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  color: #fff;
  background: var(--color-primary);
  cursor: pointer;
}
.quiz-entry-btn:active { background: var(--color-primary-dark); }
.quiz-history-card { margin-bottom: 12px; }
.quiz-history-list {
  display: grid;
  gap: 10px;
}
.quiz-history-item {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.quiz-history-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.quiz-history-topic {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}
.quiz-history-status {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.quiz-history-actions .quiz-entry-btn {
  padding: 7px 12px;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .quiz-history-item { grid-template-columns: 1fr; }
}

/* =========================================================
   测验页
   ========================================================= */
.quiz-state-card { margin-bottom: 12px; }
.quiz-state-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.quiz-state-meta {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}
.quiz-question-item {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.quiz-question-stem {
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.quiz-question-no {
  flex: none;
  min-width: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.7;
}
.quiz-question-content {
  flex: 1;
  min-width: 0;
}
.quiz-option {
  display: block;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 6px 0;
  line-height: 1.5;
}
.quiz-option-text { white-space: pre-wrap; }
.quiz-option input { margin-right: 8px; }
.quiz-rich-paragraph {
  margin: 0 0 6px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.quiz-rich-paragraph:last-child { margin-bottom: 0; }
.quiz-rich-list {
  margin: 4px 0 8px 20px;
  padding: 0;
  line-height: 1.7;
}
.quiz-rich-list li {
  margin: 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.quiz-code-block {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #E6E8EE;
  background: #F7F8FA;
  color: #223047;
  /* 自动换行：长代码不会撑破布局，也不再需要左右拖动 */
  white-space: pre;
  overflow-x: auto;
  line-height: 1.6;
  display: block;
  width: 100%;
  box-sizing: border-box;
  tab-size: 4;
}
.quiz-code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  white-space: inherit;
  word-break: normal;
  overflow-wrap: normal;
  display: block;
}
.quiz-code-input {
  display: block;
  width: 100%;
  min-height: 240px;
  box-sizing: border-box;
  border: 1px solid #D8DEE8;
  border-radius: 8px;
  background: #FBFCFE;
  color: #1F2937;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.quiz-code-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}
.quiz-code-answer {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #E6E8EE;
  background: #F7F8FA;
  color: #223047;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.quiz-code-answer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
}
.quiz-option code,
.quiz-rich-paragraph code,
.quiz-wrong-exp code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  background: #F2F5FA;
  padding: 1px 4px;
  border-radius: 4px;
}
.quiz-submit-btn { margin-top: 4px; }
.quiz-score-value {
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 4px 0 2px;
}
.quiz-score-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.quiz-points-line {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 10px;
}
.quiz-all-correct {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-bg-safe);
  color: var(--color-safe);
  font-size: 13px;
}
.quiz-expired-tip {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.quiz-wrong-list { margin-top: 8px; }
.quiz-wrong-item {
  border-radius: 10px;
  background: #FAFAFA;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.quiz-wrong-stem {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  /* 题干内可能含 <pre> 代码块，使用 block 布局以避免代码被挤压 */
  display: block;
}
.quiz-wrong-stem strong { margin-right: 4px; }
.quiz-wrong-stem .quiz-rich-paragraph,
.quiz-wrong-stem .quiz-code-block { margin-top: 4px; }
.quiz-wrong-reveal { margin-top: 4px; }
.quiz-wrong-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.quiz-wrong-exp {
  font-size: 13px;
  color: var(--color-text);
  margin-top: 6px;
  line-height: 1.6;
}
.quiz-table-wrap {
  margin: 8px 0;
  overflow-x: auto;
}
.quiz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
}
.quiz-table th,
.quiz-table td {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap;
}
.quiz-table th {
  background: #F7F8FB;
  font-weight: 600;
}
.quiz-wrong-item .quiz-code-block,
.quiz-question-item .quiz-code-block,
.competition-original-paper .quiz-code-block {
  white-space: pre;
  overflow-x: auto;
}
.quiz-wrong-item .quiz-rich-paragraph,
.quiz-question-item .quiz-rich-paragraph,
.competition-original-paper .quiz-rich-paragraph {
  white-space: pre-wrap;
}
.competition-original-paper {
  margin: 10px 0 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}
.competition-wrong-set-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.competition-wrong-set-practice {
  display: grid;
  gap: 8px;
}
.quiz-ranking-loading {
  padding: 12px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.quiz-ranking-card { margin-top: 12px; }
.quiz-rank-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.quiz-rank-block { margin-top: 12px; }
.quiz-rank-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.quiz-rank-row {
  display: grid;
  grid-template-columns: 26px 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding: 8px 0;
  font-size: 13px;
}
.quiz-rank-row:last-child { border-bottom: none; }
.quiz-rank-index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #F0F5FF;
  color: #4A6FB4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.quiz-rank-name {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quiz-rank-extra {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quiz-rank-score {
  color: var(--color-text);
  font-weight: 600;
}
.quiz-rank-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 10px 0;
}

/* =========================================================
   老师页
   ========================================================= */
.teacher-card { margin-bottom: 12px; }
.teacher-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.teacher-textarea {
  height: auto;
  min-height: 120px;
  padding: 10px 12px;
  resize: vertical;
}
.teacher-textarea-compact {
  min-height: 88px;
}
.teacher-option-grid {
  grid-template-columns: 1fr;
}
.teacher-tip {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.teacher-edit-actions {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.teacher-info-line {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
  margin-top: 4px;
}
.teacher-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.teacher-stat-item {
  border-radius: 8px;
  background: #F7F8FA;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.teacher-stat-item strong {
  font-size: 20px;
  line-height: 1;
  color: var(--color-text);
}
.teacher-question-item {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
}
.teacher-question-stem {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 6px;
}
.teacher-option {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.teacher-answer {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-safe);
}
.teacher-exp {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.6;
}
.teacher-edit-btn {
  margin-top: 8px;
  border: none;
  border-radius: 999px;
  background: #F0F5FF;
  color: #4A6FB4;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 10px;
  cursor: pointer;
}
.teacher-edit-btn:active {
  background: #E6EEFF;
}
.teacher-table-wrap {
  margin-top: 10px;
  overflow-x: auto;
}
.teacher-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.teacher-table th,
.teacher-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 8px 6px;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
}
.teacher-table th {
  color: var(--color-text-secondary);
  font-weight: 500;
}
.teacher-muted {
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.4;
}
.checkin-page {
  min-height: 100vh;
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(7, 193, 96, 0.12), rgba(74, 111, 180, 0.10)),
    #F7F8FA;
}
.checkin-header {
  max-width: 1180px;
  margin: 0 auto 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.checkin-kicker {
  color: #0F766E;
  font-size: 15px;
  font-weight: 700;
}
.checkin-header h1 {
  margin: 6px 0 0;
  color: #1F2937;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: 0;
}
.checkin-refresh-btn,
.checkin-link-btn {
  border: 1px solid #D8E5DF;
  border-radius: 8px;
  background: #fff;
  color: #0F766E;
  min-height: 42px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.checkin-shell {
  max-width: 1180px;
  margin: 0 auto;
}
.checkin-status-card,
.checkin-panel,
.checkin-modal-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}
.checkin-status-card {
  margin-bottom: 18px;
  padding: 34px;
  border-left: 6px solid #4A6FB4;
}
.checkin-status-card.is-success { border-left-color: #07C160; }
.checkin-status-card.is-error { border-left-color: #FA5151; }
.checkin-status-card.is-empty { border-left-color: #FF976A; }
.checkin-status-title {
  color: #111827;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
}
.checkin-status-desc {
  margin-top: 8px;
  color: #64748B;
  font-size: 17px;
}
.checkin-panel {
  padding: 24px;
}
.checkin-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.checkin-section-head h2 {
  margin: 0;
  color: #1F2937;
  font-size: 24px;
  letter-spacing: 0;
}
.checkin-section-head p {
  margin: 6px 0 0;
  color: #64748B;
  font-size: 15px;
}
.checkin-class-grid,
.checkin-student-grid {
  display: grid;
  gap: 14px;
}
.checkin-class-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.checkin-student-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.checkin-class-card,
.checkin-student-card {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  color: #1F2937;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.16s, box-shadow 0.16s;
}
.checkin-class-card {
  min-height: 142px;
  padding: 20px;
}
.checkin-student-card {
  min-height: 100px;
  padding: 16px;
}
.checkin-class-card:hover,
.checkin-student-card:hover {
  transform: translateY(-1px);
  border-color: #07C160;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}
.checkin-class-card.is-last-used {
  border-color: rgba(43, 58, 94, 0.42);
  box-shadow: 0 0 0 3px rgba(43, 58, 94, 0.08), var(--shadow-card);
}
.checkin-class-name,
.checkin-student-name {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}
.checkin-class-meta,
.checkin-student-id,
.checkin-class-action {
  display: block;
  margin-top: 8px;
  color: #64748B;
  font-size: 14px;
}
.checkin-class-action {
  color: #0F766E;
  font-weight: 800;
}
.checkin-student-card.is-done {
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.checkin-student-card.is-done .checkin-student-id {
  color: #15803D;
  font-weight: 800;
}
.checkin-empty {
  padding: 24px;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  color: #64748B;
  background: #F8FAFC;
}
.checkin-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.48);
}
.checkin-modal-card {
  width: min(460px, 100%);
  padding: 24px;
}
.checkin-modal-title {
  color: #111827;
  font-size: 24px;
  font-weight: 800;
}
.checkin-modal-desc {
  margin-top: 8px;
  color: #64748B;
  font-size: 15px;
}
.checkin-id-input {
  margin-top: 18px;
  height: 54px;
  font-size: 20px;
  text-transform: uppercase;
}
.checkin-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.teacher-checkin-card {
  border: 1px solid #DCEBE3;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FCFA 100%);
}
.teacher-checkin-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.teacher-checkin-kicker,
.teacher-checkin-subtitle {
  color: #0F766E;
  font-size: 12px;
  font-weight: 800;
}
.teacher-checkin-title {
  margin-top: 3px;
  color: #1F2937;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
}
.teacher-checkin-meta,
.teacher-checkin-link,
.teacher-checkin-empty,
.teacher-checkin-pending {
  color: #64748B;
  font-size: 12px;
  line-height: 1.5;
}
.teacher-checkin-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 10px;
  background: #F3F4F6;
  color: #4B5563;
  font-size: 12px;
  font-weight: 800;
}
.teacher-checkin-status.is-active {
  background: #DCFCE7;
  color: #166534;
}
.teacher-checkin-error {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #FEF2F2;
  color: #B91C1C;
  font-size: 13px;
}
.teacher-checkin-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 14px;
  margin-top: 16px;
}
.teacher-checkin-class-grid,
.teacher-checkin-progress-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.teacher-checkin-class {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
}
.teacher-checkin-class.is-selected {
  border-color: #07C160;
  background: #F0FDF4;
}
.teacher-checkin-class.is-recommended:not(.is-selected) {
  border-color: #FDBA74;
  background: #FFF7ED;
}
.teacher-checkin-class input {
  margin-top: 3px;
}
.teacher-checkin-class strong,
.teacher-checkin-class em {
  display: block;
  font-style: normal;
  line-height: 1.35;
}
.teacher-checkin-class strong {
  color: #1F2937;
  font-size: 13px;
}
.teacher-checkin-class em {
  margin-top: 3px;
  color: #64748B;
  font-size: 11px;
}
.teacher-checkin-progress-item {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}
.teacher-checkin-progress-head,
.teacher-checkin-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.teacher-checkin-progress-head strong,
.teacher-checkin-recent-row span {
  color: #1F2937;
  font-size: 13px;
}
.teacher-checkin-progress-head span,
.teacher-checkin-recent-row em {
  color: #64748B;
  font-size: 12px;
  font-style: normal;
}
.teacher-checkin-progress-track {
  margin: 8px 0 6px;
  height: 8px;
  border-radius: 999px;
  background: #E2E8F0;
  overflow: hidden;
}
.teacher-checkin-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #07C160;
}
.teacher-checkin-recent {
  margin-top: 12px;
}
.teacher-checkin-recent-row {
  padding: 6px 0;
  border-bottom: 1px solid #EEF2F7;
}
.teacher-checkin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.teacher-checkin-actions .btn {
  width: auto;
  min-width: 110px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  letter-spacing: 0;
}
.teacher-checkin-link {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #F8FAFC;
  word-break: break-all;
}
.attendance-toolbar {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.attendance-month-input,
.attendance-class-select {
  min-height: 40px;
}
.attendance-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.attendance-manual-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}
.attendance-manual-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.attendance-manual-grid label span {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.attendance-manual-wide {
  grid-column: span 2;
}
.attendance-weekdays,
.attendance-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.attendance-weekdays {
  margin-top: 10px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-align: center;
}
.attendance-day {
  min-height: 86px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.attendance-day.is-empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.attendance-day.has-session {
  background: #F7F8FA;
}
.attendance-day.is-selected {
  border-color: #4A6FB4;
  box-shadow: 0 0 0 2px rgba(74, 111, 180, 0.12);
}
.attendance-day-num {
  font-weight: 700;
  color: var(--color-text);
}
.attendance-day-meta,
.attendance-day-counts {
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-secondary);
}
.attendance-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.attendance-status.is-normal { background: #EAF7EE; color: #16803C; }
.attendance-status.is-late { background: #FFF4E5; color: #B45309; }
.attendance-status.is-leave { background: #FEF2F2; color: #B91C1C; }
.attendance-status.is-absent { background: #F3F4F6; color: #4B5563; }
.attendance-status.is-special { background: #EEF2FF; color: #4338CA; }
.attendance-detail-table {
  min-width: 900px;
}
.attendance-payroll-card .teacher-stat-item strong {
  color: #0F766E;
}
.attendance-hour-table {
  min-width: 1080px;
}
.attendance-hour-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  background: #F3F4F6;
  color: #4B5563;
}
.attendance-hour-status.tone-good {
  background: #DCFCE7;
  color: #166534;
}
.attendance-hour-status.tone-warn {
  background: #FFEDD5;
  color: #9A3412;
}
.attendance-hour-status.tone-danger {
  background: #FEE2E2;
  color: #991B1B;
}
.attendance-hour-status.tone-special {
  background: #EEF2FF;
  color: #4338CA;
}
.attendance-exception-list {
  display: grid;
  gap: 8px;
}
.attendance-exception-item {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid #FECACA;
  border-radius: 8px;
  background: #FEF2F2;
  color: #7F1D1D;
  font-size: 13px;
  line-height: 1.4;
}
.attendance-status-select {
  min-width: 104px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--color-text);
}
.attendance-note-input {
  min-width: 140px;
  padding: 6px 8px;
  font-size: 12px;
}
.teacher-table tr.is-leave td { background: rgba(220, 38, 38, 0.04); }
.teacher-table tr.is-late td { background: rgba(245, 158, 11, 0.05); }
.teacher-table tr.is-special td { background: rgba(67, 56, 202, 0.04); }
.teacher-ranking-summary {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.teacher-ranking-table {
  min-width: 720px;
}
.teacher-rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #F0F5FF;
  color: #4A6FB4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.teacher-empty {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.teacher-chip-group {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.teacher-chip {
  border: 1px solid #D9DFEC;
  background: #F6F8FC;
  color: #516085;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.teacher-chip.is-active {
  background: #2B3A5E;
  border-color: #2B3A5E;
  color: #F5D5B0;
}
.teacher-redemption-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.teacher-redemption-list {
  margin-top: 10px;
}
.teacher-redemption-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}
.teacher-redemption-main {
  min-width: 0;
  flex: 1;
}
.teacher-redemption-title {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 600;
}
.teacher-redemption-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.teacher-redemption-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.teacher-mini-btn {
  border: none;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 10px;
  cursor: pointer;
}
.teacher-mini-btn.is-ok {
  background: #E8F8EC;
  color: #17803D;
}
.teacher-mini-btn.is-reject {
  background: #FEECEF;
  color: #C53A52;
}
.teacher-mini-btn:active {
  transform: translateY(1px);
}

.analytics-list-group {
  margin: 10px 0 0;
}
.analytics-list-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--color-text);
}
.analytics-count-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #F0F5FF;
  color: #4A6FB4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}
.analytics-name-tag {
  display: inline-block;
  background: var(--color-bg-secondary, #f5f5f5);
  border-radius: 4px;
  padding: 2px 8px;
  margin: 2px 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}
.analytics-name-tag.is-perfect {
  background: #e8f5e9;
  color: #2e7d32;
}
.analytics-name-tag.is-poor {
  background: #fdecea;
  color: #b71c1c;
}
.analytics-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 12px auto;
}
.analytics-error-row {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}
.analytics-error-rate {
  font-weight: 700;
  color: var(--color-danger, #d43f3a);
}
.analytics-copy-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  background: var(--color-primary, #1890ff);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}
.analytics-copy-btn:active {
  opacity: 0.85;
}
.analytics-summary-fallback {
  margin-top: 10px;
}

.teacher-dashboard .tab-header {
  padding-top: 2px;
}
.teacher-dashboard .tabbar-icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.teacher-query-card .btn {
  margin-top: 2px;
}
.teacher-empty-state {
  text-align: center;
  padding: 30px 18px;
}
.teacher-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.teacher-empty-desc {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.teacher-overview-card {
  border: 1px solid #E7ECF5;
}
.teacher-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.teacher-overview-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.teacher-overview-title {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: #2B3A5E;
  word-break: break-word;
}
.teacher-overview-date {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F0F5FF;
  color: #4A6FB4;
  font-size: 12px;
}
.teacher-overview-topic {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  word-break: break-word;
}
.teacher-progress-row {
  margin-top: 16px;
}
.teacher-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.teacher-progress-meta strong {
  color: var(--color-primary-dark);
  font-size: 20px;
  line-height: 1;
}
.teacher-progress-track {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background: #EEF1F6;
  overflow: hidden;
}
.teacher-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}
.teacher-overview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.teacher-overview-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}
.teacher-action-btn {
  min-height: 40px;
  border: 1px solid #D9DFEC;
  border-radius: 8px;
  background: #F6F8FC;
  color: #516085;
  font-size: 14px;
  cursor: pointer;
}
.teacher-action-btn.is-primary {
  border-color: #2B3A5E;
  background: #2B3A5E;
  color: #F5D5B0;
}
.teacher-action-btn:active {
  transform: translateY(1px);
}
.teacher-revoke-btn {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid #B42318;
  border-radius: 6px;
  background: #D92D20;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(180, 35, 24, 0.22);
}
.teacher-revoke-btn:hover {
  border-color: #912018;
  background: #B42318;
  color: #FFFFFF;
}
.teacher-revoke-btn[disabled] {
  cursor: not-allowed;
  border-color: #FDA29B;
  background: #FEE4E2;
  color: #B42318;
  box-shadow: none;
}
.teacher-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.teacher-chart-card {
  border: 1px solid #E7ECF5;
}
.teacher-chart-wrap {
  position: relative;
  width: 100%;
  height: 260px;
  margin-top: 12px;
}
.teacher-chart-caption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
}
.teacher-analysis-summary {
  border: 1px solid #E7ECF5;
}

.teacher-sync-card {
  border: 1px solid #E7ECF5;
  background: linear-gradient(135deg, #F8FAFF 0%, #F4F7FE 100%);
}
.teacher-sync-tip {
  font-size: 12px;
  line-height: 1.6;
  color: #52627C;
}
.teacher-sync-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 72px 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.teacher-sync-submit {
  height: 36px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0;
  box-shadow: none;
}
.teacher-sync-status {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 8px;
  padding: 8px 10px;
}
.teacher-sync-status[data-level="hint"] {
  background: #EEF5FF;
  color: #28589B;
}
.teacher-sync-status[data-level="pending"] {
  background: #FFF7ED;
  color: #C2410C;
}
.teacher-sync-status[data-level="success"] {
  background: #ECFDF3;
  color: #166534;
}
.teacher-sync-status[data-level="error"] {
  background: #FEF2F2;
  color: #B91C1C;
}
.teacher-sync-list {
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #E4EBF8;
  border-radius: 10px;
  background: #fff;
}
.teacher-sync-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #EEF2F9;
  font-size: 13px;
}
.teacher-sync-item:last-child {
  border-bottom: none;
}
.teacher-sync-item input[type="checkbox"] {
  margin: 0;
}
.teacher-sync-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1F2A44;
}
.teacher-sync-score {
  color: #55647D;
  font-size: 12px;
}

.parent-snapshot-card {
  border: 1px solid #E8EDF6;
  background: linear-gradient(135deg, #F7FAFF 0%, #FFFFFF 60%);
}
.parent-snapshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.parent-snapshot-meta {
  font-size: 12px;
  color: #61708B;
}
.parent-snapshot-chart-wrap {
  position: relative;
  width: 100%;
  height: 230px;
  margin-top: 12px;
}
.parent-snapshot-empty {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.parent-snapshot-summary {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.parent-snapshot-stat {
  border-radius: 8px;
  background: #F2F6FD;
  padding: 8px 10px;
  font-size: 12px;
  color: #51607A;
}
.parent-snapshot-stat strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  color: #1F2A44;
  line-height: 1.1;
}
.parent-snapshot-insight {
  margin-top: 10px;
  border-radius: 10px;
  padding: 10px;
  background: #F8FAFC;
  border: 1px solid #E5EAF3;
}
.parent-snapshot-insight + .parent-snapshot-insight {
  margin-top: 8px;
}
.parent-snapshot-insight-title {
  font-size: 12px;
  color: #4D5C74;
  margin-bottom: 4px;
}
.parent-snapshot-insight-text {
  font-size: 13px;
  line-height: 1.6;
  color: #1F2A44;
}
.snapshot-detail-trigger {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}
.snapshot-detail-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}
.snapshot-detail-section + .snapshot-detail-section {
  margin-top: 14px;
}
.snapshot-detail-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}
.snapshot-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.snapshot-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #F7F8FA;
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.snapshot-detail-row strong {
  color: var(--color-text);
  font-weight: 600;
}

@media (min-width: 768px) {
  .teacher-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .teacher-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teacher-overview-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .teacher-overview-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teacher-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   教师端 v2 增强样式
   ========================================================= */

/* 查询表单 3 列 */
.teacher-form-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 480px) {
  .teacher-form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

.query-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.query-label {
  display: block;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #5E6472;
}
.content-select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #F7F8FB;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  outline: none;
  text-overflow: ellipsis;
}
.content-select optgroup {
  font-style: normal;
  font-weight: 700;
  color: var(--color-text);
}
.content-select option {
  font-weight: 400;
  color: var(--color-text);
}
.teacher-content-search {
  height: 42px;
  font-size: 14px;
}
.content-tree-picker {
  padding: 12px;
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF6FF 100%);
  border: 1px solid #E2E8F0;
  border-radius: 14px;
}
.content-tree-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #1E3A5F;
}
.content-tree-title span {
  font-weight: 600;
  color: #64748B;
  text-align: right;
}
.content-tree-levels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.content-tree-level {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #64748B;
}
.content-tree-level select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #D7E1EE;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--color-text);
  font-size: 14px;
  outline: none;
}
.content-tree-level select:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
@media (min-width: 760px) {
  .content-tree-levels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.teacher-picker-meta {
  margin-top: -2px;
  font-size: 12px;
  line-height: 1.5;
  color: #5B6B8A;
}
.content-select:focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.content-select:disabled {
  color: var(--color-text-tertiary);
  opacity: 0.85;
}
.teacher-data-center-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 12px;
}
.teacher-data-center-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  width: 100%;
  min-height: 118px;
  padding: 14px;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  color: var(--color-text);
}
.teacher-data-center-card:active {
  transform: translateY(1px);
}
.teacher-data-center-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}
.teacher-data-center-meta {
  align-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.teacher-data-center-desc {
  grid-column: 1 / -1;
  min-height: 36px;
  color: #5B6474;
  font-size: 13px;
  line-height: 1.4;
}
.teacher-data-center-cta {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 6px 10px;
  border-radius: 6px;
  background: #0F766E;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
}
@media (min-width: 720px) {
  .teacher-data-center-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .teacher-data-center-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.teacher-class-stats-table {
  min-width: 560px;
}

/* 空状态带图标 */
.teacher-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
  line-height: 1;
}

/* 概览卡片 - 突出显示完成率 */
.teacher-overview-card {
  background: linear-gradient(135deg, #17355F 0%, #2A5A98 100%);
  color: #F7FAFF;
  border-radius: var(--radius-card);
}
.teacher-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.teacher-overview-label {
  font-size: 12px;
  color: rgba(235, 244, 255, 0.96);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.teacher-overview-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.35;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(8, 20, 45, 0.42);
  word-break: break-word;
}
.teacher-overview-date {
  font-size: 12px;
  color: #F2F7FF;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.teacher-overview-topic {
  font-size: 13px;
  color: rgba(239, 247, 255, 0.96);
  margin-bottom: 14px;
  line-height: 1.5;
}
.teacher-progress-row {
  margin-bottom: 14px;
}
.teacher-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
  color: rgba(241, 247, 255, 0.98);
}
.teacher-progress-meta strong {
  font-size: 22px;
  font-weight: 700;
  opacity: 1;
}
.teacher-progress-track {
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  overflow: hidden;
}
.teacher-progress-fill {
  height: 100%;
  background: #52D68A;
  border-radius: 99px;
  transition: width 0.6s ease;
}
.teacher-overview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.teacher-overview-card .teacher-stat-item {
  background: rgba(255,255,255,0.16);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: rgba(241, 247, 255, 0.95);
}
.teacher-overview-card .teacher-stat-item strong {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.teacher-overview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.teacher-action-btn {
  border: 1px solid rgba(255,255,255,0.55);
  background: transparent;
  color: rgba(248, 252, 255, 0.98);
  border-radius: 8px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.teacher-action-btn.is-primary {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.75);
  color: #fff;
}
.teacher-action-btn:active {
  transform: translateY(1px);
  background: rgba(255,255,255,0.34);
}

.teacher-table .teacher-revoke-btn,
.teacher-ranking-table .teacher-revoke-btn,
button.teacher-action-btn.teacher-revoke-btn {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid #B42318;
  border-radius: 6px;
  background: #D92D20;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(180, 35, 24, 0.22);
}

.teacher-table .teacher-revoke-btn:hover,
.teacher-table .teacher-revoke-btn:focus,
.teacher-ranking-table .teacher-revoke-btn:hover,
.teacher-ranking-table .teacher-revoke-btn:focus,
button.teacher-action-btn.teacher-revoke-btn:hover,
button.teacher-action-btn.teacher-revoke-btn:focus {
  border-color: #912018;
  background: #B42318;
  color: #FFFFFF;
}

.teacher-table .teacher-revoke-btn[disabled],
.teacher-ranking-table .teacher-revoke-btn[disabled],
button.teacher-action-btn.teacher-revoke-btn[disabled] {
  cursor: not-allowed;
  border-color: #FDA29B;
  background: #FEE4E2;
  color: #B42318;
  box-shadow: none;
}

/* 图表网格 */
.teacher-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 640px) {
  .teacher-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teacher-overview-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .teacher-overview-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.teacher-chart-card {
  border: 1px solid #E7ECF5;
}
.teacher-chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  margin-top: 12px;
}
.teacher-chart-caption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* 学生名单分组 */
.analytics-list-group {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.analytics-list-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.analytics-count-badge {
  font-size: 12px;
  font-weight: 600;
  background: #EEF2FF;
  color: #4338CA;
  border-radius: 99px;
  padding: 2px 9px;
  min-width: 24px;
  text-align: center;
}
.analytics-name-tag {
  display: inline-block;
  font-size: 12px;
  background: #F3F4F6;
  color: #374151;
  border-radius: 6px;
  padding: 3px 8px;
  margin: 2px 3px 2px 0;
}
.analytics-name-tag.is-perfect {
  background: #D1FAE5;
  color: #065F46;
}
.analytics-name-tag.is-poor {
  background: #FEE2E2;
  color: #991B1B;
}

/* 错题分析行 */
.analytics-error-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
}
.analytics-error-row:last-child {
  border-bottom: none;
}
.analytics-error-rate {
  font-weight: 700;
  color: var(--color-urgent);
}

/* 错题率摘要表 */
.teacher-error-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
.teacher-error-summary-table th,
.teacher-error-summary-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.teacher-error-summary-table th {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 12px;
  background: #FAFAFA;
}
.teacher-error-summary-table td:first-child {
  font-weight: 600;
}
.teacher-class-analytics-table {
  min-width: 920px;
}
.teacher-class-analytics-table td:first-child {
  font-weight: 600;
}
.teacher-class-analytics-names {
  min-width: 150px;
  color: var(--color-text-secondary);
  white-space: normal;
}
.teacher-class-analytics-wrong {
  min-width: 240px;
  color: var(--color-text-secondary);
  white-space: normal;
}
@media (max-width: 640px) {
  .teacher-class-analytics-table {
    min-width: 760px;
  }
  .teacher-class-analytics-table th,
  .teacher-class-analytics-table td {
    padding: 7px 6px;
    font-size: 11px;
  }
  .teacher-class-analytics-names {
    min-width: 120px;
  }
  .teacher-class-analytics-wrong {
    min-width: 180px;
  }
}

:focus-visible {
  outline: 3px solid rgba(43, 58, 94, 0.38);
  outline-offset: 3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(43, 58, 94, 0.18);
}
.error-rate-bar {
  display: inline-block;
  height: 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 6px;
  transition: width 0.4s ease;
}
.error-rate-bar.low { background: #2563EB; }
.error-rate-bar.mid { background: #F97316; }
.error-rate-bar.high { background: #DC2626; }

/* AI 摘要区 */
.teacher-ai-summary-card {
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  border: 1px solid #A7F3D0;
}
.teacher-ai-summary-card .extension-title {
  color: #065F46;
}
.analytics-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 9px 16px;
  background: #065F46;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.analytics-copy-btn::before {
  content: '🤖';
}
.analytics-copy-btn:hover { background: #047857; }
.analytics-copy-btn:active { transform: translateY(1px); }
.analytics-summary-fallback {
  margin-top: 10px;
  min-height: 120px;
  font-size: 12px;
  line-height: 1.7;
}
.teacher-analysis-summary {
  border: 1px solid #E7ECF5;
}

/* =========================================================
   AI 报告模块
   ========================================================= */
.ai-report-mode-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.ai-mode-btn {
  flex: 1;
  height: 38px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: #F7F8FA;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.ai-mode-btn.is-active {
  border-color: var(--color-primary);
  background: rgba(7,193,96,0.08);
  color: var(--color-primary);
}
.ai-mode-btn:active { transform: translateY(1px); }

.ai-report-student-selector {
  margin-bottom: 12px;
}

.ai-report-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}
.ai-report-actions .btn {
  flex: 1;
  height: 44px;
  font-size: 15px;
}
.ai-report-actions .teacher-mini-btn {
  height: 44px;
  padding: 0 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-report-body {
  background: #F7F8FA;
  border-radius: 10px;
  padding: 14px;
  min-height: 80px;
}

.ai-report-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-report-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.ai-report-placeholder {
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 13px;
  padding: 18px 0;
}

.ai-report-sync-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.ai-visibility-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
  user-select: none;
}
.ai-visibility-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.ai-visibility-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.teacher-chart-card-wide {
  grid-column: 1 / -1;
}

/* =========================================================
   比赛专区
   ========================================================= */
.competition-card { margin-bottom: 12px; }
.competition-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.competition-summary div {
  padding: 10px 8px;
  border-radius: 8px;
  background: #F6F8FC;
  text-align: center;
}
.competition-summary strong {
  display: block;
  font-size: 20px;
  color: var(--color-primary);
}
.competition-summary span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--color-text-secondary);
}
.competition-gate-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.competition-gate-notice span,
.competition-gate-notice strong {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #F6F8FC;
  font-weight: 500;
}
.competition-gate-notice strong {
  color: var(--color-primary);
  background: #F0F5FF;
}
.competition-practice-plan {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.competition-plan-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid #E4E9F2;
  border-radius: 8px;
  background: #FBFCFF;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.competition-plan-step strong {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #244E9B;
  color: #fff;
  font-size: 12px;
}
.competition-plan-note {
  padding: 7px 10px;
  border-radius: 8px;
  background: #F6F8FC;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.competition-deadline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 10px;
  padding: 12px;
  border: 1px solid #D8E2F3;
  border-radius: 8px;
  background: linear-gradient(135deg, #F8FAFF, #F3F8F5);
}
.competition-deadline-meta {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--color-text-secondary);
}
.competition-deadline-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.competition-deadline-digits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.competition-deadline-digits span {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  min-width: 48px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--color-text-secondary);
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(33, 52, 84, 0.08);
}
.competition-deadline-digits strong {
  font-size: 18px;
  line-height: 1;
  color: #244E9B;
}
.competition-set {
  margin-top: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.competition-set-head {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  text-align: left;
}
.competition-set.is-open .competition-set-head { background: #F8FAFF; }
.competition-set-head strong {
  display: block;
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.35;
}
.competition-set-head span:not(.homework-status) {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.competition-set-preview {
  padding: 0 12px 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.competition-set-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--color-border);
}
.competition-plan-tag {
  display: inline-flex;
  width: auto;
  margin: 0 6px 0 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: #EEF6F1;
  color: #2F7D4B;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
}
.competition-kind-tag {
  display: inline-flex;
  width: auto;
  margin: 0 6px 0 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: #F3F6FA;
  color: #4A5568;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
}
.competition-kind-tag.is-real {
  background: #EAF2FF;
  color: #2457A6;
}
.competition-kind-tag.is-mock {
  background: #F5F0FF;
  color: #6345A5;
}
.competition-plan-tag.is-extra {
  background: #FFF7E6;
  color: #A15C00;
}
.competition-plan-tag.is-sprint {
  background: #FDECEC;
  color: #B42318;
}
.competition-status {
  padding: 0 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.competition-set-body .competition-status { padding: 0; }
.competition-review-list { margin-top: 10px; }
.competition-review-title {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.competition-points-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.competition-points-num strong {
  font-size: 30px;
  line-height: 1;
  color: var(--color-primary);
}
.competition-points-num span,
.competition-points-tip {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.competition-rank-list {
  margin-top: 10px;
  border-top: 1px solid var(--color-border);
}
.competition-rank-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.competition-rank-row:last-child { border-bottom: none; }
.competition-rank-row.is-me {
  background: rgba(74, 111, 180, 0.06);
}
.competition-rank-no {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #F0F5FF;
  color: #4A6FB4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.competition-rank-points {
  color: var(--color-primary);
  font-weight: 700;
}
.competition-timer {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #FFF3E0;
  color: #8A4B00;
  font-size: 12px;
  font-weight: 600;
}
.competition-answer { margin-top: 6px; }
.competition-submit-btn { margin-top: 10px; }
.competition-wrong-submit { margin-top: 10px; }
.competition-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}
.quiz-wrong-item.is-active-wrong {
  background: #FFF8EE;
  border: 1px solid #FFD7A3;
}
.quiz-wrong-item.is-resolved-wrong {
  background: #F3FBF5;
  border: 1px solid #B7E4C0;
}
.quiz-wrong-retry {
  margin-top: 8px;
}
.quiz-wrong-retry-label {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--color-text);
}
.quiz-wrong-feedback {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}
.quiz-wrong-feedback.is-success {
  background: #F3FBF5;
  color: #1E7A38;
}
.quiz-wrong-feedback.is-error {
  background: #FFF3F0;
  color: #B34A2C;
}
.competition-teacher-students {
  margin: 10px 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.competition-wrong-highlight {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FFF1E6;
  color: #B85A00;
  font-size: 12px;
  font-weight: 700;
}
.attempt-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.tag-first {
  background: #EEF6FF;
  color: #285EA8;
}
.tag-repeat {
  background: #FFF3E0;
  color: #8A4B00;
}
.is-first-attempt td {
  background: rgba(238, 246, 255, 0.35);
}
.is-repeat-attempt td {
  background: rgba(255, 243, 224, 0.35);
}
.teacher-table tr.is-active-wrong td {
  background: rgba(255, 241, 230, 0.65);
}
.teacher-muted {
  font-size: 13px;
  color: var(--color-text-secondary);
}

@media (max-width: 380px) {
  .tabbar-label { font-size: 9px; }
  .teacher-dashboard .tabbar-label { font-size: 9px; }
}

/* ========== 比赛 Tab 下钻视图 ========== */
.competition-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.competition-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 12px;
  padding: 8px 12px;
  background: #F5F7FB;
  border-radius: 10px;
  font-size: 13px;
}
.competition-crumb {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary, #6B7280);
  font-size: 13px;
  cursor: pointer;
}
.competition-crumb:hover {
  background: #fff;
  color: #1F2937;
}
.competition-crumb.is-active {
  background: #fff;
  border-color: #2563EB;
  color: #1F2937;
  font-weight: 700;
  cursor: default;
}
.competition-crumb-sep {
  color: #94A3B8;
  font-size: 14px;
}
.competition-set-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.competition-set-item {
  display: block;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.competition-set-item:hover {
  border-color: #2563EB;
  box-shadow: 0 4px 14px rgba(37,99,235,0.10);
  transform: translateY(-1px);
}
.competition-set-title {
  font-weight: 700;
  font-size: 14px;
  color: #1F2937;
  margin-bottom: 6px;
}
.competition-set-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.competition-set-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #EEF6FF;
  color: #285EA8;
  font-size: 12px;
  font-weight: 600;
}
.competition-set-cta {
  font-size: 12px;
  color: #2563EB;
  font-weight: 600;
}

.competition-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.competition-class-card {
  display: block;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.competition-class-card:hover {
  border-color: #2563EB;
  box-shadow: 0 4px 14px rgba(37,99,235,0.10);
  transform: translateY(-1px);
}
.competition-class-card.tone-good { border-left: 4px solid #16A34A; }
.competition-class-card.tone-warn { border-left: 4px solid #F97316; }
.competition-class-card.tone-danger { border-left: 4px solid #DC2626; }
.competition-class-name {
  font-weight: 700;
  font-size: 14px;
  color: #1F2937;
  margin-bottom: 6px;
}
.competition-class-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 6px;
}
.competition-class-meta span {
  background: #F3F4F6;
  padding: 2px 8px;
  border-radius: 999px;
}
.competition-class-cta {
  font-size: 12px;
  color: #2563EB;
  font-weight: 600;
}

.competition-student-row.tone-good td { background: rgba(22,163,74,0.06); }
.competition-student-row.tone-warn td { background: rgba(249,115,22,0.06); }
.competition-student-row.tone-danger td { background: rgba(220,38,38,0.06); }

.competition-q-stem {
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 4px;
}
.competition-q-options {
  font-size: 12px;
  color: #6B7280;
}

.competition-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.competition-chart-box {
  background: #FAFAFC;
  border-radius: 10px;
  padding: 10px;
  height: 220px;
  display: flex;
  flex-direction: column;
}
.competition-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.competition-chart-box canvas {
  flex: 1;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 720px) {
  .competition-chart-row { grid-template-columns: 1fr; }
  .teacher-checkin-body {
    grid-template-columns: 1fr;
  }
  .checkin-page {
    padding: 24px 18px;
  }
}

.competition-tip-strong {
  margin-top: 10px;
  padding: 8px 10px;
  background: #FFF7ED;
  border-left: 4px solid #F59E0B;
  color: #78350F;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
}
.competition-weak-block {
  margin: 10px 0;
}
.competition-weak-title {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 6px;
}
.analytics-name-tag.tone-good { background: #DCFCE7; color: #166534; }
.analytics-name-tag.tone-warn { background: #FFF1E6; color: #B85A00; }
.analytics-name-tag.tone-danger { background: #FEE2E2; color: #991B1B; }
.analytics-name-tag.competition-clickable {
  cursor: pointer;
  border: 0;
}
.analytics-name-tag.competition-clickable:hover {
  outline: 2px solid #2563EB;
}

.btn.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
}

.teacher-table tr.tone-good td { background: rgba(22,163,74,0.05); }
.teacher-table tr.tone-warn td { background: rgba(249,115,22,0.05); }
.teacher-table tr.tone-danger td { background: rgba(220,38,38,0.05); }

/* Payroll page */
.payroll-page {
  padding-bottom: 32px;
}

.payroll-auth-card,
.payroll-toolbar-card,
.payroll-page .teacher-card {
  margin-top: 14px;
}

.payroll-form-grid,
.payroll-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
}

.payroll-toolbar {
  grid-template-columns: minmax(150px, 180px) minmax(160px, 220px) minmax(100px, 140px);
}

.payroll-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.payroll-stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payroll-stat-card span {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.payroll-stat-card strong {
  color: var(--color-primary);
  font-size: 22px;
  line-height: 1.2;
}

.payroll-maintenance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.payroll-textarea {
  min-height: 118px;
  resize: vertical;
  margin-bottom: 10px;
}

.payroll-order-table {
  min-width: 1180px;
}

.payroll-table {
  min-width: 680px;
}

.payroll-anomaly-card {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .payroll-toolbar {
    grid-template-columns: 1fr;
  }

  .payroll-stat-card strong {
    font-size: 19px;
  }
}

/* =========================================================
   比赛专区 · 重设计（紧凑 Hero + 推荐优先 + 移动适配）
   覆盖部分旧规则；不影响其它页面。
   ========================================================= */
.competition-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #F4F8FF 0%, #EAF1FF 60%, #E8F4F0 100%);
  border: 1px solid #D8E2F3;
  padding: 16px;
}
.competition-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(36, 78, 155, 0.08), transparent 60%);
  pointer-events: none;
}
.competition-hero .competition-hero-top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.competition-hero-title {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.competition-hero-emoji {
  font-size: 28px;
  line-height: 1;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(36, 78, 155, 0.12);
  flex-shrink: 0;
}
.competition-hero-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.competition-hero-type {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.competition-hero-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  background: #244E9B;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.competition-hero-tag.is-soft {
  background: #fff;
  color: #244E9B;
  border: 1px solid #C8D8F2;
}
.competition-hero .competition-deadline {
  margin: 0;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #D8E2F3;
  border-radius: 10px;
  flex: 0 1 auto;
  max-width: 100%;
}
.competition-hero .competition-deadline-label {
  font-size: 12px;
  font-weight: 600;
}
.competition-hero .competition-deadline-meta {
  margin-top: 2px;
  justify-content: flex-end;
}
.competition-hero .competition-deadline-digits span {
  background: linear-gradient(180deg, #FFF, #F4F8FF);
  min-width: 42px;
  padding: 4px 6px;
}
.competition-hero .competition-deadline-digits strong {
  font-size: 16px;
}
.competition-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.competition-hero-stats > div {
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(33, 52, 84, 0.04);
}
.competition-hero-stats strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #244E9B;
  line-height: 1.1;
}
.competition-hero-stats span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
}
.competition-plan-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px dashed #B6CFF1;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.competition-plan-notice-icon {
  font-size: 18px;
  line-height: 1;
  margin-top: 1px;
}
.competition-plan-notice-text strong {
  display: block;
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: 2px;
}
.competition-plan-notice-text em {
  font-style: normal;
  display: block;
  font-size: 11px;
  color: #6A7A93;
}

/* 优先标签：醒目的红色徽章 + 卡片左侧高亮条 */
.competition-priority-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.competition-set.is-priority {
  border-color: #FF8E53;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.18);
  background: linear-gradient(180deg, #FFF8F4 0%, #fff 70%);
  position: relative;
}
.competition-set.is-priority::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #FF6B6B, #FF8E53);
}
.competition-priority-flag {
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.35);
  z-index: 1;
  animation: competition-priority-pulse 2s ease-in-out infinite;
}
@keyframes competition-priority-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.competition-kind-tag.is-primary {
  background: #E8F1FF;
  color: #244E9B;
  border: 1px solid #C8D8F2;
}
.competition-kind-tag.is-no-score {
  background: #FFF3E6;
  color: #9A4B0C;
  border: 1px solid #F4C99B;
}
.competition-kind-tag.is-observer {
  background: #F0F7F5;
  color: #1F6F5B;
  border: 1px solid #BFE1D8;
}
.competition-confirm-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #D8E2F3;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--color-text);
}
.competition-official-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  background: #244E9B;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.competition-view-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.competition-view-switch button {
  min-height: 38px;
  border: 1px solid #D8E2F3;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text-secondary);
  font-weight: 700;
  cursor: pointer;
}
.competition-view-switch button.is-active {
  background: #244E9B;
  border-color: #244E9B;
  color: #fff;
}
.competition-question-score {
  display: inline-flex;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #F2F5FA;
  color: #607086;
  font-size: 11px;
  font-weight: 700;
}
.competition-code-answer {
  min-height: 180px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  line-height: 1.5;
  white-space: pre;
}
.competition-sample-list {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.competition-sample-item {
  border: 1px solid #E3E8F0;
  border-radius: 8px;
  background: #FAFBFE;
  overflow: hidden;
}
.competition-sample-title {
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #244E9B;
  border-bottom: 1px solid #E3E8F0;
}
.competition-sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.competition-sample-grid > div {
  min-width: 0;
  padding: 8px;
}
.competition-sample-grid > div + div {
  border-left: 1px solid #E3E8F0;
}
.competition-sample-grid span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 700;
}
.competition-sample-grid pre {
  margin: 0;
  min-height: 34px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
}
.competition-judge-result {
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #F8FAFD;
  border: 1px solid #E3E8F0;
}
.competition-judge-message {
  font-size: 12px;
  color: var(--color-text);
  font-weight: 700;
}
.competition-case-list {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}
.competition-case-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}
.competition-case-row.is-pass strong {
  color: #1F7A55;
}
.competition-case-row.is-fail strong {
  color: #B42318;
}

/* 桌面端：把比赛 Slot 内多张卡片改为双列，让长页面变短一半 */
@media (min-width: 920px) {
  #competitionSlot {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  #competitionSlot > .competition-hero {
    grid-column: 1 / -1;
  }
  #competitionSlot > .competition-view-switch {
    grid-column: 1 / -1;
  }
}

/* 移动端：进一步压缩间距，4 个统计格仍然横向，但更小 */
@media (max-width: 480px) {
  .checkin-page {
    padding: 18px 14px;
  }
  .checkin-header {
    flex-direction: column;
    margin-bottom: 16px;
  }
  .checkin-header h1 {
    font-size: 25px;
  }
  .checkin-refresh-btn,
  .checkin-link-btn {
    width: 100%;
  }
  .checkin-status-card,
  .checkin-panel {
    padding: 18px;
    border-radius: 10px;
  }
  .checkin-status-title {
    font-size: 22px;
  }
  .checkin-status-desc {
    font-size: 14px;
  }
  .checkin-section-head {
    flex-direction: column;
  }
  .checkin-class-grid,
  .checkin-student-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .checkin-class-card,
  .checkin-student-card {
    min-height: 92px;
    padding: 12px;
  }
  .checkin-class-name,
  .checkin-student-name {
    font-size: 17px;
  }
  .checkin-modal-actions {
    grid-template-columns: 1fr;
  }
  .teacher-checkin-body {
    grid-template-columns: 1fr;
  }
  .teacher-checkin-hero,
  .teacher-checkin-progress-head,
  .teacher-checkin-recent-row {
    align-items: flex-start;
  }
  .teacher-checkin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .teacher-checkin-actions .btn {
    width: 100%;
    min-width: 0;
  }
  .competition-view-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .competition-sample-grid {
    grid-template-columns: 1fr;
  }
  .competition-sample-grid > div + div {
    border-left: none;
    border-top: 1px solid #E3E8F0;
  }
  .competition-code-answer {
    min-height: 160px;
  }
  .competition-hero { padding: 14px; }
  .competition-hero-name { font-size: 16px; }
  .competition-hero-emoji {
    width: 40px;
    height: 40px;
    font-size: 22px;
    border-radius: 10px;
  }
  .competition-hero-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .competition-hero-stats > div { padding: 8px 4px; }
  .competition-hero-stats strong { font-size: 15px; }
  .competition-hero-stats span { font-size: 10px; }
  .competition-hero .competition-deadline {
    width: 100%;
    flex-wrap: wrap;
  }
  .competition-hero .competition-deadline-digits span {
    min-width: 38px;
    padding: 3px 5px;
  }
  .competition-hero .competition-deadline-digits strong { font-size: 14px; }
  .competition-set-head {
    padding: 10px;
  }
  .competition-set-head strong { font-size: 14px; }
  .competition-set-head span:not(.homework-status) { font-size: 11px; }
  .attendance-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .attendance-toolbar .btn,
  .attendance-toolbar .attendance-class-select {
    width: 100%;
  }
  .attendance-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .attendance-manual-grid {
    grid-template-columns: 1fr 1fr;
  }
  .attendance-manual-wide {
    grid-column: span 2;
  }
  .attendance-weekdays,
  .attendance-calendar {
    gap: 4px;
  }
  .attendance-day {
    min-height: 74px;
    padding: 6px;
  }
  .attendance-day-meta,
  .attendance-day-counts {
    font-size: 10px;
  }
  .competition-priority-flag {
    right: 8px;
    top: -7px;
    padding: 2px 7px;
    font-size: 10px;
  }
}

/* 极窄屏：3 列改为 2 列 */
@media (max-width: 360px) {
  .competition-hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stack-queue-demo {
  background: #F8FAFC;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
}
.sq-lesson,
.sq-practice {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #DCE6F2;
  border-radius: 8px;
  background: #FFFFFF;
}
.sq-practice-footer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 10px;
}
.sq-practice-footer .sq-lesson-btn {
  flex: 0 0 auto;
}
.sq-practice-footer .sq-note {
  margin-top: 0;
  flex: 1 1 auto;
}
.sq-courseware-link {
  margin-top: 10px;
}
.sq-courseware-jump {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.sq-lesson-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.sq-lesson-title {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.sq-lesson-sub {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.sq-lesson-progress {
  flex: 0 0 auto;
  color: #0F172A;
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.sq-step-body {
  display: grid;
  gap: 8px;
}
.sq-step-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sq-step-dot {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #C7D2FE;
  background: #EEF2FF;
  color: #3730A3;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.sq-step-dot.is-active {
  background: #4F46E5;
  border-color: #4F46E5;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.22);
}
.sq-lesson-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.sq-lesson-btn {
  border: none;
  border-radius: 8px;
  background: #2563EB;
  color: #fff;
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
}
.sq-step-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #F8FAFC;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.sq-step-caption strong {
  color: var(--color-text);
  font-size: 13px;
}
.sq-tool-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.sq-speed-panel,
.sq-code-panel {
  min-width: 0;
  border: 1px solid #DDE7F5;
  border-radius: 8px;
  background: #F8FAFC;
  padding: 8px 10px;
}
.sq-speed-head,
.sq-code-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.sq-code-title {
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.sq-code-sub {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.4;
}
.sq-code-tag,
.sq-speed-value {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #DBEAFE;
  color: #1D4ED8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.sq-speed-track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.sq-speed-track input[type="range"] {
  width: 100%;
  accent-color: #2563EB;
}
.sq-code-block {
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: #0F172A;
  color: #CBD5E1;
  overflow: auto;
  font-size: 12px;
  line-height: 1.55;
}
.sq-code-line {
  display: block;
  white-space: pre;
}
.sq-code-line.is-active {
  color: #F8FAFC;
  background: rgba(37, 99, 235, 0.22);
}
.sq-code-line.is-muted {
  color: #64748B;
}
.sq-lane {
  position: relative;
}
.sq-flyout {
  position: absolute;
  top: -6px;
  right: 8px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.25;
  background: #DBEAFE;
  color: #1D4ED8;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
.sq-flyout.is-pop {
  background: #FEE2E2;
  color: #B91C1C;
}
.sq-demo-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.sq-demo-head strong {
  display: block;
  font-size: 14px;
  color: var(--color-text);
}
.sq-demo-head span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.sq-small-btn,
.sq-actions button {
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
}
.sq-small-btn {
  flex: 0 0 auto;
  background: #64748B;
}
.sq-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sq-panel {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
}
.sq-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.sq-rule {
  min-height: 34px;
  margin: 4px 0 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.sq-stack,
.sq-queue {
  display: flex;
  gap: 6px;
  min-height: 126px;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #F1F5F9;
}
.sq-stack {
  flex-direction: column-reverse;
  align-items: stretch;
  justify-content: flex-start;
}
.sq-queue {
  align-items: center;
  overflow-x: auto;
}
.sq-item,
.sq-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 38px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #D8E1EF;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  color: var(--color-text);
  font-size: 13px;
  position: relative;
}
.sq-item.is-focus {
  outline: 2px solid #60A5FA;
  outline-offset: 1px;
}
.sq-item.is-enter {
  animation: sq-enter 0.32s ease-out both;
}
.sq-item.is-exit {
  animation: sq-exit 0.32s ease-in both;
}
.sq-stack .sq-item {
  width: 100%;
}
.sq-item span {
  position: absolute;
  top: -8px;
  right: 4px;
  border-radius: 999px;
  background: #DBEAFE;
  color: #1D4ED8;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.2;
}
.sq-empty {
  width: 100%;
  color: var(--color-text-tertiary);
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.sq-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.sq-log {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FFF7ED;
  color: #9A3412;
  font-size: 12px;
  line-height: 1.45;
}
.sq-note {
  margin-top: 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

@keyframes sq-enter {
  from {
    transform: translateY(-8px) scale(0.94);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes sq-exit {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(8px) scale(0.92);
    opacity: 0.25;
  }
}

@media (max-width: 430px) {
  .sq-lesson-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sq-tool-row {
    grid-template-columns: 1fr;
  }
  .sq-demo-grid {
    grid-template-columns: 1fr;
  }
  .sq-stack,
  .sq-queue {
    min-height: 112px;
  }
}


.teacher-oj-card .teacher-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.teacher-oj-card .teacher-table-wrap {
  margin-top: 8px;
}

.teacher-oj-card .teacher-table td,
.teacher-oj-card .teacher-table th {
  white-space: nowrap;
}

.teacher-oj-card .teacher-table td:first-child,
.teacher-oj-card .teacher-table th:first-child {
  white-space: normal;
}

@media (max-width: 960px) {
  .teacher-oj-card .teacher-grid-two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .topbar-actions {
    gap: 8px;
    flex-wrap: wrap;
  }

  .topbar-icon,
  .topbar-logout,
  .btn,
  .teacher-action-btn,
  .teacher-mini-btn {
    min-height: 40px;
  }

  .tab-header-title {
    font-size: 18px;
  }

  .homework-item,
  .quiz-history-item,
  .notes-demo-entry,
  .teacher-card {
    border-radius: 10px;
  }

  .homework-main,
  .homework-actions,
  .quiz-history-item {
    grid-template-columns: 1fr;
  }

  .teacher-table-wrap {
    overflow-x: auto;
  }
}