/* 波斯语新闻精听 · 手机端样式（移动优先，深色） */
:root{
  --bg:#0f1420; --bg2:#151c2c; --card:#1b2334; --card2:#222c42; --hi:#2a3854;
  --line:#2b3549; --txt:#e8ecf5; --txt2:#a4b0c6; --txt3:#77839a;
  --acc:#4f9dff; --acc2:#7cc4ff; --gold:#f0b429; --green:#3ddc97; --red:#ff6b6b;
  --ir:#4f9dff; --af:#3ddc97;
  --pb:88px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
.hidden{display:none !important}

/* ── 顶栏 ── */
#topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(15,20,32,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 10px) 14px 0;
}
.tb-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#topbar h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.3px}
.chip{
  font-size:11.5px;color:var(--txt2);background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:3px 10px;white-space:nowrap;
}
#daybar{display:flex;align-items:center;gap:7px;margin-top:9px}
#daySel{
  flex:1 1 auto;min-width:0;background:var(--card);color:var(--txt);
  border:1px solid var(--line);border-radius:9px;padding:6px 8px;font-size:12.5px;
  font-family:inherit;
}
#dayRefresh{
  flex:0 0 auto;background:rgba(79,157,255,.16);color:var(--acc2);
  border:1px solid rgba(79,157,255,.34);border-radius:9px;padding:6px 12px;
  font-size:12.5px;font-weight:600;white-space:nowrap;
}
#dayRefresh:disabled{opacity:.55}
#dayStatus{flex:0 0 auto;font-size:11px;color:var(--txt3);white-space:nowrap;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
#tabs{display:flex;gap:2px;margin-top:9px;overflow-x:auto;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
.tab{
  flex:1 0 auto;min-width:64px;padding:9px 6px 11px;font-size:14px;color:var(--txt3);
  border-bottom:2px solid transparent;transition:.15s;
}
.tab.active{color:var(--acc2);border-bottom-color:var(--acc);font-weight:600}

/* ── 主体 ── */
#main{padding:14px 14px calc(var(--pb) + 20px);max-width:820px;margin:0 auto}
.view{display:none}
.view.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.sumbar{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
}
.sumbar .s{
  flex:1 1 76px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:9px 6px;text-align:center;
}
.sumbar .s b{display:block;font-size:18px;color:var(--acc2);line-height:1.2}
.sumbar .s span{font-size:11px;color:var(--txt3)}

