/* /study/assets/site.css —— 全站公共外壳与排版
   目标：给 daily/、qa/ 下每个页面套统一的顶栏、面包屑、卡片排版与翻页条，
   结构参考论坛式布局，配色沿用本站原有蓝色系（#2563eb）。
   本文件在各页自带 <style> 之后加载，同权重时覆盖，故只做"统一化"，
   不改动各页承载语义的强调色（要点蓝 / 为什么琥珀 / 提示靛蓝）。 */

:root{
  --s-brand:#2563eb; --s-brand-d:#1d4ed8; --s-brand-soft:#eff6ff;
  --s-bg:#f1f5f9; --s-card:#ffffff; --s-ink:#0f172a; --s-ink2:#334155;
  --s-muted:#64748b; --s-line:#e2e8f0; --s-line2:#f1f5f9;
  --s-amber:#f59e0b; --s-amber-soft:#fffbeb; --s-amber-ink:#92400e;
  --s-indigo:#6366f1; --s-indigo-soft:#eef2ff; --s-indigo-ink:#3730a3;
  --s-shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 22px -14px rgba(15,23,42,.22);
  --s-shadow2:0 2px 6px rgba(15,23,42,.07), 0 16px 34px -18px rgba(15,23,42,.3);
  --s-radius:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --s-bg:#0d1117; --s-card:#161b22; --s-ink:#e6edf3; --s-ink2:#c9d1d9;
    --s-muted:#8b949e; --s-line:#262e38; --s-line2:#1c232b;
    --s-brand:#58a6ff; --s-brand-d:#79b8ff; --s-brand-soft:#12263f;
    --s-amber-soft:#2a2113; --s-amber-ink:#e3b341;
    --s-indigo-soft:#1b1f3a; --s-indigo-ink:#a5b4fc;
    --s-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px -14px rgba(0,0,0,.7);
    --s-shadow2:0 2px 8px rgba(0,0,0,.5), 0 18px 38px -20px rgba(0,0,0,.8);
  }
}

/* ---------- 基底 ---------- */
body{
  background:var(--s-bg) !important; color:var(--s-ink) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
              "Hiragino Sans GB","Microsoft YaHei",sans-serif !important;
  line-height:1.78; margin:0; -webkit-font-smoothing:antialiased;
}

