/* ============================================================================
   v7 · 科技感主题（浅色 · 冷白）
   加载顺序：style.css → theme.css（同权重后置生效；只改变量与必要的硬编码色）
   方向：冷白底 + 纯白卡片 + 极细边框 + 电光蓝主色 + 等宽数字 + 淡淡光晕与网格
   ========================================================================== */

:root{
  --bg:#F6F8FC;
  --panel:#FFFFFF;
  --panel-warm:#FFFFFF;
  --panel-sand:#F8FAFD;
  --ink:#0E1729;
  --ink2:#5A6B85;
  --ink3:#8A99B0;
  --line:rgba(15,23,42,.10);
  --line-soft:rgba(15,23,42,.055);
  --warm:#2563EB; --warm-d:#1D4ED8; --warm-soft:rgba(37,99,235,.075);
  --green:#0EA36B; --green-soft:rgba(16,185,129,.10);
  --blue:#0E7FD1;  --blue-soft:rgba(14,165,233,.10);
  --gold:#B45309;  --gold-soft:rgba(217,119,6,.09);
  --red:#CC2B2B;   --red-soft:rgba(220,38,38,.08);

  --accent:#2563EB;
  --accent-2:#7C3AED;
  --on-accent:#FFFFFF;
  --glass:#FFFFFF;
  --glass-2:#FFFFFF;
  --glass-line:rgba(15,23,42,.09);
  --r-s:12px; --r-m:14px; --r-l:20px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.06);
}

html{color-scheme:light}
body{
  background:
    radial-gradient(760px 420px at 8% -10%, rgba(37,99,235,.09), transparent 62%),
    radial-gradient(680px 400px at 96% 0%,  rgba(124,58,237,.075), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.028) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 55%);
}
/* 内容压在背景网格之上；但浮层容器必须比 main 更高，
   否则 fixed 的遮罩会被 z-index:1 的 main / footer 盖住（手机上就是"内容穿帮"） */
