/* 免费试听预约页 · 电脑端专属样式（#v-pc 作用域）
   设计令牌（--brand / --ink / --line / --radius / --shadow-* 等）来自本页同时引用的
   90b157310d209bd0.css —— 之所以引用 index 那一份而不是别页的，是因为 pc 侧「一页一份 CSS」，
   而只有它同时含 .site-header / .site-footer 与 .cta-form / .form-field 两套样式。
   页头页脚直接用主站的 .site-header / .site-footer 结构，本文件不再自建。
   本文件只补两类：本页容器与标题、问卷题目与选项（站内没有同类组件可复用）。
   表单本体（.cta-form / .form-field / .form-row / .form-error / .btn）用现成的，
   只覆盖宽度与阴影：那套样式是给首页侧栏卡片写的，本页表单是页面主体。 */

/* ---------- 页头 ----------
   本页用的就是站内那条 .site-header（高度、logo、导航、下拉全部沿用 90b157310d209bd0.css
   里的取值），这里**一条都不覆盖** —— 覆盖了这一页的页头就和别的页对不齐。
   页头的交互（滚动阴影）在 assets/js/book-trial.js 里补，见那边的说明。 */

/* ---------- 背景墙 + 居中白卡 ----------

   骨架取自参考站（asiaodysseytravel 联系页）：一张满幅背景 + 一张浮在上面的居中白卡。
   但**背景不放照片**：真人照片试过两轮（源图在用户本机，站内已删）。首屏可见的那一条
   被白卡上沿限住，满幅铺装不下全身、缩成面板又会把表单推下去 —— 放大放小都不好看，
   最后决定这一版先不放人。这面墙按站内那批 hero 图的视觉语言自己画。 */

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

/* 墙 = 五团柔光 + 一层底色渐变，全部写在同一个 background 堆栈里。

   为什么不用「一堆 div + filter:blur」那种常见写法：
   每个 blur 图层都要单独栅格化再合成，五层叠起来在低端机上会掉帧；而 radial-gradient
   本身就是连续的，边缘天然是软的，不需要再模糊一次。同样的观感，零模糊开销。

   为什么不用描边的圆环/方块：那种「几何装饰」在低透明度下读起来像没删干净的线框，
   而且它有明确的边，跟这面墙想要的「晕染」是反的。

   高度 760px：要让晕染从卡片两侧一直穿下去。收尾色必须是页面底色
   （本页 body 在 >=1024px 是 #FFFFFF），否则墙的下沿会横穿卡片留一条硬边。 */
/* ===== 换整张 banner 图的位置 =====================================
   图已经换上（2026-09-11）。以后要再换，直接覆盖
   site/assets/img/book-trial/hero-pc.jpg，CSS 不用动。

   **规格：2400 × 1000 px（2.4:1），JPG，≤300KB。**

   为什么容器要写 aspect-ratio 2400/1000：容器比例 = 图片比例时，cover 就等于
   「完整显示」—— 任何屏幕宽度都不裁切，设计稿上是什么，页面上就是什么。
   （对比：站内首页 banner 用的是固定 2.7:1 + object-position，源图 2.29:1，
   所以它是**裁过**的，设计时看到的和线上不一样。这里刻意不那么做。）

   图上要避开的三块（按设计稿 2400×1000 的坐标）：
     · 上半部 y 0–500        标题文案压在这里，保持浅、低对比、别放细节
     · 中下部 x 430–1950 / y 560–1000   白色表单卡片盖住，放什么都看不见
     · 下边缘                 收成接近白色，和页面底色接上，不然会有一道横边

   两个下角（x<430 与 x>1950、y>560）是露在卡片外面的，视觉重点放这儿。 */
#v-pc .bt-wall{
  position:absolute;left:0;right:0;top:0;
  aspect-ratio:2400 / 1000;
  overflow:hidden;pointer-events:none;
  background:
    url(img/book-trial/hero-pc.jpg),
    /* 顶部中央的白色光晕：标题落在最亮的一块上，字才立得住。
       别放太大 —— 盖过头整面墙会被洗白，蓝色就只剩四个角。 */
    radial-gradient(ellipse 820px 340px at 50% -30px, rgba(255,255,255,.72), rgba(255,255,255,0) 72%),
    /* 左上 品牌蓝 */
    radial-gradient(ellipse 780px 640px at 2% -10%, rgba(20,151,208,.42), rgba(20,151,208,0) 66%),
    /* 右上 更亮的青蓝 */
    radial-gradient(ellipse 840px 680px at 100% 0%, rgba(96,183,226,.46), rgba(96,183,226,0) 64%),
    /* 右中 压深一档，避免整面墙一个调子发平 */
    radial-gradient(ellipse 680px 580px at 88% 42%, rgba(13,110,160,.24), rgba(13,110,160,0) 68%),
    /* 左下 托住墙的下半段，让它不是「上面有色下面突然白」 */
    radial-gradient(ellipse 740px 540px at 4% 68%, rgba(20,151,208,.20), rgba(20,151,208,0) 68%),
    linear-gradient(180deg,#DFEDF8 0%,#DBEAF6 30%,#E9F3FA 58%,#F6FAFD 82%,#FFFFFF 100%);
  /* ⚠️ 这三条必须写在 background 简写**之后** —— 简写会把 size/position/repeat
     重置回初始值，写在前面等于没写（图会平铺、不铺满）。 */
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  /* 整面墙自下而上淡出。**必须有这一条**：上面那几团柔光的半径大于墙高
     （比如左下那团中心在 68%、半径 540px），到不了自然衰减就被 overflow:hidden
     一刀切断，在卡片两侧留下一道横向接缝 —— 淡淡的一条，但在大屏纯色背景上看得很清楚。
     换成 banner 图之后这条同样有用：它把图的下边缘化进页面，不会留一道横边。
     淡出起点放在 76%，图的主体不会被遮掉。 */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
}
/* 文案区的一层白纱。**这是可读性，不是装饰**：
   banner 图里三个人物正好落在标题带（墙高的 12%–50%，也就是 eyebrow / h1 / 副标题 /
   三条 facts 那一块）。深色正文压在头发和脸上，对比度不够，副标题那两行基本读不了。
   做法是在墙上盖一层自上而下的白，浓度只在文案带最高，到 74% 完全归零 ——
   往下人物的身体、右下角的操场都保持原对比度，看起来就像一层顺光的薄雾，不像贴了块板。
   ⚠️ 不要改成局部的圆形高光：那会在人脸上留一团明显的白斑。
   如果以后换一张人物不压标题的图，这一层可以整段删掉。 */
