:root {
  /* 濃い青を基調にする。淡いインディゴだと、原本の写真と並んだときに
     UI 側が沈んで「今どこを操作しているか」が見えなくなっていた。
     文字・境界のコントラストも上げてある（本文 15:1 / 補助 6:1 / 境界 1.6:1）。 */
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --border: #dbe1ec;
  --border-strong: #bcc6d8;
  --text: #0a1220;
  --muted: #556070;
  --muted-2: #7a8497;

  /* 青。accent が主操作、deep はヘッダなどの面、soft/border は淡い面 */
  --accent: #1d4ed8;
  --accent-2: #2563eb;
  --accent-deep: #142c6b;
  --accent-ink: #0f2454;
  --accent-soft: #e8eefc;
  --accent-border: #b6caf5;
  --ring: rgba(29, 78, 216, .26);

  /* AI が動いている場所だけに使う色。人が押す青とは別系統にして、
     「機械が動いている」と「押せる」を混同させない。取り込み画面でだけ使う。 */
  --ai: #0891b2;
  --ai-bright: #06b6d4;
  --ai-soft: rgba(6, 182, 212, .10);
  --ai-border: rgba(6, 182, 212, .38);

  /* ヘッダ（濃紺の面）。この上に載る文字は nav-ink 系を使う */
  --nav: #10224f;
  --nav-2: #16306e;
  --nav-ink: #eef3fd;
  --nav-muted: #9fb2d8;
  --nav-line: rgba(255, 255, 255, .14);

  --amber: #92400e;
  --amber-soft: #fffbeb;
  --amber-border: #fcd34d;
  --good: #15803d;
  --good-soft: #f0fdf4;
  --good-border: #86efac;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;
  --bad-border: #fca5a5;
  --row-cursor: #e6edfc;
  --page: 1440px;
  /* 縦の間隔。ここから外れた一回限りの margin を書かない。
     s=節の中 / m=ブロック間 / l=節と節 */
  --sp-s: 8px;
  --sp-m: 16px;
  --sp-l: 24px;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 6px 18px rgba(10, 18, 32, .11);
  --shadow-lg: 0 16px 40px rgba(10, 18, 32, .18);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------------- スクロールバー ----------------
   OS のものは消す。中身の上に重ねて自分で描く（scroll.js）。
   ・幅を取らないので、右端に帯が残らない
   ・出たり消えたりしても中身の幅が変わらないので、横にずれない
   ・太さをこの画面の密度に合わせられる
   自前に切り替えたので scrollbar-gutter も要らない（gutter は隙間そのものだった）。 */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; }

/* 何より上に置く。ドロップダウン(1000)やライトボックスの中も自前バーで出すので、
   一段でも下だと「そこだけバーが無い」状態になる。上に出しすぎる問題は
   scroll.js 側で当たり判定して防いでいる。 */
.sb-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; }
.sb {
  position: fixed; pointer-events: auto; opacity: 0;
  transition: opacity .16s ease; touch-action: none;
}
.sb.on { opacity: 1; }
/* つまみは不透明にする。
   半透明にすると背後と混ざるので、白地の面と行の下地がある面とで
   同じ指定なのに違う色に見えてしまう。左右のパネルで色が違って見えたのはこれ。
   ふだんは下地からわずかに浮くだけでよく、掴んだときにはっきりすればいい。 */
.sb > i {
  position: absolute; display: block; border-radius: 999px;
  background: #d3d8e2;
  transition: background .14s ease;
}
/* 端にぴったり付ける。2px でも浮かせると、そこだけ帯が残って見える */
/* 動かしていいのは太さだけ。長さ（縦バーの height）まで transition に入れると、
   中身が増減するたびにつまみが自分の長さをアニメーションして、位置が
   実際のスクロール量から遅れる。掴んで動かしているあいだも粘って見える。 */
.sb-y > i { right: 0; width: 6px; transition: background .14s ease, width .14s ease; }
.sb-x > i { bottom: 0; height: 6px; transition: background .14s ease, height .14s ease; }
.sb:hover > i, .sb.grab > i { background: #a6adbd; }
.sb-y:hover > i, .sb-y.grab > i { width: 9px; }
.sb-x:hover > i, .sb-x.grab > i { height: 9px; }
/* 暗い面（原本ビュー・取り込みのログ）では明るいつまみに反転する。
   ここも不透明 ── 原本は写真なので、透けると1枚ごとにバーの色が変わる。 */
.sb-dark > i { background: #383a3e; }
.sb-dark:hover > i, .sb-dark.grab > i { background: #64666a; }
/* 掴んでいるあいだ、下の文字が選択されないように */
body.sb-grabbing { user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .sb, .sb > i { transition: none; } }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* nothing should force horizontal scroll/zoom on mobile */
}
.hidden { display: none !important; }
.ico, [data-ico] { display: inline-flex; align-items: center; justify-content: center; flex: none; }
svg { display: block; }

/* ---------------- Header ---------------- */
header {
  position: sticky; top: 0; z-index: 30;
  background: var(--nav); color: var(--nav-ink);
  border-bottom: 1px solid var(--nav);
  box-shadow: none;
}
/* 外枠（ロゴ・タブ・アカウント）は画面の端に置く。本文の器に合わせて中央に寄せると、
   広い画面でヘッダだけが宙に浮く。ここは content ではなく chrome なので全幅でよい。 */
.header-inner { display: flex; align-items: center; gap: 14px; padding: 7px 16px; }
.brand { display: flex; align-items: center; gap: 10px; }
/* ロゴは実物の画像。白地の絵なので、濃紺のヘッダの上では白い角丸の板に載せる。 */
.brand-mark {
  width: 26px; height: 26px; border-radius: 5px; flex: none;
  background: #fff; object-fit: contain; padding: 1px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.auth-logo { border-radius: 6px; object-fit: contain; }
.brand-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
/* 濃紺の面の上でだけ白抜き。ログインカードは白地なので既定色のまま。 */
header .brand-name { color: var(--nav-ink); }
header .spacer { flex: 1; }

.tabs { display: flex; gap: 2px; background: rgba(255,255,255,.08); padding: 3px; border-radius: 6px; border: 1px solid var(--nav-line); }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 6px; background: transparent; color: var(--nav-muted);
  border: none; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
  transition: background .15s, color .15s;
}
.tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.tab.active { background: #fff; color: var(--accent-ink); box-shadow: none; }
.tab-label { white-space: nowrap; }
.tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: var(--amber);
  color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}


/* 1080px は表を主役にする画面には狭く、広い画面では左右が死ぬ。
   器を広げ、読み物として幅が要らないもの（分析の表など）は各画面で個別に締める。 */
main { padding: 18px 20px 48px; max-width: var(--page); margin: 0 auto; }

/* ---------------- Page head ---------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--sp-m); }
.page-title { font-size: 17px; font-weight: 750; letter-spacing: -.02em; margin: 0; }
.page-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------------- Controls ---------------- */
select, input, textarea {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 6px 9px; width: 100%; transition: border-color .12s, box-shadow .12s;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
/* キーボード操作のときだけ枠を出す。マウスで押しただけの残留リングは邪魔になる。 */
.btn:focus-visible, .icon-btn:focus-visible, .tab:focus-visible, .seg-btn:focus-visible, .dd-btn:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}
header .btn:focus-visible, header .icon-btn:focus-visible, .tab:focus-visible {
  outline-color: #93c5fd;
}
textarea { resize: vertical; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 6px 11px; cursor: pointer; transition: all .12s; width: auto;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-xs); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: var(--surface); color: var(--muted); }
.btn.ghost:hover { color: var(--text); border-color: var(--muted-2); }
.btn.danger { background: var(--surface); color: var(--bad); border-color: var(--bad-border); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.icon-only { padding: 10px; }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

label.field { display: block; margin: 14px 0 5px; color: var(--muted); font-size: 12px; font-weight: 600; }
.row-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); font-size: 13px; }
.section-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: .02em; margin: 8px 2px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.card-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.card-title [data-ico] { color: var(--accent); }

/* select with icons */
.select-wrap { position: relative; display: flex; align-items: center; margin-bottom: 16px; }
.select-wrap.compact { margin-bottom: 0; min-width: 200px; }
.select-wrap .select-ico { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.select-wrap .select-caret { position: absolute; right: 11px; color: var(--muted); pointer-events: none; }
.bigselect { font-size: 15px; padding: 12px 36px; appearance: none; -webkit-appearance: none; font-weight: 500; box-shadow: var(--shadow-xs); }
.select-wrap.compact select { padding: 9px 34px 9px 34px; appearance: none; -webkit-appearance: none; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-xs); }

/* ---------------- custom dropdown (self-built) ---------------- */
.dd { position: relative; display: inline-flex; vertical-align: middle; }
.dd.compact { min-width: 150px; }
.dd.block { display: flex; width: 100%; }
.dd-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text); text-align: left;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 6px 9px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.dd-btn:hover { border-color: var(--muted-2); }
.dd.open .dd-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dd-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-caret { color: var(--muted); flex: none; display: inline-flex; transition: transform .15s; }
.dd.open .dd-caret { transform: rotate(180deg); }
.dd-menu {
  position: fixed; z-index: 1000;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 5px; max-height: 280px; overflow-y: auto; display: none;
}
.dd.open .dd-menu { display: block; }
.dd-opt { padding: 8px 11px; border-radius: 6px; font-size: 13.5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.dd-opt.hi { background: var(--surface-2); }
.dd-opt.sel { color: var(--accent); font-weight: 700; }
.dd-opt.sel.hi { background: var(--accent-soft); }
.dd.disabled { opacity: .55; pointer-events: none; }
/* status dropdown colored states */
.dd.status-sel { min-width: 104px; }
.dd.status-sel .dd-btn { font-weight: 700; }
.dd.status-sel.is-pending .dd-btn { color: var(--amber); border-color: var(--amber-border); background: var(--amber-soft); }
.dd.status-sel.is-pending .dd-caret { color: var(--amber); }
.dd.status-sel.is-approved .dd-btn { color: var(--good); border-color: var(--good-border); background: var(--good-soft); }
.dd.status-sel.is-approved .dd-caret { color: var(--good); }
.dd.status-sel.is-rejected .dd-btn { color: var(--bad); border-color: var(--bad-border); background: var(--bad-soft); }
.dd.status-sel.is-rejected .dd-caret { color: var(--bad); }

/* decorative per-row check toggle in the 読み取り結果 table */
.edit-table .chkcol { width: 40px; text-align: center; }
.icon-btn.confirm-check.is-checked { color: var(--good); border-color: var(--good-border); background: var(--good-soft); }

/* ---------------- Capture ---------------- */
.shoot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; padding: 30px; text-align: center; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  border: none; border-radius: var(--radius); margin-bottom: 18px; box-shadow: 0 12px 30px rgba(16, 34, 79, .30);
  transition: transform .1s, box-shadow .2s;
}
.shoot:hover { box-shadow: 0 16px 38px rgba(16, 34, 79, .38); }
.shoot:active { transform: scale(.99); }
.shoot-ico { width: 56px; height: 56px; border-radius: 6px; margin-bottom: 6px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); }
.shoot-main { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.shoot .sub { font-size: 13px; font-weight: 400; opacity: .92; }
.shoot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 13px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; }
.upload:hover { border-color: var(--accent-2); color: var(--accent); background: var(--accent-soft); }
.upload [data-ico] { color: var(--accent); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.queue { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 13px;
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-xs);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite; }
.chip [data-ico] { color: var(--muted); }
.chip.working { border-color: var(--accent-2); color: var(--accent); }
.chip.done { border-color: var(--good-border); color: var(--good); } .chip.done [data-ico] { color: var(--good); }
.chip.err { border-color: var(--bad-border); color: var(--bad); } .chip.err [data-ico] { color: var(--bad); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* recent capture cards */
.recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rec-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--shadow-xs); cursor: pointer; transition: all .15s; }
.rec-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.rec-card .rec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rec-card .rec-fields { font-size: 13px; color: var(--text); display: grid; gap: 3px; }
.rec-card .rec-fields .k { color: var(--muted-2); font-size: 11px; }
.rec-card .rec-fields .v { font-weight: 500; }
.rec-card .rec-foot { display: flex; gap: 8px; margin-top: 12px; }
.rec-card .rec-foot .btn { flex: 1; }
.rec-card.new { animation: flash 1.4s ease; }
@keyframes flash { from { background: var(--accent-soft); } to { background: var(--surface); } }
.empty.soft { padding: 40px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.rec-card .rec-top { display: flex; gap: 12px; align-items: flex-start; }
.rec-card.job { background: var(--surface-2); }
.rec-card.job.error { background: var(--bad-soft); border-color: var(--bad-border); }
.job-body { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* thumbnails + spinner + working badge */
.thumb { flex: none; width: 52px; height: 52px; padding: 0; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--surface-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spin { display: inline-flex; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.badge.working { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.badge.error { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-border); }
.badge.error .bdot { background: var(--bad); }

/* confirm view sync bar */
.sync-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }
.sync-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); }
.sync-label [data-ico] { color: var(--accent); }
.sync-bar .select-wrap.compact { min-width: 180px; }
.sync-hint { font-size: 12.5px; color: var(--muted); margin-left: auto; }
/* compact one-line confirm toolbar */
.confirm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }
.tb-sync { display: inline-flex; align-items: center; gap: 7px; }
.tb-sync > [data-ico] { color: var(--accent); }
.tb-sync .select-wrap.compact { min-width: 150px; }
.tb-fill { flex: 1; min-width: 8px; }
.tb-bar { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-summary { font-size: 13px; font-weight: 600; color: var(--muted); }
/* list view: filters + count + capture buttons on one sticky row (pinned under the app header) */
.list-toolbar {
  position: sticky; top: var(--header-h, 54px); z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.list-toolbar .cap-actions { margin-left: auto; }
.confirm-toolbar .segmented { flex: none; }
.confirm-toolbar .select-wrap.compact { min-width: 150px; }
.confirm-toolbar { padding-top: 18px; }
/* status & group tags */
.badge.partial { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.badge.partial .bdot { background: var(--accent); }
.grouptag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); font-size: 11.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grouptag [data-ico] { color: var(--accent); }
.grouptag { cursor: pointer; }
.grouptag.empty { background: transparent; color: var(--muted-2); border: 1px dashed var(--border-strong); }
.grouptag.empty [data-ico] { color: var(--muted-2); }
.review-table .grpcol { width: 150px; }
.review-table .stcol { width: 104px; }
.review-table th:nth-child(5), .review-table td:nth-child(5) { width: 64px; } /* 件数 (override) */
.review-table th:nth-child(7), .review-table td:nth-child(7) { width: 64px; } /* 追加 (override) */
@media (max-width: 560px) { .tb-fill { display: none; } .confirm-toolbar, .list-toolbar { gap: 8px; } .list-toolbar .cap-actions { margin-left: 0; width: 100%; } .list-toolbar .cap-actions .btn { flex: 1; } }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 2px; flex-wrap: wrap; }
.review-head .section-label { margin: 0; }
.review-head .sort-note { font-size: 12px; color: var(--muted-2); }

#recent { display: block; } /* hold the full-width review table, not the old card grid */
.jobs-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.review-table { border-collapse: collapse; width: 100%; font-size: 13.5px; table-layout: fixed; }
.review-table .fname, .review-table .fsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-table th { background: var(--surface-2); border-bottom: 1px solid var(--border-strong); padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.review-table th.sortable { cursor: pointer; user-select: none; }
.review-table th.sortable:hover { color: var(--text); }
.review-table th.sortable.active { color: var(--accent); }
.review-table th.sortable [data-ico] { vertical-align: middle; margin-left: 2px; }
.review-table td { border-bottom: 1px solid var(--border); padding: 8px 12px; vertical-align: middle; }
.review-table tbody tr:last-child td { border-bottom: none; }
.review-table tbody tr { cursor: pointer; transition: background .12s; }
.review-table tbody tr:hover td { background: var(--surface-2); }
.review-table tbody tr.checked td { background: var(--good-soft); }
.review-table .cbcol { width: 40px; text-align: center; }
.review-table .imgcol { width: 54px; }
.review-table .actcol { width: 1%; white-space: nowrap; }
.review-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.review-table .thumb { width: 40px; height: 40px; }
.review-table .fname { font-weight: 600; }
.review-table .fsub { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.review-table .devcell, .review-table .addcell { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 560px) { .sync-hint { display: none; } }

/* DB banner (continuous approval) */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); }
.banner-left { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--accent); }

