/* ============================================================
   AI 伴学智能体 · 液态玻璃设计系统（Light Glassmorphism）
   - 浅色主题，主色紫罗兰 + 蜜橙点缀
   - 毛玻璃层：backdrop-filter blur + 饱和度提升 + 顶部高光线
   - 背景为缓慢漂移的彩色光斑（纯 CSS，零依赖）
   - 不支持 backdrop-filter 的老内核自动回退为实色（@supports）
   ============================================================ */

:root {
  /* 基础色板 */
  --primary: #5b4fc7;
  --primary-deep: #463b9e;
  --primary-soft: rgba(91, 79, 199, 0.12);
  --accent: #c07a1e;
  --accent-soft: rgba(192, 122, 30, 0.14);
  --text: #26251f;
  --text-sub: #6f6d66;
  --danger: #b03232;
  --ok: #0d7a5f;

  /* 玻璃层 */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-soft: rgba(255, 255, 255, 0.38);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --hairline: rgba(38, 37, 31, 0.08);

  --shadow-lg: 0 18px 44px -18px rgba(70, 59, 158, 0.28), 0 4px 14px -6px rgba(38, 37, 31, 0.10);
  --shadow-md: 0 10px 28px -12px rgba(70, 59, 158, 0.22), 0 2px 8px -3px rgba(38, 37, 31, 0.08);
  --shadow-sm: 0 4px 14px -6px rgba(70, 59, 158, 0.16);

  --radius: 20px;
  --radius-sm: 14px;
  --blur: blur(22px) saturate(1.55);
  --blur-strong: blur(30px) saturate(1.7);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: #eef0fa;
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  height: 100%;
}

/* ---------- 液态光斑背景（fixed，不随滚动） ---------- */
.liquid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(160deg, #eef0fb 0%, #f4f0fa 45%, #fdf3ea 100%);
}
.liquid-bg::before,
.liquid-bg::after,
.liquid-bg .blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
}
.liquid-bg::before {
  width: 52vmax; height: 52vmax;
  left: -18vmax; top: -20vmax;
  background: radial-gradient(circle at 35% 35%, #b9b2f2, transparent 65%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.liquid-bg::after {
  width: 46vmax; height: 46vmax;
  right: -16vmax; bottom: -18vmax;
  background: radial-gradient(circle at 60% 60%, #ffd9ad, transparent 65%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.liquid-bg .blob {
  width: 30vmax; height: 30vmax;
  left: 55%; top: 38%;
  background: radial-gradient(circle, #aee3d4, transparent 62%);
  opacity: .38;
  animation: drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(9vmax, 7vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-8vmax, -6vmax) scale(1.08); } }
@keyframes drift3 { to { transform: translate(-10vmax, 5vmax) scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .liquid-bg::before, .liquid-bg::after, .liquid-bg .blob { animation: none; }
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- 玻璃通用 mixin ---------- */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}
/* 顶部高光棱线：玻璃的"厚度感"来源 */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.25) 28%,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.30) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* 老内核回退：没有模糊就用更实的白 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.92); }
}

/* ---------- 顶栏：悬浮玻璃岛 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 10px 12px 4px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur-strong);
  backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.topbar .title { font-size: 16px; font-weight: 600; flex: 1; letter-spacing: .3px; }
.topbar .sub {
  font-size: 12px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 2px 10px;
}
.iconbtn {
  background: rgba(91, 79, 199, 0.10);
  border: 1px solid rgba(91, 79, 199, 0.16);
  color: var(--primary);
  border-radius: 12px;
  padding: 7px 12px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, transform .1s ease;
}
.iconbtn:active { background: rgba(91, 79, 199, 0.22); transform: scale(.96); }

/* ---------- 视图 ---------- */
.view { display: none; flex: 1; flex-direction: column; }
.view.active { display: flex; }

/* ---------- 首页 ---------- */
.home-wrap { padding: 14px 14px 24px; }
.card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}
.card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  gap: 6px;
}
.muted { color: var(--text-sub); font-size: 13px; }

.stu-row { display: flex; gap: 8px; }
input[type="text"], select, textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(91, 79, 199, 0.55);
  box-shadow: 0 0 0 4px rgba(91, 79, 199, 0.12);
}

