/* ==========================================================================
   IKKOクロス統合管理 — app.css (v2 全面刷新)
   白ベースの業務システム。濃紺ヘッダー #1a2b3c + アクセント1色(鋼青)。
   PCメイン + スマホ閲覧可 + 請求・入金の印刷対応。

   主要フック（JS側が使用。名称変更禁止）:
   - バッジ      : <span class="badge" data-status="入金済み">…</span>
                   顧客状態は data-state="取引中" / クラス .st-* .cs-* も併用可
   - 行色        : <tr data-status="請求済み">（請求・入金一覧）
   - アラート帯  : .alert-band > .alert.alert-{dormant|overdue|forecast|master}
   - テーブル    : .table-wrap で包むと横スクロール + スティッキーヘッダー
   - トースト    : .toast-container > .toast.toast-{info|success|error}
   - 検索コンボ  : .search-combo / .combo / .searchbox（JSが動的生成）
   - 達成率バー  : <div class="progress"><span class="progress-bar" style="width:62%"></span></div>
                   （ビュー側で width をインライン指定して使用する共通部品）
   ========================================================================== */

/* ---------- デザイントークン ---------- */
:root {
  /* 書体（Googleフォント不可: システムフォントスタック） */
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic UI", Meiryo, "Noto Sans CJK JP", sans-serif;

  /* 面と線 */
  --c-bg: #f2f4f6;
  --c-surface: #ffffff;
  --c-surface-2: #f6f8fa;      /* テーブルヘッダー・パネル */
  --c-line: #dfe5ea;
  --c-line-strong: #c8d1d9;

  /* 文字 */
  --c-ink: #1e2c39;            /* 本文（白地で 13:1） */
  --c-muted: #546471;          /* 補助テキスト（白地で 5.5:1） */
  --c-faint: #7d8b97;          /* 罫線寄りの装飾のみ（本文には使わない） */

  /* ブランド */
  --c-head: #1a2b3c;           /* ヘッダー濃紺 */
  --c-head-2: #22364a;         /* ナビ・ホバー面 */
  --c-head-ink: #f2f5f8;
  --c-head-muted: #b8c5d1;
  --c-accent: #0b69a3;         /* アクセント（主要操作・選択状態のみ） */
  --c-accent-strong: #095480;
  --c-accent-tint: #e9f2f9;
  --c-accent-bright: #4da3dd;  /* 濃紺上のインジケーター用 */

  /* セマンティック */
  --c-danger: #c62828;
  --c-danger-strong: #a31f1f;
  --c-danger-tint: #fdecec;
  --c-danger-line: #f0c4c4;
  --c-warn: #7a5600;
  --c-warn-tint: #fdf3dd;
  --c-warn-line: #ecd9ad;
  --c-ok: #2e7d32;
  --c-ok-tint: #eaf4ea;
  --c-ok-line: #c9e0ca;
  --c-info-ink: #155a8f;
  --c-info-tint: #e8f2fb;
  --c-info-line: #c2daee;

  /* 算出ステータス色（契約§7 厳守・変更禁止） */
  --st-paid: #E0E0E0;
  --st-billed: #BBDEFB;
  --st-confirmed: #FFF9C4;
  --st-registered: #FFFFFF;

  /* 寸法 */
  --header-h: 48px;
  --nav-h: 41px;
  --radius-s: 3px;
  --radius: 4px;
  --radius-l: 6px;

  /* 影 */
  --shadow-card: 0 1px 2px rgba(20, 32, 44, .05);
  --shadow-drop: 0 6px 20px rgba(20, 32, 44, .16);
  --shadow-modal: 0 12px 36px rgba(20, 32, 44, .26);

  /* z-index スケール（JS側インライン値と整合: combo=100/150, modal=1000, toast=2000） */
  --z-nav: 90;
  --z-header: 100;
  --z-dropdown: 300;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ---------- ベース ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

h1, h2, h3, h4 { margin: 0 0 10px; line-height: 1.4; font-weight: 600; text-wrap: balance; }
h2 { font-size: 18px; letter-spacing: .01em; }
h3 { font-size: 14px; }
h4 { font-size: 13px; color: var(--c-muted); margin: 14px 0 6px; }

button { font-family: inherit; }

/* 数値・金額は tabular（桁が縦に揃う等幅数字） */
.num, .amount, .kpi-value, .bytec, .tl-date, .th-date,
input.num, td.num, th.num {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   アプリシェル
   ========================================================================== */

/* ---------- ヘッダー ---------- */
.app-header {
  background: var(--c-head);
  color: var(--c-head-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.app-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0;
  white-space: nowrap;
  color: #fff;
}
.header-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--c-head-muted);
  white-space: nowrap;
}
#last-sync:empty::before { content: "—"; }
.diff-badge {
  background: var(--c-danger);
  color: #fff;
  border-radius: 9px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.diff-badge:empty { display: none; }

.busy-indicator .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ヘッダー内グローバル検索（store.js initGlobalSearch がinputとリストを生成） */
.header-search {
  position: relative;
  flex: 0 1 300px;
  min-width: 130px;
}
.app-header .search-combo { position: relative; }
.app-header .search-combo input {
  width: 100%;
  height: 30px;
  padding: 4px 10px;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  transition: background-color .15s ease-out, border-color .15s ease-out;
}
.app-header .search-combo input::placeholder { color: rgba(255, 255, 255, .75); }
.app-header .search-combo input:focus {
  outline: none;
  background: rgba(255, 255, 255, .2);
  border-color: var(--c-accent-bright);
  box-shadow: 0 0 0 2px rgba(77, 163, 221, .25);
}
.app-header .search-combo-list {
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  right: 0;
  left: auto;
  min-width: 300px;
}

/* ---------- グローバルナビ ---------- */
.app-nav {
  background: var(--c-head-2);
  display: flex;
  overflow-x: auto;
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-nav);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a {
  color: #c6d2dd;
  padding: 10px 16px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.app-nav a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  text-decoration: none;
}
.app-nav a.active {
  color: #fff;
  font-weight: 600;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 -2px 0 var(--c-accent-bright);
}

/* ---------- メイン ---------- */
main#view { max-width: 1280px; margin: 0 auto; padding: 18px 16px 48px; }

/* ==========================================================================
   ビュー共通レイアウト
   ========================================================================== */

.view-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.view-header h2 { margin: 0; }
.view-header .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.qt-rev { font-size: 12px; color: var(--c-muted); }

.toolbar,
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar .grow { flex: 1; min-width: 120px; }
.toolbar select, .toolbar input,
.filters select { width: auto; }
.filters input[type="search"] { width: auto; flex: 1 1 220px; max-width: 420px; }
.delay-info { font-size: 13px; }
.status-legend { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.legend-item { border-radius: var(--radius-s); color: #333; line-height: 1.6; }
.year-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 0;
}
.year-select select { width: auto; }

/* ---------- タブ（セグメント型: .tabs>.tab / .tabs>.tab-btn 両対応） ---------- */
.tabs {
  display: inline-flex;
  gap: 2px;
  background: #e6ebf0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  padding: 3px;
}
.tabs > button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}
.tabs > button:hover { color: var(--c-ink); }
.tabs > button.active {
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 32, 44, .12);
}
.tab-body { margin-top: 12px; }
.tab-pane { overflow-x: auto; }

/* ==========================================================================
   カード・KPI
   ========================================================================== */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.card > h3:first-child,
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.cards.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.cards.two-col > .card { margin-bottom: 0; }

/* KPI カード（予実・資金の動き） */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  padding: 12px 14px 11px;
  box-shadow: var(--shadow-card);
}
.kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--c-muted); }
.kpi-value { font-size: 23px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.kpi-sub { font-size: 11px; color: var(--c-muted); margin-top: 1px; }
a.kpi-link { transition: border-color .15s ease-out, box-shadow .15s ease-out; }
a.kpi-link:hover {
  border-color: var(--c-accent);
  box-shadow: 0 2px 8px rgba(11, 105, 163, .14);
  text-decoration: none;
}

/* 達成率などのプログレスバー共通部品（widthはインラインで%指定） */
.progress {
  position: relative;
  height: 5px;
  margin-top: 7px;
  border-radius: 3px;
  background: #e6ebf0;
  overflow: hidden;
}
.progress .progress-bar,
.progress > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--c-accent);
  transition: width .25s ease-out;
}
.progress .progress-bar.over, .progress.ok > span { background: var(--c-ok); }
.progress .progress-bar.low, .progress.warn > span { background: var(--c-danger); }