/* confirm modal image */
.confirm-img { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.confirm-img img { width: 100%; max-height: 260px; object-fit: contain; display: block; }

/* lightbox */
.modal-overlay.lightbox { cursor: zoom-out; padding: 28px; }
.modal-overlay.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: var(--shadow-lg); animation: pop .18s cubic-bezier(.2,.8,.3,1); }

/* ---------------- Status badge ---------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.badge .bdot { width: 6px; height: 6px; border-radius: 50%; }
.badge.pending { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.badge.pending .bdot { background: var(--amber); }
.badge.approved { background: var(--good-soft); color: var(--good); border-color: var(--good-border); }
.badge.approved .bdot { background: var(--good); }

/* ---------------- DB: stats / toolbar / table ---------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-xs); }
.stat .lbl { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.stat .lbl [data-ico] { color: var(--muted-2); }
.stat .num { font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin-top: 3px; }
.stat.pending .num { color: var(--amber); } .stat.pending .lbl [data-ico] { color: var(--amber); }
.stat.approved .num { color: var(--good); } .stat.approved .lbl [data-ico] { color: var(--good); }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px; }
.segmented button { border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 6px; cursor: pointer; transition: all .15s; }
.segmented button:hover { color: var(--text); }
/* 選択中は塗る。白地に色文字だけだと「どれが今の絞り込みか」が読み取れなかった。
   JS 側のクラス名は .seg-btn.on なので、両方を同じ見た目にしておく。 */
.segmented button.active, .segmented .seg-btn.on {
  background: var(--accent); color: #fff; box-shadow: var(--shadow-xs);
}
.segmented button.active:hover, .segmented .seg-btn.on:hover { background: var(--accent-2); color: #fff; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { border-bottom: 1px solid var(--border); padding: 11px 14px; text-align: left; white-space: nowrap; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12px; position: sticky; top: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr.is-pending td { background: rgba(180,83,9,.035); }
tbody tr.is-pending:hover td { background: rgba(180,83,9,.06); }
td[contenteditable] { min-width: 80px; outline: none; border-radius: 4px; }
td[contenteditable]:focus { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
tr.new td { animation: rowflash 1.4s ease; }
@keyframes rowflash { from { background: var(--accent-soft); } to { background: transparent; } }
td.actions { white-space: nowrap; text-align: right; width: 1%; }
.row-actions { display: inline-flex; gap: 2px; opacity: .35; transition: opacity .12s; }
tr:hover .row-actions, tr.is-pending .row-actions { opacity: 1; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--muted-2); padding: 6px; border-radius: 6px; cursor: pointer; transition: all .12s; }
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn.bordered { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px; color: var(--muted); background: var(--surface); box-shadow: var(--shadow-xs); }
.icon-btn.bordered:hover { color: var(--accent); border-color: var(--accent-2); }
.icon-btn.approve:hover { color: var(--good); background: var(--good-soft); }
.icon-btn.del:hover { color: var(--bad); background: var(--bad-soft); }

.empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty .empty-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted-2); display: flex; align-items: center; justify-content: center; }
.empty .empty-title { font-weight: 700; color: var(--text); font-size: 15px; }
.empty .empty-sub { font-size: 13px; margin-top: 4px; }

