/* ==========================================================================
   DSH 插件索引 · 全站公共样式
   index.html（索引台）、p/*.html（插件详情）、c/*.html（分类页）共用
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#f6f7fa; --panel:#ffffff; --panel2:#fbfcfe;
  --ink:#111726; --ink2:#59637a; --ink3:#8b94a8;
  --line:#e6e9f1; --line2:#eef1f7;
  --brand:#3d5af1; --brand-ink:#2a44d8; --brand-soft:#eef1ff; --brand-line:#cdd6ff;
  --warn:#b45309; --warn-soft:#fff5e6;
  --ok:#0b8a4b; --ok-soft:#e9f8ef;
  --ch-pos:#3d5af1; --ch-neg:#c2410c;
  --radius:12px; --radius-s:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html[data-theme=dark]{
  --bg:#0e1118; --panel:#161a23; --panel2:#1a1f29;
  --ink:#e8ecf5; --ink2:#a2acc0; --ink3:#6f798e;
  --line:#262c38; --line2:#20252f;
  --brand:#7b8fff; --brand-ink:#9aa9ff; --brand-soft:#1d2440; --brand-line:#2f3a63;
  --warn:#f2b45c; --warn-soft:#2b2416;
  --ok:#4ad08a; --ok-soft:#122a1f;
  --ch-pos:#7b8fff; --ch-neg:#f0874d;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 常驻滚动条槽：页面长短不同（首页有滚动条、资讯页没有）时，视口宽度不再跳变，
   顶栏和版心也就不会左右移动 */
html{scrollbar-gutter:stable}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select{font-family:inherit;font-size:inherit}
::selection{background:var(--brand-line);color:var(--ink)}
code{font-family:var(--mono);font-size:.92em;background:var(--panel2);
  border:1px solid var(--line2);border-radius:4px;padding:1px 4px}

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.hdr-in{
  max-width:1560px; margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:20px;
}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.logo{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,#4d6bff,#7a4dff); color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:700;
  box-shadow:0 4px 12px -4px rgba(77,107,255,.6);
}
.brand h1,.brand .bnm{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.brand p{margin:0;font-size:11.5px;color:var(--ink3);white-space:nowrap}
.brand a{display:flex;align-items:center;gap:11px}
/* 顶栏导航（插件生态切换位；目前只有 DSH 一个生态，后续加生态直接并列 a 标签） */
.hnav{display:flex;align-items:center;gap:2px;flex:none;margin-left:4px}
.hnav a{
  padding:7px 11px;border-radius:8px;font-size:13px;font-weight:550;
  color:var(--ink2);white-space:nowrap;transition:.15s;
}
.hnav a:hover{color:var(--ink);background:var(--panel2)}
.hnav a.on{color:var(--brand-ink);background:var(--brand-soft);font-weight:650}
.searchwrap{position:relative;flex:1;max-width:720px}
.searchwrap .ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink3);pointer-events:none;font-size:14px;
}
.searchwrap input{
  width:100%; height:38px; padding:0 74px 0 34px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel2);
  color:var(--ink); outline:none; transition:.15s;
}
.searchwrap input:focus{border-color:var(--brand);background:var(--panel);box-shadow:0 0 0 3px var(--brand-soft)}
.searchwrap input::placeholder{color:var(--ink3)}
.kbd{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:10.5px;color:var(--ink3);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:var(--panel);
}
.hdr-act{display:flex;align-items:center;gap:8px;flex:none}

/* ---------------------------------------------------------------- buttons */
.ghost{
  height:34px;padding:0 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink2);display:inline-flex;align-items:center;gap:6px;
  transition:.15s;white-space:nowrap;
}
.ghost:hover{border-color:var(--brand-line);color:var(--brand-ink);background:var(--brand-soft)}
.ghost.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink);font-weight:600}
.btn{
  height:38px;padding:0 18px;border-radius:9px;border:1px solid var(--brand);background:var(--brand);
  color:#fff;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
html[data-theme=dark] .btn{color:#0e1118}
.btn.ghost{background:var(--panel);border-color:var(--line);color:var(--ink2)}
.btn.ghost:hover{border-color:var(--brand-line);color:var(--brand-ink);background:var(--brand-soft)}

/* ---------------------------------------------------------------- atoms */
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);display:inline-block;flex:none}
.li{display:inline-flex;align-items:center;gap:4px}
.tg{
  font-size:10.5px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line2);
  border-radius:5px;padding:0 5px;line-height:17px;white-space:nowrap;
}
.tg.cat{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink)}
a.tg:hover{border-color:var(--brand-line);color:var(--brand-ink)}
.badge-arch{color:var(--warn);background:var(--warn-soft);border-radius:5px;padding:0 5px;font-size:10.5px}
.badge-off{color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:5px;padding:0 4px;font-size:10px;font-weight:650;line-height:16px;flex:none}

/* ==========================================================================
   详情页 / 分类页
   ========================================================================== */
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

.crumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:16px 0 0;font-size:12px;color:var(--ink3);
}
.crumb a{color:var(--ink2)}
.crumb a:hover{color:var(--brand-ink)}
.crumb .sep{color:var(--line)}

