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

/* ============================================================
   设计系统：与「混剪智能体」同源
   深色 #0a1513 暗青底 + #14b8a6 品牌青 + 玻璃卡片
   ============================================================ */
:root{
  --brand:#14b8a6;--brand-bright:#2dd4bf;--brand-deep:#0f766e;
  --brand-soft:rgba(45,212,191,.1);--brand-soft-2:rgba(45,212,191,.22);
  --brand-rgb:45,212,191;--brand-rgb-2:20,184,166;
  --txt-accent:#7ce0d3;
  --primary:#2dd4bf;--primary-light:#5eead4;--primary-dark:#14b8a6;
  --accent:#34d399;--accent-light:#6ee7b7;
  --success:#34d399;--warning:#fbbf24;--danger:#f87171;
  --text:#e3efed;--text-secondary:#91a8a4;--text-muted:#5e7d78;
  --bg:#0a1513;--card:#101e1b;--card-2:#0c1d1a;
  --border:#20322f;--border-light:#16241f;
  --row-even:rgba(255,255,255,.025);
  --code-bg:var(--brand-soft);--code-text:#7ce0d3;
  --tip-bg:rgba(45,212,191,.07);--tip-line:rgba(45,212,191,.22);--tip-text:#9fe8de;
  --warn-bg:rgba(251,191,36,.07);--warn-line:rgba(251,191,36,.25);--warn-text:#fcd34d;
  --nav-glass:rgba(13,24,22,.92);
  --bar-bg:rgba(13,24,22,.92);
  --glow-a:rgba(20,184,166,.1);--glow-b:rgba(20,184,166,.06);
  --radius:16px;--radius-sm:12px;--radius-xs:9px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.25);
  --shadow:0 2px 6px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.3);
  --shadow-lg:0 10px 24px -3px rgba(0,0,0,.4),0 4px 8px -4px rgba(0,0,0,.3);
  --shadow-xl:0 30px 80px rgba(0,0,0,.5);
  --gradient-primary:linear-gradient(120deg,#14b8a6,#0ea5a0 55%,#10b981);
  --gradient-bar:linear-gradient(180deg,#2dd4bf,#0f766e);
  --gradient-dark:linear-gradient(150deg,#0e3f38,#0a2b26 65%,#092521);
  --gradient-hero:linear-gradient(150deg,#0e3f38,#0a2b26 65%,#092521);
  --grad-text:linear-gradient(95deg,#5eead4 10%,#2dd4bf 45%,#34d399 90%);
  --btn-primary-text:#04201c;
  /* 排版令牌 */
  --fs-body:clamp(14.5px,.4vw + 13.4px,15.5px);
  --fs-h1:clamp(28px,4.5vw + 12px,44px);
  --fs-h2:clamp(20px,1.5vw + 14px,24px);
  --fs-h3:clamp(15.5px,.7vw + 13px,17px);
  --gutter:clamp(16px,4vw,32px);
  --section-y:clamp(44px,7vw,72px);
  color-scheme:dark;
}

/* ===== 浅色主题（混剪同源浅青） ===== */
html[data-theme="light"]{
  --brand:#0d9488;--brand-bright:#14b8a6;--brand-deep:#0f766e;
  --brand-soft:#e6f7f4;--brand-soft-2:#d3f1ec;
  --brand-rgb:13,148,136;--brand-rgb-2:20,184,166;
  --txt-accent:#0f766e;
  --primary:#0d9488;--primary-light:#14b8a6;--primary-dark:#0f766e;
  --accent:#10b981;--accent-light:#34d399;
  --success:#10b981;--warning:#f59e0b;--danger:#ef4444;
  --text:#16282c;--text-secondary:#5e7077;--text-muted:#8fa3a0;
  --bg:#f2f6f5;--card:#ffffff;--card-2:#fafdfc;
  --border:#e2eae9;--border-light:#edf3f2;
  --row-even:#fafdfc;
  --code-bg:#e6f7f4;--code-text:#0f766e;
  --tip-bg:#ecf8f6;--tip-line:#bfe5df;--tip-text:#0f766e;
  --warn-bg:#fff8ea;--warn-line:#f1d8a3;--warn-text:#a26f0c;
  --nav-glass:rgba(255,255,255,.92);
  --bar-bg:rgba(255,255,255,.92);
  --glow-a:rgba(20,184,166,.07);--glow-b:rgba(20,184,166,.04);
  --shadow-sm:0 1px 3px rgba(22,60,54,.05);
  --shadow:0 2px 6px rgba(22,60,54,.04),0 12px 32px rgba(22,60,54,.06);
  --shadow-lg:0 10px 24px -3px rgba(22,60,54,.08),0 4px 8px -4px rgba(22,60,54,.05);
  --shadow-xl:0 30px 80px rgba(22,60,54,.12);
  color-scheme:light;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;color:var(--text);background:radial-gradient(800px 400px at 90% -8%,var(--glow-a),transparent 60%),radial-gradient(600px 380px at -5% 30%,var(--glow-b),transparent 55%),var(--bg);background-attachment:fixed;line-height:1.8;font-size:var(--fs-body);overflow-x:hidden;transition:background-color .25s,color .25s}
img,video{max-width:100%;height:auto}
a{color:var(--txt-accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--brand-bright)}
html[data-theme="light"] a:hover{color:var(--brand)}

/* ===== 主题切换按钮 ===== */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:34px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:15px;cursor:pointer;font-family:inherit;transition:border-color .2s,transform .15s;line-height:1;flex-shrink:0}
.theme-toggle:hover{border-color:var(--brand)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle.floating{position:fixed;top:14px;right:14px;z-index:260;height:40px;min-width:40px;background:var(--nav-glass);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-lg);backdrop-filter:blur(12px)}
.theme-toggle.floating:hover{border-color:var(--brand)}

/* ===== Topbar：品牌栏 ===== */
.topbar{background:var(--bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);padding:0 var(--gutter);min-height:60px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border)}
.topbar .logo{font-weight:700;font-size:clamp(14.5px,1.3vw + 11px,16.5px);letter-spacing:.5px;margin-right:auto;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:11px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar .logo::before{content:"织";width:34px;height:34px;min-width:34px;border-radius:10px;background:linear-gradient(140deg,#14b8a6,#0d9488);box-shadow:0 5px 16px rgba(20,184,166,.35),inset 0 1px 0 rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff}
.topbar a{color:var(--text-secondary);text-decoration:none;font-size:13.5px;padding:6px 14px;border-radius:9px;transition:all .2s;white-space:nowrap}
.topbar a:hover{color:var(--txt-accent);background:var(--brand-soft)}
.topbar .back{display:inline-flex;align-items:center;gap:4px;font-weight:500}
.topbar .nav-links{display:flex;gap:4px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.topbar .nav-links::-webkit-scrollbar{display:none}

/* ===== Hero（guide 首页主视觉：通透式） ===== */
.hero{background:transparent;color:var(--text);padding:clamp(44px,7vw,68px) var(--gutter) clamp(36px,5vw,52px);text-align:center;position:relative;overflow:hidden}
.hero-content{position:relative;z-index:1;max-width:860px;margin:0 auto}
.hero h1{font-size:var(--fs-h1);font-weight:800;margin-bottom:14px;letter-spacing:1px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-wrap:balance}
.hero .subtitle{font-size:clamp(14px,.9vw + 11.5px,16px);color:var(--text-secondary);max-width:600px;margin:0 auto 30px;line-height:1.75}
.hero .badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--brand-bright);letter-spacing:1px;border:1px solid rgba(45,212,191,.25);background:rgba(20,184,166,.07);border-radius:999px;padding:5px 18px;margin-bottom:22px}
.hero .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-bright);box-shadow:0 0 8px var(--brand-bright);animation:pulse 2s ease infinite}
@keyframes pulse{50%{opacity:.35}}
.hero-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 32px;border-radius:14px;font-size:15px;font-weight:600;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,border-color .2s,background .2s;cursor:pointer;border:none;font-family:inherit}
.hero-btn:active{transform:scale(.97)}
.hero-btn.primary{background:var(--gradient-primary);color:var(--btn-primary-text);box-shadow:0 10px 32px rgba(20,184,166,.38),inset 0 1px 0 rgba(255,255,255,.35)}
.hero-btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(20,184,166,.5),inset 0 1px 0 rgba(255,255,255,.35);color:var(--btn-primary-text)}
.hero-btn.secondary{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--border);backdrop-filter:blur(6px)}
.hero-btn.secondary:hover{transform:translateY(-2px);border-color:rgba(45,212,191,.4);background:var(--brand-soft);color:var(--text)}
html[data-theme="light"] .hero-btn.secondary{background:var(--card)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:14px;max-width:680px;margin:clamp(34px,5vw,48px) auto 0}
.hero-stat{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 14px 16px;text-align:center;position:relative;overflow:hidden;transition:transform .2s ease,border-color .2s}
.hero-stat::before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,.6),transparent)}
.hero-stat:hover{transform:translateY(-3px);border-color:var(--brand-soft-2)}
.hero-stat .num{display:block;font-size:clamp(22px,2vw + 14px,30px);font-weight:800;line-height:1.25;background:linear-gradient(120deg,#5eead4,#2dd4bf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="light"] .hero-stat .num{background:linear-gradient(120deg,#0d9488,#0f766e);-webkit-background-clip:text;background-clip:text}
.hero-stat .label{font-size:12.5px;color:var(--text-secondary);margin-top:3px}

/* ===== Hero 紧凑版 ===== */
.hero-compact{padding:clamp(36px,5.5vw,54px) var(--gutter) clamp(30px,4.5vw,44px)}

/* ===== 页内锚点导航 ===== */
.anchor-nav{position:sticky;top:60px;z-index:90;background:var(--bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.anchor-nav-inner{max-width:1100px;margin:0 auto;padding:10px var(--gutter);display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.anchor-nav-inner::-webkit-scrollbar{display:none}
.anchor-nav a{flex-shrink:0;padding:6px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-secondary);border:1px solid var(--border);background:transparent;transition:all .2s;white-space:nowrap}
.anchor-nav a:hover,.anchor-nav a.active{color:var(--txt-accent);border-color:var(--brand-soft-2);background:var(--brand-soft)}
.guide-section{scroll-margin-top:120px}
.highlights{scroll-margin-top:120px}

/* ===== 区块标题 ===== */
.section-title{text-align:center;margin-bottom:clamp(32px,5vw,48px)}
.section-title h2{font-size:clamp(23px,1.8vw + 16px,30px);font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:.5px;text-wrap:balance}
.section-title p{font-size:clamp(13.5px,.9vw + 11px,15px);color:var(--text-secondary);max-width:500px;margin:0 auto}
.section-desc{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--text-muted)}

/* ===== Highlights：指标卡风格 ===== */
.highlights{max-width:1100px;margin:0 auto;padding:var(--section-y) var(--gutter)}
.highlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(12px,2vw,18px)}
.highlight-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:clamp(20px,3vw,30px) clamp(16px,2.5vw,24px);text-align:center;transition:transform .2s ease,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.highlight-card::before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,.6),transparent)}
.highlight-card:hover{transform:translateY(-3px);border-color:var(--brand-soft-2);box-shadow:var(--shadow)}
.highlight-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:25px;margin:0 auto 14px;background:var(--brand-soft);border:1px solid var(--brand-soft-2)}
.highlight-card h3{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text)}
.highlight-card p{font-size:13px;color:var(--text-secondary);line-height:1.7}

