:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#6b7280;
  --border:#ececec;
  --primary:#EC407A;
  --primary-soft:#FDF1F6;
  --primary-softer:#FCE4EE;
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --code-bg:#f6f7f9;
  --sidebar-w:264px;
  --topnav-h:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);background:var(--bg);line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== 顶部导航 ===== */
.doc-top{
  position:sticky;top:0;z-index:50;height:var(--topnav-h);
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:600;letter-spacing:-.2px}
.brand svg{width:26px;height:26px;flex:none;transition:transform .25s ease}
.brand:hover svg{transform:scale(1.12) rotate(-4deg)}
.brand .sub{color:var(--primary)}
.top-right{display:flex;align-items:center;gap:6px}
.top-link{padding:6px 12px;border-radius:7px;font-size:13.5px;color:var(--muted);transition:.2s;white-space:nowrap}
.top-link:hover{background:var(--primary-soft);color:var(--primary)}
.top-link.gh{background:var(--text);color:#fff;font-weight:500}
.top-link.gh:hover{background:#000}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:1px solid var(--border);border-radius:8px;cursor:pointer;padding:9px 10px;margin-right:4px}
.menu-btn span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.3s;display:block}
.menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.active span:nth-child(2){opacity:0}
.menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== 布局 ===== */
.doc-wrap{display:flex;align-items:flex-start}
.sidebar{
  width:var(--sidebar-w);flex:none;
  position:sticky;top:var(--topnav-h);
  height:calc(100vh - var(--topnav-h));
  overflow-y:auto;
  border-right:1px solid var(--border);
  padding:26px 14px 40px;
  background:#fafafa;
}
.side-group{margin-bottom:22px}
.side-group-title{
  font-size:12px;font-weight:600;color:#9ca3af;letter-spacing:.08px;
  padding:0 12px;margin-bottom:8px;text-transform:uppercase;
}
.side-link{
  display:block;padding:7px 12px;border-radius:8px;font-size:14px;color:#374151;
  transition:.15s;border-left:2.5px solid transparent;
}
.side-link:hover{background:#fff;color:var(--primary)}
.side-link.active{background:var(--primary-soft);color:var(--primary);font-weight:600;border-left-color:var(--primary)}
.side-overlay{display:none}

/* ===== 正文 ===== */
.content{flex:1;min-width:0;padding:48px 40px 96px}
.inner{max-width:760px;margin:0 auto}
.inner h1{font-size:32px;font-weight:600;letter-spacing:-.4px;line-height:1.3;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.inner h2{font-size:23px;font-weight:600;letter-spacing:-.2px;margin:44px 0 16px;scroll-margin-top:80px}
.inner h3{font-size:18px;font-weight:600;margin:32px 0 12px;scroll-margin-top:80px}
.inner h4{font-size:15.5px;font-weight:600;margin:24px 0 10px}
.inner p{margin:14px 0;color:#262626;font-size:15.5px}
.inner ul,.inner ol{margin:14px 0;padding-left:24px}
.inner li{margin:7px 0;font-size:15.5px}
.inner li>ul,.inner li>ol{margin:6px 0}
.inner strong{font-weight:600}
.inner hr{border:none;border-top:1px solid var(--border);margin:36px 0}

/* 行内代码 */
.inner code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  background:var(--code-bg);color:#c0265f;font-size:.88em;
  padding:2.5px 6px;border-radius:5px;word-break:break-word;
}

/* 代码块 */
.code-wrap{margin:18px 0;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.code-wrap pre{
  background:#1e2430;color:#e6e9ef;padding:18px 20px;overflow-x:auto;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:13.5px;line-height:1.7;
}
.code-wrap pre code{background:none;color:inherit;padding:0;font-size:inherit;word-break:normal}
.code-wrap.bare pre{background:var(--code-bg);color:#1f2937}
.code-wrap.bare pre code{color:inherit}

/* 表格 */
.table-wrap{margin:20px 0;overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.inner table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.inner th,.inner td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);word-wrap:break-word}
.inner thead th{background:#fafafa;font-weight:600;color:#374151}
.inner tbody tr:nth-child(even){background:var(--primary-soft)}
.inner tbody tr:last-child td{border-bottom:none}
.inner tbody tr:hover{background:var(--primary-softer)}

/* 提示框 */
.callout{
  margin:20px 0;padding:16px 18px;border-radius:10px;font-size:14.5px;
  border:1px solid var(--border);border-left:4px solid var(--primary);
  background:var(--primary-soft);
}
.callout .callout-title{font-weight:700;display:block;margin-bottom:6px;letter-spacing:.3px}
.callout p{margin:6px 0;font-size:14.5px}
.callout>:last-child{margin-bottom:0}
.callout.note{border-left-color:#6b7280;background:#f6f7f9}
.callout.warning{border-left-color:#f59e0b;background:#fffbeb}
.callout.danger{border-left-color:#ef4444;background:#fef2f2}
.callout ul,.callout ol{margin:8px 0;padding-left:22px}
.callout li{margin:5px 0;font-size:14.5px}

/* 图片 */
.inner figure{margin:24px 0}
.inner figure img{border:1px solid var(--border);border-radius:12px}
.inner figure figcaption{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
.shot-card{border:1.5px solid var(--primary-softer);border-radius:16px;padding:10px;background:#fff;box-shadow:var(--shadow)}
.shot-card img{border-radius:10px;width:100%}
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0}
.shot-grid .shot-cap{font-size:13px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}

/* 文档首页 */
.doc-hero{
  max-width:760px;margin:0 auto;text-align:center;padding:48px 28px 34px;
  border-radius:20px;
  background:radial-gradient(120% 120% at 50% 0%, var(--primary-soft) 0%, #fff 70%);
}
.doc-hero .logo-lg{width:64px;height:64px;margin:0 auto 18px;transition:transform .3s ease}
.doc-hero .logo-lg:hover{transform:scale(1.08)}
.doc-hero h1{font-size:38px;font-weight:600;letter-spacing:-.5px;border:none;padding:0;margin-bottom:16px}
.doc-hero p{color:var(--muted);font-size:16px;font-weight:300}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.cat-card{
  display:block;border:1px solid var(--border);border-radius:14px;padding:22px;transition:.25s;background:#fff;
}
.cat-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow)}
.cat-card .cat-ico{width:38px;height:38px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cat-card .cat-ico svg{width:20px;height:20px}
.cat-card h3{font-size:16px;font-weight:600;margin-bottom:6px}
.cat-card p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6}

.doc-foot{margin-top:64px;padding-top:24px;border-top:1px solid var(--border);font-size:13px;color:#9ca3af;text-align:center}

/* ===== 响应式 ===== */
@media(max-width:900px){
  .menu-btn{display:flex}
  .sidebar{
    position:fixed;top:var(--topnav-h);left:0;bottom:0;z-index:45;
    transform:translateX(-100%);transition:transform .28s ease;
    box-shadow:var(--shadow);width:280px;
  }
  .sidebar.open{transform:translateX(0)}
  .side-overlay{display:none;position:fixed;inset:var(--topnav-h) 0 0 0;background:rgba(0,0,0,.3);z-index:44}
  .side-overlay.show{display:block}
  .content{padding:32px 20px 72px}
  .inner h1{font-size:26px}
  .inner h2{font-size:20px}
  .shot-grid{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr}
  .top-link{padding:6px 9px;font-size:12.5px}
  .brand{font-size:15px}
}
@media(max-width:560px){
  .shot-grid{grid-template-columns:1fr}
}

/* 克隆参考站说明横幅 */
.clone-notice{
  background:#fff8f3;border:1px solid #fbe4d0;border-left:4px solid var(--primary,#EC407A);
  color:#8a5a3a;padding:12px 16px;border-radius:8px;margin-bottom:22px;
  font-size:13.5px;line-height:1.7;
}
.clone-notice b{color:var(--primary,#EC407A)}

/* ===== 文档搜索 ===== */
.search-wrap{position:relative;max-width:760px;margin:26px auto 0}
.search-box{
  position:relative;
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1.5px solid var(--border);border-radius:12px;
  padding:0 14px;box-shadow:var(--shadow);transition:border-color .2s, box-shadow .2s;
}
.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft), var(--shadow)}
.search-box svg{width:19px;height:19px;flex:none;color:var(--primary)}
.search-box input{
  flex:1;border:none;outline:none;background:transparent;
  font:inherit;font-size:15px;color:var(--text);padding:13px 4px;
}
.search-box input::placeholder{color:#9ca3af}
.search-drop{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);padding:6px;display:none;max-height:60vh;overflow-y:auto;
}
.search-drop.show{display:block}
.search-item{display:block;padding:10px 12px;border-radius:9px;transition:background .15s}
.search-item:hover{background:var(--primary-soft)}
.search-item-title{font-size:14.5px;font-weight:600;color:var(--primary);margin-bottom:2px}
.search-item-snippet{font-size:12.5px;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-empty{padding:16px 12px;text-align:center;color:var(--muted);font-size:14px}

@media(max-width:900px){
  .search-box{margin-top:20px}
  .search-drop{left:0;right:0;border-radius:12px}
}