:root {
  /* EHS 暖色调：红橙为主，呼应"五点半"夕阳光感 */
  --c-bg: #fffaf6;
  --c-surface: #ffffff;
  --c-ink: #2b2320;
  --c-ink-soft: #6b5f57;
  --c-primary: #e8552d;      /* 主橙红 */
  --c-primary-dark: #c8431f;
  --c-accent: #f4a261;       /* 暖橙辅助 */
  --c-warm: #ffd9c2;         /* 浅暖底 */
  --c-line: #f0e3d8;
  --c-soon: #b08968;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(200, 67, 31, 0.08);
  --maxw: 1120px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* 防横向滚动条 */
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ---------- 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 246, 0.86);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 20px;
}
.nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; }
.nav__logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff; display: grid; place-items: center; font-size: 18px;
}
.nav__logo-text { font-size: 18px; letter-spacing: 0.5px; }
.nav__links { display: flex; gap: 22px; margin-left: 12px; }
.nav__links a { text-decoration: none; color: var(--c-ink-soft); font-weight: 600; font-size: 15px; }
.nav__links a:hover { color: var(--c-primary); }
.nav__auth { margin-left: auto; }
.nav__burger { display: none; }
.nav__scrim { display: none; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 999px;
  font-weight: 700; font-size: 15px; cursor: pointer; border: none;
  text-decoration: none; transition: transform .12s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--c-primary-dark); }
.btn--ghost { background: transparent; color: var(--c-primary); border: 1.5px solid var(--c-primary); }
.btn--ghost:hover { background: var(--c-warm); }

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(120% 120% at 80% -10%, var(--c-warm) 0%, transparent 55%), var(--c-bg);
  padding: 80px 20px 70px;
}
.hero__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hero__eyebrow { color: var(--c-primary); font-weight: 800; letter-spacing: 2px; font-size: 14px; }
.hero__title { font-size: clamp(38px, 6vw, 64px); line-height: 1.1; margin: 14px 0 18px; font-weight: 900; }
.hero__sub { color: var(--c-ink-soft); font-size: 17px; max-width: 640px; margin: 0 auto; }
.hero__cta { display: flex; gap: 14px; justify-content: center; margin: 30px 0 22px; flex-wrap: wrap; }
.hero__motto { color: var(--c-soon); font-size: 14px; font-weight: 600; }

/* ---------- Section ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 70px 20px; }
.section--alt { max-width: none; background: var(--c-surface); border-block: 1px solid var(--c-line); }
.section--alt > * { max-width: var(--maxw); margin-inline: auto; }
.section--accent { max-width: none; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; }
.section--accent > * { max-width: var(--maxw); margin-inline: auto; }
.section__head { text-align: center; margin-bottom: 40px; }
.section__title { font-size: clamp(26px, 4vw, 36px); font-weight: 900; }
.section--accent .section__title { color: #fff; }
.section__lead { color: var(--c-ink-soft); margin-top: 10px; font-size: 16px; }
.section--accent .section__lead { color: rgba(255,255,255,0.9); }
.block-title { font-size: 20px; font-weight: 800; margin: 36px 0 16px; }

/* ---------- 品牌区 ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.brand-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.brand-card--accent { background: linear-gradient(135deg, var(--c-warm), #fff); border-color: var(--c-accent); }
.brand-card h3 { color: var(--c-primary); font-size: 18px; margin-bottom: 8px; }
.brand-card p { color: var(--c-ink-soft); }
.values__list { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.values__list li { background: var(--c-warm); color: var(--c-primary-dark); padding: 8px 18px; border-radius: 999px; font-weight: 700; }
.story p { color: var(--c-ink-soft); margin-bottom: 10px; }
.link-out { color: var(--c-primary); font-weight: 700; text-decoration: none; }
.link-out:hover { text-decoration: underline; }
.timeline { margin-top: 18px; }
.timeline summary { cursor: pointer; color: var(--c-primary); font-weight: 800; }
.timeline__list { margin: 16px 0 0; padding-left: 0; list-style: none; }
.timeline__list li { padding: 10px 0; border-bottom: 1px dashed var(--c-line); display: flex; gap: 14px; align-items: baseline; }
.timeline__date { color: var(--c-primary); font-weight: 800; white-space: nowrap; font-size: 14px; }

/* ---------- 卡片 ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card__title { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.card__desc { color: var(--c-ink-soft); font-size: 15px; flex: 1; }
.card__points { margin: 12px 0 0; padding-left: 18px; color: var(--c-ink-soft); font-size: 14px; }
.card__points li { margin-bottom: 4px; }
.tag { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--c-soon); background: var(--c-warm); padding: 4px 12px; border-radius: 999px; width: fit-content; }

/* ---------- 工具占位卡 ---------- */
.tool-card {
  position: relative; background: var(--c-surface); border: 1.5px dashed var(--c-line);
  border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .2s ease, transform .2s ease; cursor: pointer;
}
a.tool-card { text-decoration: none; color: inherit; }
.tool-card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.tool-card__icon { font-size: 28px; }
.tool-card__name { font-size: 17px; font-weight: 800; }
.tool-card__desc { color: var(--c-ink-soft); font-size: 14px; }
.tool-card__soon {
  position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--c-soon); padding: 3px 10px; border-radius: 999px;
}
/* 免登录工具（课堂工具箱 / 白板系统）角标 */
.tool-card__free {
  position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 700;
  color: #16a34a; background: rgba(22, 163, 74, 0.10); padding: 3px 10px; border-radius: 999px;
}

