/* ============================================================================
 * bridge 官网 · 产品界面仿真套件（mockup kit）
 * 摘自 parts/mockups.html 的 <style id="bx-css"> 段，逐字未改；演示页外壳样式未摘。
 * 全部选择器带 .bx- 前缀，不写 html/body/*，不污染全局。
 * ========================================================================== */
/* ========== 0. 作用域令牌 ========== */
.bx-kit{
  /* 字体：只用系统字体栈 */
  --bx-sans: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif;
  --bx-serif: Georgia, "Times New Roman", Times, "Songti SC", "SimSun", serif;
  --bx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Claude / 手机端主令牌（暗） */
  --bx-bg:#1f1f1e; --bx-card:#2c2c2a;
  --bx-ink:#f8f8f6; --bx-ink2:#c3c2b7; --bx-ink3:#97958c;
  --bx-coral:#d97757; --bx-bubble:#121212;
  --bx-hover:rgba(255,255,255,.07); --bx-hover2:rgba(255,255,255,.10);
  --bx-divider:rgba(255,255,255,.08);
  --bx-card-sh:0 2px 16px rgba(0,0,0,.2), 0 0 0 .5px rgba(226,225,218,.28);
  --bx-pop-sh:0 2px 16px rgba(0,0,0,.3), 0 0 0 .5px rgba(226,225,218,.2);
  --bx-ok:#5aa468; --bx-warn:#d9a441; --bx-crit:#d96a5a; --bx-tchip:#2f6fd6;

  /* 桌面壳令牌（刻意与手机端独立） */
  --bx-d-bg:#171716; --bx-d-raise:#201f1e; --bx-d-panel:rgba(255,255,255,.055);
  --bx-d-ink:#f5f5f2; --bx-d-ink2:rgba(245,245,242,.62); --bx-d-ink3:rgba(245,245,242,.40);
  --bx-d-line:rgba(255,255,255,.075); --bx-d-line2:rgba(255,255,255,.15);
  --bx-d-hover:rgba(255,255,255,.06); --bx-d-sel:rgba(217,119,87,.16);
  --bx-d-sh2:0 10px 28px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.24);
  --bx-d-sh3:0 28px 72px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.3);

  /* dimensio 令牌 */
  --bx-h-bg:#0a0a0d; --bx-h-s1:#121216; --bx-h-s2:#1b1b22;
  --bx-h-ink:#ededf2; --bx-h-ink2:#a0a0ad; --bx-h-ink3:#616170;
  --bx-h-acc:#8a8dff; --bx-h-acc-s:rgba(138,141,255,.13);
  --bx-h-line:rgba(228,230,255,.08); --bx-h-g1:rgba(228,230,255,.03); --bx-h-g2:rgba(228,230,255,.058);
  --bx-h-ok:#53c98b; --bx-h-warn:#e2b34d; --bx-h-code:#0e0e12;

  /* 工作空间（iOS grouped）令牌 */
  --bx-i-bg:#f2f2f7; --bx-i-card:#fff; --bx-i-blue:#0088ff; --bx-i-red:#ff383c; --bx-i-green:#34c759;
  --bx-i-sep:rgba(60,60,67,.12); --bx-i-g2:rgba(60,60,67,.6); --bx-i-g3:rgba(60,60,67,.3); --bx-i-gray:#8a8a8e;

  /* 时长 / 缓动 */
  --bx-t-tap:90ms; --bx-t-micro:140ms; --bx-t-quick:200ms; --bx-t-base:280ms; --bx-t-page:420ms; --bx-t-hero:560ms;
  --bx-ea-std:cubic-bezier(.2,0,0,1);
  --bx-ea-decel:cubic-bezier(.05,.7,.1,1);
  --bx-ea-accel:cubic-bezier(.3,0,.8,.15);
  --bx-ea-out:cubic-bezier(0,0,0,1);
  --bx-ea-settle:cubic-bezier(.34,1.26,.5,1);
  --bx-ea-fade:cubic-bezier(.4,0,.6,1);

  --bx-r:16px;
}

