/* FXO デスクトップ版 UI。
   Web 版（野澤組デザインシステム）とは意図的に別系統。Maya / Blender / CAD 系の
   プロ向けソフトに寄せた高密度・低彩度のワークベンチ UI。

   - 配色は data-theme="dark|light"（system はスクリプト側で実値に解決する）
   - 背景ガラスは data-blur="mica|acrylic|tabbed|none"。DWM がウィンドウ背後をぼかし、
     パネルをアルファ合成することで「リキッドグラス」に見せる。
   - パネル／アプリ背景の不透明度は --panel-a / --app-a（設定の透過率スライダが更新）
   - 密度は data-density="compact|comfortable"、data-motion="off" でアニメ無効化 */

/* ── hidden 属性を確実に効かせる ──
   ブラウザ既定の [hidden] { display: none } は「要素セレクタ + クラス」より
   詳細度が低く、.update-chip { display: inline-flex } のような指定に負ける。
   結果、JS で el.hidden = true にしても消えない要素が出る（更新チップが
   最新版でも出続ける、AI のキー欄がローカル選択時も出る等）。
   個別に .x[hidden] を書き足すと必ず書き漏れるので、ここで一括して効かせる。 */
[hidden] {
  display: none !important;
}

/* ── トークン ── */

:root {
  --accent: 74 158 255; /* R G B（設定のアクセント色で差し替える） */
  --panel-a: 0.67;
  --app-a: 0.22;

  --radius: 3px;
  --radius-lg: 6px;
  --row-h: 22px;
  --head-h: 26px;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
  --fs: 12px;
  --fs-sm: 11px;
  --fs-xs: 10px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 120ms;
}

:root[data-theme="dark"] {
  --app-rgb: 20 20 23;
  --panel-rgb: 32 32 36;
  --head-rgb: 42 42 47;
  --sunken-rgb: 14 14 16;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: rgba(255, 255, 255, 0.88);
  --text-2: rgba(255, 255, 255, 0.55);
  --text-3: rgba(255, 255, 255, 0.32);
  --hover: rgba(255, 255, 255, 0.06);
  --active: rgba(255, 255, 255, 0.1);
  --skel-base: rgba(255, 255, 255, 0.06);
  --skel-shine: rgba(255, 255, 255, 0.13);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --crit: #f2555a;
  --major: #f0993f;
  --minor: #e7c34c;
  --info: #6fa8cc;
  --ok: #56b877;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --app-rgb: 232 232 236;
  --panel-rgb: 250 250 252;
  --head-rgb: 238 238 242;
  --sunken-rgb: 244 244 247;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.2);
  --text: rgba(0, 0, 0, 0.86);
  --text-2: rgba(0, 0, 0, 0.55);
  --text-3: rgba(0, 0, 0, 0.35);
  --hover: rgba(0, 0, 0, 0.05);
  --active: rgba(0, 0, 0, 0.09);
  --skel-base: rgba(0, 0, 0, 0.05);
  --skel-shine: rgba(0, 0, 0, 0.09);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  --crit: #c4353a;
  --major: #b96a12;
  --minor: #9a7d0a;
  --info: #2f6f96;
  --ok: #1f7a44;
  color-scheme: light;
}

/* ブラー無効時は完全不透明にする（透明ウィンドウの下地が透けないように） */
:root[data-blur="none"] {
  --panel-a: 1;
  --app-a: 1;
}

:root[data-motion="off"] * {
  transition: none !important;
  animation: none !important;
}

/* ── ベース ── */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

html {
  background: rgb(var(--app-rgb) / var(--app-a));
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: var(--fs);
  line-height: 1.45;
  color: var(--text);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

:root[data-density="comfortable"] {
  --row-h: 28px;
  --head-h: 30px;
  --fs: 13px;
  --fs-sm: 12px;
}

/* 開発者限定バナー（ヘッダー上部。ステータスバー約2個分の高さ・赤で強調） */
.dev-banner {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: repeating-linear-gradient(
    45deg,
    #c0392b,
    #c0392b 14px,
    #a5281c 14px,
    #a5281c 28px
  );
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-app-region: no-drag;
}
.dev-banner[hidden] {
  display: none;
}

/* 有効期限切れオーバーレイ（使用をブロック） */
.expired-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 8, 0.92);
}
.expired-box {
  max-width: 460px;
  padding: 26px 30px;
  border: 1px solid #c0392b;
  border-radius: 10px;
  background: rgb(26 20 20 / 0.96);
  text-align: center;
}
.expired-title {
  font-size: 18px;
  font-weight: 700;
  color: #ff8a80;
  margin-bottom: 10px;
}
.expired-body {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
  user-select: text;
  -webkit-user-select: text;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
  background: transparent;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── アプリバー ── */

.appbar {
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 10px;
  background: rgb(var(--head-rgb) / var(--panel-a));
  border-bottom: 1px solid var(--line);
}

.appbar-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brand-mark {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgb(var(--accent));
}

.brand-sub {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

/* プロジェクトチップ（全ツール共有のサーバーフォルダ。クリックで変更） */
.project-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 10px;
  max-width: 220px;
  border: 1px solid rgb(var(--accent) / 0.45);
  border-radius: 999px;
  background: rgb(var(--accent) / 0.12);
  color: var(--text);
  font-size: var(--fs-xs);
  cursor: pointer;
  white-space: nowrap;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}
.project-chip:hover {
  background: rgb(var(--accent) / 0.2);
}
.project-chip .project-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-chip.empty {
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
  color: var(--text-3);
}

.appbar-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.appbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.engine-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

/* ── 画面ID（ロケーションコード） ──
   「どの画面のどこの話か」を指すための番号。控えめに出し、クリックでコピーする。 */
.loc-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.loc-chip:hover {
  color: rgb(var(--accent));
  border-color: rgb(var(--accent) / 0.6);
}
.loc-badge {
  margin-left: auto; /* 見出しに spacer が無い場合も右端へ寄せる */
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--text-3);
  opacity: 0.55;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.loc-badge:hover {
  opacity: 1;
  color: rgb(var(--accent));
  border-color: rgb(var(--accent) / 0.5);
}
/* 設定の節見出しは flex ではないので、バッジだけ右へ回す */
.opt-group-title > .loc-badge {
  float: right;
  margin-left: 8px;
}
body.no-loc-ids .loc-chip,
body.no-loc-ids .loc-badge {
  display: none;
}

/* 移動・スクロールした先を少しの間だけ光らせる（どこへ来たのかを示す） */
@keyframes opt-flash {
  from {
    box-shadow: 0 0 0 2px rgb(var(--accent) / 0.55);
    background: rgb(var(--accent) / 0.1);
  }
  to {
    box-shadow: 0 0 0 2px rgb(var(--accent) / 0);
    background: transparent;
  }
}
.opt-flash {
  border-radius: var(--radius);
  animation: opt-flash 1.6s ease-out;
}
/* アニメ無効時は、点灯だけさせて自然に消す（app.js が 1.8 秒後にクラスを外す） */
:root[data-motion="off"] .opt-flash {
  box-shadow: 0 0 0 2px rgb(var(--accent) / 0.55);
}

/* 更新あり（クリックで更新）。出るのは新しい版があるときだけ */
.update-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  white-space: nowrap;
  color: rgb(var(--accent));
  border: 1px solid rgb(var(--accent) / 0.5);
  background: rgb(var(--accent) / 0.12);
  border-radius: 999px;
  cursor: pointer;
}
.update-chip:hover {
  background: rgb(var(--accent) / 0.22);
}

/* 使用不可オーバーレイ（最低サポート版を下回っている間） */
.blocked-overlay {
  backdrop-filter: blur(4px);
}

/* リソースの更新のお知らせ（検出一覧の先頭） */
.res-update {
  flex-direction: row;
  align-items: flex-start;
}
.res-update-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.res-update-title {
  font-weight: 600;
}
.res-update-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.res-update-name {
  font-weight: 600;
}
.res-update-ver {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.res-update-sum {
  color: var(--text-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ヘッダーのキャッシュ状況（クリックで設定へ） */
.cache-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--head-rgb) / calc(var(--panel-a) * 0.6));
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cache-chip:hover {
  color: var(--text);
  border-color: rgb(var(--accent) / 0.5);
}
.cache-chip > svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* ヘッダーのアカウント / ライセンス表示 */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--head-rgb) / calc(var(--panel-a) * 0.6));
  color: var(--text-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
  max-width: 180px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.account-chip:hover {
  color: var(--text);
  border-color: var(--line-strong);
}
.account-chip svg {
  flex: none;
  opacity: 0.8;
}
.account-chip .account-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-chip.signed-in {
  color: rgb(var(--accent));
  border-color: rgb(var(--accent) / 0.5);
  background: rgb(var(--accent) / 0.1);
}
.account-chip .account-chip-plan {
  font-size: 10px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgb(var(--accent) / 0.18);
  color: rgb(var(--accent));
}

.tool-sep {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--line);
}

/* ── ボタン ── */

.btn {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--hover);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover:not(:disabled) {
  background: var(--active);
}
.btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.btn svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.btn-primary {
  color: #fff;
  background: rgb(var(--accent));
  border-color: rgb(var(--accent));
}
.btn-primary:hover:not(:disabled) {
  background: rgb(var(--accent) / 0.85);
}

.btn-sm {
  height: 20px;
  padding: 0 7px;
  font-size: var(--fs-xs);
}

.icon-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.icon-btn svg {
  width: 15px;
  height: 15px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
}
.check input {
  accent-color: rgb(var(--accent));
  width: 12px;
  height: 12px;
}

/* ── シェル / ツールレール ── */

