/* M2-B2: Mobile Layer v2（裁叠模型） */
/* 作用域：html.mobile-active —— JS 单一判定入口（portrait + coarse），竖屏由 mobile-init 挂 class */
/* 桌面/横屏环境无此 class，即使 DOM 误挂载也无样式可套（防御深度） */
/* 颜色/圆角/间距/动效全部引用 style.css 变量（--c-* 颜色、--r-* 圆角、--sp-* 间距、--dur-* 时长、--ease-* 缓动、--shadow-* 阴影），禁止硬编码色值 */

/* ==========================================================================
   一、PC 面皮收起（裁叠模型：竖屏只见移动面皮 + 全屏画布）
   ========================================================================== */
html.mobile-active .topbar,
html.mobile-active .sidebar,
html.mobile-active .right-panel,
html.mobile-active .bottombar,
html.mobile-active .quick-bar,
html.mobile-active .floatball,
html.mobile-active .floatball-menu,
html.mobile-active .settings-panel,
html.mobile-active .hamburger-drawer,
html.mobile-active .canvas-tabs,
html.mobile-active .bottombar-zoom,
html.mobile-active .rp-toggle-btn {
  display: none !important;
}

/* 画布裁成手机全屏（背景板铺满，PC 布局偏移一并清掉） */
html.mobile-active #canvasContainer {
  position: fixed;
  inset: 0;
  z-index: 1;
  margin: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

/* ==========================================================================
   二、Mobile shell container
   ========================================================================== */
html.mobile-active .mobile-shell {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}

html.mobile-active .mobile-shell > * {
  pointer-events: auto;
}

/* ==========================================================================
   三、ActionSheet（v2：收起态 display:none —— 双叉修复；展开走入场动画）
   ========================================================================== */
html.mobile-active .mobile-action-sheet {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--c-bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 9100;
}

html.mobile-active .mobile-action-sheet.active {
  display: block;
  animation: mobileSheetUp var(--dur-normal, .25s) var(--ease-smooth, ease-out);
}

@keyframes mobileSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

html.mobile-active .mobile-action-sheet-header {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html.mobile-active .mobile-action-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}

html.mobile-active .mobile-action-sheet-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--c-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}

html.mobile-active .mobile-action-sheet-close:active {
  background: var(--c-bg-hover);
}

html.mobile-active .mobile-action-sheet-body {
  padding: var(--sp-3) var(--sp-4);
}

html.mobile-active .mobile-action-sheet-item {
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--c-text);
  transition: background var(--dur-fast) var(--ease-smooth);
}

html.mobile-active .mobile-action-sheet-item:active {
  background: var(--c-bg-hover);
}

html.mobile-active .mobile-action-sheet-item.danger {
  color: var(--c-danger);
}

/* ==========================================================================
   四、Toast
   ========================================================================== */
html.mobile-active .mobile-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--c-text);
  color: var(--c-bg);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-smooth), transform var(--dur-normal) var(--ease-smooth);
  z-index: 9200;
  pointer-events: none;
}

html.mobile-active .mobile-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   五、Half-Screen Sheet（v2：收起态 display:none —— 双叉修复）
   ========================================================================== */
html.mobile-active .mobile-half-sheet {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50vh;
  background: var(--c-bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg);
  z-index: 9100;
  flex-direction: column;
}

html.mobile-active .mobile-half-sheet.active {
  display: flex;
  animation: mobileSheetUp var(--dur-normal, .25s) var(--ease-smooth, ease-out);
}

html.mobile-active .mobile-half-sheet-header {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

html.mobile-active .mobile-half-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}

html.mobile-active .mobile-half-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4);
}

html.mobile-active .mobile-half-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--c-border);
  border-radius: var(--r-pill);
  margin: var(--sp-2) auto;
}

/* ==========================================================================
   六、底部工具条（B2：新建 / 适应屏幕）
   ========================================================================== */
html.mobile-active .mobile-toolbar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-1);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 6px;
  box-shadow: var(--shadow-md);
  z-index: 9050;
}

html.mobile-active .mobile-toolbar-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

html.mobile-active .mobile-toolbar-btn:active {
  background: var(--c-bg-hover);
}

/* ==========================================================================
   七、长按拿起视觉态
   ========================================================================== */
html.mobile-active .node.mobile-lift,
html.mobile-active .sticky-note.mobile-lift {
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  transition: transform .15s var(--ease-smooth, ease-out), box-shadow .15s var(--ease-smooth, ease-out);
}