/* 2026-09-11 这层白纱已按要求整层去掉 —— banner 就按原图显示，不加任何遮罩。
   ⚠️ 去掉之后压字全靠两件事，改动它们之前先看下面的实测值：
     · 文字自身的颜色要够深（标题用 --brand-deep 而不是 --brand，副标题用 --ink）；
     · 文字的白色描边（见下面那条 text-shadow）。
   要恢复白纱的话，把下面这段注释放开即可：
   #v-pc .bt-wall::after{content:"";position:absolute;inset:0;pointer-events:none;
     background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.17) 20%,
     rgba(255,255,255,.17) 52%,rgba(255,255,255,.07) 68%,rgba(255,255,255,0) 82%);} */

/* 压字主要靠这一层，不是靠白纱。**量过**：这张图人物的深色头发正好压在副标题那一栏，
   纱加到 .70（那时图已经废了）副标题最差处的对比度也只有 3.6:1，够不到 4.5:1 ——
   均匀铺一层纱在这种构图上是无效的工具。
   所以改成给每个字母描一圈白：三层由紧到松的白色 text-shadow，等于让字自己带一小块
   白底，跟背景多深没关系。纱就只负责压掉大面积的花，可以做得很淡（.28），图保持鲜活。
   ⚠️ 只加在首屏这块文案上。表单里的字在白卡上，加了会发虚。 */
#v-pc .bt-hero-text .eyebrow,
#v-pc .bt-title,
#v-pc .bt-sub{
  /* 收紧过：原来最外层是 18px 的大范围白，放大看是一圈毛边而不是底。
     现在三层都贴着字，只在字的紧邻处造一小块白，不往外发散。 */
  text-shadow:
    0 1px 1px rgba(255,255,255,.92),
    0 0 4px   rgba(255,255,255,.88),
    0 0 12px  rgba(255,255,255,.55);
}

/* eyebrow **不覆盖颜色**，用站内 .eyebrow 的默认值 --brand（#1497D0，
   90b157310d209bd0.css:69，文字和两侧 44×2px 蓝杠都是它）。
   这里曾经改成过深一档的 --brand-deep，**已按要求撤掉**，别再加回来：
   与标题同色是定下来的取向。代价记录在案 —— eyebrow 是 12.5px 小字，
   白底上 #1497D0 只有 3.30:1，低于正文 4.5:1 的线，靠下面那条白描边兜。
   （标签仍是 --brand-deep，那是坐在白药丸上的小字，没有描边可兜。） */

/* 2026-09-11 换成真实 banner 图之后，原来的 sweep（斜向白光）和 grain（噪点）两层
   已经删掉，对应的 <span> 也从 HTML 里去掉了。原因：
   · sweep 是 42% 的白，压在照片上等于蒙一层雾，人脸直接发灰；
   · grain 是用来打散纯渐变的 8bit 色带的，照片本身有噪声，不存在这个问题，
     再叠一层只会让图看起来脏。
   如果以后又改回纯渐变背景，这两层要一起加回来（尤其 grain，没有它大屏上会出横条）。 */

/* ---------- 首屏文案：居中、极短 ---------- */

#v-pc .bt-hero{
  position:relative;z-index:1;
  max-width:1120px;margin:0 auto;padding:70px 24px 0;
}
/* 文案块直接挂站内的 .section-head（居中 + max-width:760px），所以这里不要再设
   max-width 去跟它打架 —— 挂那个类的好处是：eyebrow 自动变成「两侧各一条 44×2px
   蓝杠 + 居中」，与全站 7 处小节标题**完全同一套**，不用另写一行。 */
#v-pc .bt-hero-text{margin-bottom:0}
#v-pc .bt-hero .eyebrow{margin-bottom:20px}

/* serif / clamp(38,3.6vw,50) / 700 / -.02em，与站内 .section-title 同一套取值。
   ⚠️ 颜色是蓝的不是 --ink —— 照着 results.html 的首屏标题来的：
   assets/f694708c20e9f0df.css 里 `#v-pc .page-hero h1{…color:var(--brand)…}`。
   站内凡是「页面首屏大标题」都是蓝的，深藏蓝是给小节标题用的。
   ⚠️ 用的是 --brand（#1497D0），**这是看过深色版之后定下的**，别再"顺手改深"。
   背景：results 那个标题坐在纯白上，这个坐在照片上，同一个颜色会掉下来。
   实测（白纱已去掉）中位对比度 --brand 2.27:1、--brand-deep(#0A5F87) 3.76:1，
   大字的线是 3:1 —— 也就是说这一版是**知情地低于 3:1** 的，取的是视觉统一。
   兜底在下面那条三层白色 text-shadow 上（对比度算法不计它，实际观感好于 2.27）。
   真要提对比度，优先级是：先恢复白纱（取值在上面注释里），再考虑动颜色。 */