/* Chart.js 用コンテナ（高さ必須） */
.chart-box { position: relative; height: 280px; }
.chart-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: 12px;
  margin-bottom: 16px;
}

/* ==========================================================================
   ボタン
   ========================================================================== */

.btn,
button.primary,
.stage-btn,
.btn-link-order,
.btn-link-ledger {
  display: inline-block;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--radius);
  padding: 5px 14px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease-out, border-color .15s ease-out,
              color .15s ease-out, box-shadow .15s ease-out;
}
.btn:hover, .stage-btn:hover { background: #eef2f6; border-color: #b6c2cc; text-decoration: none; }

.btn-primary, button.primary {
  background: var(--c-head);
  border-color: var(--c-head);
  color: #fff;
}
.btn-primary:hover, button.primary:hover { background: var(--c-head-2); border-color: var(--c-head-2); }

.btn-accent, .btn-link-order, .btn-link-ledger {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.btn-accent:hover, .btn-link-order:hover, .btn-link-ledger:hover {
  background: var(--c-accent-strong);
  border-color: var(--c-accent-strong);
  text-decoration: none;
  color: #fff;
}

.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-danger:hover { background: var(--c-danger-strong); border-color: var(--c-danger-strong); }

.btn-sm, .btn-link-order, .btn-link-ledger { padding: 2px 10px; font-size: 12px; }

.btn:disabled, button.primary:disabled, .stage-btn:disabled,
.btn-link-order:disabled, .btn-link-ledger:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* 行操作などのアイコンボタン（見積グリッド） */
.btn-icon {
  appearance: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease-out, color .12s ease-out;
}
.btn-icon:hover { background: #e8eef3; color: var(--c-ink); }
.btn-icon:disabled { opacity: .3; cursor: default; background: transparent; }
.row-ops { display: inline-flex; gap: 2px; }

/* ==========================================================================
   テーブル（コンパクト密度・スティッキーヘッダー・控えめゼブラ）
   ========================================================================== */

.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 210px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
table.table, table.data-table {
  width: 100%;
  border-collapse: separate; /* スティッキーヘッダーで罫線が置き去りにならないよう separate */
  border-spacing: 0;
  font-size: 13px;
}
.table th, .data-table th {
  background: var(--c-surface-2);
  color: #46586a;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--c-line-strong);
  white-space: nowrap;
}
.table td, .data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef2f5;
  vertical-align: top;
}
/* スティッキーヘッダー・フッター（.table-wrap 内で縦スクロール時に固定） */
.table-wrap thead th { position: sticky; top: 0; z-index: 3; }
.table-wrap tfoot td, .table-wrap tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 0;
}
.table tfoot td, .table tfoot th, .data-table tfoot td, .data-table tfoot th { font-weight: 600; }

/* ゼブラは行側に薄く（ステータス行のセル色・インライン行色を邪魔しない） */
.table tbody tr:nth-child(even), .data-table tbody tr:nth-child(even) { background: #fafbfc; }
/* ホバーは半透明オーバーレイ: ステータス色付きセルの上でも機能する */
.table tbody tr:hover > td, .data-table tbody tr:hover > td {
  background-image: linear-gradient(rgba(26, 43, 60, .045), rgba(26, 43, 60, .045));
}
.table tr.clickable, .data-table tr.clickable, th.sortable { cursor: pointer; }

.table .num, .table td.num, .table th.num,
.data-table .num, .data-table td.num, .data-table th.num {
  text-align: right;
  white-space: nowrap;
}
td.overdue { color: var(--c-danger); font-weight: 600; }
td.empty, .table td.empty { text-align: center; color: var(--c-muted); padding: 22px 10px; }

/* 請求・入金一覧: 行の背景色（契約§7 算出ステータス・厳守） */
tr[data-status="入金済み"] > td      { background-color: var(--st-paid); }
tr[data-status="請求済み"] > td      { background-color: var(--st-billed); }
tr[data-status="受注確定済み"] > td  { background-color: var(--st-confirmed); }
tr[data-status="登録済み"] > td      { background-color: var(--st-registered); }

/* 請求・入金の表示中合計 */
.bill-summary { align-items: center; font-variant-numeric: tabular-nums; }
/* 算出ステータス列（7列目）は改行させない */
.billing-table td:nth-child(7) { white-space: nowrap; }

/* ==========================================================================
   バッジ
   ========================================================================== */

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-s);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  border: 1px solid rgba(20, 32, 44, .1);
  white-space: nowrap;
  background: #eceff1;
  color: #46586a;
  vertical-align: middle;
}

