/* ============================================================
   LensWave 工作台 v2 · 创作者视角重构（rectify_wb_v2.css）
   只加新组件样式 + 覆盖本页既有布局；不改 style.css / v10_common.js。
   浅蓝白体系，禁紫。
   ============================================================ */

/* ---------- 1. 顶部栏重排 ---------- */
.wb-topbar { display:flex; align-items:center; gap:12px; padding:0 16px; height:56px; }
.wb-tb-left { display:flex; align-items:center; gap:10px; min-width:0; flex:0 0 auto; }
.wb-tb-left .brand { font-weight:700; font-size:16px; white-space:nowrap; }
.wb-proj-switch select {
  max-width:200px; padding:6px 10px; border:1px solid var(--border); border-radius:12px;
  background:var(--card); color:var(--text); font-size:13px; outline:none; cursor:pointer;
}
.wb-proj-switch select:focus { border-color:var(--primary); }
.wb-tb-center { flex:1; display:flex; justify-content:center; min-width:0; }
.wb-global-style {
  width:min(520px, 100%); padding:8px 14px; border:1px solid var(--border); border-radius:999px;
  background:var(--bg-soft); color:var(--text); font-size:13px; outline:none; transition:all .15s;
}
.wb-global-style::placeholder { color:#909399; }
.wb-global-style:focus { border-color:var(--primary); background:var(--card); box-shadow:0 0 0 3px rgba(56,189,248,.15); }
.wb-tb-right { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.wb-more-wrap { position:relative; }
.wb-more-menu {
  position:absolute; right:0; top:calc(100% + 8px); min-width:180px; background:var(--card);
  border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(30,60,110,.16);
  padding:8px; z-index:900; display:flex; flex-direction:column; gap:4px;
}
.wb-more-menu .btn { width:100%; justify-content:flex-start; }
.wb-more-menu .wb-mm-group { font-size:12px; color:#909399; padding:6px 8px 2px; letter-spacing:.5px; }

/* ---------- 2. 左侧栏分组导航 ---------- */
.wb-nav-group { margin-bottom:6px; }
.wb-nav-title { font-size:12px; color:#909399; letter-spacing:1px; padding:10px 12px 4px; }
.wb-nav-item {
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 12px; margin:1px 0;
  border:none; background:transparent; color:var(--text); font-size:13px; border-radius:12px; cursor:pointer; text-align:left;
}
.wb-nav-item:hover { background:var(--primary-soft); color:var(--primary-dark); }
.wb-nav-item.active { background:var(--primary-soft); color:var(--primary-dark); font-weight:600; }
.wb-nav-item .wb-nav-ico { width:18px; text-align:center; opacity:.8; }
.wb-nav-item .wb-nav-tag { margin-left:auto; font-size:12px; color:#909399; }
.wb-user-card {
  margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-top:1px solid var(--border); background:var(--card);
}
.wb-user-card .wb-avatar {
  width:34px; height:34px; border-radius:50%; background:var(--primary-soft); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.wb-user-card .wb-uc-name { font-size:13px; font-weight:600; }
.wb-user-card .wb-uc-tag { font-size:12px; color:var(--primary-dark); background:var(--primary-soft); border-radius:8px; padding:1px 6px; }
.sidebar .sb-inner { display:flex; flex-direction:column; min-height:calc(100vh - 120px); }

/* ---------- 3. 项目总览页（工作台首页） ---------- */
#wbHomePage { padding:8px 0 24px; }
.wb-hero-row { display:flex; flex-direction:column; gap:16px; margin:16px 0 28px; }
.wb-hero-card {
  border:1px solid rgba(255,255,255,.9); border-radius:16px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  min-height:140px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:8px; cursor:pointer; transition:all .18s; padding:32px 36px;
  box-shadow:0 2px 8px rgba(0,0,0,.04), 0 12px 32px rgba(15,23,42,.06);
}
.wb-hero-card:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(56,189,248,.12), 0 16px 40px rgba(15,23,42,.10); }
.wb-hero-card.ghost { background:rgba(255,255,255,.5); border:1px dashed #E2E8F0; }
.wb-hero-big { font-size:40px; font-weight:700; letter-spacing:-0.02em; color:#0F172A; line-height:1.15; }
.wb-hero-sub { font-size:14px; line-height:1.6; color:#64748B; margin-top:6px; }
.wb-sec-head { display:flex; align-items:baseline; justify-content:space-between; margin:6px 2px 12px; }
.wb-sec-title { font-size:16px; font-weight:700; color:var(--ink, #1d2129); }
.wb-sec-more { font-size:12px; color:var(--primary); cursor:pointer; }
.wb-wall { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media (max-width:1280px){ .wb-wall { grid-template-columns:repeat(3,1fr); } }
@media (max-width:960px){ .wb-wall { grid-template-columns:repeat(2,1fr); } .wb-hero-row { grid-template-columns:1fr; } }
.wb-wall-card {
  background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  cursor:pointer; transition:all .18s; display:flex; flex-direction:column;
}
.wb-wall-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(30,60,110,.14); border-color:var(--primary); }
.wb-wall-cover {
  position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#DCE9F9,#f7f9fc);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.wb-wall-cover.v { aspect-ratio:9/12; }
.wb-wall-cover img { width:100%; height:100%; object-fit:cover; }
.wb-wall-cover .wbc-ph { font-size:24px; opacity:.5; }
.wb-wall-cover .wbc-badge {
  position:absolute; top:8px; left:8px; font-size:12px; background:rgba(255,255,255,.85);
  color:var(--primary-dark); border-radius:8px; padding:2px 7px;
}
.wb-wall-cover .wbc-shots {
  position:absolute; top:8px; right:8px; font-size:12px; background:var(--primary);
  color:#fff; border-radius:8px; padding:2px 7px;
}
.wb-wall-body { padding:12px 14px; }
.wb-wall-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-wall-meta { font-size:12px; color:#909399; margin-top:4px; }
.wb-wall-actions { display:flex; gap:6px; margin-top:10px; }
.wb-wall-actions .btn { font-size:12px; padding:3px 8px; }
.wb-home-empty { text-align:center; padding:48px 20px; color:#909399; font-size:13px; }
.wb-home-empty .btn { margin-top:12px; }

/* ---------- 4. 设置抽屉 ---------- */
#wbSettingsDrawer {
  position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100vh; background:var(--card);
  border-left:1px solid var(--border); box-shadow:-12px 0 32px rgba(30,60,110,.14); z-index:1000;
  transition:right .22s ease; display:flex; flex-direction:column;
}
#wbSettingsDrawer.open { right:0; }
.wb-sd-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); }
.wb-sd-title { font-size:16px; font-weight:700; }
.wb-sd-body { flex:1; overflow-y:auto; padding:14px 18px; }
.wb-sd-sec { border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:12px; background:var(--bg-soft); }
.wb-sd-sec > summary { cursor:pointer; font-weight:600; font-size:14px; color:var(--text); }
.wb-sd-sec > summary .wb-sd-hint { font-weight:400; font-size:12px; color:#909399; margin-left:6px; }
.wb-sd-rows { margin-top:10px; }
.wb-sd-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:13px; }
#wbSdMask { position:fixed; inset:0; background:rgba(20,40,70,.28); z-index:990; }
.wb-sd-keypanel-wrap #keyRows { margin-top:4px; }

/* ---------- 5. 画布：三态视图切换（浮层：graphView 是 fixed z1000 覆盖层） ---------- */
.wb-vswitch {
  position:fixed; top:64px; right:16px; z-index:1100; display:flex; gap:2px;
  background:var(--card); border:1px solid var(--border); border-radius:999px; padding:3px;
  box-shadow:0 2px 10px rgba(30,60,110,.18);
}
.wb-vswitch button {
  border:none; background:transparent; padding:5px 16px; border-radius:999px; font-size:12px;
  color:var(--sub); cursor:pointer;
}
.wb-vswitch button.active { background:var(--primary); color:#fff; }
#canvasSwitch { display:none !important; }
body.wb-home-mode .wb-vswitch { display:none; }

/* ---------- 6. 画布：彩色分组容器（蓝系色板） ---------- */
.gv-scene-box { border:1.5px solid rgba(56,189,248,.45); border-radius:12px; background:rgba(232,241,251,.45); }
.gv-scene-box:nth-of-type(4n+2) { border-color:rgba(92,134,190,.4); background:rgba(221,235,250,.5); }
.gv-scene-box:nth-of-type(4n+3) { border-color:rgba(95,170,210,.4); background:rgba(225,240,250,.5); }
.gv-scene-box:nth-of-type(4n+4) { border-color:rgba(110,150,205,.45); background:rgba(230,238,250,.5); }
.gv-scene-title {
  position:absolute; top:8px; left:12px; font-size:12px; font-weight:700; color:var(--primary-dark);
  background:rgba(255,255,255,.85); border-radius:8px; padding:3px 10px; border:1px solid rgba(56,189,248,.35);
}

/* ---------- 7. 左下六件套（提升到时间线条上方） ---------- */
#graphView.fullscreen .graph-hud.wb-hud6 {
  left:12px !important; right:auto !important; bottom:153px !important; z-index:1002; flex-direction:row; align-items:center;
  display:flex !important; gap:4px; padding:6px; border-radius:12px;
  background:var(--card) !important; border:1px solid var(--border); box-shadow:0 6px 20px rgba(30,60,110,.14);
}
.graph-hud.wb-hud6 .graph-hint { display:none; }
.graph-hud.wb-hud6 .btn, .graph-hud.wb-hud6 button {
  background:var(--bg-soft) !important; color:var(--ink) !important;
  border:1px solid var(--border) !important; height:28px !important;
}
.graph-hud.wb-hud6 .btn:hover, .graph-hud.wb-hud6 button:hover { background:var(--primary) !important; color:#fff !important; }
.graph-hud.wb-hud6 .graph-zoom { color:var(--ink) !important; }
.wb-hud6 .btn { font-size:12px; padding:4px 9px; }
.wb-hud6 .hud-label { font-size:12px; color:#909399; padding:0 4px; }
.wb-hud6 .on { background:var(--primary-soft); color:var(--primary-dark); border-color:var(--primary); }
#wbHudMiniMap { position:relative; }
#wbHudMiniMap .wb-mm-tip {
  display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--ink,#1d2129); color:#fff; font-size:12px; padding:4px 10px; border-radius:8px; white-space:nowrap;
}
#wbHudMiniMap:hover .wb-mm-tip { display:block; }

/* ---------- 8. 时间线底栏条（fixed 浮层，盖在全屏画布之上） ---------- */
#wbTlStrip {
  position:fixed; left:0; right:0; bottom:0; z-index:1001;
  border-top:1px solid var(--border); background:var(--bg-soft);
  padding:8px 12px 10px; display:none;
}
body.wb-view-graph #wbTlStrip, body.wb-view-tl #wbTlStrip { display:block; }
.wb-tl-head { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#909399; margin-bottom:6px; }
.wb-tl-track { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.wb-tl-cell {
  flex:0 0 auto; width:120px; border:1px solid var(--border); border-radius:12px; background:var(--card);
  padding:6px; cursor:pointer; transition:all .12s;
}
.wb-tl-cell:hover { border-color:var(--primary); }
.wb-tl-cell.selected { border-color:var(--primary); box-shadow:0 0 0 2px rgba(56,189,248,.25); }
.wb-tl-thumb { height:56px; border-radius:8px; background:linear-gradient(135deg,#DCE9F9,#f7f9fc); display:flex; align-items:center; justify-content:center; font-size:12px; color:#7C96B5; overflow:hidden; }
.wb-tl-thumb img { width:100%; height:100%; object-fit:cover; }
.wb-tl-name { font-size:12px; font-weight:600; margin-top:4px; display:flex; justify-content:space-between; }
.wb-tl-durbar { height:4px; border-radius:2px; background:var(--primary); margin-top:4px; }
.wb-tl-reorder { display:flex; gap:3px; margin-top:4px; }
.wb-tl-reorder button { flex:1; font-size:12px; padding:1px 0; }
body.wb-view-tl #shotList { display:none; }
body.wb-view-tl .canvas-area { width:100% !important; max-width:1100px; }
/* 时间线视图（fixed 浮层，铺满视口，避开旧面板干扰） */
#wbTlView { display:none; }
body.wb-view-tl #wbTlView {
  display:block; position:fixed; top:64px; left:0; right:0; bottom:96px; z-index:1000;
  background:var(--bg-soft); padding:16px; overflow-y:auto;
}
body.wb-view-tl #graphView { display:none !important; }
.wb-tl-big { display:flex; gap:12px; overflow-x:auto; padding:10px 0; }
.wb-tl-big .wb-tl-cell { width:180px; }
.wb-tl-big .wb-tl-thumb { height:110px; }

/* ---------- 9. 右侧检查器：结构化参数表单 ---------- */
.gvi-form-row { margin:8px 0; }
.gvi-form-row label { display:block; font-size:12px; color:#909399; margin-bottom:3px; }
.gvi-form-row textarea, .gvi-form-row select {
  width:100%; border:1px solid var(--border); border-radius:8px; background:var(--bg-soft);
  color:var(--text); font-size:12px; padding:6px 8px; outline:none;
}
.gvi-form-row textarea:focus, .gvi-form-row select:focus { border-color:var(--primary); }
.gvi-chips { display:flex; gap:6px; flex-wrap:wrap; }
.gvi-chip-opt {
  border:1px solid var(--border); background:var(--card); color:var(--sub); border-radius:999px;
  font-size:12px; padding:4px 10px; cursor:pointer;
}
.gvi-chip-opt.on { background:var(--primary); border-color:var(--primary); color:#fff; }
.gvi-cost-line { display:flex; align-items:baseline; justify-content:space-between; background:var(--primary-soft); border-radius:12px; padding:8px 12px; margin:10px 0; }
.gvi-cost-num { font-size:20px; font-weight:700; color:var(--primary-dark); }
.gvi-actions { display:flex; gap:8px; margin-top:10px; }
.gvi-actions .btn { flex:1; }
.gvi-plan-badge { font-size:12px; color:#909399; background:var(--bg-soft); border:1px dashed var(--border); border-radius:8px; padding:1px 6px; }

/* ---------- 10. 左侧资产列：道具组 ---------- */
.gvac-prop-empty { font-size:12px; color:#909399; text-align:center; padding:8px 4px; border:1px dashed var(--border); border-radius:8px; }

/* ---------- 11. 空态升级 ---------- */
.graph-empty { text-align:center; padding:48px 20px; }
.graph-empty-title { font-size:20px; font-weight:700; color:var(--ink,#1d2129); }
.graph-empty-sub { font-size:12px; color:var(--sub); margin:8px 0 16px; }
#wbEmptyAdd { font-size:14px; padding:10px 26px; }

/* ---------- 12. 隐藏旧首屏元素（迁入新布局后不再裸露） ---------- */
#wbOldProjPanel { display:none; } /* 原左侧"工程列表"面板：入口收纳进分组导航 */

/* ---------- 13. 隐藏与新首页重复的旧引导蒙层（i2 引导已被项目总览页取代） ---------- */
#i2Guide { display:none !important; }
@media (max-width:768px) {
  body { overflow-x:hidden; }
  .wb-tb-center { display:none; }
  .wb-proj-switch select { max-width:110px; }
  .wb-wall { grid-template-columns:repeat(2,1fr); gap:10px; }
  .wb-hero-row { grid-template-columns:1fr !important; }
  #wbSettingsDrawer { width:100vw; right:-100vw; }
  .graph-hud.wb-hud6 { flex-wrap:wrap; max-width:220px; }
}

/* ==================== v3 施工包：密钥面板平台化 ==================== */
.wb-key-banner {
  background:linear-gradient(135deg,#f7f9fc,#DCE9F9); border:1px solid rgba(56,189,248,.3);
  border-radius:12px; padding:12px 14px; font-size:13px; font-weight:600; color:#33507E; line-height:1.6; margin-bottom:10px;
}
.wb-byok-details { margin-top:6px; }
.wb-byok-details > summary {
  cursor:pointer; font-size:12px; color:#7C96B5; padding:8px 10px; border:1px dashed var(--border);
  border-radius:12px; list-style:none;
}
.wb-byok-details > summary::before { content:'▸ '; }
.wb-byok-details[open] > summary::before { content:'▾ '; }
.wb-byok-details[open] > summary { margin-bottom:10px; }

/* ==================== v3 施工包：顶栏高频化（低频收进更多抽屉） ==================== */
#w2TagBar { display:none !important; }            /* 按标签筛选 → 收进「更多→视图·导航」 */
#w2TagBar.wb-shown { display:flex !important; }
#w2CutTip { display:none !important; }            /* 定镜教学提示条 → 收敛（gvt-legend 一行保留） */
#g3GridStep, #g3GridStepWrap { display:none !important; }  /* 网格设置浮动件 → 收进更多 */
#graphView .gv-topbar #gvClose { display:none !important; } /* 返回列表 → 收进更多抽屉 */
.gv-tools .gvt-legend { font-size:12px; color:#909399; }

/* ==================== v3 施工包：④ 镜头卡帧感占位 ==================== */
/* 占位区：16:9 渐变 + 光影斜纹 + 镜号大字水印 */
#graphView .graph-node .gn-thumb-ph {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#E8F0FA 0%,#ffffff 45%,#DCE8F7 100%) !important;
  color:#7C96B5; font-size:12px; justify-content:center;
}
#graphView .graph-node .gn-thumb-ph::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 40%);
  pointer-events:none;
}
#graphView .graph-node .gn-thumb-watermark {
  position:relative; font-size:34px; font-weight:800; color:rgba(56,189,248,.28); letter-spacing:1px; line-height:1;
}
#graphView .graph-node .gn-thumb-ph em { font-style:normal; opacity:.7; }
/* 状态色角标：右上角浮层 */
#graphView .graph-node .gn-thumb { position:relative; }
#graphView .graph-node .gn-thumb-st {
  position:absolute; top:6px; right:6px; z-index:2; font-size:12px; font-weight:600;
  padding:2px 8px; border-radius:999px; backdrop-filter:blur(4px);
}
#graphView .graph-node .gn-thumb-st.st-none  { background:rgba(120,130,150,.85); color:#fff; }
#graphView .graph-node .gn-thumb-st.st-queue { background:rgba(78,127,191,.92); color:#fff; }
#graphView .graph-node .gn-thumb-st.st-done  { background:rgba(60,160,110,.92); color:#fff; }

/* ==================== v3b：1:1 修补 ==================== */
/* 返回列表收进更多抽屉（cln.js 会把 gvClose 搬到 tools 行，全局藏） */
#graphView #gvClose { display:none !important; }
/* a2 冻结 JS 重写的占位块：用 !important 压出浅蓝帧感渐变 */
body #graphView.light .graph-node .gn-thumb-ph.a2-todo {
  background:linear-gradient(135deg,#E8F0FA 0%,#ffffff 45%,#DCE8F7 100%) !important;
  color:#7C96B5;
}
body #graphView.light .graph-node .gn-thumb-ph.a2-todo svg { color:#38BDF8 !important; opacity:.5; }
body #graphView.light .graph-node .gn-thumb-ph.a2-todo em { color:#8AA5C4 !important; }
/* 兜底：不带 a2-todo 类的 gn-thumb-ph 同样帧感化 */
body #graphView.light .graph-node .gn-thumb-ph {
  background:linear-gradient(135deg,#E8F0FA 0%,#ffffff 45%,#DCE8F7 100%) !important;
  border:1.5px dashed rgba(56,189,248,.45) !important;
}

/* ---------- 骨架屏（战线二 · 2026-10-25）：首屏数据加载期间 shimmer 占位，禁白屏硬等 ----------
   作用点：#wbHomeProjWall（Project 总览墙）。数据渲染后 renderWall() 直接覆盖 wall.innerHTML，
   骨架块自动移除；游客/接口异常由 workbench.html 内 6s 兜底重绘清除。 */
.wb-skel-card { cursor:default; pointer-events:none; }
.wb-skel-card:hover { transform:none; box-shadow:none; border-color:var(--border); }
.wb-skel-cover { position:relative; overflow:hidden; background:#E8EEF5; }
.wb-skel-line { height:12px; border-radius:6px; margin-top:10px; position:relative; overflow:hidden; background:#E8EEF5; }
.wb-skel-line.w60 { width:60%; }
.wb-skel-line.w35 { width:35%; margin-bottom:4px; }
.wb-skel-cover::after, .wb-skel-line::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  animation:wbSkelShimmer 1.3s ease-in-out infinite;
}
@keyframes wbSkelShimmer { 100% { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .wb-skel-cover::after, .wb-skel-line::after { animation:none; }
}

/* ==================== 空状态引导块（#wbHomeEmpty · 无项目时） ==================== */
/* V1 浅蓝白规范：主蓝 #38BDF8 token 化；文字主 #0F172A / 次 #64748B；
   边界 #E2E8F0 或 box-shadow:0 2px 8px rgba(0,0,0,.04)；间距 8px 倍数；无深色块。
   位置：#wbHomeProjWall 的兄弟节点（骨架屏 innerHTML 覆盖不影响它），renderWall() 条件切换 .hidden */
:root {
  --wb-empty-accent: #38BDF8;
  --wb-empty-accent-hover: #0EA5E9;
  --wb-empty-accent-soft: #F0F9FF;
}
.wb-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 24px 56px;
  /* 本页强制 data-theme=dark（画布深色工作台），--card 会翻深色——按 V1 规范写死浅蓝白白底 */
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius, 12px);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.wb-empty-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--wb-empty-accent-soft);
  color: var(--wb-empty-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.wb-empty-icon svg { width: 32px; height: 32px; display: block; }
.wb-empty-title { font-size: 18px; font-weight: 600; color: #0F172A; }
.wb-empty-sub { font-size: 13px; color: #64748B; margin-top: 8px; max-width: 420px; line-height: 1.7; }
.wb-empty-btn {
  margin-top: 24px;
  background: var(--wb-empty-accent); color: #fff;
  border: none; border-radius: 8px;
  padding: 10px 24px; font-size: 14px; font-weight: 500; line-height: 1.2;
  cursor: pointer; transition: background .15s ease;
}
.wb-empty-btn:hover { background: var(--wb-empty-accent-hover); }
.wb-empty-pills { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.wb-empty-pill {
  font-size: 12px; color: #64748B;
  background: #F8FAFC; border: 1px solid #E2E8F0;
  border-radius: 999px; padding: 4px 12px;
}

/* ============================================================
   M4·模块四（20261026）：全站搜索 + Coming Soon + 导航过渡
   ============================================================ */

/* ② 导航 hover/选中 150ms 浅色平滑过渡（选中态复用既有 .wb-nav-item.active） */
.wb-nav-item { transition: background-color .15s ease, color .15s ease; }
.wb-nav-item:hover { transition: background-color .15s ease, color .15s ease; }

/* ① 顶栏三域搜索 */
.wb-gsearch-wrap {
  position: relative; flex: 0 1 420px; display: flex; align-items: center;
  gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--bg-soft, #F8FAFC); border: 1px solid var(--border, #E2E8F0);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wb-gsearch-wrap:focus-within {
  border-color: #38BDF8; background: var(--card, #fff);
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
}
.wb-gs-ico-svg { color: #909399; flex: 0 0 auto; }
.wb-gsearch {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 13px; color: var(--text, #1d2129);
}
.wb-gsearch::placeholder { color: #909399; }
.wb-gsearch-drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 950;
  background: rgba(255,255,255,.92); backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(56,189,248,.18); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15,23,42,.12);
  padding: 8px; max-height: 360px; overflow-y: auto;
}
.wb-gs-group { margin-bottom: 4px; }
.wb-gs-gtitle {
  font-size: 11px; letter-spacing: 1px; color: #909399;
  padding: 6px 8px 2px;
}
.wb-gs-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left;
  transition: background-color .15s ease;
}
.wb-gs-item:hover { background: rgba(56,189,248,.10); }
.wb-gs-name { flex: 1; min-width: 0; font-size: 13px; color: #1d2129;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-gs-meta { font-size: 11px; color: #909399; flex: 0 0 auto; }
.wb-gs-empty { padding: 16px 10px; font-size: 13px; color: #909399; text-align: center; }

/* ③ Coming Soon 弹窗（V1：白玻璃 + #38BDF8 主按钮） */
#wbCsMask {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,23,42,.28);
  display: flex; align-items: center; justify-content: center;
}
#wbCsMask.hidden { display: none !important; }
.wb-cs-modal {
  width: min(360px, calc(100vw - 48px));
  background: rgba(255,255,255,.88); backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,.9); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(15,23,42,.16);
  padding: 24px; text-align: center;
}
.wb-cs-title { font-size: 15px; font-weight: 700; color: #0F172A; line-height: 1.4; }
.wb-cs-desc { font-size: 13px; color: #64748B; line-height: 1.6; margin: 8px 0 16px; }
.wb-cs-btn { background: #38BDF8; border-color: #38BDF8; color: #fff; min-width: 120px; }

/* ============================================================
   多语言防溢出（20261026）：tip-bar 长词自动换行
   ============================================================ */
.tip-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.tip-bar .row{display:flex;flex-wrap:wrap;gap:8px;}
.tip-bar .row .btn{white-space:nowrap;flex-shrink:0;}

/* ============================================================
   全站排版排雷 A 8 项（20261026）
   ============================================================ */
/* ① 顶栏按钮区 gap + nowrap */
.wb-topbar{gap:16px;}
.wb-tb-right{display:flex;align-items:center;gap:16px;}
.wb-tb-right .btn, .wb-tb-right button, .wb-tb-right .lw-lang-dd{white-space:nowrap;flex-shrink:0;}
.wb-gsearch{flex:1;min-width:120px;}

/* ② Sticky Note 独立 CSS */
.gv-sticky, .graph-sticky, [class*="sticky-note"], .note-sticky{
  line-height:1.5 !important; padding:12px !important; font-size:14px !important;
  border-radius:8px !important; box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
}

/* ③ Tooltip 浅色毛玻璃 */
.gv-tooltip, [class*="tooltip"], .lw-tooltip{
  padding:8px 12px !important; border-radius:6px !important;
  background:rgba(255,255,255,.92) !important; backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9) !important; color:#0F172A !important;
  box-shadow:0 4px 12px rgba(0,0,0,.08) !important;
}

/* ⑤ 侧栏菜单项 40px + r8 + 选中浅蓝 */
.s10-mi{height:40px !important;padding:10px 12px !important;border-radius:8px !important;}
.s10-mi.on, .s10-mi:hover{background:rgba(56,189,248,.12) !important;}
.s10-mi.on{color:#0284C7 !important;font-weight:600;}

/* ⑥ 侧栏顶部副标题 ellipsis */
.s10-side .brand-sub, .s10-side .brand small, .s10-side .brand span{
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block;max-width:100%;
}

/* ⑦ DE/RU 长词自适应 */
html[lang="de"] .s10-mi, html[lang="ru"] .s10-mi{font-size:12.5px;}
html[lang="de"] .wb-tb-right .btn, html[lang="ru"] .wb-tb-right .btn{font-size:12.5px;}

/* ============================================================
   微交互卡 ①②③⑤（2026-10-26）：按钮 spinner / 资产骨架屏 / 资产空态 / 等宽数字
   ============================================================ */
/* ① 耗时按钮 spinner：文字旁小圆圈旋转（Signing in… 等；已有 .btn.loading 禁用态不动） */
.wb-spin {
  display: inline-block; width: 12px; height: 12px; margin-right: 6px;
  vertical-align: -1px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: wbSpinRot .7s linear infinite;
}
@keyframes wbSpinRot { to { transform: rotate(360deg); } }

/* ② 资产库骨架屏（复用 wb-skel shimmer 语言，与 .list-item 同排版） */
.wb-asset-skel { display: flex; align-items: flex-start; gap: 8px; padding: 10px 4px; }
.wb-asset-skel .as-cover {
  width: 44px; height: 44px; border-radius: 4px; flex: 0 0 auto;
  position: relative; overflow: hidden; background: #E8EEF5;
}
.wb-asset-skel .as-lines { flex: 1; }
.wb-asset-skel .as-line {
  height: 12px; border-radius: 6px; margin-top: 8px; position: relative; overflow: hidden; background: #E8EEF5;
}
.wb-asset-skel .as-line:first-child { margin-top: 0; }
.wb-asset-skel .as-line.w60 { width: 60%; }
.wb-asset-skel .as-line.w35 { width: 35%; }
.wb-asset-skel .as-cover::after, .wb-asset-skel .as-line::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  animation: wbSkelShimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wb-asset-skel .as-cover::after, .wb-asset-skel .as-line::after { animation: none; }
}

/* ③ 资产库空态：复用首页四件套组件（.wb-empty），模态内紧凑版 */
.wb-empty.wb-empty-sm { padding: 32px 20px 36px; }
.wb-empty.wb-empty-sm .wb-empty-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 12px; }
.wb-empty.wb-empty-sm .wb-empty-icon svg { width: 24px; height: 24px; }
.wb-empty.wb-empty-sm .wb-empty-btn { margin-top: 16px; }
.wb-empty.wb-empty-sm .wb-empty-pills { margin-top: 16px; }

/* ⑤ 金额元素等宽数字：成本 badge / 账单 / 收益看板 */
[data-s9-cost-total], .gvi-cost-num, #costResult, #balanceTips, .s9-cost-panel {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   空画布呼吸灯引导 + 首镜头后箭头指引（2026-10-26）
   ============================================================ */
/* 呼吸灯 pill：浅蓝白基调、无硬边框、与空状态组件同风格 */
.graph-breath {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 8px 16px; border-radius: 999px;
  background: rgba(240, 249, 255, .9);
  border: 1px solid rgba(56, 189, 248, .28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  font-size: 13px; color: #0284C7; line-height: 1.4;
  animation: wbBreath 2.4s ease-in-out infinite;
}
.gb-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #38BDF8; flex: 0 0 auto;
  animation: wbBreathDot 2.4s ease-in-out infinite;
}
@keyframes wbBreath { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes wbBreathDot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, .45); }
  50% { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(56, 189, 248, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .graph-breath, .gb-pulse { animation: none; }
}

/* 首镜头后箭头指引：指向 Script/split 输入框（#storyText） */
#storyHintArrow {
  position: fixed; z-index: 1300; display: none;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  padding: 10px 14px; max-width: 260px;
  font-size: 12.5px; color: #0F172A; line-height: 1.5;
}
#storyHintArrow.on { display: block; animation: wbBreath 2.4s ease-in-out infinite; }
#storyHintArrow .sha-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .5px; color: #0284C7; font-weight: 600; margin-bottom: 2px;
}
#storyHintArrow .sha-arr { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: #38BDF8; }

/* ============================================================
   画布打回修复①（20261026）：画布内部 chrome 强制浅色毛玻璃
   对齐全站 V1 token：rgba(255,255,255,.72) 底 + backdrop blur(12px)
   + 1px rgba(56,189,248,.28) 细边 + 深蓝灰文字 #0F172A。
   禁用深色 fallback：无论 #graphView 是否带 .light，chrome 一律浅色。
   ============================================================ */
/* 画布 chrome 容器：标题栏 / 工具条 / 更多下拉 / v1 工具条 / 左下 HUD */
#graphView .gv-topbar,
#graphView.light .gv-topbar,
#graphView .gv-tools,
#graphView.light .gv-tools,
#graphView .gv-more-panel,
#graphView.light .gv-more-panel,
#graphView .graph-hud,
#graphView.light .graph-hud,
#wbWorkZone .v1-toolbar,
.v1-more-panel,
#lwMoreToolsMenu {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(56,189,248,.28) !important;
  color: #0F172A !important;
}
/* gv-tools 容器本身去深色底边，改为毛玻璃细边 */
#graphView .gv-tools { border-bottom: 1px solid rgba(56,189,248,.28) !important; }
/* chrome 内文字一律深蓝灰（压掉深色主题下的 #C6D0E0/#7E8CA3 等浅字） */
#graphView .gv-topbar .gv-title,
#graphView .gv-topbar .gv-sub,
#graphView .gv-topbar .gv-projname,
#graphView .gv-tools .gvt,
#graphView .graph-hud .graph-hint,
#graphView .graph-hud .graph-zoom,
#wbWorkZone .v1-toolbar,
#wbWorkZone .v1-toolbar .tg,
#wbWorkZone .v1-toolbar .v4-tb,
#wbWorkZone .v1-toolbar .v4-tb button {
  color: #0F172A !important;
}
/* chrome 内按钮：浅玻璃底 + 细边 + 深字（压掉 rgba(255,255,255,.07) 深底按钮） */
#graphView .gv-tools .gvt,
#graphView .gv-topbar .btn,
#graphView .graph-hud .btn,
#wbWorkZone .v1-toolbar .tg,
#wbWorkZone .v1-toolbar .v4-tb button,
.v1-more-panel button,
#lwMoreToolsMenu button {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(56,189,248,.28) !important;
  color: #0F172A !important;
  border-radius: 8px !important;
}
#graphView .gv-tools .gvt:hover,
#graphView .gv-topbar .btn:hover,
#graphView .graph-hud .btn:hover,
#wbWorkZone .v1-toolbar .tg:hover,
#wbWorkZone .v1-toolbar .v4-tb button:hover,
.v1-more-panel button:hover,
#lwMoreToolsMenu button:hover {
  background: #38BDF8 !important;
  border-color: #38BDF8 !important;
  color: #fff !important;
}
/* 更多工具下拉：毛玻璃分组面板 */
#graphView .gv-more-panel,
.v1-more-panel,
#lwMoreToolsMenu {
  position: absolute; top: 100%; left: 0; z-index: 1200;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.16) !important;
  padding: 8px !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 6px !important;
  min-width: 300px;
}
/* .hidden 必须能收起下拉（ID 选择器 display:grid 会压类选择器，显式抬权） */
#graphView .gv-more-panel.hidden,
.v1-more-panel.hidden,
#lwMoreToolsMenu.hidden {
  display: none !important;
}
#graphView .gvmp-sec-title,
#lwMoreToolsMenu .lw-mt-group {
  grid-column: 1 / -1;
  font-size: 11px; letter-spacing: .5px; color: #64748B !important;
  padding: 6px 4px 2px;
}
/* Live preview 浮窗头：浅色（拖拽柄） */
#cvRealtimePanel {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(56,189,248,.28) !important;
}
/* 画布 stage：浅蓝点底（浅色外壳一致，禁深色底） */
#graphView .graph-stage {
  background: #E8F0FA;
  background-image: radial-gradient(circle, rgba(56,189,248,.14) 1px, transparent 1px);
  background-size: 22px 22px;
}


/* === Studio 首页 P0 修复 === */
/* 顶部栏间距：按钮区间距 16px，不挤靠 */
.wb-topbar { gap:16px !important; padding:0 20px !important; }
.wb-tb-left { gap:16px !important; }
.wb-tb-zone[data-zone="actions"] { gap:12px !important; display:inline-flex; }
.wb-tb-zone[data-zone="actions"] .btn { white-space:nowrap; }
/* 隐藏中文"灵感广场"返回链接（应走 i18n） */
.wb-topbar .v10-back { display:none !important; }
/* Logo 副标题完整显示不截断 */
.s10-logo-s { max-width:180px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }