/* 基础重置和全局变量 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
/* Firefox transform:scale 缩放时隐藏溢出（JS 用 transform 代替 zoom） */
html { overflow: hidden; height: 100vh; }

:root {
  /* 默认值，会被主题覆盖 */
  --bg-primary: #1a1a1a;
  --bg-secondary: #252525;
  --bg-tertiary: #303030;
  --text-primary: #e8e8e8;
  --text-secondary: #aaaaaa;
  --border-color: #444444;
  --radius: 6px;
  --radius-sm: 4px;
  --font-size: 16px;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  /* 小组件编辑弹窗内「内在标题」：与主题正文字体分离的一条栈，保证存在 Regular/Bold 字面；正文区仍用 var(--font-family) */
  --widget-editor-heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 16px);
  /* 文字美化固定亮色色板（不属于主题系统变量） */
  --beauty-color-preset-1: #ff5f7a;
  --beauty-color-preset-2: #42c5ff;
  --beauty-color-preset-3: #7dff6b;
  --beauty-color-preset-4: #ffd84d;
  --beauty-color-preset-5: #b57dff;
  --beauty-color-preset-6: #ff8a2a;
  /* 与 theme.js 经典主题同步，供首屏/未加载主题时兜底 */
  --phone-shell-bg: #111111;
  --phone-status-divider: #222222;
  --phone-bubble-accent-bg: #0b84fe;
  --phone-bubble-accent-text: #ffffff;
  --visual-textbox-bg: rgba(0, 0, 0, 0.75);
  --flowchart-pill-text: rgba(255, 255, 255, 0.96);
  --accent-glow: color-mix(in srgb, var(--accent-color) 45%, transparent);
  --widget-inset-light: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --widget-inset-dark: color-mix(in srgb, var(--bg-primary) 45%, transparent);
  --widget-border-soft: var(--border-light);
  /* 功能色（主题可覆盖） */
  --text-on-accent: #ffffff;
  --danger-color: #e53935;
  --canvas-bg: #ffffff;

  /* JS 内联尺寸桥接变量 — 直接基于用户设置的 --font-size 按比例计算，
   * 用户在设置里调字体大小时所有用了 var(--ui-fs-*) 的元素自动同步。
   * 整体抬高两档：避免编辑器/弹窗内小字号在整页 zoom 下显得过小。 */
  --ui-fs-11: calc(var(--font-size) * 1);
  --ui-fs-12: calc(var(--font-size) * 1.0625);
  --ui-fs-13: calc(var(--font-size) * 1.125);
  --ui-fs-14: calc(var(--font-size) * 1.1875);
  --ui-fs-15: calc(var(--font-size) * 1.25);
  --ui-fs-16: calc(var(--font-size) * 1.3125);
  --ui-pad-xs-y: clamp(3px, 0.8vw, 6px);
  --ui-pad-xs-x: clamp(6px, 1.33vw, 10px);
  --ui-pad-sm-y: clamp(5px, 1.07vw, 8px);
  --ui-pad-sm-x: clamp(7px, 1.6vw, 12px);
  --ui-pad-md-y: clamp(6px, 1.33vw, 10px);
  --ui-pad-md-x: clamp(8px, 1.87vw, 14px);
  --ui-btn-min-h-sm: clamp(30px, 5.33vw, 40px);
  --ui-btn-min-h-md: clamp(34px, 6.13vw, 46px);
  /* 间距、列表、弹层内联等（与 JS style 中的 var(--ui-*) 对应） */
  --ui-gap-2: 4px;
  --ui-gap-4: 6px;
  --ui-gap-6: 8px;
  --ui-gap-8: 10px;
  --ui-gap-10: 12px;
  --ui-pad-lg-x: 18px;
  --ui-pad-chip-x: 14px;
  --ui-chip-row-min-h: calc(var(--ui-btn-min-h-md) + 4px);
  --ui-toolbar-btn-min-h: calc(var(--ui-btn-min-h-md) + 6px);
  /* 与 .editor-top-bar 上下内边距一致；一行总高 = 按钮区 + 上下内边距，供游戏顶栏对齐 */
  --ui-editor-topbar-pad-y: 6px;
  --ui-editor-topbar-row-h: calc(var(--ui-toolbar-btn-min-h) + 2 * var(--ui-editor-topbar-pad-y));
  --ui-input-modal-min-h: calc(var(--ui-btn-min-h-md) + 8px);
  --ui-list-inset: 12px;
  --ui-list-card-mb: 4px;
  --ui-empty-pad-y: 40px;
  --ui-menu-min-w: 160px;
  --ui-icon-inline-w: 16px;
  --ui-comp-dot-size: 10px;
  --ui-tag-max-w: 60px;
  --ui-more-btn-fs: calc(var(--font-size) * 1.125);
  --ui-mgmt-chip-min-h: calc(var(--ui-btn-min-h-md) + 2px);
  --ui-fs-10: calc(var(--font-size) * 0.9375);
  --ui-gap-3: 6px;
  --ui-gap-5: 8px;
  --ui-gap-12: 16px;
  --ui-comfort-tap: 52px;
  --ui-modal-body-max-h: 60vh;
  --ui-checkbox-size: 24px;
  --ui-border-strong: 3px;
  --ui-format-num-w: 88px;
  --ui-format-num-min: 72px;
  --ui-format-select-w: 82px;
  --ui-format-scale-w: 48px;
  --ui-swatch-size: 18px;
  --ui-panel-tight-max: 380px;
  --ui-pad-14: 14px;
  --ui-pad-form-y: 10px;
  --ui-form-field-min: 110px;
  --ui-def-preview-max: 80px;
  --ui-label-fixed-sm: 34px;
  --ui-label-fixed-md: 78px;
  --ui-inline-min: 60px;
  --ui-format-inp-max: 220px;
  --ui-preview-type-min-h: 56px;
  --ui-rgb-inp-min: 100px;
  --ui-weight-sel-max: 140px;
  --ui-color-sel-max: 120px;
  --ui-modal-col-min: min(220px, 92vw);
  --ui-textarea-loop-min-h: 88px;
  --ui-textarea-branch-min-h: 72px;
  --ui-count-select-w: 92px;
  --ui-var-op-open-w: 68px;
  --ui-var-op-sep-w: 62px;
  --ui-var-op-val-mid: 110px;
  --ui-var-select-flex-min: min(120px, 38vw);
  --ui-action-sel-w: 92px;
  --ui-val-mode-sel-w: 96px;
  --ui-modal-list-max-h: min(420px, 65vh);
  --ui-switch-track-w: 48px;
  --ui-switch-track-h: 28px;
  --ui-switch-knob: 22px;
  --ui-switch-inset: 3px;
  --ui-avatar-tile: 36px;
  --ui-avatar-tile-sm: 32px;
  --ui-image-card-w: 100px;
  --ui-thumb-lg: 64px;
  --ui-phone-shell-max: min(320px, 92vw);
  --ui-phone-shell-radius: 20px;
  --ui-phone-border-w: 2px;
  --ui-msg-scroll-max: min(300px, 45vh);
  --ui-sys-bubble-radius: 10px;
  --ui-bubble-radius-lg: 12px;
  --ui-bubble-corner: 4px;
  --ui-emoji-hero: calc(var(--ui-fs-16) + 24px);
  --ui-preset-insert-min: 112px;
  --ui-cc-hint-min: min(180px, 55vw);
  --ui-textarea-sm-min: 60px;
  --ui-preview-img-max-h: min(200px, 40vh);
  --ui-tail-spacer: 24px;
  --ui-disp-input-w: 120px;
  --ui-fold-btn-min-h: calc(var(--ui-btn-min-h-sm) - 6px);
  --ui-item-indent-pad: 18px;
  --ui-section-gap-lg: 18px;
  --ui-switch-radius: 999px;
  --ui-type-select-w: 120px;
  --ui-target-pick-min: min(160px, 48vw);
  --ui-cond-dash-fs: calc(var(--font-size) * 1.5);
  --ui-cond-empty-pad-y: var(--ui-tail-spacer);
  --ui-del-rule-min-w: calc(var(--ui-btn-min-h-sm) + 6px);
  --ui-tester-choice-seg-max: min(280px, 92vw);
  --ui-tester-var-max-h: 120px;
  --ui-tester-choice-btn-max-h: 96px;
}