.shell {
  flex: 1;
  display: flex;
  min-height: 0;
}

.rail {
  flex: none;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  background: rgb(var(--head-rgb) / var(--panel-a));
  border-right: 1px solid var(--line);
}

.rail-btn {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rail-btn svg {
  width: 17px;
  height: 17px;
}
.rail-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.rail-btn.on {
  color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.14);
}
.rail-btn.on::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: rgb(var(--accent));
}
.rail-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.rail-spacer {
  flex: 1;
}

/* ── ステージ / パネル ── */

.stage {
  flex: 1;
  min-width: 0;
  display: flex;
}

.view {
  flex: 1;
  min-width: 0;
  display: flex;
}
.view[hidden] {
  display: none;
}

.panes {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 1px;
  padding: 1px;
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: rgb(var(--panel-rgb) / var(--panel-a));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel-outliner {
  flex: none;
  width: var(--outliner-w, 248px);
}
.panel-inspector {
  flex: none;
  width: var(--inspector-w, 316px);
}
.panel-main {
  flex: 1;
}

.opt-panels {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lod-tris {
  color: var(--text-3);
  font-size: 0.85em;
}

.confirm-line {
  margin: 4px 0;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-all;
}
.confirm-line:empty {
  height: 6px;
}

/* パネルの表示/非表示（全ワークスペース共通。スプリッタも一緒に隠す） */
body.hide-outliner .panel-outliner,
body.hide-outliner .splitter[data-target="outliner"] {
  display: none;
}
body.hide-inspector .panel-inspector,
body.hide-inspector .splitter[data-target="inspector"] {
  display: none;
}

.panel-head {
  flex: none;
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: rgb(var(--head-rgb) / calc(var(--panel-a) * 0.8));
  border-bottom: 1px solid var(--line);
}
.panel-head-sub {
  border-top: 1px solid var(--line);
}

.panel-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

.panel-note {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.panel-spacer {
  flex: 1;
}

.panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 3px;
}
.panel-body-hist {
  flex: none;
  height: 168px;
}
.panel-body-list {
  padding: 0;
}

.placeholder {
  padding: 20px 12px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.7;
}

/* ペイン境界のドラッグハンドル */
.splitter {
  flex: none;
  width: 4px;
  cursor: col-resize;
  border-radius: 2px;
  transition: background var(--dur) var(--ease);
}
.splitter:hover,
.splitter.dragging {
  background: rgb(var(--accent) / 0.5);
}

/* 縦積みセクション（高さ変更・折りたたみ） */
.panel.has-sections {
  overflow: hidden;
}
.vsplit {
  flex: none;
  height: 5px;
  margin: -2px 0;
  cursor: row-resize;
  z-index: 2;
  border-radius: 2px;
  transition: background var(--dur) var(--ease);
}
.vsplit:hover,
.vsplit.dragging {
  background: rgb(var(--accent) / 0.5);
}
.section-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.section-toggle:hover {
  color: var(--text);
}
.panel-head.collapsed .section-toggle,
.panel-head-sub.collapsed .section-toggle {
  transform: rotate(-90deg);
}

/* ── アウトライナ ── */

.res-row {
  width: 100%;
  height: var(--row-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  text-align: left;
  border-radius: 2px;
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.res-row:hover {
  background: var(--hover);
  color: var(--text);
}
.res-row.on {
  background: rgb(var(--accent) / 0.18);
  color: var(--text);
  box-shadow: inset 2px 0 0 rgb(var(--accent));
}
.res-row > svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--text-3);
}
.res-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
}
.res-fw {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-score {
  flex: none;
  width: 24px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* 3D プレビューのモデル一覧: 検索/ソート + 車両バッジ */
.md-file-controls {
  position: sticky;
  top: -3px; /* panel-body の padding ぶん食い込ませて上端に貼り付く */
  z-index: 2;
  margin: -3px -3px 4px;
  padding: 6px;
  background: rgb(var(--panel-rgb) / 0.92);
  backdrop-filter: blur(6px);
  grid-template-columns: 1fr auto auto;
}
.md-badge {
  flex: none;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  line-height: 14px;
  white-space: nowrap;
  background: var(--hover);
  color: var(--text-3);
}
.md-badge.veh {
  background: rgb(var(--accent) / 0.16);
  color: rgb(var(--accent));
}
.md-badge.anim {
  background: rgb(120 190 90 / 0.16);
  color: rgb(110 185 95);
}
.md-badge.extra {
  background: rgb(220 160 60 / 0.16);
  color: rgb(215 160 70);
}
.md-badge.escrow {
  background: rgb(200 80 80 / 0.16);
  color: rgb(210 110 110);
}
.md-badge.dict {
  background: rgb(140 120 220 / 0.16);
  color: rgb(150 135 225);
}

/* 3D プレビューのボディカラー（vehicle_paint 系に反映） */
.veh-colors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.veh-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.veh-color:hover {
  transform: scale(1.12);
}
.veh-color.on {
  box-shadow: 0 0 0 2px rgb(var(--accent));
}
.veh-color-pick {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.veh-color.stock {
  border-radius: 5px; /* 純正色は角丸四角で区別 */
}
.veh-color-sep {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 2px;
}

/* スケールフォーム（GFx）: 埋め込み画像グリッド */
.gx-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.gx-image {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gx-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 4px;
  /* 透過画像が見えるように市松 */
  background:
    repeating-conic-gradient(rgb(128 128 128 / 0.18) 0% 25%, transparent 0% 50%)
    0 0 / 14px 14px;
}
.gx-image-name {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* スケールフォーム: ベクタープレビューのギャラリー */
.gx-prev-note {
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.5;
}
.gx-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.gx-prev {
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: zoom-in;
}
.gx-prev-svg {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-conic-gradient(rgb(128 128 128 / 0.15) 0% 25%, transparent 0% 50%)
    0 0 / 12px 12px;
}
.gx-prev-svg svg {
  width: 100%;
  height: 100%;
}
.gx-prev-name {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gx-scripts {
  max-height: 220px;
  overflow: auto;
}

/* スケールフォーム: 拡大オーバーレイ */
.gx-zoom {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.gx-zoom-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 90vw;
  max-height: 90vh;
}
.gx-zoom-body {
  width: min(80vw, 80vh);
  height: min(80vw, 80vh);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    repeating-conic-gradient(rgb(128 128 128 / 0.15) 0% 25%, transparent 0% 50%)
    0 0 / 20px 20px;
}
.gx-zoom-name {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* エスクロー暗号化監査 */
.es-guard-note { color: rgb(210 150 90); }
.es-guard {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid rgb(var(--accent) / 0.35);
  border-radius: var(--radius);
  background: rgb(var(--accent) / 0.06);
}
.es-guard > svg { flex: none; width: 15px; height: 15px; color: rgb(var(--accent)); margin-top: 1px; }
.es-guard-title { font-weight: 600; color: var(--text); font-size: var(--fs-sm); }
.es-guard-desc { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; margin-top: 2px; }
.es-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.es-dot.ok { background: rgb(110 185 95); }
.es-dot.warn { background: rgb(220 165 70); }
.es-dot.err { background: rgb(214 90 90); }
.es-health {
  padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600;
}
.es-health.ok { background: rgb(110 185 95 / 0.16); color: rgb(110 185 95); }
.es-health.warn { background: rgb(220 165 70 / 0.16); color: rgb(220 165 70); }
.es-health.err { background: rgb(214 90 90 / 0.16); color: rgb(214 90 90); }
.es-flags { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.es-flag {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 6px; border-radius: 3px; font-size: var(--fs-xs);
}
.es-flag:nth-child(odd) { background: rgb(128 128 132 / 0.05); }
.es-flag-verdict {
  flex: none; padding: 0 6px; border-radius: 3px; font-size: 10px;
}
.es-flag-verdict.warn { background: rgb(220 165 70 / 0.16); color: rgb(220 165 70); }
.es-flag-verdict.err { background: rgb(214 90 90 / 0.16); color: rgb(214 90 90); }
.es-flag-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.es-flag-ent { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }

/* エスクロー: 強度≠世代 の警告ボックス */
.es-guard.es-warn {
  border-color: rgb(214 90 90 / 0.4);
  background: rgb(214 90 90 / 0.06);
}
.es-guard.es-warn > svg { color: rgb(214 90 90); }
.es-canlist { display: flex; flex-direction: column; gap: 3px; }
.es-can { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-xs); line-height: 1.45; }
.es-can > svg { flex: none; width: 12px; height: 12px; margin-top: 2px; }
.es-can.yes > svg { color: rgb(110 185 95); }
.es-can.no > svg { color: rgb(214 90 90); }
.es-can.yes { color: var(--text-2); }
.es-can.no { color: var(--text-3); }

/* 高精度指標: リストのミニメーター */
.es-meter {
  flex: none;
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: rgb(128 128 132 / 0.18);
  overflow: hidden;
}
.es-meter-fill { display: block; height: 100%; border-radius: 3px; }
.es-meter-fill.ok { background: rgb(110 185 95); }
.es-meter-fill.warn { background: rgb(220 165 70); }
.es-meter-fill.err { background: rgb(214 90 90); }

/* 判定チップ */
.es-vchip {
  padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600;
}
.es-vchip.ok { background: rgb(110 185 95 / 0.16); color: rgb(110 185 95); }
.es-vchip.warn { background: rgb(220 165 70 / 0.16); color: rgb(220 165 70); }
.es-vchip.err { background: rgb(214 90 90 / 0.16); color: rgb(214 90 90); }

/* 指標の説明（折りたたみ） */
.es-metrics-help { margin: 4px 0 6px; }
.es-metrics-help > summary {
  cursor: pointer; font-size: var(--fs-xs); color: var(--text-3); padding: 3px 0;
}
.es-metrics-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.es-metric-row { display: flex; gap: 8px; font-size: var(--fs-xs); }
.es-metric-name { flex: none; width: 96px; color: var(--text-2); font-weight: 600; }
.es-metric-desc { flex: 1; color: var(--text-3); }

/* 指標テーブル */
.es-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 4px;
}
.es-trow {
  display: grid;
  grid-template-columns: 74px 1fr 32px 40px 44px 48px 40px 32px 32px 28px;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  font-size: 10px;
}
.es-trow:not(:last-child) { border-bottom: 1px solid var(--line); }
.es-thead { background: var(--hover); color: var(--text-3); font-weight: 600; }
.es-trow.flagged { background: rgb(214 90 90 / 0.05); }
.es-tc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tc-n { color: var(--text-2); }
.es-tc-s, .es-tc-m, .es-tc-c { font-family: var(--font-mono); text-align: right; color: var(--text-3); }
.es-tc-m.bad { color: rgb(214 90 90); font-weight: 700; }
.es-thead .es-tc-s, .es-thead .es-tc-m, .es-thead .es-tc-c, .es-thead .es-tc-n { text-align: inherit; font-family: inherit; }
.es-table .es-flag-verdict { font-size: 9px; padding: 0 4px; }

/* エスクロー監査を開いている間は、内容の上に薄い透かしを重ねて撮影・録画を抑止する */
body.escrow-guard [data-view="escrow"] { position: relative; }
body.escrow-guard [data-view="escrow"]::after {
  content: "FXO 暗号化監査 — 復号禁止・持ち出し禁止";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: rgb(128 128 132 / 0.06);
  transform: rotate(-24deg);
  white-space: nowrap;
  letter-spacing: 0.08em;
}

/* スケールフォーム: 解析パイプライン（この GFx で処理できた段階） */
.gx-pl-count {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(var(--accent) / 0.14);
  color: rgb(var(--accent));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}
.gx-pipeline {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gx-pl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: var(--fs-xs);
}
.gx-pl-row:not(:last-child) {
  border-bottom: 1px solid var(--line);
}
.gx-pl-row > svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: rgb(110 185 95);
}
.gx-pl-name {
  flex: 1;
  color: var(--text);
}
.gx-pl-val {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-2);
}
.gx-pl-row.na {
  background: rgb(128 128 132 / 0.04);
}
.gx-pl-row.na > svg { color: var(--text-3); opacity: 0.5; }
.gx-pl-row.na .gx-pl-name { color: var(--text-3); }
.gx-pl-row.na .gx-pl-val { color: var(--text-3); }

/* スケールフォーム: フォント組版プレビュー */
.gx-typeset {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.gx-typeset-stage {
  min-height: 64px;
  max-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    repeating-conic-gradient(rgb(128 128 128 / 0.1) 0% 25%, transparent 0% 50%)
    0 0 / 16px 16px;
}
.gx-typeset-stage svg {
  max-width: 100%;
  max-height: 120px;
}

/* スケールフォーム: フォントのグリフ字形 */
.gx-glyphs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}
.gx-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gx-glyph-svg {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  padding: 5px;
}
.gx-glyph-svg svg {
  width: 100%;
  height: 100%;
}
.gx-glyph-ch {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* スケールフォーム: 逆アセンブル */
.gx-disasm {
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.gx-disasm > summary {
  padding: 5px 8px;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: var(--hover);
  user-select: none;
}
.gx-disasm-pre {
  margin: 0;
  padding: 8px 10px;
  max-height: 320px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre;
}

/* 3D プレビュー: 操作キーの一覧（情報パネル） */
.md-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.md-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.md-key kbd,
.viewer-help kbd {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--hover);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 16px;
  color: var(--text);
}
.md-key-label {
  color: var(--text-3);
}

/* 3D プレビュー: ビュー内ヘルプオーバーレイ（H） */
.viewer-help {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  min-width: 300px;
  max-width: 82%;
  max-height: 86%;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(var(--panel-rgb) / 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.35);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.viewer-help-head {
  margin: 8px 0 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgb(var(--accent));
  letter-spacing: 0.06em;
}
.viewer-help-head:first-child {
  margin-top: 0;
}
.viewer-help-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0;
}
.viewer-help-keys {
  flex: none;
  min-width: 118px;
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
}
.viewer-help-note {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.hist-row {
  width: 100%;
  display: block;
  padding: 4px 6px;
  text-align: left;
  border-radius: 2px;
  color: var(--text-2);
}
.hist-row:hover {
  background: var(--hover);
}
.hist-root {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hist-meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ── 検出結果 ── */

.sev-counts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.count svg {
  width: 11px;
  height: 11px;
}
.count.c-critical svg {
  color: var(--crit);
}
.count.c-major svg {
  color: var(--major);
}
.count.c-minor svg {
  color: var(--minor);
}
.count.c-info svg {
  color: var(--info);
}

.issue {
  width: 100%;
  min-height: var(--row-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.issue:hover {
  background: var(--hover);
}
.issue.on {
  background: rgb(var(--accent) / 0.16);
  box-shadow: inset 2px 0 0 rgb(var(--accent));
}
.issue > svg {
  flex: none;
  width: 13px;
  height: 13px;
}
.issue.s-critical > svg {
  color: var(--crit);
}
.issue.s-major > svg {
  color: var(--major);
}
.issue.s-minor > svg {
  color: var(--minor);
}
.issue.s-info > svg {
  color: var(--info);
}

.issue-main {
  flex: 1;
  min-width: 0;
}
.issue-title {
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.issue-path {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.issue-res {
  flex: none;
  max-width: 140px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 空状態 ── */

.hero {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hero-box {
  max-width: 480px;
  text-align: center;
  padding: 28px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.5));
}
.hero-icon {
  color: var(--text-3);
}
.hero-icon svg {
  width: 26px;
  height: 26px;
}
.hero-title {
  margin: 10px 0 6px;
  font-size: 15px;
  font-weight: 600;
}
.hero-sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 16px;
}
.hero-note {
  margin-top: 16px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.7;
}

.banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px;
  padding: 6px 8px;
  font-size: var(--fs-sm);
  border-radius: var(--radius);
  border: 1px solid var(--crit);
  background: rgb(242 85 90 / 0.12);
}
.banner svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--crit);
}
/* 注意（致命ではないが読んでほしい）。外部送信の告知などに使う */
.banner-warn {
  align-items: flex-start;
  border-color: var(--major);
  background: rgb(240 153 63 / 0.12);
  line-height: 1.5;
}
.banner-warn svg {
  margin-top: 2px;
  color: var(--major);
}

/* ── インスペクタ ── */

.detail {
  padding: 8px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  padding: 0 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  border: 1px solid currentColor;
}
.badge svg {
  width: 11px;
  height: 11px;
}
.badge.s-critical {
  color: var(--crit);
}
.badge.s-major {
  color: var(--major);
}
.badge.s-minor {
  color: var(--minor);
}
.badge.s-info {
  color: var(--info);
}

.detail h3 {
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.field {
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.field-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}
.field-value {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.7;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}
.field-value.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.field-hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.5;
}
/* セクション見出し（設計図パネルの規格・表題欄グループ） */
.field-group-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 10px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.field-group-label:first-child {
  margin-top: 0;
}
/* ── 設計図（ブループリント）プレビュー ── */
.bp-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  background: rgb(var(--sunken-rgb) / 0.6);
}
/* hidden 属性のときは確実に隠す（display:flex が hidden を上書きしないように） */
.bp-stage[hidden] {
  display: none;
}
.bp-stage svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}
.bp-stage.loading {
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease);
}
.bp-stage .placeholder {
  color: var(--text-3);
}
/* 再生成中の進捗表示（フリーズと誤解されないよう明示） */
.bp-progress {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  z-index: 5;
}
.bp-progress[hidden] {
  display: none;
}
.bp-progress-bar {
  position: relative;
  width: min(240px, 60%);
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(var(--accent) / 0.18);
}
.bp-progress-bar span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: rgb(var(--accent));
  animation: bp-indeterminate 1.05s var(--ease) infinite;
}
@keyframes bp-indeterminate {
  0% { left: -40%; }
  100% { left: 100%; }
}
.bp-progress-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: rgb(var(--panel-rgb) / 0.9);
  padding: 3px 12px;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .bp-progress-bar span { animation-duration: 2.4s; }
}
/* 調整コントロール */
.bp-ctrl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
.bp-ctrl label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.bp-ctrl label .val {
  font-family: var(--font-mono);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.bp-ctrl input[type="range"] {
  width: 100%;
}
.bp-views {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.md-export-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
/* ── 自動化・連携 ── */
.auto-console {
  margin-top: 8px;
  max-height: 320px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--sunken-rgb) / 0.6);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.auto-lock {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(var(--accent) / 0.06);
}
.auto-lock p {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.auto-feat {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.7;
}
.md-export-row .md-format-sel {
  flex: 1 1 auto;
  min-width: 0;
}
.md-export-row .btn {
  flex: none;
}
.fix-yes {
  color: var(--ok);
}

/* ── ステータスバー ── */

.statusbar {
  flex: none;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: rgb(var(--head-rgb) / var(--panel-a));
  border-top: 1px solid var(--line);
}
/* 状態アイコン（成功=チェック / 失敗=クロス。待機・処理中はアイコンなし） */
.status-state {
  flex: none;
  display: inline-flex;
  align-items: center;
}
.status-state svg {
  width: 12px;
  height: 12px;
}
.status-state.ok {
  color: var(--ok);
}
.status-state.err {
  color: var(--crit);
}
.status-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
/* プログレスバー（処理中に表示。値がわかるときは determinate、不明なら indeterminate） */
.status-progress {
  flex: none;
  width: 140px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: rgb(var(--accent) / 0.16);
}
.status-progress-bar {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: rgb(var(--accent));
}
.status-progress.determinate .status-progress-bar {
  transition: width 0.2s ease;
}
.status-progress.indeterminate .status-progress-bar {
  width: 35%;
  animation: status-slide 1.15s ease-in-out infinite;
}
@keyframes status-slide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(340%);
  }
}
/* YMAP 俯瞰プラン（ワールド配置の重なり可視化） */
.ym-plan-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}
.ym-plan-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(rgb(var(--accent) / 0.05) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgb(var(--accent) / 0.05) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--bg-1, #0e1014);
  overflow: hidden;
}
.ym-plan {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.ym-plan-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.7;
}
.ym-overlap-list {
  flex: 0 0 auto;
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ym-ov-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-2, rgb(255 255 255 / 0.02));
  text-align: left;
  cursor: pointer;
}
.ym-ov-row:hover {
  border-color: rgb(var(--accent) / 0.5);
}
.ym-ov-row.deep {
  border-color: rgb(var(--crit) / 0.5);
  background: rgb(var(--crit) / 0.07);
}
.ym-ov-names {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.ym-ov-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.ym-ov-tag,
.ym-mlo-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 6px;
  background: rgb(var(--accent) / 0.16);
  color: rgb(var(--accent));
}
.ym-mlo-badge {
  margin-right: 6px;
}
.ym-move-body {
  flex: 0 0 auto;
  max-height: 210px;
}

