/* LinguaWord 1.0 —— 外观与 /LinguaWrite/ 全站统一（同一套设计令牌、手机壳、卡片、按钮、底导航）

   ===================== 字号刻度表（手机壳 max-width:480px） =====================
   改样式前先看这张表，只允许用表里的档位，不许再冒出 13.5 / 15.5 / 17 / 10.5 这类中间档。

   11px  微标签：eyebrow / 角标 badge·tagb / 步骤条 / 统计键名 / 卡片脚注 / 底导航文字
   12px  辅助说明：chip 胶囊 / 记忆条 / 词卡中文 / 场景名 / 动作按钮 / 例句脚注
         （11 与 12 只差 1px，是刻意保留的两级：角标要更紧、说明要更松；正文从 14 起每档差 2px）
   14px  次级正文与列表行：sub / muted / 任务名 / 反馈条 fb / 气泡 / toast / 释义 / 配对卡片（窄列）
   16px  主要正文与可点控件：btn / opt 选项 / 词卡单词 / 输入框 / 卡片标题 .h2
   18px  强调数字与题面：统计数字 stats .v / 限时回忆题面 qbig（行内图标也在这一档）
   24px  页面主标题 .h1 / 你好行的称呼 / 登录页品牌名
   30px  单词详情主字 wd-word / 学习流大字 bigword

   行高：全站基准 1.5（写在 body 上）；标题 1.25–1.35；长段落（例句/讲解/气泡/提示条）1.6。

   ---- 以下是不参与收敛的「独立角色」，别顺手统一掉 ----
   18px  .task .ico / .spk / .actbtn b / .topbar .acts —— 行内功能图标
   21px  .bottomnav .nav .ic —— 底导航图标
   26px  .scn .e —— 场景 emoji
   44px  .bigic —— 听音题的大喇叭
   54px  .auth-logo / 64px .bigemoji —— 欢迎页 / 学习流装饰 emoji
   ========================================================================== */
