/* modern.css — site-wide visual refresh, overrides legacy inline styles */
:root{
  --bg:#f4f6fa; --card:#ffffff; --ink:#111827; --muted:#6b7280;
  --brand:#0d9488; --brand-d:#0b7d73; --brand-l:#e7f6f4;
  --g1:#12b3a1; --g2:#0b7d73;
  --line:#e6eaef; --line-2:#eef2f6;
  --ok:#0f9d58; --okbg:#e9f7ef; --bad:#dc2626; --badbg:#fdecec;
  --warn:#d97706;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --radius:16px;
  --base:15.5px;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:var(--base); line-height:1.72; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{letter-spacing:-.015em;color:var(--ink)}
a{color:var(--brand-d)}
::selection{background:rgba(13,148,136,.16)}

/* ---------- sidebar ---------- */
.side{
  width:232px; padding:18px 12px 14px;
  background:#fff; border-right:1px solid var(--line-2);
  box-shadow:none;
}
.logo{
  font-weight:800; font-size:1.02em; letter-spacing:-.01em;
  color:var(--ink); padding:6px 12px 18px;
}
.navitem{
  padding:10px 12px; border-radius:10px; margin-bottom:2px;
  color:#404b5a; font-size:.94em; transition:background .16s,color .16s,transform .16s;
}
.navitem:hover{background:#f3f5f8; color:var(--ink)}
.navitem.active{
  background:var(--brand-l); color:var(--brand-d); font-weight:700; box-shadow:none;
}
.navitem.active::before{content:none!important}
.side-foot{color:#9aa4b2; font-size:.78em; border-top:1px solid var(--line-2); padding-top:12px}
#hamb{background:var(--brand); border-radius:10px; box-shadow:var(--shadow-sm)}

/* ---------- topbar ---------- */
.topbar{
  height:60px; left:232px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-2);
  color:var(--ink); box-shadow:none; padding:0 28px;
}
.topbar .tb-l{font-weight:700; font-size:.98em; letter-spacing:0; gap:8px; color:var(--ink)}
.topbar .tb-l .seal{background:var(--brand-l); color:var(--brand-d); border-radius:6px}
.topbar .tb-r{color:var(--muted); gap:14px; font-size:.82em; opacity:1}
.topbar .tb-r button{
  background:var(--brand)!important; color:#fff!important;
  border-radius:10px!important; box-shadow:0 2px 10px rgba(13,148,136,.22)!important;
  padding:7px 15px!important; font-weight:600!important;
}
@media(max-width:900px){.topbar{left:0}}

/* ---------- page shell ---------- */
.wrap{max-width:1180px; padding:28px 32px 56px}
@media(max-width:900px){body{padding-left:0}.wrap{padding:20px 16px 48px}}

/* ---------- hero ---------- */
header.top{
  background:linear-gradient(150deg,#ffffff 0%,#fbfefd 45%,#f2fbf9 100%)!important;
  color:var(--ink)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  padding:34px 34px 26px!important;
  box-shadow:var(--shadow)!important;
  position:relative; overflow:hidden;
}
header.top::before,header.top::after{display:none!important}
header.top h1{
  font-size:clamp(23px,2.6vw,31px); font-weight:800; line-height:1.3;
  color:#0f172a; letter-spacing:-.025em; margin-bottom:8px;
}
header.top p{color:#4b5563}
header.top p#greet{color:var(--brand-d); font-weight:600}
header.top .herocard{
  background:#ffffff!important; border:1px solid var(--line)!important;
  border-radius:14px!important; box-shadow:var(--shadow-sm)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
header.top .herocard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(16,24,40,.09)!important;
  border-color:#cfe9e4!important;
}
header.top .herocard:hover{border-color:#bfe6df!important}
.hero-chip,.hero-row{
  background:#fff!important; border:1px solid var(--line)!important; border-radius:12px!important;
  box-shadow:var(--shadow-sm)!important;
}
.stats-row{gap:10px; margin-top:16px}
.stat{
  background:#fff!important; border:1px solid var(--line)!important; border-radius:12px!important;
  box-shadow:none!important; padding:10px 14px!important; min-width:0;
}
.stat b{color:var(--brand-d); font-size:1.32em; letter-spacing:-.01em; display:block; line-height:1.3}

/* ---------- buttons ---------- */
.btn{
  border-radius:10px; font-weight:600; font-size:.92em; padding:9px 16px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  transition:background .16s,border-color .16s,transform .12s,box-shadow .16s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:#f8fafc; border-color:#d7dee6}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn.active{
  background:linear-gradient(135deg,var(--g1),var(--g2))!important;
  border:1px solid transparent!important; color:#fff!important;
  box-shadow:0 4px 14px rgba(13,148,136,.24)!important;
}
.btn-primary:hover,.btn.active:hover{filter:brightness(1.04); box-shadow:0 6px 18px rgba(13,148,136,.28)!important}
.btn-ghost{background:#fff!important; border:1px solid var(--line)!important; color:var(--ink)!important}
.btn-plain{
  background:#f3f5f8!important; border:1px solid transparent!important;
  color:#465266!important; box-shadow:none!important;
}
.btn-plain:hover{background:#eaeef4!important}
.btn:disabled{opacity:.5; box-shadow:none}

/* ---------- quickbar ---------- */
.quickbar{gap:12px}
.qa{
  background:#fff!important; border:1px solid var(--line)!important; border-radius:14px!important;
  box-shadow:var(--shadow-sm)!important; transition:transform .18s,box-shadow .18s,border-color .18s;
}
.qa:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.08)!important; border-color:#cfe9e4!important}
.qt{font-weight:700; color:var(--ink)}
.qd{color:var(--muted); font-size:.84em}

/* ---------- section titles ---------- */
.sec-title{font-weight:800; letter-spacing:-.015em; color:var(--ink); border-left:3px solid var(--brand); padding-left:12px}

/* ---------- category tiles ---------- */
.cat{
  border-radius:14px!important; background:#f8fafc!important; border:1px solid var(--line)!important;
  color:var(--ink)!important; box-shadow:none!important; font-weight:600;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.cat:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,24,40,.08)!important}
.cat.t1{background:#ecfdf5!important; border-color:#d1f2e5!important}
.cat.t2{background:#fff7ed!important; border-color:#ffe8cc!important}
.cat.t3{background:#eff6ff!important; border-color:#dbeafe!important}
.cat.t4{background:#f5f3ff!important; border-color:#e9e4ff!important}
.cat.t5{background:#fef2f2!important; border-color:#fee2e2!important}
.cat.t6{background:#f0fdfa!important; border-color:#cbf3ec!important}

/* ---------- generic cards ---------- */
.card,.paper,.qcard,.pt-card,.train-card,.home-main,.home-wrap{
  border-radius:var(--radius);
}
.card,.paper{
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.paper:hover,.pt-card:hover,.train-card:hover{
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.08); border-color:#d8e3e0;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.train-ic,.pt-imgw{border-radius:12px}
.train-go{
  border-radius:10px; background:var(--brand-l); color:var(--brand-d); font-weight:700; border:none;
}

/* ---------- question UI ---------- */
.opt{
  border-radius:12px; border:1px solid var(--line); background:#fff;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.opt:hover{border-color:#c9d6dd; background:#fbfdfd; box-shadow:var(--shadow-sm)}
.opt:hover{border-color:#bfe0da}
.opt.sel{border-color:var(--brand); background:var(--brand-l); box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.opt.right{border-color:#86d3b2; background:var(--okbg)}
.opt.wrong{border-color:#f0b3b3; background:var(--badbg)}
.timer{border-radius:10px; background:#fff; border:1px solid var(--line); font-variant-numeric:tabular-nums}
.score-big{font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.result-hero{border-radius:18px}
.cell{border-radius:8px; border:1px solid var(--line); background:#fff}
.prog{background:#eef2f6; border-radius:999px}

/* ---------- inputs / search ---------- */
.searchbar,.filterbar{background:#fff!important; border:1px solid var(--line)!important; border-radius:12px!important; box-shadow:var(--shadow-sm)!important}
input,select,textarea{
  border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:9px 12px; font-size:.94em; font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:none; border-color:var(--brand)!important;
  box-shadow:0 0 0 4px rgba(13,148,136,.12)!important;
}

/* ---------- badges / tags ---------- */
.badge{border-radius:999px; background:var(--brand-l); color:var(--brand-d); font-weight:600}
.tag{border-radius:999px; background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; font-size:.8em}
.tag.ok{background:var(--okbg); color:#0b7a4b; border-color:#cdeedd}
.muted{color:var(--muted)}
.crumb{color:var(--muted); font-size:.88em}
.toast{border-radius:12px; box-shadow:0 10px 30px rgba(16,24,40,.16); border:1px solid var(--line)}

/* ---------- misc ---------- */
#updateBar{
  background:linear-gradient(90deg,#f0fdfa,#eff6ff)!important;
  color:#0f766e!important; border-bottom:1px solid #d7efeb!important;
  box-shadow:none!important; padding:9px 14px!important; font-size:.86em!important;
}
#toTop{border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.pop,.mb-panel,.fix-panel{border-radius:16px; box-shadow:0 20px 48px rgba(16,24,40,.18); border:1px solid var(--line)}
.draftbar{border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.fhead,.freplyform{border-radius:14px}
.wfoot{color:var(--muted); border-top:1px solid var(--line-2)}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d5dce5; border-radius:8px; border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#bcc6d2}

/* ---------- download page + detail pages ---------- */
:root{
  --dl-bg:#f6f7f9;
}
.dlpage .hero,.kpage .hero{background:linear-gradient(150deg,#ffffff,#f4fcfb)!important; border:1px solid var(--line)!important; border-radius:20px!important; box-shadow:var(--shadow)!important; color:var(--ink)!important}
.dlpage .card{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); transition:transform .18s,box-shadow .18s,border-color .18s}
.dlpage .card:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(16,24,40,.09); border-color:#d8e3e0}
.dlpage .dl,.kpage .btn{background:linear-gradient(135deg,var(--g1),var(--g2)); border:none; color:#fff; border-radius:10px; font-weight:600; box-shadow:0 4px 14px rgba(13,148,136,.22)}

/* ---------- misc blocks on home ---------- */
.cat::after{opacity:.28}
#seo-nav{border:1px solid var(--line)!important;border-radius:16px!important;background:#fff!important;box-shadow:var(--shadow-sm)}
#seo-nav h3{color:var(--brand-d)!important;font-weight:800!important;letter-spacing:-.01em}
#seo-nav a{color:#7c8798!important;text-decoration:none!important}
#seo-nav a:hover{color:var(--brand-d)!important}
#seo-nav p{color:#9aa4b2}

#tbAdBar{
  background:#fff!important;color:#7c8798!important;
  border-top:1px solid var(--line)!important;box-shadow:0 -2px 12px rgba(16,24,40,.05)!important;
  font-size:12.5px!important;
}
#tbAdBar a{color:#5b6675!important}

/* ---------- mobile polish ---------- */
@media(max-width:900px){
  .topbar{padding:10px 16px 10px 62px!important;height:auto!important;min-height:56px;flex-wrap:wrap}
  .topbar .tb-l{font-size:.85em;line-height:1.4}
  .topbar .tb-r{gap:8px;font-size:.76em}
  header.top{padding:20px 18px 18px!important;border-radius:16px!important}
  header.top [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .stats-row{gap:8px}
  .stat{padding:8px 10px!important}
  .stat b{font-size:1.15em}
  #tbAdBar{display:none!important}
  #updateBar{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:70!important;border-top:1px solid #d7efeb!important;border-bottom:none!important;font-size:.78em!important;padding:8px 12px!important}
  .topbar{position:static!important}
  body{padding-top:0!important}
  .wrap{padding:18px 14px 44px}
}

/* ================= desktop: 顶部导航（替换左侧固定栏） ================= */
@media(min-width:1000px){
  body{display:flex!important;flex-direction:column;padding-left:0!important;padding-top:0!important}
  #updateBar{position:static!important;order:-3!important}
  .topbar{order:-2!important;position:sticky!important;top:0!important;left:0!important;right:0!important;height:56px;z-index:60!important}
  aside.side{order:-1!important;position:sticky!important;top:56px!important;left:0!important;right:0!important;bottom:auto!important;width:auto!important;height:auto!important;padding:8px 18px!important;background:#fff!important;border-right:none!important;border-bottom:1px solid var(--line)!important;box-shadow:0 6px 16px rgba(16,24,40,.04)!important;overflow:visible!important;display:block!important;z-index:59!important}
  .side{overflow:visible!important}
  .side .logo{display:none!important}
  #nav{display:flex!important;flex-wrap:wrap!important;gap:4px!important;align-items:center!important}
  .navitem{margin:0!important;padding:5px 4px!important;border-radius:999px!important;font-size:15px!important;white-space:nowrap!important;background:#f2f5f8!important;color:#374151!important;gap:2px!important;display:inline-flex!important;align-items:center!important;line-height:1.6}
  .navitem:hover{background:#e9f7f5!important;color:var(--brand-d)!important}
  .navitem.active{background:var(--brand)!important;color:#fff!important}
  .navitem.active::before{display:none!important}
  .navitem #wbbadge{margin-left:6px!important}
  #nav>div:not(.navitem){display:none!important}
  .side-foot{display:none!important}
  #hamb{display:none!important}
  #app.wrap, #mockexam-wrap{max-width:1240px!important}
}

#mockexam-wrap{width:100%!important}
#mockexam-frame{width:100%!important;border:1px solid var(--line);border-radius:14px;background:#fff}

@media(min-width:1000px){.card{max-width:none!important}}

#app{width:100%!important}


/* ====== 考试新闻（自动更新）====== */
.news-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 26px;box-shadow:0 10px 26px rgba(16,24,40,.05);margin-bottom:16px}
.news-title{font-size:1.7em;font-weight:900;letter-spacing:-.5px}
.news-sub{color:var(--muted);font-size:.88em;margin-top:6px;line-height:1.6}
.news-meta{font-size:.8em;color:var(--muted);text-align:right;white-space:nowrap}
.news-refresh{margin-top:8px;border:1px solid #d8e3e1;background:#fff;color:var(--brand-d);font-weight:700;font-size:.84em;padding:7px 14px;border-radius:999px;cursor:pointer}
.news-refresh:hover{background:#eefaf8}
.news-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.news-tab{padding:7px 16px;border-radius:999px;background:#f2f5f8;color:#374151;font-size:.86em;font-weight:700;cursor:pointer;border:1px solid transparent;user-select:none}
.news-tab:hover{background:#eefaf8;color:var(--brand-d)}
.news-tab.on{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(13,148,136,.22)}
.news-body{display:flex;flex-direction:column;gap:14px}
.news-sec{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(16,24,40,.05)}
.news-sec-h{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;background:linear-gradient(90deg,#f6fbfa,#fff);border-bottom:1px solid var(--line);font-size:.95em}
.news-sec-h b{font-weight:800}
.news-sec-h span{font-size:.76em;color:var(--muted)}
.news-item{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;padding:13px 20px;text-decoration:none;color:var(--ink);border-bottom:1px solid #f1f5f7;transition:background .15s}
.news-item:hover{background:#f7fcfb}
.news-item:last-child{border-bottom:none}
.news-date{font-size:.78em;color:var(--muted);font-variant-numeric:tabular-nums}
.news-item-t{font-size:.95em;line-height:1.55}
.news-cat{font-size:.72em;padding:3px 10px;border-radius:999px;font-weight:700;white-space:nowrap}
.news-cat.c1{background:#e6f7f4;color:#0b7d73}
.news-cat.c2{background:#e8f0ff;color:#2563eb}
.news-cat.c3{background:#fff4e5;color:#b45309}
.news-foot{font-size:.8em;color:var(--muted);padding:14px 4px 0;line-height:1.9}
.news-empty{padding:44px;text-align:center;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:16px}
@media(max-width:760px){
  .news-head{padding:18px}
  .news-title{font-size:1.35em}
  .news-meta{text-align:left}
  .news-item{grid-template-columns:1fr auto;gap:6px 10px;padding:12px 16px}
  .news-date{grid-column:1/-1;order:3}
}

@media (min-width:1401px) and (max-width:1500px){.navitem{font-size:15px!important;padding:5px 1px!important;white-space:nowrap!important}#nav{gap:0!important;flex-wrap:nowrap!important}}
@media (min-width:1000px) and (max-width:1400px){.navitem{font-size:14px!important;padding:5px 1px!important;white-space:nowrap!important}#nav{gap:0!important;flex-wrap:nowrap!important}}