/* 电脑掌柜ERP 官网 · 功能百科（GEO 文章）公共样式 */
:root{
  --blue:#1677ff; --blue-600:#0e5fd8; --blue-700:#0a4bb3; --blue-50:#eaf2ff; --blue-100:#dbe9ff;
  --ink:#161b24; --ink2:#46506b; --ink-3:#8a94a6;
  --line:#e7edf6; --bg:#ffffff; --soft:#f3f7ff; --soft-2:#eaf1ff;
  --grad-blue:linear-gradient(135deg,#3a92ff,#1677ff);
  --grad-vivid:linear-gradient(120deg,#1677ff 0%,#36b3ff 50%,#5ad1ff 100%);
  --radius:18px; --radius-sm:13px;
  --shadow:0 14px 38px rgba(18,49,96,.10); --shadow-sm:0 6px 18px rgba(18,49,96,.07);
  --glow-blue:0 16px 40px rgba(22,119,255,.30);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.03em;
  color:var(--blue-600); background:linear-gradient(135deg,#eef5ff,#e3edff); border:1px solid var(--blue-100);
  padding:7px 15px; border-radius:999px; box-shadow:0 4px 12px rgba(22,119,255,.10)}
.gtext{background:var(--grad-vivid); -webkit-background-clip:text; background-clip:text; color:transparent}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 26px;
  border-radius:13px; font-size:15px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:transform .18s, box-shadow .18s, background .18s; white-space:nowrap; position:relative; overflow:hidden}
.btn-primary{background:linear-gradient(135deg,#3a92ff,#1677ff); color:#fff; box-shadow:var(--glow-blue)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 42px rgba(22,119,255,.42)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px)}
.btn-sm{height:42px; padding:0 18px; font-size:14px; border-radius:11px}

.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:box-shadow .25s, background .25s, border-color .25s}
.nav.scrolled{background:rgba(255,255,255,.94); box-shadow:0 6px 22px rgba(18,49,96,.08); border-bottom-color:var(--line)}
.nav-inner{display:flex; align-items:center; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18.5px; letter-spacing:-.01em}
.brand img{width:32px; height:32px; border-radius:9px; box-shadow:0 4px 12px rgba(22,119,255,.25)}
.nav-links{display:flex; gap:30px; margin-left:26px}
.nav-links a{font-size:15px; color:var(--ink2); font-weight:600; position:relative; padding:4px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--grad-blue); border-radius:2px; transition:right .25s}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-actions{margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0}
.btn-login{
  background:linear-gradient(135deg,#f4f9ff 0%,#e8f2ff 100%);
  color:var(--blue-600); border:1.5px solid rgba(22,119,255,.42);
  box-shadow:0 4px 16px rgba(22,119,255,.16), inset 0 1px 0 rgba(255,255,255,.85);
  font-weight:700;
}
.btn-login:hover{background:linear-gradient(135deg,#dceaff 0%,#cfe4ff 100%); border-color:var(--blue); color:var(--blue-700); transform:translateY(-2px)}
.btn-login svg{width:16px; height:16px; flex-shrink:0; opacity:.92}
.nav-toggle{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:transform .22s, top .22s, opacity .18s}
.nav-toggle span::before{position:absolute; top:-6px; left:0} .nav-toggle span::after{position:absolute; top:6px; left:0}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{top:0; transform:rotate(45deg)}
.nav.open .nav-toggle span::after{top:0; transform:rotate(-45deg)}

.footer{position:relative; background:#0d1726; color:#aeb9cc; padding:58px 0 28px; margin-top:88px}
.footer::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-vivid)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.footer .fb{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:18px; margin-bottom:12px}
.footer .fb img{width:30px; height:30px; border-radius:8px}
.footer .fdesc{font-size:13.5px; line-height:1.75; max-width:300px; color:#8a97ad}
.footer h5{color:#fff; font-size:14px; margin:0 0 15px; font-weight:700}
.footer-col h5{color:#c8d2e0; font-size:13px; letter-spacing:.04em; margin-bottom:12px}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.footer ul li{font-size:13.5px; color:#aeb9cc; line-height:1.55}
.footer ul a{font-size:13.5px; color:#aeb9cc; display:inline-block; padding:2px 0}
.footer ul a:hover{color:#fff}
.footer-addr{color:#8a97ad; font-size:13px; line-height:1.65; white-space:nowrap}
.footer-phone{font-weight:600; color:#c8d2e0!important}
.footer-bot{border-top:1px solid #1e2b3f; margin-top:38px; padding-top:22px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px 20px; font-size:13px; color:#7c89a0}
.footer-beian{display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px}
.beian{color:#7c89a0; text-decoration:none}
.beian:hover{color:#fff; text-decoration:underline}
.beian-ps{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.beian-ps img{display:block; flex-shrink:0; width:16px; height:16px}
.footer-copy-sub::before{content:" · "; color:#7c89a0}

/* Article list */
.page-hero{padding:48px 0 28px; background:radial-gradient(900px 420px at 70% -10%, #dceaff 0%, rgba(220,234,255,0) 62%), linear-gradient(180deg,#f5f8fc 0%, #fff 80%)}
.page-hero h1{font-size:36px; line-height:1.25; margin:14px 0 12px; font-weight:800; letter-spacing:-.02em}
.page-hero p{margin:0; color:var(--ink2); font-size:16.5px; max-width:720px}
.crumb{font-size:13.5px; color:var(--ink-3); margin-bottom:8px}
.crumb a{color:var(--blue-600); font-weight:600}
.crumb a:hover{text-decoration:underline}
.article-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; padding:36px 0 72px}
.acard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s}
.acard:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
/* 列表封面：固定比例窗口内完整显示（contain），避免裁切 UI/营销图关键信息 */
.acard-cover{aspect-ratio:16/10; background:#e8eef6; overflow:hidden; position:relative}
.acard-cover picture{display:flex; width:100%; height:100%; align-items:center; justify-content:center; position:relative}
.acard-cover img{position:static; width:100%; height:100%; object-fit:contain; object-position:center; display:block}
.acard-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1}
.acard-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-3)}
.acard-tag{display:inline-flex; padding:3px 10px; border-radius:999px; background:var(--blue-50); color:var(--blue-600); font-weight:700; font-size:12px}
.acard h2{font-size:18px; line-height:1.4; margin:0; font-weight:800}
.acard h2 a:hover{color:var(--blue)}
.acard .sum{margin:0; color:var(--ink2); font-size:14px; line-height:1.65; flex:1}
.acard .more{font-size:14px; font-weight:700; color:var(--blue-600)}

/* Article detail */
.article-layout{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:36px; padding:28px 0 64px; align-items:start}
.article-main{min-width:0}
.article-head{margin-bottom:22px}
.article-head h1{font-size:32px; line-height:1.28; margin:10px 0 14px; font-weight:800; letter-spacing:-.02em}
.article-meta{display:flex; flex-wrap:wrap; gap:10px 16px; font-size:13.5px; color:var(--ink-3)}
/* 文章封面/正文图：完整显示，禁止 cover 裁切（UI 与营销宽图均需可读） */
.article-cover{border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); margin:0 0 28px; background:#e8eef6}
.article-cover picture{display:block; width:100%}
.article-cover img{display:block; width:100%; height:auto; object-fit:unset; background:transparent}
.prose{font-size:16.5px; line-height:1.85; color:var(--ink)}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:22px; margin:1.6em 0 .7em; font-weight:800; letter-spacing:-.01em; line-height:1.35}
.prose h3{font-size:18px; margin:1.3em 0 .55em; font-weight:800}
.prose ul,.prose ol{margin:0 0 1.15em; padding-left:1.25em}
.prose li{margin:.35em 0}
.prose a{color:var(--blue-600); font-weight:600}
.prose a:hover{text-decoration:underline}
.prose figure{margin:1.4em 0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff}
.prose figure.shot-pc > picture,
.prose figure.shot-h5 > picture,
.prose figure.shot-illust > picture,
.prose figure.shot-feature > picture{
  display:block; width:100%; background:#e8eef6;
}
.prose figure picture img{
  display:block; width:100%; height:auto; object-fit:unset; background:transparent;
}
.prose figure.shot-h5{max-width:360px; margin-left:auto; margin-right:auto}
.prose figure.shot-ico{max-width:180px; margin-left:auto; margin-right:auto; background:#0b0b0b}
.prose figure.shot-ico > picture{background:#0b0b0b}
.prose figcaption{padding:10px 14px; font-size:13px; color:var(--ink-3); background:#fff; border-top:1px solid var(--line)}
.prose .compare{background:linear-gradient(180deg,#f3f7ff,#fbfdff); border:1px solid var(--blue-100); border-radius:14px; padding:16px 18px; margin:1.2em 0 1.4em}
.prose .compare h3{margin-top:0}
.faq{margin:2em 0; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.faq h2{margin:0; padding:16px 18px; background:var(--soft); font-size:18px; border-bottom:1px solid var(--line)}
.faq-item{padding:14px 18px; border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:0}
.faq-item strong{display:block; margin-bottom:6px; font-size:15.5px}
.faq-item p{margin:0; color:var(--ink2); font-size:15px; line-height:1.7}
.cta-box{margin:2em 0 0; padding:28px 24px; border-radius:18px; background:linear-gradient(125deg,#0b46c4,#1677ff 60%,#2f9bff); color:#fff; text-align:center; box-shadow:0 20px 40px rgba(22,119,255,.28)}
.cta-box h2{margin:0 0 10px; font-size:22px}
.cta-box p{margin:0 0 18px; opacity:.94}
.cta-box .btn-primary{background:#fff; color:var(--blue-600)}
.related{margin-top:36px}
.related h2{font-size:20px; margin:0 0 14px; font-weight:800}
.related-list{display:grid; gap:10px}
.related-list a{display:block; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-weight:600; font-size:14.5px; background:#fff}
.related-list a:hover{border-color:var(--blue); color:var(--blue)}
.aside{position:sticky; top:86px}
.aside-card{border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; box-shadow:var(--shadow-sm); margin-bottom:16px}
.aside-card h3{margin:0 0 10px; font-size:15px; font-weight:800}
.aside-card p{margin:0 0 12px; font-size:13.5px; color:var(--ink2); line-height:1.65}
.aside-card ul{margin:0; padding-left:1.1em; font-size:13.5px; color:var(--ink2)}
.aside-card li{margin:.3em 0}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.tag-row span{font-size:12px; padding:4px 10px; border-radius:999px; background:var(--soft); color:var(--ink2); font-weight:600}

@media (max-width:960px){
  .article-layout{grid-template-columns:1fr}
  .aside{position:static}
  .article-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px 20px}
  .footer-brand-col{grid-column:1/-1}
  .footer-addr{white-space:nowrap}
}
@media (max-width:680px){
  .brand-full{display:none}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links{display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); margin:0; padding:8px 0; box-shadow:var(--shadow)}
  .nav.open .nav-links a{padding:14px 22px}
  .page-hero h1,.article-head h1{font-size:26px}
  .prose{font-size:15.5px}
  .prose h2{font-size:19px}
}