/* ---------- 顶栏 ---------- */
.s-top{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,var(--s-brand),var(--s-brand-d));
  box-shadow:0 2px 10px rgba(37,99,235,.22);
}
.s-top .in{
  max-width:900px; margin:0 auto; padding:0 16px; height:48px;
  display:flex; align-items:center; gap:6px;
}
.s-logo{color:#fff; font-weight:700; font-size:.98rem; letter-spacing:.5px; margin-right:8px; white-space:nowrap}
.s-top a{color:rgba(255,255,255,.86); font-size:.88rem; text-decoration:none;
  padding:6px 12px; border-radius:8px; transition:.15s; white-space:nowrap}
.s-top a:hover{background:rgba(255,255,255,.16); color:#fff}
.s-top a.on{background:rgba(255,255,255,.2); color:#fff; font-weight:600}
.s-grow{flex:1}

/* ---------- 面包屑 ---------- */
.s-crumb{
  max-width:900px; margin:0 auto; padding:12px 16px 0;
  color:var(--s-muted); font-size:.82rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.s-crumb a{color:var(--s-muted); text-decoration:none}
.s-crumb a:hover{color:var(--s-brand)}
.s-crumb .sep{opacity:.5}
.s-crumb .cur{color:var(--s-ink2); font-weight:600}
.s-badge{display:inline-block; border-radius:6px; padding:2px 9px; font-size:.74rem;
  font-weight:600; color:#fff; letter-spacing:.3px}

/* ---------- 正文容器 ---------- */
.wrap{max-width:900px !important; margin:0 auto !important; padding:16px 16px 56px !important}

/* 各页原有的居中大标题：收敛成左对齐的文章头 */
.wrap > header{
  text-align:left !important; padding:10px 0 16px !important;
  border-bottom:1px solid var(--s-line); margin-bottom:18px;
}
.wrap > header h1{font-size:1.42rem !important; color:var(--s-ink) !important;
  font-weight:700; letter-spacing:.4px; line-height:1.45}
.wrap > header .sub{color:var(--s-muted) !important; font-size:.87rem !important; margin-top:7px !important}
.wrap > header .sub b{color:var(--s-brand)}

/* ---------- 卡片 ---------- */
.card{
  background:var(--s-card) !important; border:1px solid var(--s-line) !important;
  border-radius:var(--s-radius) !important; padding:20px 22px !important;
  margin:14px 0 !important; box-shadow:var(--s-shadow) !important;
  border-top:1px solid var(--s-line) !important;
  position:relative; overflow:hidden; transition:.18s;
}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--s-brand)}
.card:hover{box-shadow:var(--s-shadow2) !important}
.card h2{font-size:1.08rem !important; color:var(--s-ink) !important; font-weight:700;
  margin:0 0 12px !important; padding-bottom:9px; border-bottom:1px dashed var(--s-line)}

/* 要点块 */
.kv{background:var(--s-brand-soft) !important; border-radius:9px !important;
  padding:12px 15px !important; margin:9px 0 !important; border:1px solid transparent}
.kv b{color:var(--s-brand) !important}

/* 引用 / 为什么 */
.quote{background:var(--s-amber-soft) !important; border:1px solid transparent !important;
  border-left:3px solid var(--s-amber) !important; border-radius:0 9px 9px 0 !important;
  padding:11px 15px !important; margin:11px 0 3px !important}
.qhead{color:var(--s-amber-ink) !important; font-size:.84rem !important; font-weight:700 !important}
.qtext{color:var(--s-amber-ink) !important; font-size:.87rem !important; line-height:1.85 !important}

.src{font-size:.79rem !important; color:var(--s-muted) !important; margin-top:10px !important;
  padding-top:8px; border-top:1px dotted var(--s-line)}

/* 图片 */
.imgbox{margin:14px 0 !important}
.imgbox img{max-width:100% !important; border-radius:10px !important;
  border:1px solid var(--s-line) !important; box-shadow:var(--s-shadow)}
.imgbox .cap, figcaption{font-size:.8rem !important; color:var(--s-muted) !important; margin-top:7px !important}

/* ---------- 通用排版（问答页用得多） ---------- */
.wrap h2, .wrap h3{color:var(--s-ink); line-height:1.5}
.wrap p{color:var(--s-ink2)}
.wrap table{border-collapse:collapse; width:100%; font-size:.9rem; margin:14px 0}
.wrap th, .wrap td{border:1px solid var(--s-line); padding:8px 11px}
.wrap th{background:var(--s-brand-soft); color:var(--s-ink); font-weight:600}
.wrap code{background:var(--s-line2); color:var(--s-ink); padding:1px 6px; border-radius:5px; font-size:.92em}
.wrap svg{max-width:100%; height:auto}

/* ---------- 翻页条 ---------- */
.s-pager{
  max-width:900px; margin:26px auto 0; padding:0 16px;
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch;
}
.s-pager a, .s-pager span.dis{
  background:var(--s-card); border:1px solid var(--s-line); border-radius:11px;
  padding:12px 15px; font-size:.86rem; text-decoration:none; color:var(--s-ink2);
  box-shadow:var(--s-shadow); transition:.16s; display:flex; flex-direction:column; gap:3px;
  min-width:0; overflow:hidden;
}
.s-pager a:hover{border-color:var(--s-brand); color:var(--s-brand); transform:translateY(-2px);
  box-shadow:var(--s-shadow2)}
.s-pager .lb{font-size:.72rem; color:var(--s-muted)}
.s-pager .tx{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.s-pager .nx{text-align:right}
.s-pager span.dis{color:var(--s-muted); opacity:.6; box-shadow:none}
.s-pager .home{display:flex; align-items:center; justify-content:center; padding:12px 18px;
  font-weight:600; white-space:nowrap}

footer{text-align:center !important; color:var(--s-muted) !important; font-size:.8rem !important;
  margin-top:30px !important; padding-top:16px; border-top:1px solid var(--s-line)}

@media(max-width:620px){
  .s-top .in{height:44px; overflow-x:auto}
  .wrap > header h1{font-size:1.2rem !important}
  .card{padding:16px 15px !important}
  .s-pager{grid-template-columns:1fr; }
  .s-pager .nx{text-align:left}
  .s-pager .home{order:3}
}