*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#242424;background:#fff;line-height:1.75}
img{display:block;max-width:100%;height:auto}
a{color:#0d6efd;text-decoration:none}
a:hover{text-decoration:underline}

.doc-app{display:flex;min-height:100vh}
.doc-sidebar{width:260px;flex-shrink:0;background:#fafafa;border-right:1px solid #e5e7eb;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:100;padding:20px 0}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:0 20px 18px;border-bottom:1px solid #e5e7eb;margin-bottom:12px;font-weight:800;font-size:15px;color:#111}
.sidebar-brand img{width:36px;border-radius:8px}
.sidebar-group{padding:8px 20px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af}
.sidebar-nav a{display:block;padding:8px 20px;font-size:14px;color:#4b5563;border-left:3px solid transparent}
.sidebar-nav a:hover{background:#f3f4f6;color:#111;text-decoration:none}
.sidebar-nav a.active{background:#eff6ff;color:#0d6efd;border-left-color:#0d6efd;font-weight:600}

.doc-content{flex:1;margin-left:260px;min-width:0;display:flex;flex-direction:column}
.doc-header{display:none;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:50}
.sidebar-toggle{border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:8px 12px;font-size:18px;cursor:pointer}
.doc-header-title{font-weight:700;font-size:15px;color:#111}

.doc-main{width:min(820px,calc(100% - 48px));margin:0 auto;padding:32px 0 48px;flex:1}
.doc-main.wide{width:min(960px,calc(100% - 48px))}

.doc-main h1{font-size:clamp(26px,3vw,34px);line-height:1.3;margin:0 0 16px;color:#111}
.doc-main h2{font-size:22px;margin:36px 0 12px;padding-top:8px;border-top:1px solid #f0f0f0;color:#111}
.doc-main h2:first-of-type{border-top:none;padding-top:0;margin-top:24px}
.doc-main h3{font-size:17px;margin:24px 0 8px;color:#333}
.doc-main p,.doc-main li{font-size:15px;color:#444}
.doc-main ul,.doc-main ol{padding-left:22px}
.doc-main .lead{font-size:17px;color:#374151;margin-bottom:24px}
.doc-main .meta{font-size:13px;color:#9ca3af;margin-bottom:28px}

.callout{margin:24px 0;padding:16px 20px;background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;font-size:14px;color:#1e40af}
.callout-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}

.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.doc-card{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff}
.doc-card img{aspect-ratio:2/3;object-fit:cover;width:100%}
.doc-card .cap{padding:12px 14px;font-size:13px;color:#555}
.doc-card .cap strong{display:block;color:#111;margin-bottom:4px;font-size:14px}

.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
.feature-box{border:1px solid #e5e7eb;border-radius:10px;padding:20px;background:#fafafa}
.feature-box h3{margin:0 0 8px;font-size:16px}

.hero-shot{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;margin:24px 0}
.hero-shot img{width:100%;max-height:360px;object-fit:cover}

.screen-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.screen-pair img{border:1px solid #e5e7eb;border-radius:10px}

.faq details{border:1px solid #e5e7eb;border-radius:8px;padding:14px 18px;margin-bottom:10px;background:#fff}
.faq summary{cursor:pointer;font-weight:600;color:#111;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0;font-size:14px;color:#555}

.doc-footer{padding:24px 24px 32px;border-top:1px solid #e5e7eb;font-size:13px;color:#9ca3af;margin-top:auto}
.doc-footer a{color:#6b7280;margin-right:16px}
.doc-footer p{margin:10px 0 0}

.doc-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90}
.doc-overlay.on{display:block}

.err-page{min-height:60vh;display:grid;place-items:center;text-align:center;padding:40px 20px}
.err-page h1{font-size:48px;margin:0 0 12px;color:#111}

@media(max-width:900px){
  .doc-sidebar{transform:translateX(-100%);transition:transform .25s ease;box-shadow:none}
  .doc-sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.12)}
  .doc-content{margin-left:0}
  .doc-header{display:flex}
  .doc-grid,.feature-row,.screen-pair{grid-template-columns:1fr}
}