/* 免费试听预约页 · 手机端专属样式（#v-mb 作用域）
   设计令牌与表单本体（.form / .field / .field-row / .btn / .form-error）来自 14 个页面共用的
   a398fbc4b52bc5d0.css（14 个页面共用），页头页脚也直接用主站的 .hdr / .foot 结构，
   本文件不重复定义任何一样，只补本页容器、标题与问卷组件。
   与电脑端那份的差异全在尺寸和间距上 —— 手机端一屏窄，所以选项更紧凑、标题更小。 */

/* ---------- 容器与标题 ---------- */

/* ---------- 背景墙 + 白卡（与电脑端同一套语言，尺度收窄） ----------
   ⚠️ 取值不能照抄电脑端那份：手机端令牌词表不同，而且这面墙的收尾色必须是
   #FBFCFD（本页 body 在 <1024px 的底色），写成 #FFFFFF 会在墙下沿留一条硬边。 */

#v-mb .bt-page{position:relative;overflow:hidden}

/* 与电脑端同一套晕染，尺度按手机收窄。全部写在 background 堆栈里，
   **没有一个 filter:blur 图层** —— 那种写法在低端安卓上会实打实地掉帧。
   ⚠️ 收尾色必须是 #FBFCFD（本页 body 在 <1024px 的底色），写 #FFFFFF 会留一条硬边。 */
/* ===== 换整张 banner 图的位置（手机端另一张图，别用电脑端那张）=====
   图已经换上（2026-09-11）。以后要再换，直接覆盖 site/assets/img/book-trial/hero-mb.jpg。

   **规格：1200 × 1000 px（1.2:1），JPG，≤150KB。**
   ⚠️ 路径要写 ../img/…（这份 CSS 在 assets/css/ 下），电脑端那份写的是 img/…。

   为什么不和电脑端共用一张：2.4:1 的横图放进 390px 宽的手机屏，要么两边裁掉一大半、
   要么高度只剩 160px。站内其它页也是 PC / 手机各一张（比如首页那张
   futurekey-mobile-banner-800x600-v2.jpg），这里跟着同一个做法。

   图上要避开的两块（按设计稿 1200×1000 的坐标）：
     · 上半部 y 0–560                标题文案压在这里，保持浅、别放细节
     · 中下部 x 40–1160 / y 700–1000  白色表单卡片几乎盖满整宽，放什么都看不见 */
#v-mb .bt-wall{
  position:absolute;left:0;right:0;top:0;
  aspect-ratio:1200 / 1000;
  overflow:hidden;pointer-events:none;
  background:
    url(../img/book-trial/hero-mb.jpg),
    radial-gradient(ellipse 420px 200px at 50% -20px, rgba(255,255,255,.68), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 420px 380px at -6% -6%, rgba(20,151,208,.40), rgba(20,151,208,0) 66%),
    radial-gradient(ellipse 440px 400px at 106% 2%, rgba(96,183,226,.44), rgba(96,183,226,0) 64%),
    radial-gradient(ellipse 380px 320px at 92% 46%, rgba(13,110,160,.20), rgba(13,110,160,0) 68%),
    radial-gradient(ellipse 400px 300px at -4% 68%, rgba(20,151,208,.18), rgba(20,151,208,0) 68%),
    linear-gradient(180deg,#E1EEF8 0%,#DEECF6 30%,#EBF4FA 58%,#F6FAFC 82%,#FBFCFD 100%);
  /* ⚠️ 必须写在 background 简写之后，简写会把它们重置掉 */
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  /* 同电脑端：柔光半径大于墙高，不加这条遮罩会被切出一道横向接缝；
     换成 banner 图后它负责把图的下边缘化进页面 */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
}
/* 文案区的白纱 + 文字白光晕。**这是可读性，不是装饰**，理由同电脑端那份 CSS。
   手机端的文案带比电脑端长（标题+三行副标题+一行 facts，一直压到墙高的 ~62%），
   所以浓度峰值往下挪，86% 才归零。
   纱做得比电脑端还淡：手机上这张图能露出来的本来就只有 55%–70% 那一条，
   浓了就什么都不剩了——压字的活主要交给下面的 text-shadow。 */
/* 2026-09-11 白纱已按要求整层去掉，banner 按原图显示。理由与恢复方法见
   assets/book-trial-pc.css 里同一位置的说明。
   #v-mb .bt-wall::after{content:"";position:absolute;inset:0;pointer-events:none;
     background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.20) 30%,
     rgba(255,255,255,.22) 58%,rgba(255,255,255,.10) 72%,rgba(255,255,255,0) 86%);} */
#v-mb .bt-hero-text .eyebrow,
#v-mb .bt-title,
#v-mb .bt-sub{
  /* 给每个字母描一圈贴身的白 —— **量过**，这张图人物的头发和蓝衣服压在副标题那一栏，
     最差处对比度 1.05:1，靠加浓白纱救不回来（中位数本来就有 6.4:1，是局部深色拖的）。
     ⚠️ 原来最外层是 15px 的大范围白，手机上放大看是一圈毛边而不是底，已收紧。
     标签不在这个选择器里：它有白药丸做底，再描边只会糊。 */
  text-shadow:
    0 1px 1px rgba(255,255,255,.94),
    0 0 4px   rgba(255,255,255,.9),
    0 0 10px  rgba(255,255,255,.55);
}