/* ========== 1. 自适应缩放骨架 ========== */
.bx-fit{
  container-type:inline-size; container-name:bx;
  position:relative; width:100%;
  max-width:calc(var(--bx-w) * 1px);
  aspect-ratio: var(--bx-w) / var(--bx-h);
  margin-inline:auto;
}
.bx-screen{
  --bx-avail:300;
  --bx-k: min(1, var(--bx-avail) / var(--bx-w));
  position:absolute; top:0; left:0;
  width:calc(var(--bx-w) * 1px); height:calc(var(--bx-h) * 1px);
  transform-origin:0 0; transform:scale(var(--bx-k));
  font-family:var(--bx-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* ① 无级方案：容器宽 ÷ 设计宽（新内核） */
@supports (scale: calc(1cqw / 1px)){
  .bx-screen{ --bx-k: min(1, 100cqw / (var(--bx-w) * 1px)); }
}
/* ② 台阶兜底：3% 一档，老内核也永不溢出 */
@container bx (min-width:240px){.bx-screen{--bx-avail:240}}
@container bx (min-width:248px){.bx-screen{--bx-avail:248}}
@container bx (min-width:256px){.bx-screen{--bx-avail:256}}
@container bx (min-width:264px){.bx-screen{--bx-avail:264}}
@container bx (min-width:272px){.bx-screen{--bx-avail:272}}
@container bx (min-width:280px){.bx-screen{--bx-avail:280}}
@container bx (min-width:290px){.bx-screen{--bx-avail:290}}
@container bx (min-width:300px){.bx-screen{--bx-avail:300}}
@container bx (min-width:310px){.bx-screen{--bx-avail:310}}
@container bx (min-width:320px){.bx-screen{--bx-avail:320}}
@container bx (min-width:330px){.bx-screen{--bx-avail:330}}
@container bx (min-width:340px){.bx-screen{--bx-avail:340}}
@container bx (min-width:352px){.bx-screen{--bx-avail:352}}
@container bx (min-width:364px){.bx-screen{--bx-avail:364}}
@container bx (min-width:376px){.bx-screen{--bx-avail:376}}
@container bx (min-width:388px){.bx-screen{--bx-avail:388}}
@container bx (min-width:400px){.bx-screen{--bx-avail:400}}
@container bx (min-width:414px){.bx-screen{--bx-avail:414}}
@container bx (min-width:428px){.bx-screen{--bx-avail:428}}
@container bx (min-width:442px){.bx-screen{--bx-avail:442}}
@container bx (min-width:456px){.bx-screen{--bx-avail:456}}
@container bx (min-width:472px){.bx-screen{--bx-avail:472}}
@container bx (min-width:488px){.bx-screen{--bx-avail:488}}
@container bx (min-width:504px){.bx-screen{--bx-avail:504}}
@container bx (min-width:520px){.bx-screen{--bx-avail:520}}
@container bx (min-width:538px){.bx-screen{--bx-avail:538}}
@container bx (min-width:556px){.bx-screen{--bx-avail:556}}
@container bx (min-width:574px){.bx-screen{--bx-avail:574}}
@container bx (min-width:594px){.bx-screen{--bx-avail:594}}
@container bx (min-width:614px){.bx-screen{--bx-avail:614}}
@container bx (min-width:634px){.bx-screen{--bx-avail:634}}
@container bx (min-width:656px){.bx-screen{--bx-avail:656}}
@container bx (min-width:678px){.bx-screen{--bx-avail:678}}
@container bx (min-width:700px){.bx-screen{--bx-avail:700}}
@container bx (min-width:724px){.bx-screen{--bx-avail:724}}
@container bx (min-width:748px){.bx-screen{--bx-avail:748}}
@container bx (min-width:772px){.bx-screen{--bx-avail:772}}
@container bx (min-width:798px){.bx-screen{--bx-avail:798}}
@container bx (min-width:824px){.bx-screen{--bx-avail:824}}
@container bx (min-width:852px){.bx-screen{--bx-avail:852}}
@container bx (min-width:880px){.bx-screen{--bx-avail:880}}
@container bx (min-width:910px){.bx-screen{--bx-avail:910}}
@container bx (min-width:940px){.bx-screen{--bx-avail:940}}
@container bx (min-width:972px){.bx-screen{--bx-avail:972}}
@container bx (min-width:1004px){.bx-screen{--bx-avail:1004}}
@container bx (min-width:1038px){.bx-screen{--bx-avail:1038}}
@container bx (min-width:1072px){.bx-screen{--bx-avail:1072}}
@container bx (min-width:1108px){.bx-screen{--bx-avail:1108}}
@container bx (min-width:1146px){.bx-screen{--bx-avail:1146}}
@container bx (min-width:1184px){.bx-screen{--bx-avail:1184}}
@container bx (min-width:1224px){.bx-screen{--bx-avail:1224}}
@container bx (min-width:1264px){.bx-screen{--bx-avail:1264}}
@container bx (min-width:1306px){.bx-screen{--bx-avail:1306}}

.bx-screen *{ box-sizing:border-box; margin:0; padding:0; }
.bx-screen button{ font:inherit; color:inherit; background:none; border:0; cursor:default; }
.bx-screen svg{ display:block; }
.bx-screen :focus-visible{ outline:2px solid var(--bx-coral); outline-offset:2px; }

/* ========== 2. 机身 / 窗口外壳 ========== */
.bx-phone{
  border-radius:54px; padding:11px;
  background:linear-gradient(150deg,#46463f 0%,#232321 26%,#17171a 60%,#3a3a35 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4),
             inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 3px rgba(0,0,0,.55);
}
.bx-phone__scr{
  position:relative; width:390px; height:844px;
  border-radius:43px; overflow:hidden;
  background:var(--bx-bg);
}
.bx-phone__island{
  position:absolute; z-index:40; top:10px; left:50%; transform:translateX(-50%);
  width:106px; height:30px; border-radius:15px; background:#000;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08);
}
.bx-phone__island::after{
  content:""; position:absolute; right:9px; top:9px; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #24303c 0 32%, #0d1218 55%, #05070a 100%);
}
.bx-status{
  position:absolute; z-index:35; inset:0 0 auto 0; height:48px;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 30px 0; font-size:14px; font-weight:600; letter-spacing:.01em;
  color:var(--bx-ink); pointer-events:none;
}
.bx-status--dark{ color:#0b0b0b; }
.bx-status__r{ display:flex; align-items:flex-end; gap:5px; }
.bx-sig{ display:flex; align-items:flex-end; gap:1.5px; }
.bx-sig i{ display:block; width:3px; border-radius:1px; background:currentColor; }
.bx-sig i:nth-child(1){height:4px} .bx-sig i:nth-child(2){height:6px}
.bx-sig i:nth-child(3){height:8px} .bx-sig i:nth-child(4){height:10px; opacity:.35}
.bx-bat{ width:24px; height:11.5px; border-radius:3.2px; box-shadow:inset 0 0 0 1px currentColor; opacity:.9; position:relative; }
.bx-bat::before{ content:""; position:absolute; inset:2px auto 2px 2px; width:13px; border-radius:1.6px; background:currentColor; }
.bx-bat::after{ content:""; position:absolute; right:-3px; top:3.6px; width:1.6px; height:4px; border-radius:0 1px 1px 0; background:currentColor; opacity:.5; }
.bx-home{
  position:absolute; z-index:38; bottom:8px; left:50%; transform:translateX(-50%);
  width:140px; height:5px; border-radius:3px; background:currentColor; opacity:.9;
}

.bx-win{
  width:100%; height:100%; border-radius:12px; overflow:hidden;
  background:var(--bx-d-bg); color:var(--bx-d-ink);
  box-shadow:var(--bx-d-sh3), 0 0 0 1px var(--bx-d-line2);
  display:flex; flex-direction:column;
}
.bx-win__bar{
  flex:none; height:40px; display:flex; align-items:center; justify-content:flex-end;
  gap:10px; padding-right:6px; background:var(--bx-d-bg);
  border-bottom:1px solid var(--bx-d-line);
}
.bx-wctl{ display:flex; align-items:center; width:138px; justify-content:flex-end; }
.bx-wctl span{
  width:46px; height:32px; display:grid; place-items:center; color:var(--bx-d-ink2);
}
.bx-wctl span:last-child:hover{ background:#c42b1c; color:#fff; }
.bx-wg{ display:block; width:10px; height:10px; }

.bx-cap{
  display:flex; align-items:center; gap:2px; padding:0 3px;
  height:32px; border-radius:16px; position:relative;
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), 0 2px 10px rgba(0,0,0,.28);
}
.bx-cap--lg{ height:44px; border-radius:22px; }
.bx-cap__b{
  width:38px; height:26px; border-radius:13px; display:grid; place-items:center;
  color:var(--bx-ink); opacity:.88;
}
.bx-cap--lg .bx-cap__b{ height:38px; border-radius:13px; }
.bx-cap__b svg{ width:18px; height:18px; }
.bx-dot-live{
  position:absolute; top:-1px; right:-1px; width:7px; height:7px; border-radius:50%;
  background:var(--bx-ok); box-shadow:0 0 0 2px var(--bx-bg);
  animation:bxPulse 1.2s var(--bx-ea-fade) infinite;
}

/* ========== 3. 通用零件 ========== */
.bx-star{ width:var(--s,30px); height:var(--s,30px); color:var(--bx-coral); flex:none; }
.bx-star svg{ width:100%; height:100%; fill:currentColor; }
.bx-star--spin svg{ animation:bxStar 5.6s var(--bx-ea-fade) infinite; transform-origin:50% 50%; }

.bx-ring{ width:16px; height:16px; flex:none; }
.bx-ring circle{ fill:none; stroke-width:2.2; }
.bx-ring .t{ stroke:var(--bx-hover2); }
.bx-ring .a{ stroke:var(--bx-coral); stroke-linecap:round; stroke-dasharray:44; stroke-dashoffset:13;
  transform:rotate(-90deg); transform-origin:50% 50%;
  animation:bxRing 7s var(--bx-ea-std) infinite; }

.bx-w{ animation:bxWord 9s var(--bx-ea-fade) infinite; animation-delay:calc(var(--i,0) * .16s); }
.bx-caret{
  display:inline-block; width:2px; height:1em; vertical-align:-.16em; margin-left:2px;
  background:var(--bx-coral); animation:bxCaret 1.1s steps(1,end) infinite;
}

@keyframes bxPulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.82)} }
@keyframes bxStar{ 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.07)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes bxRing{ 0%{stroke-dashoffset:42} 70%{stroke-dashoffset:9} 100%{stroke-dashoffset:9} }
@keyframes bxWord{ 0%,5%{opacity:0; transform:translateY(2px)} 13%,92%{opacity:1; transform:none} 99%,100%{opacity:0; transform:translateY(2px)} }
@keyframes bxCaret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
@keyframes bxFlow{ 0%{transform:translate3d(0,0,0) scale(1.05)} 100%{transform:translate3d(-6%,4%,0) scale(1.2) rotate(8deg)} }
@keyframes bxFlow2{ 0%{transform:translate3d(0,0,0) scale(1.15) rotate(0)} 100%{transform:translate3d(7%,-5%,0) scale(1) rotate(-10deg)} }
@keyframes bxFill{ 0%,12%{background:var(--bx-hover2)} 22%,84%{background:var(--bx-coral)} 96%,100%{background:var(--bx-hover2)} }
@keyframes bxBar{ 0%{width:24%} 70%{width:72%} 100%{width:78%} }
@keyframes bxSpringHint{ 0%,100%{transform:scale(1.07)} 45%{transform:scale(1.02)} }
@keyframes bxDot{ 0%,80%,100%{transform:translateY(0); opacity:.35} 40%{transform:translateY(-5px); opacity:1} }
@keyframes bxGridFlash{ 0%,88%{opacity:0} 92%{opacity:.5} 100%{opacity:0} }
/* 取景框角标：静止态即「已显形」（营销静帧必须看得见签名元素），
   动效只做一次轻微的「收框」呼吸；真站里请改成 :hover/:focus-within 220ms 过渡。 */
@keyframes bxFrame{ 0%,18%{opacity:1; transform:scale(1)} 46%{opacity:.34; transform:scale(1.035)} 78%,100%{opacity:1; transform:scale(1)} }
@keyframes bxRise{ 0%{opacity:0; transform:translateY(6px)} 100%{opacity:1; transform:none} }
@keyframes bxGlow{ 0%,100%{opacity:.82; transform:translateY(0)} 50%{opacity:1; transform:translateY(-6px)} }
@keyframes bxScan{ 0%{transform:translateY(-100%)} 100%{transform:translateY(340%)} }

/* 用户气泡 / 思考体 / 工具行 */
.bx-bubble{
  align-self:flex-end; max-width:84%; background:var(--bx-bubble);
  border-radius:14px; padding:10px 15px; font-size:15px; line-height:1.5; color:var(--bx-ink);
}
.bx-thumb{
  align-self:flex-end; width:104px; height:104px; border-radius:8px; overflow:hidden;
  box-shadow:0 0 0 .5px rgba(226,225,218,.28), 0 1px 3px rgba(0,0,0,.08);
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(217,119,87,.5), transparent 60%),
    linear-gradient(150deg,#2f3a46 0%,#1b2129 55%,#121417 100%);
  position:relative;
}
.bx-thumb::after{
  content:""; position:absolute; inset:14px 12px auto 12px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.22);
  box-shadow:0 12px 0 rgba(255,255,255,.14), 0 24px 0 rgba(255,255,255,.1), 0 36px 0 rgba(255,255,255,.07);
}
.bx-undo{
  align-self:flex-end; width:28px; height:28px; margin-top:-6px; display:grid; place-items:center;
  opacity:.4; color:var(--bx-ink);
}
.bx-undo svg{ width:15px; height:15px; }
.bx-think{
  border-left:2px solid var(--bx-divider); padding:8px 0 8px 14px;
  font-size:14px; line-height:1.7; font-style:italic; color:var(--bx-ink3);
}
.bx-toolrow{
  display:flex; align-items:center; gap:8px; font-size:14px; line-height:20px;
  color:var(--bx-ink2); padding:4px 0;
}
.bx-toolrow svg{ width:14px; height:14px; opacity:.7; }
.bx-toolrow .sp{ margin-left:auto; }
.bx-mono{ font-family:var(--bx-mono); font-size:12.5px; }

