/* ============================================================
   画出你的旋律 — Apple.com Style
   Content · Space · Hierarchy · Clarity
   无玻璃 / 无 Blur / 无发光 / 实体色 + 排版层级
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --ink: var(--text-primary); /* v15 P0 · 历史别名 */
  /* Color */
  --bg-main: #FFFFFF;
  --bg-secondary: #F5F5F7;
  --bg-tertiary: #EDEDF0;
  --bg-hover: #F5F5F7;
  --bg-press: #E8E8ED;
  --bg-selected: #E8E8ED;
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #86868B;
  --separator: rgba(0,0,0,0.08);
  --separator-soft: rgba(0,0,0,0.06);
  --accent: #E85D4C;
  --danger: #FF3B30;
  --border-control: rgba(0,0,0,0.10);
  --border-panel: rgba(0,0,0,0.06);

  /* Space (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;

  /* Radius */
  --r-sm: 6px;
  --r-ctrl: 10px;
  --r-btn: 12px;
  --r-panel: 18px;
  --r-dialog: 20px;
  --r-sheet: 22px;

  /* Layout · v18 工具栏几何单一真相源：栏 / 弹层 / 侧栏 / 参数条的 left 全部由这几个变量推导
     （v17 栏宽在 6 处各写各的，弹层 left 写死 58px，手机竖屏栏宽 56 → 弹层压栏 4px） */
  --rail-left: calc(16px + var(--safe-l));
  --rail-w: 58px;
  --rail-top-h: 52px;
  --pop-left: calc(var(--rail-left) + var(--rail-w) + 8px);
  --panel-w: 312px;
  --control-h: 44px;

  /* Type */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --safe-t: 0px;
  --safe-b: 0px;
  --safe-l: 0px;
  --safe-r: 0px;
  --app-height: 100vh;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}
@supports (padding: env(safe-area-inset-top)) {
  :root {
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
  }
}
/* v18 · 高度单一真相源：动态视口单位由浏览器自己处理地址栏/转屏；不支持时才由 main.js 用 innerHeight 兜底 */
@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

/* Dark tokens */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #000000;
    --bg-secondary: #1D1D1F;
    --bg-tertiary: #2C2C2E;
    --bg-hover: #2C2C2E;
    --bg-press: #3A3A3C;
    --bg-selected: #3A3A3C;
    --text-primary: #F5F5F7;
    --text-secondary: #A1A1A6;
    --text-tertiary: #8E8E93;
    --separator: rgba(255,255,255,0.10);
    --separator-soft: rgba(255,255,255,0.08);
    --border-control: rgba(255,255,255,0.14);
    --border-panel: rgba(255,255,255,0.10);
  }
}

html, body {
  margin: 0; height: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font);
  overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
}
html { touch-action: manipulation; }
body { height: 100vh; height: var(--app-height, 100vh); }

/* ========== Canvas ========== */
.canvas-layer {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  height: var(--app-height, 100vh);
  background: var(--bg-main);
  touch-action: none;
  z-index: 0;
}
.canvas-layer canvas {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  touch-action: none;
}
#cCursor { z-index: 5; pointer-events: none; }
#cOv { z-index: 4; }
#cArt { z-index: 3; }
#cGuide { z-index: 2; }

.hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 4;
  transition: opacity 0.3s var(--ease);
}
.hint.off { opacity: 0; }
.hint-main {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 15px; font-weight: 400;
  line-height: 1.6; text-align: center;
  padding: 0 24px;
}

/* ========== Top title ========== */
.top-title {
  position: fixed;
  top: calc(14px + var(--safe-t));
  left: 50%; transform: translateX(-50%);
  z-index: 20;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  transition: background 120ms;
}
@media (hover: hover) {
.top-title:hover { background: var(--bg-hover); }
}

/* ========== Tool Rail ========== */
.tool-rail {
  position: fixed;
  left: var(--rail-left);
  top: 50%; transform: translateY(-50%);
  width: var(--rail-w);
  background: var(--bg-main);
  border: 1px solid var(--border-panel);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 6px;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  z-index: 30;
  transition: opacity 200ms var(--ease);
}

.rail-btn {
  width: 44px; height: 44px;
  border: none; border-radius: var(--r-btn);
  background: transparent;
  color: var(--text-primary);
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  transition: background 120ms var(--ease);
  position: relative;
}

.rail-btn:active { background: var(--bg-press); }
.rail-btn:disabled { opacity: 0.3; pointer-events: none; }
/* v16 · 删除 v14 遗留的通用 .rail-btn.on —— 选中态统一由文件末尾的 data-kind 分派接管 */
.rail-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Color well */
.color-well {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-control);
  display: grid; place-items: center;
}
.orb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent);
}

/* Play */
.play-btn {
  background: var(--text-primary) !important;
  color: var(--bg-main) !important;
  border-radius: 14px;
}
@media (hover: hover) {
.play-btn:hover { opacity: 0.88; background: var(--text-primary) !important; }
}
.play-btn:active { opacity: 0.78; background: var(--text-primary) !important; }