/* eyebrow **不覆盖颜色**，用站内 .eyebrow 的默认值 --brand（#1497D0，
   a398fbc4b52bc5d0.css:84，文字和那条 20×1.5px 蓝杠都是它）。
   曾经改深过，**已按要求撤掉**，别再加回来 —— 与标题同色是定下来的取向。
   理由与代价见 assets/book-trial-pc.css 里同一位置。 */

/* 2026-09-11 换成真实 banner 图后，sweep / grain 两层已删（HTML 里的 <span> 也去掉了）。
   理由同电脑端那份 CSS 里的说明：白光会把人脸蒙灰，噪点在照片上只会显脏。
   以后若改回纯渐变背景，这两层要一起加回来。 */

/* ---------- 首屏 ---------- */

#v-mb .bt-hero{position:relative;z-index:1;padding:24px 18px 0;text-align:center}
@media (max-width:359px){#v-mb .bt-hero{padding:22px 16px 0}}

/* ---------- 白卡 ---------- */

#v-mb .bt-layout{position:relative;z-index:1;padding:0 14px 0}
@media (max-width:359px){#v-mb .bt-layout{padding:0 10px 0}}
#v-mb .bt-card{
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:18px;
  padding:22px 16px 26px;
  margin-top:24px;
  box-shadow:var(--shadow-2);
}
@media (max-width:359px){#v-mb .bt-card{padding:20px 14px 24px}}

/* ---------- 卡片下方的信任条 ---------- */

#v-mb .bt-trust{
  list-style:none;margin:20px 4px 0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
#v-mb .bt-trust li{
  display:flex;align-items:center;gap:9px;
  font-size:13px;line-height:1.45;color:var(--ink-3);
}
#v-mb .bt-trust svg{flex:0 0 auto;width:17px;height:17px;color:var(--brand)}
#v-mb .bt-layout.is-booking .bt-trust{display:none}

/* 768–1023px 仍走手机分支，但主内容居中限宽 —— 平板上把输入框拉满整屏会很难看，
   一行输入框横跨 1000px，眼睛跟不了。 */
@media (min-width:768px){
  /* ⚠️ 这里**不能**写 height（原来是 460px）。墙的高度由 aspect-ratio 决定；
     给了显式 height 就等于宽高都确定，aspect-ratio 失效，banner 图会被裁。

     这一档（768–1023，主要是 iPad 竖屏）改用**电脑端那张 2.4:1 的图**：
     手机端那张是 1.2:1，在 820px 宽的屏上会把墙撑到 683px 高，照片带整条掉到
     白卡下面去，两侧只剩一条人物的边——很怪。换成 2.4:1，墙高 342px，
     人物正好落在卡片上方露出来。
     ⚠️ 这里只能写 background-image（不能写 background 简写，简写会把上面的
     size/position/repeat/aspect 之外的设置一起重置）；后面那条 linear-gradient
     是图没加载出来时的兜底。 */
  #v-mb .bt-wall{
    aspect-ratio:2400 / 1000;
    background-image:url(../img/book-trial/hero-pc.jpg),
      linear-gradient(180deg,#E1EEF8 0%,#DEECF6 30%,#EBF4FA 58%,#F6FAFC 82%,#FBFCFD 100%);
  }
  #v-mb .bt-hero{max-width:640px;margin:0 auto;padding:40px 24px 0}
  #v-mb .bt-layout{max-width:680px;margin:0 auto;padding:0 24px}
  #v-mb .bt-card{padding:32px 30px 36px;margin-top:30px}
  #v-mb .bt-trust{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:12px 26px}
}

/* ---------- 页头页脚 ----------
   用的是站内那套 .hdr / .menu-sheet / .foot，样式全在 a398fbc4b52bc5d0.css 里，
   本文件**一条都不覆盖**，否则这一页的页头页脚会和别的页对不齐。
   汉堡菜单的开合逻辑在 assets/js/book-trial.js 里补（本页不加载公共脚本），见那边说明。 */

#v-mb .foot{margin-top:44px}

/* ---------- 首屏 ---------- */

/* eyebrow 用站内的 .eyebrow（自带 20×1.5px 蓝杠），这里只调间距 */
#v-mb .bt-hero .eyebrow{margin-bottom:12px}

/* 字重 600 而不是 700 —— 站内 `#v-mb h1,#v-mb h2` 就是 600，写 700 会比别的页粗一档。
   ⚠️ 颜色是蓝的不是 --ink —— 照着 results.html 手机端首屏标题来的：
   assets/css/bc2f50f1948e1c32.css 里 `#v-mb #view-results .sub-hero h1{color:var(--brand)…}`。
   ⚠️ 用的是 --brand（#1497D0），**这是看过深色版之后定下的**，别再"顺手改深"。
   实测（白纱已去掉）中位对比度 --brand 2.69:1、--brand-deep(#0F7AAC) 3.79:1，
   大字的线是 3:1 —— 这一版是**知情地低于 3:1**，取的是与全站标题的视觉统一。
   兜底在上面那条三层白色 text-shadow 上。要提对比度先恢复白纱，别先动颜色。
   注意 eyebrow 和标签仍是 --brand-deep：那是小字，4.5:1 的线更严，
   而且 results.html 本身就是「标题浅蓝 + 小字深蓝」的搭配。 */
#v-mb .bt-title{
  font-family:var(--font-serif);
  font-size:30px;line-height:1.17;margin:0 0 10px;
  font-weight:600;color:var(--brand);letter-spacing:-.014em;
}
@media (max-width:359px){#v-mb .bt-title{font-size:27px}}
/* ⚠️ 颜色不用 --ink-2（#4A5766 中灰）：那是给白底正文的，压在照片上等于半透明。
   用 --ink + 字重 500，层级靠 30px serif 对 15px sans 的体量差拉开。 */
#v-mb .bt-sub{font-size:15px;line-height:1.55;font-weight:500;color:var(--ink);margin:0 0 14px}

/* 取值照抄站内首页 banner 下面那排 `#v-mb .hero-chip`（assets/css/a398fbc4b52bc5d0.css:216）：
   白底 + rgba(20,151,208,.18) 描边 + 蓝字 + 32px 高 + 999px + 一道很淡的投影。
   ⚠️ 字色用 --brand-deep 而不是首页那份的 --brand：#1497D0 在白底上只有 3.30:1，
   12.5px 的正文要 4.5:1，不够；#0F7AAC 是 4.77:1。首页那排是既有实现，不在本次范围内。

   **「一定排一行」靠的是这三条**，也是首页那排标签用的同一套办法：
     · flex-wrap:nowrap      —— 不给它换行的机会；
     · white-space:nowrap    —— 标签内部也不断词；
     · font-size:clamp(…vw…) —— 屏幕越窄字越小，而不是换行。
   实测两个标签在 375px 上只占 253px，宽裕；clamp 是给 320px 小屏留的保险。
   ⚠️ 手机端只有**两个**标签（U.S.-licensed teachers 挪进了副标题），三个排不下。 */
#v-mb .bt-facts{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;
  list-style:none;margin:0;padding:0;
}
#v-mb .bt-facts li{
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:32px;padding:0 13px;border-radius:999px;
  background:var(--surface);
  border:1px solid rgba(20,151,208,.18);
  box-shadow:0 2px 6px rgba(11,34,51,.06);
  /* 3.4vw 而不是照抄首页的 2.6vw：首页那排是**三个**标签，这里只有两个，宽度富余
     （375px 上两个只占 232px / 可用 339px）。3.4vw 让 375 屏直接吃满 12.5px 上限，
     320px 小屏落到 11px 仍排得下（实测 242px / 可用 284px）。 */
  font-size:clamp(11px,3.4vw,12.5px);font-weight:600;line-height:1;
  color:var(--brand-deep);
  white-space:nowrap;min-width:0;
  text-shadow:none;
}
#v-mb .bt-facts li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--brand);
}

