:root{
  --bg:#0d1b2a; --bg2:#102a43; --ink:#0f1b2d; --paper:#ffffff;
  --line:#dbe4ee; --muted:#5b6b7d; --brand:#1f7a8c; --brand2:#36b0c4;
  --accent:#f4a259; --grid:#e7eef5; --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:"PingFang SC","Microsoft YaHei",system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:#f3f6fa; line-height:1.75; font-size:16px;
}
a{color:var(--brand); text-decoration:none;}
a:hover{color:var(--brand2);}
.container{max-width:1120px; margin:0 auto; padding:0 16px;}
img{max-width:100%;}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(13,27,42,.96);
  backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.08);}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:60px;}
.brand{color:#fff; font-weight:700; font-size:18px; letter-spacing:.5px;}
.site-nav{display:flex; align-items:center; gap:18px;}
.site-nav>a, .nav-group>summary{color:#cfe3ee; font-size:15px; cursor:pointer; list-style:none;}
.site-nav>a:hover{color:#fff;}
.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:22px; cursor:pointer;}
.nav-group{position:relative;}
.nav-group>summary{outline:none; display:flex; align-items:center; gap:4px;}
.nav-group>summary::after{content:"▾"; font-size:10px; opacity:.65;}
/* 桌面端：悬停/聚焦出下拉面板 */
.nav-sub{position:absolute; top:100%; left:-12px; min-width:320px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:10px;
  background:#102a43; border:1px solid rgba(255,255,255,.12); border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease, visibility .15s; z-index:70;}
.nav-sub::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px;}
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub{opacity:1; visibility:visible; transform:none;}
.nav-sub a{color:#bcd4e2; font-size:13px; padding:7px 10px; border-radius:6px; white-space:nowrap;}
.nav-sub a:hover{background:rgba(255,255,255,.08); color:#fff;}

/* ---------- Layout ---------- */
.article-layout,.list-layout,.page-wrap{padding:24px 16px 48px;}
.article-grid{display:grid; grid-template-columns:minmax(0,760px) 240px; gap:32px; align-items:start;}
.article-main{min-width:0;}
.list-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:32px; align-items:start;}
.list-side{position:sticky; top:80px;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{margin:0 0 18px; font-size:13px; color:var(--muted);}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0;}
.breadcrumb li:not(:last-child)::after{content:"›"; margin-left:6px; color:#aab8c6;}
.breadcrumb a{color:var(--muted);}
.breadcrumb .active a{color:var(--ink); font-weight:600;}

/* ---------- Entry ---------- */
.entry-header h1{font-size:30px; line-height:1.3; margin:0 0 6px;}
.entry-meta{color:var(--muted); font-size:13px; margin:0 0 18px;}
.entry-body{font-size:16px;}
.entry-body h2{font-size:22px; margin:32px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--brand);}
.entry-body h3{font-size:18px; margin:22px 0 10px; color:var(--bg2);}
.entry-body p{margin:0 0 14px;}
.entry-body ul,.entry-body ol{padding-left:22px; margin:0 0 14px;}
.entry-body li{margin:6px 0;}

/* ---------- Table ---------- */
table.data{border-collapse:collapse; width:100%; margin:16px 0 22px; font-size:14px;
  background:#fff; border:1px solid var(--line);}
table.data th,table.data td{border:1px solid var(--line); padding:9px 12px; text-align:left;}
table.data thead th{background:var(--bg2); color:#fff; font-weight:600;}
table.data tbody tr:nth-child(even){background:var(--grid);}

/* ---------- TOC ---------- */
.toc-aside{position:sticky; top:80px; max-height:calc(100vh - 100px); overflow:auto;}
.toc-panel,.cat-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px;}
.toc-panel summary,.cat-panel summary{cursor:pointer; font-weight:600; color:var(--bg2); outline:none;}
.toc-list{list-style:none; padding:8px 0 0; margin:0; font-size:13px;}
.toc-list a{color:var(--muted); display:block; padding:3px 0;}
.toc-lvl-3{padding-left:14px;}
.toc-list a:hover{color:var(--brand);}

/* ---------- FAQ ---------- */
.faq-block{margin:28px 0;}
.faq-title{font-size:22px; margin:0 0 12px; padding-bottom:6px; border-bottom:2px solid var(--brand);}
.faq-block details{border:1px solid var(--line); border-radius:10px; margin:10px 0; background:#fff; overflow:hidden;}
.faq-block summary{padding:12px 14px; cursor:pointer; font-weight:600; background:var(--grid); outline:none;}
.faq-a{padding:10px 14px; color:#33414f;}

/* ---------- Callout ---------- */
.callout{border-left:4px solid var(--accent); background:#fff7ee; padding:12px 16px; border-radius:0 10px 10px 0; margin:20px 0;}
.callout h3{margin:0 0 6px; color:#b9621f;}

/* ---------- List ---------- */
.category-list{list-style:none; padding:0; margin:0;}
.category-list li{margin:2px 0;}
.category-list a{display:block; padding:8px 10px; border-radius:8px; color:var(--ink);}
.category-list a:hover{background:var(--grid); color:var(--brand);}
.list-main{min-width:0;}
.list-desc{color:var(--muted); margin:0 0 18px;}
.item-list{list-style:none; padding:0; margin:0;}
.item-row{border-bottom:1px solid var(--line); padding:14px 0;}
.item-title{font-size:19px; margin:0 0 4px;}
.item-cat{font-size:12px; color:var(--brand); margin:0 0 4px;}
.item-summary{color:var(--muted); margin:0; font-size:14px;}

/* ---------- Home ---------- */
.hero{background:linear-gradient(135deg,var(--bg),var(--bg2)); color:#fff; padding:64px 0 56px;}
.hero h1{font-size:40px; margin:0 0 12px;}
.hero-sub{font-size:18px; color:#bcd4e2; margin:0 0 24px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.btn{display:inline-block; background:var(--accent); color:#1a1206; font-weight:700; padding:12px 22px; border-radius:30px;}
.btn:hover{color:#1a1206;}
.btn-ghost{background:transparent; border:1px solid #9fc0d1; color:#cfe3ee;}
.section{padding:40px 0;}
.sec-title{font-size:24px; margin:0 0 18px; color:var(--bg2);}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;}
.cap-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; transition:.2s;}
.cap-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(16,42,67,.12); border-color:var(--brand);}
.cap-card h3{margin:0 0 6px; color:var(--brand);}
.cap-card p{margin:0; color:var(--muted); font-size:13px;}
.kw-list{display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none;}
.kw-list li{background:#fff; border:1px solid var(--line); border-radius:20px; padding:8px 16px; font-size:14px; color:var(--bg2);}
.baseline{background:#fff; border-left:4px solid var(--brand); padding:16px 20px; border-radius:0 10px 10px 0; color:#33414f;}
.scene-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;}
.scene{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; font-weight:600; color:var(--bg2);}
.home-articles{list-style:none; padding:0; margin:0;}
.home-articles li{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.ha-cat{font-size:12px; color:#fff; background:var(--brand); border-radius:12px; padding:2px 10px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg); color:#bcd4e2; padding:40px 0 20px; margin-top:40px;}
.footer-inner{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px;}
.footer-col h3{color:#fff; font-size:15px; margin:0 0 10px;}
.footer-col ul{list-style:none; padding:0; margin:0;}
.footer-col a{color:#bcd4e2;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:24px; padding-top:16px; font-size:13px; color:#8aa3b4;}

/* ---------- Floating capsule ---------- */
.float-capsule{position:fixed; right:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:60;}
.fc-btn{display:flex; align-items:center; gap:6px; padding:0 14px; height:40px; border-radius:22px;
  border:0; cursor:pointer; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff;
  font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(31,122,140,.4); white-space:nowrap;
  text-decoration:none; justify-content:flex-start;}
.fc-btn svg{flex:none;}
.fc-btn:hover{filter:brightness(1.08);}
.fc-btn:hover{filter:brightness(1.08);}
.wecom-modal{position:fixed; inset:0; background:rgba(8,18,30,.7); display:flex; align-items:center; justify-content:center; z-index:80;}
.wecom-modal[hidden]{display:none;}
.wecom-box{position:relative; background:#fff; padding:8px 8px 4px; border-radius:12px; text-align:center;}
.wecom-mail{display:block; padding:8px 12px 8px; color:var(--brand); font-size:14px; font-weight:600;}
.wecom-close{position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%; border:0; background:#fff; color:#333; font-size:20px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.3);}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .article-grid{grid-template-columns:1fr;}
  .toc-aside{position:static; max-height:none;}
  .list-grid{grid-template-columns:1fr;}
  .list-side{position:static;}
  .nav-toggle{display:block;}
  .site-nav{flex-direction:column; align-items:flex-start; gap:6px;
    position:absolute; top:60px; left:0; right:0; background:var(--bg); padding:14px 16px; display:none;}
  .site-nav.nav-open{display:flex;}
  .nav-sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; background:transparent; padding:6px 0 2px; grid-template-columns:1fr 1fr; gap:2px;}
  /* 移动端分类菜单默认折叠：details 不带 open 时隐藏子内容 */
  details.nav-group:not([open])>.nav-sub{display:none;}
}
@media (min-width:1025px){
  /* 桌面端下拉由 hover 控制，无需强制展开 */
}