:root{
  --bg:#F4F5F8;
  --card:#FFFFFF;
  --ink:#1E2230;
  --ink-2:#5B6273;
  --ink-3:#9AA1B1;
  --line:#ECEEF3;
  --pri:#5B5BD6;
  --pri-soft:#EEEDFD;
  --pri-ink:#4A4AC4;
  --grn:#16A34A;
  --grn-soft:#E7F6EC;
  --amb:#F59E0B;
  --amb-soft:#FEF3E2;
  --red:#E5484D;
  --red-soft:#FDECEC;
  --shadow:0 6px 24px rgba(30,34,48,.06);
  --r:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:#EEF0F4;font-family:"Segoe UI",system-ui,-apple-system,"PingFang SC","HarmonyOS Sans SC","MiSans","Source Han Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
body{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:24px 12px;overflow-x:clip;line-height:1.5;}
@media (max-width:520px){ body{padding:0;} }
/* Chrome 的 UA 样式用 font 简写给 button/input/textarea 设了 line-height:normal，
   会把 body 上的 1.5 挡掉，导致按钮和正文行高不一样。这里显式补回来。 */
button,input,textarea,select{line-height:1.5;}

/* ===== app shell：手机满屏原生；桌面居中卡片（无假机身/假状态栏） ===== */
.phone{width:100%;max-width:480px;height:min(844px,calc(100vh - 48px));background:var(--bg);border-radius:22px;box-shadow:0 18px 50px rgba(30,34,48,.14);position:relative;overflow:hidden;display:flex;flex-direction:column;}
@media (max-width:520px){ .phone{max-width:100%;height:100vh;border-radius:0;box-shadow:none;} }
/* 滚动区底部留白要 ≥ 底导航高度再多留余量：微信 WebView 底栏会盖掉一部分视口。
   底导航实际高 ~48px（40px + padding，border-box）。普通页 60px 足够（老杨 2026-09-30：
   红框区域白留太多）；学习流（learn/talk/game/scene/word）末尾贴着黄条提示，保留 96px 防切行 */
.screen{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:calc(10px + env(safe-area-inset-top)) 18px calc(60px + env(safe-area-inset-bottom));scrollbar-width:none;}
.screen-tail{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
.screen::-webkit-scrollbar{display:none;}

/* ===== 通用排版 ===== */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.4px;color:var(--pri);text-transform:uppercase;}
.h1{font-size:24px;font-weight:700;letter-spacing:.3px;line-height:1.25;}
.h2{font-size:16px;font-weight:700;letter-spacing:.3px;line-height:1.35;}
/* 卡片标题跟 .h2 走。18px 粗体上过线一版，老杨反馈「一屏全是黑压压的大字」，回撤到 16 */
.sub{color:var(--ink-2);font-size:14px;}
.cn{color:var(--ink-3);font-size:11px;margin-top:3px;}
.muted{color:var(--ink-2);font-size:14px;}
.tiny{font-size:12px;color:var(--ink-3);}
.center{text-align:center;}
.row{display:flex;align-items:center;gap:10px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.grow{flex:1;min-width:0;}
.wrap{display:flex;flex-wrap:wrap;gap:8px;}
.hide{display:none !important;}
.hr{height:1px;background:var(--line);margin:12px 0;}
.sp{margin-top:10px;}
.notice{background:#FFF8EC;border:1px solid #F0D6A8;border-radius:12px;padding:10px 12px;font-size:12px;color:#8A5A00;line-height:1.6;}
.lead{font-size:16px;line-height:1.6;margin-top:6px;}   /* 例句 / 教练提问：正文档，长段落 */
.qbig{font-size:18px;font-weight:700;line-height:1.35;margin:14px 0;}  /* 限时回忆的题面 */
.bigic{font-size:44px;line-height:1.1;margin:14px 0;}   /* 听音题大喇叭（图标，不参与收敛） */
.scbig{font-size:56px;line-height:1.1;}                 /* 场景大 emoji（图标，不参与收敛） */

/* ===== 顶部 ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;height:46px;margin-bottom:6px;}
.topbar .back{font-size:22px;color:var(--ink);width:32px;cursor:pointer;user-select:none;background:none;border:none;font-family:inherit;padding:0;}
.topbar .ttl{font-size:16px;font-weight:700;}
.topbar .acts{display:flex;gap:14px;font-size:18px;cursor:pointer;}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;letter-spacing:.2px;}
.brand .logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--pri),#8B5CF6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;}
.hello{display:flex;align-items:flex-end;justify-content:space-between;margin:2px 0 4px;}
.hello .nm{font-size:24px;font-weight:700;letter-spacing:.3px;line-height:1.25;}
.hello .sub{margin-top:2px;}   /* 字号/颜色都跟 .sub 走，这里只留间距 */

/* ===== 卡片 / 按钮 / chip ===== */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-top:14px;}
.card.tight{padding:15px;}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:14px;padding:15px;font-size:16px;font-weight:700;cursor:pointer;background:var(--pri);color:#fff;font-family:inherit;transition:transform .08s ease, filter .15s ease;}
.btn:active{transform:scale(.98);filter:brightness(1.05);}
.btn.ghost{background:var(--pri-soft);color:var(--pri-ink);}
.btn.light{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn.sm{padding:11px;font-size:14px;border-radius:11px;width:auto;padding-left:16px;padding-right:16px;}
.btn[disabled]{opacity:.5;}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--pri-soft);color:var(--pri-ink);font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;font-family:inherit;border:none;cursor:pointer;min-height:32px;}
.chip.grn{background:var(--grn-soft);color:var(--grn);}
.chip.amb{background:var(--amb-soft);color:#B76E00;}
.chip.gray{background:#F1F2F6;color:var(--ink-2);}
.chip.out{background:#fff;border:1px solid var(--line);color:var(--ink-2);}
.chip.on{background:var(--pri);color:#fff;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.segmented{display:flex;background:#F2F3F7;border-radius:13px;padding:4px;gap:4px;}
.seg{flex:1;text-align:center;padding:10px 0;font-size:14px;font-weight:700;color:var(--ink-3);border-radius:10px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;}
.seg.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(30,34,48,.10);}

/* ===== 进度条 ===== */
.bar{height:9px;background:#EEF0F5;border-radius:999px;overflow:hidden;}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),#8B5CF6);border-radius:999px;}

/* ===== 任务列表 ===== */
.task{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.task:last-child{border-bottom:none;}
.task .ico{width:36px;height:36px;border-radius:11px;background:var(--pri-soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;}
.task .nm{flex:1;font-size:14px;font-weight:600;}
.task .mini{width:76px;}
.task.done .ico{background:var(--grn-soft);}
.task.done .nm{color:var(--grn);}
.badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 6px;border-radius:6px;background:#F1F2F6;color:var(--ink-2);}
.badge.weak{background:var(--red-soft);color:var(--red);}
.badge.learning{background:var(--amb-soft);color:#B76E00;}
.badge.stable{background:var(--grn-soft);color:var(--grn);}
.badge.mastered{background:var(--pri-soft);color:var(--pri-ink);}
.badge.decay{background:#F1F2F6;color:var(--ink-2);}
.badge.new{background:var(--pri-soft);color:var(--pri-ink);}

/* ===== 记忆条 ===== */
.mbars{display:grid;gap:8px;margin-top:8px;}
.mbar{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-2);}
.mbar .lb{flex:0 0 32px;color:var(--ink-3);font-weight:600;}
.mbar .tr{flex:1;height:7px;border-radius:999px;background:#EEF0F5;overflow:hidden;}
.mbar .tr > i{display:block;height:100%;border-radius:999px;background:var(--pri);}
.mbar .vl{flex:0 0 34px;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:600;}
.memrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);}
.memrow:last-child{border-bottom:none;}
.memrow .w{font-weight:700;font-size:16px;}
.memrow .m{width:56px;height:6px;border-radius:999px;background:#EEF0F5;overflow:hidden;flex:none;}
.memrow .m > i{display:block;height:100%;background:var(--pri);}

/* ===== 词卡 ===== */
.wordgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.wcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;position:relative;text-align:left;font-family:inherit;cursor:pointer;}
.wcard:active{background:var(--pri-soft);border-color:var(--pri);}
.wcard.sel{border-color:var(--pri);background:var(--pri-soft);}
.wcard .w{font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px;}
.wcard .z{font-size:12px;color:var(--ink-3);margin-top:2px;}
.wcard .cf{font-size:11px;color:#B76E00;margin-top:4px;font-weight:600;}
.tagb{position:absolute;top:9px;right:9px;font-size:11px;font-weight:800;padding:2px 6px;border-radius:6px;}
.tagb.new{background:var(--grn-soft);color:var(--grn);}
.tagb.review{background:var(--amb-soft);color:#B76E00;}
.tagb.mastered{background:var(--pri-soft);color:var(--pri-ink);}
.tagb.weak{background:var(--red-soft);color:var(--red);}

/* ===== 单词详情 ===== */
.wd-head{text-align:center;padding:4px 0 2px;}
.wd-word{font-size:30px;font-weight:700;letter-spacing:.5px;line-height:1.2;}
.wd-ipa{color:var(--ink-2);font-size:14px;margin-top:2px;}
.wd-zh{color:var(--ink-2);font-size:14px;margin-top:6px;}
.spk{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:18px;flex:none;cursor:pointer;font-family:inherit;}
.defbox{background:var(--bg);border-radius:14px;padding:13px;margin-top:10px;}
.defbox .lb{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:.6px;margin-bottom:3px;}
.defbox .en{font-size:16px;line-height:1.6;}
.colbox{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;}
.colbox span{background:#F1F2F6;border-radius:9px;padding:6px 10px;font-size:14px;color:var(--ink-2);}
.confbox{margin-top:10px;background:var(--amb-soft);border-radius:14px;padding:12px;font-size:14px;line-height:1.6;color:#8A5A00;}
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;}
.actbtn{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 2px;text-align:center;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink);min-height:56px;cursor:pointer;}
.actbtn b{display:block;font-size:18px;margin-bottom:2px;}
.actbtn:active{background:var(--pri-soft);border-color:var(--pri);}

/* ===== 学习流 ===== */
.steps{display:flex;gap:6px;margin:4px 0 6px;}
.steps .s{flex:1;text-align:center;font-size:11px;color:var(--ink-3);padding:7px 2px;border-radius:10px;background:#fff;border:1px solid var(--line);font-weight:700;}
.steps .s.on{background:var(--pri);color:#fff;border-color:var(--pri);}
.steps .s.ok{background:var(--grn-soft);color:var(--grn);border-color:#CDEADB;}
.bigcard{text-align:center;padding:18px 12px;}
.bigemoji{font-size:64px;line-height:1.1;}
.bigword{font-size:30px;font-weight:700;line-height:1.25;margin-top:6px;word-break:break-word;}
.opts{display:grid;gap:9px;margin-top:14px;}
.opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;min-height:48px;line-height:1.35;}
.opt:active{background:var(--pri-soft);border-color:var(--pri);}
.opt.right{border-color:var(--grn);background:var(--grn-soft);font-weight:700;}
.opt.wrong{border-color:var(--red);background:var(--red-soft);}
.opt.sel{border-color:var(--pri);background:var(--pri-soft);}
.opt.done{opacity:.45;background:var(--bg);border-color:var(--line);text-decoration:line-through;cursor:default;}
.fb{margin-top:12px;padding:12px;border-radius:14px;font-size:14px;font-weight:500;}
.fb.ok{background:var(--grn-soft);color:#0F7A38;}
.fb.no{background:var(--red-soft);color:#B4272C;}
.ed-lite{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px;font-size:16px;color:var(--ink);outline:none;width:100%;min-height:48px;box-sizing:border-box;font-family:inherit;transition:border-color .15s;}
.ed-lite::placeholder{color:var(--ink-3);}
.ed-lite:focus{border-color:var(--pri);}
textarea.ed-lite{resize:vertical;min-height:88px;line-height:1.6;}

/* ===== 对话 ===== */
.coach{display:flex;gap:10px;margin-top:12px;}
.coach .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--pri),#8B5CF6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;}
.coach .bub{background:var(--pri-soft);color:var(--pri-ink);padding:11px 13px;border-radius:14px;font-size:14px;line-height:1.6;font-weight:500;flex:1;white-space:pre-wrap;}
.coach.me{flex-direction:row-reverse;}
.coach.me .av{background:#E6E8EF;color:var(--ink-2);}
.coach.me .bub{background:#EEF0F5;color:var(--ink);}

/* ===== Scan ===== */
.cam{width:100%;aspect-ratio:3/4;max-height:44vh;object-fit:cover;background:#111;border-radius:16px;display:block;}
.photo{width:100%;max-height:32vh;object-fit:cover;border-radius:16px;display:block;background:#111;}
.scenegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.scn{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 6px;text-align:center;font-family:inherit;cursor:pointer;}
.scn .e{font-size:26px;line-height:1.2;}   /* 场景 emoji：图标档，别按正文刻度统一掉 */
.scn .n{font-size:12px;margin-top:3px;color:var(--ink-2);}
.scn:active{background:var(--pri-soft);}

/* ===== 统计 / 世界 ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;}
.stats .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;}
.stats .k{font-size:11px;color:var(--ink-3);margin-top:2px;}
.worldgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.wtile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;font-family:inherit;text-align:left;cursor:default;}
.wtile .h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px;}
.wtile .p{margin-top:8px;height:7px;border-radius:999px;background:#EEF0F5;overflow:hidden;}
.wtile .p > i{display:block;height:100%;background:var(--grn);}
.wtile .n{font-size:11px;color:var(--ink-3);margin-top:5px;}

/* ===== 底导航 ===== */
.bottomnav{position:absolute;left:0;right:0;bottom:0;height:calc(40px + max(8px, env(safe-area-inset-bottom)));background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;padding:4px 6px 8px;z-index:50;}
@supports (padding: max(0px)){ .bottomnav{padding-bottom:max(8px, env(safe-area-inset-bottom));} }
.bottomnav .nav{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;line-height:1.25;font-weight:700;color:var(--ink-3);cursor:pointer;justify-content:center;border-radius:12px;background:none;border:none;font-family:inherit;}
.bottomnav .nav .ic{font-size:21px;line-height:1;}
.bottomnav .nav.active{color:var(--pri);}
.bottomnav .nav.active .ic{transform:translateY(-1px);}

/* ===== 登录 / 注册（APP 风格欢迎页） ===== */
#auth{padding-bottom:36px;}
.auth-hero{text-align:center;margin-top:48px;}
.auth-logo{font-size:54px;line-height:1;}
.auth-brand{font-size:24px;font-weight:800;letter-spacing:.4px;line-height:1.25;margin-top:16px;color:var(--ink);}
.auth-tag{font-size:14px;color:var(--ink-3);margin-top:6px;font-weight:400;}
.auth-form{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.auth-label{font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:6px;}
.auth-link{text-align:center;font-size:14px;color:var(--pri-ink);font-weight:700;cursor:pointer;padding:10px;}

/* ===== toast / 遮罩 ===== */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(-8px);top:16px;background:rgba(28,30,42,.94);color:#fff;font-size:14px;padding:10px 14px;border-radius:12px;z-index:999;box-shadow:0 8px 24px rgba(20,22,34,.26);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;text-align:center;max-width:90%;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.busy-mask{position:fixed;inset:0;background:rgba(244,245,248,.82);backdrop-filter:blur(2px);z-index:999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.busy-mask.on{display:flex;}
.busy-spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--pri);animation:busyspin .8s linear infinite;}
@keyframes busyspin{to{transform:rotate(360deg)}}
.busy-txt{font-size:14px;font-weight:600;color:var(--ink);text-align:center;padding:0 30px;line-height:1.6;}
.empty{text-align:center;color:var(--ink-3);font-size:14px;padding:26px 10px;}
.timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--pri);}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}

/* ===== 词义配对：两列各自竖排，不留空格子 =====
   以前两边都用 .g2 两列网格：英文 3 个 → 2+1 缺一格，中文 5 个 → 2+2+1 也缺一格，
   右下角永远吊着一个空位，看着像没渲染完。改成左右各一列、内部竖排就没有空格了。 */
.matchgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;align-items:start;}
.mcol{display:grid;gap:8px;align-content:start;}
.mcol .lb{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:.6px;text-align:center;margin-bottom:-2px;}
.mcol .opt{min-height:46px;padding:10px 8px;font-size:14px;text-align:center;display:flex;align-items:center;justify-content:center;word-break:break-word;}