/* ---------------- Templates ---------------- */
.tmpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tmpl-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 15px 16px; cursor: pointer; transition: all .15s; }
.tmpl-card:hover { border-color: var(--accent-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tmpl-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tmpl-card h3 { margin: 0 0 5px; font-size: 15px; font-weight: 700; }
.tmpl-card .cols { color: var(--muted); font-size: 12.5px; }

.chat { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.chat-log { display: flex; flex-direction: column; gap: 9px; max-height: 340px; overflow-y: auto; padding: 4px; }
.msg { padding: 10px 13px; border-radius: 6px; max-width: 86%; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-input { display: flex; gap: 8px; align-items: flex-end; }
.chat-input textarea { flex: 1; min-height: 46px; }

.cols-editor table { font-size: 13px; }
.cols-editor table th { padding: 9px 12px; }
.cols-editor table td { padding: 4px 8px; }
.cols-editor table input, .cols-editor table select { background: transparent; border: 1px solid transparent; padding: 6px 8px; box-shadow: none; }
.cols-editor table input:focus, .cols-editor table select:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------------- Toast ---------------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 12px 18px; border-radius: 6px; box-shadow: var(--shadow-md); z-index: 80; max-width: 90%; font-size: 14px; font-weight: 500; }
.toast.good { border-color: var(--good-border); } .toast.good [data-ico] { color: var(--good); }
.toast.bad { border-color: var(--bad-border); } .toast.bad [data-ico] { color: var(--bad); }

/* ---------------- Modal ---------------- */
.modal-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(17,22,31,.42); backdrop-filter: blur(3px); animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 460px; background: var(--surface); border-radius: 6px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .18s cubic-bezier(.2,.8,.3,1); max-height: 90vh; display: flex; flex-direction: column; }
@keyframes pop { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.modal-title { font-size: 16px; font-weight: 700; display: block; }
.modal-sub { font-size: 12.5px; color: var(--muted); }
.modal-body { padding: 4px 20px 18px; overflow-y: auto; display: grid; gap: 12px; }
.modal-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.modal-field .ftype { color: var(--accent); font-weight: 600; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.modal-progress { height: 3px; background: var(--accent); transition: width .25s ease; }

/* device chip (capture) + device tag (cards) */
.device-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; box-shadow: var(--shadow-xs); transition: all .15s; }
.device-chip:hover { border-color: var(--accent-2); color: var(--accent); }
.device-chip [data-ico]:first-child { color: var(--accent); }
.device-chip [data-ico]:last-child { color: var(--muted-2); }
.dev-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 10.5px; font-weight: 600; }
.dev-tag [data-ico] { color: var(--muted-2); }

/* modal bulk bar */
.modal-bulk { padding: 0 20px 4px; }
.modal-bulk .btn { width: 100%; }

/* per-photo multi-row editor */
.batch-row { border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; background: var(--surface-2); }
.batch-row + .batch-row { margin-top: 10px; }
.batch-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.batch-row-title { font-size: 12px; font-weight: 700; color: var(--muted); }
.batch-fields { display: grid; gap: 10px; }
.batch-row .modal-field input { background: var(--surface); }
.rec-fields .more { color: var(--muted-2); font-size: 12px; margin-top: 2px; }

/* ---------------- Confirm: full-screen (original | table) ---------------- */
.confirm-screen { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; animation: fade .15s ease; }
.confirm-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-xs); flex-wrap: wrap; }
.confirm-titles { display: flex; flex-direction: column; min-width: 0; }
.confirm-title { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.confirm-sub { font-size: 12.5px; color: var(--muted); }
.confirm-regen { display: flex; align-items: center; }
.confirm-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 6px; }
.confirm-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.confirm-split { flex: 1; display: flex; min-height: 0; }
.confirm-orig { flex: 0 0 44%; background: #0f1115; overflow: hidden; position: relative; padding: 0; }
.split-handle { flex: 0 0 8px; cursor: col-resize; background: var(--border); position: relative; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.split-handle:hover, .confirm-split.dragging .split-handle { background: var(--accent); }
.split-handle .grip { width: 2px; height: 28px; border-radius: 2px; background: var(--muted-2); }
.split-handle:hover .grip, .confirm-split.dragging .split-handle .grip { background: #fff; }
.confirm-split.dragging .confirm-orig, .confirm-split.dragging .confirm-tablewrap { pointer-events: none; } /* don't let the PDF object swallow drag */
body.resizing { cursor: col-resize; user-select: none; }
.orig-root { width: 100%; height: 100%; position: relative; }
/* transform-based viewer: the stage clips, the content is GPU-transformed (no layout/scroll thrash on zoom or pan) */
.orig-stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: contain; }
.orig-stage.grabbing { cursor: grabbing; }
.orig-zoom { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.orig-zoom.orig-pdf { display: flex; flex-direction: column; gap: 12px; }
.confirm-orig .orig-img { display: block; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.4); -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* receipt-region highlight overlay (lives inside the transformed content so it scales with the image) */
.orig-hilite { position: absolute; border: 2px solid var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 9999px rgba(0,0,0,.34); pointer-events: none; transition: opacity .12s; }
.orig-hilite.hidden { display: none; }
.confirm-orig .pdf-page { display: block; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.4); background: #fff; }
/* floating "which receipt" crop preview shown on row hover */
.receipt-peek { position: fixed; z-index: 80; overflow: hidden; border-radius: 6px; border: 1px solid var(--border-strong); background: #11141a; box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,.55)); pointer-events: none; }
.receipt-peek-img { position: absolute; background-repeat: no-repeat; }
.edit-table tbody tr.has-region:hover td { background: var(--accent-soft); }
.edit-table td.rownum.zoomable { cursor: zoom-in; }
.edit-table td.rownum.zoomable:hover { color: var(--accent); text-decoration: underline; }
.conf-warn { display: inline-flex; vertical-align: middle; margin-left: 3px; }
.conf-warn.low { color: var(--bad, #e5484d); }
.conf-warn.med { color: var(--warn, #e6a23c); }
.confirm-orig .orig-loading { color: var(--muted-2); margin: auto; font-size: 13px; }
.confirm-orig .orig-empty { color: var(--muted-2); text-align: center; margin: auto; }
.orig-zoombar { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 2px; padding: 4px; background: rgba(20,22,28,.82); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: #fff; box-shadow: var(--shadow-md); z-index: 2; }
.orig-zoombar .zb { background: transparent; border: none; color: #fff; padding: 7px; border-radius: 6px; cursor: pointer; display: inline-flex; }
.orig-zoombar .zb:hover { background: rgba(255,255,255,.16); }
.orig-zoombar .zoom-lvl { font-size: 12px; font-weight: 600; min-width: 44px; text-align: center; }
.orig-zoombar .pdf-pager { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.18); }
.orig-zoombar .pdf-pageno { font-size: 12px; font-weight: 600; min-width: 40px; text-align: center; }
.confirm-tablewrap { flex: 1; overflow: auto; padding: 18px; min-width: 0; }
/* 列数が多いので、幅に押し込めず内容にあわせて広げ、親（.confirm-tablewrap）で
   横スクロールさせる。width:100% だと内訳の入力欄が 90px まで潰れ、
   長文が 1 文字ずつ折り返されて行が異常に伸びる。 */
.edit-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13.5px; }
.edit-table th { position: sticky; top: 0; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); padding: 10px 10px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; z-index: 1; }
.edit-table th .thtype { color: var(--accent); font-weight: 600; font-size: 10.5px; margin-left: 6px; }
.edit-table td { border-bottom: 1px solid var(--border); padding: 5px 6px; vertical-align: middle; }
/* drop guide line while dragging — box-shadow, so the row height never shifts */
.edit-table tbody tr.drop-before td { box-shadow: inset 0 2px 0 0 var(--accent); }
.edit-table tbody tr.drop-after td { box-shadow: inset 0 -2px 0 0 var(--accent); }
/* column header drag-to-reorder (vertical guide via box-shadow — no layout shift) */
.edit-table th.colhead { cursor: grab; user-select: none; }
.edit-table th.colhead:active { cursor: grabbing; }
.edit-table th.colhead.col-dragging { opacity: .45; }
.edit-table th.colhead.col-drop-before { box-shadow: inset 2px 0 0 0 var(--accent); }
.edit-table th.colhead.col-drop-after { box-shadow: inset -2px 0 0 0 var(--accent); }
.edit-table td.rownum, .edit-table th.rownum { color: var(--muted-2); font-size: 12px; text-align: center; width: 32px; }
.edit-table td.rowact, .edit-table th.rowact { width: 36px; text-align: center; }
.edit-table td.draghandle, .edit-table th.draghandle { width: 28px; text-align: center; color: var(--muted-2); cursor: grab; }
.edit-table td.draghandle:active { cursor: grabbing; }
.edit-table td.cbcol, .edit-table th.cbcol { width: 32px; text-align: center; }
.edit-table .rowchk { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.edit-table tbody tr.checked td { background: var(--good-soft); }
.edit-table tbody tr.dragging { opacity: .5; background: var(--accent-soft); }
.addrow { margin-top: 12px; }
.edit-table input, .edit-table textarea { border: 1px solid transparent; background: transparent; padding: 8px 36px 8px 9px; border-radius: 6px; width: 100%; font-family: inherit; font-size: 13.5px; }
.edit-table textarea { resize: none; overflow: hidden; min-height: 38px; line-height: 1.45; white-space: pre-wrap; }
.edit-table input:focus, .edit-table textarea:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cell-edit { position: relative; display: flex; align-items: center; }
.cell-edit .cell-save { position: absolute; right: 4px; top: 4px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity .12s; }
.cell-edit.editing .cell-save { opacity: 1; pointer-events: auto; }
.cell-edit .cell-save:hover { background: var(--accent-2); }
.edit-table td.delcol, .edit-table th.delcol { width: 34px; text-align: center; }
/* status dropdown in the detail footer */
.status-sel select { padding: 9px 30px 9px 12px; appearance: none; -webkit-appearance: none; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.status-sel.is-approved select { color: var(--good); border-color: var(--good-border); background: var(--good-soft); }
.status-sel.is-rejected select { color: var(--bad); border-color: var(--bad-border); background: var(--bad-soft); }
/* capture buttons in the list header */
.cap-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-actions .btn { position: relative; overflow: hidden; }
/* 却下 badge */
.badge.rejected { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-border); }
.badge.rejected .bdot { background: var(--bad); }
.edit-table tbody tr:hover td { background: var(--surface-2); }
@media (max-width: 760px) {
  .confirm-split { flex-direction: column; }
  .split-handle { display: none; }
  .confirm-orig { flex: 0 0 auto !important; max-height: 38vh; }
  .confirm-actions { width: 100%; margin-left: 0; }
  .confirm-actions .btn { flex: 1; }
  .confirm-bulk { width: 100%; order: 5; }
}

/* toggle (領収書モード) */
.toggle { display: flex; align-items: center; gap: 11px; margin: 16px 0 4px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .toggle-track { flex: none; width: 40px; height: 23px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; }
.toggle .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(17px); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--accent-soft); }
.toggle-text { display: flex; flex-direction: column; line-height: 1.35; }
.toggle-text strong { font-size: 13.5px; }
.toggle-text .muted { font-size: 11.5px; }
/* in receipt mode: columns are fixed → hide manual column add + the chat designer */
#editor.receipt-on #addCol { display: none; }
#editor.receipt-on .split > .card:first-child { display: none; }
#editor.receipt-on .split { grid-template-columns: 1fr; }

/* ---------------- Custom dialog ---------------- */
.dialog-overlay { z-index: 70; }
.dialog { width: 100%; max-width: 384px; background: var(--surface); border-radius: 6px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .18s cubic-bezier(.2,.8,.3,1); }
.dialog-head { display: flex; align-items: center; gap: 12px; padding: 22px 22px 0; }
.dialog-ico { flex: none; width: 40px; height: 40px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.dialog-ico.danger { background: var(--bad-soft); color: var(--bad); }
.dialog-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.dialog-body { padding: 12px 22px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 22px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head > div { text-align: left; }
  .page-head .btn { width: 100%; justify-content: center; }
  .page-head .device-chip { align-self: flex-start; } /* compact, left-aligned identity chip */
  .page-title { font-size: 20px; }
  .stats { gap: 8px; }
  .stat { padding: 11px 12px; } .stat .num { font-size: 21px; } .stat .lbl { font-size: 11px; }
  /* iOS zooms in on focus when a control's font-size is < 16px — keep all inputs at 16px */
  select, input, textarea, td[contenteditable], .bigselect,
  .cols-editor table input, .cols-editor table select { font-size: 16px; }
  .modal { max-width: 100%; border-radius: 6px; }
  .recent { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  header { padding: 10px 12px; gap: 8px; }
  .brand-name, .conn-text { display: none; }
  main { padding: 18px 14px 56px; }
  .tabs { gap: 1px; padding: 3px; }
  .toolbar { gap: 8px; } .segmented button { padding: 6px 12px; }
  .sync-bar { gap: 8px; }
  .sync-bar .select-wrap.compact { flex: 1; min-width: 0; }
  .banner { flex-wrap: wrap; }
  .banner .row-flex { width: 100%; } .banner .row-flex .btn { flex: 1; }
}
/* very narrow: tabs become icon-only so the header never overflows (the zoom bug) */
@media (max-width: 480px) {
  .tab-label { display: none; }
  .tab { padding: 8px 12px; }
  .brand { margin-right: 2px; }
}

/* ============ Auth gate (login) ============ */
.auth-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.auth-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); border: 1px solid var(--border); padding: 22px;
}
.auth-brand { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; color: var(--text); }
.auth-brand .brand-name { font-weight: 700; }
.auth-sub { color: var(--muted); font-size: 13px; margin: 6px 0 18px; }
.auth-card input { width: 100%; }
.auth-error { margin-top: 12px; color: #c0392b; font-size: 13px; }
.auth-submit { width: 100%; justify-content: center; margin-top: 18px; }

/* 領収書を削除（確認画面フッターのボタン） */
.btn.ghost.del-receipt { color: var(--bad); }
.btn.ghost.del-receipt:hover { background: var(--bad-soft); border-color: var(--bad); }

/* 却下理由メモ（確認画面フッター） */
.btn.ghost.reject-memo { color: var(--bad); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.ghost.reject-memo.empty { color: var(--muted); }
.btn.ghost.reject-memo:hover { background: var(--bad-soft); }

/* グループ選択ダイアログ */
.group-pick-label { padding: 14px 22px 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.group-pick-list { margin: 0 22px; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.group-pick-item { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13.5px; cursor: pointer; }
.group-pick-item:hover { border-color: var(--accent-2); background: var(--surface-2); }
.group-pick-item.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* ============ Analytics (分析) ============ */
.an-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: var(--sp-m); }
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; }
.an-card-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.an-card-value { font-size: 21px; font-weight: 750; margin-top: 2px; letter-spacing: -.015em; }
.an-card-sub { color: var(--muted-2); font-size: 12px; margin-top: 2px; }
.an-bar-wrap { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.an-bar { display: flex; width: 100%; }
.an-seg { display: block; }
.an-seg.approved { background: #16a34a; }
.an-seg.rejected { background: #dc2626; }
.an-seg.partial  { background: #f59e0b; }
.an-seg.pending  { background: #cbd5e1; }
.an-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 4px; color: var(--muted); font-size: 12.5px; }
.an-lg { display: inline-flex; align-items: center; gap: 6px; }
.an-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.an-dot.approved { background: #16a34a; } .an-dot.rejected { background: #dc2626; }
.an-dot.partial { background: #f59e0b; } .an-dot.pending { background: #cbd5e1; }
.an-table th.num, .an-table td.num { text-align: right; white-space: nowrap; }
@media (max-width: 760px) { .an-cards { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   v2: 取り込みキュー / レビュー / スケール対応一覧
   ============================================================================ */

/* ---- ヘッダーのユーザー表示 ---- */
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-email { font-size: 12.5px; color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .user-email { display: none; } }

/* ---- ドロップゾーン ---- */
.dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface); padding: 34px 24px; text-align: center;
  transition: border-color .15s, background .15s, transform .15s;
}
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.005); }
.dropzone .dz-ico { color: var(--muted-2); display: inline-flex; }
.dropzone.dragover .dz-ico { color: var(--accent); }
.dz-title { font-size: 16px; font-weight: 650; margin-top: 8px; }
.dz-sub { font-size: 13px; color: var(--muted); margin-top: 5px; }
.dz-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.dz-status { margin: 18px auto 0; max-width: 460px; text-align: left; }
.dz-status-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; margin-bottom: 8px; }

/* ---- プログレスバー ---- */
.pbar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.pbar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.pbar.done .pbar-fill { background: var(--good); }
.pbar.live .pbar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.spinner {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-row { display: flex; align-items: center; gap: 10px; padding: 26px 4px; color: var(--muted); font-size: 13.5px; }

/* ---- 取り込みサマリー ---- */
.ing-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; box-shadow: var(--shadow-xs); }
.ing-sum-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 14.5px; }
.ing-sum-head .spacer { flex: 1; }
.ing-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.ing-actions { margin-top: 12px; }

.jchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.jchip.st-ok { background: var(--good-soft); border-color: var(--good-border); color: var(--good); }
.jchip.st-bad { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.jchip.st-run { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.jchip.st-queue { background: var(--surface-2); }
.jchip.st-dup { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber); }

/* ---- ジョブ一覧 ---- */
.job-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.job-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
.job-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.job-table tr.is-failed td { background: var(--bad-soft); }
.job-table .jname { font-weight: 550; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-table .num { text-align: right; }
.jstage { margin-left: 8px; font-size: 11.5px; color: var(--muted); }
.jerr { display: block; margin-top: 3px; font-size: 11.5px; color: var(--bad); max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- ツールバー ---- */
.toolbar.sticky { position: sticky; top: var(--header-h, 56px); z-index: 5; background: var(--bg); padding-top: 10px; padding-bottom: 10px; }
.toolbar .spacer { flex: 1; }
.field-inline { font-size: 12.5px; color: var(--muted); }

.searchbox { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 10px; height: 34px; color: var(--muted-2); min-width: 240px; }
.searchbox input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); width: 100%; height: 100%; padding: 0; }
.searchbox input::-webkit-search-cancel-button { cursor: pointer; }

.btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; }
.btn.ghost.on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }

.kbd-hint { font-size: 11.5px; color: var(--muted-2); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.kbd-hint kbd { font: inherit; font-size: 10.5px; background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; margin: 0 1px; color: var(--muted); }
@media (max-width: 1100px) { .kbd-hint { display: none; } }

/* ---- ページャ ---- */
.pager { display: flex; align-items: center; gap: 10px; padding: 14px 4px; font-size: 12.5px; }
.pager .btn { margin-left: 0; }
.pager .muted { flex: 1; }

/* ---- レビュー行の追加要素 ---- */
/* キーボードカーソル行。
   inset の左線を全セルに掛けると、セル境界ごとに縦棒が並んで縞模様になるので、
   線は先頭セルだけ。背景は hover と区別できる程度の薄い色に留める。 */
.review-table tr.cursor > td { background: var(--row-cursor); box-shadow: none; }
.review-table tr.cursor > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.review-table tbody tr.cursor:hover > td { background: var(--row-cursor); }
.review-table .fsub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.review-table td.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.review-table th.num, .review-table td.num, .db-table th.num, .db-table td.num { text-align: right; }
.flagcol { min-width: 150px; }

.flag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; margin: 1px 3px 1px 0; background: var(--amber-soft); border: 1px solid var(--amber-border); color: var(--amber); white-space: nowrap; cursor: help; }
.flag.sev { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.flag.ok { background: var(--good-soft); border-color: var(--good-border); color: var(--good); cursor: default; }
.conf { display: inline-flex; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; margin: 1px 3px 1px 0; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); white-space: nowrap; cursor: help; }
.conf.cf-low { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.conf.cf-med { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber); }

.icon-btn.approve { color: var(--good); }
.icon-btn.approve:hover { background: var(--good-soft); }

/* ---- 検算バナー（確認詳細） ---- */
/* 幅が足りないときは折り返す。印の名前だけは折らない
   （「読みに / くい原 / 本」と3行になって読めなくなっていた）。 */
.check-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; margin-bottom: 12px;
}
.check-banner > span:not(.check-detail) { white-space: nowrap; }
.check-detail { flex: 1 1 200px; min-width: 0; }
.check-banner.ok { background: var(--good-soft); border: 1px solid var(--good-border); color: var(--good); }
.check-banner.warn { background: var(--amber-soft); border: 1px solid var(--amber-border); color: var(--amber); }
.check-banner.bad { background: var(--bad-soft); border: 1px solid var(--bad-border); color: var(--bad); }
.check-detail { font-weight: 450; opacity: .85; font-size: 12px; }
.edit-table td.gtcol, .edit-table th.gtcol { text-align: right; white-space: nowrap; }
.gt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; cursor: help; }

/* ---- データテーブル ---- */
.db-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
.db-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
.db-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.db-table td[contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; background: var(--surface); }
.db-table tr.is-pending td:first-child { box-shadow: inset 3px 0 0 var(--amber-border); }
.db-table .row-actions { display: flex; gap: 2px; justify-content: flex-end; }

/* ---- 分析カード ---- */
.an-card.warn { border-color: var(--amber-border); background: var(--amber-soft); }
.an-card.warn .an-card-value { color: var(--amber); }

/* ---- v2 レイアウト補正 ----
   旧レビュー表（件数/追加列）向けに書かれていた nth-child の固定幅が新しい列構成に
   当たって金額・状態列を潰すので、新レイアウトに合わせて上書きする。
   （本文幅は :root の --page に一本化した） */

.review-table th:nth-child(5), .review-table td:nth-child(5),
.review-table th:nth-child(7), .review-table td:nth-child(7) { width: auto; }
.review-table th.flagcol, .review-table td.flagcol { width: 250px; white-space: normal; line-height: 1.75; }
.review-table th.num, .review-table td.num { width: 110px; }
.review-table th.grpcol, .review-table td.grpcol { width: 140px; }
.review-table th.stcol, .review-table td.stcol { width: 96px; }
.review-table th.actcol, .review-table td.actcol { width: 78px; white-space: nowrap; text-align: right; }
.review-table td.actcol { padding-left: 4px; padding-right: 10px; }

/* ツールバーが折り返したときもキーボードヒントは右端に置く */
.kbd-hint { margin-left: auto; }

/* 重複スキップは「エラー」ではないので赤くしない */
.job-table tr .jchip.st-dup + .jerr, .job-table td .jerr.neutral { color: var(--muted); }

/* ---- 明細編集テーブルの行揃え ----
   input と textarea で箱の高さが違い、1行しかない行でも文字の縦位置がずれていた。
   両者の padding / line-height / 高さを揃えて、同じ位置に文字が来るようにする。
   （セル右の 36px の余白は、いまは使っていない保存ボタン用だったので詰める） */
.edit-table input, .edit-table textarea {
  padding: 9px 10px;
  line-height: 1.45;
  box-sizing: border-box;
  min-height: 38px;
}
.edit-table input { height: 38px; }
.edit-table textarea { min-height: 38px; }
/* 金額・税率は数字なので右揃え + 等幅数字にして、桁を目で追えるようにする。
   また値の幅は決まっているので列幅を固定し、店名・内訳に幅を回す。 */
.edit-table td.numcell input, .edit-table td.numcell textarea { text-align: right; font-variant-numeric: tabular-nums; }
.edit-table th.numcell { text-align: right; }
.edit-table th.numcell .thtype { margin-left: 4px; }
.edit-table th.numcell, .edit-table td.numcell { width: 130px; }

.check-banner.info { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted); }
.check-banner .check-detail { margin-left: 4px; }

/* 領収書1枚あたりの合計はヘッダーに置く（行ごとの値ではないため） */
.receipt-total { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border-strong); cursor: help; }
.receipt-total .rt-label { font-size: 11.5px; color: var(--muted-2); }
.receipt-total .rt-value { font-size: 13.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.check-banner .check-detail.strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* 分析: セクション見出しと未承認金額の強調 */
/* 節の見出し（分析・取り込み・確認で共通）。階層は 2 段までにする。 */
.an-h, .sec-head, .cf-sec-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: var(--sp-l) 0 var(--sp-s); padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.an-h:first-child, .cf-sec-head { margin-top: 0; }
/* API 利用セクションの小見出し。an-h の下にもう一段。 */
/* 節の中の小見出し。罫線は引かない（節の境界と混ざるため）。 */
.an-h3 { font-size: 12px; font-weight: 700; margin: 18px 0 6px; color: var(--muted); letter-spacing: .04em; }
.an-note { font-size: 12.5px; margin: 10px 2px 0; }
.an-table td.num.pend { color: var(--amber); font-weight: 650; }

/* 勘定科目の定義テーブル */
.acct-card { margin-bottom: 22px; }
.acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.acct-head .muted { margin: 6px 0 0; font-size: 12.5px; max-width: 720px; }
.acct-wrap { max-height: 460px; overflow-y: auto; }
#acctTable th { font-size: 11.5px; }
#acctTable td { padding: 4px 8px; }
#acctTable input { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 7px 8px; font: inherit; font-size: 13px; }
#acctTable input:hover { border-color: var(--border); }
#acctTable input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: 0; }
#acctTable .acct-name { font-weight: 650; }
#acctTable td:nth-child(1) { width: 130px; }
#acctTable td:nth-child(2), #acctTable th:nth-child(2) { width: 90px; }
#acctTable td:nth-child(4), #acctTable th:nth-child(4) { width: 220px; }
#acctTable td:nth-child(5), #acctTable th:nth-child(5) { width: 58px; }
#acctTable .acct-act { width: 74px; white-space: nowrap; text-align: right; }
#acctTable tr.inactive { opacity: .45; }
#acctTable tr.inactive .acct-name { text-decoration: line-through; }

/* ---- 重複の比較 ---- */
.flag.clickable { cursor: pointer; gap: 4px; }
.flag.clickable:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.check-banner .dup-open { margin-left: auto; flex: none; background: var(--surface); }

.dup-overlay { align-items: flex-start; padding: 40px 20px; overflow-y: auto; }
.dup-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(1180px, 100%); padding: 20px 22px 18px; }
.dup-head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.dup-head .spacer { flex: 1; }
.dup-sub { font-size: 12.5px; margin: 8px 0 16px; }
.dup-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .dup-cmp { grid-template-columns: 1fr; } }
.dup-pane { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.dup-pane.mine { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dup-pane-title { padding: 9px 13px; font-size: 12.5px; font-weight: 700; background: var(--surface); border-bottom: 1px solid var(--border); }
.dup-pane.mine .dup-pane-title { color: var(--accent); }
.dup-view { height: 320px; overflow: auto; background: #fff; display: flex; align-items: flex-start; justify-content: center; cursor: zoom-in; }
.dup-view img, .dup-view canvas { max-width: 100%; height: auto; display: block; }
.dup-fields { display: grid; grid-template-columns: 92px 1fr; gap: 2px 12px; margin: 0; padding: 12px 13px; background: var(--surface); font-size: 13px; }
.dup-fields dt { color: var(--muted); font-size: 11.5px; padding-top: 3px; }
.dup-fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.dup-fields dd.dup-empty { color: var(--muted-2); font-weight: 400; }
.dup-fields dd.dup-small { font-weight: 400; font-size: 12px; color: var(--muted); }
.dup-foot { display: flex; align-items: center; margin-top: 18px; }
.dup-foot .spacer { flex: 1; }

/* バッチ処理（Message Batches）の状況。取り込みバッチ別の表示とは独立した枠。 */
.batch-runs { margin-bottom: 14px; }
.brun-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 8px; }
.brun-row .spacer { flex: 1; }
.batch-runs .pbar { margin-top: 4px; }

/* 取り込みの一覧。プルダウンで畳むと処理中のものが見えなくなるので全部並べる。 */
.batch-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--sp-m); }
.batch-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font: inherit; color: inherit; box-shadow: var(--shadow-xs);
}
.batch-item:hover { border-color: var(--border-strong); }
.batch-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.batch-item.live { background: var(--accent-soft); }
.bi-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bi-head .spacer { flex: 1; }
.bi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.batch-item .pbar { margin-top: 2px; }


/* ---- 取り込み画面: 左にグループ、右に取り込みの状況 ---- */
.ingest-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .ingest-layout { grid-template-columns: 1fr; } .ingest-side { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 12px; position: static; } }

/* 箱にすると右側（枠の無い一覧）と釣り合わず、浮いて見える。
   罫線1本で領域を示すだけにする。 */
.ingest-side { position: sticky; top: 12px; padding: 0 16px 0 0; border-right: 1px solid var(--border); }
.side-head { font-size: 11px; font-weight: 700; color: var(--muted-2); letter-spacing: .06em; margin-bottom: 10px; }
.side-empty { font-size: 12px; }
.side-list { display: flex; flex-direction: column; }
.side-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.side-name {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 4px;
  font: inherit; color: inherit; cursor: pointer; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-name:hover { background: var(--accent-soft); color: var(--accent); }
.side-count { color: var(--muted-2); font-variant-numeric: tabular-nums; font-size: 12px; }
.side-pend {
  background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border);
  border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* 完了は畳めるようにボタンにする（見た目は共通の節見出しに揃える）。 */
.sec-head { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border-strong); font-family: inherit; text-align: left; }
.sec-head strong { color: var(--text); font-size: 13px; font-weight: 700; }
.sec-head .muted { font-weight: 400; font-size: 12px; }
.sec-head.toggle { cursor: pointer; }
.sec-head.toggle:hover strong { color: var(--accent); }
.sec-body.hidden { display: none; }

/* ============================================================
   帳簿テーブル（分析タブ）
   数字は桁で揃え、通貨は行として積む。1 セルに横並びで詰めると
   列幅を超えて隣に被るので、多通貨は必ず縦に積む。
   ============================================================ */
/* 幅を締める。画面いっぱいに広げると名前と数字が離れすぎて、
   どの行の金額なのか視線が繋がらなくなる。 */
.led-table { width: 100%; max-width: 860px; border-collapse: collapse; table-layout: fixed; margin-bottom: 6px; }
.led-table th, .led-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.led-table thead th {
  /* 見出しが薄すぎて列の切れ目が読めなかった。数字を追う表なので、ここは濃くする。 */
  font-size: 11.5px; font-weight: 700; color: #334158; letter-spacing: .04em;
  border-bottom: 1px solid var(--border-strong); white-space: nowrap; text-align: left;
}
.led-table th.n, .led-table th.y { text-align: right; }
.led-table th.m { text-align: left; }
.led-table tbody tr:last-child td { border-bottom: 0; }
.led-table tbody tr:hover { background: var(--surface-2); }

/* 列幅。名前は伸縮、数字は固定幅で桁を揃える。 */
.led-table th:first-child { width: auto; }
.led-table th.n { width: 72px; }
.led-table th.m { width: 150px; }
.led-table th.y { width: 132px; }

.led-table td.nm { font-weight: 600; word-break: break-word; }
.led-table td.num { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 金額セル: 通貨ごとに1行、桁は等幅で揃える */
.ledger { text-align: right; font-variant-numeric: tabular-nums; }
.lg-line, .lg-sub { display: flex; justify-content: flex-end; gap: 4px; align-items: baseline; line-height: 1.5; }
.lg-cur { color: var(--muted-2); font-size: 11px; }
.lg-fig { font-weight: 600; }
.lg-zero { color: var(--muted-2); }
/* 円の概算は小計。罫線で「印字された額」と区切る。 */
.lg-sub { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--border); }
.lg-sub .lg-fig { font-weight: 400; font-size: 12px; color: var(--muted-2); }
.lg-sub .lg-cur { font-size: 10px; }
.ledger.pend .lg-fig { color: var(--amber); }
.ledger.pend .lg-sub .lg-fig { color: var(--amber); opacity: .7; }

/* 確認の進みぐあい */
.meter-cell { white-space: nowrap; }
.meter { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--good); border-radius: 3px; }
.meter-label { display: block; margin-top: 4px; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .led-table th.m, .led-table td.meter-cell { display: none; }
  .led-table th.y { width: 110px; }
}

/* カードの金額。通貨が複数なら縦に積み、そのぶん字を落として収める。 */
.an-card-value.multi { font-size: 19px; line-height: 1.35; }
.an-card-value .acv-line { display: block; font-variant-numeric: tabular-nums; }
.an-card-value { overflow-wrap: anywhere; }

/* 編集テーブルの列幅。潰れて変な折り返しになるのを防ぐ下限を決める。 */
.edit-table td input, .edit-table td textarea { min-width: 130px; }
.edit-table td[data-key="date"] input { min-width: 120px; }
.edit-table td[data-key="store"] textarea { min-width: 190px; }
.edit-table td[data-key="breakdown"] textarea { min-width: 340px; }   /* 内訳は長文が入る */
.edit-table td[data-key="account"] textarea { min-width: 150px; }
.edit-table td[data-key="currency"] textarea,
.edit-table td[data-key="tax_rate"] input { min-width: 84px; }
.edit-table td[data-key="registration_no"] textarea,
.edit-table td[data-key="invoice_no"] textarea { min-width: 170px; }
.edit-table td.numcell input { min-width: 118px; }
/* 単語の途中で切らない。折り返すとしても語の境界で。 */
.edit-table textarea { word-break: normal; overflow-wrap: break-word; }

/* ============================================================
   確認画面（領収書モード）: 節に分けた項目リスト
   1枚 = ふつう1行なので、11列の表を横スクロールさせるより
   項目を縦に並べるほうが「1枚を確かめる」仕事に合う。
   ============================================================ */
.cf-layout { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 720px) { .cf-layout { grid-template-columns: 1fr; } .cf-nav { display: none; } }

.cf-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.cf-navlink {
  text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: 6px;
  font: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
}
.cf-navlink:hover { background: var(--accent-soft); color: var(--accent); }

.cf-body { display: flex; flex-direction: column; gap: var(--sp-l); min-width: 0; max-width: 560px; }
.cf-sec { scroll-margin-top: 8px; }
.cf-sec-head { margin: 0 0 8px; }
.cf-sec-head svg { color: var(--muted-2); }
.cf-no { color: var(--muted-2); font-variant-numeric: tabular-nums; font-weight: 600; }

/* 項目行: ラベルは固定幅、値は伸びる */
.fld { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; }
.fld-label { font-size: 12px; color: var(--muted); padding-top: 8px; }
.fld-input { min-width: 0; }
.fld-input input, .fld-input textarea {
  width: 100%; border: 1px solid transparent; background: transparent;
  padding: 6px 9px; border-radius: 4px; font-family: inherit; font-size: 13.5px;
}
.fld-input textarea { resize: none; overflow: hidden; min-height: 32px; line-height: 1.45; white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; }
.fld-input input { height: 32px; }
.fld-input input:hover, .fld-input textarea:hover { border-color: var(--border); }
.fld-input input:focus, .fld-input textarea:focus {
  background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
/* 数値は欄を狭くして、ラベルの近くで桁を揃える。
   値の欄いっぱいに右寄せすると、ラベルと数字が離れて視線が繋がらない。 */
/* 金額も左揃え。表なら桁を揃える右寄せが読みやすいが、ここは1枚ぶんの
   入力フォームで、上下に並ぶのは「税率・税抜・内消費税・税込」と桁の違う値。
   ラベルの位置と値の頭が揃っていないほうが、視線が行ったり来たりする。 */
.fld.num .fld-input { max-width: 170px; }
.fld.num .fld-input input { text-align: left; font-variant-numeric: tabular-nums; }
/* 税率・通貨も短い値なので同様に */
.fld-input input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }

/* 税率ごとのブロック。1つしか無ければ見出しは出ない。 */
.cf-rate + .cf-rate { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.cf-rate-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px 92px; }
.cf-rate-no { font-size: 12px; font-weight: 700; color: var(--muted); }
.cf-rate-tag {
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 2px 8px;
}
.cf-rate-head .spacer { flex: 1; }
.cf-rate.has-region:hover { background: var(--accent-soft); border-radius: 6px; box-shadow: 0 0 0 6px var(--accent-soft); }
.cf-sec .addrow { margin-top: 12px; }

/* ---- ナビ: 順路（取り込み→確認→データ）と道具（分析・テンプレ）を分ける ---- */
.tab-flow { display: flex; align-items: center; gap: 2px; }
.flow-sep { display: inline-flex; color: var(--muted-2); opacity: .55; pointer-events: none; }
.tab-div { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--border-strong); }
@media (max-width: 620px) { .flow-sep { display: none; } .tab-div { margin: 4px 3px; } }

/* 履歴があるときのドロップゾーン。投入口は常に必要だが主役ではない。
   ドラッグ中とアップロード中は通常の大きさに戻る。 */
.dropzone.compact { padding: 12px 16px; text-align: left; display: flex; align-items: center; gap: 12px; }
.dropzone.compact .dz-ico { margin: 0; }
.dropzone.compact .dz-title { font-size: 13px; font-weight: 600; margin: 0; }
.dropzone.compact .dz-sub { display: none; }
.dropzone.compact .dz-actions { margin: 0 0 0 auto; }
.dropzone.compact.dragover { padding: 34px 24px; text-align: center; display: block; }
.dropzone.compact.dragover .dz-title { font-size: 16px; margin-top: 8px; }
.dropzone.compact.dragover .dz-sub { display: block; }
.dropzone.compact.dragover .dz-actions { margin: 14px 0 0; }

/* 左右の列の先頭を揃える（節見出しの既定の上余白ぶんズレていた） */
#batchPicker > .sec-head:first-child { margin-top: 0; }
/* ドロップゾーンと本体が 0px で接していた。ブロック間は必ず --sp-m 空ける。 */
.ingest-layout { margin-top: var(--sp-m); }

/* 畳める節見出し（API 利用など） */
.an-h.toggle { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border-strong); font-family: inherit; text-align: left; cursor: pointer; }
.an-h.toggle:hover span:not(.muted) { color: var(--accent); }
.an-h .muted { margin-left: auto; font-weight: 400; font-size: 12px; }

