/* ===== 缠论百科 全站样式 ===== */
:root{
  /* 明亮配色（2026-10-17 由深色+金色改为浅底蓝主色，仅改颜色，其余未动） */
  --bg:#f7f9fc; --bg-soft:#eef2f8; --card:#ffffff; --card-2:#f2f5fa;
  --line:#dde5ef; --line-soft:#e9eff7;
  --fg:#1b2637; --fg-soft:#4e5f76; --fg-dim:#7b8a9e;
  --brand:#1a6ad4; --brand-dim:rgba(26,106,212,.10);
  --up:#d92f2a; --down:#0f9d58;
  --link:#0f62c9;
  --on-brand:#ffffff;
  --head-bg:rgba(255,255,255,.92);
  --hover-line:#b9cbe4;
  --radius:10px;
  --maxw:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:20;background:var(--head-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:22px;height:58px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;color:var(--fg);letter-spacing:.5px}
.logo:hover{text-decoration:none}
.logo .mark{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--brand),#0d4fa8);display:grid;place-items:center;color:var(--on-brand);font-size:13px;font-weight:900}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{color:var(--fg-soft);padding:6px 11px;border-radius:7px;font-size:14px}
.nav a:hover{background:var(--card);color:var(--fg);text-decoration:none}
.nav a.on{color:var(--brand);background:var(--brand-dim)}
.head-search{display:flex;align-items:center;gap:6px}
.head-search input{background:var(--card);border:1px solid var(--line);border-radius:7px;color:var(--fg);padding:6px 11px;font-size:13px;width:150px;outline:none}
.head-search input:focus{border-color:var(--brand)}
.head-search button{background:var(--brand);border:0;border-radius:7px;color:var(--on-brand);font-weight:700;font-size:13px;padding:7px 12px;cursor:pointer}

/* ---- hero ---- */
.hero{padding:52px 0 34px;border-bottom:1px solid var(--line-soft)}
.hero h1{margin:0 0 12px;font-size:31px;line-height:1.35;letter-spacing:-.3px}
.hero h1 em{color:var(--brand);font-style:normal}
.hero p{margin:0;color:var(--fg-soft);max-width:760px;font-size:15px}
.hero .stats{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.hero .stat b{display:block;font-size:22px;color:var(--brand);line-height:1.2}
.hero .stat span{font-size:12.5px;color:var(--fg-dim)}

/* ---- section ---- */
section{padding:38px 0}
section+section{border-top:1px solid var(--line-soft)}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.sec-head h2{margin:0;font-size:20px;letter-spacing:-.2px}
.sec-head .more{font-size:13px;color:var(--fg-dim);margin-left:auto}
.sec-sub{color:var(--fg-dim);font-size:13.5px;margin:0 0 22px}

/* ---- grid / cards ---- */
.grid{display:grid;gap:14px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.g3,.grid.g2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--hover-line);transform:translateY(-2px)}
.card h3{margin:0 0 7px;font-size:15.5px}
.card h3 a{color:var(--fg)}
.card h3 a:hover{color:var(--brand);text-decoration:none}
.card p{margin:0;color:var(--fg-soft);font-size:13.5px;line-height:1.68}
.card .tagline{margin-bottom:9px}

.tag{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:20px;background:var(--brand-dim);color:var(--brand);border:1px solid rgba(26,106,212,.24)}
.tag.grey{background:var(--card-2);color:var(--fg-dim);border-color:var(--line)}

/* ---- lesson list ---- */
.lgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.lgroup-head{padding:15px 18px;border-bottom:1px solid var(--line-soft);background:var(--card-2)}
.lgroup-head h3{margin:0 0 4px;font-size:15.5px;color:var(--brand)}
.lgroup-head p{margin:0;font-size:13px;color:var(--fg-dim)}
.llist{display:grid;grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.llist{grid-template-columns:1fr}}
.llist a{display:flex;gap:11px;padding:10px 18px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);color:var(--fg-soft);font-size:13.5px;align-items:baseline}
.llist a:hover{background:var(--card-2);color:var(--fg);text-decoration:none}
.llist a .no{color:var(--fg-dim);font-variant-numeric:tabular-nums;font-size:12.5px;min-width:26px;font-weight:600}
.llist a .tt{flex:1}
.llist a .tt i{display:block;font-style:normal;color:var(--fg-dim);font-size:12px;margin-top:1px;line-height:1.5}

