/* 中国蓝AI · 智能体工作台 2.0 版面（独立于 app.css，可整体替换） */

/* ============ 英雄区 ============ */
.w2-hero { position:relative; border-radius:20px; overflow:hidden; margin-bottom:22px; border:1px solid rgba(var(--ac),.25);
  background:
    radial-gradient(900px 340px at 12% -20%, rgba(var(--ac),.30), transparent 62%),
    radial-gradient(700px 300px at 95% 115%, rgba(var(--ac),.16), transparent 65%),
    linear-gradient(140deg, rgba(10,14,22,.92), rgba(13,18,30,.78));
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="light"] .w2-hero { background:
    radial-gradient(900px 340px at 12% -20%, rgba(var(--ac),.18), transparent 62%),
    radial-gradient(700px 300px at 95% 115%, rgba(var(--ac),.10), transparent 65%),
    linear-gradient(140deg, #ffffff, #f3f6fb); border-color:rgba(var(--ac),.28); box-shadow:0 16px 44px rgba(15,23,42,.08); }
.w2-hero-in { position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:34px 32px 18px; }
.w2-kick { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:600;
  color:rgb(var(--ac)); background:rgba(var(--ac),.12); border:1px solid rgba(var(--ac),.35); letter-spacing:.5px; }
.w2-title { margin:12px 0 0; font-size:34px; line-height:1.2; font-weight:800; letter-spacing:.5px; color:#f4f8ff;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.w2-title span { display:block; }
html[data-theme="light"] .w2-title { color:#0b1526; }
.w2-sub { margin:10px 0 0; max-width:640px; font-size:13px; line-height:1.75; color:#a7b3c6; }
html[data-theme="light"] .w2-sub { color:#4c5a6e; }
.w2-hero-r { display:flex; flex-direction:column; gap:10px; flex:0 0 auto; min-width:190px; }
.w2-hero-r .w2-btn.main, .w2-hero-r .w2-btn.ghost { width:100%; justify-content:center; }

/* 按钮 */
.w2-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:12px; border:1px solid transparent;
  font-size:13.5px; font-weight:600; cursor:pointer; transition:.18s; white-space:nowrap; }
.w2-btn.main { color:#fff; background:linear-gradient(115deg, rgba(var(--ac),.95), rgba(var(--ac),.55)); border-color:rgba(var(--ac),.5);
  box-shadow:0 8px 24px rgba(var(--ac),.30); }
.w2-btn.main:hover { filter:brightness(1.12); transform:translateY(-1px); }
.w2-btn.ghost, .w2-btn.lite { color:#dbe6f5; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); }
html[data-theme="light"] .w2-btn.ghost, html[data-theme="light"] .w2-btn.lite { color:#1c2a40; background:#fff; border-color:rgba(15,23,42,.14); }
.w2-btn.ghost:hover, .w2-btn.lite:hover { border-color:rgba(var(--ac),.55); color:#fff; }
html[data-theme="light"] .w2-btn.ghost:hover, html[data-theme="light"] .w2-btn.lite:hover { color:rgb(var(--ac)); }
.w2-btn.sm { padding:8px 14px; font-size:12.5px; border-radius:10px; }
.w2-btn.wide { width:100%; justify-content:center; }
.w2-btn:disabled { opacity:.5; cursor:not-allowed; }

/* 流程步骤条 */
.w2-steps { position:relative; z-index:2; display:flex; gap:8px; flex-wrap:wrap; padding:0 32px 20px; }
.w2-step { display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 7px; border-radius:999px; font-size:12px; color:#c7d2e2;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
html[data-theme="light"] .w2-step { color:#33455e; background:#fff; border-color:rgba(15,23,42,.10); }
.w2-step em { font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700;
  color:#fff; background:linear-gradient(135deg, rgba(var(--ac),.95), rgba(var(--ac),.5)); }
.w2-step svg { color:rgb(var(--ac)); }

/* ============ 装饰画（程序化背景动效） ============ */
.wa { position:absolute; inset:0; pointer-events:none; opacity:.9; }
.wa-glow { position:absolute; inset:0; pointer-events:none; }
.wa-film i { position:absolute; top:14%; width:74px; height:46px; border-radius:8px; border:1px solid rgba(var(--ac),.4);
  background:linear-gradient(135deg, rgba(var(--ac),.20), rgba(var(--ac),.05)); animation:wafloat 6s ease-in-out infinite; }
.wa-film i:nth-child(1){left:56%} .wa-film i:nth-child(2){left:66%;top:38%} .wa-film i:nth-child(3){left:78%;top:12%}
.wa-film i:nth-child(4){left:88%;top:44%} .wa-film i:nth-child(5){left:62%;top:60%;width:56px;height:36px}
.wa-film i:nth-child(6){left:80%;top:68%;width:60px;height:38px} .wa-film i:nth-child(7){left:90%;top:24%;width:50px;height:32px}
.wa-film i:nth-child(8){left:72%;top:80%;width:48px;height:30px}
.wa-film b { position:absolute; right:-30px; top:-40px; width:220px; height:220px; border-radius:50%;
  border:1px dashed rgba(var(--ac),.35); animation:waspin 24s linear infinite; }
.wa-film u { position:absolute; right:40px; bottom:-60px; width:160px; height:160px; border-radius:50%;
  border:1px solid rgba(var(--ac),.22); }
.wa-music i { position:absolute; bottom:0; width:5px; border-radius:3px 3px 0 0; background:linear-gradient(180deg, rgba(var(--ac),.85), rgba(var(--ac),.15));
  animation:waeq 1.6s ease-in-out infinite; height:30%; }
.wa-music i:nth-child(odd){height:52%} .wa-music i:nth-child(3n){height:70%} .wa-music i:nth-child(4n){height:38%}
.wa-avatar i { position:absolute; right:6%; top:12%; width:150px; height:200px; border-radius:18px; transform:rotate(8deg);
  border:1px solid rgba(var(--ac),.4); background:linear-gradient(160deg, rgba(var(--ac),.22), rgba(var(--ac),.04)); }
.wa-avatar u { position:absolute; right:16%; top:26%; width:140px; height:190px; border-radius:18px; transform:rotate(-6deg);
  border:1px solid rgba(var(--ac),.32); background:linear-gradient(160deg, rgba(var(--ac),.14), rgba(var(--ac),.03)); }
.wa-avatar b { position:absolute; right:26%; top:38%; width:130px; height:180px; border-radius:18px; transform:rotate(3deg);
  border:1px solid rgba(var(--ac),.25); background:linear-gradient(160deg, rgba(var(--ac),.08), transparent); }
.wa-book i { position:absolute; width:64px; height:88px; border-radius:8px; border:1px solid rgba(var(--ac),.38);
  background:linear-gradient(150deg, rgba(var(--ac),.18), rgba(var(--ac),.04)); animation:wafloat 7s ease-in-out infinite; }
.wa-book i:nth-child(1){right:8%;top:18%;transform:rotate(-10deg)} .wa-book i:nth-child(2){right:20%;top:40%;transform:rotate(6deg)}
.wa-book i:nth-child(3){right:32%;top:22%;transform:rotate(12deg)} .wa-book i:nth-child(4){right:12%;top:62%;transform:rotate(-4deg);width:52px;height:72px}
.wa-book b { position:absolute; right:-40px; bottom:-70px; width:240px; height:240px; border-radius:50%; border:1px dashed rgba(var(--ac),.3); animation:waspin 30s linear infinite; }
.wa-chart i { position:absolute; right:10%; bottom:0; width:3px; border-radius:2px 2px 0 0; height:34%;
  background:linear-gradient(180deg, rgba(var(--ac),.8), rgba(var(--ac),.1)); animation:waeq 2.2s ease-in-out infinite; }
.wa-chart u { position:absolute; right:16%; bottom:0; width:3px; height:56%; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, rgba(var(--ac),.6), rgba(var(--ac),.08)); animation:waeq 2.2s ease-in-out .4s infinite; }
.wa-chart u:after { content:''; position:absolute; left:-46px; bottom:0; width:3px; height:72%; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, rgba(var(--ac),.4), rgba(var(--ac),.06)); animation:waeq 2.2s ease-in-out .8s infinite; }
.wa-doc i { position:absolute; width:110px; height:70px; border-radius:10px; border:1px solid rgba(var(--ac),.3);
  background:linear-gradient(150deg, rgba(var(--ac),.12), transparent); animation:wafloat 8s ease-in-out infinite; }
.wa-doc i:after { content:''; position:absolute; left:12px; top:14px; width:52%; height:5px; border-radius:3px; background:rgba(var(--ac),.45);
  box-shadow:0 12px 0 rgba(var(--ac),.25), 0 24px 0 rgba(var(--ac),.18); }
.wa-doc i:nth-child(1){right:8%;top:16%;transform:rotate(-4deg)} .wa-doc i:nth-child(2){right:22%;top:44%;transform:rotate(3deg)}
.wa-doc i:nth-child(3){right:5%;top:62%;transform:rotate(5deg)} .wa-doc i:nth-child(4){right:30%;top:12%;transform:rotate(2deg)}
.wa-doc i:nth-child(5){right:36%;top:60%;transform:rotate(-3deg)}
.wa-box i { position:absolute; right:12%; top:20%; width:110px; height:110px; border-radius:16px; transform:rotate(10deg);
  border:1px solid rgba(var(--ac),.42); background:linear-gradient(140deg, rgba(var(--ac),.2), rgba(var(--ac),.04)); animation:wafloat 6s ease-in-out infinite; }
.wa-box u { position:absolute; right:22%; top:44%; width:90px; height:90px; border-radius:14px; transform:rotate(-8deg);
  border:1px solid rgba(var(--ac),.3); background:linear-gradient(140deg, rgba(var(--ac),.12), transparent); }
.wa-box b { position:absolute; right:6%; top:58%; width:70px; height:70px; border-radius:12px; transform:rotate(14deg);
  border:1px solid rgba(var(--ac),.22); }
.wa-heart i { position:absolute; top:20%; width:26px; height:26px; animation:waheart 4s ease-in-out infinite; opacity:.5; }
.wa-heart i:before, .wa-heart i:after { content:''; position:absolute; width:13px; height:20px; border-radius:13px 13px 0 0;
  background:rgba(var(--ac),.6); }
.wa-heart i:before { left:0; transform:rotate(-45deg); transform-origin:100% 100%; }
.wa-heart i:after { left:13px; transform:rotate(45deg); transform-origin:0 100%; }
@keyframes wafloat { 0%,100%{transform:translateY(0) rotate(var(--r,0deg))} 50%{transform:translateY(-9px) rotate(var(--r,0deg))} }
@keyframes waspin { to{transform:rotate(360deg)} }
@keyframes waeq { 0%,100%{transform:scaleY(.55)} 50%{transform:scaleY(1)} }
@keyframes waheart { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-12px) scale(1.12)} }

/* ============ 步骤 / 案例 ============ */
.w2-case { display:flex; gap:0; border-radius:18px; overflow:hidden; border:1px solid rgba(var(--ac),.22); margin-bottom:22px;
  background:linear-gradient(120deg, rgba(var(--ac),.10), rgba(255,255,255,.02) 55%); }
html[data-theme="light"] .w2-case { background:linear-gradient(120deg, rgba(var(--ac),.08), #fff 55%); border-color:rgba(var(--ac),.25); }
.w2-case-media { flex:0 0 200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:rgb(var(--ac)); background:rgba(var(--ac),.10); border-right:1px solid rgba(var(--ac),.18); position:relative; min-height:190px; }
.w2-case-media:before { content:''; position:absolute; inset:0; background:radial-gradient(200px 120px at 50% 110%, rgba(var(--ac),.25), transparent 70%); }
.w2-case-media em { position:relative; font-style:normal; font-size:11px; padding:4px 12px; border-radius:999px; color:#fff;
  background:rgba(var(--ac),.8); font-weight:600; letter-spacing:1px; }
.w2-case-main { flex:1; padding:20px 24px 16px; min-width:0; }
.w2-case-main b { font-size:17px; color:#eef4fb; }
html[data-theme="light"] .w2-case-main b { color:#101d31; }
.w2-case-main p { margin:8px 0 12px; font-size:12.5px; line-height:1.7; color:#93a1b5; max-width:640px; }
html[data-theme="light"] .w2-case-main p { color:#52627a; }
.w2-case-stats { display:flex; gap:26px; margin-bottom:14px; }
.w2-case-stats b { display:block; font-size:22px; font-weight:800; color:rgb(var(--ac)); }
.w2-case-stats span { font-size:11px; color:#7d8ba0; }
.w2-case-btns { display:flex; gap:10px; }

/* ============ 故事引擎 ============ */
.w2-story { border-radius:20px; border:1px solid rgba(var(--ac),.30); overflow:hidden;
  background:linear-gradient(160deg, rgba(var(--ac),.12), rgba(255,255,255,.02) 45%), var(--panel);
  box-shadow:0 18px 50px rgba(0,0,0,.28); }
html[data-theme="light"] .w2-story { background:linear-gradient(160deg, rgba(var(--ac),.07), #fff 45%); box-shadow:0 14px 40px rgba(15,23,42,.07); }
.w2-story-ta { display:block; width:100%; min-height:190px; resize:vertical; border:0; outline:0; padding:22px 24px 6px;
  background:transparent; color:var(--text); font-size:15px; line-height:1.9; font-family:var(--font); }
.w2-story-ta::placeholder { color:var(--text-3); }
.w2-story-foot { display:flex; justify-content:space-between; align-items:center; padding:0 24px 4px; }
.w2-link { border:0; background:none; color:rgb(var(--ac)); font-size:12.5px; cursor:pointer; font-weight:600; }
.w2-link:hover { text-decoration:underline; }
.w2-count { font-size:11.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.w2-count b { color:rgb(var(--ac)); font-weight:700; }

/* 控制排 */
.w2-ctl { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:14px 24px 18px; }
.w2-ctl-r { margin-left:auto; display:flex; align-items:center; gap:12px; }
.w2-field { display:flex; flex-direction:column; gap:5px; }
.w2-field > span { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-3); }
.w2-field > span svg { color:rgb(var(--ac)); }
.w2-field select { padding:8px 30px 8px 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--panel-2);
  color:var(--text); font-size:12.5px; cursor:pointer; outline:0; }
.w2-field select:focus { border-color:rgba(var(--ac),.6); }
.w2-toggle { display:inline-flex; padding:3px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); }
.w2-toggle button { padding:7px 14px; border-radius:8px; border:0; background:transparent; color:var(--text-2); font-size:12px; cursor:pointer; }
.w2-toggle button.on { color:#fff; background:linear-gradient(115deg, rgba(var(--ac),.9), rgba(var(--ac),.55)); font-weight:600; }
html[data-theme="light"] .w2-toggle button.on { color:#fff; }
.w2-kbd { font-size:11px; color:var(--text-3); border:1px solid var(--line); border-radius:8px; padding:5px 10px; }

/* ============ 文档追问 ============ */
.w2-follow { display:flex; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.w2-follow-in { flex:1; padding:10px 14px; border-radius:11px; border:1px solid var(--line-2); background:var(--panel-2);
  color:var(--text); font-size:13px; outline:0; }
.w2-follow-in:focus { border-color:rgba(var(--ac),.6); }
.w2-staged { display:flex; flex-direction:column; gap:10px; }
.w2-stagebar { height:4px; border-radius:2px; background:rgba(var(--ac),.15); overflow:hidden; }
.w2-stagebar u { display:block; height:100%; width:36%; border-radius:2px; background:linear-gradient(90deg, rgba(var(--ac),.4), rgba(var(--ac),1));
  animation:wslide 1.6s ease-in-out infinite; }
@keyframes wslide { 0%{transform:translateX(-110%)} 100%{transform:translateX(320%)} }

/* ============ 漫剧项目版面 ============ */
.w2-proj { display:grid; grid-template-columns:250px 1fr; gap:16px; margin-bottom:22px; min-height:520px; }
.w2-proj-side { display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:16px; background:var(--panel);
  border:1px solid var(--line); }
.w2-proj-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--text-3); font-size:12.5px; text-align:center; }
.w2-proj-folder { width:76px; height:64px; border-radius:12px; display:grid; place-items:center; color:var(--text-3);
  background:var(--panel-2); border:1px dashed var(--line-2); }
.w2-proj-list { display:flex; flex-direction:column; gap:8px; overflow:auto; }
.w2-proj-row { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text-2); font-size:12px; cursor:pointer; text-align:left; }
.w2-proj-row:hover { border-color:rgba(var(--ac),.5); color:var(--text); }
.w2-proj-dot { width:7px; height:7px; border-radius:50%; background:var(--warn); flex:0 0 auto; }
.w2-proj-dot.done { background:var(--ok); } .w2-proj-dot.failed { background:var(--bad); }
.w2-proj-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w2-proj-foot { border-top:1px solid var(--line); padding-top:10px; }
.w2-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; font-size:11.5px;
  color:var(--text-2); background:rgba(var(--ac),.10); border:1px solid rgba(var(--ac),.30); }
.w2-chip.big { padding:10px 16px; font-size:12.5px; width:100%; justify-content:center; cursor:pointer; color:rgb(var(--ac)); font-weight:600; }
.w2-proj-main { display:flex; flex-direction:column; gap:14px; min-width:0; }
.w2-proj-show { position:relative; flex:1; border-radius:18px; overflow:hidden; padding:26px 28px;
  border:1px solid rgba(var(--ac),.28);
  background:
    radial-gradient(600px 280px at 80% -10%, rgba(var(--ac),.22), transparent 65%),
    radial-gradient(500px 240px at 10% 110%, rgba(var(--ac),.12), transparent 60%),
    var(--panel); }
.w2-show-tags { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:6px; }
.w2-show-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:rgb(var(--ac));
  background:rgba(var(--ac),.12); border:1px solid rgba(var(--ac),.3); padding:4px 12px; border-radius:999px; }
.w2-show-core { text-align:center; padding:16px 0 8px; }
.w2-show-core h1 { margin:10px 0 0; font-size:30px; font-weight:800; letter-spacing:1px;
  background:linear-gradient(100deg, var(--text), rgb(var(--ac)) 80%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.w2-show-core p { margin:8px auto 16px; font-size:12.5px; color:var(--text-2); max-width:520px; }
.w2-show-engine { margin-top:6px; }
.w2-eng-card { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:14px; position:relative;
  background:rgba(var(--ac),.07); border:1px solid rgba(var(--ac),.25); }
.w2-eng-card .w2-eng-ic { flex:0 0 44px; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  color:rgb(var(--ac)); background:rgba(var(--ac),.14); border:1px solid rgba(var(--ac),.35); }
.w2-eng-card b { display:block; font-size:14.5px; color:var(--text); }
.w2-eng-card span { display:block; margin-top:3px; font-size:12px; line-height:1.6; color:var(--text-2); }
.w2-eng-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.w2-eng-tags i { font-style:normal; font-size:10.5px; padding:3px 10px; border-radius:999px; color:rgb(var(--ac));
  background:rgba(var(--ac),.12); border:1px solid rgba(var(--ac),.25); }
.w2-pipeline { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.w2-stage { padding:11px 13px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); }
.w2-stage em { display:block; font-style:normal; font-size:11px; font-weight:700; color:rgb(var(--ac)); margin-bottom:7px; letter-spacing:.5px; }
.w2-stage span { display:inline-block; margin:2px 4px 2px 0; padding:3px 9px; border-radius:7px; font-size:10.5px;
  color:var(--text-2); background:rgba(255,255,255,.04); border:1px solid var(--line); }
html[data-theme="light"] .w2-stage span { background:#fff; }
.w2-proj-comp { padding:14px 16px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.w2-proj-comp .wb-ta { min-height:64px; }
.w2-proj-comp .w2-ctl { padding:12px 0 4px; }

/* ============ 智能多帧 ============ */
.w2-framehead { position:relative; border-radius:20px; overflow:hidden; padding:28px 30px; margin-bottom:22px;
  border:1px solid rgba(var(--ac),.28);
  background:radial-gradient(700px 320px at 70% -20%, rgba(var(--ac),.20), transparent 65%),
    radial-gradient(400px 200px at 0% 110%, rgba(var(--ac),.10), transparent 60%), var(--panel); }
.w2-frame-hero { display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
.w2-frame-orb { flex:0 0 84px; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; color:rgb(var(--ac));
  background:rgba(var(--ac),.10); border:1px solid rgba(var(--ac),.4); box-shadow:0 0 0 10px rgba(var(--ac),.06), 0 0 44px rgba(var(--ac),.30); }
.w2-frame-hero h1 { margin:10px 0 0; font-size:28px; font-weight:800; color:var(--text); letter-spacing:.5px; }
.w2-frame-hero p { margin:6px 0 0; font-size:12.5px; color:var(--text-2); letter-spacing:1px; }
.w2-frame-cards { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px; }
.w2-eng-card.grid-card { flex-direction:column; }
.w2-frame-cards .w2-eng-card { flex-direction:column; gap:10px; padding:16px; background:var(--panel-2);
  border-color:var(--line); transition:.2s; }
.w2-frame-cards .w2-eng-card:hover { transform:translateY(-3px); border-color:rgba(var(--ac),.45); box-shadow:0 14px 30px rgba(0,0,0,.25); }
.w2-frame-cards .w2-eng-card.focus { border-color:rgba(var(--ac),.5); background:rgba(var(--ac),.08); }
.w2-frame-cards .w2-eng-card .w2-eng-ic { --ec:var(--ac); color:rgb(var(--ec,34,211,238)); background:rgba(var(--ec,34,211,238),.13);
  border-color:rgba(var(--ec,34,211,238),.3); }
.w2-frame-cards .w2-eng-card b { font-size:13.5px; }
.w2-frame-cards .w2-eng-card span { font-size:11.5px; }
.w2-frame-cards .w2-eng-card em { position:absolute; right:12px; top:8px; font-style:normal; font-weight:800; font-size:20px;
  color:rgba(255,255,255,.06); }
html[data-theme="light"] .w2-frame-cards .w2-eng-card em { color:rgba(15,23,42,.06); }
.w2-uprows { display:flex; gap:10px; margin-top:16px; position:relative; z-index:1; }
.w2-frames { display:grid; grid-template-columns:repeat(9,1fr); gap:8px; margin:12px 0; }
.w2-frame-slot { aspect-ratio:3/4; border-radius:10px; border:1px dashed var(--line-2); background:var(--panel-2);
  color:var(--text-3); font-size:16px; cursor:pointer; transition:.15s; }
.w2-frame-slot:hover { border-color:rgba(var(--ac),.6); color:rgb(var(--ac)); }
.w2-frame-slot.on { border-style:solid; border-color:rgba(var(--ac),.6); color:rgb(var(--ac)); background:rgba(var(--ac),.10); }
.w2-workbench .wb-comp-head b { display:inline-flex; align-items:center; gap:8px; }
.w2-upgrade { font-style:normal; font-size:10px; padding:3px 9px; border-radius:999px; color:#fff; font-weight:600;
  background:linear-gradient(100deg, #7c3aed, rgba(var(--ac),.9)); }
.w2-tags-r { display:inline-flex; gap:6px; }
.w2-tags-r i { font-style:normal; font-size:10.5px; color:var(--text-3); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.w2-tipwarn { margin-top:10px; padding:9px 13px; border-radius:10px; font-size:11.5px; color:var(--warn);
  background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.25); }

/* ============ 客户端接入 ============ */
.w2-guide { display:flex; flex-direction:column; gap:14px; margin:14px 0; }
.w2-guide-step { display:flex; gap:14px; align-items:flex-start; }
.w2-guide-step em { flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg, rgba(var(--ac),.95), rgba(var(--ac),.5)); }
.w2-guide-step b { display:block; font-size:14px; color:var(--text); }
.w2-guide-step span { display:block; margin:3px 0 8px; font-size:12.5px; color:var(--text-2); line-height:1.6; }
.w2-guide-base { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  background:var(--panel-2); border:1px solid var(--line); font-size:12.5px; }
.w2-guide-base span { color:var(--text-3); }
.w2-guide-base code { flex:1; font-family:var(--mono); color:rgb(var(--ac)); }

/* 响应式 */
@media (max-width: 1100px) {
  .w2-frame-cards { grid-template-columns:repeat(2,1fr); }
  .w2-pipeline { grid-template-columns:1fr; }
  .w2-proj { grid-template-columns:1fr; }
  .w2-frames { grid-template-columns:repeat(5,1fr); }
}
@media (max-width: 760px) {
  .w2-hero-in { flex-direction:column; align-items:flex-start; }
  .w2-hero-r { flex-direction:row; width:100%; }
  .w2-hero-r .w2-btn { flex:1; justify-content:center; }
  .w2-case { flex-direction:column; }
  .w2-case-media { flex-basis:auto; border-right:0; border-bottom:1px solid rgba(var(--ac),.18); padding:18px 0; }
  .w2-frame-cards { grid-template-columns:1fr; }
  .w2-frames { grid-template-columns:repeat(3,1fr); }
  .w2-title { font-size:26px; }
  .w2-show-core h1 { font-size:24px; }
}