#v-pc .bt-title{
  font-family:var(--font-serif);
  font-size:clamp(38px,3.6vw,50px);
  line-height:1.1;letter-spacing:-.02em;
  font-weight:700;color:var(--brand);
  margin:0 0 18px;text-wrap:balance;
}
/* 与站内 .section-lead 同一档：18px。
   ⚠️ 颜色**刻意不用 --ink-2**（#4A5766 中灰）。那是给白底正文的值，压在照片上
   等于半透明，是这段文案最弱的一环。这里用 --ink（#0B2233）并把字重提到 500：
   层级不靠颜色分，靠 50px serif 对 18px sans 的体量差，照样拉得开。 */
#v-pc .bt-sub{
  font-size:18px;line-height:1.6;font-weight:500;color:var(--ink);
  margin:0 auto 26px;max-width:560px;
}

/* 三个事实做成白色药丸。
   ⚠️ 这里和早先那条「白胶囊是 AI 页面零件」的判断不一致，是有意改的：
   那时墙是一整面平渐变，胶囊纯属装饰，没有要解决的问题；现在墙是一张照片，
   13.5px 的小字无论怎么描边都压不住脸和衣服的花——给它一个真正的底才是解法。
   白药丸和下面那张白卡是同一种「白色物体」，读起来是一套设计，不是补丁。
   ⚠️ 不用 backdrop-filter：本项目明确避开 blur（低端安卓掉帧），纯半透明白就够。 */
#v-pc .bt-facts{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;
  list-style:none;margin:0;padding:0;
}
/* 取值**逐条照抄站内的 .hero-chip**（assets/f694708c20e9f0df.css:50，results.html
   首屏那个「● Real Growth」就是它）：brand-soft 底 + rgba(20,151,208,.22) 描边 +
   brand-deep 字 + brand 圆点 + 999px。只有内边距按这里的三个并排调大一档。
   照抄的好处是这一页的标签和 results / method / programs 那些页是同一个零件，
   不是本页自造的新样式。 */
#v-pc .bt-facts li{
  display:flex;align-items:center;gap:9px;
  padding:8px 18px;border-radius:999px;
  background:var(--brand-soft);
  border:1px solid rgba(20,151,208,.22);
  font-size:13px;font-weight:600;line-height:1.4;color:var(--brand-deep);
  /* 药丸自带底色，再加描边只会糊 —— 明确清掉从 .bt-hero-text 继承下来的那一层 */
  text-shadow:none;
}
#v-pc .bt-facts li::before{
  content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--brand);
}

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

#v-pc .bt-layout{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 24px}
/* 卡片比容器窄并居中 */
#v-pc .bt-card{max-width:900px;margin-left:auto;margin-right:auto}
/* 卡片做三件事拉开层次：
   1. 白→极淡蓝的竖向渐变，纯白平铺在浅蓝墙上会显得"贴上去的一张纸"；
   2. 阴影带蓝调（用品牌蓝的 rgba 而不是灰），跟背景是同一个色系，浮起来才自然；
   3. 顶部一条品牌色渐变，像卡片的书脊，给它一个明确的"上沿"。 */
#v-pc .bt-card{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 62%,#FAFCFE 100%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px;
  padding:38px 46px 42px;
  margin-top:38px;
  overflow:hidden;                 /* 让顶部那条渐变跟着圆角切 */
  box-shadow:
    0 32px 70px rgba(20,86,130,.14),
    0 10px 24px rgba(20,86,130,.07),
    0 1px 0 rgba(255,255,255,.9) inset;
}
#v-pc .bt-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand) 45%,#8FD0EE 100%);
}
/* 表单本体不再是卡片了 —— 卡片是外面那层 .bt-card。
   站内 .cta-form 自带白底、圆角和一层重阴影，不清掉会变成"卡中卡"。 */
#v-pc .bt-form{
  background:transparent;border:0;box-shadow:none;
  border-radius:0;padding:0;
}

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

#v-pc .bt-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;
  list-style:none;margin:26px 0 0;padding:0;
}
#v-pc .bt-trust li{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;line-height:1.45;color:var(--ink-3);
}
#v-pc .bt-trust svg{flex:0 0 auto;width:18px;height:18px;color:var(--brand)}
/* 进了选课区就收起：那时家长要看的是书和时间，不是"为什么要来" */
#v-pc .bt-layout.is-booking .bt-trust{display:none}

/* ---------- 三步进度 ---------- */

/* 进度条与下面第一个小节标题之间要留够 —— 两者贴太近会读成一坨。
   不给进度条加下边线：小节标题自己有一条，两条横线离得近反而更乱。 */
#v-pc .bt-steps{
  display:flex;align-items:center;gap:10px;
  list-style:none;margin:0 0 30px;padding:0;
}
#v-pc .bt-step-i{
  display:flex;align-items:center;gap:8px;
  font-size:13px;line-height:1.3;color:var(--ink-mute);
}
#v-pc .bt-step-i + .bt-step-i::before{
  content:"";width:26px;height:1px;background:var(--line);margin-right:2px;
}
#v-pc .bt-step-n{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;
  font-size:11.5px;font-weight:700;
}
#v-pc .bt-step-i.is-now{color:var(--ink);font-weight:600}
#v-pc .bt-step-i.is-now .bt-step-n{border-color:var(--brand);background:var(--brand);color:#fff}
#v-pc .bt-step-i.is-done{color:var(--ink-3)}
#v-pc .bt-step-i.is-done .bt-step-n{border-color:var(--brand-tint-2);background:var(--brand-soft);color:var(--brand-deep)}