/* ==========================================================================
   七、B3 顶栏（画布名/菜单/适应/消息）
   ========================================================================== */
html.mobile-active .mobile-ui-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

html.mobile-active .mobile-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: 0 var(--sp-3, 12px);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  z-index: 9050;
  pointer-events: auto;
  padding-top: env(safe-area-inset-top, 0);
}

html.mobile-active .mobile-topbar-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

html.mobile-active .mobile-topbar-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm, 6px);
  flex-shrink: 0;
  cursor: pointer;
}

html.mobile-active .mobile-topbar-btn:active {
  background: var(--c-bg-hover);
}

/* ==========================================================================
   八、B3 工具栏（六钮：菜单/新建/平移/框选/连线/中转站）
   ========================================================================== */
html.mobile-active .mobile-toolbar {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill, 999px);
  box-shadow: var(--shadow-lg);
  z-index: 9050;
  pointer-events: auto;
}

html.mobile-active .mobile-toolbar-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: background var(--dur-fast, .15s) var(--ease-smooth, ease-out), color var(--dur-fast, .15s) var(--ease-smooth, ease-out);
}

html.mobile-active .mobile-toolbar-btn:active {
  background: var(--c-bg-hover);
}

html.mobile-active .mobile-toolbar-btn.active {
  background: var(--c-primary, var(--c-text));
  color: var(--c-bg);
}

/* ==========================================================================
   九、B3 抽屉（左导航 / 右中转站）+ 遮罩
   ========================================================================== */
html.mobile-active .mobile-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal, .25s) var(--ease-smooth, ease-out);
  z-index: 9280;
}

html.mobile-active .mobile-scrim.show {
  opacity: 1;
  pointer-events: auto;
}

html.mobile-active .mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 78vw;
  max-width: 300px;
  background: var(--c-bg);
  z-index: 9300;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-normal, .25s) var(--ease-smooth, ease-out);
  pointer-events: auto;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

html.mobile-active .mobile-drawer-left {
  left: 0;
  transform: translateX(-105%);
  border-right: 1px solid var(--c-border);
}

html.mobile-active .mobile-drawer-right {
  right: 0;
  transform: translateX(105%);
  border-left: 1px solid var(--c-border);
}

html.mobile-active .mobile-drawer.open {
  transform: translateX(0);
}

html.mobile-active .mobile-drawer-right.hot {
  box-shadow: inset 0 0 0 3px var(--c-primary, var(--c-text));
}

html.mobile-active .mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4, 16px) var(--sp-4, 16px) var(--sp-2, 8px);
}

html.mobile-active .mobile-drawer-brand {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 2px;
}

html.mobile-active .mobile-transfer-clear {
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
}

html.mobile-active .mobile-nav-sec {
  font-size: 12px;
  color: var(--c-text-secondary);
  padding: var(--sp-3, 12px) var(--sp-4, 16px) var(--sp-1, 4px);
}

html.mobile-active .mobile-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  padding: 13px var(--sp-4, 16px);
  font-size: 15px;
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--dur-fast, .15s) var(--ease-smooth, ease-out);
}

html.mobile-active .mobile-nav-item:active {
  background: var(--c-bg-hover);
}

html.mobile-active .mni-icon {
  width: 22px;
  text-align: center;
  color: var(--c-text-secondary);
}

html.mobile-active .mobile-drawer-foot {
  margin-top: auto;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  font-size: 12px;
  color: var(--c-text-secondary);
}

/* 中转站条目 */
html.mobile-active .mobile-transfer-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
}

html.mobile-active .mobile-transfer-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-3, 12px) var(--sp-2, 8px);
  border-bottom: 1px solid var(--c-border);
}

html.mobile-active .mti-main {
  flex: 1;
  min-width: 0;
}