/* 定期の抜け */
.gap-months { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.gap-hint { display: block; margin-top: 2px; font-size: 11px; color: var(--muted-2); }

/* 済んだ取り込みは1行の要約だけ。行動が要らない情報を一覧にしない。 */
.done-note { margin: var(--sp-m) 0 0; font-size: 12px; }

/* ============================================================
   分析タブ: 左に節、右に中身
   ============================================================ */
.an-navitem {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; padding: 7px 9px; border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
}
.an-navitem svg { color: var(--muted-2); }
.an-navitem:hover { background: var(--surface-2); color: var(--text); }
.an-navitem.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.an-navitem.active svg { color: var(--accent); }
.an-navcount { margin-left: auto; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.an-navcount.warn { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border); border-radius: 999px; padding: 0 6px; font-weight: 700; }

/* ---- グラフ ----
   棒は細く、データ端だけ角丸、棒どうしは 2px 空ける。 */
.chart { max-width: 860px; margin-bottom: var(--sp-s); }
.chart-plot { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 210px; padding-bottom: 2px; }
.chart-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); pointer-events: none; }
.chart-col {
  position: relative; flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0 0 2px; font: inherit; border-radius: 4px;
}
.chart-col.link { cursor: pointer; }
.chart-col.link:hover { background: var(--accent-soft); }
/* 値ラベルと棒を一緒に下揃えにすることで、数字が棒の直上に来る。 */
.chart-barwrap { flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.chart-bar { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; }
.ct-val { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-label { font-size: 11px; color: var(--muted-2); }
.chart-scale { font-size: 11px; text-align: right; max-width: 860px; margin-top: 4px; }

.hbars { display: flex; flex-direction: column; gap: 3px; max-width: 860px; margin-bottom: var(--sp-s); }
.hbar {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 116px; gap: 12px; align-items: center;
  background: none; border: 0; padding: 5px 8px; border-radius: 6px; font: inherit; text-align: left;
}
.hbar.link { cursor: pointer; }
.hbar.link:hover { background: var(--surface-2); }
.hb-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 9px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.hb-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.hb-val { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* 表のセルから他タブへ飛ぶリンク */
.cell-link { background: none; border: 0; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; text-align: left; }
.cell-link:hover { color: var(--accent); text-decoration: underline; }

/* データタブ: 分析から飛んできた絞り込みの表示 */
.db-filter {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-s);
  background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent);
  border-radius: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
}
.db-filter .btn { margin-left: auto; }

/* ============================================================
   面を減らす
   カードや枠で囲むほど、境界そのものが情報のように見えて画面が騒がしくなる。
   区切りは余白と細い罫線だけで足りる。
   ============================================================ */

/* 分析のカード → 罫線で区切っただけの数字の並び */
.an-cards {
  grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.an-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 14px 20px 16px; border-left: 1px solid var(--border);
}
.an-card:first-child { border-left: 0; padding-left: 0; }
.an-card.warn { background: none; }
.an-card-label { font-size: 11.5px; color: var(--muted); }
.an-card-value { font-size: 24px; }

/* 取り込みの一覧 → 行。カードにすると6件並んだだけで壁になる */
.batch-item {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--border); padding: 10px 2px;
}
.batch-item:hover { background: var(--surface-2); }
.batch-item.active { box-shadow: none; background: var(--accent-soft); }
.batch-item.live { background: none; }
.batch-list { gap: 0; }