/* 卡片样式在上面的「白卡」一节（.bt-card），这里不要再给 .bt-form 加背景或阴影 ——
   加了就是卡中卡。 */

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

#v-pc .bt-q{
  padding:24px 0;
  border-top:1px solid var(--line-2);
}
#v-pc .bt-q:first-child{padding-top:0;border-top:0}
#v-pc .bt-q-title{
  font-size:17px;font-weight:700;color:var(--ink);
  margin:0 0 6px;line-height:1.4;letter-spacing:-.005em;
}
#v-pc .bt-q-desc{
  font-size:13.5px;line-height:1.6;color:var(--ink-3);
  margin:0 0 16px;
}

/* 选项：整块可点（label 包住原生 input），保留原生控件的键盘可达与读屏语义。
   分栏密度由脚本按整组最长文案挑（optionDensity）：缺省整行铺开，短文案改横排多栏，
   把「8 个选项 = 8 行满宽卡片」压成两行，长表单才不会一眼看不到头。 */
#v-pc .bt-opts{display:grid;grid-template-columns:1fr;gap:9px}
#v-pc .bt-opts-half{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
#v-pc .bt-opts-tight{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#v-pc .bt-opt{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;
  border:1.5px solid var(--line);border-radius:11px;
  background:#fff;cursor:pointer;
  font-size:14.5px;line-height:1.5;color:var(--ink);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
#v-pc .bt-opt:hover{border-color:var(--brand);background:var(--brand-mist)}
#v-pc .bt-opt input{
  flex:0 0 auto;margin:2px 0 0;
  width:17px;height:17px;accent-color:var(--brand);cursor:pointer;
}
#v-pc .bt-opt span{flex:1}
/* :has 不支持时退化为「只有 hover 有反馈」，不影响可用性 */
#v-pc .bt-opt:has(input:checked){
  border-color:var(--brand);background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand);
}
#v-pc .bt-opt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

/* 分支题（选中测评体系后就地展开）：给一点入场位移，让"下面多出一题"这件事被看见 */
#v-pc .bt-q-branch{
  background:var(--brand-mist);
  border-radius:var(--radius);
  padding:22px 22px 24px;
  margin:4px 0 0;
  border-top:0;
}
#v-pc .bt-q-in{animation:btIn .22s var(--ease) both}
@keyframes btIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* improvement 勾了 Other 才出现 */
#v-pc .bt-other{margin-top:12px}

/* ---------- 两段式小节标题（把「说孩子」与「怎么联系你」分开） ---------- */

/* 左对齐 + 无衬线：这是「分组标题」，家长是扫的不是读的。衬线体留给 H1。 */
#v-pc .bt-sect{
  margin:6px 0 0;padding:0 0 12px;
  font-size:16px;line-height:1.3;font-weight:700;
  color:var(--ink);text-align:left;letter-spacing:.01em;
  border-bottom:1px solid var(--line-2);
}
#v-pc .bt-form > .bt-sect:first-child{margin-top:0}
/* 错误摘要占了 :first-child，紧跟它的小节标题也不该有上间距 */
#v-pc .bt-errsum + .bt-sect{margin-top:0}
/* 小节标题自己有下边线，紧跟它的题目再画一条就成了双线 */
#v-pc .bt-sect + .bt-q{border-top:0}

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

#v-pc .bt-req{color:var(--red);font-weight:700;margin-left:1px}
#v-pc .bt-hint{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--ink-mute)}
/* .form-field 自带 margin-bottom:16px，提示贴在输入框下面就够了，不要再叠一层间距 */
#v-pc .form-field .bt-hint:last-child{margin-bottom:0}
/* 小节标题下那句总说明：没有 h3 在它上面，所以自己补一点上间距 */
#v-pc .bt-q-desc-lead{margin-top:2px}

#v-pc .bt-phone-row{display:grid;grid-template-columns:132px 1fr;gap:10px}

/* 备注框。pc 那份样式表只写了 .form-field input / select，没有 textarea，
   所以这里照它的取值补齐，保证和上面几个输入框长得一样。 */
#v-pc .bt-form textarea{
  width:100%;padding:13px 14px;
  border:1.5px solid var(--line);
  border-radius:10px;font:inherit;font-size:15px;line-height:1.6;
  color:var(--ink);background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  resize:vertical;min-height:112px;display:block;
}
#v-pc .bt-form textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(20,151,208,.15);
}
#v-pc .bt-form textarea::placeholder{color:var(--ink-mute)}

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

/* 用途说明放在按钮之后（.bt-submit 与它的状态区在上面），所以这里只管排版。
   .bt-submit 本身的样式在文件末尾「提交按钮与状态」那一节。 */
#v-pc .bt-form .cta-form-note{
  text-align:center;margin:18px 0 0;
  font-size:12.5px;line-height:1.55;color:var(--ink-mute);
}
#v-pc .bt-form .cta-form-note a{color:var(--ink-3);text-decoration:underline}

/* 蜜罐：真人看不到也 tab 不到 */
#v-pc input[name=website]{
  position:absolute;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none;
}

/* ---------- 选课区（教材 → 时段 → 已约课程） ---------- */

#v-pc .bt-stage{display:block}
/* 这条 [hidden] 兜底是必须的：上面那句 display:block 的选择器权重高过 UA 样式表里
   [hidden]{display:none}，少了它 stageForm.hidden=true 不生效 —— 模式 B（跳过问卷直接选课）
   会变成问卷与选课区同时显示。 */
#v-pc .bt-stage[hidden]{display:none}
#v-pc .bt-booking-head{margin-bottom:22px;text-align:center}
/* 选课区的三块面板现在装在 .bt-card 里了：**不能再带白底和阴影**，否则是卡中卡。
   改成浅色内嵌面板，靠底色和细边跟外层白卡区分。 */
