/* ===========================================================================
   tune.衰减器.中国 —— 独立骨架样式（tune- 前缀，明亮精密仪器科技风）
   配色：靛蓝 #4338CA / 信号青 #0D9488 / 阈值琥珀 #B45309 / 浅底 #F4F6FB
   =========================================================================== */
:root{
  --tune-bg:#F4F6FB;
  --tune-surface:#FFFFFF;
  --tune-ink:#0F172A;
  --tune-muted:#5B6478;
  --tune-primary:#4338CA;
  --tune-primary-soft:#EEF0FF;
  --tune-accent:#0D9488;
  --tune-accent-soft:#E6F7F4;
  --tune-amber:#B45309;
  --tune-line:#D8DEEA;
  --tune-line-strong:#C2CBD9;
  --tune-shadow:0 6px 22px rgba(15,23,42,.08);
  --tune-radius:14px;
  --tune-nav-h:64px;
  --h2-inset:14px;          /* 面包屑左内距 = H2 的 padding-left，保证两左缘对齐 */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--tune-bg); color:var(--tune-ink);
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--tune-primary); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
h1,h2,h3,h4{line-height:1.35; color:var(--tune-ink);}
h2{font-size:1.55rem; margin:2rem 0 1rem; padding-left:14px; border-left:4px solid var(--tune-accent);}
h3{font-size:1.2rem; margin:1.6rem 0 .7rem;}
p{margin:.7rem 0;}

/* ---------- 顶栏 ---------- */
.tune-header{position:sticky; top:0; z-index:50; height:var(--tune-nav-h);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--tune-line);}
.tune-nav{display:flex; align-items:center; gap:1.4rem; height:100%;
  max-width:1240px; margin:0 auto; padding:0 20px;}
.tune-brand{display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--tune-primary); font-size:1.15rem; white-space:nowrap;}
.tune-brand .tune-logo-dot{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,var(--tune-primary),var(--tune-accent));}
.tune-nav-links{display:flex; gap:1.1rem; align-items:center; margin-left:auto; flex-wrap:wrap;}
.tune-nav-links a{color:var(--tune-ink); font-weight:600; font-size:.95rem;}
.tune-nav-links a:hover{color:var(--tune-primary);}
.tune-nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--tune-line); border-radius:8px; padding:.4rem .6rem; font-size:1.2rem; cursor:pointer;}

/* ---------- 布局栅格 ---------- */
.tune-container{max-width:1240px; margin:0 auto; padding:24px 20px 60px;}
.tune-layout{display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:36px; align-items:start;}
.tune-content-main{min-width:0; --h2-inset:14px; background:var(--tune-surface); border:1px solid var(--tune-line);
  border-radius:var(--tune-radius); padding:24px 28px; box-shadow:var(--tune-shadow);}
.tune-content-main{max-width:820px;}      /* 正文列限制，居中观感 */
/* 列表页：分类侧栏在前(240)，内容占满（[M27] 列序由 .tune-layout-grid 显式声明） */
.tune-list-layout .tune-layout-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:32px; align-items:start;}
.tune-cat-content{min-width:0; --h2-inset:14px;}

/* ---------- 面包屑（左缘与 H2 对齐） ---------- */
.tune-breadcrumb{font-size:.86rem; color:var(--tune-muted); padding:0 var(--h2-inset) 4px; margin-bottom:14px;}
.tune-breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0;}
.tune-breadcrumb li::after{content:"›"; margin-left:.4rem; color:var(--tune-line-strong);}
.tune-breadcrumb li:last-child::after{content:"";}
.tune-breadcrumb a{color:var(--tune-muted);}

/* ---------- 分类侧栏（原生 details 折叠面板） ---------- */
.tune-cat-side{position:sticky; top:calc(var(--tune-nav-h) + 16px);}
.tune-cat-panel{border:1px solid var(--tune-line); border-radius:var(--tune-radius); background:var(--tune-surface); box-shadow:var(--tune-shadow);}
.tune-cat-panel>summary{cursor:pointer; font-weight:700; padding:14px 16px; list-style:none; display:flex; align-items:center; justify-content:space-between;}
.tune-cat-panel>summary::after{content:"▾"; color:var(--tune-muted); transition:transform .2s;}
.tune-cat-panel[open]>summary::after{transform:rotate(180deg);}
.tune-category-list{list-style:none; margin:0; padding:0 8px 10px;}
.tune-category-list li a{display:flex; justify-content:space-between; gap:.5rem; padding:.55rem .8rem; border-radius:9px; color:var(--tune-ink); font-weight:600;}
.tune-category-list li a:hover{background:var(--tune-primary-soft); text-decoration:none;}
.tune-category-list .tune-cat-count{color:var(--tune-muted); font-weight:500;}

