/* ============================================================
   钻石助手 · 文章页共用样式
   用法：所有文章 HTML 都在同目录下，只需 <link rel="stylesheet" href="article.css">
   改一次样式，全站文章一起变。
   ============================================================ */

:root{
  --navy:#0f2744;
  --navy-2:#1a3a5c;
  --navy-3:#24507d;
  --gold:#b8860b;
  --gold-2:#c9a227;
  --ink:#1f2733;
  --ink-2:#4a5568;
  --ink-3:#7b8794;
  --line:#e3e8ef;
  --bg:#f6f8fb;
  --white:#fff;
  --up:#c0392b;      /* 涨 / 不利 —— 中国习惯红 */
  --down:#1f7a54;    /* 跌 / 有利 —— 中国习惯绿 */
  --radius:10px;
  --shadow:0 1px 3px rgba(16,42,67,.06);
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.85;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ---------- 顶部导航 ---------- */
.site-nav{
  background:var(--navy);
  padding:0 20px;
  position:sticky;
  top:0;
  z-index:50;
}
.site-nav .nv{
  max-width:780px;margin:0 auto;
  display:flex;align-items:center;gap:24px;
  height:56px;
}
.site-nav .brand{
  display:flex;align-items:center;gap:8px;
  color:#fff;font-size:15px;font-weight:600;
  text-decoration:none;letter-spacing:.02em;
  margin-right:auto;
}
.site-nav .brand svg{flex:none}
.site-nav .brand span{color:var(--gold-2);font-weight:400;font-size:13px}
.site-nav a.lk{
  color:rgba(255,255,255,.72);font-size:14px;
  text-decoration:none;white-space:nowrap;
}
.site-nav a.lk:hover{color:#fff}

/* ---------- 布局 ---------- */
.wrap{max-width:780px;margin:0 auto;padding:0 20px 72px}

/* 面包屑 */
.crumb{
  font-size:13px;color:var(--ink-3);
  padding:20px 0 0;line-height:1.6;
}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--navy-3)}
.crumb i{font-style:normal;margin:0 6px;color:#c3ccd8}

/* ---------- 文章头 ---------- */
article{padding-top:12px}
.a-head{padding:16px 0 26px;border-bottom:1px solid var(--line);margin-bottom:30px}
.a-head h1{
  font-size:28px;line-height:1.42;font-weight:600;
  color:var(--navy);letter-spacing:-.01em;
}
.a-meta{
  margin-top:16px;font-size:13px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
}
.a-meta .dot{width:3px;height:3px;border-radius:50%;background:#c3ccd8}
.a-lead{
  margin-top:20px;font-size:16.5px;color:var(--ink-2);
  line-height:1.9;padding-left:16px;
  border-left:3px solid var(--gold-2);
}

/* ---------- 正文 ---------- */
h2{
  font-size:21px;font-weight:600;color:var(--navy);
  margin:44px 0 18px;line-height:1.5;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
h3{
  font-size:17px;font-weight:600;color:var(--navy-2);
  margin:30px 0 12px;line-height:1.6;
}
h4{
  font-size:15.5px;font-weight:600;color:var(--ink);
  margin:22px 0 8px;
}
p{margin-bottom:16px}
strong{font-weight:600;color:var(--navy)}
a{color:var(--navy-3);text-decoration:underline;text-decoration-color:#c8d6e5;text-underline-offset:3px}
a:hover{text-decoration-color:var(--navy-3)}

ul,ol{margin:0 0 18px 23px}
li{margin-bottom:9px}
li::marker{color:var(--ink-3)}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;background:#eef2f7;color:var(--navy-2);
  padding:2px 6px;border-radius:4px;
}

/* 表格 */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0 26px}
table{
  width:100%;border-collapse:collapse;font-size:14.5px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
th{
  background:var(--navy);color:#fff;font-weight:500;
  padding:12px 14px;text-align:left;font-size:13.5px;
  white-space:nowrap;
}
td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:#fafbfd}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl table{min-width:520px;margin:0}

/* 提示框 */
.box{
  border-radius:var(--radius);padding:20px 22px;margin:24px 0;
  font-size:15px;line-height:1.8;border-left:4px solid;
}
.box .bt{
  display:block;font-weight:600;margin-bottom:8px;font-size:15px;
}
.box p:last-child,.box ul:last-child,.box ol:last-child{margin-bottom:0}
.box.key{background:#fdf9ee;border-color:var(--gold-2)}
.box.key .bt{color:#8a6d1f}
.box.warn{background:#fdf4f3;border-color:#e0a09a}
.box.warn .bt{color:#a5382c}
.box.tip{background:#f1f7fd;border-color:#9dbede}
.box.tip .bt{color:var(--navy-3)}

/* 数据卡 */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin:24px 0;
}
.st{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);
}
.st .k{font-size:12.5px;color:var(--ink-3);margin-bottom:6px;line-height:1.5}
.st .v{
  font-size:21px;font-weight:600;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1.25;
}
.st .v.dn{color:var(--down)}
.st .v.up{color:var(--up)}
.st .s{font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.5}

/* 问答 */
.faq{margin:20px 0}
.faq details{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:10px;overflow:hidden;
}
.faq summary{
  padding:15px 20px;cursor:pointer;font-weight:600;
  font-size:15.5px;color:var(--navy);list-style:none;
  position:relative;padding-right:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;
  transform:translateY(-50%);font-size:20px;font-weight:400;
  color:var(--ink-3);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .fa{padding:16px 20px;font-size:15px;color:var(--ink-2)}
.faq .fa p:last-child{margin-bottom:0}

/* CTA */
.cta{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  border-radius:12px;padding:30px 32px;margin:40px 0;
  color:#fff;
}
.cta h3{
  color:#fff;font-size:19px;margin:0 0 10px;line-height:1.5;
}
.cta p{
  color:rgba(255,255,255,.78);font-size:14.5px;
  margin-bottom:20px;line-height:1.75;
}
.cta .btn{
  display:inline-block;background:var(--gold-2);color:#241d05;
  font-weight:600;font-size:15px;padding:12px 28px;
  border-radius:8px;text-decoration:none;
  transition:background .16s;
}
.cta .btn:hover{background:#dcb63c}
.cta .sm{
  display:block;margin-top:14px;font-size:12.5px;
  color:rgba(255,255,255,.5);
}

/* 相关阅读 */
.rel{margin:44px 0 0}
.rel h3{font-size:17px;margin-bottom:14px}
.rel ul{list-style:none;margin:0}
.rel li{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:10px;
  transition:border-color .16s;
}
.rel li:hover{border-color:#b9c8d8}
.rel a{
  display:block;padding:15px 20px;text-decoration:none;
  color:var(--navy);font-size:15px;font-weight:500;line-height:1.6;
}
.rel a small{
  display:block;font-weight:400;font-size:13px;
  color:var(--ink-3);margin-top:5px;
}

/* 文章页脚 */
.a-foot{
  margin-top:44px;padding:22px 24px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:13px;color:var(--ink-3);line-height:1.85;
}
.a-foot strong{color:var(--ink-2);font-weight:600}

/* 站点页脚 */
.site-foot{
  border-top:1px solid var(--line);
  background:var(--white);margin-top:56px;
  padding:30px 20px;font-size:13px;color:var(--ink-3);
}
.site-foot .in{max-width:780px;margin:0 auto;line-height:2}
.site-foot a{color:var(--ink-3);text-decoration:none}
.site-foot a:hover{color:var(--navy-3)}

/* 列表页 */
.list-head{
  background:var(--navy);color:#fff;padding:44px 20px 40px;
  margin-bottom:32px;
}
.list-head .in{max-width:780px;margin:0 auto}
.list-head h1{font-size:26px;font-weight:600;line-height:1.4}
.list-head p{
  margin-top:12px;font-size:14.5px;color:rgba(255,255,255,.72);
  line-height:1.8;max-width:600px;
}
.grp{margin-bottom:38px}
.grp h2{
  font-size:16px;color:var(--gold);margin:0 0 14px;
  border:none;padding:0;letter-spacing:.06em;font-weight:600;
}
.grp ul{list-style:none;margin:0}
.grp li{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:10px;
}
.grp li a{
  display:block;padding:17px 22px;text-decoration:none;
  color:var(--navy);font-size:16px;font-weight:500;line-height:1.6;
}
.grp li a small{
  display:block;font-weight:400;font-size:13.5px;
  color:var(--ink-3);margin-top:6px;line-height:1.65;
}

/* 移动端 */
@media (max-width:640px){
  body{font-size:15.5px;line-height:1.82}
  .site-nav .brand span{display:none}
  .site-nav .nv{gap:16px}
  .a-head h1{font-size:22px;line-height:1.45}
  .a-lead{font-size:15.5px}
  h2{font-size:19px;margin-top:36px}
  h3{font-size:16px}
  .wrap{padding:0 18px 56px}
  .cta{padding:24px 20px}
  .cta h3{font-size:17px}
  .list-head{padding:34px 18px 30px}
  .list-head h1{font-size:21px}
  .stats{grid-template-columns:1fr 1fr}
  .st{padding:14px}
  .st .v{font-size:18px}
}