:root {
  color-scheme: light;
  --app-bg: #f3f3f3;
  --mica-tint: rgba(255, 255, 255, 0.72);
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-subtle: #f8f8f8;
  --border: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.18);
  --text: #1b1b1b;
  --muted: #606060;
  --muted-2: #7a7a7a;
  --accent: #0067c0;
  --accent-hover: #005a9e;
  --accent-soft: #d7e8fb;
  --danger: #c42b1c;
  --danger-soft: #fde7e9;
  --ok: #0f7b0f;
  --warning: #9a6700;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  --radius: 8px;
  /* 側欄固定寬（不隨視窗寬度變動）：形象 80px＋名稱起點 88px＋
     最長內容（角色名 12 字元／職業名「大魔導士(火、毒)」）單行
     ＋與右上 ✕ 的間隔＋捲軸寬度。 */
  --sidebar-width: 256px;
  --skill: #6b4fc9;
  --mastery: #c2396b;
  --boost: #1d73d8;
  --common: #4b649b;
  --stat: #59713d;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--app-bg);
  color: var(--text);
  font-family: "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  /* 明確讓唯一一列填滿視窗高度（min 0 可收縮）。否則隱式列為 auto＝內容高，
     側欄與主面板會超過視窗、被 #app 的 overflow:hidden 裁掉——下面的職業選不到、
     下一步卡消失。有了固定列高，內部的 1fr（清單／序列）才會收縮並啟動捲動。 */
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  background: linear-gradient(180deg, #f7f7f7 0%, #eeeeee 100%);
}

.loading-view,
.empty-state {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
}

.sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  background: var(--mica-tint);
  backdrop-filter: blur(20px);
  min-width: 0;
  min-height: 0;
}

.sidebar-header,
.page-title-row,
.command-row,
.modal-footer,
.next-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-header {
  justify-content: space-between;
  padding: 0 4px;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
}

.search-box,
.input-box,
.select-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  padding: 0 10px;
}

.search-box svg,
.input-box svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
}

.search-box input,
.input-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.select-box {
  padding: 0 8px;
}

.select-box select {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.character-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

/* 職業列＝左形象／右名稱（比照 review/class-thumbs 的左右分區）：
   臉部特寫（review/class-art 高畫質裁切，等比不變形）靠左、右緣漸層淡入，名稱在右。 */
.character-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: grab;
}

.character-row.dragging {
  opacity: 0.45;
  cursor: grabbing;
}

/* 拖曳落點指示線（藍）：依游標在列上半/下半決定插入在前或後。 */
.character-row.drop-before {
  box-shadow: inset 0 3px 0 var(--accent);
}

.character-row.drop-after {
  box-shadow: inset 0 -3px 0 var(--accent);
}

.row-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  /* 淡出區加長：右緣 55% 起淡出，讓名稱起點（88px）不壓在清晰的臉上 */
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 55%);
  mask-image: linear-gradient(to left, transparent 0%, #000 55%);
}

/* 名稱區：角色名＋職業名各 1 行、不換行（側欄固定寬已保證最長內容單行放得下），
   起點 88px＝形象右緣再右移一些，避免壓在臉上。 */
.character-name {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  padding: 0 8px 0 88px;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.character-primary {
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-row.no-bg {
  background: rgba(255, 255, 255, 0.06);
}

.character-row:hover {
  filter: brightness(1.1);
}

.character-row.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* 刪除 ✕：右上角，僅 hover 顯示。 */
.row-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.character-row:hover .row-delete {
  opacity: 1;
}

.row-delete:hover {
  background: rgba(196, 43, 28, 0.92);
}

.main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  gap: 14px;
  padding: 18px;
}

.page-title-row {
  justify-content: space-between;
}

.title-stack {
  min-width: 0;
}

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.page-title {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 650;
}

.command-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.command-button,
.icon-button,
.segmented-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  cursor: default;
  user-select: none;
}

.command-button {
  padding: 0 12px;
  font-weight: 600;
}

.command-button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.command-button.primary:hover {
  background: var(--accent-hover);
}

.command-button:hover,
.icon-button:hover,
.segmented-button:hover {
  background: #f4f4f4;
}

.command-button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.danger-button {
  border-color: rgba(196, 43, 28, 0.28);
  background: var(--danger-soft);
  color: var(--danger);
  padding: 0 12px;
  font-weight: 600;
}