/* モデル取込（FiveM化）ワークスペース */
.mi-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mi-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-1, #0e1014);
}
.mi-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.mi-stage .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.7;
}
.mi-mat {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
}
.mi-mat-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mi-mat-top .res-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-mat-meta {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-3);
}
.mi-shader {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.14);
  padding: 0 6px;
  border-radius: 6px;
}
.mi-tex {
  font-family: var(--font-mono);
}
.mi-shader-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.mi-shader-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-3);
}
.mi-adjust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.mi-scale {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mi-scale .field-label {
  margin: 0;
  white-space: nowrap;
}
.mi-scale .input {
  width: 90px;
}
.mi-scale-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mi-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.mi-check input {
  margin-top: 2px;
}
.mi-tex-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0;
}
.mi-tex-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.mi-tex-row.missing {
  border-color: rgb(var(--crit) / 0.5);
  background: rgb(var(--crit) / 0.07);
}
.mi-tex-row .mi-tex {
  margin-left: auto;
  color: var(--text-3);
  font-size: 11px;
}
.mi-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mi-step {
  padding: 6px 9px;
  border: 1px dashed var(--border);
  border-radius: 7px;
}
.mi-step-t {
  font-size: 12px;
  font-weight: 600;
}
.mi-step-d {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: pre-line;
  word-break: break-all;
}