/* ---------- 四步进度 ---------- */

#v-mb .bt-steps{margin:0 0 18px}
#v-mb .bt-steps-label{
  margin:0 0 7px;font-size:12px;font-weight:600;
  letter-spacing:.02em;color:var(--ink-3);
}
#v-mb .bt-steps-bar{display:flex;gap:5px}
#v-mb .bt-steps-bar .bt-step-i{
  flex:1;height:4px;border-radius:999px;background:var(--divider);
  transition:background .2s ease;
}
#v-mb .bt-steps-bar .bt-step-i.is-now,
#v-mb .bt-steps-bar .bt-step-i.is-done{background:var(--brand)}

/* ---------- 展示分段 ---------- */

/* .bt-seg 不设 display —— 一旦设了就会压过 UA 的 [hidden]{display:none}，
   两段会同时显示（选课区那两条 .bt-stage[hidden] 兜底就是为了同一个坑）。
   这里额外写死一条，防止以后有人给 .bt-seg 加 display。 */
#v-mb .bt-seg[hidden]{display:none}
#v-mb .bt-seg .bt-sect:focus{outline:none}
#v-mb .bt-seg-foot{margin-top:22px}
#v-mb .bt-seg-note{
  margin:9px 0 0;font-size:12.5px;line-height:1.45;
  color:var(--ink-3);text-align:center;
}
/* Back 是次要操作：文字按钮，不跟主按钮抢 */
#v-mb .bt-back{
  display:block;width:100%;margin:14px 0 0;padding:10px 0;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink-3);
  background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-back:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 手机端表单不套白卡片（一屏就那么宽，卡片边框只是浪费横向空间） */
#v-mb .bt-form{padding:0;background:transparent;box-shadow:none;border:0}

/* ---------- 问卷题目 ---------- */

#v-mb .bt-q{padding:20px 0;border-top:1px solid var(--divider)}
#v-mb .bt-q:first-child{padding-top:0;border-top:0}
#v-mb .bt-q-title{
  font-size:16px;font-weight:700;color:var(--ink);
  margin:0 0 6px;line-height:1.4;
}
#v-mb .bt-q-desc{font-size:13px;line-height:1.6;color:var(--ink-3);margin:0 0 14px}

/* 分栏密度由脚本按整组最长文案挑（optionDensity），与电脑端同一套类名、只是列更窄：
   手机端一屏就那么宽，half 档实际落成一列、tight 档两列，长文案不会被挤断。 */