/* ---------- 详情页目录（原生 details，sticky） ---------- */
.tune-toc-aside{position:sticky; top:calc(var(--tune-nav-h) + 16px); max-height:calc(100vh - 100px); overflow:auto;}
.tune-toc-panel{border:1px solid var(--tune-line); border-radius:var(--tune-radius); background:var(--tune-surface); box-shadow:var(--tune-shadow);}
.tune-toc-panel>summary{cursor:pointer; font-weight:700; padding:14px 16px; list-style:none; display:flex; align-items:center; justify-content:space-between;}
.tune-toc-panel>summary::after{content:"▾"; color:var(--tune-muted); transition:transform .2s;}
.tune-toc-panel[open]>summary::after{transform:rotate(180deg);}
.tune-toc-nav{list-style:none; margin:0; padding:0 12px 12px; counter-reset:toc;}
.tune-toc-nav li{padding:.3rem 0;}
.tune-toc-nav a{color:var(--tune-muted); font-size:.9rem;}
.tune-toc-nav a:hover{color:var(--tune-primary);}
.tune-toc-nav .toc-lvl3{padding-left:1rem;}

/* ---------- 卡片 ---------- */
.tune-card{background:var(--tune-surface); border:1px solid var(--tune-line); border-radius:var(--tune-radius);
  padding:18px 20px; box-shadow:var(--tune-shadow); border-top:3px solid var(--tune-primary); transition:transform .15s, box-shadow .15s;}
.tune-card:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(15,23,42,.12);}
.tune-card h3{margin-top:.2rem;}
.tune-card .tune-card-meta{display:inline-block; font-size:.74rem; color:#fff; background:var(--tune-accent); border-radius:999px; padding:.1rem .6rem; margin-bottom:.5rem;}
.tune-card .tune-card-sum{color:var(--tune-muted); font-size:.92rem; margin:.4rem 0 0;}
.tune-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}

/* ---------- 表格（覆盖全部正文 table，含 Markdown 裸 table） ---------- */
.tune-content-main table, .tune-page-wrap table, table.tune-spec{
  width:100%; border-collapse:collapse; margin:1rem 0; font-size:.92rem;
  border:1px solid var(--tune-line-strong);
}
.tune-content-main table th, .tune-page-wrap table th, table.tune-spec th{
  background:var(--tune-primary); color:#fff; text-align:left; padding:.6rem .8rem; font-weight:700;
}
.tune-content-main table td, .tune-page-wrap table td, table.tune-spec td{
  border:1px solid var(--tune-line); padding:.55rem .8rem;
}
.tune-content-main table tr:nth-child(even) td, .tune-page-wrap table tr:nth-child(even) td, table.tune-spec tr:nth-child(even) td{
  background:var(--tune-primary-soft);
}