#v-pc .bt-step{
  background:var(--bg-alt);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:22px 24px;
  box-shadow:none;margin-bottom:14px;
}
#v-pc .bt-step:last-child{margin-bottom:0}

/* 载入态与提示条。三种 step 容器共用，所以放在书本/时段之前。 */

#v-pc .bt-step-h{
  font-size:16px;font-weight:700;color:var(--ink);
  margin:0 0 6px;line-height:1.4;letter-spacing:-.005em;
}
#v-pc .bt-load{
  display:flex;align-items:center;gap:10px;
  margin:0;font-size:14px;color:var(--ink-3);
}
#v-pc .bt-load-dot{
  flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--brand-tint-2);border-top-color:var(--brand);
  animation:btSpin .7s linear infinite;
}
@keyframes btSpin{to{transform:rotate(360deg)}}
/* 动效关掉时留一个静态圆环 —— 不能只剩一段没有任何进度感的文字 */
@media (prefers-reduced-motion:reduce){#v-pc .bt-load-dot{animation:none}}

#v-pc .bt-msg{
  margin:0;padding:14px 16px;border-radius:11px;
  font-size:14px;line-height:1.6;
}
#v-pc .bt-msg.is-info{background:var(--brand-mist);border:1px solid var(--brand-tint-2);color:var(--ink-2)}
#v-pc .bt-msg.is-err{background:var(--red-soft);border:1px solid var(--red);color:var(--red)}
#v-pc .bt-step .bt-msg + .bt-step-h{margin-top:16px}

/* 取消预约后回到问卷时的说明条 */
#v-pc .bt-notice{
  margin:0 0 22px;padding:14px 16px;
  background:var(--brand-soft);border:1px solid var(--brand-tint-2);
  border-radius:11px;font-size:14px;line-height:1.6;color:var(--ink-2);
}

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

#v-pc .bt-books{display:flex;flex-direction:column;gap:10px}
#v-pc .bt-book{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:12px 14px;margin:0;text-align:left;
  font:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
#v-pc .bt-book:hover{border-color:var(--brand);background:var(--brand-mist)}
#v-pc .bt-book:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 封面：course_resource.cover 是本地维护的 OSS 图，可能为空 —— 空则用品牌渐变占位，
   而不是留一个塌掉的 img 框。两种形态尺寸必须一致，否则卡片高度会参差。 */
#v-pc .bt-book-cover,
#v-pc .bt-picked .bt-book-cover{
  flex:0 0 auto;display:block;
  width:46px;height:62px;border-radius:6px;
  object-fit:cover;background:var(--brand-soft);
  border:1px solid var(--line-2);
}
#v-pc .bt-book-cover.is-blank{
  background:linear-gradient(135deg,var(--brand-tint-2),var(--brand-soft));
}
#v-pc .bt-book-body,
#v-pc .bt-picked-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#v-pc .bt-book-name{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
#v-pc .bt-book-meta{font-size:12.5px;line-height:1.45;color:var(--ink-mute)}

/* 已选教材摘要 */
#v-pc .bt-picked{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border:1.5px solid var(--brand);
  border-radius:12px;background:var(--brand-mist);
}
#v-pc .bt-picked-label{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-deep);
}
#v-pc .bt-change{
  flex:0 0 auto;margin:0;padding:7px 13px;
  font:inherit;font-size:13px;font-weight:600;color:var(--brand-deep);
  background:#fff;border:1px solid var(--brand);border-radius:8px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-pc .bt-change:hover{background:var(--brand);color:#fff}
#v-pc .bt-change:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

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

#v-pc .bt-day{margin-top:20px}
#v-pc .bt-day:first-of-type{margin-top:16px}
#v-pc .bt-day-h{
  margin:0 0 9px;padding-bottom:7px;
  font-size:13px;font-weight:700;color:var(--ink-2);
  letter-spacing:.01em;border-bottom:1px solid var(--line-2);
}
#v-pc .bt-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
#v-pc .bt-chip{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;margin:0;text-align:left;
  font:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
#v-pc .bt-chip:hover{border-color:var(--brand);background:var(--brand-mist)}
#v-pc .bt-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-pc .bt-chip-t{font-size:14.5px;font-weight:700;line-height:1.3}
#v-pc .bt-chip-w{font-size:12px;line-height:1.35;color:var(--ink-mute)}

#v-pc .bt-more{
  display:block;width:100%;margin:18px 0 0;padding:11px 14px;
  font:inherit;font-size:14px;font-weight:600;color:var(--brand-deep);
  background:#fff;border:1.5px dashed var(--brand-tint-2);border-radius:11px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-pc .bt-more:hover{border-style:solid;border-color:var(--brand);background:var(--brand-mist)}
#v-pc .bt-more:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

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

#v-pc .bt-conf-badge{
  display:inline-block;margin:0 0 14px;padding:5px 11px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--brand);border-radius:999px;
}
#v-pc .bt-kv{margin:0;display:flex;flex-direction:column;gap:11px}
#v-pc .bt-kv > div{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:baseline}
#v-pc .bt-kv dt{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-mute);padding-top:2px;
}
#v-pc .bt-kv dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
#v-pc .bt-kv .bt-tz{color:var(--ink-mute);font-size:13px;white-space:nowrap}
#v-pc .bt-conf-note{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:13.5px;line-height:1.6;color:var(--ink-3);
}
/* 取消是低频且不可撤销的动作：做成低调的文字按钮，不跟主 CTA 抢注意力 */
#v-pc .bt-cancel{
  margin:12px 0 0;padding:8px 0;
  font:inherit;font-size:13.5px;color:var(--ink-mute);
  background:none;border:0;border-bottom:1px solid var(--line);
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-pc .bt-cancel:hover{color:var(--red);border-bottom-color:var(--red)}
#v-pc .bt-cancel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-pc .bt-cancel.is-busy{opacity:.55;pointer-events:none}