#v-mb .bt-opts{display:grid;grid-template-columns:1fr;gap:8px}
#v-mb .bt-opts-half{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
#v-mb .bt-opts-tight{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
#v-mb .bt-opt{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 13px;
  border:1.5px solid var(--divider);border-radius:10px;
  background:#fff;cursor:pointer;
  font-size:14px;line-height:1.5;color:var(--ink);
  /* 手机上点击反馈要即时，过渡放短 */
  transition:border-color .12s ease,background .12s ease;
}
#v-mb .bt-opt input{
  flex:0 0 auto;margin:2px 0 0;
  width:18px;height:18px;accent-color:var(--brand);
}
#v-mb .bt-opt span{flex:1}
#v-mb .bt-opt:has(input:checked){
  border-color:var(--brand);background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand);
}
#v-mb .bt-opt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

#v-mb .bt-q-branch{
  background:var(--brand-softer);
  border-radius:12px;padding:18px 16px 20px;
  margin:4px 0 0;border-top:0;
}
#v-mb .bt-q-in{animation:btInM .2s ease both}
@keyframes btInM{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

#v-mb .bt-other{margin-top:11px}

/* ---------- 两段式小节标题 ---------- */

/* 左对齐 + 无衬线：这是「分组标题」，家长是扫的不是读的。衬线体留给 H1。 */
#v-mb .bt-sect{
  margin:4px 0 0;padding:0 0 11px;
  font-size:15px;line-height:1.3;font-weight:700;
  color:var(--ink);text-align:left;letter-spacing:.01em;
  border-bottom:1px solid var(--divider);
}
#v-mb .bt-form > .bt-sect:first-child,
#v-mb .bt-seg > .bt-sect:first-child{margin-top:0}
#v-mb .bt-sect + .bt-q{border-top:0}

/* ---------- 字段：必填星号、字段下方灰色提示、区号 + 号码同行 ---------- */

#v-mb .bt-req{color:var(--red);font-weight:700;margin-left:1px}
#v-mb .bt-hint{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted)}
#v-mb .bt-q-desc-lead{margin-top:2px}

/* 手机端字段间距来自 `.form{display:flex;gap:14px}` 的**直接子元素** gap；本页的字段包在
   .bt-q 里，拿不到那个 gap，不补这条两个字段会贴死（加了字段下方提示后尤其明显）。 */
#v-mb .bt-q .field + .field{margin-top:14px}

/* 区号占固定窄列。手机端字号 15px，+852 (Hong Kong) 这种最长的选项也放得下 */
#v-mb .bt-phone-row{display:grid;grid-template-columns:124px 1fr;gap:10px}

/* 备注框走 .field textarea 的现成样式（手机端那份样式表已经覆盖 textarea），
   只把默认最小高度放大一点，多行 placeholder 才不会被截掉 */
#v-mb .bt-form textarea{min-height:104px}

/* ---------- 收尾：说明在前、按钮在后 ---------- */

#v-mb .bt-form .bt-note{margin:16px 0 0}
#v-mb .bt-submit{margin-top:14px}

#v-mb input[name=website]{
  position:absolute;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none;
}

#v-mb .bt-note{
  margin:12px 0 0;font-size:12.5px;line-height:1.55;
  color:var(--ink-3);text-align:center;
}

/* ---------- 选课区 ---------- */

#v-mb .bt-stage{display:block}
/* 同电脑端：display:block 的权重高过 UA 的 [hidden]{display:none}，不补这条模式 B 不生效 */
#v-mb .bt-stage[hidden]{display:none}
#v-mb .bt-booking-head{margin-bottom:18px}
/* 同电脑端：这三块面板现在装在 .bt-card 里，白底会变成卡中卡，改成浅色内嵌面板 */
#v-mb .bt-step{
  background:var(--alt);border:1px solid var(--divider);
  border-radius:12px;padding:16px 14px;margin-bottom:12px;
}
#v-mb .bt-step:last-child{margin-bottom:0}

/* ⚠️ 令牌词表与电脑端不同，不能照抄那份。手机端样式表（a398fbc4b52bc5d0.css）把令牌定义在
   `#v-mb{…}` 上、电脑端定义在 `#v-pc{…}` 上，两者是**兄弟节点**，互不继承。所以手机端
   这份文件里只能用 --divider / --divider-strong / --r / --r-sm / --shadow-1 / --surface /
   --muted / --alt / --brand-softer，写 --line / --radius / --shadow-md / --brand-mist
   会静默失效（那条声明整条无效，边框直接变成 none，本地肉眼很难发现）。 */

#v-mb .bt-step-h{
  font-size:15px;font-weight:700;color:var(--ink);
  margin:0 0 6px;line-height:1.4;
}
#v-mb .bt-load{
  display:flex;align-items:center;gap:9px;
  margin:0;font-size:13.5px;color:var(--ink-3);
}
#v-mb .bt-load-dot{
  flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--brand-soft);border-top-color:var(--brand);
  animation:btSpinM .7s linear infinite;
}
@keyframes btSpinM{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#v-mb .bt-load-dot{animation:none}}

#v-mb .bt-msg{
  margin:0;padding:13px 14px;border-radius:10px;
  font-size:13.5px;line-height:1.6;
}
#v-mb .bt-msg.is-info{background:var(--brand-softer);border:1px solid var(--divider);color:var(--ink-2)}
/* 手机端样式表没有 --red 的浅色底（电脑端那份有 --red-soft），所以用白底 + 红边 + 红字，
   不自己造一个新的浅红。红色取值与站内 .form-error 同源（--red 就是它写死的 #C64C3B）。 */