/* 読み込み中止ボタン（巨大フォルダを誤選択したときに走査を止める） */
.status-cancel {
  flex: none;
  margin-left: 8px;
  padding: 1px 10px;
  height: 18px;
  border-radius: 9px;
  border: 1px solid rgb(var(--crit) / 0.5);
  background: rgb(var(--crit) / 0.12);
  color: var(--crit);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.status-cancel:hover {
  background: rgb(var(--crit) / 0.22);
}
.status-cancel:disabled {
  cursor: default;
  opacity: 0.6;
}
.status-item {
  font-family: var(--font-mono);
  color: var(--text-3);
  white-space: nowrap;
}
.status-watch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgb(var(--accent));
}
.status-watch svg {
  width: 11px;
  height: 11px;
}
.status-watch:empty {
  display: none;
}

.status-offline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-offline svg {
  width: 11px;
  height: 11px;
}

/* ── JOAAT ── */

.joaat {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px 1fr;
}
.joaat-in {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-right: 1px solid var(--line);
}
.joaat-in .field-label {
  margin-bottom: 6px;
}
.joaat-in textarea {
  flex: 1;
  resize: none;
  padding: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.8));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
.joaat-in textarea:focus {
  border-color: rgb(var(--accent));
}
.joaat-out {
  min-height: 0;
  overflow: auto;
}

.grid {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--head-h);
  padding: 0 8px;
  text-align: left;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  background: rgb(var(--head-rgb));
  border-bottom: 1px solid var(--line);
}
.grid th.th-sort {
  cursor: pointer;
  user-select: none;
}
.grid th.th-sort:hover {
  color: var(--text-2);
}
.grid th.sorted-asc::after {
  content: " ▲";
  color: rgb(var(--accent));
}
.grid th.sorted-desc::after {
  content: " ▼";
  color: rgb(var(--accent));
}
.grid td {
  height: var(--row-h);
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  user-select: text;
  -webkit-user-select: text;
}
.grid tr:hover td {
  background: var(--hover);
  color: var(--text);
}

/* ── フォーム入力 ── */

.input {
  height: 22px;
  padding: 0 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.9));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
.input:focus {
  border-color: rgb(var(--accent));
}
select.input {
  width: 100%;
  height: 24px;
  cursor: pointer;
}
#hnd-filter {
  width: 180px;
}
#hnd-value {
  width: 100%;
  font-family: var(--font-mono);
}

.btn-danger {
  color: #fff;
  background: var(--crit);
  border-color: var(--crit);
}
.btn-danger:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* ── ハンドリング一括編集 ── */

.col-check {
  width: 26px;
  padding-left: 8px;
}
.col-check input {
  accent-color: rgb(var(--accent));
  width: 12px;
  height: 12px;
  cursor: pointer;
}

.hnd-actions {
  display: flex;
  gap: 6px;
}
.hnd-actions .btn {
  flex: 1;
  justify-content: center;
}

.diff-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.diff-row svg {
  flex: none;
  width: 11px;
  height: 11px;
  color: var(--text-3);
}
.diff-veh {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.diff-field {
  color: var(--text-3);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diff-before {
  color: var(--text-3);
  text-decoration: line-through;
}
.diff-after {
  color: var(--ok);
}

/* ── 起動エラー表示（boot.js） ── */

.crash {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  max-height: 60vh;
  overflow: auto;
  padding: 10px 12px;
  background: rgb(120 20 24 / 0.96);
  color: #fff;
  border-bottom: 1px solid #f2555a;
}
.crash-item + .crash-item {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.crash-title {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.crash-detail {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}

/* ── 健康診断 ── */

.hl-score {
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.hl-score b {
  font-size: 30px;
  font-weight: 700;
}
.hl-score span {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.hl-score .hl-grade {
  font-size: 22px;
  font-weight: 800;
  margin-left: 10px;
}
.hl-status {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.hl-repid {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: 10px;
  user-select: text;
  -webkit-user-select: text;
}
/* 重大度内訳（5 段階） */
.hl-sevcounts {
  display: flex;
  gap: 5px;
  margin: 8px 0 12px;
}
.hl-sevcell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px;
  border: 1px solid var(--line);
  border-radius: 5px;
  border-top-width: 2px;
}
.hl-sevcell.s-critical { border-top-color: var(--crit); }
.hl-sevcell.s-major { border-top-color: var(--major); }
.hl-sevcell.s-minor { border-top-color: var(--minor); }
.hl-sevcell.s-info { border-top-color: var(--info, #64748b); }
.hl-sevcell .sc-num {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hl-sevcell .sc-lab {
  font-size: 10px;
  color: var(--text-3);
}
/* 分野別スコアのミニバー */
.hl-cats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 4px 0 12px;
}
.hl-cat {
  display: grid;
  grid-template-columns: 8.5em 1fr 2.2em;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
}
.hl-cat .hc-lab {
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hl-cat .hc-bar {
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--sunken-rgb) / 0.8);
  overflow: hidden;
}
.hl-cat .hc-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.hl-cat .hc-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.issue-id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
/* 修復前後（改善レポート） */
.hl-remed {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgb(var(--sunken-rgb) / 0.5);
}
.hl-ba {
  display: flex;
  gap: 10px;
  margin: 6px 0 2px;
}
.hl-ba-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hl-ba-cell .ba-lab {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.hl-ba-cell .ba-val {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hl-ba-cell .ba-b {
  color: var(--text-3);
}
.hl-ba-cell .ba-arrow {
  color: var(--text-3);
  font-weight: 400;
}
/* 新旧比較ビュー */
.diff-view {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 12px;
}
.diff-warn {
  border: 1px solid var(--major);
  border-left-width: 3px;
  color: var(--major);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: var(--fs-xs);
  margin-bottom: 6px;
}
.diff-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(var(--sunken-rgb) / 0.5);
  margin-bottom: 8px;
}
.dvs-col {
  text-align: center;
}
.dvs-cl {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dvs-sc {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dvs-gr {
  font-size: 14px;
  font-weight: 800;
}
.dvs-id {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.dvs-mid {
  text-align: center;
}
.dvs-arrow {
  font-size: 22px;
  color: var(--text-3);
}
.dvs-delta {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dvs-delta.good,
.d-good {
  color: var(--ok);
}
.dvs-delta.bad,
.d-bad {
  color: var(--crit);
}
.dvs-delta.flat,
.d-flat {
  color: var(--text-3);
}
.d-good,
.d-bad,
.d-flat {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.diff-sec {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 12px 0 2px;
}
.diff-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.diff-tbl th,
.diff-tbl td {
  border-bottom: 1px solid var(--line);
  padding: 5px 8px;
  text-align: left;
}
.diff-tbl th.n,
.diff-tbl td.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.diff-tbl thead th {
  color: var(--text-3);
  font-weight: 600;
  font-size: var(--fs-xs);
}
.diff-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  margin-right: 4px;
}
.diff-tag.tag-resolved {
  background: var(--ok);
}
.diff-tag.tag-new {
  background: var(--crit);
}
/* 比較レイアウト切替バー */
.diff-layoutbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
}
.diff-layoutbar .diff-layoutlab {
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: 0.06em;
}
/* 新旧対照表（in-app） */
.hyou-view {
  padding: 4px 2px 12px;
}
.hyou-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  margin: 4px 0 4px;
}
.hyou-sub {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: 12px;
}
.hyou-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-sm);
}
.hyou-tbl th,
.hyou-tbl td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.hyou-tbl thead th {
  background: rgb(var(--sunken-rgb) / 0.7);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--text-2);
}
.hyou-tbl th:nth-child(3),
.hyou-tbl td.note {
  width: 22%;
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
}
.hyou-tbl tr.grp td {
  background: rgb(var(--sunken-rgb) / 0.45);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.hyou-tbl u {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hyou-legend {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.8;
}

/* ── AI 補助 ── */

.ai-model {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-model select {
  width: 180px;
}

.panel-body-ai {
  flex: none;
  max-height: 45%;
  overflow: auto;
  padding: 8px;
}
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  padding: 0 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--minor);
  border: 1px solid var(--minor);
  border-radius: 2px;
}
.ai-badge svg {
  width: 11px;
  height: 11px;
}
.ai-text {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}
.ai-meta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ── 一括最適化 ── */

.op-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
}
.op-row:hover {
  background: var(--hover);
}
.op-row.on {
  background: rgb(var(--accent) / 0.16);
  box-shadow: inset 2px 0 0 rgb(var(--accent));
}
.op-row input {
  flex: none;
  margin-top: 3px;
  accent-color: rgb(var(--accent));
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.op-row-main {
  flex: 1;
  min-width: 0;
  text-align: left;
  color: var(--text-2);
}
.op-row-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.op-res {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--text);
}
.op-detail {
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-diff {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}
.op-diff svg {
  flex: none;
  width: 11px;
  height: 11px;
  color: var(--text-3);
}
.op-diff .diff-before,
.op-diff .diff-after {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}
.op-line {
  flex: none;
  min-width: 26px;
  text-align: right;
  color: var(--text-3);
}

/* ── 3D プレビュー ── */

.viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgb(var(--panel-rgb) / 0.35), transparent 70%),
    rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.85));
}
.viewport canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.viewport canvas:active {
  cursor: grabbing;
}
.viewport-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
  pointer-events: none;
}
.viewport-empty[hidden] {
  display: none;
}

/* ── YMAP 配置移動 ── */

.ym-xyz {
  display: flex;
  gap: 6px;
}
.ym-xyz label {
  flex: 1;
  min-width: 0;
}
.ym-xyz .input {
  width: 100%;
  font-family: var(--font-mono);
}

/* ── テクスチャ解析 ── */

.tex-flag {
  display: inline-block;
  margin-right: 3px;
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--major);
  border: 1px solid var(--major);
  border-radius: 2px;
  white-space: nowrap;
}

/* ── コードプレビュー ── */

.code {
  margin-top: 8px;
  padding: 8px;
  max-height: 340px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-2);
  white-space: pre;
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.85));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  user-select: text;
  -webkit-user-select: text;
}
.code[hidden] {
  display: none;
}

