:root{
  --green:#0a6b3b; --green-d:#08542e; --gold:#b8860b; --gold-d:#9c7209;
  --bg:#f6f3ec; --card:#fff; --line:#e6e2d8; --muted:#635e56; --ink:#1c1a17;
  --side:288px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);margin:0;font-size:17px;line-height:1.6;}

/* ---------- 顶栏 ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  background:#fff;border-bottom:1px solid var(--line);padding:12px 24px;min-height:62px;}
.brand{font-size:19px;font-weight:700;color:var(--green);white-space:nowrap;}
.chips{display:flex;gap:9px;align-items:center;margin-left:auto;flex-wrap:wrap;}
.pill{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:6px 13px;
  font-size:15px;color:var(--muted);white-space:nowrap;}
.pill b{color:var(--gold-d);font-size:16px;}
.btn{border:none;background:var(--green);color:#fff;border-radius:9px;padding:11px 18px;
  font-size:16px;cursor:pointer;}
.btn:hover{background:var(--green-d);}
.btn.gold{background:var(--gold);} .btn.gold:hover{background:var(--gold-d);}
.btn.sm{padding:8px 14px;font-size:15px;}
.btn:disabled{opacity:.75;cursor:default;}
.menu{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:0 0 auto;}
.menu span{display:block;width:20px;height:2.5px;background:var(--green);border-radius:2px;}

/* ---------- 布局：铺满整页，不再缩在中间一条 ---------- */
.wrap{width:100%;margin:0;padding:20px 24px 70px;
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:26px;align-items:start;}
.side{position:sticky;top:80px;max-height:calc(100vh - 104px);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 12px;}
.side-head{font-size:13px;letter-spacing:.06em;color:var(--muted);padding:2px 8px 12px;font-weight:700;}
.side-stage{margin-bottom:16px;}
.side-stitle{font-size:14px;font-weight:700;color:var(--gold-d);padding:4px 8px;}
.side-soon{font-size:13px;color:#aaa39a;padding:2px 8px 4px;}
.side-lesson{display:block;text-decoration:none;color:var(--ink);border-radius:10px;
  padding:10px 10px 11px;margin:3px 0;border:1px solid transparent;}
.side-lesson:hover{background:#f3f0e8;}
.side-lesson.on{background:#eaf4ee;border-color:#cfe4d8;}
.sl-title{display:block;font-size:15px;font-weight:600;line-height:1.4;}
.side-lesson.on .sl-title{color:var(--green-d);}
.sl-sub{display:block;font-size:13px;color:var(--muted);margin-top:3px;}
.sl-bar{display:block;height:5px;background:#eceae3;border-radius:3px;margin-top:7px;overflow:hidden;}
.sl-bar > i{display:block;height:100%;background:var(--green);width:0;}
.main{min-width:0;}
h1{color:var(--green);font-size:30px;margin:0 0 4px;line-height:1.25;}
.goal{color:var(--muted);font-size:16px;margin:8px 0 18px;}

/* ---------- 内容卡 ---------- */
.section,.culture,.etq{background:var(--card);border-radius:14px;padding:20px 22px;
  margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.section h3,.culture h3,.etq h3{color:var(--gold-d);font-size:19px;margin:0 0 14px;}
.culture h3,.etq h3{color:var(--green);}
.note{background:#fff8e8;border:1px solid #f0e6cf;border-radius:12px;padding:14px 18px;
  font-size:16px;color:#6b500f;line-height:1.7;}
.etq ul{margin:0;padding-left:22px;} .etq li{font-size:16px;margin:7px 0;color:#333;line-height:1.7;}
.actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- 条目 ---------- */
.item{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line);}
.item:last-child{border-bottom:none;}
.ar{font-size:52px;font-weight:700;color:var(--green);direction:rtl;min-width:130px;
  text-align:right;line-height:1.45;flex:0 0 auto;max-width:42%;overflow-wrap:break-word;}
.imeta{flex:1;min-width:0;}
.tr{color:#433f39;font-size:16px;font-style:italic;line-height:1.55;}
.zh{font-size:18px;font-weight:600;margin-top:3px;}
.ctx{color:var(--muted);font-size:14.5px;margin-top:4px;line-height:1.6;}
.auds{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;}
.apair{display:flex;gap:5px;align-items:center;margin:2px 0;}
.alab{font-size:13px;color:#8e8880;}
.play{border:none;background:var(--green);color:#fff;border-radius:50%;width:42px;height:42px;
  font-size:17px;cursor:pointer;flex:0 0 auto;line-height:1;}
.play.slow{background:var(--gold);}
.play:hover{opacity:.85;}
.forms{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 8px;}
.fcell{display:flex;flex-direction:column;align-items:center;min-width:74px;padding:7px 8px 6px;
  border:1px solid var(--line);border-radius:9px;background:#faf9f5;}
.flabel{font-size:13px;font-weight:700;color:var(--green);line-height:1.15;text-align:center;}
.flabel small{display:block;font-size:10px;font-weight:400;color:#8e8880;margin-top:2px;}
.fglyph{font-size:38px;font-weight:700;color:#1a1a1a;line-height:1.2;margin-top:4px;}
.snd{font-size:15px;color:#57534c;margin:6px 0 10px;line-height:1.65;}
.mark{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:9px 14px;font-size:14.5px;cursor:pointer;flex:0 0 auto;color:#433f39;white-space:nowrap;}
.mark.known{background:var(--green);color:#fff;border-color:var(--green);}
.mark.fuzzy{background:var(--gold);color:#fff;border-color:var(--gold);}

/* ---------- 测验弹层 ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;
  justify-content:center;padding:16px;z-index:60;}
.modal.show{display:flex;}
.box{background:#fff;border-radius:16px;max-width:560px;width:100%;padding:22px;}
.box h3{margin:0 0 12px;color:var(--green);font-size:20px;}
.qaudio{font-size:30px;text-align:center;margin:12px 0;display:flex;gap:10px;justify-content:center;align-items:center;}
.opts{display:grid;gap:10px;}
.opt{border:1px solid var(--line);background:#fff;border-radius:10px;padding:14px;font-size:17px;
  cursor:pointer;text-align:left;color:var(--ink);}
.opt.ok{background:#e7f6ec;border-color:var(--green);}
.opt.bad{background:#fdeaea;border-color:#d9534f;}
.box .row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:16px;}

/* ---------- 超宽屏：条目两列，别拉成一整行 ---------- */
@media (min-width:1600px){
  .wrap{padding:22px 36px 80px;gap:32px;--side:320px;}
  .section > .item{display:inline-flex;width:calc(50% - 12px);vertical-align:top;margin-right:18px;}
  .section > .item:nth-child(odd){margin-right:0;}
  .section > .item .imeta{min-width:0;}
}

/* ---------- 手机：目录变抽屉 ---------- */
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:38;}
@media (max-width:860px){
  body{font-size:17px;}
  .menu{display:flex;}
  .top{flex-wrap:wrap;padding:10px 12px;gap:8px 10px;}
  .brand{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .chips{order:4;width:100%;margin-left:0;justify-content:space-between;gap:6px;}
  #reviewBtn{order:3;flex:0 0 auto;}
  .pill{padding:5px 10px;font-size:13.5px;}
  .btn.sm{padding:7px 11px;font-size:13.5px;}
  .wrap{grid-template-columns:minmax(0,1fr);padding:14px 12px 50px;gap:0;}
  .side{position:fixed;top:0;left:0;bottom:0;width:min(84vw,320px);max-height:none;border-radius:0;
    border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .22s ease;
    z-index:40;padding:16px 12px;overflow:auto;}
  body.drawer-open .side{transform:translateX(0);}
  body.drawer-open .scrim{display:block;}
  body.drawer-open{overflow:hidden;}
  h1{font-size:23px;}
  .goal{font-size:15.5px;}
}
/* ---------- 窄屏条目排版 ---------- */
@media (max-width:680px){
  .section,.culture,.etq{padding:14px;}
  .item{flex-wrap:wrap;align-items:flex-start;gap:8px 10px;}
  .item > .ar{order:1;min-width:0;font-size:52px;line-height:1.3;}
  .item > .mark{order:2;margin-left:auto;}
  .item > .auds{order:3;flex:1 1 100%;flex-direction:row;gap:16px;}
  .item > .imeta{order:4;flex:1 1 100%;min-width:0;}
  .forms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;}
  .fcell{min-width:0;padding:5px 2px;}
  .fglyph{font-size:32px;}
  .flabel{font-size:12px;}
  .play{width:42px;height:42px;font-size:17px;}
  .tr{font-size:16px;}
  .snd{font-size:15px;}
  .zh{font-size:17.5px;}
}