#v-mb .bt-msg.is-err{background:var(--surface);border:1px solid var(--red);color:var(--red)}
/* 约课失败时报错框插在时段列表最前面，与紧随其后的「Pick a time」标题之间要留间距 */
#v-mb .bt-step .bt-msg + .bt-step-h{margin-top:16px}

#v-mb .bt-notice{
  margin:0 0 18px;padding:13px 14px;
  background:var(--brand-soft);border:1px solid var(--divider);
  border-radius:10px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
}

/* ---------- 教材卡片 ---------- */

#v-mb .bt-books{display:flex;flex-direction:column;gap:9px}
#v-mb .bt-book{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 12px;margin:0;text-align:left;
  font:inherit;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--divider);border-radius:11px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-book:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

#v-mb .bt-book-cover,
#v-mb .bt-picked .bt-book-cover{
  flex:0 0 auto;display:block;
  width:40px;height:54px;border-radius:5px;
  object-fit:cover;background:var(--brand-soft);
  border:1px solid var(--divider);
}
#v-mb .bt-book-cover.is-blank{
  background:linear-gradient(135deg,var(--brand-soft),var(--brand-softer));
}
#v-mb .bt-book-body,
#v-mb .bt-picked-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#v-mb .bt-book-name{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)}
#v-mb .bt-book-meta{font-size:12px;line-height:1.45;color:var(--muted)}

#v-mb .bt-picked{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border:1.5px solid var(--brand);
  border-radius:11px;background:var(--brand-softer);
}
#v-mb .bt-picked-label{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-deep);
}
#v-mb .bt-change{
  flex:0 0 auto;margin:0;padding:8px 12px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--brand-deep);
  background:var(--surface);border:1px solid var(--brand);border-radius:8px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-change:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- 时段 ---------- */

#v-mb .bt-day{margin-top:18px}
#v-mb .bt-day:first-of-type{margin-top:14px}
#v-mb .bt-day-h{
  margin:0 0 8px;padding-bottom:6px;
  font-size:12.5px;font-weight:700;color:var(--ink-2);
  border-bottom:1px solid var(--divider);
}
/* 手机端一屏窄，固定两列比 auto-fill 稳 —— 老师名较长时 auto-fill 会挤成一列并留大片空白 */
#v-mb .bt-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#v-mb .bt-chip{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 11px;margin:0;text-align:left;
  font:inherit;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--divider);border-radius:10px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-mb .bt-chip-t{font-size:14px;font-weight:700;line-height:1.3}
#v-mb .bt-chip-w{
  font-size:11.5px;line-height:1.35;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

#v-mb .bt-more{
  display:block;width:100%;margin:16px 0 0;padding:12px 14px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--brand-deep);
  background:var(--surface);border:1.5px dashed var(--divider-strong);border-radius:10px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-more:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- 已约课程 ---------- */

#v-mb .bt-conf-badge{
  display:inline-block;margin:0 0 13px;padding:5px 10px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--brand);border-radius:999px;
}
#v-mb .bt-kv{margin:0;display:flex;flex-direction:column;gap:11px}
/* 手机端不并列 label / value：104px 的标签列会把「Thu, Sep 18 · 10:00 AM – 10:45 AM」挤到换行 */
#v-mb .bt-kv > div{display:flex;flex-direction:column;gap:2px}
#v-mb .bt-kv dt{
  margin:0;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);
}
#v-mb .bt-kv dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
#v-mb .bt-kv .bt-tz{color:var(--muted);font-size:12.5px}
#v-mb .bt-conf-note{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--divider);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
}
#v-mb .bt-cancel{
  margin:12px 0 0;padding:8px 0;
  font:inherit;font-size:13px;color:var(--muted);
  background:none;border:0;border-bottom:1px solid var(--divider);
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-cancel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-mb .bt-cancel.is-busy{opacity:.55;pointer-events:none}

/* ---------- 出席确认与改期（kax#4329）----------
   未确认时「Yes, we'll be there」是卡片上的主操作：课前 24 小时仍未确认，系统会释放时段，
   所以它的视觉权重要高于改期与取消。改期借用 .bt-more 那档次要按钮的观感，
   取消保持原来最低的那一档 —— 三者权重依次递减，家长不会误点最重的那个。 */
#v-mb .bt-conf-attend{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--divider);
}
#v-mb .bt-conf-attend.is-yes{
  font-size:13px;font-weight:600;line-height:1.5;color:var(--brand-deep);
}
#v-mb .bt-conf-q{margin:0 0 11px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
#v-mb .bt-confirm{
  display:block;width:100%;min-height:46px;padding:11px 15px;margin:0;
  font:inherit;font-size:14px;font-weight:600;color:#fff;
  background:var(--brand);border:1.5px solid var(--brand);border-radius:10px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-confirm:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-mb .bt-confirm.is-busy{opacity:.55;pointer-events:none}