/* ── 車両メタ 結合/分割 ── */

.vm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--row-h);
  padding: 0 6px;
  border-radius: 2px;
}
.vm-row:hover {
  background: var(--hover);
}
.vm-row.on {
  background: rgb(var(--accent) / 0.18);
  box-shadow: inset 2px 0 0 rgb(var(--accent));
}
.vm-row input {
  flex: none;
  accent-color: rgb(var(--accent));
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.vm-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  color: var(--text-2);
}
.vm-row:hover .vm-row-main,
.vm-row.on .vm-row-main {
  color: var(--text);
}
.vm-type {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.vm-warn {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
  padding: 5px 6px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
  border: 1px solid var(--major);
  border-radius: var(--radius);
  background: rgb(240 153 63 / 0.1);
}
.vm-warn svg {
  flex: none;
  margin-top: 2px;
  color: var(--major);
}

.vm-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
  margin: 4px 0 6px;
}
.vm-stats > div {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: var(--fs-xs);
}
.vm-stats dt {
  color: var(--text-3);
}
.vm-stats dd {
  font-family: var(--font-mono);
  color: var(--text);
}

/* ── 設定ダイアログ ── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ポップアップの視認性を上げるため背景を濃くし、後ろの画面を軽くぼかす */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.overlay[hidden] {
  display: none;
}

.dialog {
  width: 560px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  /* ほぼ不透明にして背後の内容が透けないようにする（視認性向上） */
  background: rgb(var(--panel-rgb) / 0.98);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dialog-head {
  flex: none;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 6px 0 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  background: rgb(var(--head-rgb) / 1);
  border-bottom: 1px solid var(--line);
}
.dialog-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 12px 12px;
}
.dialog-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: rgb(var(--head-rgb) / 0.92);
}

/* ── 設定ページ（レール下部・通常ページ） ── */
.settings-page {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.settings-page-head {
  flex: none;
  padding: 20px 32px 14px;
  border-bottom: 1px solid var(--line);
}
.settings-page-head h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.settings-page-sub {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 32px 32px;
}
.settings-body > .opt-group {
  max-width: 880px;
}
.settings-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-top: 1px solid var(--line);
  background: rgb(var(--head-rgb) / calc(var(--panel-a) * 0.5));
}

.opt-group {
  padding: 10px 0;
}
.opt-group + .opt-group {
  border-top: 1px solid var(--line);
}
.opt-group-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

.opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 0;
}
.opt-static {
  align-items: flex-start;
}

/* ライセンス / ログイン */
.lic-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.lic-flow-box {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.6));
}
.lic-code {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgb(var(--accent));
}
.lic-flow-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.btn.copied {
  color: rgb(var(--accent));
  border-color: rgb(var(--accent) / 0.6);
}
/* マルチリージョン接続状況 */
.lic-region {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
}
.lic-region[hidden] {
  display: none;
}
.lic-region-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-2);
  font-weight: 600;
}
.lic-region-fo {
  color: var(--major);
  font-weight: 700;
}
.lic-region-lamps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.lic-lamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-3);
}
.lic-lamp::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}
.lic-lamp.up::before {
  background: var(--ok);
}
.lic-lamp.down::before {
  background: var(--crit);
}
.lic-lamp.active {
  border-color: rgb(var(--accent) / 0.6);
  color: var(--text-1);
  font-weight: 600;
}
.lic-region-note {
  color: var(--text-3);
}
/* サーバーステータス */
.srv-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.srv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
}
.srv-overall {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 6px 0 8px;
}
.srv-overall.up {
  color: var(--ok);
}
.srv-overall.up .srv-dot {
  background: var(--ok);
}
.srv-overall.degraded {
  color: var(--major);
}
.srv-overall.degraded .srv-dot {
  background: var(--major);
}
.srv-overall.down {
  color: var(--crit);
}
.srv-overall.down .srv-dot {
  background: var(--crit);
}
.srv-subtitle {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 8px 0 2px;
}
.srv-list {
  display: flex;
  flex-direction: column;
}
.srv-row {
  display: grid;
  grid-template-columns: 5.5em 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.srv-row:last-child {
  border-bottom: none;
}
.srv-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
}
.srv-state.up .srv-dot {
  background: var(--ok);
}
.srv-state.degraded .srv-dot {
  background: var(--major);
}
.srv-state.down .srv-dot {
  background: var(--crit);
}
.srv-name {
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srv-lat {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
}
.srv-updated {
  color: var(--text-3);
  font-size: var(--fs-xs);
  margin-top: 8px;
}
/* ログ・診断（設定画面のローカルログビューア） */
.applog-actions {
  display: inline-flex;
  gap: 6px;
}
.applog-list {
  margin-top: 8px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--sunken-rgb) / 0.5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.applog-row {
  display: grid;
  grid-template-columns: 9.5em 4em 8em 1fr;
  gap: 8px;
  padding: 3px 10px;
  border-bottom: 1px solid rgb(var(--sunken-rgb) / 0.9);
  align-items: baseline;
}
.applog-row:last-child {
  border-bottom: none;
}
.applog-row .al-ts {
  color: var(--text-3);
  white-space: nowrap;
}
.applog-row .al-lv {
  font-weight: 700;
}
.applog-row.lv-error .al-lv {
  color: var(--crit);
}
.applog-row.lv-warn .al-lv {
  color: var(--major);
}
.applog-row.lv-info .al-lv {
  color: var(--ok);
}
.applog-row.lv-debug .al-lv {
  color: var(--text-3);
}
.applog-row .al-src {
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.applog-row .al-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
}
.opt-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
}
.opt-desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.6;
}
.opt input[type="range"] {
  flex: none;
  width: 168px;
  accent-color: rgb(var(--accent));
}

/* セグメント選択 */
.seg {
  flex: none;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.9));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.seg button {
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  border-radius: 2px;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button svg {
  width: 12px;
  height: 12px;
}
.seg button:hover {
  color: var(--text);
  background: var(--hover);
}
.seg button.on {
  color: #fff;
  background: rgb(var(--accent));
}

/* トグルスイッチ */
.switch {
  flex: none;
  position: relative;
  width: 32px;
  height: 18px;
  cursor: pointer;
}
.switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.switch span {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: var(--line-strong);
  transition: background var(--dur) var(--ease);
}
.switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--dur) var(--ease);
}
.switch input:checked + span {
  background: rgb(var(--accent));
}
.switch input:checked + span::after {
  transform: translateX(14px);
}