/* ---- article (term page) ---- */
.crumb{font-size:13px;color:var(--fg-dim);padding:18px 0 0}
.crumb a{color:var(--fg-dim)}
.article{padding:20px 0 40px}
.article h1{margin:6px 0 10px;font-size:28px;letter-spacing:-.3px}
.article .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.article .meta .en{color:var(--fg-dim);font-size:13px;font-style:italic}
.art-body h2{font-size:16.5px;margin:30px 0 9px;padding-left:11px;border-left:3px solid var(--brand);line-height:1.4}
.art-body p{margin:0 0 6px;color:var(--fg-soft)}
.art-body strong{color:var(--fg)}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:8px;padding:13px 16px;margin:20px 0;color:var(--fg-soft);font-size:13.5px}
.note b{color:var(--brand)}

/* misread table */
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{background:var(--card-2);color:var(--fg);font-weight:600;font-size:13px}
td{color:var(--fg-soft)}
td:first-child{color:var(--fg);width:44%}

/* related */
.rel{display:flex;gap:9px;flex-wrap:wrap;margin-top:9px}
.rel a{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:5px 13px;font-size:13px;color:var(--fg-soft)}
.rel a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}

/* 单课页 常见疑问 */
.qa-block{border-left:2px solid var(--line);padding-left:16px;margin:6px 0 4px}
.qa-q{font-size:14.5px;margin:16px 0 5px;color:var(--brand);font-weight:600;line-height:1.55}
.qa-q::before{content:"问 ";color:var(--fg-dim);font-size:12px}
.qa-block p{margin:0 0 4px;color:var(--fg-soft)}
.art-body h3.qa-q:first-child{margin-top:8px}

/* docs table */
.docs td:first-child{width:auto;color:var(--fg)}
.fmt{font-size:11.5px;padding:2px 7px;border-radius:4px;background:var(--card-2);color:var(--fg-dim);border:1px solid var(--line);white-space:nowrap}
.doc-meta{font-size:12.5px;color:var(--fg-dim)}

/* docs 卡片 */
.doc-card{display:flex;flex-direction:column}
.doc-card h3{line-height:1.5}
.doc-card p{flex:1}
.dl-mini{margin-top:12px;font-size:13px;color:var(--brand);display:inline-block}
.doc-card:hover .dl-mini{text-decoration:underline}

/* 筛选按钮 */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.fbtn{background:var(--card);border:1px solid var(--line);color:var(--fg-soft);
  padding:6px 15px;border-radius:20px;font-size:13.5px;cursor:pointer;font-family:inherit;
  transition:all .15s}
.fbtn:hover{border-color:var(--hover-line);color:var(--fg)}
.fbtn.on{background:var(--brand-dim);border-color:rgba(26,106,212,.45);color:var(--brand);font-weight:600}

/* 下载框 */
.dl-box{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(26,106,212,.07),rgba(26,106,212,.02));
  border:1px solid rgba(26,106,212,.28);border-radius:12px;padding:18px 22px;margin:22px 0 8px}
.dl-info{flex:1;min-width:200px}
.dl-host{font-size:15px;font-weight:600;color:var(--fg)}
.dl-note{font-size:12.5px;color:var(--fg-dim);margin-top:3px}
.dl-btn{background:var(--brand);color:var(--on-brand);font-weight:700;font-size:15px;
  padding:12px 26px;border-radius:9px;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.dl-btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 16px rgba(26,106,212,.28)}
@media(max-width:560px){.dl-box{flex-direction:column;align-items:stretch}.dl-btn{text-align:center}}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line);padding:28px 0 40px;margin-top:20px;color:var(--fg-dim);font-size:13px}
.site-foot .cols{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:18px}
.site-foot .col h4{margin:0 0 9px;font-size:13px;color:var(--fg-soft)}
.site-foot .col a{display:block;color:var(--fg-dim);font-size:12.5px;padding:2px 0}
.site-foot .col:first-child{columns:2;column-gap:34px}
.site-foot .col:first-child a{break-inside:avoid}
.disclaim{line-height:1.7;max-width:820px;border-top:1px solid var(--line-soft);padding-top:15px;font-size:12.5px}

/* ---- misc ---- */
.ad{border:1px dashed var(--line);border-radius:8px;padding:14px;text-align:center;color:var(--fg-dim);font-size:12.5px;margin:20px 0}
ul.clean{margin:8px 0;padding-left:20px;color:var(--fg-soft)}
ul.clean li{margin:5px 0}
.kbd{background:var(--card-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12.5px;color:var(--fg)}
.hi{color:var(--up)}
.lo{color:var(--down)}