/* ---------- 出席确认与改期（kax#4329）----------
   三个动作的视觉权重依次递减：确认（实心主色）> 改期（描边）> 取消（文字按钮）。
   未确认时确认是这张卡片上的主操作 —— 课前 24 小时仍未确认，系统会释放该时段。 */
#v-pc .bt-conf-attend{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);
}
#v-pc .bt-conf-attend.is-yes{
  font-size:14px;font-weight:600;line-height:1.5;color:var(--brand-deep);
}
#v-pc .bt-conf-q{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
#v-pc .bt-confirm{
  display:inline-block;min-height:44px;padding:11px 22px;margin:0;
  font:inherit;font-size:14.5px;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-pc .bt-confirm:hover{filter:brightness(1.06)}
#v-pc .bt-confirm:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-pc .bt-confirm.is-busy{opacity:.55;pointer-events:none}
#v-pc .bt-conf-acts{display:flex;flex-direction:column;align-items:flex-start}
#v-pc .bt-reschedule{
  display:inline-block;margin:14px 0 0;padding:10px 18px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--brand-deep);
  background:transparent;border:1.5px solid var(--line-2);border-radius:10px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-pc .bt-reschedule:hover{border-color:var(--brand)}
#v-pc .bt-reschedule:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-pc .bt-reschedule.is-busy{opacity:.55;pointer-events:none}
/* 已取消的落地页：徽章转灰，别让家长以为课还在 */
#v-pc .bt-conf.is-canceled .bt-conf-badge{background:var(--ink-mute)}

/* ---------- 约课确认弹窗（电脑端：居中卡片） ---------- */

#v-pc .bt-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;
  background:rgba(11,34,51,.45);
}
#v-pc .bt-modal-card{
  width:100%;max-width:470px;
  background:#fff;border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow-lg);
}
#v-pc .bt-modal-h{
  margin:0 0 18px;font-size:18px;font-weight:700;
  line-height:1.35;color:var(--ink);letter-spacing:-.008em;
}
#v-pc .bt-modal .bt-kv{
  margin:0 0 20px;padding-bottom:18px;
  border-bottom:1px solid var(--line-2);
}
#v-pc .bt-modal-field label{
  display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;
}
#v-pc .bt-optional{
  font-weight:500;font-size:12px;color:var(--ink-mute);
}
#v-pc .bt-modal textarea{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:14.5px;line-height:1.55;
  color:var(--ink);background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  resize:vertical;min-height:78px;display:block;
}
#v-pc .bt-modal textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(20,151,208,.15);
}
#v-pc .bt-modal textarea::placeholder{color:var(--ink-mute)}

#v-pc .bt-modal-actions{display:flex;gap:10px;margin-top:20px}
#v-pc .bt-modal-back,
#v-pc .bt-modal-go{
  padding:12px 18px;margin:0;font:inherit;font-size:14.5px;font-weight:600;
  border-radius:10px;cursor:pointer;-webkit-appearance:none;appearance:none;
}
#v-pc .bt-modal-back{
  flex:0 0 auto;color:var(--ink-2);
  background:#fff;border:1.5px solid var(--line);
}
#v-pc .bt-modal-back:hover{border-color:var(--ink-mute);color:var(--ink)}
#v-pc .bt-modal-go{
  flex:1;color:#fff;background:var(--brand);border:1.5px solid var(--brand);
}
#v-pc .bt-modal-go:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
#v-pc .bt-modal-back:focus-visible,
#v-pc .bt-modal-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 提交中：两个按钮一起锁死。JS 里遮罩点击与 Esc 也一并挡掉 —— 小程序只禁了提交按钮，
   请求还在飞时点遮罩能把弹窗关掉、状态却照常翻成已预约，那个缺陷不要带过来。 */
#v-pc .bt-modal.is-busy .bt-modal-back,
#v-pc .bt-modal.is-busy .bt-modal-go{opacity:.55;pointer-events:none}

/* ================== 本轮新增：加载、校验错误、提交反馈、页脚 ==================
   （电脑端；手机端同名组件在 assets/css/book-trial-mb.css，取值与令牌都不一样，
   不要把这一段照抄过去 —— 那边没有 --line / --radius / --ink-mute 这些令牌。） */

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

#v-pc .bt-loading-q{
  display:flex;align-items:center;gap:10px;
  margin:0;font-size:14px;color:var(--ink-3);
}
/* 脚本加载失败时 bootstrap 会把这条占位换成 .bt-msg.is-err 并塞一个重载按钮 */
#v-pc .bt-reload{
  display:block;margin:12px 0 0;padding:9px 16px;
  font:inherit;font-size:13.5px;font-weight:600;color:#fff;
  background:var(--brand-deep);border:0;border-radius:9px;cursor:pointer;
}

/* ---------- 选项组的 fieldset ----------
   renderChoice 改用 fieldset/legend 拿读屏的分组语义，样式上要把浏览器默认的
   边框、内外边距、以及 legend 的特殊排版全部清掉，否则每道题都套一个灰框。 */

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

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