.danger-button:hover {
  background: #fbd1d7;
}

.icon-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

.icon-button.small {
  width: 26px;
  height: 26px;
  min-height: 26px;
}

.command-button svg,
.icon-button svg,
.danger-button svg,
.segmented-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.top-panel,
.sequence-panel,
.next-panel,
.modal-surface {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.top-panel {
  display: grid;
  /* 進度條（minmax(0,1fr)）吸收寬度收縮，素材 pill（auto，nowrap）維持原大小留在同列，
     不再換行。 */
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
}

.progress-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e6e6;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
}

.material-pill,
.cost-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  padding: 0 10px;
  font-weight: 650;
  white-space: nowrap;
}

.material-pill img,
.cost-pill img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.sequence-panel {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.sequence-flow {
  /* 格寬固定 76px 不隨視窗伸縮；auto-fill 定出欄軌後以 space-between 把
     剩餘空間攤進欄距（下限 9px）——任何視窗寬度（含最小 980 與預設 1320）
     每列右緣都貼齊、不留行尾空白；格距僅在 9~14px 間微幅變化。 */
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  justify-content: space-between;
  column-gap: 9px;
  row-gap: 10px;
  align-content: flex-start;
}

.step-cell {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  width: 76px;
  flex: 0 0 auto;
  height: 86px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  padding: 7px 6px 6px;
  color: var(--text);
  cursor: default;
}

.step-cell:hover {
  border-color: var(--accent);
}

.step-cell.current {
  outline: 3px solid rgba(0, 103, 192, 0.28);
  border-color: var(--accent);
}

.step-cell.done {
  opacity: 0.52;
}

/* hover 序列步驟時，同一核心的每個步驟一起亮起（含已完成者，故覆寫 .done 的淡化）。
   實心 accent 外環＋底色染色＋投影，讓同核心在整片序列裡一眼可辨。 */
.step-cell.peer {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0, 103, 192, 0.45);
  opacity: 1;
}

.step-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border-top: 4px solid var(--type-color, var(--accent));
  pointer-events: none;
}

.skill-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  image-rendering: auto;
}

.step-level {
  min-width: 34px;
  border-radius: 999px;
  background: #202020;
  color: #ffffff;
  padding: 1px 7px 2px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.sequence-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--muted);
  text-align: center;
}

.next-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 138px;
  padding: 16px;
}

.next-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.next-title-row {
  justify-content: space-between;
}

.section-title {
  font-size: 16px;
  font-weight: 650;
}

.next-skill {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.next-skill img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.next-skill-text {
  min-width: 0;
}

.next-skill-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 650;
}

.next-skill-meta,
.muted {
  color: var(--muted);
}

.cost-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.type-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--type-color, var(--accent)) 16%, white);
  color: color-mix(in srgb, var(--type-color, var(--accent)) 72%, black);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.type-skill {
  --type-color: var(--skill);
}

.type-mastery {
  --type-color: var(--mastery);
}

.type-boost {
  --type-color: var(--boost);
}

.type-common {
  --type-color: var(--common);
}

.type-stat {
  --type-color: var(--stat);
}

.empty-main {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 100%;
}

