/* FFXIV 巨集產生器 — 工具自身 layout / grid
   Token 全接 portal tokens.css，禁寫死 hex / font-size。
   Codex utility class 已套在 index.html，本檔只補工具特有 layout。
*/

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans, "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif);
  background:
    var(--pattern-overlay),
    var(--pattern-scanline),
    var(--gradient-body, linear-gradient(135deg, #0d1b2a, #1a1f2e, #2b3450));
  background-attachment: fixed;
  color: var(--color-text, #f5f5f5);
  min-height: 100vh;
  padding: var(--space-3, 12px);
  padding-top: var(--space-5, 24px);
}

/* === 主容器 === */
main.codex-container {
  max-width: var(--container-max, 1320px);
  margin: 0 auto;
  display: grid;
  gap: var(--space-4, 16px);
}

/* .page-header / .page-header h1 / .page-header h1 .sub 已搬到 portal header.css 當共用 utility */
.page-subtitle {
  margin: var(--space-1, 4px) 0 0;
  color: var(--color-text-muted, #b0bdd0);
}

/* === Section 共用 === */
.editor-section,
.preview-section,
.saved-section,
.hint-section {
  padding: var(--space-4, 16px);
  position: relative;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  margin: 0 0 var(--space-3, 12px);
  flex-wrap: wrap;
}
.section-header h2 { margin: 0; }

.line-counter {
  color: var(--color-text-muted, #b0bdd0);
}

/* === 編輯模式切換（行式 / 文本） — 跟 h2 同 header 行 === */
.editor-mode-toggle {
  display: inline-flex;
  gap: 0;
  margin-left: auto;  /* 靠最右，跟 counter 同 header 行不跳位 */
  border: 1px solid var(--accent, var(--color-accent-cyan));
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: var(--color-surface, rgba(20, 30, 50, 0.4));
}
.editor-mode-btn {
  background: transparent;
  color: var(--color-text-muted, #b0bdd0);
  border: 0;
  padding: 6px 14px;
  font-size: var(--fs-small, 0.85rem);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.editor-mode-btn:hover {
  background: var(--color-surface-hover, rgba(78, 201, 208, 0.1));
  color: var(--color-text, #f5f5f5);
}
.editor-mode-btn.active {
  background: var(--accent, var(--color-accent-cyan));
  color: var(--color-bg, #0d1b2a);
  font-weight: var(--fw-semibold, 600);
}

/* === 整段文本編輯框 === */
.macro-text-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-3, 12px);
}
.macro-text-edit {
  width: 100%;
  min-height: 320px;
  font-family: "MS Gothic", "Sarasa Mono TC", "Sarasa Mono SC",
               "Noto Sans Mono CJK TC", "Source Han Mono TC",
               "Hiragino Sans GB", "Microsoft YaHei", monospace;
  font-size: var(--fs-body, 0.95rem);
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  resize: vertical;
}
.macro-text-hint {
  color: var(--color-text-muted, #b0bdd0);
  margin: 0;
}
.macro-text-wrap[hidden],
.macro-lines[hidden] { display: none !important; }

/* === 槽位詳情：圖示編輯區 === */
.slot-detail-edit__icon-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-2, 8px) 0;
  margin-bottom: var(--space-2, 8px);
}
.slot-detail-edit__icon-preview {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface, rgba(20, 30, 50, 0.4));
  border: 1px solid var(--color-border, rgba(78, 201, 208, 0.3));
  border-radius: var(--radius-md, 6px);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, transform 0.1s;
}
.slot-detail-edit__icon-preview:hover {
  border-color: var(--accent);
  transform: scale(1.04);
}
.slot-detail-edit__icon-preview.expanded {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.slot-detail-edit__icon-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
}
.slot-detail-edit__icon-expand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
  background: var(--color-surface, rgba(20, 30, 50, 0.3));
  border: 1px solid var(--color-border, rgba(78, 201, 208, 0.2));
  border-radius: var(--radius-md, 6px);
}
.slot-detail-edit__icon-expand[hidden] { display: none !important; }
.slot-detail-edit__icon-input-row {
  display: flex;
  gap: var(--space-1, 4px);
  align-items: center;
}
.slot-detail-edit__icon-input {
  font-family: "Consolas", "Courier New", monospace;
  font-size: var(--fs-small, 0.85rem);
  width: 100px;
  flex: 0 0 auto;
  text-transform: uppercase;
}
.slot-detail-edit__icon-reset {
  padding: 4px 8px;
  font-size: var(--fs-small, 0.85rem);
}
.slot-detail-edit__icon-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(78, 201, 208, 0.04);
  border-radius: var(--radius-sm, 4px);
}
.slot-detail-edit__icon-pick {
  width: 36px;
  height: 36px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface, rgba(20, 30, 50, 0.4));
  border: 1px solid var(--color-border, rgba(78, 201, 208, 0.2));
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.slot-detail-edit__icon-pick:hover {
  border-color: var(--accent);
  transform: scale(1.08);
}
.slot-detail-edit__icon-pick.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.slot-detail-edit__icon-hint {
  color: var(--color-text-muted, #b0bdd0);
  margin: 2px 0 0;
}

/* === MacroLine 編輯區 === */
.macro-lines {
  display: grid;
  gap: var(--space-2, 8px);
}

/* === 自製 Combobox（popup 用 fixed 跳出 ancestor clip-path / overflow） ===
   popup append 到 document.body，避開 codex-tablet 的切角 clip-path 截斷。
   top/left/width 由 JS 計算（getBoundingClientRect）。 */
.combobox-popup {
  position: fixed;
  z-index: var(--z-modal, 1000);
  background: var(--color-surface, #1b263b);
  border: 1px solid var(--accent, var(--color-accent-cyan));
  border-radius: var(--radius-md, 8px);
  max-height: 480px;
  overflow-y: auto;
  box-shadow: var(--shadow-mystical, 0 8px 24px rgba(0, 0, 0, 0.4));
  padding: 4px 0;
}
.combobox-item {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-body, 13px);
  line-height: var(--lh-snug, 1.3);
}
.combobox-item.highlighted,
.combobox-item:hover {
  background: var(--color-surface-hover, #243349);
}
.combobox-item__main {
  color: var(--color-text, #f5f5f5);
  font-family: var(--font-mono, monospace);
}
.combobox-item__main strong {
  color: var(--accent, var(--color-accent-cyan));
  font-weight: var(--fw-semibold, 600);
}
.combobox-item__sub {
  color: var(--color-text-muted, #b0bdd0);
  font-size: var(--fs-small, 11px);
}
.combobox-empty {
  padding: 8px 12px;
  color: var(--color-text-muted, #b0bdd0);
  font-style: italic;
  font-size: var(--fs-small, 11px);
}
.combobox-group-header {
  padding: 8px 10px 5px;
  font-size: var(--fs-body, 14px);
  color: var(--accent, var(--color-accent-cyan));
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.03em;
  background: rgba(78, 201, 208, 0.1);
  border-top: 1px solid var(--color-border, #2f3650);
}
.combobox-group-header:first-child { border-top: none; }

.macro-line {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr auto;
  gap: var(--space-2, 8px);
  align-items: start;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-surface, #1b263b);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-md, 8px);
  position: relative;
}
.macro-line:hover {
  border-color: var(--accent, var(--color-accent-cyan));
}

.macro-line__index {
  position: absolute;
  top: -10px;
  left: var(--space-2, 8px);
  background: var(--color-surface-hover, #243349);
  color: var(--accent, var(--color-accent-cyan));
  font-size: var(--fs-small, 11px);
  padding: 1px 6px;
  border-radius: var(--radius-xs, 4px);
  border: 1px solid var(--color-border, #2f3650);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.05em;
}

.macro-line__params {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  align-items: center;
  min-width: 0;
}

.macro-line__params .codex-field {
  flex: 1 1 200px;
  min-width: 0;
}
.macro-line__params .codex-field--narrow {
  flex: 0 0 140px;
}

.macro-line__params .codex-input,
.macro-line__params .codex-select {
  width: 100%;
}

.macro-line__remove {
  align-self: center;
}

.macro-line__placeholder-btn {
  flex: 0 0 auto;
}

/* === 編輯區 actions === */
.editor-actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
  flex-wrap: wrap;
}
/* 「＋ 新增一行」改放編輯區頂端 → 跟下方 macroLines / textarea 拉開距離 */
.editor-actions--top {
  margin-top: 0;
  margin-bottom: var(--space-3, 12px);
}

/* === 預覽區 === */
.preview-output {
  background: var(--color-bg, #0d1b2a);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  margin: 0;
  min-height: 100px;
  max-height: 320px;
  overflow-x: auto;
  overflow-y: auto;
  white-space: pre;
  color: var(--color-text, #f5f5f5);
  font-family: var(--font-mono, "Consolas", "Courier New", monospace);
  line-height: var(--lh-normal, 1.5);
  cursor: text;
  user-select: text;
}
.preview-output:empty::before,
.preview-output[data-empty="true"] {
  color: var(--color-text-muted, #b0bdd0);
}

.preview-actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
  flex-wrap: wrap;
}

/* === 已存巨集清單 === */
.saved-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2, 8px);
}

.saved-empty {
  color: var(--color-text-muted, #b0bdd0);
  text-align: center;
  padding: var(--space-4, 16px);
}

.saved-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2, 8px);
  align-items: center;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-surface, #1b263b);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-md, 8px);
  transition: border-color var(--transition-fast, 0.15s);
}
.saved-item:hover {
  border-color: var(--accent, var(--color-accent-cyan));
}

.saved-item__name {
  font-weight: var(--fw-semibold, 600);
  color: var(--accent, var(--color-accent-cyan));
}

.saved-item__meta {
  color: var(--color-text-muted, #b0bdd0);
  margin-left: var(--space-2, 8px);
}

.saved-item__actions {
  display: flex;
  gap: var(--space-1, 4px);
  flex-wrap: nowrap;
}

/* === 巨集快速調整區（貼別人巨集 → 改 → 複製） === */
.paste-section {
  padding: var(--space-4, 16px);
}

.paste-input-field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3, 12px);
}

.paste-input {
  width: 100%;
  min-height: 120px;
  font-family: var(--font-mono, "Consolas", "Courier New", monospace);
  line-height: var(--lh-normal, 1.5);
  resize: vertical;
}

.paste-stats {
  margin: var(--space-1, 4px) 0 0;
  color: var(--color-text-muted, #b0bdd0);
  font-family: var(--font-mono, monospace);
}

.paste-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}
.paste-group h3 { margin: 0; }

.paste-hint {
  margin: 0;
  color: var(--color-text-muted, #b0bdd0);
}
.paste-hint code {
  display: inline-block;
  padding: 1px 6px;
  background: var(--color-bg, #0d1b2a);
  border-radius: var(--radius-xs, 4px);
}

.paste-actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
  flex-wrap: wrap;
}

.paste-explain {
  margin-top: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--color-bg, #0d1b2a);
  border: 1px dashed var(--color-border, #2f3650);
  border-radius: var(--radius-md, 8px);
}
.paste-explain h3 {
  margin: 0 0 var(--space-1, 4px);
  color: var(--accent, var(--color-accent-cyan));
}

.explain-list {
  margin: var(--space-2, 8px) 0 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--space-2, 8px);
}
.explain-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3, 12px);
  align-items: start;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-surface, #1b263b);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
}
.explain-line::marker {
  color: var(--accent, var(--color-accent-cyan));
  font-family: var(--font-mono, monospace);
}
.explain-original {
  font-family: var(--font-mono, "Consolas", "Courier New", monospace);
  color: var(--color-text, #f5f5f5);
  font-size: var(--fs-body, 13px);
  white-space: pre-wrap;
  word-break: break-word;
  border-right: 1px dashed var(--color-border, #2f3650);
  padding-right: var(--space-2, 8px);
  line-height: var(--lh-snug, 1.3);
}
.explain-desc {
  color: var(--color-text-muted, #b0bdd0);
  font-size: var(--fs-body, 13px);
  line-height: var(--lh-normal, 1.5);
}
.explain-line--unknown .explain-desc {
  color: var(--color-warn, #e8a45a);
}

@media (max-width: 700px) {
  .explain-line {
    grid-template-columns: 1fr;
  }
  .explain-original {
    border-right: none;
    border-bottom: 1px dashed var(--color-border, #2f3650);
    padding-right: 0;
    padding-bottom: var(--space-1, 4px);
  }
}
.explain-token {
  display: inline-block;
  padding: 0 4px;
  margin: 0 2px;
  background: var(--color-surface, #1b263b);
  border-radius: var(--radius-xs, 4px);
  font-size: var(--fs-small, 11px);
  color: var(--accent, var(--color-accent-cyan));
  font-family: var(--font-mono, monospace);
}

.bulk-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
.bulk-row .codex-field {
  flex: 1 1 180px;
  min-width: 0;
}
.bulk-row .codex-field .codex-select,
.bulk-row .codex-field .codex-input {
  width: 100%;
}
.bulk-row .codex-btn {
  flex: 0 0 auto;
  align-self: flex-end;
}

.bulk-arrow {
  color: var(--accent, var(--color-accent-cyan));
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-h3, 18px);
  padding-bottom: 6px;
  flex: 0 0 auto;
}

.bulk-quick {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  flex-wrap: wrap;
  margin-top: var(--space-1, 4px);
}
.bulk-quick-label {
  color: var(--color-text-muted, #b0bdd0);
  margin-right: var(--space-1, 4px);
}
.bulk-quick-btn {
  padding: 4px 10px;
  font-size: var(--fs-small, 11px);
}

@media (max-width: 700px) {
  .bulk-row { flex-direction: column; align-items: stretch; }
  .bulk-arrow { display: none; }
  .bulk-row .codex-btn { width: 100%; }
}

/* === 提醒區 === */
.hint-list {
  margin: var(--space-2, 8px) 0 0;
  padding-left: var(--space-4, 16px);
  color: var(--color-text-muted, #b0bdd0);
}
.hint-list li { margin-bottom: var(--space-1, 4px); }
.hint-list strong { color: var(--color-warn, #e8a45a); }

/* === Modal hidden 修正 ===
   portal header.css 的 .codex-modal-overlay 套 display:flex，會覆蓋 HTML
   `[hidden]` 屬性的 user-agent display:none。明確覆寫一條救兩個 modal。
*/
.codex-modal-overlay[hidden] { display: none !important; }

/* === Picker Modal (placeholder / SE) === */
.picker-modal {
  max-width: 540px;
}

.picker-tabs {
  display: flex;
  gap: var(--space-1, 4px);
  border-bottom: 1px solid var(--color-border, #2f3650);
  margin-bottom: var(--space-3, 12px);
  flex-wrap: wrap;
}

.picker-tab {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #b0bdd0);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-body, 13px);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast, 0.15s);
}
.picker-tab:hover {
  color: var(--accent, var(--color-accent-cyan));
}
.picker-tab.active {
  color: var(--accent, var(--color-accent-cyan));
  border-bottom-color: var(--accent, var(--color-accent-cyan));
}

.picker-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-1, 4px);
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-1, 4px);
}

.picker-token {
  background: var(--color-surface, #1b263b);
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text, #f5f5f5);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-small, 11px);
  text-align: left;
  transition: all var(--transition-fast, 0.15s);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.picker-token:hover {
  border-color: var(--accent, var(--color-accent-cyan));
  background: var(--color-surface-hover, #243349);
}
.picker-token__code {
  font-family: var(--font-mono, monospace);
  color: var(--accent, var(--color-accent-cyan));
  font-size: var(--fs-code, 0.875em);
}
.picker-token__label {
  color: var(--color-text-muted, #b0bdd0);
}

.modal-hint {
  margin: var(--space-2, 8px) 0 0;
  color: var(--color-text-muted, #b0bdd0);
}
.modal-hint.warn { color: var(--color-warn, #e8a45a); }
.modal-hint.danger { color: var(--color-danger, #e57373); }

/* === Emote select 用 native select + datalist hint === */
.emote-select-wrap {
  display: flex;
  gap: var(--space-1, 4px);
  align-items: center;
  flex: 1 1 200px;
}
.emote-select-wrap .codex-select { flex: 1; min-width: 0; }
.emote-toggle-all {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: var(--fs-small, 11px);
}

/* === Responsive：mobile 編輯區單欄 === */
@media (max-width: 700px) {
  body { padding: var(--space-2, 8px); padding-top: var(--space-4, 16px); }
  .macro-line {
    grid-template-columns: 1fr;
    gap: var(--space-2, 8px);
  }
  .macro-line__index {
    position: static;
    align-self: flex-start;
  }
  .macro-line__remove {
    align-self: stretch;
  }
  .preview-actions, .editor-actions { flex-direction: column; }
  .preview-actions .codex-btn, .editor-actions .codex-btn { width: 100%; }
  .saved-item { grid-template-columns: 1fr; }
}

/* === Focus 維持 (a11y) — header.css 已提供全域 :focus-visible，這裡不額外處理 === */

/* ============ 主分頁 tab nav (v2 加) ============ */
.tab-nav {
  display: flex;
  gap: var(--space-1, 4px);
  border-bottom: 1px solid var(--color-border, #2f3650);
  margin-bottom: var(--space-3, 12px);
  flex-wrap: wrap;
}
.tab-nav__btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #b0bdd0);
  padding: var(--space-2, 8px) var(--space-3, 14px);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-h3, 16px);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast, 0.15s);
  font-weight: var(--fw-semibold, 600);
}
.tab-nav__btn:hover { color: var(--accent, var(--color-accent-cyan)); }
.tab-nav__btn.active {
  color: var(--accent, var(--color-accent-cyan));
  border-bottom-color: var(--accent, var(--color-accent-cyan));
}

.tab-panel {
  display: grid;
  gap: var(--space-4, 16px);
}
.tab-panel[hidden] { display: none; }

/* ============ 巨集庫頁 ============ */
.library-section {
  padding: var(--space-4, 16px);
}
.library-header {
  margin-bottom: var(--space-3, 12px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--color-border, #2f3650);
}
.library-header h2 { margin: 0; }
.library-hint {
  margin: var(--space-1, 4px) 0 0;
  color: var(--color-text-muted, #b0bdd0);
}
.library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg, #0d1b2a);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-md, 8px);
  flex-wrap: wrap;
}

.book-tabs {
  display: flex;
  gap: var(--space-1, 4px);
}
.book-tab {
  background: var(--color-surface, #1b263b);
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text, #f5f5f5);
  padding: var(--space-1, 6px) var(--space-3, 14px);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-body, 13px);
  border-radius: var(--radius-md, 8px);
  transition: all var(--transition-fast, 0.15s);
}
.book-tab:hover { border-color: var(--accent); }
.book-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.book-tab__count {
  margin-left: var(--space-1, 4px);
  color: var(--color-text-muted, #b0bdd0);
  font-size: var(--fs-small, 11px);
}
.book-tab.active .book-tab__count { color: var(--accent); }

.library-io {
  display: flex;
  gap: var(--space-1, 4px);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  max-width: 660px;       /* 限制總寬度 → 每 card ~63px，留更多空間給右側 panel */
  padding: var(--space-2, 8px);
  background: var(--color-bg, #0d1b2a);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-md, 8px);
  box-shadow: inset 0 0 0 1px rgba(78, 201, 208, 0.05);
}

.slot-card {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2px;
  background: var(--color-surface, #1b263b);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  cursor: grab;
  transition: all var(--transition-fast, 0.15s);
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.slot-card:active { cursor: grabbing; }
.slot-card:hover {
  border-color: var(--accent);
  background: var(--color-surface-hover, #243349);
}
.slot-card[data-empty="true"] {
  opacity: 0.35;
  border-style: dashed;
  background: transparent;
  cursor: default;
}
.slot-card[data-empty="true"]:hover { opacity: 0.7; }
.slot-card.dragging { opacity: 0.4; }
.slot-card.drag-over {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--accent-soft);
  transform: scale(1.05);
}
.slot-card--selected {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.slot-card__num {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  color: var(--color-text-muted, #b0bdd0);
  font-family: var(--font-mono, monospace);
  pointer-events: none;
}
.slot-card__icon {
  font-size: 1.5em;
  line-height: 1;
  margin-top: 8px;
}
.slot-card__iconimg {
  width: 38px;
  height: 38px;
  margin-top: 6px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.slot-card__title {
  font-size: 10px;
  color: var(--color-text, #f5f5f5);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
  max-height: 2.4em;
  line-height: 1.15;
  padding: 0 2px;
}
.slot-card__placeholder {
  color: var(--color-text-muted, #b0bdd0);
  font-size: 20px;
  margin-top: 18px;
  font-weight: bold;
}
.slot-card--highlight {
  animation: slot-highlight-pulse 1.5s ease-out;
}
@keyframes slot-highlight-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent); }
  50%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* mobile：grid 縮成 5 col */
@media (max-width: 700px) {
  .book-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
}

/* ============ 巨集庫左右兩欄 layout ============ */
.library-layout {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(320px, 1fr);
  gap: var(--space-3, 12px);
  align-items: start;
}
@media (max-width: 1100px) {
  .library-layout { grid-template-columns: 1fr; }
}

/* ============ 右側 slot 詳情 panel ============ */
.slot-detail-panel {
  background: var(--color-surface, #1b263b);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  position: sticky;
  top: var(--space-3, 12px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(78, 201, 208, 0.08);
}
@media (max-width: 1100px) {
  .slot-detail-panel {
    position: static;
    max-height: none;
  }
}
.slot-detail-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--color-border, #2f3650);
}
.slot-detail-panel__header h3 { margin: 0; }
.slot-detail-panel__body {
  flex: 1;
  overflow-y: auto;
  min-height: 480px;                          /* 確保 15 行 input + title 全顯 */
  max-height: calc(100vh - 260px);            /* 跟 viewport 走，扣 header + actions + padding */
}
.slot-detail-panel__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--color-border, #2f3650);
}
.slot-detail-panel__actions-row {
  display: flex;
  gap: var(--space-1, 4px);
}
.slot-detail-panel__actions-row .codex-btn { flex: 1; }
.slot-detail-panel__actions .codex-btn { width: 100%; }
.slot-detail-panel__actions .codex-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* === Game-like 預覽 block（token 彩色 chip 化） === */
.slot-detail__preview {
  background: var(--color-bg, #0d1b2a);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
  max-height: 200px;
  overflow-y: auto;
}
.slot-detail__preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--color-border, #2f3650);
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--color-text-muted, #b0bdd0);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.slot-detail__preview-line {
  /* CJK mono only — 跟 textarea 同 stack 確保半形 / 全形寬度一致 */
  font-family: "MS Gothic", "Sarasa Mono TC", "Sarasa Mono SC",
               "Noto Sans Mono CJK TC", "Source Han Mono TC",
               "Hiragino Sans GB", "Microsoft YaHei", monospace;
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text, #f5f5f5);
}
.slot-detail__preview-line--empty {
  color: transparent;
  height: 1.7em;
}
.slot-detail__preview-cmd {
  color: var(--accent, var(--color-accent-cyan));
  font-weight: var(--fw-semibold, 600);
  margin-right: 4px;
}

.token-chip {
  display: inline-block;
  padding: 0 5px;
  margin: 0 1px;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.token-chip--se {
  background: rgba(125, 216, 125, 0.18);
  color: var(--color-success, #7dd87d);
  border: 1px solid rgba(125, 216, 125, 0.35);
}
.token-chip--wait {
  background: rgba(232, 164, 90, 0.18);
  color: var(--color-warn, #e8a45a);
  border: 1px solid rgba(232, 164, 90, 0.35);
}
.token-chip--target {
  background: rgba(200, 140, 220, 0.18);
  color: #d8b8e0;
  border: 1px solid rgba(200, 140, 220, 0.35);
}
.token-chip--party {
  background: rgba(140, 180, 220, 0.18);
  color: #b0c8e0;
  border: 1px solid rgba(140, 180, 220, 0.35);
}
.token-chip--vital {
  background: rgba(229, 115, 115, 0.18);
  color: var(--color-danger, #e57373);
  border: 1px solid rgba(229, 115, 115, 0.35);
}
.token-chip--placeholder {
  background: rgba(176, 189, 208, 0.12);
  color: var(--color-text-muted, #b0bdd0);
  border: 1px solid rgba(176, 189, 208, 0.3);
}
.token-chip--marker {
  background: rgba(232, 100, 100, 0.18);
  color: #ff9e9e;
  border: 1px solid rgba(232, 100, 100, 0.4);
}
.token-chip--auto {
  background: rgba(125, 216, 125, 0.22);
  color: var(--color-success, #7dd87d);
  border: 1px solid rgba(125, 216, 125, 0.5);
  font-weight: var(--fw-bold, 700);
}

/* === Inline 編輯（panel 內直接改 title + 15 行）=== */
.slot-detail-edit__title {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-2, 8px);
}
.slot-detail-edit__title-input {
  flex: 1;
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-h3, 16px);
  color: var(--accent, var(--color-accent-cyan));
}
.slot-detail-edit__lines-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.slot-detail-edit__lines-label {
  color: var(--color-text-muted, #b0bdd0);
}
.slot-detail-edit__lines-area {
  width: 100%;
  min-height: 320px;
  /* CJK mono only — 半形 ASCII = 0.5 全形寬，跟遊戲內比例對齊。
     移除 Consolas / Courier 等西方 mono fallback 避免 ASCII 半形字
     被 fallback 到不同字型造成寬度不一致。 */
  font-family: "MS Gothic", "Sarasa Mono TC", "Sarasa Mono SC",
               "Noto Sans Mono CJK TC", "Source Han Mono TC",
               "Hiragino Sans GB", "Microsoft YaHei", monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: var(--space-2, 8px);
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}
.slot-detail-edit__lines-area.modified,
.slot-detail-edit__title-input.modified {
  border-color: var(--color-warn, #e8a45a);
  background: rgba(232, 164, 90, 0.08);
}
.slot-detail__macro-title {
  font-size: var(--fs-h3, 16px);
  color: var(--accent, var(--color-accent-cyan));
  font-weight: var(--fw-semibold, 600);
  margin-bottom: var(--space-2, 8px);
}
.slot-detail__divider {
  height: 1px;
  background: var(--color-border, #2f3650);
  margin: var(--space-2, 8px) 0;
}
.slot-detail__line {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) 0;
  align-items: baseline;
}
.slot-detail__lineno {
  color: var(--color-text-muted, #b0bdd0);
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-small, 11px);
  text-align: right;
}
.slot-detail__linetext {
  font-family: var(--font-mono, monospace);
  color: var(--color-text, #f5f5f5);
  font-size: var(--fs-body, 13px);
  white-space: pre-wrap;
  word-break: break-word;
}
.slot-detail__line--empty .slot-detail__linetext {
  color: var(--color-text-muted, #b0bdd0);
  font-style: italic;
}
.slot-detail__empty {
  text-align: center;
  padding: var(--space-4, 16px);
  color: var(--color-text-muted, #b0bdd0);
}

/* ============ 存到槽位 modal ============ */
.save-slot-bookchoice {
  display: flex;
  gap: var(--space-3, 12px);
  padding: var(--space-1, 4px) 0;
}
.save-slot-bookchoice label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

/* ============ 匯出警告 modal ============ */
.export-warn-modal {
  max-width: 600px;
}
.export-steps {
  margin: var(--space-2, 8px) 0;
  padding-left: var(--space-4, 18px);
}
.export-steps li {
  margin-bottom: var(--space-2, 8px);
  line-height: 1.5;
}
.export-steps code {
  word-break: break-all;
}