/* Tooltip · v18：由 main.js initRailTooltips 生成 fixed 元素，只响应鼠标 */
.rail-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--text-primary); color: var(--bg-main);
  font-size: 12px; line-height: 1.3; font-weight: 400;
  padding: 5px 8px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.rail-tip[hidden] { display: none; }

/* v16 · 空闲变淡：只淡化非选中按钮，当前工具/已打开的面板/播放键保持清晰。
   v15 是整条 rail 一起压暗，恰好在「需要看清当前状态」时最看不清。 */
.tool-rail.dim { opacity: 1; }
.tool-rail.dim .rail-btn { opacity: 0.55; }
.tool-rail.dim .rail-btn.on,
.tool-rail.dim .rail-btn.panel-open,
.tool-rail.dim .play-btn { opacity: 1; }
.tool-rail.hidden-rail {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-12px);
}

/* ========== Side Panel ========== */
.side-panel {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  left: var(--pop-left);
  width: var(--panel-w);
  max-height: min(86vh, 720px);
  background: var(--bg-main);
  border: 1px solid var(--border-panel);
  border-radius: var(--r-panel);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  z-index: 25;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(-50%) translateX(-8px);
  transition: opacity 220ms var(--ease), transform 240ms var(--ease);
  pointer-events: none;
}
.side-panel[hidden] { display: none; }
.side-panel.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
.panel-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 8px;
  flex: 0 0 auto;
}
.panel-head h2 {
  margin: 0;
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
}
.panel-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 12px 20px;
}
.panel-body::-webkit-scrollbar { width: 5px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }

.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-ctrl);
  border: none; background: transparent; color: var(--text-secondary);
  display: grid; place-items: center; cursor: pointer;
  transition: background 120ms;
}
@media (hover: hover) {
.icon-btn:hover { background: var(--bg-hover); }
}
.icon-btn:active { background: var(--bg-press); }
.icon-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Section */
.sec {
  padding: 20px 10px 6px;
  font-size: 12px; font-weight: 500;
  color: var(--text-tertiary);
}

