/* qq1230.com — 第十四套界面：手册 / 文档风
   左侧深石墨 #21242b 固定章节索引 + 右侧纸白内容区 + 砖红 #c0392b 强调。
   前十套全部是「全宽分节纵向堆叠」，此处改成侧边固定导航 + 单栏文档流，
   骨架维度与已建站均不重叠；配色也未与任一站重复。 */

:root{
  --ink:#21242b; --paper:#ffffff; --brick:#c0392b; --sand:#f7f5f2;
  --line:#e4e2dd; --muted:#6b7280; --text:#2f333c;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --side:246px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.9 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ── 顶栏 ── */
.bar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:70}
.bar-in{max-width:1320px;margin:0 auto;padding:0 24px;height:54px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;letter-spacing:.6px}
.logo i{width:22px;height:22px;background:var(--brick);border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:12px}
.bar-nav{display:flex;gap:20px;flex-wrap:wrap}
.bar-nav a{font-size:13.5px;color:#b9bcc4}
.bar-nav a:hover,.bar-nav a.on{color:#fff}

/* ── 两栏布局 ── */
.shell{max-width:1320px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:var(--side) 1fr;gap:44px;align-items:start}
.toc{position:sticky;top:78px;background:var(--ink);border-radius:10px;padding:20px 0;margin-top:26px}
.toc h5{margin:0 20px 14px;font-size:11px;letter-spacing:2.4px;color:#7d838f;font-weight:700}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:c}
.toc li{counter-increment:c}
.toc li a{
  display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;
  padding:9px 20px;font-size:13.6px;line-height:1.6;color:#c3c7cf;border-left:3px solid transparent;
}
.toc li a::before{content:counter(c,decimal-leading-zero);font:11px/1 var(--mono);color:#6f7581}
.toc li a:hover{color:#fff;background:#2a2e37}
.toc li a.on{color:#fff;border-left-color:var(--brick);background:#2a2e37}
.toc .foot-note{margin:16px 20px 0;padding-top:14px;border-top:1px solid #32363f;font-size:11.5px;line-height:1.8;color:#767c88}
.doc{min-width:0;padding:26px 0 60px}

/* ── 首屏 ── */
.head{border-bottom:1px solid var(--line);padding-bottom:30px;margin-bottom:38px}
.crumb{font:11.5px/1 var(--mono);letter-spacing:1.6px;color:var(--brick);margin-bottom:14px}
.head h1{margin:0 0 14px;font-size:clamp(28px,3.8vw,40px);line-height:1.28;font-weight:800;letter-spacing:-.6px;color:var(--ink)}
.head .lead{margin:0 0 22px;font-size:16.5px;line-height:2;color:var(--text);max-width:44em}
.head .shot{margin:0 0 22px}
.head .shot img{border-radius:10px;border:1px solid var(--line)}
.head .shot figcaption{margin-top:9px;font-size:12.8px;color:var(--muted)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick div{background:var(--sand);border:1px solid var(--line);border-radius:8px;padding:14px 15px}
.quick b{display:block;font-size:21px;font-weight:800;color:var(--brick);letter-spacing:-.5px}
.quick span{display:block;margin-top:3px;font-size:12.3px;color:var(--muted);line-height:1.6}

/* ── 章节 ── */
.sec{padding:38px 0;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:0}
.sec > h2{
  margin:0 0 8px;font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-.4px;color:var(--ink);
  scroll-margin-top:78px;
}
.sec > h3{margin:0 0 8px;font-size:21px;font-weight:800;color:var(--ink);scroll-margin-top:78px}
.sec > .intro{margin:0 0 24px;font-size:15.5px;line-height:1.95;color:var(--muted);max-width:46em}
.sec p{font-size:15.5px;line-height:1.95}

/* 牌型表 */
.ranks{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rank{display:grid;grid-template-columns:40px 132px 1fr;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:0}
.rank:nth-child(odd){background:var(--sand)}
.rank .no{font:12px/1 var(--mono);color:var(--brick);font-weight:700}
.rank .nm{font-size:15px;font-weight:700;color:var(--ink)}
.rank .de{font-size:14px;line-height:1.8;color:var(--text)}
.cd{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:4px;padding:1px 5px;margin-right:3px;font:13px/1.7 var(--mono);font-weight:700}
.cd.r{color:#c0392b}
.cd.b{color:#21242b}

/* 流程 */
.flowx{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.flowx > div{border:1px solid var(--line);border-radius:10px;padding:16px 16px 18px;position:relative}
.flowx .st{font:11px/1 var(--mono);letter-spacing:1.4px;color:var(--brick);margin-bottom:9px}
.flowx h4{margin:0 0 8px;font-size:15.5px;font-weight:700;color:var(--ink)}
.flowx p{margin:0;font-size:13.8px;line-height:1.85;color:var(--text)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.acts span{
  border:1px solid var(--line);background:var(--sand);border-radius:20px;
  padding:5px 13px;font-size:13.2px;font-weight:600;color:var(--ink);
}
.acts span b{color:var(--brick);font-weight:700}

/* 位置四档 */
.pos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:22px}
.pos > div{border:1px solid var(--line);border-left:4px solid var(--brick);border-radius:8px;padding:16px 18px}
.pos h4{margin:0 0 6px;font-size:15.5px;font-weight:700;color:var(--ink)}
.pos .pc{font:12px/1 var(--mono);color:var(--muted);margin-bottom:8px;letter-spacing:1.2px}
.pos p{margin:0;font-size:14.2px;line-height:1.85;color:var(--text)}

/* 起手牌三档 */
.tiers3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.tiers3 > div{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--sand)}
.tiers3 h4{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--ink)}
.tiers3 .hs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tiers3 .hs span{background:#fff;border:1px solid var(--line);border-radius:5px;padding:3px 8px;font:13px/1.5 var(--mono);font-weight:700;color:var(--ink)}
.tiers3 .hs span.top{background:var(--brick);border-color:var(--brick);color:#fff}
.tiers3 p{margin:0;font-size:13.8px;line-height:1.85;color:var(--text)}

/* 提示条 */
.tip{border:1px solid var(--line);border-radius:10px;background:var(--sand);padding:16px 20px;display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:start;margin-bottom:20px}
.tip .lb{font:11px/1.6 var(--mono);letter-spacing:1.4px;color:var(--brick);font-weight:700;padding-top:3px}
.tip p{margin:0 0 8px;font-size:14.4px;line-height:1.9}
.tip p:last-child{margin-bottom:0}
.tip b{color:var(--brick)}

/* 数据两列 */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.pair > div{border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.pair h4{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--ink)}
.pair p{margin:0 0 8px;font-size:14.2px;line-height:1.88;color:var(--text)}
.pair p:last-child{margin-bottom:0}
.pair b{color:var(--brick)}

/* FAQ */
.qa{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff}
.qa summary{list-style:none;cursor:pointer;padding:14px 42px 14px 18px;position:relative;font-size:15.5px;font-weight:700;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:18px;top:21px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.qa[open] summary::after{transform:rotate(-135deg);top:24px}
.qa[open] summary{border-bottom:1px solid var(--line)}
.qa .a{padding:14px 18px 16px;font-size:14.6px;line-height:1.95;color:var(--text)}

/* 术语 */
.terms2{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.terms2 div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.terms2 dt{margin:0;font-size:14.4px;font-weight:700;color:var(--ink)}
.terms2 dd{margin:0;font-size:13.9px;line-height:1.8;color:var(--text)}

/* 文章 */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.post-card .sg-auto-thumb{display:block}
.post-card .sg-auto-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card .bd{padding:14px 16px 16px}
.post-cat{display:inline-block;background:var(--sand);border:1px solid var(--line);border-radius:20px;padding:2px 9px;font-size:11.5px;color:var(--muted);margin-bottom:8px}
.post-title{font-size:15.4px;font-weight:700;line-height:1.55;margin-bottom:7px;color:var(--ink)}
.post-title a:hover{color:var(--brick)}
.post-excerpt{font-size:13.4px;line-height:1.85;color:var(--muted);margin-bottom:8px}
.post-meta{font:11.5px/1 var(--mono);color:var(--muted);letter-spacing:.8px}
.pagination{margin-top:26px;display:flex;gap:7px;flex-wrap:wrap}
.pagination .page-numbers{border:1px solid var(--line);border-radius:7px;padding:7px 13px;font-size:13.8px}
.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination .page-numbers:hover{border-color:var(--brick);color:var(--brick)}

/* 内页 */
.post-content{font-size:16px;line-height:2.02;max-width:44em}
.post-content h2{font-size:21px;font-weight:800;margin:30px 0 12px;color:var(--ink)}
.post-content h3{font-size:18px;font-weight:700;margin:24px 0 10px;color:var(--ink)}
.post-content p{margin:0 0 15px}
.post-content img{border-radius:10px;border:1px solid var(--line);margin:18px 0}
.post-content ul,.post-content ol{padding-left:1.35em;margin:0 0 15px}
.post-content li{margin-bottom:6px}
.post-content blockquote{margin:18px 0;padding:12px 18px;border-left:4px solid var(--brick);background:var(--sand);border-radius:0 8px 8px 0}
.post-content a{color:var(--brick);border-bottom:1px solid var(--line)}

/* 页脚 */
.foot{background:var(--ink);color:#aeb2bb;padding:42px 0 22px;font-size:14px;margin-top:20px}
.foot-in{max-width:1320px;margin:0 auto;padding:0 24px}
.foot .cols{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:32px}
.foot .fn{color:#fff;font-size:17px;font-weight:800;letter-spacing:.8px;margin-bottom:11px}
.foot h4{margin:0 0 12px;color:var(--brick);font-size:11.5px;letter-spacing:2px;font-weight:700}
.foot p{margin:0;line-height:1.95;color:#868b95;font-size:13.4px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot li a{color:#aeb2bb;font-size:13.4px}
.foot li a:hover{color:#fff}
.foot .bot{margin-top:30px;padding-top:16px;border-top:1px solid #32363f;font-size:12.4px;color:#6f7581}

@media(max-width:1040px){
  .shell{grid-template-columns:1fr;gap:0}
  .toc{position:static;margin:20px 0 0;padding:14px 0}
  .toc ol{display:flex;overflow-x:auto;gap:0}
  .toc li a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;grid-template-columns:auto auto}
  .toc li a.on{border-left:0;border-bottom-color:var(--brick)}
  .toc .foot-note{display:none}
  .quick,.flowx,.tiers3,.arts{grid-template-columns:repeat(2,1fr)}
  .pos,.pair,.terms2,.foot .cols{grid-template-columns:1fr}
  .rank{grid-template-columns:32px 1fr;gap:8px}
  .rank .de{grid-column:1/-1}
}
@media(max-width:620px){
  .quick,.flowx,.tiers3,.arts{grid-template-columns:1fr}
  .tip{grid-template-columns:1fr;gap:6px}
}

.cta-top{display:inline-flex;align-items:center;gap:.38em;
 padding:.5em 1.15em;border:1.5px solid currentColor;border-radius:999px;
 font-size:.85rem;font-weight:700;line-height:1.15;white-space:nowrap;
 text-decoration:none;color:var(--brick);opacity:.92;transition:opacity .2s,transform .2s}
.cta-top:hover{opacity:1;transform:translateY(-1px)}
.cta-top .dot{width:.42em;height:.42em;border-radius:50%;background:currentColor;
 display:inline-block;flex:none}
@media(max-width:820px){.cta-top{padding:.44em .9em;font-size:.8rem}}
@media(max-width:560px){.cta-top{padding:.4em .78em;font-size:.75rem;gap:.3em}
 .cta-top .dot{width:.36em;height:.36em}}
@media(max-width:380px){.cta-top{padding:.36em .66em;font-size:.72rem}}