/* 飞蛋知识库 · 深色主题 */
:root{--bg:#0f1115;--panel:#171a21;--line:#2a2f3a;--fg:#e6e9ef;--dim:#9aa4b2;
--acc:#ffb84d;--acc2:#ff7a59;--ok:#4ade80;--warn:#fbbf24}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font:16px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
/* 图片：任何容器内不溢出、等比缩放（正文配图 / 封面统一约束） */
img{max-width:100%;height:auto}
/* 文章封面：居中、限宽、圆角描边 */
figure.cover{margin:20px 0 26px;text-align:center}
figure.cover img{display:block;width:100%;max-width:760px;height:auto;margin:0 auto;
border-radius:10px;border:1px solid var(--line);background:#fff}
/* ── 布局：左侧固定侧边栏 + 右侧内容 ─────────────────────────────── */
.layout{display:flex;align-items:flex-start;min-height:100vh}
.sidebar{flex:0 0 268px;width:268px;position:sticky;top:0;align-self:flex-start;
height:100vh;overflow-y:auto;overscroll-behavior:contain;
background:var(--panel);border-right:1px solid var(--line);
padding:16px 0 40px}
.content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
/* 侧边栏滚动条压细，深色底上不刺眼 */
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#333a47;border-radius:99px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.brand{display:flex;align-items:baseline;gap:8px;font-size:20px;
padding:6px 18px 16px;border-bottom:1px solid var(--line);margin-bottom:10px}
.brand b{color:var(--acc);font-size:24px}
.brand span{color:var(--dim);font-size:12px}
/* 分组：<details> 折叠。summary 是分组标题行 */
.nav-group{margin:1px 0}
.nav-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
gap:10px;padding:9px 18px;font-size:14px;color:var(--fg);
border-radius:0;transition:background .12s}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::marker{content:""}
.nav-group>summary:hover{background:rgba(255,255,255,.04)}
.nav-group>summary .ico{width:17px;height:17px;flex:0 0 17px;color:var(--dim)}
.nav-group[open]>summary{color:var(--acc)}
.nav-group[open]>summary .ico{color:var(--acc)}
/* 分组名固定宽度：四字中文 / 等宽英文都要占满，图标后的文字起点才对齐。
   用固定 width 而不是 min-width —— 万一将来加了长名字，宁可让它自己换行
   也不要撑歪整列。 */