/* JS 内联 font-size 硬编码 → 跟随用户字号设置按比例缩放 */
#app-scale-inner [style*="font-size:9px"] { font-size: calc(var(--font-size) * 0.5625) !important; }
#app-scale-inner [style*="font-size:10px"] { font-size: calc(var(--font-size) * 0.625) !important; }
#app-scale-inner [style*="font-size:11px"] { font-size: calc(var(--font-size) * 0.6875) !important; }
#app-scale-inner [style*="font-size:12px"] { font-size: calc(var(--font-size) * 0.75) !important; }
#app-scale-inner [style*="font-size:13px"] { font-size: calc(var(--font-size) * 0.8125) !important; }
#app-scale-inner [style*="font-size:14px"] { font-size: calc(var(--font-size) * 0.875) !important; }
#app-scale-inner [style*="font-size:15px"] { font-size: calc(var(--font-size) * 0.9375) !important; }
#app-scale-inner [style*="font-size:16px"] { font-size: calc(var(--font-size) * 1) !important; }
#app-scale-inner [style*="font-size:18px"] { font-size: calc(var(--font-size) * 1.125) !important; }
#app-scale-inner [style*="font-size:48px"] { font-size: calc(var(--font-size) * 3) !important; }
#app-scale-inner [style*="padding:8px 10px"] { padding: clamp(6px, 1.6cqi, 8px) clamp(8px, 2cqi, 10px) !important; }
#app-scale-inner [style*="padding:8px 12px"] { padding: clamp(6px, 1.6cqi, 8px) clamp(10px, 2.4cqi, 12px) !important; }
#app-scale-inner [style*="padding:10px 12px"] { padding: clamp(8px, 2cqi, 10px) clamp(10px, 2.4cqi, 12px) !important; }
#app-scale-inner [style*="padding:10px 14px"] { padding: clamp(8px, 2cqi, 10px) clamp(11px, 2.8cqi, 14px) !important; }