/* 算出ステータス（受注・請求）— 契約§7 の色を厳守 */
.badge[data-status="入金済み"], .badge[data-status="入金済"]        { background: var(--st-paid); color: #424242; }
.badge[data-status="請求済み"], .badge[data-status="請求済"], .st-billed.badge { background: var(--st-billed); color: #0d47a1; }
.badge[data-status="受注確定済み"] { background: var(--st-confirmed); color: #6d4c41; }
.badge[data-status="登録済み"]     { background: var(--st-registered); border-color: #aebac4; color: #4a5f6d; }
.st-paid.badge { background: var(--st-paid); color: #424242; }

/* 案件ステータス（data-status とクラスフックの両対応） */
.badge[data-status="見積作成中"], .st-draft.badge        { background: #eceff1; color: #4a5f6d; }
.badge[data-status="見積提出"], .st-submitted.badge      { background: #e3f2fd; color: #1565c0; }
.badge[data-status="受注"], .st-won.badge                { background: #c8e6c9; color: #1b5e20; }
.badge[data-status="発注書受領"], .st-po.badge           { background: #b2dfdb; color: #00695c; }
.badge[data-status="取込シート生成済"], .st-sheet.badge  { background: #e1bee7; color: #6a1b9a; }
.badge[data-status="プログレス取込済"], .st-imported.badge { background: #c5cae9; color: #283593; }
.badge[data-status="上長確定済"], .st-approved.badge     { background: #ffe082; color: #6d4c00; }
.badge[data-status="完了"], .st-done.badge               { background: #cfd8dc; color: #37474f; }
.badge[data-status="失注"], .st-lost.badge               { background: #ffcdd2; color: #b71c1c; }

/* 見積ステータス */
.badge[data-status="下書き"]   { background: #eceff1; color: #4a5f6d; }
.badge[data-status="発行済"]   { background: #e3f2fd; color: #1565c0; }
.badge[data-status="受注化"]   { background: #c8e6c9; color: #1b5e20; }
.badge[data-status="失効"]     { background: #ffcdd2; color: #b71c1c; }

/* 顧客状態（customers/customer は data-state 属性で出力する） */
.badge[data-status="取引中"], .badge[data-state="取引中"], .cs-active.badge { background: #c8e6c9; color: #1b5e20; }
.badge[data-status="見込"],   .badge[data-state="見込"],   .cs-lead.badge   { background: #fff9c4; color: #6d4c41; }
.badge[data-status="休眠"],   .badge[data-state="休眠"],   .cs-dormant.badge { background: #eceff1; color: #5b6d7a; }

/* 同期結果ほか */
.badge[data-status="成功"]     { background: #c8e6c9; color: #1b5e20; }
.badge[data-status="失敗"]     { background: #ffcdd2; color: #b71c1c; }
.badge[data-status="スキップ"] { background: #eceff1; color: #5b6d7a; }

/* 取引禁止 */
.badge-banned { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }

/* ==========================================================================
   アラート
   ========================================================================== */

/* コンテナ（ダッシュボード: 中に .alert を積む） */
.alert-band {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
}
/* 旧来の単独帯（modifier付きの .alert-band 自体が1枚のパネル） */
.alert-band.alert-none, .alert-band.alert-info, .alert-band.alert-warn, .alert-band.alert-error {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-ink);
}
.alert-band.alert-none  { background: var(--c-ok-tint); border-color: var(--c-ok-line); color: #3d6540; }
.alert-band.alert-info  { background: var(--c-info-tint); border-color: var(--c-info-line); color: var(--c-info-ink); }
.alert-band.alert-warn  { background: var(--c-warn-tint); border-color: var(--c-warn-line); color: var(--c-warn); }
.alert-band.alert-error { background: var(--c-danger-tint); border-color: var(--c-danger-line); color: #9d2020; }

/* 個別アラート項目（div または a） */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  color: #44535f;
  line-height: 1.5;
}
.alert-icon { flex: 0 0 auto; }
.alert-msg { min-width: 0; overflow-wrap: anywhere; }
a.alert { transition: background-color .15s ease-out, border-color .15s ease-out; }
a.alert:hover { text-decoration: none; filter: brightness(.97); }

.alert.alert-overdue  { background: var(--c-danger-tint); border-color: var(--c-danger-line); color: #9d2020; }
.alert.alert-forecast { background: var(--c-warn-tint); border-color: var(--c-warn-line); color: var(--c-warn); }
.alert.alert-master   { background: var(--c-info-tint); border-color: var(--c-info-line); color: var(--c-info-ink); }
.alert.alert-dormant  { background: #eef1f4; border-color: #d8dfe5; color: #44535f; }

/* ==========================================================================
   状態表示（ローディング・空・エラー・メッセージ）
   ========================================================================== */

p.loading, .view-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 16px;
  color: var(--c-muted);
  font-size: 13px;
}
p.loading::before, .view-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-line-strong);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.empty { color: var(--c-muted); }
p.empty {
  text-align: center;
  padding: 30px 16px;
  margin: 0 0 12px;
  font-size: 13px;
}

p.error {
  background: var(--c-danger-tint);
  border: 1px solid var(--c-danger-line);
  border-radius: var(--radius);
  color: #9d2020;
  padding: 9px 12px;
  font-size: 13px;
}
.msg { font-size: 13px; margin: 6px 0; }
.conn-status { font-size: 12px; align-self: center; }
.note { font-size: 12px; }

/* 検証結果（見積→取込シート dryRun） */
.validation { font-size: 13px; }
.validation .vlist ul { margin: 4px 0 0 20px; }
.validation .vlist li { margin: 2px 0; }

/* ==========================================================================
   フォーム
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 16px;
  margin-bottom: 12px;
}
.form-grid label.wide { grid-column: 1 / -1; }
.form-row { margin-bottom: 10px; }
.form-row small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--c-muted); }

label {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 2px;
}
label.inline, label.chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--c-ink);
  margin-bottom: 0;
}

input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="email"], input[type="url"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  background: var(--c-surface);
  color: var(--c-ink);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
input::placeholder, textarea::placeholder { color: #64737f; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(11, 105, 163, .16);
}
input[readonly], input:disabled, select:disabled, textarea[readonly] {
  background: var(--c-surface-2);
  color: var(--c-muted);
}
textarea { resize: vertical; min-height: 60px; }
input.num { text-align: right; }
.form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}
span.readonly { display: inline-block; padding: 5px 0; color: var(--c-ink); font-size: 13px; }

/* 案件詳細: ステータス変更行はインライン配置 */
.status-card .form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.status-card .form-row select { flex: 1 1 140px; width: auto; }
.status-card .form-row input { flex: 2 1 160px; width: auto; }
.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   検索コンボ（store.js searchBox / initGlobalSearch）
   ========================================================================== */

.search-combo { position: relative; }
.search-combo-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  max-height: 280px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-drop);
  color: var(--c-ink);
  text-align: left;
}
.search-combo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.search-combo-item:hover, .search-combo-item.active { background: var(--c-accent-tint); }
.search-combo-item.active { box-shadow: inset 2px 0 0 var(--c-accent); }
.search-combo-name { overflow-wrap: anywhere; }
.search-combo-sub { margin-left: auto; font-size: 11px; color: var(--c-muted); white-space: nowrap; }
.search-combo-empty { padding: 8px 10px; font-size: 12px; color: var(--c-muted); }
.search-combo-group {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-surface-2);
  border-top: 1px solid #eef2f5;
}

/* 見積エディタの顧客コンボ（.combo はJSがインラインで骨格を持つ。装飾のみ補完） */
.combo { position: relative; }
.combo-list { border-radius: 0 0 var(--radius) var(--radius); font-size: 13px; }
.combo-item:hover { background: var(--c-accent-tint); }
.combo-item small { color: var(--c-muted); margin-left: 4px; }
.combo-group { font-weight: 600; color: var(--c-muted); }
.combo-empty { font-size: 12px; }
.searchbox { display: block; }
.searchbox input { width: 100%; }

/* ==========================================================================
   モーダル
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 26, 36, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 40px 16px;
  overflow: auto;
  animation: fade-in .15s ease-out;
}
.modal {
  background: var(--c-surface);
  border-radius: var(--radius-l);
  width: 100%;
  max-width: 640px;
  box-shadow: var(--shadow-modal);
  animation: modal-in .18s ease-out;
}
.modal-lg { max-width: 900px; }
.modal-header, .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line);
  font-weight: 600;
}
.modal-close {
  cursor: pointer;
  border: none;
  background: none;
  font-size: 18px;
  color: var(--c-muted);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background-color .12s ease-out, color .12s ease-out;
}
.modal-close:hover { color: var(--c-ink); background: #eef2f6; }
.modal-body { padding: 16px; }
.modal-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--c-line);
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   トースト（store.js toast — JS側フォールバックinlineをCSSが正とする設計）
   ========================================================================== */

.toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: 340px;
  padding: 10px 14px !important;
  border-radius: var(--radius-l) !important;
  font-size: 13px !important;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(16, 26, 36, .3) !important;
  word-break: break-word;
  background: var(--c-head) !important;
  color: #fff !important;
}
.toast-success { background: var(--c-ok) !important; }
.toast-error   { background: var(--c-danger) !important; }

/* ==========================================================================
   見積エディタ
   ========================================================================== */

.qe-header-form .form-grid { margin-bottom: 0; }
.line-tools { flex-wrap: wrap; }

.qe-grid th.ops { width: 1%; }
.qe-grid td:nth-child(2) { white-space: nowrap; } /* 種別列 */
.qe-grid input {
  padding: 4px 6px;
  font-size: 13px;
}
.qe-grid td { vertical-align: middle; }
.qe-grid .line-head > td { background: #f0f4f7; }
.qe-grid .line-head input { font-weight: 600; }
.qe-grid .line-sub > td { background: #f7f9fb; }
.qe-grid td.amount { font-weight: 600; white-space: nowrap; }
.qe-grid tbody tr:hover > td { background-image: none; } /* 入力グリッドはホバー暗転させない */

.pg-panel > td { border-bottom: 1px solid var(--c-line); }
.pg-grid { align-items: flex-start; }
.pg-col { flex: 1 1 220px; min-width: 210px; }
.pg-col label { display: block; margin-bottom: 6px; }
.pg-col label.chk { display: inline-flex; margin: 2px 0 6px; }
.po-fields { margin-top: 4px; padding: 8px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); }
.bytec { font-size: 11px; color: var(--c-muted); margin-left: 4px; white-space: nowrap; }

.qe-summary { font-size: 14px; }
.qe-summary .num { font-weight: 600; }
#qe-sum-in { font-size: 18px; letter-spacing: -.01em; }

/* ==========================================================================
   詳細ビュー部品（案件・顧客）
   ========================================================================== */

/* 定義リスト */
dl.kv {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 13px;
}
dl.kv dt { color: var(--c-muted); font-size: 12px; padding-top: 1px; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ステータス履歴タイムライン */
ul.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
ul.timeline li { position: relative; padding: 4px 0 4px 18px; }
ul.timeline li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .8em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-line-strong);
}
ul.timeline li:first-child::before { background: var(--c-accent); }
.tl-date { color: var(--c-muted); margin-right: 8px; white-space: nowrap; }
.tl-src { color: var(--c-muted); margin-left: 6px; }
.tl-memo { display: block; color: var(--c-muted); font-size: 12px; padding-left: 2px; }

/* Gmailスレッド一覧 */
ul.thread-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
ul.thread-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eef2f5;
}
ul.thread-list li:last-child { border-bottom: 0; }
ul.thread-list li.clickable:hover { background: var(--c-accent-tint); }
.th-date { color: var(--c-muted); font-size: 12px; white-space: nowrap; }
.th-subject { min-width: 0; overflow-wrap: anywhere; }
.th-from { color: var(--c-muted); font-size: 12px; overflow-wrap: anywhere; }

/* Gmail本文モーダル */
.mail-head { font-size: 12px; color: var(--c-muted); }
.mail-body { font-size: 13px; }

.doc-links a { white-space: nowrap; }

/* ==========================================================================
   同期ビュー
   ========================================================================== */

.csv-guide ol { margin: 0; padding-left: 20px; font-size: 13px; }
.csv-guide li { margin: 4px 0; }

.sync-run .sync-btn#sync-auto { padding: 7px 22px; font-size: 14px; }
ul.sync-progress { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
ul.sync-progress:empty { margin: 0; }
ul.sync-progress li {
  padding: 5px 2px;
  border-bottom: 1px solid #eef2f5;
  font-variant-numeric: tabular-nums;
}
ul.sync-progress li.skip { color: var(--c-muted); }
ul.sync-progress li.ng { color: var(--c-danger); font-weight: 600; }
ul.sync-progress li.done { color: var(--c-ok); font-weight: 600; border-bottom: 0; }

.stage-detail { margin-top: 12px; font-size: 13px; }
.stage-detail summary { cursor: pointer; color: var(--c-accent); user-select: none; }
.stage-detail summary:hover { text-decoration: underline; }
.stage-buttons { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }

.cand-select, .cust-select { min-width: 170px; }

/* ==========================================================================
   汎用ユーティリティ
   ========================================================================== */

.muted { color: var(--c-muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.flex { display: flex; gap: 8px; align-items: center; }
.flex-between { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.grow { flex: 1; }
.mt { margin-top: 16px; }
.mb0 { margin-bottom: 0; }

/* ==========================================================================
   レスポンシブ（768px以下: ナビは横スクロールタブ・テーブルは横スクロール）
   ========================================================================== */

@media (max-width: 768px) {
  main#view { padding: 12px 10px 40px; }
  .app-header { padding: 0 10px; gap: 8px; }
  .app-title { font-size: 13.5px; }
  .last-sync-wrap { display: none; }
  .header-search { flex: 1 1 auto; min-width: 110px; }
  .app-nav a { padding: 10px 13px; }
  .card { padding: 12px; }
  table.table, table.data-table { font-size: 12.5px; }
  .table th, .table td, .data-table th, .data-table td { padding: 6px 8px; }
  .table-wrap { max-height: calc(100vh - 170px); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .kpi-value { font-size: 19px; }
  .chart-box { height: 220px; }
  .modal-backdrop { padding: 16px 8px; }
  .status-legend { margin-left: 0; }
  .filters input[type="search"] { max-width: none; }
  .view-header .actions { margin-left: 0; }
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .tabs > button { padding: 4px 10px; }
  dl.kv { grid-template-columns: 1fr; gap: 0 0; }
  dl.kv dt { margin-top: 6px; }
}

/* ==========================================================================
   印刷（請求・入金ほか一覧を綺麗に）
   ========================================================================== */

@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; font-size: 12px; }
  .app-header, .app-nav, .toast-container, .modal-backdrop, .modal-overlay,
  .form-actions, .action-buttons, .line-tools, .stage-detail,
  .search-combo-list, .combo-list, .filters, .view-header .actions,
  .btn, button, input[type="search"] { display: none !important; }

  /* ツールバーは操作系のみ隠し、凡例は残す */
  .toolbar button, .toolbar input, .toolbar select, .toolbar label { display: none !important; }
  .status-legend { display: inline-flex !important; margin-left: 0; }

  main#view { max-width: none; padding: 0; }
  .card, .kpi, .chart-wrap { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .table-wrap {
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border-color: #999;
  }
  .table-wrap thead th, .table-wrap tfoot td, .table-wrap tfoot th { position: static; }
  thead { display: table-header-group; }
  table.table, table.data-table { font-size: 10.5px; }
  .table th, .table td, .data-table th, .data-table td {
    padding: 3px 6px;
    border-bottom: 1px solid #999;
  }
  .table th, .data-table th { background: #eee !important; color: #000; }
  .table tbody tr:nth-child(even), .data-table tbody tr:nth-child(even) { background: none; }
  .table tbody tr:hover > td, .data-table tbody tr:hover > td { background-image: none; }

  /* ステータス色・バッジ・凡例は印刷でも色を保持（契約§7） */
  tr, td, th, .badge, .legend-item, .bill-summary {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bill-summary { border-color: #999; margin-top: 8px !important; }
  a { color: #000; text-decoration: none; }
  p.loading, .view-loading { display: none; }
}

/* ==========================================================================
   モーション低減設定への配慮
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  .modal, .modal-backdrop { animation: none; }
  .busy-indicator .spinner,
  p.loading::before, .view-loading::before {
    animation: spinner-pulse 1.2s ease-in-out infinite;
    border-color: var(--c-line-strong);
    border-top-color: var(--c-accent);
  }
  @keyframes spinner-pulse { 50% { opacity: .35; } }
}

/* ============================================================
   ダッシュボード v2 — 年間KPI・クール別カード・月別ヒートマップ
   達成/未達は 色 + アイコン(✓/▲/▶) + % の三重表現（色覚多様性対応）
   ============================================================ */
.sec-title { margin: 22px 0 10px; font-size: 15px; font-weight: 700; color: var(--ink, #1a2b3c); }
.sec-note { font-size: 12px; font-weight: 400; color: #6b7684; margin-left: 8px; }

/* 達成ステートの共通トークン */
.ach-ok     { --ach-fg: #1b6e46; --ach-bg: #e6f4ec; --ach-bar: #2e8b57; }
.ach-ng     { --ach-fg: #a33b1f; --ach-bg: #fbeae4; --ach-bar: #d9634a; }
.ach-now    { --ach-fg: #0b5b8a; --ach-bg: #e8f2f9; --ach-bar: #2f88c0; }
.ach-future { --ach-fg: #6b7684; --ach-bg: #f3f5f7; --ach-bar: #c3cad3; }
.ach-na     { --ach-fg: #6b7684; --ach-bg: #f3f5f7; --ach-bar: #c3cad3; }

.ach-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--ach-fg, #6b7684); background: var(--ach-bg, #f3f5f7);
  border: 1px solid color-mix(in srgb, var(--ach-fg, #6b7684) 25%, transparent);
}

/* --- 年間KPI --- */
.annual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 14px 0 4px; }
.annual-card {
  background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: 16px 18px 14px;
  box-shadow: 0 1px 2px rgba(16, 34, 53, .05);
}
.annual-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.annual-name { font-size: 14px; font-weight: 700; color: #46566a; letter-spacing: .04em; }
.annual-nums { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.annual-main { font-variant-numeric: tabular-nums; }
.annual-actual { font-size: 26px; font-weight: 700; color: #16283b; }
.annual-sep { margin: 0 6px; color: #9aa6b4; }
.annual-budget { font-size: 15px; color: #5d6b7c; }
.annual-rate { font-size: 24px; font-weight: 700; color: var(--ach-fg, #16283b); font-variant-numeric: tabular-nums; }
.annual-sub { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: #6b7684; font-variant-numeric: tabular-nums; }
.progress { height: 8px; background: #edf1f5; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.progress.slim { height: 5px; margin-top: 4px; }
.progress-bar { height: 100%; border-radius: 999px; background: var(--ach-bar, #2f88c0); transition: width .25s ease-out; }

/* --- クール別カード --- */
.cool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cool-card {
  background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: 12px 14px;
  border-top: 3px solid var(--ach-bar, #c3cad3);
  box-shadow: 0 1px 2px rgba(16, 34, 53, .05);
}
.cool-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cool-name { font-weight: 700; font-size: 13.5px; color: #2c3d50; }
.cool-metric { margin-top: 8px; }
.cool-metric-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cool-metric-name { color: #6b7684; width: 2.5em; flex: none; }
.cool-nums { color: #2c3d50; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cool-sep { color: #9aa6b4; }
.cool-rate { font-weight: 700; color: var(--ach-fg, #2c3d50); flex: none; }
.cool-rate.ach-ok::before { content: "✓"; margin-right: 2px; }
.cool-rate.ach-ng::before { content: "▲"; margin-right: 2px; font-size: 10px; }

/* --- 月別ヒートマップ --- */
.heat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.heat-cell {
  border-radius: 6px; padding: 8px 6px; text-align: center; cursor: pointer;
  border: 1px solid #dde3ea; background: #fff; transition: filter .12s;
  font-variant-numeric: tabular-nums;
}
.heat-cell:hover { filter: brightness(.96); }
.heat-mo { font-size: 11.5px; font-weight: 700; color: #46566a; display: flex; align-items: center; justify-content: center; gap: 4px; }
.heat-now-dot { width: 6px; height: 6px; border-radius: 50%; background: #0b69a3; display: inline-block; }
.heat-val { font-size: 12.5px; font-weight: 700; color: #16283b; margin-top: 3px; white-space: nowrap; }
.heat-rate { font-size: 11px; margin-top: 2px; font-weight: 600; }
.heat-ok    { background: #e0f2e9; border-color: #bfe3d0; } .heat-ok .heat-rate { color: #1b6e46; }
.heat-warn1 { background: #fdf3d7; border-color: #ecdba4; } .heat-warn1 .heat-rate { color: #8a6d1a; }
.heat-warn2 { background: #fbe3cb; border-color: #eccaa4; } .heat-warn2 .heat-rate { color: #92561d; }
.heat-ng    { background: #f9d9d2; border-color: #e8b7ab; } .heat-ng .heat-rate { color: #a33b1f; }
.heat-future { background: #f6f7f9; } .heat-future .heat-val { color: #8b96a3; }
.heat-na { background: #fff; }
.heat-current { outline: 2px solid #0b69a3; outline-offset: 1px; }
.heat-rate .muted { color: #8b96a3; font-weight: 400; }

/* --- アラート圧縮 --- */
.alert-band.alert-none { background: #f2f7f3; border: 1px solid #cfe4d4; color: #4d6b52; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.alert-more summary { cursor: pointer; font-size: 12.5px; color: #0b69a3; padding: 4px 2px; user-select: none; }
.alert-more[open] summary { margin-bottom: 4px; }

/* --- レスポンシブ --- */
@media (max-width: 1000px) {
  .cool-grid { grid-template-columns: repeat(2, 1fr); }
  .heat-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 640px) {
  .annual-grid { grid-template-columns: 1fr; }
  .heat-grid { grid-template-columns: repeat(4, 1fr); }
  .annual-actual { font-size: 21px; }
}

/* 月別セクションヘッダー（タイトル+粗利/売上タブを1行に） */
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.sec-head .sec-title { margin: 0 0 10px; }
.sec-head .tabs { margin-bottom: 6px; }
.annual-name .sec-note { margin-left: 6px; }

/* ============================================================
   ダッシュボード v3 — パネルグリッド+ゲージ+チームバー+達成スタンプ
   ============================================================ */
.panel {
  background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
  padding: 14px 16px; box-shadow: 0 1px 2px rgba(16,34,53,.05); margin-top: 14px;
}
.panel-title { font-size: 13.5px; font-weight: 700; color: #2c3d50; margin-bottom: 10px; }
.dash-top { display: grid; grid-template-columns: minmax(300px, 1.05fr) 1.25fr minmax(230px, .85fr); gap: 14px; align-items: stretch; }
.dash-top .panel { margin-top: 14px; }

/* ゲージ */
.hero-gauges { display: flex; flex-direction: column; gap: 14px; }
.gauge { display: flex; gap: 14px; align-items: center; position: relative; }
.gauge-ring {
  --p: 0; --ring: var(--ach-bar, #2f88c0);
  width: 108px; height: 108px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), #e9edf2 0);
  display: flex; align-items: center; justify-content: center;
}
.gauge-sub .gauge-ring { width: 84px; height: 84px; }
.gauge-center {
  width: 78%; height: 78%; background: #fff; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge-pct { font-size: 19px; font-weight: 800; color: var(--ach-fg, #16283b); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gauge-sub .gauge-pct { font-size: 15px; }
.gauge-name { font-size: 11px; color: #6b7684; font-weight: 700; margin-top: 1px; }
.gauge-nums { flex: 1; min-width: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.gauge-row { display: flex; justify-content: space-between; gap: 8px; padding: 1.5px 0; }
.gauge-row span { color: #6b7684; }
.gauge-row b { font-weight: 600; color: #1e2f42; white-space: nowrap; }
.gauge-primary .gauge-row b { font-weight: 700; }
.gauge-diff b { color: var(--ach-fg, #1e2f42); }

/* 達成スタンプ（シン・トセイ風） */
.stamp-ok {
  position: absolute; top: -6px; right: -2px; z-index: 2;
  width: 46px; height: 46px; border: 2.5px solid #d33a2c; border-radius: 50%;
  color: #d33a2c; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-12deg); background: rgba(255,255,255,.75);
  letter-spacing: .05em;
}

/* クール2×2 */
.cool-2x2 { grid-template-columns: repeat(2, 1fr) !important; }
.panel-cool .cool-card { border-radius: 6px; }

/* チーム達成率バー */
.team-bars { display: flex; flex-direction: column; gap: 8px; }
.team-row {
  display: grid; grid-template-columns: 3.2em 1fr 4.2em; gap: 8px; align-items: center;
  border: 1px solid transparent; background: none; padding: 5px 6px; border-radius: 6px;
  cursor: pointer; font: inherit; text-align: left; width: 100%;
}
.team-row:hover { background: #f2f6fa; }
.team-row.team-active { border-color: #0b69a3; background: #f0f7fc; }
.team-name { font-size: 12.5px; font-weight: 700; color: #2c3d50; }
.team-track { height: 10px; background: #edf1f5; border-radius: 999px; overflow: hidden; }
.team-fill { display: block; height: 100%; border-radius: 999px; background: var(--ach-bar, #2f88c0); }
.team-rate { font-size: 12.5px; font-weight: 700; text-align: right; color: var(--ach-fg, #2c3d50); font-variant-numeric: tabular-nums; }

/* レスポンシブ */
@media (max-width: 1150px) {
  .dash-top { grid-template-columns: 1fr 1fr; }
  .panel-team { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dash-top { grid-template-columns: 1fr; }
}