/* ドロップゾーン → 破線の箱をやめ、下に1本 */
.dropzone {
  border: 0; border-bottom: 1px dashed var(--border-strong); border-radius: 0;
  background: none; box-shadow: none; padding: 14px 2px;
}
.dropzone.dragover { background: var(--accent-soft); border-bottom-color: var(--accent); border-radius: 6px; }
.dropzone.compact { padding: 10px 2px; }
.dropzone.compact.dragover { padding: 26px 16px; }

/* 表 → 外枠と縞をやめ、行の区切りだけ */
.db-table { background: none; }
.db-table th { background: none; border-bottom: 1px solid var(--border-strong); padding: 9px 12px 9px 0; }
.db-table td { padding: 8px 12px 8px 0; }
.db-table th:last-child, .db-table td:last-child { padding-right: 0; }
.db-table tbody tr:hover td { background: var(--surface-2); }
.db-table tr.is-pending td:first-child { box-shadow: none; }
.db-table th.stcol, .db-table td.stcol { width: 88px; }
.db-table th.flagcol, .db-table td.flagcol { width: 130px; }
.db-table th.actcol, .db-table td.actcol { width: 72px; text-align: right; }
.db-table td.num { font-variant-numeric: tabular-nums; }

/* 分析から飛んだ絞り込み → 帯をやめ、文字だけ */
.db-filter { background: none; border: 0; border-radius: 0; padding: 0; }

.db-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-s); }
.db-count { margin-left: auto; font-size: 12px; }

/* 列の出し入れ */
.col-pick { position: relative; }
.col-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--shadow-md); padding: 5px; display: flex; flex-direction: column;
}
.col-menu.hidden { display: none; }
.col-item {
  display: flex; align-items: center; gap: 8px; background: none; border: 0;
  padding: 6px 8px; border-radius: 4px; font: inherit; font-size: 13px;
  color: var(--muted-2); cursor: pointer; text-align: left;
}
.col-item.on { color: var(--text); }
.col-item:hover { background: var(--surface-2); }

/* 列幅を決める。
   表だけ狭くするとヘッダやフィルタとの間に帯状の空きができるので幅は本文いっぱいに取り、
   短い値の列を固定して、余った幅は店名（長くなりがち）に寄せる。 */
