/* ==========================================================================
   软件管家 · 站点样式表  site.css
   与首页 css/index.css 共用同一套设计令牌，保证视觉一致
   ========================================================================== */

:root{
  --primary:#0d9e4f;
  --primary-dark:#087a3a;
  --primary-light:#e3f7eb;
  --accent:#2ec27e;
  --secondary:#1e6f9f;
  --ink:#1a1e2b;
  --muted:#5d6472;
  --bg:#f6f8fc;
  --card:#ffffff;
  --border:#e2e8f0;
  --radius:18px;
  --shadow-sm:0 4px 14px rgba(0,0,0,.04);
  --shadow-md:0 12px 30px rgba(13,158,79,.08);
  --warn-bg:#fff8e6;
  --warn-bd:#f0d089;
  --warn-tx:#7a5a10;
  --info-bg:#eef6fd;
  --info-bd:#bcd9f0;
  --info-tx:#1a4d70;
  --maxw:1160px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);line-height:1.75;background:var(--bg);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
a{text-decoration:none;color:inherit;}
img,svg{max-width:100%;}
main{flex:1 0 auto;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;z-index:200;font-weight:600;}
.skip:focus{left:0;}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;gap:24px;height:70px;}
.logo{display:flex;align-items:center;gap:10px;flex:none;}
.logo img{width:36px;height:36px;border-radius:10px;display:block;}
.logo-text{font-weight:700;font-size:19px;letter-spacing:-.01em;}
.logo-text b{color:var(--primary);font-weight:700;}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  padding:8px 13px;border-radius:999px;font-size:15px;color:var(--muted);
  font-weight:500;white-space:nowrap;transition:color .18s,background .18s;
}
.nav-links a:hover{color:var(--primary-dark);background:var(--primary-light);}
.nav-links a[aria-current="page"]{color:var(--primary-dark);background:var(--primary-light);font-weight:600;}
.nav-cta{
  flex:none;background:var(--primary);color:#fff;padding:10px 22px;border-radius:999px;
  font-size:14px;font-weight:600;transition:background .2s,transform .2s;
}
.nav-cta:hover{background:var(--primary-dark);transform:translateY(-1px);color:#fff;}

/* ===== Breadcrumb ===== */
.crumbs{padding:18px 0 0;font-size:13.5px;color:var(--muted);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.crumbs li{display:flex;align-items:center;gap:6px;}
.crumbs li+li::before{content:"›";color:#c3cbd8;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--primary-dark);text-decoration:underline;}
.crumbs [aria-current]{color:var(--ink);font-weight:500;}

/* ===== Page hero ===== */
.page-head{
  padding:26px 0 34px;
  background:
    radial-gradient(760px 340px at 92% -30%, rgba(46,194,126,.20), transparent 64%),
    radial-gradient(560px 300px at -8% 120%, rgba(30,111,159,.12), transparent 62%),
    linear-gradient(168deg,#f4fdf8 0%,#eaf7f0 46%,#eef4fb 100%);
  border-bottom:1px solid rgba(13,158,79,.10);
}
.page-head h1{
  font-size:clamp(25px,3.6vw,38px);line-height:1.32;font-weight:800;
  letter-spacing:-.02em;margin:12px 0 12px;max-width:20em;
}
.page-head .lede{font-size:16px;color:#3f4757;max-width:44em;line-height:1.8;}
.page-head .badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--primary-light);
  color:var(--primary-dark);font-size:12.5px;font-weight:600;
  padding:5px 13px;border-radius:999px;
}

/* ===== Layout: article + sidebar ===== */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:44px;padding:38px 0 56px;align-items:start;}
.layout--full{grid-template-columns:minmax(0,1fr);}

/* ===== Prose ===== */
.prose{font-size:16.5px;line-height:1.85;color:#242a36;min-width:0;}
.prose>*+*{margin-top:1.15em;}
.prose h2{
  font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.4;
  margin-top:2em;padding-top:.2em;scroll-margin-top:90px;
}
.prose h2::after{
  content:"";display:block;width:42px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));margin-top:10px;
}
.prose h3{font-size:18.5px;font-weight:700;margin-top:1.7em;line-height:1.5;scroll-margin-top:90px;}
.prose h4{font-size:16.5px;font-weight:700;margin-top:1.4em;}
.prose p{margin-top:1em;}
.prose ul,.prose ol{margin-top:.9em;padding-left:1.4em;}
.prose li+li{margin-top:.4em;}
.prose li::marker{color:var(--primary);}
.prose strong{font-weight:700;color:#11151f;}
.prose a{color:var(--primary-dark);text-decoration:underline;text-decoration-color:#b9e2cb;text-underline-offset:3px;}
.prose a:hover{text-decoration-color:var(--primary);}
/* 组件内的链接不套用正文链接样式（按钮/卡片）——否则会被 .prose a 覆盖成深绿带下划线 */
.prose a.btn,.prose a.btn:hover{color:#fff;text-decoration:none;}
.prose a.btn--ghost,.prose a.btn--ghost:hover{color:var(--primary-dark);text-decoration:none;}
.prose a.card,.prose a.card:hover{color:inherit;text-decoration:none;}
.prose a.card h3,.prose a.card h4{color:var(--ink);}
.prose code{
  background:#eef2f8;border:1px solid #dfe6f0;border-radius:6px;
  padding:.1em .42em;font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.prose blockquote{
  border-left:3px solid var(--accent);background:#f3fbf6;
  padding:14px 18px;border-radius:0 12px 12px 0;color:#33404f;
}
.prose blockquote p{margin:0;}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:1.2em;}
.prose th,.prose td{border:1px solid var(--border);padding:10px 13px;text-align:left;
  vertical-align:top;word-break:break-word;line-height:1.65;}
/* 窄屏才切换为横向滚动，避免长文本在桌面端被压成一行 */
@media (max-width:760px){
  .prose table{display:block;overflow-x:auto;white-space:nowrap;}
  .prose th,.prose td{white-space:nowrap;}
}
.prose th{background:#f2f7fb;font-weight:700;}
.prose tbody tr:nth-child(even){background:#fbfcfe;}
.prose hr{border:0;border-top:1px solid var(--border);margin:2em 0;}

/* ===== Callout ===== */
.callout{
  border:1px solid var(--info-bd);background:var(--info-bg);color:var(--info-tx);
  border-radius:14px;padding:16px 18px;font-size:15px;line-height:1.75;
}
.callout strong{color:inherit;}
.callout--warn{border-color:var(--warn-bd);background:var(--warn-bg);color:var(--warn-tx);}
.callout--tip{border-color:#bfe6cd;background:#f1fbf5;color:#14532d;}
.callout--flat{border-color:var(--border);background:#f8fafc;color:#3f4757;}

/* ===== Steps ===== */
.steps{list-style:none;padding:0;margin-top:1.3em;counter-reset:s;}
.steps>li{
  position:relative;padding-left:52px;counter-increment:s;margin-top:1.1em;
}
.steps>li::before{
  content:counter(s);position:absolute;left:0;top:1px;
  width:34px;height:34px;border-radius:50%;
  background:var(--primary-light);color:var(--primary-dark);
  font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.steps>li h3,.steps>li h4{margin-top:0;}
.steps>li p{margin-top:.45em;}

/* ===== Cards ===== */
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:1.4em;}
.cards--2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.card{
  display:block;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 20px 22px;
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#c9e8d6;}
.card h3,.card h4{font-size:17px;font-weight:700;line-height:1.45;margin:0;}
.card h3::after,.card h4::after{display:none;}
.card p{margin-top:.5em;font-size:14.5px;color:var(--muted);line-height:1.7;}
.card .meta{margin-top:.9em;font-size:12.5px;color:#8b93a3;display:flex;gap:10px;flex-wrap:wrap;}
.card .kicker{
  display:inline-block;font-size:12px;font-weight:700;color:var(--primary-dark);
  background:var(--primary-light);border-radius:999px;padding:3px 10px;margin-bottom:10px;
}

/* ===== TOC ===== */
.toc{
  position:sticky;top:88px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);font-size:14px;
}
.toc h2,.toc h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin:0 0 10px;}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:t;}
.toc li{counter-increment:t;margin:0;padding:0;}
.toc li a{display:block;padding:5px 0;color:#4a5364;line-height:1.55;font-size:14px;}
.toc li a::before{content:counter(t) ". ";color:#a8b0be;font-variant-numeric:tabular-nums;}
.toc li a:hover{color:var(--primary-dark);}
.toc .toc-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--muted);line-height:1.65;}

.side-cta{
  margin-top:18px;background:linear-gradient(150deg,#16233a,#0f1a2b);
  border-radius:var(--radius);padding:20px;color:#dfe8f3;
}
.side-cta h3{font-size:15px;color:#fff;margin:0 0 8px;font-weight:700;}
.side-cta p{font-size:13.5px;color:#a8b8cd;line-height:1.7;margin:0 0 14px;}
.side-cta .btn{display:block;text-align:center;background:var(--accent);color:#08170f;
  font-weight:700;border-radius:10px;padding:10px;font-size:14px;}
.side-cta .btn:hover{background:#3ddc97;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:#fff;font-weight:600;font-size:15px;
  padding:12px 26px;border-radius:999px;border:0;cursor:pointer;
  white-space:nowrap;line-height:1.4;
  transition:background .2s,transform .2s;
}
/* 表格单元格里的按钮：收紧尺寸，避免撑破列宽 */
.prose table .btn{padding:8px 18px;font-size:14px;}
.btn:hover{background:var(--primary-dark);color:#fff;transform:translateY(-1px);}
.btn--lg{font-size:16px;padding:15px 34px;}
.btn--ghost{background:#fff;color:var(--primary-dark);border:1px solid #c9e8d6;}
.btn--ghost:hover{background:var(--primary-light);color:var(--primary-dark);}

/* ===== CTA band ===== */
.cta-band{
  background:radial-gradient(600px 300px at 88% -40%,rgba(46,194,126,.22),transparent 66%),
    linear-gradient(140deg,#16233a,#0f1a2b 60%,#101b2c);
  border-radius:22px;padding:34px 32px;color:#fff;margin-top:2.4em;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.cta-band h2{font-size:21px;font-weight:700;margin:0;letter-spacing:-.01em;}
.cta-band h2::after{display:none;}
.cta-band p{color:#a8b8cd;font-size:14.5px;margin:.5em 0 0;max-width:40em;}
.cta-band .btn{margin-left:auto;flex:none;}

/* ===== Fact grid ===== */
.facts{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:1.3em;}
.fact{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;}
.fact dt{font-size:12.5px;color:var(--muted);font-weight:600;}
.fact dd{margin:4px 0 0;font-size:15.5px;font-weight:700;}

/* ===== Related ===== */
.related{margin-top:2.6em;padding-top:1.6em;border-top:1px solid var(--border);}
.related h2{font-size:18px !important;}
.related h2::after{display:none;}

/* ===== Footer ===== */
.site-footer{margin-top:70px;background:#101b2c;color:#9fb0c6;font-size:14px;flex:none;}
.footer-cols{
  display:grid;gap:34px;padding:48px 0 34px;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand .logo-text{color:#fff;}
.footer-brand p{font-size:13.5px;line-height:1.75;color:#8fa3bd;max-width:26em;}
.site-footer h2,.site-footer h3{
  font-size:13px;color:#fff;font-weight:700;letter-spacing:.04em;
  margin:0 0 12px;text-transform:uppercase;
}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin:0;padding:0;}
.site-footer li a{display:block;padding:5px 0;color:#9fb0c6;font-size:13.5px;}
.site-footer li a:hover{color:var(--accent);}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.08);padding:22px 0 34px;
  font-size:12.5px;line-height:1.85;color:#7f93ab;
}
.footer-legal p{margin:0;}
.footer-legal a{color:#a8b8cd;text-decoration:underline;text-underline-offset:2px;}
.footer-legal a:hover{color:var(--accent);}
.footer-legal .disclose{margin-top:12px;max-width:58em;color:#728aa4;}

/* ===== Responsive ===== */
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr);gap:30px;}
  .toc{position:static;order:-1;}
  .footer-cols{grid-template-columns:1fr 1fr;gap:28px;}
  .nav{gap:14px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;height:auto;}
  /* 注意：`.nav` 与 `.container` 是同一个元素。
     这里只能用 padding-top/bottom 单独覆盖，不能用 padding 简写，
     否则会把 .container 的左右 20px 留白清掉（移动端内容会贴边）。 */
  .nav-links{order:3;width:100%;margin-left:0;}
  .nav-cta{margin-left:auto;}
  .cta-band{flex-direction:column;align-items:flex-start;}
  .cta-band .btn{margin-left:0;}
}
@media (max-width:560px){
  .page-head{padding:18px 0 26px;}
  .prose{font-size:16px;}
  .prose h2{font-size:20px;}
  .footer-cols{grid-template-columns:1fr 1fr;}
  .toc{display:none;}
}

/* ===== 正文内下载引导条 ===== */
.dl-bar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:26px 0;padding:18px 20px;
  border-radius:16px;
  background:
    radial-gradient(320px 160px at 92% -30%, rgba(46,194,126,.32), transparent 68%),
    linear-gradient(140deg,#16233a,#0f1a2b 62%,#101b2c);
  box-shadow:0 14px 30px rgba(15,26,43,.18);
}
.dl-bar-txt{min-width:0;flex:1;}
.dl-bar-txt strong{display:block;color:#fff;font-size:16px;font-weight:700;line-height:1.45;}
.dl-bar-txt span{display:block;margin-top:5px;color:#a8b8cd;font-size:13.5px;line-height:1.6;}
.dl-bar-btn{
  flex:none;background:#2ec27e;color:#08170f;font-weight:700;font-size:15px;
  padding:11px 24px;border-radius:999px;white-space:nowrap;
  transition:background .2s,transform .2s;
}
.dl-bar-btn:hover{background:#3ddc97;transform:translateY(-1px);}
.prose a.dl-bar-btn, .prose a.dl-bar-btn:hover{color:#08170f;text-decoration:none;}
@media (max-width:560px){
  .dl-bar{padding:16px;gap:12px;}
  .dl-bar-btn{width:100%;text-align:center;}
}