.nav-group>summary>span{flex:1 1 auto;min-width:0;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
/* 展开/收起箭头 */
.nav-group>summary::after{content:"";width:6px;height:6px;flex:0 0 6px;
border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);
transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
.nav-group[open]>summary::after{transform:rotate(45deg)}
.nav-links{display:flex;flex-direction:column;padding:2px 0 8px}
/* 二级分区标签（不可点）：小号大写感、更暗，用于把长分组切成有序列的小块 */
.nav-label{padding:9px 18px 3px 45px;font-size:11px;letter-spacing:.08em;
color:var(--mute,rgba(255,255,255,.38));text-transform:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-links a{display:block;padding:6px 18px 6px 45px;font-size:13.5px;
color:var(--dim);line-height:1.5;border-left:2px solid transparent}
.nav-links a:hover{color:var(--fg);background:rgba(255,255,255,.03);
text-decoration:none}
.nav-links a.cur{color:var(--acc2);font-weight:600;
border-left-color:var(--acc2);background:rgba(255,122,89,.07)}
/* 顶部条：面包屑 + 语言切换 */
.topbar{position:sticky;top:0;z-index:9;background:rgba(15,17,21,.95);
backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
padding:11px 28px;display:flex;align-items:center;gap:16px}
.crumb-home{font-size:13px;color:var(--dim)}
.crumb-home::before{content:"← "}
.crumb-home:hover{color:var(--acc);text-decoration:none}
.lang-switch{margin-left:auto;font-size:13px;border:1px solid var(--line);
border-radius:6px;padding:5px 12px;color:var(--dim);background:var(--panel);
transition:.15s;text-decoration:none}
.lang-switch:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
main{max-width:1120px;margin:0 auto;padding:34px 28px 60px;display:grid;
grid-template-columns:minmax(0,1fr) 220px;gap:44px;align-items:start;
width:100%}
main.home,main:has(article:only-child){display:block}
article{min-width:0}
h1{font-size:30px;line-height:1.35;margin:6px 0 8px}
h2{font-size:22px;margin:38px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
h3{font-size:17px;margin:26px 0 8px;color:var(--acc)}
h4{font-size:15px;margin:20px 0 6px}
.meta{color:var(--dim);font-size:13px;margin:0 0 22px}
.lead{font-size:17px;color:var(--dim);max-width:760px}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--panel);color:var(--acc);font-weight:600}
tr:nth-child(even) td{background:rgba(255,255,255,.015)}
code{background:var(--panel);border:1px solid var(--line);border-radius:4px;
padding:1px 5px;font-size:13px;color:var(--acc2)}
blockquote{margin:16px 0;padding:12px 16px;border-left:3px solid var(--acc);
background:var(--panel);border-radius:0 6px 6px 0}
blockquote.callout,blockquote.warn,blockquote.ok,blockquote.info{border-left-width:4px}
blockquote.warn{border-left-color:var(--warn)}
blockquote.ok{border-left-color:var(--ok)}
blockquote.info{border-left-color:#60a5fa}
/* 引用块内部的段落与小标题（引用块原来整段压成一行，标记原样显示） */
blockquote p{margin:6px 0}
blockquote p:first-child{margin-top:0}
blockquote p:last-child{margin-bottom:0}
blockquote p.quote-title{margin:0 0 6px;font-weight:700;color:var(--fg);
font-size:14px;letter-spacing:.02em}
.src{display:inline-block;font-size:12px;color:var(--dim);
border:1px dashed var(--line);border-radius:4px;padding:0 6px;margin-left:4px}
.unverified{display:inline-block;font-size:12px;color:var(--warn);
border:1px dashed var(--warn);border-radius:4px;padding:0 6px}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.toc{position:sticky;top:86px;font-size:13px;border-left:1px solid var(--line);padding-left:16px}
.toc-title{color:var(--dim);font-size:12px;margin-bottom:8px;letter-spacing:.06em}
.toc a{display:block;color:var(--dim);padding:3px 0;line-height:1.5}
.toc a:hover{color:var(--acc)}
.toc a.lvl2{color:var(--fg);opacity:.85}
.toc a.lvl3{padding-left:12px;font-size:12px}
.cards{list-style:none;padding:0;margin:14px 0 0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.cards a{display:block;background:var(--panel);border:1px solid var(--line);
border-radius:10px;padding:16px 18px;transition:border-color .15s}
.cards a:hover{border-color:var(--acc);text-decoration:none}
.cards b{display:block;color:var(--fg);margin-bottom:6px}
.cards span{color:var(--dim);font-size:13px;line-height:1.6}
/* 总目录页里的分组小标题：跨整行、不占卡片格 */
.cards li.card-label{grid-column:1/-1;margin:16px 0 -2px;padding:0 2px;
font-size:12px;letter-spacing:.08em;color:var(--acc);opacity:.85;
border-bottom:1px solid var(--line);padding-bottom:6px}
/* ── 营销首页组件 ───────────────────────────────────────── */
.hero{padding:52px 0 20px;max-width:820px}
.kicker{color:var(--acc);font-size:13px;letter-spacing:.05em;margin:0 0 14px}
.hero h1{font-size:40px;line-height:1.25;margin:0 0 18px}
.hero .lead{font-size:17px;color:var(--dim);line-height:1.85;max-width:700px}
.hero .lead strong{color:var(--fg)}
.cta-row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 26px;border:1px solid var(--line);
border-radius:8px;color:var(--fg);font-size:15px;transition:.15s}
.btn:hover{border-color:var(--acc);text-decoration:none}
.btn.primary{background:var(--acc);color:#14161b;border-color:var(--acc);font-weight:600}
.btn.primary:hover{background:var(--acc2);border-color:var(--acc2)}
.paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:16px}
.path-card{display:block;background:var(--panel);border:1px solid var(--line);
border-radius:10px;padding:22px 24px;transition:border-color .15s}
.path-card:hover{border-color:var(--acc);text-decoration:none}
.path-card h3{margin:0 0 10px;color:var(--fg);font-size:17px}
.path-card p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.75}
.path-card .go{display:inline-block;margin-top:14px;color:var(--acc);font-size:13px}
.why{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin-top:16px}
.why-item h3{margin:0 0 8px;font-size:16px;color:var(--fg)}
.why-item h3::before{content:"▍";color:var(--acc);margin-right:6px}
.why-item p{margin:0;color:var(--dim);font-size:14px;line-height:1.85}
.home-sec{margin-top:38px}
/* ── 下载二维码 / 演示视频 ─────────────────────────────── */
.dl-wrap{margin:18px 0 14px;background:#fff;border:1px solid var(--line);
border-radius:12px;padding:16px;display:inline-block;max-width:100%}
.dl-qr{display:block;width:100%;max-width:760px;height:auto;border-radius:6px}
/* 下载二维码卡片组：每张码独立成卡，说明文字是网页元素（可被 SEO/AI 读取） */
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:16px;margin:20px 0 16px}
.qr-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;
transition:border-color .15s}
.qr-card:hover{border-color:var(--acc)}
.qr-card img{display:block;width:100%;max-width:160px;height:auto;
background:#fff;border-radius:8px;padding:6px}
.qr-card h3{margin:12px 0 4px;font-size:15px;color:var(--fg)}
.qr-card p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.6}
.qr-card .tag{display:inline-block;margin-top:8px;font-size:11px;
letter-spacing:.04em;padding:2px 8px;border-radius:99px;
border:1px solid var(--line);color:var(--dim)}
.qr-card .tag.cn{border-color:rgba(239,68,68,.4);color:#f87171}
.qr-card .tag.intl{border-color:rgba(96,165,250,.4);color:#60a5fa}
.qr-card .tag.tool{border-color:rgba(52,211,153,.4);color:#34d399}
.qr-group-title{font-size:16px;color:var(--acc);margin:26px 0 0;
padding-bottom:6px;border-bottom:1px solid var(--line)}
/* 商品图（本地化后的商品照片） */
.product-photo{margin:0 0 24px;padding:0}
.product-photo img{display:block;width:100%;max-width:420px;height:auto;
background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.product-photo figcaption{margin-top:8px;font-size:12px;color:var(--dim);
max-width:420px;line-height:1.6}
.dl-note{list-style:none;padding:0;margin:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.dl-note li{background:var(--panel);border:1px solid var(--line);border-radius:8px;
padding:14px 16px;color:var(--dim);font-size:13.5px;line-height:1.75}
.dl-note b{color:var(--fg)}
.demo-video{display:block;width:100%;max-width:300px;height:auto;margin:18px 0 14px;
background:#000;border:1px solid var(--line);border-radius:14px}
/* 演示区：视频与配对码并排 */
.demo-row{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin:18px 0 14px}
.demo-row .demo-video{margin:0}
.pair-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;
max-width:260px}
.pair-card img{display:block;width:100%;max-width:170px;height:auto;
background:#fff;border-radius:8px;padding:6px}
.pair-card h3{margin:12px 0 6px;font-size:15px;color:var(--fg)}
.pair-card p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.65}
@media(max-width:640px){.demo-row{flex-direction:column;gap:20px}}
footer{border-top:1px solid var(--line);padding:26px 28px 44px;max-width:1120px;
margin:0 auto;color:var(--dim);font-size:13px}
.disclaimer{max-width:820px;line-height:1.8}
/* 资质公示：页脚固定区块，编号是外链（跳官方查询站核验） */
.cert-block{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
max-width:820px}
.cert-title{color:var(--fg);font-size:12.5px;font-weight:600;margin:0 0 8px;
letter-spacing:.02em}
.cert-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:6px 18px}
.cert-list li{display:flex;align-items:baseline;gap:6px;line-height:1.6}
.cert-label{color:#6b7280;white-space:nowrap}
.cert-no{color:var(--acc);white-space:nowrap}
.cert-note{color:#6b7280;font-size:12px;margin:9px 0 0;line-height:1.6}
@media(max-width:640px){.cert-list{flex-direction:column;gap:4px}
.cert-list li{gap:5px}}
.foot-links{margin-top:14px}
.copy{margin-top:10px;color:#6b7280}
/* ── 商品总览页的卡片网格 ─────────────────────────────────────────── */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:14px;margin:14px 0 26px}
.prod-card{display:flex;flex-direction:column;background:var(--panel);
border:1px solid var(--line);border-radius:10px;padding:12px;
transition:border-color .15s,transform .15s}
.prod-card:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-1px)}
/* 商品图：方形、白底、等比裁切 —— 货源图长宽比不统一，裁切后网格才整齐 */
.prod-card img{display:block;width:100%;aspect-ratio:1/1;height:auto;
object-fit:contain;background:#fff;border-radius:7px;margin-bottom:11px}
.prod-card h4{margin:0 0 6px;font-size:14.5px;color:var(--fg);line-height:1.45}
.prod-card .prod-brand{margin:0 0 8px;font-size:12px;color:var(--acc)}
.prod-card .prod-spec{margin:auto 0 0;font-size:12px;color:var(--dim);line-height:1.6}
@media(max-width:900px){main{grid-template-columns:1fr}.toc{display:none}}
/* ── 响应式：侧边栏在窄屏收成可横向滚动的顶栏 ────────────────────── */
@media(max-width:1000px){
  .layout{flex-direction:column}
  .sidebar{position:static;width:100%;flex:0 0 auto;height:auto;
    overflow:visible;border-right:0;border-bottom:1px solid var(--line);
    padding:12px 0 14px}
  /* 分组改成横向排布，整条可左右滑动；否则 9 个分组会占满整屏 */
  .sidebar .nav-links{display:none}
  .sidebar{display:flex;flex-wrap:wrap;align-items:center;
    padding:10px 14px 12px;gap:6px}
  .brand{flex:1 0 100%;border-bottom:0;padding:0 0 10px;margin:0}
  .nav-group{flex:0 0 auto}
  .nav-group>summary{padding:6px 12px;border:1px solid var(--line);
    border-radius:99px;font-size:13px}
  .nav-group>summary::after{display:none}
  .nav-group[open]{flex:1 0 100%}
  .nav-group[open] .nav-links{display:flex;flex-direction:column;
    padding:6px 0 4px}
  .nav-group[open] .nav-links a{padding:7px 14px 7px 30px;
    border-left:0;border-radius:6px}
  .nav-group[open] .nav-links a.cur{border-left:0}
}
@media(max-width:640px){
  .topbar{padding:10px 18px}
  main{padding:24px 18px 48px}
  .nav-group>summary{padding:5px 10px;font-size:12.5px}
  .nav-group>summary .ico{display:none}
}