/* アクセント色 */
.swatches {
  flex: none;
  display: flex;
  gap: 5px;
}
.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform var(--dur) var(--ease);
}
.swatch:hover {
  transform: scale(1.12);
}
.swatch.on {
  box-shadow: 0 0 0 2px rgb(var(--panel-rgb)), 0 0 0 3px currentColor;
}

/* ── EUP / 衣装 + テクスチャ画像プレビュー ── */
.tex-thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: rgba(var(--sunken-rgb), 0.6);
  border-radius: 3px;
  display: block;
}
.tex-thumb-zoom {
  cursor: zoom-in;
}
.tex-thumb-zoom:hover {
  outline: 1px solid rgb(var(--accent) / 0.7);
}

/* テクスチャ拡大表示（ライトボックス） */
.overlay.lightbox {
  flex-direction: column;
  background: rgba(0, 0, 0, 0.82);
  z-index: 60;
}
.lb-bar {
  flex: none;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: rgb(var(--head-rgb) / 0.9);
  border-bottom: 1px solid var(--line);
}
.lb-name {
  font-weight: 600;
  color: var(--text);
}
.lb-meta {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.lb-zoom {
  font-size: var(--fs-sm);
  color: var(--text-2);
  min-width: 44px;
  text-align: right;
}
.lb-stage {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  /* 透明部分が分かるよう市松模様 */
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.06) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.06) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}
.lb-img {
  transform-origin: center center;
  image-rendering: pixelated;
  max-width: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.eup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  padding: 6px;
}
.eup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.eup-card:hover,
.eup-card.on {
  border-color: var(--accent);
}
.eup-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: rgba(var(--sunken-rgb), 0.6);
  border-radius: 3px;
}
.eup-card .eup-idx {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-2);
}
.eup-coll {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 6px;
  overflow: hidden;
}
.eup-coll-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(var(--head-rgb), 0.5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.eup-detail-img {
  width: 100%;
  max-width: 220px;
  object-fit: contain;
  background: rgba(var(--sunken-rgb), 0.6);
  border-radius: var(--radius);
  display: block;
  margin: 4px 0;
}

/* ── ツールレールの展開/収納 ── */
.rail {
  transition: width var(--dur) var(--ease);
}
.rail.expanded {
  width: 188px;
  align-items: stretch;
  padding: 6px;
}
.rail-toggle {
  flex: none;
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  border-radius: var(--radius);
  margin-bottom: 2px;
}
.rail-toggle:hover {
  background: var(--hover);
  color: var(--text);
}
.rail.expanded .rail-toggle {
  align-self: flex-end;
}
.rail-label {
  display: none;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail.expanded .rail-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 8px;
}
.rail.expanded .rail-btn svg {
  flex: none;
}
.rail.expanded .rail-label {
  display: block;
}

/* ── 一覧の先頭サムネイル ── */
.res-thumb {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: rgba(var(--sunken-rgb), 0.6);
  border-radius: 3px;
}
td > .res-thumb {
  width: 32px;
  height: 32px;
}

/* サムネイル付きの行は少し背を高くする */
.res-row:has(.res-thumb) {
  height: auto;
  min-height: var(--row-h);
  padding-top: 3px;
  padding-bottom: 3px;
}

/* ── HEX エディタ ── */
.hx-grid {
  font-size: 11px;
  line-height: 1.5;
  padding: 4px 8px;
}
.hx-row {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}
.hx-off {
  color: var(--text-3);
  flex: none;
}
.hx-bytes {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.hx-b {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  padding: 0 1px;
  border-radius: 2px;
}
.hx-b:hover {
  background: var(--hover);
  color: var(--text);
}
.hx-b.range {
  background: rgb(var(--accent) / 0.16);
  color: var(--text);
}
.hx-b.on {
  background: rgb(var(--accent) / 0.3);
  color: var(--text);
  outline: 1px solid rgb(var(--accent));
}
.hx-b.edited {
  color: #ffca6b;
  font-weight: 700;
}
.hx-b.seg-sys {
  box-shadow: inset 0 -2px 0 rgb(96 165 250 / 0.5);
}
.hx-b.seg-gfx {
  box-shadow: inset 0 -2px 0 rgb(167 139 250 / 0.5);
}
.hx-b.gap {
  margin-left: 6px;
}
.hx-ascii {
  color: var(--text-3);
  letter-spacing: 1px;
}
.hx-ac {
  cursor: default;
  border-radius: 2px;
}
.hx-ac:hover {
  background: var(--hover);
  color: var(--text);
}
.hx-ac.range {
  background: rgb(var(--accent) / 0.16);
  color: var(--text);
}
.hx-ac.on {
  background: rgb(var(--accent) / 0.3);
  color: var(--text);
  outline: 1px solid rgb(var(--accent));
}

/* データインスペクタ表 */
.hx-insp {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 8px;
  font-size: 11px;
}
.hx-insp th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 2px 6px;
  border-bottom: 1px solid var(--line);
}
.hx-insp td {
  padding: 2px 6px;
  border-bottom: 1px solid rgb(var(--line-rgb, 128 128 128) / 0.12);
}
.hx-insp td.num,
.hx-insp th.num {
  text-align: right;
  white-space: nowrap;
}
.hx-insp .dim {
  color: var(--muted);
}

/* 表示オプション / エンディアン / コピー行 */
.hx-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hx-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.hx-opt .field-label {
  margin: 0;
}
.seg-sm button {
  padding: 2px 8px;
  font-size: 11px;
}
.seg-wrap {
  flex-wrap: wrap;
}
/* 言語スイッチは選択肢が多いので折り返す */
#opt-lang {
  flex-wrap: wrap;
}
.hx-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.field-value.dim {
  color: var(--muted);
}

/* 画像 → DDS / YTD 変換 */
tr.row-bad td {
  color: var(--muted);
  text-decoration: line-through rgba(255, 100, 100, 0.35);
}
tr.row-bad td:nth-last-child(2) {
  color: #e08c8c;
  text-decoration: none;
}
.field-value.warn {
  color: #ffca6b;
}

/* EUP 3D モデルプレビュー画像 */
.eup-model-img {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background:
    linear-gradient(45deg, rgba(var(--sunken-rgb), 0.5) 25%, transparent 25%, transparent 75%, rgba(var(--sunken-rgb), 0.5) 75%),
    linear-gradient(45deg, rgba(var(--sunken-rgb), 0.5) 25%, transparent 25%, transparent 75%, rgba(var(--sunken-rgb), 0.5) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: block;
  margin: 4px 0;
}

/* EUP インタラクティブ 3D プレビュー */
#eup-3d-wrap {
  position: relative;
}
#eup-3d {
  width: 100%;
  height: 260px;
  display: block;
  cursor: grab;
  touch-action: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgba(var(--sunken-rgb), 0.5) 25%, transparent 25%, transparent 75%, rgba(var(--sunken-rgb), 0.5) 75%),
    linear-gradient(45deg, rgba(var(--sunken-rgb), 0.5) 25%, transparent 25%, transparent 75%, rgba(var(--sunken-rgb), 0.5) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
#eup-3d:active {
  cursor: grabbing;
}

/* 3D ビューア内のオーバーレイ操作パネル（グリッド / 面の向き / 視点リセット） */
.viewer-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: calc(100% - 12px);
  z-index: 3;
  pointer-events: auto;
}
.viewer-tool {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--head-rgb) / 0.82);
  color: var(--text-2);
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.viewer-tool:hover {
  color: var(--text);
  border-color: var(--line-strong);
}
.viewer-tool.on {
  color: rgb(var(--accent));
  border-color: rgb(var(--accent) / 0.6);
  background: rgb(var(--accent) / 0.14);
}

/* プリセット視点（左上） */
.viewer-views {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 40%;
  z-index: 3;
}
.viewer-views .viewer-tool {
  min-width: 22px;
  padding: 2px 6px;
  text-align: center;
}

/* 狭いキャンバス（EUP の詳細内など）ではボタンを小さくし、視点は下段へ逃がして
   右上のツール群と重ならないようにする */
.viewer-compact .viewer-tool {
  font-size: 10px;
  padding: 1px 5px;
}
.viewer-compact .viewer-tools {
  gap: 3px;
  max-width: calc(100% - 8px);
}
.viewer-compact .viewer-views {
  top: auto;
  bottom: 6px;
  left: 6px;
  max-width: 62%;
}
.viewer-compact .viewer-hud {
  display: none;
}

/* 寸法ラベル（外接ボックスの幅/奥行/高さ。軸色つき） */
.viewer-dim-label {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  background: rgb(0 0 0 / 0.6);
  border: 1px solid rgb(255 255 255 / 0.25);
  pointer-events: none;
  white-space: nowrap;
}
.viewer-dim-label.dim-x {
  border-color: rgb(230 90 82 / 0.9);
  color: rgb(255 170 165);
}
.viewer-dim-label.dim-y {
  border-color: rgb(100 210 110 / 0.9);
  color: rgb(180 240 185);
}
.viewer-dim-label.dim-z {
  border-color: rgb(115 155 245 / 0.9);
  color: rgb(180 200 255);
}

/* 計測（2点間距離）の中点ラベル */
.viewer-measure-label {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -140%);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #1a1205;
  background: rgb(255 184 38 / 0.95);
  border: 1px solid rgb(180 120 10 / 0.9);
  pointer-events: none;
  white-space: nowrap;
}

