/* flow.模具设计.中国 — 独立设计样式（fl- 前缀，流动科技风） */
:root{
  --fl-navy:#07142b; --fl-navy2:#0c1f3d; --fl-ink:#16233b;
  --fl-line:#e4ebf4; --fl-cyan:#2dd4bf; --fl-sky:#38bdf8;
  --fl-text:#1f2a3d; --fl-muted:#5b6b85; --fl-bg:#ffffff; --fl-soft:#f3f8fd;
  --fl-grad:linear-gradient(120deg,#2dd4bf 0%,#38bdf8 60%,#6366f1 100%);
  --fl-radius:14px; --fl-shadow:0 10px 30px rgba(13,32,65,.08);
  /* 面包屑与正文 H2 左缘对齐：详情/列表=16px，页面卡片=48px */
  --h2-inset:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:"Segoe UI",system-ui,-apple-system,"Microsoft YaHei",sans-serif;
  color:var(--fl-text); background:var(--fl-bg); line-height:1.75; font-size:16px;
}
a{color:#0e7490; text-decoration:none;}
a:hover{color:var(--fl-cyan);}
img{max-width:100%;}

/* ── Header ── */
.fl-header{position:fixed; top:0; left:0; right:0; z-index:50; height:64px;
  background:rgba(7,20,43,.86); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08);}
.fl-header-inner{max-width:1200px; margin:0 auto; height:64px; padding:0 20px;
  display:flex; align-items:center; gap:18px;}
.fl-brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:18px;}
.fl-brand-mark{width:22px; height:22px; border-radius:6px; background:var(--fl-grad);
  box-shadow:0 0 14px rgba(45,212,191,.6);}
