/* MedFluent — components.css
   组件样式：卡片 / 词条 / 跟读 / 复习 / 对话 / 讲稿 / 测验
   设计语言：描边卡片 · 色块图标 · 等宽数字 · 克制阴影
*/

/* ========== 通用卡片 ========== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.card.tight{padding:14px}
.card.flush{padding:0;overflow:hidden}

.card-title{
  font-size:15px;font-weight:800;margin-bottom:3px;letter-spacing:-.2px;
}
.card-sub{font-size:12.5px;color:var(--t3)}

/* ========== 首页 Hero ========== */
.hero{
  background:linear-gradient(150deg,#0F77A8 0%,var(--blue-d) 100%);
  border-radius:var(--r-lg);
  padding:24px 22px;
  color:#fff;
  margin-bottom:16px;
  box-shadow:0 10px 30px rgba(7,65,95,.28);
  position:relative;
  overflow:hidden;
}
/* 顶部细高光，增加质感 */
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
}
.hero-label{
  font-size:10.5px;font-weight:700;letter-spacing:1.6px;
  opacity:.72;margin-bottom:15px;
}
.hero-nums{display:flex;gap:32px;margin-bottom:19px}
.hero-num{
  font-size:34px;font-weight:800;line-height:1;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.hero-num small{font-size:12px;font-weight:500;opacity:.8;margin-left:3px;letter-spacing:0}
.hero-sub{font-size:11.5px;opacity:.72;margin-top:6px;letter-spacing:.2px}

.btn-primary{
  width:100%;height:48px;border-radius:14px;
  background:#fff;color:var(--blue-d);
  font-size:15px;font-weight:700;letter-spacing:.1px;
  transition:transform .12s;
}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.5}
.btn-primary.ghost{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.5);
}
.btn-primary.blue{background:var(--blue);color:#fff}
.btn-primary.dark{background:var(--t1);color:#fff}

/* ========== 进度环 ========== */
.ring-wrap{display:flex;align-items:center;gap:18px}
.ring{position:relative;width:86px;height:86px;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring-pct{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:18px;font-weight:800;color:var(--blue);letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
}
.ring-info h4{font-size:14.5px;font-weight:800;margin-bottom:4px;letter-spacing:-.2px}
.ring-info p{font-size:12px;color:var(--t2);line-height:1.65}
.streak{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  background:var(--orange-l);color:#C96A20;
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;
}

/* ========== 网格入口 ========== */
.section-title{
  font-size:11px;font-weight:800;color:var(--t3);
  letter-spacing:1.4px;margin:22px 2px 11px;
}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:15px 7px 13px;
  text-align:center;box-shadow:var(--shadow);
  transition:.15s;
}
.tile:active{border-color:var(--blue-l2);transform:translateY(-2px)}
.tile-ico{
  font-size:20px;display:grid;place-items:center;
  width:42px;height:42px;margin:0 auto 9px;line-height:1;
  background:var(--blue-l);border-radius:13px;
}
.tile-name{font-size:12px;font-weight:700;letter-spacing:-.1px}
.tile-en{
  font-size:8.5px;color:var(--t3);margin-top:3px;
  letter-spacing:.8px;text-transform:uppercase;font-weight:600;
}

/* ========== 列表项 ========== */
.li{
  display:flex;align-items:center;gap:13px;
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;
  padding:13px 15px;box-shadow:var(--shadow);
  margin-bottom:9px;transition:.15s;
}
.li:active{transform:translateX(2px);border-color:var(--blue-l2)}
.li-ico{
  font-size:18px;width:40px;height:40px;flex:none;
  display:grid;place-items:center;background:var(--blue-l);border-radius:12px;
}
.li-body{flex:1;min-width:0}
.li-en{
  font-size:13.5px;font-weight:700;letter-spacing:-.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.li-zh{
  font-size:11.5px;color:var(--t3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.li-meta{
  font-size:10.5px;font-weight:700;color:var(--blue);
  background:var(--blue-l);padding:3px 8px;border-radius:7px;flex:none;
  font-variant-numeric:tabular-nums;
}
.li-arrow{color:var(--line-d);font-size:16px;flex:none}

/* ========== 分段控件 ========== */
.seg{
  display:flex;background:#EBF0F4;border-radius:12px;
  padding:3px;margin-bottom:14px;gap:2px;
  overflow-x:auto;scrollbar-width:none;
}
.seg::-webkit-scrollbar{display:none}
.seg button{
  flex:1;min-width:fit-content;height:32px;padding:0 13px;
  border-radius:9px;font-size:12.5px;font-weight:600;
  color:var(--t2);transition:.15s;white-space:nowrap;
}
.seg button.on{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(18,29,40,.1)}

/* ========== 搜索框 ========== */
.search{
  display:flex;align-items:center;gap:9px;
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;
  padding:0 14px;height:44px;box-shadow:var(--shadow);
  margin-bottom:14px;transition:.15s;
}
.search:focus-within{border-color:#AFD3E4;box-shadow:0 0 0 3px var(--blue-l)}
.search input{
  flex:1;border:none;outline:none;background:none;
  font-size:14px;min-width:0;
}
.search input::placeholder{color:var(--t3)}

/* ========== 词条详情 ========== */
.detail-en{
  font-size:24px;font-weight:800;line-height:1.25;letter-spacing:-.5px;
  word-break:break-word;
}
.detail-abbr{
  display:inline-block;margin-top:9px;
  font-size:11px;font-weight:800;letter-spacing:.8px;
  background:var(--blue-l);color:var(--blue);
  padding:3px 9px;border-radius:6px;
}
.detail-ipa{
  font-size:13px;color:var(--blue);margin-top:10px;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
  word-break:break-word;
}
.detail-zh{font-size:15px;color:var(--t2);margin-top:8px;font-weight:500}
.detail-context{
  font-size:12.5px;color:var(--t2);line-height:1.75;
  margin-top:9px;padding:12px 13px;background:#F7FAFC;border-radius:12px;
}

.divider{height:1px;background:var(--line);margin:16px 0}

.meta-label{
  font-size:10px;font-weight:800;color:var(--t3);
  letter-spacing:1.4px;margin-bottom:9px;text-transform:uppercase;
}

.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{
  font-size:10px;font-weight:700;padding:3.5px 9px;
  border-radius:6px;letter-spacing:.3px;white-space:nowrap;
}
.badge.iso{background:var(--blue-l);color:var(--blue)}
.badge.fda{background:var(--green-l);color:#1E7A50}
.badge.mdr{background:var(--orange-l);color:#C96A20}
.badge.diff{background:#F3E8FA;color:#7A3D9E}

/* 例句块 */
.ex{
  background:#F7FAFC;border-left:3px solid var(--blue);
  border-radius:0 12px 12px 0;padding:13px 14px;margin-bottom:10px;
}
.ex-tag{
  font-size:9.5px;font-weight:800;color:var(--blue);
  letter-spacing:1px;margin-bottom:8px;text-transform:uppercase;
}
.ex-en{font-size:14.5px;line-height:1.6;font-weight:500}
.ex-zh{font-size:12px;color:var(--t3);margin-top:6px;line-height:1.6}
.ex-src{font-size:10.5px;color:var(--blue);margin-top:7px;font-weight:600}
.ex-act{display:flex;gap:8px;margin-top:11px}

/* ========== 按钮组 ========== */
.btn-soft{
  flex:1;height:40px;border-radius:var(--r-sm);
  border:1px solid var(--line-d);background:#fff;
  font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:.15s;white-space:nowrap;letter-spacing:.1px;
}
.btn-soft:active{background:var(--blue-l);border-color:#AFD3E4}
.btn-soft.mic{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-soft.mic:active{background:var(--blue-d)}
.btn-soft.on{background:var(--blue-l);border-color:#AFD3E4;color:var(--blue)}
.btn-soft.sm{height:32px;font-size:11.5px}
.btn-row{display:flex;gap:8px}

/* ========== 跟读 ========== */
.wave{
  display:flex;align-items:flex-end;justify-content:center;
  gap:3px;height:54px;padding:12px 0;
}
.wave i{
  width:3.5px;background:var(--blue);border-radius:2px;
  animation:wave 1s ease-in-out infinite;
}
@keyframes wave{0%,100%{height:14%}50%{height:100%}}
.wave.idle i{animation:none;height:20%;background:var(--line-d)}
.wave.rec i{background:var(--orange)}

.rec-status{
  text-align:center;font-size:12px;font-weight:700;
  color:var(--blue);
}
.rec-status.rec{color:var(--orange)}

.score-hero{text-align:center;padding:10px 0 4px}
.score-big{
  font-size:52px;font-weight:900;line-height:1;
  letter-spacing:-2px;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.score-big small{font-size:14px;color:var(--t3);font-weight:600;letter-spacing:0}
.score-grade{
  font-size:12px;font-weight:700;color:var(--t3);margin-top:6px;
}

.sbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px}
.sbar-nm{width:52px;color:var(--t2);font-weight:600;flex:none}
.sbar-track{flex:1;height:7px;background:#EBF0F4;border-radius:4px;overflow:hidden}
.sbar-fill{height:100%;border-radius:4px;transition:width .7s ease}
.sbar-vl{width:38px;text-align:right;font-weight:700;color:var(--blue);flex:none;font-variant-numeric:tabular-nums}

.wordcmp{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.wordcmp span{
  padding:4px 9px;border-radius:7px;font-size:13px;font-weight:600;
  background:var(--green-l);color:#1E7A50;
}
.wordcmp span.bad{
  background:#FDECE6;color:#C9512A;
  text-decoration:underline dotted;text-underline-offset:3px;
}
.wordcmp span.miss{
  background:#F3E8FA;color:#7A3D9E;
  text-decoration:line-through;
}

/* ========== 提示条 ========== */
.notice{
  background:var(--yellow-l);border:1px solid var(--yellow-b);
  border-radius:12px;padding:11px 13px;
  font-size:11.5px;color:#8A6A20;line-height:1.68;
  margin-bottom:14px;
}
.notice.info{background:var(--blue-l);border-color:#BFDDEC;color:#0A5479}
.notice.err{background:#FDECE6;border-color:#F5C9B8;color:#A8431F}
.notice b{font-weight:800}

/* ========== 复习卡 ========== */
.rev-box{
  width:100%;min-height:230px;display:grid;place-items:center;
  text-align:center;padding:28px 20px;
  background:linear-gradient(160deg,#F8FBFC,#ECF3F8);
  border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:15px;
}
.rev-q{font-size:21px;font-weight:800;line-height:1.36;letter-spacing:-.3px}
.rev-ipa{
  font-size:12px;color:var(--blue);margin-top:8px;
  font-family:ui-monospace,Consolas,monospace;
}
.rev-a{
  margin-top:13px;padding-top:13px;
  border-top:1px dashed var(--line-d);
  animation:fadeUp .25s ease;
}
.rev-a .en{font-size:18px;font-weight:800;color:var(--blue)}
.rev-a .zh{font-size:12.5px;color:var(--t2);margin-top:6px}

.rev-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:100%}
.rb{height:44px;border-radius:12px;font-size:11px;font-weight:700;
    line-height:1.25;transition:transform .12s;padding:3px}
.rb:active{transform:scale(.95)}
.rb.again{background:#FDECE6;color:#C9512A}
.rb.hard{background:#FDF6E5;color:#B07C1A}
.rb.good{background:var(--green-l);color:#1E7A50}
.rb.easy{background:var(--blue-l);color:var(--blue)}
.rb small{display:block;font-size:9px;opacity:.7;font-weight:600;margin-top:1px}

.rev-progress{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;color:var(--t3);
  margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.rev-bar{flex:1;height:5px;background:#EBF0F4;border-radius:3px;overflow:hidden}
.rev-bar i{display:block;height:100%;background:var(--blue);border-radius:3px;transition:width .3s}

/* ========== 情景对话 ========== */
.bubble{display:flex;gap:9px;margin-bottom:12px;align-items:flex-start}
.bubble.you{flex-direction:row-reverse}
.bub-av{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:#fff;
}
.bub-av.auditor,.bub-av.customer,.bub-av.manager,.bub-av.qa,.bub-av.supplier,.bub-av.audience{background:#5A6B7A}
.bub-av.you{background:var(--blue)}
.bub-msg{
  background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:11px 14px;
  box-shadow:var(--shadow);max-width:80%;
}
.bubble.you .bub-msg{background:var(--blue);color:#fff;border-color:var(--blue)}
.bub-role{
  font-size:9px;font-weight:800;letter-spacing:.8px;
  opacity:.72;display:block;margin-bottom:5px;text-transform:uppercase;
}
.bub-en{font-size:13.5px;line-height:1.58;font-weight:500}
.bub-zh{font-size:11.5px;margin-top:6px;opacity:.75;line-height:1.6}
.bub-key{
  display:inline-block;margin-top:7px;font-size:9px;font-weight:800;
  background:rgba(255,255,255,.22);padding:2px 7px;border-radius:5px;
}
.bubble:not(.you) .bub-key{background:var(--blue-l);color:var(--blue)}

/* ========== 讲稿 / 提词器 ========== */
.script{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px;line-height:2;
  font-size:15.5px;
}
.script .ph{
  background:var(--blue-l);color:var(--blue);
  padding:1px 6px;border-radius:5px;font-weight:700;
  cursor:pointer;
}
.script-zh{
  font-size:12.5px;color:var(--t3);margin-top:12px;
  padding-top:12px;border-top:1px dashed var(--line);line-height:1.85;
}
.script-tip{
  font-size:12.5px;color:var(--t2);line-height:1.8;
}

/* 提词器（横屏大字） */
.prompter{
  position:fixed;inset:0;background:#0A1620;color:#F0F4F8;
  z-index:300;padding:26px 22px;
  overflow-y:auto;overscroll-behavior:contain;
}
.prompter-txt{
  font-size:30px;line-height:1.72;font-weight:600;
  letter-spacing:-.2px;
}
.prompter-txt .ph{color:#6FC3E8;text-decoration:underline dotted}
.prompter-bar{
  position:fixed;bottom:0;left:0;right:0;
  padding:14px 20px calc(14px + var(--safe-b));
  background:linear-gradient(to top,rgba(10,22,32,.98),rgba(10,22,32,.6));
  display:flex;gap:10px;align-items:center;
}

/* ========== 测验 ========== */
.quiz-q{
  font-size:18px;font-weight:700;line-height:1.45;
  text-align:center;padding:20px 10px 8px;
}
.quiz-opt{
  display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:14px 15px;margin-bottom:9px;
  font-size:14px;font-weight:500;transition:.15s;width:100%;text-align:left;
}
.quiz-opt:active{border-color:#AFD3E4}
.quiz-opt .mk{
  width:24px;height:24px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-d);display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--t3);
}
.quiz-opt.picked{border-color:var(--blue);background:var(--blue-l)}
.quiz-opt.picked .mk{background:var(--blue);color:#fff;border-color:var(--blue)}
.quiz-opt.right{border-color:var(--green);background:var(--green-l)}
.quiz-opt.right .mk{background:var(--green);color:#fff;border-color:var(--green)}
.quiz-opt.wrong{border-color:#E08A6B;background:#FDECE6}
.quiz-opt.wrong .mk{background:#D9704A;color:#fff;border-color:#D9704A}

.quiz-input{
  width:100%;height:48px;border-radius:12px;
  border:1px solid var(--line-d);padding:0 15px;
  font-size:15px;outline:none;transition:.15s;background:#fff;
}
.quiz-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}

/* ========== 统计 ========== */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;
  padding:15px 8px;text-align:center;box-shadow:var(--shadow);
}
.stat-v{
  font-size:22px;font-weight:800;color:var(--blue);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;
}
.stat-k{font-size:10px;color:var(--t3);margin-top:6px;font-weight:600}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px}
.cal-d{aspect-ratio:1;border-radius:5px;background:#EBF0F4}
.cal-d.l1{background:#CFE6F2}
.cal-d.l2{background:#6FB3D6}
.cal-d.l3{background:var(--blue)}
.cal-legend{
  display:flex;align-items:center;justify-content:flex-end;gap:5px;
  font-size:9.5px;color:var(--t3);margin-top:9px;font-weight:600;
}
.cal-legend i{width:9px;height:9px;border-radius:2px;display:block}
.cal-legend i.l0{background:#EBF0F4}
.cal-legend i.l1{background:#CFE6F2}
.cal-legend i.l2{background:#6FB3D6}
.cal-legend i.l3{background:var(--blue)}

/* 掌握度分布条 */
.dist{display:flex;height:9px;border-radius:5px;overflow:hidden;margin:9px 0 7px}
.dist i{display:block;height:100%}

/* 设置行 */
.set-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.set-row:last-child{border-bottom:none}
.set-label{display:flex;align-items:center;gap:9px;font-weight:500}
.set-val{color:var(--blue);font-weight:700;font-size:12.5px;text-align:right}
.set-select{
  border:1px solid var(--line-d);border-radius:9px;
  padding:6px 10px;font-size:12.5px;font-weight:600;
  background:#fff;color:var(--blue);outline:none;
}
.set-select:focus{border-color:var(--blue)}

/* 空状态 */
.empty{text-align:center;padding:50px 20px;color:var(--t3)}
.empty-ico{font-size:38px;display:block;margin-bottom:13px;opacity:.5}
.empty-t{font-size:14px;font-weight:700;color:var(--t2);margin-bottom:6px}
.empty-d{font-size:12px;line-height:1.7}

/* ========== 多邻国式组件（立体按钮 / 横幅反馈 / 红心 / 词块 / 撒花） ========== */

/* 立体主按钮：底部厚边，按下下沉 */
.btn-primary.blue{
  border-bottom:4px solid var(--blue-d);
}
.btn-primary.blue:active{
  transform:translateY(2px);
  border-bottom-width:2px;
}
.dl-btn{flex:none;width:auto;min-width:110px;padding:0 22px}

/* 红心 */
.dl-hearts{
  font-size:12px;letter-spacing:2px;flex:none;
  font-variant-numeric:tabular-nums;
}

/* 选项字母徽标 */
.quiz-opt .mk{
  background:#F0F4F7;
  font-variant-numeric:tabular-nums;
}
.quiz-opt.picked{border-width:2px}
.quiz-opt.right{border-width:2px}
.quiz-opt.wrong{border-width:2px}
.quiz-opt:disabled{opacity:.92}

/* 底部即时反馈横幅 */
.dl-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  max-width:640px;margin:0 auto;
  padding:15px 16px calc(15px + var(--safe-b));
  transform:translateY(110%);
  transition:transform .22s ease;
  box-shadow:0 -6px 24px rgba(18,29,40,.12);
}
.dl-banner.show{transform:none}
.dl-banner.ok{background:var(--green-l);border-top:2px solid var(--green)}
.dl-banner.bad{background:#FDECE6;border-top:2px solid #D9704A}
.dl-banner-inner{display:flex;align-items:center;gap:12px}
.dl-banner-ico{font-size:26px;flex:none}
.dl-banner-tt{font-size:15px;font-weight:800;color:var(--t1)}
.dl-banner.ok .dl-banner-tt{color:#1E7A50}
.dl-banner.bad .dl-banner-tt{color:#C9512A}
.dl-banner-sub{font-size:12px;color:var(--t2);margin-top:2px;line-height:1.5}

/* 乱序组句词块 */
.wt-line{
  min-height:54px;
  border:2px dashed var(--line-d);border-radius:12px;
  padding:8px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  margin-bottom:13px;background:#FBFDFE;
}
.wt-hint{font-size:12px;color:var(--t3)}
.wt-tray{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.wt{
  padding:9px 13px;border-radius:11px;
  background:#fff;border:1.5px solid var(--line-d);
  border-bottom-width:3.5px;
  font-size:14px;font-weight:700;transition:.12s;
}
.wt:active{transform:translateY(1.5px);border-bottom-width:2px}
.wt.in-line{background:var(--blue-l);border-color:#AFD3E4;color:var(--blue-d)}
.wt.ok{background:var(--green-l);border-color:var(--green);color:#1E7A50}
.wt.bad{background:#FDECE6;border-color:#D9704A;color:#C9512A}

/* 撒花 */
.cf-holder{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.cf{
  position:absolute;top:-14px;display:block;
  animation:cfFall linear forwards;
}
@keyframes cfFall{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(112vh) rotate(660deg);opacity:.85}
}

/* ========== 多邻国主题覆盖层（亮绿 / 粗边扁平 / 3D 按钮） ========== */

/* 卡片与列表：2px 灰边、无阴影、按下微沉 */
.card,.li,.stat,.search,.rev-box,.bub-msg,.script,.quiz-input{
  border:2px solid var(--line)!important;
  box-shadow:none!important;
}
.card,.li{border-radius:16px}
.li:active{border-color:var(--sky)!important}
.card-title{color:var(--t1)}

/* Hero：纯多邻国绿 + 深绿厚底 */
.hero{
  background:#58CC02;
  border-radius:20px;
  border-bottom:6px solid #46A302;
  box-shadow:none!important;
  color:#fff;
}
.hero::before{display:none}
.hero-num,.hero-label,.hero-sub{color:#fff}
.btn-primary{
  border-bottom:4px solid #D8D8D8;
  font-weight:800;
}
.btn-primary:active{transform:translateY(2px);border-bottom-width:2px}
.btn-primary.blue{
  background:#58CC02;color:#fff;border-bottom-color:#46A302;
}

/* 进度条：圆头绿 */
.rev-bar{border:2px solid var(--line);border-radius:99px;background:#F1F3F5}
.rev-bar i{background:#58CC02}
.sbar-track{background:#F1F3F5}

/* 快捷入口：图标块按入口轮换多邻国彩色 */
.grid3 .tile:nth-child(6n+1) .tile-ico{background:var(--blue-l2)}
.grid3 .tile:nth-child(6n+2) .tile-ico{background:var(--sky-l)}
.grid3 .tile:nth-child(6n+3) .tile-ico{background:var(--purple-l)}
.grid3 .tile:nth-child(6n+4) .tile-ico{background:var(--orange-l)}
.grid3 .tile:nth-child(6n+5) .tile-ico{background:var(--yellow-l)}
.grid3 .tile:nth-child(6n+6) .tile-ico{background:#FFE5F2}
.tile{
  border:2px solid var(--line);
  border-bottom-width:4px;
  border-radius:16px;
  box-shadow:none!important;
}
.tile:active{transform:translateY(2px);border-bottom-width:2px;border-color:var(--line-d)}
.li-ico{background:var(--sky-l)}
.li-meta{color:#46A302;background:var(--blue-l2)}

/* 分段控件：选中即绿色 */
.seg{background:#F1F3F5}
.seg button.on{color:#58CC02}
.seg button.on{box-shadow:none;border:2px solid var(--line)}

/* 选项：3D 厚底，选中天蓝（多邻国 pre-check 色） */
.quiz-opt{
  border:2px solid var(--line)!important;
  border-bottom-width:4px!important;
  border-radius:14px;
  box-shadow:none;
}
.quiz-opt:active{transform:translateY(2px);border-bottom-width:2px!important}
.quiz-opt.picked{border-color:var(--sky)!important;background:var(--sky-l)}
.quiz-opt.picked .mk{background:var(--sky);border-color:var(--sky);color:#fff}
.quiz-opt.right{border-color:#58CC02!important;background:var(--blue-l2)}
.quiz-opt.right .mk{background:#58CC02;border-color:#58CC02;color:#fff}
.quiz-opt.wrong{border-color:var(--red)!important;background:var(--red-l)}
.quiz-opt.wrong .mk{background:var(--red);border-color:var(--red);color:#fff}
.quiz-opt .mk{border-width:2px;background:#F1F3F5;color:var(--t2)}

/* 反馈横幅：多邻国原版配色 */
.dl-banner.ok{background:#D7FFB8;border-top:2px solid #58A700}
.dl-banner.ok .dl-banner-tt{color:#58A700}
.dl-banner.bad{background:#FFDFE0;border-top:2px solid var(--red)}
.dl-banner.bad .dl-banner-tt{color:var(--red)}
.dl-banner-sub{color:#777}
.dl-banner .btn-primary.blue{border-bottom-color:#46A302}

/* 词块：3D 灰底 */
.wt{
  border:2px solid var(--line);
  border-bottom-width:4px;
  border-radius:13px;
}
.wt:active{border-bottom-width:2px}
.wt.in-line{background:var(--sky-l);border-color:#84D8FF;color:#1899D6}
.wt.ok{background:var(--blue-l2);border-color:#58CC02;color:#46A302}
.wt.bad{background:var(--red-l);border-color:var(--red);color:var(--red)}
.wt-line{border-color:var(--line-d);background:#FAFAFA}

/* 红心连击条 */
.streak{background:var(--orange-l);color:#B56A00}

/* 底部导航：绿色 pill + 粗上边 */
.tabbar{background:rgba(255,255,255,.97);border-top:2px solid var(--line)}
.tab.on{color:#58CC02}
.tab.on .tab-ico{background:var(--blue-l2)}

/* 徽章配色对齐 */
.badge.iso{background:var(--sky-l);color:#1899D6}
.badge.fda{background:var(--blue-l2);color:#46A302}
.badge.mdr{background:var(--orange-l);color:#B56A00}

/* 提示条 */
.notice{border-width:2px;border-radius:14px}
.notice.info{background:var(--sky-l);border-color:#84D8FF;color:#1899D6}
.notice.err{background:var(--red-l);border-color:#FFB2B2;color:var(--red)}

/* 例句块：绿色引用线 */
.ex{background:#FAFAFA;border-left:4px solid #58CC02;border-radius:0 12px 12px 0}
.ex-tag{color:#46A302}
.ex-src{color:#46A302}

/* 详情强调色 */
.detail-ipa{color:#1899D6}
.ring-pct{color:#58CC02}
.stat-v{color:#58CC02}
.sbar-vl{color:#58CC02}
.score-big{color:#58CC02}
.rb.easy{background:var(--sky-l);color:#1899D6}
.rb.good{background:var(--blue-l2);color:#46A302}
.rb.again{background:var(--red-l);color:var(--red)}
.rb.hard{background:var(--yellow-l);color:#B56A00}