:root{
  --blue:#4285F4; --red:#EA4335; --yellow:#FBBC05; --green:#34A853;
  --ink:#233043; --muted:#7a8699; --bg:#f4f8ff; --card:#fff; --radius:18px; --fs:1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; overflow-x:hidden; font-size:calc(16px * var(--fs));
}
/* Google-palette wordmark: letters colored in the Google sequence */
.g-b{color:var(--blue)} .g-r{color:var(--red)} .g-y{color:var(--yellow)} .g-g{color:var(--green)}
.wm{font-weight:800; letter-spacing:.2px; white-space:nowrap}
.foot-wm{font-size:19px; margin:0 0 4px}
header#hdr{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:2px solid #e6eefc;
  display:flex; align-items:center; gap:10px; padding:8px 14px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-weight:800; font-size:19px}
.brand img{width:38px; height:38px; border-radius:10px}
header nav{display:flex; gap:2px; flex-wrap:wrap}
header nav a{color:var(--ink); text-decoration:none; padding:6px 9px; border-radius:10px; font-size:15px; min-height:44px; display:inline-flex; align-items:center}
header nav a:hover{background:#eef4ff}
.hdr-r{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.who{font-size:13px; color:var(--muted); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
main{max-width:960px; margin:0 auto; padding:16px 12px 40px}
footer{text-align:center; color:var(--muted); padding:24px 12px 40px; font-size:14px}
.foot-links{margin:0 0 10px}
.foot-links a{color:var(--blue); text-decoration:none; padding:6px 4px; display:inline-block}
.about{font-size:12.5px; color:var(--muted); line-height:1.7}
.about h2{font-size:15px}
.about h3{font-size:13.5px}
.about ul{margin:6px 0 10px; padding-left:20px}
.about li{margin:3px 0}
.card{
  background:var(--card); border-radius:var(--radius); padding:18px; margin-bottom:16px;
  box-shadow:0 2px 10px rgba(66,133,244,.08); border:1px solid #e6eefc;
}
.card.narrow{max-width:560px; margin-left:auto; margin-right:auto}
.card.inner{box-shadow:none; background:#f8fbff}
h1{font-size:calc(30px * var(--fs)); margin:4px 0}
h2{font-size:calc(21px * var(--fs)); margin:6px 0 12px}
h3{font-size:calc(17px * var(--fs)); margin:16px 0 8px}
.muted{color:var(--muted); font-size:calc(14px * var(--fs))}
.good{color:var(--green); font-weight:600}
.bad{color:var(--red)}
button{font-family:inherit; cursor:pointer; min-height:44px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--blue); background:#fff; color:var(--blue);
  border-radius:999px; padding:8px 18px; font-size:15px; font-weight:600; margin:4px 4px 4px 0; min-height:44px;
}
.btn.primary{background:var(--blue); color:#fff}
.btn.ghost{border-color:#cfddf5; color:var(--ink)}
.btn.sm{padding:4px 12px; font-size:13px}
.btn.big{display:flex; width:100%; text-align:center; padding:12px; margin-top:10px}
.btn.bad-btn{border-color:var(--red); color:var(--red)}
input,select{
  font-family:inherit; font-size:16px; padding:9px 12px; border:2px solid #cfddf5;
  border-radius:12px; margin:4px 4px 4px 0; max-width:100%; background:#fff; min-height:44px;
}
label{display:block; margin:10px 0; font-weight:600; font-size:14px}
label input,label select{display:block; width:100%; margin-top:5px; font-weight:400}
.opt{font-weight:400}
.row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0}
.row.wrap{flex-wrap:wrap}
.hero{display:flex; gap:16px; align-items:center; background:#fff; border-radius:var(--radius); padding:20px 18px; margin-bottom:16px; border:1px solid #e6eefc; box-shadow:0 2px 10px rgba(66,133,244,.08); flex-wrap:wrap}
.hero-logo{width:84px; height:84px; border-radius:20px; background:#fff}
.hero-main{flex:1; min-width:200px}
.hero-main h1{margin:0 0 2px}
.hero-sub{font-size:calc(16px * var(--fs)); margin:2px 0 10px}
.checkin{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:calc(15px * var(--fs)); padding-top:12px; padding-bottom:12px}
.streak{margin-top:8px; font-size:calc(15px * var(--fs))}
.week{display:inline-flex; gap:4px; vertical-align:middle; margin-left:6px}
.wday{display:flex; flex-direction:column; align-items:center; background:#fff; border:1.5px solid #e0e9f8; border-radius:9px; padding:2px 6px; font-size:11px; color:var(--muted)}
.wday.on{border-color:var(--yellow); background:#fffbe8; color:var(--ink)}
.grades{display:flex; gap:8px; flex-wrap:wrap}
.grade{
  border:2.5px solid #cfddf5; background:#fff; border-radius:14px; padding:12px 18px;
  font-size:17px; font-weight:700; min-height:48px;
}
.grade.sel{border-color:var(--blue); background:#eaf2ff; color:var(--blue)}
.subjects{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px}
.subj{
  border:2.5px solid var(--c); border-radius:16px; background:#fff; padding:16px 10px;
  display:flex; flex-direction:column; align-items:center; gap:3px; font-size:17px;
}
.subj small{color:var(--muted); font-weight:400; font-size:12.5px}
.subj-icon{font-size:30px}
.zones{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.zone{border-radius:16px; padding:16px; text-align:left; font-size:17px; border:2.5px solid}
.zone small{display:block; color:var(--muted); font-weight:400; font-size:13px; margin-top:4px}
.zone.es{border-color:var(--red); background:#fff5f4}
.zone.en{border-color:var(--green); background:#f2fbf4}
.sem-tabs{display:flex; gap:8px; margin:10px 0}
.tab{border:2px solid #cfddf5; background:#fff; border-radius:999px; padding:6px 18px; font-weight:700; min-height:44px}
.tab.sel{border-color:var(--blue); background:var(--blue); color:#fff}
.chapters{display:flex; flex-direction:column; gap:8px}
.chapter{
  display:flex; align-items:center; gap:12px; text-align:left; background:#fff;
  border:2px solid #e0e9f8; border-radius:14px; padding:11px 14px; font-size:calc(16px * var(--fs)); width:100%; min-height:52px;
}
.chapter:hover{border-color:var(--blue)}
.ch-n{background:var(--blue); color:#fff; border-radius:50%; width:30px; height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:center; font-weight:800}
.ch-t{flex:1; display:flex; flex-direction:column}
.ch-t small{color:var(--muted); font-size:12.5px}
.ch-star{color:#e6a700; font-size:13.5px; font-weight:700; white-space:nowrap}
.unit-t{color:var(--blue)}
.steps{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0}
.steps span{border-radius:999px; background:#eef2f9; color:var(--muted); padding:4px 12px; font-size:13.5px; font-weight:600}
.steps span.on{background:var(--blue); color:#fff}
.steps span.done{background:#e6f4ea; color:var(--green)}
.explain{background:#f8fbff; border:1.5px dashed #bcd2f7; border-radius:14px; padding:14px; font-size:calc(16px * var(--fs))}
.ex-h{font-weight:700; margin:12px 0 4px}
.explain .ex-h:first-child{margin-top:0}
.ex-problem{font-size:calc(17px * var(--fs)); font-weight:600}
.ex-answer{font-weight:700; color:var(--green); margin-top:10px}
.modes{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.mode{border:2px solid #cfddf5; background:#fff; border-radius:999px; padding:6px 14px; font-weight:600; font-size:14px; min-height:44px}
.mode.sel{border-color:var(--yellow); background:#fff8e1}
.flash{
  background:linear-gradient(135deg,#fff,#f2f7ff); border:2.5px solid #cfddf5; border-radius:18px;
  padding:26px 16px; text-align:center; margin:10px 0; cursor:pointer;
}
.flash-w{font-size:calc(34px * var(--fs)); font-weight:800; color:var(--blue)}
.flash-w.small{font-size:calc(20px * var(--fs))}
.flash-w.big-char{font-size:calc(64px * var(--fs))}
.flash-z{font-size:calc(19px * var(--fs)); margin-top:6px}
.q-text{white-space:pre-line; font-size:calc(18px * var(--fs))}
.opts{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.opt{
  text-align:left; border:2px solid #cfddf5; background:#fff; border-radius:12px;
  padding:11px 14px; font-size:calc(16px * var(--fs)); min-height:48px;
}
.opt:hover{border-color:var(--blue)}
.opt.right{border-color:var(--green); background:#e6f4ea}
.opt.wrong{border-color:var(--red); background:#fdecea}
.opt.sm{display:inline-block; width:auto; margin:2px}
.prog{background:#e8eef8; border-radius:99px; height:10px; overflow:hidden; margin:8px 0}
.prog>div{background:var(--green); height:100%; border-radius:99px; transition:width .3s}
.summary{text-align:center; padding:10px 0}
.big-emoji{font-size:54px}
.stars{font-size:24px; color:#e6a700; letter-spacing:4px}
.read-line{
  display:block; width:100%; text-align:left; border:2px solid #e0e9f8; background:#fff;
  border-radius:12px; padding:10px 14px; margin:6px 0; font-size:calc(16px * var(--fs)); min-height:48px;
}
.read-line:hover{border-color:var(--green)}
.passage{background:#fffbe8; border-radius:12px; padding:12px; font-size:calc(16.5px * var(--fs)); margin-bottom:10px}
.step-line{background:#f2fbf4; border-radius:10px; padding:9px 12px}
.sprint-q{font-size:calc(22px * var(--fs)); font-weight:800}
.chatlog{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.bubble{max-width:88%; border-radius:16px; padding:10px 14px; font-size:calc(15.5px * var(--fs))}
.bubble small{display:block; color:var(--muted); margin-top:2px}
.bubble.left{background:#eef4ff; align-self:flex-start}
.bubble.right{background:#e6f4ea; align-self:flex-end}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px; margin:10px 0}
.stat{background:#f8fbff; border:1.5px solid #e0e9f8; border-radius:14px; padding:12px 6px; text-align:center}
.stat b{display:block; font-size:23px; color:var(--blue)}
.stat span{font-size:12.5px; color:var(--muted)}
.bar-row{display:flex; align-items:center; gap:10px; margin:7px 0}
.bar-row>span{width:44px; font-weight:700}
.bar{flex:1; background:#e8eef8; border-radius:99px; height:14px; overflow:hidden}
.bar>div{background:var(--blue); height:100%}
.rank-box{background:#fffbe8; border:1.5px solid var(--yellow); border-radius:14px; padding:12px; margin-top:12px}
.rank-row,.recent-row,.kid-row{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 2px; border-bottom:1px solid #eef2f9; flex-wrap:wrap}
.acct-row{display:flex; justify-content:space-between; gap:8px; width:100%; text-align:left; background:#fff; border:2px solid #e0e9f8; border-radius:12px; padding:10px 14px; margin:5px 0; flex-wrap:wrap; min-height:48px; align-items:center}
.acct-row small{display:block; color:var(--muted)}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{width:86px; text-align:center; border:2px solid #e0e9f8; border-radius:14px; padding:10px 4px; opacity:.45; filter:grayscale(1)}
.badge span{font-size:26px; display:block}
.badge small{font-size:12px}
.badge.on{opacity:1; filter:none; border-color:var(--yellow); background:#fffbe8}
.wq{border:2px solid #e0e9f8; border-radius:14px; padding:12px; margin:8px 0}
.wq.done{opacity:.65}
.wq-tag{background:#fdecea; color:var(--red); border-radius:99px; padding:2px 10px; font-size:12.5px; font-weight:700}
.wq.done .wq-tag{background:#e6f4ea; color:var(--green)}
.report{
  white-space:pre-wrap; background:#f8fbff; border:1.5px solid #e0e9f8; border-radius:14px;
  padding:14px; font-family:inherit; font-size:15px;
}
.switch{font-weight:400; display:inline-flex; align-items:center; gap:6px}
.modal-bg{position:fixed; inset:0; background:rgba(20,30,50,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px}
.modal{background:#fff; border-radius:20px; padding:22px; max-width:340px; width:100%; text-align:center; position:relative}
.modal-x{position:absolute; top:8px; right:12px; border:none; background:none; font-size:26px; color:var(--muted)}
.modal .qr{width:230px; max-width:80vw; border-radius:12px}
.modal .recruit{margin-top:14px; padding-top:12px; border-top:1px solid #eef1f5; text-align:left}
.modal .recruit h4{margin:0 0 6px; font-size:15px; text-align:center}
.modal .recruit-item{margin:8px 0}
.modal .recruit-item b{font-size:14px}
.modal .recruit-item p{margin:3px 0 0; font-size:13px; line-height:1.55; color:var(--muted)}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:99px; font-size:15px;
  opacity:0; transition:all .25s; z-index:200; max-width:92vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--red)}
hr{border:none; border-top:1.5px solid #e0e9f8; margin:18px 0}
@media (max-width:640px){
  main{padding:12px 10px 32px}
  .card{padding:14px}
  h1{font-size:24px}
  h2{font-size:19px}
  .brand{font-size:17px}
  .brand img{width:32px; height:32px; border-radius:8px}
  header#hdr{padding:6px 10px; gap:6px}
  header nav a{padding:6px 7px; font-size:14px}
  .who{display:none}
  .hero{padding:14px; gap:12px}
  .hero-logo{width:60px; height:60px; border-radius:14px}
  .hero-sub{font-size:14.5px}
  .hero-main{min-width:0; flex:1 1 180px}
  .subjects{grid-template-columns:1fr}
  .zones{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .stat{padding:9px 3px}
  .stat b{font-size:19px}
  .grades{gap:6px}
  .grade{padding:10px 8px; font-size:16px; flex:1 1 28%}
  .flash-w{font-size:26px}
  .flash-w.big-char{font-size:48px}
  .flash{padding:20px 10px}
  .bar-row>span{width:38px}
  .bar-row b{font-size:14px}
  .bubble{max-width:94%}
  .badge{width:76px}
  .q-text{font-size:17px}
  .sprint-q{font-size:20px}
  .sem-tabs{flex-wrap:wrap}
  .modal{padding:18px 14px}
  .wday{padding:2px 4px}
}

/* ---- AI 学习区 / 通用新增组件 ---- */
.zone.b1{border-color:var(--blue); background:#f4f8ff}
.zone.b2{border-color:var(--red); background:#fff5f4}
.zone.b3{border-color:var(--yellow); background:#fffdf2}
.zone.b4{border-color:var(--green); background:#f2fbf4}
.zone.ai{border-color:var(--blue); background:#f4f8ff}
.zone.soon{border-style:dashed; border-color:#c9d4e6; background:#fbfcfe; cursor:default}
.soon-tag{display:inline-block; background:var(--yellow); color:#5b4a00; border-radius:8px; padding:1px 8px; font-size:12px; font-weight:700; vertical-align:2px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{border:1.5px solid #dbe6f8; background:#fff; border-radius:999px; padding:7px 12px; font-size:13.5px; cursor:pointer; min-height:38px}
.chip:hover{border-color:var(--blue)}
.concept{font-size:calc(17px * var(--fs)); line-height:1.7}
.case-box{background:#fffdf2; border:1.5px solid var(--yellow); border-radius:14px; padding:14px 16px; font-size:calc(15.5px * var(--fs)); line-height:1.7}
.explain-line{color:#5b6880; font-size:calc(14.5px * var(--fs)); background:#f4f8ff; border-radius:10px; padding:8px 12px}
.flash-p{font-size:calc(17px * var(--fs)); color:var(--muted); margin-top:2px}
.speak-btn{border:1.5px solid var(--blue); color:var(--blue); background:#fff; border-radius:10px; padding:7px 12px; font-size:14px; cursor:pointer; min-height:40px}
.speak-btn:hover{background:#eef4ff}
.fb-btn{border:none; background:none; color:var(--muted); font-size:13px; cursor:pointer; text-decoration:underline; padding:8px 4px; min-height:40px}
.note-banner{background:#eef4ff; border:1.5px solid #c9dcfb; border-radius:12px; padding:10px 14px; font-size:calc(14.5px * var(--fs))}
.compliance{max-width:820px; margin:10px auto 0; color:var(--muted); font-size:12.5px; line-height:1.7}
.level-t{margin:22px 0 6px; font-size:17px; color:var(--blue)}
.orig{margin:10px 0}
.orig summary{cursor:pointer; color:var(--muted); font-size:calc(14px * var(--fs))}
/* 成人知识型课：词汇网格 / 知识讲解块 / 自查问答 / 要点清单 */
.words-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:10px 0}
.word-cell{background:#f6f9ff; border:1.5px solid #dbe7ff; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px}
.word-cell b{font-size:calc(17px * var(--fs)); color:var(--blue)}
.word-ph{color:var(--muted); font-size:13px}
.word-m{font-size:calc(14px * var(--fs))}
.word-cell .speak-btn{align-self:flex-start; margin-top:4px}
.know{background:#fbfbf7; border:1.5px solid #eee6c8; border-radius:12px; padding:10px 14px; margin:8px 0}
.know h4{margin:2px 0 4px; font-size:calc(16px * var(--fs))}
.know p{margin:2px 0; line-height:1.7}
.pat-line{font-size:calc(16.5px * var(--fs))}
.qa{margin:10px 0}
.qa summary{cursor:pointer; color:var(--blue); font-size:calc(15px * var(--fs))}
.qa p{color:var(--muted); margin:6px 0 0}
.checklist{margin:6px 0 14px; padding-left:22px; line-height:1.9}
.obq{margin:14px 0; padding:10px 12px; background:#fbfbf7; border:1.5px solid #eee6c8; border-radius:12px}
label textarea{display:block; width:100%; margin-top:6px; border:1.5px solid #dbe6f8; border-radius:10px; padding:10px; font:inherit}
.modal textarea{resize:vertical}
/* ---- 平板横屏双栏：左目录右学习区 ---- */
.with-rail{display:block}
.rail .rail-t{margin:8px 0 6px; font-size:15px}
.rail .rail-lv{margin:12px 0 4px; color:var(--muted); font-size:13px; font-weight:700}
.rail-link{display:block; width:100%; text-align:left; border:none; background:none; padding:10px 10px; border-radius:10px; font-size:15px; cursor:pointer; min-height:44px; color:var(--ink)}
.rail-link:hover{background:#eef4ff}
.rail-link.sel{background:#e3eeff; font-weight:700; color:var(--blue)}
.rail-srs{margin-top:12px; width:100%}
@media (min-width:1024px) and (orientation:landscape){
  body.rail-page main{max-width:1180px}
  .with-rail{display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; align-items:start}
  .rail{position:sticky; top:76px; max-height:calc(100vh - 100px); overflow:auto}
}
/* ---- 打印（错题清单另存 PDF） ---- */
.print-table{width:100%; border-collapse:collapse; font-size:14px}
.print-table th,.print-table td{border:1px solid #ccd6e4; padding:8px; text-align:left; vertical-align:top}
.print-table th{background:#eef4ff}
@media print{
  header#hdr, footer, .no-print{display:none !important}
  body{background:#fff}
  main{max-width:none; padding:0}
  .card{box-shadow:none; border:none; padding:0}
  .print-table th{background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}
/* ---- 显示设置：字号档位（--fs 缩放正文与题目文字） ---- */
html.fs-big{--fs:1.18}
html.fs-xl{--fs:1.36}
/* ---- 显示设置：护眼模式（暖色纸面，根 class 切变量） ---- */
html.eye{--bg:#f2ecd9; --card:#fdf9ec; --ink:#423b29; --muted:#8a8069}
html.eye header#hdr{background:#fdf9ec; border-bottom-color:#e4dab9}
html.eye header nav a:hover{background:#f3edcf}
html.eye .card{border-color:#e4dab9; box-shadow:0 2px 10px rgba(133,110,44,.10)}
html.eye .card.inner{background:#f7f1dc}
html.eye .btn{background:#fdf9ec}
html.eye .btn.ghost{border-color:#ddd2ab}
html.eye .btn.primary{background:var(--blue); color:#fff}
html.eye input, html.eye select, html.eye textarea{background:#fffdf2; border-color:#ddd2ab}
html.eye .modal{background:#fdf9ec}
html.eye .explain{background:#f8f2dc; border-color:#ddd2ab}
html.eye .step-line{background:#eff0d8}
html.eye .explain-line{background:#f8f2dc; color:#6d6449}
html.eye .note-banner{background:#f8f2dc; border-color:#ddd2ab}
html.eye .chapter, html.eye .opt, html.eye .read-line, html.eye .mode, html.eye .speak-btn{background:#fdf9ec; border-color:#ddd2ab}
html.eye .mode.sel{background:#e9e2c4; border-color:#cbbd83}
html.eye .steps span{background:#efe8cf}
html.eye .steps span.on{background:var(--blue); color:#fff}
html.eye .flash{background:linear-gradient(135deg,#fdf9ec,#f7f1dc); border-color:#ddd2ab}
html.eye .passage{background:#fdf6d8}
html.eye .obq{background:#fbf8ec}
html.eye .rail-link:hover{background:#f3edcf}
html.eye .rail-link.sel{background:#eae1ba}
html.eye .wday{background:#fdf9ec; border-color:#ddd2ab}
html.eye .prog{background:#e7dfc2}
/* ---- 显示设置面板 ---- */
.disp-rows{display:flex; flex-direction:column; gap:12px; text-align:left; margin:10px 0}
.disp-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:15px}
.disp-seg{display:inline-flex; gap:4px; flex-wrap:wrap}