#v-mb .bt-conf-acts{display:flex;flex-direction:column;align-items:flex-start}
#v-mb .bt-reschedule{
  display:block;width:100%;margin:14px 0 0;padding:11px 14px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--brand-deep);
  background:var(--surface);border:1.5px solid var(--divider-strong);border-radius:10px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-reschedule:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-mb .bt-reschedule.is-busy{opacity:.55;pointer-events:none}
/* 已取消的落地页：徽章转灰，别让家长以为课还在 */
#v-mb .bt-conf.is-canceled .bt-conf-badge{background:var(--muted)}

/* ---------- 约课确认弹窗（手机端：底部抽屉） ----------
   形态跟本站手机端自己的 .modal-sheet 一致（贴底、上圆角 20px、留 safe-area），
   而不是照抄电脑端那个居中卡片 —— 手机上居中弹窗会被软键盘顶掉一半。 */

#v-mb .bt-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:flex-end;
  background:rgba(11,34,51,.45);
}
#v-mb .bt-modal-card{
  width:100%;max-height:88vh;overflow-y:auto;
  background:var(--surface);
  border-radius:20px 20px 0 0;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-3);
}
#v-mb .bt-modal-h{
  margin:0 0 16px;font-size:17px;font-weight:700;
  line-height:1.35;color:var(--ink);
}
#v-mb .bt-modal .bt-kv{
  margin:0 0 18px;padding-bottom:16px;
  border-bottom:1px solid var(--divider);
}
#v-mb .bt-modal-field label{
  display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:.02em;margin-bottom:6px;
}
#v-mb .bt-optional{font-weight:500;font-size:11.5px;color:var(--muted);letter-spacing:0}
#v-mb .bt-modal textarea{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--divider-strong);border-radius:10px;
  background:var(--surface);
  font-family:var(--font-sans);font-size:15px;line-height:1.55;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  resize:vertical;min-height:76px;display:block;
}
#v-mb .bt-modal textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}

#v-mb .bt-modal-actions{display:flex;gap:10px;margin-top:18px}
#v-mb .bt-modal-back,
#v-mb .bt-modal-go{
  padding:13px 16px;margin:0;font:inherit;font-size:14.5px;font-weight:600;
  border-radius:10px;cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-modal-back{
  flex:0 0 auto;color:var(--ink-2);
  background:var(--surface);border:1.5px solid var(--divider-strong);
}
#v-mb .bt-modal-go{
  flex:1;color:#fff;background:var(--brand);border:1.5px solid var(--brand);
}
#v-mb .bt-modal-back:focus-visible,
#v-mb .bt-modal-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-mb .bt-modal.is-busy .bt-modal-back,
#v-mb .bt-modal.is-busy .bt-modal-go{opacity:.55;pointer-events:none}

/* ================== 本轮新增：加载、校验错误、提交反馈、页脚 ==================
   ⚠️ 令牌词表与电脑端不同（本文件上方那条说明）：这里只能用 --divider /
   --divider-strong / --surface / --muted / --brand-soft / --brand-softer /
   --brand-deep / --brand-darker / --r / --r-sm / --shadow-1..3 / --red / --accent。
   写 --line / --radius / --ink-mute / --red-soft / --brand-mist 会整条静默失效。 */

/* ---------- 问卷渲染前的占位 ---------- */

#v-mb .bt-loading-q{
  display:flex;align-items:center;gap:9px;
  margin:0;font-size:13.5px;color:var(--ink-3);
}
#v-mb .bt-reload{
  display:block;width:100%;margin:12px 0 0;padding:12px 16px;
  font:inherit;font-size:14px;font-weight:600;color:#fff;
  background:var(--brand-deep);border:0;border-radius:10px;cursor:pointer;
}

/* ---------- 选项组的 fieldset ---------- */

#v-mb .bt-fs{border:0;margin:0;padding:0;min-width:0}
#v-mb .bt-fs > legend{padding:0;display:block;width:100%}

/* ---------- 校验错误 ---------- */

/* 手机端样式表没有浅红底（--red-soft 是电脑端的），所以用白底 + 红边 + 红字，
   与本文件里 .bt-msg.is-err 同一套做法，不自己造新色。 */
#v-mb .bt-errsum{
  margin:0 0 18px;padding:13px 14px;
  background:var(--surface);border:1px solid var(--red);border-radius:10px;
}
#v-mb .bt-errsum-h{margin:0;font-size:13.5px;font-weight:700;line-height:1.5;color:var(--red)}
#v-mb .bt-errsum ul{margin:8px 0 0;padding:0 0 0 17px}
#v-mb .bt-errsum li{margin-top:5px}
#v-mb .bt-errsum button{
  margin:0;padding:2px 0;font:inherit;font-size:13px;line-height:1.5;
  color:var(--red);background:none;border:0;
  text-align:left;text-decoration:underline;cursor:pointer;
}
#v-mb .bt-errsum.is-warn{border-color:var(--accent)}
#v-mb .bt-errsum.is-warn .bt-errsum-h{color:#7A5312;font-weight:600}