.db-table { table-layout: fixed; width: 100%; }
.db-table th, .db-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-table th[data-key="date"], .db-table td[data-key="date"] { width: 118px; }
.db-table th[data-key="amount_ex"], .db-table td[data-key="amount_ex"],
.db-table th[data-key="amount_in"], .db-table td[data-key="amount_in"] { width: 128px; }
.db-table th[data-key="currency"], .db-table td[data-key="currency"],
.db-table th[data-key="tax_rate"], .db-table td[data-key="tax_rate"] { width: 88px; }
.db-table th[data-key="account"], .db-table td[data-key="account"] { width: 148px; }
.db-table th[data-key="registration_no"], .db-table td[data-key="registration_no"] { width: 176px; }
.db-table th[data-key="invoice_no"], .db-table td[data-key="invoice_no"] { width: 156px; }
.db-table th.flagcol, .db-table td.flagcol { width: 130px; white-space: normal; }
/* 編集中は省略せず全部見せる */
.db-table td[contenteditable]:focus { white-space: normal; overflow: visible; }

/* 勘定科目のセレクト。入力欄と同じ見た目にして、選択式であることだけを矢印で示す。 */
select.pick {
  width: 100%; max-width: 100%; appearance: none;
  border: 1px solid transparent; background: transparent; color: inherit;
  padding: 6px 26px 6px 9px; border-radius: 4px; font-family: inherit; font-size: 13.5px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 7px center;
}
select.pick:hover { border-color: var(--border); }
select.pick:focus { background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.db-table select.pick { padding: 4px 24px 4px 0; font-size: 13px; background-position: right 2px center; }
.db-table select.pick:focus { padding-left: 8px; }

/* 確認の一覧に足した列 */
.review-table th.datecol, .review-table td.datecol { width: 118px; font-variant-numeric: tabular-nums; }
.review-table th.acctcol, .review-table td.acctcol { width: 156px; }
/* 平坦化：外枠と縞をやめ、行の区切りだけにする */
.review-table { background: none; }
.review-table th { background: none; border-bottom: 1px solid var(--border-strong); }
.review-table tbody tr:hover td { background: var(--surface-2); }

/* 取引先の名寄せ */
.vend-pick { display: flex; align-items: center; gap: 8px; }
.vend-pick select.pick { max-width: 240px; }
.vend-note { font-size: 11px; }

/* ワークスペース */
.org-switch { display: flex; align-items: center; margin-left: 4px; }
.org-name { font-size: 13px; color: var(--muted); }
.org-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-s); }
.org-head .spacer { flex: 1; }
.org-invite { display: flex; gap: 8px; margin-top: var(--sp-s); max-width: 460px; }
.org-invite input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; }
.org-invite input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* ワークスペースの費用と上限 */
.budget { max-width: 560px; margin-bottom: var(--sp-m); }
.budget-line { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.budget-line strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.budget-line strong.over { color: var(--bad); }
.budget-line .spacer { flex: 1; }
.meter-fill.over { background: var(--bad); }
.warn-note { color: var(--amber); }

/* ============================================================================
   v3: 作業画面（明細）
   一覧と原本を左右に常時置く。承認のたびに全画面を開閉するのをやめた。
   ============================================================================ */
main:has(#view-work:not(.hidden)) { max-width: none; padding: 0; }
#view-work { height: calc(100vh - var(--header-h, 56px)); }
/* 3つの面の幅は人が決める。原本を大きく見たい人と、一覧を広く見たい人がいて、
   どちらか片方に固定するとどちらかが必ず不便になる。
   幅は CSS 変数で持ち、掴んで動かした値を localStorage に残す。 */
.work {
  display: grid;
  grid-template-columns: var(--w-list, 30%) 5px minmax(0, 1fr);
  height: 100%; position: relative;
}
.work-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.work-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.work-rows { flex: 1; overflow-y: auto; min-height: 0; }
.work-foot { padding: 6px 12px; border-top: 1px solid var(--border); }

.wrow {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--border); padding: 7px 12px; font: inherit; cursor: pointer;
}
.wrow:hover { background: var(--surface-2); }
.wrow.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.wrow-top { display: flex; align-items: baseline; gap: 8px; }
.wrow-top .spacer { flex: 1; }
.wrow-date { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.wrow-store { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow-amt { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wrow-sub { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.wflag { background: var(--amber-soft); color: var(--amber); border-radius: 999px; padding: 0 7px; font-weight: 600; }
.wflag.sev { background: var(--bad-soft); color: var(--bad); }
.wdone { color: var(--good); font-weight: 600; }
.wdone.big { font-size: 14px; }

.work-detail { display: grid; grid-template-columns: var(--w-orig, 46%) 5px minmax(0, 1fr); min-height: 0; }
.wd-orig { background: #0f1115; overflow: hidden; position: relative; }
.wd-fields { display: flex; flex-direction: column; min-height: 0; }
/* 見出しは折り返す。チップが増えたときに店名が縦1文字ずつに潰れていた
   （flex の子は既定で縮むので、日本語だと1文字ずつ折れる）。 */
.wd-head {
  display: flex; align-items: baseline; gap: 8px 10px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.wd-head .spacer { flex: 1; }
.wd-head > strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-head .hard-chip, .wd-head .exp-chip, .wd-head .wd-total { flex: none; }
.wd-total { font-variant-numeric: tabular-nums; font-weight: 700; }
.wd-body { flex: 1; overflow-y: auto; padding: 18px 20px; min-height: 0; container-type: inline-size; }
/* 狭い幅では折り返す。折り返せないと、ボタンの文字が縦積みになって読めなくなる。 */
.wd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--border); }
.wd-actions .btn, .wd-actions .seg-btn, .wd-actions .wd-actions .spacer { flex: 1; }

@media (max-width: 1100px) {
  .work { grid-template-columns: 1fr; height: auto; }
  #view-work { height: auto; }
  .work-detail { grid-template-columns: 1fr; }
  .wd-orig { height: 46vh; }
}

/* 取り込み: 画面ではなく操作 */
.ingest-chip { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.drop-overlay {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(79, 70, 229, .12); backdrop-filter: blur(2px); pointer-events: none;
}
.drop-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--surface); border: 2px dashed var(--accent); border-radius: 6px;
  padding: 40px 60px; color: var(--accent); font-weight: 700; box-shadow: var(--shadow-lg);
}

/* 設定 */
.set-layout { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px; align-items: start; }
.set-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 0 16px 0 0; border-right: 1px solid var(--border); }
@media (max-width: 860px) { .set-layout { grid-template-columns: 1fr; } .set-side { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 12px; position: static; flex-direction: row; flex-wrap: wrap; } }

#settingsBtn.on { border-color: var(--accent); color: var(--accent); }

/* レポートはサイドメニューをやめて縦に積む。節が短いので分ける必要が無い。 */


/* ---- テンプレート編集（設定 > テンプレート） ---- */
/* 名前は見出しとして機能させたいので、枠を出さず下線だけにする。 */
.tmpl-name {
  font-size: 15px; font-weight: 650; color: var(--ink);
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: transparent; padding: 2px 0; min-width: 220px;
}
.tmpl-name:hover { border-bottom-color: var(--line); }
.tmpl-name:focus { outline: 0; border-bottom-color: var(--accent); }
.tmpl-instr {
  width: 100%; resize: vertical; font: inherit; line-height: 1.6;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink);
}
.tmpl-instr:focus { outline: 0; border-color: var(--accent); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.chk input { accent-color: var(--accent); }
#editor { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
#editor .led-table input:disabled { color: var(--muted); background: transparent; }


/* ---- 濃紺ヘッダの上に載る操作 ---- */
header .btn.primary { background: var(--accent-2); border-color: #3b82f6; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset; }
header .btn.primary:hover { background: #3b82f6; border-color: #60a5fa; }
header .icon-btn.bordered { background: rgba(255,255,255,.08); border-color: var(--nav-line); color: var(--nav-ink); }
header .icon-btn.bordered:hover { background: rgba(255,255,255,.16); color: #fff; }
header .user-email, header .org-switch .dd-btn { color: var(--nav-muted); }
header .org-switch .dd-btn { background: rgba(255,255,255,.08); border-color: var(--nav-line); }
header .org-switch .dd-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
header .ingest-chip { background: rgba(255,255,255,.10); border-color: var(--nav-line); color: var(--nav-ink); }


/* ---- ショートカット一覧（? キー） ---- */
.keyhelp-overlay { display: flex; align-items: center; justify-content: center; padding: 24px; }
.keyhelp {
  width: min(560px, 100%); max-height: 82vh; overflow: auto;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px 20px 16px;
}
.keyhelp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.keyhelp-sec { margin: 16px 0 6px; font-size: 12px; font-weight: 700; color: var(--accent-ink); letter-spacing: .04em; }
.keyhelp-list { display: flex; flex-direction: column; }
.keyhelp-row { display: flex; align-items: center; gap: 12px; padding: 7px 2px; border-top: 1px solid var(--border); font-size: 13.5px; }
.keyhelp-keys { display: inline-flex; gap: 4px; min-width: 62px; }
.keyhelp-foot { margin: 16px 0 0; font-size: 12.5px; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-border); border-bottom-width: 2px; border-radius: 4px;
}

.auth-brand { color: var(--accent-ink); }
.auth-brand .ico { color: var(--accent); }



/* ---- 状態（未確認 / 承認済み / 却下） ---- */
/* 色は状態そのものを表す。青（操作の色）とは別に持たせて、
   「今どの状態か」と「押せる操作」を混同させない。 */
.status-seg .seg-btn { padding: 6px 11px; font-size: 12.5px; }
.status-seg .seg-btn.on.st-pending  { background: var(--amber); color: #fff; }
.status-seg .seg-btn.on.st-approved { background: var(--good);  color: #fff; }
.status-seg .seg-btn.on.st-rejected { background: var(--bad);   color: #fff; }
.status-seg .seg-btn.on.st-pending:hover  { background: var(--amber); }
.status-seg .seg-btn.on.st-approved:hover { background: var(--good); }
.status-seg .seg-btn.on.st-rejected:hover { background: var(--bad); }

.wdone {
  padding: 0 7px; border-radius: 999px; font-weight: 600; font-size: 11px;
  border: 1px solid transparent;
}
.wdone.st-approved { background: var(--good-soft); color: var(--good); border-color: var(--good-border); }
.wdone.st-rejected { background: var(--bad-soft);  color: var(--bad);  border-color: var(--bad-border); }


/* ---- 一覧の複数選択と一括操作 ---- */
.wrow { position: relative; }
.wrow-check {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 4px;
  border: 1px solid var(--border-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; opacity: 0; transition: opacity .12s;
}
.wrow:hover .wrow-check, .wrow.on .wrow-check, .wrow.picked .wrow-check { opacity: 1; }
.wrow.picked .wrow-check { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 選択マスの分だけ本文を寄せる。マスが出たり消えたりで文字が動くと読みにくい。 */
.wrow-top, .wrow-sub { padding-left: 24px; }
.wrow.picked { background: var(--accent-soft); }

.bulkbar {
  display: flex; align-items: center; gap: 8px; flex: 1 0 100%;
  margin-top: 8px; padding: 8px 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--accent-ink);
}
.bulkbar .spacer { flex: 1; }

.bulkbar strong, .bulkbar .btn { white-space: nowrap; }
.status-seg .seg-btn { white-space: nowrap; }


/* ---- 手動タグ（読みにくい原本） ---- */
/* 付いている状態は琥珀。青（操作）でも赤（却下）でもない「注意」の色を使う。 */
.tagbtn.on {
  background: var(--amber-soft); color: var(--amber);
  border-color: var(--amber-border); font-weight: 700;
}
.tagbtn.on:hover { background: #fef3c7; }
.tagbtn.ghost { color: var(--muted); }


/* ---- 印ごとの内訳（レポート > 要確認） ---- */
.flag-list { display: flex; flex-direction: column; margin-top: 14px; max-width: 860px; }
.flag-row {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-top: 1px solid var(--border);
  background: transparent; font: inherit; color: var(--text); cursor: pointer;
}
.flag-row:hover { background: var(--accent-soft); }
.flag-name { font-weight: 650; white-space: nowrap; min-width: 130px; }
.flag-row.sev .flag-name { color: var(--bad); }
.flag-desc { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag-n { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }

.hard-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border);
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
}


/* ---- 面の作り ----
   カードを影で浮かせるのをやめ、線で区切る。同じ面積により多くの数字が入る。
   角は 6px / 4px の2種類だけ。ピル（999px）は状態を示すチップにだけ残す。 */
.an-h, .sec-head, .cf-sec-head { font-size: 12.5px; letter-spacing: .01em; }
.an-card-label { font-size: 11px; letter-spacing: .01em; }
.searchbox { height: 28px; min-width: 200px; }
.searchbox input { font-size: 12.5px; }
.segmented { padding: 2px; border-radius: 4px; }
.segmented button { padding: 4px 10px; font-size: 12.5px; border-radius: 3px; }
.tabs { padding: 2px; border-radius: 5px; }
.tab { padding: 5px 11px; border-radius: 3px; }
.icon-btn { border-radius: 4px; }
.badge, .grouptag, .wflag, .wdone, .hard-chip { border-radius: 3px; }
kbd { border-radius: 3px; }


/* ---- 節の面 ----
   影で浮かせず、1px の線で囲むだけ。角は 6px。見出しは帯に置いて、
   「ここからここまでが1つの表」を面積で示す。 */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--text);
}
.panel-head:empty { display: none; }
.panel-head .an-h { margin: 0; padding: 0; border: 0; font-size: 12.5px; }
.panel-body { padding: 10px 12px; }
/* 面の中の表は、幅が足りなければ面の中だけで横スクロールさせる。
   はみ出したまま切れると、右端の操作（失敗の再実行など）に手が届かなくなる。 */
.panel-body { overflow-x: auto; }
/* 面の中では、表と数字の並びは端まで使う（面の余白と二重に効かせない） */
.panel-body > .an-cards { margin: -10px -12px; border-top: 0; border-bottom: 0; }
.panel-body > .led-table { max-width: none; margin-bottom: 0; }
.panel-body > .flag-list { max-width: none; margin-top: 0; }
.panel-body > .flag-list .flag-row:first-child { border-top: 0; }
.panel-body > .an-note:last-child, .panel-body > p:last-child { margin-bottom: 0; }
.an-card:first-child { padding-left: 20px; }


/* 設定も同じ面の作りにそろえる。節ごとに枠、見出しは帯。 */
.set-main > div {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.set-main > div > .org-head {
  margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700;
}
.set-main > div > *:not(.org-head) { margin-left: 12px; margin-right: 12px; }
.set-main > div > .led-table { width: calc(100% - 24px); max-width: none; margin-bottom: 12px; }
.set-main > div > p { margin-top: 10px; margin-bottom: 10px; }
#editor { margin: 0 12px 12px; }


/* ---- レポートの2列 ----
   主列＝表のある節、副列＝件数を眺める節。概要だけ全幅。
   狭い画面では素直に1列に戻す（表を潰してまで2列にする意味はない）。 */
.an-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
  grid-template-areas: 'top top' 'main side';
  gap: 0 10px; align-items: start;
}
.an-top { grid-area: top; }
.col-main { grid-area: main; }
.col-side { grid-area: side; }
.an-col { min-width: 0; }
.an-grid.single { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'main' 'side'; }
@media (max-width: 1100px) {
  .an-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'main' 'side'; }
}
/* 副列は幅が狭いので、中の表と文字も一段締める。
   ただし1列に畳んだとき（.single）は幅があるので、締めない。 */
.an-grid:not(.single) .col-side .panel-body { padding: 8px 10px; }
.an-grid:not(.single) .col-side .flag-name { min-width: 0; }
/* 説明を落とすと伸びる要素が無くなるので、件数は自力で右へ寄せる */
.an-grid:not(.single) .col-side .flag-desc { display: none; }
.an-grid:not(.single) .col-side .flag-n { margin-left: auto; }
.an-grid:not(.single) .col-side .led-table th,
.an-grid:not(.single) .col-side .led-table td { padding: 5px 8px; font-size: 12.5px; }


/* ---- レポートのページ切り替え ---- */
.subnav {
  display: flex; gap: 2px; align-items: center;
  margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.subnav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.subnav-item:hover { color: var(--text); }
.subnav-item.on { color: var(--accent); border-bottom-color: var(--accent); }
.subnav-n {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 3px;
  background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border);
  font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.subnav-item.on .subnav-n { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }


/* ---- 確認パネルの整理 ---- */
/* 目次を外したので1列。節の見出しは小さく、面ではなく字で区切る。 */
.cf-layout { display: block; }
.cf-nav { display: none; }
.cf-sec-head {
  margin: 16px 0 6px; padding-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.cf-sec:first-child .cf-sec-head { margin-top: 0; }
.cf-no { display: none; }

/* 検算OK は細く。異常のときだけ面積を使う。 */
.check-banner.slim {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; font-size: 12px; font-weight: 650;
  background: var(--good-soft); color: var(--good); border: 1px solid var(--good-border);
  border-radius: 3px;
}

/* 一覧の絞り込みは2行に収める（3行になると本文の高さを食う） */
.work-bar .searchbox { flex: 1; min-width: 110px; }

/* ワークスペース名がヘッダの紺に沈んでいた */
header .org-switch .dd-btn, header .org-switch .dd-label { color: var(--nav-ink); }

/* 操作バーの中のプルダウンは、ボタンと同じ高さに収める */
.wd-actions .dd { width: auto; }
.wd-actions .dd-btn { width: auto; min-width: 104px; }

/* 細い検算OKは内容ぶんだけ。親が flex 列なので伸ばされないよう明示する。 */
.check-banner.slim { align-self: flex-start; width: auto; flex: none; }
/* 操作バーのアイコンだけのボタン */
.wd-actions .btn.icon-only { padding: 6px; }


/* ---- ボタンに添えるキー ----
   別の chip として横に置かず、ボタンの中に薄く入れる。
   押せるものが増えたように見せないため、色は本文より必ず弱くする。 */
.btn-key {
  margin-left: 6px; font-size: 11px; font-weight: 600; opacity: .55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.02em;
}
.btn.primary .btn-key { opacity: .7; }
.wd-head .btn-key { margin-left: 4px; color: var(--muted-2); opacity: 1; }


/* ---- ヘッダのメニュー（アカウント） ---- */
.menu-dd .dd-btn { gap: 6px; min-width: 0; }
.menu-dd .dd-label { max-width: 140px; }
.dd-menu.open { display: block; }
.dd-sep { height: 1px; margin: 4px 0; background: var(--border); }
.dd-note { padding: 6px 12px 4px; font-size: 11.5px; color: var(--muted); }
.dd-opt { display: flex; align-items: center; gap: 8px; }
.dd-opt.danger { color: var(--bad); }
header .menu-dd .dd-btn {
  background: rgba(255,255,255,.08); border-color: var(--nav-line); color: var(--nav-ink);
}
header .menu-dd .dd-btn:hover { background: rgba(255,255,255,.16); }

/* ---- 書き出し ---- */
.col-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.col-chip {
  padding: 2px 8px; border-radius: 3px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
#view-export .fld { grid-template-columns: 92px minmax(0, 1fr); margin-bottom: 14px; align-items: start; }
#view-export .an-note { margin: 6px 0 0; font-size: 12px; }
#view-export .org-head { margin-top: 4px; }

/* リンクとして置いたボタンに下線を出さない */
a.btn { text-decoration: none; }


/* ---- 取り込み画面 ---- */
.run-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; }
.jmeter { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-2); min-width: 120px; }
.jseg { display: block; }
.jseg.ok { background: var(--good); }
.jseg.dup { background: var(--muted-2); }
.jseg.bad { background: var(--bad); }
.jseg.run { background: var(--accent); }
.jmeter-label { margin-top: 3px; font-size: 11.5px; }

/* ---- 書き出し ---- */
.period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period input[type="month"] { width: auto; min-width: 140px; }
.export-foot { margin: 4px 0 12px; }
#view-export .fld { grid-template-columns: 110px minmax(0, 1fr); margin-bottom: 14px; align-items: start; }
#view-export .an-note { margin: 6px 0 0; font-size: 12px; }
#view-export .an-cards { border: 0; margin-bottom: 8px; }
#view-settings .fld { grid-template-columns: 150px minmax(0, 1fr); margin-top: 14px; align-items: start; }


/* ---- 表モード（明細の一括編集） ---- */
.work.table-mode { grid-template-columns: minmax(0, 1fr); }
.work.table-mode .work-detail { display: none; }
.work.table-mode .work-list { border-right: 0; }
.mode-seg .seg-btn { display: inline-flex; align-items: center; gap: 5px; }

.grid-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.grid-table th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  padding: 6px 8px; font-size: 11px; font-weight: 700; color: #334158;
  background: var(--surface-2); border-bottom: 1px solid var(--border-strong);
}
.grid-table th.numcell { text-align: left; }
.grid-table td { padding: 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid-table tbody tr:hover { background: var(--surface-2); }
.grid-table tbody tr.picked { background: var(--accent-soft); }
.grid-table input, .grid-table .pick {
  width: 100%; border: 0; background: transparent; border-radius: 0;
  padding: 5px 8px; font: inherit; font-size: 12.5px; height: 30px;
}
.grid-table input:hover, .grid-table .pick:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.grid-table input:focus, .grid-table .pick:focus {
  outline: 0; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); position: relative; z-index: 1;
}
.grid-table td.numcell input { font-variant-numeric: tabular-nums; }
.grid-table td.gcheck, .grid-table th.gcheck { width: 30px; text-align: center; }
.grid-table td.gcheck .wrow-check { position: static; transform: none; opacity: .45; margin: 0 auto; }
.grid-table tr:hover .wrow-check, .grid-table tr.picked .wrow-check { opacity: 1; }
.grid-table td.gstat, .grid-table th.gstat { width: 132px; padding: 0 8px; white-space: nowrap; }
.grid-table td.gstat { display: table-cell; }
.grid-table td.gstat > * { vertical-align: middle; margin-right: 4px; }
.led-table tr.sumrow td { font-weight: 700; border-top: 1px solid var(--border-strong); }


/* ============================================================================
   取り込み画面
   数時間かかる仕事なので、「動いている」ことが見て分かる必要がある。
   止まっているのか進んでいるのか分からない画面の前で人は待てない。
   ただし賑やかにするのが目的ではないので、動くのは状態を表す要素だけにする。
   ============================================================================ */

/* 投入口。待っている間もゆっくり走査している、という状態を出す */
.ing-drop {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 20px; margin-bottom: 10px; cursor: pointer;
  background:
    repeating-linear-gradient(90deg, var(--ai-soft) 0 1px, transparent 1px 24px),
    radial-gradient(120% 120% at 50% 0%, var(--accent-soft) 0%, transparent 62%),
    var(--surface);
  border: 1px dashed var(--ai-border); border-radius: var(--radius);
  transition: border-color .15s, background .15s;
}
.ing-drop:hover { border-color: var(--ai-bright); }
.ing-drop > * { position: relative; z-index: 1; }
.ing-drop-ico {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ai); background: var(--surface);
  border: 1px solid var(--ai-border);
  box-shadow: 0 0 0 6px var(--ai-soft);
}
.ing-drop-title { font-size: 14px; font-weight: 700; }
.ing-drop-sub { font-size: 12.5px; }

/* 動いている最中 ──────────────────────────────────────────────
   ここだけ暗い面にする。明るい画面の中で1枚だけ黒い板が光っていれば、
   「機械が動いているのはここ」が一目で分かる。

   動きは全部「幾何」で作る。滲むグラデーションを流すのではなく、
   直線・格子・四角が段（steps）で動く。機械が刻んでいるように見せたい。 */
.ing-live {
  position: relative; overflow: hidden;
  padding: 15px 16px 13px; margin-bottom: 10px;
  color: #e6f6fb;
  background:
    linear-gradient(rgba(103, 232, 249, .055) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(103, 232, 249, .055) 1px, transparent 1px) 0 0 / 24px 100%,
    radial-gradient(120% 140% at 0% 0%, rgba(6, 182, 212, .16), transparent 55%),
    linear-gradient(160deg, #0b1622, #060c14);
  border: 1px solid rgba(6, 182, 212, .30);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(6, 30, 40, .28);
}

/* 四隅のかぎ括弧。ロゴと同じ記号で、ここが読み取りの対象面であることを示す。
   8本の直線を背景として置く（要素を増やさずに正確な角が出せる） */
.ing-frame {
  position: absolute; inset: 9px; pointer-events: none; z-index: 1;
  --c: rgba(103, 232, 249, .55); --len: 13px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--len) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--len) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--len) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--len) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--len) no-repeat;
}

.ing-live > *:not(.ing-frame) { position: relative; z-index: 2; }

.ing-live-head { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ing-live-head .spacer { flex: 1; }
.ing-count { font-variant-numeric: tabular-nums; font-weight: 700; color: #67e8f9; }

/* 動作中の印。四角ひとつ。丸より、この画面の角（4px/6px）に合う */
.ing-orb {
  width: 8px; height: 8px; flex: none; border-radius: 1px;
  background: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}

/* 進捗は目盛りで刻む。滑らかに伸びるより、何件終わったかの感じが出る */
/* 進捗は目盛りで刻む。滑らかに伸びるより「何件終わったか」の感じが出る。
   下地にも同じ間隔の目盛りを敷いて、残りが何目盛りかを読めるようにする。 */
.ing-bar {
  height: 5px; margin: 12px 0 13px; border-radius: 1px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 3px, transparent 3px 7px);
}
.ing-bar-fill {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, rgba(34,211,238,.85) 0 3px, transparent 3px 7px);
}

/* 3段の道筋。丸ではなく角の取れた四角にそろえる */
.ing-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; }
.ing-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(230, 246, 251, .45); white-space: nowrap; }
.ing-step-ico {
  width: 22px; height: 22px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: inherit;
}
.ing-step.done { color: rgba(230, 246, 251, .8); }
.ing-step.done .ing-step-ico { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .45); color: #6ee7b7; }
.ing-step.now { color: #67e8f9; font-weight: 700; }
.ing-step.now .ing-step-ico {
  background: rgba(34, 211, 238, .18); border-color: rgba(34, 211, 238, .6); color: #67e8f9;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}
/* 進んだ区間は破線。埋まっていく様子が段で分かる */
.ing-step-line {
  flex: 1; height: 1px; min-width: 16px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 4px, transparent 4px 8px);
}
.ing-step-line.done { background: repeating-linear-gradient(90deg, rgba(52,211,153,.5) 0 4px, transparent 4px 8px); }

.ing-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.ing-chip { padding: 2px 8px; border-radius: 2px; font-size: 11.5px; font-weight: 650; border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.ing-chip.run { background: rgba(34, 211, 238, .14); color: #67e8f9; border-color: rgba(34, 211, 238, .4); }
.ing-chip.ok  { background: rgba(52, 211, 153, .14); color: #6ee7b7; border-color: rgba(52, 211, 153, .4); }
.ing-chip.dup { background: rgba(255, 255, 255, .07); color: rgba(230, 246, 251, .6); border-color: rgba(255, 255, 255, .14); }
.ing-chip.bad { background: rgba(251, 113, 133, .14); color: #fda4af; border-color: rgba(251, 113, 133, .4); }
.ing-note { margin: 0; font-size: 12px; color: rgba(230, 246, 251, .55); }

/* 動きを減らす設定の人には出さない */



/* 表の中のプルダウン。枠を持たず、セルと同じ見た目にそろえる。 */
.grid-table .dd.grid-dd { width: 100%; }
.grid-dd .dd-btn {
  width: 100%; height: 30px; padding: 5px 6px 5px 8px;
  border: 0; border-radius: 0; background: transparent;
  font-size: 12.5px; font-weight: 400;
}
.grid-dd .dd-btn:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.grid-dd .dd-btn:focus-visible,
.grid-dd.open .dd-btn {
  outline: 0; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent);
}
.grid-dd .dd-caret { opacity: .35; }
.grid-dd:hover .dd-caret, .grid-dd.open .dd-caret { opacity: .8; }




/* ---- 書き出し ---- */
.export-foot { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; align-items: flex-start; }
.export-warn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--amber-soft); border: 1px solid var(--amber-border); color: var(--amber);
  font-size: 12.5px; font-weight: 600;
}
.export-warn .spacer { flex: 1; }
.export-warn.dup { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-ink); margin-bottom: 10px; }
.export-warn .btn { flex: none; }


/* ---- 書き出しの段（作業の順） ----
   タブではなく「順路」に見せる。番号と区切り線で、どこまで決めたかが分かる。 */
.steps-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.step-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent;
  font: inherit; color: var(--muted); cursor: pointer; text-align: left;
}
.step-tab:hover { background: var(--surface-2); }
.step-no {
  width: 20px; height: 20px; flex: none; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted);
}
.step-txt { display: flex; flex-direction: column; line-height: 1.25; }
.step-label { font-size: 13px; font-weight: 650; }
.step-sum { font-size: 11px; color: var(--muted-2); }
.step-tab.done { color: var(--text); }
.step-tab.done .step-no { background: var(--good-soft); border-color: var(--good-border); color: var(--good); }
.step-tab.on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-border); }
.step-tab.on .step-no { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-sep { flex: 0 1 26px; height: 1px; min-width: 12px; background: var(--border-strong); }
.step-sep.done { background: var(--good-border); }

.step-foot { display: flex; align-items: center; gap: 8px; margin: 12px 0 24px; }
.step-foot .spacer { flex: 1; }

/* 形式の選択。3つの違いは1行では説明しきれないので、札にして並べる */
.pick-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 880px) { .pick-cards { grid-template-columns: 1fr; } }
.pick-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 12px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); font: inherit; color: var(--text); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.pick-card:hover { border-color: var(--accent-border); background: var(--surface-2); }
.pick-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pick-card-title { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; }
.pick-card-sub { font-size: 11.5px; font-weight: 600; color: var(--accent); }
.pick-card-body { font-size: 12px; color: var(--muted); line-height: 1.55; }