.empty-box {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.empty-title {
  font-size: 22px;
  font-weight: 650;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 20;
  background: rgba(0, 0, 0, 0.28);
}

.modal-surface {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-width: min(920px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  width: min(760px, calc(100vw - 48px));
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.modal-surface.manage {
  /* 六角矩陣版：吃滿「略小於 100vh」的高度，矩陣本身由 modalManage.ts 的
     hexScale() 依視窗等比放大填滿（880 須與該檔的 SURFACE_MAX_W 一致）。 */
  width: min(880px, calc(100vw - 24px));
  height: calc(100vh - 16px);
  max-height: calc(100vh - 16px);
}

.modal-surface.narrow {
  width: min(430px, calc(100vw - 48px));
}

.modal-header,
.modal-body,
.modal-footer {
  padding: 16px;
}

.modal-header {
  border-bottom: 1px solid var(--border);
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
}

.modal-body {
  min-height: 0;
  overflow: auto;
}

.modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.job-picker {
  display: grid;
  gap: 6px;
}

.job-option {
  /* flex（非固定 3 欄 grid）：職業可有多個類型 chip（如傑諾＝盜賊＋海盜），
     固定欄會讓第 4 個 chip 溢出換行、版面跑掉。 */
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  padding: 6px 10px;
}

.job-option .job-name {
  flex: 1 1 auto;
}

.job-option .small-chip {
  flex: 0 0 auto;
}

.job-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.job-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.small-chip {
  min-width: 0;
  border-radius: 999px;
  background: #ededed;
  color: var(--muted);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.step-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.step-detail img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.detail-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 650;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.metric {
  display: grid;
  gap: 8px;
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  padding: 10px;
}

.metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.metric-value {
  font-size: 18px;
  font-weight: 700;
}

.manage-toolbar {
  display: grid;
  grid-template-columns: 220px auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 600;
}

.check-row input {
  width: 16px;
  height: 16px;
}

.skills-table {
  display: grid;
  gap: 6px;
}

.skill-row {
  display: grid;
  /* 名稱欄（minmax(0,1fr)）吸收收縮，類型 chip 與 stepper 維持內容寬，留在同列。 */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  padding: 7px 10px;
}

/* 核心種類 chip 為 grid item，預設會被拉伸；改為貼齊文字長度（不填滿欄位）。 */
.skill-row .type-chip {
  justify-self: start;
}

.skill-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.skill-name-cell img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.skill-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.stepper {
  display: grid;
  grid-template-columns: 32px 58px 26px 32px;
  align-items: center;
  justify-content: start;
  gap: 5px;
}

.level-input {
  width: 58px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--text);
  text-align: center;
  font-weight: 700;
}

.level-max {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

/* 提示框：頂端置中、z-index 高於所有彈窗（modal-backdrop z-20），不被任何物件覆蓋。 */
.toast-host {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  justify-items: center;
  z-index: 100;
}

.toast {
  max-width: min(520px, calc(100vw - 36px));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  color: var(--text);
}

.toast.error {
  border-color: rgba(196, 43, 28, 0.32);
  background: #fff3f4;
}

/* ─── 深色主題（Issue 2）──────────────────────────────────────────────
   覆寫中性色與少數硬編淺色字面值；保留重點色（--accent 與 --skill…--stat）。
   只改顏色、不動版面。附加於檔尾，靠「後者覆寫」生效。 */
:root {
  color-scheme: dark;
  --app-bg: #202020;
  --mica-tint: rgba(43, 43, 43, 0.72);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-solid: #2b2b2b;
  --surface-subtle: #323232;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #f0f0f0;
  --muted: #a9a9a9;
  --muted-2: #8a8a8a;
  --accent-soft: rgba(0, 103, 192, 0.38);
  --danger: #ff8a8a;
  --danger-soft: rgba(196, 43, 28, 0.2);
  --ok: #6ccb6c;
  --warning: #e0b341;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.app-shell {
  background: linear-gradient(180deg, #242424 0%, #1b1b1b 100%);
}

.search-box,
.input-box,
.select-box,
.material-pill,
.cost-pill,
.command-button,
.icon-button,
.segmented-button {
  background: rgba(255, 255, 255, 0.06);
}

.command-button.primary {
  background: var(--accent);
}

.command-button:hover,
.icon-button:hover,
.segmented-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.danger-button:hover {
  background: rgba(196, 43, 28, 0.3);
}

.character-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.character-row.selected {
  color: #cfe8ff;
}

.progress-track {
  background: rgba(255, 255, 255, 0.12);
}

.step-level {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

.type-chip {
  background: color-mix(in srgb, var(--type-color, var(--accent)) 26%, transparent);
  color: color-mix(in srgb, var(--type-color, var(--accent)) 55%, white);
}

.small-chip {
  background: rgba(255, 255, 255, 0.1);
}

.level-input {
  background: rgba(255, 255, 255, 0.06);
}

.toast {
  background: var(--surface-solid);
}

.toast.error {
  background: rgba(196, 43, 28, 0.18);
}

.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* 深色：原生下拉（群組／類型）的彈出清單與選項 → 深底淺字、可閱讀。 */
.select-box select {
  color-scheme: dark;
}
.select-box select option {
  background-color: var(--surface-solid);
  color: var(--text);
}

/* 下一步卡版面：核心種類 chip 緊鄰技能名稱；右側「成本（上）＋完成下一步（下）」同區塊。 */
.next-skill-name .type-chip {
  margin-right: 8px;
  vertical-align: middle;
}
.next-action-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 步驟詳情：核心種類 chip 移至技能名稱上方，留一點間距（inline-flex 本身即貼齊文字）。 */
.step-detail .type-chip {
  margin-bottom: 6px;
}

/* 步驟詳情成本：以靈魂艾爾達／碎片圖示取代「艾／碎」文字。 */
.metric-value {
  display: flex;
  align-items: center;
  gap: 14px;
}
.metric-mat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.metric-mat .mat-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 新增職業彈窗：搜尋／篩選列固定不捲，只有職業清單（job-picker）隨滾輪捲動。 */
.modal-body.add-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.add-body .form-grid {
  flex: 0 0 auto;
}
.add-body .job-picker {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* 推薦序列 priority（升級優先度）徽章底色：對應推薦圖徽章的 green/yellow/red/black。
   .step-level.prio-* 特異度高於深色主題的 .step-level 覆寫，故顏色生效。 */
.step-level.prio-green {
  background: #3fb24a;
  color: #ffffff;
}
.step-level.prio-yellow {
  background: #eab320;
  color: #1b1b1b;
}
.step-level.prio-red {
  background: #e23a34;
  color: #ffffff;
}
.step-level.prio-black {
  background: #1c1c1c;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* ─── 強化素材一覽表（cost table 彈窗，分頁切換核心）──────────────────── */
.modal-surface.cost-modal {
  width: min(620px, calc(100vw - 42px));
  height: min(720px, calc(100vh - 42px));
}

/* 分頁列與總計固定，只有表格本身（cost-table-scroll）捲動。 */
.modal-body.cost-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.cost-tabs {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.cost-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 8px;
}

.cost-tab.active {
  border-color: var(--type-color, var(--accent));
  background: color-mix(in srgb, var(--type-color, var(--accent)) 20%, var(--surface-solid));
  color: var(--text);
}

.cost-total {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--type-color, var(--accent)) 12%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.cost-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cost-table {
  width: 100%;
  /* separate（非 collapse）：collapse 會讓 sticky thead 在 WebView2 失效、捲動時資料列蓋過表頭。 */
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.cost-table th,
.cost-table td {
  border-bottom: 1px solid var(--border);
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
}

.cost-table th:first-child,
.cost-table td:first-child {
  color: var(--muted);
}

.cost-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border-strong);
  color: var(--muted);
  font-weight: 650;
}

.cost-table th .mat-th-icon,
.cost-total .mat-th-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: -3px;
  margin: 0 2px;
}

.cost-table tbody tr:hover td {
  background: var(--surface-subtle);
}

/* ─── 以角色名稱新增（官方 API 匯入，新增職業彈窗）───────────────────────────
   位於深色主題覆寫之後：全部使用 CSS 變數，深色值自然生效。 */
.import-section {
  display: grid;
  gap: 8px;
}

.import-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  padding: 0 2px;
}

.import-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.import-row .search-box {
  flex: 1;
}

.import-preview {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.import-preview-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.import-preview-title .muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-preview-job {
  font-weight: 650;
  white-space: nowrap;
}

.import-preview-title .command-button {
  margin-left: auto;
  flex: 0 0 auto;
}

.import-levels {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.import-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.import-level-row .type-chip {
  flex: 0 0 auto;
}

.import-note {
  font-size: 12px;
}

.import-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted-2);
  margin: 10px 0;
}

.import-divider::before,
.import-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

/* 側欄職業列的角色名稱（職業名下方小字）。 */
.character-sub {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 名稱雖只各 1 行，列高保留 72px 讓形象特寫有足夠版面。 */
.character-row {
  min-height: 72px;
}

/* ─── 管理核心等級：六角矩陣（ADR-0033，仿遊戲內 HEXA 矩陣版面）──────────────
   位於深色主題覆寫之後：全部使用 CSS 變數與 --type-color，深色值自然生效。 */
.modal-surface.manage .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hexa-tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.hexa-tab {
  min-height: 32px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--muted);
  font-weight: 650;
}

.hexa-tab.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-solid));
  color: var(--text);
}

.manage-body {
  display: grid;
  justify-items: center;
  /* 高度吃滿視窗後改為垂直置中，矩陣不會黏在上緣 */
  align-content: center;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 板面不另鋪淺色背景層（直接坐在彈窗底色上）。 */
.hexa-board {
  position: relative;
  max-width: 100%;
}

/* 所有尺寸由 modalManage.ts 在 .hexa-board 上寫入的 CSS 變數驅動（單一真實來源
   在該檔的 BASE × hexScale()）。fallback＝倍率 1 的基準值。 */
.hex-cell {
  position: absolute;
  width: var(--hex-w, 64px);
  height: var(--hex-h, 74px);
}

.hex-shape {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid;
  place-items: center;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--type-color, var(--accent)) 72%, #ffffff 8%),
    color-mix(in srgb, var(--type-color, var(--accent)) 52%, #000000 22%)
  );
}

/* 內縮一圈的深色底作為六角外框效果 */
.hex-shape::before {
  content: "";
  position: absolute;
  inset: var(--hex-inset, 4px);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: color-mix(in srgb, var(--type-color, var(--accent)) 28%, #14141c);
}

.hex-icon,
.hex-shape svg,
.hex-shape span {
  position: relative;
  z-index: 1;
}

.hex-cell .hex-icon {
  width: var(--hex-icon, 36px);
  height: var(--hex-icon, 36px);
  image-rendering: pixelated;
}

.hex-cell[data-action="hex-select"] {
  cursor: pointer;
}

.hex-cell[data-action="hex-select"]:hover {
  filter: brightness(1.15);
}

.hex-cell.selected {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--type-color, var(--accent)) 85%, white));
}