/* Row */
.row {
  display: flex; align-items: center;
  width: 100%; min-height: 42px;
  padding: 6px 10px;
  gap: 12px;
  border: none; background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 400;
  color: var(--text-primary);
  text-align: left; cursor: pointer;
  border-radius: var(--r-ctrl);
  transition: background 120ms var(--ease);
}
@media (hover: hover) {
.row:hover { background: var(--bg-hover); }
}
.row:active { background: var(--bg-press); }
.row.col { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
@media (hover: hover) {
.row.col:hover { background: transparent; }
}
.row-label { flex: 0 0 auto; }
.row-val {
  margin-left: auto;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
}
.row-chev {
  color: var(--text-tertiary);
  font-size: 16px; line-height: 1;
  flex: 0 0 auto; margin-left: 2px;
}
.row-inline {
  margin-left: auto; border: none; background: none;
  font-family: inherit; font-size: 14px; color: var(--text-secondary);
  cursor: pointer; padding: 0;
}

/* Stepper */
.stepper {
  margin-left: auto;
  display: inline-flex; align-items: center;
  height: 32px;
  background: var(--bg-secondary);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.stepper-btn {
  width: 36px; height: 100%; border: none; background: transparent;
  color: var(--text-primary); font-size: 16px; cursor: pointer; line-height: 1;
}
@media (hover: hover) {
.stepper-btn:hover { background: var(--bg-tertiary); }
}
.stepper-val {
  min-width: 28px; text-align: center;
  font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Slider */
.slider-line { display: flex; align-items: center; gap: 12px; width: 100%; }
.slider-line input[type=range] { flex: 1; min-width: 0; }
.slider-val {
  font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; min-width: 64px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.slider-val b { font-weight: 500; color: var(--text-primary); }
.row-slider { margin-left: auto; width: 110px; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px;
  background: #D2D2D7;
  outline: none;
}
@media (prefers-color-scheme: dark) {
  input[type=range] { background: #48484A; }
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  cursor: pointer;
}

/* Segmented */
.seg {
  margin-left: auto;
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--r-sm);
  padding: 2px;
}
.seg-item {
  height: 28px; padding: 0 12px;
  border: none; border-radius: 5px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 120ms;
}
.seg-item.on {
  background: var(--bg-main);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  font-weight: 600;
}

/* Switch */
.switch { margin-left: auto; display: inline-flex; cursor: pointer; }
.switch input { display: none; }
.switch .track {
  width: 40px; height: 24px; border-radius: 999px;
  background: #E9E9EB;
  position: relative; display: block;
  transition: background 160ms var(--ease);
}
@media (prefers-color-scheme: dark) {
  .switch .track { background: #48484A; }
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 160ms var(--ease);
}
.switch input:checked + .track { background: var(--text-primary); }
.switch input:checked + .track::after { transform: translateX(16px); }

body.mode-simple .studio-only { display: none !important; }

/* ========== Popover ========== */
.popover {
  position: fixed;
  left: var(--pop-left);
  top: 50%; transform: translateY(-50%);
  width: 240px;
  max-width: calc(100vw - var(--pop-left) - 8px - var(--safe-r));
  background: var(--bg-main);
  border: 1px solid var(--separator);
  border-radius: var(--r-btn);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
  padding: 16px;
  z-index: 35;
  opacity: 0;
  transition: opacity 160ms var(--ease), transform 180ms var(--ease);
  pointer-events: none;
}
.popover[hidden] { display: none; }
.popover.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.pop-title { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; font-weight: 500; }
.size-line { display: flex; align-items: center; gap: 10px; }
.size-line input[type=range] { flex: 1; }

/* ========== Scrim & Sheet ========== */
.scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms;
  z-index: 40;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: 100%; max-width: 400px;
  background: var(--bg-main);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 8px 20px calc(24px + var(--safe-b));
  transform: translateY(110%);
  /* v18 · 关闭态 visibility:hidden：横屏时 12 张隐藏 sheet 的 40px 阴影不再从底边透出成灰条，也不再能被 Tab 聚焦 */
  visibility: hidden;
  transition: transform 260ms var(--ease), visibility 0s linear 260ms;
  z-index: 50;
  max-height: calc(var(--app-height, 100vh) * 0.86); overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  pointer-events: none;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
}
.sheet.open { transform: translateY(0); pointer-events: auto; visibility: visible; transition: transform 260ms var(--ease), visibility 0s; }
.grip {
  width: 36px; height: 5px; border-radius: 99px;
  background: var(--bg-tertiary); margin: 4px auto 16px;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.sheet-head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.text-btn {
  appearance: none; border: none; background: none;
  color: var(--accent); font-family: inherit; font-size: 15px;
  font-weight: 500; cursor: pointer; padding: 4px 0;
}
.sec-label {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
}

/* List options */
.list-opts { display: flex; flex-direction: column; }
.list-opt {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 10px 4px;
  border: none; background: none; width: 100%;
  font-family: inherit; font-size: 16px; color: var(--text-primary);
  cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--separator-soft);
  transition: background 120ms;
  border-radius: 0;
}
.list-opt:last-child { border-bottom: none; }
@media (hover: hover) {
.list-opt:hover { background: var(--bg-hover); }
}
.list-opt .check {
  color: var(--accent); font-size: 15px; font-weight: 600;
  opacity: 0;
}
.list-opt.on .check { opacity: 1; }
.list-opt.on { font-weight: 500; }
/* v19 · 扫描线样式列表：缩略图 + 说明 */
.list-opt .lo-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.list-opt .lo-swatch {
  flex: 0 0 auto; display: block;
  width: 36px; height: 24px; border-radius: 5px; overflow: hidden;
}
.list-opt .lo-swatch svg { display: block; width: 100%; height: 100%; }
.list-opt .lo-text { display: flex; flex-direction: column; min-width: 0; }
.list-opt .lo-desc {
  margin-top: 2px;
  font-size: 12px; font-weight: 400; line-height: 1.35;
  color: var(--text-secondary);
}

/* Color sheet */
.tone-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tone-dot {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  outline: 2px solid transparent; outline-offset: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: outline-color 120ms;
}
.tone-dot:active { transform: scale(0.95); }
.tone-dot.on { outline-color: var(--text-primary); }
.sv {
  position: relative; width: 100%; height: 128px;
  border-radius: var(--r-ctrl); overflow: hidden;
  margin-bottom: 10px; touch-action: none; background: var(--bg-tertiary);
}
#svCanvas { display: block; width: 100%; height: 100%; }
.sv-dot {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.28);
  margin: -10px 0 0 -10px; pointer-events: none;
}
.hue {
  position: relative; height: 28px; border-radius: 999px;
  overflow: hidden; margin-bottom: 16px; touch-action: none; background: var(--bg-tertiary);
}
#hueCanvas { display: block; width: 100%; height: 100%; }
.hue-knob {
  position: absolute; top: 50%; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.28);
  margin: -11px 0 0 -11px; pointer-events: none;
}
.color-meta { display: flex; align-items: center; gap: 12px; }
.preview-ball {
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  flex: 0 0 auto;
}
.meta-main { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.meta-sub { margin: 2px 0 0; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* Keyboard */
.piano {
  display: flex; height: 140px; gap: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.pkey {
  flex: 0 0 36px; border: none; border-radius: 0 0 6px 6px;
  background: var(--bg-main);
  box-shadow: 0 0 0 1px var(--separator);
  cursor: pointer; padding: 0 0 6px;
  font-family: inherit; font-size: 10px; color: var(--text-tertiary);
  display: flex; align-items: flex-end; justify-content: center;
}
.pkey.black {
  background: var(--text-primary); color: rgba(255,255,255,0.4);
  flex: 0 0 24px; height: 62%; margin: 0 -12px; z-index: 2;
  border-radius: 0 0 4px 4px;
}
.pkey:active, .pkey.active { background: var(--accent); color: #fff; }

/* Works */
.works-list { display: flex; flex-direction: column; }
.work-item {
  display: flex; align-items: center;
  padding: 10px 4px;
  border-radius: var(--r-ctrl);
  transition: background 120ms;
  cursor: pointer;
}
@media (hover: hover) {
.work-item:hover { background: var(--bg-hover); }
}
.work-thumb {
  width: 56px; height: 72px; border-radius: var(--r-ctrl);
  background: var(--bg-secondary); object-fit: cover;
  flex: 0 0 auto; margin-right: 12px;
  box-shadow: 0 0 0 1px var(--separator-soft);
}
.work-meta { flex: 1 1 auto; min-width: 0; }
.work-meta b {
  display: block; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.work-meta span {
  display: block; margin-top: 3px; font-size: 12px; color: var(--text-secondary);
}
.work-actions { display: flex; gap: 4px; flex: 0 0 auto; margin-left: 8px; }
.work-btn {
  height: 30px; padding: 0 12px;
  border: none; border-radius: var(--r-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.work-btn.danger { color: var(--danger); }
@media (hover: hover) {
.work-btn:hover { background: var(--bg-tertiary); }
}

.empty { text-align: center; padding: 40px 16px 24px; }
.empty-title { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--text-primary); }
.empty-desc { margin: 0 0 20px; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

/* Buttons */
.cta, .btn {
  height: 40px; padding: 0 18px;
  border: none; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: opacity 120ms;
}
.cta:active, .btn:active { opacity: 0.8; }
.cta, .btn.primary {
  background: var(--text-primary); color: var(--bg-main);
}
.btn.secondary {
  background: var(--bg-secondary); color: var(--text-primary);
}
.btn.danger {
  background: var(--danger); color: #fff;
}
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }

/* Feature rows (export) */
.feature-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 4px;
  border: none; background: none; text-align: left;
  font-family: inherit; cursor: pointer;
  border-bottom: 1px solid var(--separator-soft);
  transition: background 120ms;
  border-radius: 0;
}
.feature-row:last-child { border-bottom: none; }
@media (hover: hover) {
.feature-row:hover { background: var(--bg-hover); }
}
.feature-row b { display: block; font-size: 15px; font-weight: 500; color: var(--text-primary); }
.feature-row span { display: block; margin-top: 3px; font-size: 13px; color: var(--text-secondary); }
.feature-row .row-chev { margin-left: 12px; }

/* Menu */
.menu-list { display: flex; flex-direction: column; }
.menu-item {
  appearance: none; border: none; background: none;
  font-family: inherit; font-size: 16px; color: var(--text-primary);
  text-align: left; padding: 14px 4px; cursor: pointer;
  border-bottom: 1px solid var(--separator-soft);
  transition: background 120ms;
  border-radius: 0;
}
.menu-item:last-child { border-bottom: none; }
@media (hover: hover) {
.menu-item:hover { background: var(--bg-hover); }
}

/* Share */
.cover-wrap {
  width: 168px; margin: 0 auto 16px;
  border-radius: var(--r-ctrl); overflow: hidden;
  box-shadow: 0 0 0 1px var(--separator-soft);
  background: var(--bg-secondary);
}
#coverCanvas { display: block; width: 100%; height: auto; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.field input {
  width: 100%; height: 40px; border: none; border-radius: var(--r-ctrl);
  background: var(--bg-secondary); color: var(--text-primary);
  padding: 0 12px; font-family: inherit; font-size: 15px; outline: none;
}

.help-body p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.help-body p b { color: var(--text-primary); font-weight: 600; display: block; margin-bottom: 4px; }

/* Dialog */
.dialog-wrap {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.20);
  display: grid; place-items: center;
  z-index: 60; padding: 24px;
}
.dialog-wrap[hidden] { display: none; }
.dialog {
  width: 100%; max-width: 300px;
  background: var(--bg-main);
  border-radius: var(--r-dialog);
  box-shadow: 0 18px 50px rgba(0,0,0,0.16);
  padding: 24px 22px 18px;
}
.dialog-title { margin: 0 0 6px; font-size: 17px; font-weight: 600; text-align: center; }
.dialog-desc { margin: 0 0 20px; font-size: 13px; color: var(--text-secondary); text-align: center; line-height: 1.5; }
.dialog-actions { display: flex; gap: 8px; }
.dialog-actions .btn { flex: 1; }

/* Toast / tips */
.toast {
  position: fixed; left: 50%; bottom: 36px;
  bottom: calc(36px + var(--safe-b));
  transform: translateX(-50%);
  max-width: 280px; text-align: center;
  background: var(--text-primary); color: var(--bg-main);
  font-size: 13px; padding: 10px 16px;
  border-radius: 999px; z-index: 80; pointer-events: none;
}

/* ========== Responsive ========== */
@media (max-width: 1023px) {
  :root { --panel-w: 288px; }
}
@media (max-width: 600px) {
  :root { --panel-w: min(300px, calc(100vw - var(--pop-left) - 8px)); }
  .tool-rail { border-radius: 18px; }
  .side-panel {
    top: calc(10px + var(--safe-t));
    bottom: calc(10px + var(--safe-b));
    transform: none; max-height: none;
  }
  .side-panel.is-open { transform: none; }
  .top-title { display: none; }
  #btnWorks { display: none; } /* 移入更多，节省空间 */
}

/* Brush list */
.brush-list { display: flex; flex-direction: column; }
.brush-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 4px;
  border: none; background: none; text-align: left;
  font-family: inherit; cursor: pointer;
  border-bottom: 1px solid var(--separator-soft);
  border-radius: 0;
  transition: background 120ms;
}
@media (hover: hover) {
.brush-item:hover { background: var(--bg-hover); }
}
.brush-item.on { background: var(--bg-selected); }
.brush-preview {
  width: 72px; height: 36px; border-radius: var(--r-sm);
  background: var(--bg-secondary); flex: 0 0 auto;
  display: block;
}
.brush-meta { flex: 1; min-width: 0; }
.brush-meta b { display: block; font-size: 14px; font-weight: 500; }
.brush-meta span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.brush-check { color: var(--accent); font-size: 14px; opacity: 0; }
.brush-item.on .brush-check { opacity: 1; }

/* Layers */
.layer-list { display: flex; flex-direction: column; }
.layer-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--separator-soft);
  border-radius: var(--r-ctrl);
  cursor: pointer;
  transition: background 120ms;
}
@media (hover: hover) {
.layer-item:hover { background: var(--bg-hover); }
}
.layer-item.active { background: var(--bg-selected); }
.layer-item.dragging { opacity: 0.45; }
.layer-item.drag-over { outline: 2px solid var(--accent, #3B82F6); outline-offset: -2px; }
.layer-thumb {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--bg-secondary);
  box-shadow: 0 0 0 1px var(--separator-soft);
  flex: 0 0 auto; object-fit: cover;
}
.layer-info { flex: 1; min-width: 0; }
.layer-info b {
  display: block; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-info span { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.layer-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.layer-icon-btn {
  width: 32px; height: 32px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-secondary);
  display: grid; place-items: center; cursor: pointer;
  font-size: 13px;
}
@media (hover: hover) {
.layer-icon-btn:hover { background: var(--bg-tertiary); }
}
.layer-icon-btn.on { color: var(--text-primary); }
.layer-icon-btn.off { opacity: 0.35; }

/* Palette */
.palette-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.palette-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-control); cursor: pointer; padding: 0;
}
.palette-dot:active { transform: scale(0.94); }
.palette-dot.just-picked {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent);
}

.pop-num {
  min-width: 28px; text-align: right;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.brush-cats {
  display: flex; gap: 6px; overflow-x: auto;
  margin-bottom: 10px; padding-bottom: 4px;
}
.brush-cat {
  flex: 0 0 auto; height: 32px; padding: 0 12px;
  border: none; border-radius: 999px;
  background: var(--bg-secondary); color: var(--text-primary);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.brush-cat.on { background: var(--text-primary); color: var(--bg-main); }
.shape-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
/* v17 · 已删除此处 .shape-btn：与文件末尾重复，现由末尾统一维护 */

.rail-param { flex-direction: column; gap: 0; padding: 4px 0; }

.param-pop .pop-title {
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
}
.color-inputs { margin-bottom: 12px; }
.ci-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ci-field span { font-size: 11px; color: var(--text-tertiary); }
.ci-field input {
  height: 36px; border: 1px solid var(--separator);
  border-radius: 8px; background: var(--bg-secondary);
  color: var(--ink); font-family: inherit; font-size: 14px;
  padding: 0 8px; outline: none; width: 100%;
  font-variant-numeric: tabular-nums;
}
.ci-row { display: flex; gap: 8px; }
.rail-expand {
  position: fixed;
  left: calc(8px + var(--safe-l));
  top: 50%; transform: translateY(-50%);
  width: 28px; height: 56px;
  border: none; border-radius: 0 12px 12px 0;
  background: var(--bg-main);
  border: 1px solid var(--border-panel);
  border-left: none;
  color: var(--text-secondary);
  display: grid; place-items: center;
  cursor: pointer; z-index: 31;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.rail-expand svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-expand[hidden] { display: none; }

.tool-rail {
  gap: 2px;
  max-height: calc(var(--app-height, 100vh) - 24px);
  overflow: hidden;
  transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}

.tool-rail.collapsed {
  transform: translateY(-50%) translateX(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
}
html[data-layout="phonePortrait"] .tool-rail,
html[data-layout="phoneLandscape"] .tool-rail { gap: 1px; padding: 4px 0; }

.param-pop {
  position: fixed;
  left: var(--pop-left);
  top: 50%; transform: translateY(-50%);
  width: 56px;
  background: var(--bg-main);
  border: 1px solid var(--separator);
  border-radius: var(--r-btn);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
  padding: 12px 6px;
  z-index: 36;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 160ms;
}
.param-pop.is-open { opacity: 1; pointer-events: auto; }
.param-pop[hidden] { display: none; }
.param-pop input[type=range] {
  writing-mode: vertical-lr; direction: rtl;
  width: 22px; height: 160px;
  accent-color: var(--ink);
}
.param-pop .pop-num { font-size: 12px; font-weight: 600; }

/* ===== Layout modes (Responsive Workspace) ===== */
/* v18 · 各布局只改几何变量，栏 / 弹层 / 侧栏 / 参数条自动对齐 */
html[data-layout="phonePortrait"] { --rail-left: calc(6px + var(--safe-l)); --rail-w: 56px; }
html[data-layout="tabletPortrait"] { --rail-w: 54px; }

/* Phone Landscape: horizontal top toolbar */
html[data-layout="phoneLandscape"] .tool-rail,
html[data-layout="tabletLandscape"] .tool-rail {
  position: fixed;
  top: calc(8px + var(--safe-t));
  left: calc(8px + var(--safe-l));
  right: calc(8px + var(--safe-r));
  width: auto;
  height: var(--rail-top-h);
  max-height: var(--rail-top-h);
  padding: 3px 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  transform: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  white-space: nowrap;
}
html[data-layout="phoneLandscape"] .tool-rail::-webkit-scrollbar,
html[data-layout="tabletLandscape"] .tool-rail::-webkit-scrollbar { display: none; }
html[data-layout="phoneLandscape"] .rail-btn,
html[data-layout="tabletLandscape"] .rail-btn {
  flex: 0 0 44px;
  width: 44px; height: 44px;
}

html[data-layout="phoneLandscape"] .tool-rail.collapsed,
html[data-layout="tabletLandscape"] .tool-rail.collapsed {
  transform: translateY(calc(-100% - 16px));
}
html[data-layout="phoneLandscape"] .rail-expand,
html[data-layout="tabletLandscape"] .rail-expand {
  top: calc(8px + var(--safe-t));
  transform: none;
  left: calc(8px + var(--safe-l));
  width: 28px; height: var(--rail-top-h);
}
html[data-layout="phoneLandscape"] .rail-param,
html[data-layout="tabletLandscape"] .rail-param {
  flex-direction: row; gap: 2px; padding: 0 4px;
}
html[data-layout="phoneLandscape"] .param-pop,
html[data-layout="tabletLandscape"] .param-pop {
  top: calc(60px + var(--safe-t));
  left: 50%; transform: translateX(-50%);
  width: min(340px, calc(100vw - 32px));
  height: 56px; padding: 8px 12px;
  flex-direction: row; gap: 10px;
}
html[data-layout="phoneLandscape"] .param-pop input[type=range],
html[data-layout="tabletLandscape"] .param-pop input[type=range] {
  writing-mode: horizontal-tb; direction: ltr;
  width: 200px; height: 22px;
}

.author-btn { padding: 0; }
.author-img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.author-profile {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.author-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
}
.author-profile b { font-size: 16px; font-weight: 600; display: block; }
.author-profile p { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }
.author-contact { margin: 0; font-size: 14px; color: var(--text-secondary); }
.qr-row { display: flex; gap: 12px; margin-top: 12px; }
.qr-card {
  margin: 0; flex: 1; text-align: center;
}
.qr-img {
  width: 100%; max-width: 200px; aspect-ratio: 1;
  object-fit: contain; border-radius: 12px;
  background: #fff; cursor: pointer;
  box-shadow: 0 0 0 1px var(--separator);
}
.qr-card figcaption {
  margin-top: 6px; font-size: 12px; color: var(--text-secondary);
}
.qr-zoom {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.72);
  display: grid; place-items: center;
  padding: 24px;
}
.qr-zoom[hidden] { display: none; }
.qr-zoom img {
  max-width: min(86vw, 420px); max-height: 80vh;
  border-radius: 12px; background: #fff;
}
.qr-zoom-close {
  position: absolute; top: calc(16px + var(--safe-t)); right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.9);
  font-size: 22px; color: #1D1D1F; cursor: pointer;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .side-panel, .sheet, .popover, .rail-btn, .tool-rail, .row, .switch .track,
  .switch .track::after, .tool-rail, .hint { transition: none !important; }
}

/* ============================================================
   v15 · Icon scale + tool rail hierarchy
   ============================================================ */
:root {
  --icon-rail: 24px;
  --icon-action: 22px;
  --icon-menu: 22px;
  --icon-chev: 17px;
  --icon-check: 17px;
  --icon-shape: 26px;
  --rail-sep: var(--separator);
  --rail-open-bar: var(--accent);
  --shadow-rail: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-primary: 0 2px 6px rgba(0,0,0,0.16);
}
@media (max-width: 600px) {
  :root { --icon-rail: 23px; --icon-menu: 21px; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-rail: 0 1px 2px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.45);
    --shadow-raised: 0 1px 3px rgba(0,0,0,0.55);
    --shadow-primary: 0 2px 8px rgba(0,0,0,0.6);
  }
}

.rail-btn svg       { width: var(--icon-rail);   height: var(--icon-rail);   display: block; }
.play-btn svg       { width: var(--icon-rail);   height: var(--icon-rail); }
.layer-icon-btn svg { width: var(--icon-action); height: var(--icon-action); display: block; }
.work-btn svg       { width: 18px;               height: 18px; }
.menu-item svg      { width: var(--icon-menu);   height: var(--icon-menu);   flex: 0 0 auto; color: var(--text-secondary); }
.feature-row > svg  { width: var(--icon-menu);   height: var(--icon-menu);   flex: 0 0 auto; color: var(--text-secondary); }
.row-chev svg       { width: var(--icon-chev);   height: var(--icon-chev);   display: block; }
.check svg          { width: var(--icon-check);  height: var(--icon-check);  display: block; }
.shape-btn svg      { width: var(--icon-shape);  height: var(--icon-shape);  display: block; }
.rail-expand svg    { width: 16px;               height: 16px; }

/* 触控目标 ≥44px */
.rail-btn { width: 46px; height: 46px; }
@media (max-width: 600px) { .rail-btn { width: 44px; height: 44px; } }
html[data-layout="phonePortrait"] .rail-btn,
html[data-layout="phoneLandscape"] .rail-btn { width: 44px; height: 44px; }
.tool-rail { max-height: calc(var(--app-height, 100vh) - 16px); box-shadow: var(--shadow-rail); }

.rail-sep {
  width: 22px; height: 0; margin: 5px auto;
  border: 0; border-top: 1px solid var(--rail-sep);
  flex: 0 0 auto;
}
html[data-layout="phoneLandscape"] .rail-sep,
html[data-layout="tabletLandscape"] .rail-sep {
  width: 0; height: 22px; margin: auto 5px;
  border-top: 0; border-left: 1px solid var(--rail-sep);
}

.rail-btn {
  position: relative;
  border: 1px solid transparent;
  /* v16 · opacity 并入 transition，配合 .tool-rail.dim 的逐按钮淡化 */
  transition: background 120ms, border-color 120ms, box-shadow 120ms, opacity 220ms ease;
}
@media (hover: hover) {
.rail-btn:hover  { background: var(--bg-hover); }
}
.rail-btn:active { background: var(--bg-press); transform: scale(0.96); }

.rail-btn[data-kind="panel"].on,
.rail-btn[data-kind="param"].on,
.rail-btn.panel-open { background: var(--bg-hover); }
.rail-btn[data-kind="panel"].on::before,
.rail-btn[data-kind="param"].on::before,
.rail-btn.panel-open::before {
  content: "";
  position: absolute; left: -7px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 2px;
  background: var(--rail-open-bar);
}
html[data-layout="phoneLandscape"] .rail-btn[data-kind="panel"].on::before,
html[data-layout="tabletLandscape"] .rail-btn[data-kind="panel"].on::before,
html[data-layout="phoneLandscape"] .rail-btn.panel-open::before,
html[data-layout="tabletLandscape"] .rail-btn.panel-open::before {
  left: 50%; top: -5px; transform: translateX(-50%);
  width: 20px; height: 3px;
}

/* v16 · L3 工具选中。追加 .on.panel-open 变体，使「工具选中」与「面板打开」
   两种状态可以叠加显示，而不是 v15 那样被更高特异性互相吃掉。 */
.rail-btn[data-kind="tool"].on,
.rail-btn[data-kind="tool"].on.panel-open {
  background: var(--bg-selected);
  border-color: var(--border-control);
  box-shadow: var(--shadow-raised);
  color: var(--text-primary);
}
.rail-btn[data-kind="tool"].on svg { transform: scale(1.06); }
.rail-btn[data-kind="tool"],
.rail-btn[data-kind="panel"],
.rail-btn[data-kind="action"] { color: var(--text-secondary); }
.rail-btn[data-kind="panel"].on { color: var(--text-primary); }

.play-btn {
  background: var(--text-primary) !important;
  color: var(--bg-main) !important;
  border-radius: 14px;
  box-shadow: var(--shadow-primary);
  border-color: transparent !important;
}
.play-btn.playing {
  background: var(--accent) !important;
  color: #FFFFFF !important;
}

.rail-btn:disabled {
  opacity: 1;
  color: var(--text-tertiary);
  background: transparent;
  pointer-events: none;
}
.rail-btn:disabled svg { opacity: 0.32; }

.color-well {
  width: 28px; height: 28px;
  border: 1.5px solid var(--border-control);
  box-shadow: inset 0 0 0 2px var(--bg-main);
}
.orb { width: 20px; height: 20px; }

.rail-param { flex-direction: column; gap: 1px; padding: 3px 0; }

.rail-param svg { width: 18px; height: 18px; }

.layer-icon-btn svg { width: 18px; height: 18px; display: block; }
.shape-btn {
  height: 58px; border: none; border-radius: var(--r-ctrl);
  background: var(--bg-secondary); color: var(--text-primary);
  font-family: inherit; font-size: 11px; font-weight: 500;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.shape-btn-wide { height: 44px; font-size: 12px; }
.menu-item { display: flex; align-items: center; gap: 12px; }
.feature-row { gap: 12px; }
.feature-row > div { flex: 1; min-width: 0; }
.play-btn .icon-pause { display: none; }
.play-btn.playing .icon-play { display: none; }
.play-btn.playing .icon-pause { display: block; }
.work-btn { display: inline-flex; align-items: center; gap: 6px; }
body.importing #toolRail,
body.importing .side-panel { pointer-events: none; opacity: 0.6; }

/* v17 · brush / eraser UI */
.brush-item.on {
  background: var(--bg-selected);
  box-shadow: inset 3px 0 0 var(--accent, #E85D4C);
}
.brush-item.on .brush-meta b { font-weight: 650; }
.brush-check {
  color: var(--accent, #E85D4C); font-size: 15px; font-weight: 700;
  opacity: 0; transform: scale(0.6);
  transition: opacity 140ms, transform 140ms;
}
.brush-item.on .brush-check { opacity: 1; transform: none; }
.brush-item { min-height: 60px; position: relative; }
.eraser-preview {
  width: 100%; height: 56px; display: block;
  border-radius: 8px;
  background-color: var(--bg-secondary);
  background-image:
    linear-gradient(45deg, rgba(128,128,132,.16) 25%, transparent 25% 75%, rgba(128,128,132,.16) 75%),
    linear-gradient(45deg, rgba(128,128,132,.16) 25%, transparent 25% 75%, rgba(128,128,132,.16) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  box-shadow: inset 0 0 0 1px var(--separator-soft);
}
#eraserRealSize { margin: 6px 0 14px; text-align: center; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.shape-btn.on {
  background: var(--bg-selected);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--accent, #E85D4C);
}

/* ============================================================
   v18 · 横屏（手机/平板）：弹层与侧栏放到顶栏下方，限高可滚动
   v17 横屏弹层仍按竖屏的 top:50% 居中 → 压住顶栏；手机横屏还会超出底边
   ============================================================ */
html[data-layout="phoneLandscape"] .popover,
html[data-layout="tabletLandscape"] .popover {
  top: calc(var(--safe-t) + 8px + var(--rail-top-h) + 8px);
  left: calc(8px + var(--safe-l));
  transform: none;
  max-width: calc(100vw - 16px - var(--safe-l) - var(--safe-r));
  max-height: calc(var(--app-height, 100vh) - var(--safe-t) - var(--rail-top-h) - 24px - var(--safe-b));
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-layout="phoneLandscape"] .side-panel,
html[data-layout="tabletLandscape"] .side-panel,
html[data-layout="phoneLandscape"] .side-panel.is-open,
html[data-layout="tabletLandscape"] .side-panel.is-open {
  top: calc(var(--safe-t) + 8px + var(--rail-top-h) + 8px);
  left: calc(8px + var(--safe-l));
  transform: none;
  max-height: calc(var(--app-height, 100vh) - var(--safe-t) - var(--rail-top-h) - 24px - var(--safe-b));
}
html[data-layout="phoneLandscape"] .top-title { display: none; }

/* v18 · 布局切换（转屏）的两帧内禁用过渡：工具栏不再从旧位置 180ms 滑到新位置 */
html.layout-switching *,
html.layout-switching *::before,
html.layout-switching *::after { transition: none !important; }

/* ============================================================
   v18 · 分段控件 .seg-group（v17 HTML 用了 3 处但样式表里不存在；
   .seg-item.on 是白底压白色弹层 → 选中态不可见）
   ============================================================ */
:root { --seg-track: #E9E9EE; --seg-thumb: #FFFFFF; --seg-thumb-text: var(--text-primary); }
@media (prefers-color-scheme: dark) {
  :root { --seg-track: #2C2C2E; --seg-thumb: #636366; --seg-thumb-text: #FFFFFF; }
}
.seg-group {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; padding: 2px; margin: 0 0 14px;
  background: var(--seg-track);
  border-radius: 9px;
}
.seg-group .seg-item {
  height: 32px; padding: 0 8px; border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
}
.seg-group .seg-item.on {
  background: var(--seg-thumb);
  color: var(--seg-thumb-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.seg-group .seg-item:focus-visible { outline-offset: -2px; }

/* v18 · 橡皮面板 */
.eraser-pop { width: 264px; }
.pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pop-head .pop-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.pop-summary { font-size: 12px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.popover .sec-label { margin: 0 0 6px; font-weight: 600; }
.size-label { flex: 0 0 40px; font-size: 12px; color: var(--text-secondary); }
.size-line.is-disabled { opacity: 0.45; }
.size-line.is-disabled input[type=range] { pointer-events: none; }