#v-pc .bt-errsum{
  margin:0 0 22px;padding:14px 16px;
  background:var(--red-soft);border:1px solid var(--red);
  border-radius:11px;
}
#v-pc .bt-errsum-h{
  margin:0;font-size:14px;font-weight:700;line-height:1.5;color:var(--red);
}
#v-pc .bt-errsum ul{margin:8px 0 0;padding:0 0 0 18px}
#v-pc .bt-errsum li{margin-top:4px}
/* 摘要里的每条错误是个按钮：点一下跳到对应字段。做成链接样子，不要按钮样子。 */
#v-pc .bt-errsum button{
  margin:0;padding:0;font:inherit;font-size:13.5px;line-height:1.5;
  color:var(--red);background:none;border:0;
  text-align:left;text-decoration:underline;cursor:pointer;
}
#v-pc .bt-errsum button:hover{color:#B03030}
#v-pc .bt-errsum.is-warn{background:var(--accent-soft);border-color:var(--accent)}
#v-pc .bt-errsum.is-warn .bt-errsum-h{color:#8A4E14;font-weight:600}

/* 字段旁的那一条。颜色之外还带一个「!」图标 —— 只靠红色的话色觉障碍的家长看不出来。 */
#v-pc .bt-field-err{
  display:flex;align-items:flex-start;gap:6px;
  margin:7px 0 0;font-size:13px;line-height:1.5;color:var(--red);
}
#v-pc .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-pc [data-field].is-invalid input:not([type=radio]):not([type=checkbox]),
#v-pc [data-field].is-invalid select,
#v-pc [data-field].is-invalid textarea{
  border-color:var(--red);
}
/* 选项题整组标红：单个选项框描红没有意义，出错的是「没选」这件事 */
#v-pc .bt-q[data-field].is-invalid .bt-opts{
  padding:10px;margin:0 -10px;
  border-radius:11px;
  box-shadow:inset 0 0 0 1.5px var(--red);
}
/* 聚焦时不被 sticky 页头压住 */
#v-pc [data-field]{scroll-margin-top:96px}

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

#v-pc .bt-submit{
  display:flex;flex-direction:column;align-items:center;
  margin-top:20px;
}
/* 站内 .cta-form .btn 是 width:100%（给首页侧栏卡片写的）。本页表单是页面主体，
   按钮铺满整行会显得很笨重，这里收回成居中的定宽。 */
#v-pc .bt-submit .btn{
  width:auto;min-width:300px;margin-top:0;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
/* 品牌主蓝配白字只有 3.3:1，达不到正文对比要求。这一页的主按钮压深到 #0F7AAC（4.8:1），
   仍是同一条蓝色体系。只改本页的这个按钮，不动全站 .btn-primary。 */
#v-pc .bt-submit .btn-primary{background:#0F7AAC;box-shadow:0 4px 14px rgba(15,122,172,.26)}
#v-pc .bt-submit .btn-primary:hover{background:var(--brand-deep)}
#v-pc .bt-submit .btn:disabled{
  opacity:.85;cursor:default;transform:none;
  box-shadow:none;
}
/* 提交中：按钮自己转圈。**不再让整张表变淡** —— 站内 .is-submitting 是
   opacity:.6 + pointer-events:none，加在这张长表单上等于把家长刚填的内容整片调暗，
   看着像出错了。防重复提交改由 submitting 锁 + 真 disabled 负责。 */
#v-pc .bt-form.is-submitting{opacity:1;pointer-events:auto}
#v-pc .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:btSpin .7s linear infinite;
}
@media (prefers-reduced-motion:reduce){#v-pc .bt-submit .btn.is-busy::before{animation:none}}

#v-pc .bt-submit-note{
  margin:10px 0 0;font-size:12.5px;line-height:1.5;
  color:var(--ink-mute);text-align:center;
}
#v-pc .bt-status{
  margin:10px 0 0;padding:9px 14px;border-radius:9px;
  font-size:13px;line-height:1.5;text-align:center;
  background:var(--brand-mist);border:1px solid var(--brand-tint-2);color:var(--ink-2);
}

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

/* ---------- 页脚 ----------
   本页用的是站内那份 .site-footer（四列 + 版权 + 商标声明），样式全部来自
   90b157310d209bd0.css，这里不覆盖。只在主内容与它之间留出间距。 */

#v-pc .site-footer{margin-top:64px}

/* ---------- 窄电脑（1024–1199）---------- */

@media (min-width:1024px) and (max-width:1199px){
  /* ⚠️ 这里**不能**再写 height。墙的高度由 aspect-ratio 2400/1000 决定，
     一旦给出显式 height，宽高都确定了，aspect-ratio 就被忽略 —— banner 图会被
     cover 裁掉一块，而且不同屏宽裁的还不一样。原来这一档写过 height:680px，
     那是纯渐变时代为了让墙穿到卡片下面留的，换成图之后是个坑。 */
  #v-pc .bt-hero{padding:40px 20px 0}
  #v-pc .bt-title{font-size:38px}
  #v-pc .bt-sub{font-size:16px}
  #v-pc .bt-layout{padding:0 20px}
  #v-pc .bt-card{padding:30px 30px 34px;margin-top:32px}
  #v-pc .bt-trust{gap:12px 24px}
  #v-pc .bt-trust li{font-size:13px}
}

/* ---------- 取消预约的二次确认 ----------
   取消不可撤销（leadToken 已被消费、不重签），所以点「Cancel this class」先出这一组，
   确认了才真的发请求。 */