/* ── 新闻卡片 ── */
.item{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;margin-bottom:11px;cursor:pointer;transition:.15s;
  position:relative;
}
.item:active{background:var(--card2);transform:scale(.995)}
.item.done{border-left:3px solid var(--green)}
.i-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.badge{
  font-size:10.5px;padding:2px 7px;border-radius:5px;font-weight:600;
  border:1px solid transparent;line-height:1.5;
}
.b-ir{background:rgba(79,157,255,.16);color:var(--ir);border-color:rgba(79,157,255,.34)}
.b-af{background:rgba(61,220,151,.16);color:var(--af);border-color:rgba(61,220,151,.34)}
.b-src{background:var(--bg2);color:var(--txt2);border-color:var(--line)}
.b-topic{background:rgba(240,180,41,.13);color:var(--gold);border-color:rgba(240,180,41,.3)}
.b-done{background:rgba(61,220,151,.15);color:var(--green);border-color:rgba(61,220,151,.32)}
.b-cn{background:rgba(255,86,86,.17);color:#ff8f8f;border-color:rgba(255,86,86,.4);font-weight:700}
.item.cn{border-left:3px solid #ff5656;background:linear-gradient(90deg,rgba(255,86,86,.07),var(--card) 42%)}
.i-tfa{
  font-size:16.5px;line-height:1.85;direction:rtl;text-align:right;
  font-family:"Vazirmatn","Tahoma","Iranian Sans","Segoe UI",system-ui,sans-serif;
  margin:0 0 6px;color:#fff;
}
.i-tzh{font-size:13px;color:var(--txt2);line-height:1.6;margin:0 0 8px}
.i-meta{display:flex;gap:12px;font-size:11.5px;color:var(--txt3);flex-wrap:wrap}

/* ── 精听详情 ── */
.d-head{margin-bottom:12px}
.d-title{
  font-size:19px;line-height:1.9;direction:rtl;text-align:right;margin:6px 0 8px;color:#fff;
  font-family:"Vazirmatn","Tahoma","Iranian Sans","Segoe UI",system-ui,sans-serif;
}
.d-title-zh{font-size:13.5px;color:var(--txt2);line-height:1.7;margin:0 0 10px}
.backbtn{font-size:13px;color:var(--acc2);padding:2px 0}

.note{
  background:rgba(240,180,41,.09);border:1px solid rgba(240,180,41,.28);
  border-left:3px solid var(--gold);border-radius:10px;padding:9px 11px;
  font-size:12.5px;color:#e9d9ab;line-height:1.75;margin-bottom:11px;
}
.note b{color:var(--gold)}

.toolbar{
  display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;
  position:sticky;top:calc(env(safe-area-inset-top) + 96px);z-index:20;
  background:rgba(15,20,32,.9);backdrop-filter:blur(8px);padding:7px 0;
}
.tbtn{
  font-size:12px;padding:6px 11px;border-radius:18px;background:var(--card);
  border:1px solid var(--line);color:var(--txt2);transition:.15s;
}
.tbtn.on{background:rgba(79,157,255,.2);border-color:var(--acc);color:var(--acc2)}

/* ── 句子 ── */
.sent{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;margin-bottom:9px;transition:.18s;position:relative;
}
.sent.active{background:var(--hi);border-color:var(--acc);box-shadow:0 0 0 1px rgba(79,157,255,.25)}
.sent.played{border-left:3px solid var(--green)}
.s-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.s-idx{
  font-size:11px;color:var(--txt3);background:var(--bg2);border-radius:5px;
  padding:1px 7px;min-width:26px;text-align:center;
}
.s-play{
  margin-left:auto;font-size:12px;color:var(--acc2);background:rgba(79,157,255,.14);
  border-radius:15px;padding:3px 11px;border:1px solid rgba(79,157,255,.3);
}
.s-rep{font-size:10.5px;color:var(--txt3)}
.s-fa{
  direction:rtl;text-align:right;font-size:17.5px;line-height:2.15;color:#fff;
  font-family:"Vazirmatn","Tahoma","Iranian Sans","Segoe UI",system-ui,sans-serif;
  margin:0 0 7px;
}
.s-fa .w{cursor:pointer;border-radius:3px;padding:0 1px;transition:.12s;display:inline}
.s-fa .w:active{background:rgba(79,157,255,.32)}
.s-fa .w.saved{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(240,180,41,.5);text-underline-offset:3px}
.s-tr{
  direction:ltr;text-align:left;font-size:12.5px;color:var(--acc2);
  line-height:1.7;margin:0 0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  opacity:.92;
}
.s-zh{font-size:13.5px;color:var(--txt2);line-height:1.8;margin:0;border-top:1px dashed var(--line);padding-top:7px}
.off{display:none}

/* ── 播放条 ── */
#playerbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(21,28,44,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.pb-progress{height:3px;background:var(--line)}
#pbFill{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .12s linear}
.pb-row{display:flex;align-items:center;gap:8px;padding:9px 12px}
.pbtn{
  width:38px;height:38px;border-radius:50%;background:var(--card);
  border:1px solid var(--line);font-size:14px;display:grid;place-items:center;flex:0 0 auto;
}
.pbtn.primary{background:var(--acc);border-color:var(--acc);color:#fff;width:44px;height:44px;font-size:16px}
.pbtn.toggle.on{background:rgba(240,180,41,.22);border-color:var(--gold);color:var(--gold)}
.speed{display:flex;gap:3px;background:var(--bg2);border-radius:16px;padding:2px;border:1px solid var(--line)}
.speed button{font-size:11px;padding:4px 7px;border-radius:13px;color:var(--txt3)}
.speed button.on{background:var(--acc);color:#fff}
.pb-meta{margin-left:auto;font-size:11px;color:var(--txt3);text-align:right;white-space:nowrap}

/* ── 词卡抽屉 ── */
.sheet{
  position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;animation:fade .15s;
}
.sheet-bd{
  width:100%;max-height:76vh;overflow-y:auto;
  background:var(--bg2);border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  animation:up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sc-word{
  direction:rtl;text-align:center;font-size:30px;color:#fff;margin:2px 0 4px;
  font-family:"Vazirmatn","Tahoma","Iranian Sans",system-ui,sans-serif;line-height:1.7;
}
.sc-tr{text-align:center;font-size:13px;color:var(--acc2);font-family:ui-monospace,Menlo,monospace;margin-bottom:10px}
.sc-pos{text-align:center;font-size:11.5px;color:var(--txt3);margin-bottom:10px}
.sc-zh{
  text-align:center;font-size:16px;color:var(--txt);background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:13px;line-height:1.7;
}
.sc-ctx{font-size:12px;color:var(--txt3);border-top:1px dashed var(--line);padding-top:10px;margin-bottom:13px}
.sc-ctx .fa{direction:rtl;text-align:right;font-size:14.5px;color:var(--txt2);line-height:2;margin-bottom:4px;
  font-family:"Vazirmatn","Tahoma",system-ui,sans-serif}
.sc-ctx mark{background:rgba(79,157,255,.3);color:#fff;border-radius:3px;padding:0 2px}
.sc-acts{display:flex;gap:9px}
.sc-acts button{
  flex:1;padding:12px;border-radius:11px;font-size:14px;font-weight:600;
  background:var(--card);border:1px solid var(--line);
}
.sc-acts .save{background:var(--acc);border-color:var(--acc);color:#fff}
.sc-acts .save.on{background:var(--gold);border-color:var(--gold);color:#20180a}
.sc-miss{text-align:center;color:var(--txt3);font-size:13px;padding:6px 0 14px;line-height:1.8}

/* ── 生词本 ── */
.v-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.v-tools button{
  font-size:12.5px;padding:7px 13px;border-radius:18px;background:var(--card);
  border:1px solid var(--line);color:var(--txt2);
}
.v-tools button.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.vcard{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;margin-bottom:9px;
}
.vc-top{display:flex;align-items:baseline;gap:9px}
.vc-w{direction:rtl;font-size:19px;color:#fff;font-family:"Vazirmatn","Tahoma",system-ui,sans-serif}
.vc-t{font-size:11.5px;color:var(--acc2);font-family:ui-monospace,Menlo,monospace}
.vc-p{font-size:10.5px;color:var(--txt3);margin-left:auto}
.vc-z{font-size:13.5px;color:var(--txt2);margin-top:5px;line-height:1.7}
.vc-src{font-size:11px;color:var(--txt3);margin-top:5px}
.vc-del{font-size:11.5px;color:var(--red);margin-top:7px;padding:0}
.empty{text-align:center;color:var(--txt3);font-size:13.5px;padding:44px 20px;line-height:2}

/* 闪卡 */
.flash{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 18px;text-align:center;margin-bottom:12px;min-height:190px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;cursor:pointer;
}
.flash .fw{direction:rtl;font-size:32px;color:#fff;line-height:1.8;
  font-family:"Vazirmatn","Tahoma",system-ui,sans-serif}
.flash .ft{font-size:13px;color:var(--acc2);font-family:ui-monospace,Menlo,monospace}
.flash .fz{font-size:16px;color:var(--green);line-height:1.8;margin-top:6px}
.flash .fh{font-size:12px;color:var(--txt3)}
.f-nav{display:flex;gap:9px;justify-content:center;margin-bottom:10px}
.f-nav button{padding:9px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line);font-size:13.5px}
.f-nav button.ok{background:var(--green);border-color:var(--green);color:#08281c;font-weight:600}
.f-nav button.no{background:rgba(255,107,107,.16);border-color:var(--red);color:var(--red)}

/* ── 档案 ── */
.st-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px}
.st{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 10px;text-align:center}
.st b{display:block;font-size:25px;color:var(--acc2);line-height:1.25}
.st.gold b{color:var(--gold)} .st.green b{color:var(--green)}
.st span{font-size:11.5px;color:var(--txt3)}
.st-sec{font-size:13px;color:var(--txt2);margin:16px 0 8px;font-weight:600}
.hist{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-bottom:7px;
  display:flex;justify-content:space-between;gap:9px;font-size:12.5px;color:var(--txt2)}
.hist b{color:var(--txt);font-weight:600}
.foot{text-align:center;font-size:11px;color:var(--txt3);margin-top:26px;line-height:1.9}

/* ── toast ── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--pb) + 18px);transform:translateX(-50%);
  background:var(--card2);border:1px solid var(--line);color:var(--txt);
  font-size:13px;padding:9px 17px;border-radius:20px;z-index:99;
  box-shadow:0 6px 22px rgba(0,0,0,.45);animation:fade .18s;max-width:86vw;text-align:center;
}

@media (min-width:700px){
  .s-fa{font-size:19px}
  .st-grid{grid-template-columns:repeat(4,1fr)}
}