/* 颜色之外还带一个「!」图标 —— 只靠红色的话色觉障碍的家长看不出来 */
#v-mb .bt-field-err{
  display:flex;align-items:flex-start;gap:6px;
  margin:7px 0 0;font-size:12.5px;line-height:1.5;color:var(--red);
}
#v-mb .bt-field-err::before{
  content:"!";flex:0 0 auto;
  width:15px;height:15px;margin-top:1px;border-radius:50%;
  background:var(--red);color:#fff;
  font-size:11px;font-weight:700;line-height:15px;text-align:center;
}
#v-mb [data-field].is-invalid input:not([type=radio]):not([type=checkbox]),
#v-mb [data-field].is-invalid select,
#v-mb [data-field].is-invalid textarea{
  border-color:var(--red);
}
#v-mb .bt-q[data-field].is-invalid .bt-opts{
  padding:9px;margin:0 -9px;
  border-radius:10px;
  box-shadow:inset 0 0 0 1.5px var(--red);
}
/* #hdr 是 sticky 的，聚焦时别把字段顶到它底下 */
#v-mb [data-field]{scroll-margin-top:76px}

/* ---------- 提交按钮与状态 ---------- */

#v-mb .bt-submit{margin-top:18px}
/* 品牌主蓝配白字只有 3.3:1。--brand-deep（#0F7AAC）是 4.8:1，仍是同一条蓝色体系。
   只改本页这两个主按钮，不动全站 .btn-primary。 */
#v-mb .bt-submit .btn-primary,
#v-mb .bt-seg-foot .btn-primary{background:var(--brand-deep)}
#v-mb .bt-submit .btn-primary:active,
#v-mb .bt-seg-foot .btn-primary:active{background:var(--brand-darker)}
/* 手机上主按钮要够大、够好点 */
#v-mb .bt-submit .btn-lg,
#v-mb .bt-seg-foot .btn-lg{
  min-height:54px;font-size:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
#v-mb .bt-submit .btn:disabled{opacity:.85;cursor:default}
/* 提交中：按钮自己转圈，**不再让整张表变淡**（站内 .is-submitting 是
   opacity:.6 + pointer-events:none）。防重复提交由 submitting 锁 + 真 disabled 负责。 */
#v-mb .bt-form.is-submitting{opacity:1;pointer-events:auto}
#v-mb .bt-submit .btn.is-busy::before{
  content:"";flex:0 0 auto;
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:btSpinM .7s linear infinite;
}
@media (prefers-reduced-motion:reduce){#v-mb .bt-submit .btn.is-busy::before{animation:none}}

#v-mb .bt-submit-note{
  margin:9px 0 0;font-size:12px;line-height:1.45;
  color:var(--muted);text-align:center;
}
#v-mb .bt-status{
  margin:10px 0 0;padding:10px 13px;border-radius:9px;
  font-size:13px;line-height:1.5;text-align:center;
  background:var(--brand-softer);border:1px solid var(--divider);color:var(--ink-2);
}

/* 进选课区时顶上的那条说明。刻意不用成功绿或对勾：
   「资料已保存」和「已约到课」是两件事，这里只完成了前一件。 */
#v-mb .bt-flash{
  margin:0 0 16px;padding:12px 14px;border-radius:10px;
  font-size:13.5px;line-height:1.6;
  background:var(--brand-soft);border:1px solid var(--divider);color:var(--ink-2);
}
#v-mb .bt-flash.is-ok{background:var(--brand-softer);border-color:var(--brand)}
#v-mb [id^="btGreet"]:focus{outline:none}
#v-mb [id^="btGreet"]:focus-visible{outline:2px solid var(--brand);outline-offset:4px}


/* ---------- 触摸尺寸 ----------
   站内共用样式里输入框是 15px / 46px。**16px 是 iOS 的硬门槛**：小于它，Safari 在聚焦
   输入框时会把整页放大，家长填完一栏要手动缩回去才能看见下一栏。这一页表单长、输入框多，
   这个代价比别的页大得多，所以在本页把字号与高度一起提上来。 */
#v-mb .bt-form input:not([type=radio]):not([type=checkbox]),
#v-mb .bt-form select,
#v-mb .bt-form textarea{
  font-size:16px;
  min-height:50px;
}
/* 选项整块可点，够到 48px 的触摸目标 */
#v-mb .bt-opt{min-height:48px;align-items:center}

/* ---------- 取消预约的二次确认 ----------
   取消不可撤销（leadToken 已被消费、不重签），所以先出这一组，确认了才真的发请求。
   手机端没有 --red-soft，用白底红边，与本文件 .bt-msg.is-err 一致。 */