@media (max-width: 640px) {
  :root {
    --ui-pad-xs-y: 7px;
    --ui-pad-xs-x: 10px;
    --ui-pad-sm-y: 9px;
    --ui-pad-sm-x: 14px;
    --ui-pad-md-y: 10px;
    --ui-pad-md-x: 16px;
    --ui-btn-min-h-sm: 38px;
    --ui-btn-min-h-md: 44px;
    --ui-gap-6: 8px;
    --ui-gap-8: 10px;
    --ui-gap-10: 12px;
    --ui-pad-lg-x: 20px;
    --ui-pad-chip-x: 12px;
    --ui-list-inset: 10px;
    --ui-empty-pad-y: 32px;
    --ui-more-btn-fs: calc(var(--font-size) * 1.0625);
    --ui-comfort-tap: 50px;
    --ui-checkbox-size: 22px;
    --ui-swatch-size: 22px;
    --ui-format-num-w: 80px;
    --ui-format-num-min: 64px;
    --ui-format-select-w: 76px;
    --ui-format-scale-w: 44px;
    --ui-panel-tight-max: min(92vw, 340px);
    --ui-pad-14: 12px;
    --ui-pad-form-y: 8px;
    --ui-form-field-min: 88px;
    --ui-def-preview-max: 72px;
    --ui-label-fixed-sm: 30px;
    --ui-label-fixed-md: 70px;
    --ui-inline-min: 52px;
    --ui-format-inp-max: 180px;
    --ui-preview-type-min-h: 48px;
    --ui-rgb-inp-min: 80px;
    --ui-weight-sel-max: 120px;
    --ui-color-sel-max: 100px;
    --ui-textarea-loop-min-h: 72px;
    --ui-textarea-branch-min-h: 64px;
    --ui-count-select-w: 84px;
    --ui-var-op-open-w: 60px;
    --ui-var-op-sep-w: 54px;
    --ui-var-op-val-mid: 96px;
    --ui-action-sel-w: 84px;
    --ui-val-mode-sel-w: 88px;
    --ui-switch-track-w: 44px;
    --ui-switch-track-h: 26px;
    --ui-switch-knob: 20px;
    --ui-switch-inset: 3px;
    --ui-avatar-tile: 32px;
    --ui-avatar-tile-sm: 28px;
    --ui-image-card-w: 88px;
    --ui-thumb-lg: 56px;
    --ui-phone-shell-radius: 17px;
    --ui-preset-insert-min: 100px;
    --ui-disp-input-w: 104px;
    --ui-item-indent-pad: 14px;
    --ui-section-gap-lg: 14px;
    --ui-type-select-w: 104px;
    --ui-cond-dash-fs: calc(var(--font-size) * 1.25);
    --ui-tester-var-max-h: 96px;
    --ui-tester-choice-btn-max-h: 84px;
    --ui-editor-topbar-pad-y: 3px;
  }

  /* 全局强制缩放：按钮/分组/常见内联写死尺寸 */
  .btn {
    font-size: var(--ui-fs-12) !important;
    min-height: var(--ui-btn-min-h-md) !important;
    padding: var(--ui-pad-sm-y) var(--ui-pad-sm-x) !important;
  }
  .btn-sm {
    font-size: var(--ui-fs-11) !important;
    min-height: var(--ui-btn-min-h-sm) !important;
    padding: var(--ui-pad-xs-y) var(--ui-pad-xs-x) !important;
  }

  .group-tag,
  .filter-chip,
  .var-type-badge,
  .section-title,
  .tools-toolbox-section-title,
  .modal-section-title {
    font-size: var(--ui-fs-11) !important;
  }

  [style*="font-size:10px"] { font-size: var(--ui-fs-10) !important; }
  [style*="font-size:11px"] { font-size: var(--ui-fs-11) !important; }
  [style*="font-size:12px"] { font-size: var(--ui-fs-12) !important; }
  [style*="font-size:13px"] { font-size: var(--ui-fs-13) !important; }
  [style*="font-size:14px"] { font-size: var(--ui-fs-14) !important; }
  [style*="font-size:15px"] { font-size: var(--ui-fs-15) !important; }
  [style*="font-size:16px"] { font-size: var(--ui-fs-16) !important; }

  [style*="min-height:30px"] { min-height: var(--ui-btn-min-h-sm) !important; }
  [style*="min-height:32px"] { min-height: var(--ui-btn-min-h-sm) !important; }
  [style*="min-height:34px"] { min-height: var(--ui-btn-min-h-md) !important; }
  [style*="min-height:36px"] { min-height: var(--ui-btn-min-h-md) !important; }
  [style*="min-height:38px"] { min-height: calc(var(--ui-btn-min-h-md) + 1px) !important; }
  [style*="min-height:40px"] { min-height: calc(var(--ui-btn-min-h-md) + 2px) !important; }

  [style*="padding:10px 12px"] { padding: var(--ui-pad-md-y) var(--ui-pad-md-x) !important; }
  [style*="padding:10px 14px"] { padding: var(--ui-pad-md-y) calc(var(--ui-pad-md-x) + 2px) !important; }
  [style*="padding:8px 12px"] { padding: var(--ui-pad-md-y) var(--ui-pad-md-x) !important; }
  [style*="padding:8px 10px"] { padding: var(--ui-pad-md-y) var(--ui-pad-sm-x) !important; }
  [style*="padding:6px 8px"] { padding: var(--ui-pad-sm-y) var(--ui-pad-sm-x) !important; }
  [style*="padding:4px 10px"] { padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x) !important; }

  [style*="min-height:42px"] { min-height: var(--ui-input-modal-min-h) !important; }
  [style*="min-height:36px"] { min-height: var(--ui-mgmt-chip-min-h) !important; }
  [style*="padding:0 16px"] { padding: 0 var(--ui-pad-lg-x) !important; }
  [style*="padding:0 14px"] { padding: 0 var(--ui-pad-chip-x) !important; }
  [style*="padding:0 12px"] { padding: 0 var(--ui-pad-md-x) !important; }

  [style*="min-height:44px"] { min-height: var(--ui-comfort-tap) !important; }
  [style*="min-height:28px"] { min-height: var(--ui-btn-min-h-sm) !important; }
  [style*="max-height:60vh"] { max-height: var(--ui-modal-body-max-h) !important; }
  /* tester-tab 等：常见写死宽高 */
  [style*="max-height:120px"] { max-height: var(--ui-tester-var-max-h) !important; }
  [style*="max-height:96px"] { max-height: var(--ui-tester-choice-btn-max-h) !important; }
  [style*="max-width:280px"] { max-width: var(--ui-tester-choice-seg-max) !important; }
}