/* ---------- 标签 / 引用 / 结论 ---------- */
.tune-tag{display:inline-block; font-size:.8rem; color:var(--tune-primary); background:var(--tune-primary-soft); border-radius:999px; padding:.15rem .65rem; margin:.15rem .25rem 0 0;}
.tune-keywords{margin:1rem 0;}
.tune-content-main blockquote{border-left:4px solid var(--tune-accent); background:var(--tune-accent-soft); margin:1rem 0; padding:.6rem 1rem; color:var(--tune-ink); border-radius:0 8px 8px 0;}
.tune-conclusion{border:1px solid var(--tune-line); border-left:4px solid var(--tune-amber); background:#FFFDF5; border-radius:0 10px 10px 0; padding:.8rem 1.1rem; margin:1.2rem 0;}
.tune-conclusion h4{margin:.2rem 0 .5rem; color:var(--tune-amber);}
.tune-case{border:1px dashed var(--tune-accent); background:var(--tune-accent-soft); border-radius:10px; padding:.8rem 1.1rem; margin:1.2rem 0;}
.tune-case strong{color:var(--tune-accent);}
time.tune-update{display:inline-block; font-size:.82rem; color:var(--tune-muted); background:var(--tune-bg); border:1px solid var(--tune-line); border-radius:999px; padding:.15rem .7rem; margin:.6rem 0 1rem;}

/* ---------- FAQ（裸 details） ---------- */
.tune-faq details{border:1px solid var(--tune-line); border-radius:10px; padding:.2rem .9rem; margin:.6rem 0; background:var(--tune-surface);}
.tune-faq details summary{cursor:pointer; font-weight:700; padding:.55rem 0; list-style:none;}
.tune-faq details summary::before{content:"Q："; color:var(--tune-primary);}
.tune-faq details p{margin:.3rem 0 .7rem; padding-left:1.4rem; color:var(--tune-muted);}

/* ---------- 相关阅读 ---------- */
.tune-related{border-top:1px solid var(--tune-line); margin-top:1.6rem; padding-top:1rem;}
.tune-related ul{margin:.4rem 0; padding-left:1.2rem;}
.tune-related li{margin:.4rem 0;}

/* ---------- 页面包裹（关于/联系等） ---------- */
.tune-page-wrap{--h2-inset:14px; max-width:900px; margin:0 auto; background:var(--tune-surface);
  border:1px solid var(--tune-line); border-radius:var(--tune-radius); padding:36px 48px; box-shadow:var(--tune-shadow);}
.tune-page-wrap h2{border-left-color:var(--tune-primary);}

/* ---------- 首页 ---------- */
.tune-hero{position:relative; overflow:hidden; background:linear-gradient(135deg,#312E81,#0D9488); color:#fff; border-radius:var(--tune-radius); padding:54px 40px; margin-bottom:30px;}
.tune-hero h1{color:#fff; font-size:2.3rem; margin:.2rem 0 .6rem;}
.tune-hero p{color:rgba(255,255,255,.9); font-size:1.05rem; max-width:680px;}
.tune-hero .tune-hero-curve{position:absolute; right:-40px; bottom:-30px; width:340px; height:160px; opacity:.35;}
.tune-section-title{font-size:1.4rem; margin:2rem 0 1rem; display:flex; align-items:center; gap:.6rem;}
.tune-section-title::before{content:""; width:8px; height:26px; border-radius:4px; background:linear-gradient(var(--tune-primary),var(--tune-accent));}
.tune-stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:1.4rem 0;}
.tune-stat{background:var(--tune-surface); border:1px solid var(--tune-line); border-radius:12px; padding:16px; text-align:center; box-shadow:var(--tune-shadow);}
.tune-stat b{display:block; font-size:1.7rem; color:var(--tune-primary);}
.tune-stat span{color:var(--tune-muted); font-size:.86rem;}

/* ---------- 归档 / 404 ---------- */
.tune-archive-list{columns:2; column-gap:30px;}
.tune-archive-list li{break-inside:avoid; margin-bottom:.5rem;}
@media(max-width:680px){.tune-archive-list{columns:1;}}
.tune-404{text-align:center; padding:60px 20px;}
.tune-404 h1{font-size:3rem; color:var(--tune-primary);}

/* ---------- 页脚 ---------- */
.tune-footer{background:#0F172A; color:#C7D0E0; margin-top:40px; padding:34px 20px;}
.tune-footer .tune-footer-in{max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between;}
.tune-footer a{color:#9FB3D1;}
.tune-footer .tune-footer-copy{width:100%; border-top:1px solid #1E293B; margin-top:18px; padding-top:14px; font-size:.82rem; color:#7C8AA5;}

/* ---------- 页脚居中 / TOC 去浏览器默认序号 ---------- */
.tune-footer{text-align:center;}
.tune-footer .tune-footer-in{justify-content:center; text-align:center;}
.tune-toc-nav ol{list-style:none; margin:0; padding:0;}

/* ---------- 悬浮胶囊 ---------- */
.tune-float{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:10px;}
.tune-float button{width:54px; height:54px; border:none; border-radius:16px; cursor:pointer; color:#fff;
  font-size:.7rem; font-weight:700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:linear-gradient(135deg,var(--tune-primary),var(--tune-accent)); box-shadow:0 8px 20px rgba(67,56,202,.35);}
.tune-float button .tune-float-ic{font-size:1.3rem; line-height:1;}
.tune-float button:hover{filter:brightness(1.08);}
@media(max-width:1024px){.tune-float button{width:48px;height:48px;}}

/* 名片浮层 */
.tune-card-mask{position:fixed; inset:0; background:rgba(15,23,42,.6); display:none; align-items:center; justify-content:center; z-index:80;}
.tune-card-mask[open]{display:flex;}
.tune-card-mask img{max-width:90vw; max-height:90vh; box-shadow:0 20px 60px rgba(0,0,0,.4); border-radius:8px;}
.tune-card-mask .tune-card-close{position:absolute; top:20px; right:24px; color:#fff; font-size:2rem; cursor:pointer; background:none; border:none;}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .tune-nav-links{display:none; position:absolute; top:var(--tune-nav-h); left:0; right:0; flex-direction:column; background:#fff; padding:14px 20px; border-bottom:1px solid var(--tune-line);}
  .tune-nav-links.tune-show{display:flex;}
  .tune-nav-toggle{display:block;}
  .tune-layout{grid-template-columns:1fr;}
  .tune-list-layout{grid-template-columns:1fr;}
  .tune-list-layout .tune-layout-grid{grid-template-columns:1fr;}
  .tune-toc-aside{position:static; max-height:none;}
}
@media(max-width:680px){
  .tune-content-main{padding:18px 16px;}
  .tune-page-wrap{padding:24px 18px; --h2-inset:18px;}
  .tune-hero{padding:36px 22px;}
  .tune-hero h1{font-size:1.7rem;}
}