/* HUD（下部・ポリゴン数/寸法/投影） */
.viewer-hud {
  position: absolute;
  left: 8px;
  bottom: 6px;
  right: 8px;
  z-index: 2;
  pointer-events: none;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-2);
  text-align: right;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* エモート再生コントロール */
#eup-emote-ctl {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eup-emote-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.eup-emote-row .input-sm {
  padding: 3px 6px;
  font-size: 12px;
}
#eup-emote-sel {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}
#eup-emote-search {
  flex: 0 1 140px;
}
.eup-emote-speed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.eup-emote-speed input[type="range"] {
  width: 90px;
}
#eup-emote-status {
  font-size: 12px;
}

/* リソース信頼性監査（検出カード） */
.rt-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgb(var(--sunken-rgb) / 0.35);
}
.rt-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rt-item-title {
  font-weight: 600;
  font-size: 13px;
}
.rt-item-rule {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.rt-item-file {
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-top: 3px;
  word-break: break-all;
}
.rt-item-snippet {
  margin: 6px 0 4px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgb(var(--sunken-rgb) / 0.7);
  border: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
  max-height: 120px;
}
.rt-item-detail {
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-top: 2px;
}
.rt-rule-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-xs);
  padding: 2px 0;
}
.rt-rule-n {
  color: var(--text-3);
}

/* 検知の種類の一覧 */
.rt-cat {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rt-cat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.45));
  opacity: 0.62;
}
.rt-cat-row.detected {
  opacity: 1;
  border-color: currentColor; /* badge の重大度色に追従 */
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.7));
}
.rt-cat-row .badge {
  flex: none;
  margin-top: 1px;
}
.rt-cat-body {
  flex: 1;
  min-width: 0;
}
.rt-cat-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.rt-cat-row.detected .rt-cat-title {
  font-weight: 600;
}
.rt-cat-esc {
  flex: none;
  font-size: 9px;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 5px;
}
.rt-cat-desc {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.5;
}
.rt-cat-n {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  margin-top: 1px;
}
.rt-cat-n.on {
  color: var(--text);
  font-weight: 700;
}
.rt-item-open {
  cursor: pointer;
}
.rt-item-open:hover {
  border-color: rgb(var(--accent) / 0.5);
}
.rt-open-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.rt-open-btn:hover {
  color: rgb(var(--accent));
  border-color: rgb(var(--accent) / 0.6);
}

/* IDE 風コードビューア */
.code-dialog {
  width: min(1000px, 92vw);
  height: 82vh;
  max-height: 82vh;
}
.code-head-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-sub {
  flex: none;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  word-break: break-all;
}
.code-body {
  padding: 0;
}
.code-view {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
}
.code-line {
  display: flex;
  white-space: pre;
}
.code-ln {
  flex: none;
  width: 56px;
  padding: 0 10px 0 0;
  text-align: right;
  color: var(--text-3);
  background: rgb(var(--sunken-rgb) / 0.4);
  user-select: none;
}
.code-src {
  padding: 0 12px;
  white-space: pre;
  color: var(--text);
}
.code-line.hit {
  background: rgb(var(--accent) / 0.16);
}
.code-line.hit .code-ln {
  color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.22);
  font-weight: 700;
}
.code-gap {
  padding: 4px 12px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  background: rgb(var(--sunken-rgb) / 0.3);
}
.code-foot-note {
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* 謝辞（Acknowledgements） */
.credits-scroll {
  overflow-y: auto;
}
.credits {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 24px 48px;
  color: var(--text);
  line-height: 1.85;
  font-size: 13px;
}
.credits-head h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 16px 0 8px;
}
.credits-lead {
  color: var(--text-2);
}
.credits h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 28px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.04em;
}
.credits-note,
.credits p {
  color: var(--text-2);
  margin: 6px 0;
}
.ref-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.ref-list > li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.ref-list > li:last-child {
  border-bottom: none;
}
.ref-name {
  font-weight: 700;
  color: var(--text);
}
.ref-by {
  color: var(--text-3);
  font-size: var(--fs-xs);
  margin-left: 6px;
}
.ref-list p {
  margin: 4px 0 0;
  font-size: 12.5px;
}
.credits-rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}
.credits-stats {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 4px;
  font-variant-numeric: tabular-nums;
}
.credits-stats th,
.credits-stats td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.credits-stats thead th {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 600;
}
.credits-stats .num {
  text-align: right;
  white-space: nowrap;
}
.credits-stats .dim {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-left: 6px;
}
.credits-stats tfoot td {
  font-weight: 700;
  border-top: 2px solid rgb(var(--accent) / 0.4);
  border-bottom: none;
}
.afterword {
  background: rgb(var(--accent) / 0.06);
  border: 1px solid rgb(var(--accent) / 0.22);
  border-radius: var(--radius);
  padding: 6px 20px 18px;
}
.afterword h2 {
  border-bottom-color: rgb(var(--accent) / 0.3);
}
.afterword p {
  color: var(--text);
  text-align: justify;
}
.afterword-sign {
  text-align: right;
  color: var(--text-2);
  font-style: italic;
  margin-top: 12px;
}
.credits-disclaimer {
  margin-top: 24px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* アウトライナの区切り線 */
.res-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}

/* ───────────────────────────────────────────────
   アクセシビリティ（a11y）
   ─────────────────────────────────────────────── */

/* キーボード操作時のみ表示するフォーカスリング（マウス操作の見た目は不変） */
:focus-visible {
  outline: 2px solid rgb(var(--accent) / 0.9);
  outline-offset: 1px;
  border-radius: 4px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* OS の「視差効果を減らす」設定を尊重（アプリ内のアニメーション設定とは独立） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────
   3D プレビュー: マテリアル球（3D モデリングソフト風）
   ─────────────────────────────────────────────── */
.mat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mat-toggle {
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.mat-grid {
  --mat-size: 72px;
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--mat-size), 1fr));
  gap: 8px;
}
.mat-controls {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
}
.mat-controls .input {
  height: 24px;
  font-size: var(--fs-xs);
  padding: 0 6px;
}
.mat-search {
  min-width: 0;
}
.mat-ball {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.5));
  cursor: default;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mat-ball:hover {
  border-color: rgb(var(--accent) / 0.5);
  background: rgb(var(--accent) / 0.06);
}
.mat-ball-thumb {
  width: calc(var(--mat-size, 72px) - 20px);
  height: calc(var(--mat-size, 72px) - 20px);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14), transparent 60%),
    rgb(var(--sunken-rgb));
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.mat-ball-thumb img {
  width: 100%;
  height: 100%;
  display: block;
}
.mat-ball-name {
  max-width: 100%;
  font-size: var(--fs-xs);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mat-ball-tex {
  max-width: 100%;
  font-size: 9px;
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ───────────────────────────────────────────────
   3D プレビュー: 表示モードのプレビューストリップ + 進捗リング
   ─────────────────────────────────────────────── */
.md-preview-strip {
  position: absolute;
  top: 40px;               /* プリセット視点ボタンの下 */
  left: 6px;               /* 左寄せ（プリセット視点ボタンの真下） */
  z-index: 3;
  display: flex;
  gap: 6px;
  pointer-events: none;    /* セルだけ受け取る */
}
.md-preview-cell {
  position: relative;
  width: 128px;
  height: 84px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgb(var(--sunken-rgb) / 0.85);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.md-preview-cell:hover {
  border-color: rgb(var(--accent));
  transform: translateY(-1px);
}
.md-preview-cell canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.md-preview-label {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1px 5px;
  font-size: var(--fs-xs);
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
@media (max-width: 900px) {
  .md-preview-cell { width: 96px; height: 64px; }
}

/* マテリアル読込の円形プログレス（右下・HUD の上） */
.md-progress {
  position: absolute;
  right: 10px;
  bottom: 28px;
  z-index: 4;
  width: 44px;
  height: 44px;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.md-progress[hidden] {
  display: none;
}
.md-progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.md-progress-bg {
  fill: none;
  stroke: rgb(var(--sunken-rgb) / 0.9);
  stroke-width: 3.2;
}
.md-progress-fg {
  fill: none;
  stroke: rgb(var(--accent));
  stroke-width: 3.2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s ease;
}
.md-progress-txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text);
}

/* ───────────────────────────────────────────────
   スケルトンローディング（読み込み中のプレースホルダー）
   ─────────────────────────────────────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--skel-base, rgba(128, 128, 128, 0.1));
  border-radius: var(--radius);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skel-shine, rgba(255, 255, 255, 0.12)), transparent);
  animation: skel-shimmer 1.25s ease-in-out infinite;
}
@keyframes skel-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* 遅延読み込み画像: 読み込み完了まで下地にシマーを敷く */
.skel-img {
  background: var(--skel-base, rgba(128, 128, 128, 0.1));
  position: relative;
  overflow: hidden;
}
.skel-img::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skel-shine, rgba(255, 255, 255, 0.12)), transparent);
  animation: skel-shimmer 1.25s ease-in-out infinite;
  pointer-events: none;
}
.skel-img.loaded {
  background: none;
}
.skel-img.loaded::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .skel-img::after { animation: none; }
}

/* リスト行のスケルトン（res-row と同じ高さ感） */
.skel-row {
  height: 30px;
  margin: 3px 6px;
  border-radius: var(--radius);
}
/* テーブル行のスケルトン */
.skel-line {
  height: 12px;
  margin: 8px 12px;
  border-radius: 3px;
}
.skel-line.short { width: 45%; }
.skel-line.mid { width: 70%; }
/* マテリアル球のスケルトン（丸） */
.mat-ball .skel-ball {
  width: calc(var(--mat-size, 72px) - 20px);
  height: calc(var(--mat-size, 72px) - 20px);
  border-radius: 50%;
}
/* テクスチャ/グリッドタイルのスケルトン */
.skel-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
}