/* 書き出す段 */
.export-sum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-bottom: 6px; }
.export-sum .muted { font-size: 12.5px; }
.export-file {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  padding: 4px 9px; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#view-export .export-warn { margin-bottom: 12px; }
#view-export .fld { grid-template-columns: 110px minmax(0, 1fr); margin-bottom: 16px; align-items: start; }
#view-export .fld:last-child { margin-bottom: 4px; }


/* ---- 原本の状態タグ ---- */
.cond-tag {
  padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 600;
  background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 原本側の理由は撮り直しても直らないので、色を分けて一目で区別できるようにする */
.hb-fill.warm { background: var(--amber); }


/* ---- 経費性のタグ ---- */
.exp-tag {
  padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-tag.ng { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-border); }
.exp-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 3px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border);
}
.exp-chip.ng { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-border); }
#view-settings .an-note { margin: 6px 0 0; font-size: 12px; }


/* ---- 設定の入力欄 ----
   明細の確認画面は「枠なし・触ると出る」でいい（原本と見比べるのが主で、
   枠が並ぶと画面が騒がしくなる）。設定は逆で、どこに何を書くのかが先に見えないと
   書き始められない。ここでは枠を出す。 */
#view-settings .fld-input input,
#view-settings .fld-input textarea {
  border-color: var(--border-strong); background: var(--surface);
}
#view-settings .fld-input textarea { min-height: 56px; resize: vertical; overflow: auto; }
#view-settings .fld { margin-bottom: 14px; align-items: start; }
#view-settings .fld-label { padding-top: 9px; }