/* ---------- 书童 ---------- */
.assistant { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: center; }
.assistant__note { color: rgba(255,255,255,0.92); margin: 14px 0 20px; font-size: 15px; }
.assistant__art { display: grid; place-items: center; }
.assistant__bubble {
  background: rgba(255,255,255,0.95); color: var(--c-ink); padding: 18px 22px;
  border-radius: 18px 18px 4px 18px; font-weight: 600; box-shadow: var(--shadow);
}

/* ---------- 页脚 ---------- */
.footer { background: #2b2320; color: #e9ddd2; padding: 30px 20px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.footer__brand { font-weight: 700; }
/* 页脚法律行：备案号 + 协议链接（微信开放平台网站应用审核必备） */
.footer__legal {
  max-width: var(--maxw); margin: 16px auto 0; padding-top: 14px;
  border-top: 1px solid rgba(233, 221, 210, 0.18);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px;
}
.footer__legal a { color: #e9ddd2; text-decoration: none; opacity: 0.82; }
.footer__legal a:hover { opacity: 1; text-decoration: underline; }
.footer__legal .sep { opacity: 0.35; }

/* ---------- 法律页（用户协议 / 隐私政策） ---------- */
.legal { max-width: var(--maxw); margin: 0 auto; padding: 56px 20px 40px; }
.legal__hero { text-align: center; margin-bottom: 34px; }
.legal__eyebrow { color: var(--c-primary); font-weight: 800; letter-spacing: 2px; font-size: 13px; }
.legal__title { font-size: clamp(28px, 5vw, 40px); font-weight: 900; margin: 12px 0 10px; }
.legal__sub { color: var(--c-ink-soft); font-size: 15px; max-width: 640px; margin: 0 auto; line-height: 1.7; }
.legal__doc { max-width: 820px; margin: 0 auto; }
.legal__doc h2 { font-size: 20px; font-weight: 800; margin: 30px 0 10px; color: var(--c-primary-dark); }
.legal__doc h2:first-child { margin-top: 0; }
.legal__doc ol, .legal__doc ul { padding-left: 22px; color: var(--c-ink-soft); }
.legal__doc li { margin-bottom: 8px; line-height: 1.75; }
.legal__doc p { color: var(--c-ink-soft); margin-bottom: 8px; line-height: 1.75; }
.legal__doc strong { color: var(--c-ink); }
.legal__doc .muted { color: var(--c-soon); font-size: 14px; margin-top: 32px; }

@media (max-width: 720px) {
  .footer__legal { flex-direction: row; }
}

/* ---------- Toast 桩提示 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  background: var(--c-ink); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow); z-index: 100;
}

/* ---------- 按钮变体 ---------- */
.btn--block { display: block; width: 100%; margin-top: 12px; }

/* ---------- 未登录锁定（工具箱/新书占位卡） ---------- */
.tool-card--locked { cursor: not-allowed; }
.tool-card--locked::after {
  content: "🔒 登录后使用";
  position: absolute; inset: auto 0 0 0;
  background: rgba(43, 35, 32, 0.82); color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px; text-align: center; border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(43, 35, 32, 0.45); backdrop-filter: blur(2px); }
.modal__panel {
  position: relative; background: var(--c-surface); border-radius: 20px; padding: 30px;
  width: min(420px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,0.25); text-align: center;
}
.modal__title { font-size: 22px; font-weight: 900; margin-bottom: 8px; }
.modal__desc { color: var(--c-ink-soft); font-size: 14px; margin-bottom: 14px; }
.modal__error { color: var(--c-primary); font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.qr { display: grid; place-items: center; margin: 6px 0 12px; padding: 12px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; width: fit-content; margin-inline: auto; }

/* ---------- 画像采集聊天 ---------- */
.modal__panel--chat { width: min(460px, 94vw); text-align: left; }
.chat { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.chat__log { display: flex; flex-direction: column; gap: 10px; max-height: 46dvh; overflow-y: auto; padding: 4px 2px; }
.chat__msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.chat__msg--bot { align-self: flex-start; background: #f1ece7; color: var(--c-ink); border-bottom-left-radius: 4px; }
.chat__msg--user { align-self: flex-end; background: var(--c-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat__msg--typing { align-self: flex-start; color: var(--c-ink-soft); font-size: 13px; padding: 6px 2px; }
.chat__input { display: flex; gap: 8px; }
.chat__input input {
  flex: 1; padding: 11px 13px; border: 1.5px solid var(--c-line); border-radius: 10px; font-size: 15px;
  font-family: inherit; outline: none; transition: border-color .15s ease;
}
.chat__input input:focus { border-color: var(--c-primary); }
.onboard__actions { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 表单 ---------- */
.form { display: flex; flex-direction: column; gap: 12px; text-align: left; margin-top: 8px; }
.form label { font-size: 14px; font-weight: 700; color: var(--c-ink); display: flex; flex-direction: column; gap: 6px; }
.form input {
  padding: 11px 13px; border: 1.5px solid var(--c-line); border-radius: 10px; font-size: 15px;
  font-family: inherit; outline: none; transition: border-color .15s ease;
}
.form input:focus { border-color: var(--c-primary); }

/* ---------- 悬浮书童（伍典伴） ---------- */
.wtb-fab {
  position: fixed; top: 84px; right: 22px; z-index: 80;
  width: 86px; height: 86px; padding: 0; border: none; background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 6px 14px rgba(232, 85, 45, 0.28));
  transition: transform .18s ease;
}
.wtb-fab:hover { transform: translateY(-2px) scale(1.04); }
.wtb-fab:active { transform: scale(0.98); }
.wtb-fab img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.wtb-fab__ping {
  position: absolute; top: 4px; right: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(232, 85, 45, 0.18);
  animation: wtbPing 1.8s ease-out infinite;
}
@keyframes wtbPing {
  0%   { box-shadow: 0 0 0 0   rgba(232, 85, 45, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(232, 85, 45, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(232, 85, 45, 0);   }
}

/* ---------- 个人档案查看弹窗 ---------- */
.profile-view { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.profile-view__avatar {
  width: 96px; height: 96px; object-fit: contain; margin-bottom: 4px;
  filter: drop-shadow(0 4px 10px rgba(232, 85, 45, 0.25));
}
.profile-view__list {
  width: 100%; margin: 12px 0 4px; display: grid; grid-template-columns: 72px 1fr; row-gap: 10px;
  background: var(--c-warm); border-radius: 12px; padding: 12px 14px; text-align: left;
}
.profile-view__list dt { color: var(--c-soon); font-weight: 700; font-size: 14px; }
.profile-view__list dd { margin: 0; font-weight: 600; color: var(--c-ink); word-break: break-all; }

/* ---------- 我的中心弹窗 ---------- */
.modal__panel--my { width: min(480px, 94vw); text-align: left; max-height: 90dvh; overflow-y: auto; }
.my__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.my__avatar { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(232, 85, 45, 0.25)); flex: none; }
.my__head-text { min-width: 0; }
.my__head .modal__title { font-size: 20px; margin-bottom: 2px; text-align: left; }
.my__head .modal__desc { margin-bottom: 0; }
.my__tabs { display: flex; gap: 8px; margin: 4px 0 16px; }
.my__tab {
  flex: 1; padding: 9px 0; border: 1.5px solid var(--c-line); background: transparent; color: var(--c-ink-soft);
  border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .15s ease;
}
.my__tab.is-active { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-warm); }
.my__pane { display: flex; flex-direction: column; gap: 16px; }
.my__doc { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 14px; padding: 16px; }
.my__doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.my__doc-head h3 { font-size: 16px; font-weight: 800; color: var(--c-primary-dark); margin: 0; }
.my__md { font-size: 14px; line-height: 1.7; color: var(--c-ink); }
.my__md h1, .my__md h2, .my__md h3, .my__md h4 { color: var(--c-primary-dark); margin: 12px 0 6px; font-size: 16px; }
.my__md h1 { font-size: 18px; }
.my__md ul, .my__md ol { margin: 6px 0; padding-left: 20px; }
.my__md li { margin-bottom: 4px; }
.my__md p { margin: 6px 0; }
.btn--sm { padding: 6px 14px; font-size: 13px; border-radius: 999px; }
.my__history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.my__hist { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 14px; }
.my__hist-main { min-width: 0; }
.my__hist-title { font-weight: 700; font-size: 14px; word-break: break-all; }
.my__hist-meta { color: var(--c-ink-soft); font-size: 12.5px; margin-top: 2px; }
.my__empty { color: var(--c-ink-soft); font-size: 14px; padding: 6px 2px; }
.my__soon { color: var(--c-soon); font-size: 13px; margin: 0; }
.my__foot { margin-top: 18px; }

/* ---------- 汉堡按钮（默认隐藏，移动端显示） ---------- */
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px; margin-left: 10px;
  background: transparent; border: 1.5px solid var(--c-line); border-radius: 12px; cursor: pointer;
}
.nav__burger span { display: block; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  /* 导航：抽屉式 */
  .nav__inner { padding: 10px 16px; }
  .nav__auth { margin-left: auto; }        /* 登录/退出常驻，显示在汉堡左侧 */
  .nav__auth .btn { padding: 9px 16px; font-size: 14px; }
  .nav__burger { display: flex; position: relative; z-index: 61; }
  .nav__links {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(78vw, 300px);
    margin: 0; flex-direction: column; gap: 0; align-items: stretch;
    background: var(--c-surface); border-left: 1px solid var(--c-line);
    padding: calc(env(safe-area-inset-top) + 64px) 16px 24px;
    box-shadow: -10px 0 40px rgba(43, 35, 32, 0.16);
    transform: translateX(105%); transition: transform .28s ease; z-index: 60;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a {
    font-size: 17px; padding: 15px 6px; border-bottom: 1px solid var(--c-line); color: var(--c-ink);
  }
  .nav__links a:active { background: var(--c-warm); }
  .nav__scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(43, 35, 32, 0.42); backdrop-filter: blur(1px);
  }
  .nav__scrim[hidden] { display: none; }

  /* 全局间距收紧 */
  .section { padding: 44px 16px; }
  .section__head { margin-bottom: 28px; }
  .block-title { margin: 28px 0 14px; }

  /* Hero 适配 */
  .hero { padding: 52px 18px 44px; }
  .hero__title { font-size: clamp(34px, 11vw, 48px); }
  .hero__sub { font-size: 15.5px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

  /* 品牌区值卡单列由 auto-fit 自动处理；时间线堆叠 */
  .timeline__list li { flex-direction: column; gap: 2px; }

  /* 卡片内按钮占满 */
  .card .btn { width: 100%; }

  /* 悬浮书童避让刘海/状态栏安全区，缩小一点 */
  .wtb-fab { width: 62px; height: 62px; top: calc(env(safe-area-inset-top) + 60px); right: 14px; }

  /* 弹窗底部安全区 + 不超高 */
  .modal__panel { width: min(420px, 92vw); max-height: 88dvh; overflow-y: auto; padding: 26px 20px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  /* 输入框字号 ≥16px，避免 iOS 聚焦缩放 */
  .form input { font-size: 16px; padding: 13px 13px; }
  .btn { font-size: 16px; padding: 13px 22px; }

  /* 页脚堆叠 */
  .footer__inner { flex-direction: column; gap: 6px; }
}

/* 极窄屏（≤360px）再兜底 */
@media (max-width: 360px) {
  .nav__logo-text { font-size: 16px; }
  .hero__title { font-size: 34px; }
  .wtb-fab { width: 56px; height: 56px; right: 10px; }
}

/* 横屏手机：避免 Hero 过高 */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 36px 18px; }
}