:root {
  --fg: #1f2933; --muted: #6b7280; --line: #e2e8f0; --bg: #f3f7f8; --card: #ffffff;
  --teal-d: #0d7d8c; --teal: #12a3a0; --teal-l: #37c6bd;
  --accent: #0e7c86; --accent-ink: #0b6470;
  --warn: #b45309; --warn-bg: #fffbeb; --ok: #15803d; --danger: #b91c1c;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif;
  color: var(--fg); background: var(--bg); line-height: 1.6; }
a { color: var(--accent-ink); }

/* ---- ヘッダー（共通グラデーション） ---- */
.appbar { background: linear-gradient(120deg, var(--teal-d) 0%, var(--teal) 55%, var(--teal-l) 100%);
  color: #fff; }
.appbar-inner { max-width: 1500px; margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: nowrap; }
.appbar-id { min-width: 0; }
.eyebrow { display: inline-block; color: #d6f5f1; font-size: .82rem; font-weight: 600;
  text-decoration: none; letter-spacing: .03em; }
.app-title { margin: .1rem 0 .15rem; font-size: 1.7rem; font-weight: 800; color: #fff;
  white-space: nowrap; }
.app-sub { font-size: .82rem; color: #e0f6f3; white-space: nowrap; }
.appbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem;
  white-space: nowrap; }
.hbtn { background: #fff; color: var(--accent-ink); border: none; border-radius: 8px;
  padding: .5rem .9rem; font-size: .88rem; font-weight: 600; text-decoration: none;
  cursor: pointer; }
.hbtn.ghost { background: rgba(255,255,255,.16); color: #fff; }
.hbtn:hover { filter: brightness(1.05); }

.container { max-width: 1500px; margin: 1.2rem auto; padding: 0 1.5rem; overflow-x: auto; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.05rem; margin-top: 1.4rem;
  border-bottom: 2px solid var(--line); padding-bottom: .2rem; }

/* ---- タブナビ ---- */
nav.tabs { display: flex; gap: .25rem; flex-wrap: nowrap; overflow-x: auto;
  border-bottom: 2px solid var(--line); margin: .2rem 0 1rem; }
nav.tabs .tab { white-space: nowrap; text-decoration: none; color: var(--muted);
  padding: .5rem .9rem; border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; font-size: .9rem; }
nav.tabs .tab:hover { background: #e9f2f2; color: var(--accent-ink); }
nav.tabs .tab.active { background: #fff; color: var(--accent-ink); font-weight: 700;
  border-color: var(--line); margin-bottom: -2px; }

.crumb { color: var(--muted); font-size: .85rem; margin: .2rem 0 .4rem; }
.crumb a { color: var(--accent-ink); }

/* ---- ボタン ---- */
.btn { display: inline-block; background: var(--accent); color: #fff; padding: .45rem .95rem;
  border-radius: 8px; text-decoration: none; border: none; cursor: pointer; font-size: .9rem;
  font-weight: 600; }
.btn:hover { filter: brightness(1.08); }
.btn.small { padding: .25rem .6rem; font-size: .82rem; }
.btn.secondary { background: #e6f1f1; color: var(--accent-ink); }
.btn.mini { padding: .2rem .55rem; font-size: .78rem; border-radius: 6px; }
.btn.danger { background: var(--danger); color: #fff; }
.rowbtns { display: inline-flex; gap: .3rem; align-items: center; flex-wrap: nowrap; }
.rowbtns form { display: inline; margin: 0; }
button.link { background: none; border: none; color: var(--accent-ink); cursor: pointer;
  padding: 0 .2rem; font-size: .85rem; }
button.link.danger { color: var(--danger); }
.inline { display: inline; }
.toolbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0; }

/* ---- フォーム ---- */
form.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem; max-width: 680px; display: grid; gap: .6rem; }
form.card label { display: grid; gap: .2rem; font-size: .85rem; color: var(--muted); }
form.card label.check { grid-auto-flow: column; justify-content: start; align-items: center; gap: .4rem; }
form.card input, form.card select, form.card textarea {
  padding: .45rem; border: 1px solid var(--line); border-radius: 6px; font-size: .95rem; color: var(--fg); }
form.card input:focus, form.card select:focus, form.card textarea:focus {
  outline: 2px solid var(--teal-l); border-color: var(--teal); }
fieldset { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: .5rem; }
legend { color: var(--muted); font-size: .8rem; padding: 0 .3rem; }

/* ---- テーブル（折り返しなし） ---- */
table.grid { width: 100%; border-collapse: collapse; margin-top: .6rem; background: var(--card); }
table.grid th, table.grid td { border: 1px solid var(--line); padding: .45rem .6rem;
  text-align: left; font-size: .88rem; white-space: nowrap; }
table.grid thead th { background: #e9f2f2; color: #0b5560; }
table.grid tbody tr:nth-child(even) { background: #fafcfc; }
table.grid.kv th { width: 14rem; background: #f1f7f7; }
table.grid td.actions { white-space: nowrap; }

/* ---- インライン入力行 ---- */
td.muted { color: var(--muted); font-size: .8rem; }
.link-tag { display: inline-block; font-size: .72rem; color: var(--accent-ink); background: #e6f4f3;
  border: 1px solid #b6e2dd; border-radius: 4px; padding: 0 .3rem; margin-left: .2rem; }
td.mismatch { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
tr.entry-row td { background: #eefaf8; vertical-align: middle; padding: .3rem .35rem; }
tr.entry-row input, tr.entry-row select {
  width: 100%; min-width: 5rem; padding: .3rem; border: 1px solid #a9d9d4;
  border-radius: 4px; font-size: .85rem; box-sizing: border-box; }
tr.entry-row input[name$="_amount"], tr.entry-row input[name="balance"],
tr.entry-row input[name="fee"], tr.entry-row input[name="cost_basis"] { text-align: right; }

/* ---- フラッシュ・注記・チェック ---- */
.flash { padding: .5rem .8rem; border-radius: 8px; margin-bottom: .5rem; font-size: .9rem; }
.flash-info { background: #e6f4f3; color: var(--accent-ink); }
.flash-error { background: #fef2f2; color: var(--danger); }
.flash-warn { background: var(--warn-bg); color: var(--warn); }
.note { background: var(--warn-bg); color: var(--warn); padding: .5rem .7rem; border-radius: 8px; font-size: .82rem; }
ul.checks { list-style: none; padding: 0; }
ul.checks li { padding: .35rem .5rem; border-radius: 6px; margin-bottom: .25rem; font-size: .88rem; }
ul.checks li.warn { background: var(--warn-bg); color: var(--warn); }
ul.checks li.ok { background: #f0fdf4; color: var(--ok); }
.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 1.5rem; }
small { color: var(--muted); }