/* 容器查询覆盖：#app-scale-inner 内部的元素用 cqi（容器宽度百分比）替代 vw，
 * 让文字/按钮/间距跟随容器大小而非视口大小。
 * 设计基准：500px 容器宽度时取到 clamp 上限值（1cqi = 5px）。
 * 容器 < 500px 时平滑缩小，无断点跳变。
 * 弹窗等容器外元素继续使用 :root 的 vw 兜底值。 */
#app-scale-inner {
  --ui-pad-xs-y: clamp(3px, 1.2cqi, 6px);
  --ui-pad-xs-x: clamp(6px, 2cqi, 10px);
  --ui-pad-sm-y: clamp(5px, 1.6cqi, 8px);
  --ui-pad-sm-x: clamp(7px, 2.4cqi, 12px);
  --ui-pad-md-y: clamp(6px, 2cqi, 10px);
  --ui-pad-md-x: clamp(8px, 2.8cqi, 14px);
  --ui-btn-min-h-sm: clamp(30px, 8cqi, 40px);
  --ui-btn-min-h-md: clamp(34px, 9.2cqi, 46px);
  --ui-var-select-flex-min: min(120px, 38cqi);
  --ui-phone-shell-max: min(320px, 92cqi);
  --ui-cc-hint-min: min(180px, 55cqi);
  --ui-target-pick-min: min(160px, 48cqi);
  --ui-tester-choice-seg-max: min(280px, 92cqi);
  --ui-panel-tight-max: min(92cqi, 340px);
}