/* ---- AI への指摘 ---- */
.fb-dialog { width: min(560px, 100%); }
.fb-current {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  margin: 0 22px 12px; padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--muted);
}
.fb-current strong { color: var(--text); font-size: 13.5px; }
.fb-input { margin: 0 22px; }
.fb-input textarea {
  width: 100%; resize: vertical; font: inherit; line-height: 1.6; min-height: 68px;
  padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.fb-result { margin: 10px 22px 0; }
.fb-result:empty { display: none; }
.fb-rule {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-border);
}
.fb-rule-text { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.fb-scope {
  flex: none; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--accent-border); color: var(--accent);
}
tr.inactive .fb-scope, tr.inactive input { opacity: .5; }


/* 一覧の行に出すタグは短く。3つ並べると店名より目立って、
   何の行なのか分からなくなる。詳細に行けば全部見える。 */
.wrow-sub .cond-tag, .wrow-sub .exp-tag { max-width: 130px; }
.wrow-sub { flex-wrap: nowrap; overflow: hidden; }


/* 押せるタグ。押せると分かる程度にだけ変える（行そのものも押せるので、
   ここが強く目立つと、どちらを押すのか迷う） */
.cond-tag.clickable, .exp-tag.clickable { cursor: pointer; }
.cond-tag.clickable:hover { background: #fef3c7; border-color: var(--amber); }
.exp-tag.clickable:hover { background: #dbe7ff; border-color: var(--accent); }
.exp-tag.ng.clickable:hover { background: #fee2e2; border-color: var(--bad); }
/* 作業バーのタグ絞り込み。幅を取りすぎないよう抑える */
.dd.tagfilter { width: auto; }
.dd.tagfilter .dd-btn { min-width: 132px; max-width: 190px; font-size: 12.5px; padding: 4px 8px; }

.dd.groupfilter { width: auto; }
.dd.groupfilter .dd-btn { min-width: 140px; max-width: 210px; font-size: 12.5px; padding: 4px 8px; }


/* 検算バナー：印ごとに1行。名前を左に固定幅で並べると、理由だけを縦に追える。 */
.check-list { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
/* 幅を細くされても縦1文字にならないよう、入らなければ次の行へ送る。
   面の幅は人が動かせるので、狭い状態は普通に起こる。 */
.check-line { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.check-flagname { flex: none; font-weight: 700; min-width: 108px; }
@container (max-width: 420px) { .check-flagname { min-width: 0; } }
.check-line .check-detail { flex: 1 1 180px; }
.check-line .check-detail { min-width: 0; font-weight: 450; opacity: .9; }
.check-banner .dup-open { align-self: flex-start; }


/* ---- 面の境目（掴んで動かす） ----
   線そのものは1pxに見せ、掴める範囲だけ広く取る。細すぎると掴めず、
   太いと境界が主張して画面が騒がしくなる。 */
.pane-split {
  position: relative; cursor: col-resize; background: var(--border);
  transition: background .12s;
}
.pane-split::after {
  content: ''; position: absolute; inset: 0 -4px; /* 掴める範囲を左右に広げる */
}
.pane-split:hover, .pane-split.dragging { background: var(--accent); }
.work.resizing, .work.resizing * { cursor: col-resize !important; user-select: none; }
.work-detail > .pane-split { background: rgba(255, 255, 255, .12); }
.work-detail > .pane-split:hover, .work-detail > .pane-split.dragging { background: var(--accent-2); }

/* ============================================================================
   読み取り枚数（クレジット）と全体管理
   ============================================================================ */

/* ---- ヘッダーのバッジ ---- */
/* 残数は「あと何枚か」より「もう止まるかどうか」が知りたい情報なので、
   数を読ませる前に色で分かるようにする。 */
.tab-badge.warn { background: var(--amber-soft); color: var(--amber); }
.tab-badge.sev  { background: var(--bad-soft);   color: var(--bad); }

/* ---- 残数 ---- */
.cr-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; align-items: center; }
.cr-balance { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.cr-balance strong { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.cr-balance.low strong { color: var(--amber); }
.cr-balance.out strong { color: var(--bad); }
.cr-unit { font-size: 15px; color: var(--muted); }
.cr-note p { margin: 0 0 2px; font-size: 13.5px; }
.cr-stop { color: var(--bad); font-weight: 600; }
.cr-facts {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 22px; margin: 14px 0 0;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.cr-facts dt { font-size: 11.5px; color: var(--muted); }
.cr-facts dd { margin: 0 14px 0 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- 買う ---- */
/* 3つ並べて、1枚あたりの単価まで出す。枚数と総額だけだと、どれが得かを
   その場で暗算させることになる。 */
.cr-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cr-pack {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.cr-pack.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cr-tag {
  position: absolute; top: -9px; left: 14px; padding: 1px 8px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.cr-pack-name  { font-size: 12px; color: var(--muted); font-weight: 600; }
.cr-pack-pages { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cr-pack-price { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-pack-unit  { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.cr-pack-unit.best { color: var(--good); font-weight: 600; }
.cr-pack .btn { margin-top: auto; justify-content: center; }
.cr-test {
  margin: 12px 0 0; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--amber-soft); color: var(--amber); font-size: 12.5px; line-height: 1.5;
}
.cr-hist td { font-variant-numeric: tabular-nums; }

/* ---- 全体管理 ---- */
/* 売上と原価は必ず並べる。片方だけ見ても、続けられる商売かは分からない。 */
.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: var(--sp-m); }
.adm-card {
  padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.adm-card.good { border-left: 3px solid var(--good); }
.adm-card.bad  { border-left: 3px solid var(--bad); }
.adm-card-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.adm-card-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin: 1px 0; }
.adm-card-sub   { font-size: 11.5px; color: var(--muted-2); }
.adm-table td, .adm-table th { white-space: nowrap; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table .good { color: var(--good); }
.adm-table .bad  { color: var(--bad); }
.adm-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.btn.xs { padding: 3px 9px; font-size: 11.5px; }
.muted.sm, .sm { font-size: 12px; }

@media (max-width: 640px) {
  .cr-head { grid-template-columns: 1fr; }
  .cr-balance strong { font-size: 36px; }
}

/* 何にいくら要るかは、残りの数のすぐ隣に置く。別ページに書くと、減ってから探すことになる */
.cr-costs-wrap { grid-column: 1 / -1; margin-top: 12px; }
.cr-costs-head { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.cr-costs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; }
.cr-costs li { font-size: 12.5px; color: var(--muted); }
.cr-costs b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }

/* 倍率＝粗利そのものなので、他の設定と混ぜず単独で置く */
.adm-markup-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.adm-markup-row label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.adm-markup-in { width: 90px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.adm-markup-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.adm-markup-out { font-size: 13px; color: var(--good); font-weight: 600; }
.adm-markup-out.bad { color: var(--bad); }
.cr-costs-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* 取り込み履歴の1行 */
.led-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-sub { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.led-sub.bad { color: var(--bad); }
.led-table .bad { color: var(--bad); }