.hex-cell.selected .hex-shape {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--type-color, var(--accent)) 88%, #ffffff 12%),
    color-mix(in srgb, var(--type-color, var(--accent)) 62%, #000000 12%)
  );
}

/* 尚未開啟（0 級）的核心：圖示全黑白 */
.hex-cell.zero .hex-icon {
  filter: grayscale(1) brightness(0.55);
}

/* 未開放格：灰色＋鎖頭 */
.hex-cell.locked .hex-shape {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
}

.hex-cell.locked .hex-shape::before {
  background: rgba(120, 124, 140, 0.35);
}

.hex-cell.locked svg {
  width: var(--hex-lock, 24px);
  height: var(--hex-lock, 24px);
  color: rgba(255, 255, 255, 0.55);
}

/* 中央 Ⅵ 徽章（比一般格小，避免與各叢集內圈相擠） */
.hex-cell.emblem {
  width: var(--emblem-w, 56px);
  height: var(--emblem-h, 64px);
  pointer-events: none;
}

.hex-cell.emblem .hex-shape {
  background: rgba(255, 255, 255, 0.1);
}

.hex-cell.emblem .hex-shape::before {
  background: rgba(30, 30, 44, 0.7);
}

.hex-cell.emblem span {
  font-size: var(--emblem-font, 22px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

/* 等級徽章：格子頂端的膠囊（仿遊戲的 2 位數字） */
.hex-badge {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  min-width: var(--badge-min, 30px);
  text-align: center;
  padding: 0 var(--badge-pad, 7px);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--type-color, var(--accent)) 65%, white);
  background: color-mix(in srgb, var(--type-color, var(--accent)) 40%, #101018);
  color: #ffffff;
  font-size: var(--badge-font, 11px);
  font-weight: 700;
  letter-spacing: 1px;
}

/* 編輯列位於彈窗底部固定列（modal-footer）內：吃滿左側剩餘寬度，按鈕靠右。 */
.hex-editor {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

/* 底列壓縮＋高度固定（含編輯列的高度），選取/取消選取核心時彈窗高度不跳動。 */
.modal-surface.manage .modal-footer {
  padding: 8px 16px;
  min-height: 60px;
}

.hex-editor .skill-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.hex-editor .skill-name-cell img {
  width: 32px;
  height: 32px;
}

.hex-editor .skill-title {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 標題列／彈窗標題的角色名稱小字 */
.page-title-sub {
  margin-left: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.modal-title-sub {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* 素材一覽表：Excel 式拖曳選取（列高亮＋範圍小計） */
.cost-table {
  user-select: none;
  table-layout: fixed; /* 三欄平均分配 */
}

.cost-table tbody tr[data-cost-row] {
  cursor: cell;
}

.cost-table tbody tr.sel td {
  background: var(--accent-soft);
}

/* 選取小計＝滿級總計列內的右側區段（同一物件；未選取時隱藏、列寬高不變） */
.cost-select-sum {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}

.cost-select-sum[hidden] {
  display: none;
}