header,#steps,#subnav,main,footer{position:relative;z-index:1}
#help-slot{position:relative;z-index:60}
::selection{background:rgba(37,99,235,.18);color:#0E1729}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
body{font-variant-numeric:tabular-nums;letter-spacing:.1px}

a{color:var(--accent)}
footer{border-top:1px solid var(--line-soft)}
.foot-line b{color:var(--ink2)}

/* ---------------- 页头：白玻璃吸顶 ---------------- */
header{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
          backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--glass-line);
  border-radius:0 0 18px 18px;
  padding-bottom:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.brand{
  font-weight:800;letter-spacing:.6px;
  background:linear-gradient(92deg,#1D4ED8 0%,#2563EB 42%,#7C3AED 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--accent);
}
.brand-sub{color:var(--ink3);letter-spacing:1.1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#profile-bar select{background:#fff;color:var(--ink);border-color:var(--line)}
.fs-ctl button{background:#fff;color:var(--ink2);border:1px solid var(--line)}
.fs-ctl button.on{background:rgba(37,99,235,.10);border-color:var(--accent);color:var(--accent)}
.speak{background:#fff;color:var(--accent);border-color:rgba(37,99,235,.35)}

/* ---------------- 流程条 / 二级导航 ---------------- */
.step-dot .dot{background:#fff;border-color:rgba(15,23,42,.20);border-width:2px}
.step-dot.done .dot{background:var(--green);border-color:var(--green)}
.step-dot.active .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(37,99,235,.14)}
.step-dot label{color:var(--ink2);font-weight:500}
.step-dot.active label{color:var(--accent);font-weight:700}
#steps .line{background:var(--line-soft)}
#subnav .sn{background:#fff;color:var(--ink2);border-color:var(--line)}
#subnav .sn:hover{border-color:var(--accent);color:var(--accent)}
#subnav .sn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ---------------- 卡片 ---------------- */
.card{
  background:#fff;
  border:1px solid var(--glass-line);
  border-radius:var(--r-l);
  box-shadow:var(--shadow);
}
.card h2,.card h1{color:var(--ink);letter-spacing:.3px}
.card .en,.card .meta,.card .hint{color:var(--ink3)}
.wb-today{background:linear-gradient(180deg,#FFFFFF 0%,#F4F8FF 100%);border-color:rgba(37,99,235,.24)}
.gate-card{border-color:rgba(217,119,6,.35)}

/* ---------------- 按钮 ---------------- */
button{
  background:linear-gradient(180deg,#3B82F6 0%,#2563EB 100%);
  color:#fff;font-weight:700;border-radius:var(--r-s);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 16px rgba(37,99,235,.22);
}
button:hover{filter:brightness(1.05)}
button.ghost,button.big.ghost,button.big.ghost.small-h{
  background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;font-weight:600;
}
button.big.ghost:hover,button.big.ghost.small-h:hover{color:var(--accent);border-color:rgba(37,99,235,.45)}
button.danger,button.big.danger{background:#fff;color:var(--red);border:1px solid rgba(204,43,43,.35);box-shadow:none}
.primary,button.primary{background:linear-gradient(180deg,#3B82F6 0%,#2563EB 100%);color:#fff}
button.big{color:#fff;border-radius:var(--r-m)}
button:disabled,button[disabled]{
  background:#EEF1F6;color:#9AA7BC;border:1px solid rgba(15,23,42,.08);
  box-shadow:none;opacity:1;cursor:not-allowed;filter:none;
}

/* ---------------- 表单 ---------------- */
input,select,textarea{
  background:#fff!important;border:1px solid var(--line)!important;
  color:var(--ink)!important;border-radius:var(--r-s)!important;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
input::placeholder,textarea::placeholder{color:var(--ink3)!important}
.field input[type=text],.field input[type=date],.field textarea{background:#fff!important;color:var(--ink)!important}
.big-input{background:#fff!important;font-weight:700}

/* ---------------- 选项 ---------------- */
.opts .o{background:#fff;border-color:var(--line);color:var(--ink2)}
.opts .o:hover{border-color:rgba(37,99,235,.5);color:var(--accent)}
.o.on,.opts .o.on{background:rgba(37,99,235,.10);border-color:var(--accent);color:var(--accent);font-weight:700}
.field.need{background:rgba(217,119,6,.06);border:1px solid rgba(217,119,6,.30);border-radius:12px;box-shadow:none}
.field.need > label{color:#B45309}
.wz-warn{color:#B45309}
.wz-warn:not(:empty){
  background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.28);border-left:none;
  border-radius:10px;padding:8px 12px;font-weight:600;color:#B45309;
}

/* ---------------- 引导条 / 提示块 ---------------- */
.guide{
  background:linear-gradient(90deg, rgba(37,99,235,.075) 0%, rgba(124,58,237,.03) 100%);
  border:1px solid rgba(37,99,235,.22);border-left:3px solid var(--accent);
  border-radius:var(--r-m);
}
.guide .gi{background:linear-gradient(180deg,#3B82F6,#2563EB);color:#fff}
.guide .gt{color:var(--ink)}
.tipbox{background:var(--gold-soft);border-left-color:#D97706;color:var(--ink)}
.tipbox b{color:#B45309}

/* ---------------- 浮层 ---------------- */
.overlay{background:rgba(15,23,42,.34);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.sheet{background:#fff;border:1px solid var(--glass-line);border-radius:var(--r-l);
  box-shadow:0 24px 60px rgba(16,24,40,.18)}
.cred,.cred-pre{background:#F8FAFD!important;border-color:var(--line)!important;color:var(--ink)}

/* ---------------- 结果页 / 计划页 / 教材页 ---------------- */
.start-row{background:#F8FAFD;border-left:3px solid rgba(37,99,235,.45)}
.start-row .sr-name{color:var(--ink)}
.start-row .sr-label{color:var(--accent)}
.start-row .sr-next{color:var(--green)}
.out-mode{background:#F8FAFD;color:var(--ink2)}
.note{background:var(--red-soft);border-left-color:var(--red);color:var(--ink)}
.note.mid{background:var(--gold-soft);border-left-color:#D97706}
.wk,.book,.lesson,.qc-card,.handbook-card,.tier-box,.pcard,.cm-row,.cb-kid{
  background:#fff;border-color:var(--line);color:var(--ink)
}
.wk.on,.book.on{border-color:rgba(37,99,235,.45)}
.tier,.tier-strip .ts,.week-sel .w,.stepper button,.rw,.rf-row input,.id-pills .p,.who-strip span,.v-card,.sample .s,.flowline .node,.badge{
  background:#fff;border-color:var(--line);color:var(--ink2)
}
.tier.on{background:rgba(37,99,235,.10);border-color:var(--accent);color:var(--accent)}
.week-sel .w.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.stepper button:active{background:rgba(37,99,235,.14)}
.code-big{letter-spacing:.28em;background:#F4F8FF;border:1px dashed rgba(37,99,235,.45);color:var(--accent)}
.badge{color:var(--accent)}
.chart-wrap{background:#fff;border-color:var(--line)}

/* ---------------- 顶部孩子条 ---------------- */
#profile-bar{color:var(--ink2)}
.cb-kid{background:#fff;border-color:var(--line);color:var(--ink)}
.cb-kid .cb-av{background:linear-gradient(180deg,#3B82F6,#2563EB);color:#fff;font-weight:700}
.cb-kid .cb-txt em,.cm-txt em{color:var(--ink3)}
.cb-cv,.cb-user{color:var(--ink3)}
.cb-cv i{color:var(--accent)}
.cm-row.on{border-color:var(--accent);background:rgba(37,99,235,.06)}
.cm-tag{color:var(--ink3)}

/* ---------------- 主图 ---------------- */
.lp-banner{
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F5FC 100%);
  border:1px solid var(--glass-line);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 18px 40px rgba(16,24,40,.07);
  overflow:hidden;position:relative;max-width:820px;
}
.lp-banner img{width:100%;height:auto;max-height:262px;object-fit:cover;object-position:center 42%;display:block;
  border-radius:inherit}
.lp-banner.lp-hero-img::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(246,248,252,.10) 0%,rgba(246,248,252,0) 55%,rgba(246,248,252,.55) 100%);
}
.lp-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);opacity:.6;
}
.lp-banner.lp-hero-img.slim img{width:100%;height:132px;max-height:none;object-fit:cover;object-position:center 62%}
@media(max-width:820px){.lp-banner img{max-height:196px}.lp-banner.lp-hero-img.slim img{height:112px}}

/* ---------------- 单卡页 ---------------- */
.card.solo{background:#fff;border-color:var(--glass-line)}
.card.solo .solo-h{
  background:linear-gradient(92deg,#0E1729 0%,#1D4ED8 60%,#7C3AED 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ink);
  letter-spacing:1.2px;
}
.card.solo .solo-lead{color:var(--ink2)}
.solo-foot{color:var(--ink3)}
.fold-btn{background:#fff;color:var(--ink2);border-color:var(--line)}
#more-slot .wb-go{background:#fff;color:var(--ink);border-color:var(--line)}
#more-slot .wb-go:hover{border-color:rgba(37,99,235,.45);color:var(--accent)}

/* 进度条 */
.wz-bar{border-bottom:1px solid var(--line-soft)}
.wz-step{color:var(--accent)}
.wz-name{color:var(--ink3);max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-track{background:#E7ECF4}
.wz-track i{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
@media(max-width:560px){.wz-name{display:none}}

.rules li,.gate-list li{color:var(--ink2)}
.rules li::marker{color:var(--accent)}

@media print{
  body{background:#fff!important}
  body::before{display:none}
  .card,.sheet,header{box-shadow:none!important}
}

/* ============ v7.1 落地页：左句右图 + 只留一个按钮 ============ */
.card.solo.lp-start{padding:20px 20px 22px}
.lp-start-row{display:grid;grid-template-columns:1.02fr 1fr;gap:22px;align-items:center;margin-bottom:16px}
.lp-say{
  margin:0;text-align:left;color:var(--ink);
  font-size:clamp(20px,2.4vw,24px);font-weight:500;line-height:1.8;letter-spacing:.6px;
  text-wrap:balance;word-break:normal;
}
.lp-shot{
  border-radius:16px;overflow:hidden;border:1px solid var(--glass-line);
  box-shadow:0 10px 26px rgba(16,24,40,.09);background:#F1F5FC;
}
.lp-shot img{width:100%;height:100%;max-height:206px;object-fit:cover;object-position:center 46%;display:block}
@media(max-width:640px){
  .card.solo.lp-start{padding:16px 16px 18px}
  .lp-start-row{grid-template-columns:1fr;gap:14px}
  .lp-say{text-align:center;font-size:21px;line-height:1.7}
  .lp-shot img{max-height:174px}
}

/* ============================================================================
   v8 · 教材页手机适配（+ 顶栏/步条在手机上压缩、质检浮层横滚修复）
   ========================================================================== */

/* ---- 每一件教材：整行可点的大按钮，手机上不再挤成小方块 ---- */
.book-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:8px;padding:7px 0;
  min-height:calc(58px*var(--fscale));
}
.book-row + .book-row{border-top:1px solid var(--line-soft)}
.book-row .bn{
  font-size:calc(15px*var(--fscale));font-weight:600;color:var(--ink);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.book-row button{
  height:calc(48px*var(--fscale));min-width:calc(64px*var(--fscale));
  padding:0 12px;font-size:calc(14px*var(--fscale));border-radius:10px;
  flex:none;
}
.book-row button[data-pdf]{
  background:linear-gradient(180deg,#3B82F6,#2563EB);color:#fff;border:none;
  box-shadow:0 4px 12px rgba(37,99,235,.20);
}
.book-row button[data-read]{background:#fff;color:var(--ink);border:1px solid var(--line)}

/* ---- 12 周改成一列到底：多列会在展开某周时错位（平板/宽屏都难看） ---- */
.book-grid{display:flex!important;flex-direction:column;gap:0}
.book{padding:14px 0}
.book + .book{border-top:1px solid var(--line-soft)}
.book:first-child{padding-top:0}
.book.folded{padding:12px 0}

/* ---- 每周一格 ---- */
.book .wk-h{gap:8px;padding-bottom:10px;align-items:center}
.book .wk-no{font-size:calc(16px*var(--fscale));font-weight:700;color:var(--ink);flex:none}
.book .head .wk-tag{font-size:12px;padding:3px 10px;flex:none}
.book .wk-h .wk-open{
  margin-left:auto;height:calc(44px*var(--fscale));min-width:calc(72px*var(--fscale));
  padding:0 14px;font-size:calc(14px*var(--fscale));border-radius:10px;flex:none;
}
.book .pack{
  width:100%;height:calc(50px*var(--fscale));margin-top:10px;
  font-size:calc(15px*var(--fscale));font-weight:700;
}
.book .wk-body{padding-bottom:4px}

/* ---- 自检：一行小卡，不占第一屏 ---- */
.qc-card{margin-top:14px;background:#fff;padding:12px 16px}
.qc-card.qc-bad{background:var(--gold-soft)}
.qc-card .qc-line{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;font-size:var(--fs-s)}
.qc-card .qc-line b{font-size:calc(16px*var(--fscale));color:var(--green);flex:none}
.qc-card.qc-bad .qc-line b{color:#B45309}
.qc-card .qc-line span{color:var(--ink2);flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qc-card .qc-line button{
  margin-left:auto;height:calc(40px*var(--fscale));padding:0 14px;
  font-size:calc(13.5px*var(--fscale));background:#fff;color:var(--ink2);
  border:1px solid var(--line);box-shadow:none;font-weight:600;flex:none;
}

/* ---- 质检明细：手机上竖排，不再横向滚动（原来 b 固定 150px 把详情挤出去） ---- */
@media(max-width:640px){
  .qc-row{display:block;padding:10px 2px}
  .qc-row>span{margin-right:6px}
  .qc-row b{display:inline;width:auto;font-size:var(--fs-s)}
  .qc-row .d{display:block;margin-top:3px;white-space:normal;word-break:break-word}
}

/* ---- 底部两件事：手机上竖排全宽 ---- */
@media(max-width:560px){
  .q-nav{flex-direction:column;align-items:stretch}
  .q-nav button{width:100%}
}

/* ---- 顶栏在手机上压扁：品牌+指南一行，孩子条+账号+退出一行 ---- */
@media(max-width:560px){
  header{padding:12px 14px 10px;gap:8px;align-items:center}
  .brand{font-size:calc(19px*var(--fscale))}
  .brand-sub{display:none}
  .hdr-tools{width:auto;flex:0 0 auto;justify-content:flex-end}
  #profile-bar{flex:1 1 100%;margin-left:0;order:3;gap:6px;flex-wrap:nowrap;align-items:center}
  .cb-kid{flex:1 1 auto;min-width:0;padding:5px 10px 5px 6px;gap:8px}
  .cb-kid .cb-av{flex:none}
  .cb-kid .cb-txt{min-width:0;flex:1 1 auto;overflow:hidden}
  .cb-kid .cb-txt b,.cb-kid .cb-txt em{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cb-kid .cb-cv{flex:none}
  .cb-user{display:none}
  #profile-bar>button{padding:6px 10px;font-size:calc(13px*var(--fscale));flex:none}
}

/* ---- 五步条：手机上改成一行放得下的小点 ---- */
@media(max-width:560px){
  #steps{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding:8px 22px 4px 12px;gap:0;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),rgba(0,0,0,.25));
            mask-image:linear-gradient(90deg,#000 calc(100% - 16px),rgba(0,0,0,.25));
  }
  .step-dot{min-width:0;flex:0 0 auto;padding:0 2px}
  .step-dot .dot{width:11px;height:11px;border-width:2px}
  .step-dot label{font-size:11px;margin-top:4px}
  #steps .line{width:8px;height:2px;margin-bottom:15px}
}

/* 工作台上的「学习素材」一行入口 */
.wb-mat{
  display:block; margin:2px 0 12px; padding:12px 16px; border-radius:12px;
  background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.22);
  color:var(--acc); font-size:calc(15px*var(--fscale)); font-weight:600;
  text-align:center; text-decoration:none; min-height:calc(48px*var(--fscale));
  display:flex; align-items:center; justify-content:center;
}
.wb-mat:active{background:rgba(37,99,235,.12)}

/* 浮层永远在最上面 */
.overlay{z-index:50}
.sheet{position:relative;z-index:51}