/* 文章、案例、服务等内页的样式。颜色和字体变量与首页 index.html 的 :root 保持一致。
   内页不加载粒子层和 three.js：要快、要好读。 */
:root{
  --void:#07070A; --pit:#0B0C10; --card:#111318; --card-2:#15171D;
  --line:#23262F; --line-2:#2E323D;
  --silver-hi:#ECECED; --silver-mid:#9D9C9E; --silver-lo:#5C6068;
  --text:#E9EBEF; --text-2:#9AA1AC; --text-3:#6A7079;
  --amber:#F0A65C; --violet:#A98BE0;
  /* 站在国内，Google Fonts 取不到，中文只能用系统字 */
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1180px; --read:740px;
}
*{box-sizing:border-box}
html{background:var(--void); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--void); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.78;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
img{max-width:100%; height:auto}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px; position:relative}
@media(max-width:640px){ .wrap{padding:0 20px} }
::selection{background:var(--amber); color:var(--void)}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px}
.ag{background:linear-gradient(118deg,var(--silver-hi) 8%,var(--silver-mid) 52%,var(--silver-hi) 94%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}

/* ── 顶栏（与首页同款） ── */
.nav{position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--void) 93%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav__in{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand img{width:30px; height:30px; flex:none}
.brand b{font-size:15.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap}
.brand i{font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  color:var(--text-3); display:block; margin-top:-3px}
.nav__links{margin-left:auto; display:flex; gap:26px; font-size:14.5px; color:var(--text-2)}
.nav__links a{text-decoration:none; transition:color .2s ease; position:relative; white-space:nowrap}
.nav__links a::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--silver-hi)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
@media(max-width:520px){ .nav__links{gap:15px; font-size:13.5px} .brand i{display:none} }
@media(max-width:360px){ .nav__links{gap:11px; font-size:13px} .brand b{display:none} }

/* ── 页面骨架 ── */
.page{padding-top:26px; padding-bottom:84px}
.crumb{font-size:13px; color:var(--text-3); display:flex; flex-wrap:wrap; gap:4px 9px; margin-bottom:38px}
.crumb a{text-decoration:none; color:var(--text-2)}
.crumb a:hover{color:var(--amber)}
.crumb i{font-style:normal; color:var(--line-2)}
.head{max-width:var(--read); margin-bottom:40px}
.kicker{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; color:var(--amber); margin:0 0 14px}
h1{font-size:clamp(27px,4vw,42px); line-height:1.32; letter-spacing:-.02em; font-weight:800; margin:0 0 18px; text-wrap:balance}
.lead{font-size:17.5px; color:var(--text-2); margin:0}
.byline{font-size:13.5px; color:var(--text-3); margin:0; display:flex; flex-wrap:wrap; gap:4px 18px}
.byline a{color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--line-2)}
.byline a:hover{color:var(--amber); border-color:var(--amber)}

/* ── 正文 ── */
.prose{max-width:var(--read); font-size:17px; line-height:1.9; color:#D5D9E0}
.prose > :first-child{margin-top:0}
.prose p{margin:0 0 1.25em}
.prose h2{font-size:clamp(21px,2.6vw,26px); line-height:1.4; font-weight:800; letter-spacing:-.01em;
  color:var(--text); margin:2.3em 0 .8em; padding-top:.9em; border-top:1px solid var(--line)}
.prose h3{font-size:18.5px; line-height:1.5; font-weight:700; color:var(--text); margin:1.9em 0 .6em}
.prose strong{color:var(--text); font-weight:700}
.prose a{color:var(--amber); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--amber) 45%,transparent);
  text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--amber)}
.prose ul,.prose ol{margin:0 0 1.25em; padding-left:1.4em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--silver-lo)}
.prose blockquote{margin:1.6em 0; padding:14px 20px; border-left:2px solid var(--amber);
  background:var(--card); border-radius:0 10px 10px 0; color:var(--text-2)}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:var(--mono); font-size:.88em; background:var(--card-2); padding:2px 6px; border-radius:5px}
.prose pre{margin:1.6em 0; padding:18px 20px; background:var(--pit); border:1px solid var(--line);
  border-radius:12px; overflow-x:auto; font-size:13.5px; line-height:1.7; -webkit-overflow-scrolling:touch}