/* ===== Cards 区 ===== */
.cards-wrap{max-width:1100px;margin:0 auto;padding:0 var(--gutter) var(--section-y)}
.cards-wrap .section-header{display:flex;align-items:center;gap:12px;margin:clamp(32px,5vw,48px) 0 18px;flex-wrap:wrap}
.cards-wrap .section-header h2{font-size:clamp(18px,1.4vw + 13px,22px);font-weight:700;color:var(--text);margin:0;display:flex;align-items:center;gap:10px}
.cards-wrap .section-header h2::before{content:"";width:5px;height:22px;border-radius:3px;flex-shrink:0;background:var(--gradient-bar)}
.cards-wrap .section-header:first-child{margin-top:0}
.cards-wrap .section-tag{display:inline-block;background:var(--brand-soft);border:1px solid var(--brand-soft-2);color:var(--txt-accent);font-size:12px;font-weight:600;padding:3px 12px;border-radius:999px;flex-shrink:0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:clamp(17px,2.4vw,22px);text-decoration:none;color:var(--text);transition:transform .2s ease,border-color .2s,box-shadow .2s;display:flex;gap:14px;align-items:flex-start}
.card:hover{border-color:var(--brand-soft-2);box-shadow:var(--shadow);transform:translateY(-2px);color:var(--text)}
.card .icon{width:42px;height:42px;min-width:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--brand-soft);border:1px solid var(--brand-soft-2)}
.card .card-content{flex:1;min-width:0}
.card h3{font-size:14.5px;font-weight:700;margin-bottom:4px}
.card p{font-size:12.5px;color:var(--text-secondary);line-height:1.65;margin:0}
.card .step-badge{display:inline-block;background:var(--brand-soft);border:1px solid var(--brand-soft-2);color:var(--txt-accent);font-size:11px;font-weight:700;padding:1px 9px;border-radius:999px;margin-bottom:6px}