#v-pc .bt-cancel-ask{
  margin:12px 0 0;padding:14px 16px;
  background:var(--red-soft);border:1px solid var(--red);border-radius:11px;
}
#v-pc .bt-cancel-q{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
#v-pc .bt-cancel-acts{display:flex;gap:10px}
#v-pc .bt-cancel-keep,
#v-pc .bt-cancel-go{
  padding:9px 15px;margin:0;font:inherit;font-size:13.5px;font-weight:600;
  border-radius:9px;cursor:pointer;-webkit-appearance:none;appearance:none;
}
/* 保留课程是默认动作，给它实心样式；真正的取消是次要的那个 */
#v-pc .bt-cancel-keep{color:#fff;background:var(--ink-2);border:1.5px solid var(--ink-2)}
#v-pc .bt-cancel-go{color:var(--red);background:#fff;border:1.5px solid var(--red)}
#v-pc .bt-cancel-go:hover{background:var(--red);color:#fff}
#v-pc .bt-cancel-keep:focus-visible,
#v-pc .bt-cancel-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-pc .bt-cancel-go.is-busy{opacity:.55;pointer-events:none}

/* ================== 表单的层次感（输入框做成"凹进卡片里的槽"） ==================
   之前输入框是白底、卡片也是白底，只靠一条 1px 边线区分，整张表看着是平的。
   改成浅蓝灰填充 + 更淡的边：白卡上凹进去一格，聚焦时再翻成纯白 + 蓝色光圈，
   "现在在填哪一栏"一眼就看得到。这是本轮"更立体"的主要手段，比加阴影稳。 */

#v-pc .bt-form input:not([type=radio]):not([type=checkbox]),
#v-pc .bt-form select,
#v-pc .bt-form textarea{
  background:#F5F9FC;
  border-color:#DDE8F1;
  transition:background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
}
#v-pc .bt-form input:not([type=radio]):not([type=checkbox]):hover,
#v-pc .bt-form select:hover,
#v-pc .bt-form textarea:hover{border-color:#C6D9E8}
#v-pc .bt-form input:not([type=radio]):not([type=checkbox]):focus,
#v-pc .bt-form select:focus,
#v-pc .bt-form textarea:focus{
  background:#fff;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(20,151,208,.15);
}

/* 选项卡片同理：未选中是极淡的蓝灰，选中翻成品牌浅蓝 —— 两个状态的对比比原来大得多 */
#v-pc .bt-opt{
  background:#FAFCFE;
  border-color:#E1EAF2;
}
#v-pc .bt-opt:hover{border-color:var(--brand);background:var(--brand-mist)}
#v-pc .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-pc .bt-sect{
  display:flex;align-items:center;gap:10px;
}
#v-pc .bt-sect::before{
  content:"";flex:0 0 auto;
  width:4px;height:16px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-deep));
}

/* 分支题那块浅蓝面板：加一条左边框，让它明显是"上一题的下级" */
#v-pc .bt-q-branch{
  border-left:3px solid var(--brand-tint-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

/* 选课区的面板也跟着换成同一套浅蓝灰 */
#v-pc .bt-step{background:#F7FAFD;border-color:#E3ECF4}

/* ---------- 其它级别的教材（kax#4199）----------
   默认收起，点标题才展开。展开区直接复用 .bt-books / .bt-book 的卡片样式，
   只多一层分组标题与一条说明，避免再造一套卡片。 */
#v-pc .bt-levels-toggle{
  display:block;width:100%;margin:18px 0 0;padding:11px 14px;
  font:inherit;font-size:14px;font-weight:600;color:var(--brand-deep);
  background:#fff;border:1.5px dashed var(--brand-tint-2);border-radius:11px;
  cursor:pointer;-webkit-appearance:none;appearance:none;text-align:left;
}
#v-pc .bt-levels-toggle:hover{border-style:solid;border-color:var(--brand);background:var(--brand-mist)}
#v-pc .bt-levels-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#v-pc .bt-levels-toggle::after{content:"\0000A0 \25BE "}
#v-pc .bt-levels-toggle[aria-expanded="true"]::after{content:"\0000A0 \25B4 "}
#v-pc .bt-levels{margin-top:14px}
#v-pc .bt-level-group + .bt-level-group{margin-top:18px}
#v-pc .bt-level-h{
  margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-mute);
}
#v-pc .bt-levels-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-mute)}

/* 时段区的时区切换：平时是一个行内链接样式的按钮，点开就地换成下拉 */
#v-pc .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-pc .bt-tz-change:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

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


/* 时区搜索框（kax#4199）：419 个时区靠滚找不到，必须能搜 */

/* ---------- 时区选择弹窗（kax#4199）----------
   复用 .bt-modal / .bt-modal-card 的外壳，这里只定义里面的搜索框与列表。 */
#v-pc .bt-tz-modal .bt-modal-card{max-width:420px}
#v-pc .bt-tz-search{
  width:100%;font:inherit;font-size:14px;padding:10px 12px;
  border:1px solid var(--brand-tint-2);border-radius:10px;background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
#v-pc .bt-tz-search:focus{outline:2px solid var(--brand);outline-offset:1px}
#v-pc .bt-tz-list{
  margin-top:12px;max-height:46vh;overflow-y:auto;
  border:1px solid var(--divider);border-radius:10px;padding:6px;
}
#v-pc .bt-tz-gh{
  margin:12px 6px 6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-mute);
}
#v-pc .bt-tz-gh:first-child{margin-top:4px}
#v-pc .bt-tz-opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:9px 10px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:14px;color:var(--ink-2);text-align:left;cursor:pointer;
}
#v-pc .bt-tz-opt:hover{background:var(--brand-mist)}
#v-pc .bt-tz-opt:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
#v-pc .bt-tz-opt.is-current{background:var(--brand-mist);font-weight:600;color:var(--brand-deep)}
#v-pc .bt-tz-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v-pc .bt-tz-off{flex:none;font-size:12.5px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
#v-pc .bt-tz-opt.is-current .bt-tz-off{color:var(--brand-deep)}
#v-pc .bt-tz-empty{margin:16px 10px;font-size:13.5px;color:var(--ink-mute)}