/* 工作流紧凑卡 */
.bx-wf{
  position:relative; isolation:isolate; width:318px; max-width:100%;
  display:flex; align-items:flex-start; gap:6px;
  border-radius:8px; padding:10px 8px 10px 12px; color:var(--bx-ink);
}
.bx-wf__surf{ position:absolute; inset:0; z-index:-1; border-radius:8px; box-shadow:0 0 0 1px var(--bx-divider); background:var(--bx-hover); }
.bx-wf__m{ min-width:0; flex:1; }
.bx-wf__t{ font-size:14px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-wf__s{ display:flex; gap:12px; font-size:12.5px; line-height:16px; color:var(--bx-ink3); font-variant-numeric:tabular-nums; margin-top:2px; }
.bx-wf__pips{ display:flex; gap:3px; margin-top:7px; }
.bx-wf__pips i{ display:block; width:14px; height:4px; border-radius:2px; background:var(--bx-hover2);
  animation:bxFill 6s var(--bx-ea-std) infinite; animation-delay:calc(var(--i) * .42s); }
.bx-wf > svg{ width:16px; height:16px; opacity:.5; margin-top:2px; flex:none; }

/* 产物附件卡 */
.bx-art{
  display:flex; align-items:center; gap:12px; width:318px; max-width:100%;
  border-radius:8px; padding:10px 12px 10px 0; overflow:hidden;
  box-shadow:inset 0 0 0 .5px rgba(226,225,218,.28); background:var(--bx-hover);
}
.bx-art__well{ position:relative; width:68px; height:56px; flex:none; overflow:hidden; }
.bx-art__paper{
  position:absolute; left:11px; top:10px; width:52px; height:70px; border-radius:3px;
  background:#e9e7e0; transform:rotate(-.1rad) translateY(19%);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.bx-art__paper::after{
  content:""; position:absolute; inset:9px 8px auto 8px; height:3px; border-radius:2px; background:rgba(30,30,28,.35);
  box-shadow:0 7px 0 rgba(30,30,28,.22), 0 14px 0 rgba(30,30,28,.22), 0 21px 0 rgba(30,30,28,.14);
}
.bx-art__m{ min-width:0; flex:1; }
.bx-art__n{ font-size:13.5px; color:var(--bx-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-art__s{ font-size:11.5px; color:var(--bx-ink3); margin-top:2px; font-variant-numeric:tabular-nums; }
.bx-art__dl{
  flex:none; height:32px; padding:0 12px; border-radius:8px; display:flex; align-items:center; gap:6px;
  background:var(--bx-hover2); font-size:13px; color:var(--bx-ink);
}
.bx-art__dl svg{ width:14px; height:14px; }

.bx-tchip{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
  border-radius:12px; background:var(--bx-tchip); color:#fff; font-size:12px; font-variant-numeric:tabular-nums;
}
.bx-tchip i{ width:6px; height:6px; border-radius:50%; background:#fff; animation:bxPulse 1.2s var(--bx-ea-fade) infinite; }

/* 滚动区首尾渐隐带 */
.bx-fade-t,.bx-fade-b{ position:absolute; left:0; right:0; pointer-events:none; z-index:20; }
.bx-fade-t{ top:0; height:18px;
  background:linear-gradient(to bottom, var(--c) 0%, color-mix(in srgb, var(--c) 85%, transparent) 13%,
    color-mix(in srgb, var(--c) 50%, transparent) 40%, color-mix(in srgb, var(--c) 15%, transparent) 70%, transparent 100%); }
.bx-fade-b{ bottom:0; height:28px;
  background:linear-gradient(to top, var(--c) 0%, color-mix(in srgb, var(--c) 85%, transparent) 13%,
    color-mix(in srgb, var(--c) 50%, transparent) 40%, color-mix(in srgb, var(--c) 15%, transparent) 70%, transparent 100%); }

/* 悬浮输入卡 */
.bx-comp{
  position:absolute; left:16px; right:16px; bottom:34px; z-index:25;
  background:var(--bx-card); border-radius:24px; padding:14px 12px 10px;
  box-shadow:var(--bx-card-sh);
}
.bx-comp__edit{ font-size:16px; line-height:1.4; color:var(--bx-ink); padding:0 4px 12px; }
.bx-comp__edit.ph{ color:var(--bx-ink3); }
.bx-comp__bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bx-comp__l,.bx-comp__r{ display:flex; align-items:center; gap:6px; min-width:0; }
.bx-cbtn{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--bx-ink); flex:none; }
.bx-cbtn svg{ width:19px; height:19px; }
.bx-cbtn--on{ background:var(--bx-hover2); }
.bx-mchip{ font-size:14px; padding:7px 8px; border-radius:8px; color:var(--bx-ink2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.bx-echip{ font-size:14px; padding:7px 8px; border-radius:8px; color:var(--bx-ink3); background:var(--bx-hover); flex:none; }
.bx-send{ width:38px; height:38px; border-radius:11px; background:var(--bx-ink); color:var(--bx-bg); display:grid; place-items:center; flex:none; }
.bx-send svg{ width:18px; height:18px; }

/* 液态玻璃方块 */
.bx-lg{
  position:relative; width:124px; height:124px; border-radius:30px; isolation:isolate;
  background:rgba(255,255,255,.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    inset 1.5px 1.5px 1.5px rgba(255,255,255,.45),
    inset -1.5px -2px 3px rgba(0,0,0,.16),
    0 10px 26px rgba(0,0,0,.24);
  display:grid; place-items:center;
}
.bx-lg::after{
  content:""; position:absolute; inset:0; border-radius:inherit; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 21%, rgba(255,255,255,0) 44%);
}
.bx-lg svg{ width:62px; height:62px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* dimensio 取景框角标 */
.bx-hxf{ position:relative; }
.bx-hxf::before,.bx-hxf::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  animation:bxFrame 5.2s var(--bx-ea-std) infinite;
}
.bx-hxf::before{
  background:
    linear-gradient(var(--bx-h-acc),var(--bx-h-acc)) 0 0/8px 1.5px no-repeat,
    linear-gradient(var(--bx-h-acc),var(--bx-h-acc)) 0 0/1.5px 8px no-repeat,
    linear-gradient(var(--bx-h-acc),var(--bx-h-acc)) 100% 0/8px 1.5px no-repeat,
    linear-gradient(var(--bx-h-acc),var(--bx-h-acc)) 100% 0/1.5px 8px no-repeat;
}
.bx-hxf::after{
  background:
    linear-gradient(var(--bx-h-acc),var(--bx-h-acc)) 0 100%/8px 1.5px no-repeat,
    linear-gradient(var(--bx-h-acc),var(--bx-h-acc)) 0 100%/1.5px 8px no-repeat,
    linear-gradient(var(--bx-h-acc),var(--bx-h-acc)) 100% 100%/8px 1.5px no-repeat,
    linear-gradient(var(--bx-h-acc),var(--bx-h-acc)) 100% 100%/1.5px 8px no-repeat;
}

/* ========== 4. ① Claude 对话页 ========== */
.bx-s-claude .bx-chat{ position:absolute; inset:0; background:var(--bx-bg); color:var(--bx-ink); overflow:hidden; }
.bx-s-claude .bx-col{
  position:absolute; inset:0; padding:96px 16px 190px; display:flex; flex-direction:column; gap:12px;
}
.bx-s-claude .bx-col > *{ flex:none; }
.bx-s-claude .bx-top{ position:absolute; z-index:30; top:52px; left:14px; right:14px; display:flex; align-items:flex-start; justify-content:space-between; }
.bx-s-claude .bx-burger{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--bx-hover); color:var(--bx-ink); }
.bx-s-claude .bx-burger svg{ width:16px; height:16px; }
.bx-s-claude .bx-asst{ display:flex; gap:10px; align-items:flex-start; }
.bx-s-claude .bx-asst p{ font-size:15px; line-height:1.7; color:var(--bx-ink); }
.bx-s-claude .bx-chips{
  position:absolute; left:16px; right:16px; bottom:136px; z-index:24;
  display:flex; gap:6px; align-items:center;
  animation:bxRise var(--bx-t-quick) var(--bx-ea-decel) both; animation-delay:.5s;
}
.bx-s-claude .bx-attr{ font-size:11.5px; color:var(--bx-ink3); padding:3px 8px; border-radius:11px; background:var(--bx-hover); }

/* ========== 5. ② 主页启动器 ========== */
.bx-s-home .bx-wall{ position:absolute; inset:0; background:#0a0a0a; overflow:hidden; }
.bx-s-home .bx-wall i{ position:absolute; inset:-40%; display:block; filter:blur(38px); will-change:transform; }
.bx-s-home .bx-wall i:nth-child(1){
  background:
    radial-gradient(38% 30% at 26% 24%, rgba(58,96,168,.82), transparent 68%),
    radial-gradient(30% 26% at 76% 14%, rgba(24,72,96,.8), transparent 70%),
    radial-gradient(42% 32% at 62% 80%, rgba(20,56,82,.85), transparent 68%);
  animation:bxFlow 26s var(--bx-ea-fade) infinite alternate;
}
.bx-s-home .bx-wall i:nth-child(2){
  background:
    radial-gradient(34% 26% at 18% 74%, rgba(96,54,126,.6), transparent 70%),
    radial-gradient(28% 22% at 84% 52%, rgba(160,74,58,.45), transparent 72%),
    radial-gradient(30% 24% at 46% 38%, rgba(30,110,132,.42), transparent 72%);
  animation:bxFlow2 34s var(--bx-ea-fade) infinite alternate;
  mix-blend-mode:screen;
}
.bx-s-home .bx-vig{ position:absolute; inset:0;
  background:radial-gradient(125% 95% at 50% 42%, rgba(0,0,0,0) 52%, rgba(0,0,0,.38) 100%); }
.bx-s-home .bx-brand{
  position:absolute; z-index:10; top:56px; left:18px;
  font-family:var(--bx-serif); font-weight:300; font-size:14px; line-height:1.16; letter-spacing:.14em;
  color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.bx-s-home .bx-acct{
  position:absolute; z-index:10; top:50px; right:16px; height:40px; padding:0 15px; border-radius:22px;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(9px) saturate(1.25); backdrop-filter:blur(9px) saturate(1.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), 0 6px 18px rgba(0,0,0,.24);
  color:#fff; font-size:14px; font-weight:600; letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.bx-s-home .bx-acct i{ width:7px; height:7px; border-radius:50%; background:var(--bx-ok); animation:bxPulse 1.2s var(--bx-ea-fade) infinite; }
.bx-s-home .bx-grid{
  position:absolute; z-index:10; top:50%; left:0; right:0; transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(2, auto); justify-content:center; gap:26px 22px;
}
.bx-s-home .bx-entry{ display:flex; flex-direction:column; align-items:center; gap:11px;
  animation:bxRise var(--bx-t-base) var(--bx-ea-fade) both; animation-delay:calc(var(--i) * 34ms + .2s); }
.bx-s-home .bx-entry b{ font-size:13px; font-weight:500; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); }

/* ========== 6. ③ 工作空间 / 文件 ========== */
.bx-s-files .bx-ios{ position:absolute; inset:0; background:var(--bx-i-bg); color:#000; overflow:hidden; }
.bx-s-files .bx-nav{ position:absolute; z-index:20; top:58px; left:14px; right:14px; display:flex; align-items:center; gap:10px; }
.bx-s-files .bx-rnd{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; color:var(--bx-i-blue);
  background:rgba(248,248,248,.55);
  -webkit-backdrop-filter:blur(5px) saturate(1.9); backdrop-filter:blur(5px) saturate(1.9);
  box-shadow:0 0 0 .5px rgba(190,190,190,.5), 0 10px 22px rgba(0,0,0,.1), inset 0 1.4px 1px -.6px rgba(255,255,255,.95);
}
.bx-s-files .bx-rnd svg{ width:19px; height:19px; }
.bx-s-files .bx-crumb{ flex:1; display:flex; align-items:center; gap:2px; overflow:hidden; }
.bx-s-files .bx-pb{ font-size:13px; padding:5px 8px; border-radius:8px; color:var(--bx-i-g2); white-space:nowrap; }
.bx-s-files .bx-pb.on{ background:rgba(255,255,255,.85); color:#000; box-shadow:0 0 0 .5px rgba(190,190,190,.45); }
.bx-s-files .bx-crumb span{ color:var(--bx-i-g3); font-size:12px; }
.bx-s-files .bx-h1{ position:absolute; z-index:15; top:116px; left:18px; font-size:30px; font-weight:700; letter-spacing:-.01em; }
.bx-s-files .bx-h1 em{ display:block; font-style:normal; font-size:13px; font-weight:400; color:var(--bx-i-gray); margin-top:3px; }
.bx-s-files .bx-fgrid{ position:absolute; top:182px; left:14px; right:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bx-s-files .bx-fc{ background:var(--bx-i-card); border-radius:14px; padding:12px 8px 10px; display:flex; flex-direction:column; align-items:center; gap:7px;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 0 0 .5px rgba(60,60,67,.05); }
.bx-s-files .bx-fc svg{ width:44px; height:44px; }
.bx-s-files .bx-fc b{ font-size:13px; font-weight:400; color:#000; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-s-files .bx-fc em{ font-size:11px; font-style:normal; color:var(--bx-i-gray); font-variant-numeric:tabular-nums; }
.bx-s-files .bx-prog{ width:100%; height:3px; border-radius:2px; background:rgba(60,60,67,.12); overflow:hidden; }
.bx-s-files .bx-prog i{ display:block; width:62%; height:100%; border-radius:2px; background:var(--bx-i-blue); animation:bxBar 5s var(--bx-ea-std) infinite; }
.bx-s-files .bx-drop{
  grid-column:1 / -1; position:relative; height:104px; border-radius:14px;
  background:rgba(0,136,255,.1); box-shadow:inset 0 0 0 2px var(--bx-i-blue);
  display:grid; place-items:center;
}
.bx-s-files .bx-pill{
  padding:11px 18px; border-radius:999px; background:#fff; font-size:13.5px; color:#000;
  box-shadow:0 6px 24px rgba(0,0,0,.16); animation:bxSpringHint 650ms var(--bx-ea-settle) infinite;
}
.bx-s-files .bx-list{ position:absolute; left:14px; right:14px; top:552px; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 0 0 .5px rgba(60,60,67,.05); }
.bx-s-files .bx-li{ display:flex; align-items:center; gap:14px; height:52px; padding:0 14px; position:relative; }
.bx-s-files .bx-li + .bx-li::before{ content:""; position:absolute; left:56px; right:0; top:0; height:.5px; background:var(--bx-i-sep); }
.bx-s-files .bx-li svg.ic{ width:28px; height:28px; flex:none; }
.bx-s-files .bx-li b{ font-size:15px; font-weight:400; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-s-files .bx-li em{ font-size:13px; font-style:normal; color:var(--bx-i-gray); font-variant-numeric:tabular-nums; }
.bx-s-files .bx-li svg.cv{ width:12px; height:12px; color:#c4c4c8; flex:none; }
.bx-s-files .bx-bar{
  position:absolute; left:0; right:0; bottom:0; height:82px; padding:14px 22px 0;
  display:flex; align-items:flex-start; justify-content:space-between;
  background:rgba(247,247,247,.82);
  -webkit-backdrop-filter:blur(30px) saturate(1.9); backdrop-filter:blur(30px) saturate(1.9);
  box-shadow:0 -.5px 0 rgba(60,60,67,.14);
}
.bx-s-files .bx-bar b{ font-size:15px; font-weight:400; color:var(--bx-i-blue); }

/* ========== 7. ④ dimensio ========== */
.bx-s-dim .bx-hx{ position:absolute; inset:0; background:var(--bx-h-bg); color:var(--bx-h-ink); overflow:hidden; font-size:13px; }
.bx-s-dim .bx-floor{ position:absolute; inset:0; }
.bx-s-dim .bx-floor .g1{ position:absolute; inset:0;
  background-image:linear-gradient(var(--bx-h-g1) 1px, transparent 1px), linear-gradient(90deg, var(--bx-h-g1) 1px, transparent 1px);
  background-size:26px 26px; }
.bx-s-dim .bx-floor .g2{ position:absolute; inset:0;
  background-image:linear-gradient(var(--bx-h-g2) 1px, transparent 1px), linear-gradient(90deg, var(--bx-h-g2) 1px, transparent 1px);
  background-size:130px 130px; }
.bx-s-dim .bx-floor .fog{ position:absolute; inset:0;
  background:radial-gradient(120% 86% at 50% 30%, transparent 34%, var(--bx-h-bg) 96%); }
.bx-s-dim .bx-floor .flash{ position:absolute; inset:0; background:var(--bx-h-acc-s); opacity:0;
  animation:bxGridFlash 11s var(--bx-ea-fade) infinite; }
.bx-s-dim .bx-band{
  position:absolute; z-index:10; top:0; left:0; right:0; height:22px; display:flex; align-items:center; gap:8px; padding:0 12px;
  font-size:11.5px; color:var(--bx-h-ink2);
}
.bx-s-dim .bx-band svg.mk{ width:14px; height:14px; color:var(--bx-h-acc); }
.bx-s-dim .bx-pcap{ margin-left:auto; display:flex; align-items:center; gap:6px; height:16px; padding:0 8px; border-radius:8px;
  background:var(--bx-h-acc-s); color:var(--bx-h-acc); font-size:11px; }
.bx-s-dim .bx-side{ position:absolute; z-index:10; top:22px; bottom:0; left:0; width:210px; padding:10px 8px;
  border-right:1px solid var(--bx-h-line); display:flex; flex-direction:column; gap:2px; }
.bx-s-dim .bx-side h6{ font-size:10.5px; font-weight:500; color:var(--bx-h-ink3); letter-spacing:.08em; padding:6px 10px 4px; }
.bx-s-dim .bx-sr{ display:flex; align-items:center; gap:8px; border-radius:8px; padding:8px 10px; font-size:13px; color:var(--bx-h-ink2); }
.bx-s-dim .bx-sr.on{ background:var(--bx-h-s1); color:var(--bx-h-ink); box-shadow:inset 0 0 0 1px var(--bx-h-line); }
.bx-s-dim .bx-sr svg{ width:14px; height:14px; flex:none; opacity:.8; }
.bx-s-dim .bx-sr b{ font-weight:400; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-s-dim .bx-hxcol{ position:absolute; z-index:10; top:22px; bottom:0; left:210px; right:0; display:flex; flex-direction:column; align-items:center; padding:26px 24px 22px; gap:16px; }
.bx-s-dim .bx-hxc{ width:100%; max-width:620px; display:flex; flex-direction:column; gap:16px; }
.bx-s-dim .bx-hxcol > *{ flex:none; }
.bx-s-dim .bx-ub{ align-self:flex-end; max-width:78%; background:#17171d; border-radius:12px; padding:10px 14px; font-size:14px; line-height:1.55; }
.bx-s-dim .bx-ar{ font-size:14px; line-height:1.7; color:var(--bx-h-ink); }
.bx-s-dim .bx-code{ background:var(--bx-h-code); border:1px solid var(--bx-h-line); border-radius:12px; padding:12px 14px;
  font-family:var(--bx-mono); font-size:12px; line-height:1.75; color:var(--bx-h-ink2); }
.bx-s-dim .bx-code .k{ color:var(--bx-h-acc); } .bx-s-dim .bx-code .s{ color:var(--bx-h-ok); } .bx-s-dim .bx-code .c{ color:var(--bx-h-ink3); }
.bx-s-dim .bx-hcard{ background:var(--bx-h-s1); border:1px solid var(--bx-h-line); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.bx-s-dim .bx-hcard b{ font-size:13px; font-weight:500; }
.bx-s-dim .bx-hcard em{ font-style:normal; font-size:11.5px; color:var(--bx-h-ink3); font-variant-numeric:tabular-nums; }
.bx-s-dim .bx-hstat{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--bx-h-ok); }
.bx-s-dim .bx-hstat i{ width:6px; height:6px; border-radius:50%; background:var(--bx-h-ok); animation:bxPulse 1.2s var(--bx-ea-fade) infinite; }
.bx-s-dim .bx-hin{ width:100%; max-width:620px; margin-top:auto;
  background:var(--bx-h-s2); border:1px solid var(--bx-h-line); border-radius:16px; padding:14px 14px 10px; }
.bx-s-dim .bx-hin p{ font-size:14px; color:var(--bx-h-ink3); padding-bottom:12px; }
.bx-s-dim .bx-hin .bx-hrow{ display:flex; align-items:center; gap:6px; }
.bx-s-dim .bx-hcap{ height:26px; padding:0 10px; border-radius:9px; background:rgba(228,230,255,.05); color:var(--bx-h-ink2);
  font-size:12px; display:flex; align-items:center; gap:6px; }
.bx-s-dim .bx-hsend{ margin-left:auto; width:30px; height:30px; border-radius:9px; background:var(--bx-h-acc); color:#0a0a0d; display:grid; place-items:center; }
.bx-s-dim .bx-hsend svg{ width:15px; height:15px; }

/* ========== 8. ⑤ Vertex 多媒体 ========== */
.bx-s-vertex .bx-vx{ position:absolute; inset:0; background:#fdfcfc; color:#1b1c1e; overflow:hidden; }
.bx-s-vertex .bx-glow{ position:absolute; left:-10%; right:-10%; bottom:0; height:46%; pointer-events:none;
  background:linear-gradient(180deg, rgba(216,231,251,0), rgba(208,226,252,.5) 55%, rgba(193,217,250,.92));
  animation:bxGlow 9s var(--bx-ea-fade) infinite; }
.bx-s-vertex .bx-vtop{ position:absolute; z-index:20; top:0; left:0; right:0; padding:52px 8px 14px; display:flex; align-items:center; gap:6px;
  background:linear-gradient(180deg, rgba(253,252,252,.97) 0%, rgba(253,252,252,.88) 64%, rgba(253,252,252,0) 100%); }
.bx-s-vertex .bx-vb{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#444746; flex:none; }
.bx-s-vertex .bx-vb svg{ width:20px; height:20px; }
.bx-s-vertex .bx-vpill{ display:flex; align-items:center; gap:6px; padding:7px 8px 7px 12px; border-radius:999px; min-width:0; }
.bx-s-vertex .bx-vpill b{ font-size:16px; font-weight:500; }
.bx-s-vertex .bx-vpill em{ font-size:16px; font-style:normal; color:#8b8f8d; max-width:38vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-s-vertex .bx-vpill svg{ width:16px; height:16px; color:#8b8f8d; }
.bx-s-vertex .bx-vr{ margin-left:auto; display:flex; gap:2px; }
.bx-s-vertex .bx-vcol{ position:absolute; inset:112px 16px 128px; display:flex; flex-direction:column; gap:16px; }
.bx-s-vertex .bx-vhello{ display:flex; align-items:center; gap:12px; }
.bx-s-vertex .bx-vhello span{ font-size:32px; font-weight:360; line-height:1.3; color:#3c4043; }
.bx-s-vertex .bx-vub{ align-self:flex-end; max-width:84%; background:#f2f0f0; border-radius:40px; padding:14px 22px; font-size:16px; line-height:1.5; }
.bx-s-vertex .bx-media{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/9;
  background:linear-gradient(160deg,#1f4f74 0%,#2f7d9b 38%,#79c3c8 72%,#d9e9ef 100%);
  box-shadow:0 8px 28px rgba(31,79,116,.24); }
.bx-s-vertex .bx-media::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 24% 18%, rgba(255,255,255,.4), transparent 62%),
             radial-gradient(70% 60% at 82% 88%, rgba(10,40,66,.5), transparent 60%); }
.bx-s-vertex .bx-media .scan{ position:absolute; left:0; right:0; top:0; height:30%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent);
  animation:bxScan 4.6s var(--bx-ea-fade) infinite; }
.bx-s-vertex .bx-media .play{ position:absolute; inset:0; margin:auto; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.9); display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.bx-s-vertex .bx-media .play svg{ width:18px; height:18px; color:#1b1c1e; margin-left:2px; }
.bx-s-vertex .bx-media .dur{ position:absolute; right:10px; bottom:10px; padding:3px 8px; border-radius:8px;
  background:rgba(0,0,0,.45); color:#fff; font-size:11.5px; font-variant-numeric:tabular-nums; }
.bx-s-vertex .bx-vgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.bx-s-vertex .bx-vgrid i{ display:block; aspect-ratio:1; border-radius:12px; }
.bx-s-vertex .bx-vgrid i:nth-child(1){ background:linear-gradient(145deg,#f3b95f,#d9665a); }
.bx-s-vertex .bx-vgrid i:nth-child(2){ background:linear-gradient(145deg,#8fb7f0,#3b5f9e); }
.bx-s-vertex .bx-vgrid i:nth-child(3){ background:linear-gradient(145deg,#a7dfc0,#2f7a63); }
.bx-s-vertex .bx-vgrid i:nth-child(4){ background:linear-gradient(145deg,#d6c6f2,#6a4fa3); }
.bx-s-vertex .bx-vmeta{ font-size:12px; color:#8b8f8d; font-variant-numeric:tabular-nums; }
.bx-s-vertex .bx-vwait{ display:flex; align-items:center; gap:5px; height:28px; }
.bx-s-vertex .bx-vwait i{ width:4px; height:4px; border-radius:50%; background:#1b1c1e; animation:bxDot 1.3s var(--bx-ea-fade) infinite; }
.bx-s-vertex .bx-vwait i:nth-child(2){ animation-delay:.16s } .bx-s-vertex .bx-vwait i:nth-child(3){ animation-delay:.32s }
.bx-s-vertex .bx-vin{ position:absolute; z-index:22; left:16px; right:16px; bottom:30px; background:#fff; border-radius:40px; padding:14px 16px;
  display:flex; align-items:center; gap:8px; box-shadow:0 10px 30px rgba(31,45,66,.14), 0 0 0 .5px rgba(0,0,0,.04); }
.bx-s-vertex .bx-vin p{ flex:1; font-size:17px; line-height:24px; color:#8b8f8d; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-s-vertex .bx-vsend{ width:40px; height:40px; border-radius:50%; background:#a8c7fa; color:#1a1c1e; display:grid; place-items:center; flex:none; }
.bx-s-vertex .bx-vsend svg{ width:18px; height:18px; }

/* ========== 9. ⑥ 桌面客户端全景 ========== */
.bx-s-desk .bx-body{ flex:1; display:flex; min-height:0; }
.bx-s-desk .bx-dside{ flex:none; width:248px; padding:10px 8px; border-right:1px solid var(--bx-d-line);
  background:rgba(26,25,24,.52); -webkit-backdrop-filter:blur(52px) saturate(1.5); backdrop-filter:blur(52px) saturate(1.5);
  display:flex; flex-direction:column; gap:2px; position:relative; }
.bx-s-desk .bx-dside h6{ font-size:11px; font-weight:500; color:var(--bx-d-ink3); letter-spacing:.06em; padding:10px 10px 5px; }
.bx-s-desk .bx-dr{ display:flex; align-items:center; gap:9px; height:32px; padding:0 10px; border-radius:8px; font-size:14px; color:var(--bx-d-ink2); }
.bx-s-desk .bx-dr svg{ width:16px; height:16px; opacity:.75; flex:none; }
.bx-s-desk .bx-dr b{ font-weight:400; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-s-desk .bx-dr.on{ background:var(--bx-d-sel); color:var(--bx-d-ink); }
.bx-s-desk .bx-dr.on svg{ opacity:1; color:var(--bx-coral); }
.bx-s-desk .bx-dgrip{ position:absolute; top:50%; right:-1.5px; transform:translateY(-50%); width:3px; height:48px; border-radius:2px; background:var(--bx-d-line2); }
.bx-s-desk .bx-dmid{ flex:1; min-width:0; position:relative; background:var(--bx-bg); border-right:1px solid var(--bx-divider); overflow:hidden; }
.bx-s-desk .bx-dcol{ position:absolute; inset:0; padding:26px 26px 132px; display:flex; flex-direction:column; gap:14px; }
.bx-s-desk .bx-dcol > *{ flex:none; }
.bx-s-desk .bx-dcontent > *{ flex:none; }
.bx-s-desk .bx-dock{ flex:none; width:460px; background:var(--bx-d-bg); display:flex; flex-direction:column; min-height:0; position:relative; }
.bx-s-desk .bx-dhandle{ position:absolute; left:0; top:0; bottom:0; width:9px; }
.bx-s-desk .bx-dhandle::after{ content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%); width:2px; height:56px; border-radius:1px; background:var(--bx-d-line2); }
.bx-s-desk .bx-dhead{ flex:none; display:flex; align-items:center; gap:8px; padding:12px 12px 10px 18px; }
.bx-s-desk .bx-dhead h4{ font-family:var(--bx-serif); font-size:16.5px; font-weight:400; color:var(--bx-d-ink); }
.bx-s-desk .bx-wschip{ font-size:12px; color:var(--bx-d-ink2); background:var(--bx-d-hover); border-radius:7px; padding:2px 8px; max-width:40%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-s-desk .bx-dicons{ margin-left:auto; display:flex; gap:2px; }
.bx-s-desk .bx-dib{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--bx-d-ink2); }
.bx-s-desk .bx-dib.on{ background:var(--bx-d-panel); color:var(--bx-d-ink); }
.bx-s-desk .bx-dib svg{ width:16px; height:16px; }
.bx-s-desk .bx-dtabs{ flex:none; display:flex; gap:4px; padding:0 12px 10px 18px; border-bottom:1px solid var(--bx-d-line); }
.bx-s-desk .bx-dtab{ height:28px; padding:0 11px; border-radius:9px; font-size:13px; color:var(--bx-d-ink2); display:flex; align-items:center; gap:6px; }
.bx-s-desk .bx-dtab svg{ width:14px; height:14px; }
.bx-s-desk .bx-dtab.on{ background:var(--bx-d-panel); color:var(--bx-d-ink); }
.bx-s-desk .bx-dcontent{ flex:1; min-height:0; padding:14px 14px 18px 18px; display:flex; flex-direction:column; gap:10px; }
.bx-s-desk .bx-dsec{ font-size:11px; letter-spacing:.06em; color:var(--bx-d-ink3); padding-top:4px; }
.bx-s-desk .bx-agent{ display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:8px; font-size:13px; color:var(--bx-d-ink2);
  box-shadow:inset 0 0 0 1px var(--bx-d-line); }
.bx-s-desk .bx-agent b{ font-weight:400; color:var(--bx-d-ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-s-desk .bx-agent em{ font-style:normal; font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--bx-d-ink3); }
.bx-s-desk .bx-agent i.run{ width:7px; height:7px; border-radius:50%; background:var(--bx-ok); animation:bxPulse 1.2s var(--bx-ea-fade) infinite; flex:none; }
.bx-s-desk .bx-agent i.done{ width:7px; height:7px; border-radius:50%; background:var(--bx-d-ink3); flex:none; }
.bx-s-desk .bx-wf{ color:var(--bx-d-ink); }
.bx-s-desk .bx-wf__surf{ box-shadow:0 0 0 1px var(--bx-d-line); background:var(--bx-d-hover); }
.bx-s-desk .bx-wf__s{ color:var(--bx-d-ink3); }

/* ========== 10. 降级：reduce / 暂停 ========== */
@media (prefers-reduced-motion: reduce){
  .bx-kit *, .bx-kit *::before, .bx-kit *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; animation-delay:0s !important;
  }
  .bx-kit .bx-w{ opacity:1 !important; transform:none !important; }
  .bx-kit .bx-caret{ opacity:1 !important; }
}
.bx-kit[data-bx-paused="1"] *, .bx-kit[data-bx-paused="1"] *::before, .bx-kit[data-bx-paused="1"] *::after{ animation-play-state:paused !important; }
.bx-fit[data-bx-off="1"] *, .bx-fit[data-bx-off="1"] *::before, .bx-fit[data-bx-off="1"] *::after{ animation-play-state:paused !important; }