/* 响应式页面缩放由 JS 动态设置 html.style.zoom（CSS zoom 不支持 clamp），
 * 见 js/utils.js _initPageZoom */

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: var(--font-size);
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  /* 禁用选中、拖拽 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 允许编辑器内的输入框选中 */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}


/* 滚动条美化 — WebKit (Chrome/Edge/Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 1px solid var(--scrollbar-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--scrollbar-thumb) 80%, var(--text-primary));
}
::-webkit-scrollbar-corner {
  background: var(--scrollbar-bg);
}
/* 滚动条美化 — Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

/* 视图切换：用 visibility + pointer-events 隐藏（不用 display:none）。
   两 view（游戏 / 编辑器）始终被浏览器 layout 与 paint，切换时只翻可见性，
   避免首次切到 view-editor 时浏览器全量 layout + 新建合成层造成的 1 帧延迟闪烁。
   两 view 在 layout.css 里都 position:absolute inset:0 撑满 #app-scale-inner，不互相挤占空间。
   注：保留 display:flex 让 view 内部子节点继续按 flex column 排版（视图本身 inline style 含 flex-direction:column）。 */
.view-active {
  visibility: visible !important;
  pointer-events: auto;
}
.view-hidden {
  visibility: hidden !important;
  pointer-events: none;
}

/* 禁止图片拖拽 */
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* 输入框通用样式将在 components.css 中定义 */