.fl-nav{display:flex; gap:22px; margin-left:auto;}
.fl-nav a{color:#cdd9ec; font-size:15px; padding:6px 2px; border-bottom:2px solid transparent;}
.fl-nav a:hover{color:#fff; border-bottom-color:var(--fl-cyan);}
.fl-menu-toggle{display:none; margin-left:auto; background:none; border:0; color:#fff; font-size:24px; cursor:pointer;}

/* ── Layout containers ── */
.fl-main-wrap{padding-top:64px;}
.fl-doc{max-width:1200px; margin:0 auto; padding:0 20px;}
.fl-doc-page{--h2-inset:48px;}
.fl-crumbs{padding:18px 0 6px var(--h2-inset); font-size:13.5px; color:var(--fl-muted);
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.fl-crumbs a{color:var(--fl-muted);}
.fl-crumbs a:hover{color:var(--fl-cyan);}
.fl-crumb-sep{margin:0 6px; color:#b7c2d4;}
.fl-crumb-current{color:var(--fl-ink); font-weight:600;}
/* 首页：让 .fl-section 与面包屑共用 --h2-inset 左缘（仅作用于 .fl-doc 直接子元素，不影响列表/单页） */
.fl-doc > .fl-section{padding-left:var(--h2-inset);}

.fl-layout{display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:40px; align-items:start;
  padding-bottom:56px;}
.fl-main{padding-left:var(--h2-inset); min-width:0;}
.fl-h1{font-size:30px; line-height:1.3; margin:6px 0 10px; color:var(--fl-navy); font-weight:800;}
.fl-update{font-size:13px; color:var(--fl-muted); margin-bottom:14px;}
.fl-update time{font-variant-numeric:tabular-nums;}

/* ── Summary / lead block (AEO 首段直接回答) ── */
.fl-summary{margin:0 0 18px; padding:14px 18px; background:linear-gradient(180deg,#eafaf6,#f3f8fd);
  border-left:4px solid var(--fl-cyan); border-radius:10px; color:var(--fl-ink); font-size:15.5px; line-height:1.7;}
.fl-summary-tag{display:inline-block; font-weight:800; color:var(--fl-navy); margin-right:8px; font-size:13px;
  letter-spacing:.06em; border:1px solid var(--fl-cyan); border-radius:6px; padding:1px 8px;}

/* ── TOC ── */
.toc-aside{position:sticky; top:84px; max-height:calc(100vh - 110px); overflow-y:auto;}
.fl-toc{background:var(--fl-soft); border:1px solid var(--fl-line); border-radius:var(--fl-radius); padding:14px 16px;}
.fl-toc-title{margin:0 0 8px; font-size:13px; font-weight:700; color:var(--fl-navy); letter-spacing:.04em;}
.fl-toc-list{list-style:none; margin:0; padding:0; font-size:13.5px;}
.fl-toc-list li{margin:4px 0;}
.fl-toc-lvl2 a{color:var(--fl-text);}
.fl-toc-lvl3{padding-left:14px;}
.fl-toc-lvl3 a{color:var(--fl-muted);}
.fl-toc-list a:hover{color:var(--fl-cyan);}

/* ── Body typography ── */
.fl-body{font-size:16px;}
.fl-body h2{font-size:22px; margin:34px 0 12px; color:var(--fl-navy); font-weight:700;
  border-left:4px solid var(--fl-cyan); padding-left:12px;}
.fl-body h3{font-size:18px; margin:24px 0 10px; color:var(--fl-ink);}
.fl-body p{margin:12px 0;}
.fl-body ul,.fl-body ol{margin:12px 0; padding-left:24px;}
.fl-body li{margin:6px 0;}
.fl-body blockquote{margin:16px 0; padding:14px 18px; background:linear-gradient(180deg,#eafaf6,#f3f8fd);
  border-left:4px solid var(--fl-cyan); border-radius:10px; color:var(--fl-ink);}
.fl-body blockquote p{margin:6px 0;}
.fl-lead,.fl-body>blockquote:first-of-type{font-size:16px; background:linear-gradient(180deg,#eafaf6,#f3f8fd);
  border-left:4px solid var(--fl-cyan); padding:16px 18px; border-radius:10px;}

/* tables */
.fl-body table{border-collapse:collapse; width:100%; margin:16px 0; font-size:14.5px; background:#fff;
  border:1px solid var(--fl-line); border-radius:10px; overflow:hidden;}
.fl-body table th{background:var(--fl-navy2); color:#fff; text-align:left; padding:10px 12px; font-weight:600;}
.fl-body table td{border-top:1px solid var(--fl-line); padding:9px 12px;}
.fl-body table tr:nth-child(even) td{background:var(--fl-soft);}
/* 兼容旧 class */
table.data{border-collapse:collapse; width:100%; margin:16px 0; font-size:14.5px; background:#fff;
  border:1px solid var(--fl-line); border-radius:10px; overflow:hidden;}
table.data th{background:var(--fl-navy2); color:#fff; text-align:left; padding:10px 12px; font-weight:600;}
table.data td{border-top:1px solid var(--fl-line); padding:9px 12px;}
table.data tr:nth-child(even) td{background:var(--fl-soft);}

/* tags */
.fl-tags{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px;}
.tag-text{display:inline-block; background:var(--fl-soft); border:1px solid var(--fl-line);
  color:var(--fl-muted); font-size:12.5px; padding:3px 10px; border-radius:999px;}

/* FAQ details */
.fl-body details{border:1px solid var(--fl-line); border-radius:10px; padding:10px 14px; margin:10px 0; background:#fff;}
.fl-body details[open]{background:var(--fl-soft);}
.fl-body summary{cursor:pointer; font-weight:700; color:var(--fl-navy);}
.fl-body details p{margin:8px 0 0;}

/* ── Hero ── */
.fl-hero{position:relative; background:radial-gradient(120% 120% at 80% 0%,#102a52 0%,#07142b 60%);
  color:#fff; overflow:hidden; padding:72px 20px 64px;}
.fl-hero-inner{max-width:1200px; margin:0 auto; position:relative; z-index:2;}
.fl-hero-kicker{color:var(--fl-cyan); font-weight:700; letter-spacing:.12em; font-size:13px; margin:0 0 10px;}
.fl-hero-title{font-size:40px; line-height:1.25; margin:0 0 16px; font-weight:800;}
.fl-hero-sub{max-width:760px; color:#cdd9ec; font-size:16px; margin:0 0 24px;}
.fl-hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.fl-btn{padding:11px 22px; border-radius:999px; font-weight:700; font-size:15px; display:inline-block;}
.fl-btn-primary{background:var(--fl-grad); color:#06243a;}
.fl-btn-ghost{border:1px solid rgba(255,255,255,.4); color:#fff;}
.fl-btn-ghost:hover{background:rgba(255,255,255,.1); color:#fff;}
.fl-hero-flow{position:absolute; inset:0; z-index:1; opacity:.5;
  background:
    radial-gradient(40% 60% at 20% 20%,rgba(45,212,191,.25),transparent),
    radial-gradient(50% 50% at 90% 80%,rgba(99,102,241,.25),transparent);}

/* ── Sections (home) ── */
.fl-section{max-width:1200px; margin:0 auto; padding:40px 0 8px;}
.fl-sec-title{font-size:24px; color:var(--fl-navy); margin:0 0 18px; font-weight:800;
  border-left:4px solid var(--fl-cyan); padding-left:12px;}
.fl-rail-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.fl-rail{background:var(--fl-soft); border:1px solid var(--fl-line); border-radius:var(--fl-radius); padding:20px 22px;}
.fl-rail h3{margin:0 0 12px; color:var(--fl-navy); font-size:18px;}
.fl-rail ul{margin:0; padding-left:20px;}
.fl-rail li{margin:8px 0;}
.fl-service-grid,.fl-scenario-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.fl-service,.fl-scenario{background:#fff; border:1px solid var(--fl-line); border-radius:var(--fl-radius);
  padding:18px 20px; box-shadow:var(--fl-shadow);}
.fl-service h3,.fl-scenario h3{margin:0 0 8px; color:var(--fl-navy); font-size:17px;}
.fl-service p,.fl-scenario p{margin:0; color:var(--fl-muted); font-size:14.5px;}
.fl-cat-entry{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.fl-cat-col{background:var(--fl-soft); border:1px solid var(--fl-line); border-radius:var(--fl-radius); padding:18px 22px;}
.fl-cat-col h3{margin:0 0 10px; color:var(--fl-navy); font-size:17px;}
.fl-cat-col ul{margin:0; padding-left:20px;}
.fl-cat-col li{margin:6px 0;}

/* ── List page ── */
.fl-list-layout{display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; padding-bottom:56px;}
.fl-cat-side{position:sticky; top:84px; align-self:start;}
.fl-cat-side-title{font-size:13px; font-weight:700; color:var(--fl-muted); margin:0 0 10px; letter-spacing:.04em;}
ul.category-list{list-style:none; margin:0; padding:0; border:1px solid var(--fl-line); border-radius:12px; overflow:hidden;}
ul.category-list li a{display:block; padding:11px 16px; color:var(--fl-text); border-bottom:1px solid var(--fl-line); font-size:14.5px;}
ul.category-list li:last-child a{border-bottom:0;}
ul.category-list li a:hover{background:var(--fl-soft); color:var(--fl-cyan);}
ul.category-list li a.active{background:var(--fl-navy2); color:#fff; font-weight:600;}
.fl-cat-content{padding-left:var(--h2-inset); min-width:0;}
.fl-list-desc{color:var(--fl-muted); margin:6px 0 20px;}
.fl-item-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.fl-item{border:1px solid var(--fl-line); border-radius:12px; padding:16px 18px; background:#fff; box-shadow:var(--fl-shadow);}
.fl-item-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.fl-item-title{font-weight:700; color:var(--fl-navy); font-size:16px;}
.fl-item-cat{font-size:12px; color:var(--fl-muted); background:var(--fl-soft); border:1px solid var(--fl-line);
  padding:2px 9px; border-radius:999px; white-space:nowrap;}
.fl-item-desc{margin:8px 0 0; color:var(--fl-muted); font-size:14px;}

/* ── Page / archive ── */
.fl-page-main{max-width:860px; margin:0; padding-left:var(--h2-inset); padding-bottom:56px;}
.fl-archive-list{list-style:none; margin:0; padding:0;}
.fl-archive-list li{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--fl-line);}
.fl-archive-cat{font-size:12px; color:var(--fl-muted); white-space:nowrap;}
.fl-404{text-align:center; padding-top:60px;}

/* ── Footer ── */
.fl-footer{background:var(--fl-navy); color:#cdd9ec; margin-top:40px; padding:40px 20px 0;}
.fl-footer-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.fl-footer h4{color:#fff; margin:0 0 12px; font-size:16px;}
.fl-footer p{margin:6px 0; font-size:14px;}
.fl-footer a{color:#9fd9e8;}
.fl-footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:30px; padding:16px 0; text-align:center; font-size:13px; color:#8aa0c0;}

/* ── Floating capsule ── */
.fl-capsule{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:10px;}
.fl-capsule-btn{display:flex; align-items:center; gap:8px; border:0; cursor:pointer;
  background:var(--fl-grad); color:#06243a; font-weight:700; font-size:14px;
  padding:10px 14px; border-radius:999px; box-shadow:0 8px 22px rgba(45,212,191,.45);}
.fl-capsule-btn:hover{filter:brightness(1.05);}
.fl-cap-ico{font-size:16px;}
.fl-capsule-wechat{background:#07c160; color:#fff;}

/* card mask */
.fl-card-mask{position:fixed; inset:0; background:rgba(7,20,43,.72); z-index:80; display:flex;
  align-items:center; justify-content:center; padding:20px;}
/* 关键：显式覆盖 hidden，否则 class 的 display:flex 会压过浏览器默认的 [hidden]{display:none} 导致无法关闭 */
.fl-card-mask[hidden]{display:none !important;}
.fl-card-box{position:relative; background:#fff; border-radius:14px; padding:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);}
.fl-card-img{display:block; width:300px; height:500px; object-fit:contain; border-radius:8px;}
.fl-card-close{position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%;
  border:0; background:#fff; color:#07142b; font-size:22px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.3);}

/* ── Responsive ── */
.fl-cat-toggle{display:none;}
@media (max-width:900px){
  .fl-layout{grid-template-columns:1fr;}
  .toc-aside{position:static; max-height:none;}
  .fl-rail-grid,.fl-service-grid,.fl-scenario-grid,.fl-cat-entry{grid-template-columns:1fr;}
  .fl-item-grid{grid-template-columns:1fr;}
  .fl-hero-title{font-size:30px;}
}
@media (max-width:760px){
  .fl-nav{position:absolute; top:64px; left:0; right:0; background:var(--fl-navy); flex-direction:column;
    gap:0; padding:8px 0; display:none; border-bottom:1px solid rgba(255,255,255,.1);}
  .fl-nav.open{display:flex;}
  .fl-nav a{padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.06);}
  .fl-menu-toggle{display:block;}
  .fl-list-layout{grid-template-columns:1fr; gap:16px;}
  .fl-cat-side{position:static;}
  .fl-cat-toggle{display:inline-block; margin:0 0 10px; background:var(--fl-navy2); color:#fff;
    border:0; border-radius:8px; padding:8px 14px; font-size:14px; cursor:pointer;}
  ul.category-list{max-height:0; overflow:hidden; transition:max-height .25s ease; border:0;}
  ul.category-list.open{max-height:600px; border:1px solid var(--fl-line);}
  .fl-footer-inner{grid-template-columns:1fr;}
  .fl-h1{font-size:24px;}
}