:root {
  --bg: #f6f7f9;
  --fg: #1b1f24;
  --muted: #5c6773;
  --line: #d8dee4;
  --card: #fff;
  --primary: #0b5cd5;
  --ok: #1a7f37;
  --warn: #9a6700;
  --ng: #b42318;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.7 "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
main { max-width: 1080px; margin: 0 auto; padding: 16px; }
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 10px; }
.section-title { margin: 18px 0 8px; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.preflight { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.preflight-help { flex-basis: 100%; margin: 0; color: var(--ng); font-size: 13px; }
.chip {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; background: #fafbfc;
}
.chip.ok { color: var(--ok); border-color: #a6e3b6; background: #f0fbf3; }
.chip.ng { color: var(--ng); border-color: #f3b9b3; background: #fef4f3; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 14px;
}
.card.muted { background: #fbfcfd; }

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
input[type=text], textarea, select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 4px; font: inherit; background: #fff;
}
textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 14px; }
.grid .wide { grid-column: 1 / -1; }

.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.btn {
  padding: 7px 14px; border: 1px solid var(--line); background: #fff;
  border-radius: 5px; font: inherit; cursor: pointer; min-width: 120px;
}
.btn:hover:not(:disabled) { background: #f2f4f7; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #0a4fb4; }
.btn-ghost { min-width: 0; color: var(--muted); }
.btn:disabled { background: #eceff2; color: #9aa4ae; border-color: #e2e6ea; cursor: not-allowed; }
.btn .spinner {
  display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn:not(.btn-primary) .spinner { border-color: #c9d1d9; border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.status { color: var(--muted); font-size: 13px; }
.status.ok { color: var(--ok); }
.status.ng { color: var(--ng); }
.hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

.progress { height: 4px; background: #e7ebef; border-radius: 2px; margin-top: 10px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--primary); transition: width .2s; }

.lp {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: 12px; overflow: hidden;
}
.lp-head {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid var(--line);
}
.lp-id { font-weight: 700; }
.lp-meta { color: var(--muted); font-size: 12px; }
.lp-meta a { color: var(--primary); }
.badge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
}
.badge.on { color: var(--ok); border-color: #a6e3b6; background: #f0fbf3; }
.badge.off { color: var(--warn); border-color: #f0dca0; background: #fffaf0; }
.badge.changed { color: #7a4d00; border-color: #f0dca0; background: #fff8e6; }

.lp details { border-top: 1px solid #eef1f4; }
.lp details > summary {
  padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
  background: #fcfdfe; list-style: revert;
}
.lp details > div { padding: 12px 14px; }

.field { position: relative; }
.field.changed input, .field.changed textarea { border-color: #e0b64a; background: #fffdf5; }
.field .mark { position: absolute; right: 0; top: 0; font-size: 11px; color: #7a4d00; }
.readonly { color: var(--muted); font-size: 12px; word-break: break-all; }

table.diff { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
table.diff th, table.diff td {
  border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top;
}
table.diff th { background: #f4f6f8; font-weight: 600; white-space: nowrap; }
table.diff td.before { color: var(--muted); }
table.diff td.after { color: #0a3d91; }
.scroll-x { overflow-x: auto; }

.result-line { padding: 5px 0; border-bottom: 1px dashed #e6eaee; }
.result-line:last-child { border-bottom: 0; }
.result-line .ok { color: var(--ok); }
.result-line .ng { color: var(--ng); }
.force-box {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  padding: 10px; border: 1px solid #f0dca0; background: #fffaf0; border-radius: 5px;
  font-size: 13px; color: #7a4d00;
}
code.inline { background: #f2f4f7; padding: 0 4px; border-radius: 3px; font-size: 12px; }

/* 事前チェックで詰まったときに、次の操作へ辿れるようにする */
.preflight-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; margin-top: 6px; }
.preflight-actions .btn { text-decoration: none; }
.preflight-actions details { flex-basis: 100%; margin-top: 4px; font-size: 13px; color: #444; }
.preflight-actions details ol { margin: 6px 0 0; padding-left: 20px; line-height: 1.8; }
.preflight-actions code { background: #f2f2f2; padding: 1px 5px; border-radius: 3px; }
.ver-note { font-size: 12px; color: #666; }

/* 文字数の表示（descriptionなど） */
.counter { font-size: 11px; color: #666; margin-top: 2px; display: block; }
.counter.over { color: var(--ng); font-weight: bold; }

/* 比較テーブル: 左＝いまの値 / 右＝反映する値。1画面に収まるよう小さく出す */
table.cmp { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
table.cmp thead th { text-align: left; font-weight: normal; color: #888; font-size: 11px;
  border-bottom: 1px solid #e3e3e3; padding: 2px 6px; }
table.cmp th { text-align: left; font-weight: normal; color: #333; padding: 3px 6px;
  white-space: nowrap; width: 1%; }
table.cmp td { padding: 3px 6px; vertical-align: top; border-bottom: 1px solid #f0f0f0; }
table.cmp td.cur { color: #777; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
table.cmp td.cur.empty { color: #bbb; }
table.cmp td.arrow { color: #bbb; width: 1%; text-align: center; }
table.cmp td.new { width: 45%; }
table.cmp td.new input, table.cmp td.new textarea { width: 100%; font-size: 12px; padding: 2px 4px;
  border: 1px solid #d8dde6; border-radius: 3px; font-family: inherit; }
table.cmp td.new textarea { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
table.cmp td.state { width: 1%; white-space: nowrap; font-size: 11px; }
table.cmp td.state.ok { color: #9aa; }
table.cmp td.state.ng { color: var(--ng); font-weight: bold; }
table.cmp tr.changed td.new input, table.cmp tr.changed td.new textarea { border-color: #f0a; background: #fffdf7; }
table.cmp tr.changed th { font-weight: bold; }

.order-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: #555; margin: 6px 0; }
.order-line .hint { margin: 0; font-size: 11px; }
.gtm-box { border: 1px solid #e3e3e3; border-radius: 4px; padding: 8px; margin: 8px 0; background: #fafafa; }
.gtm-box .hint { margin: 4px 0 0; font-size: 11px; }

.order-line .lbl { color: #999; font-size: 11px; min-width: 56px; }
table.cmp tr.invalid td.new input { border-color: var(--ng); background: #fff5f4; }