/* =====================================================
   金牌助教 · 托管机构入托前测评系统
   恩典加教育科技公司 —— 移动端优先样式
   ===================================================== */
:root {
  --blue-900: #0f2a5c;
  --blue-800: #16388a;
  --blue-700: #1e4fd6;
  --blue-100: #e6edff;
  --gold-600: #d99a06;
  --gold-500: #f5b301;
  --gold-100: #fff4d6;
  --green-600: #16a34a;
  --green-100: #dcfce7;
  --red-600: #dc2626;
  --red-100: #fee2e2;
  --orange-600: #ea580c;
  --orange-100: #ffedd5;
  --purple-600: #7c3aed;
  --purple-100: #ede9fe;
  --teal-600: #0d9488;
  --teal-100: #ccfbf1;
  --gray-900: #1f2937;
  --gray-700: #4b5563;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 4px 16px rgba(15, 42, 92, .10);
  --shadow-lg: 0 10px 30px rgba(15, 42, 92, .16);
  --maxw: 680px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  min-height: 100vh;
  line-height: 1.6;
}
#app { display:flex; flex-direction:column; min-height:100vh; }

/* ---------- 顶部栏 ---------- */
.topbar {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 60%, #1a3fae 100%);
  color:#fff; padding-bottom:10px;
  border-bottom:4px solid var(--gold-500);
  position: sticky; top:0; z-index:50;
}
.topbar-inner { max-width:var(--maxw); margin:0 auto; padding:12px 16px 4px; display:flex; align-items:center; justify-content:space-between; }
.brand-mini { display:flex; align-items:center; gap:8px; cursor:pointer; }
.brand-badge-mini {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--blue-900); font-weight:800; font-size:.8rem;
  padding:3px 8px; border-radius:8px; letter-spacing:1px;
}
.brand-name-mini { font-weight:700; font-size:1.05rem; letter-spacing:1px; }
.topbar-right { display:flex; gap:8px; }
.icon-btn {
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:1.1rem; width:38px; height:38px; border-radius:10px; cursor:pointer;
  transition: background .2s;
}
.icon-btn:active { background: rgba(255,255,255,.3); }
.topbar-sub { max-width:var(--maxw); margin:0 auto; padding:0 16px; font-size:.72rem; opacity:.75; letter-spacing:.5px; }

/* ---------- 主区 ---------- */
main { flex:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:16px 14px 30px; }
.footer { text-align:center; padding:18px 12px 26px; color:var(--gray-500); font-size:.78rem; }
.footer-sub { opacity:.7; margin-top:2px; }

