:root{
  --bg:#f4f7fc; --card:#ffffff; --ink:#1f2733; --sub:#6b7789; --line:#e6ebf3;
  --brand:#4f7cff; --brand2:#6f9bff; --ok:#22b573; --warn:#f5a524; --bad:#ef5b5b;
  --purple:#8b5cf6; --cyan:#22b8cf; --radius:16px; --shadow:0 6px 24px rgba(31,45,80,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.7;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- 导航 ---------- */
.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav-in{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:8px;height:60px}
.logo{font-weight:800;font-size:19px;color:var(--brand);display:flex;align-items:center;gap:8px}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(79,124,255,.18)}
.nav a.navlink{padding:8px 14px;border-radius:10px;color:var(--sub);font-weight:600;font-size:15px}
.nav a.navlink:hover{background:#f0f4ff;color:var(--brand)}
.nav a.navlink.on{background:rgba(79,124,255,.12);color:var(--brand)}
.nav .spacer{flex:1}
.navlinks{display:flex;align-items:center;gap:8px;min-width:0}

/* ---------- 通用 ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}
.muted{color:var(--sub);font-size:14px}
.big{font-size:30px;font-weight:800;line-height:1.2}
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn{border:none;cursor:pointer;border-radius:12px;padding:11px 18px;font-size:15px;font-weight:700;
     background:var(--brand);color:#fff;transition:.15s;font-family:inherit}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.ghost{background:#eef2fb;color:var(--ink)}
.btn.line{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn.ok{background:var(--ok)} .btn.warn{background:var(--warn)} .btn.bad{background:var(--bad)}
.btn.lg{padding:16px 26px;font-size:17px;border-radius:14px}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}

/* ---------- 首次引导 ---------- */
.onboard{position:fixed;inset:0;z-index:9000;background:rgba(20,28,50,.72);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.onboard-box{background:#fff;border-radius:22px;padding:40px 36px;max-width:520px;width:100%;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:obIn .35s ease}
@keyframes obIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}
.onboard-box h2{margin:12px 0 8px;font-size:24px}
.onboard-box p{color:var(--sub);font-size:15px;line-height:1.8;margin:8px 0}
.ob-icon{font-size:52px}
.ob-flow{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0;flex-wrap:wrap}
.ob-f{background:#f4f7ff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;
  font-size:14px;min-width:110px}
.ob-f b{color:var(--brand);font-size:15px}
.ob-arrow{font-size:20px;color:var(--sub)}
.ob-dots{display:flex;gap:6px;justify-content:center;margin:18px 0 14px}
.ob-dots span{width:8px;height:8px;border-radius:50%;background:#dde3f0}
.ob-dots span.on{background:var(--brand);width:22px;border-radius:4px}

/* ---------- 首页 Hero（紧凑版） ---------- */
.hero{background:linear-gradient(135deg,#4f7cff,#7aa2ff 55%,#8b5cf6);color:#fff;border-radius:20px;
      padding:26px 26px;box-shadow:0 10px 30px rgba(79,124,255,.28)}
.hero h1{margin:0 0 6px;font-size:26px;font-weight:800}
.hero .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.chip{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);padding:6px 14px;
      border-radius:999px;font-size:14px;font-weight:600;backdrop-filter:blur(4px)}
.hero-compact{display:flex;align-items:center;justify-content:space-between;padding:22px 26px}
.hero-left h1{font-size:22px;margin:0 0 8px}
.hero-right{text-align:center}
.hero-right .ring{width:64px;height:64px}
.hero-right .ring>div{width:50px;height:50px;font-size:14px}
@media(max-width:640px){.hero-compact{flex-direction:column;gap:14px;text-align:center}
  .hero-left .chips{justify-content:center}}

/* ---------- 今日任务卡 ---------- */
.task-card{border:2px solid rgba(79,124,255,.15);position:relative;overflow:hidden}
.task-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--purple))}
.task-header{margin-bottom:16px}
.task-grid{display:grid;gap:14px}
.task-main{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:16px;
  background:linear-gradient(135deg,#4f7cff,#6f9bff);color:#fff;transition:.18s;
  box-shadow:0 6px 20px rgba(79,124,255,.3)}
.task-main:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(79,124,255,.4)}
.tm-icon{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:22px;flex-shrink:0}
.tm-body{flex:1}
.tm-title{font-size:19px;font-weight:800}
.tm-desc{font-size:14px;opacity:.9;margin-top:2px}
.tm-desc b{font-size:17px}
.tm-arrow{font-size:24px;opacity:.7}
.task-sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.task-sub-grid{grid-template-columns:1fr}}
.task-sub{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
  border:1.5px solid var(--line);background:#fbfcff;transition:.15s}
.task-sub:hover{border-color:var(--brand);background:#f4f7ff;transform:translateY(-1px)}
.ts-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.ts-dot.cn{background:#ef5b5b}
.ts-dot.en{background:#8b5cf6}
.ts-title{font-weight:700;font-size:15px}
.ts-num{font-size:13px;color:var(--sub)}
.task-progress{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tp-row{display:flex;justify-content:space-between;font-size:14px}

/* ---------- 推荐导背网格 ---------- */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
.rec-card{display:block;padding:16px 18px;border-radius:14px;border:1.5px solid var(--line);
  background:#fbfcff;transition:.15s;position:relative}
.rec-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 6px 18px rgba(79,124,255,.12)}
.rc-tag{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;padding:3px 9px;
  border-radius:99px}
.rc-tag.cn{background:rgba(239,91,91,.1);color:#ef5b5b}
.rc-tag.en{background:rgba(139,92,246,.1);color:var(--purple)}
.rc-title{font-weight:800;font-size:16px;margin-bottom:4px;padding-right:50px}
.rc-sub{font-size:13px;color:var(--sub);margin-bottom:10px}
.rc-action{font-size:13px;font-weight:700;color:var(--brand)}

/* ---------- 折叠统计 ---------- */
.stats-fold summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--sub);
  padding:4px 0;user-select:none}
.stats-fold summary:hover{color:var(--brand)}
.stats-fold[open] summary{margin-bottom:4px}

/* ---------- 科目选择卡（兼容旧） ---------- */
a.subj{display:block;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;
  transition:all .15s;color:var(--ink);text-decoration:none}
a.subj:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(79,124,255,.12);
  transform:translateY(-1px)}
a.subj .subj-t{font-size:20px;font-weight:800;display:flex;align-items:center;gap:8px}
a.subj .subj-d{margin:8px 0 12px;color:var(--sub);font-size:14px}
a.subj .subj-d b{color:var(--ink);font-size:16px;margin:0 2px}
a.subj .subj-a{color:var(--brand);font-weight:700;font-size:15px}

/* ---------- 学习页科目切换 ---------- */
.subjtab{display:inline-flex;background:#eef2fb;border-radius:12px;padding:4px;gap:2px}
.subjtab a{padding:6px 14px;border-radius:9px;font-weight:700;font-size:13px;color:var(--sub)}
.subjtab a.on{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.subjtab a:hover{color:var(--ink)}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;
     background:#eef2fb;color:var(--sub)}
.tag.b{background:rgba(79,124,255,.13);color:var(--brand)}
.tag.g{background:rgba(34,181,115,.14);color:var(--ok)}
.tag.o{background:rgba(245,165,36,.16);color:#b97300}
.tag.r{background:rgba(239,91,91,.13);color:var(--bad)}
.tag.p{background:rgba(139,92,246,.13);color:var(--purple)}

/* ---------- 分段选择（家长端日志筛选） ---------- */
.seg{display:inline-flex;background:#eef2fb;border-radius:11px;padding:3px;gap:2px}
.seg-b{border:none;background:transparent;cursor:pointer;font-family:inherit;
  padding:6px 12px;border-radius:8px;font-weight:700;font-size:13px;color:var(--sub);transition:.15s}
.seg-b:hover{color:var(--ink)}
.seg-b.on{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* ---------- 登录与操作日志 ---------- */
.au-row{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:11px;
  border:1px solid var(--line);background:#fbfcff;margin-bottom:6px}
.au-ico{width:28px;height:28px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  font-size:14px;background:#eef2fb;color:var(--sub);line-height:1}
.au-ico.au-login{background:rgba(79,124,255,.13);color:var(--brand)}
.au-ico.au-op{background:rgba(34,181,115,.14);color:#127a4c}
.au-ico.au-danger{background:rgba(239,91,91,.13);color:var(--bad)}
.au-main{flex:1;min-width:0}
.au-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.au-top b{font-size:14px}
.au-detail{color:var(--sub);font-size:13px;min-width:0;overflow-wrap:anywhere}
.au-sub{color:var(--sub);font-size:12px;font-variant-numeric:tabular-nums;margin-top:1px}

.bar{height:8px;border-radius:99px;background:#eef2fb;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:99px;
  transition:width .4s ease}
.bar.g>i{background:linear-gradient(90deg,#22b573,#4ad991)}

/* ---------- 首页旧版兼容 ---------- */
.statbox{background:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.statbox .k{font-size:13px;color:var(--sub);font-weight:600}
.statbox .v{font-size:26px;font-weight:800;margin-top:2px}
.ring{--p:0;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;position:relative;
      background:conic-gradient(var(--brand) calc(var(--p)*1%), #e9eefb 0);margin:0 auto}
.ring>div{width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center;
          font-weight:800;font-size:19px}
.recmd{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:#f8faff;
       border:1px solid var(--line);transition:.15s}
.recmd:hover{border-color:var(--brand);transform:translateY(-1px)}

/* ---------- 学习 ---------- */
.study{max-width:820px;margin:0 auto;padding:18px}
.qcard{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:26px;min-height:340px}
.qlabel{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
        background:rgba(79,124,255,.12);color:var(--brand)}
.qtitle{font-size:20px;font-weight:800;margin:14px 0 6px}
.poemtext{white-space:pre-wrap;font-size:20px;line-height:2.1;letter-spacing:.5px;
          font-family:"Songti SC","STSong","SimSun",serif;background:#fbfcff;border:1px dashed var(--line);
          border-radius:12px;padding:16px}
/* 英文背诵内容：更紧凑，整篇一屏可见 */
.poemtext.eng{font-size:16.5px;line-height:1.55;letter-spacing:0;
  font-family:"Segoe UI",Arial,"Helvetica Neue",sans-serif;padding:12px 14px}
.blank{display:inline-block;min-width:70px;border-bottom:2px solid var(--brand);color:transparent}
input.ans,textarea.ans{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
      font-size:17px;font-family:inherit;outline:none;transition:.15s;background:#fbfcff}
input.ans:focus,textarea.ans:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(79,124,255,.1)}
textarea.ans{min-height:130px;line-height:1.9;font-size:17px}
.opts{display:grid;gap:10px;margin-top:6px}
.opt{padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:#fff;
     font-size:16px;transition:.12s;text-align:left}
.opt:hover{border-color:var(--brand2);background:#f7faff}
.opt.sel{border-color:var(--brand);background:rgba(79,124,255,.08);font-weight:700}
.opt.right{border-color:var(--ok);background:rgba(34,181,115,.1)}
.opt.wrong{border-color:var(--bad);background:rgba(239,91,91,.08)}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;position:relative}
.gbtn{padding:14px 6px;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;
      font-weight:800;font-size:15px;transition:.12s}
.gbtn small{display:block;font-weight:600;font-size:11.5px;color:var(--sub);margin-top:2px}
.gbtn.g1{color:var(--bad)} .gbtn.g2{color:#b97300} .gbtn.g3{color:var(--ok)} .gbtn.g4{color:var(--brand)}
.gbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.gbtn.sug{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,124,255,.15)}
.auto-hint{grid-column:1/-1;text-align:center;font-size:13px;color:var(--sub);margin-top:6px;
  animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.fb{margin-top:14px;padding:14px;border-radius:12px;font-size:15px}
.fb.ok{background:rgba(34,181,115,.1);color:#127a4c}
.fb.no{background:rgba(239,91,91,.08);color:#b33737}
.diff{color:var(--bad);font-weight:800;text-decoration:underline wavy var(--bad)}

/* ---------- 学习页进度条 ---------- */
.session-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 16px;
  background:#fff;border-radius:14px;box-shadow:var(--shadow)}
.sb-progress{flex:1;height:6px;background:#eef2fb;border-radius:99px;overflow:hidden}
.sb-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--purple));
  border-radius:99px;transition:width .3s ease}
.sb-text{font-size:13px;font-weight:700;color:var(--sub);white-space:nowrap}

/* ---------- 会话总结 ---------- */
.session-done{text-align:center;padding:40px 20px}
.sd-icon{font-size:64px;margin-bottom:12px}
.sd-title{font-size:26px;font-weight:800;margin-bottom:6px}
.sd-sub{color:var(--sub);font-size:15px;margin-bottom:20px}
.sd-stats{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.sd-stat{text-align:center}
.sd-stat .v{font-size:28px;font-weight:800;color:var(--brand)}
.sd-stat .k{font-size:12px;color:var(--sub);margin-top:2px}
.sd-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- 导背 ---------- */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.steps-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.steps .st{padding:9px 14px;border-radius:11px;background:#eef2fb;color:var(--sub);font-weight:700;
           font-size:14px;cursor:pointer;border:none;font-family:inherit;transition:.15s}
.steps .st:hover{background:#dde5f8}
.steps .st.on{background:var(--brand);color:#fff;box-shadow:0 3px 10px rgba(79,124,255,.3)}
.steps .st.done{background:rgba(34,181,115,.16);color:#127a4c}
.steps .spacer{flex:1}
.vsel{padding:6px 10px;font-size:13px;border:1px solid #d8e0f0;border-radius:8px;background:#fff;color:#333;cursor:pointer;max-width:200px}
.layer{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;background:#fbfcff;
  transition:.15s}
.layer:hover{border-color:var(--brand2)}
.layer .lt{font-weight:800;color:var(--brand)}
.layer .ld{color:var(--sub);font-size:14.5px}
.layer .ls{margin-top:8px;font-family:"Songti SC","STSong",serif;font-size:18px;line-height:2}
.fadebox{font-family:"Songti SC","STSong",serif;font-size:21px;line-height:2.3;white-space:pre-wrap;
         background:#fbfcff;border:1px dashed var(--line);border-radius:12px;padding:18px;letter-spacing:1px}
.fadebox.eng{font-family:"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.6;
         padding:12px 14px;letter-spacing:0}
.mask{color:#c6cede}
.punct-line{font-family:"Songti SC","STSong",serif;font-size:19px;line-height:2.4}
.punct-line select{font-size:15px;padding:2px 6px;border-radius:8px;border:1.5px solid var(--line);
                   margin:0 2px;background:#fff}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px}
th{color:var(--sub);font-weight:700;font-size:13px}
tr:last-child td{border-bottom:none}
input.inp,select.inp,textarea.inp{padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;
      font-size:15px;font-family:inherit;outline:none;background:#fff}
input.inp:focus,textarea.inp:focus,select.inp:focus{border-color:var(--brand)}
label.fl{display:block;font-size:13.5px;font-weight:700;color:var(--sub);margin:0 0 5px}

/* ---------- 其它 ---------- */
.heat{display:grid;grid-template-columns:repeat(auto-fill,13px);gap:3px}
.heat i{width:13px;height:13px;border-radius:3px;background:#e9eefb;display:block}
.heat i.l1{background:#c7dbff}.heat i.l2{background:#7aa2ff}.heat i.l3{background:#4f7cff}
.heat i.l4{background:#2f57d6}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
       background:#1f2733;color:#fff;padding:12px 22px;border-radius:12px;font-size:15px;opacity:0;
       max-width:min(92vw,560px);text-align:center;line-height:1.5;
       transition:.25s;pointer-events:none;z-index:99}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.kbd{display:inline-block;padding:1px 7px;border-radius:6px;background:#eef2fb;border:1px solid var(--line);
     font-size:12px;color:var(--sub);font-family:inherit}
.modal{position:fixed;inset:0;background:rgba(20,28,45,.45);display:none;place-items:center;z-index:80;padding:20px}
.modal.on{display:grid}
.modal .box{background:#fff;border-radius:18px;padding:22px;width:100%;max-width:560px;max-height:86vh;overflow:auto}
.speak{cursor:pointer;user-select:none}

/* ---------- 内容库 ---------- */
.fbtn{padding:7px 16px;border-radius:99px;border:1.5px solid var(--line);background:#fff;
  font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;transition:.15s;font-family:inherit}
.fbtn:hover{border-color:var(--brand2);color:var(--brand)}
.fbtn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.deck-card{padding:0;overflow:hidden}
.deck-head{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;
  transition:.12s;user-select:none}
.deck-head:hover{background:#f8faff}
.deck-arrow{font-size:12px;color:var(--sub);transition:.2s;flex-shrink:0}
.deck-body{padding:0 20px 16px;border-top:1px solid var(--line)}
.lib-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);margin-top:10px;background:#fbfcff;flex-wrap:wrap;transition:.12s}
.lib-card:hover{border-color:var(--brand2);background:#f8faff}
.lc-main{flex:1;min-width:160px}
.lc-title{font-weight:700;font-size:15px}
.lc-sub{font-size:12.5px;margin-top:2px}
.lc-tags{display:flex;gap:5px;flex-wrap:wrap}
.lc-actions{display:flex;gap:6px;flex-wrap:wrap}
.lc-full{width:100%;margin-top:10px;padding:12px;background:#fff;border-radius:10px;
  border:1px dashed var(--line);font-size:14px;line-height:1.9;
  font-family:"Songti SC","STSong",serif}

/* ---------- 导背引导横幅 ---------- */
.guide-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-radius:16px;margin-bottom:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,#fff8e1,#fff3cd);border:2px solid #f5a524;
  box-shadow:0 4px 14px rgba(245,165,36,.15)}
.gb-left{display:flex;align-items:center;gap:12px;flex:1;min-width:200px}
.gb-icon{font-size:32px;flex-shrink:0}
.gb-left b{font-size:16px;color:#92400e}
.guide-banner .btn{background:#f59e0b;color:#fff;white-space:nowrap}
.guide-banner .btn:hover{background:#d97706}

/* ---------- 语音录入按钮 ---------- */
.btn.mic{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.mic:hover{background:#f7faff;border-color:var(--brand2)}
.btn.mic.rec{background:var(--bad);color:#fff;border-color:var(--bad);animation:rec 1.2s infinite}
@keyframes rec{0%,100%{box-shadow:0 0 0 0 rgba(239,91,91,.6)}50%{box-shadow:0 0 0 10px rgba(239,91,91,0)}}

/* ---------- 填空行（每空带 mic） ---------- */
.fill-row{margin-bottom:6px}
.fill-line{display:flex;align-items:center;gap:8px}
.fill-line .ans{flex:1;min-width:0}
.fill-mic{width:42px;height:42px;padding:0;flex-shrink:0;font-size:18px;display:grid;place-items:center}
.fill-mic.rec{width:42px;height:42px;font-size:14px}

/* ---------- 登录页 ---------- */
.login-body{background:linear-gradient(135deg,#4f7cff 0%,#8b5cf6 60%,#22b8cf 100%);min-height:100vh;
  color:#fff;display:flex;align-items:center;justify-content:center;padding:20px}
.login-wrap{max-width:640px;width:100%}
.login-hero{text-align:center;margin-bottom:24px}
.login-hero .logo.lg{font-size:26px;color:#fff;justify-content:center}
.login-hero .logo .dot{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.28)}
.login-sub{opacity:.9;margin-top:8px;font-size:14px}
.login-card{background:#fff;color:var(--ink);border-radius:22px;padding:26px 26px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.22)}
.login-card h2{margin:0 0 4px;font-size:22px}
.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin-top:16px}
.user-pick{position:relative;display:flex;flex-direction:column;align-items:center;padding:16px 12px;
  border-radius:16px;border:2px solid var(--line);background:#fbfcff;cursor:pointer;transition:.15s;
  min-height:130px}
.user-pick:hover{border-color:var(--uc,var(--brand));transform:translateY(-3px);box-shadow:0 8px 20px rgba(79,124,255,.15)}
.u-av{width:64px;height:64px;border-radius:50%;background:var(--uc,var(--brand));color:#fff;
  display:grid;place-items:center;font-size:32px;margin-bottom:8px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.u-nm{font-weight:700;font-size:15px;color:var(--ink)}
.u-role{font-size:11px;color:var(--sub);margin-top:2px}
.u-lock{position:absolute;top:8px;right:8px;font-size:14px;opacity:.6}

/* PIN 键盘 */
.pin-box{margin-top:18px;text-align:center}
.pin-title{font-size:14px;color:var(--sub);margin-bottom:12px;font-weight:600}
.pin-dots{display:inline-flex;gap:14px;padding:14px 22px;background:#f4f7fc;border-radius:14px;
  border:2px solid var(--line)}
.pin-dots span{width:14px;height:14px;border-radius:50%;background:#dde3f0;transition:.15s}
.pin-dots span.on{background:var(--brand);transform:scale(1.15)}
.pin-pad{display:grid;grid-template-columns:repeat(3,72px);gap:10px;justify-content:center;margin-top:16px}
.pk{height:60px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:22px;
  font-weight:700;cursor:pointer;transition:.12s;font-family:inherit;color:var(--ink)}
.pk:hover{border-color:var(--brand);color:var(--brand)}
.pk:active{transform:scale(.96)}
.pk.alt{background:#f4f7fc;color:var(--sub);font-size:16px}
.pk[data-k="ok"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.pk[data-k="ok"]:hover{filter:brightness(1.1);color:#fff}
.login-foot{text-align:center;font-size:12px;opacity:.75;margin-top:14px}
.login-foot code{background:rgba(255,255,255,.18);padding:2px 6px;border-radius:6px}

/* ---------- 导航用户 chip ---------- */
.user-chip{position:relative;display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;
  border-radius:999px;background:#f0f4ff;cursor:pointer;transition:.15s;user-select:none}
.user-chip:hover{background:#e3ebff}
.uc-av{width:28px;height:28px;border-radius:50%;background:var(--uc,var(--brand));color:#fff;
  display:grid;place-items:center;font-size:15px;flex-shrink:0}
.uc-nm{font-size:13px;font-weight:700;color:var(--ink);max-width:80px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.uc-arrow{font-size:10px;color:var(--sub);margin-left:2px}
.user-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 12px 32px rgba(31,45,80,.18);padding:6px;min-width:220px;
  display:none;z-index:200}
.user-menu.on{display:block}
.um-hd{padding:8px 12px;font-size:11px;color:var(--sub);font-weight:700;letter-spacing:.5px}
.um-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;
  transition:.12s;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.um-item:hover{background:#f4f7ff}
.um-av{width:28px;height:28px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:15px}
.um-nm{flex:1}
.um-lock{font-size:12px;opacity:.6}
.um-plain{color:var(--sub);font-weight:600}
.um-sep{height:1px;background:var(--line);margin:4px 6px}

/* ---------- 卡拉OK朗读高亮 ---------- */
.k-tk{display:inline;transition:color .18s, background .18s;border-radius:3px}
.k-tk.k-done{color:#c9c9c9}
.k-tk.k-active{color:var(--brand);background:rgba(79,124,255,.14);
  box-shadow:0 0 0 2px rgba(79,124,255,.14);text-shadow:0 0 8px rgba(79,124,255,.25)}
.poemtext .k-tk.k-active{font-weight:700}
.k-tk.k-punct{color:inherit;background:none;box-shadow:none;text-shadow:none;transition:none}
.k-tk.k-punct.k-done,.k-tk.k-punct.k-active{color:inherit;background:none;box-shadow:none;
  text-shadow:none;font-weight:inherit}

/* ---------- 语音默写评分与 diff ---------- */
.score-row{display:flex;align-items:center;gap:14px;margin:4px 0 14px;flex-wrap:wrap}
.score-badge{display:inline-flex;align-items:baseline;gap:4px;padding:8px 18px;
  border:2.5px solid;border-radius:16px;font-weight:800;background:#fff}
.score-badge .sc-num{font-size:34px;line-height:1}
.score-badge .sc-unit{font-size:14px;opacity:.75}
.score-tags{display:flex;gap:6px;flex-wrap:wrap}
.diff-view{font-family:"Songti SC","STSong","SimSun",serif;font-size:20px;line-height:2.2;
  letter-spacing:1px;padding:16px 18px;background:#fbfcff;border:1px dashed var(--line);
  border-radius:12px;white-space:pre-wrap;word-break:break-word}
.d-eq{color:var(--ink)}
.d-del{display:inline-block;padding:0 5px;margin:0 1px;background:rgba(239,91,91,.16);
  color:var(--bad);border:1.5px dashed var(--bad);border-radius:5px;font-weight:700}
.d-ins{display:inline-block;padding:0 5px;margin:0 1px;color:#999;background:#f5f5f5;
  border-radius:5px;text-decoration:line-through}
.d-sub{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;
  margin:0 3px;line-height:1.15}
.d-sub-got{color:var(--bad);text-decoration:line-through;font-size:.75em;
  background:rgba(239,91,91,.08);padding:0 4px;border-radius:4px}
.d-sub-want{color:#127a4c;background:rgba(34,181,115,.14);padding:0 5px;border-radius:4px;
  font-weight:800;border-bottom:2px solid var(--ok)}
.d-legend{margin-top:6px;font-size:12px}
.d-legend .d-del,.d-legend .d-ins,.d-legend .d-sub{font-size:14px}

/* ---------- 英语跟读卡片与 5 星评分 ---------- */
.read-card{padding:6px 0}
.read-label{font-size:13px;color:var(--sub);font-weight:600;margin-bottom:8px}
.read-target{font-size:32px;font-weight:800;letter-spacing:.5px;line-height:1.4;
  color:var(--ink);padding:14px 18px;background:linear-gradient(135deg,#eef4ff,#f7f0ff);
  border-radius:14px;border:1.5px solid rgba(79,124,255,.2);font-family:"Segoe UI",Arial,sans-serif}
.read-sub{margin-top:8px;font-size:15px}
.read-example{margin-top:6px;font-size:14px;color:var(--sub);font-style:italic}
.read-ta{margin-top:12px}

/* ---------- 拼写卡片（spell mode） ---------- */
.spell-meaning{font-size:28px;font-weight:800;padding:14px 18px;background:#fff7ed;
  border:1.5px solid #fed7aa;border-radius:14px;color:#7c2d12;letter-spacing:1px}
.spell-hint{margin-top:8px;font-size:14px}
.spell-input{margin-top:10px;text-align:center;font-size:16px;letter-spacing:2px;
  font-family:"SF Mono",Consolas,"Courier New",monospace;text-transform:lowercase}
.spell-input::placeholder{text-transform:none}
.sp-boxes{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;justify-content:center}
.sp-box{width:36px;height:44px;border:2px solid #d5dced;border-bottom-width:4px;
  border-radius:8px;background:#fbfcff;display:grid;place-items:center;
  font-family:"SF Mono",Consolas,"Courier New",monospace;font-size:22px;font-weight:800;
  color:var(--brand);transition:.15s}
.sp-box.filled{border-color:var(--brand);background:#eef4ff}
.sp-box.ok{border-color:var(--ok);background:rgba(34,181,115,.1);color:#127a4c}
.sp-box.bad{border-color:var(--bad);background:rgba(239,91,91,.08);color:var(--bad)}
.sp-box.miss{border-style:dashed;border-color:#c9c9c9;color:#c9c9c9}
.sp-box.extra{border-color:#999;color:#999;text-decoration:line-through}

.stars{display:inline-flex;align-items:center;gap:2px;padding:6px 14px;background:#fff7e6;
  border:2px solid #f5a524;border-radius:14px}
.stars .st{font-size:26px;color:#e5e7eb;line-height:1;transition:color .2s}
.stars .st.on{color:#f5a524;text-shadow:0 1px 0 rgba(0,0,0,.05)}
.stars .st-num{margin-left:10px;font-size:14px;font-weight:800;color:#b97300}

.d-fair{display:inline-block;padding:0 6px;margin:0 2px;background:rgba(245,165,36,.16);
  color:#b97300;border-bottom:2.5px solid #f5a524;border-radius:4px;font-weight:700}

@media(max-width:640px){
  .read-target{font-size:24px;padding:12px 14px}
  .stars .st{font-size:22px}
  .stars{padding:4px 10px}
}
@media(max-width:640px){
  .diff-view{font-size:17px;padding:12px;line-height:2}
  .score-badge .sc-num{font-size:26px}
  .score-badge{padding:6px 12px}
}

/* ---------- 手机适配 ---------- */
@media(max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 12px}
  /* 品牌与用户卡片留在第一行，导航整体换到第二行、可横向滑动。
     原来是把 overflow-x 直接加在 .nav-in 上：logo 会被压到 34px 宽、
     文字折成竖排，用户卡片也会被挤出屏幕右侧（实测 390px 下 chip 右边界到 431）。 */
  .nav-in{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .logo{flex:0 0 auto;font-size:16px;white-space:nowrap}
  .user-chip{order:2;flex:0 0 auto;margin-left:auto}
  .uc-nm{max-width:64px}
  .nav .spacer,#navInfo{display:none}
  .navlinks{order:3;flex:1 0 100%;gap:2px;min-width:0;
            overflow-x:auto;-webkit-overflow-scrolling:touch;
            scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .nav a.navlink{flex:0 0 auto;padding:7px 10px;font-size:13px;white-space:nowrap}

  /* 导背 6 步：按钮单行横滑，比折成三行省一半高度；
     发音人下拉留在外面单独一行，不然手机上要滑到最右才看得到。 */
  .steps-row{flex:1 0 100%;flex-wrap:nowrap;
             overflow-x:auto;-webkit-overflow-scrolling:touch;
             padding-bottom:2px;scrollbar-width:none}
  .steps-row::-webkit-scrollbar{display:none}
  .steps .spacer{display:none}
  .steps .st{padding:8px 12px;font-size:13px;white-space:nowrap;flex:0 0 auto}

  .hero{padding:18px}
  .hero h1{font-size:20px}
  .hero .chips{gap:6px}
  .chip{padding:4px 10px;font-size:12px}
  .hero-compact{flex-direction:column;gap:14px;align-items:flex-start;padding:16px}
  .hero-right{align-self:center}

  .card{padding:14px;border-radius:14px}
  .big{font-size:22px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
  .grid{gap:12px}
  .statbox{padding:12px}
  .statbox .v{font-size:22px}
  .ring{width:80px;height:80px}
  .ring>div{width:64px;height:64px;font-size:16px}

  .task-header .big{font-size:18px}
  .task-main{padding:16px;gap:12px}
  .tm-icon{width:40px;height:40px;font-size:18px}
  .tm-title{font-size:16px}
  .tm-desc{font-size:13px}
  .tm-desc b{font-size:15px}
  .task-sub-grid{grid-template-columns:1fr}
  .rec-grid{grid-template-columns:1fr}

  .study{padding:12px}
  .qcard{padding:18px 16px;min-height:280px;border-radius:16px}
  .qtitle{font-size:18px}
  .poemtext{font-size:18px;line-height:1.9;padding:12px}
  input.ans,textarea.ans{font-size:16px;padding:12px}
  textarea.ans{min-height:120px}
  .opt{padding:14px;font-size:15px;min-height:44px}
  .gbtn{padding:14px 4px;font-size:14px;min-height:48px}
  .grades{grid-template-columns:repeat(2,1fr);gap:8px}
  .gbtn small{font-size:10.5px}
  .session-bar{padding:8px 12px;gap:8px}
  .sb-text{font-size:12px}
  .subjtab a{padding:5px 10px;font-size:12px}
  .btn{padding:10px 14px;font-size:14px}
  .btn.lg{padding:14px 18px;font-size:15px}
  .btn.sm{padding:6px 10px;font-size:12px}

  .steps{gap:4px}
  .steps .st{padding:7px 10px;font-size:12.5px}
  .fadebox{font-size:18px;line-height:2.1;padding:14px}
  .layer{padding:12px}
  .punct-line{font-size:17px;line-height:2.2}
  .punct-line select{font-size:14px;padding:4px 6px;min-height:32px}
  .guide-banner{padding:12px 14px;gap:10px}
  .guide-banner .btn{width:100%;justify-content:center}

  .deck-head{padding:14px 16px;gap:10px}
  .deck-head>div:nth-child(2){min-width:80px !important}
  .deck-head .bar{width:80px !important}
  .deck-body{padding:0 14px 12px}
  .lib-card{padding:10px 12px}
  .lc-title{font-size:14px}
  .lc-actions .btn{padding:6px 10px;font-size:12px}
  .fbtn{padding:6px 12px;font-size:12px}

  table{font-size:13px}
  th,td{padding:8px 6px}
  input.inp,select.inp{padding:8px 10px;font-size:14px}

  /* 日志列表：详情换行占满一行，别把时间戳挤没 */
  .seg-b{padding:5px 9px;font-size:12px}
  .au-row{padding:8px 10px;gap:8px}
  .au-top{font-size:13px}
  .au-detail{flex:1 0 100%;font-size:12.5px}
  /* 筛选段控占满一行，四个按钮等分：手机上比挤成两行好点，也好点 */
  .seg-fill{display:flex;flex:1 1 100%}
  .seg-fill .seg-b{flex:1 1 0;padding:7px 4px;text-align:center}

  .onboard-box{padding:28px 20px}
  .onboard-box h2{font-size:20px}
  .ob-flow{flex-direction:column;gap:6px}
  .ob-arrow{transform:rotate(90deg)}
  .ob-f{min-width:auto;width:100%}

  .toast{max-width:90vw;text-align:center;font-size:14px;padding:10px 18px;bottom:80px}
  #ttsBar{right:12px !important;bottom:12px !important;padding:6px 10px !important;font-size:12px !important}
}

.footer{color:var(--sub);font-size:13px;text-align:center;padding:28px 0}