.prose pre code{background:none; padding:0; font-size:inherit; color:#C9CED8}
/* 人物照片：桌面靠右，文字绕排；手机上单独一行 */
.prose img.portrait{float:right; width:240px; margin:4px 0 18px 32px; border-radius:14px}
@media(max-width:640px){ .prose img.portrait{float:none; width:180px; margin:0 0 20px} }
.prose h2{clear:both}
/* 并排的手机截图 */
.shots{display:flex; gap:18px; align-items:flex-start; margin:1.8em 0}
.shots img{flex:1 1 0; min-width:0; width:50%; max-width:300px; margin:0; border-radius:16px}
.prose hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}
.prose img{border-radius:12px; border:1px solid var(--line); display:block; margin:1.6em 0}
/* 表格在手机上横向滚动，不撑破页面 */
.table{overflow-x:auto; margin:1.6em 0; border:1px solid var(--line); border-radius:12px; -webkit-overflow-scrolling:touch}
.table table{border-collapse:collapse; width:100%; min-width:460px; font-size:15px; line-height:1.65}
.table th,.table td{padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.table th{background:var(--card-2); color:var(--text); font-weight:700; white-space:nowrap}
.table tr:last-child td{border-bottom:0}

/* ── 列表卡片 ── */
.cards{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cards a{display:block; height:100%; text-decoration:none; padding:24px 24px 22px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  transition:border-color .2s ease, transform .2s ease, background .2s ease}
.cards a:hover{border-color:var(--silver-lo); background:var(--card-2); transform:translateY(-2px)}
.cards h3{font-size:18px; line-height:1.5; font-weight:700; margin:0 0 10px; color:var(--text)}
.cards p{font-size:14.5px; line-height:1.75; color:var(--text-2); margin:0}
.cards time{display:block; margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--text-3)}
.group{margin-bottom:44px}
.group h2{font-size:20px; font-weight:800; margin:0 0 18px; color:var(--text)}
.empty{color:var(--text-2); padding:30px 0}

/* ── 相关阅读（站内互链） ── */
.related{max-width:var(--read); margin:56px 0 0; padding-top:28px; border-top:1px solid var(--line)}
.related h2{font-size:18px; font-weight:800; margin:0 0 14px}
.related ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.related a{display:flex; align-items:baseline; gap:12px; text-decoration:none; padding:13px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; font-size:15.5px; line-height:1.6;
  transition:border-color .2s ease, background .2s ease}
.related a:hover{border-color:var(--silver-lo); background:var(--card-2)}
.related span{flex:none; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--amber)}

/* ── 文末行动区 ── */
.cta-box{max-width:var(--read); margin:60px 0 0; padding:30px 30px 32px;
  background:linear-gradient(160deg,var(--card-2),var(--card)); border:1px solid var(--line-2);
  border-top:2px solid var(--amber); border-radius:16px}
.cta-box h2{font-size:22px; font-weight:800; margin:0 0 10px; line-height:1.4}
.cta-box p{color:var(--text-2); margin:0 0 22px; font-size:15.5px}
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:13px 26px; border-radius:999px; font-size:15px; font-weight:600;
  border:1px solid var(--line-2); color:var(--text); transition:transform .2s ease, background .2s ease}
.btn--solid{background:var(--silver-hi); color:var(--void); border-color:var(--silver-hi); font-weight:700}
.btn--solid:hover{background:#fff; border-color:#fff; transform:translateY(-2px)}
.back{max-width:var(--read); margin:34px 0 0; font-size:14.5px}
.back a{color:var(--text-2); text-decoration:none}
.back a:hover{color:var(--amber)}
@media(max-width:640px){
  .page{padding-bottom:60px} .crumb{margin-bottom:28px}
  .prose{font-size:16.5px} .cta-box{padding:24px 20px 26px}
}

/* ── 页脚 ── */
.foot{border-top:1px solid var(--line); padding:36px 0 48px; font-size:12.5px; color:var(--text-3)}
.foot__in{display:flex; gap:12px 26px; flex-wrap:wrap; align-items:center}
.foot__links{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot__links a{text-decoration:none; color:var(--text-3); transition:color .2s ease}
.foot__links a:hover{color:var(--silver-mid)}
.foot__icp{margin-left:auto; text-decoration:none; color:var(--text-3); transition:color .2s ease}
.foot__icp:hover{color:var(--silver-mid); text-decoration:underline}
@media(max-width:640px){ .foot__icp{margin-left:0} }

/* ── 只在本地预览出现：草稿标记和待补清单（上线版本里不会有） ── */
.draft{max-width:var(--read); margin:0 0 30px; padding:16px 20px; border:1px dashed var(--amber);
  border-radius:12px; background:color-mix(in srgb,var(--amber) 8%,transparent); font-size:14.5px; line-height:1.75}
.draft b{color:var(--amber)}
.draft__todo{margin-top:8px; color:var(--text)}
.draft__todo ul{margin:6px 0 0; padding-left:1.3em}
.draft__todo p{margin:6px 0 0}
.tag-draft{font-style:normal; font-size:11.5px; font-weight:600; color:var(--amber);
  border:1px solid var(--amber); border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:2px}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }