/* 介面樣式。桌面版以單屏剪輯工具為主，避免主要控制區捲動。 */
:root {
  --bg: #050506;
  --panel: #0d0d0f;
  --panel-2: #151518;
  --sunken: #0a0a0c;          /* 凹陷面：分頁列、進度條軌、樣式格、片段列、收合面板底 */
  --ink: #f2ecec;
  --muted: #85878d;
  --line: #ffffff17;
  --accent: #ff6674;          /* 主色：珊瑚粉紅 */
  --accent-2: #ff8a94;        /* 主色亮版：標題、數值、滑桿把手 */
  --accent-ink: #2a0c10;      /* 主色按鈕上的深色文字／描邊 */
  --accent-soft: #33171b;     /* 主色淡底：hover／active 填色 */
  --accent-glow: #ff667466;   /* 主色光暈：滑桿、可視化 */
  --warn: #e0b85a;
  --rail: 34px;
  --left-panel: 318px;
  --right-panel: 360px;
  --chrome-gap: 12px;
  --top-dock-height: 72px;
  --stage-actions-height: 38px;
  --stage-height-reserve: calc(28px + var(--top-dock-height) + var(--chrome-gap) + 8px + var(--stage-actions-height) + 10px + 40px);
  /* 預覽框的比例，跟著「畫面比例」切換（見 web/frame.js）。
     --stage-aspect 給 aspect-ratio 用，--stage-aspect-num 是同一個值的純數字版，
     算「這麼高的話能有多寬」時要用它。 */
  --stage-aspect: 16 / 9;
  --stage-aspect-num: 1.7778;
  /* 預覽框自己的寬度。工具列不吃這個值——直式時預覽只有兩百多 px 寬，
     上面那條放不下出片按鈕和元件標籤，所以它們改吃整個舞台欄的寬度。 */
  --preview-width: min(100%, calc((100vh - var(--stage-height-reserve)) * var(--stage-aspect-num)));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(720px 440px at 48% -16%, #2d151833 0%, transparent 62%),
    var(--bg);
  color: var(--ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

button, input, select {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  --left-panel-current: var(--left-panel);
  --right-panel-current: var(--right-panel);
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: var(--rail) var(--left-panel-current) minmax(520px, 1fr) var(--right-panel-current) var(--rail);
  grid-template-rows: var(--top-dock-height) minmax(0, 1fr);
  grid-template-areas:
    "header header header header header"
    "rail layers stage visual vrail";
  gap: var(--chrome-gap);
  padding: 14px;
  transition: grid-template-columns .22s cubic-bezier(.2, .8, .2, 1);
}

.app-shell.is-left-collapsed {
  --left-panel-current: 0px;
}

.app-shell.is-right-collapsed {
  --right-panel-current: 0px;
}

.stage {
  grid-area: stage;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
}

/* 預覽 + 播放列：上下排。整組佔滿舞台欄，預覽與播放列自己再收到 --preview-width
   並置中——上方的工具列才有整欄可用，不會被直式那個窄預覽框綁死。 */
.stage-wrap {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-height: 100%;
}

.app-header {
  grid-area: header;
  position: relative;
  isolation: isolate;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  overflow: hidden;
  padding: 0 12px;
  border: 1px solid #ffffff0e;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #0b090b 0%, #070708 48%, #0b090b 100%),
    var(--bg);
  box-shadow:
    inset 0 -1px 0 #ffffff0a,
    0 12px 36px #00000026;
}

.top-dock-brand,
.top-dock-content {
  min-width: 0;
  display: flex;
  align-items: center;
}

.top-dock-brand {
  flex: 0 1 auto;
}

.top-dock-content {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 10px;
}

.app-header h1 {
  margin: 0;
  width: fit-content;
  color: #ffd7a6;
  font-weight: 650;
  letter-spacing: 0;
  font-size: 22px;
  line-height: 1;
  background: linear-gradient(92deg, #ffe0ad 0%, #ff8a94 48%, #f5ecff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px #ff667455, 0 0 34px #ffd08a22;
}

.app-header h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, #ffd08a00, #ffd08a, #ff667400);
  opacity: .72;
}

.app-header h1 .ver {
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 1px;
}

.header-shortcut {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  white-space: nowrap;
  border: 1px solid #ff66743a;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #2b1519 0%, #151518 58%, #0d0d0f 100%) padding-box,
    linear-gradient(135deg, #ff667466, #ffffff12) border-box;
  box-shadow:
    inset 0 1px 0 #ffffff12,
    0 8px 22px #00000026;
}

.header-shortcut:hover,
.header-shortcut:focus-visible {
  color: #ffd5d9;
  border-color: var(--accent);
  background:
    linear-gradient(135deg, #3a171d 0%, #1c171a 58%, #101114 100%) padding-box,
    linear-gradient(135deg, #ff667488, #ffffff1f) border-box;
  outline: none;
  box-shadow:
    inset 0 1px 0 #ffffff18,
    0 0 0 3px #ff66741f,
    0 8px 24px #00000030;
}

.header-shortcut svg {
  flex: 0 0 auto;
}

.header-shortcut.youtube-link {
  color: #ffeded;
  border-color: #ff3d3d4f;
  background:
    linear-gradient(135deg, #2c1214 0%, #171315 58%, #0d0d0f 100%) padding-box,
    linear-gradient(135deg, #ff333388, #ffffff12) border-box;
}

.header-shortcut.youtube-link:hover,
.header-shortcut.youtube-link:focus-visible {
  color: #fff;
  border-color: #ff4a4a;
  background:
    linear-gradient(135deg, #3a1216 0%, #201517 58%, #111114 100%) padding-box,
    linear-gradient(135deg, #ff3333cc, #ff8a9466) border-box;
  box-shadow:
    inset 0 1px 0 #ffffff1f,
    0 0 0 3px #ff333322,
    0 8px 24px #00000030;
}

.header-shortcut.support-link {
  color: #ffe7c6;
  border-color: #e0b85a55;
  background:
    linear-gradient(135deg, #2d2113 0%, #171514 58%, #0d0d0f 100%) padding-box,
    linear-gradient(135deg, #e0b85a88, #ff667433) border-box;
}

.header-shortcut.support-link:hover,
.header-shortcut.support-link:focus-visible {
  color: #fff1d6;
  border-color: var(--warn);
  background:
    linear-gradient(135deg, #3b2915 0%, #201815 58%, #111114 100%) padding-box,
    linear-gradient(135deg, #e0b85acc, #ff8a9466) border-box;
  box-shadow:
    inset 0 1px 0 #ffffff1f,
    0 0 0 3px #e0b85a22,
    0 8px 24px #00000030;
}

/* 頂列的「更新公告」按鈕：有沒看過的新版本時右上角亮一顆小紅點 */
button.header-shortcut {
  position: relative;
  cursor: pointer;
}

.header-shortcut.whatsnew-link.has-news::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--accent-glow);
}

.hint {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

main {
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: var(--preview-width);
  margin-inline: auto;
  aspect-ratio: var(--stage-aspect);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(700px 360px at 72% 12%, #33181c2e 0%, #05050600 60%),
    #050506;
  box-shadow: 0 20px 60px #000a, inset 0 0 0 1px #ffffff0d;
}

/* 畫面特效層：背景+可視化+文字一起被變形/模糊；從中心縮放，超出的部分被 main 的 overflow 裁掉 */
/* isolation：舞台特效限制在舞台內；main 的 isolation 則避免最上層 Logo 的融合穿透到頁面底色 */
#stage-fx { position: absolute; inset: 0; z-index: 0; transform-origin: center center; will-change: transform, filter; isolation: isolate; }

#tile-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#tile-fx[hidden] { display: none; }

.bg-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  opacity: 1;
  transition: opacity .8s ease;
  overflow: hidden;
  pointer-events: none;
}
.bg-slot.on { display: block; }
.bg-slot:not(.is-visible) { opacity: 0; }
.bg-slot.is-visible { opacity: 1; }
.bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.bg-media.on { display: block; }

/* 素材填滿方式（由 background.js 依素材與媒體框的比例決定，出片走同一套判斷）：
   is-contain  完整顯示——整張塞進框裡，空的地方留黑
   is-blurfill 模糊填滿——同一張素材放大模糊當底，蓋掉那圈黑邊 */
.bg-slot.is-contain { background: #000; }
.bg-slot.is-contain .bg-media { object-fit: contain; }
.bg-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.bg-slot.is-blurfill .bg-blur { display: block; }
#introvideo, #outrovideo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: 0; }

/* Logo 是成品畫面的最上層；編輯框仍保留在它上方，方便拖曳調整。 */
#logolayer { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }

/* 可視化方框：預設滿框，編輯模式會用 inline 樣式改 left/top/width/height（%） */
#viz { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; }
#viz.is-hidden { opacity: 0; pointer-events: none; }

#particle-viz,
#inverted-bars-viz,
#neon-player-viz,
#sequin-viz,
#kinetic-viz {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #ffffff55) drop-shadow(0 0 12px #ffffff22);
}

#particle-viz[hidden] { display: none; }
#inverted-bars-viz[hidden] { display: none; }

/* 霓虹播放器的光暈是自己畫進畫布裡的（出片才會有），
   這裡不能再加 CSS 光暈，否則預覽會比成品亮一層。 */
#neon-player-viz { filter: none; }
#neon-player-viz[hidden] { display: none; }

#sequin-viz {
  filter: drop-shadow(0 0 6px #ffd58a55) drop-shadow(0 0 16px #a8744333);
}

#sequin-viz[hidden] { display: none; }

#kinetic-viz {
  filter: drop-shadow(0 0 5px #e67e2844) drop-shadow(0 0 14px #ffdc9622);
}

#kinetic-viz[hidden] { display: none; }

/* 文字 overlay：透明層，蓋在可視化上面；不吃滑鼠事件 */
#overlay { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

/* 編輯模式的拖拉層：平時隱藏，開啟時才浮在最上面 */
#editlayer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#editlayer[hidden] { display: none; }

.edit-guide {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: var(--accent-2);
  box-shadow: 0 0 0 1px #120d10aa, 0 0 8px #ff667499;
}

.edit-guide[hidden] { display: none; }

.edit-guide-x {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-.5px);
}

.edit-guide-y {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-.5px);
}

/* 編輯版面按鈕：浮在預覽畫面右上角（出片時錄的是另一張 canvas，不會被錄進去） */
.stage-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  gap: 8px;
  align-items: center;
}

.lh {
  position: absolute;
  border: 1.5px dashed var(--accent-2);
  border-radius: 4px;
  background: #ff66741f;
  pointer-events: auto;
  cursor: move;
  box-sizing: border-box;
}

.lh:hover { background: #ff667430; }

.lh-head {
  position: absolute;
  top: -9px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.lh-label {
  padding: 1px 6px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  border-radius: 4px;
  pointer-events: none;
}

.lh[data-name="viz"] .lh-label {
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右下角縮放把手 */
.lh-grip {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--accent-2);
  border: 1.5px solid var(--accent-ink);
  cursor: nwse-resize;
}

.stage-action-row {
  min-height: var(--stage-actions-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 元件標籤的底端藏在預覽框後方，開啟編輯時逐一往上長出來。
   置中對齊預覽框；八個標籤加起來比直式的預覽框寬一點，左右各露出一小截，
   落在直式時本來就空著的兩側留白裡。 */
.edit-component-picker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 4px;
  max-width: 100%;
  height: 54px;
  pointer-events: none;
}

.lh-reset {
  width: 16px;
  min-width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #ffb2ba88;
  border-radius: 4px;
  background: #241519e8;
  color: #ffc3c9;
  font: 700 11px/1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 4px #0008;
}

.lh-reset:hover,
.lh-reset:focus-visible {
  border-color: #fff;
  background: var(--accent);
  color: var(--accent-ink);
  outline: none;
}

.edit-component-picker[hidden] {
  display: none;
}

.edit-component-tab {
  --tab-index: 0;
  --tab-reverse-index: 7;
  flex: 0 0 36px;
  width: 36px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 4px 0;
  border: 1px solid #ffffff22;
  border-bottom-color: #ff667455;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #1c1b1f 0%, #101013 100%);
  color: var(--muted);
  box-shadow: inset 0 1px 0 #ffffff0d, 0 8px 20px #0008;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: translateY(48px) scaleY(.12);
  transform-origin: bottom center;
  transition:
    transform .3s cubic-bezier(.18, .82, .24, 1.08),
    opacity .2s ease;
  will-change: transform, opacity;
}

.edit-component-picker.is-opening .edit-component-tab,
.edit-component-picker.is-open .edit-component-tab {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.edit-component-picker.is-opening .edit-component-tab {
  transition-delay: calc(var(--tab-index) * 28ms);
}

.edit-component-picker.is-closing .edit-component-tab {
  transition-duration: .24s, .16s;
  transition-delay: calc(var(--tab-reverse-index) * 24ms);
}

.edit-component-picker.is-open {
  pointer-events: auto;
}

.edit-component-picker.is-open .edit-component-tab:hover:not(:disabled),
.edit-component-picker.is-open .edit-component-tab:focus-visible {
  border-color: #ff667499;
  color: var(--ink);
  background: linear-gradient(180deg, #2c2024 0%, #171317 100%);
  outline: none;
  box-shadow: inset 0 1px 0 #ffffff16, 0 0 0 3px #ff667422, 0 8px 22px #0009;
}

.edit-component-picker.is-open .edit-component-tab {
  pointer-events: auto;
}

.edit-component-picker.is-open .edit-component-tab.is-active {
  border-color: var(--accent);
  background: linear-gradient(180deg, #ff7885 0%, #f04f61 100%);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 #ffffff4a, 0 0 16px #ff667455, 0 8px 22px #0009;
}

.edit-component-picker.is-open .edit-component-tab:disabled {
  opacity: .32;
  cursor: not-allowed;
  filter: saturate(.35);
}

.edit-component-tab:nth-child(1) { --tab-index: 0; --tab-reverse-index: 7; }
.edit-component-tab:nth-child(2) { --tab-index: 1; --tab-reverse-index: 6; }
.edit-component-tab:nth-child(3) { --tab-index: 2; --tab-reverse-index: 5; }
.edit-component-tab:nth-child(4) { --tab-index: 3; --tab-reverse-index: 4; }
.edit-component-tab:nth-child(5) { --tab-index: 4; --tab-reverse-index: 3; }
.edit-component-tab:nth-child(6) { --tab-index: 5; --tab-reverse-index: 2; }
.edit-component-tab:nth-child(7) { --tab-index: 6; --tab-reverse-index: 1; }
.edit-component-tab:nth-child(8) { --tab-index: 7; --tab-reverse-index: 0; }

.edit-actions {
  position: relative;
  z-index: 7;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

/* 工具列分兩組：左邊是跟出片無關的工具，右邊是「幀率 → 兩顆出片按鈕 → 停止」。
   一條細線把兩組隔開，眼睛才不會把靜音也讀成出片流程的一部分。 */
.action-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.action-group + .action-group {
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

/* 工具列擠不下時，按鈕要保持原本大小，不要被壓扁——「背景出片」四個字一換行，
   整條工具列就會從 38px 撐到 82px，把預覽往下推。 */
.action-group-export {
  white-space: nowrap;
}

.action-group-export > * {
  flex: 0 0 auto;
}

/* 排版和出片是互斥的兩件事，所以編輯版面時整組收起來，上面那條全部讓給元件標籤；
   不這麼做的話，兩組並排要 663px，但舞台欄最窄只有 520px，一定會疊在一起。
   出片進行中例外——停止鍵就在這組裡，收起來就沒得按了。 */
.stage-wrap.is-editing .action-group-export:not(:has(#export-stop:not([hidden]))) {
  display: none;
}

#edittoggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-2);
}

@media (prefers-reduced-motion: reduce) {
  .edit-component-tab {
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}

#dropzone {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s;
}

#dropzone.hidden,
#dropzone.editing-hidden { display: none; }
#dropzone.dragover { background: #ff66741a; }

#audio {
  width: var(--preview-width);
  margin-inline: auto;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

/* 播放器內建的靜音／音量藏起來，全站只留工具列那顆喇叭。
   內建那顆是把音訊元素本身關掉，而頻譜分析接在元素後面——一按下去分析就收到
   一片安靜，可視化會整個停擺（連帶錄到的畫面也是死的）。工具列那顆改的是
   「分析之後、送到喇叭之前」的音量，才是使用者真正想要的那種靜音。 */
#audio::-webkit-media-controls-mute-button,
#audio::-webkit-media-controls-volume-slider,
#audio::-webkit-media-controls-volume-control-container {
  display: none;
}

.panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  background: var(--panel);
  border: 1px solid #ffffff12;
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 0 0 1px #0005;
  overflow: hidden;
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2, .8, .2, 1),
    padding .22s cubic-bezier(.2, .8, .2, 1),
    border-color .18s ease;
}

.layer-panel {
  grid-area: layers;
  grid-template-rows: minmax(0, 1fr);
  /* 往左貼齊 rail，消掉中間的間隙，讓 active 分頁能跟面板無縫接合 */
  margin-left: calc(-1 * var(--chrome-gap));
}

.visual-panel {
  grid-area: visual;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* 往右貼齊 visual-rail，消掉中間間隙，讓 active 分頁跟面板無縫接合（左側鏡像） */
  margin-right: calc(-1 * var(--chrome-gap));
}

/* 右側分頁列：左側 tool-rail 的水平鏡像 —— 圓角在右、珊瑚脊在右、往左疊住面板接縫 */
/* 用 .tool-rail.visual-rail 提高特異度，否則會被後面的 .tool-rail{grid-area:rail} 蓋掉 */
.tool-rail.visual-rail {
  grid-area: vrail;
}

.visual-rail .rail-item {
  border-left: 0;
  border-right: 1px solid transparent;
  border-radius: 0 9px 9px 0;
}

.visual-rail .rail-item.active {
  margin-right: 0;
  margin-left: -1px;
  box-shadow: inset -2px 0 0 var(--accent);
}

.visual-panel .tab-content {
  flex: 1;
  min-height: 0;
}

.app-shell.is-left-collapsed .layer-panel {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-18px);
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
}

.app-shell.is-right-collapsed .visual-panel {
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
}

.tool-rail {
  grid-area: rail;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  /* 上緣讓開面板的圓角，active 分頁才接得到面板的直邊 */
  padding: 14px 0 2px;
  position: relative;
  z-index: 1;
}

.rail-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 0;
  border: 1px solid transparent;
  border-right: 0;
  border-radius: 9px 0 0 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

/* 拿掉小圖示：純文字分頁更精簡、也更省空間 */
.rail-item svg { display: none; }

/* 文字直排：整欄收窄、字往下排，沿用草圖的直式分頁 */
.rail-item span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 13px;
  letter-spacing: 3px;
  line-height: 1;
}

.rail-item:hover {
  color: var(--ink);
}

/* active 分頁：與右側面板同底色、同描邊，往右疊住 1px 接縫，左緣一道珊瑚色脊
   → 視覺上像是面板往左長出來的一片，而非獨立的浮動按鈕 */
.rail-item.active {
  z-index: 2;
  width: calc(100% + 1px);  /* 多 1px 疊過面板左邊框，接縫完全消失 */
  color: var(--ink);
  background: var(--panel);
  border-color: #ffffff12;
  box-shadow: inset 2px 0 0 var(--accent);
}

.rail-collapse {
  order: -1;
  width: 100%;
  min-height: 30px;
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid #ffffff14;
  border-right: 0;
  border-radius: 9px 0 0 9px;
  background: #0a0a0c;
  cursor: pointer;
}

.visual-rail .rail-collapse {
  border-left: 0;
  border-right: 1px solid #ffffff14;
  border-radius: 0 9px 9px 0;
}

.rail-collapse:hover,
.rail-collapse:focus-visible {
  color: var(--accent-2);
  border-color: #ff667455;
  background: var(--accent-soft);
  outline: none;
}

.rail-collapse svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.app-shell.is-left-collapsed .rail-collapse[data-collapse-side="left"] svg,
.app-shell.is-right-collapsed .rail-collapse[data-collapse-side="right"] svg {
  transform: rotate(180deg);
}

.ghost-action {
  opacity: .45;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 78px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sunken);
}

.tab {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.tab.active {
  background: var(--accent-soft);
  color: var(--ink);
}

#export {
  min-height: 38px;
  min-width: 70px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#export:hover { filter: brightness(1.08); }
#export:disabled { opacity: .55; cursor: progress; }

/* 快速出片：離線逐幀算圖。做成次要（外框）按鈕，跟主要的「出片」區隔 */
#export-fast {
  min-height: 38px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
#export-fast:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
#export-fast:disabled { opacity: .55; cursor: progress; }

/* 出片幀率：跟旁邊的圖示按鈕／出片按鈕同一套深色＋主色語彙，而不是瀏覽器原生的白底下拉。
   自訂 chevron 的做法跟 .style-select 一致，只是縮小成工具列裡的緊湊尺寸。 */
#export-fps {
  min-height: 38px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel-2);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2385878d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  color: var(--ink);
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  padding: 0 26px 0 10px;
  font-size: 13px;
  cursor: pointer;
}

#export-fps:hover {
  border-color: var(--accent);
}

#export-fps:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

#export-fps option {
  background: var(--panel-2);
  color: var(--ink);
}

/* 出片進度／訊息：閒置時完全收起（不佔右側面板頂端的空間），出片時才出現 */
.export-status {
  flex-shrink: 0;
}

.export-status:not(.is-active) {
  display: none;
}

.export-status.is-active {
  margin-bottom: 12px;
}

.progress {
  height: 6px;
  background: var(--sunken);
  border-radius: 99px;
  overflow: hidden;
}

#exfill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .2s;
}

/* 齒輪鈕：開啟「設定檔」彈出視窗 */
.iconbtn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  cursor: pointer;
}

.iconbtn:hover {
  color: var(--accent-2);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.iconbtn svg { display: block; }

#export-stop[hidden] { display: none; }

#export-stop {
  color: #ffc0b0;
  border-color: #ff776666;
  background: #3b1717;
}

#export-stop:hover {
  color: #ffe0d8;
  border-color: #ff8a78;
  background: #511d1d;
}

#export-stop:disabled {
  opacity: .55;
  cursor: progress;
}


#record-mute[aria-pressed="false"] .sound-off,
#record-mute[aria-pressed="true"] .sound-on {
  display: none;
}

#record-mute[aria-pressed="true"] {
  color: #f0b48a;
  border-color: #e0905a66;
  background: #3a1f13;
}

#record-mute[aria-pressed="true"]:hover {
  color: #ffd0b0;
  border-color: #e0905a;
}

/* 設定檔彈出視窗 */
.settings-dialog {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 60px #000000a8;
}

.settings-dialog::backdrop {
  background: #02050699;
  backdrop-filter: blur(2px);
}

.settings-dialog .dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-dialog h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
}

.dialog-x {
  width: 30px;
  height: 30px;
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}

.dialog-x:hover { color: var(--ink); border-color: var(--accent); }

.dialog-desc {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.dialog-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.dialog-row label {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
}

.settings-dialog #pf-select {
  min-height: 36px;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
}

.dialog-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.dialog-actions .filebtn,
.dialog-actions .linkbtn {
  min-height: 36px;
}

.dialog-actions #pf-apply { flex: 1; }
.dialog-actions #pf-save { flex: 1; }

.dialog-io {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.dialog-io-label {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
  margin-right: auto;
}

.settings-dialog button:disabled,
.settings-dialog label.linkbtn[aria-disabled='true'] {
  opacity: .4;
  cursor: not-allowed;
}

.settings-dialog button:disabled:hover {
  border-color: #ffffff1f;
  background: var(--panel-2);
  color: var(--ink);
}

/* 更新公告視窗（內容寫在 web/releaseNotes.js） */
.whatsnew-dialog {
  width: min(480px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 60px #000000a8;
}

.whatsnew-dialog::backdrop {
  background: #02050699;
  backdrop-filter: blur(2px);
}

.whatsnew-dialog .dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.whatsnew-dialog h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
}

.whatsnew-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  max-height: min(54vh, 430px);
  overflow-y: auto;
  padding-right: 4px;
}

.whatsnew-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sunken);
  padding: 12px 14px;
}

.whatsnew-item.is-latest {
  border-color: #ff667455;
  background: linear-gradient(135deg, #1a1013 0%, var(--sunken) 60%);
}

.whatsnew-item-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.whatsnew-ver {
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}

.whatsnew-date {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .5px;
}

.whatsnew-badge {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid #ff667455;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 10px;
  letter-spacing: 1px;
}

.whatsnew-title {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.whatsnew-points {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.whatsnew-points li + li { margin-top: 4px; }

.whatsnew-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.whatsnew-actions .linkbtn,
.whatsnew-actions .filebtn {
  min-height: 36px;
}

/* 確認小視窗（防誤觸：重設版面 / 恢復造型預設…） */
.confirm-dialog {
  width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 60px #000000a8;
}

.confirm-dialog::backdrop {
  background: #02050699;
  backdrop-filter: blur(2px);
}

.confirm-dialog h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
}

.confirm-dialog #confirm-msg {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirm-actions .linkbtn,
.confirm-actions .filebtn {
  min-height: 36px;
  padding: 0 16px;
}

/* 自訂字型：清楚標示檔案只存在目前瀏覽器，並在載入前要求授權確認 */
.font-local-note {
  margin: 0 10px 2px 42px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.font-local-note a,
.font-license-links a {
  color: #ffc2c8;
  text-underline-offset: 2px;
}

.font-local-note a:hover,
.font-license-links a:hover {
  color: #fff;
}

.font-license-dialog {
  width: min(560px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 60px #000000a8;
}

.font-license-dialog::backdrop {
  background: #02050699;
  backdrop-filter: blur(2px);
}

.font-license-dialog .dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.font-license-dialog h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
}

.font-license-filename {
  margin: -6px 0 14px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #ffffff0a;
  color: #d7d1d1;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.font-license-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  background: #09090b;
  color: #d7d1d1;
  font-size: 13px;
  line-height: 1.7;
  cursor: pointer;
}

.font-license-check:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #ff66741f;
}

.font-license-check input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.font-license-links {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.font-license-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.font-license-actions .linkbtn,
.font-license-actions .filebtn {
  min-height: 36px;
  padding: 0 16px;
}

.font-license-actions .filebtn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* 系統字型：素材分頁裡「瀏覽 / 手動輸入字型名稱」那一列 */
.sysfont-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 10px 0 42px;
}

.sysfont-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #09090b;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.sysfont-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #ff66741f;
}

.sysfont-row .linkbtn { flex: 0 0 auto; white-space: nowrap; }

.sysfont-msg {
  margin: 6px 10px 0 42px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.sysfont-msg.is-error { color: #ffb0b6; }

/* 系統字型挑選視窗 */
.sysfont-search {
  width: 100%;
  min-height: 34px;
  margin: 0 0 10px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #09090b;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.sysfont-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #ff66741f;
}

.sysfont-list {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  background: #09090b;
}

.sysfont-list label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid #ffffff0f;
  color: #d7d1d1;
  cursor: pointer;
}

.sysfont-list label:last-child { border-bottom: 0; }
.sysfont-list label:hover { background: #ffffff0a; }

.sysfont-list input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* 每個字型用它自己的樣子顯示，方便直接看出是哪一款 */
.sysfont-list .sysfont-sample {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sysfont-empty {
  padding: 18px 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.filebtn.danger {
  border-color: #e0905a4d;
  color: #f0b48a;
}

.filebtn.danger:hover {
  border-color: #e0905a;
  background: #3a1f13;
  color: #ffd0b0;
}

.exmsg {
  min-height: 16px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.tab-content {
  min-height: 0;
  overflow: hidden;
}

.tab-content.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 12px; /* 數值不要貼著右邊，留點呼吸空間 */
  scrollbar-width: thin;
  scrollbar-color: #ffffff1f transparent;
}

/* 細一點、配色一致的捲軸（取代瀏覽器預設的醜捲軸） */
.tab-content.active::-webkit-scrollbar {
  width: 8px;
}
.tab-content.active::-webkit-scrollbar-track {
  background: transparent;
}
.tab-content.active::-webkit-scrollbar-thumb {
  background: #ffffff1f;
  border-radius: 99px;
}
.tab-content.active::-webkit-scrollbar-thumb:hover {
  background: #ffffff33;
}

.group {
  min-height: 0;
  flex-shrink: 0; /* 不讓 group 被 flex 壓縮，讓容器去 scroll */
}

.group h2 {
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent-2);
}

/* 面板內的次分區（樣式參數 / 顏色）：靠 .list-section 小標 + 細線分段，
   跟左側面板同一套語言（不再用大 h2 或邊框） */
.panel-section {
  margin-top: 6px;
}

.style-picker-section {
  margin-top: 0;
}

.style-picker-section .style-select {
  margin-top: 8px;
}

.collapsible-extra {
  /* 在可捲動的 flex 面板內保留完整內容高度；否則 flex 會先把這塊
     壓矮，再被 overflow:hidden 裁掉，看起來就像參數跑出畫面。 */
  flex-shrink: 0;
  max-height: var(--extra-height, 0px);
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height .24s cubic-bezier(.2, .8, .2, 1),
    opacity .18s ease,
    transform .24s cubic-bezier(.2, .8, .2, 1);
}

.collapsible-extra.is-collapsed {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

/* 素材模式切換：「分開素材」＝音樂+底景各自上傳；「已有成片」＝一支已經做好
   背景與音樂的影片，這時音樂／片頭／片尾整組收起來（成片裡本來就有了）。 */
.asset-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sunken);
}

.asset-mode-opt {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.asset-mode-opt:hover {
  color: var(--ink);
}

.asset-mode-opt.is-on {
  background: var(--accent-soft);
  color: var(--ink);
}

.asset-mode-note {
  margin: 6px 2px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* 畫面比例／素材填滿：擺在素材清單上面，跟下面的清單用一條細線分開 */
.frame-group {
  margin: 0 2px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ffffff14;
}

.frame-group .hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

/* 兩種模式只顯示自己那一組列 */
#asset-item-list[data-mode="parts"] [data-mode-only="film"],
#asset-item-list[data-mode="film"] [data-mode-only="parts"] {
  display: none;
}

.layer-list-group {
  flex-shrink: 0;
}

.layer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layer-section-title {
  margin-top: 16px;
}

/* 區塊小標題：一條細線把同類項目框成一組，掃一眼就分得出段落 */
.list-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 2px 0;
}

.list-section:first-of-type {
  margin-top: 0;
}

.list-section-title {
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  white-space: nowrap;
}

.list-section-line {
  flex: 1;
  height: 1px;
  background: #ffffff14;
}

/* 同一區塊的項目用淡淡的珊瑚色左邊框收成一束 */
.list-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding-left: 9px;
  border-left: 2px solid #ff667440;
}

/* 右側面板的群組（滑桿 / 色票）：列本身已有 padding 與底線分隔，不需要再加間距 */
.visual-panel .list-group {
  gap: 0;
}

/* 區塊小標那一行裡的操作鈕（例如「重設」）：縮小、不撐高整行 */
.list-section .linkbtn {
  min-height: 22px;
  padding: 0 8px;
  font-size: 12px;
}

.layer-item {
  border: 1px solid #ffffff10;
  border-radius: 8px;
  background: #09090b;
  outline: none;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.layer-item:hover {
  border-color: #ffffff24;
  background: #111115;
}

.layer-item:focus-visible {
  box-shadow: 0 0 0 2px #ff667466;
}

.layer-item.is-placeholder {
  opacity: .4;
}

/* 「後續」是還沒做的功能：用最淡的中性標籤往後退，重點留給真正能操作的列 */
.layer-item.is-placeholder .asset-status {
  color: var(--muted);
  background: #ffffff08;
}

.layer-item .asset-row {
  border-bottom: 0;
}

.layer-icon {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.layer-item .content-control-row {
  display: grid;
  grid-template-columns: 18px 62px minmax(0, 1fr);
}

.layer-item .content-control-row .inline-check {
  justify-self: start;
}

.inline-text-input {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 14px;
}

.inline-text-input:focus {
  outline: none;
  border-color: var(--accent);
}

.layer-inline {
  margin: 0 8px 8px 42px;
  padding: 8px 0 0;
  border-top: 1px solid #ffffff0d;
}

/* 片頭：秒數輸入 + 「秒」單位，跟「片頭」同一行 */
.intro-secs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.intro-secs .numin {
  width: 52px;
  min-height: 30px;
}

/* 片尾沿用片頭時：片尾那列還看得到，但秒數/檔案改了也沒作用，先淡掉並停用 */
.asset-row.is-muted {
  opacity: .55;
}

.filebtn.is-disabled {
  pointer-events: none;
  opacity: .5;
}

/* 片頭進階設定：只有一個勾選，不需要左邊的標籤欄，讓勾選佔滿整列；完成鈕靠右 */
.intro-advanced .intro-as-outro-field {
  grid-template-columns: minmax(0, 1fr);
}

.intro-advanced .focus-foot {
  justify-content: flex-end;
}

/* ── 聚焦模式：點一列 → 升到頂端展開細項，其餘被深色遮罩蓋住，一次只專注一個元素 ── */
.focus-list {
  position: relative;
}

/* 遮罩：蓋住整個清單（含展開後變高的範圍），點它就收合 */
.focus-scrim {
  position: absolute;
  inset: -6px;
  z-index: 5;
  border-radius: 12px;
  background: #050506cc;
  backdrop-filter: blur(2px);
  opacity: 0;
  cursor: pointer;
  transition: opacity .3s ease;
}
.focus-scrim[hidden] { display: none; }
.focus-list.is-open .focus-scrim { opacity: 1; }

.focus-item {
  position: relative;
  transition:
    transform .42s cubic-bezier(.2, .8, .2, 1),
    box-shadow .28s ease,
    border-color .28s ease;
  will-change: transform;
}

/* 被選中的那張：浮到遮罩之上、往上滑到頂端（--rise 由 JS 量出）、描邊加亮 */
.focus-list.is-open .focus-item.is-active {
  z-index: 6;
  transform: translateY(var(--rise, 0px));
  border-color: var(--accent);
  box-shadow: 0 16px 36px #000b, 0 0 0 1px #ff667440;
}

/* 標頭是開關：沒展開點了展開、展開中再點收合，所以永遠是 pointer */
.focus-head {
  cursor: pointer;
}

/* 細項面板：平時收起（高度 0），選中時展開 */
.focus-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 10px 0 34px;
  transition:
    max-height .42s cubic-bezier(.2, .8, .2, 1),
    opacity .26s ease,
    padding .3s ease;
}
.focus-item.is-active .focus-detail {
  max-height: 420px;
  opacity: 1;
  padding-top: 2px;
  padding-bottom: 12px;
}

.focus-detail .field {
  padding: 5px 0;
}

/* 細項面板底部：套用到全部 / 完成 */
.focus-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #ffffff0d;
}
.focus-foot .fx-applyall {
  margin-right: auto;
}

.asset-row {
  min-height: 42px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-bottom: 1px solid #ffffff0d;
  border-radius: 7px;
  transition: background .16s, box-shadow .16s, border-color .16s;
}

/* 名稱占滿中間、狀態緊接其後；操作鈕成組靠右，空間不足時整組換到下一行而不擠成一團 */
.asset-row > .layer-icon { flex: 0 0 18px; }
.asset-row > .asset-name { flex: 1 1 auto; min-width: 0; }
.asset-row > .asset-status { flex: 0 1 auto; min-width: 0; }
.asset-row > .intro-secs { flex: 0 0 auto; }
#logo-row > .asset-status:not(#logo-status) { display: none; }

.row-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.asset-row.drop-hover {
  background: #33171b66;
  border-bottom-color: #ff667466;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.asset-name {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-status {
  min-width: 0;
  justify-self: start;
  max-width: 100%;
  color: var(--muted);
  background: #ffffff0b;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-status.ok {
  color: #7de4b8;
  background: #1d8b5d2b;
}

.asset-status.warn {
  color: var(--warn);
  background: #8b6b1d2b;
}

.logo-controls {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px 38px;
}

.logo-opacity {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) 44px;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.logo-opacity input[type="range"] {
  width: 100%;
}

.logo-opacity #logo-opacity-val {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.logo-position-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.logo-position-tools .linkbtn {
  min-width: 0;
  padding-inline: 8px;
}

.logo-position-tools .linkbtn.active {
  color: var(--accent);
  border-color: #ff667466;
  background: #33171b66;
}

/* Logo 進階設定：顯示多久＝短數字欄＋單位，不要被 .field input 撐滿整列 */
.logo-advanced .checkrow .numin {
  width: 90px;
  flex: 0 0 auto;
}

.logo-advanced .focus-foot {
  justify-content: flex-end;
}

.filebtn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.filebtn:hover,
.filebtn.drop-hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.linkbtn {
  min-height: 30px;
  background: transparent;
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  color: var(--muted);
  padding: 0 9px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.linkbtn:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.cliplist {
  max-height: 148px;
  margin: 7px 0 4px;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
}

.cliplist:empty { display: none; }

/* 跟右側面板一致的細捲軸（取代瀏覽器預設的亮色醜捲軸） */
.cliplist {
  scrollbar-width: thin;
  scrollbar-color: #ffffff1f transparent;
}
.cliplist::-webkit-scrollbar { width: 8px; }
.cliplist::-webkit-scrollbar-track { background: transparent; }
.cliplist::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 99px; }
.cliplist::-webkit-scrollbar-thumb:hover { background: #ffffff33; }

.clip {
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid #ffffff12;
  border-radius: 7px;
  background: var(--sunken);
  color: var(--muted);
  font-size: 12px;
}

.clip.dragging {
  opacity: .55;
}

.clip-over {
  border-color: var(--accent);
}

.drag-handle {
  color: var(--muted);
  cursor: grab;
  text-align: center;
  user-select: none;
}

.clip .clip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip .linkbtn {
  min-height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.subtitle-workbench {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 8px 10px;
}

/* 展開時的描邊/陰影沿用 .focus-list.is-open .focus-item.is-active 的統一樣式，這裡不另外定義 */

/* 標頭只剩模式下拉，佔滿整列 */
.subtitle-style-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* 尺寸跟全站其他下拉（.field select）一致：36px 高、14px 字 */
.subtitle-style-head select,
.subtitle-style-basic select,
.subtitle-sequence-advanced select {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 14px;
}

/* 這顆下拉佔滿整個標頭，會把 .focus-head 的 pointer 蓋掉，
   使用者就看不出這列可以展開；補回 pointer 讓整列的手勢一致 */
.subtitle-style-head select {
  cursor: pointer;
}

.subtitle-style-head select:focus,
.subtitle-style-basic select:focus,
.subtitle-sequence-advanced select:focus {
  outline: none;
  border-color: var(--accent);
}

.subtitle-style-basic {
  display: grid;
  gap: 2px;
  padding: 2px 10px 10px 34px;
  border-top: 1px solid #ffffff0d;
}

.subtitle-style-basic[hidden],
.subtitle-normal-advanced[hidden],
.subtitle-sequence-advanced[hidden] {
  display: none !important;
}

/* 模式專屬欄位會由 JS 切換 hidden；全站的 .field { display:grid } 會蓋過瀏覽器預設隱藏，
   所以在字幕樣式面板內明確恢復 hidden 的優先權。 */
.subtitle-style-basic [hidden],
.subtitle-normal-advanced [hidden],
.subtitle-sequence-advanced [hidden] {
  display: none !important;
}

.subtitle-normal-advanced .focus-foot,
.subtitle-sequence-advanced .focus-foot {
  justify-content: flex-end;
}

/* 輪播/輪盤進階設定的拉桿比較多，展開上限要比一般細項面板高，不然「完成」會被裁掉 */
.subtitle-style-item.is-active .focus-detail {
  max-height: 560px;
}
.subtitle-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.subtitle-tab {
  min-height: 30px;
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  background: var(--sunken);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.subtitle-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.subtitle-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subtitle-panel[hidden] {
  display: none !important;
}

.subtitle-cue-list-wrap {
  min-height: 92px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid #ffffff12;
  border-radius: 7px;
  background: var(--sunken);
  scrollbar-width: thin;
  scrollbar-color: #ffffff1f transparent;
}

.subtitle-cue-list-wrap::-webkit-scrollbar { width: 8px; }
.subtitle-cue-list-wrap::-webkit-scrollbar-track { background: transparent; }
.subtitle-cue-list-wrap::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 99px; }
.subtitle-cue-list-wrap::-webkit-scrollbar-thumb:hover { background: #ffffff33; }

.subtitle-empty {
  padding: 18px 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.subtitle-cue-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}

.subtitle-cue {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  width: 100%;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #ffffff08;
  color: var(--ink);
  padding: 7px;
  text-align: left;
  cursor: pointer;
}

.subtitle-cue:hover {
  border-color: #ffffff20;
  background: #ffffff0d;
}

.subtitle-cue.active {
  border-color: var(--accent);
  background: #ff667421;
}

.subtitle-cue.has-issue {
  border-color: #e6b45066;
}

.subtitle-cue-index {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.subtitle-cue-main {
  min-width: 0;
  overflow: hidden;
}

.subtitle-cue-time {
  display: block;
  min-width: 0;
  color: #9ad7ff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtitle-cue-text {
  display: block;
  min-width: 0;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtitle-cue-issue {
  margin-top: 4px;
  color: var(--warn);
  font-size: 11px;
}

.subtitle-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #ffffff0d;
  padding-top: 10px;
}

/* class 設了 display:flex，會蓋掉 hidden 屬性的 [hidden]{display:none}；
   補一條同名覆蓋，讓 subtitleEditor.hidden = true 真的能藏起來（未選字幕時） */
.subtitle-editor[hidden] {
  display: none;
}

.subtitle-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.subtitle-time-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.subtitle-time-grid input,
#subtitle-text,
#subtitle-raw-text {
  width: 100%;
  min-width: 0;
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 13px;
}

.subtitle-time-grid input {
  min-height: 34px;
  padding: 0 9px;
  font-variant-numeric: tabular-nums;
}

#subtitle-text,
#subtitle-raw-text {
  resize: vertical;
  padding: 9px;
  line-height: 1.5;
}

.subtitle-time-grid input:focus,
#subtitle-text:focus,
#subtitle-raw-text:focus {
  outline: none;
  border-color: var(--accent);
}

.subtitle-actions,
.subtitle-tools,
.subtitle-offset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.subtitle-actions .linkbtn,
.subtitle-tools .linkbtn {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.subtitle-chain-option {
  position: relative;
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  background: #ffffff05;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.subtitle-chain-option:hover {
  border-color: #ffffff24;
  background: #ffffff08;
}

.subtitle-chain-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.subtitle-chain-box {
  display: grid;
  width: 17px;
  height: 17px;
  box-sizing: border-box;
  place-items: center;
  margin-top: 1px;
  border: 1px solid #ffffff32;
  border-radius: 5px;
  background: var(--panel-2);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.subtitle-chain-box::after {
  content: '✓';
  color: #16090b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: translateY(-0.5px) scale(0.7);
  transition: opacity 120ms ease, transform 120ms ease;
}

.subtitle-chain-option input:checked + .subtitle-chain-box {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px #ff718215;
}

.subtitle-chain-option input:checked + .subtitle-chain-box::after {
  opacity: 1;
  transform: translateY(-0.5px) scale(1);
}

.subtitle-chain-option input:focus-visible + .subtitle-chain-box {
  outline: 2px solid #9ad7ff;
  outline-offset: 2px;
}

.subtitle-chain-copy {
  min-width: 0;
}

.subtitle-chain-title,
.subtitle-chain-hint {
  display: block;
}

.subtitle-chain-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.subtitle-chain-hint {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.fx-mode-section {
  flex-shrink: 0;
  margin-top: 0;
}

.danger-link {
  border-color: #d35f5f55;
  color: #f0a0a0;
}

.danger-link:hover {
  border-color: #d35f5f;
  color: #ffd0d0;
}

.subtitle-editor-msg {
  min-height: 16px;
  color: var(--warn);
  font-size: 12px;
  line-height: 1.35;
}

/* AI 字幕對齊面板 */
.ai-align-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.ai-align-field a {
  color: #9ad7ff;
  text-decoration: none;
}

.ai-align-field a:hover {
  text-decoration: underline;
}

.ai-align-field input,
.ai-align-field select,
#ai-align-lyrics {
  width: 100%;
  min-width: 0;
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 13px;
}

.ai-align-field input,
.ai-align-field select {
  min-height: 34px;
  padding: 0 9px;
}

.ai-align-field select {
  cursor: pointer;
}

#ai-align-lyrics {
  resize: vertical;
  padding: 9px;
  line-height: 1.5;
}

.ai-align-field input:focus,
.ai-align-field select:focus,
#ai-align-lyrics:focus {
  outline: none;
  border-color: var(--accent);
}

/* 套用歌詞：對齊完成後才出現，做成整排、強調色的主要按鈕 */
.ai-align-apply {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.ai-align-apply:hover:not(:disabled) {
  filter: brightness(1.08);
  border-color: var(--accent);
  background: var(--accent);
}

/* 沒有 AI 對齊輸出時：常駐但變暗、不可按 */
.ai-align-apply:disabled {
  border-color: #ffffff1f;
  background: #ffffff0d;
  color: var(--muted);
  cursor: not-allowed;
  filter: none;
}

.subtitle-tools {
  border-top: 1px solid #ffffff0d;
  padding-top: 10px;
}

.subtitle-offset-row {
  color: var(--muted);
  font-size: 12px;
}

.subtitle-offset-row .numin {
  width: 70px;
  min-height: 28px;
  font-size: 12px;
}

.field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.field.compact {
  grid-template-columns: 72px 64px auto;
  justify-content: start;
}

/* 字型檔上傳列：標籤 + 上傳鈕 + 移除鈕，靠左排 */
.field.fontfile-row {
  grid-template-columns: 72px auto auto;
  justify-content: start;
  gap: 10px;
}

/* 粗體 / 陰影 勾選列 */
.checkrow {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}

.field .check input {
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* 顏色選項：文字標籤 + 色塊，一組一組排在 checkrow 裡 */
.coloropt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}

/* checkrow 裡的色塊 / 下拉，不要被 .field input 撐成滿版 */
.checkrow input[type="color"] { width: 32px; height: 26px; min-height: 0; }
.checkrow select { width: auto; min-height: 32px; }
.checkrow input:disabled { opacity: 0.35; cursor: not-allowed; }

/* 控制項標籤統一用白（跟 .slider-head label 一致）；灰色（--muted）保留給提示/狀態文字 */
.field > label {
  color: var(--ink);
  font-size: 14px;
}

.field input,
.field select {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 14px;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
}

.numin {
  width: 64px;
  min-height: 34px;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid #ffffff1f;
  border-radius: 7px;
  padding: 0 9px;
  font-size: 14px;
}

.numin:focus {
  outline: none;
  border-color: var(--accent);
}

.unit {
  color: var(--muted);
  font-size: 13px;
}

.slider-row {
  padding: 9px 0;
  border-bottom: 1px solid #ffffff0d;
}

.slider-row:last-child {
  border-bottom: 0;
}

/* 群組內的次層小標（主要控制 / 音樂反應…）：用中性色、比區塊珊瑚小標再低一階，
   形成「珊瑚區塊標題 → 中性次層標題 → 項目」的層次 */
.slider-subgroup-title {
  margin: 12px 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.slider-subgroup-title:first-child {
  margin-top: 2px;
}

.slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
}

.slider-head label {
  color: var(--ink);
  font-size: 14px;
}

.slider-val {
  color: var(--accent-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.slider-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: #ffffff1f;
  cursor: pointer;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--accent-ink);
  box-shadow: 0 0 6px var(--accent-glow);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-ink);
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-glow);
}

.color-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #ffffff0d;
}

.color-row:last-child {
  border-bottom: 0;
}

.color-label {
  color: var(--ink);
  font-size: 14px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-mode-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.color-mode-row .segmented-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.color-mode-row .style-option {
  min-height: 26px;
}

.primary-copy-button {
  min-height: 28px;
  margin-left: auto;
  font-size: 12px;
}

.gradient-reverse-button {
  min-height: 22px;
  padding-inline: 6px;
  font-size: 11px;
}

.gradient-reverse-button[aria-pressed="true"] {
  color: var(--accent-2);
  border-color: #ff667466;
}

.palette-summary-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding-block: 7px;
}

.palette-part {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.palette-part-label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.palette-preview {
  flex-wrap: nowrap;
  gap: 4px;
}

.palette-chip {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid #ffffff2b;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #00000024;
}

.custom-palette-row input[type="color"] {
  width: 28px;
  height: 24px;
  border-radius: 5px;
}

.color-row .slider-hint {
  grid-column: 1 / -1;
  margin-top: 2px;
}

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 28px;
  padding: 0;
  background: none;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 4px; }

/* 頻譜造型選擇器：下拉選單（造型變多也塞得下，不再受按鈕格寬度限制） */
.style-select {
  width: 100%;
  min-height: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--accent-soft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff8a94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  color: var(--ink);
  border: 1px solid #ff667455;
  border-radius: 8px;
  padding: 0 36px 0 12px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #ff667455;
}

.style-select:hover {
  background-color: var(--accent-soft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffd0d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 1px #ff667455,
    0 0 0 3px #ff66741f;
}

.style-select:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1px #ff667455,
    0 0 0 1px var(--accent),
    0 0 0 4px #ff667424;
}

.style-select option {
  background: var(--panel-2);
  color: var(--ink);
}

.style-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid #ffffff18;
  border-radius: 8px;
  background: var(--sunken);
}

.segmented-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid #ffffff18;
  border-radius: 8px;
  background: var(--sunken);
}

.style-option {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0 8px;
  font-size: 13px;
}

.style-option.active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px #ff667455;
}

/* 五欄(含右側分頁列)＋舞台 520 的大 token 下限約 1342；窄於此先換較緊的 token */
@media (max-width: 1342px) {
  .app-shell {
    --rail: 32px;
    --left-panel: 270px;
    --right-panel: 292px;
    --chrome-gap: 10px;
    grid-template-columns: var(--rail) var(--left-panel-current) minmax(520px, 1fr) var(--right-panel-current) var(--rail);
  }

  .field {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  /* 窄版左側面板放不下三個文字樣式選項；讓標籤獨占一列，選項在下一列完整橫排。 */
  .focus-detail .text-style-toggle-field {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .focus-detail .text-style-toggle-field .checkrow {
    gap: 7px;
    flex-wrap: nowrap;
  }

  .focus-detail .text-style-toggle-field .check {
    gap: 4px;
    font-size: 13px;
  }

  .focus-detail .text-style-toggle-field .check input {
    width: 15px;
    height: 15px;
  }
}

/* 小 token 下限約 1214；再窄就固定寬度 + 水平捲動，避免右側分頁列被裁掉 */
@media (max-width: 1214px) {
  body {
    overflow-x: auto;
  }

  .app-shell {
    width: 1214px;
  }
}