/* ---------- 按钮 ---------- */
.btn {
  position: relative;
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  padding: 12px 18px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); filter: brightness(1.05); }
/* 主按钮：紫罗兰渐变 + 玻璃高光 */
.btn:not(.ghost):not(.warn) {
  background: linear-gradient(150deg, #6c5fd6 0%, #5348bd 55%, #463b9e 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(70, 59, 158, 0.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn::after {
  /* 斜向流光 */
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  animation: sheen 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 62% { left: -60%; }
  88%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) { .btn::after { animation: none; } }
.btn.block { width: 100%; text-align: center; }
.btn.ghost {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--primary-deep);
  box-shadow: var(--shadow-sm);
}
.btn.warn {
  background: linear-gradient(150deg, #d18a2e, #b06f16);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(176, 111, 22, 0.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn.small { padding: 8px 13px; font-size: 13px; border-radius: 11px; }
.btn:disabled { opacity: .45; }

/* ---------- 知识点列表：玻璃卡 ---------- */
.kp-list { display: flex; flex-direction: column; gap: 10px; }
.kp-item {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  background: var(--glass-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.kp-item:active { transform: scale(.98); }
.kp-item.active {
  background: linear-gradient(150deg, rgba(108, 95, 214, 0.16), rgba(108, 95, 214, 0.07));
  border-color: rgba(91, 79, 199, 0.5);
  box-shadow: 0 8px 22px -10px rgba(70, 59, 158, 0.4);
}
.kp-item .kp-name { font-size: 15px; font-weight: 500; }
.kp-item .kp-scenario { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.unit-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  margin: 12px 0 4px;
  letter-spacing: 1px;
}

/* ---------- 聊天 ---------- */
#view-chat { min-height: 0; }
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.msg {
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 20px;
  font-size: 15px;
  position: relative;
  line-height: 1.6;
}
.msg.agent {
  align-self: flex-start;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-bottom-left-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.msg.student {
  align-self: flex-end;
  background: linear-gradient(150deg, #6c5fd6, #463b9e);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-bottom-right-radius: 6px;
  box-shadow: 0 10px 24px -10px rgba(70, 59, 158, 0.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.msg .tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  margin-top: 7px;
}
.tag.ok { background: rgba(13, 122, 95, 0.12); color: var(--ok); }
.tag.warn { background: var(--accent-soft); color: var(--accent); }
.tag.bad { background: rgba(176, 50, 50, 0.12); color: var(--danger); }
.msg .mic { font-size: 11px; opacity: .75; margin-top: 4px; }

.typing {
  align-self: flex-start;
  color: var(--text-sub);
  font-size: 13px;
  padding: 6px 12px;
  background: var(--glass-soft);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- 底部输入条：悬浮玻璃胶囊 ---------- */
.composer {
  position: sticky;
  bottom: 54px;
  margin: 0 12px;
  padding: 8px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  border-radius: 24px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur-strong);
  backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}
.composer textarea {
  flex: 1;
  resize: none;
  height: 42px;
  max-height: 96px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid transparent;
}
.composer textarea:focus { border-color: rgba(91, 79, 199, 0.4); box-shadow: none; }
.mic-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(150deg, #d18a2e, #b06f16);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(176, 111, 22, 0.5), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease;
}
.mic-btn:active { transform: scale(.94); }
.mic-btn.recording { background: linear-gradient(150deg, #c23b3b, #9c2626); animation: pulse 1.2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(176, 50, 50, .5); }
  70% { box-shadow: 0 0 0 16px rgba(176, 50, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 50, 50, 0); }
}
.send-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(150deg, #6c5fd6, #463b9e);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(70, 59, 158, 0.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease;
}
.send-btn:active { transform: scale(.94); }
.send-btn:disabled { opacity: .4; }

.rec-hint {
  text-align: center;
  font-size: 12px;
  color: var(--accent);
  padding: 4px 0;
  display: none;
}

/* ---------- 报告 ---------- */
.report-wrap { padding: 14px 12px 30px; }
.md {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-md);
}
.md h1 { font-size: 19px; margin: 4px 0 12px; font-weight: 600; }
.md h2 {
  font-size: 16px;
  margin: 20px 0 8px;
  font-weight: 600;
  color: var(--primary-deep);
  padding-left: 10px;
  border-left: 3px solid var(--primary);
}
.md p { margin: 8px 0; }
.md ul { padding-left: 20px; margin: 8px 0; }
.md li { margin: 5px 0; }
.md blockquote {
  margin: 10px 0;
  padding: 8px 13px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 12px 12px 0;
  color: var(--accent);
  font-size: 14px;
}
.md table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 10px 0; font-size: 13px; border-radius: 10px; overflow: hidden; }
.md th, .md td { border-bottom: 1px solid var(--hairline); padding: 7px 10px; text-align: left; }
.md th { background: var(--primary-soft); color: var(--primary-deep); }
.md tr:last-child td { border-bottom: none; }
.md hr { border: none; border-top: 1px solid var(--hairline); margin: 14px 0; }
.md code { background: rgba(91, 79, 199, 0.10); border-radius: 5px; padding: 1px 6px; font-size: 13px; color: var(--primary-deep); }
.md strong { font-weight: 600; }

.ex-list { margin-top: 12px; }
.ex-item {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.ex-item .ex-type {
  display: inline-block;
  font-size: 11px;
  color: var(--primary-deep);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 6px;
}

/* ---------- 弹层：重磨砂玻璃 ---------- */
.sheet-mask {
  position: fixed; inset: 0;
  background: rgba(38, 37, 31, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 50; display: none;
}
.sheet-mask.show { display: block; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: var(--blur-strong);
  backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  z-index: 51;
  max-width: 520px; margin: 0 auto;
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.32,.72,.35,1);
  /* 🔴 平板实测（LG-V500 / Android 4.4.2 / Firefox）：这台机器的 vh **不等于**
     真实可用高度——`max-height: 88vh` 只换到 ~330 CSS px（可视区实际 ~437），
     「题干 + 4 个长选项」约需 455 px，于是第 4 个选项必然被裁在屏幕外。
     改成对「固定定位包含块」取百分比：`max-height: 100%` = 真实视口高度。
     另外 app.js 的 fitSheet() 会用实测像素再兜一层（只抬不压）。 */
  max-height: 100%; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -16px 44px -12px rgba(70, 59, 158, 0.3);
}
.sheet.show { transform: translateY(0); }
.sheet h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
/* 弹层顶部抓手 */
.sheet::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  border-radius: 999px;
  background: rgba(38, 37, 31, 0.18);
}

/* ---------- Toast ---------- */
#toast {
  position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%);
  background: rgba(38, 37, 31, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 13px;
  border-radius: 999px;
  padding: 9px 18px;
  z-index: 99; display: none; max-width: 80%;
  box-shadow: var(--shadow-md);
}

/* ---------- 出卷小测 ---------- */
.quiz-opt {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin: 6px 0;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.6);
  transition: background .12s ease, border-color .12s ease;
  /* 选项是「点」的，不是「选」的：禁掉长按选字 + 双击缩放，
     否则在旧平板（Android 4.4 + Firefox）上想滚动弹层会变成选中选项文字，
     手感上就是「弹层滚不动、第 4 个选项永远看不到」。 */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.quiz-opt:active { background: var(--primary-soft); border-color: rgba(91, 79, 199, 0.4); }

/* 🔴 弹层里「除输入框之外的一切」都禁掉长按选字。
   2026-09-13 平板实测踩到：.quiz-opt 已禁选，但**题干（#quiz-body 里的正文）
   没有**，于是学生想在填空题里点那个输入框时，稍微按久一点（或触摸抖动）就变成
   选中题干文字、弹出蓝色手柄与「复制」菜单 —— 输入框拿不到焦点，
   手感上就是「填空题的输入框点不进去、打不了字」。
   这里只在 #sheet-quiz 作用域内禁用，输入框单独放行。 */
#sheet-quiz, #sheet-quiz .ex-item, #sheet-quiz h3, #sheet-quiz .muted {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#sheet-quiz input,
#sheet-quiz textarea,
#sheet-quiz .quiz-text {
  -webkit-user-select: text; user-select: text;
}

/* ---------- #sheet-quiz 专用紧凑排版（保证 4 个选项一次看全） ----------
   平板可视区只有 ~437 CSS px，而「题干 + 4 个长选项」按默认字号约需 455 px。
   把行距/内边距各收一档 → 约 370 px，留出安全余量，不依赖弹层内部滚动。
   三级兜底由 app.js 的 fitSheet() 驱动：默认 → .compact → .full。 */
#sheet-quiz { padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); }
#sheet-quiz h3 { margin: 0 0 8px; }
#sheet-quiz .ex-item { padding: 9px 11px; margin-bottom: 6px; font-size: 13px; line-height: 1.5; }
#sheet-quiz .ex-item .ex-type { margin-bottom: 4px; }
#sheet-quiz .quiz-opt { padding: 7px 10px; margin: 4px 0; font-size: 13px; }

/* 二级兜底：仍装不下 → 再收一档 */
#sheet-quiz.compact .ex-item { padding: 7px 9px; margin-bottom: 4px; font-size: 12.5px; line-height: 1.42; }
#sheet-quiz.compact .ex-item .ex-type { display: none; }
#sheet-quiz.compact .quiz-opt { padding: 5px 8px; margin: 3px 0; font-size: 12.5px; }
#sheet-quiz.compact h3 { font-size: 14px; margin-bottom: 5px; }

/* 三级兜底：题干极长 → 整个弹层顶到屏幕顶，拿确定的「满屏高度」 */
#sheet-quiz.full { top: 0; border-radius: 0; padding-top: 22px; }

/* ---------- #sheet-quiz 配图尺寸约束（配合三级兜底） ----------
   🔴 2026-09-17：题库 73.7% 的题带图，多图题 27,118 道（典型「下列四个图中
   正确的是」= 4 张图）。app.js 的 exMediaHtml() 用行内 style 给了 180px 上限，
   但**行内 style 优先级最高，却无法响应弹层的三级兜底态** ——
   平板 428px 高时，题干 + 4 张 180px 的图会把选项彻底挤出可视区，
   学生点不到选项，手感上就是「这题卡死了」。

   这里用 !important 覆盖行内 style（唯一正当用途：跨层级响应式兜底），
   让配图高度跟随 .compact / .full 态同步收缩。 */
#sheet-quiz .ex-item img { max-height: 150px !important; width: auto; }
#sheet-quiz.compact .ex-item img { max-height: 108px !important; }
#sheet-quiz.full .ex-item img { max-height: 170px !important; }
/* 多图横向滚动条在小屏上不要吃掉额外高度 */
#sheet-quiz .ex-item div[style*="overflow-x"] { padding: 2px 0 4px !important; }
#sheet-quiz.compact .ex-item div[style*="overflow-x"] { padding: 1px 0 2px !important; }

/* ---------- 打印：只保留报告正文 ---------- */
@media print {
  .liquid-bg, .topbar, .composer, .rec-hint, #btn-finish, .ex-list, .report-wrap .btn,
  h3, #toast { display: none !important; }
  body { background: #fff; }
  .report-wrap { padding: 0; }
  .md { border: none; box-shadow: none; background: #fff; backdrop-filter: none; }
}

/* ---------- 横屏 / 宽屏适配（平板横架演示） ---------- */
@media (min-width: 800px) {
  #app { max-width: 1080px; }
  .topbar { margin: 14px 22px 6px; padding: 13px 26px; }
  .topbar .title { font-size: 18px; }
  .home-wrap { padding: 22px 28px; }
  .kp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .unit-title { grid-column: 1 / -1; }
  .kp-item { padding: 14px 16px; }
  .chat-scroll { padding: 20px 30px; gap: 12px; }
  .msg { max-width: 66%; font-size: 16px; line-height: 1.7; padding: 13px 18px; }
  .composer { bottom: 62px; margin: 0 24px; padding: 10px; }
  .composer textarea { height: 48px; font-size: 16px; }
  .mic-btn, .send-btn { width: 50px; height: 50px; }
  .report-wrap { max-width: 920px; margin: 0 auto; padding: 22px 20px 40px; }
  .md { padding: 24px 28px; }
  .ex-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}