/* ===== 快速入门：编号步骤卡 ===== */
.start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.start-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:clamp(18px,2.5vw,24px);text-decoration:none;color:var(--text);transition:transform .2s ease,border-color .2s,box-shadow .2s;overflow:hidden}
.start-card::before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,.6),transparent)}
.start-card:hover{border-color:var(--brand-soft-2);box-shadow:var(--shadow);transform:translateY(-3px);color:var(--text)}
.start-card .start-order{position:absolute;top:12px;right:16px;font-size:clamp(26px,3vw,34px);font-weight:800;line-height:1;color:var(--border);transition:color .25s;letter-spacing:-1px}
.start-card:hover .start-order{color:var(--brand)}
.start-card .icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--brand-soft);border:1px solid var(--brand-soft-2)}
.start-card h3{font-size:14.5px;font-weight:700;margin:0}
.start-card p{font-size:12.5px;color:var(--text-secondary);line-height:1.65;margin:0}

/* ===== 9 步流程 ===== */
.flow-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;margin:0;padding:0}
.flow-item{margin:0}
.flow-card{display:flex;align-items:center;gap:13px;height:100%;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:clamp(14px,2vw,17px) clamp(15px,2.4vw,19px);text-decoration:none;color:var(--text);transition:transform .2s ease,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.flow-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient-bar);opacity:0;transition:opacity .25s}
.flow-card:hover{border-color:var(--brand-soft-2);box-shadow:var(--shadow);transform:translateY(-2px);color:var(--text)}
.flow-card:hover::before{opacity:1}
.flow-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;border-radius:50%;background:var(--brand-soft);border:1px solid var(--brand-soft-2);color:var(--brand-bright);font-size:14.5px;font-weight:700}
.flow-body{flex:1;min-width:0}
.flow-body h3{font-size:14.5px;font-weight:700;margin:0 0 3px}
.flow-body p{font-size:12px;color:var(--text-secondary);line-height:1.55;margin:0}
.flow-arrow{color:var(--text-muted);font-size:15px;font-weight:600;transition:transform .2s,color .2s;flex-shrink:0}
.flow-card:hover .flow-arrow{transform:translateX(3px);color:var(--brand-bright)}