.dhead{padding:14px 0 0}
.dhead-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.dhead-top .btn{flex:none;margin-top:2px}
.dhead h1{
  margin:0;font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-.025em;
  word-break:break-word;
}
.dhead h1 .own{color:var(--ink3);font-weight:400}
.dhead h1 .repo{color:var(--ink)}
.dmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink3);margin-bottom:14px}
.lede{
  font-size:15px;line-height:1.7;color:var(--ink2);margin:0 0 18px;
  max-width:74ch;word-break:break-word;
}
.lede.empty{color:var(--ink3);font-style:italic}

.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 20px}
.stats4 .s{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;box-shadow:var(--shadow);
}
.stats4 .s b{display:block;font-size:20px;font-weight:670;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats4 .s span{font-size:11.5px;color:var(--ink3)}

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;margin:0 0 16px;
}
.panel h2{
  margin:0 0 12px;font-size:13px;font-weight:680;letter-spacing:.02em;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.panel h2 em{font-style:normal;font-size:11px;color:var(--ink3);font-weight:400}

/* ------------------------------------------------- 并排：Star 走势 + 仓库信息 */
.duo{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:16px;align-items:start;margin:0 0 16px;
}
.duo>.panel{margin:0}

.swwrap{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.swtabs{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:2px;flex:none}
.swtabs button{
  border:0;background:transparent;color:var(--ink3);font-size:11.5px;
  padding:3px 10px;border-radius:6px;line-height:1.55;transition:.12s;
}
.swtabs button:hover{color:var(--ink)}
.swtabs button.on{background:var(--panel);color:var(--brand-ink);font-weight:650;box-shadow:0 1px 2px rgba(16,24,40,.1)}
html[data-theme=dark] .swtabs button.on{box-shadow:0 1px 2px rgba(0,0,0,.45)}
.swsum{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.swsum b{color:var(--ink2);font-weight:600}

.chart{width:100%;min-height:176px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart rect{transition:opacity .1s}
.chart rect:hover{opacity:.72}
.chartnote{margin:9px 0 0;font-size:11px;color:var(--ink3);line-height:1.7}
.chartempty{
  min-height:176px;padding:16px 18px;border:1px dashed var(--line);border-radius:10px;
  background:var(--panel2);color:var(--ink3);font-size:12.5px;line-height:1.85;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
}
.chartempty p{margin:0}
.chartempty b{color:var(--ink2);font-weight:600}
.chartempty .ce-note{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.chartempty .ce-sep{margin:0 7px;color:var(--line)}

.prose{font-size:13.5px;line-height:1.85;color:var(--ink2);margin:0}
.prose p{margin:0 0 10px}
.prose p:last-child{margin:0}
.prose b{color:var(--ink);font-weight:600}

.kvtable{width:100%;border-collapse:collapse;font-size:12.6px}
.kvtable tr{border-bottom:1px dashed var(--line2)}
.kvtable tr:last-child{border:0}
.kvtable th{
  text-align:left;font-weight:400;color:var(--ink3);padding:6px 12px 6px 0;
  width:110px;white-space:nowrap;vertical-align:top;
}
.kvtable td{padding:6px 0;color:var(--ink);word-break:break-all;text-align:right}
.kvtable td a{color:var(--brand-ink)}
.kvtable td a:hover{text-decoration:underline}

/* 相关插件列表 */
.rellist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}
a.rel{
  display:flex;align-items:baseline;gap:10px;padding:7px 8px;border-radius:7px;
  transition:.12s;min-width:0;
}
a.rel:hover{background:var(--panel2)}
a.rel .rn{
  font-size:12.8px;font-weight:550;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:none;max-width:46%;
}
a.rel .rd{
  font-size:11.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1;min-width:0;
}
a.rel .rs{
  font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none;margin-left:auto;
}

/* 分类页的条目表 */
.catlist{display:flex;flex-direction:column;gap:0}
.catlist a{
  display:flex;align-items:baseline;gap:12px;padding:10px 8px;border-radius:8px;
  border-bottom:1px solid var(--line2);transition:.12s;
}
.catlist a:last-child{border:0}
.catlist a:hover{background:var(--panel2)}
.catlist .nm{font-size:13.2px;font-weight:550;flex:none;width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catlist .ds{font-size:12px;color:var(--ink3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catlist .st{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;flex:none}

.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.catgrid a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 13px;
  font-size:12.8px;transition:.12s;box-shadow:var(--shadow);
}
.catgrid a:hover{border-color:var(--brand-line);color:var(--brand-ink)}
.catgrid .n{font-variant-numeric:tabular-nums;color:var(--ink3);font-size:11.5px}

/* ---------------------------------------------------------------- footer */
.foot{
  max-width:1120px;margin:0 auto;padding:26px 22px 50px;
  color:var(--ink3);font-size:11.5px;line-height:1.85;border-top:1px solid var(--line);
}
.foot b{color:var(--ink2);font-weight:600}
.foot a{color:var(--ink2)}
.foot a:hover{color:var(--brand-ink)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px){
  .hdr-in{padding:10px 14px;gap:10px}
  .brand p{display:none}
  .hnav{display:none}
  .wrap{padding:0 14px}
  .stats4{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .rellist{grid-template-columns:1fr}
  .dhead h1{font-size:21px}
  .catlist .nm{width:auto;flex:1}
  .catlist .ds{display:none}
  .foot{padding:20px 14px 40px}
}
@media (max-width:600px){
  .hdr-act .txt{display:none}
  .hdr-act .allbtn{display:none}
  .kvtable th{width:86px}
  .dhead h1{font-size:19px}
  .stats4 .s b{font-size:17px}
}