html.mobile-active .mti-title {
  font-size: 14px;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.mobile-active .mti-meta {
  font-size: 12px;
  color: var(--c-text-secondary);
  margin-top: 2px;
}

html.mobile-active .mti-btn {
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  flex-shrink: 0;
}

html.mobile-active .mti-del {
  color: var(--c-danger);
  width: 28px;
  padding: 6px 0;
  text-align: center;
}

html.mobile-active .mobile-transfer-empty {
  text-align: center;
  color: var(--c-text-secondary);
  font-size: 14px;
  padding: 40px 20px;
  line-height: 1.8;
}

html.mobile-active .mobile-transfer-empty span {
  font-size: 12px;
}

html.mobile-active .mobile-transfer-hint {
  padding: var(--sp-3, 12px);
  font-size: 12px;
  color: var(--c-text-secondary);
  text-align: center;
  border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   十、B3 画布切换列表（HalfSheet 内）
   ========================================================================== */
html.mobile-active .mobile-canvas-item {
  padding: 14px var(--sp-3, 12px);
  border-radius: var(--r-sm, 6px);
  font-size: 15px;
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--dur-fast, .15s) var(--ease-smooth, ease-out);
}

html.mobile-active .mobile-canvas-item:active {
  background: var(--c-bg-hover);
}

html.mobile-active .mobile-canvas-item.active {
  font-weight: 700;
}

html.mobile-active .mobile-canvas-item.active::after {
  content: '当前';
  float: right;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-secondary);
}

/* ==========================================================================
   十一、B3 框选选框 + 节点高亮（连线起点/定位落点）
   ========================================================================== */
html.mobile-active .mobile-marquee {
  position: fixed;
  display: none;
  border: 2px dashed var(--c-primary, var(--c-text));
  background: rgba(128, 128, 128, .12);
  pointer-events: none;
  z-index: 9400;
}

html.mobile-active .node.mobile-flash,
html.mobile-active .sticky-note.mobile-flash {
  animation: mobileFlash 1.2s var(--ease-smooth, ease-out);
}