/* ===== 手机端 CTA：面板卡 ===== */
.mobile-cta{max-width:1036px;margin:0 auto;background:var(--gradient-dark);color:#fff;padding:clamp(40px,6vw,56px) var(--gutter);text-align:center;border-radius:20px;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(10,43,38,.25)}
.mobile-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 92% -20%,rgba(94,234,212,.28),transparent 65%),radial-gradient(360px 280px at 2% 120%,rgba(15,118,110,.5),transparent 70%);pointer-events:none}
.mobile-cta::after{content:"";position:absolute;right:-50px;top:-60px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(94,234,212,.2);pointer-events:none}
.mobile-cta h2,.mobile-cta p,.mobile-cta .hero-buttons{position:relative;z-index:1}
.mobile-cta h2{font-size:clamp(21px,1.8vw + 14px,27px);font-weight:800;margin-bottom:10px;color:#fff;text-wrap:balance}
.mobile-cta p{font-size:clamp(13.5px,.9vw + 11px,15px);color:rgba(232,245,243,.78);margin-bottom:26px;max-width:520px;margin-left:auto;margin-right:auto}
.mobile-cta .hero-btn{display:inline-flex}
.mobile-cta .hero-btn.secondary{background:rgba(94,234,212,.1);border-color:rgba(94,234,212,.28);color:#b5ece5}
.mobile-cta .hero-btn.secondary:hover{background:rgba(94,234,212,.18);color:#fff}

/* ===== 文档页 Hero：面板卡 ===== */
.page-hero{max-width:912px;margin:clamp(18px,3vw,28px) auto 0;background:radial-gradient(420px 260px at 92% -20%,rgba(94,234,212,.28),transparent 65%),radial-gradient(360px 280px at 2% 120%,rgba(15,118,110,.5),transparent 70%),var(--gradient-hero);color:#fff;padding:clamp(28px,4.5vw,40px) clamp(22px,4vw,42px);text-align:left;position:relative;overflow:hidden;border-radius:20px;box-shadow:0 20px 50px rgba(10,43,38,.25)}
.page-hero::after{content:"";position:absolute;right:-50px;top:-60px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(94,234,212,.2);pointer-events:none}
.page-hero h1{font-size:clamp(21px,1.8vw + 14px,27px);font-weight:800;margin-bottom:8px;position:relative;letter-spacing:.5px;text-wrap:balance}
.page-hero p{font-size:clamp(13px,.7vw + 11px,14.5px);color:rgba(232,245,243,.78);position:relative;max-width:640px;margin:0}
@media(max-width:960px){.page-hero{margin-left:var(--gutter);margin-right:var(--gutter)}}

/* ===== Content ===== */
.content{max-width:880px;margin:0 auto;padding:clamp(26px,4vw,40px) var(--gutter) 130px}
.content h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-h2);font-weight:700;margin:clamp(30px,4.5vw,42px) 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border);color:var(--text)}
.content h2::before{content:"";width:5px;height:22px;border-radius:3px;flex-shrink:0;background:var(--gradient-bar)}
.content h2:first-child{margin-top:0}
.content h3{font-size:var(--fs-h3);font-weight:600;margin:clamp(22px,3vw,28px) 0 9px;color:var(--txt-accent)}
.content h4{font-size:14.5px;font-weight:600;margin:18px 0 8px;color:var(--text)}
.content p{margin:8px 0}
.content ul,.content ol{margin:8px 0 12px 22px}
.content li{margin:5px 0}
.content li::marker{color:var(--brand)}
.content strong{color:var(--text)}
.content img{max-width:100%;border-radius:var(--radius-xs);margin:12px 0}

/* ===== Table ===== */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 20px;border-radius:10px}
table{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 20px;font-size:13.5px;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.table-scroll table{margin:0}
th,td{padding:9px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
td+td,th+th{border-left:1px solid var(--border)}
tr:last-child td{border-bottom:none}
th{background:var(--brand-soft);color:var(--txt-accent);white-space:nowrap;font-weight:600;font-size:13px}
tr:nth-child(even) td{background:var(--row-even)}
code{background:var(--code-bg);border:1px solid var(--brand-soft-2);padding:1px 7px;border-radius:6px;font-size:13px;font-family:Consolas,"Courier New",monospace;color:var(--code-text);overflow-wrap:anywhere}

/* ===== Tip / Warn ===== */
.tip,.warn{padding:13px 16px 13px 18px;border-radius:12px;margin:16px 0;font-size:13.5px;line-height:1.75;position:relative}
.tip{background:var(--tip-bg);border:1px solid var(--tip-line);border-left:4px solid var(--brand);color:var(--tip-text)}
.warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:4px solid #d99a1f;color:var(--warn-text)}

/* ===== Step ===== */
.step{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:clamp(14px,2.2vw,18px) clamp(16px,2.8vw,22px);margin:14px 0;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.step:hover{border-color:var(--brand-soft-2);box-shadow:var(--shadow)}
.step-num{display:inline-flex;align-items:center;justify-content:center;background:var(--brand-soft);border:1px solid var(--brand-soft-2);color:var(--brand-bright);width:25px;height:25px;border-radius:50%;font-size:12.5px;font-weight:700;margin-right:8px;flex-shrink:0}

/* ===== Screenshot ===== */
.screenshot{text-align:center;margin:18px 0;border-radius:12px;overflow:hidden}
.screenshot img{max-width:100%;display:block;margin:0 auto;border-radius:12px;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:zoom-in;transition:box-shadow .2s}
.screenshot img:hover{box-shadow:var(--shadow)}
.screenshot p{font-size:12.5px;color:var(--text-muted);margin:8px 0 0}
.screenshot.no-img{background:var(--tip-bg);border:2px dashed var(--tip-line);padding:26px 18px;color:var(--text-muted);font-size:13px}
.screenshot.no-img img,.screenshot.no-img p{display:none}
.screenshot.no-img::after{content:attr(data-label)}
.screenshot-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin:18px 0}
.screenshot-compare .compare-item{text-align:center}
.screenshot-compare .compare-item img{max-width:100%;border-radius:12px;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:zoom-in}
.screenshot-compare .compare-label{font-size:13px;font-weight:600;color:var(--txt-accent);margin-bottom:6px}
.screenshot-compare .compare-item p{font-size:11.5px;color:var(--text-muted);margin:6px 0 0}

/* ===== Video ===== */
.video-box{margin:22px 0;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--card-2);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.video-box video{width:100%;display:block;background:#000}
.video-box p{text-align:center;padding:10px;color:var(--text-muted);font-size:12.5px;background:var(--card);margin:0;border-top:1px solid var(--border)}
.video-box.no-video video{display:none}
.video-box.no-video{background:var(--tip-bg);border:2px dashed var(--tip-line);padding:26px 18px;text-align:center;box-shadow:none}
.video-box.no-video p{border:none;color:var(--txt-accent);font-weight:600;font-size:13.5px;background:transparent}

/* ===== Page Nav ===== */
.page-nav{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:calc(100% - 48px);max-width:720px;display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--nav-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-xl);z-index:200}
.page-nav a{display:flex;flex-direction:column;padding:11px 18px;background:transparent;border:1px solid var(--border);border-radius:11px;text-decoration:none;color:var(--text);transition:all .2s;min-width:0;flex:1;overflow:hidden}
.page-nav a:hover{border-color:var(--brand-soft-2);background:var(--brand-soft);transform:translateY(-1px);color:var(--text)}
.page-nav a .label{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.page-nav a .title{font-size:13.5px;font-weight:600;margin-top:3px;color:var(--txt-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-nav .next{margin-left:auto;text-align:right}

/* ===== FAQ ===== */
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:12px;margin:12px 0;overflow:hidden;transition:border-color .2s}
.faq-item:hover{border-color:var(--brand-soft-2)}
.faq-q{padding:14px 18px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.faq-q:hover{background:var(--brand-soft)}
.faq-q::after{content:'▸';transition:transform .2s;color:var(--text-muted);flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(90deg)}
.faq-a{padding:0 18px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;font-size:13.5px;color:var(--text-secondary)}
.faq-item.open .faq-a{max-height:500px;padding:0 18px 16px}

/* ===== Lightbox ===== */
.lightbox{position:fixed;inset:0;background:rgba(4,14,13,.88);z-index:300;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;cursor:zoom-out;backdrop-filter:blur(4px)}
.lightbox.show{opacity:1}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:var(--radius-xs);box-shadow:0 4px 30px rgba(0,0,0,.5);object-fit:contain}
.lightbox-close{position:fixed;top:18px;right:24px;color:#fff;font-size:32px;cursor:pointer;z-index:301;background:none;border:none;line-height:1}

/* ===== Download Cards ===== */
.dl-section{margin:18px 0 30px}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,2.5vw,18px)}
.dl-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:clamp(20px,3vw,26px) clamp(16px,2.5vw,24px);text-align:center;transition:transform .2s ease,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.dl-card:hover{border-color:var(--brand-soft-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.dl-card::before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,.6),transparent)}
.dl-icon{font-size:34px;margin-bottom:10px}
.dl-card h3{font-size:16px;font-weight:700;margin:8px 0}
.dl-desc{font-size:12.5px;color:var(--text-secondary);margin-bottom:12px}
.dl-link{margin:10px 0;word-break:break-all}
.dl-link a{font-size:12.5px;color:var(--txt-accent);font-weight:500}
.qr-img{width:140px;height:140px;border-radius:12px;border:1px solid var(--border);margin:12px auto;display:block;box-shadow:var(--shadow-sm);background:#fff;padding:6px}
.btn-group{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.btn-group .copy-btn,.btn-group .open-btn{padding:8px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;border:none;font-family:inherit}
.copy-btn{background:var(--gradient-primary);color:var(--btn-primary-text);box-shadow:0 4px 14px rgba(20,184,166,.3)}
.copy-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.copy-btn:active{transform:scale(.97)}
.copy-btn.copied{background:var(--success);color:#06281e}
.open-btn{background:var(--brand-soft);color:var(--txt-accent);border:1px solid var(--brand-soft-2)!important}
.open-btn:hover{background:var(--brand);color:#fff}
.version-tag{display:inline-block;background:var(--brand-soft);border:1px solid var(--brand-soft-2);color:var(--txt-accent);font-size:11px;font-weight:700;padding:2px 11px;border-radius:999px;margin-bottom:8px}
.version-tag.online{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.3);color:#6ee7b7}
html[data-theme="light"] .version-tag.online{background:#e7f8f0;border-color:#b9e8d2;color:#0b7a4b}
.version-tag.mobile{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3);color:#fcd34d}
html[data-theme="light"] .version-tag.mobile{background:#fff6e3;border-color:#f1d8a3;color:#a26f0c}
.wechat-section{text-align:center;margin:44px 0 16px}
.wechat-section .qr-img{width:200px;height:200px}
.wechat-section p{color:var(--text-muted);font-size:13.5px;margin-top:8px}
.main-qr{text-align:center;margin:24px 0 38px}
.main-qr .qr-img{width:220px;height:220px;border:1px solid var(--brand-soft-2);box-shadow:0 8px 28px rgba(20,184,166,.18)}
.main-qr .qr-url{font-size:14.5px;color:var(--txt-accent);font-weight:600;margin-top:8px;word-break:break-all}
.main-qr p{color:var(--text-muted);font-size:12.5px;margin-top:4px}

/* ===== 文档页右侧目录 ===== */
.doc-toc{position:fixed;top:140px;right:max(16px,calc((100vw - 880px)/2 - 240px));width:200px;max-height:calc(100vh - 220px);overflow-y:auto;font-size:13px;z-index:80;display:none;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.doc-toc-title{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.doc-toc a{display:block;padding:6px 11px;margin:2px 0;border-radius:8px;border-left:2px solid transparent;color:var(--text-secondary);line-height:1.5;transition:all .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-toc a:hover{background:var(--brand-soft);color:var(--txt-accent)}
.doc-toc a.active{background:var(--brand-soft);color:var(--txt-accent);border-left-color:var(--brand);font-weight:600}
.doc-toc a.toc-h3{padding-left:24px;font-size:12px;color:var(--text-muted)}
@media(min-width:1400px){.doc-toc{display:block}}
.content h2,.content h3{scroll-margin-top:84px}

/* ===== Footer ===== */
.footer{text-align:center;padding:clamp(26px,4vw,34px) 20px;color:var(--text-muted);font-size:12.5px;border-top:1px solid var(--border);background:transparent;margin-top:var(--section-y)}

/* ICP 备案号：工信部要求挂在页面底部，且必须能点进 beian.miit.gov.cn。
   单独一行、跟版权那行分开，是为了让核验的人一眼找得到。 */
.footer .beian{display:block;margin-top:8px;font-size:12px;letter-spacing:.2px}
.footer .beian a{color:inherit;text-decoration:none}
.footer .beian a:hover,.footer .beian a:focus-visible{color:var(--brand-bright);text-decoration:underline}

/* ===== Responsive：平板 ===== */
@media(max-width:1024px){
  .highlights,.cards-wrap{max-width:920px}
  .content{max-width:780px}
}

/* ===== Responsive：移动端 ===== */
@media(max-width:768px){
  .topbar{min-height:56px}
  .topbar a{padding:6px 10px;font-size:13px}
  .topbar .logo::before{width:30px;height:30px;min-width:30px;font-size:14px;border-radius:9px}
  .anchor-nav{top:56px}
  .anchor-nav a{padding:6px 13px;font-size:12.5px}
  .hero-buttons{flex-direction:column;align-items:center}
  .hero-btn{width:100%;max-width:300px}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .hero-stat{padding:14px 8px 12px}
  .content{padding-bottom:120px}
  .mobile-cta{margin-left:var(--gutter);margin-right:var(--gutter);border-radius:16px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  .page-nav{bottom:calc(12px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);padding:8px;border-radius:14px}
  .page-nav a{padding:10px 12px;border-radius:10px}
  .page-nav a .title{font-size:13px}
  .theme-toggle.floating{top:10px;right:10px;height:36px;min-width:36px}
  .faq-q{padding:13px 14px}
  .faq-a{padding:0 14px}
  .faq-item.open .faq-a{padding:0 14px 14px}
}

/* ===== Responsive：小屏手机 ===== */
@media(max-width:480px){
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .hero-stat .num{font-size:19px}
  .hero-stat .label{font-size:11px}
  .card{flex-direction:row}
  .step{margin:12px 0}
  .btn-group .copy-btn,.btn-group .open-btn{flex:1 1 auto}
  .page-nav a .label{display:none}
  .page-nav a .title{margin-top:0}
}