/* ---------- 通用卡片 ---------- */
.card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 14px; margin-bottom:10px; }
.card-title { font-size:1.02rem; font-weight:700; color:var(--blue-900); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.card-title::before { content:""; width:4px; height:18px; background:var(--gold-500); border-radius:2px; }

/* ---------- 首页 ---------- */
.hero {
  background: linear-gradient(150deg, var(--blue-900), var(--blue-700));
  border-radius:18px; color:#fff; padding:26px 20px 22px; margin-bottom:16px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-lg); text-align:center;
}
.hero::after {
  content:"奖"; position:absolute; right:-14px; top:-22px; font-size:7.5rem;
  color:rgba(245,179,1,.14); font-weight:900; transform:rotate(12deg);
}
.hero-badge {
  display:inline-block; background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  color:var(--blue-900); font-weight:800; font-size:.82rem; padding:4px 14px;
  border-radius:999px; letter-spacing:2px; margin-bottom:10px;
}
.hero h1 { font-size:1.55rem; letter-spacing:2px; margin-bottom:6px; }
.hero p { font-size:.85rem; opacity:.85; }
.hero-stats { display:flex; justify-content:center; gap:22px; margin-top:16px; }
.hero-stat { text-align:center; }
.hero-stat b { display:block; font-size:1.3rem; color:var(--gold-500); }
.hero-stat span { font-size:.7rem; opacity:.8; }

.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.role-card {
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px 12px; text-align:center; cursor:pointer; border:2px solid transparent;
  transition: transform .15s, border-color .15s;
}
.role-card:active { transform:scale(.97); }
.role-card.student { border-top:5px solid var(--blue-700); }
.role-card.parent { border-top:5px solid var(--gold-500); }
.role-icon { font-size:2.2rem; margin-bottom:6px; }
.role-card h3 { font-size:1.05rem; color:var(--blue-900); margin-bottom:4px; }
.role-card p { font-size:.74rem; color:var(--gray-500); }
.quick-row { display:flex; gap:10px; }
.quick-btn {
  flex:1; background:var(--white); border:1.5px solid var(--gray-300); border-radius:12px;
  padding:12px 8px; text-align:center; font-size:.85rem; color:var(--gray-700);
  cursor:pointer; transition:border-color .15s;
}
.quick-btn:active { border-color:var(--blue-700); color:var(--blue-700); }

/* ---------- 表单 ---------- */
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; }
.form-label .req { color:var(--red-600); }
.form-input, .form-select {
  width:100%; padding:12px 14px; font-size:1rem; border:1.5px solid var(--gray-300);
  border-radius:10px; background:var(--white); color:var(--gray-900); outline:none;
  transition:border-color .15s; appearance:none;
}
.form-input:focus, .form-select:focus { border-color:var(--blue-700); }
.form-select { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.form-hint { font-size:.72rem; color:var(--gray-500); margin-top:4px; }

/* ---------- 按钮 ---------- */
.btn {
  display:block; width:100%; padding:14px; border:none; border-radius:12px;
  font-size:1rem; font-weight:700; cursor:pointer; letter-spacing:1px;
  transition: transform .1s, opacity .15s; text-align:center;
}
.btn:active { transform:scale(.98); }
.btn-primary { background:linear-gradient(135deg, var(--blue-700), var(--blue-800)); color:#fff; box-shadow:0 4px 12px rgba(30,79,214,.35); }
.btn-gold { background:linear-gradient(135deg, var(--gold-500), var(--gold-600)); color:var(--blue-900); box-shadow:0 4px 12px rgba(217,154,6,.3); }
.btn-ghost { background:var(--white); color:var(--blue-700); border:1.5px solid var(--blue-700); }
.btn-danger { background:var(--red-600); color:#fff; }
.btn-sm { padding:9px 16px; font-size:.85rem; width:auto; display:inline-block; border-radius:9px; }
.btn[disabled] { opacity:.5; pointer-events:none; }

/* ---------- 年级/科目选择 ---------- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.pick-tile {
  background:var(--white); border:2px solid var(--gray-300); border-radius:12px;
  padding:14px 6px; text-align:center; cursor:pointer; transition:all .15s;
}
.pick-tile:active { transform:scale(.96); }
.pick-tile .pt-icon { font-size:1.5rem; }
.pick-tile .pt-name { font-weight:700; color:var(--gray-900); font-size:.92rem; margin-top:2px; }
.pick-tile .pt-desc { font-size:.68rem; color:var(--gray-500); margin-top:2px; }
.pick-tile.selected { border-color:var(--blue-700); background:var(--blue-100); }
.pick-tile.locked { opacity:.45; pointer-events:none; }

.subject-card {
  display:flex; align-items:center; gap:14px; background:var(--white);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:12px;
  cursor:pointer; transition:transform .15s;
}
.subject-card:active { transform:scale(.98); }
.subject-emoji {
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:1.7rem; flex-shrink:0;
}
.subject-card .sc-info { flex:1; }
.subject-card h4 { font-size:1rem; color:var(--gray-900); }
.subject-card p { font-size:.74rem; color:var(--gray-500); margin-top:2px; }
.subject-status { font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.st-done { background:var(--green-100); color:var(--green-600); }
.st-todo { background:var(--gold-100); color:var(--gold-600); }

/* ---------- 答题页 ---------- */
.exam-header {
  background:var(--blue-900); color:#fff; border-radius:12px; padding:12px 14px;
  margin-bottom:12px; position:sticky; top:0; z-index:20; box-shadow:var(--shadow);
}
.eh-row { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; }
.eh-row b { font-size:.95rem; }
.eh-timer { font-variant-numeric:tabular-nums; font-weight:800; background:rgba(255,255,255,.15); padding:3px 12px; border-radius:8px; }
.eh-timer.warn { background:var(--red-600); animation:blink 1s infinite; }
@keyframes blink { 50%{opacity:.6;} }
.eh-progress { height:6px; background:rgba(255,255,255,.2); border-radius:3px; margin-top:8px; overflow:hidden; }
.eh-progress-bar { height:100%; background:linear-gradient(90deg,var(--gold-500),#ffd866); border-radius:3px; transition:width .3s; }

.q-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 16px; margin-bottom:14px; }
.q-tag { display:inline-block; font-size:.68rem; color:var(--blue-700); background:var(--blue-100); border-radius:6px; padding:2px 8px; margin-bottom:8px; font-weight:600; }
.q-title { font-size:1.08rem; font-weight:600; line-height:1.65; margin-bottom:16px; }
.q-no { color:var(--gold-600); font-weight:800; margin-right:4px; }
.q-desc { font-size:.85rem; color:var(--gray-500); margin:-10px 0 12px; }

.opt {
  display:flex; align-items:center; gap:12px; border:2px solid var(--gray-300);
  border-radius:12px; padding:13px 14px; margin-bottom:10px; cursor:pointer;
  transition:all .12s; font-size:1rem; background:var(--white);
}
.opt:active { transform:scale(.98); }
.opt-letter {
  width:30px; height:30px; border-radius:8px; background:var(--gray-100); color:var(--gray-700);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; font-size:.9rem;
}
.opt.selected { border-color:var(--blue-700); background:var(--blue-100); }
.opt.selected .opt-letter { background:var(--blue-700); color:#fff; }

/* ---------- 视觉图形题（SVG 题干 / 图形选项） ---------- */
.q-visual { margin: 2px 0 16px; padding: 12px; background:var(--gray-50); border:1px solid var(--gray-100); border-radius:12px; text-align:center; }
.q-visual svg { width:100%; height:auto; max-width:340px; }
.opt-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt-visual { flex-direction:column; align-items:center; gap:8px; padding:12px 8px; margin-bottom:0; position:relative; }
.opt-visual .opt-letter { position:absolute; top:6px; left:6px; width:24px; height:24px; border-radius:8px; font-size:.78rem; }
.opt-visual-body { display:flex; align-items:center; justify-content:center; width:100%; padding-top:6px; }
.opt-visual-body svg { width:100%; max-width:110px; height:auto; }

.exam-nav { display:flex; gap:10px; margin:16px 0; }
.exam-nav .btn { flex:1; }
.btn-nav { background:var(--white); border:1.5px solid var(--gray-300); color:var(--gray-700); font-weight:600; }
.btn-nav[disabled] { opacity:.4; }

.q-grid-toggle { text-align:center; margin:6px 0 12px; }
.q-grid-toggle button { background:none; border:none; color:var(--blue-700); font-size:.82rem; font-weight:600; text-decoration:underline; cursor:pointer; }
.q-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; background:var(--white); border-radius:12px; padding:12px; box-shadow:var(--shadow); margin-bottom:14px; }
.q-cell {
  aspect-ratio:1; border-radius:8px; background:var(--gray-100); color:var(--gray-700);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; cursor:pointer;
}
.q-cell.answered { background:var(--blue-700); color:#fff; }
.q-cell.current { outline:2.5px solid var(--gold-500); outline-offset:1px; }

/* ---------- 结果/等级徽章 ---------- */
.score-hero { text-align:center; padding:8px 0 4px; }
.score-big { font-size:3rem; font-weight:900; color:var(--blue-700); line-height:1.1; }
.score-big small { font-size:1.1rem; color:var(--gray-500); font-weight:600; }
.grade-badge {
  display:inline-block; font-size:1rem; font-weight:800; padding:6px 22px; border-radius:999px; margin-top:8px; letter-spacing:2px;
}
.gA { background:var(--red-100); color:var(--red-600); }
.gB { background:var(--orange-100); color:var(--orange-600); }
.gC { background:var(--blue-100); color:var(--blue-700); }
.gD { background:var(--gray-100); color:var(--gray-500); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.chip { font-size:.75rem; padding:4px 12px; border-radius:999px; background:var(--gray-100); color:var(--gray-700); font-weight:600; }

/* ---------- 报表 ---------- */
.report-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; font-size:.82rem; }
.report-meta div { background:var(--gray-50); border-radius:8px; padding:8px 10px; }
.report-meta b { color:var(--blue-900); }
.chart-wrap { position:relative; width:100%; max-height:210px; }
.chart-wrap canvas { max-height:210px !important; }
.subscore-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:.85rem; }
.subscore-name { width:78px; font-weight:600; color:var(--gray-700); flex-shrink:0; }
.subscore-bar { flex:1; height:10px; background:var(--gray-100); border-radius:5px; overflow:hidden; }
.subscore-fill { height:100%; border-radius:5px; }
.subscore-val { width:64px; text-align:right; font-weight:800; color:var(--blue-900); flex-shrink:0; }
.advice-block { background:var(--blue-100); border-left:4px solid var(--blue-700); border-radius:0 10px 10px 0; padding:10px 12px; margin-bottom:8px; font-size:.88rem; }
.advice-block.warn { background:var(--gold-100); border-left-color:var(--gold-600); }
.advice-block.good { background:var(--green-100); border-left-color:var(--green-600); }
.advice-block h5 { color:var(--blue-900); margin-bottom:3px; font-size:.92rem; }
.report-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px; }

/* ---------- 记录列表 ---------- */
.record-item { display:flex; align-items:center; gap:12px; background:var(--white); border-radius:12px; box-shadow:var(--shadow); padding:14px; margin-bottom:10px; }
.record-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.record-info { flex:1; min-width:0; }
.record-info h4 { font-size:.92rem; color:var(--gray-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.record-info p { font-size:.7rem; color:var(--gray-500); }
.record-score { text-align:right; flex-shrink:0; }
.record-score b { display:block; color:var(--blue-700); font-size:1.05rem; }
.record-score span { font-size:.66rem; color:var(--gray-500); }

/* ---------- 数据管理 ---------- */
.mgmt-item { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--gray-100); font-size:.9rem; }
.mgmt-item:last-child { border-bottom:none; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.stat-box { background:var(--gray-50); border-radius:10px; text-align:center; padding:12px 4px; }
.stat-box b { display:block; font-size:1.25rem; color:var(--blue-700); }
.stat-box span { font-size:.68rem; color:var(--gray-500); }

/* ---------- 弹窗 & Toast ---------- */
.modal-mask { position:fixed; inset:0; background:rgba(15,42,92,.5); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-mask.show { display:flex; }
.modal { background:var(--white); border-radius:16px; padding:20px; max-width:340px; width:100%; box-shadow:var(--shadow-lg); max-height:80vh; overflow-y:auto; }
.modal-title { font-size:1.05rem; font-weight:800; color:var(--blue-900); margin-bottom:10px; }
.modal-body { font-size:.9rem; color:var(--gray-700); margin-bottom:16px; }
.modal-actions { display:flex; gap:10px; }
.toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gray-900); color:#fff; padding:10px 22px; border-radius:999px;
  font-size:.85rem; opacity:0; pointer-events:none; transition:all .3s; z-index:300; white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 提交确认提示 ---------- */
.unanswer-tip { color:var(--orange-600); font-weight:700; font-size:.85rem; margin-top:8px; text-align:center; }

/* ---------- 平板适配 ---------- */
@media (min-width: 600px) {
  html { font-size:17px; }
  .q-card { padding:24px 22px; }
  .hero h1 { font-size:1.9rem; }
  .q-grid { grid-template-columns:repeat(10,1fr); }
}
@media (min-width: 900px) {
  html { font-size:18px; }
}
@media print {
  .topbar, .footer, .report-actions, .no-print { display:none !important; }
  body { background:#fff; }
  main { max-width:100%; padding:0; }
  .card, .report-brand-header, .report-brand-footer {
    box-shadow:none; border:1px solid #e5e7eb;
    page-break-inside:avoid !important;
    break-inside:avoid !important;
  }
}

/* ---------- 报告品牌头/尾（出现在每份报告的顶部和底部） ---------- */
.report-brand-header {
  /* background-color 作为兜底：即使 html2canvas 不渲染 linear-gradient，也至少显示纯色蓝底 */
  background-color: #1e4fd6;
  background-image: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 60%, #1a3fae 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  border-bottom: 4px solid var(--gold-500);
}
.report-brand-header .rbh-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.report-brand-header .rbh-logo {
  font-weight: 800;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--blue-900);
  padding: 6px 10px;
  border-radius: 8px;
  letter-spacing: 1px;
}
.report-brand-header .rbh-meta { font-size: .82rem; line-height: 1.4; }
.report-brand-header .rbh-cn { font-weight: 700; letter-spacing: .5px; }
.report-brand-header .rbh-en { font-size: .72rem; opacity: .85; }
.report-brand-header .rbh-kind {
  background: rgba(255,255,255,.16);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: right;
}
.report-brand-footer {
  margin-top: 10px;
  padding: 10px 0 6px;
  border-top: 2px dashed var(--gray-300);
  text-align: center;
  color: var(--gray-500);
  font-size: .7rem;
  line-height: 1.7;
}
.report-brand-footer .rbf-line { margin: 2px 0; }
.report-brand-footer b { color: var(--blue-900); }

/* 品牌头嵌入首卡时：去掉卡片上内边距，让品牌头与卡片顶部对齐 */
.card.report-head { padding-top: 0; overflow: hidden; }
.card.report-head .report-brand-header,
.card > .report-brand-header:first-child {
  margin: 0 -14px 10px -14px;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ---------- 多次成绩趋势图卡片 ---------- */
.chart-wrap canvas#trendChart { max-height: 220px !important; }

/* ---------- 多次对比表 ---------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin-top: 6px;
}
.compare-table th,
.compare-table td {
  border: 1px solid var(--gray-300);
  padding: 6px 8px;
  text-align: center;
}
.compare-table th { background: var(--blue-100); color: var(--blue-900); font-weight: 700; }
.compare-table tr.best td { background: var(--green-100); }

/* ---------- 响应式：品牌头在窄屏自动堆叠 ---------- */
@media (max-width: 520px) {
  .report-brand-header .rbh-row {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .report-brand-header .rbh-kind { text-align: left; }
}

/* ---------- 长图查看器（全屏缩放/保存） ---------- */
.img-viewer {
  position:fixed; inset:0; z-index:400; background:rgba(17,24,39,.96);
  display:flex; flex-direction:column;
}
.img-viewer .iv-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
  color:#f9fafb; flex-shrink:0;
}
.img-viewer .iv-tip { font-size:.78rem; color:#d1d5db; line-height:1.4; }
.img-viewer .iv-close {
  background:rgba(255,255,255,.15); color:#fff; border:none; border-radius:50%;
  width:36px; height:36px; font-size:1rem; cursor:pointer; flex-shrink:0;
}
.img-viewer .iv-stage {
  flex:1; overflow:hidden; display:flex; align-items:flex-start; justify-content:center;
  touch-action:none; -webkit-overflow-scrolling:touch;
}
.img-viewer .iv-stage img {
  max-width:94%; max-height:none; object-fit:contain;
  -webkit-user-select:none; user-select:none;
  transition:transform .08s linear; will-change:transform;
  margin-top:8px; border-radius:4px;
}
.img-viewer .iv-actions {
  flex-shrink:0; display:flex; justify-content:center; gap:10px;
  padding:14px 16px; padding-bottom:calc(14px + env(safe-area-inset-bottom));
}