/* マテリアル球のスケルトン内テキスト行の余白調整 */
.mat-ball .skel-line {
  width: 70%;
  margin: 4px 0 0;
  height: 9px;
}

/* ハンドリング一括編集: 操作キュー / プリセット */
.hnd-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hnd-add-hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
#hnd-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hnd-op {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--accent) / 0.1);
  font-size: var(--fs-xs);
}
.hnd-op-txt {
  color: var(--text);
}
.hnd-op-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: none;
  background: rgb(var(--sunken-rgb));
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
}
.hnd-op-x:hover {
  background: var(--crit);
  color: #fff;
}
.hnd-op-clear {
  margin-left: 2px;
}
.hnd-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ───────────────────────────────────────────────
   3D プレビュー: 車両（メタ / エクストラ / アニメーション）
   ─────────────────────────────────────────────── */
.veh-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}
.veh-flag,
.veh-meta-chip {
  font-size: 9px;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}
.veh-meta-chip {
  font-family: var(--font-mono);
  color: var(--text);
}
.veh-part {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.veh-part-kind {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.12);
  border-radius: 3px;
  padding: 1px 5px;
  min-width: 48px;
  text-align: center;
}
.veh-part-name {
  flex: 1;
  font-size: var(--fs-xs);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.veh-part-name.missing {
  color: var(--text-3);
  text-decoration: line-through;
}
.veh-clips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.veh-clip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--sunken-rgb) / calc(var(--panel-a) * 0.5));
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.veh-clip:hover {
  border-color: rgb(var(--accent) / 0.5);
}
.veh-clip.on {
  border-color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.12);
}
.veh-clip-name {
  flex: 1;
  font-size: var(--fs-xs);
}
.veh-clip-dur {
  font-size: 9px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.veh-anim-ctl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.veh-anim-ctl input[type="range"] {
  flex: 1;
}
.veh-anim-speed {
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-family: var(--font-mono);
  min-width: 32px;
}

/* ── AC → FiveM 変換ワークスペース ── */
.ac-path {
  font-family: var(--font-mono);
  word-break: break-all;
  opacity: 0.8;
}
.ac-carlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.ac-car {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(var(--panel-rgb) / calc(var(--panel-a) * 0.5));
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.ac-car:hover {
  border-color: rgb(var(--accent) / 0.6);
}
.ac-car.active {
  border-color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.12);
}
.ac-car-name {
  font-weight: 600;
  font-size: 13px;
}
.ac-car-meta {
  font-size: 11px;
  opacity: 0.65;
  font-family: var(--font-mono);
}
.ac-spec {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 18px;
  margin-top: 6px;
}
.ac-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.ac-spec-k {
  opacity: 0.7;
}
.ac-spec-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ac-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font-size: 13px;
  cursor: pointer;
}
.ac-list {
  margin: 4px 0 8px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.7;
  opacity: 0.9;
}

/* AC 3D プレビュー ビューポート */
.ac-viewport {
  width: 100%;
  height: min(46vh, 400px);
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(var(--panel-rgb) / calc(var(--panel-a) * 0.5));
}
.ac-viewport canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── AC → FiveM 変換ワークスペース（再構築版） ── */
.ac-main {
  padding: 16px 18px 28px;
}
.ac-list-tools {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.ac-list-tools .input {
  width: 100%;
}
/* 左: 車両行 */
.ac-car-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.ac-car-row:hover {
  background: var(--hover);
}
.ac-car-row.on {
  background: rgb(var(--accent) / 0.12);
  box-shadow: inset 2px 0 0 rgb(var(--accent));
}
.ac-car-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ac-car-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-car-sub {
  font-size: 11px;
  opacity: 0.55;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 右: ヒーロー */
.ac-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ac-hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ac-hero-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-2);
}
/* 空状態 */
.ac-empty {
  max-width: 560px;
  margin: 6vh auto 0;
  text-align: center;
}
.ac-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: rgb(var(--accent) / 0.14);
  color: rgb(var(--accent));
}
.ac-empty-title {
  margin: 10px 0 4px;
  font-size: 20px;
  font-weight: 700;
}
.ac-empty-sub {
  margin: 0 auto 20px;
  max-width: 440px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}
.ac-steps {
  display: grid;
  gap: 10px;
  text-align: left;
  margin-bottom: 22px;
}
.ac-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(var(--panel-rgb) / calc(var(--panel-a) * 0.5));
}
.ac-step-n,
.ac-stage-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgb(var(--accent) / 0.16);
  color: rgb(var(--accent));
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ac-step-t {
  font-size: 14px;
  font-weight: 600;
}
.ac-step-d {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2);
}
/* ステップカード */
.ac-stage {
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  background: rgb(var(--panel-rgb) / calc(var(--panel-a) * 0.4));
}
.ac-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.ac-stage-title {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}
.ac-stage-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-2);
}
.ac-stage-chip.ok {
  background: rgb(120 190 90 / 0.16);
  color: rgb(110 185 95);
}
.ac-stage-chip.warn {
  background: rgb(230 160 60 / 0.16);
  color: rgb(225 160 70);
}
.ac-stage-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 諸元グリッド */
.ac-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.ac-spec-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--hover);
}
.ac-spec-cell .ac-spec-k {
  font-size: 11px;
  opacity: 0.6;
}
.ac-spec-cell .ac-spec-v {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* ボーン一覧 */
.ac-bones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 12px;
}
.ac-bone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.ac-bone-gta {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 96px;
}
.ac-bone-src {
  flex: 1;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-bone-conf {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}
.ac-bone-conf.hi {
  background: rgb(120 190 90 / 0.18);
  color: rgb(110 185 95);
}
.ac-bone-conf.mid {
  background: rgb(230 160 60 / 0.18);
  color: rgb(225 160 70);
}
.ac-bone-conf.lo {
  background: var(--hover);
  color: var(--text-2);
}
/* 注記・警告 */
.ac-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}
.ac-alert {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgb(230 160 60 / 0.12);
  color: rgb(225 160 70);
}
/* 補完（details） */
.ac-refine {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.ac-refine > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: rgb(var(--accent));
}
.ac-refine-body {
  padding-top: 10px;
}
.ac-refine-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 変換後の流れ */
.ac-next {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
}
.ac-next-t {
  font-size: 12px;
  font-weight: 700;
}
.ac-next-d {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}
/* 変換結果 */
.ac-result {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgb(120 190 90 / 0.1);
  border: 1px solid rgb(120 190 90 / 0.3);
}
.ac-result-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ac-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgb(110 185 95);
}
.ac-result-conf {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ac-report-sec > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 0;
}
.ac-report-sec > summary svg {
  opacity: 0.7;
}

/* モデル一覧: ゲーム別グループ見出し（FiveM / Assetto Corsa）と AC バッジ */
.md-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 2px 4px;
  padding: 3px 8px;
  border-left: 3px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.md-group-head:first-child {
  margin-top: 2px;
}
.md-group-head.fivem {
  border-left-color: rgb(var(--accent));
  color: rgb(var(--accent));
}
.md-group-head.ac {
  border-left-color: rgb(230 130 60);
  color: rgb(225 135 70);
}
.md-group-count {
  font-weight: 600;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.md-badge.ac {
  background: rgb(230 130 60 / 0.16);
  color: rgb(225 135 70);
}

/* AC 部品検出（BBox 可視化・手動指定） */
.ac-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.ac-model {
  min-width: 240px;
  flex: 1 1 240px;
}
.ac-log-wrap {
  margin: 6px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.ac-log-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  background: rgb(var(--panel-rgb) / calc(var(--panel-a) * 0.6));
}
.ac-log-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}
.ac-log-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ac-log-copy:hover {
  background: var(--hover);
}
.ac-log {
  margin: 0;
  padding: 8px 10px;
  max-height: 200px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgb(var(--panel-rgb) / calc(var(--panel-a) * 0.5));
  color: var(--text-2);
  user-select: text;
}
.ac-views {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0;
}
@media (max-width: 620px) {
  .ac-views {
    grid-template-columns: 1fr;
  }
}
.ac-view-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgb(var(--panel-rgb) / calc(var(--panel-a) * 0.5));
}
.ac-view-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.ac-view-n {
  font-weight: 600;
  color: rgb(var(--accent));
  font-variant-numeric: tabular-nums;
}
.ac-view-cap-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ac-view-zoom {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.ac-view-zoom:hover {
  background: var(--hover);
  color: rgb(var(--accent));
}
.ac-view-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  background: #000;
}
/* 枠編集エディタ（拡大＋編集） */
.ac-editor {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: blur(6px);
}
.ac-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(96vw, 1200px);
  max-height: 94vh;
}
.ac-editor-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(var(--panel-rgb) / 0.92);
}
.ac-editor-tabs {
  display: inline-flex;
  gap: 4px;
}
.ac-editor-tab {
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
}
.ac-editor-tab.on {
  background: rgb(var(--accent) / 0.16);
  border-color: rgb(var(--accent));
  color: rgb(var(--accent));
}
.ac-editor-lbl {
  font-size: 12px;
  color: var(--text-2);
}
.ac-editor-label {
  min-width: 130px;
}
.ac-editor-spacer {
  flex: 1;
}
.ac-editor-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.ac-editor-canvas {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  cursor: crosshair;
}
.ac-editor-hint {
  font-size: 12px;
  color: rgb(255 255 255 / 0.7);
  text-align: center;
}
.ac-view-zoom span {
  font-size: 11px;
  margin-left: 3px;
}