#v-mb .bt-cancel-ask{
  margin:12px 0 0;padding:13px 14px;
  background:var(--surface);border:1px solid var(--red);border-radius:10px;
}
#v-mb .bt-cancel-q{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--ink-2)}
#v-mb .bt-cancel-acts{display:flex;flex-direction:column;gap:9px}
#v-mb .bt-cancel-keep,
#v-mb .bt-cancel-go{
  width:100%;min-height:46px;padding:11px 15px;margin:0;
  font:inherit;font-size:14px;font-weight:600;
  border-radius:10px;cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-cancel-keep{color:#fff;background:var(--ink-2);border:1.5px solid var(--ink-2)}
#v-mb .bt-cancel-go{color:var(--red);background:var(--surface);border:1.5px solid var(--red)}
#v-mb .bt-cancel-keep:focus-visible,
#v-mb .bt-cancel-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-mb .bt-cancel-go.is-busy{opacity:.55;pointer-events:none}

/* ================== 表单层次（与电脑端同一套设计，取值收窄） ==================
   ⚠️ 只能用手机端令牌表里有的变量；下面的浅蓝灰是直接写死的十六进制，
   因为手机端那份样式表里没有对应档位的令牌，写 var(--line) 之类会整条失效。
   （背景那面墙在本文件上方「背景墙 + 白卡」一节，已经不含任何几何图形。） */

/* 卡片：同电脑端的三件事 —— 竖向渐变、蓝调阴影、顶部品牌色书脊 */
#v-mb .bt-card{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 60%,#FAFCFE 100%);
  border-color:#E6EEF5;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(20,86,130,.12), 0 4px 12px rgba(20,86,130,.06);
}
#v-mb .bt-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand) 45%,#8FD0EE 100%);
}

/* 输入框做成凹进卡片的槽，聚焦翻白 + 蓝圈。这是"更立体"的主要手段 */
#v-mb .bt-form input:not([type=radio]):not([type=checkbox]),
#v-mb .bt-form select,
#v-mb .bt-form textarea{
  background:#F5F9FC;
  border-color:#DDE8F1;
}
#v-mb .bt-form input:not([type=radio]):not([type=checkbox]):focus,
#v-mb .bt-form select:focus,
#v-mb .bt-form textarea:focus{
  background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(20,151,208,.15);
}

#v-mb .bt-opt{background:#FAFCFE;border-color:#E1EAF2}
#v-mb .bt-opt:has(input:checked){
  border-color:var(--brand);
  background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand), 0 2px 8px rgba(20,151,208,.10);
}

/* 分组标题前的品牌色竖条 */
#v-mb .bt-sect{display:flex;align-items:center;gap:9px}
#v-mb .bt-sect::before{
  content:"";flex:0 0 auto;
  width:4px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-deep));
}

#v-mb .bt-q-branch{border-left:3px solid var(--brand-soft)}
#v-mb .bt-step{background:#F7FAFD;border-color:#E3ECF4}

/* ---------- 其它级别的教材（kax#4199）----------
   与电脑端同一套信息结构，样式走移动端自己的变量（--surface / --divider-strong）。 */
#v-mb .bt-levels-toggle{
  display:block;width:100%;margin:16px 0 0;padding:12px 14px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--brand-deep);
  background:var(--surface);border:1.5px dashed var(--divider-strong);border-radius:10px;
  cursor:pointer;-webkit-appearance:none;appearance:none;text-align:left;
}
#v-mb .bt-levels-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-mb .bt-levels-toggle::after{content:"\0000A0 \25BE "}
#v-mb .bt-levels-toggle[aria-expanded="true"]::after{content:"\0000A0 \25B4 "}
#v-mb .bt-levels{margin-top:12px}
#v-mb .bt-level-group + .bt-level-group{margin-top:16px}
#v-mb .bt-level-h{
  margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-3);
}
#v-mb .bt-levels-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}

/* 时段区的时区切换 */
#v-mb .bt-tz-change{
  font:inherit;font-size:inherit;font-weight:600;color:var(--brand-deep);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
}
#v-mb .bt-tz-change:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

#v-mb .bt-levels-all{
  display:block;width:100%;margin:14px 0 0;padding:11px 14px;
  font:inherit;font-size:13px;font-weight:600;color:var(--brand-deep);
  background:var(--surface);border:1px solid var(--divider-strong);border-radius:10px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-mb .bt-levels-all:focus-visible{outline:2px solid var(--brand);outline-offset:2px}


/* 时区搜索框（kax#4199）。窄屏上搜索框与下拉各占一行，min-width:0 防止长选项撑破容器 */

/* ---------- 时区选择弹窗（kax#4199）----------
   外壳是贴底抽屉（.bt-modal-card 已定义），列表高度按抽屉可用高度收敛。 */
#v-mb .bt-tz-search{
  /* 16px 是下限：iOS Safari 在输入框字号小于 16px 时会自动放大整个页面，
     放大后弹窗会被推出视口，家长得手动缩回去。 */
  width:100%;font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid var(--divider-strong);border-radius:10px;
  background:var(--surface);color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
#v-mb .bt-tz-search:focus{outline:2px solid var(--brand);outline-offset:1px}
#v-mb .bt-tz-list{
  margin-top:12px;max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--divider);border-radius:10px;padding:5px;
}
#v-mb .bt-tz-gh{
  margin:12px 6px 6px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);
}
#v-mb .bt-tz-gh:first-child{margin-top:4px}
#v-mb .bt-tz-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:11px 10px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:14px;color:var(--ink-2);text-align:left;cursor:pointer;
}
#v-mb .bt-tz-opt:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
#v-mb .bt-tz-opt.is-current{background:var(--brand-softer);font-weight:600;color:var(--brand-deep)}
#v-mb .bt-tz-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v-mb .bt-tz-off{flex:none;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
#v-mb .bt-tz-opt.is-current .bt-tz-off{color:var(--brand-deep)}
#v-mb .bt-tz-empty{margin:16px 10px;font-size:13.5px;color:var(--ink-3)}