@keyframes mobileFlash {
  0% { box-shadow: 0 0 0 4px var(--c-primary, var(--c-text)); }
  60% { box-shadow: 0 0 0 4px var(--c-primary, var(--c-text)); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ==========================================================================
   十二、B3 登录墙移动分支（浮于移动壳之上 + 全屏卡片）
   ========================================================================== */
html.mobile-active .login-overlay {
  z-index: 9500;
}

html.mobile-active .login-overlay .login-card {
  width: 86vw;
  max-width: 360px;
  padding: var(--sp-5, 24px) var(--sp-4, 16px);
}

html.mobile-active .login-overlay .login-input {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
  margin-bottom: var(--sp-3, 12px);
  box-sizing: border-box;
}

html.mobile-active .login-overlay .login-btn {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
}

/* ==========================================================================
   十三、B3 横竖屏切换过渡（logo 遮罩，淡入淡出）
   ========================================================================== */
html.mobile-transition::after {
  content: '刻格涅塔';
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 8px;
  animation: mobileMaskFade .7s var(--ease-smooth, ease-out) forwards;
  pointer-events: auto;
}

@keyframes mobileMaskFade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}


/* ==========================================================================
   十四、编辑属性：node-inspector 底部抽屉（09-08）
   ========================================================================== */
html.mobile-active body.mobile-inspector-open .right-panel {
  display: block !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  /* hotfix_sheet_20260909_p2: showPanel 会给 #rightPanel 加 rp-collapsed，
     PC 收栏规则 .right-panel.rp-collapsed{width:0;overflow:hidden} 会把抽屉压成零宽，
     这里强制满宽恢复抽屉可视 */
  width: 100vw !important;
  max-height: 72vh;
  z-index: 2147483000;
  background: var(--c-panel, var(--c-bg, #fff));
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* hotfix_sheet_20260909: 原规则 .right-panel > *:not(#nodeInspectorPanel){display:none} 已删除——
   #nodeInspectorPanel 恒挂 body 不在 .right-panel 内，该规则只会误杀 rp-header/rp-body 属性表单，
   导致「编辑属性」抽屉空壳（全屏变暗无内容）。 */
html.mobile-active body.mobile-inspector-open .ni-panel {
  /* hotfix_sheet_20260909: 浮板为 body 直挂 fixed 层，open 态与属性抽屉内容重复且被 scrim 盖住，
     统一隐藏（非 open 态浮板行为不变，批次2 线 tab 浮板不受影响） */
  display: none !important;
}
.mobile-inspector-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 2147482999;
}

/* ==========================================================================
   十五、B1 移动面板（20260909 页面叠加路线：全屏/上半屏/浮窗）
   - full 全屏（默认）：不透明页面覆盖视口
   - half 上半屏：停靠顶栏下方约 56vh，下半页露出画布可继续操作（无遮罩放行指针）
   - float 浮窗：透明背景小窗，位置由 JS 控制，可单指拖动
   - z-index 9450：高于抽屉 9300，低于登录墙 9500
   ========================================================================== */

html.mobile-active .mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 9450;
  font-size: 15px;
}

html.mobile-active .mobile-panel[data-form="full"] {
  background: var(--c-bg, #fff);
}

html.mobile-active .mobile-panel[data-form="half"],
html.mobile-active .mobile-panel[data-form="float"] {
  background: transparent;
  pointer-events: none;   /* 画布在面板外仍可操作，仅本体接收指针 */
}

html.mobile-active .mobile-panel .mobile-panel-box {
  display: flex;
  flex-direction: column;
  background: var(--c-bg, #fff);
  overflow: hidden;
}

html.mobile-active .mobile-panel[data-form="full"] .mobile-panel-box {
  position: absolute;
  inset: 0;
}

html.mobile-active .mobile-panel[data-form="half"] .mobile-panel-box {
  position: absolute;
  top: calc(48px + env(safe-area-inset-top, 0px));   /* 移动顶栏之下展开 */
  left: 0;
  right: 0;
  height: 56vh;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}

html.mobile-active .mobile-panel[data-form="float"] .mobile-panel-box {
  position: fixed;        /* left/top/width/height 由 JS 写入 */
  border-radius: 14px;
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

/* ── 头部栏：标题 + 三形态切换 + 关闭 ── */

html.mobile-active .mobile-panel .mobile-panel-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 4px 6px 4px 14px;
  border-bottom: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
  flex-shrink: 0;
  touch-action: none;     /* 浮窗态此栏为拖动柄 */
}

html.mobile-active .mobile-panel .mobile-panel-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.mobile-active .mobile-panel .mp-btn {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  font-size: 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--c-text, #111);
  cursor: pointer;
}

html.mobile-active .mobile-panel .mp-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

html.mobile-active .mobile-panel .mp-btn-close {
  font-size: 22px;
  line-height: 1;
}

/* 当前形态对应按钮隐藏 */
html.mobile-active .mobile-panel[data-form="full"] [data-mp="full"],
html.mobile-active .mobile-panel[data-form="half"] [data-mp="half"],
html.mobile-active .mobile-panel[data-form="float"] [data-mp="float"] {
  display: none;
}

/* ── 内容区 ── */

html.mobile-active .mobile-panel .mobile-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;     /* 容器层防御：横向一律不溢出 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 24px;
}

/* registry 内容宿主：挂 fw-window fw-active 兼容 PC 绑定查询，此处中和其样式 */
html.mobile-active .mobile-panel .mp-host {
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  transition: none;
}

/* ── 容器层防御兜底（硬约束）：不横向溢出、长词换行、触控目标 >=44px ── */

html.mobile-active .mobile-panel .mp-host,
html.mobile-active .mobile-panel .mp-host * {
  max-width: 100%;
  box-sizing: border-box;
}

html.mobile-active .mobile-panel .mp-host {
  overflow-wrap: break-word;
  word-break: break-word;
}

html.mobile-active .mobile-panel .mp-host img,
html.mobile-active .mobile-panel .mp-host video,
html.mobile-active .mobile-panel .mp-host canvas,
html.mobile-active .mobile-panel .mp-host iframe {
  max-width: 100%;
}

html.mobile-active .mobile-panel .mp-host button,
html.mobile-active .mobile-panel .mp-host input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.mobile-active .mobile-panel .mp-host select,
html.mobile-active .mobile-panel .mp-host textarea {
  min-height: 44px;
}

html.mobile-active .mobile-panel .mp-fallback {
  padding: 40px 20px;
  text-align: center;
  color: var(--c-text-secondary, #888);
}

/* ==========================================================================
   十六、B1 逐面板精修（PC content 手机化：多列改堆叠、触控目标、字号）
   ========================================================================== */

/* ── 工坊 studio：左右分栏改上下堆叠，分隔条隐藏（mousedown 拖拽触屏不可用） ── */

html.mobile-active .mobile-panel .studio-root {
  flex-direction: column;
}

html.mobile-active .mobile-panel .studio-left {
  width: 100% !important;       /* 覆盖 divider 拖动写入的 inline 宽度 */
  min-width: 0 !important;
  max-width: none !important;
  flex: none;
  max-height: 42%;
}

html.mobile-active .mobile-panel .studio-divider {
  display: none !important;
}

html.mobile-active .mobile-panel .studio-right {
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* ── 仓库 workshop（vault 映射）：侧栏改顶部横滚导航 ── */

html.mobile-active .mobile-panel .ws-root {
  flex-direction: column;
}

html.mobile-active .mobile-panel .ws-sidebar {
  width: 100%;
  max-width: none;
  flex: none;
  border-right: none;
  border-bottom: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
}

html.mobile-active .mobile-panel .ws-nav {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 6px 10px 0;
}

html.mobile-active .mobile-panel .ws-nav-item {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 14px;
  white-space: nowrap;
}

html.mobile-active .mobile-panel .ws-search {
  width: 100%;
}

html.mobile-active .mobile-panel .ws-main {
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* vault-fab 定位祖先即 .ws-root，随面板贴右下，无需改 */

/* ── 盒子管理 box-manager：左右分栏改上下堆叠 ── */

html.mobile-active .mobile-panel .bm-layout {
  flex-direction: column;
}

html.mobile-active .mobile-panel .bm-sidebar {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none;
  max-height: 34%;
  border-right: none;
  border-bottom: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
}

html.mobile-active .mobile-panel .bm-main {
  flex: 1;
  min-height: 0;
  width: 100%;
}

html.mobile-active .mobile-panel .bm-search {
  width: 100%;
}

/* ── 卡片编辑 card-editor：工具栏/底栏换行，触屏按钮加大 ── */

html.mobile-active .mobile-panel .ce-toolbar {
  flex-wrap: wrap;
  gap: 6px 10px;
}

html.mobile-active .mobile-panel .ce-drag-handle {
  display: none;          /* 拖拽移动为 PC 专属交互，触屏隐藏 */
}

html.mobile-active .mobile-panel .ce-footer {
  flex-wrap: wrap;
  gap: 8px;
}

html.mobile-active .mobile-panel .ce-footer-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html.mobile-active .mobile-panel .ce-fbtn {
  min-height: 44px;
  min-width: 64px;
}

html.mobile-active .mobile-panel .ce-title-input {
  font-size: 16px;        /* iOS 聚焦防自动放大需 >=16px */
}

/* ── 发现 discovery：tab 行本身适合触屏，仅补触控高度 ── */

html.mobile-active .mobile-panel .discovery-tab {
  min-height: 44px;
}

/* ── 数据备份 data-backup：按钮加大 ── */

html.mobile-active .mobile-panel .db-btn {
  min-height: 44px;
  width: 100%;
}

/* ── 设置/个人（v3 卡片堆叠页）：行高与点击区保底 ── */

html.mobile-active .mobile-panel .v3-row,
html.mobile-active .mobile-panel .v3-settings-card,
html.mobile-active .mobile-panel .v3-hero-card {
  max-width: 100%;
}

/* ==========================================================================
   十六、批次2（20260909）：连线标签编辑器（halfSheet 内容）
   textarea ≥16px 防 iOS 聚焦自动放大
   ========================================================================== */

html.mobile-active .mobile-line-label-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

html.mobile-active .mobile-line-label-input {
  width: 100%;
  min-height: 96px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 10px;
  background: var(--c-bg, #fff);
  color: var(--c-text, #0f172a);
  font-size: 16px;        /* iOS 聚焦防自动放大需 >=16px */
  line-height: 1.5;
  resize: vertical;
}

html.mobile-active .mobile-line-label-input:focus {
  outline: none;
  border-color: var(--c-accent, #3b82f6);
}

html.mobile-active .mobile-line-label-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--c-text-secondary, #64748b);
}

html.mobile-active .mobile-line-label-hint {
  color: var(--c-text-tertiary, #94a3b8);
}

html.mobile-active .mobile-line-label-actions {
  display: flex;
  gap: 10px;
}

html.mobile-active .mobile-line-label-btn {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 10px;
  background: var(--c-bg, #fff);
  color: var(--c-text, #0f172a);
  font-size: 15px;
  cursor: pointer;
}

html.mobile-active .mobile-line-label-btn:active {
  background: var(--c-bg-hover, #f1f5f9);
}

html.mobile-active .mobile-line-label-btn.primary {
  background: var(--c-accent, #3b82f6);
  border-color: var(--c-accent, #3b82f6);
  color: #fff;
}

/* ==========================================================================
   九、09-09 热修 C + 视觉三调（主人拍板收敛）：贴壁钟形隆起（正态剪影·连续双维）
   - 剪影：废弃 border-radius 椭圆硬轮廓（滴落感来源），改 radial-gradient 高斯式
     四段衰减光斑（缓-陡-缓）：中心（屏幕边缘线×手指Y）最浓，向画布内侧与上下
     顺滑衰减归零，无明确边界，剪影=钟形小丘
   - 浓度：JS 连续写入 --edge-a-raw（d=120→0.15，d=0→1.0 贴边接近实心），
     48px 热区仅保留 drop 判定、视觉不单独分支；三档阶梯降级为整条曲线的校准
     系数 --edge-k（淡 .8 / 中 1.0 默认 / 浓 1.2），类名秒调微调入口不丢
   - 高度：JS 连续写入 --edge-h（d=120→40%，d=0→100%），scaleY 整体生长，
     transform-origin 屏幕边缘一侧；文字反向 scaleY 补偿不变形；热区独立放大已并入
   - 文字 13px，颜色随浓度连续混白（color-mix，不支持时 fallback 品牌色 .85）
   - 结构：固定壳（top 实时覆写）+ opacity 过渡（出现/收回）；transform 每帧直写保跟手
   - 层级：画布(1) < 气泡(8500) < 移动壳(9000)；纯视觉 pointer-events:none 不接事件
   ========================================================================== */
html.mobile-active .mobile-edge-zone {
  --edge-k: 1;                                       /* 浓度曲线校准系数：淡 .8 / 中 1.0（默认）/ 浓 1.2 */
  --edge-a: min(1, calc(var(--edge-a-raw, .15) * var(--edge-k)));   /* 生效浓度（clamp 上限 1） */
  position: fixed;
  top: 50%;                    /* JS 实时覆写为手指 Y（含 clamp ±110px） */
  width: 140px;                /* 元素中心线=屏幕边缘线（left/right 各外扩一半） */
  height: 240px;
  transform: translateY(-50%) scaleY(var(--edge-h, 1));
  transform-origin: center center;   /* 绕手指 Y 纵向对称生长；贴边由定位保证 */
  opacity: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 8500;
  transition: opacity .18s var(--ease-smooth, ease-out);   /* 仅透明度过渡；transform 逐帧直写跟手 */
}
/* 三档校准系数：以后「浓一档/淡一档」= 换类名，一条曲线整体升降 */
html.mobile-active .mobile-edge-zone.edge-soft   { --edge-k: .8; }
html.mobile-active .mobile-edge-zone.edge-strong { --edge-k: 1.2; }

html.mobile-active .mobile-edge-zone-left {
  left: -70px;
  justify-content: flex-end;
  padding-right: 18px;
  transform-origin: left center;
  /* 钟形光斑：横半径 58px（屏内可见隆起宽，较旧椭圆 65px 略收窄）、纵半径 112px；
     四段 stop 模拟正态截面：缓-陡-缓，alpha 全程 var 驱动 */
  background: radial-gradient(ellipse 58px 112px at 50% 50%,
    rgba(239, 68, 68, var(--edge-a)) 0%,
    rgba(239, 68, 68, calc(var(--edge-a) * .92)) 30%,
    rgba(239, 68, 68, calc(var(--edge-a) * .55)) 56%,
    rgba(239, 68, 68, calc(var(--edge-a) * .16)) 80%,
    rgba(239, 68, 68, 0) 100%);
}
html.mobile-active .mobile-edge-zone-right {
  right: -70px;
  justify-content: flex-start;
  padding-left: 18px;
  transform-origin: right center;
  background: radial-gradient(ellipse 58px 112px at 50% 50%,
    rgba(37, 99, 235, var(--edge-a)) 0%,
    rgba(37, 99, 235, calc(var(--edge-a) * .92)) 30%,
    rgba(37, 99, 235, calc(var(--edge-a) * .55)) 56%,
    rgba(37, 99, 235, calc(var(--edge-a) * .16)) 80%,
    rgba(37, 99, 235, 0) 100%);
}

html.mobile-active .mobile-edge-zone-left.show,
html.mobile-active .mobile-edge-zone-right.show { opacity: 1; }

/* 竖排文字：13px，居中于隆起最亮处；
   反向 scaleY 补偿壳体生长缩放（文字始终不变形）；
   颜色随浓度连续混白：淡态品牌色可辨 → 贴边实心底上趋白清晰（不支持 color-mix 时 fallback） */
html.mobile-active .mobile-edge-zone span {
  writing-mode: vertical-rl;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 5px;
  opacity: .92;
  /* 深色柔影：贴边时白色节点卡片常垫在文字正下方，白字叠白卡会融掉——
     柔影保证白字在白卡/浓色底/淡晕上均一眼可辨 */
  text-shadow: 0 1px 2px rgba(15, 23, 42, .35), 0 0 6px rgba(15, 23, 42, .18);
  transform: scaleY(1);                              /* fallback：不支持 calc 除法时不补偿 */
  transform: scaleY(calc(1 / var(--edge-h, 1)));     /* 反向补偿壳体生长缩放 */
  color: rgba(220, 38, 38, .85);
  color: color-mix(in srgb, #dc2626 calc((1 - min(1, var(--edge-a-raw, .15))) * 100%), white);
}
html.mobile-active .mobile-edge-zone-right span {
  color: rgba(37, 99, 235, .85);
  color: color-mix(in srgb, #2563eb calc((1 - min(1, var(--edge-a-raw, .15))) * 100%), white);
}

/* ==========================================================================
   九、块到块统一开层仲裁（2026-09-11）：有界面层弹出时灵动岛让位
   MobileShell.layerStack 计数驱动 html.mobile-shell-down（mobile-init.js），
   开层自动下沉、关层自动回归；计数法防 Sheet 叠 Sheet 误恢复。
   ========================================================================== */
html.mobile-active .mobile-toolbar {
  transition: transform 0.24s ease, opacity 0.24s ease;
}

html.mobile-active.mobile-shell-down .mobile-toolbar {
  transform: translateX(-50%) translateY(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
}

/* PC 系 modal（contentEditModal 等）在移动壳内的层级修正：
   原 --z-modal:1000 被灵动岛 9050 压住 → 抬到 9150（灵动岛之上、toast 9200 之下） */
html.mobile-active .modal-overlay.show {
  z-index: 9150;
}
/* ==========================================================================
   顶栏画布快选补充（09-11 施工资单二）
   ========================================================================== */
html.mobile-active .mobile-topbar-title:active {
  opacity: .55;
}

html.mobile-active .mobile-canvas-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

html.mobile-active .mobile-canvas-item .mci-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mobile-active .mobile-canvas-item .mci-time {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-secondary);
}
/* ==========================================================================
   施工三：新建面板（控件创建中心，09-11）
   ========================================================================== */
html.mobile-active .mcp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 2px 8px;
}

html.mobile-active .mcp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px 12px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--r-md, 10px);
  background: var(--c-bg, #fff);
  cursor: pointer;
  transition: transform var(--dur-fast, .15s) var(--ease-smooth, ease-out),
              background var(--dur-fast, .15s) var(--ease-smooth, ease-out);
}

html.mobile-active .mcp-card:active {
  transform: scale(.96);
  background: var(--c-bg-hover, #f3f4f6);
}

html.mobile-active .mcp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--c-text);
}

html.mobile-active .mcp-icon svg {
  width: 28px;
  height: 28px;
}

html.mobile-active .mcp-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}

html.mobile-active .mcp-hint {
  font-size: 11px;
  color: var(--c-text-secondary);
}

/* ==========================================================================
   施工四：轮盘原型 v2（可见窗5项+落座动效，09-11）
   ========================================================================== */
.dial-proto-disc {
  position: fixed;
  z-index: 9600;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .15s ease-out, transform .15s var(--ease-smooth, ease-out);
  pointer-events: none;
}

.dial-proto-disc.show {
  opacity: 1;
  transform: scale(1);
}

.dial-proto-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(0, 0, 0, .05);
  transition: opacity .12s ease-out;
}

.dial-proto-bg.hide {
  opacity: 0;
}

.dial-proto-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px solid rgba(0, 0, 0, .08);
  background: #fff;
  transition: opacity .12s ease-out;
}

.dial-proto-center.hide {
  opacity: 0;
}

.dial-proto-center b {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text, #111);
}

.dial-proto-center i {
  font-style: normal;
  font-size: 10px;
  color: var(--c-text-secondary, #94a3b8);
}

.dial-proto-item {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text, #111);
  white-space: nowrap;
  will-change: transform, opacity;
  transition: color .1s;
}

.dial-proto-item.sel {
  color: var(--c-accent, #2563eb);
}

.dial-proto-item.seat {
  transition: transform .24s var(--ease-smooth, ease-out), opacity .18s ease-out;
}

/* 轮盘接管期：真工具条让位（落座项飞入其原位） */
html.mobile-active .mobile-toolbar {
  transition: opacity .14s ease-out;
}

html.mobile-active .mobile-toolbar.dial-takeover {
  opacity: 0;
  pointer-events: none;
}

/* ===== 施工四 v4：扇面底盘 + 形态变换（09-11） ===== */
.dial-fan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .14));
}
.dial-proto-disc.show .dial-fan {
  opacity: 1;
}
.dial-fan.hide {
  opacity: 0 !important;
}
.dial-fan path {
  fill: rgba(255, 255, 255, .94);
  stroke: rgba(0, 0, 0, .09);
  stroke-width: 1;
  transition: fill .12s ease;
}
.dial-fan path.hot {
  fill: rgba(37, 99, 235, .08);
  stroke: rgba(37, 99, 235, .28);
}
.dial-proto-item.fly {
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}
.dial-proto-item.seat {
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .22s ease .06s;
}

/* ===== 施工四 v5：实体砖块（拆解/拼合） ===== */
.dial-proto-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text, #111);
  white-space: nowrap;
  will-change: transform, width, height;
  transition: none;
}
.dial-proto-item.sel {
  background: rgba(37, 99, 235, .07);
  border-color: rgba(37, 99, 235, .35);
  color: var(--c-accent, #2563eb);
}
.dial-proto-item.fly {
  transition:
    transform .26s cubic-bezier(.22, 1, .36, 1),
    width .26s cubic-bezier(.22, 1, .36, 1),
    height .26s cubic-bezier(.22, 1, .36, 1),
    opacity .22s ease;
}
.dial-proto-item.seat {
  transition:
    transform .28s cubic-bezier(.4, 0, .2, 1),
    width .28s cubic-bezier(.4, 0, .2, 1),
    height .28s cubic-bezier(.4, 0, .2, 1),
    opacity .22s ease .08s;
}
.dial-proto-center {
  top: calc(50% - 44px);
  width: 80px;
  height: 80px;
}
html.mobile-active .mobile-toolbar.dial-takeover {
  transition: opacity .08s ease-out !important;
}

/* ===== 施工四 v7：真扇形砖 + 线图名称 + 拨盘（覆盖 v5 段同名规则） ===== */
.dial-proto-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #fff;
  border: none;
  border-radius: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text, #111);
  white-space: nowrap;
  will-change: transform;
  transition: none;
}
.dial-proto-item .fan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .13));
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dial-proto-item .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.dial-proto-item .ic svg {
  width: 18px;
  height: 18px;
  display: block;
}
.dial-proto-item span {
  position: relative;
  z-index: 1;
  line-height: 1;
  transition: opacity .18s ease;
}
.dial-proto-item.fanned {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.dial-proto-item.fanned .fan { opacity: 1; }
.dial-proto-item.fly,
.dial-proto-item.seat {
  transition:
    transform .26s cubic-bezier(.22, 1, .36, 1),
    width .26s cubic-bezier(.22, 1, .36, 1),
    height .26s cubic-bezier(.22, 1, .36, 1),
    background .26s ease,
    border-radius .26s ease,
    box-shadow .26s ease,
    opacity .2s ease;
}
.dial-proto-item.seat { transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.dial-proto-item.seat span { opacity: 0; }
.dial-proto-item.sel { color: var(--c-accent, #2563eb); }
.dial-proto-item .fan path {
  fill: #fff;
  stroke: rgba(0, 0, 0, .08);
  stroke-width: 1;
}
.dial-proto-item.fanned.sel .fan path {
  fill: rgba(37, 99, 235, .07);
  stroke: rgba(37, 99, 235, .35);
}
.dial-proto-item.blank span,
.dial-proto-item.blank .ic { color: #9ca3af; }
.dial-proto-item.blank .fan path {
  stroke-dasharray: 3 3;
  fill: rgba(255, 255, 255, .72);
}
/* ===== 施工四 v7.1：中央取消饼 + 侧盘文字直立（覆盖 v5/v7 段同名规则） ===== */

/* 中央圆饼改「取消」按钮：可点击，视觉降级为工具钮（不再抢选中名的戏） */
.dial-proto-center {
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.dial-proto-center b {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-tertiary, #64748b);
}
.dial-proto-center:active b { color: var(--c-accent, #2563eb); }

/* 砖改为块容器，文字面 .face 接管内容排布（fan 扇面仍是绝对定位底层） */
.dial-proto-item { display: block; }
.dial-proto-item .face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
/* ===== 施工四 v7.3b：UI 文字禁选中（沉浸感，主人 09-12 07:19 反馈） ===== */
html.mobile-active {
  -webkit-user-select: none;
  user-select: none;
}
/* 输入与可编辑内容豁免：编辑场景必须可选可编辑 */
html.mobile-active input,
html.mobile-active textarea,
html.mobile-active [contenteditable='true'],
html.mobile-active [contenteditable=''] {
  -webkit-user-select: text;
  user-select: text;
}