/* 自动生成：python tools/build_css.py（源文件 math001/*.wxss） */

/* ===================== 全局主题 ===================== */

/* ===== Theme Variables ===== */
.theme-yellow {
  --page-bg: #FFFBEB;
  --page-bg-soft: #FEF3C7;
  --accent-color: #F59E0B;
  --accent-light: #FDE68A;
  --accent-gradient: linear-gradient(135deg, #FCD34D, #F59E0B);
  --accent-gradient-h: linear-gradient(90deg, #FCD34D, #F59E0B);
  --shadow-tint: rgba(245, 158, 11, 0.15);
  --card-bg: rgba(255,255,255,0.95);
  --tag-bg: rgba(245, 158, 11, 0.1);
  --tag-text: #B45309;
  --stat-value: #F59E0B;
}

.theme-green {
  --page-bg: #ECFDF5;
  --page-bg-soft: #D1FAE5;
  --accent-color: #10B981;
  --accent-light: #A7F3D0;
  --accent-gradient: linear-gradient(135deg, #34D399, #10B981);
  --accent-gradient-h: linear-gradient(90deg, #34D399, #10B981);
  --shadow-tint: rgba(16, 185, 129, 0.15);
  --card-bg: rgba(255,255,255,0.95);
  --tag-bg: rgba(16, 185, 129, 0.1);
  --tag-text: #047857;
  --stat-value: #10B981;
}

.theme-purple {
  --page-bg: #F5F3FF;
  --page-bg-soft: #EDE9FE;
  --accent-color: #8B5CF6;
  --accent-light: #C4B5FD;
  --accent-gradient: linear-gradient(135deg, #A78BFA, #8B5CF6);
  --accent-gradient-h: linear-gradient(90deg, #A78BFA, #8B5CF6);
  --shadow-tint: rgba(139, 92, 246, 0.15);
  --card-bg: rgba(255,255,255,0.95);
  --tag-bg: rgba(139, 92, 246, 0.1);
  --tag-text: #6D28D9;
  --stat-value: #8B5CF6;
}

.theme-blue {
  --page-bg: #EFF6FF;
  --page-bg-soft: #DBEAFE;
  --accent-color: #3B82F6;
  --accent-light: #93C5FD;
  --accent-gradient: linear-gradient(135deg, #60A5FA, #3B82F6);
  --accent-gradient-h: linear-gradient(90deg, #60A5FA, #3B82F6);
  --shadow-tint: rgba(59, 130, 246, 0.15);
  --card-bg: rgba(255,255,255,0.95);
  --tag-bg: rgba(59, 130, 246, 0.1);
  --tag-text: #1D4ED8;
  --stat-value: #3B82F6;
}

/* ===== Global Styles ===== */
page {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.page {
  min-height: 100vh;
  background: var(--page-bg, #FFFBEB);
}

/* ===== Tablet Adaptation ===== */
.page-pad {
  max-width: 620px;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
  border-left: 0.5px solid rgba(200,200,200,0.2);
  border-right: 0.5px solid rgba(200,200,200,0.2);
  position: relative;
}

/* Landscape: wider max-width for 12"+ iPads */
.page-pad.landscape {
  max-width: 920px;
  padding-left: 25px;
  padding-right: 25px;
}

.page-pad.landscape .header-title {
  font-size: 24px;
}

.page-pad.landscape .header-sub {
  font-size: 14px;
}

/* ===== Tablet overrides inside page-pad ===== */
.page-pad .numpad {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.page-pad .numpad-btn {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}

.page-pad .q-text {
  font-size: 20px;
}

.page-pad .user-cards {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.page-pad .question-card {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.page-pad .ring-wrapper .ring-container {
  width: 130px;
  height: 130px;
}

.page-pad .stats-bar {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.page-pad .chart-card,
.page-pad .records-card {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.page-pad .password-card {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.page-pad .pwd-numpad {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Landscape overrides for iPad ===== */
/* Quiz: quiz-left (question+numpad) + scratchpad side by side */
.page-pad.landscape .quiz-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.page-pad.landscape .quiz-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page-pad.landscape .question-card {
  flex: 1;
  max-width: none;
  margin-bottom: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
}

.page-pad.landscape .q-text {
  font-size: 15px;
}

.page-pad.landscape .q-body {
  min-height: 50px;
}

.page-pad.landscape .numpad {
  flex-shrink: 0;
  margin: 0;
  padding-top: 0;
}

.page-pad.landscape .numpad-btn {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}

.page-pad.landscape .scratchpad-area {
  width: 360px;
  flex-shrink: 0;
}

/* Landscape: larger login cards */
.page-pad.landscape .user-cards {
  max-width: 620px;
}

.page-pad.landscape .user-card {
  padding: 25px 15px;
}

.page-pad.landscape .user-avatar {
  width: 70px;
  height: 70px;
  border-radius: 35px;
}

.page-pad.landscape .user-emoji {
  font-size: 32px;
}

.page-pad.landscape .user-name {
  font-size: 19px;
}

/* Landscape: password area */
.page-pad.landscape .password-card {
  max-width: 620px;
  padding: 20px 25px;
}

.page-pad.landscape .pwd-key {
  height: 45px;
  line-height: 45px;
  font-size: 19px;
}

/* Landscape: result page */
.page-pad.landscape .medal {
  font-size: 70px;
}

.page-pad.landscape .encouragement {
  font-size: 24px;
}

.page-pad.landscape .star {
  font-size: 32px;
}

.page-pad.landscape .buttons {
  flex-direction: row;
}

/* Landscape: history page */
.page-pad.landscape .chart-container {
  height: 240px;
}

.page-pad.landscape .stats-bar {
  max-width: none;
}

.page-pad.landscape .chart-card,
.page-pad.landscape .records-card {
  max-width: none;
}

/* Landscape: teacher page */
.page-pad.landscape .page-inner {
  max-width: none;
}

.page-pad.landscape .tab-item {
  padding: 9px 18px;
}

.page-pad.landscape .type-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 15px;
}

.page-pad.landscape .type-item {
  padding: 8px 0;
}

/* Landscape: changelog page */
.page-pad.landscape .log-items {
  columns: 2;
  column-gap: 20px;
}

.page-pad.landscape .log-item {
  break-inside: avoid;
}



/* ===================== index ===================== */

.page-index{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px;
  box-sizing: border-box;
}

/* ===== Shared Header ===== */
.page-index .header-compact{
  text-align: center;
  margin-bottom: 20px;
}

.page-index .header-icon{
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
}

.page-index .header-title{
  font-size: 21px;
  font-weight: bold;
  color: #333;
  display: block;
}

.page-index .header-sub{
  font-size: 13px;
  color: #888;
  margin-top: 4px;
  display: block;
}

/* ===== Step 1: Login ===== */
.page-index .step-login{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-index .section-label{
  font-size: 15px;
  color: #666;
  margin-bottom: 15px;
  font-weight: 600;
  display: block;
}

.page-index .user-cards{
  width: 100%;
  display: flex;
  gap: 12px;
}

.page-index .user-card{
  flex: 1;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 15px var(--shadow-tint);
  transition: transform 0.2s;
}

.page-index .user-card:active{
  transform: scale(0.95);
}

.page-index .user-avatar{
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 2px solid var(--accent-light);
  background: var(--tag-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.page-index .user-emoji{
  font-size: 28px;
}

.page-index .user-name{
  font-size: 17px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.page-index .user-hint{
  font-size: 12px;
  color: #999;
}

/* ===== Step 2: Password ===== */
.page-index .step-password{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-index .password-card{
  width: 100%;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 18px 15px;
  box-shadow: 0 4px 15px var(--shadow-tint);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-index .pwd-user-info{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.page-index .pwd-avatar{
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--tag-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-index .pwd-user-name{
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.page-index .pwd-label{
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
  display: block;
}

.page-index .pwd-dots{
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.page-index .pwd-dot{
  font-size: 20px;
  color: #ddd;
  transition: color 0.2s;
}

.page-index .pwd-dot.filled{
  color: var(--accent-color);
}

.page-index .pwd-numpad{
  width: 100%;
  margin-bottom: 12px;
}

.page-index .pwd-row{
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.page-index .pwd-key{
  flex: 1;
  height: 40px;
  line-height: 40px;
  background: #f5f7ff;
  border-radius: 7px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #333;
}

.page-index .pwd-key:active{
  transform: scale(0.94);
  opacity: 0.7;
}

.page-index .pwd-key-fn{
  background: #eee;
  color: #666;
  font-size: 15px;
}

.page-index .pwd-actions{
  width: 100%;
  display: flex;
  gap: 8px;
}

.page-index .pwd-btn-back, .page-index .pwd-btn-login{
  flex: 1;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

.page-index .pwd-btn-back{
  background: #f0f0f0;
  color: #666;
}

.page-index .pwd-btn-back:active{ opacity: 0.7; }

.page-index .pwd-btn-login{
  background: #ccc;
  color: #fff;
}

.page-index .pwd-btn-login.active{
  background: var(--accent-gradient);
}

.page-index .pwd-btn-login::after, .page-index .pwd-btn-back::after{ border: none; }

.page-index .forgot-link{
  margin-top: 10px;
  padding: 5px 0;
}

.page-index .forgot-link text{
  font-size: 13px;
  color: var(--accent-color, #667eea);
  text-decoration: underline;
}

/* ===== Security Question ===== */
.page-index .security-section{
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.page-index .security-question{
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.page-index .security-hint{
  font-size: 12px;
  color: #999;
  display: block;
}

.page-index .security-input-area{
  width: 100%;
  margin: 10px 0;
}

.page-index .security-input{
  width: 100%;
  height: 44px;
  background: #f5f7ff;
  border: 1px solid var(--accent-light);
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  color: #333;
  padding: 0 10px;
  box-sizing: border-box;
}

.page-index .security-answer-display{
  font-size: 20px;
  color: var(--accent-color, #667eea);
  font-weight: 700;
  letter-spacing: 4px;
  min-height: 24px;
}

/* ===== Step 3: Menu ===== */
.page-index .step-menu{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-index .welcome-card{
  width: 100%;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px var(--shadow-tint);
}

.page-index .welcome-emoji{
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
}

.page-index .welcome-text{
  font-size: 17px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.page-index .welcome-stat{
  font-size: 13px;
  color: #999;
  display: block;
}

.page-index .menu-cards{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-index .menu-card{
  background: var(--card-bg);
  border-radius: 10px;
  padding: 14px 15px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.page-index .menu-card:active{
  transform: scale(0.98);
  opacity: 0.9;
}

.page-index .menu-icon{
  font-size: 22px;
  margin-right: 10px;
  flex-shrink: 0;
}

.page-index .menu-info{
  flex: 1;
}

.page-index .menu-label{
  font-size: 15px;
  font-weight: 600;
  color: #333;
  display: block;
}

.page-index .menu-desc{
  font-size: 12px;
  color: #999;
  margin-top: 2px;
  display: block;
}

.page-index .menu-arrow{
  font-size: 20px;
  color: #ccc;
  margin-left: auto;
}

.page-index .menu-start{ border-left: 3px solid var(--accent-color); }
.page-index .menu-history{ border-left: 3px solid var(--accent-color); }
.page-index .menu-pwd{ border-left: 3px solid var(--accent-color); }
.page-index .menu-changelog{ border-left: 3px solid var(--accent-color); }
.page-index .menu-switch{ border-left: 3px solid var(--accent-light); }

.page-index .topics-bar{
  width: 100%;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px var(--shadow-tint);
}

.page-index .topics-label{
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 6px;
}

.page-index .topics-list{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.page-index .topic-tag{
  font-size: 11px;
  color: var(--tag-text);
  background: var(--tag-bg);
  padding: 3px 9px;
  border-radius: 10px;
}

.page-index .version-bar{
  position: fixed;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.page-index .version-text{
  font-size: 11px;
  color: #ccc;
}

/* ===== iPad：缩小并允许滚动 ===== */
.page-index .page-pad{ padding: 6px 7px; min-height: 100vh; }
.page-index .page-pad .header-compact{ margin-bottom: 5px; }
.page-index .page-pad .header-icon{ font-size: 10px; margin-bottom: 1px; }
.page-index .page-pad .header-title{ font-size: 8px; }
.page-index .page-pad .header-sub{ font-size: 6px; margin-top: 0; }
.page-index .page-pad .section-label{ font-size: 7px; margin-bottom: 4px; }
.page-index .page-pad .user-cards{ gap: 4px; }
.page-index .page-pad .user-card{ padding: 6px 4px; border-radius: 6px; }
.page-index .page-pad .user-avatar{ width: 20px; height: 20px; border-radius: 10px; margin-bottom: 2px; }
.page-index .page-pad .user-emoji{ font-size: 11px; }
.page-index .page-pad .user-name{ font-size: 7px; margin-bottom: 0.5px; }
.page-index .page-pad .user-hint{ font-size: 6px; }
.page-index .page-pad .password-card{ padding: 6px 6px; border-radius: 6px; }
.page-index .page-pad .pwd-user-info{ gap: 3px; margin-bottom: 3px; }
.page-index .page-pad .pwd-avatar{ font-size: 8px; width: 14px; height: 14px; border-radius: 7px; }
.page-index .page-pad .pwd-user-name{ font-size: 7px; }
.page-index .page-pad .pwd-label{ font-size: 6px; margin-bottom: 3px; }
.page-index .page-pad .pwd-dots{ gap: 3px; margin-bottom: 4px; }
.page-index .page-pad .pwd-dot{ font-size: 9px; }
.page-index .page-pad .pwd-row{ gap: 2px; margin-bottom: 2px; }
.page-index .page-pad .pwd-key{ height: 15px; line-height: 15px; font-size: 8px; border-radius: 3px; }
.page-index .page-pad .pwd-key-fn{ font-size: 7px; }
.page-index .page-pad .pwd-actions{ gap: 3px; }
.page-index .page-pad .pwd-btn-back, .page-index .page-pad .pwd-btn-login{ height: 15px; line-height: 15px; font-size: 7px; border-radius: 7.5px; }
.page-index .page-pad .pwd-numpad{ margin-bottom: 3px; }
.page-index .page-pad .forgot-link{ margin-top: 3px; padding: 1px 0; }
.page-index .page-pad .forgot-link text{ font-size: 6px; }
.page-index .page-pad .security-question{ font-size: 8px; margin-bottom: 0.5px; }
.page-index .page-pad .security-hint{ font-size: 6px; }
.page-index .page-pad .security-input{ height: 15px; font-size: 8px; border-radius: 3px; }
.page-index .page-pad .security-answer-display{ font-size: 8px; min-height: 10px; }
.page-index .page-pad .security-input-area{ margin: 3px 0; }
.page-index .page-pad .welcome-card{ padding: 6px; margin-bottom: 4px; }
.page-index .page-pad .welcome-emoji{ font-size: 12px; }
.page-index .page-pad .welcome-text{ font-size: 8px; margin-bottom: 0.5px; }
.page-index .page-pad .welcome-stat{ font-size: 6px; }
.page-index .page-pad .menu-cards{ gap: 3px; }
.page-index .page-pad .menu-card{ padding: 5px 7px; border-radius: 5px; }
.page-index .page-pad .menu-icon{ font-size: 9px; margin-right: 5px; }
.page-index .page-pad .menu-label{ font-size: 7px; }
.page-index .page-pad .menu-desc{ font-size: 6px; }
.page-index .page-pad .menu-arrow{ font-size: 8px; }
.page-index .page-pad .topics-bar{ padding: 4px 6px; margin-bottom: 4px; border-radius: 4px; }
.page-index .page-pad .topics-label{ font-size: 6px; margin-bottom: 2px; }
.page-index .page-pad .topics-list{ gap: 2px; }
.page-index .page-pad .topic-tag{ font-size: 6px; padding: 1px 4px; border-radius: 5px; }
.page-index .page-pad .version-bar{ position: relative; bottom: auto; margin-top: 4px; }
.page-index .page-pad .version-text{ font-size: 6px; }

/* ===== iPad横屏：极致紧凑 ===== */
.page-index .page-pad.landscape{ padding: 2px 6px 1px; }
.page-index .page-pad.landscape .header-compact{ margin-bottom: 2px; }
.page-index .page-pad.landscape .header-icon{ font-size: 8px; margin-bottom: 0; }
.page-index .page-pad.landscape .header-title{ font-size: 6.5px; }
.page-index .page-pad.landscape .header-sub{ font-size: 5px; margin-top: 0; }
.page-index .page-pad.landscape .section-label{ font-size: 6px; margin-bottom: 2px; }
.page-index .page-pad.landscape .user-cards{ gap: 2px; }
.page-index .page-pad.landscape .user-card{ padding: 3px 3px; border-radius: 4px; }
.page-index .page-pad.landscape .user-avatar{ width: 14px; height: 14px; border-radius: 7px; margin-bottom: 1px; }
.page-index .page-pad.landscape .user-emoji{ font-size: 8px; }
.page-index .page-pad.landscape .user-name{ font-size: 6px; }
.page-index .page-pad.landscape .user-hint{ font-size: 5px; }
.page-index .page-pad.landscape .password-card{ padding: 3px 4px; border-radius: 4px; }
.page-index .page-pad.landscape .pwd-user-info{ gap: 1.5px; margin-bottom: 2px; }
.page-index .page-pad.landscape .pwd-avatar{ font-size: 7px; width: 11px; height: 11px; border-radius: 5.5px; }
.page-index .page-pad.landscape .pwd-user-name{ font-size: 6.5px; }
.page-index .page-pad.landscape .pwd-label{ font-size: 5.5px; margin-bottom: 1.5px; }
.page-index .page-pad.landscape .pwd-dots{ gap: 1.5px; margin-bottom: 2px; }
.page-index .page-pad.landscape .pwd-dot{ font-size: 7px; }
.page-index .page-pad.landscape .pwd-row{ gap: 1.5px; margin-bottom: 1.5px; }
.page-index .page-pad.landscape .pwd-key{ height: 12px; line-height: 12px; font-size: 6.5px; border-radius: 2.5px; }
.page-index .page-pad.landscape .pwd-key-fn{ font-size: 5.5px; }
.page-index .page-pad.landscape .pwd-actions{ gap: 1.5px; }
.page-index .page-pad.landscape .pwd-btn-back, .page-index .page-pad.landscape .pwd-btn-login{ height: 12px; line-height: 12px; font-size: 6.5px; border-radius: 6px; }
.page-index .page-pad.landscape .pwd-numpad{ margin-bottom: 1.5px; }
.page-index .page-pad.landscape .forgot-link{ margin-top: 1px; padding: 0; }
.page-index .page-pad.landscape .forgot-link text{ font-size: 5px; }
.page-index .page-pad.landscape .security-question{ font-size: 6.5px; margin-bottom: 0; }
.page-index .page-pad.landscape .security-hint{ font-size: 5px; }
.page-index .page-pad.landscape .security-input{ height: 12px; font-size: 6.5px; border-radius: 2.5px; }
.page-index .page-pad.landscape .security-answer-display{ font-size: 7px; min-height: 8px; }
.page-index .page-pad.landscape .security-input-area{ margin: 1.5px 0; }
.page-index .page-pad.landscape .welcome-card{ padding: 3px 4px; margin-bottom: 2px; }
.page-index .page-pad.landscape .welcome-emoji{ font-size: 9px; margin-bottom: 0; }
.page-index .page-pad.landscape .welcome-text{ font-size: 6.5px; margin-bottom: 0; }
.page-index .page-pad.landscape .welcome-stat{ font-size: 5px; }
.page-index .page-pad.landscape .menu-cards{ gap: 1.5px; }
.page-index .page-pad.landscape .menu-card{ padding: 3px 5px; border-radius: 3px; }
.page-index .page-pad.landscape .menu-icon{ font-size: 7px; margin-right: 3px; }
.page-index .page-pad.landscape .menu-label{ font-size: 6.5px; }
.page-index .page-pad.landscape .menu-desc{ font-size: 5px; }
.page-index .page-pad.landscape .menu-arrow{ font-size: 7px; }
.page-index .page-pad.landscape .topics-bar{ padding: 2px 4px; margin-bottom: 2px; }
.page-index .page-pad.landscape .topics-label{ font-size: 5px; margin-bottom: 1px; }
.page-index .page-pad.landscape .topics-list{ gap: 1px; }
.page-index .page-pad.landscape .topic-tag{ font-size: 5px; padding: 0.5px 3px; }
.page-index .page-pad.landscape .version-text{ font-size: 5px; }



/* ===================== quiz ===================== */

.page-quiz{
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 5px 15px 10px;
  box-sizing: border-box;
}

.page-quiz .quiz-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page-quiz .progress-section{
  margin-bottom: 5px;
}

.page-quiz .progress-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.page-quiz .progress-text{
  font-size: 13px;
  color: #666;
  display: block;
}

.page-quiz .timer{
  font-size: 14px;
  color: #666;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.page-quiz .timer.timer-warning{
  color: #FF5252;
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.page-quiz .progress-bar{
  width: 100%;
  height: 6px;
  background: var(--accent-light);
  border-radius: 3px;
  overflow: hidden;
}

.page-quiz .progress-fill{
  height: 100%;
  background: var(--accent-gradient-h);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.page-quiz .quiz-left{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page-quiz .question-card{
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 12px 15px;
  box-shadow: 0 4px 20px var(--shadow-tint);
  text-align: center;
  min-height: 0;
}

.page-quiz .q-body{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.page-quiz .q-text{
  font-size: 20.5px;
  color: #333;
  font-weight: 600;
  text-align: left;
  line-height: 1.6;
  white-space: pre-wrap;
  width: 100%;
}

.page-quiz .q-answer-area{
  display: flex;
  justify-content: center;
}

.page-quiz .answer-display{
  background: var(--tag-bg);
  border: 1px solid var(--accent-light);
  border-radius: 8px;
  padding: 8px 20px;
  min-width: 100px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-quiz .answer-value{
  font-size: 22px;
  color: #333;
  font-weight: bold;
}

.page-quiz .answer-value.placeholder{
  color: #ccc;
  font-size: 14px;
  font-weight: normal;
}

.page-quiz .cursor{
  width: 1.5px;
  height: 22px;
  background: var(--accent-color);
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.page-quiz .feedback-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-quiz .feedback-card{
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  padding: 25px 35px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.page-quiz .feedback-card.correct{
  border: 2px solid #4CAF50;
}

.page-quiz .feedback-card.wrong{
  border: 2px solid #FF5252;
}

.page-quiz .feedback-icon{
  font-size: 40px;
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
}

.page-quiz .feedback-card.correct .feedback-icon{ color: #4CAF50; }
.page-quiz .feedback-card.wrong .feedback-icon{ color: #FF5252; }

.page-quiz .feedback-text{
  font-size: 17px;
  color: #333;
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.page-quiz .feedback-answer{
  font-size: 14px;
  color: #FF5252;
  display: block;
}

.page-quiz .numpad{
  margin-top: auto;
  padding-top: 6px;
  flex-shrink: 0;
}

.page-quiz .numpad-row{
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.page-quiz .numpad-btn{
  flex: 1;
  height: 44px;
  line-height: 44px;
  background: rgba(255,255,255,0.94);
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.page-quiz .numpad-btn:active{
  transform: scale(0.95);
  opacity: 0.8;
}

.page-quiz .numpad-btn-fn{
  background: rgba(255,255,255,0.78);
  color: #666;
  font-size: 16px;
}

.page-quiz .numpad-btn-point{
  color: var(--accent-color);
}

.page-quiz .numpad-btn-submit{
  background: #ddd;
  color: #999;
  font-size: 17px;
}

.page-quiz .numpad-btn-submit.active{
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 16px var(--shadow-tint);
}

/* ===== 选择题键盘 ===== */
.page-quiz .choice-row{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.page-quiz .choice-btn{
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-color);
  background: var(--tag-bg);
  border: 1px solid var(--accent-light);
  border-radius: 10px;
  transition: all 0.15s ease;
}

.page-quiz .choice-btn:active{
  transform: scale(0.92);
}

.page-quiz .choice-btn.choice-selected{
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px var(--shadow-tint);
}

/* ===== 有余数除法：商余双输入 ===== */
.page-quiz .q-answer-area-remainder{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.page-quiz .remainder-field{
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--tag-bg);
  border: 1px solid var(--accent-light);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 60px;
  min-height: 32px;
  justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.page-quiz .remainder-field.active{
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1.5px var(--shadow-tint);
}

.page-quiz .rf-label{
  font-size: 13px;
  color: var(--accent-color);
  font-weight: 600;
}

.page-quiz .rf-value{
  font-size: 22px;
  color: #333;
  font-weight: bold;
  min-width: 15px;
  text-align: center;
}

.page-quiz .rf-value.empty{
  color: #ccc;
  font-size: 16px;
  font-weight: normal;
}

.page-quiz .rf-cursor{
  width: 1.5px;
  height: 22px;
  background: var(--accent-color);
  animation: blink 1s step-end infinite;
}

.page-quiz .remainder-sep{
  font-size: 20px;
  color: #999;
  font-weight: bold;
}

/* ===== 草稿手写区 ===== */
.page-quiz .scratchpad-area{
  display: flex;
  flex-direction: column;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  min-height: 150px;
}

.page-quiz .scratchpad-toolbar{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: #fff;
  border-bottom: 0.5px solid #E5E7EB;
  flex-shrink: 0;
}

.page-quiz .sp-tool-group{
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-quiz .sp-tool-label{
  font-size: 11px;
  color: #999;
  margin-right: 1px;
}

.page-quiz .sp-color{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  box-sizing: border-box;
}

.page-quiz .sp-color.active{
  border-color: #333;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.12);
}

.page-quiz .sp-size{
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  background: #F3F4F6;
  border-radius: 4px;
  border: 1px solid transparent;
}

.page-quiz .sp-size.active{
  color: var(--accent-color);
  background: var(--tag-bg);
  border-color: var(--accent-light);
}

.page-quiz .sp-btn{
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 14px;
  background: #F3F4F6;
  border-radius: 4px;
  border: 1px solid transparent;
}

.page-quiz .sp-btn.active{
  background: #FEF2F2;
  border-color: #FCA5A5;
}

.page-quiz .scratchpad-canvas{
  flex: 1;
  width: 100%;
  min-height: 100px;
  background: #fff;
  touch-action: none;
}

/* ===== iPad横屏：双栏布局，充分利用屏幕宽度 ===== */
.page-quiz .page-pad.landscape{ padding: 1px 6px 1px; }
.page-quiz .page-pad.landscape .quiz-main{
  flex-direction: row;
  gap: 5px;
}
.page-quiz .page-pad.landscape .quiz-left{
  flex: 0 0 48%;
  min-height: 0;
  max-width: 48%;
}
.page-quiz .page-pad.landscape .scratchpad-area{
  flex: 0 0 48%;
  min-height: 0;
  max-width: 48%;
}
.page-quiz .page-pad.landscape .progress-section{ margin-bottom: 1px; }
.page-quiz .page-pad.landscape .progress-bar{ height: 1.5px; border-radius: 1px; }
.page-quiz .page-pad.landscape .progress-text{ font-size: 6px; }
.page-quiz .page-pad.landscape .progress-header{ margin-bottom: 0.5px; }
.page-quiz .page-pad.landscape .timer{ font-size: 6px; }
.page-quiz .page-pad.landscape .question-card{ padding: 4px 7px; border-radius: 7px; }
.page-quiz .page-pad.landscape .q-text{ font-size: 17px; line-height: 1.4; }
.page-quiz .page-pad.landscape .q-body{ margin-bottom: 3px; }
.page-quiz .page-pad.landscape .answer-display{ padding: 2px 8px; min-width: 40px; min-height: 14px; border-radius: 3px; }
.page-quiz .page-pad.landscape .answer-value{ font-size: 9px; }
.page-quiz .page-pad.landscape .answer-value.placeholder{ font-size: 7px; }
.page-quiz .page-pad.landscape .numpad{ padding-top: 1px; }
.page-quiz .page-pad.landscape .numpad-row{ gap: 2px; margin-bottom: 2px; }
.page-quiz .page-pad.landscape .numpad-btn{ font-size: 14px; height: 20px; line-height: 20px; border-radius: 4px; }
.page-quiz .page-pad.landscape .numpad-btn-fn{ font-size: 7px; }
.page-quiz .page-pad.landscape .numpad-btn-submit{ font-size: 7px; }
.page-quiz .page-pad.landscape .choice-row{ gap: 2px; margin-bottom: 2px; }
.page-quiz .page-pad.landscape .choice-btn{ font-size: 8px; border-radius: 4px; }
.page-quiz .page-pad.landscape .rf-label{ font-size: 6px; }
.page-quiz .page-pad.landscape .rf-value{ font-size: 8px; }
.page-quiz .page-pad.landscape .rf-value.empty{ font-size: 7px; }
.page-quiz .page-pad.landscape .remainder-sep{ font-size: 8px; }
.page-quiz .page-pad.landscape .remainder-field{ padding: 1.5px 5px; min-width: 25px; min-height: 14px; border-radius: 3px; gap: 1.5px; }
.page-quiz .page-pad.landscape .feedback-icon{ font-size: 18px; margin-bottom: 2px; }
.page-quiz .page-pad.landscape .feedback-text{ font-size: 9px; margin-bottom: 1px; }
.page-quiz .page-pad.landscape .feedback-answer{ font-size: 7px; }
.page-quiz .page-pad.landscape .feedback-card{ padding: 10px 18px; border-radius: 7px; }
.page-quiz .page-pad.landscape .cursor{ height: 9px; width: 1px; }
.page-quiz .page-pad.landscape .rf-cursor{ height: 8px; width: 1px; }

/* ===== 草稿区横屏工具栏缩小 ===== */
.page-quiz .page-pad.landscape .scratchpad-toolbar{ padding: 0.5px 3px; gap: 1.5px; }
.page-quiz .page-pad.landscape .sp-tool-label{ font-size: 5.5px; }
.page-quiz .page-pad.landscape .sp-tool-group{ gap: 1.5px; }
.page-quiz .page-pad.landscape .sp-color{ width: 9px; height: 9px; border-width: 0.5px; }
.page-quiz .page-pad.landscape .sp-size{ width: 14px; height: 14px; line-height: 14px; font-size: 7px; }
.page-quiz .page-pad.landscape .sp-btn{ width: 14px; height: 14px; line-height: 14px; font-size: 8px; }



/* ===================== result ===================== */

.page-result{
  min-height: 100vh;
  position: relative;
  transition: background 0.5s ease;
}

.page-result.perfect{ background: linear-gradient(135deg, #FFD700, #FFA500); }
.page-result.excellent{ background: linear-gradient(135deg, #4CAF50, #66BB6A); }
.page-result.good{ background: linear-gradient(135deg, #42A5F5, #26C6DA); }
.page-result.ok{ background: linear-gradient(135deg, #FFA726, #FFCC02); }
.page-result.try{ background: linear-gradient(135deg, #90A4AE, #B0BEC5); }

.page-result .confetti-canvas{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.page-result .scroll-content{
  position: relative;
  z-index: 2;
  height: 100vh;
  padding: 20px 15px;
  box-sizing: border-box;
}

.page-result .celebration{
  text-align: center;
  margin-bottom: 10px;
  padding-top: 10px;
}

.page-result .medal{
  font-size: 60px;
  display: block;
  margin-bottom: 8px;
  animation: medalBounce 0.8s ease;
}

@keyframes medalBounce {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.page-result .encouragement{
  font-size: 21px;
  font-weight: bold;
  color: #fff;
  display: block;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.page-result .encouragement-sub{
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-top: 5px;
  display: block;
}

.page-result .ring-wrapper{
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.page-result .ring-container{
  width: 140px;
  height: 140px;
  position: relative;
}

.page-result .score-ring{
  width: 100%;
  height: 100%;
}

.page-result .ring-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.page-result .ring-center .score-number{
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  display: block;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.page-result .score-label{
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  display: block;
  margin-top: -4px;
}

.page-result .stars-section{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 8px 0;
}

.page-result .star{
  font-size: 28px;
  color: rgba(255,255,255,0.3);
  opacity: 0;
  animation: starAppear 0.5s ease forwards;
}

.page-result .star.filled{
  color: #FFD700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

@keyframes starAppear {
  from { opacity: 0; transform: scale(0) rotate(-30deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.page-result .summary{
  text-align: center;
  margin: 6px 0 10px;
}

.page-result .summary-text{
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  display: block;
}

.page-result .wrong-section{
  width: 100%;
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 15px;
  margin: 10px 0;
  box-sizing: border-box;
}

.page-result .wrong-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.page-result .wrong-title{
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.page-result .wrong-count{
  font-size: 12px;
  color: #FF5252;
  background: rgba(255, 82, 82, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

.page-result .wrong-item{
  border-top: 1px solid #f0f0f0;
  padding: 10px 0;
}

.page-result .wrong-item:first-of-type{
  border-top: none;
  padding-top: 0;
}

.page-result .wrong-q-header{
  margin-bottom: 4px;
}

.page-result .wrong-q-num{
  font-size: 11px;
  color: #999;
}

.page-result .wrong-question{
  font-size: 15px;
  color: #333;
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  white-space: pre-wrap;
}

.page-result .wrong-compare{
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.page-result .wrong-user{
  font-size: 13px;
  color: #FF5252;
}

.page-result .wrong-user-val{
  font-weight: bold;
  text-decoration: line-through;
}

.page-result .wrong-correct{
  font-size: 13px;
  color: #4CAF50;
}

.page-result .wrong-correct-val{
  font-weight: bold;
}

.page-result .perfect-section{
  text-align: center;
  padding: 15px 0;
}

.page-result .perfect-text{
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

.page-result .buttons{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0 10px;
}

.page-result .btn-retry, .page-result .btn-home{
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.page-result .btn-retry{
  background: #fff;
  color: var(--accent-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.page-result .btn-retry:active{ transform: scale(0.97); }

.page-result .btn-home{
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}

.page-result .btn-home:active{ transform: scale(0.97); background: rgba(255,255,255,0.3); }

.page-result .btn-retry::after, .page-result .btn-home::after{ border: none; }

.page-result .bottom-spacer{
  height: 20px;
}



/* ===================== history ===================== */

.page-history{
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.page-history .stats-bar{
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.page-history .stat-item{
  flex: 1;
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 10px 4px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.page-history .stat-value{
  font-size: 18px;
  font-weight: bold;
  color: var(--stat-value);
  display: block;
}

.page-history .stat-label{
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  display: block;
}

.page-history .chart-card, .page-history .records-card{
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.page-history .card-title{
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.page-history .chart-container{
  width: 100%;
  height: 210px;
  position: relative;
}

.page-history .chart-canvas{
  width: 100%;
  height: 100%;
}

.page-history .chart-empty{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-history .empty-emoji{
  font-size: 32px;
  margin-bottom: 6px;
}

.page-history .empty-text{
  font-size: 13px;
  color: #ccc;
}

.page-history .records-list{
  max-height: 300px;
  overflow-y: auto;
}

.page-history .record-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.page-history .record-item:last-child{
  border-bottom: none;
}

.page-history .record-left{
  display: flex;
  flex-direction: column;
}

.page-history .record-date{
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.page-history .record-time{
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
}

.page-history .record-right{
  text-align: right;
}

.page-history .record-score{
  font-size: 16px;
  font-weight: bold;
  display: block;
}

.page-history .record-score.high{ color: #4CAF50; }
.page-history .record-score.mid{ color: #FF9800; }
.page-history .record-score.low{ color: #FF5252; }

.page-history .record-detail{
  font-size: 11px;
  color: #999;
  margin-top: 1px;
  display: block;
}

.page-history .bottom-spacer{
  height: 20px;
}

/* ===== Teacher User Tabs ===== */
.page-history .user-tabs{
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.page-history .user-tab{
  flex: 1;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: rgba(255,255,255,0.7);
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #999;
}

.page-history .user-tab.active{
  background: var(--card-bg);
  color: var(--accent-color);
  box-shadow: 0 4px 16px var(--shadow-tint);
}

/* ===== Delete Button ===== */
.page-history .record-delete{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  flex-shrink: 0;
}

.page-history .delete-icon{
  font-size: 16px;
  opacity: 0.5;
}

.page-history .record-delete:active .delete-icon{
  opacity: 1;
}

/* ===== Delete Modal ===== */
.page-history .modal-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.page-history .modal-content{
  background: #fff;
  border-radius: 12px;
  padding: 20px 25px;
  width: 280px;
  text-align: center;
}

.page-history .modal-title{
  font-size: 17px;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.page-history .modal-desc{
  font-size: 14px;
  color: #888;
  display: block;
  margin-bottom: 16px;
}

.page-history .modal-actions{
  display: flex;
  gap: 10px;
}

.page-history .modal-btn{
  flex: 1;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

.page-history .modal-btn-cancel{
  background: #f0f0f0;
  color: #666;
}

.page-history .modal-btn-cancel:active{ opacity: 0.7; }

.page-history .modal-btn-confirm{
  background: #FF5252;
  color: #fff;
}

.page-history .modal-btn-confirm:active{ opacity: 0.8; }

.page-history .modal-btn::after{ border: none; }



/* ===================== teacher ===================== */

.page-teacher{
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.page-teacher .page-inner{
  max-width: 350px;
  margin: 0 auto;
}

/* Tab Bar */
.page-teacher .tab-bar{
  display: flex;
  white-space: nowrap;
  margin-bottom: 12px;
  padding: 3px;
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 2px 12px var(--shadow-tint);
}

.page-teacher .tab-item{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  margin-right: 3px;
  transition: all 0.25s;
  cursor: pointer;
}

.page-teacher .tab-item.active{
  background: var(--accent-gradient, linear-gradient(135deg, #667eea, #764ba2));
  box-shadow: 0 2px 8px var(--shadow-tint);
}

.page-teacher .tab-item.active .tab-label{
  color: #fff;
  font-weight: 700;
}

.page-teacher .tab-item.active .tab-count{
  color: rgba(255,255,255,0.8);
}

.page-teacher .tab-label{
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.page-teacher .tab-count{
  font-size: 10px;
  color: #aaa;
  margin-top: 2px;
}

/* Card */
.page-teacher .card{
  background: var(--card-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 20px var(--shadow-tint);
  margin-bottom: 12px;
}

.page-teacher .card-header{
  margin-bottom: 12px;
}

.page-teacher .card-title{
  font-size: 17px;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.page-teacher .card-desc{
  font-size: 13px;
  color: #999;
  display: block;
}

/* Module Group */
.page-teacher .module-group{
  margin-bottom: 8px;
}

.page-teacher .module-group:last-child{
  margin-bottom: 0;
}

.page-teacher .module-header{
  padding: 6px 0 4px;
  border-bottom: 2px solid var(--accent-color, #667eea);
  margin-bottom: 2px;
}

.page-teacher .module-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-color, #667eea);
}

.page-teacher .type-list{
  display: flex;
  flex-direction: column;
}

.page-teacher .type-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.page-teacher .type-item:last-child{
  border-bottom: none;
}

.page-teacher .type-info{
  flex: 1;
}

.page-teacher .type-name-row{
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-teacher .type-name{
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.page-teacher .type-stars{
  font-size: 11px;
  color: #ff9800;
  font-weight: 700;
  background: rgba(255, 152, 0, 0.1);
  padding: 1px 6px;
  border-radius: 6px;
}

.page-teacher .type-weight{
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
  display: block;
}

/* Switch */
.page-teacher .switch{
  width: 46px;
  height: 25px;
  background: #ddd;
  border-radius: 12.5px;
  position: relative;
  transition: background 0.25s;
  flex-shrink: 0;
}

.page-teacher .switch.on{
  background: var(--accent-color);
}

.page-teacher .switch-knob{
  width: 21px;
  height: 21px;
  background: #fff;
  border-radius: 10.5px;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: left 0.25s;
}

.page-teacher .switch.on .switch-knob{
  left: 23px;
}

/* Empty hint */
.page-teacher .empty-hint{
  padding: 20px 0;
  text-align: center;
}

.page-teacher .empty-text{
  font-size: 14px;
  color: #bbb;
}

/* Hint card */
.page-teacher .hint-card{
  background: rgba(255,255,255,0.85);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 15px;
}

.page-teacher .hint-icon{
  font-size: 14px;
  flex-shrink: 0;
}

.page-teacher .hint-text{
  font-size: 12px;
  color: #888;
  line-height: 1.6;
}

/* Buttons */
.page-teacher .actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-teacher .btn-save, .page-teacher .btn-reset{
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.page-teacher .btn-save{
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 16px var(--shadow-tint);
}

.page-teacher .btn-save:active{ transform: scale(0.97); }

.page-teacher .btn-reset{
  background: #f0f0f0;
  color: #666;
}

.page-teacher .btn-reset:active{ opacity: 0.7; }

.page-teacher .btn-save::after, .page-teacher .btn-reset::after{ border: none; }

/* Settings */
.page-teacher .setting-block{
  margin-bottom: 12px;
}

.page-teacher .setting-block:last-child{
  margin-bottom: 0;
}

.page-teacher .setting-block-label{
  font-size: 14px;
  color: #333;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.page-teacher .option-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-teacher .option-btn{
  flex: 1;
  min-width: 50px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 14px;
  color: #666;
  font-weight: 600;
  transition: all 0.15s;
}

.page-teacher .option-btn:active{
  opacity: 0.7;
}

.page-teacher .option-btn.selected{
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 2px 8px var(--shadow-tint);
}

.page-teacher .bottom-spacer{
  height: 20px;
}



/* ===================== help ===================== */

.page-help{
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 16px 15px;
  box-sizing: border-box;
  background: #f5f5f5;
}

/* 加载 / 错误 */
.page-help .loading-wrap, .page-help .error-wrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-help .loading-text{ font-size: 14px; color: #999; }
.page-help .error-icon{ font-size: 40px; }
.page-help .error-text{ font-size: 15px; color: #666; }

/* 求助头部 */
.page-help .help-header{
  text-align: center;
  margin-bottom: 12px;
}
.page-help .help-asker{
  display: block;
  font-size: 16px;
  color: #333;
  font-weight: 700;
  margin-bottom: 2px;
}
.page-help .help-hint{
  display: block;
  font-size: 12px;
  color: #999;
}

/* 题目卡片 */
.page-help .question-card{
  background: #fff;
  border-radius: 12px;
  padding: 20px 15px;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  text-align: center;
}

.page-help .q-body{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  min-height: 40px;
}

.page-help .q-text{
  font-size: 20px;
  color: #333;
  font-weight: 600;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 答案显示 */
.page-help .q-answer-area{
  display: flex;
  justify-content: center;
}

.page-help .answer-display{
  background: #F5F7FA;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 25px;
  min-width: 110px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-help .answer-value{
  font-size: 24px;
  color: #333;
  font-weight: bold;
}
.page-help .answer-value.placeholder{
  color: #ccc;
  font-size: 15px;
  font-weight: normal;
}

.page-help .cursor{
  width: 1.5px;
  height: 24px;
  background: #FF9800;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 有余数除法 */
.page-help .q-answer-area-remainder{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-help .remainder-field{
  display: flex;
  align-items: center;
  gap: 5px;
  background: #F5F7FA;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 15px;
  min-width: 70px;
  min-height: 36px;
  justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.page-help .remainder-field.active{
  border-color: #FF9800;
  box-shadow: 0 0 0 2px rgba(255,152,0,0.15);
}
.page-help .rf-label{
  font-size: 14px;
  color: #FF9800;
  font-weight: 600;
}
.page-help .rf-value{
  font-size: 24px;
  color: #333;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
}
.page-help .rf-value.empty{
  color: #ccc;
  font-size: 17px;
  font-weight: normal;
}
.page-help .rf-cursor{
  width: 1.5px;
  height: 24px;
  background: #FF9800;
  animation: blink 1s step-end infinite;
}
.page-help .remainder-sep{
  font-size: 22px;
  color: #999;
  font-weight: bold;
}

/* 反馈 */
.page-help .feedback-inline{
  text-align: center;
  padding: 12px;
  margin-bottom: 10px;
}
.page-help .fb-icon{
  font-size: 36px;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}
.page-help .feedback-inline .fb-icon{ color: #4CAF50; }
.page-help .feedback-inline .fb-icon{ color: #FF5252; }
.page-help .feedback-inline .fb-text{
  font-size: 16px;
  color: #333;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.page-help .fb-answer{
  font-size: 13px;
  color: #FF5252;
  display: block;
  margin-bottom: 8px;
}

.page-help .home-btn{
  margin-top: 10px;
  display: inline-block;
  padding: 9px 30px;
  background: linear-gradient(135deg, #FFB74D, #FF9800);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(255,152,0,0.3);
}

/* 键盘 */
.page-help .numpad{
  margin-top: auto;
  padding-top: 6px;
}
.page-help .numpad-row{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.page-help .numpad-btn{
  flex: 1;
  height: 50px;
  line-height: 50px;
  background: rgba(255,255,255,0.94);
  border-radius: 10px;
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.page-help .numpad-btn:active{
  transform: scale(0.95);
  opacity: 0.8;
}
.page-help .numpad-btn-fn{
  background: rgba(255,255,255,0.78);
  color: #666;
  font-size: 18px;
}
.page-help .numpad-btn-point{ color: #FF9800; }
.page-help .numpad-btn-submit{
  background: #ddd;
  color: #999;
  font-size: 19px;
}
.page-help .numpad-btn-submit.active{
  background: linear-gradient(135deg, #FFB74D, #FF9800);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,152,0,0.3);
}

/* 选择题 */
.page-help .choice-row{ gap: 10px; margin-bottom: 10px; }
.page-help .choice-btn{
  font-size: 25px;
  font-weight: 700;
  color: #FF9800;
  background: #FFF3E0;
  border: 1px solid #FFE0B2;
}
.page-help .choice-btn.choice-selected{
  background: linear-gradient(135deg, #FFB74D, #FF9800);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(255,152,0,0.3);
}



/* ===================== changelog ===================== */

.page-changelog{
  padding: 15px;
  box-sizing: border-box;
}

.page-changelog .log-group{
  margin-bottom: 18px;
}

.page-changelog .log-header{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.page-changelog .log-date{
  font-size: 14px;
  color: #999;
}

.page-changelog .log-version{
  font-size: 16px;
  font-weight: 700;
  color: #667eea;
}

.page-changelog .log-items{
  padding-left: 4px;
}

.page-changelog .log-item{
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  line-height: 1.5;
}

.page-changelog .log-bullet{
  font-size: 14px;
  color: #667eea;
  flex-shrink: 0;
}

.page-changelog .log-text{
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}



/* ===================== 网页版补充 ===================== */

/* 网页版补充样式（不参与小程序的 rpx 转换，由 build_css.py 拼到 style.css 末尾） */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", Roboto, sans-serif;
  background: #eef1f6;
  color: #333;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

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

button {
  border: 0;
  cursor: pointer;
}

/* 有 hidden 属性的元素必须真的隐藏（页面 CSS 里的 display:flex 会盖掉浏览器默认） */
[hidden] {
  display: none !important;
}

#app {
  min-height: 100vh;
}

.page-index,
.page-quiz,
.page-result,
.page-history,
.page-teacher,
.page-help,
.page-changelog {
  min-height: 100vh;
}

/* 手机上按视口高度铺满（dvh 处理移动浏览器地址栏） */
.page-quiz {
  height: 100dvh;
}

/* 桌面 / 平板竖屏：居中成一张"手机卡"，避免内容被拉得过宽 */
@media (min-width: 760px) {
  body {
    background: #e9edf3;
  }

  #app > .page-index,
  #app > .page-quiz,
  #app > .page-result,
  #app > .page-history,
  #app > .page-teacher,
  #app > .page-help,
  #app > .page-changelog {
    max-width: 560px;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}

/* 宽屏横屏：答题页把草稿板放到右侧 */
@media (min-width: 1000px) and (orientation: landscape) {
  #app > .page-quiz {
    max-width: 1100px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-quiz .quiz-main {
    flex-direction: row;
    gap: 16px;
  }

  .page-quiz .quiz-left {
    flex: 1 1 0;
    min-width: 0;
  }

  .page-quiz .scratchpad-area {
    flex: 0 0 40%;
    max-width: 40%;
    min-height: 0;
  }
}

/* 网页没有小程序导航栏，各子页面用这条补返回入口 */
.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.topbar-back {
  background: rgba(255, 255, 255, 0.9);
  color: #555;
  border-radius: 18px;
  padding: 7px 16px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.topbar-back:active {
  transform: scale(0.96);
}

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: #555;
}

.topbar-spacer {
  flex: 1;
}

/* 轻提示 */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}

.toast {
  background: rgba(30, 30, 30, 0.86);
  color: #fff;
  padding: 10px 20px;
  border-radius: 22px;
  font-size: 14px;
  max-width: 84vw;
  text-align: center;
  animation: toastIn 0.18s ease;
}

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

/* 通用加载 / 空状态 */
.app-loading,
.app-error {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #888;
  font-size: 15px;
}

.app-error .app-error-icon {
  font-size: 40px;
}

/* 结果页：用 SVG 画分数环（替代小程序 canvas） */
.score-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
}

.score-ring-value {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
}

/* 历史页图表：由 JS 按 devicePixelRatio 设置像素尺寸 */
.chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 老师页：表单按钮在网页上保持手型，其他沿用小程序样式 */
.page-teacher .switch {
  cursor: pointer;
}

.page-teacher .tab-item,
.page-history .user-tab,
.page-index .user-card,
.page-index .menu-card,
.page-index .pwd-key,
.page-quiz .numpad-btn,
.page-help .numpad-btn {
  cursor: pointer;
  user-select: none;
}

/* 结果页内容可能超过一屏，允许滚动 */
.page-result .scroll-content {
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 老师页的题型 tab 在窄屏可横向滚动 */
.page-teacher .tab-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-teacher .tab-bar::-webkit-scrollbar {
  display: none;
}

/* 求助页的说明文字 */
.page-help .help-tip {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin: 4px 0 10px;
}

/* 求助页成功/失败后键盘已隐藏，让提示区留出空间 */
.page-help .feedback-inline {
  margin-top: 12px;
}

/* 历史页记录列表底部留白 */
.bottom-spacer {
  height: 24px;
}

/* 结果页撒花 canvas 不应该挡住按钮 */
.page-result .confetti-canvas {
  pointer-events: none;
}

/* 让长题目在桌面端也能正常换行 */
.q-text {
  word-break: break-word;
}

/* 求助页的返回按钮 */
.page-help .home-btn {
  cursor: pointer;
}